neutral as a theme color

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
+                ? "bg-neutral w-[8px]" // Minor tick mark
-                : "w-[5px] bg-neutral-400 dark:bg-neutral-600"
+                : "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/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

@@ -14,7 +14,7 @@
     --secondary-foreground: 222.2 47.4% 61.2%;
     --secondary-highlight: 210 40% 94%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --neutral_variant: 0 0% 32.2%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 46.3% 46.9%;
     --accent: 210 40% 80.1%;
@@ -45,7 +45,7 @@
     --secondary-foreground: 210 60% 78%;
     --secondary-highlight: 217.2 32.6% 25.5%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --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

@@ -14,7 +14,7 @@
     --secondary-foreground: 145 35.9% 50%;
     --secondary-highlight: 145 70% 92%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --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%;
@@ -45,7 +45,7 @@
     --secondary-foreground: 0 0% 98%;
     --secondary-highlight: 145 30% 20%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --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

@@ -42,8 +42,8 @@
     --neutral: hsl(0, 0%, 45.1%);
     --neutral: 0 0% 45.1%;
 
-    --neutral-variant: hsl(0, 0%, 32.2%);
+    --neutral_variant: hsl(0, 0%, 32.2%);
-    --neutral-variant: 0 0% 32.2%;
+    --neutral_variant: 0 0% 32.2%;
 
     --muted: hsl(210, 40%, 96.1%);
     --muted: 210 40% 96.1%;
@@ -143,11 +143,11 @@
     --secondary-highlight: hsl(0, 0%, 65%);
     --secondary-highlight: 0 0% 65%;
 
-    --neutral: hsl(0, 0%, 65.1%);
+    --neutral: hsl(0, 0%, 95.1%);
-    --neutral: 0 0% 65.1%;
+    --neutral: 0 0% 95.1%;
 
-    --neutral-variant: hsl(0, 0%, 52.2%);
+    --neutral_variant: hsl(0, 0%, 82.2%);
-    --neutral-variant: 0 0% 52.2%;
+    --neutral_variant: 0 0% 82.2%;
 
     --muted: hsl(0, 0%, 32%);
     --muted: 0 0% 32%;

web/themes/theme-nord.css

@@ -18,7 +18,7 @@
     --secondary-foreground: 222 20% 16%;
     --secondary-highlight: 215 14% 88%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --neutral_variant: 0 0% 32.2%;
     --accent: 215 14% 80%;
     --accent-foreground: 222 20% 16%;
     --destructive: 0 80% 50%;
@@ -49,7 +49,7 @@
     --secondary-foreground: 222 20% 86%;
     --secondary-highlight: 215 14% 35%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --neutral_variant: 0 0% 32.2%;
     --accent: 215 14% 25%;
     --accent-foreground: 222 20% 96%;
     --destructive: 0 80% 50%;

web/themes/theme-red.css

@@ -14,7 +14,7 @@
     --secondary-foreground: 0 35.9% 50%;
     --secondary-highlight: 0 0% 92%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --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%;
@@ -45,7 +45,7 @@
     --secondary-foreground: 0 0% 98%;
     --secondary-highlight: 0 0% 25.9%;
     --neutral: 0 0% 45.1%;
-    --neutral-variant: 0 0% 32.2%;
+    --neutral_variant: 0 0% 32.2%;
     --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 12 6.5% 15.1%;