From 15ae37d077ffe8cb61d5e7b7399ae77c48b6ede1 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 9 May 2025 14:08:12 +0200 Subject: [PATCH] Move vaadin typography vars to typography globals (#25398) --- src/common/style/derived-css-vars.ts | 2 +- src/resources/theme/color.globals.ts | 102 +++++++++++----------- src/resources/theme/main.globals.ts | 6 -- src/resources/theme/typography.globals.ts | 6 ++ 4 files changed, 59 insertions(+), 57 deletions(-) diff --git a/src/common/style/derived-css-vars.ts b/src/common/style/derived-css-vars.ts index c4eca6e022..65e6f21d06 100644 --- a/src/common/style/derived-css-vars.ts +++ b/src/common/style/derived-css-vars.ts @@ -2,7 +2,7 @@ import type { CSSResult } from "lit"; const _extractCssVars = ( cssString: string, - condition: (string) => boolean = () => true + condition: (string: string) => boolean = () => true ) => { const variables: Record = {}; diff --git a/src/resources/theme/color.globals.ts b/src/resources/theme/color.globals.ts index 8e588b723b..e2ef9db20e 100644 --- a/src/resources/theme/color.globals.ts +++ b/src/resources/theme/color.globals.ts @@ -299,58 +299,60 @@ export const colorStyles = css` `; const darkColorStyles = css` - --primary-background-color: #111111; - --card-background-color: #1c1c1c; - --secondary-background-color: #282828; - --clear-background-color: #111111; - --primary-text-color: #e1e1e1; - --secondary-text-color: #9b9b9b; - --disabled-text-color: #6f6f6f; - --app-header-text-color: #e1e1e1; - --app-header-background-color: #101e24; - --switch-unchecked-button-color: #999999; - --switch-unchecked-track-color: #9b9b9b; - --divider-color: rgba(225, 225, 225, 0.12); - --outline-color: rgba(225, 225, 225, 0.12); - --outline-hover-color: rgba(225, 225, 225, 0.24); - --mdc-ripple-color: #aaaaaa; - --mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.1); + html { + --primary-background-color: #111111; + --card-background-color: #1c1c1c; + --secondary-background-color: #282828; + --clear-background-color: #111111; + --primary-text-color: #e1e1e1; + --secondary-text-color: #9b9b9b; + --disabled-text-color: #6f6f6f; + --app-header-text-color: #e1e1e1; + --app-header-background-color: #101e24; + --switch-unchecked-button-color: #999999; + --switch-unchecked-track-color: #9b9b9b; + --divider-color: rgba(225, 225, 225, 0.12); + --outline-color: rgba(225, 225, 225, 0.12); + --outline-hover-color: rgba(225, 225, 225, 0.24); + --mdc-ripple-color: #aaaaaa; + --mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.1); - --input-idle-line-color: rgba(255, 255, 255, 0.42); - --input-hover-line-color: rgba(255, 255, 255, 0.87); - --input-disabled-line-color: rgba(255, 255, 255, 0.06); - --input-outlined-idle-border-color: rgba(255, 255, 255, 0.38); - --input-outlined-hover-border-color: rgba(255, 255, 255, 0.87); - --input-outlined-disabled-border-color: rgba(255, 255, 255, 0.06); - --input-fill-color: rgba(255, 255, 255, 0.05); - --input-disabled-fill-color: rgba(255, 255, 255, 0.02); - --input-ink-color: rgba(255, 255, 255, 0.87); - --input-label-ink-color: rgba(255, 255, 255, 0.6); - --input-disabled-ink-color: rgba(255, 255, 255, 0.37); - --input-dropdown-icon-color: rgba(255, 255, 255, 0.54); + --input-idle-line-color: rgba(255, 255, 255, 0.42); + --input-hover-line-color: rgba(255, 255, 255, 0.87); + --input-disabled-line-color: rgba(255, 255, 255, 0.06); + --input-outlined-idle-border-color: rgba(255, 255, 255, 0.38); + --input-outlined-hover-border-color: rgba(255, 255, 255, 0.87); + --input-outlined-disabled-border-color: rgba(255, 255, 255, 0.06); + --input-fill-color: rgba(255, 255, 255, 0.05); + --input-disabled-fill-color: rgba(255, 255, 255, 0.02); + --input-ink-color: rgba(255, 255, 255, 0.87); + --input-label-ink-color: rgba(255, 255, 255, 0.6); + --input-disabled-ink-color: rgba(255, 255, 255, 0.37); + --input-dropdown-icon-color: rgba(255, 255, 255, 0.54); - --codemirror-keyword: #c792ea; - --codemirror-operator: #89ddff; - --codemirror-variable: #f07178; - --codemirror-variable-2: #eeffff; - --codemirror-variable-3: #decb6b; - --codemirror-builtin: #ffcb6b; - --codemirror-atom: #f78c6c; - --codemirror-number: #ff5370; - --codemirror-def: #82aaff; - --codemirror-string: #c3e88d; - --codemirror-string-2: #f07178; - --codemirror-comment: #545454; - --codemirror-tag: #ff5370; - --codemirror-meta: #ffcb6b; - --codemirror-attribute: #c792ea; - --codemirror-property: #c792ea; - --codemirror-qualifier: #decb6b; - --codemirror-type: #decb6b; - --energy-grid-return-color: #a280db; - --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) - saturate(0.3); - --disabled-color: #464646; + --codemirror-keyword: #c792ea; + --codemirror-operator: #89ddff; + --codemirror-variable: #f07178; + --codemirror-variable-2: #eeffff; + --codemirror-variable-3: #decb6b; + --codemirror-builtin: #ffcb6b; + --codemirror-atom: #f78c6c; + --codemirror-number: #ff5370; + --codemirror-def: #82aaff; + --codemirror-string: #c3e88d; + --codemirror-string-2: #f07178; + --codemirror-comment: #545454; + --codemirror-tag: #ff5370; + --codemirror-meta: #ffcb6b; + --codemirror-attribute: #c792ea; + --codemirror-property: #c792ea; + --codemirror-qualifier: #decb6b; + --codemirror-type: #decb6b; + --energy-grid-return-color: #a280db; + --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) + saturate(0.3); + --disabled-color: #464646; + } `; export const colorDerivedVariables = extractDerivedVars(colorStyles); export const darkColorVariables = extractVars(darkColorStyles); diff --git a/src/resources/theme/main.globals.ts b/src/resources/theme/main.globals.ts index 60ae6e5731..3c4b6c9cdb 100644 --- a/src/resources/theme/main.globals.ts +++ b/src/resources/theme/main.globals.ts @@ -26,12 +26,6 @@ export const mainStyles = css` --float-end: right; --margin-title-ltr: 0 0 0 24px; --margin-title-rtl: 0 24px 0 0; - - /* Vaadin typography */ - --material-h6-font-size: var(--ha-font-size-m); - --material-small-font-size: var(--ha-font-size-xs); - --material-caption-font-size: var(--ha-font-size-2xs); - --material-button-font-size: var(--ha-font-size-xs); } `; diff --git a/src/resources/theme/typography.globals.ts b/src/resources/theme/typography.globals.ts index 04922558e1..24b2c1f232 100644 --- a/src/resources/theme/typography.globals.ts +++ b/src/resources/theme/typography.globals.ts @@ -44,6 +44,12 @@ export const typographyStyles = css` --ha-font-smoothing: antialiased; --ha-moz-osx-font-smoothing: grayscale; + + /* Vaadin typography */ + --material-h6-font-size: var(--ha-font-size-m); + --material-small-font-size: var(--ha-font-size-xs); + --material-caption-font-size: var(--ha-font-size-2xs); + --material-button-font-size: var(--ha-font-size-xs); } `;