jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-08 09:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add typography tokens (#25084)

Browse Source
This commit is contained in:
Wendelin 2025-04-24 16:52:03 +02:00 committed by GitHub
parent c0f304ad40
commit ae74e3496c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
58 changed files with 253 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/src/configs/jimpower/theme.ts
View File

@ -1,6 +1,5 @@
export const demoThemeJimpower = () => ({ export const demoThemeJimpower = () => ({
"text-primary-color": "var(--primary-text-color)", "text-primary-color": "var(--primary-text-color)",
"paper-item-icon-color": "var(--primary-text-color)",
"primary-color": "#5294E2", "primary-color": "#5294E2",
"label-badge-red": "var(--accent-color)", "label-badge-red": "var(--accent-color)",
"light-primary-color": "var(--accent-color)", "light-primary-color": "var(--accent-color)",
@ -12,8 +11,7 @@ export const demoThemeJimpower = () => ({
"paper-item-icon_-_color": "green", "paper-item-icon_-_color": "green",
"paper-grey-200": "#414A59", "paper-grey-200": "#414A59",
"label-badge-background-color": "#2E333A", "label-badge-background-color": "#2E333A",
"paper-card-header-color": "var(--accent-color)", "sidebar-icon-color": "var(--state-icon-color)",
"sidebar-icon-color": "var(--paper-item-icon-color)",
"paper-listbox-background-color": "#2E333A", "paper-listbox-background-color": "#2E333A",
"table-row-background-color": "#353840", "table-row-background-color": "#353840",
"paper-grey-50": "var(--primary-text-color)", "paper-grey-50": "var(--primary-text-color)",

2
demo/src/configs/kernehed/theme.ts
View File

@ -1,7 +1,6 @@
// https://community.home-assistant.io/t/slate-a-new-dark-theme/86410 // https://community.home-assistant.io/t/slate-a-new-dark-theme/86410
export const demoThemeKernehed = () => ({ export const demoThemeKernehed = () => ({
"text-primary-color": "var(--primary-text-color)", "text-primary-color": "var(--primary-text-color)",
"paper-item-icon-color": "var(--primary-text-color)",
"primary-color": "#2980b9", "primary-color": "#2980b9",
"label-badge-red": "var(--accent-color)", "label-badge-red": "var(--accent-color)",
"primary-text-color": "#FFFFFF", "primary-text-color": "#FFFFFF",
@ -14,7 +13,6 @@ export const demoThemeKernehed = () => ({
"paper-item-icon_-_color": "green", "paper-item-icon_-_color": "green",
"paper-grey-200": "#222222", "paper-grey-200": "#222222",
"label-badge-background-color": "#222222", "label-badge-background-color": "#222222",
"paper-card-header-color": "var(--accent-color)",
"paper-listbox-background-color": "#141414", "paper-listbox-background-color": "#141414",
"table-row-background-color": "#292929", "table-row-background-color": "#292929",
"paper-grey-50": "var(--primary-text-color)", "paper-grey-50": "var(--primary-text-color)",

4
demo/src/configs/teachingbirds/theme.ts
View File

@ -1,8 +1,6 @@
export const demoThemeTeachingbirds = () => ({ export const demoThemeTeachingbirds = () => ({
"paper-card-header-color": "var(--paper-item-icon-color)",
"paper-listbox-background-color": "#202020", "paper-listbox-background-color": "#202020",
"paper-grey-50": "var(--primary-text-color)", "paper-grey-50": "var(--primary-text-color)",
"paper-item-icon-color": "#d3d3d3",
"divider-color": "rgba(255, 255, 255, 0.12)", "divider-color": "rgba(255, 255, 255, 0.12)",
"primary-color": "#389638", "primary-color": "#389638",
"light-primary-color": "#6f956f", "light-primary-color": "#6f956f",
@ -13,7 +11,7 @@ export const demoThemeTeachingbirds = () => ({
"card-background-color": "#4e4e4e", "card-background-color": "#4e4e4e",
"label-badge-text-color": "var(--text-primary-color)", "label-badge-text-color": "var(--text-primary-color)",
"primary-background-color": "#303030", "primary-background-color": "#303030",
"sidebar-icon-color": "var(--paper-item-icon-color)", "sidebar-icon-color": "#d3d3d3",
"secondary-background-color": "#2b2b2b", "secondary-background-color": "#2b2b2b",
"paper-item-icon-active-color": "#d8bf50", "paper-item-icon-active-color": "#d8bf50",
"switch-checked-color": "var(--primary-color)", "switch-checked-color": "var(--primary-color)",

2
demo/src/custom-cards/cast-demo-row.ts
View File

@ -73,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
} }
ha-svg-icon { ha-svg-icon {
padding: 8px; padding: 8px;
color: var(--paper-item-icon-color); color: var(--state-icon-color);
} }
.flex { .flex {
flex: 1; flex: 1;

3
gallery/src/pages/components/ha-selector.ts
View File

@ -644,9 +644,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
} }
static styles = css` static styles = css`
ha-settings-row {
--paper-item-body-two-line-min-height: 0;
}
.options { .options {
max-width: 800px; max-width: 800px;
margin: 16px auto; margin: 16px auto;

6
gallery/src/pages/components/ha-tooltip.markdown
View File

@ -18,7 +18,7 @@ Tooltips use `display: contents` so they won't interfere with how elements are p
## Documentation ## Documentation
This element is based on sholace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation. This element is based on shoelace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a> <a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
@ -28,3 +28,7 @@ In your theme settings use this without the prefixed `--`.
- `--ha-tooltip-border-radius` (Default: 4px) - `--ha-tooltip-border-radius` (Default: 4px)
- `--ha-tooltip-arrow-size` (Default: 8px) - `--ha-tooltip-arrow-size` (Default: 8px)
- `--sl-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
- `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
- `--sl-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
- `--sl-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)

2
hassio/src/components/hassio-card-content.ts
View File

@ -85,7 +85,7 @@ class HassioCardContent extends LitElement {
} }
ha-svg-icon.hassupdate, ha-svg-icon.hassupdate,
ha-svg-icon.backup { ha-svg-icon.backup {
color: var(--paper-item-icon-color); color: var(--state-icon-color);
} }
ha-svg-icon.not_available { ha-svg-icon.not_available {
color: var(--error-color); color: var(--error-color);

2
hassio/src/dashboard/hassio-update.ts
View File

@ -130,7 +130,7 @@ export class HassioUpdate extends LitElement {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.update-heading { .update-heading {
font-size: var(--paper-font-subhead_-_font-size); font-size: var(--ha-font-size-l);
font-weight: 500; font-weight: 500;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: var(--primary-text-color); color: var(--primary-text-color);

2
hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
View File

@ -170,7 +170,7 @@ class HassioHardwareDialog extends LitElement {
padding: 16px; padding: 16px;
overflow: auto; overflow: auto;
line-height: 1.45; line-height: 1.45;
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
code { code {
font-size: 85%; font-size: 85%;

11
hassio/src/resources/hassio-style.ts
View File

@ -12,12 +12,11 @@ export const hassioStyle = css`
h1 { h1 {
font-size: 2em; font-size: 2em;
margin-bottom: 8px; margin-bottom: 8px;
font-family: var(--paper-font-headline_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); -webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--paper-font-headline_-_font-size); font-size: var(--ha-font-size-2xl);
font-weight: var(--paper-font-headline_-_font-weight); font-weight: var(--ha-font-weight-normal);
letter-spacing: var(--paper-font-headline_-_letter-spacing); line-height: var(--ha-line-height-condensed);
line-height: var(--paper-font-headline_-_line-height);
padding-left: 8px; padding-left: 8px;
padding-inline-start: 8px; padding-inline-start: 8px;
padding-inline-end: initial; padding-inline-end: initial;

2
src/components/entity/state-badge.ts
View File

@ -220,7 +220,7 @@ export class StateBadge extends LitElement {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
width: 40px; width: 40px;
color: var(--paper-item-icon-color, #44739e); color: var(--state-icon-color);
border-radius: var(--state-badge-border-radius, 50%); border-radius: var(--state-badge-border-radius, 50%);
height: 40px; height: 40px;
background-size: cover; background-size: cover;

2
src/components/ha-markdown.ts
View File

@ -74,7 +74,7 @@ export class HaMarkdown extends LitElement {
padding: 16px; padding: 16px;
overflow: auto; overflow: auto;
line-height: 1.45; line-height: 1.45;
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
h1, h1,
h2, h2,

1
src/components/ha-network.ts
View File

@ -163,7 +163,6 @@ export class HaNetwork extends LitElement {
ha-settings-row { ha-settings-row {
padding: 0; padding: 0;
--paper-time-input-justify-content: flex-end;
--settings-row-content-display: contents; --settings-row-content-display: contents;
--settings-row-prefix-display: contents; --settings-row-prefix-display: contents;
} }

1
src/components/ha-service-control.ts
View File

@ -896,7 +896,6 @@ export class HaServiceControl extends LitElement {
padding: var(--service-control-padding, 0 16px); padding: var(--service-control-padding, 0 16px);
} }
ha-settings-row { ha-settings-row {
--paper-time-input-justify-content: flex-end;
--settings-row-content-width: 100%; --settings-row-content-width: 100%;
--settings-row-prefix-display: contents; --settings-row-prefix-display: contents;
border-top: var( border-top: var(

4
src/components/ha-settings-row.ts
View File

@ -54,7 +54,7 @@ export class HaSettingsRow extends LitElement {
flex-basis: var(--layout-flex_-_flex-basis, 0.000000001px); flex-basis: var(--layout-flex_-_flex-basis, 0.000000001px);
} }
.body[three-line] { .body[three-line] {
min-height: var(--paper-item-body-three-line-min-height, 88px); min-height: 88px;
} }
:host(:not([wrap-heading])) body > * { :host(:not([wrap-heading])) body > * {
overflow: hidden; overflow: hidden;
@ -75,7 +75,7 @@ export class HaSettingsRow extends LitElement {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.body[two-line] { .body[two-line] {
min-height: calc(var(--paper-item-body-two-line-min-height, 72px) - 16px); min-height: calc(72px - 16px);
flex: 1; flex: 1;
} }
.content { .content {

20
src/components/ha-tooltip.ts
View File

@ -22,10 +22,22 @@ export class HaTooltip extends SlTooltip {
:host { :host {
--sl-tooltip-background-color: var(--secondary-background-color); --sl-tooltip-background-color: var(--secondary-background-color);
--sl-tooltip-color: var(--primary-text-color); --sl-tooltip-color: var(--primary-text-color);
--sl-tooltip-font-family: Roboto, sans-serif; --sl-tooltip-font-family: var(
--sl-tooltip-font-size: 12px; --ha-tooltip-font-family,
--sl-tooltip-font-weight: normal; var(--ha-font-family-body)
--sl-tooltip-line-height: 1; );
--sl-tooltip-font-size: var(
--ha-tooltip-font-size,
var(--ha-font-size-s)
);
--sl-tooltip-font-weight: var(
--ha-tooltip-font-weight,
var(--ha-font-weight-normal)
);
--sl-tooltip-line-height: var(
--ha-tooltip-line-height,
var(--ha-line-height-condensed)
);
--sl-tooltip-padding: 8px; --sl-tooltip-padding: 8px;
--sl-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px); --sl-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
--sl-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px); --sl-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);

4
src/components/sl-tab-group.ts
View File

@ -135,8 +135,8 @@ export class HaSlTabGroup extends TabGroup {
--sl-color-neutral-600: inherit; --sl-color-neutral-600: inherit;
--sl-font-weight-semibold: 500; --sl-font-weight-semibold: var(--ha-font-weight-semibold);
--sl-font-size-small: 14px; --sl-font-size-small: var(--ha-font-size-m);
--sl-color-primary-600: var( --sl-color-primary-600: var(
--ha-tab-active-text-color, --ha-tab-active-text-color,

2
src/dialogs/more-info/controls/more-info-weather.ts
View File

@ -407,7 +407,7 @@ class MoreInfoWeather extends LitElement {
weatherSVGStyles, weatherSVGStyles,
css` css`
ha-svg-icon { ha-svg-icon {
color: var(--paper-item-icon-color); color: var(--state-icon-color);
margin-left: 8px; margin-left: 8px;
margin-inline-start: 8px; margin-inline-start: 8px;
margin-inline-end: initial; margin-inline-end: initial;

13
src/dialogs/notifications/notification-item-template.ts
View File

@ -25,14 +25,11 @@ export class HuiNotificationItemTemplate extends LitElement {
} }
ha-card .header { ha-card .header {
font-family: var(--paper-font-headline_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var( -webkit-font-smoothing: var(--ha-font-smoothing);
--paper-font-headline_-_-webkit-font-smoothing font-size: var(--ha-font-size-2xl);
); font-weight: var(--ha-font-weight-normal);
font-size: var(--paper-font-headline_-_font-size); line-height: var(--ha-line-height-condensed);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
color: var(--primary-text-color); color: var(--primary-text-color);
padding: 16px 16px 0; padding: 16px 16px 0;

2
src/panels/calendar/ha-full-calendar.ts
View File

@ -630,7 +630,7 @@ export class HAFullCalendar extends LitElement {
} }
.fc-icon-x:before { .fc-icon-x:before {
font-family: var(--paper-font-common-base_-_font-family); font-family: var(--ha-font-family-body);
content: "X"; content: "X";
} }

1
src/panels/config/automation/action/types/ha-automation-action-service.ts
View File

@ -170,7 +170,6 @@ export class HaServiceAction extends LitElement implements ActionElement {
padding: var(--service-control-padding, 0 16px); padding: var(--service-control-padding, 0 16px);
} }
ha-settings-row { ha-settings-row {
--paper-time-input-justify-content: flex-end;
--settings-row-content-width: 100%; --settings-row-content-width: 100%;
--settings-row-prefix-display: contents; --settings-row-prefix-display: contents;
border-top: var( border-top: var(

4
src/panels/config/automation/ha-automation-picker.ts
View File

@ -1450,10 +1450,12 @@ ${rejected
--data-table-row-height: 72px; --data-table-row-height: 72px;
} }
.empty { .empty {
--paper-font-headline_-_font-size: 28px;
--mdc-icon-size: 80px; --mdc-icon-size: 80px;
max-width: 500px; max-width: 500px;
} }
.empty h1 {
font-size: var(--ha-font-size-3xl);
}
ha-assist-chip { ha-assist-chip {
--ha-assist-chip-container-shape: 10px; --ha-assist-chip-container-shape: 10px;
} }

1
src/panels/config/blueprint/blueprint-generic-editor.ts
View File

@ -271,7 +271,6 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
margin-bottom: 16px; margin-bottom: 16px;
} }
ha-settings-row { ha-settings-row {
--paper-time-input-justify-content: flex-end;
--settings-row-content-width: 100%; --settings-row-content-width: 100%;
--settings-row-prefix-display: contents; --settings-row-prefix-display: contents;
} }

1
src/panels/config/devices/device-detail/ha-device-entities-card.ts
View File

@ -275,7 +275,6 @@ export class HaDeviceEntitiesCard extends LitElement {
min-height: 40px; min-height: 40px;
padding: 0 16px; padding: 0 16px;
cursor: pointer; cursor: pointer;
--paper-item-icon-width: 48px;
} }
.name { .name {
font-size: 14px; font-size: 14px;

2
src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
View File

@ -80,7 +80,7 @@ class MQTTDiscoveryPayload extends LitElement {
padding-right: 4px; padding-right: 4px;
padding-inline-start: 4px; padding-inline-start: 4px;
padding-inline-end: 4px; padding-inline-end: 4px;
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
`; `;
} }

2
src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
View File

@ -175,7 +175,7 @@ class MQTTMessages extends LitElement {
padding-right: 4px; padding-right: 4px;
padding-inline-start: 4px; padding-inline-start: 4px;
padding-inline-end: 4px; padding-inline-end: 4px;
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
`; `;
} }

13
src/panels/config/devices/ha-config-device-page.ts
View File

@ -1541,14 +1541,11 @@ export class HaConfigDevicePage extends LitElement {
h1 { h1 {
margin: 0; margin: 0;
font-family: var(--paper-font-headline_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var( -webkit-font-smoothing: var(--ha-font-smoothing);
--paper-font-headline_-_-webkit-font-smoothing font-size: var(--ha-font-size-2xl);
); font-weight: var(--ha-font-weight-normal);
font-size: var(--paper-font-headline_-_font-size); line-height: var(--ha-line-height-condensed);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
} }

23
src/panels/config/ha-config-section.ts
View File

@ -61,14 +61,11 @@ export class HaConfigSection extends LitElement {
} }
.header { .header {
font-family: var(--paper-font-headline_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var( -webkit-font-smoothing: var(--ha-font-smoothing);
--paper-font-headline_-_-webkit-font-smoothing font-size: var(--ha-font-size-2xl);
); font-weight: var(--ha-font-weight-normal);
font-size: var(--paper-font-headline_-_font-size); line-height: var(--ha-line-height-condensed);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
} }
@ -77,12 +74,10 @@ export class HaConfigSection extends LitElement {
} }
.intro { .intro {
font-family: var(--paper-font-subhead_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var( -webkit-font-smoothing: var(--ha-font-smoothing);
--paper-font-subhead_-_-webkit-font-smoothing font-weight: var(--ha-font-weight-normal);
); line-height: var(--ha-line-height-normal);
font-weight: var(--paper-font-subhead_-_font-weight);
line-height: var(--paper-font-subhead_-_line-height);
width: 100%; width: 100%;
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
font-size: 14px; font-size: 14px;

2
src/panels/config/hardware/dialog-hardware-available.ts
View File

@ -197,7 +197,7 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
padding: 16px; padding: 16px;
overflow: auto; overflow: auto;
line-height: 1.45; line-height: 1.45;
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
code { code {
font-size: 85%; font-size: 85%;

2
src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
View File

@ -209,7 +209,7 @@ class MqttSubscribeCard extends LitElement {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
.panel-dev-mqtt-subscribe-fields { .panel-dev-mqtt-subscribe-fields {
display: flex; display: flex;

13
src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
View File

@ -166,14 +166,11 @@ export class ZHAAddGroupPage extends LitElement {
return [ return [
css` css`
.header { .header {
font-family: var(--paper-font-display1_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var( -webkit-font-smoothing: var(--ha-font-smoothing);
--paper-font-display1_-_-webkit-font-smoothing font-size: var(--ha-font-size-4xl);
); font-weight: var(--ha-font-weight-normal);
font-size: var(--paper-font-display1_-_font-size); line-height: var(--ha-line-height-condensed);
font-weight: var(--paper-font-display1_-_font-weight);
letter-spacing: var(--paper-font-display1_-_letter-spacing);
line-height: var(--paper-font-display1_-_line-height);
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
} }

2
src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
View File

@ -373,8 +373,6 @@ class ZHAConfigDashboard extends LitElement {
padding-right: 0; padding-right: 0;
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: 0; padding-inline-end: 0;
--paper-item-body-two-line-min-height: 55px;
} }
.network-settings ha-settings-row span[slot="heading"] { .network-settings ha-settings-row span[slot="heading"] {

13
src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View File

@ -293,14 +293,11 @@ export class ZHAGroupPage extends LitElement {
--app-header-text-color: var(--sidebar-icon-color); --app-header-text-color: var(--sidebar-icon-color);
} }
.header { .header {
font-family: var(--paper-font-display1_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var( -webkit-font-smoothing: var(--ha-font-smoothing);
--paper-font-display1_-_-webkit-font-smoothing font-size: var(--ha-font-size-4xl);
); font-weight: var(--ha-font-weight-normal);
font-size: var(--paper-font-display1_-_font-size); line-height: var(--ha-line-height-condensed);
font-weight: var(--paper-font-display1_-_font-weight);
letter-spacing: var(--paper-font-display1_-_letter-spacing);
line-height: var(--paper-font-display1_-_line-height);
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
} }

1
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
View File

@ -602,7 +602,6 @@ class ZWaveJSNodeConfig extends LitElement {
ha-settings-row { ha-settings-row {
--settings-row-prefix-display: contents; --settings-row-prefix-display: contents;
--settings-row-content-width: 100%; --settings-row-content-width: 100%;
--paper-time-input-justify-content: flex-end;
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
padding: 4px 16px; padding: 4px 16px;
} }

2
src/panels/config/logs/dialog-system-log-detail.ts
View File

@ -239,7 +239,7 @@ class DialogSystemLogDetail extends LitElement {
} }
pre { pre {
margin-bottom: 0; margin-bottom: 0;
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
ha-alert { ha-alert {
display: block; display: block;

2
src/panels/config/logs/error-log-card.ts
View File

@ -794,7 +794,7 @@ class ErrorLogCard extends LitElement {
.error-log { .error-log {
position: relative; position: relative;
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
clear: both; clear: both;
text-align: start; text-align: start;
padding-top: 16px; padding-top: 16px;

4
src/panels/config/scene/ha-scene-dashboard.ts
View File

@ -1197,10 +1197,12 @@ ${rejected
text-decoration: none; text-decoration: none;
} }
.empty { .empty {
--paper-font-headline_-_font-size: 28px;
--mdc-icon-size: 80px; --mdc-icon-size: 80px;
max-width: 500px; max-width: 500px;
} }
.empty h1 {
font-size: var(--ha-font-size-3xl);
}
ha-assist-chip { ha-assist-chip {
--ha-assist-chip-container-shape: 10px; --ha-assist-chip-container-shape: 10px;
} }

4
src/panels/config/script/ha-script-picker.ts
View File

@ -1286,10 +1286,12 @@ ${rejected
text-decoration: none; text-decoration: none;
} }
.empty { .empty {
--paper-font-headline_-_font-size: 28px;
--mdc-icon-size: 80px; --mdc-icon-size: 80px;
max-width: 500px; max-width: 500px;
} }
.empty h1 {
font-size: var(--ha-font-size-3xl);
}
ha-assist-chip { ha-assist-chip {
--ha-assist-chip-container-shape: 10px; --ha-assist-chip-container-shape: 10px;
} }

2
src/panels/developer-tools/event/event-subscribe-card.ts
View File

@ -175,7 +175,7 @@ class EventSubscribeCard extends LitElement {
margin-bottom: 0; margin-bottom: 0;
} }
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
} }
ha-card { ha-card {
margin-bottom: 5px; margin-bottom: 5px;

1
src/panels/developer-tools/ha-panel-developer-tools.ts
View File

@ -120,7 +120,6 @@ class PanelDeveloperTools extends LitElement {
css` css`
:host { :host {
color: var(--primary-text-color); color: var(--primary-text-color);
--paper-card-header-color: var(--primary-text-color);
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
} }

5
src/panels/developer-tools/template/developer-tools-template.ts
View File

@ -284,9 +284,8 @@ ${type === "object"
.content.horizontal { .content.horizontal {
--code-mirror-max-height: calc( --code-mirror-max-height: calc(
100vh - var(--header-height) - 100vh - var(--header-height) - (var(--ha-line-height-normal) * 3) -
(var(--paper-font-body1_-_line-height) * 3) - (1em * 2) - (1em * 2) - (max(16px, env(safe-area-inset-top)) * 2) -
(max(16px, env(safe-area-inset-top)) * 2) -
(max(16px, env(safe-area-inset-bottom)) * 2) - (max(16px, env(safe-area-inset-bottom)) * 2) -
(var(--ha-card-border-width, 1px) * 2) - 179px (var(--ha-card-border-width, 1px) * 2) - 179px
); );

2
src/panels/logbook/ha-logbook-renderer.ts
View File

@ -682,7 +682,7 @@ class HaLogbookRenderer extends LitElement {
} }
button.link { button.link {
color: var(--paper-item-icon-color); color: var(--state-icon-color);
text-decoration: none; text-decoration: none;
} }

2
src/panels/lovelace/badges/hui-error-badge.ts
View File

@ -78,7 +78,7 @@ export class HuiErrorBadge extends LitElement implements LovelaceBadge {
white-space: nowrap; white-space: nowrap;
} }
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
white-space: break-spaces; white-space: break-spaces;
user-select: text; user-select: text;
} }

12
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -269,8 +269,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
iconColorCSS, iconColorCSS,
css` css`
ha-card { ha-card {
--state-inactive-color: var(--paper-item-icon-color, #44739e); --state-inactive-color: var(--state-icon-color);
--state-color: var(--paper-item-icon-color, #44739e); --state-color: var(--state-icon-color);
--ha-ripple-color: var(--state-color); --ha-ripple-color: var(--state-color);
--ha-ripple-hover-opacity: 0.04; --ha-ripple-hover-opacity: 0.04;
--ha-ripple-pressed-opacity: 0.12; --ha-ripple-pressed-opacity: 0.12;
@ -313,12 +313,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
ha-card:focus-visible { ha-card:focus-visible {
--shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
--shadow-focus: 0 0 0 1px --shadow-focus: 0 0 0 1px var(--state-color, var(--state-icon-color));
var(--state-color, var(--paper-item-icon-color, #44739e)); border-color: var(--state-color, var(--state-icon-color));
border-color: var(
--state-color,
var(--paper-item-icon-color, #44739e)
);
box-shadow: var(--shadow-default), var(--shadow-focus); box-shadow: var(--shadow-default), var(--shadow-focus);
} }

4
src/panels/lovelace/cards/hui-entity-card.ts
View File

@ -290,8 +290,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
} }
.icon { .icon {
color: var(--paper-item-icon-color, #44739e); color: var(--state-icon-color);
--state-inactive-color: var(--paper-item-icon-color, #44739e); --state-inactive-color: var(--state-icon-color);
line-height: 40px; line-height: 40px;
} }

2
src/panels/lovelace/cards/hui-error-card.ts
View File

@ -44,7 +44,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
static styles = css` static styles = css`
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
white-space: break-spaces; white-space: break-spaces;
user-select: text; user-select: text;
} }

2
src/panels/lovelace/cards/hui-glance-card.ts
View File

@ -199,7 +199,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.name { .name {
min-height: var(--paper-font-body1_-_line-height, 20px); min-height: var(--ha-line-height-normal);
} }
.warning { .warning {
cursor: default; cursor: default;

2
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -300,7 +300,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
} }
.light-button { .light-button {
color: var(--paper-item-icon-color, #44739e); color: var(--state-icon-color);
width: 60%; width: 60%;
height: auto; height: auto;
position: absolute; position: absolute;

15
src/panels/lovelace/cards/hui-plant-status-card.ts
View File

@ -178,14 +178,11 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
} }
.header { .header {
font-family: var(--paper-font-headline_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var( -webkit-font-smoothing: var(--ha-font-smoothing);
--paper-font-headline_-_-webkit-font-smoothing font-size: var(--ha-font-size-2xl);
); font-weight: var(--ha-font-weight-normal);
font-size: var(--paper-font-headline_-_font-size); line-height: var(--ha-line-height-condensed);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
line-height: 40px; line-height: 40px;
padding: 8px 16px; padding: 8px 16px;
@ -217,7 +214,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
ha-icon, ha-icon,
ha-svg-icon { ha-svg-icon {
color: var(--paper-item-icon-color); color: var(--state-icon-color);
} }
.attributes { .attributes {

2
src/panels/lovelace/heading-badges/hui-error-heading-badge.ts
View File

@ -78,7 +78,7 @@ export class HuiErrorHeadingBadge extends LitElement implements LovelaceBadge {
white-space: nowrap; white-space: nowrap;
} }
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--ha-font-family-code);
white-space: break-spaces; white-space: break-spaces;
user-select: text; user-select: text;
} }

2
src/panels/lovelace/special-rows/hui-button-row.ts
View File

@ -82,7 +82,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
} }
ha-state-icon { ha-state-icon {
padding: 8px; padding: 8px;
color: var(--paper-item-icon-color); color: var(--state-icon-color);
} }
.flex { .flex {
flex: 1; flex: 1;

2
src/panels/lovelace/special-rows/hui-cast-row.ts
View File

@ -126,7 +126,7 @@ class HuiCastRow extends LitElement implements LovelaceRow {
} }
ha-icon { ha-icon {
padding: 8px; padding: 8px;
color: var(--paper-item-icon-color); color: var(--state-icon-color);
} }
.flex { .flex {
flex: 1; flex: 1;

2
src/panels/lovelace/special-rows/hui-text-row.ts
View File

@ -34,7 +34,7 @@ class HuiTextRow extends LitElement implements LovelaceRow {
} }
ha-icon { ha-icon {
padding: 8px; padding: 8px;
color: var(--paper-item-icon-color); color: var(--state-icon-color);
} }
div { div {
flex: 1; flex: 1;

2
src/panels/lovelace/special-rows/hui-weblink-row.ts
View File

@ -49,7 +49,7 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
} }
ha-icon { ha-icon {
padding: 8px; padding: 8px;
color: var(--paper-item-icon-color); color: var(--state-icon-color);
} }
div { div {
flex: 1; flex: 1;

2
src/resources/codemirror.ts
View File

@ -191,7 +191,7 @@ export const haTheme = EditorView.theme({
".cm-gutters": { ".cm-gutters": {
backgroundColor: backgroundColor:
"var(--code-editor-gutter-color, var(--secondary-background-color, whitesmoke))", "var(--code-editor-gutter-color, var(--secondary-background-color, whitesmoke))",
color: "var(--paper-dialog-color, var(--secondary-text-color))", color: "var(--secondary-text-color)",
border: "none", border: "none",
borderRight: "1px solid var(--secondary-text-color)", borderRight: "1px solid var(--secondary-text-color)",
paddingRight: "1px", paddingRight: "1px",

169
src/resources/ha-style.ts
View File

@ -11,7 +11,25 @@ const mainStyles = css`
Home Assistant default styles. Home Assistant default styles.
*/ */
html { html {
/* typography */
--ha-font-family-body: Roboto, Noto, sans-serif;
--ha-font-family-code: monospace;
--ha-font-family-longform: ui-sans-serif, system-ui, sans-serif;
font-size: 14px; font-size: 14px;
--ha-font-size-scale: 1;
--ha-font-weight-light: 300;
--ha-font-weight-normal: 400;
--ha-font-weight-semibold: 500;
--ha-font-weight-bold: 600;
--ha-line-height-condensed: 1.2;
--ha-line-height-normal: 1.6;
--ha-line-height-expanded: 2;
--ha-font-smoothing: antialiased;
height: 100vh; height: 100vh;
/* text */ /* text */
@ -47,10 +65,6 @@ const mainStyles = css`
--header-height: 56px; --header-height: 56px;
/* for label-badge */ /* for label-badge */
--label-badge-red: var(--error-color);
--label-badge-blue: var(--info-color);
--label-badge-green: var(--success-color);
--label-badge-yellow: var(--warning-color);
--label-badge-grey: #9e9e9e; --label-badge-grey: #9e9e9e;
/* states icon */ /* states icon */
@ -114,80 +128,8 @@ const mainStyles = css`
--black-color: #000000; --black-color: #000000;
--white-color: #ffffff; --white-color: #ffffff;
/* state color */
--state-active-color: var(--amber-color);
--state-inactive-color: var(--grey-color);
--state-unavailable-color: var(--disabled-color);
/* state domain colors */
--state-alarm_control_panel-armed_away-color: var(--green-color);
--state-alarm_control_panel-armed_custom_bypass-color: var(--green-color);
--state-alarm_control_panel-armed_home-color: var(--green-color);
--state-alarm_control_panel-armed_night-color: var(--green-color);
--state-alarm_control_panel-armed_vacation-color: var(--green-color);
--state-alarm_control_panel-arming-color: var(--orange-color);
--state-alarm_control_panel-disarming-color: var(--orange-color);
--state-alarm_control_panel-pending-color: var(--orange-color);
--state-alarm_control_panel-triggered-color: var(--red-color);
--state-alert-off-color: var(--orange-color);
--state-alert-on-color: var(--red-color);
--state-binary_sensor-active-color: var(--amber-color);
--state-binary_sensor-battery-on-color: var(--red-color);
--state-binary_sensor-carbon_monoxide-on-color: var(--red-color);
--state-binary_sensor-gas-on-color: var(--red-color);
--state-binary_sensor-heat-on-color: var(--red-color);
--state-binary_sensor-lock-on-color: var(--red-color);
--state-binary_sensor-moisture-on-color: var(--red-color);
--state-binary_sensor-problem-on-color: var(--red-color);
--state-binary_sensor-safety-on-color: var(--red-color);
--state-binary_sensor-smoke-on-color: var(--red-color);
--state-binary_sensor-sound-on-color: var(--red-color);
--state-binary_sensor-tamper-on-color: var(--red-color);
--state-climate-auto-color: var(--green-color);
--state-climate-cool-color: var(--blue-color);
--state-climate-dry-color: var(--orange-color);
--state-climate-fan_only-color: var(--cyan-color);
--state-climate-heat-color: var(--deep-orange-color);
--state-climate-heat-cool-color: var(--amber-color);
--state-cover-active-color: var(--purple-color);
--state-device_tracker-active-color: var(--blue-color);
--state-device_tracker-home-color: var(--green-color);
--state-fan-active-color: var(--cyan-color);
--state-humidifier-on-color: var(--blue-color);
--state-lawn_mower-error-color: var(--red-color);
--state-lawn_mower-mowing-color: var(--teal-color);
--state-light-active-color: var(--amber-color);
--state-lock-jammed-color: var(--red-color);
--state-lock-locked-color: var(--green-color);
--state-lock-locking-color: var(--orange-color);
--state-lock-unlocked-color: var(--red-color);
--state-lock-unlocking-color: var(--orange-color);
--state-lock-open-color: var(--red-color);
--state-lock-opening-color: var(--orange-color);
--state-media_player-active-color: var(--light-blue-color);
--state-person-active-color: var(--blue-color);
--state-person-home-color: var(--green-color);
--state-plant-active-color: var(--red-color);
--state-siren-active-color: var(--red-color);
--state-sun-above_horizon-color: var(--amber-color);
--state-sun-below_horizon-color: var(--indigo-color);
--state-switch-active-color: var(--amber-color);
--state-update-active-color: var(--orange-color);
--state-vacuum-active-color: var(--teal-color);
--state-valve-active-color: var(--blue-color);
--state-sensor-battery-high-color: var(--green-color);
--state-sensor-battery-low-color: var(--red-color);
--state-sensor-battery-medium-color: var(--orange-color);
--state-water_heater-eco-color: var(--green-color);
--state-water_heater-electric-color: var(--orange-color);
--state-water_heater-gas-color: var(--orange-color);
--state-water_heater-heat_pump-color: var(--orange-color);
--state-water_heater-high_demand-color: var(--deep-orange-color);
--state-water_heater-performance-color: var(--deep-orange-color);
/* history colors */ /* history colors */
--history-unavailable-color: transparent; --history-unavailable-color: transparent;
--history-unknown-color: var(--dark-grey-color);
/* input components */ /* input components */
--input-idle-line-color: rgba(0, 0, 0, 0.42); --input-idle-line-color: rgba(0, 0, 0, 0.42);
@ -203,81 +145,6 @@ const mainStyles = css`
--input-disabled-ink-color: rgba(0, 0, 0, 0.37); --input-disabled-ink-color: rgba(0, 0, 0, 0.37);
--input-dropdown-icon-color: rgba(0, 0, 0, 0.54); --input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
/* Vaadin typography */
--material-h6-font-size: 1.25rem;
--material-small-font-size: 0.875rem;
--material-caption-font-size: 0.75rem;
--material-button-font-size: 0.875rem;
/* Paper typography Styles */
--paper-font-common-base_-_font-family: Roboto, Noto, sans-serif;
--paper-font-common-base_-_-webkit-font-smoothing: antialiased;
--paper-font-common-code_-_font-family:
"Roboto Mono", Consolas, Menlo, monospace;
--paper-font-common-code_-_-webkit-font-smoothing: antialiased;
--paper-font-common-nowrap_-_white-space: nowrap;
--paper-font-common-nowrap_-_overflow: hidden;
--paper-font-common-nowrap_-_text-overflow: ellipsis;
--paper-font-display1_-_font-family: var(
--paper-font-common-base_-_font-family
);
--paper-font-display1_-_-webkit-font-smoothing: var(
--paper-font-common-base_-_-webkit-font-smoothing
);
--paper-font-display1_-_font-size: 34px;
--paper-font-display1_-_font-weight: 400;
--paper-font-display1_-_letter-spacing: -0.01em;
--paper-font-display1_-_line-height: 40px;
--paper-font-headline_-_font-family: var(
--paper-font-common-base_-_font-family
);
--paper-font-headline_-_-webkit-font-smoothing: var(
--paper-font-common-base_-_-webkit-font-smoothing
);
--paper-font-headline_-_font-size: 24px;
--paper-font-headline_-_font-weight: 400;
--paper-font-headline_-_letter-spacing: -0.012em;
--paper-font-headline_-_line-height: 32px;
--paper-font-title_-_font-family: var(
--paper-font-common-base_-_font-family
);
--paper-font-title_-_-webkit-font-smoothing: var(
--paper-font-common-base_-_-webkit-font-smoothing
);
--paper-font-title_-_white-space: var(
--paper-font-common-nowrap_-_white-space
);
--paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow);
--paper-font-title_-_text-overflow: var(
--paper-font-common-nowrap_-_text-overflow
);
--paper-font-title_-_font-size: 20px;
--paper-font-title_-_font-weight: 500;
--paper-font-title_-_line-height: 28px;
--paper-font-subhead_-_font-family: var(
--paper-font-common-base_-_font-family
);
--paper-font-subhead_-_-webkit-font-smoothing: var(
--paper-font-common-base_-_-webkit-font-smoothing
);
--paper-font-subhead_-_font-size: 16px;
--paper-font-subhead_-_font-weight: 400;
--paper-font-subhead_-_line-height: 24px;
--paper-font-body1_-_font-family: var(
--paper-font-common-base_-_font-family
);
--paper-font-body1_-_-webkit-font-smoothing: var(
--paper-font-common-base_-_-webkit-font-smoothing
);
--paper-font-body1_-_font-size: 14px;
--paper-font-body1_-_font-weight: 400;
--paper-font-body1_-_line-height: 20px;
direction: ltr; direction: ltr;
--direction: ltr; --direction: ltr;
--float-start: left; --float-start: left;

104
src/resources/styles-data.ts
View File

@ -57,9 +57,110 @@ export const darkStyles = {
} as const; } as const;
export const derivedStyles = { export const derivedStyles = {
"state-icon-error-color": "var(--error-state-color, var(--error-color))", /* typography */
"ha-font-size-xs": "calc(10px * var(--ha-font-size-scale))",
"ha-font-size-s": "calc(12px * var(--ha-font-size-scale))",
"ha-font-size-m": "calc(14px * var(--ha-font-size-scale))",
"ha-font-size-l": "calc(16px * var(--ha-font-size-scale))",
"ha-font-size-xl": "calc(20px * var(--ha-font-size-scale))",
"ha-font-size-2xl": "calc(24px * var(--ha-font-size-scale))",
"ha-font-size-3xl": "calc(28px * var(--ha-font-size-scale))",
"ha-font-size-4xl": "calc(32px * var(--ha-font-size-scale))",
"ha-font-size-5xl": "calc(40px * var(--ha-font-size-scale))",
"ha-font-family-heading": "var(--ha-font-family-body)",
"ha-font-weight-body": "var(--ha-font-weight-normal)",
"ha-font-weight-heading": "var(--ha-font-weight-bold)",
"ha-font-weight-action": "var(--ha-font-weight-semibold)",
/* 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)",
/* for label-badge */
"label-badge-red": "var(--error-color)",
"label-badge-blue": "var(--info-color)",
"label-badge-green": "var(--success-color)",
"label-badge-yellow": "var(--warning-color)",
/* state color */
"state-active-color": "var(--amber-color)",
"state-inactive-color": "var(--grey-color)",
"state-unavailable-color": "state-unavailable-color":
"var(--state-icon-unavailable-color, var(--disabled-text-color))", "var(--state-icon-unavailable-color, var(--disabled-text-color))",
/* state domain colors */
"state-alarm_control_panel-armed_away-color": "var(--green-color)",
"state-alarm_control_panel-armed_custom_bypass-color": "var(--green-color)",
"state-alarm_control_panel-armed_home-color": "var(--green-color)",
"state-alarm_control_panel-armed_night-color": "var(--green-color)",
"state-alarm_control_panel-armed_vacation-color": "var(--green-color)",
"state-alarm_control_panel-arming-color": "var(--orange-color)",
"state-alarm_control_panel-disarming-color": "var(--orange-color)",
"state-alarm_control_panel-pending-color": "var(--orange-color)",
"state-alarm_control_panel-triggered-color": "var(--red-color)",
"state-alert-off-color": "var(--orange-color)",
"state-alert-on-color": "var(--red-color)",
"state-binary_sensor-active-color": "var(--amber-color)",
"state-binary_sensor-battery-on-color": "var(--red-color)",
"state-binary_sensor-carbon_monoxide-on-color": "var(--red-color)",
"state-binary_sensor-gas-on-color": "var(--red-color)",
"state-binary_sensor-heat-on-color": "var(--red-color)",
"state-binary_sensor-lock-on-color": "var(--red-color)",
"state-binary_sensor-moisture-on-color": "var(--red-color)",
"state-binary_sensor-problem-on-color": "var(--red-color)",
"state-binary_sensor-safety-on-color": "var(--red-color)",
"state-binary_sensor-smoke-on-color": "var(--red-color)",
"state-binary_sensor-sound-on-color": "var(--red-color)",
"state-binary_sensor-tamper-on-color": "var(--red-color)",
"state-climate-auto-color": "var(--green-color)",
"state-climate-cool-color": "var(--blue-color)",
"state-climate-dry-color": "var(--orange-color)",
"state-climate-fan_only-color": "var(--cyan-color)",
"state-climate-heat-color": "var(--deep-orange-color)",
"state-climate-heat-cool-color": "var(--amber-color)",
"state-cover-active-color": "var(--purple-color)",
"state-device_tracker-active-color": "var(--blue-color)",
"state-device_tracker-home-color": "var(--green-color)",
"state-fan-active-color": "var(--cyan-color)",
"state-humidifier-on-color": "var(--blue-color)",
"state-lawn_mower-error-color": "var(--red-color)",
"state-lawn_mower-mowing-color": "var(--teal-color)",
"state-light-active-color": "var(--amber-color)",
"state-lock-jammed-color": "var(--red-color)",
"state-lock-locked-color": "var(--green-color)",
"state-lock-locking-color": "var(--orange-color)",
"state-lock-unlocked-color": "var(--red-color)",
"state-lock-unlocking-color": "var(--orange-color)",
"state-lock-open-color": "var(--red-color)",
"state-lock-opening-color": "var(--orange-color)",
"state-media_player-active-color": "var(--light-blue-color)",
"state-person-active-color": "var(--blue-color)",
"state-person-home-color": "var(--green-color)",
"state-plant-active-color": "var(--red-color)",
"state-siren-active-color": "var(--red-color)",
"state-sun-above_horizon-color": "var(--amber-color)",
"state-sun-below_horizon-color": "var(--indigo-color)",
"state-switch-active-color": "var(--amber-color)",
"state-update-active-color": "var(--orange-color)",
"state-vacuum-active-color": "var(--teal-color)",
"state-valve-active-color": "var(--blue-color)",
"state-sensor-battery-high-color": "var(--green-color)",
"state-sensor-battery-low-color": "var(--red-color)",
"state-sensor-battery-medium-color": "var(--orange-color)",
"state-water_heater-eco-color": "var(--green-color)",
"state-water_heater-electric-color": "var(--orange-color)",
"state-water_heater-gas-color": "var(--orange-color)",
"state-water_heater-heat_pump-color": "var(--orange-color)",
"state-water_heater-high_demand-color": "var(--deep-orange-color)",
"state-water_heater-performance-color": "var(--deep-orange-color)",
/* history colors */
"history-unknown-color": "var(--dark-grey-color)",
"state-icon-error-color": "var(--error-state-color, var(--error-color))",
"sidebar-text-color": "var(--primary-text-color)", "sidebar-text-color": "var(--primary-text-color)",
"sidebar-background-color": "var(--card-background-color)", "sidebar-background-color": "var(--card-background-color)",
"sidebar-selected-text-color": "var(--primary-color)", "sidebar-selected-text-color": "var(--primary-color)",
@ -78,7 +179,6 @@ export const derivedStyles = {
"label-badge-background-color": "var(--card-background-color)", "label-badge-background-color": "var(--card-background-color)",
"label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)", "label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)",
"paper-listbox-background-color": "var(--card-background-color)", "paper-listbox-background-color": "var(--card-background-color)",
"paper-item-icon-color": "var(--state-icon-color)",
"paper-item-icon-active-color": "var(--state-icon-active-color)", "paper-item-icon-active-color": "var(--state-icon-active-color)",
"table-header-background-color": "var(--input-fill-color)", "table-header-background-color": "var(--input-fill-color)",
"table-row-background-color": "var(--primary-background-color)", "table-row-background-color": "var(--primary-background-color)",

52
src/resources/styles.ts
View File

@ -16,11 +16,11 @@ export const buttonLinkStyle = css`
export const haStyle = css` export const haStyle = css`
:host { :host {
font-family: var(--paper-font-body1_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing); -webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--paper-font-body1_-_font-size); font-size: var(--ha-font-size-m);
font-weight: var(--paper-font-body1_-_font-weight); font-weight: var(--ha-font-weight-normal);
line-height: var(--paper-font-body1_-_line-height); line-height: var(--ha-line-height-normal);
} }
app-header div[sticky] { app-header div[sticky] {
@ -34,36 +34,30 @@ export const haStyle = css`
} }
h1 { h1 {
font-family: var(--paper-font-headline_-_font-family); font-family: var(--ha-font-family-heading);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); -webkit-font-smoothing: var(--ha-font-smoothing);
white-space: var(--paper-font-headline_-_white-space); font-size: var(--ha-font-size-2xl);
overflow: var(--paper-font-headline_-_overflow); font-weight: var(--ha-font-weight-normal);
text-overflow: var(--paper-font-headline_-_text-overflow); line-height: var(--ha-line-height-condensed);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
line-height: var(--paper-font-headline_-_line-height);
} }
h2 { h2 {
font-family: var(--paper-font-title_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing); -webkit-font-smoothing: var(--ha-font-smoothing);
white-space: var(--paper-font-title_-_white-space); white-space: nowrap;
overflow: var(--paper-font-title_-_overflow); overflow: hidden;
text-overflow: var(--paper-font-title_-_text-overflow); text-overflow: ellipsis;
font-size: var(--paper-font-title_-_font-size); font-size: var(--ha-font-size-xl);
font-weight: var(--paper-font-title_-_font-weight); font-weight: var(--ha-font-weight-semibold);
line-height: var(--paper-font-title_-_line-height); line-height: var(--ha-line-height-normal);
} }
h3 { h3 {
font-family: var(--paper-font-subhead_-_font-family); font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); -webkit-font-smoothing: var(--ha-font-smoothing);
white-space: var(--paper-font-subhead_-_white-space); font-size: var(--ha-font-size-l);
overflow: var(--paper-font-subhead_-_overflow); font-weight: var(--ha-font-weight-normal);
text-overflow: var(--paper-font-subhead_-_text-overflow); line-height: var(--ha-line-height-normal);
font-size: var(--paper-font-subhead_-_font-size);
font-weight: var(--paper-font-subhead_-_font-weight);
line-height: var(--paper-font-subhead_-_line-height);
} }
a { a {