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 <[email protected]> Co-authored-by: Stuart Romanek <[email protected]>
apostrophecms · Jan 29, 2025 · 92114c9 · 92114c9
1 parent 7da11c1
commit 92114c9
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 108 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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",