From 6b656b1720e5d51e188025998e516f9bd86600b0 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 1 Sep 2025 16:14:30 -0700
Subject: [PATCH] feat: Allow PTZ control colors to be overridden (#2173)

- Closes #2123
---
 src/scss/ptz.scss         | 22 ++++++++++++----------
 src/scss/themes/base.scss | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/scss/ptz.scss b/src/scss/ptz.scss
index 5acabeb5..4ce20e85 100644
--- a/src/scss/ptz.scss
+++ b/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 {
diff --git a/src/scss/themes/base.scss b/src/scss/themes/base.scss
index e2af2c03..ae8a5754 100644
--- a/src/scss/themes/base.scss
+++ b/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)
+  );
 }