From ab032aa0045468a43841cd2c1b67dbc717b8f501 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 26 Apr 2024 15:30:57 -0500
Subject: [PATCH] sane colors for themes (#11126)

---
 web/themes/theme-blue.css    |  39 ++++++++----
 web/themes/theme-default.css |   2 -
 web/themes/theme-gold.css    | 116 +++++++++++++++++------------------
 web/themes/theme-green.css   |  43 ++++++++-----
 web/themes/theme-nature.css  | 116 +++++++++++++++++------------------
 web/themes/theme-netflix.css | 116 +++++++++++++++++------------------
 web/themes/theme-nord.css    | 116 +++++++++++++++++------------------
 web/themes/theme-orange.css  |  49 +++++++++------
 web/themes/theme-red.css     |  19 +++++-
 9 files changed, 329 insertions(+), 287 deletions(-)

diff --git a/web/themes/theme-blue.css b/web/themes/theme-blue.css
index e07ac2c30..0a18600c7 100644
--- a/web/themes/theme-blue.css
+++ b/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%;
   }
 }
diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
index 3d2619c72..804b2f9f2 100644
--- a/web/themes/theme-default.css
+++ b/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);
 
diff --git a/web/themes/theme-gold.css b/web/themes/theme-gold.css
index 4b9ddaaf4..a4a0b33ba 100644
--- a/web/themes/theme-gold.css
+++ b/web/themes/theme-gold.css
@@ -1,61 +1,59 @@
-.theme-gold.light {
-  --background: 38, 77%, 88%;
-  --foreground: 16, 43%, 34%;
+@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%;
+  }
 
-  --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%;
+  .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%;
+  }
 }
diff --git a/web/themes/theme-green.css b/web/themes/theme-green.css
index 9919c00ca..f2816d953 100644
--- a/web/themes/theme-green.css
+++ b/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%;
   }
 }
diff --git a/web/themes/theme-nature.css b/web/themes/theme-nature.css
index 6fcd1be03..f7e29c512 100644
--- a/web/themes/theme-nature.css
+++ b/web/themes/theme-nature.css
@@ -1,61 +1,59 @@
-.theme-nature.light {
-  --background: 58, 65%, 83%;
-  --foreground: 187, 33%, 43%;
+@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%;
+  }
 
-  --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%;
+  .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%;
+  }
 }
diff --git a/web/themes/theme-netflix.css b/web/themes/theme-netflix.css
index 93f8770a0..641884b45 100644
--- a/web/themes/theme-netflix.css
+++ b/web/themes/theme-netflix.css
@@ -1,61 +1,59 @@
-.theme-netflix.light {
-  --background: 0, 0%, 100%;
-  --foreground: 0, 0%, 0%;
+@layer base {
+  .theme-netflix.light {
+    --background: 0 0% 100%;
+    --background-alt: 0 0% 96%;
+    --foreground: 0 0% 0%;
+    --muted: 0 0% 68%;
+    --muted-foreground: 0 0% 0%;
+    --popover: 0 0% 95%;
+    --popover-foreground: 0 0% 0%;
+    --border: 0 68% 39%;
+    --input: 0 68% 39%;
+    --card: 0 0% 95%;
+    --card-foreground: 0 0% 0%;
+    --primary: 0 100% 44%;
+    --primary-variant: 0 100% 34%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 80%;
+    --secondary-foreground: 0 0% 100%;
+    --secondary-highlight: 0 0% 10%;
+    --accent: 0 100% 50%;
+    --accent-foreground: 0 0% 0%;
+    --destructive: 0 68% 39%;
+    --destructive-foreground: 0 0% 100%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 0 0% 0%;
+    --ring: 0 100% 44%;
+    --selected: 0 100% 44%;
+    --selected-foreground: 0 0% 100%;
+  }
 
-  --muted: 0, 0%, 68%;
-  --muted-foreground: 0, 0%, 0%;
-
-  --popover: 0, 0%, 95%;
-  --popover-foreground: 0, 0%, 0%;
-
-  --border: 0, 68%, 39%;
-  --input: 0, 68%, 39%;
-
-  --card: 0, 0%, 95%;
-  --card-foreground: 0, 0%, 0%;
-
-  --primary: 0, 100%, 44%;
-  --primary-foreground: 0, 0%, 100%;
-
-  --secondary: 0, 0%, 0%;
-  --secondary-foreground: 0, 0%, 100%;
-
-  --accent: 0, 100%, 50%;
-  --accent-foreground: 0, 0%, 0%;
-
-  --destructive: 0, 68%, 39%;
-  --destructive-foreground: 0, 0%, 100%;
-
-  --ring: 0, 100%, 44%;
-}
-
-.theme-netflix.dark {
-  --background: 0, 0%, 0%;
-  --foreground: 0, 0%, 100%;
-
-  --muted: 0, 0%, 50%;
-  --muted-foreground: 0, 0%, 100%;
-
-  --popover: 0, 0%, 5%;
-  --popover-foreground: 0, 0%, 100%;
-
-  --border: 0, 68%, 39%;
-  --input: 0, 68%, 39%;
-
-  --card: 0, 0%, 5%;
-  --card-foreground: 0, 0%, 100%;
-
-  --primary: 0, 100%, 44%;
-  --primary-foreground: 0, 0%, 0%;
-
-  --secondary: 0, 0%, 100%;
-  --secondary-foreground: 0, 0%, 0%;
-
-  --accent: 0, 100%, 50%;
-  --accent-foreground: 0, 0%, 100%;
-
-  --destructive: 0, 68%, 39%;
-  --destructive-foreground: 0, 0%, 100%;
-
-  --ring: 0, 100%, 44%;
+  .theme-netflix.dark {
+    --background: 0 0% 0%;
+    --background-alt: 0 0% 5%;
+    --foreground: 0 0% 100%;
+    --muted: 0 0% 50%;
+    --muted-foreground: 0 0% 100%;
+    --popover: 0 0% 5%;
+    --popover-foreground: 0 0% 100%;
+    --border: 0 68% 39%;
+    --input: 0 68% 39%;
+    --card: 0 0% 5%;
+    --card-foreground: 0 0% 100%;
+    --primary: 0 70% 44%;
+    --primary-variant: 0 100% 34%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 20%;
+    --secondary-foreground: 0 0% 40%;
+    --secondary-highlight: 0 0% 90%;
+    --accent: 0 100% 50%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 68% 39%;
+    --destructive-foreground: 0 0% 100%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 0 0% 0%;
+    --ring: 0 100% 44%;
+    --selected: 0 100% 44%;
+    --selected-foreground: 0 0% 0%;
+  }
 }
diff --git a/web/themes/theme-nord.css b/web/themes/theme-nord.css
index 5a5f95daf..ab8ead0e4 100644
--- a/web/themes/theme-nord.css
+++ b/web/themes/theme-nord.css
@@ -1,61 +1,59 @@
-.theme-nord.light {
-  --background: 220, 16%, 96%;
-  --foreground: 222, 20%, 16%;
+@layer base {
+  .theme-nord.light {
+    --background: 220 16% 96%;
+    --background-alt: 215 14% 92%;
+    --foreground: 222 20% 16%;
+    --muted: 215 14% 80%;
+    --muted-foreground: 222 20% 16%;
+    --popover: 220 16% 96%;
+    --popover-foreground: 222 20% 16%;
+    --border: 222 20% 70%;
+    --input: 222 20% 70%;
+    --card: 220 16% 96%;
+    --card-foreground: 222 20% 16%;
+    --primary: 222 20% 35%;
+    --primary-variant: 222 20% 60%;
+    --primary-foreground: 220 16% 96%;
+    --secondary: 215 14% 80%;
+    --secondary-foreground: 222 20% 16%;
+    --secondary-highlight: 215 14% 88%;
+    --accent: 215 14% 80%;
+    --accent-foreground: 222 20% 16%;
+    --destructive: 0 80% 50%;
+    --destructive-foreground: 222 20% 16%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 222 20% 16%;
+    --ring: 222 20% 70%;
+    --selected: 222 20% 70%;
+    --selected-foreground: 220 16% 96%;
+  }
 
-  --muted: 215, 14%, 80%;
-  --muted-foreground: 222, 20%, 16%;
-
-  --popover: 220, 16%, 96%;
-  --popover-foreground: 222, 20%, 16%;
-
-  --border: 222, 20%, 70%;
-  --input: 222, 20%, 70%;
-
-  --card: 220, 16%, 96%;
-  --card-foreground: 222, 20%, 16%;
-
-  --primary: 222, 20%, 70%;
-  --primary-foreground: 220, 16%, 96%;
-
-  --secondary: 215, 14%, 80%;
-  --secondary-foreground: 222, 20%, 16%;
-
-  --accent: 215, 14%, 80%;
-  --accent-foreground: 222, 20%, 16%;
-
-  --destructive: 0, 80%, 50%;
-  --destructive-foreground: 222, 20%, 16%;
-
-  --ring: 222, 20%, 70%;
-}
-
-.theme-nord.dark {
-  --background: 220, 16%, 16%;
-  --foreground: 222, 20%, 96%;
-
-  --muted: 215, 14%, 25%;
-  --muted-foreground: 222, 20%, 96%;
-
-  --popover: 220, 16%, 16%;
-  --popover-foreground: 222, 20%, 96%;
-
-  --border: 222, 20%, 40%;
-  --input: 222, 20%, 40%;
-
-  --card: 220, 16%, 16%;
-  --card-foreground: 222, 20%, 96%;
-
-  --primary: 222, 20%, 65%;
-  --primary-foreground: 220, 16%, 16%;
-
-  --secondary: 215, 14%, 25%;
-  --secondary-foreground: 222, 20%, 96%;
-
-  --accent: 215, 14%, 25%;
-  --accent-foreground: 222, 20%, 96%;
-
-  --destructive: 0, 80%, 50%;
-  --destructive-foreground: 222, 20%, 96%;
-
-  --ring: 222, 20%, 40%;
+  .theme-nord.dark {
+    --background: 220 16% 16%;
+    --background-alt: 215 14% 12%;
+    --foreground: 222 20% 96%;
+    --muted: 215 14% 25%;
+    --muted-foreground: 222 20% 66%;
+    --popover: 220 16% 16%;
+    --popover-foreground: 222 20% 66%;
+    --border: 222 20% 40%;
+    --input: 222 20% 40%;
+    --card: 220 16% 16%;
+    --card-foreground: 222 20% 96%;
+    --primary: 222 20% 75%;
+    --primary-variant: 222 20% 55%;
+    --primary-foreground: 220 16% 16%;
+    --secondary: 215 14% 25%;
+    --secondary-foreground: 222 20% 86%;
+    --secondary-highlight: 215 14% 35%;
+    --accent: 215 14% 25%;
+    --accent-foreground: 222 20% 96%;
+    --destructive: 0 80% 50%;
+    --destructive-foreground: 222 20% 96%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 222 20% 96%;
+    --ring: 222 20% 40%;
+    --selected: 222 20% 55%;
+    --selected-foreground: 220 16% 16%;
+  }
 }
diff --git a/web/themes/theme-orange.css b/web/themes/theme-orange.css
index 57a26182c..5e428c33a 100644
--- a/web/themes/theme-orange.css
+++ b/web/themes/theme-orange.css
@@ -1,46 +1,59 @@
 @layer base {
   .theme-orange.light {
-    --background: 0 0% 100%;
+    --background: 24 50% 98.3%;
+    --background-alt: 30 50% 96%;
     --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
     --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
+    --popover: 24 30% 95%;
+    --popover-foreground: 24 24.3% 14.1%;
+    --primary: 24.6 55% 53.1%;
+    --primary-variant: 24.6 55% 43.1%;
     --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+    --secondary: 24 54.8% 95.9%;
+    --secondary-foreground: 24 79.8% 60%;
+    --secondary-highlight: 30 50% 92%;
+    --muted: 24 4.8% 75.9%;
+    --muted-foreground: 25 25.3% 44.7%;
+    --accent: 24 14.8% 95.9%;
+    --accent-foreground: 24 14.8% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 60 9.1% 97.8%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 20 14.3% 4.1%;
     --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
+    --input: 24 25.9% 90%;
     --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
+    --selected: 24.6 85% 53.1%;
+    --selected-foreground: 60 9.1% 97.8%;
   }
 
   .theme-orange.dark {
     --background: 20 14.3% 4.1%;
+    --background-alt: 20 14.3% 9.1%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;
     --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
+    --primary: 20.5 90.2% 68.2%;
+    --primary-variant: 20.5 90.2% 58.2%;
     --primary-foreground: 60 9.1% 97.8%;
     --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
+    --secondary-foreground: 20 49.1% 57.8%;
+    --secondary-highlight: 12 6.5% 25.1%;
+    --muted: 20.5 26.5% 15.1%;
+    --muted-foreground: 20 25.4% 53.9%;
+    --accent: 20 16.5% 15.1%;
+    --accent-foreground: 20 19.1% 79.8%;
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 60 9.1% 97.8%;
+    --warning: 45 100% 51%;
+    --warning-foreground: 60 9.1% 97.8%;
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
     --ring: 20.5 90.2% 48.2%;
+    --selected: 20.5 90.2% 38.2%;
+    --selected-foreground: 60 9.1% 97.8%;
   }
 }
diff --git a/web/themes/theme-red.css b/web/themes/theme-red.css
index d52fd4e07..f522d74b7 100644
--- a/web/themes/theme-red.css
+++ b/web/themes/theme-red.css
@@ -1,46 +1,59 @@
 @layer base {
   .theme-red.light {
     --background: 0 0% 100%;
+    --background-alt: 0 0% 98%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
     --primary: 346.8 77.2% 49.8%;
+    --primary-variant: 346.8 77.2% 39.8%;
     --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+    --secondary-foreground: 0 35.9% 50%;
+    --secondary-highlight: 0 0% 92%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
     --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: 346.8 77.2% 49.8%;
-    --radius: 0.5rem;
+    --selected: 346.8 77.2% 49.8%;
+    --selected-foreground: 355.7 100% 97.3%;
   }
 
   .theme-red.dark {
     --background: 20 14.3% 4.1%;
+    --background-alt: 0 0% 9%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;
     --card-foreground: 0 0% 95%;
     --popover: 0 0% 9%;
     --popover-foreground: 0 0% 95%;
-    --primary: 346.8 77.2% 49.8%;
+    --primary: 0 37.2% 90.8%;
+    --primary-variant: 346.8 77.2% 39.8%;
     --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
+    --secondary-highlight: 0 0% 25.9%;
     --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 12 6.5% 15.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: 346.8 77.2% 49.8%;
+    --selected: 346.8 77.2% 39.8%;
+    --selected-foreground: 355.7 100% 97.3%;
   }
 }