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/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 />