fix: aurora text css variable (#517)

magicuidesign · Jan 16, 2025 · d3f08f0 · d3f08f0
1 parent 2518750
commit d3f08f0
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 0 deletions.
diff --git a/content/docs/components/aurora-text.mdx b/content/docs/components/aurora-text.mdx
@@ -34,6 +34,20 @@ npx shadcn@latest add "https://magicui.design/r/aurora-text"
 
 <Step>Update the import paths to match your project setup.</Step>
 
+<Step>Update `globals.css`</Step>
+
+Add the following to your `globals.css` file:
+
+```css
+:root {
+  --color-1: 0 100% 63%;
+  --color-2: 270 100% 63%;
+  --color-3: 210 100% 63%;
+  --color-4: 195 100% 63%;
+  --color-5: 90 100% 63%;
+}
+```
+
 <Step>Update `tailwind.config.js`</Step>
 
 Add the following animations to your `tailwind.config.js` file:
@@ -43,6 +57,13 @@ Add the following animations to your `tailwind.config.js` file:
 module.exports = {
   theme: {
     extend: {
+      colors: {
+        "color-1": "hsl(var(--color-1))",
+        "color-2": "hsl(var(--color-2))",
+        "color-3": "hsl(var(--color-3))",
+        "color-4": "hsl(var(--color-4))",
+        "color-5": "hsl(var(--color-5))",
+      },
       keyframes: {
         "aurora-border": {
           "0%, 100%": { borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%" },

diff --git a/public/r/index.json b/public/r/index.json
@@ -64,6 +64,13 @@
       "config": {
         "theme": {
           "extend": {
+            "colors": {
+              "color-1": "hsl(var(--color-1))",
+              "color-2": "hsl(var(--color-2))",
+              "color-3": "hsl(var(--color-3))",
+              "color-4": "hsl(var(--color-4))",
+              "color-5": "hsl(var(--color-5))"
+            },
             "keyframes": {
               "aurora-border": {
                 "0%, 100%": {
@@ -139,6 +146,22 @@
           }
         }
       }
+    },
+    "cssVars": {
+      "light": {
+        "--color-1": "0 100% 63%",
+        "--color-2": "270 100% 63%",
+        "--color-3": "210 100% 63%",
+        "--color-4": "195 100% 63%",
+        "--color-5": "90 100% 63%"
+      },
+      "dark": {
+        "--color-1": "0 100% 63%",
+        "--color-2": "270 100% 63%",
+        "--color-3": "210 100% 63%",
+        "--color-4": "195 100% 63%",
+        "--color-5": "90 100% 63%"
+      }
     }
   },
   {

diff --git a/public/r/styles/default/aurora-text.json b/public/r/styles/default/aurora-text.json
@@ -16,6 +16,13 @@
     "config": {
       "theme": {
         "extend": {
+          "colors": {
+            "color-1": "hsl(var(--color-1))",
+            "color-2": "hsl(var(--color-2))",
+            "color-3": "hsl(var(--color-3))",
+            "color-4": "hsl(var(--color-4))",
+            "color-5": "hsl(var(--color-5))"
+          },
           "keyframes": {
             "aurora-border": {
               "0%, 100%": {
@@ -91,5 +98,21 @@
         }
       }
     }
+  },
+  "cssVars": {
+    "light": {
+      "--color-1": "0 100% 63%",
+      "--color-2": "270 100% 63%",
+      "--color-3": "210 100% 63%",
+      "--color-4": "195 100% 63%",
+      "--color-5": "90 100% 63%"
+    },
+    "dark": {
+      "--color-1": "0 100% 63%",
+      "--color-2": "270 100% 63%",
+      "--color-3": "210 100% 63%",
+      "--color-4": "195 100% 63%",
+      "--color-5": "90 100% 63%"
+    }
   }
 }
diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts
@@ -29,10 +29,33 @@ export const ui: Registry = [
     type: "registry:ui",
     dependencies: ["motion"],
     files: ["magicui/aurora-text.tsx"],
+    cssVars: {
+      light: {
+        "--color-1": "0 100% 63%",
+        "--color-2": "270 100% 63%",
+        "--color-3": "210 100% 63%",
+        "--color-4": "195 100% 63%",
+        "--color-5": "90 100% 63%",
+      },
+      dark: {
+        "--color-1": "0 100% 63%",
+        "--color-2": "270 100% 63%",
+        "--color-3": "210 100% 63%",
+        "--color-4": "195 100% 63%",
+        "--color-5": "90 100% 63%",
+      },
+    },
     tailwind: {
       config: {
         theme: {
           extend: {
+            colors: {
+              "color-1": "hsl(var(--color-1))",
+              "color-2": "hsl(var(--color-2))",
+              "color-3": "hsl(var(--color-3))",
+              "color-4": "hsl(var(--color-4))",
+              "color-5": "hsl(var(--color-5))",
+            },
             keyframes: {
               "aurora-border": {
                 "0%, 100%": {