fix: css variable cant use when useOpacityVariable is true

unocss-community · Nov 27, 2023 · 29d4b82 · 29d4b82
1 parent 10bcebe
commit 29d4b82
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -102,6 +102,19 @@ export interface PaletteOptions {
     defaultValue?: string
   }
 
+  /**
+   * use opacity variable
+   *
+   * ```css
+   * .text-primary {
+   *   --un-text-opacity: 1;
+   *   color: rgb(var(--un-palette-primary-rgb) / var(--un-text-opacity));
+   * }
+   * ```
+   * @default true
+   */
+  useOpacityVariable?: boolean
+
   /**
   * @default --un-palette-[name]-color
   */

diff --git a/src/index.ts b/src/index.ts
@@ -62,9 +62,10 @@ export const presetPalette = definePreset((options: PaletteOptions = {}) => {
             for (const colorName in colorComponents[theme]) {
               const components = colorComponents[theme][colorName];
               const varName = getVarName(colorName);
-              rs.push(`${varName}-${colorFormat}:${components}`, ";");
               if (useOpacityVariable) {
-                rs.push(`${varName}:${colorFormat}(var(${varName}-${colorFormat}))`, ";");
+                rs.push(`${varName}-${colorFormat}:${components}`, ";", `${varName}:${colorFormat}(var(${varName}-${colorFormat}))`, ";");
+              } else {
+                rs.push(`${varName}:${colorFormat}(${components})`, ";");
               }
             }
             rs.push("}");