Use border color for focus state of button and select in dashboard (#24429)

src/components/ha-control-button.ts

@@ -28,6 +28,7 @@ export class HaControlButton extends LitElement {
   static styles = css`
     :host {
       display: block;
+      --control-button-focus-color: var(--secondary-text-color);
       --control-button-icon-color: var(--primary-text-color);
       --control-button-background-color: var(--disabled-color);
       --control-button-background-opacity: 0.2;
@@ -66,9 +67,13 @@ export class HaControlButton extends LitElement {
       z-index: 0;
       font-size: inherit;
       color: inherit;
+      transition:
+        box-shadow 180ms ease-in-out,
+        color 180ms ease-in-out;
+      color: var(--control-button-icon-color);
     }
     .button:focus-visible {
-      --control-button-background-opacity: 0.4;
+      box-shadow: 0 0 0 2px var(--control-button-focus-color);
     }
     .button::before {
       content: "";
@@ -85,10 +90,6 @@ export class HaControlButton extends LitElement {
       pointer-events: none;
       white-space: normal;
     }
-    .button {
-      transition: color 180ms ease-in-out;
-      color: var(--control-button-icon-color);
-    }
     .button ::slotted(*) {
       pointer-events: none;
       opacity: 0.95;

src/components/ha-control-number-buttons.ts

@@ -184,7 +184,7 @@ export class HaControlNumberButton extends LitElement {
   static styles = css`
     :host {
       display: block;
-      --control-number-buttons-focus-color: var(--primary-color);
+      --control-number-buttons-focus-color: var(--secondary-text-color);
       --control-number-buttons-background-color: var(--disabled-color);
       --control-number-buttons-background-opacity: 0.2;
       --control-number-buttons-border-radius: 10px;
@@ -228,6 +228,7 @@ export class HaControlNumberButton extends LitElement {
       color: inherit;
       user-select: none;
       -webkit-tap-highlight-color: transparent;
+      transition: box-shadow 180ms ease-in-out;
       outline: none;
     }
     .value::before {

src/components/ha-control-select-menu.ts

@@ -137,6 +137,7 @@ export class HaControlSelectMenu extends SelectBase {
     css`
       :host {
         display: inline-block;
+        --control-select-menu-focus-color: var(--secondary-text-color);
         --control-select-menu-text-color: var(--primary-text-color);
         --control-select-menu-background-color: var(--disabled-color);
         --control-select-menu-background-opacity: 0.2;
@@ -167,7 +168,9 @@ export class HaControlSelectMenu extends SelectBase {
         background: none;
         /* For safari border-radius overflow */
         z-index: 0;
-        transition: color 180ms ease-in-out;
+        transition:
+          box-shadow 180ms ease-in-out,
+          color 180ms ease-in-out;
         gap: 10px;
         width: 100%;
         user-select: none;
@@ -205,7 +208,7 @@ export class HaControlSelectMenu extends SelectBase {
       }
 
       .select-anchor:focus-visible {
-        --control-select-menu-background-opacity: 0.4;
+        box-shadow: 0 0 0 2px var(--control-select-menu-focus-color);
       }
 
       .select-anchor::before {

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -37,8 +37,8 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */
       scrollbar-width: none; /* Firefox */
-      margin: 0 -24px;
+      margin: -2px -24px;
-      padding: 0 24px;
+      padding: 2px 24px;
     }
     .controls-scroll::-webkit-scrollbar {
       display: none;

src/panels/lovelace/card-features/common/card-feature-styles.ts

@@ -5,6 +5,7 @@ export const cardFeatureStyles = css`
     box-sizing: border-box;
     --control-select-menu-height: var(--feature-height);
     --control-select-menu-border-radius: var(--feature-border-radius);
+    --control-select-menu-focus-color: var(--feature-color);
     line-height: 1.2;
     display: block;
     width: 100%;
@@ -24,6 +25,9 @@ export const cardFeatureStyles = css`
     flex-basis: 20px;
     --control-button-padding: 0px;
   }
+  ha-control-button {
+    --control-button-focus-color: var(--feature-color);
+  }
   ha-control-slider {
     --control-slider-color: var(--feature-color);
     --control-slider-background: var(--feature-color);

src/state-control/ha-state-control-toggle.ts

@@ -157,6 +157,7 @@ export class HaStateControlToggle extends LitElement {
     ha-control-button.active {
       --control-button-icon-color: white;
       --control-button-background-color: var(--color);
+      --control-button-focus-color: var(--color);
       --control-button-background-opacity: 1;
     }
     ha-control-button:not(:last-child) {

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -188,6 +188,7 @@ export class HaStateControlLockToggle extends LitElement {
     ha-control-button.active {
       --control-button-icon-color: white;
       --control-button-background-color: var(--color);
+      --control-button-focus-color: var(--color);
       --control-button-background-opacity: 1;
     }
     ha-control-button:not(:last-child) {

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -166,6 +166,7 @@ export class HaStateControlValveToggle extends LitElement {
     ha-control-button.active {
       --control-button-icon-color: white;
       --control-button-background-color: var(--color);
+      --control-button-focus-color: var(--color);
       --control-button-background-opacity: 1;
     }
     ha-control-button:not(:last-child) {