jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +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);
}
.update-heading {
font-size: var(--paper-font-subhead_-_font-size);
font-size: var(--ha-font-size-m);
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-xl);
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/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,

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-xl);
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";
}

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

@ -1450,7 +1450,7 @@ ${rejected
--data-table-row-height: 72px;
}
.empty {
--paper-font-headline_-_font-size: 28px;
--ha-font-size-xl: 28px;
--mdc-icon-size: 80px;
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-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

@ -1540,14 +1540,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-xl);
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-xl);
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-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
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);
}
.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-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
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 {
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

@ -795,7 +795,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;

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

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

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

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

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/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;
}

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, 20px);
}
.warning {
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 {
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-xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
line-height: 40px;
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;
}
pre {
font-family: var(--code-font-family, monospace);
font-family: var(--ha-font-family-code);
white-space: break-spaces;
user-select: text;
}

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

@ -14,7 +14,7 @@ const mainStyles = css`
/* typography */
--ha-font-family-body: Roboto, Noto, sans-serif;
--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;
font-size: 14px;
@ -42,8 +42,10 @@ const mainStyles = css`
--ha-line-height-normal: 1.6;
--ha-line-height-expanded: 2;
/* support existing typography */
--code-font-family: var(--ha-font-family-code);
--ha-font-smoothing: antialiased;
--ha-title-h2-white-space: nowrap;
--ha-title-h2-overflow: hidden;
--ha-title-h2-text-overflow: ellipsis;
/* Vaadin typography */
--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-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 */
/* ha-tooltip */
--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`
: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-s);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-normal);
}
app-header div[sticky] {
@ -34,36 +34,36 @@ export const haStyle = css`
}
h1 {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-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-size: var(--ha-font-size-xl);
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: var(--ha-title-h2-white-space);
overflow: var(--ha-title-h2-overflow);
text-overflow: var(--ha-title-h2-text-overflow);
font-size: var(--ha-font-size-l);
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);
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-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-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-normal);
}
a {