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

Add typography tokens (#25084)

pull/25142/head^2
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 = () => ({
"text-primary-color": "var(--primary-text-color)",
"paper-item-icon-color": "var(--primary-text-color)",
"primary-color": "#5294E2",
"label-badge-red": "var(--accent-color)",
"light-primary-color": "var(--accent-color)",
@ -12,8 +11,7 @@ export const demoThemeJimpower = () => ({
"paper-item-icon_-_color": "green",
"paper-grey-200": "#414A59",
"label-badge-background-color": "#2E333A",
"paper-card-header-color": "var(--accent-color)",
"sidebar-icon-color": "var(--paper-item-icon-color)",
"sidebar-icon-color": "var(--state-icon-color)",
"paper-listbox-background-color": "#2E333A",
"table-row-background-color": "#353840",
"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
export const demoThemeKernehed = () => ({
"text-primary-color": "var(--primary-text-color)",
"paper-item-icon-color": "var(--primary-text-color)",
"primary-color": "#2980b9",
"label-badge-red": "var(--accent-color)",
"primary-text-color": "#FFFFFF",
@ -14,7 +13,6 @@ export const demoThemeKernehed = () => ({
"paper-item-icon_-_color": "green",
"paper-grey-200": "#222222",
"label-badge-background-color": "#222222",
"paper-card-header-color": "var(--accent-color)",
"paper-listbox-background-color": "#141414",
"table-row-background-color": "#292929",
"paper-grey-50": "var(--primary-text-color)",

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

@ -1,8 +1,6 @@
export const demoThemeTeachingbirds = () => ({
"paper-card-header-color": "var(--paper-item-icon-color)",
"paper-listbox-background-color": "#202020",
"paper-grey-50": "var(--primary-text-color)",
"paper-item-icon-color": "#d3d3d3",
"divider-color": "rgba(255, 255, 255, 0.12)",
"primary-color": "#389638",
"light-primary-color": "#6f956f",
@ -13,7 +11,7 @@ export const demoThemeTeachingbirds = () => ({
"card-background-color": "#4e4e4e",
"label-badge-text-color": "var(--text-primary-color)",
"primary-background-color": "#303030",
"sidebar-icon-color": "var(--paper-item-icon-color)",
"sidebar-icon-color": "#d3d3d3",
"secondary-background-color": "#2b2b2b",
"paper-item-icon-active-color": "#d8bf50",
"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 {
padding: 8px;
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
}
.flex {
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`
ha-settings-row {
--paper-item-body-two-line-min-height: 0;
}
.options {
max-width: 800px;
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
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>
@ -28,3 +28,7 @@ In your theme settings use this without the prefixed `--`.
- `--ha-tooltip-border-radius` (Default: 4px)
- `--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.backup {
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
}
ha-svg-icon.not_available {
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);
}
.update-heading {
font-size: var(--paper-font-subhead_-_font-size);
font-size: var(--ha-font-size-l);
font-weight: 500;
margin-bottom: 0.5em;
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;
overflow: auto;
line-height: 1.45;
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
}
code {
font-size: 85%;

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

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

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

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

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

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

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

@ -163,7 +163,6 @@ export class HaNetwork extends LitElement {
ha-settings-row {
padding: 0;
--paper-time-input-justify-content: flex-end;
--settings-row-content-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);
}
ha-settings-row {
--paper-time-input-justify-content: flex-end;
--settings-row-content-width: 100%;
--settings-row-prefix-display: contents;
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);
}
.body[three-line] {
min-height: var(--paper-item-body-three-line-min-height, 88px);
min-height: 88px;
}
:host(:not([wrap-heading])) body > * {
overflow: hidden;
@ -75,7 +75,7 @@ export class HaSettingsRow extends LitElement {
color: var(--secondary-text-color);
}
.body[two-line] {
min-height: calc(var(--paper-item-body-two-line-min-height, 72px) - 16px);
min-height: calc(72px - 16px);
flex: 1;
}
.content {

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

@ -22,10 +22,22 @@ export class HaTooltip extends SlTooltip {
:host {
--sl-tooltip-background-color: var(--secondary-background-color);
--sl-tooltip-color: var(--primary-text-color);
--sl-tooltip-font-family: Roboto, sans-serif;
--sl-tooltip-font-size: 12px;
--sl-tooltip-font-weight: normal;
--sl-tooltip-line-height: 1;
--sl-tooltip-font-family: var(
--ha-tooltip-font-family,
var(--ha-font-family-body)
);
--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-border-radius: var(--ha-tooltip-border-radius, 4px);
--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-font-weight-semibold: 500;
--sl-font-size-small: 14px;
--sl-font-weight-semibold: var(--ha-font-weight-semibold);
--sl-font-size-small: var(--ha-font-size-m);
--sl-color-primary-600: var(
--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,
css`
ha-svg-icon {
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
margin-left: 8px;
margin-inline-start: 8px;
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 {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
color: var(--primary-text-color);
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 {
font-family: var(--paper-font-common-base_-_font-family);
font-family: var(--ha-font-family-body);
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);
}
ha-settings-row {
--paper-time-input-justify-content: flex-end;
--settings-row-content-width: 100%;
--settings-row-prefix-display: contents;
border-top: var(

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

@ -1450,10 +1450,12 @@ ${rejected
--data-table-row-height: 72px;
}
.empty {
--paper-font-headline_-_font-size: 28px;
--mdc-icon-size: 80px;
max-width: 500px;
}
.empty h1 {
font-size: var(--ha-font-size-3xl);
}
ha-assist-chip {
--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;
}
ha-settings-row {
--paper-time-input-justify-content: flex-end;
--settings-row-content-width: 100%;
--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;
padding: 0 16px;
cursor: pointer;
--paper-item-icon-width: 48px;
}
.name {
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-inline-start: 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-inline-start: 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 {
margin: 0;
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
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 {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
opacity: var(--dark-primary-opacity);
}
@ -77,12 +74,10 @@ export class HaConfigSection extends LitElement {
}
.intro {
font-family: var(--paper-font-subhead_-_font-family);
-webkit-font-smoothing: var(
--paper-font-subhead_-_-webkit-font-smoothing
);
font-weight: var(--paper-font-subhead_-_font-weight);
line-height: var(--paper-font-subhead_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-normal);
width: 100%;
opacity: var(--dark-primary-opacity);
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;
overflow: auto;
line-height: 1.45;
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
}
code {
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);
}
pre {
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
}
.panel-dev-mqtt-subscribe-fields {
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 [
css`
.header {
font-family: var(--paper-font-display1_-_font-family);
-webkit-font-smoothing: var(
--paper-font-display1_-_-webkit-font-smoothing
);
font-size: var(--paper-font-display1_-_font-size);
font-weight: var(--paper-font-display1_-_font-weight);
letter-spacing: var(--paper-font-display1_-_letter-spacing);
line-height: var(--paper-font-display1_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-4xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
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-inline-start: 0;
padding-inline-end: 0;
--paper-item-body-two-line-min-height: 55px;
}
.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);
}
.header {
font-family: var(--paper-font-display1_-_font-family);
-webkit-font-smoothing: var(
--paper-font-display1_-_-webkit-font-smoothing
);
font-size: var(--paper-font-display1_-_font-size);
font-weight: var(--paper-font-display1_-_font-weight);
letter-spacing: var(--paper-font-display1_-_letter-spacing);
line-height: var(--paper-font-display1_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-4xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
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 {
--settings-row-prefix-display: contents;
--settings-row-content-width: 100%;
--paper-time-input-justify-content: flex-end;
border-top: 1px solid var(--divider-color);
padding: 4px 16px;
}

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

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

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

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

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

@ -1197,10 +1197,12 @@ ${rejected
text-decoration: none;
}
.empty {
--paper-font-headline_-_font-size: 28px;
--mdc-icon-size: 80px;
max-width: 500px;
}
.empty h1 {
font-size: var(--ha-font-size-3xl);
}
ha-assist-chip {
--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;
}
.empty {
--paper-font-headline_-_font-size: 28px;
--mdc-icon-size: 80px;
max-width: 500px;
}
.empty h1 {
font-size: var(--ha-font-size-3xl);
}
ha-assist-chip {
--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;
}
pre {
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
}
ha-card {
margin-bottom: 5px;

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

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

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

@ -284,9 +284,8 @@ ${type === "object"
.content.horizontal {
--code-mirror-max-height: calc(
100vh - var(--header-height) -
(var(--paper-font-body1_-_line-height) * 3) - (1em * 2) -
(max(16px, env(safe-area-inset-top)) * 2) -
100vh - var(--header-height) - (var(--ha-line-height-normal) * 3) -
(1em * 2) - (max(16px, env(safe-area-inset-top)) * 2) -
(max(16px, env(safe-area-inset-bottom)) * 2) -
(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 {
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
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;
}
pre {
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
white-space: break-spaces;
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,
css`
ha-card {
--state-inactive-color: var(--paper-item-icon-color, #44739e);
--state-color: var(--paper-item-icon-color, #44739e);
--state-inactive-color: var(--state-icon-color);
--state-color: var(--state-icon-color);
--ha-ripple-color: var(--state-color);
--ha-ripple-hover-opacity: 0.04;
--ha-ripple-pressed-opacity: 0.12;
@ -313,12 +313,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
ha-card:focus-visible {
--shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
--shadow-focus: 0 0 0 1px
var(--state-color, var(--paper-item-icon-color, #44739e));
border-color: var(
--state-color,
var(--paper-item-icon-color, #44739e)
);
--shadow-focus: 0 0 0 1px var(--state-color, var(--state-icon-color));
border-color: var(--state-color, var(--state-icon-color));
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 {
color: var(--paper-item-icon-color, #44739e);
--state-inactive-color: var(--paper-item-icon-color, #44739e);
color: var(--state-icon-color);
--state-inactive-color: var(--state-icon-color);
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`
pre {
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
white-space: break-spaces;
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;
}
.name {
min-height: var(--paper-font-body1_-_line-height, 20px);
min-height: var(--ha-line-height-normal);
}
.warning {
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 {
color: var(--paper-item-icon-color, #44739e);
color: var(--state-icon-color);
width: 60%;
height: auto;
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 {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
line-height: 40px;
padding: 8px 16px;
@ -217,7 +214,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
ha-icon,
ha-svg-icon {
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
}
.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;
}
pre {
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
white-space: break-spaces;
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 {
padding: 8px;
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
}
.flex {
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 {
padding: 8px;
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
}
.flex {
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 {
padding: 8px;
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
}
div {
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 {
padding: 8px;
color: var(--paper-item-icon-color);
color: var(--state-icon-color);
}
div {
flex: 1;

2
src/resources/codemirror.ts
View File

@ -191,7 +191,7 @@ export const haTheme = EditorView.theme({
".cm-gutters": {
backgroundColor:
"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",
borderRight: "1px solid var(--secondary-text-color)",
paddingRight: "1px",

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

@ -11,7 +11,25 @@ const mainStyles = css`
Home Assistant default styles.
*/
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;
--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;
/* text */
@ -47,10 +65,6 @@ const mainStyles = css`
--header-height: 56px;
/* 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;
/* states icon */
@ -114,80 +128,8 @@ const mainStyles = css`
--black-color: #000000;
--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-unavailable-color: transparent;
--history-unknown-color: var(--dark-grey-color);
/* input components */
--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-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;
--float-start: left;

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

@ -57,9 +57,110 @@ export const darkStyles = {
} as const;
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":
"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-background-color": "var(--card-background-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-text-color": "rgba(var(--rgb-primary-text-color), 0.8)",
"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)",
"table-header-background-color": "var(--input-fill-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`
:host {
font-family: var(--paper-font-body1_-_font-family);
-webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);
font-size: var(--paper-font-body1_-_font-size);
font-weight: var(--paper-font-body1_-_font-weight);
line-height: var(--paper-font-body1_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-normal);
}
app-header div[sticky] {
@ -34,36 +34,30 @@ export const haStyle = css`
}
h1 {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
white-space: var(--paper-font-headline_-_white-space);
overflow: var(--paper-font-headline_-_overflow);
text-overflow: var(--paper-font-headline_-_text-overflow);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
line-height: var(--paper-font-headline_-_line-height);
font-family: var(--ha-font-family-heading);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
}
h2 {
font-family: var(--paper-font-title_-_font-family);
-webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing);
white-space: var(--paper-font-title_-_white-space);
overflow: var(--paper-font-title_-_overflow);
text-overflow: var(--paper-font-title_-_text-overflow);
font-size: var(--paper-font-title_-_font-size);
font-weight: var(--paper-font-title_-_font-weight);
line-height: var(--paper-font-title_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-semibold);
line-height: var(--ha-line-height-normal);
}
h3 {
font-family: var(--paper-font-subhead_-_font-family);
-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
white-space: var(--paper-font-subhead_-_white-space);
overflow: var(--paper-font-subhead_-_overflow);
text-overflow: var(--paper-font-subhead_-_text-overflow);
font-size: var(--paper-font-subhead_-_font-size);
font-weight: var(--paper-font-subhead_-_font-weight);
line-height: var(--paper-font-subhead_-_line-height);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-normal);
}
a {