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

Use ha-font-size typography css tokens (#25361)

Browse Source
This commit is contained in:
Wendelin 2025-05-09 13:47:25 +02:00 committed by GitHub
parent 06bd1ae4cd
commit 3058fcad46
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
184 changed files with 303 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cast/src/launcher/layout/hc-layout.ts
View File

@ -86,7 +86,7 @@ class HcLayout extends LitElement {
.card-header { .card-header {
color: var(--ha-card-header-color, var(--primary-text-color)); color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit); font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px); font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
letter-spacing: -0.012em; letter-spacing: -0.012em;
line-height: 32px; line-height: 32px;
padding: 24px 16px 16px; padding: 24px 16px 16px;
@ -98,7 +98,7 @@ class HcLayout extends LitElement {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
.subtitle { .subtitle {
font-size: 14px; font-size: var(--ha-font-size-m);
color: var(--secondary-text-color); color: var(--secondary-text-color);
line-height: initial; line-height: initial;
} }
@ -135,7 +135,7 @@ class HcLayout extends LitElement {
.footer { .footer {
text-align: center; text-align: center;
font-size: 12px; font-size: var(--ha-font-size-s);
padding: 8px 0 24px; padding: 8px 0 24px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }

2
cast/src/receiver/layout/hc-launch-screen.ts
View File

@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement {
display: block; display: block;
height: 100vh; height: 100vh;
background-color: #f2f4f9; background-color: #f2f4f9;
font-size: 24px; font-size: var(--ha-font-size-2xl);
} }
.container { .container {
display: flex; display: flex;

2
gallery/src/components/page-description.ts
View File

@ -42,7 +42,7 @@ class PageDescription extends HaMarkdown {
padding-bottom: 8px; padding-bottom: 8px;
} }
.subtitle { .subtitle {
font-size: 18px; font-size: var(--ha-font-size-l);
line-height: 24px; line-height: 24px;
} }
.root { .root {

2
gallery/src/ha-demo-options.ts
View File

@ -34,7 +34,7 @@ class HaDemoOptions extends LitElement {
height: 64px; height: 64px;
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
font-size: 20px; font-size: var(--ha-font-size-xl);
} }
`, `,
]; ];

2
gallery/src/ha-gallery.ts
View File

@ -250,7 +250,7 @@ class HaGallery extends LitElement {
} }
.page-footer .header { .page-footer .header {
font-size: 16px; font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;

2
gallery/src/pages/components/ha-hs-color-picker.ts
View File

@ -105,7 +105,7 @@ export class DemoHaHsColorPicker extends LitElement {
width: 400px; width: 400px;
} }
.value { .value {
font-size: 22px; font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-bold); font-weight: var(--ha-font-weight-bold);
margin: 0 0 12px 0; margin: 0 0 12px 0;
} }

2
hassio/src/addon-view/config/hassio-addon-config.ts
View File

@ -428,7 +428,7 @@ class HassioAddonConfig extends LitElement {
.header h2 { .header h2 {
color: var(--ha-card-header-color, var(--primary-text-color)); color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit); font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px); font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
letter-spacing: -0.012em; letter-spacing: -0.012em;
line-height: 48px; line-height: 48px;
padding: 12px 16px 16px; padding: 12px 16px 16px;

4
hassio/src/addon-view/info/hassio-addon-info.ts
View File

@ -1280,12 +1280,12 @@ class HassioAddonInfo extends LitElement {
padding-left: 8px; padding-left: 8px;
padding-inline-start: 8px; padding-inline-start: 8px;
padding-inline-end: initial; padding-inline-end: initial;
font-size: 24px; font-size: var(--ha-font-size-2xl);
color: var(--ha-card-header-color, var(--primary-text-color)); color: var(--ha-card-header-color, var(--primary-text-color));
} }
.addon-version { .addon-version {
float: var(--float-end); float: var(--float-end);
font-size: 15px; font-size: var(--ha-font-size-l);
vertical-align: middle; vertical-align: middle;
} }
.errors { .errors {

2
hassio/src/backups/hassio-backups.ts
View File

@ -401,7 +401,7 @@ export class HassioBackups extends LitElement {
margin-top: 20px; margin-top: 20px;
} }
.header-toolbar .selected-txt { .header-toolbar .selected-txt {
font-size: 16px; font-size: var(--ha-font-size-l);
} }
.header-toolbar .header-btns { .header-toolbar .header-btns {
margin-right: -12px; margin-right: -12px;

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

@ -173,7 +173,7 @@ class HassioHardwareDialog extends LitElement {
font-family: var(--ha-font-family-code); font-family: var(--ha-font-family-code);
} }
code { code {
font-size: 85%; font-size: var(--ha-font-size-s);
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
} }
search-input { search-input {

2
hassio/src/ingress-view/hassio-ingress-view.ts
View File

@ -340,7 +340,7 @@ class HassioIngressView extends LitElement {
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px; font-size: var(--ha-font-size-l);
height: 40px; height: 40px;
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;

4
src/auth/ha-authorize.ts
View File

@ -93,7 +93,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
background-color: var(--primary-background-color, #fafafa); background-color: var(--primary-background-color, #fafafa);
} }
p { p {
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 20px; line-height: 20px;
} }
.card-content { .card-content {
@ -151,7 +151,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
margin-inline-start: initial; margin-inline-start: initial;
} }
h1 { h1 {
font-size: 28px; font-size: var(--ha-font-size-3xl);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;

2
src/auth/ha-pick-auth-provider.ts
View File

@ -57,7 +57,7 @@ export class HaPickAuthProvider extends LitElement {
position: relative; position: relative;
z-index: 1; z-index: 1;
text-align: center; text-align: center;
font-size: 14px; font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 20px; line-height: 20px;
} }

2
src/components/chart/ha-chart-base.ts
View File

@ -739,7 +739,7 @@ export class HaChartBase extends LitElement {
max-height: 60%; max-height: 60%;
overflow-y: auto; overflow-y: auto;
padding: 12px 0 0; padding: 12px 0 0;
font-size: 12px; font-size: var(--ha-font-size-s);
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.chart-legend ul { .chart-legend ul {

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

@ -267,7 +267,7 @@ export class HaStateLabelBadge extends LitElement {
cursor: pointer; cursor: pointer;
} }
.big { .big {
font-size: 70%; font-size: var(--ha-font-size-xs);
} }
ha-label-badge { ha-label-badge {
--ha-label-badge-color: var(--label-badge-red); --ha-label-badge-color: var(--label-badge-red);

4
src/components/ha-assist-chat.ts
View File

@ -595,7 +595,7 @@ export class HaAssistChat extends LitElement {
} }
.message { .message {
white-space: pre-line; white-space: pre-line;
font-size: 18px; font-size: var(--ha-font-size-l);
clear: both; clear: both;
margin: 8px 0; margin: 8px 0;
padding: 8px; padding: 8px;
@ -604,7 +604,7 @@ export class HaAssistChat extends LitElement {
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
.message { .message {
font-size: 16px; font-size: var(--ha-font-size-l);
} }
} }

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

@ -95,7 +95,7 @@ export class HaBadge extends LitElement {
text-align: center; text-align: center;
} }
.label { .label {
font-size: 10px; font-size: var(--ha-font-size-xs);
font-style: normal; font-style: normal;
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
line-height: 10px; line-height: 10px;

2
src/components/ha-base-time-input.ts
View File

@ -387,7 +387,7 @@ export class HaBaseTimeInput extends LitElement {
--mdc-typography-body2-font-family, --mdc-typography-body2-font-family,
var(--mdc-typography-font-family, var(--ha-font-family-body)) var(--mdc-typography-font-family, var(--ha-font-family-body))
); );
font-size: var(--mdc-typography-body2-font-size, 0.875rem); font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
line-height: var(--mdc-typography-body2-line-height, 1.25rem); line-height: var(--mdc-typography-body2-line-height, 1.25rem);
font-weight: var( font-weight: var(
--mdc-typography-body2-font-weight, --mdc-typography-body2-font-weight,

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

@ -41,7 +41,7 @@ export class HaCard extends LitElement {
:host ::slotted(.card-header) { :host ::slotted(.card-header) {
color: var(--ha-card-header-color, var(--primary-text-color)); color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit); font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px); font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
letter-spacing: -0.012em; letter-spacing: -0.012em;
line-height: 48px; line-height: 48px;
padding: 12px 16px 16px; padding: 12px 16px 16px;

4
src/components/ha-combo-box-item.ts
View File

@ -22,12 +22,12 @@ export class HaComboBoxItem extends HaMdListItem {
} }
[slot="headline"] { [slot="headline"] {
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: var(--ha-font-size-m);
white-space: nowrap; white-space: nowrap;
} }
[slot="supporting-text"] { [slot="supporting-text"] {
line-height: 18px; line-height: 18px;
font-size: 12px; font-size: var(--ha-font-size-s);
white-space: nowrap; white-space: nowrap;
} }
::slotted(state-badge), ::slotted(state-badge),

2
src/components/ha-control-select-menu.ts
View File

@ -179,7 +179,7 @@ export class HaControlSelectMenu extends SelectBase {
--control-select-menu-padding: 6px 10px; --control-select-menu-padding: 6px 10px;
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
--ha-ripple-color: var(--secondary-text-color); --ha-ripple-color: var(--secondary-text-color);
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 1.4; line-height: 1.4;
width: auto; width: auto;
color: var(--primary-text-color); color: var(--primary-text-color);

2
src/components/ha-control-slider.ts
View File

@ -368,7 +368,7 @@ export class HaControlSlider extends LitElement {
--control-slider-background-opacity: 0.2; --control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px; --control-slider-thickness: 40px;
--control-slider-border-radius: 10px; --control-slider-border-radius: 10px;
--control-slider-tooltip-font-size: 14px; --control-slider-tooltip-font-size: var(--ha-font-size-m);
height: var(--control-slider-thickness); height: var(--control-slider-thickness);
width: 100%; width: 100%;
border-radius: var(--control-slider-border-radius); border-radius: var(--control-slider-border-radius);

4
src/components/ha-dialog-header.ts
View File

@ -53,12 +53,12 @@ export class HaDialogHeader extends LitElement {
white-space: nowrap; white-space: nowrap;
} }
.header-title { .header-title {
font-size: 22px; font-size: var(--ha-font-size-xl);
line-height: 28px; line-height: 28px;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
} }
.header-subtitle { .header-subtitle {
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 20px; line-height: 20px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }

2
src/components/ha-expansion-panel.ts
View File

@ -218,7 +218,7 @@ export class HaExpansionPanel extends LitElement {
.secondary { .secondary {
display: block; display: block;
color: var(--secondary-text-color); color: var(--secondary-text-color);
font-size: 12px; font-size: var(--ha-font-size-s);
} }
`; `;
} }

4
src/components/ha-file-upload.ts
View File

@ -294,7 +294,7 @@ export class HaFileUpload extends LitElement {
} }
.supports { .supports {
color: var(--secondary-text-color); color: var(--secondary-text-color);
font-size: 12px; font-size: var(--ha-font-size-s);
} }
:host([disabled]) .secondary { :host([disabled]) .secondary {
color: var(--disabled-text-color); color: var(--disabled-text-color);
@ -333,7 +333,7 @@ export class HaFileUpload extends LitElement {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
font-size: 14px; font-size: var(--ha-font-size-m);
color: var(--primary-color); color: var(--primary-color);
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;

2
src/components/ha-filter-blueprints.ts
View File

@ -208,8 +208,8 @@ export class HaFilterBlueprints extends LitElement {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-categories.ts
View File

@ -303,8 +303,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-devices.ts
View File

@ -232,8 +232,8 @@ export class HaFilterDevices extends LitElement {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-domains.ts
View File

@ -189,8 +189,8 @@ export class HaFilterDomains extends LitElement {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-entities.ts
View File

@ -246,8 +246,8 @@ export class HaFilterEntities extends LitElement {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-floor-areas.ts
View File

@ -303,8 +303,8 @@ export class HaFilterFloorAreas extends LitElement {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-integrations.ts
View File

@ -195,8 +195,8 @@ export class HaFilterIntegrations extends LitElement {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-labels.ts
View File

@ -233,8 +233,8 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-filter-states.ts
View File

@ -177,8 +177,8 @@ export class HaFilterStates extends LitElement {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;

2
src/components/ha-header-bar.ts
View File

@ -46,7 +46,7 @@ export class HaHeaderBar extends LitElement {
flex: none; flex: none;
} }
.mdc-top-app-bar__title { .mdc-top-app-bar__title {
font-size: 20px; font-size: var(--ha-font-size-xl);
padding-inline-start: 24px; padding-inline-start: 24px;
padding-inline-end: initial; padding-inline-end: initial;
} }

2
src/components/ha-heading-badge.ts
View File

@ -34,7 +34,7 @@ export class HaBadge extends LitElement {
align-items: center; align-items: center;
gap: 3px; gap: 3px;
color: var(--ha-heading-badge-text-color, var(--secondary-text-color)); color: var(--ha-heading-badge-text-color, var(--secondary-text-color));
font-size: var(--ha-heading-badge-font-size, 14px); font-size: var(--ha-heading-badge-font-size, var(--ha-font-size-m));
font-weight: var(--ha-heading-badge-font-weight, 400); font-weight: var(--ha-heading-badge-font-weight, 400);
line-height: var(--ha-heading-badge-line-height, 20px); line-height: var(--ha-heading-badge-line-height, 20px);
letter-spacing: 0.1px; letter-spacing: 0.1px;

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

@ -32,7 +32,7 @@ class HaLabel extends LitElement {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
font-size: 12px; font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
line-height: 16px; line-height: 16px;
letter-spacing: 0.1px; letter-spacing: 0.1px;

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

@ -64,7 +64,7 @@ export class HaMarkdown extends LitElement {
color: var(--markdown-svg-color, none); color: var(--markdown-svg-color, none);
} }
code { code {
font-size: 85%; font-size: var(--ha-font-size-s);
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
} }
pre code { pre code {
@ -85,7 +85,7 @@ export class HaMarkdown extends LitElement {
line-height: initial; line-height: initial;
} }
h2 { h2 {
font-size: 1.5em; font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-bold); font-weight: var(--ha-font-weight-bold);
} }
hr { hr {

2
src/components/ha-select-box.ts
View File

@ -154,7 +154,7 @@ export class HaSelectBox extends LitElement {
} }
.option .content .text .label { .option .content .text .label {
color: var(--primary-text-color); color: var(--primary-text-color);
font-size: 14px; font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;

2
src/components/ha-selector/ha-selector-media.ts
View File

@ -247,7 +247,7 @@ export class HaMediaSelector extends LitElement {
--mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4); --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
} }
.title { .title {
font-size: 16px; font-size: var(--ha-font-size-l);
padding-top: 16px; padding-top: 16px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

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

@ -290,7 +290,7 @@ export class HaSelectorSelector extends LitElement {
padding: 0px 16px 16px 16px; padding: 0px 16px 16px 16px;
} }
.title { .title {
font-size: 16px; font-size: var(--ha-font-size-l);
padding-top: 16px; padding-top: 16px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

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

@ -68,9 +68,9 @@ export class HaSettingsRow extends LitElement {
--mdc-typography-body2-font-family, --mdc-typography-body2-font-family,
var(--mdc-typography-font-family, var(--ha-font-family-body)) var(--mdc-typography-font-family, var(--ha-font-family-body))
); );
font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
-webkit-font-smoothing: var(--ha-font-smoothing); -webkit-font-smoothing: var(--ha-font-smoothing);
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing); -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
font-size: var(--mdc-typography-body2-font-size, 0.875rem);
font-weight: var( font-weight: var(
--mdc-typography-body2-font-weight, --mdc-typography-body2-font-weight,
var(--ha-font-weight-normal) var(--ha-font-weight-normal)

6
src/components/ha-sidebar.ts
View File

@ -849,7 +849,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
--sidebar-menu-button-background-color, --sidebar-menu-button-background-color,
inherit inherit
); );
font-size: 20px; font-size: var(--ha-font-size-xl);
align-items: center; align-items: center;
padding-left: calc(4px + env(safe-area-inset-left)); padding-left: calc(4px + env(safe-area-inset-left));
padding-inline-start: calc(4px + env(safe-area-inset-left)); padding-inline-start: calc(4px + env(safe-area-inset-left));
@ -951,8 +951,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-md-list-item .item-text { ha-md-list-item .item-text {
font-family: var(--ha-font-family-body); font-family: var(--ha-font-family-body);
display: none; display: none;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
font-size: 14px;
} }
:host([expanded]) ha-md-list-item .item-text { :host([expanded]) ha-md-list-item .item-text {
display: block; display: block;
@ -1008,8 +1008,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.subheader { .subheader {
color: var(--sidebar-text-color); color: var(--sidebar-text-color);
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
font-size: 14px;
padding: 16px; padding: 16px;
white-space: nowrap; white-space: nowrap;
} }

2
src/components/ha-top-app-bar-fixed.ts
View File

@ -24,7 +24,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
); );
} }
.mdc-top-app-bar__title { .mdc-top-app-bar__title {
font-size: 20px; font-size: var(--ha-font-size-xl);
padding-inline-start: 24px; padding-inline-start: 24px;
padding-inline-end: initial; padding-inline-end: initial;
} }

2
src/components/ha-two-pane-top-app-bar-fixed.ts
View File

@ -321,7 +321,7 @@ export class TopAppBarBaseBase extends BaseElement {
overflow: auto; overflow: auto;
} }
.mdc-top-app-bar__title { .mdc-top-app-bar__title {
font-size: 20px; font-size: var(--ha-font-size-xl);
padding-inline-start: 24px; padding-inline-start: 24px;
padding-inline-end: initial; padding-inline-end: initial;
} }

2
src/components/map/ha-entity-marker.ts
View File

@ -58,7 +58,7 @@ class HaEntityMarker extends LitElement {
box-sizing: border-box; box-sizing: border-box;
width: 48px; width: 48px;
height: 48px; height: 48px;
font-size: var(--ha-marker-font-size, 1.5em); font-size: var(--ha-marker-font-size, var(--ha-font-size-xl));
border-radius: var(--ha-marker-border-radius, 50%); border-radius: var(--ha-marker-border-radius, 50%);
border: 1px solid var(--ha-marker-color, var(--primary-color)); border: 1px solid var(--ha-marker-color, var(--primary-color));
color: var(--primary-text-color); color: var(--primary-text-color);

4
src/components/map/ha-map.ts
View File

@ -671,7 +671,7 @@ export class HaMap extends ReactiveElement {
} }
.leaflet-tooltip { .leaflet-tooltip {
padding: 8px; padding: 8px;
font-size: 90%; font-size: var(--ha-font-size-s);
background: rgba(80, 80, 80, 0.9) !important; background: rgba(80, 80, 80, 0.9) !important;
color: white !important; color: white !important;
border-radius: 4px; border-radius: 4px;
@ -688,7 +688,7 @@ export class HaMap extends ReactiveElement {
border-radius: 20px; border-radius: 20px;
text-align: center; text-align: center;
color: var(--text-primary-color); color: var(--text-primary-color);
font-size: 14px; font-size: var(--ha-font-size-m);
} }
.marker-cluster span { .marker-cluster span {

10
src/components/media-player/ha-media-player-browse.ts
View File

@ -965,7 +965,7 @@ export class HaMediaPlayerBrowse extends LitElement {
padding-top: 16px; padding-top: 16px;
} }
.breadcrumb .title { .breadcrumb .title {
font-size: 32px; font-size: var(--ha-font-size-4xl);
line-height: 1.2; line-height: 1.2;
font-weight: var(--ha-font-weight-bold); font-weight: var(--ha-font-weight-bold);
margin: 0; margin: 0;
@ -976,7 +976,7 @@ export class HaMediaPlayerBrowse extends LitElement {
padding-right: 8px; padding-right: 8px;
} }
.breadcrumb .previous-title { .breadcrumb .previous-title {
font-size: 14px; font-size: var(--ha-font-size-m);
padding-bottom: 8px; padding-bottom: 8px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
overflow: hidden; overflow: hidden;
@ -985,7 +985,7 @@ export class HaMediaPlayerBrowse extends LitElement {
--mdc-icon-size: 14px; --mdc-icon-size: 14px;
} }
.breadcrumb .subtitle { .breadcrumb .subtitle {
font-size: 16px; font-size: var(--ha-font-size-l);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-bottom: 0; margin-bottom: 0;
@ -1144,7 +1144,7 @@ export class HaMediaPlayerBrowse extends LitElement {
} }
.child .title { .child .title {
font-size: 16px; font-size: var(--ha-font-size-l);
padding-top: 16px; padding-top: 16px;
padding-left: 2px; padding-left: 2px;
overflow: hidden; overflow: hidden;
@ -1209,7 +1209,7 @@ export class HaMediaPlayerBrowse extends LitElement {
} }
:host([narrow]) .breadcrumb .title { :host([narrow]) .breadcrumb .title {
font-size: 24px; font-size: var(--ha-font-size-2xl);
} }
:host([narrow]) .header { :host([narrow]) .header {
padding: 0; padding: 0;

4
src/components/tile/ha-tile-info.ts
View File

@ -34,15 +34,15 @@ export class HaTileInfo extends LitElement {
width: 100%; width: 100%;
} }
.primary { .primary {
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
font-size: 14px;
line-height: 20px; line-height: 20px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.secondary { .secondary {
font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 12px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
color: var(--primary-text-color); color: var(--primary-text-color);

2
src/components/trace/hat-graph-node.ts
View File

@ -164,7 +164,7 @@ export class HatGraphNode extends LitElement {
stroke-width: 0; stroke-width: 0;
} }
.number text { .number text {
font-size: 10px; font-size: var(--ha-font-size-xs);
fill: var(--text-primary-color); fill: var(--text-primary-color);
} }
path.icon { path.icon {

4
src/components/user/ha-person-badge.ts
View File

@ -59,10 +59,10 @@ class PersonBadge extends LitElement {
text-decoration: none; text-decoration: none;
color: var(--text-light-primary-color, var(--primary-text-color)); color: var(--text-light-primary-color, var(--primary-text-color));
overflow: hidden; overflow: hidden;
font-size: var(--person-badge-font-size, 1em); font-size: var(--person-badge-font-size, var(--ha-font-size-m));
} }
.initials.long { .initials.long {
font-size: 80%; font-size: var(--ha-person-badge-font-size-long, var(--ha-font-size-s));
} }
`; `;
} }

2
src/components/user/ha-user-badge.ts
View File

@ -108,7 +108,7 @@ class UserBadge extends LitElement {
overflow: hidden; overflow: hidden;
} }
.initials.long { .initials.long {
font-size: 80%; font-size: var(--ha-font-size-s);
} }
`; `;
} }

2
src/dialogs/config-flow/styles.ts
View File

@ -14,7 +14,7 @@ export const configFlowContentStyles = css`
--mdc-typography-headline6-font-family, --mdc-typography-headline6-font-family,
var(--mdc-typography-font-family, var(--ha-font-family-body)) var(--mdc-typography-font-family, var(--ha-font-family-body))
); );
font-size: var(--mdc-typography-headline6-font-size, 1.25rem); font-size: var(--mdc-typography-headline6-font-size, var(--ha-font-size-l));
line-height: var(--mdc-typography-headline6-line-height, 2rem); line-height: var(--mdc-typography-headline6-line-height, 2rem);
font-weight: var( font-weight: var(
--mdc-typography-headline6-font-weight, --mdc-typography-headline6-font-weight,

2
src/dialogs/enter-code/dialog-enter-code.ts
View File

@ -228,7 +228,7 @@ export class DialogEnterCode
height: 56px; height: 56px;
--control-button-border-radius: 28px; --control-button-border-radius: 28px;
--mdc-icon-size: 24px; --mdc-icon-size: 24px;
font-size: 24px; font-size: var(--ha-font-size-2xl);
} }
.submit { .submit {
--control-button-background-color: var(--green-color); --control-button-background-color: var(--green-color);

2
src/dialogs/more-info/components/ha-more-info-state-header.ts
View File

@ -80,8 +80,8 @@ export class HaMoreInfoStateHeader extends LitElement {
} }
.last-changed { .last-changed {
font-style: normal; font-style: normal;
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
font-size: 16px;
line-height: 24px; line-height: 24px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
padding: 4px 0; padding: 4px 0;

2
src/dialogs/more-info/components/lights/light-color-temp-picker.ts
View File

@ -185,7 +185,7 @@ class LightColorTempPicker extends LitElement {
top, top,
var(--gradient) var(--gradient)
); );
--control-slider-tooltip-font-size: 20px; --control-slider-tooltip-font-size: var(--ha-font-size-xl);
--control-slider-background-opacity: 1; --control-slider-background-opacity: 1;
} }
`, `,

6
src/dialogs/more-info/controls/more-info-climate.ts
View File

@ -530,14 +530,14 @@ class MoreInfoClimate extends LitElement {
.current .label { .current .label {
opacity: 0.8; opacity: 0.8;
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 16px; line-height: 16px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.current .value { .current .value {
font-size: 22px; font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
line-height: 28px; line-height: 28px;
direction: ltr; direction: ltr;
@ -554,7 +554,7 @@ class MoreInfoClimate extends LitElement {
.target-humidity { .target-humidity {
width: 90px; width: 90px;
font-size: 200%; font-size: var(--ha-font-size-3xl);
margin: auto; margin: auto;
direction: ltr; direction: ltr;
} }

4
src/dialogs/more-info/controls/more-info-humidifier.ts
View File

@ -233,13 +233,13 @@ class MoreInfoHumidifier extends LitElement {
} }
.current .label { .current .label {
opacity: 0.8; opacity: 0.8;
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 16px; line-height: 16px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.current .value { .current .value {
font-size: 22px; font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
line-height: 28px; line-height: 28px;
direction: ltr; direction: ltr;

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

@ -165,7 +165,7 @@ class MoreInfoLock extends LitElement {
moreInfoControlStyle, moreInfoControlStyle,
css` css`
ha-control-button { ha-control-button {
font-size: 14px; font-size: var(--ha-font-size-m);
height: 60px; height: 60px;
--control-button-border-radius: 24px; --control-button-border-radius: 24px;
} }

4
src/dialogs/more-info/controls/more-info-water_heater.ts
View File

@ -234,14 +234,14 @@ class MoreInfoWaterHeater extends LitElement {
.current .label { .current .label {
opacity: 0.8; opacity: 0.8;
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 16px; line-height: 16px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.current .value { .current .value {
font-size: 22px; font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
line-height: 28px; line-height: 28px;
direction: ltr; direction: ltr;

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

@ -512,18 +512,18 @@ class MoreInfoWeather extends LitElement {
.temp-attribute .temp span { .temp-attribute .temp span {
position: absolute; position: absolute;
font-size: 24px; font-size: var(--ha-font-size-2xl);
top: 1px; top: 1px;
} }
.state, .state,
.temp-attribute .temp { .temp-attribute .temp {
font-size: 28px; font-size: var(--ha-font-size-3xl);
line-height: 1.2; line-height: 1.2;
} }
.attribute { .attribute {
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 1; line-height: 1;
} }
@ -570,7 +570,7 @@ class MoreInfoWeather extends LitElement {
} }
.forecast .temp { .forecast .temp {
font-size: 16px; font-size: var(--ha-font-size-l);
} }
.forecast-image-icon { .forecast-image-icon {

4
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@ -679,13 +679,13 @@ export class MoreInfoDialog extends LitElement {
.title .main { .title .main {
color: var(--primary-text-color); color: var(--primary-text-color);
font-size: 20px; font-size: var(--ha-font-size-xl);
line-height: 24px; line-height: 24px;
} }
.title .breadcrumb { .title .breadcrumb {
color: var(--secondary-text-color); color: var(--secondary-text-color);
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 16px; line-height: 16px;
--mdc-icon-size: 16px; --mdc-icon-size: 16px;
padding: 4px; padding: 4px;

2
src/dialogs/restart/dialog-restart.ts
View File

@ -467,8 +467,8 @@ class DialogRestart extends LitElement {
background-color: var(--divider-color); background-color: var(--divider-color);
} }
.section { .section {
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
font-size: 14px;
line-height: 20px; line-height: 20px;
margin: 8px 0 4px 0; margin: 8px 0 4px 0;
padding-left: var(--mdc-list-side-padding, 20px); padding-left: var(--mdc-list-side-padding, 20px);

6
src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
View File

@ -153,22 +153,22 @@ export class CloudStepIntro extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24px; font-size: var(--ha-font-size-2xl);
} }
.access .round-icon { .access .round-icon {
color: #00aef8; color: #00aef8;
background-color: #cceffe; background-color: #cceffe;
} }
.feature h2 { .feature h2 {
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
font-size: 16px;
line-height: 24px; line-height: 24px;
margin-top: 0; margin-top: 0;
margin-bottom: 8px; margin-bottom: 8px;
} }
.feature p { .feature p {
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 14px;
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
} }

2
src/layouts/hass-error-screen.ts
View File

@ -64,7 +64,7 @@ class HassErrorScreen extends LitElement {
.toolbar { .toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: var(--ha-font-size-xl);
height: var(--header-height); height: var(--header-height);
padding: 8px 12px; padding: 8px 12px;
pointer-events: none; pointer-events: none;

2
src/layouts/hass-loading-screen.ts
View File

@ -64,7 +64,7 @@ class HassLoadingScreen extends LitElement {
.toolbar { .toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: var(--ha-font-size-xl);
height: var(--header-height); height: var(--header-height);
padding: 8px 12px; padding: 8px 12px;
pointer-events: none; pointer-events: none;

2
src/layouts/hass-subpage.ts
View File

@ -97,7 +97,7 @@ class HassSubpage extends LitElement {
.toolbar { .toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: var(--ha-font-size-xl);
height: var(--header-height); height: var(--header-height);
padding: 8px 12px; padding: 8px 12px;
background-color: var(--app-header-background-color); background-color: var(--app-header-background-color);

6
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -760,7 +760,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
margin-left: 4px; margin-left: 4px;
margin-inline-start: 4px; margin-inline-start: 4px;
margin-inline-end: initial; margin-inline-end: initial;
font-size: 14px; font-size: var(--ha-font-size-m);
width: max-content; width: max-content;
cursor: initial; cursor: initial;
direction: var(--direction); direction: var(--direction);
@ -822,8 +822,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
min-width: 16px; min-width: 16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color); background-color: var(--primary-color);
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
@ -857,7 +857,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
justify-content: space-between; justify-content: space-between;
padding: 8px 12px; padding: 8px 12px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: var(--ha-font-size-m);
--ha-assist-chip-container-color: var(--card-background-color); --ha-assist-chip-container-color: var(--card-background-color);
} }

6
src/layouts/hass-tabs-subpage.ts
View File

@ -230,7 +230,7 @@ class HassTabsSubpage extends LitElement {
} }
.toolbar { .toolbar {
font-size: 20px; font-size: var(--ha-font-size-xl);
height: var(--header-height); height: var(--header-height);
background-color: var(--sidebar-background-color); background-color: var(--sidebar-background-color);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
@ -259,7 +259,7 @@ class HassTabsSubpage extends LitElement {
#tabbar { #tabbar {
display: flex; display: flex;
font-size: 14px; font-size: var(--ha-font-size-m);
overflow: hidden; overflow: hidden;
} }
@ -278,7 +278,7 @@ class HassTabsSubpage extends LitElement {
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
justify-content: space-around; justify-content: space-around;
z-index: 2; z-index: 2;
font-size: 12px; font-size: var(--ha-font-size-s);
width: 100%; width: 100%;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }

2
src/onboarding/onboarding-core-config.ts
View File

@ -199,7 +199,7 @@ class OnboardingCoreConfig extends LitElement {
} }
p { p {
font-size: 14px; font-size: var(--ha-font-size-m);
line-height: 20px; line-height: 20px;
} }

5
src/onboarding/onboarding-location.ts
View File

@ -528,7 +528,10 @@ class OnboardingLocation extends LitElement {
--mdc-typography-caption-font-family, --mdc-typography-caption-font-family,
var(--mdc-typography-font-family, var(--ha-font-family-body)) var(--mdc-typography-font-family, var(--ha-font-family-body))
); );
font-size: var(--mdc-typography-caption-font-size, 0.75rem); font-size: var(
--mdc-typography-caption-font-size,
var(--ha-font-size-xs)
);
font-weight: var( font-weight: var(
--mdc-typography-caption-font-weight, --mdc-typography-caption-font-weight,
var(--ha-font-weight-normal) var(--ha-font-weight-normal)

2
src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
View File

@ -120,7 +120,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
text-align: left; text-align: left;
} }
h2 { h2 {
font-size: 24px; font-size: var(--ha-font-size-2xl);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;

2
src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
View File

@ -338,7 +338,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
line-height: normal; line-height: normal;
} }
h2 { h2 {
font-size: 22px; font-size: var(--ha-font-size-xl);
margin-top: 24px; margin-top: 24px;
margin-bottom: 8px; margin-bottom: 8px;
font-style: normal; font-style: normal;

4
src/onboarding/restore-backup/onboarding-restore-backup-status.ts
View File

@ -86,11 +86,11 @@ class OnboardingRestoreBackupStatus extends LitElement {
p { p {
text-align: center; text-align: center;
padding: 0 16px; padding: 0 16px;
font-size: 16px; font-size: var(--ha-font-size-l);
} }
.failed { .failed {
padding: 16px 0; padding: 16px 0;
font-size: 16px; font-size: var(--ha-font-size-l);
} }
mwc-linear-progress { mwc-linear-progress {
width: 100%; width: 100%;

2
src/onboarding/styles.ts
View File

@ -5,8 +5,8 @@ export const onBoardingStyles = css`
padding: 32px; padding: 32px;
} }
h1 { h1 {
font-size: var(--ha-font-size-3xl);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 28px;
line-height: 36px; line-height: 36px;
margin-bottom: 8px; margin-bottom: 8px;
} }

2
src/panels/calendar/dialog-calendar-event-editor.ts
View File

@ -623,7 +623,7 @@ class DialogCalendarEventEditor extends LitElement {
justify-content: space-between; justify-content: space-between;
} }
.label { .label {
font-size: 12px; font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
color: var(--input-label-ink-color); color: var(--input-label-ink-color);
} }

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

@ -563,7 +563,7 @@ export class HAFullCalendar extends LitElement {
th.fc-col-header-cell.fc-day { th.fc-col-header-cell.fc-day {
background-color: var(--table-header-background-color); background-color: var(--table-header-background-color);
color: var(--primary-text-color); color: var(--primary-text-color);
font-size: 11px; font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-bold); font-weight: var(--ha-font-weight-bold);
text-transform: uppercase; text-transform: uppercase;
} }
@ -587,7 +587,7 @@ export class HAFullCalendar extends LitElement {
a.fc-daygrid-day-number { a.fc-daygrid-day-number {
float: none !important; float: none !important;
font-size: 12px; font-size: var(--ha-font-size-s);
cursor: pointer; cursor: pointer;
} }
@ -657,13 +657,13 @@ export class HAFullCalendar extends LitElement {
} }
.fc-list-day-text { .fc-list-day-text {
font-size: 16px; font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
} }
.fc-list-day-side-text { .fc-list-day-side-text {
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
font-size: 16px;
color: var(--primary-color); color: var(--primary-color);
} }

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

@ -307,7 +307,7 @@ class PanelCalendar extends LitElement {
--mdc-typography-button-text-transform: none; --mdc-typography-button-text-transform: none;
--mdc-typography-button-font-size: var( --mdc-typography-button-font-size: var(
--mdc-typography-headline6-font-size, --mdc-typography-headline6-font-size,
1.25rem var(--ha-font-size-l)
); );
--mdc-typography-button-font-weight: var( --mdc-typography-button-font-weight: var(
--mdc-typography-headline6-font-weight, --mdc-typography-headline6-font-weight,

2
src/panels/config/application_credentials/ha-config-application-credentials.ts
View File

@ -339,7 +339,7 @@ export class HaConfigApplicationCredentials extends LitElement {
margin-top: 20px; margin-top: 20px;
} }
.header-toolbar .selected-txt { .header-toolbar .selected-txt {
font-size: 16px; font-size: var(--ha-font-size-l);
} }
.header-toolbar .header-btns { .header-toolbar .header-btns {
margin-right: -12px; margin-right: -12px;

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

@ -455,7 +455,7 @@ export class HaConfigAreasDashboard extends LitElement {
padding-inline-start: 8px; padding-inline-start: 8px;
} }
.header h2 { .header h2 {
font-size: 14px; font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
margin-top: 28px; margin-top: 28px;
} }

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

@ -554,8 +554,8 @@ export default class HaAutomationConditionRow extends LitElement {
right: 0px; right: 0px;
left: 0px; left: 0px;
text-transform: uppercase; text-transform: uppercase;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-bold); font-weight: var(--ha-font-weight-bold);
font-size: 14px;
background-color: var(--divider-color, #e0e0e0); background-color: var(--divider-color, #e0e0e0);
color: var(--text-primary-color); color: var(--text-primary-color);
max-height: 0px; max-height: 0px;

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

@ -528,7 +528,7 @@ export class HaAutomationTrace extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20px; font-size: var(--ha-font-size-xl);
height: var(--header-height); height: var(--header-height);
padding: 4px; padding: 4px;
background-color: var(--primary-background-color); background-color: var(--primary-background-color);

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

@ -700,8 +700,8 @@ export default class HaAutomationTriggerRow extends LitElement {
right: 0px; right: 0px;
left: 0px; left: 0px;
text-transform: uppercase; text-transform: uppercase;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-bold); font-weight: var(--ha-font-weight-bold);
font-size: 14px;
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--text-primary-color); color: var(--text-primary-color);
max-height: 0px; max-height: 0px;

2
src/panels/config/backup/components/ha-backup-agents-picker.ts
View File

@ -120,7 +120,7 @@ class HaBackupAgentsPicker extends LitElement {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
font-size: 16px; font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 24px; line-height: 24px;
letter-spacing: 0.5px; letter-spacing: 0.5px;

2
src/panels/config/backup/components/ha-backup-formfield-label.ts
View File

@ -42,7 +42,7 @@ class SupervisorFormfieldLabel extends LitElement {
margin-right: 4px; margin-right: 4px;
margin-inline-end: 4px; margin-inline-end: 4px;
margin-inline-start: initial; margin-inline-start: initial;
font-size: 14px; font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 24px; line-height: 24px;
letter-spacing: 0.5px; letter-spacing: 0.5px;

4
src/panels/config/backup/components/ha-backup-summary-card.ts
View File

@ -125,7 +125,7 @@ class HaBackupSummaryCard extends LitElement {
min-width: 0; min-width: 0;
} }
.heading { .heading {
font-size: 22px; font-size: var(--ha-font-size-xl);
font-style: normal; font-style: normal;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 28px; line-height: 28px;
@ -136,7 +136,7 @@ class HaBackupSummaryCard extends LitElement {
white-space: nowrap; white-space: nowrap;
} }
.description { .description {
font-size: 14px; font-size: var(--ha-font-size-m);
font-style: normal; font-style: normal;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 20px; line-height: 20px;

2
src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
View File

@ -579,8 +579,8 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
.encryption-key p { .encryption-key p {
margin: 0; margin: 0;
flex: 1; flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code); font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal; font-style: normal;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 28px; line-height: 28px;

2
src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
View File

@ -313,8 +313,8 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
.encryption-key p { .encryption-key p {
margin: 0; margin: 0;
flex: 1; flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code); font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal; font-style: normal;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 28px; line-height: 28px;

2
src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts
View File

@ -208,7 +208,7 @@ class DialogDownloadDecryptedBackup extends LitElement implements HassDialog {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
font-size: 14px; font-size: var(--ha-font-size-m);
color: var(--primary-color); color: var(--primary-color);
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;

2
src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
View File

@ -231,8 +231,8 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
.encryption-key p { .encryption-key p {
margin: 0; margin: 0;
flex: 1; flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code); font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal; font-style: normal;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 28px; line-height: 28px;

2
src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
View File

@ -153,8 +153,8 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
.encryption-key p { .encryption-key p {
margin: 0; margin: 0;
flex: 1; flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code); font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal; font-style: normal;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
line-height: 28px; line-height: 28px;

2
src/panels/config/backup/ha-config-backup-backups.ts
View File

@ -236,7 +236,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
${agentsMore ${agentsMore
? html` ? html`
<span <span
style="display: flex; align-items: center; font-size: 14px;" style="display: flex; align-items: center; font-size: var(--ha-font-size-m);"
> >
+${agentsMore} +${agentsMore}
</span> </span>

2
src/panels/config/backup/ha-config-backup-settings.ts
View File

@ -535,7 +535,7 @@ class HaConfigBackupSettings extends LitElement {
.cloud-info .cloud-header { .cloud-info .cloud-header {
display: flex; display: flex;
gap: 16px; gap: 16px;
font-size: 22px; font-size: var(--ha-font-size-xl);
align-items: center; align-items: center;
padding: 16px; padding: 16px;
} }

4
src/panels/config/core/ha-config-system-navigation.ts
View File

@ -244,7 +244,7 @@ class HaConfigSystemNavigation extends LitElement {
} }
.title { .title {
font-size: 16px; font-size: var(--ha-font-size-l);
padding: 16px; padding: 16px;
padding-bottom: 0; padding-bottom: 0;
} }
@ -269,7 +269,7 @@ class HaConfigSystemNavigation extends LitElement {
} }
ha-navigation-list { ha-navigation-list {
--navigation-list-item-title-font-size: 16px; --navigation-list-item-title-font-size: var(--ha-font-size-l);
} }
`, `,
]; ];

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

@ -408,7 +408,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
margin: 8px 16px 16px 16px; margin: 8px 16px 16px 16px;
} }
.title { .title {
font-size: 16px; font-size: var(--ha-font-size-l);
padding: 16px; padding: 16px;
padding-bottom: 0; padding-bottom: 0;
} }

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

@ -66,7 +66,7 @@ class HaConfigNavigation extends LitElement {
static styles: CSSResultGroup = css` static styles: CSSResultGroup = css`
ha-navigation-list { ha-navigation-list {
--navigation-list-item-title-font-size: 16px; --navigation-list-item-title-font-size: var(--ha-font-size-l);
} }
`; `;
} }

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

@ -156,7 +156,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
return [ return [
css` css`
.title { .title {
font-size: 16px; font-size: var(--ha-font-size-l);
padding: 16px; padding: 16px;
padding-bottom: 0; padding-bottom: 0;
} }
@ -188,7 +188,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
text-decoration: underline; text-decoration: underline;
} }
ha-md-list-item { ha-md-list-item {
font-size: 16px; font-size: var(--ha-font-size-l);
} }
div[slot="start"] { div[slot="start"] {
position: relative; position: relative;

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

@ -269,7 +269,7 @@ export class HaDeviceEntitiesCard extends LitElement {
margin: 0 16px 0 8px; margin: 0 16px 0 8px;
} }
.name { .name {
font-size: 14px; font-size: var(--ha-font-size-m);
} }
.name:dir(rtl) { .name:dir(rtl) {
margin-inline-start: 8px; margin-inline-start: 8px;

2
src/panels/config/entities/ha-config-entities.ts
View File

@ -1553,7 +1553,7 @@ ${rejected
margin-top: 20px; margin-top: 20px;
} }
.header-toolbar .selected-txt { .header-toolbar .selected-txt {
font-size: 16px; font-size: var(--ha-font-size-l);
} }
.header-toolbar .header-btns { .header-toolbar .header-btns {
margin-right: -12px; margin-right: -12px;

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

@ -82,7 +82,7 @@ export class HaConfigSection extends LitElement {
line-height: var(--ha-line-height-normal); line-height: var(--ha-line-height-normal);
width: 100%; width: 100%;
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
font-size: 14px; font-size: var(--ha-font-size-m);
padding-bottom: 20px; padding-bottom: 20px;
} }

Some files were not shown because too many files have changed in this diff Show More