Theme updates (#12373)

* remove hideous and ugly themes

* incorporate dei into ui design

* neutral as a theme color

* high contrast theme adjustments

* color tweaks

web/src/components/timeline/EventSegment.tsx

@@ -152,7 +152,7 @@ export function EventSegment({
       : ""
   } ${
     isFirstSegmentInMinimap || isLastSegmentInMinimap
-      ? "relative h-[8px] border-b-2 border-neutral-600"
+      ? "relative h-[8px] border-b-2 border-neutral_variant"
       : ""
   }`;
 

web/src/components/timeline/segment-metadata.tsx

@@ -71,11 +71,11 @@ export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
           className={`pointer-events-none h-0.5 select-none ${
             timestamp.getMinutes() % timestampSpread === 0 &&
             timestamp.getSeconds() === 0
-              ? "w-[12px] bg-neutral-600 dark:bg-neutral-500"
+              ? "dark:bg-neutral bg-neutral_variant w-[12px]"
               : timestamp.getMinutes() % (timestampSpread == 15 ? 5 : 1) ===
                     0 && timestamp.getSeconds() === 0
-                ? "w-[8px] bg-neutral-500" // Minor tick mark
-                : "w-[5px] bg-neutral-400 dark:bg-neutral-600"
+                ? "bg-neutral w-[8px]" // Minor tick mark
+                : "dark:bg-neutral_variant w-[5px] bg-neutral-400"
           }`}
         ></div>
       </div>
@@ -97,7 +97,7 @@ export function Timestamp({
       {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
         <div
           key={`${segmentKey}_timestamp`}
-          className="pointer-events-none select-none text-[8px] text-neutral-600 dark:text-neutral-500"
+          className="dark:text-neutral text-neutral_variant pointer-events-none select-none text-[8px]"
         >
           {timestamp.getMinutes() % timestampSpread === 0 &&
             timestamp.getSeconds() === 0 &&

web/src/context/theme-provider.tsx

@@ -3,25 +3,19 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
 type Theme = "dark" | "light" | "system";
 type ColorScheme =
   | "theme-blue"
-  | "theme-gold"
   | "theme-green"
-  | "theme-nature"
-  | "theme-netflix"
   | "theme-nord"
-  | "theme-orange"
   | "theme-red"
+  | "theme-high-contrast"
   | "theme-default";
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const colorSchemes: ColorScheme[] = [
   "theme-blue",
-  "theme-gold",
   "theme-green",
-  "theme-nature",
-  "theme-netflix",
   "theme-nord",
-  "theme-orange",
   "theme-red",
+  "theme-high-contrast",
   "theme-default",
 ];
 

web/src/index.css

@@ -1,12 +1,9 @@
 @import "/themes/tailwind-base.css";
 @import "/themes/theme-default.css";
 @import "/themes/theme-blue.css";
-@import "/themes/theme-gold.css";
 @import "/themes/theme-green.css";
-@import "/themes/theme-nature.css";
-@import "/themes/theme-netflix.css";
+@import "/themes/theme-high-contrast.css";
 @import "/themes/theme-nord.css";
-@import "/themes/theme-orange.css";
 @import "/themes/theme-red.css";
 
 @tailwind base;
@@ -26,7 +23,7 @@
 
 @layer utilities {
   .scrollbar-container {
-    @apply scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-border scrollbar-track-background_alt;
+    @apply scrollbar-thin scrollbar-track-background_alt scrollbar-thumb-border scrollbar-track-rounded-full scrollbar-thumb-rounded-full;
   }
 }
 

web/tailwind.config.js

@@ -103,6 +103,12 @@ module.exports = {
         audio_review: {
           DEFAULT: "hsl(var(--audio_review))",
         },
+        neutral: {
+          DEFAULT: "hsl(var(--neutral))",
+        },
+        neutral_variant: {
+          DEFAULT: "hsl(var(--neutral_variant))",
+        },
       },
       keyframes: {
         "accordion-down": {

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-default.css

@@ -39,6 +39,12 @@
     --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%;
 
@@ -137,6 +143,12 @@
     --secondary-highlight: hsl(0, 0%, 25%);
     --secondary-highlight: 0 0% 25%;
 
+    --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(0, 0%, 12%);
     --muted: 0 0% 12%;
 

web/themes/theme-gold.css

@@ -1,59 +0,0 @@
-@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

@@ -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 {
+  .theme-high-contrast.light {
+    --background: hsl(0, 0%, 100%);
+    --background: 0 0% 100%;
+
+    --background-alt: hsl(0, 0%, 99.5%);
+    --background-alt: 0 0% 99.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%, 1.2%);
+    --primary: 222.2 47.4% 1.2%;
+
+    --primary-variant: hsl(222.2, 37.4%, 4.2%);
+    --primary-variant: 222.2 47.4% 4.2%;
+
+    --primary-foreground: hsl(210, 40%, 98%);
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: hsl(0, 0%, 98.1%);
+    --secondary: 0 0% 98.1%;
+
+    --secondary-foreground: hsl(222.2, 17.4%, 6.2%);
+    --secondary-foreground: 222.2 17.4% 6.2%;
+
+    --secondary-highlight: hsl(0, 0%, 84%);
+    --secondary-highlight: 0 0% 84%;
+
+    --neutral: hsl(0, 0%, 5.1%);
+    --neutral: 0 0% 5.1%;
+
+    --neutral_variant: hsl(0, 0%, 2.2%);
+    --neutral_variant: 0 0% 2.2%;
+
+    --muted: hsl(0, 0%, 94.1%);
+    --muted: 0 0% 94.1%;
+
+    --muted-foreground: hsl(215.4, 6.3%, 46.9%);
+    --muted-foreground: 215.4 6.3% 46.9%;
+
+    --accent: hsl(0, 0%, 94.1%);
+    --accent: 0 0% 94.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%;
+  }
+
+  .theme-high-contrast.dark {
+    --background: hsl(0, 0, 0%);
+    --background: 0 0% 0%;
+
+    --background-alt: hsl(0, 0, 3%);
+    --background-alt: 0 0% 3%;
+
+    --foreground: hsl(0, 0%, 100%);
+    --foreground: 0, 0%, 100%;
+
+    --card: hsl(0, 0%, 11%);
+    --card: 0, 0%, 11%;
+
+    --card-foreground: hsl(210, 40%, 98%);
+    --card-foreground: 210 40% 98%;
+
+    --popover: hsl(0, 0%, 11%);
+    --popover: 0, 0%, 11%;
+
+    --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%, 5%);
+    --secondary: 0 0% 5%;
+
+    --secondary-foreground: hsl(0, 0%, 82%);
+    --secondary-foreground: 0 0% 82%;
+
+    --secondary-highlight: hsl(0, 0%, 45%);
+    --secondary-highlight: 0 0% 45%;
+
+    --neutral: hsl(0, 0%, 97.1%);
+    --neutral: 0 0% 97.1%;
+
+    --neutral_variant: hsl(0, 0%, 92.2%);
+    --neutral_variant: 0 0% 92.2%;
+
+    --muted: hsl(0, 0%, 22%);
+    --muted: 0 0% 22%;
+
+    --muted-foreground: hsl(0, 0%, 82%);
+    --muted-foreground: 0 0% 82%;
+
+    --accent: hsl(0, 0%, 11%);
+    --accent: 0 0% 11%;
+
+    --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%, 92%);
+    --border: 0 0% 92%;
+
+    --input: hsl(0, 0%, 45%);
+    --input: 0 0% 45%;
+
+    --ring: hsla(0, 0%, 25%, 0%);
+    --ring: 0 0% 25% 0%;
+  }
+}

web/themes/theme-nature.css

@@ -1,59 +0,0 @@
-@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%;
-  }
-}

web/themes/theme-netflix.css

@@ -1,59 +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%;
-  }
-
-  .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%;
-  }
-}

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-orange.css

@@ -1,59 +0,0 @@
-@layer base {
-  .theme-orange.light {
-    --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: 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: 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: 24 25.9% 90%;
-    --ring: 24.6 95% 53.1%;
-    --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% 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: 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%;
-  }
-}

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