jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move vaadin typography vars to typography globals (#25398)

Browse Source
This commit is contained in:
Bram Kragten 2025-05-09 14:08:12 +02:00 committed by GitHub
parent 461d5eb687
commit 15ae37d077
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 59 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/style/derived-css-vars.ts
View File

@ -2,7 +2,7 @@ import type { CSSResult } from "lit";
const _extractCssVars = ( const _extractCssVars = (
cssString: string, cssString: string,
condition: (string) => boolean = () => true condition: (string: string) => boolean = () => true
) => { ) => {
const variables: Record<string, string> = {}; const variables: Record<string, string> = {};

102
src/resources/theme/color.globals.ts
View File

@ -299,58 +299,60 @@ export const colorStyles = css`
`; `;
const darkColorStyles = css` const darkColorStyles = css`
--primary-background-color: #111111; html {
--card-background-color: #1c1c1c; --primary-background-color: #111111;
--secondary-background-color: #282828; --card-background-color: #1c1c1c;
--clear-background-color: #111111; --secondary-background-color: #282828;
--primary-text-color: #e1e1e1; --clear-background-color: #111111;
--secondary-text-color: #9b9b9b; --primary-text-color: #e1e1e1;
--disabled-text-color: #6f6f6f; --secondary-text-color: #9b9b9b;
--app-header-text-color: #e1e1e1; --disabled-text-color: #6f6f6f;
--app-header-background-color: #101e24; --app-header-text-color: #e1e1e1;
--switch-unchecked-button-color: #999999; --app-header-background-color: #101e24;
--switch-unchecked-track-color: #9b9b9b; --switch-unchecked-button-color: #999999;
--divider-color: rgba(225, 225, 225, 0.12); --switch-unchecked-track-color: #9b9b9b;
--outline-color: rgba(225, 225, 225, 0.12); --divider-color: rgba(225, 225, 225, 0.12);
--outline-hover-color: rgba(225, 225, 225, 0.24); --outline-color: rgba(225, 225, 225, 0.12);
--mdc-ripple-color: #aaaaaa; --outline-hover-color: rgba(225, 225, 225, 0.24);
--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.1); --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-idle-line-color: rgba(255, 255, 255, 0.42);
--input-hover-line-color: rgba(255, 255, 255, 0.87); --input-hover-line-color: rgba(255, 255, 255, 0.87);
--input-disabled-line-color: rgba(255, 255, 255, 0.06); --input-disabled-line-color: rgba(255, 255, 255, 0.06);
--input-outlined-idle-border-color: rgba(255, 255, 255, 0.38); --input-outlined-idle-border-color: rgba(255, 255, 255, 0.38);
--input-outlined-hover-border-color: rgba(255, 255, 255, 0.87); --input-outlined-hover-border-color: rgba(255, 255, 255, 0.87);
--input-outlined-disabled-border-color: rgba(255, 255, 255, 0.06); --input-outlined-disabled-border-color: rgba(255, 255, 255, 0.06);
--input-fill-color: rgba(255, 255, 255, 0.05); --input-fill-color: rgba(255, 255, 255, 0.05);
--input-disabled-fill-color: rgba(255, 255, 255, 0.02); --input-disabled-fill-color: rgba(255, 255, 255, 0.02);
--input-ink-color: rgba(255, 255, 255, 0.87); --input-ink-color: rgba(255, 255, 255, 0.87);
--input-label-ink-color: rgba(255, 255, 255, 0.6); --input-label-ink-color: rgba(255, 255, 255, 0.6);
--input-disabled-ink-color: rgba(255, 255, 255, 0.37); --input-disabled-ink-color: rgba(255, 255, 255, 0.37);
--input-dropdown-icon-color: rgba(255, 255, 255, 0.54); --input-dropdown-icon-color: rgba(255, 255, 255, 0.54);
--codemirror-keyword: #c792ea; --codemirror-keyword: #c792ea;
--codemirror-operator: #89ddff; --codemirror-operator: #89ddff;
--codemirror-variable: #f07178; --codemirror-variable: #f07178;
--codemirror-variable-2: #eeffff; --codemirror-variable-2: #eeffff;
--codemirror-variable-3: #decb6b; --codemirror-variable-3: #decb6b;
--codemirror-builtin: #ffcb6b; --codemirror-builtin: #ffcb6b;
--codemirror-atom: #f78c6c; --codemirror-atom: #f78c6c;
--codemirror-number: #ff5370; --codemirror-number: #ff5370;
--codemirror-def: #82aaff; --codemirror-def: #82aaff;
--codemirror-string: #c3e88d; --codemirror-string: #c3e88d;
--codemirror-string-2: #f07178; --codemirror-string-2: #f07178;
--codemirror-comment: #545454; --codemirror-comment: #545454;
--codemirror-tag: #ff5370; --codemirror-tag: #ff5370;
--codemirror-meta: #ffcb6b; --codemirror-meta: #ffcb6b;
--codemirror-attribute: #c792ea; --codemirror-attribute: #c792ea;
--codemirror-property: #c792ea; --codemirror-property: #c792ea;
--codemirror-qualifier: #decb6b; --codemirror-qualifier: #decb6b;
--codemirror-type: #decb6b; --codemirror-type: #decb6b;
--energy-grid-return-color: #a280db; --energy-grid-return-color: #a280db;
--map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2)
saturate(0.3); saturate(0.3);
--disabled-color: #464646; --disabled-color: #464646;
}
`; `;
export const colorDerivedVariables = extractDerivedVars(colorStyles); export const colorDerivedVariables = extractDerivedVars(colorStyles);
export const darkColorVariables = extractVars(darkColorStyles); export const darkColorVariables = extractVars(darkColorStyles);

6
src/resources/theme/main.globals.ts
View File

@ -26,12 +26,6 @@ export const mainStyles = css`
--float-end: right; --float-end: right;
--margin-title-ltr: 0 0 0 24px; --margin-title-ltr: 0 0 0 24px;
--margin-title-rtl: 0 24px 0 0; --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);
} }
`; `;

6
src/resources/theme/typography.globals.ts
View File

@ -44,6 +44,12 @@ export const typographyStyles = css`
--ha-font-smoothing: antialiased; --ha-font-smoothing: antialiased;
--ha-moz-osx-font-smoothing: grayscale; --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);
} }
`; `;