incorporate dei into ui design

web/src/context/theme-provider.tsx

@@ -6,6 +6,7 @@ type ColorScheme =
   | "theme-green"
   | "theme-nord"
   | "theme-red"
+  | "theme-high-contrast"
   | "theme-default";
 
 // eslint-disable-next-line react-refresh/only-export-components
@@ -14,6 +15,7 @@ export const colorSchemes: ColorScheme[] = [
   "theme-green",
   "theme-nord",
   "theme-red",
+  "theme-high-contrast",
   "theme-default",
 ];
 

web/src/index.css

@@ -2,6 +2,7 @@
 @import "/themes/theme-default.css";
 @import "/themes/theme-blue.css";
 @import "/themes/theme-green.css";
+@import "/themes/theme-high-contrast.css";
 @import "/themes/theme-nord.css";
 @import "/themes/theme-red.css";
 

web/themes/theme-blue.css

@@ -13,6 +13,8 @@
     --secondary: 210 40% 90.1%;
     --secondary-foreground: 222.2 47.4% 61.2%;
     --secondary-highlight: 210 40% 94%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 46.3% 46.9%;
     --accent: 210 40% 80.1%;
@@ -42,6 +44,8 @@
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 60% 78%;
     --secondary-highlight: 217.2 32.6% 25.5%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;

web/themes/theme-green.css

@@ -13,6 +13,8 @@
     --secondary: 145 34.8% 85.9%;
     --secondary-foreground: 145 35.9% 50%;
     --secondary-highlight: 145 70% 92%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --muted: 145 14.8% 75.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 145 34.8% 85.9%;
@@ -42,6 +44,8 @@
     --secondary: 145 13.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
     --secondary-highlight: 145 30% 20%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --muted: 145 20% 15%;
     --muted-foreground: 145 25% 64.9%;
     --accent: 145 16.5% 25.1%;

web/themes/theme-high-contrast.css

@@ -0,0 +1,185 @@
+@layer base {
+  :root {
+    --background: hsl(0, 0%, 100%);
+    --background: 0 0% 100%;
+
+    --background-alt: hsl(0, 0%, 98.5%);
+    --background-alt: 0 0% 98.5%;
+
+    --foreground: hsl(222.2, 84%, 4.9%);
+    --foreground: 222.2 84% 4.9%;
+
+    --card: hsl(0, 0%, 100%);
+    --card: 0 0% 100%;
+
+    --card-foreground: hsl(222.2, 84%, 4.9%);
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: hsl(0, 0%, 100%);
+    --popover: 0 0% 100%;
+
+    --popover-foreground: hsl(222.2, 84%, 4.9%);
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: hsl(222.2, 37.4%, 11.2%);
+    --primary: 222.2 47.4% 11.2%;
+
+    --primary-variant: hsl(222.2, 37.4%, 24.2%);
+    --primary-variant: 222.2 47.4% 24.2%;
+
+    --primary-foreground: hsl(210, 40%, 98%);
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: hsl(210, 20%, 94.1%);
+    --secondary: 210 20% 94.1%;
+
+    --secondary-foreground: hsl(222.2, 17.4%, 36.2%);
+    --secondary-foreground: 222.2 17.4% 36.2%;
+
+    --secondary-highlight: hsl(0, 0%, 94%);
+    --secondary-highlight: 0 0% 94%;
+
+    --neutral: hsl(0, 0%, 45.1%);
+    --neutral: 0 0% 45.1%;
+
+    --neutral-variant: hsl(0, 0%, 32.2%);
+    --neutral-variant: 0 0% 32.2%;
+
+    --muted: hsl(210, 40%, 96.1%);
+    --muted: 210 40% 96.1%;
+
+    --muted-foreground: hsl(215.4, 6.3%, 46.9%);
+    --muted-foreground: 215.4 6.3% 46.9%;
+
+    --accent: hsl(210, 40%, 96.1%);
+    --accent: 210 40% 96.1%;
+
+    --accent-foreground: hsl(222.2, 47.4%, 11.2%);
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: hsl(0, 84.2%, 60.2%);
+    --destructive: 0 84.2% 60.2%;
+
+    --destructive-foreground: hsl(0, 100%, 83%);
+    --destructive-foreground: 0 100% 83%;
+
+    --warning: hsl(17, 87%, 18%);
+    --warning: 17 87% 18%;
+
+    --warning-foreground: hsl(32, 100%, 74%);
+    --warning-foreground: 32 100% 74%;
+
+    --border: hsl(214.3, 31.8%, 91.4%);
+    --border: 214.3 31.8% 91.4%;
+
+    --input: hsl(0, 0%, 85%);
+    --input: 0 0% 85%;
+
+    --ring: hsla(0, 0%, 25%, 0%);
+    --ring: 0 0% 25% 0%;
+
+    --selected: hsl(228, 89%, 63%);
+    --selected: 228 89% 63%;
+
+    --selected-foreground: hsl(0 0% 100%);
+    --selected-foreground: 0 0% 100%;
+
+    --severity_alert: var(--red-800);
+    --severity_alert_dimmed: var(--red-500);
+
+    --severity_detection: var(--orange-600);
+    --severity_detection_dimmed: var(--orange-400);
+
+    --severity_significant_motion: var(--yellow-400);
+    --severity_significant_motion_dimmed: var(--yellow-200);
+
+    --motion_review: hsl(44, 94%, 50%);
+    --motion_review: 44 94% 50%;
+
+    --motion_review_dimmed: hsl(44, 60%, 40%);
+    --motion_review_dimmed: 44 60% 40%;
+
+    --audio_review: hsl(228, 94%, 67%);
+    --audio_review: 228 94% 67%;
+  }
+
+  .dark {
+    --background: hsl(0, 0, 0%);
+    --background: 0 0% 0%;
+
+    --background-alt: hsl(0, 0, 9%);
+    --background-alt: 0 0% 9%;
+
+    --foreground: hsl(0, 0%, 100%);
+    --foreground: 0, 0%, 100%;
+
+    --card: hsl(0, 0%, 15%);
+    --card: 0, 0%, 15%;
+
+    --card-foreground: hsl(210, 40%, 98%);
+    --card-foreground: 210 40% 98%;
+
+    --popover: hsl(0, 0%, 15%);
+    --popover: 0, 0%, 15%;
+
+    --popover-foreground: hsl(0, 0%, 98%);
+    --popover-foreground: 0 0% 98%;
+
+    --primary: hsl(0, 0%, 91%);
+    --primary: 0 0% 91%;
+
+    --primary-variant: hsl(0, 0%, 64%);
+    --primary-variant: 0 0% 64%;
+
+    --primary-foreground: hsl(0, 0%, 29%);
+    --primary-foreground: 0 0% 29%;
+
+    --secondary: hsl(0, 0%, 25%);
+    --secondary: 0 0% 25%;
+
+    --secondary-foreground: hsl(0, 0%, 82%);
+    --secondary-foreground: 0 0% 82%;
+
+    --secondary-highlight: hsl(0, 0%, 65%);
+    --secondary-highlight: 0 0% 65%;
+
+    --neutral: hsl(0, 0%, 65.1%);
+    --neutral: 0 0% 65.1%;
+
+    --neutral-variant: hsl(0, 0%, 52.2%);
+    --neutral-variant: 0 0% 52.2%;
+
+    --muted: hsl(0, 0%, 32%);
+    --muted: 0 0% 32%;
+
+    --muted-foreground: hsl(0, 0%, 62%);
+    --muted-foreground: 0 0% 62%;
+
+    --accent: hsl(0, 0%, 39%);
+    --accent: 0 0% 39%;
+
+    --accent-foreground: hsl(210, 40%, 95%);
+    --accent-foreground: 210 40% 95%;
+
+    --destructive: hsl(0, 62.8%, 30.6%);
+    --destructive: 0 62.8% 30.6%;
+
+    --destructive-foreground: hsl(0, 100%, 83%);
+    --destructive-foreground: 0 100% 83%;
+
+    --warning: hsl(17, 87%, 18%);
+    --warning: 17 87% 18%;
+
+    --warning-foreground: hsl(32, 100%, 74%);
+    --warning-foreground: 32 100% 74%;
+
+    --border: hsl(0, 0%, 52%);
+    --border: 0 0% 52%;
+
+    --input: hsl(0, 0%, 45%);
+    --input: 0 0% 45%;
+
+    --ring: hsla(0, 0%, 25%, 0%);
+    --ring: 0 0% 25% 0%;
+  }
+}

web/themes/theme-nord.css

@@ -17,6 +17,8 @@
     --secondary: 215 14% 80%;
     --secondary-foreground: 222 20% 16%;
     --secondary-highlight: 215 14% 88%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --accent: 215 14% 80%;
     --accent-foreground: 222 20% 16%;
     --destructive: 0 80% 50%;
@@ -46,6 +48,8 @@
     --secondary: 215 14% 25%;
     --secondary-foreground: 222 20% 86%;
     --secondary-highlight: 215 14% 35%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --accent: 215 14% 25%;
     --accent-foreground: 222 20% 96%;
     --destructive: 0 80% 50%;

web/themes/theme-red.css

@@ -13,6 +13,8 @@
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 0 35.9% 50%;
     --secondary-highlight: 0 0% 92%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
@@ -42,6 +44,8 @@
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
     --secondary-highlight: 0 0% 25.9%;
+    --neutral: 0 0% 45.1%;
+    --neutral-variant: 0 0% 32.2%;
     --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 12 6.5% 15.1%;