Fix button colors (#10915)

* Simplify button colors * fix colors * Add back in colors * Fix color vars
blakeblackshear · Apr 9, 2024 · 503dfba · 503dfba
1 parent 524732e
commit 503dfba
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 57 deletions.
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -222,14 +222,15 @@ function CamerasFilterButton({
 
   const trigger = (
     <Button
-      className={`flex items-center gap-2 capitalize ${selectedCameras?.length ? "bg-selected hover:bg-selected" : ""}`}
+      className="flex items-center gap-2 capitalize"
+      variant={selectedCameras?.length == undefined ? "default" : "select"}
       size="sm"
     >
       <FaVideo
-        className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+        className={`${selectedCameras?.length == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
       />
       <div
-        className={`hidden md:block ${selectedCameras?.length ? "text-background dark:text-primary" : "text-primary"}`}
+        className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
       >
         {selectedCameras == undefined
           ? "All Cameras"
@@ -391,12 +392,13 @@ function ShowReviewFilter({
       </div>
 
       <Button
-        className={`block md:hidden duration-0 ${showReviewedSwitch == 1 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+        className="block md:hidden duration-0"
+        variant={showReviewedSwitch == 1 ? "select" : "default"}
         size="sm"
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
         <FaCheckCircle
-          className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+          className={`${showReviewedSwitch == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
         />
       </Button>
     </>
@@ -420,14 +422,15 @@ function CalendarFilterButton({
 
   const trigger = (
     <Button
+      className="flex items-center gap-2"
+      variant={day == undefined ? "default" : "select"}
       size="sm"
-      className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
     >
       <FaCalendarAlt
-        className={`${day == undefined ? "text-secondary-foreground" : "text-background dark:text-primary"}`}
+        className={`${day == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
       />
       <div
-        className={`hidden md:block ${day == undefined ? "text-primary" : "text-background dark:text-primary"}`}
+        className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
       >
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
@@ -488,13 +491,14 @@ function GeneralFilterButton({
   const trigger = (
     <Button
       size="sm"
-      className={`flex items-center gap-2 capitalize ${selectedLabels?.length ? "bg-selected hover:bg-selected" : ""}`}
+      variant={selectedLabels?.length ? "select" : "default"}
+      className="flex items-center gap-2 capitalize"
     >
       <FaFilter
-        className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+        className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
       />
       <div
-        className={`hidden md:block ${selectedLabels?.length ? "text-background dark:text-primary" : "text-primary"}`}
+        className={`hidden md:block ${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
       >
         Filter
       </div>
@@ -685,12 +689,11 @@ function ShowMotionOnlyButton({
       <div className="block md:hidden">
         <Button
           size="sm"
-          className={`duration-0 ${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+          className="duration-0"
+          variant={motionOnlyButton ? "select" : "default"}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
-          <FaRunning
-            className={`${motionOnlyButton ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-          />
+          <FaRunning />
         </Button>
       </div>
     </>

diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -146,22 +146,24 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("calendar") && (
           <Button
-            className={`w-full flex justify-center items-center gap-2 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`}
+            className="w-full flex justify-center items-center gap-2"
+            variant={filter?.after ? "select" : "default"}
             onClick={() => setDrawerMode("calendar")}
           >
             <FaCalendarAlt
-              className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+              className={`${filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
             />
             Calendar
           </Button>
         )}
         {features.includes("filter") && (
           <Button
-            className={`w-full flex justify-center items-center gap-2 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`}
+            className="w-full flex justify-center items-center gap-2"
+            variant={filter?.labels ? "select" : "default"}
             onClick={() => setDrawerMode("filter")}
           >
             <FaFilter
-              className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+              className={`${filter?.labels ? "text-selected-foreground" : "text-secondary-foreground"}`}
             />
             Filter
           </Button>
@@ -283,12 +285,13 @@ export default function MobileReviewSettingsDrawer({
       >
         <DrawerTrigger asChild>
           <Button
-            className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+            className="rounded-lg capitalize"
+            variant={filter?.labels || filter?.after ? "select" : "default"}
             size="sm"
             onClick={() => setDrawerMode("select")}
           >
             <FaCog
-              className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+              className={`${filter?.labels || filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
             />
           </Button>
         </DrawerTrigger>

diff --git a/web/src/components/ui/button.tsx b/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:

diff --git a/web/tailwind.config.js b/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))",

diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
@@ -1,77 +1,80 @@
 @layer base {
   :root {
-    --background-hsl: hsl(0 0% 100%);
+    --background: hsl(0, 0%, 100%);
     --background: 0 0% 100%;
 
-    --background-alt-hsl: hsl(0 0% 98.5%);
+    --background-alt: hsl(0, 0%, 98.5%);
     --background-alt: 0 0% 98.5%;
 
-    --foreground: hsl(222.2 84% 4.9%);
+    --foreground: hsl(222.2, 84%, 4.9%);
     --foreground: 222.2 84% 4.9%;
 
-    --card: hsl(0 0% 100%);
+    --card: hsl(0, 0%, 100%);
     --card: 0 0% 100%;
 
-    --card-foreground: hsl(222.2 84% 4.9%);
+    --card-foreground: hsl(222.2, 84%, 4.9%);
     --card-foreground: 222.2 84% 4.9%;
 
-    --popover: hsl(0 0% 100%);
+    --popover: hsl(0, 0%, 100%);
     --popover: 0 0% 100%;
 
-    --popover-foreground: hsl(222.2 84% 4.9%);
+    --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-foreground: hsl(210 40% 98%);
+    --primary-foreground: hsl(210, 40%, 98%);
     --primary-foreground: 210 40% 98%;
 
-    --secondary: hsl(210 20% 94.1%);
+    --secondary: hsl(210, 20%, 94.1%);
     --secondary: 210 20% 94.1%;
 
-    --secondary-foreground: hsl(222.2 17.4% 36.2%);
+    --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%;
 
-    --muted: hsl(210 40% 96.1%);
+    --muted: hsl(210, 40%, 96.1%);
     --muted: 210 40% 96.1%;
 
-    --muted-foreground: hsl(215.4 6.3% 46.9%);
+    --muted-foreground: hsl(215.4, 6.3%, 46.9%);
     --muted-foreground: 215.4 6.3% 46.9%;
 
-    --accent: hsl(210 40% 96.1%);
+    --accent: hsl(210, 40%, 96.1%);
     --accent: 210 40% 96.1%;
 
-    --accent-foreground: hsl(222.2 47.4% 11.2%);
+    --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: hsl(0, 84.2%, 60.2%);
     --destructive: 0 84.2% 60.2%;
 
-    --destructive-foreground: hsl(0 100% 83%);
+    --destructive-foreground: hsl(0, 100%, 83%);
     --destructive-foreground: 0 100% 83%;
 
-    --warning: hsl(17 87% 18%);
+    --warning: hsl(17, 87%, 18%);
     --warning: 17 87% 18%;
 
-    --warning-foreground: hsl(32 100% 74%);
+    --warning-foreground: hsl(32, 100%, 74%);
     --warning-foreground: 32 100% 74%;
 
-    --border: hsl(214.3 31.8% 91.4%);
+    --border: hsl(214.3, 31.8%, 91.4%);
     --border: 214.3 31.8% 91.4%;
 
-    --input: hsl(0 0% 85%);
+    --input: hsl(0, 0%, 85%);
     --input: 0 0% 85%;
 
-    --ring: hsla(0 0% 25% 0%);
+    --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%;
+
     --radius: 0.5rem;
 
     --severity_alert: var(--red-800);
@@ -94,10 +97,10 @@
   }
 
   .dark {
-    --background-hsl: hsl(0 0 0%);
+    --background: hsl(0, 0, 0%);
     --background: 0 0% 0%;
 
-    --background-alt-hsl: hsl(0 0 9%);
+    --background-alt: hsl(0, 0, 9%);
     --background-alt: 0 0% 9%;
 
     --foreground: hsl(0, 0%, 100%);
@@ -106,7 +109,7 @@
     --card: hsl(0, 0%, 15%);
     --card: 0, 0%, 15%;
 
-    --card-foreground: hsl(210 40% 98%);
+    --card-foreground: hsl(210, 40%, 98%);
     --card-foreground: 210 40% 98%;
 
     --popover: hsl(0, 0%, 15%);
@@ -139,31 +142,28 @@
     --accent: hsl(0, 0%, 15%);
     --accent: 0 0% 15%;
 
-    --accent-foreground: hsl(210 40% 98%);
+    --accent-foreground: hsl(210, 40%, 98%);
     --accent-foreground: 210 40% 98%;
 
-    --destructive: hsl(0 62.8% 30.6%);
+    --destructive: hsl(0, 62.8%, 30.6%);
     --destructive: 0 62.8% 30.6%;
 
-    --destructive-foreground: hsl(0 100% 83%);
+    --destructive-foreground: hsl(0, 100%, 83%);
     --destructive-foreground: 0 100% 83%;
 
-    --warning: hsl(17 87% 18%);
+    --warning: hsl(17, 87%, 18%);
     --warning: 17 87% 18%;
 
-    --warning-foreground: hsl(32 100% 74%);
+    --warning-foreground: hsl(32, 100%, 74%);
     --warning-foreground: 32 100% 74%;
 
     --border: hsl(0, 0%, 32%);
     --border: 0 0% 32%;
 
-    --input: hsl(0 0% 5%);
+    --input: hsl(0, 0%, 5%);
     --input: 0 0% 25%;
 
-    --ring: hsla(0 0% 25% 0%);
+    --ring: hsla(0, 0%, 25%, 0%);
     --ring: 0 0% 25% 0%;
-
-    --selected: hsl(228, 89%, 63%);
-    --selected: 228 89% 63%;
   }
 }