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