refactor(css)!: CSS vars renamed

docs/.vitepress/theme/style.css

@@ -1,7 +1,7 @@
 /* Styles adjusting VitePress according to theme */
 :root {
     --vp-background: 0, 0%, 100%;
-    --vp-c-text-1: hsla(var(--a-base-color), var(--a-text-emphasis-medium-opacity));
+    --vp-c-text-1: hsla(var(--a-base-c), var(--a-text-emphasis-medium-opacity));
     --vp-c-bg: hsl(var(--vp-background));
     --vp-c-bg-alt: hsl(var(--vp-background));
 
@@ -41,7 +41,7 @@ SECTION VitePress
 
 @media (min-width: 960px) {
     .VPNavBar>.container {
-        border-bottom: thin solid hsla(var(--a-base-color), var(--a-border-opacity));
+        border-bottom: thin solid hsla(var(--a-base-c), var(--a-border-opacity));
     }
 }
 
@@ -71,7 +71,7 @@ SECTION VitePress
 
 @media (min-width: 768px) {
     .VPNavBarSearch .DocSearch.DocSearch-Button {
-        background-color: hsla(var(--a-base-color), 0.04) !important;
+        background-color: hsla(var(--a-base-c), 0.04) !important;
     }
 }
 
@@ -88,7 +88,7 @@ SECTION VitePress
     Enable below style for styled scrollbar
 */
 /* .VPSidebar::-webkit-scrollbar {
-    background: rgb(var(--a-layer));
+    background: rgb(var(--a-layer-c));
     block-size: 8px;
     border-end-end-radius: 14px;
     border-start-end-radius: 14px;
@@ -127,7 +127,7 @@ SECTION VitePress
 }
 
 .dark .vp-doc div[class*='language-']:not(:where(.vp-raw *)) {
-    border: 1px solid hsla(var(--a-base-color), var(--a-border-opacity));
+    border: 1px solid hsla(var(--a-base-c), var(--a-border-opacity));
     opacity: 0.85;
     font-weight: 500;
 }
@@ -137,13 +137,13 @@ SECTION VitePress
 ========================== */
 
 .cards-demo-container {
-    /* rounded-lg border-dashed border border-a-border p-8 bg-[hsla(var(--a-base-color), .05)] */
+    /* rounded-lg border-dashed border border-a-border p-8 bg-[hsla(var(--a-base-c), .05)] */
     @apply rounded-lg border-dashed border border-a-border p-8;
-    background: hsla(var(--a-base-color), 0.05);
+    background: hsla(var(--a-base-c), 0.05);
 }
 
 .dark .cards-demo-container {
-    background: hsla(var(--a-base-color), 0.01);
+    background: hsla(var(--a-base-c), 0.01);
 }
 
 /* ==========================
@@ -164,7 +164,7 @@ SECTION VitePress
 }
 
 .VPHero.VPHomeHero .text {
-    color: hsla(var(--a-base-color), 0.87)
+    color: hsla(var(--a-base-c), 0.87)
 }
 
-/* !SECTION */
+/* !SECTION */

docs/components/Api.vue

@@ -18,12 +18,12 @@ const propsHeader = Object.keys(props.api.props[0])
         class="not-last-mb-4"
       >
         <span
-          class="font-semibold text-[hsla(var(--a-title-color),var(--a-title-opacity))]"
+          class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]"
         >{{ prop.name.replace('?', '') }}</span>
-        <span class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
+        <span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
         <span
           v-if="prop.default !== 'unknown'"
-          class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"
+          class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"
         > = {{ prop.default }}</span>
         <div
           class="!children-[p]-m-0"

docs/components/demos/loader/DemoLoaderCustomization.vue

@@ -4,7 +4,7 @@
 
     <ALoader
       color="primary"
-      class="[--a-ring-color:hsla(var(--a-base-color),0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
+      class="[--a-ring-color:hsla(var(--a-base-c),0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
     />
 
     <ALoader class="[--a-ring-stroke:0] [&_.a-spinner-arc]-stroke-cap-round rotate-y-180" />

docs/development/contributing.md

@@ -106,6 +106,22 @@ At the moment, anu don't have any design system. Hence, we have full freedom to
 - Search [dribbble](https://dribbble.com/)
 :::
 
+### CSS vars
+
+We follow naming convention for CSS color vars. As we have theme colors CSS vars that has just HSL value and not full color (e.g. `--a-primary: 265, 97.7%, 66.3%`) and some other colors that are full color (e.g. `--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)`), it's confusing while using the CSS var to identify if it's full color or just HSL value.
+
+Due to this reason we follow below convention when deciding the name of CSS var that is color:
+
+- suffix `-c` => For just HSL value (`--a-base-c: 0, 10%, 20%;`)
+- suffix `-color` => For full color (`--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)`)
+- Don't suffix anything => For theme color (`--a-primary: 265, 97.7%, 66.3%`)
+
+With above naming convention, we can clearly know if we should wrap the CSS var in `hsl()` or directly use it like a color value.
+
+:::warning
+Don't forget to follow this convention when defining any CSS var for color, including background (`--a-something-bg-color: hsl(var(--a-surface-c))`)
+:::
+
 ### Creating new component
 
 First of all, it is advisable to discuss the design & features of the component by opening the new [issue](https://github.com/jd-solanki/anu/issues/new). E.g. [New component: Menu](https://github.com/jd-solanki/anu/issues/26)

docs/guide/getting-started/customization.md

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useCssVar } from '@vueuse/core'
-import { computed, onMounted } from 'vue';
+import { useCssVar } from '@vueuse/core';
+import { computed } from 'vue';
 
 const primaryColor = useCssVar('--a-primary')
 const vpBrandHue = useCssVar('--vp-brand-hue')
@@ -34,15 +34,15 @@ To customize theme color, set a CSS variable in your CSS with color name prefixe
 
 ## CSS variables
 
-Besides colors, Anu uses CSS variables for other stuff like typography customization. All anu's CSS variables are prefixed with `a-`.
+Besides colors, Anu uses CSS variables for other stuff for providing maximum flexibility and customization on the fly. All anu's CSS variables are prefixed with `a-`.
 
-Interesting ones are listed below:
+:::details View all CSS vars
+Below is CSS vars defined for preset theme default's light theme:
 
-| CSS variables                      | Usage                        |
-| :--------------------------------- | :--------------------------- |
-| `--a-text-emphasis-high-opacity`   | High priority text opacity   |
-| `--a-text-emphasis-medium-opacity` | Medium priority text opacity |
-| `--a-text-emphasis-light-opacity`  | Low priority text opacity    |
+<<< @/../packages/preset-theme-default/src/scss/index.scss#all-css-vars
+:::
+
+Moreover, It's recommended that you [learn](/development/contributing.html#css-vars) CSS vars naming convention for color to know when you should wrap `hsl()` or use CSS var directly.
 
 ## Component customization
 

packages/anu-vue/src/components/btn/ABtn.vue

@@ -63,7 +63,7 @@ const { styles, classes } = getLayerClasses(
     <template v-if="props.icon">
       <ALoader
         v-if="props.loading"
-        class="[--a-loader-overlay-bg:transparent]"
+        class="[--a-loader-overlay-bg-c:transparent]"
       />
       <i
         v-else

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-surface),var(--un-bg-opacity,1))]"
+    class="a-card relative overflow-hidden bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
     :class="classes"
     :style="[
       ...styles,

packages/anu-vue/src/components/dialog/ADialog.vue

@@ -53,7 +53,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
     <Transition name="bg">
       <div
         v-show="props.modelValue"
-        class="a-dialog-wrapper grid place-items-center fixed inset-0 bg-[hsla(var(--a-overlay-color),var(--a-overlay-opacity))]"
+        class="a-dialog-wrapper grid place-items-center fixed inset-0 bg-[hsla(var(--a-overlay-c),var(--a-overlay-opacity))]"
       >
         <Transition name="scale">
           <ACard

packages/anu-vue/src/components/drawer/ADrawer.vue

@@ -61,7 +61,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
     <Transition name="bg">
       <div
         v-show="props.modelValue"
-        class="a-drawer-wrapper flex fixed inset-0 bg-[hsla(var(--a-overlay-color),var(--a-overlay-opacity))]"
+        class="a-drawer-wrapper flex fixed inset-0 bg-[hsla(var(--a-overlay-c),var(--a-overlay-opacity))]"
         :class="[
           `a-drawer-anchor-${props.anchor}`,
           // `flex-col` set full width for top & bottom anchored drawer

packages/anu-vue/src/components/loader/ALoader.vue

@@ -45,7 +45,7 @@ if (props.fullPage) {
 </script>
 
 <template>
-  <!-- TODO: Use loader's CSS color instead of layer color: bg-[hsla(var(--a-layer),0.85)] -->
+  <!-- TODO: Use loader's CSS color instead of layer color: bg-[hsla(var(--a-layer-c),0.85)] -->
   <div
     v-if="isShownOnce"
     v-show="props.loading"
@@ -55,7 +55,7 @@ if (props.fullPage) {
     ]"
   >
     <div
-      :style="{ background: props.overlay ? 'hsla(var(--a-loader-overlay-bg),var(--a-loader-overlay-bg-opacity))' : undefined }"
+      :style="{ background: props.overlay ? 'hsla(var(--a-loader-overlay-bg-c),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',

packages/anu-vue/src/components/radio/ARadio.vue

@@ -69,7 +69,7 @@ const isChecked = computed(() => props.modelValue === attrs.value)
       class="a-radio-circle after:w-full after:h-full after:rounded-full after:block after:content-empty after:transform after:transition after:transition-transform"
       :class="[
         `after:bg-${props.color}`,
-        isChecked ? `after:scale-full border-${props.color}` : 'after:scale-0 border-[hsla(var(--a-base-color),var(--a-border-opacity))]',
+        isChecked ? `after:scale-full border-${props.color}` : 'after:scale-0 border-[hsla(var(--a-base-c),var(--a-border-opacity))]',
       ]"
     />
     <!-- 👉 Slot: default -->

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-surface))]"
+      class="a-select-options-container absolute bg-[hsl(var(--a-surface-c))]"
       :class="props.optionsWrapperClasses"
       @click="closeOptions"
     >

packages/anu-vue/src/composables/useLayer.ts

@@ -84,44 +84,44 @@ export const useLayer = () => {
       We also have colord as dependency for now. We might remove this in future once Anu is more popular and mature.
     */
 
-    // ℹ️ 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.
+    // ℹ️ For light variant we will keep the overlay color of `--a-layer-c` 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] [--a-loader-overlay-bg-opacity:.85]')
 
       // Loader overlay
-      styles.push({ '--a-loader-overlay-bg': 'var(--a-theme-color)' })
+      styles.push({ '--a-loader-overlay-bg-c': 'var(--a-theme-c)' })
     }
 
     /*
       ℹ️ Outline & Text variant
-        For overlay bg, We can create use style: `background-color:hsla(var(--a-surface),var(--a-background))`,
-        where `--a-background` will be body bg. Moreover, when card is used we will add new style `--a-surface:--a-layer-color` (_bg color of card_)
+        For overlay bg, We can create use style: `background-color:hsla(var(--a-surface-c),var(--a-background))`,
+        where `--a-background` will be body bg. Moreover, when card is used we will add new style `--a-surface-c:--a-layer-c-color` (_bg color of card_)
 
         With above, if component with outline variant will get correct overlay bg regardless of component is used inside card or outside of it.
         ATM, If outline component is placed on body (_gray bg_) then it will get white overlay bg
     */
 
     if (_isThemeColor) {
-      styles.push({ '--a-layer': `var(--a-${propColor})` })
+      styles.push({ '--a-layer-c': `var(--a-${propColor})` })
 
       if (propVariant === 'fill') {
         // Background
-        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        styles.push({ background: 'hsla(var(--a-layer-c),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': 'var(--a-layer)' })
+        styles.push({ '--a-loader-overlay-bg-c': 'var(--a-layer-c)' })
         classes.push('[--a-loader-overlay-bg-opacity:1]')
       }
 
       else if (propVariant === 'light') {
         // Background
-        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        styles.push({ background: 'hsla(var(--a-layer-c),var(--a-layer-opacity))' })
         classes.push('[--a-layer-opacity:0.15]')
 
         // text
@@ -134,35 +134,35 @@ export const useLayer = () => {
       else if (propVariant === 'outline') {
         // Border
         classes.push('border-width-1', 'border-solid')
-        styles.push({ borderColor: 'hsl(var(--a-layer)' })
+        styles.push({ borderColor: 'hsl(var(--a-layer-c)' })
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          classes.push('text-[hsl(var(--a-layer))]')
+          classes.push('text-[hsl(var(--a-layer-c))]')
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': 'var(--a-surface)' })
+        styles.push({ '--a-loader-overlay-bg-c': 'var(--a-surface-c)' })
         classes.push('[--a-loader-overlay-bg-opacity:1]')
       }
 
       else if (propVariant === 'text') {
         // Text
         if (propColor !== undefined && propColor !== null)
-          classes.push('text-[hsl(var(--a-layer))]')
+          classes.push('text-[hsl(var(--a-layer-c))]')
 
         // Loader overlay
-        // styles.push({ '--a-loader-overlay-bg': 'inherit' })
+        // styles.push({ '--a-loader-overlay-bg-c': 'inherit' })
         classes.push('[--a-loader-overlay-bg-opacity:1]')
       }
     }
     else if (propColor) {
       const _colord = colord(propColor as string)
 
-      styles.push({ '--a-layer': _colord.toHslString().replace(/hsla?\(([\d\s]+,[\d\s]+%,[\d\s]+%).*/gm, '$1') })
+      styles.push({ '--a-layer-c': _colord.toHslValue() })
 
       if (propVariant === 'fill') {
         // Background
-        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        styles.push({ background: 'hsla(var(--a-layer-c),var(--a-layer-opacity))' })
         classes.push('[--a-layer-opacity:1]')
 
         // Text
@@ -171,38 +171,38 @@ export const useLayer = () => {
 
         // Loader overlay
         if (propColor)
-          styles.push({ '--a-loader-overlay-bg': _colord.toHslString() })
+          styles.push({ '--a-loader-overlay-bg-c': _colord.toHslString() })
       }
       else if (propVariant === 'light') {
         // Background
-        styles.push({ background: 'hsla(var(--a-layer),var(--a-layer-opacity))' })
+        styles.push({ background: 'hsla(var(--a-layer-c),var(--a-layer-opacity))' })
         classes.push('[--a-layer-opacity:0.15]')
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: 'hsl(var(--a-layer))' })
+          styles.push({ color: 'hsl(var(--a-layer-c))' })
 
         // 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: 'hsl(var(--a-layer))' })
+        styles.push({ borderColor: 'hsl(var(--a-layer-c))' })
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: 'hsl(var(--a-layer))' })
+          styles.push({ color: 'hsl(var(--a-layer-c))' })
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': 'inherit' })
+        styles.push({ '--a-loader-overlay-bg-c': 'inherit' })
       }
       else if (propVariant === 'text') {
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: 'hsl(var(--a-layer))' })
+          styles.push({ color: 'hsl(var(--a-layer-c))' })
 
         // Loader overlay
-        styles.push({ '--a-loader-overlay-bg': 'inherit' })
+        styles.push({ '--a-loader-overlay-bg-c': 'inherit' })
       }
     }
 

packages/anu-vue/src/composables/useTypographyColor.ts

@@ -1,6 +1,7 @@
 import type { MaybeComputedRef } from '@vueuse/core'
 import { resolveUnref } from '@vueuse/core'
 import type { ColorProp } from './useProps'
+import { colord } from '@/utils/colord'
 import { isThemeColor } from '@/utils/color'
 
 const calculateColor = (_isThemeColor: boolean, _color: ColorProp | null, _variant: string) => {
@@ -19,12 +20,12 @@ const calculateColor = (_isThemeColor: boolean, _color: ColorProp | null, _varia
     if (_variant !== 'fill')
       classes.push(`a-title-${_color} a-subtitle-${_color}`)
     else
-      styles.push('--a-title-color: white; --a-subtitle-color: white')
+      styles.push('--a-title-c: 0, 0%, 100%; --a-subtitle-c: 0, 0%, 100%') // white
   }
   else if (_color !== undefined) {
-    const typographyColor = _color === null ? 'var(--a-base-color)' : _color
+    const typographyC = _color === null ? 'var(--a-base-c)' : colord(_color as string).toHslValue()
 
-    styles.push(`--a-title-color: ${typographyColor}; --a-subtitle-color: ${typographyColor};`)
+    styles.push(`--a-title-c: ${typographyC}; --a-subtitle-c: ${typographyC};`)
     classes.push(
       _color === null
         ? '[--a-title-opacity:var(--a-text-emphasis-high-opacity)] [--a-subtitle-opacity:var(--a-text-emphasis-light-opacity)]'