color uis

app/assets/css/global.css

@@ -3,6 +3,7 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+
 :root {
   --font-sans: 'Public Sans', sans-serif;
     --ui-primary: rgb(189, 23, 255);
@@ -21,28 +22,6 @@
 
 }
 
-.ui-red {
-    --ui-primary: var(--color-red-500);
-    --ui-bg-elevated:  oklch(63.7% 0.237 25.331 / 20%);
-    --ui-bg-accented:  oklch(63.7% 0.237 25.331 / 40%);
-}
-
-.ui-blue {
-    --ui-primary: var(--color-blue-500);
-    --ui-bg-elevated: oklch(62.3% 0.214 259.815 / 20%);
-    --ui-bg-accented: oklch(62.3% 0.214 259.815 / 40%);
-}
-
-.ui-violet {
-    --ui-primary: var(--color-violet-500);
-    --ui-bg-elevated: oklch(60.6% 0.25 292.717 / 20%);
-    --ui-bg-accented: oklch(60.6% 0.25 292.717 / 40%);
-}
-
-.ui-orange {
-    --ui-primary: var(--color-orange-600);
-}
-
 .dark-widget-bg {
     --ui-bg-elevated: rgb(34, 24, 32);
     --ui-bg-accented: rgb(22,22,22);

app/assets/css/ui_colors.css

@@ -0,0 +1,33 @@
+
+.ui-red {
+    --ui-primary: var(--color-red-500);
+    --ui-bg-elevated:  oklch(63.7% 0.237 25.331 / 20%);
+    --ui-bg-accented:  oklch(63.7% 0.237 25.331 / 40%);
+}
+
+.ui-blue {
+    --ui-primary: var(--color-blue-500);
+    --ui-bg-elevated: oklch(62.3% 0.214 259.815 / 20%);
+    --ui-bg-accented: oklch(62.3% 0.214 259.815 / 40%);
+}
+
+.ui-violet {
+    --ui-primary: var(--color-violet-500);
+    --ui-bg-elevated: oklch(60.6% 0.25 292.717 / 20%);
+    --ui-bg-accented: oklch(60.6% 0.25 292.717 / 40%);
+}
+
+.ui-indigo {
+    --ui-primary: var(--color-indigo-500);
+    --ui-bg-elevated: oklch(58.5% 0.233 277.117 / 20%);
+    --ui-bg-accented:  oklch(58.5% 0.233 277.117 / 40%);
+}
+
+.ui-orange {
+    --ui-primary: var(--color-orange-600);
+}
+.ui-cyan {
+    --ui-primary: var(--color-cyan-500);
+    --ui-bg-elevated: oklch(71.5% 0.143 215.221 / 20%);
+    --ui-bg-accented: oklch(71.5% 0.143 215.221 / 40%);
+}

nuxt.config.ts

@@ -4,7 +4,7 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: true},
-    css: ['./app/assets/css/global.css' ],
+    css: ['@/assets/css/global.css', '@/assets/css/ui_colors.css' ],
     modules: [
       '@nuxt/image',
       '@nuxt/ui',
@@ -14,7 +14,7 @@ export default defineNuxtConfig({
     ],
     vite: {
         plugins: [
-            tailwindcss()
+            tailwindcss(),
         ],
     },
 })