sane colors for themes (blakeblackshear#11126)

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%;
+ }
 }