From 720b2949ed15410564be60289f95f62f25084202 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:45:25 -0500 Subject: [PATCH 1/8] Add --rgb-state colors --- themes/metro.yaml | 53 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/themes/metro.yaml b/themes/metro.yaml index 9b3f9f1..25aa11c 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -25,9 +25,11 @@ ________________________________________Common Base (Do Not Use): &common-colors error-color: "#FF4400" rgb-error-color: "255,64,0" warning-color: "#ffa600" + rgb-warning-color: "255,166,0" success-color: "#008a17" - rgb-success-color: "0, 138, 23" + rgb-success-color: "0,138,23" info-color: "#039be5" + rgb-info-color: "3,155,229" # Main Interface Colors lovelace-background: var(--primary-background-color) @@ -277,6 +279,55 @@ ________________________________________Common Base (Do Not Use): &common-colors # Video video-max-height: none + # States + rgb-state-default-color: var(--rgb-accent-color) + rgb-state-inactive-color: var(--rgb-secondary-background-color) + rgb-state-unavailable-color: var(--rgb-disabled-text-color) + rgb-state-alarm-armed-color: var(--rgb-success-color) + rgb-state-alarm-arming-color: var(--rgb-warning-color) + rgb-state-alarm-disarmed-color: var(--rgb-secondary-background-color) + rgb-state-alarm-pending-color: var(--rgb-warning-color) + rgb-state-alarm-triggered-color: var(--rgb-error-color) + rgb-state-alert-color: var(--rgb-error-color) + rgb-state-automation-color: var(--rgb-primary-color) + rgb-state-binary-sensor-alerting-color: var(--rgb-error-color) + rgb-state-binary-sensor-color: var(--rgb-primary-color) + rgb-state-calendar-color: var(--rgb-primary-color) + rgb-state-camera-color: var(--rgb-primary-color) + rgb-state-climate-auto-color: var(--rgb-success-color) + rgb-state-climate-cool-color: var(--rgb-blue-color) + rgb-state-climate-dry-color: var(--rgb-warning-color) + rgb-state-climate-fan-only-color: var(--rgb-cyan-color) + rgb-state-climate-heat-color: var(--rgb-deep-orange-color) + rgb-state-climate-heat-cool-color: var(--rgb-primary-color) + rgb-state-climate-idle-color: var(--rgb-secondary-background-color) + rgb-state-cover-color: var(--rgb-purple-color) + rgb-state-fan-color: var(--rgb-cyan-color) + rgb-state-group-color: var(--rgb-primary-color) + rgb-state-humidifier-color: var(--rgb-blue-color) + rgb-state-input-boolean-color: var(--rgb-primary-color) + rgb-state-light-color: var(--rgb-primary-color) + rgb-state-lock-jammed-color: var(--rgb-error-color) + rgb-state-lock-locked-color: var(--rgb-success-color) + rgb-state-lock-pending-color: var(--rgb-warning-color) + rgb-state-lock-unlocked-color: var(--rgb-error-color) + rgb-state-media-player-color: var(--rgb-primary-color) + rgb-state-person-home-color: var(--rgb-success-color) + rgb-state-person-not-home-color: var(--rgb-secondary-background-color) + rgb-state-person-zone-color: var(--rgb-warning-color) + rgb-state-remote-color: var(--rgb-primary-color) + rgb-state-script-color: var(--rgb-primary-color) + rgb-state-sensor-battery-high-color: var(--rgb-success-color) + rgb-state-sensor-battery-low-color: var(--rgb-error-color) + rgb-state-sensor-battery-medium-color: var(--rgb-warning-color) + rgb-state-siren-color: var(--rgb-error-color) + rgb-state-sun-day-color: var(--rgb-primary-color) + rgb-state-sun-night-color: var(--rgb-secondary-background-color) + rgb-state-switch-color: var(--rgb-primary-color) + rgb-state-timer-color: var(--rgb-primary-color) + rgb-state-update-color: var(--rgb-success-color) + rgb-state-update-installing-color: var(--rgb-warning-color) + rgb-state-vacuum-color: var(--rgb-primary-color) ________________________________________Common Base 2 (Do Not Use): From 8c68fd70fb73086504f58b4e22bfcb09b8869937 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:47:00 -0500 Subject: [PATCH 2/8] Theming for mdc-buttons --- themes/metro.yaml | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/themes/metro.yaml b/themes/metro.yaml index 25aa11c..f8539ef 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -123,6 +123,14 @@ ________________________________________Common Base (Do Not Use): &common-colors material-caption-font-size: 0.7rem material-button-font-size: 1rem + # Disabled this because without button borders, the buttons have bad affordance. + # mdc-typography-button-font-size: var(--body-font-size) + # mdc-typography-button-line-height: var(--body-line-height) + # mdc-typography-button-font-weight: var(--body-font-weight) + # mdc-typography-button-letter-spacing: 0 + # mdc-typography-button-text-decoration: none + # mdc-typography-button-text-transform: none + mush-title-font-size: var(--title-font-size) mush-title-font-weight: 600 mush-title-padding: 24px 16px 16px @@ -265,6 +273,7 @@ ________________________________________Common Base (Do Not Use): &common-colors btn-bg-color-off: var(--primary-background-color) mdc-button-disabled-fill-color: var(--disabled-color) mdc-button-disabled-ink-color: var(--disabled-text-color) + # mdc-button-raised-box-shadow: # Home Assistant override ha-card-box-shadow: "none" @@ -658,6 +667,9 @@ ________________________________________Common Base 4 (Do Not Use): vertical-stack-card-margin: "1px 0px 1px 0px" mush-control-border-radius: 0px + mdc-button-raised-box-shadow: none + mdc-button-raised-box-shadow-hover: none + mdc-theme-surface: "rgb(24,24,24)" rgb-mdc-theme-surface: "24,24,24" @@ -675,6 +687,9 @@ ________________________________________Common Base 4 (Do Not Use): vertical-stack-card-margin: "1px 0px 1px 0px" mush-control-border-radius: 0px + mdc-button-raised-box-shadow: none + mdc-button-raised-box-shadow-hover: none + mdc-theme-surface: var(--primary-background-color) rgb-mdc-theme-surface: var(--rgb-primary-background-color) From ccb3771ced3aa76d892242dc63cb1653bfcf63d6 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:47:45 -0500 Subject: [PATCH 3/8] Fix more-info dialog styling due to HA2022.10 changes --- themes/metro.yaml | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/themes/metro.yaml b/themes/metro.yaml index f8539ef..57b7983 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -529,7 +529,7 @@ ________________________________________Common Base 3 (Do Not Use): &common-card .content { xmargin-top: -8px; } - state-card-display$: | + ha-more-info-info$state-card-display$: | .state { margin-left: 46px !important; font-size: var(--h1-font-size); @@ -541,7 +541,7 @@ ________________________________________Common Base 3 (Do Not Use): &common-card flex-direction: column-reverse !important; } state-info { margin-left: -8px; margin-top: -42px; } - state-card-display$state-info$: | + ha-more-info-info$state-card-display$state-info$: | .name { display: none; } .time-ago { margin-top: 42px; font-size: var(--h6-font-size); @@ -555,7 +555,7 @@ ________________________________________Common Base 3 (Do Not Use): &common-card state-badge[icon] { margin: 0 0 0 8px !important; } - more-info-default$ha-attributes$: | + ha-more-info-info$more-info-default$ha-attributes$: | .data-entry { flex-direction: column !important; } .key { font-size: var(--h6-font-size); @@ -570,22 +570,21 @@ ________________________________________Common Base 3 (Do Not Use): &common-card margin-bottom: 16px; max-width: none !important; } + .data-entry:last-child .value { + margin-bottom: 0; + } ha-more-info-history$state-history-charts: $: state-history-chart-timeline$: | .chartTooltip { margin-top: -200px; } - ha-more-info-history: + ha-more-info-info: $: - state-history-charts: - $: - state-history-chart-line: - $: - ha-chart-base: + ha-more-info-history: $: | - .chartContainer { - filter: hue-rotate(var(--hue-primary-color)) saturate(3) brightness(0.66) + state-history-charts, statistics-chart { + filter: hue-rotate(calc(var(--hue-primary-color) - 212deg)) saturate(3) brightness(0.66) } card-mod-root-yaml: &card-mod-root | From 4cbed0920093f5be39af8332df8618db5ad6496f Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:49:01 -0500 Subject: [PATCH 4/8] Metro card backgrounds now use solid instead of semi-transparent colors --- themes/metro.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/themes/metro.yaml b/themes/metro.yaml index 57b7983..104cae8 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -657,8 +657,8 @@ ________________________________________Common Base 4 (Do Not Use): primary-background-color: "rgb(0,0,0)" rgb-primary-background-color: "0,0,0" secondary-background-color: "rgb(24,24,24)" - card-background-color: "rgba(255,255,255,.075)" - rgb-card-background-color: "255,255,255" + card-background-color: "rgb(19,19,19)" + rgb-card-background-color: "19,19,19" ha-card-border-radius: 0 ha-config-card-border-radius: 0 @@ -677,8 +677,8 @@ ________________________________________Common Base 4 (Do Not Use): primary-background-color: "rgb(255,255,255)" rgb-primary-background-color: "255,255,255" secondary-background-color: "rgb(232,232,232)" - card-background-color: "rgba(0,0,0,.033)" - rgb-card-background-color: "0,0,0" + card-background-color: "rgba(247,247,247)" + rgb-card-background-color: "247,247,247" ha-card-border-radius: 0 ha-config-card-border-radius: 0 From fe2c0dba04e04768f75d1e9b05bb13aa068ee595 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:52:38 -0500 Subject: [PATCH 5/8] Fix card-header font size --- themes/metro.yaml | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/themes/metro.yaml b/themes/metro.yaml index 104cae8..9acdf8a 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -84,7 +84,11 @@ ________________________________________Common Base (Do Not Use): &common-colors card-title-font-weight: 600 card-title-line-height: normal title-font-size: 3.5rem + title-font-weight: 600 + title-line-height: normal subtitle-font-size: 1rem + subtitle-font-weight: 600 + subtitle-line-height: normal small-font-size: 0.9rem h1-font-size: 2.85rem @@ -110,6 +114,8 @@ ________________________________________Common Base (Do Not Use): &common-colors h5-font: "var(--h5-font-weight) var(--h5-font-size) var(--font-stack)" h6-font: "var(--h6-font-weight) var(--h6-font-size) var(--font-stack)" + ha-card-header-font-size: var(--card-title-font-size) + paper-font-headline_-_font-size: 3.5rem paper-font-headline_-_font-weight: 600 paper-font-headline_-_letter-spacing: 0 @@ -430,7 +436,8 @@ ________________________________________Common Base 3 (Do Not Use): &common-card font-weight: 400; } - card-mod-card: &card-mod-card | + card-mod-card-yaml: &card-mod-card | + .: | ha-card { --mdc-icon-size: 20px } @@ -461,13 +468,13 @@ ________________________________________Common Base 3 (Do Not Use): &common-card color: var(--secondary-text-color); text-transform: uppercase; } - .card-header, .card-header .name { - font-size: var(--card-title-font-size); - line-height: var(--card-title-line-height); - font-weight: var(--card-title-font-weight); + .card-header, .card-header .name, :host ::slotted(.card-header), ha-card.type-area .name, ha-card.type-picture-entity .footer.single, ha-card.type-media-control hui-marquee { + font-size: var(--card-title-font-size) !important; + line-height: var(--card-title-line-height) !important; + font-weight: var(--card-title-font-weight) !important; letter-spacing: 0; } - .card-header { + .card-header, :host ::slotted(.card-header) { margin-bottom: 8px; padding: 12px 16px; } From 449f8f35268ace79653bce6309f65e48ae62b4a4 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:53:16 -0500 Subject: [PATCH 6/8] Add rgb-secondary-text-color and rgb-disabled-text-color --- themes/metro.yaml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/themes/metro.yaml b/themes/metro.yaml index 9acdf8a..8e0f54a 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -358,7 +358,9 @@ ________________________________________Common Base 2 (Do Not Use): primary-text-color: "rgb(255,255,255)" rgb-primary-text-color: "255,255,255" secondary-text-color: "rgba(255,255,255,.75)" + rgb-secondary-text-color: "192,192,192" disabled-text-color: "rgba(255,255,255,.55)" + rgb-disabled-text-color: "140,140,140" # Other Mode Specific Variables mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.5)" @@ -383,7 +385,9 @@ ________________________________________Common Base 2 (Do Not Use): primary-text-color: "rgba(0,0,0,.95)" rgb-primary-text-color: "0,0,0" secondary-text-color: "rgba(0,0,0,.66)" + rgb-secondary-text-color: "84,84,84" disabled-text-color: "rgba(0,0,0,.6)" + rgb-disabled-text-color: "152,152,152" # Other Mode Specific Variables mdc-dialog-scrim-color: rgba(var(--rgb-primary-background-color),.667) @@ -664,6 +668,7 @@ ________________________________________Common Base 4 (Do Not Use): primary-background-color: "rgb(0,0,0)" rgb-primary-background-color: "0,0,0" secondary-background-color: "rgb(24,24,24)" + rgb-secondary-background-color: "24,24,24" card-background-color: "rgb(19,19,19)" rgb-card-background-color: "19,19,19" @@ -684,6 +689,7 @@ ________________________________________Common Base 4 (Do Not Use): primary-background-color: "rgb(255,255,255)" rgb-primary-background-color: "255,255,255" secondary-background-color: "rgb(232,232,232)" + rgb-secondary-background-color: "232,232,232" card-background-color: "rgba(247,247,247)" rgb-card-background-color: "247,247,247" @@ -781,12 +787,14 @@ Fluent Red: primary-background-color: "rgb(27,24,25)" rgb-primary-background-color: "27,24,25" secondary-background-color: "rgb(67,61,63)" + rgb-secondary-background-color: "67,61,63" card-background-color: "rgb(40,36,38)" rgb-card-background-color: "40,36,38" light: <<: *fluent-common-light secondary-background-color: "rgb(249,210,226)" + rgb-secondary-background-color: "249,210,226" card-background-color: "rgb(245,239,242)" rgb-card-background-color: "245,239,242" @@ -830,12 +838,14 @@ Fluent Blue: primary-background-color: "rgb(24,26,27)" rgb-primary-background-color: "24,26,27" secondary-background-color: "rgb(57,64,70)" + rgb-secondary-background-color: "57,64,70" card-background-color: "rgb(36,38,40)" rgb-card-background-color: "36,38,40" light: <<: *fluent-common-light secondary-background-color: "rgb(210,231,249)" + rgb-secondary-background-color: "210,231,249" card-background-color: "rgb(239,243,245)" rgb-card-background-color: "239,243,245" @@ -879,12 +889,14 @@ Fluent Green: primary-background-color: "rgb(24,27,26)" rgb-primary-background-color: "24,27,26" secondary-background-color: "rgb(57,70,64)" + rgb-secondary-background-color: "57,70,64" card-background-color: "rgb(36,40,38)" rgb-card-background-color: "36,40,38" light: <<: *fluent-common-light secondary-background-color: "rgb(210,249,231)" + rgb-secondary-background-color: "210,249,231" card-background-color: "rgb(239,245,243)" rgb-card-background-color: "239,245,243" @@ -928,12 +940,14 @@ Fluent Orange: primary-background-color: "rgb(27,26,24)" rgb-primary-background-color: "27,26,24" secondary-background-color: "rgb(70,64,57)" + rgb-secondary-background-color: "70,64,57" card-background-color: "rgb(40,38,36)" rgb-card-background-color: "40,38,36" light: <<: *fluent-common-light secondary-background-color: "rgb(249,231,210)" + rgb-secondary-background-color: "249,231,210" card-background-color: "rgb(245,243,239)" rgb-card-background-color: "245,243,239" @@ -977,12 +991,14 @@ Fluent Purple: primary-background-color: "rgb(26,24,27)" # hsl(hue,5,10) rgb-primary-background-color: "26,24,27" secondary-background-color: "rgb(64,57,70)" # hsl(hue,10,25) + rgb-secondary-background-color: "64,57,70" card-background-color: "rgb(38,36,40)" # hsl(hue,5,15) rgb-card-background-color: "38,36,40" light: <<: *fluent-common-light secondary-background-color: "rgb(230,210,249)" # hsl(hue,75,90) + rgb-secondary-background-color: "230,210,249" card-background-color: "rgb(242,239,245)" # hsl(hue,25,95) rgb-card-background-color: "242,239,245" @@ -1029,12 +1045,14 @@ Fluent Slate: primary-background-color: "rgb(24,25,27)" rgb-primary-background-color: "24,25,27" secondary-background-color: "rgb(57,63,70)" + rgb-secondary-background-color: "57,63,70" card-background-color: "rgb(36,38,40)" rgb-card-background-color: "36,38,40" light: <<: *fluent-common-light secondary-background-color: "rgb(223,229,236)" + rgb-secondary-background-color: "223,229,236" card-background-color: "rgb(240,242,244)" rgb-card-background-color: "240,242,244" From c11bf4aed25f09a75c2cccda0f08b93a3b5bb11b Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:53:32 -0500 Subject: [PATCH 7/8] Round corners for buttons in Fluent themes --- themes/metro.yaml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/themes/metro.yaml b/themes/metro.yaml index 8e0f54a..b63581b 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -719,6 +719,7 @@ ________________________________________Common Base 5 (Do Not Use): ha-dialog-border-radius: "8px" vertical-stack-card-margin: "1px 0px 1px 0px" mush-control-border-radius: 4px + mdc-shape-small: 4px mdc-theme-surface: var(--primary-background-color) rgb-mdc-theme-surface: var(--rgb-primary-background-color) @@ -733,6 +734,7 @@ ________________________________________Common Base 5 (Do Not Use): ha-dialog-border-radius: "8px" vertical-stack-card-margin: "1px 0px 1px 0px" mush-control-border-radius: 4px + mdc-shape-small: 4px mdc-theme-surface: var(--card-background-color) rgb-mdc-theme-surface: var(--rgb-card-background-color) From bbe8e4a219eacb8654a589985007d8a7699763c6 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sun, 8 Jan 2023 04:54:36 -0500 Subject: [PATCH 8/8] Tab indent fix --- themes/metro.yaml | 82 +++++++++++++++++++++++------------------------ 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/themes/metro.yaml b/themes/metro.yaml index b63581b..8dab35d 100644 --- a/themes/metro.yaml +++ b/themes/metro.yaml @@ -442,52 +442,52 @@ ________________________________________Common Base 3 (Do Not Use): &common-card card-mod-card-yaml: &card-mod-card | .: | - ha-card { - --mdc-icon-size: 20px - } - ha-card .value { - font-size: var(--h1-font-size); - font-weight: var(--h1-font-weight); - margin-right: 0; - } - ha-card .name { - font-size: var(--body-font-size); - line-height: var(--body-line-height); - font-weight: var(--body-font-weight); - color: var(--primary-text-color); - } - ha-card .info { - line-height: 32px; - padding-top: 8px; - } - ha-card .header { - padding-top: 16px !important; - } - .icon { - line-height: 16px !important; - } - ha-card .measurement { - font-size: var(--h6-font-size); - font-weight: 700; - color: var(--secondary-text-color); - text-transform: uppercase; - } + ha-card { + --mdc-icon-size: 20px + } + ha-card .value { + font-size: var(--h1-font-size); + font-weight: var(--h1-font-weight); + margin-right: 0; + } + ha-card .name { + font-size: var(--body-font-size); + line-height: var(--body-line-height); + font-weight: var(--body-font-weight); + color: var(--primary-text-color); + } + ha-card .info { + line-height: 32px; + padding-top: 8px; + } + ha-card .header { + padding-top: 16px !important; + } + .icon { + line-height: 16px !important; + } + ha-card .measurement { + font-size: var(--h6-font-size); + font-weight: 700; + color: var(--secondary-text-color); + text-transform: uppercase; + } .card-header, .card-header .name, :host ::slotted(.card-header), ha-card.type-area .name, ha-card.type-picture-entity .footer.single, ha-card.type-media-control hui-marquee { font-size: var(--card-title-font-size) !important; line-height: var(--card-title-line-height) !important; font-weight: var(--card-title-font-weight) !important; - letter-spacing: 0; - } + letter-spacing: 0; + } .card-header, :host ::slotted(.card-header) { - margin-bottom: 8px; - padding: 12px 16px; - } - :host ::slotted(.card-content:not(:first-child)), slot:not(:first-child)::slotted(.card-content) { - margin-top: 0; - } - .entities { - align-items: flex-start !important; - } + margin-bottom: 8px; + padding: 12px 16px; + } + :host ::slotted(.card-content:not(:first-child)), slot:not(:first-child)::slotted(.card-content) { + margin-top: 0; + } + .entities { + align-items: flex-start !important; + } card-mod-glance-yaml: &card-mod-glance | .: |