jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove paper css tokens

Browse Source
This commit is contained in:
Wendelin 2025-04-17 09:41:55 +02:00
parent 46d82e30ef
commit 141539828f
No known key found for this signature in database
28 changed files with 87 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1450,7 +1450,7 @@ ${rejected
--data-table-row-height: 72px; --data-table-row-height: 72px;
} }
.empty { .empty {
--paper-font-headline_-_font-size: 28px; --ha-font-size-xl: 28px;
--mdc-icon-size: 80px; --mdc-icon-size: 80px;
max-width: 500px; max-width: 500px;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1196,7 +1196,7 @@ ${rejected
text-decoration: none; text-decoration: none;
} }
.empty { .empty {
--paper-font-headline_-_font-size: 28px; --ha-font-size-xl: 28px;
--mdc-icon-size: 80px; --mdc-icon-size: 80px;
max-width: 500px; max-width: 500px;
} }

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

@ -1285,7 +1285,7 @@ ${rejected
text-decoration: none; text-decoration: none;
} }
.empty { .empty {
--paper-font-headline_-_font-size: 28px; --ha-font-size-xl: 28px;
--mdc-icon-size: 80px; --mdc-icon-size: 80px;
max-width: 500px; max-width: 500px;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -14,7 +14,7 @@ const mainStyles = css`
/* typography */ /* typography */
--ha-font-family-body: Roboto, Noto, sans-serif; --ha-font-family-body: Roboto, Noto, sans-serif;
--ha-font-family-heading: var(--ha-font-family-body); --ha-font-family-heading: var(--ha-font-family-body);
--ha-font-family-code: "Roboto Mono", Consolas, Menlo, monospace; --ha-font-family-code: monospace;
--ha-font-family-longform: ui-sans-serif, system-ui, sans-serif; --ha-font-family-longform: ui-sans-serif, system-ui, sans-serif;
font-size: 14px; font-size: 14px;
@ -42,8 +42,10 @@ const mainStyles = css`
--ha-line-height-normal: 1.6; --ha-line-height-normal: 1.6;
--ha-line-height-expanded: 2; --ha-line-height-expanded: 2;
/* support existing typography */ --ha-font-smoothing: antialiased;
--code-font-family: var(--ha-font-family-code); --ha-title-h2-white-space: nowrap;
--ha-title-h2-overflow: hidden;
--ha-title-h2-text-overflow: ellipsis;
/* Vaadin typography */ /* Vaadin typography */
--material-h6-font-size: var(--ha-font-size-m); --material-h6-font-size: var(--ha-font-size-m);
@ -51,74 +53,6 @@ const mainStyles = css`
--material-caption-font-size: var(--ha-font-size-2xs); --material-caption-font-size: var(--ha-font-size-2xs);
--material-button-font-size: var(--ha-font-size-xs); --material-button-font-size: var(--ha-font-size-xs);
/* Paper typography Styles */
--paper-font-common-base_-_font-family: var(--ha-font-family-body);
--paper-font-common-base_-_-webkit-font-smoothing: antialiased;
--paper-font-common-code_-_font-family: var(--ha-font-family-code);
--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: var(--ha-font-size-2xl);
--paper-font-display1_-_font-weight: var(--ha-font-weight-normal);
--paper-font-display1_-_letter-spacing: -0.01em;
--paper-font-display1_-_line-height: var(--ha-line-height-condensed);
--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: var(--ha-font-size-xl);
--paper-font-headline_-_font-weight: var(--ha-font-weight-normal);
--paper-font-headline_-_letter-spacing: -0.012em;
--paper-font-headline_-_line-height: var(--ha-line-height-condensed);
--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: var(--ha-font-size-l);
--paper-font-title_-_font-weight: var(--ha-font-weight-semibold);
--paper-font-title_-_line-height: var(--ha-line-height-normal);
--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: var(--ha-font-size-m);
--paper-font-subhead_-_font-weight: var(--ha-font-weight-normal);
--paper-font-subhead_-_line-height: var(--ha-line-height-normal);
--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: var(--ha-font-size-s);
--paper-font-body1_-_font-weight: var(--ha-font-weight-normal);
--paper-font-body1_-_line-height: var(--ha-line-height-normal);
/* component specific */ /* component specific */
/* ha-tooltip */ /* ha-tooltip */
--ha-tooltip-font-family: var(--ha-font-family-body); --ha-tooltip-font-family: var(--ha-font-family-body);

46
src/resources/styles.ts
View File

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