fix(shadcn-ui): use slash for alpha values in colors (#681)

Co-authored-by: shadcn <[email protected]>
shadcn-ui · Jun 24, 2023 · 1971fa7 · 1971fa7
1 parent 7b5582e
commit 1971fa7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/fast-shoes-wash.md b/.changeset/fast-shoes-wash.md
@@ -0,0 +1,5 @@
+---
+"shadcn-ui": patch
+---
+
+use slash for alpha modifier
diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts
@@ -161,14 +161,15 @@ export function applyColorMapping(
     const needle = value?.replace(prefix, "")
     if (needle && needle in mapping.light) {
       lightMode.push(
-        [variant, `${prefix}${mapping.light[needle]}`, modifier]
+        [variant, `${prefix}${mapping.light[needle]}`]
           .filter(Boolean)
-          .join(":")
+          .join(":") + (modifier ? `/${modifier}` : "")
       )
+
       darkMode.push(
-        ["dark", variant, `${prefix}${mapping.dark[needle]}`, modifier]
+        ["dark", variant, `${prefix}${mapping.dark[needle]}`]
           .filter(Boolean)
-          .join(":")
+          .join(":") + (modifier ? `/${modifier}` : "")
       )
       continue
     }

diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts
@@ -64,7 +64,7 @@ describe("apply color mapping", async () => {
       input:
         "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
       output:
-        "text-red-500 border-red-500:50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900:50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
+        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
     },
     {
       input: