Add config item for selected foreground

web/src/components/navigation/NavItem.tsx

@@ -11,7 +11,7 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 const variants = {
   primary: {
-    active: "font-bold text-white bg-selected",
+    active: "font-bold bg-selected text-selected-foreground",
     inactive: "text-secondary-foreground bg-secondary",
   },
   secondary: {

web/src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-secondary text-primary hover:bg-secondary/80",
-        select: "bg-selected text-white hover:bg-opacity-90",
+        select: "bg-selected text-selected-foreground hover:bg-opacity-90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:

web/src/components/ui/calendar.tsx

@@ -41,7 +41,7 @@ function Calendar({
         ),
         day_range_end: "day-range-end",
         day_selected:
-          "bg-selected text-white hover:bg-selected hover:text-white focus:bg-selected focus:text-white",
+          "bg-selected text-selected-foreground hover:bg-selected hover:text-selected-foreground focus:bg-selected focus:text-selected-foreground",
         day_today: "bg-muted text-muted-foreground",
         day_outside:
           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",

web/src/views/events/EventView.tsx

@@ -561,7 +561,6 @@ function DetectionReview({
           {(currentItems?.length ?? 0) > 0 && (itemsToReview ?? 0) > 0 && (
             <div className="col-span-full flex justify-center items-center">
               <Button
-                className="text-white"
                 variant="select"
                 onClick={() => {
                   markAllItemsAsReviewed(currentItems ?? []);

web/tailwind.config.js

@@ -46,7 +46,10 @@ module.exports = {
         background: "hsl(var(--background))",
         background_alt: "hsl(var(--background-alt))",
         foreground: "hsl(var(--foreground))",
-        selected: "hsl(var(--selected))",
+        selected: {
+          DEFAULT: "hsl(var(--selected))",
+          foreground: "hsl(var(--selected-foreground))",
+        },
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",

web/themes/theme-default.css

@@ -72,6 +72,9 @@
     --selected: hsl(228, 89%, 63%);
     --selected: 228 89% 63%;
 
+    --selected-foreground: hsl(0 0% 100%);
+    --selected-foreground: 0 0% 100%;
+
     --radius: 0.5rem;
 
     --severity_alert: var(--red-800);
@@ -162,8 +165,5 @@
 
     --ring: hsla(0 0% 25% 0%);
     --ring: 0 0% 25% 0%;
-
-    --selected: hsl(228, 89%, 63%);
-    --selected: 228 89% 63%;
   }
 }