feat: Allow PTZ control colors to be overridden (#2173)

- Closes #2123

src/scss/ptz.scss

@@ -28,11 +28,6 @@
 .ptz {
   display: flex;
   gap: 10px;
-
-  color: var(--light-primary-color);
-  opacity: 0.4;
-
-  transition: opacity 0.3s ease-in-out;
 }
 
 :host([data-orientation='vertical']) .ptz {
@@ -42,10 +37,6 @@
   flex-direction: row;
 }
 
-.ptz:hover {
-  opacity: 1;
-}
-
 :host([data-orientation='vertical']) .ptz div {
   width: calc(var(--advanced-camera-card-ptz-icon-size) * 3);
 }
@@ -57,7 +48,18 @@
 .ptz-zoom,
 .ptz-presets {
   position: relative;
-  background-color: rgba(0, 0, 0, 0.3);
+
+  transition:
+    color 0.3s ease-in-out,
+    background-color 0.3s ease-in-out;
+
+  color: var(--advanced-camera-card-ptz-color-inactive);
+  background-color: var(--advanced-camera-card-ptz-background-inactive);
+
+  &:hover {
+    color: var(--advanced-camera-card-ptz-color-active);
+    background-color: var(--advanced-camera-card-ptz-background-active);
+  }
 }
 
 .ptz-move {

src/scss/themes/base.scss

@@ -19,10 +19,12 @@
   --advanced-camera-card-divider-color: var(--divider-color);
 
   --advanced-camera-card-control-background: var(--app-header-background-color);
+  --advanced-camera-card-control-background-opacity: 60%;
+
   --advanced-camera-card-control-background-transparent: color-mix(
     in oklab,
     var(--advanced-camera-card-control-background),
-    transparent 60%
+    transparent var(--advanced-camera-card-control-background-opacity)
   );
   --advanced-camera-card-control-foreground: var(--app-header-text-color);
 
@@ -62,7 +64,7 @@
   --advanced-camera-card-menu-button-background: color-mix(
     in oklab,
     var(--advanced-camera-card-menu-button-inactive-color),
-    transparent 60%
+    transparent var(--advanced-camera-card-control-background-opacity)
   );
 
   // The menu background color.
@@ -185,4 +187,31 @@
   --advanced-camera-card-grid-selected-border-color: var(
     --advanced-camera-card-foreground-primary
   );
+
+  /****
+  * PTZ
+  *****/
+  --advanced-camera-card-ptz-color: var(--advanced-camera-card-control-foreground);
+  --advanced-camera-card-ptz-background: var(--advanced-camera-card-control-background);
+
+  --advanced-camera-card-ptz-color-active: color-mix(
+    in oklab,
+    var(--advanced-camera-card-ptz-color),
+    transparent 20%
+  );
+  --advanced-camera-card-ptz-background-active: color-mix(
+    in oklab,
+    var(--advanced-camera-card-ptz-background),
+    transparent 20%
+  );
+  --advanced-camera-card-ptz-color-inactive: color-mix(
+    in oklab,
+    var(--advanced-camera-card-ptz-color),
+    transparent var(--advanced-camera-card-control-background-opacity)
+  );
+  --advanced-camera-card-ptz-background-inactive: color-mix(
+    in oklab,
+    var(--advanced-camera-card-ptz-background),
+    transparent var(--advanced-camera-card-control-background-opacity)
+  );
 }