From d3fd27910a90d6c947251c1465c5249f18b4cf67 Mon Sep 17 00:00:00 2001 From: Kendell R Date: Mon, 9 Oct 2023 09:29:25 -0700 Subject: [PATCH] Separate outline color (#18109) --- src/components/ha-expansion-panel.ts | 5 +---- src/components/ha-outlined-button.ts | 2 +- src/resources/ha-style.ts | 1 + src/resources/styles-data.ts | 3 ++- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 797b5bdbd9..abd0a81ac4 100644 --- a/src/components/ha-expansion-panel.ts +++ b/src/components/ha-expansion-panel.ts @@ -163,10 +163,7 @@ export class HaExpansionPanel extends LitElement { box-shadow: none; border-width: 1px; border-style: solid; - border-color: var( - --ha-card-border-color, - var(--divider-color, #e0e0e0) - ); + border-color: var(--outline-color); border-radius: var(--ha-card-border-radius, 12px); } diff --git a/src/components/ha-outlined-button.ts b/src/components/ha-outlined-button.ts index 789dbcfa9c..36b9b0cec3 100644 --- a/src/components/ha-outlined-button.ts +++ b/src/components/ha-outlined-button.ts @@ -13,7 +13,7 @@ export class HaOutlinedButton extends OutlinedButton { :host { --ha-icon-display: block; --md-sys-color-primary: var(--primary-text-color); - --md-sys-color-outline: var(--divider-color); + --md-sys-color-outline: var(--outline-color); } `, ]; diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index a9b95a92ca..8d14d63d41 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -33,6 +33,7 @@ documentContainer.innerHTML = ` --light-primary-color: #b3e5fC; --accent-color: ${DEFAULT_ACCENT_COLOR}; --divider-color: rgba(0, 0, 0, .12); + --outline-color: rgba(0, 0, 0, .12); --scrollbar-thumb-color: rgb(194, 194, 194); diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts index 1b295c5e14..6d60dcab7d 100644 --- a/src/resources/styles-data.ts +++ b/src/resources/styles-data.ts @@ -11,6 +11,7 @@ export const darkStyles = { "switch-unchecked-button-color": "#999999", "switch-unchecked-track-color": "#9b9b9b", "divider-color": "rgba(225, 225, 225, .12)", + "outline-color": "rgba(225, 225, 225, .12)", "mdc-ripple-color": "#AAAAAA", "mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)", @@ -110,7 +111,7 @@ export const derivedStyles = { "mdc-radio-disabled-color": "var(--disabled-text-color)", "mdc-tab-text-label-color-default": "var(--primary-text-color)", "mdc-button-disabled-ink-color": "var(--disabled-text-color)", - "mdc-button-outline-color": "var(--divider-color)", + "mdc-button-outline-color": "var(--outline-color)", "mdc-dialog-scroll-divider-color": "var(--divider-color)", "mdc-dialog-heading-ink-color": "var(--primary-text-color)", "mdc-dialog-content-ink-color": "var(--primary-text-color)",