Fix colors for default light mode theme (#10909)

* fix colors for default light mode theme

* remove redundancy

* fix export dialog

* don't use primary-foreground

* change secondary button variant to be default button

* change filters button to bg-selected when filtering

* slightly lighten secondary-foreground in light mode

* fix mobile motion only button

web/src/views/events/RecordingView.tsx

@@ -254,11 +254,10 @@ export function RecordingView({
         <Button
           className="flex items-center gap-2 rounded-lg"
           size="sm"
-          variant="secondary"
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />
-          {isDesktop && <div className="text-primary-foreground">Back</div>}
+          {isDesktop && <div className="text-primary">Back</div>}
         </Button>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer

web/src/views/live/LiveBirdseyeView.tsx

@@ -133,7 +133,7 @@ export default function LiveBirdseyeView() {
               onClick={() => navigate(-1)}
             >
               <IoMdArrowBack className="size-5" />
-              {isDesktop && <div className="text-primary-foreground">Back</div>}
+              {isDesktop && <div className="text-primary">Back</div>}
             </Button>
           ) : (
             <div />

web/src/views/live/LiveCameraView.tsx

@@ -226,18 +226,14 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
               <Button
                 className={`flex items-center gap-2.5 rounded-lg`}
                 size="sm"
-                variant="secondary"
                 onClick={() => navigate(-1)}
               >
                 <IoMdArrowRoundBack className="size-5" />
-                {isDesktop && (
-                  <div className="text-primary-foreground">Back</div>
-                )}
+                {isDesktop && <div className="text-primary">Back</div>}
               </Button>
               <Button
                 className="flex items-center gap-2.5 rounded-lg"
                 size="sm"
-                variant="secondary"
                 onClick={() => {
                   navigate("events", {
                     state: {
@@ -252,9 +248,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 }}
               >
                 <LuHistory className="size-5" />
-                {isDesktop && (
-                  <div className="text-primary-foreground">History</div>
-                )}
+                {isDesktop && <div className="text-primary">History</div>}
               </Button>
             </div>
           ) : (
@@ -522,7 +516,7 @@ function PtzControlPanel({
       {ptz?.features?.includes("pt-r-fov") && (
         <>
           <Button
-            className={`${clickOverlay ? "text-selected" : "text-primary-foreground"}`}
+            className={`${clickOverlay ? "text-selected" : "text-primary"}`}
             onClick={() => setClickOverlay(!clickOverlay)}
           >
             <HiViewfinderCircle />

web/src/views/system/CameraMetrics.tsx

@@ -159,7 +159,7 @@ export default function CameraMetrics({
                   </div>
                   <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
                     {Object.keys(cameraCpuSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                      <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                         <div className="mb-5">CPU</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-cpu`}
@@ -175,7 +175,7 @@ export default function CameraMetrics({
                       <Skeleton className="size-full aspect-video" />
                     )}
                     {Object.keys(cameraFpsSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                      <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                         <div className="mb-5">DPS</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-dps`}

web/src/views/system/GeneralMetrics.tsx

@@ -285,7 +285,7 @@ export default function GeneralMetrics({
         </div>
         <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
                 <ThresholdBarGraph
@@ -303,7 +303,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Detector CPU Usage</div>
               {detCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -321,7 +321,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Detector Memory Usage</div>
               {detMemSeries.map((series) => (
                 <ThresholdBarGraph
@@ -349,7 +349,6 @@ export default function GeneralMetrics({
               {canGetGpuInfo && (
                 <Button
                   className="cursor-pointer"
-                  variant="secondary"
                   size="sm"
                   onClick={() => setShowVainfo(true)}
                 >
@@ -359,7 +358,7 @@ export default function GeneralMetrics({
             </div>
             <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                   <div className="mb-5">GPU Usage</div>
                   {gpuSeries.map((series) => (
                     <ThresholdBarGraph
@@ -377,7 +376,7 @@ export default function GeneralMetrics({
                 <Skeleton className="w-full aspect-video" />
               )}
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                   <div className="mb-5">GPU Memory</div>
                   {gpuMemSeries.map((series) => (
                     <ThresholdBarGraph
@@ -403,7 +402,7 @@ export default function GeneralMetrics({
         </div>
         <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Process CPU Usage</div>
               {otherProcessCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -421,7 +420,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-tall" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Process Memory Usage</div>
               {otherProcessMemSeries.map((series) => (
                 <ThresholdBarGraph

web/src/views/system/StorageMetrics.tsx

@@ -47,7 +47,7 @@ export default function StorageMetrics({
         General Storage
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
           <div className="mb-5">Recordings</div>
           <StorageGraph
             graphId="general-recordings"
@@ -55,7 +55,7 @@ export default function StorageMetrics({
             total={totalStorage.total}
           />
         </div>
-        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
           <div className="mb-5">/tmp/cache</div>
           <StorageGraph
             graphId="general-cache"
@@ -63,7 +63,7 @@ export default function StorageMetrics({
             total={stats.service.storage["/tmp/cache"]["total"]}
           />
         </div>
-        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
           <div className="mb-5">/dev/shm</div>
           <StorageGraph
             graphId="general-shared-memory"
@@ -77,7 +77,7 @@ export default function StorageMetrics({
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
         {Object.keys(cameraStorage).map((camera) => (
-          <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+          <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
             <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
             <StorageGraph
               graphId={`${camera}-storage`}