New Style Setup Config

README.md

@@ -16,4 +16,32 @@ Form + field components for **Astro** with Tailwind utilities and Zod-ready vali
 ```bash
 pnpm add @wrnexus/astro
 # or
-npm i @wrnexus/astro
+npm i @wrnexus/astro
+```
+
+Theme Use
+
+```bash
+@import "tailwindcss";
+
+@theme {
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-tertiary: hsl(var(--tertiary));
+    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-info: hsl(var(--info));
+    --color-info-foreground: hsl(var(--info-foreground));
+    --color-success: hsl(var(--success));
+    --color-success-foreground: hsl(var(--success-foreground));
+    --color-warning: hsl(var(--warning));
+    --color-warning-foreground: hsl(var(--warning-foreground));
+    --color-danger: hsl(var(--danger));
+    --color-danger-foreground: hsl(var(--danger-foreground));
+    --color-neutral: hsl(var(--neutral));
+    --color-neutral-foreground: hsl(var(--neutral-foreground));
+}
+```

package.json

@@ -23,6 +23,7 @@
     "components"
   ],
   "sideEffects": false,
+  "style": "./src/styles/style.css",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

src/styles/global.css

@@ -4,6 +4,7 @@
 @plugin "@tailwindcss/forms";
 
 @layer base {
+
     button:not(:disabled),
     [role="button"]:not(:disabled) {
         cursor: pointer;
@@ -11,4 +12,24 @@
 }
 
 @custom-variant dark (&:is(.dark *));
-@custom-variant hover (&:hover);
+@custom-variant hover (&:hover);
+@theme {
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-tertiary: hsl(var(--tertiary));
+    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-info: hsl(var(--info));
+    --color-info-foreground: hsl(var(--info-foreground));
+    --color-success: hsl(var(--success));
+    --color-success-foreground: hsl(var(--success-foreground));
+    --color-warning: hsl(var(--warning));
+    --color-warning-foreground: hsl(var(--warning-foreground));
+    --color-danger: hsl(var(--danger));
+    --color-danger-foreground: hsl(var(--danger-foreground));
+    --color-neutral: hsl(var(--neutral));
+    --color-neutral-foreground: hsl(var(--neutral-foreground));
+}

src/styles/style.css

@@ -210,25 +210,4 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
-}
-
-@theme {
-    --color-primary: hsl(var(--primary));
-    --color-primary-foreground: hsl(var(--primary-foreground));
-    --color-secondary: hsl(var(--secondary));
-    --color-secondary-foreground: hsl(var(--secondary-foreground));
-    --color-tertiary: hsl(var(--tertiary));
-    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
-    --color-accent: hsl(var(--accent));
-    --color-accent-foreground: hsl(var(--accent-foreground));
-    --color-info: hsl(var(--info));
-    --color-info-foreground: hsl(var(--info-foreground));
-    --color-success: hsl(var(--success));
-    --color-success-foreground: hsl(var(--success-foreground));
-    --color-warning: hsl(var(--warning));
-    --color-warning-foreground: hsl(var(--warning-foreground));
-    --color-danger: hsl(var(--danger));
-    --color-danger-foreground: hsl(var(--danger-foreground));
-    --color-neutral: hsl(var(--neutral));
-    --color-neutral-foreground: hsl(var(--neutral-foreground));
 }