diff --git a/demo/src/configs/jimpower/theme.ts b/demo/src/configs/jimpower/theme.ts index 4763713f61..8ea96ad541 100644 --- a/demo/src/configs/jimpower/theme.ts +++ b/demo/src/configs/jimpower/theme.ts @@ -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)", diff --git a/demo/src/configs/kernehed/theme.ts b/demo/src/configs/kernehed/theme.ts index 6cfaafbf25..a966595043 100644 --- a/demo/src/configs/kernehed/theme.ts +++ b/demo/src/configs/kernehed/theme.ts @@ -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)", diff --git a/demo/src/configs/teachingbirds/theme.ts b/demo/src/configs/teachingbirds/theme.ts index f61654406c..b042a27c32 100644 --- a/demo/src/configs/teachingbirds/theme.ts +++ b/demo/src/configs/teachingbirds/theme.ts @@ -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)", diff --git a/demo/src/custom-cards/cast-demo-row.ts b/demo/src/custom-cards/cast-demo-row.ts index 86bf51035b..706ccc752e 100644 --- a/demo/src/custom-cards/cast-demo-row.ts +++ b/demo/src/custom-cards/cast-demo-row.ts @@ -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; diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index dfb1f4a848..0f50f6421f 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -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; diff --git a/gallery/src/pages/components/ha-tooltip.markdown b/gallery/src/pages/components/ha-tooltip.markdown index 830335983e..69e0e99e60 100644 --- a/gallery/src/pages/components/ha-tooltip.markdown +++ b/gallery/src/pages/components/ha-tooltip.markdown @@ -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. Shoelace documentation @@ -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)`) diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index dc40207d98..21027a1007 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -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); diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts index 4c0a436662..369a80101d 100644 --- a/hassio/src/dashboard/hassio-update.ts +++ b/hassio/src/dashboard/hassio-update.ts @@ -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); diff --git a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts index 0e7910d548..679014604f 100644 --- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts +++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts @@ -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%; diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts index 8bfd9f30c6..1337e51d48 100644 --- a/hassio/src/resources/hassio-style.ts +++ b/hassio/src/resources/hassio-style.ts @@ -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; diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index d1bcce76cc..dc365bd8fa 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -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; diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index 14d26fa2cd..c6eccf6190 100644 --- a/src/components/ha-markdown.ts +++ b/src/components/ha-markdown.ts @@ -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, diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts index 00c8f521c7..5ad2a025f8 100644 --- a/src/components/ha-network.ts +++ b/src/components/ha-network.ts @@ -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; } diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts index 85cbfd843e..2c3965f56a 100644 --- a/src/components/ha-service-control.ts +++ b/src/components/ha-service-control.ts @@ -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( diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index 3a2fbefa73..1f9770a1e7 100644 --- a/src/components/ha-settings-row.ts +++ b/src/components/ha-settings-row.ts @@ -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 { diff --git a/src/components/ha-tooltip.ts b/src/components/ha-tooltip.ts index 9b4afa5cd4..0b6037a5bc 100644 --- a/src/components/ha-tooltip.ts +++ b/src/components/ha-tooltip.ts @@ -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); diff --git a/src/components/sl-tab-group.ts b/src/components/sl-tab-group.ts index c52d5bc79d..df24acbedb 100644 --- a/src/components/sl-tab-group.ts +++ b/src/components/sl-tab-group.ts @@ -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, diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 3b245c601c..2ccd6c22d3 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -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; diff --git a/src/dialogs/notifications/notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts index d1b90c723b..b12c8ff73d 100644 --- a/src/dialogs/notifications/notification-item-template.ts +++ b/src/dialogs/notifications/notification-item-template.ts @@ -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; diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 9df628d11f..b2cd0e3c0d 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -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"; } diff --git a/src/panels/config/automation/action/types/ha-automation-action-service.ts b/src/panels/config/automation/action/types/ha-automation-action-service.ts index 4d6f61643b..fa431c2f50 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-service.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-service.ts @@ -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( diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 23a9a4612c..034fc12695 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -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; } diff --git a/src/panels/config/blueprint/blueprint-generic-editor.ts b/src/panels/config/blueprint/blueprint-generic-editor.ts index 840f7f1946..97d6ad7442 100644 --- a/src/panels/config/blueprint/blueprint-generic-editor.ts +++ b/src/panels/config/blueprint/blueprint-generic-editor.ts @@ -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; } diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts index 46f08c8fd7..39c480bcb2 100644 --- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts @@ -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; diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts index 9cce42676b..f791418a59 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts @@ -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); } `; } diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts index 7cd8134e60..a26e12f337 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts @@ -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); } `; } diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index bdbe446237..726d314042 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -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); } diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts index d0b95d4f62..c21d18e103 100644 --- a/src/panels/config/ha-config-section.ts +++ b/src/panels/config/ha-config-section.ts @@ -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; diff --git a/src/panels/config/hardware/dialog-hardware-available.ts b/src/panels/config/hardware/dialog-hardware-available.ts index 328374f579..36da289ccc 100644 --- a/src/panels/config/hardware/dialog-hardware-available.ts +++ b/src/panels/config/hardware/dialog-hardware-available.ts @@ -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%; diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts index 7f4e0c327c..b9c917dea7 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts @@ -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; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index 5b7945a2e1..11f7d077d1 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -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); } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts index 0963a19b99..146c5b97a7 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts @@ -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"] { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts index 3c6feff3bc..c1c95f6763 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts @@ -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); } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts index b015e44d22..6b71cc608d 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts @@ -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; } diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index f12051b04f..a3127bd5c7 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/src/panels/config/logs/dialog-system-log-detail.ts @@ -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; diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index f319fc08e8..183673c15f 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -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; diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 357e4667ee..01b2112f64 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -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; } diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index f29be8225e..075addce47 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -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; } diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts index fb429b8a83..32b2cb98d0 100644 --- a/src/panels/developer-tools/event/event-subscribe-card.ts +++ b/src/panels/developer-tools/event/event-subscribe-card.ts @@ -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; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 8d42e69405..ca7c56c845 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -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; } diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index d3b0bb825d..dc9fc7b6e5 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -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 ); diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts index 9bf41caf3e..ae391ca7ec 100644 --- a/src/panels/logbook/ha-logbook-renderer.ts +++ b/src/panels/logbook/ha-logbook-renderer.ts @@ -682,7 +682,7 @@ class HaLogbookRenderer extends LitElement { } button.link { - color: var(--paper-item-icon-color); + color: var(--state-icon-color); text-decoration: none; } diff --git a/src/panels/lovelace/badges/hui-error-badge.ts b/src/panels/lovelace/badges/hui-error-badge.ts index 329819a6d0..554af6a606 100644 --- a/src/panels/lovelace/badges/hui-error-badge.ts +++ b/src/panels/lovelace/badges/hui-error-badge.ts @@ -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; } diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 987048fce9..068f8e3866 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -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); } diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index 178121b03a..6a099d0ba1 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -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; } diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts index 59efd46c74..d2b0ae05b8 100644 --- a/src/panels/lovelace/cards/hui-error-card.ts +++ b/src/panels/lovelace/cards/hui-error-card.ts @@ -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; } diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index fe8b4cd5f0..c206513615 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -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; diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index f8ca1282dd..6e9bae3b06 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -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; diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index 842649bfcd..d6996a6836 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -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 { diff --git a/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts b/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts index 537314a0b3..17745b9c92 100644 --- a/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts +++ b/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts @@ -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; } diff --git a/src/panels/lovelace/special-rows/hui-button-row.ts b/src/panels/lovelace/special-rows/hui-button-row.ts index 3eccfbc982..c75742722d 100644 --- a/src/panels/lovelace/special-rows/hui-button-row.ts +++ b/src/panels/lovelace/special-rows/hui-button-row.ts @@ -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; diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts index 2503886a6e..27de92daff 100644 --- a/src/panels/lovelace/special-rows/hui-cast-row.ts +++ b/src/panels/lovelace/special-rows/hui-cast-row.ts @@ -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; diff --git a/src/panels/lovelace/special-rows/hui-text-row.ts b/src/panels/lovelace/special-rows/hui-text-row.ts index fc47ce7d1f..1fd1c7cba1 100644 --- a/src/panels/lovelace/special-rows/hui-text-row.ts +++ b/src/panels/lovelace/special-rows/hui-text-row.ts @@ -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; diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts index 783cf59010..9b1de9bbbc 100644 --- a/src/panels/lovelace/special-rows/hui-weblink-row.ts +++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts @@ -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; diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts index 37968cc908..89c5330120 100644 --- a/src/resources/codemirror.ts +++ b/src/resources/codemirror.ts @@ -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", diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index e4f47f68a6..8c1d54840f 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -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; diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts index 7c51d1fb01..04169c5f0a 100644 --- a/src/resources/styles-data.ts +++ b/src/resources/styles-data.ts @@ -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)", diff --git a/src/resources/styles.ts b/src/resources/styles.ts index ba0b56164f..67a9a967b0 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -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 {