From 92114c9289dec8525187d267179831bbcd5bf7e4 Mon Sep 17 00:00:00 2001
From: "E.T" <8301962+ETLaurent@users.noreply.github.com>
Date: Wed, 29 Jan 2025 14:39:50 +0100
Subject: [PATCH] use a single checkerboard component and fix it (#4844)

* use a single shared checkerboard component to fix it in color field and palette

* changelog

* use color variables

* fix changelog

* adds transparency checkerboard to RT color control (#4850)

---------

Co-authored-by: Etienne Laurent <git.sabbath464@passmail.net>
Co-authored-by: Stuart Romanek <stuart@apostrophecms.com>
---
 CHANGELOG.md                                  |  1 +
 .../ui/apos/components/AposColor.vue          | 14 +--
 .../ui/apos/lib/AposColorAlpha.vue            |  7 +-
 .../ui/apos/lib/AposColorCheckerboard.vue     | 90 -------------------
 .../ui/apos/components/AposTiptapColor.vue    | 12 +++
 .../ui/ui/apos/components/AposButton.vue      |  5 +-
 .../apos/components/AposColorCheckerboard.vue | 20 +++++
 .../ui/ui/apos/scss/global/_theme.scss        |  4 +
 8 files changed, 45 insertions(+), 108 deletions(-)
 delete mode 100644 modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue
 create mode 100644 modules/@apostrophecms/ui/ui/apos/components/AposColorCheckerboard.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 375d57d184..b8844f5119 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 * Field inputs inside an array modal can now be focused/tabbed via keyboard
 * Fixes admin bar overlapping widget area add menu.
+* Fixed the checkered background for gauging color transparency.
 
 ### Changes
 
diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
index 7be8256302..38b0e448ca 100644
--- a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
@@ -32,7 +32,7 @@
           class="apos-color__active-color"
           :style="{ background: activeColor }"
         />
-        <Checkboard />
+        <AposColorCheckerboard />
       </div>
     </div>
     <div v-if="!disableFields" class="apos-color__field">
@@ -97,7 +97,7 @@
           class="apos-color__presets-color"
           @click="handlePreset(c)"
         >
-          <Checkboard />
+          <AposColorCheckerboard />
         </div>
       </template>
     </div>
@@ -110,7 +110,6 @@ import editableInput from '../lib/AposColorEditableInput.vue';
 import saturation from '../lib/AposColorSaturation.vue';
 import hue from '../lib/AposColorHue.vue';
 import alpha from '../lib/AposColorAlpha.vue';
-import checkboard from '../lib/AposColorCheckerboard.vue';
 
 const defaultOptions = { ...apos.modules['@apostrophecms/color-field'].defaultOptions };
 
@@ -120,8 +119,7 @@ export default {
     Saturation: saturation,
     Hue: hue,
     Alpha: alpha,
-    EditableContent: editableInput,
-    Checkboard: checkboard
+    EditableContent: editableInput
   },
   mixins: [ colorMixin ],
   props: {
@@ -296,10 +294,6 @@ export default {
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 4px rgb(0 0 0 / 25%);
 }
 
-.apos-color__color-wrap .apos-color__checkerboard {
-  background-size: auto;
-}
-
 .apos-color__field {
   display: flex;
   padding-top: 4px;
@@ -353,7 +347,7 @@ export default {
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
 }
 
-.apos-color__presets-color .apos-color__checkerboard {
+.apos-color__presets-color {
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
   border-radius: 3px;
 }
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue
index 5fb7c7b822..00ffc48bcf 100644
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="apos-color__alpha">
     <div class="apos-color__alpha-checkboard-wrap">
-      <Checkboard />
+      <AposColorCheckerboard />
     </div>
     <div class="apos-color__alpha-gradient" :style="{ background: gradientColor }" />
     <div
@@ -19,13 +19,8 @@
 </template>
 
 <script>
-import checkboard from './AposColorCheckerboard.vue';
-
 export default {
   name: 'AposColorAlpha',
-  components: {
-    Checkboard: checkboard
-  },
   props: {
     value: {
       type: Object,
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue
deleted file mode 100644
index 4db27e8c37..0000000000
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="apos-color__checkerboard" :style="bgStyle" />
-</template>
-
-<script>
-const _checkboardCache = {};
-export default {
-  name: 'AposColorCheckerboard',
-  props: {
-    size: {
-      type: [ Number, String ],
-      default: 8
-    },
-    white: {
-      type: String,
-      default: '#fff'
-    },
-    grey: {
-      type: String,
-      default: '#e6e6e6'
-    }
-  },
-  computed: {
-    bgStyle() {
-      return {
-        'background-image': `url(${getCheckboard(this.white, this.grey, this.size)})`
-      };
-    }
-  }
-};
-
-/**
- * get base 64 data by canvas
- *
- * @param {String} c1 hex color
- * @param {String} c2 hex color
- * @param {Number} size
- */
-
-function renderCheckboard(c1, c2, size) {
-  // Dont Render On Server
-  if (typeof document === 'undefined') {
-    return null;
-  }
-
-  const canvas = document.createElement('canvas');
-  canvas.width = canvas.height = size * 2;
-  const ctx = canvas.getContext('2d');
-  // If no context can be found, return early.
-  if (!ctx) {
-    return null;
-  }
-
-  ctx.fillStyle = c1;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = c2;
-  ctx.fillRect(0, 0, size, size);
-  ctx.translate(size, size);
-  ctx.fillRect(0, 0, size, size);
-  return canvas.toDataURL();
-}
-
-/**
- * get checkboard base data and cache
- *
- * @param {String} c1 hex color
- * @param {String} c2 hex color
- * @param {Number} size
- */
-
-function getCheckboard(c1, c2, size) {
-  const key = `${c1},${c2},${size}`;
-
-  if (_checkboardCache[key]) {
-    return _checkboardCache[key];
-  }
-
-  const checkboard = renderCheckboard(c1, c2, size);
-  _checkboardCache[key] = checkboard;
-  return checkboard;
-}
-</script>
-
-<style>
-.apos-color__checkerboard {
-  position: absolute;
-  inset: 0;
-  background-size: contain;
-}
-</style>
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
index 9f3e8592b6..1f37cb8508 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
@@ -17,6 +17,7 @@
       @click="click"
     >
       <template #label>
+        <AposColorCheckerboard class="apos-color-control__checkerboard" />
         <AposIndicator icon="chevron-down-icon" />
       </template>
     </AposButton>
@@ -244,4 +245,15 @@ export default defineComponent({
   justify-content: flex-end;
   margin-top: 10px;
 }
+
+.apos-color-control__checkerboard {
+  z-index: $z-index-under;
+  position: absolute;
+  top: 1.5px;
+  left: 1.5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  pointer-events: none;
+}
 </style>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue b/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue
index 7d521499d7..31b47a3c3f 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue
@@ -29,7 +29,9 @@
         class="apos-button__color-preview"
       >
         <span :style="colorStyle" class="apos-button__color-preview__swatch" />
-        <span class="apos-button__color-preview__checkerboard" />
+        <div class="apos-button__color-preview__checkerboard">
+          <AposColorCheckerboard />
+        </div>
       </span>
       <div class="apos-button__content">
         <AposIndicator
@@ -358,7 +360,6 @@ export default {
 
   .apos-button__color-preview__checkerboard {
     z-index: $z-index-base;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC');
   }
 
   .apos-button--small {
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposColorCheckerboard.vue b/modules/@apostrophecms/ui/ui/apos/components/AposColorCheckerboard.vue
new file mode 100644
index 0000000000..88232b2939
--- /dev/null
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposColorCheckerboard.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="apos-color__checkerboard" />
+</template>
+
+<script>
+export default {
+  name: 'AposColorCheckerboard'
+};
+</script>
+
+<style>
+.apos-color__checkerboard {
+  background-image: repeating-conic-gradient(
+    var(--a-checker-board-gray) 0% 25%,
+    var(--a-checker-board-white) 0% 50%
+  );
+  background-size: 8px 8px;
+  height: 100%;
+}
+</style>
diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss
index f21654115c..e01b2b8361 100644
--- a/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss
+++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss
@@ -57,6 +57,10 @@
   --a-spreadsheet: #2ecc71;
   --a-pdf: #e74c3c;
 
+  // Checkerboard colors
+  --a-checker-board-white: #fff;
+  --a-checker-board-gray: #d3d3d3;
+
   // Font-Family
   --a-family-default: -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI",
     "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji",