From 29d4b82c9ac90dd3e60e1cdb6b1812802709b4a5 Mon Sep 17 00:00:00 2001
From: chizukicn <chizukicn@outlook.com>
Date: Mon, 27 Nov 2023 16:15:01 +0800
Subject: [PATCH] fix: css variable cant use when useOpacityVariable is true

---
 README.md    | 13 +++++++++++++
 src/index.ts |  5 +++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 40ef7c5..42c4638 100644
--- 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
index e2b4aa5..4fffa17 100644
--- 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("}");