refactor: simplify css vars usage (jd-solanki#129)

therealokoro · Feb 5, 2023 · 84c5f1e · 84c5f1e
1 parent b88d998
commit 84c5f1e
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 49 deletions.
diff --git a/docs/components/Playground.vue b/docs/components/Playground.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 </script>
 
 <template>

diff --git a/packages/anu-vue/src/components/card/ACard.vue b/packages/anu-vue/src/components/card/ACard.vue
@@ -36,7 +36,7 @@ else
 
 <template>
   <div
-    class="a-card relative overflow-hidden bg-[hsla(var(--a-layer),var(--un-bg-opacity,1))]"
+    class="a-card relative overflow-hidden bg-[hsla(var(--a-surface),var(--un-bg-opacity,1))]"
     :class="classes"
     :style="[
       ...styles,

diff --git a/packages/anu-vue/src/components/loader/ALoader.vue b/packages/anu-vue/src/components/loader/ALoader.vue
@@ -15,7 +15,7 @@ defineOptions({
 
 const slots = useSlots()
 
-const { styles } = useColor(toRef(props, 'color'), 'rating-color')
+const { styles } = useColor(toRef(props, 'color'), 'spinner-color')
 
 // TODO: Create composable useLazyVShow
 const isShownOnce = ref(props.loading)
@@ -55,7 +55,7 @@ if (props.fullPage) {
     ]"
   >
     <div
-      style="background: var(--a-loader-overlay-bg)"
+      :style="{ background: props.overlay ? 'hsla(var(--a-loader-overlay-bg),var(--a-loader-overlay-bg-opacity))' : undefined }"
       class="a-loader-overlay"
       :class="[
         (props.overlay || props.fullPage) && 'w-full h-full flex flex-col gap-3 items-center justify-center overflow-hidden',

diff --git a/packages/anu-vue/src/components/select/ASelect.vue b/packages/anu-vue/src/components/select/ASelect.vue
@@ -168,7 +168,7 @@ const selectedValue = computed(() => {
     <ul
       v-show="isOptionsVisible"
       ref="refFloating"
-      class="a-select-options-container absolute bg-[hsl(var(--a-layer))]"
+      class="a-select-options-container absolute bg-[hsl(var(--a-surface))]"
       :class="props.optionsWrapperClasses"
       @click="closeOptions"
     >

diff --git a/packages/anu-vue/src/composables/useLayer.ts b/packages/anu-vue/src/composables/useLayer.ts
@@ -87,10 +87,10 @@ export const useLayer = () => {
     // ℹ️ For light variant we will keep the overlay color of `--a-layer` instead of adopting the layer color. We will add it regardless of its theme color or not.
     if (propVariant === 'light') {
       // Set loader typography's title & subtitle opacity to 1
-      classes.push('[&_.a-loader-overlay]-[--a-title-opacity:1] [&_.a-loader-overlay]-[--a-subtitle-opacity:1]')
+      classes.push('[&_.a-loader-overlay]-[--a-title-opacity:1] [&_.a-loader-overlay]-[--a-subtitle-opacity:1] [--a-loader-overlay-bg-opacity:.85]')
 
       // Loader overlay
-      styles.push({ '--a-loader-overlay-bg': 'hsla(var(--a-layer),var(--a-loader-overlay-bg-opacity))' })
+      styles.push({ '--a-loader-overlay-bg': 'var(--a-theme-color)' })
     }
 
     /*
@@ -103,25 +103,26 @@ export const useLayer = () => {
     */
 
     if (_isThemeColor) {
-      styles.push({ '--a-layer-hsl-color': `var(--a-${propColor})` })
+      styles.push({ '--a-layer': `var(--a-${propColor})` })
 
       if (propVariant === 'fill') {
         // Background
-        styles.push({ background: `hsla(var(--a-${propColor}),var(--un-bg-opacity))` })
-        classes.push('[--un-bg-opacity:1]')
+        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        classes.push('[--a-layer-opacity:1]')
 
         // Text
         if (propColor !== undefined && propColor !== null)
           classes.push('text-white')
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': `hsla(var(--a-${propColor}),var(--un-bg-opacity))` })
+        styles.push({ '--a-loader-overlay-bg': 'var(--a-layer)' })
+        classes.push('[--a-loader-overlay-bg-opacity:1]')
       }
 
       else if (propVariant === 'light') {
         // Background
-        styles.push({ background: `hsla(var(--a-${propColor}),var(--un-bg-opacity))` })
-        classes.push('[--un-bg-opacity:0.15]')
+        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        classes.push('[--a-layer-opacity:0.15]')
 
         // text
         if (propColor !== undefined && propColor !== null)
@@ -133,33 +134,36 @@ export const useLayer = () => {
       else if (propVariant === 'outline') {
         // Border
         classes.push('border-width-1', 'border-solid')
-        styles.push({ borderColor: `hsl(var(--a-${propColor})` })
+        styles.push({ borderColor: 'hsl(var(--a-layer)' })
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          classes.push(`text-${propColor}`)
+          classes.push('text-[hsl(var(--a-layer))]')
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': 'hsl(var(--a-layer))' })
+        styles.push({ '--a-loader-overlay-bg': 'var(--a-surface)' })
+        classes.push('[--a-loader-overlay-bg-opacity:1]')
       }
 
       else if (propVariant === 'text') {
         // Text
         if (propColor !== undefined && propColor !== null)
-          classes.push(`text-${propColor}`)
+          classes.push('text-[hsl(var(--a-layer))]')
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': 'hsl(var(--a-layer))' })
+        // styles.push({ '--a-loader-overlay-bg': 'inherit' })
+        classes.push('[--a-loader-overlay-bg-opacity:1]')
       }
     }
     else if (propColor) {
       const _colord = colord(propColor as string)
 
-      styles.push({ '--a-layer-hsl-color': _colord.toHslString().replace(/hsla?\(([\d\s]+,[\d\s]+%,[\d\s]+%).*/gm, '$1') })
+      styles.push({ '--a-layer': _colord.toHslString().replace(/hsla?\(([\d\s]+,[\d\s]+%,[\d\s]+%).*/gm, '$1') })
 
       if (propVariant === 'fill') {
         // Background
-        styles.push({ background: propColor })
+        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        classes.push('[--a-layer-opacity:1]')
 
         // Text
         if (propColor !== undefined && propColor !== null)
@@ -171,34 +175,34 @@ export const useLayer = () => {
       }
       else if (propVariant === 'light') {
         // Background
-        const _hslaColor = _colord.toHsl()
-        styles.push({ background: `hsla(${_hslaColor.h}, ${_hslaColor.s}%, ${_hslaColor.l}%, 0.15)` })
+        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        classes.push('[--a-layer-opacity:0.15]')
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: propColor })
+          styles.push({ color: 'hsl(var(--a-layer))' })
 
         // We have set loader overlay color above (before _isThemeColor condition)
       }
       else if (propVariant === 'outline') {
         // Border
         classes.push('border-width-1', 'border-solid')
-        styles.push({ borderColor: propColor })
+        styles.push({ borderColor: 'hsl(var(--a-layer))' })
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: propColor })
+          styles.push({ color: 'hsl(var(--a-layer))' })
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': 'hsl(var(--a-layer))' })
+        styles.push({ '--a-loader-overlay-bg': 'inherit' })
       }
       else if (propVariant === 'text') {
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: propColor })
+          styles.push({ color: 'hsl(var(--a-layer))' })
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': 'hsl(var(--a-layer))' })
+        styles.push({ '--a-loader-overlay-bg': 'inherit' })
       }
     }
 

diff --git a/packages/anu-vue/test/__snapshots__/ABtn.test.ts.snap b/packages/anu-vue/test/__snapshots__/ABtn.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Testing ABtn > can mount component 1`] = `
-"<button tabindex=\\"0\\" style=\\"--a-title-color: white; --a-subtitle-color: white; --a-layer-hsl-color: var(--a-primary); --a-loader-overlay-bg: hsla(var(--a-primary),var(--un-bg-opacity)); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center relative a-btn states a-title-opacity-100 a-subtitle-opacity-100 [--un-bg-opacity:1] text-white\\">
+"<button tabindex=\\"0\\" style=\\"--a-title-color: white; --a-subtitle-color: white; --a-layer: var(--a-primary); --a-loader-overlay-bg: var(--a-layer); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center relative a-btn states a-title-opacity-100 a-subtitle-opacity-100 [--a-layer-opacity:1] text-white [--a-loader-overlay-bg-opacity:1]\\">
   <!--v-if-->Click me
   <!--v-if-->
 </button>"
@@ -18,7 +18,8 @@ exports[`Testing ABtn > has proper classes 1`] = `
   "states",
   "a-title-opacity-100",
   "a-subtitle-opacity-100",
-  "[--un-bg-opacity:1]",
+  "[--a-layer-opacity:1]",
   "text-white",
+  "[--a-loader-overlay-bg-opacity:1]",
 ]
 `;
diff --git a/packages/anu-vue/test/__snapshots__/ATable.test.ts.snap b/packages/anu-vue/test/__snapshots__/ATable.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Testing ATable & ADataTable > mount component 1`] = `
-"<div class=\\"a-card relative overflow-hidden bg-[hsla(var(--a-layer),var(--un-bg-opacity,1))] a-table a-data-table\\" style=\\"--a-spacing: 1;\\">
+"<div class=\\"a-card relative overflow-hidden bg-[hsla(var(--a-surface),var(--un-bg-opacity,1))] a-table a-data-table\\" style=\\"--a-spacing: 1;\\">
   <!-- 👉 Image -->
   <!--v-if-->
   <!-- 👉 Typography -->
@@ -65,9 +65,9 @@ exports[`Testing ATable & ADataTable > mount component 1`] = `
       <!--teleport start-->
       <!--teleport end-->
     </div>
-    <div class=\\"a-data-table-pagination-navigation\\"><button tabindex=\\"-1\\" style=\\"--a-layer-hsl-color: var(--a-primary); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center relative a-btn-icon-only opacity-50 pointer-events-none states a-title-opacity-100 a-subtitle-opacity-100 a-title-primary a-subtitle-primary a-data-table-paginate-previous\\" disabled=\\"\\"><i class=\\"i-bx-left-arrow-alt\\"></i>
+    <div class=\\"a-data-table-pagination-navigation\\"><button tabindex=\\"-1\\" style=\\"--a-layer: var(--a-primary); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center relative a-btn-icon-only opacity-50 pointer-events-none states a-title-opacity-100 a-subtitle-opacity-100 a-title-primary a-subtitle-primary a-data-table-paginate-previous\\" disabled=\\"\\"><i class=\\"i-bx-left-arrow-alt\\"></i>
         <!--v-if-->
-      </button><button tabindex=\\"0\\" style=\\"--a-layer-hsl-color: var(--a-primary); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center relative a-btn-icon-only states a-title-opacity-100 a-subtitle-opacity-100 a-title-primary a-subtitle-primary a-data-table-paginate-next\\"><i class=\\"i-bx-right-arrow-alt\\"></i>
+      </button><button tabindex=\\"0\\" style=\\"--a-layer: var(--a-primary); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center relative a-btn-icon-only states a-title-opacity-100 a-subtitle-opacity-100 a-title-primary a-subtitle-primary a-data-table-paginate-next\\"><i class=\\"i-bx-right-arrow-alt\\"></i>
         <!--v-if-->
       </button></div>
   </div>

diff --git a/packages/preset-theme-default/src/index.ts b/packages/preset-theme-default/src/index.ts
@@ -28,20 +28,17 @@ export function presetThemeDefault(options: PresetOptions = {}): Preset {
       },
     },
     safelist: [
-      ...colors.map(c => `[--a-layer-color:hsla(var(--a-${c}),var(--un-bg-opacity,1))]`),
       ...colors.map(c => `bg-${c}`),
       ...colors.map(c => `hover:bg-${c}`),
 
       ...colors.map(c => `border-${c}`),
-      ...[...colors, '$a-layer-text'].map(c => `text-${c}`),
+      ...colors.map(c => `text-${c}`),
       ...colors.map(c => `shadow-${c}`),
       ...colors.map(c => `after:bg-${c}`),
-      ...colors.map(c => `next:checked:bg-${c}`),
-      ...colors.map(c => `next:checked:border-${c}`),
 
       // Typography
-      ...[...colors, 'layer-text', 'white'].map(c => `a-title-${c}`),
-      ...[...colors, 'layer-text', 'white'].map(c => `a-subtitle-${c}`),
+      ...colors.map(c => `a-title-${c}`),
+      ...colors.map(c => `a-subtitle-${c}`),
       ...['top', 'right', 'bottom', 'left'].map(dir => `a-drawer-anchor-${dir}`),
     ],
     rules,

diff --git a/packages/preset-theme-default/src/rules.ts b/packages/preset-theme-default/src/rules.ts
@@ -9,13 +9,13 @@ const rules: Preset['rules'] = [
 
   // Typography
   [
-    /^a-(title|subtitle|text)-([-\w]+)$/,
+    /^a-(title|subtitle)-([-\w]+)$/,
     ([, type, c]: string[]) => ({
       [`--a-${type}-color`]: `var(--a-${c})`,
     }),
   ],
   [
-    /^a-(title|subtitle|text)-opacity-(\d+)$/,
+    /^a-(title|subtitle)-opacity-(\d+)$/,
     ([, type, o]: string[]) => ({
       [`--a-${type}-opacity`]: `${Number(o) * 0.01}`,
     }),

diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
@@ -10,10 +10,19 @@ $body-color: hsla(var(--a-base-color), 0.68);
 
 :root {
     --a-base-color: 0, 10%, 20%;
-    --a-layer: 0, 0%, 100%;
+
+    // ℹ️ Theme color (for now Used for light variant overlay color)
+    --a-theme-color: 0, 0%, 100%;
+
+    // ℹ️ Used for background on body like select options, card, etc
+    --a-surface: 0, 0%, 100%;
+
     --a-border-opacity: 0.12;
-    --a-loader-overlay-bg: hsla(var(--a-layer),var(--a-loader-overlay-bg-opacity));
-    --a-loader-overlay-bg-opacity: 0.85;
+    --a-loader-overlay-bg: var(--a-layer);
+
+    // ℹ️ Only light variant will have 0.35 or something else
+    --a-loader-overlay-bg-opacity: 1;
+
     --a-overlay-color: 0, 0%, 0%;
     --a-overlay-opacity: 0.35;
 
@@ -23,10 +32,10 @@ $body-color: hsla(var(--a-base-color), 0.68);
     --a-warning: 42.4, 100%, 50%;
     --a-danger: 358.3, 100%, 64.9%;
 
+    // TODO: Add support to customize contrast color in => packages/anu-vue/src/utils/colord.ts
     // Contrast colors
-    // --a-contrast-dark: hsla(var(--a-base-color), var(--a-text-emphasis-medium-opacity));
-    --a-contrast-dark: #000;
-    --a-contrast-light: #fff;
+    // --a-contrast-dark: #000;
+    // --a-contrast-light: #fff;
 
     // text emphasis
     --a-text-emphasis-high-opacity: 0.87;
@@ -72,7 +81,8 @@ $body-color: hsla(var(--a-base-color), 0.68);
 
 :root.dark {
   --a-base-color: 0, 0%, 94%;
-  --a-layer: 0, 0%, 12%;
+  --a-theme-color: 0, 0%, 0%;
+  --a-surface: 0, 0%, 12%;
   --a-overlay-opacity: 0.5;
 
   --a-primary: 261, 73%, 66.3%;

diff --git a/packages/preset-theme-default/src/shortcuts.ts b/packages/preset-theme-default/src/shortcuts.ts
@@ -52,7 +52,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
     'a-badge-dot': 'spacing:min-w-[0.666666666666667em] spacing:h-[0.666666666666667em]',
 
     // with text-xs, outline: 0.166666666666667em => 2px
-    'a-badge-bordered': 'outline em:spacing:outline-width-[0.166666666666667em] outline-[hsl(var(--a-layer))]',
+    'a-badge-bordered': 'outline em:spacing:outline-width-[0.166666666666667em] outline-[hsl(var(--a-theme-color))]',
 
     // 👉 Base Input
     'a-base-input-root': 'em:spacing:gap-y-1',