sane colors for themes

web/themes/theme-blue.css

@@ -1,46 +1,59 @@
 @layer base {
   .theme-blue.light {
-    --background: 0 0% 100%;
+    --background: 222.2 50% 98%;
+    --background-alt: 210 30% 96%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
+    --popover: 222 50% 97%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
+    --primary: 221.2 33.2% 53.3%;
+    --primary-variant: 221.2 83.2% 43.3%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 90.1%;
+    --secondary-foreground: 222.2 47.4% 61.2%;
+    --secondary-highlight: 210 40% 94%;
     --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --muted-foreground: 215.4 46.3% 46.9%;
+    --accent: 210 40% 80.1%;
+    --accent-foreground: 222.2 47.4% 57.2%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
+    --warning: 32 100% 50%;
+    --warning-foreground: 0 0% 0%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
-    --radius: 0.5rem;
+    --selected: 217.2 61.2% 59.8%;
+    --selected-foreground: 221 50% 100%;
   }
 
   .theme-blue.dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222.2 84% 8.9%;
+    --background-alt: 221.2 63.2% 13.3%;
     --foreground: 210 40% 98%;
     --card: 217.2 32.6% 17.5%;
     --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
+    --popover: 222.2 54% 18.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
+    --primary: 217.2 91.2% 79.8%;
+    --primary-variant: 217.2 91.2% 49.8%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary-foreground: 210 60% 78%;
+    --secondary-highlight: 217.2 32.6% 25.5%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
+    --warning: 32 100% 50%;
+    --warning-foreground: 0 0% 0%;
     --border: 217.2 36.6% 12.5%;
     --input: 217.2 38.6% 29.5%;
     --ring: 224.3 76.3% 48%;
+    --selected: 217.2 62.6% 59.8%;
+    --selected-foreground: 222.2 47.4% 11.2%;
   }
 }

web/themes/theme-default.css

@@ -78,8 +78,6 @@
     --selected-foreground: hsl(0 0% 100%);
     --selected-foreground: 0 0% 100%;
 
-    --radius: 0.5rem;
-
     --severity_alert: var(--red-800);
     --severity_alert_dimmed: var(--red-500);
 

web/themes/theme-gold.css

@@ -1,61 +1,59 @@
-.theme-gold.light {
-  --background: 38, 77%, 88%;
-  --foreground: 16, 43%, 34%;
-
-  --muted: 28, 46%, 56%;
-  --muted-foreground: 16, 43%, 34%;
-
-  --popover: 38, 77%, 88%;
-  --popover-foreground: 16, 43%, 34%;
-
-  --border: 28, 46%, 56%;
-  --input: 28, 46%, 56%;
-
-  --card: 38, 77%, 88%;
-  --card-foreground: 16, 43%, 34%;
-
-  --primary: 28, 46%, 56%;
-  --primary-foreground: 60, 70%, 90%;
-
-  --secondary: 39, 100%, 73%;
-  --secondary-foreground: 16, 43%, 34%;
-
-  --accent: 39, 100%, 73%;
-  --accent-foreground: 16, 43%, 34%;
-
-  --destructive: 16, 43%, 34%;
-  --destructive-foreground: 38, 77%, 88%;
-
-  --ring: 28, 46%, 56%;
-}
-
-.theme-gold.dark {
-  --background: 16, 43%, 34%;
-  --foreground: 38, 77%, 88%;
-
-  --muted: 28, 46%, 56%;
-  --muted-foreground: 38, 77%, 88%;
-
-  --popover: 16, 43%, 34%;
-  --popover-foreground: 38, 77%, 88%;
-
-  --border: 28, 46%, 56%;
-  --input: 28, 46%, 56%;
-
-  --card: 16, 43%, 34%;
-  --card-foreground: 38, 77%, 88%;
-
-  --primary: 28, 46%, 56%;
-  --primary-foreground: 60, 70%, 90%;
-
-  --secondary: 39, 100%, 73%;
-  --secondary-foreground: 16, 43%, 34%;
-
-  --accent: 39, 100%, 52%;
-  --accent-foreground: 16, 43%, 34%;
-
-  --destructive: 38, 77%, 88%;
-  --destructive-foreground: 16, 43%, 34%;
-
-  --ring: 28, 46%, 56%;
+@layer base {
+  .theme-gold.light {
+    --background: 38 77% 88%;
+    --background-alt: 39 100% 85%;
+    --foreground: 16 43% 34%;
+    --muted: 28 46% 56%;
+    --muted-foreground: 16 43% 34%;
+    --popover: 38 77% 88%;
+    --popover-foreground: 16 43% 34%;
+    --border: 28 46% 56%;
+    --input: 28 46% 56%;
+    --card: 38 77% 88%;
+    --card-foreground: 16 43% 34%;
+    --primary: 28 46% 56%;
+    --primary-variant: 28 46% 46%;
+    --primary-foreground: 60 70% 90%;
+    --secondary: 39 100% 73%;
+    --secondary-foreground: 16 43% 34%;
+    --secondary-highlight: 39 100% 80%;
+    --accent: 39 100% 73%;
+    --accent-foreground: 16 43% 34%;
+    --destructive: 16 43% 34%;
+    --destructive-foreground: 38 77% 88%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 16 43% 34%;
+    --ring: 28 46% 56%;
+    --selected: 39 100% 73%;
+    --selected-foreground: 16 43% 34%;
+  }
+
+  .theme-gold.dark {
+    --background: 28 46% 28%;
+    --background-alt: 28 46% 34%;
+    --foreground: 38 77% 88%;
+    --muted: 28 46% 56%;
+    --muted-foreground: 38 77% 88%;
+    --popover: 25 45% 34%;
+    --popover-foreground: 38 77% 88%;
+    --border: 28 46% 56%;
+    --input: 28 46% 56%;
+    --card: 16 43% 34%;
+    --card-foreground: 38 77% 88%;
+    --primary: 28 46% 50%;
+    --primary-variant: 28 46% 46%;
+    --primary-foreground: 60 70% 90%;
+    --secondary: 39 60% 63%;
+    --secondary-foreground: 28 50% 44%;
+    --secondary-highlight: 39 100% 65%;
+    --accent: 39 100% 52%;
+    --accent-foreground: 16 43% 34%;
+    --destructive: 38 77% 88%;
+    --destructive-foreground: 16 43% 34%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 16 43% 34%;
+    --ring: 28 46% 56%;
+    --selected: 39 100% 52%;
+    --selected-foreground: 16 43% 34%;
+  }
 }

web/themes/theme-green.css

@@ -1,46 +1,59 @@
 @layer base {
   .theme-green.light {
-    --background: 0 0% 100%;
+    --background: 145 70% 98%;
+    --background-alt: 145 70% 96%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
+    --popover: 145 20% 95%;
     --popover-foreground: 240 10% 3.9%;
     --primary: 142.1 76.2% 36.3%;
+    --primary-variant: 142.1 76.2% 26.3%;
     --primary-foreground: 355.7 100% 97.3%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
+    --secondary: 145 34.8% 85.9%;
+    --secondary-foreground: 145 35.9% 50%;
+    --secondary-highlight: 145 70% 92%;
+    --muted: 145 14.8% 75.9%;
     --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --accent: 145 34.8% 85.9%;
+    --accent-foreground: 145 15.9% 50%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 240 10% 3.9%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 142.1 76.2% 36.3%;
-    --radius: 0.5rem;
+    --selected: 142.1 76.2% 36.3%;
+    --selected-foreground: 0 0% 100%;
   }
 
   .theme-green.dark {
-    --background: 20 14.3% 4.1%;
+    --background: 145 34.3% 9.1%;
+    --background-alt: 145 30% 11%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;
     --card-foreground: 0 0% 95%;
-    --popover: 0 0% 9%;
+    --popover: 145 24% 9%;
     --popover-foreground: 0 0% 95%;
-    --primary: 142.1 70.6% 45.3%;
+    --primary: 142.1 70.6% 38.3%;
+    --primary-variant: 142.1 70.6% 35.3%;
     --primary-foreground: 144.9 80.4% 10%;
-    --secondary: 240 3.7% 15.9%;
+    --secondary: 145 13.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 12 6.5% 15.1%;
+    --secondary-highlight: 145 30% 20%;
+    --muted: 145 20% 15%;
+    --muted-foreground: 145 25% 64.9%;
+    --accent: 145 16.5% 25.1%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 0 0% 95%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 142.4 71.8% 29.2%;
+    --selected: 142.1 70.6% 45.3%;
+    --selected-foreground: 144.9 80.4% 10%;
   }
 }

web/themes/theme-nature.css

@@ -1,61 +1,59 @@
-.theme-nature.light {
-  --background: 58, 65%, 83%;
-  --foreground: 187, 33%, 43%;
-
-  --muted: 70, 20%, 68%;
-  --muted-foreground: 187, 33%, 43%;
-
-  --popover: 58, 65%, 83%;
-  --popover-foreground: 187, 33%, 43%;
-
-  --border: 93, 28%, 56%;
-  --input: 93, 28%, 56%;
-
-  --card: 58, 65%, 83%;
-  --card-foreground: 187, 33%, 43%;
-
-  --primary: 93, 28%, 56%;
-  --primary-foreground: 58, 65%, 83%;
-
-  --secondary: 70, 20%, 68%;
-  --secondary-foreground: 187, 33%, 43%;
-
-  --accent: 70, 20%, 68%;
-  --accent-foreground: 187, 33%, 43%;
-
-  --destructive: 187, 33%, 43%;
-  --destructive-foreground: 58, 65%, 83%;
-
-  --ring: 93, 28%, 56%;
-}
-
-.theme-nature.dark {
-  --background: 187, 33%, 43%;
-  --foreground: 58, 65%, 83%;
-
-  --muted: 70, 20%, 68%;
-  --muted-foreground: 58, 65%, 83%;
-
-  --popover: 187, 33%, 43%;
-  --popover-foreground: 58, 65%, 83%;
-
-  --border: 93, 28%, 56%;
-  --input: 93, 28%, 56%;
-
-  --card: 187, 33%, 43%;
-  --card-foreground: 58, 65%, 83%;
-
-  --primary: 93, 28%, 56%;
-  --primary-foreground: 187, 33%, 43%;
-
-  --secondary: 70, 20%, 68%;
-  --secondary-foreground: 58, 65%, 83%;
-
-  --accent: 70, 20%, 68%;
-  --accent-foreground: 58, 65%, 83%;
-
-  --destructive: 58, 65%, 83%;
-  --destructive-foreground: 187, 33%, 43%;
-
-  --ring: 93, 28%, 56%;
+@layer base {
+  .theme-nature.light {
+    --background: 70 30% 92%;
+    --background-alt: 58 45% 89%;
+    --foreground: 187 33% 43%;
+    --muted: 70 20% 68%;
+    --muted-foreground: 187 33% 43%;
+    --popover: 58 45% 83%;
+    --popover-foreground: 187 33% 43%;
+    --border: 93 28% 56%;
+    --input: 93 28% 56%;
+    --card: 58 65% 83%;
+    --card-foreground: 187 33% 43%;
+    --primary: 93 28% 56%;
+    --primary-variant: 93 28% 46%;
+    --primary-foreground: 58 65% 83%;
+    --secondary: 70 20% 78%;
+    --secondary-foreground: 187 33% 43%;
+    --secondary-highlight: 70 30% 75%;
+    --accent: 70 20% 68%;
+    --accent-foreground: 187 33% 43%;
+    --destructive: 187 33% 43%;
+    --destructive-foreground: 58 65% 83%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 187 33% 43%;
+    --ring: 93 28% 56%;
+    --selected: 70 20% 68%;
+    --selected-foreground: 187 33% 43%;
+  }
+
+  .theme-nature.dark {
+    --background: 187 33% 43%;
+    --background-alt: 187 33% 33%;
+    --foreground: 58 65% 83%;
+    --muted: 70 20% 68%;
+    --muted-foreground: 58 65% 83%;
+    --popover: 187 33% 43%;
+    --popover-foreground: 58 65% 83%;
+    --border: 93 28% 56%;
+    --input: 93 28% 56%;
+    --card: 187 33% 43%;
+    --card-foreground: 58 65% 83%;
+    --primary: 93 38% 36%;
+    --primary-variant: 93 28% 46%;
+    --primary-foreground: 187 33% 43%;
+    --secondary: 70 20% 58%;
+    --secondary-foreground: 58 65% 83%;
+    --secondary-highlight: 70 30% 60%;
+    --accent: 70 20% 68%;
+    --accent-foreground: 58 65% 83%;
+    --destructive: 58 65% 83%;
+    --destructive-foreground: 187 33% 43%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 187 33% 43%;
+    --ring: 93 28% 56%;
+    --selected: 70 20% 68%;
+    --selected-foreground: 58 65% 83%;
+  }
 }