From 5b9187f8c95985461f1139bf98f0cfdff1011cb0 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Wed, 4 Jun 2025 20:39:42 -0700
Subject: [PATCH] feat: Allow trigger border color to be overridden for theming
 (#2085)

- Closes: #2047
---
 docs/configuration/view.md |  6 +++---
 src/scss/live-grid.scss    | 19 +++++++++++++++----
 src/scss/themes/base.scss  |  6 ++++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/docs/configuration/view.md b/docs/configuration/view.md
index ff757273..e6b2a7a0 100644
--- a/docs/configuration/view.md
+++ b/docs/configuration/view.md
@@ -93,9 +93,9 @@ Configure the theming/colors applied to the card.
 
 Allows overriding of any CSS value, can be used to tweak theming parameters.
 
-| Option                                                                                                                                                                                                                                                         | Description                                            |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
-| Any CSS key. Overriding the [Advanced Camera Card](https://github.com/dermotduffy/advanced-camera-card/tree/main/src/scss/themes/base.scss) CSS variables allows changing individual theming paramters, e.g. `--advanced-camera-card-menu-override-background` | Any CSS value, e.g. `red` or `rgba(10, 11, 12, 0.64)`. |
+| Option                                                                                                                                                                                                                                                          | Description                                            |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| Any CSS key. Overriding the [Advanced Camera Card](https://github.com/dermotduffy/advanced-camera-card/tree/main/src/scss/themes/base.scss) CSS variables allows changing individual theming parameters, e.g. `--advanced-camera-card-menu-override-background` | Any CSS value, e.g. `red` or `rgba(10, 11, 12, 0.64)`. |
 
 ## `triggers`
 
diff --git a/src/scss/live-grid.scss b/src/scss/live-grid.scss
index ae976b24..e31333c1 100644
--- a/src/scss/live-grid.scss
+++ b/src/scss/live-grid.scss
@@ -2,19 +2,30 @@
 
 @keyframes warning-pulse {
   0% {
-    border: solid 2px var(--advanced-camera-card-triggered-color-1, rgba(0, 0, 0, 0));
+    border: solid 2px var(--trigger-border-color-base);
   }
   50% {
-    border: solid 2px var(--advanced-camera-card-triggered-color-2, var(--warning-color));
+    border: solid 2px var(--trigger-border-color);
   }
   100% {
-    border: solid 2px var(--advanced-camera-card-triggered-color-1, rgba(0, 0, 0, 0));
+    border: solid 2px var(--trigger-border-color-base);
   }
 }
 
+advanced-camera-card-live-carousel {
+  --trigger-border-color: var(--advanced-camera-card-trigger-border-color);
+  --trigger-border-color-base: var(
+    --advanced-camera-card-trigger-border-color-base,
+    black
+  );
+}
+
 advanced-camera-card-live-carousel[triggered] {
   animation: warning-pulse 5s infinite;
 }
 advanced-camera-card-live-carousel[selected] {
-  --advanced-camera-card-triggered-color-1: var(--primary-color);
+  --trigger-border-color-base: var(
+    --advanced-camera-card-trigger-border-color-base,
+    var(--advanced-camera-card-foreground-primary)
+  );
 }
diff --git a/src/scss/themes/base.scss b/src/scss/themes/base.scss
index ceb084b5..c99f65f0 100644
--- a/src/scss/themes/base.scss
+++ b/src/scss/themes/base.scss
@@ -172,4 +172,10 @@
   --advanced-camera-card-message-overlay-color: var(
     --advanced-camera-card-control-foreground
   );
+
+  /*********
+  * Trigger
+  *********/
+  --advanced-camera-card-trigger-border-color: var(--advanced-camera-card-warning-color);
+  --advanced-camera-card-trigger-border-color-base: unset;
 }