new colors

app/assets/css/global.css

@@ -5,15 +5,42 @@
 
 :root {
   --font-sans: 'Public Sans', sans-serif;
-  --ui-bg: rgb(220,220,220);
+    --ui-primary: rgb(189, 23, 255);
 }
+
+.light {
+    --ui-bg: var(--color-neutral-100);
+}
+
 .dark {
   /*--ui-bg: var(--ui-color-neutral-950);*/
-  --ui-bg: rgb(17,17,17);
+  --ui-bg: oklch(16.7% 0.004 49.25);
   --ui-bg-accented: rgba(189, 23, 255, 0.3);
   --ui-bg-elevated: rgba(189, 23, 255, 0.2);
 
-  --ui-primary: rgb(189, 23, 255);
+
+}
+
+.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 {