Fix hsl color

docs/.vitepress/theme/style.css

@@ -2,7 +2,7 @@
 :root {
 
   /* Background colors */
-  --vp-background: hsl(var(--a-body-bg-c));
+  --vp-background: hsla(var(--a-body-bg-c));
   --vp-c-bg: var(--vp-background);
   --vp-c-bg-alt: var(--vp-background);
   --vp-sidebar-bg-color: var(--vp-background);
@@ -15,29 +15,29 @@
   --vp-font-family-mono: 'JetBrains Mono', monospace;
 
   /* Branding */
-  --vp-c-brand-lighter: hsl(var(--a-primary-hue), 97%, 75%);
-  --vp-c-brand-light: hsl(var(--a-primary-hue), 97%, 70%);
-  --vp-c-brand: hsl(var(--a-primary-hue), 97%, 66%);
-  --vp-c-brand-dark: hsl(var(--a-primary-hue), 97%, 60%);
-  --vp-c-brand-darker: hsl(var(--a-primary-hue), 97%, 55%);
+  --vp-c-brand-lighter: hsla(var(--a-primary-hue), 97%, 75%);
+  --vp-c-brand-light: hsla(var(--a-primary-hue), 97%, 70%);
+  --vp-c-brand: hsla(var(--a-primary-hue), 97%, 66%);
+  --vp-c-brand-dark: hsla(var(--a-primary-hue), 97%, 60%);
+  --vp-c-brand-darker: hsla(var(--a-primary-hue), 97%, 55%);
 
   /* We need this because menu component has 51 index which overlaps on navbar on scroll */
   /* --vp-z-index-nav: 52; */
 
-  --vp-code-scrollbar-thumb-bg: hsl(0, 0%, 40%);
+  --vp-code-scrollbar-thumb-bg: hsla(0, 0%, 40%);
   --vp-code-line-height: 1.9;
 }
 
 :root.dark {
   /* Branding */
   --a-primary-hue: 261;
-  --vp-c-brand-lighter: hsl(var(--a-primary-hue), 73%, 75%);
-  --vp-c-brand-light: hsl(var(--a-primary-hue), 73%, 70%);
-  --vp-c-brand: hsl(var(--a-primary-hue), 73%, 66%);
-  --vp-c-brand-dark: hsl(var(--a-primary-hue), 73%, 60%);
-  --vp-c-brand-darker: hsl(var(--a-primary-hue), 73%, 55%);
+  --vp-c-brand-lighter: hsla(var(--a-primary-hue), 73%, 75%);
+  --vp-c-brand-light: hsla(var(--a-primary-hue), 73%, 70%);
+  --vp-c-brand: hsla(var(--a-primary-hue), 73%, 66%);
+  --vp-c-brand-dark: hsla(var(--a-primary-hue), 73%, 60%);
+  --vp-c-brand-darker: hsla(var(--a-primary-hue), 73%, 55%);
 
-  --vp-code-scrollbar-thumb-bg: hsl(0, 0%, 25%);
+  --vp-code-scrollbar-thumb-bg: hsla(0, 0%, 25%);
 }
 
 /* ==========================
@@ -104,7 +104,7 @@
 
 /* Handle */
 .VPSidebar::-webkit-scrollbar-thumb {
-  background: hsl(0, 0%, 90%);
+  background: hsla(0, 0%, 90%);
   border-radius: 0.5rem;
 }
 
@@ -150,11 +150,11 @@
 
 :root.dark {
   --vp-c-bg-alt: var(--vp-background);
-  --vp-code-line-highlight-color: hsl(0, 0%, 12%);
+  --vp-code-line-highlight-color: hsla(0, 0%, 12%);
 }
 
 .dark .VPSidebar::-webkit-scrollbar-thumb {
-  background: hsl(0, 0%, 10%);
+  background: hsla(0, 0%, 10%);
   border-radius: 0.5rem;
 }
 
@@ -243,11 +243,11 @@ samp {
 }
 
 html:not(.dark) .VPContent.is-home {
-  background: hsl(var(--a-surface-c));
+  background: hsla(var(--a-surface-c));
 }
 
 html:not(.dark) .VPContent.is-home+.VPFooter {
-  background: hsl(var(--a-surface-c));
+  background: hsla(var(--a-surface-c));
 }
 
 .VPHome {

docs/components/Api.vue

@@ -82,7 +82,7 @@ onMounted(() => {
           :key="tab.value"
           class="capitalize"
           :class="[!tab.isSelected && 'opacity-50']"
-          color="hsl(0,0%,50%)"
+          color="hsla(0,0%,50%)"
           :variant="tab.isSelected ? 'light' : 'text'"
           @click="select(tab.value)"
         >

docs/components/Demo.vue

@@ -5,7 +5,7 @@ const showCode = ref(false)
 </script>
 
 <template>
-  <div class="vp-demo rounded-lg shadow bg-[hsl(var(--a-surface-c))]">
+  <div class="vp-demo rounded-lg shadow bg-[hsla(var(--a-surface-c))]">
     <div
       v-if="$slots.title || $slots.code"
       class="vp-demo-header flex flex-wrap items-center justify-between"

docs/components/LinkGrid.vue

@@ -38,7 +38,7 @@ defineProps<{
   text-decoration: none !important;
   border: 1px solid var(--vp-c-bg-soft);
   border-radius: 12px;
-  background-color: hsl(var(--a-surface-c));
+  background-color: hsla(var(--a-surface-c));
   transition: border-color 0.25s, background-color 0.25s;
 }
 .Link:hover {

docs/development/contributing.md

@@ -143,7 +143,13 @@ Due to this reason we follow below convention when deciding the name of CSS var
 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))`)
+Don't forget to follow this convention when defining any CSS var for color, including background (`--a-something-bg-color: hsla(var(--a-surface-c))`)
+:::
+
+:::warning
+Because comma-separated values are now [Legacy Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl#legacy_syntax_comma-separated_values), it's no longer supported in Anu's `hsl()` notation to cope with UnoCSS v0.57.0's [breaking changes](https://github.com/unocss/unocss/releases/tag/v0.57.0).
+
+However the comma-separated values are still available in [`hsla()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl#legacy_syntax_hsla), which is a legacy alias for `hsl()`. E.g., `--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)` should still work.
 :::
 
 ### [Template Refs](https://vuejs.org/guide/essentials/template-refs.html)

docs/guide/getting-started/customization.md

@@ -38,7 +38,7 @@ Below is the list of default colors. You can also [add new colors](/guide/featur
     <ACard variant="fill" color="danger" class="rounded-2xl shadow-2xl shadow-danger shadow-opacity-40 w-26 h-26 font-semibold grid place-items-center">Danger</ACard>
 </div>
 
-<ABtn class="mt-8" :class="isPrimaryChanged ? 'bg-[hsl(265,97.7%,66.3%)]' : 'bg-[hsl(235,97.7%,66.3%)]'" @click="updatePrimaryColor">{{ isPrimaryChanged ? 'Reset' : 'Change' }} primary</ABtn>
+<ABtn class="mt-8" :class="isPrimaryChanged ? 'bg-[hsla(265,97.7%,66.3%)]' : 'bg-[hsla(235,97.7%,66.3%)]'" @click="updatePrimaryColor">{{ isPrimaryChanged ? 'Reset' : 'Change' }} primary</ABtn>
 
 <br />
 <br />
@@ -59,7 +59,7 @@ Below is CSS vars defined for preset theme default's light theme:
 <<< @/../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.
+Moreover, It's recommended that you [learn](/development/contributing.html#css-vars) CSS vars naming convention for color to know when you should wrap `hsla()` or use CSS var directly.
 
 Additionally, theme can also [add](/guide/features/theme.html#adding-theme-based-css-variables) CSS variables based on the theme.
 ::::

docs/package.json

@@ -23,7 +23,7 @@
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "postcss-prefix-selector": "^1.16.0",
-    "unocss": "^0.51.13",
+    "unocss": "^0.57.3",
     "vitepress": "1.0.0-beta.1",
     "zod": "3.21.4"
   },
@@ -34,4 +34,4 @@
     "vee-validate": "^4.9.4",
     "vue": "3.3.4"
   }
-}
+}

docs/uno.config.ts

@@ -38,5 +38,9 @@ export default defineConfig({
     '../packages/preset-theme-default/src/variants.ts',
     '../packages/preset-theme-default/src/index.ts',
   ],
-  include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
+  content: {
+    pipeline: {
+      include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
+    },
+  },
 })

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

@@ -60,7 +60,7 @@ if (props.fullPage) {
   >
     <!-- 👉 Slot: default -->
     <slot>
-      <ASpinner class="a-loader-spinner text-[hsl(var(--a-layer-c))]" />
+      <ASpinner class="a-loader-spinner text-[hsla(var(--a-layer-c))]" />
     </slot>
     <!-- 👉 Typography -->
     <div

packages/anu-vue/src/components/select/ASelect.vue

@@ -130,7 +130,7 @@ function middleware() {
     <ACard
       v-show="isOptionsVisible"
       ref="refFloating"
-      class="a-select-options-container bg-[hsl(var(--a-surface-c))]"
+      class="a-select-options-container bg-[hsla(var(--a-surface-c))]"
       :class="props.optionsWrapperClasses"
       @click="closeOptions"
     >

packages/anu-vue/src/components/switch/ASwitch.vue

@@ -77,7 +77,7 @@ const dotPosition = computed(() => {
       class="a-switch-toggle flex rounded-inherit min-w-$a-switch-track-size"
       :class="isChecked
         ? `bg-${props.color}`
-        : 'bg-[hsl(var(--a-switch-default-color))]'"
+        : 'bg-[hsla(var(--a-switch-default-color))]'"
     >
       <div
         class="a-switch-dot grid place-items-center rounded-inherit m-$a-switch-thumb-margin"

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

@@ -125,17 +125,17 @@ export function useLayer() {
       else if (propVariant === 'outline') {
         // Border
         classes.push('border-width-1', 'border-solid')
-        styles.push({ borderColor: 'hsl(var(--a-layer-c)' })
+        styles.push({ borderColor: 'hsla(var(--a-layer-c)' })
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          classes.push('text-[hsl(var(--a-layer-c))]')
+          classes.push('text-[hsla(var(--a-layer-c))]')
       }
 
       else if (propVariant === 'text') {
         // Text
         if (propColor !== undefined && propColor !== null)
-          classes.push('text-[hsl(var(--a-layer-c))]')
+          classes.push('text-[hsla(var(--a-layer-c))]')
       }
     }
     else if (propColor === 'inherit') {
@@ -147,7 +147,7 @@ export function useLayer() {
     else if (propColor) {
       const _colord = colord(propColor)
 
-      styles.push({ '--a-layer-c': _colord.toHslValue() })
+      styles.push({ '--a-layer-c': _colord.toHslaValue() })
 
       if (propVariant === 'fill') {
         // Background
@@ -165,21 +165,21 @@ export function useLayer() {
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: 'hsl(var(--a-layer-c))' })
+          styles.push({ color: 'hsla(var(--a-layer-c))' })
       }
       else if (propVariant === 'outline') {
         // Border
         classes.push('border-width-1', 'border-solid')
-        styles.push({ borderColor: 'hsl(var(--a-layer-c))' })
+        styles.push({ borderColor: 'hsla(var(--a-layer-c))' })
 
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: 'hsl(var(--a-layer-c))' })
+          styles.push({ color: 'hsla(var(--a-layer-c))' })
       }
       else if (propVariant === 'text') {
         // Text
         if (propColor !== undefined && propColor !== null)
-          styles.push({ color: 'hsl(var(--a-layer-c))' })
+          styles.push({ color: 'hsla(var(--a-layer-c))' })
       }
     }
 

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

@@ -23,7 +23,7 @@ function calculateColor(_isThemeColor: boolean, _color: ColorProp | null, _varia
       styles.push('--a-title-c: 0, 0%, 100%; --a-subtitle-c: 0, 0%, 100%') // white
   }
   else if (_color !== undefined) {
-    const typographyC = _color === null ? 'var(--a-base-c)' : colord(_color).toHslValue()
+    const typographyC = _color === null ? 'var(--a-base-c)' : colord(_color).toHslaValue()
 
     styles.push(`--a-title-c: ${typographyC}; --a-subtitle-c: ${typographyC};`)
     classes.push(

packages/anu-vue/src/preset/index.ts

@@ -16,7 +16,7 @@ export function presetAnu(options: Partial<PresetAnuOptions> = {}): Preset {
     name: '@anu-vue/preset-core',
     theme: {
       colors: Object.fromEntries(
-        _options.colors.map(c => [c, `hsl(var(--a-${c}))`]),
+        _options.colors.map(c => [c, `hsla(var(--a-${c}))`]),
       ),
     },
     safelist: [

packages/anu-vue/src/utils/colord.ts

@@ -9,7 +9,7 @@ extend([a11yPlugin, namesPlugin, harmonies])
 declare module 'colord/colord' {
   interface Colord {
     contrasting(): Colord
-    toHslValue(): string
+    toHslaValue(): string
   }
 }
 
@@ -24,8 +24,10 @@ export const contrastingPlugin: Plugin = ColordClass => {
     return isLight ? colord('#000') : colord('#fff')
   }
 
-  ColordClass.prototype.toHslValue = function () {
-    return this.toHslString().replace(/hsla?\(([\d\s]+,[\d\s]+%,[\d\s]+%).*/gm, '$1')
+  ColordClass.prototype.toHslaValue = function () {
+    const { h, s, l, a } = this.toHsl()
+
+    return `${h},${s}%,${l}%${a !== 1 ? `,${a}` : ''}`
   }
 }
 

packages/preset-theme-default/src/scss/index.scss

@@ -78,7 +78,7 @@ body {
 // 👉 Typography
 
 body {
-  background-color: hsl(var(--a-body-bg-c));
+  background-color: hsla(var(--a-body-bg-c));
   color: var(--a-body-color);
 
   // Disable mobile tap blue color

packages/preset-theme-default/src/shortcuts.ts

@@ -53,7 +53,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-surface-c))]',
+    'a-badge-bordered': 'outline em:spacing:outline-width-[0.166666666666667em] outline-[hsla(var(--a-surface-c))]',
 
     // 👉 Base Input
     'a-base-input-root': 'em:spacing:gap-y-1',
@@ -190,7 +190,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
 
     // 👉 Tooltip
     'a-tooltip-wrapper': 'z-[54]',
-    'a-tooltip': 'bg-[hsl(var(--a-tooltip-bg-c))] em:px-2 em:py-1 em:rounded-lg',
+    'a-tooltip': 'bg-[hsla(var(--a-tooltip-bg-c))] em:px-2 em:py-1 em:rounded-lg',
     'a-tooltip-text': 'em:text-sm text-white text-center',
 
     // !SECTION Components