Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Prettier one line format in style .globals.ts files (#26991)

pull/26976/head
Wendelin 2025-09-10 14:54:34 +02:00 committed by GitHub
parent a34ca3c085
commit 466115d916
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
prettier.config.js
View File

@ -1,3 +1,11 @@
export default {
trailingComma: "es5",
overrides: [
{
files: "*.globals.ts",
options: {
printWidth: 9999, // Effectively disables line wrapping for these files
},
},
],
};

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

@ -117,10 +117,7 @@ export const colorStyles = css`
/* state color */
--state-active-color: var(--amber-color);
--state-inactive-color: var(--grey-color);
--state-unavailable-color: var(
--state-icon-unavailable-color,
var(--disabled-text-color)
);
--state-unavailable-color: var(--state-icon-unavailable-color, var(--disabled-text-color));
/* state domain colors */
--state-alarm_control_panel-armed_away-color: var(--green-color);
@ -198,15 +195,9 @@ export const colorStyles = css`
--sidebar-selected-icon-color: var(--primary-color);
--sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
--switch-checked-color: var(--primary-color);
--switch-checked-button-color: var(
--switch-checked-color,
var(--primary-background-color)
);
--switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color));
--switch-checked-track-color: var(--switch-checked-color, #000000);
--switch-unchecked-button-color: var(
--switch-unchecked-color,
var(--primary-background-color)
);
--switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color));
--switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
--slider-color: var(--primary-color);
--slider-secondary-color: var(--light-primary-color);
@ -252,15 +243,9 @@ export const colorStyles = css`
--mdc-text-field-idle-line-color: var(--input-idle-line-color);
--mdc-text-field-hover-line-color: var(--input-hover-line-color);
--mdc-text-field-disabled-line-color: var(--input-disabled-line-color);
--mdc-text-field-outlined-idle-border-color: var(
--input-outlined-idle-border-color
);
--mdc-text-field-outlined-hover-border-color: var(
--input-outlined-hover-border-color
);
--mdc-text-field-outlined-disabled-border-color: var(
--input-outlined-disabled-border-color
);
--mdc-text-field-outlined-idle-border-color: var(--input-outlined-idle-border-color);
--mdc-text-field-outlined-hover-border-color: var(--input-outlined-hover-border-color);
--mdc-text-field-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
--mdc-text-field-fill-color: var(--input-fill-color);
--mdc-text-field-disabled-fill-color: var(--input-disabled-fill-color);
--mdc-text-field-ink-color: var(--input-ink-color);
@ -269,15 +254,9 @@ export const colorStyles = css`
--mdc-select-idle-line-color: var(--input-idle-line-color);
--mdc-select-hover-line-color: var(--input-hover-line-color);
--mdc-select-outlined-idle-border-color: var(
--input-outlined-idle-border-color
);
--mdc-select-outlined-hover-border-color: var(
--input-outlined-hover-border-color
);
--mdc-select-outlined-disabled-border-color: var(
--input-outlined-disabled-border-color
);
--mdc-select-outlined-idle-border-color: var(--input-outlined-idle-border-color);
--mdc-select-outlined-hover-border-color: var(--input-outlined-hover-border-color);
--mdc-select-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
--mdc-select-fill-color: var(--input-fill-color);
--mdc-select-disabled-fill-color: var(--input-disabled-fill-color);
--mdc-select-ink-color: var(--input-ink-color);
@ -285,14 +264,8 @@ export const colorStyles = css`
--mdc-select-disabled-ink-color: var(--input-disabled-ink-color);
--mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color);
--mdc-select-disabled-dropdown-icon-color: var(--input-disabled-ink-color);
--ha-assist-chip-filled-container-color: rgba(
var(--rgb-primary-text-color),
0.15
);
--ha-assist-chip-active-container-color: rgba(
var(--rgb-primary-color),
0.15
);
--ha-assist-chip-filled-container-color: rgba(var(--rgb-primary-text-color), 0.15);
--ha-assist-chip-active-container-color: rgba(var(--rgb-primary-color), 0.15);
--chip-background-color: rgba(var(--rgb-primary-text-color), 0.15);
/* Vaadin */
@ -354,8 +327,7 @@ export const darkColorStyles = css`
--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);
--map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(0.3);
--disabled-color: #464646;
--ha-button-primary-light-color: #4082a040;
@ -367,9 +339,5 @@ export const darkColorStyles = css`
}
`;
export const DefaultPrimaryColor = extractVar(
colorStyles,
"primary-color",
coreColorVariables
);
export const DefaultPrimaryColor = extractVar(colorStyles, "primary-color", coreColorVariables);
export const DefaultAccentColor = extractVar(colorStyles, "accent-color");

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

@ -28,22 +28,10 @@ export const mainStyles = css`
--margin-title-rtl: 0 24px 0 0;
/* safe-area-insets */
--safe-area-inset-top: var(
--app-safe-area-inset-top,
env(safe-area-inset-top, 0)
);
--safe-area-inset-bottom: var(
--app-safe-area-inset-bottom,
env(safe-area-inset-bottom, 0)
);
--safe-area-inset-left: var(
--app-safe-area-inset-left,
env(safe-area-inset-left, 0)
);
--safe-area-inset-right: var(
--app-safe-area-inset-right,
env(safe-area-inset-right, 0)
);
--safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0));
--safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
--safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0));
--safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0));
}
`;

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

@ -1,8 +1,5 @@
import { css } from "lit";
import {
extractDerivedVars,
extractVar,
} from "../../common/style/derived-css-vars";
import { extractDerivedVars, extractVar } from "../../common/style/derived-css-vars";
export const typographyStyles = css`
html {
@ -17,16 +14,10 @@ export const typographyStyles = css`
--ha-font-size-m: calc(14px * var(--ha-font-size-scale)); /* 1rem */
--ha-font-size-l: calc(16px * var(--ha-font-size-scale)); /* 1.142857rem */
--ha-font-size-xl: calc(20px * var(--ha-font-size-scale)); /* 1.428571rem */
--ha-font-size-2xl: calc(
24px * var(--ha-font-size-scale)
); /* 1.714286rem */
--ha-font-size-2xl: calc(24px * var(--ha-font-size-scale)); /* 1.714286rem */
--ha-font-size-3xl: calc(28px * var(--ha-font-size-scale)); /* 2rem */
--ha-font-size-4xl: calc(
32px * var(--ha-font-size-scale)
); /* 2.285714rem */
--ha-font-size-5xl: calc(
40px * var(--ha-font-size-scale)
); /* 2.857143rem */
--ha-font-size-4xl: calc(32px * var(--ha-font-size-scale)); /* 2.285714rem */
--ha-font-size-5xl: calc(40px * var(--ha-font-size-scale)); /* 2.857143rem */
--ha-font-weight-light: 300;
--ha-font-weight-normal: 400;
@ -60,17 +51,8 @@ export const typographyStyles = css`
export const typographyDerivedVariables = extractDerivedVars(typographyStyles);
export const haFontFamilyBody = extractVar(
typographyStyles,
"ha-font-family-body"
);
export const haFontFamilyBody = extractVar(typographyStyles, "ha-font-family-body");
export const haFontSmoothing = extractVar(
typographyStyles,
"ha-font-smoothing"
);
export const haFontSmoothing = extractVar(typographyStyles, "ha-font-smoothing");
export const haMozOsxFontSmoothing = extractVar(
typographyStyles,
"ha-moz-osx-font-smoothing"
);
export const haMozOsxFontSmoothing = extractVar(typographyStyles, "ha-moz-osx-font-smoothing");

3
src/resources/theme/wa.globals.ts
View File

@ -6,8 +6,7 @@ export const waMainStyles = css`
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 2px;
--wa-focus-ring-offset: 2px;
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
var(--wa-focus-ring-color);
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-focus-ring-color);
--wa-space-l: 24px;
--wa-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2);