jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +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 {
color: var(--ha-card-header-color, var(--primary-text-color));
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;
line-height: 32px;
padding: 24px 16px 16px;
@ -98,7 +98,7 @@ class HcLayout extends LitElement {
border-radius: 4px 4px 0 0;
}
.subtitle {
font-size: 14px;
font-size: var(--ha-font-size-m);
color: var(--secondary-text-color);
line-height: initial;
}
@ -135,7 +135,7 @@ class HcLayout extends LitElement {
.footer {
text-align: center;
font-size: 12px;
font-size: var(--ha-font-size-s);
padding: 8px 0 24px;
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;
height: 100vh;
background-color: #f2f4f9;
font-size: 24px;
font-size: var(--ha-font-size-2xl);
}
.container {
display: flex;

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

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

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

@ -34,7 +34,7 @@ class HaDemoOptions extends LitElement {
height: 64px;
padding: 0 16px;
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 {
font-size: 16px;
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium);
line-height: 28px;
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;
}
.value {
font-size: 22px;
font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-bold);
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 {
color: var(--ha-card-header-color, var(--primary-text-color));
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;
line-height: 48px;
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-inline-start: 8px;
padding-inline-end: initial;
font-size: 24px;
font-size: var(--ha-font-size-2xl);
color: var(--ha-card-header-color, var(--primary-text-color));
}
.addon-version {
float: var(--float-end);
font-size: 15px;
font-size: var(--ha-font-size-l);
vertical-align: middle;
}
.errors {

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

@ -401,7 +401,7 @@ export class HassioBackups extends LitElement {
margin-top: 20px;
}
.header-toolbar .selected-txt {
font-size: 16px;
font-size: var(--ha-font-size-l);
}
.header-toolbar .header-btns {
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);
}
code {
font-size: 85%;
font-size: var(--ha-font-size-s);
padding: 0.2em 0.4em;
}
search-input {

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

@ -340,7 +340,7 @@ class HassioIngressView extends LitElement {
.header {
display: flex;
align-items: center;
font-size: 16px;
font-size: var(--ha-font-size-l);
height: 40px;
padding: 0 16px;
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);
}
p {
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 20px;
}
.card-content {
@ -151,7 +151,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
margin-inline-start: initial;
}
h1 {
font-size: 28px;
font-size: var(--ha-font-size-3xl);
font-weight: var(--ha-font-weight-normal);
margin-top: 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;
z-index: 1;
text-align: center;
font-size: 14px;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
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%;
overflow-y: auto;
padding: 12px 0 0;
font-size: 12px;
font-size: var(--ha-font-size-s);
color: var(--primary-text-color);
}
.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;
}
.big {
font-size: 70%;
font-size: var(--ha-font-size-xs);
}
ha-label-badge {
--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 {
white-space: pre-line;
font-size: 18px;
font-size: var(--ha-font-size-l);
clear: both;
margin: 8px 0;
padding: 8px;
@ -604,7 +604,7 @@ export class HaAssistChat extends LitElement {
@media all and (max-width: 450px), all and (max-height: 500px) {
.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;
}
.label {
font-size: 10px;
font-size: var(--ha-font-size-xs);
font-style: normal;
font-weight: var(--ha-font-weight-medium);
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,
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);
font-weight: var(
--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) {
color: var(--ha-card-header-color, var(--primary-text-color));
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;
line-height: 48px;
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"] {
line-height: 22px;
font-size: 14px;
font-size: var(--ha-font-size-m);
white-space: nowrap;
}
[slot="supporting-text"] {
line-height: 18px;
font-size: 12px;
font-size: var(--ha-font-size-s);
white-space: nowrap;
}
::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;
--mdc-icon-size: 20px;
--ha-ripple-color: var(--secondary-text-color);
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 1.4;
width: auto;
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-thickness: 40px;
--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);
width: 100%;
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;
}
.header-title {
font-size: 22px;
font-size: var(--ha-font-size-xl);
line-height: 28px;
font-weight: var(--ha-font-weight-normal);
}
.header-subtitle {
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 20px;
color: var(--secondary-text-color);
}

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

@ -218,7 +218,7 @@ export class HaExpansionPanel extends LitElement {
.secondary {
display: block;
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 {
color: var(--secondary-text-color);
font-size: 12px;
font-size: var(--ha-font-size-s);
}
:host([disabled]) .secondary {
color: var(--disabled-text-color);
@ -333,7 +333,7 @@ export class HaFileUpload extends LitElement {
background: none;
border: none;
padding: 0;
font-size: 14px;
font-size: var(--ha-font-size-m);
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -46,7 +46,7 @@ export class HaHeaderBar extends LitElement {
flex: none;
}
.mdc-top-app-bar__title {
font-size: 20px;
font-size: var(--ha-font-size-xl);
padding-inline-start: 24px;
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;
gap: 3px;
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);
line-height: var(--ha-heading-badge-line-height, 20px);
letter-spacing: 0.1px;

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

@ -32,7 +32,7 @@ class HaLabel extends LitElement {
display: inline-flex;
flex-direction: row;
align-items: center;
font-size: 12px;
font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-medium);
line-height: 16px;
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);
}
code {
font-size: 85%;
font-size: var(--ha-font-size-s);
padding: 0.2em 0.4em;
}
pre code {
@ -85,7 +85,7 @@ export class HaMarkdown extends LitElement {
line-height: initial;
}
h2 {
font-size: 1.5em;
font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-bold);
}
hr {

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

@ -154,7 +154,7 @@ export class HaSelectBox extends LitElement {
}
.option .content .text .label {
color: var(--primary-text-color);
font-size: 14px;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
line-height: 20px;
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);
}
.title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding-top: 16px;
overflow: hidden;
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;
}
.title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding-top: 16px;
overflow: hidden;
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,
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);
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
font-size: var(--mdc-typography-body2-font-size, 0.875rem);
font-weight: var(
--mdc-typography-body2-font-weight,
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,
inherit
);
font-size: 20px;
font-size: var(--ha-font-size-xl);
align-items: center;
padding-left: 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 {
font-family: var(--ha-font-family-body);
display: none;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
font-size: 14px;
}
:host([expanded]) ha-md-list-item .item-text {
display: block;
@ -1008,8 +1008,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.subheader {
color: var(--sidebar-text-color);
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
font-size: 14px;
padding: 16px;
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 {
font-size: 20px;
font-size: var(--ha-font-size-xl);
padding-inline-start: 24px;
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;
}
.mdc-top-app-bar__title {
font-size: 20px;
font-size: var(--ha-font-size-xl);
padding-inline-start: 24px;
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;
width: 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: 1px solid var(--ha-marker-color, var(--primary-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 {
padding: 8px;
font-size: 90%;
font-size: var(--ha-font-size-s);
background: rgba(80, 80, 80, 0.9) !important;
color: white !important;
border-radius: 4px;
@ -688,7 +688,7 @@ export class HaMap extends ReactiveElement {
border-radius: 20px;
text-align: center;
color: var(--text-primary-color);
font-size: 14px;
font-size: var(--ha-font-size-m);
}
.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;
}
.breadcrumb .title {
font-size: 32px;
font-size: var(--ha-font-size-4xl);
line-height: 1.2;
font-weight: var(--ha-font-weight-bold);
margin: 0;
@ -976,7 +976,7 @@ export class HaMediaPlayerBrowse extends LitElement {
padding-right: 8px;
}
.breadcrumb .previous-title {
font-size: 14px;
font-size: var(--ha-font-size-m);
padding-bottom: 8px;
color: var(--secondary-text-color);
overflow: hidden;
@ -985,7 +985,7 @@ export class HaMediaPlayerBrowse extends LitElement {
--mdc-icon-size: 14px;
}
.breadcrumb .subtitle {
font-size: 16px;
font-size: var(--ha-font-size-l);
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
@ -1144,7 +1144,7 @@ export class HaMediaPlayerBrowse extends LitElement {
}
.child .title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding-top: 16px;
padding-left: 2px;
overflow: hidden;
@ -1209,7 +1209,7 @@ export class HaMediaPlayerBrowse extends LitElement {
}
:host([narrow]) .breadcrumb .title {
font-size: 24px;
font-size: var(--ha-font-size-2xl);
}
:host([narrow]) .header {
padding: 0;

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

@ -34,15 +34,15 @@ export class HaTileInfo extends LitElement {
width: 100%;
}
.primary {
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--primary-text-color);
}
.secondary {
font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-normal);
font-size: 12px;
line-height: 16px;
letter-spacing: 0.4px;
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;
}
.number text {
font-size: 10px;
font-size: var(--ha-font-size-xs);
fill: var(--text-primary-color);
}
path.icon {

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

@ -59,10 +59,10 @@ class PersonBadge extends LitElement {
text-decoration: none;
color: var(--text-light-primary-color, var(--primary-text-color));
overflow: hidden;
font-size: var(--person-badge-font-size, 1em);
font-size: var(--person-badge-font-size, var(--ha-font-size-m));
}
.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;
}
.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,
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);
font-weight: var(
--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;
--control-button-border-radius: 28px;
--mdc-icon-size: 24px;
font-size: 24px;
font-size: var(--ha-font-size-2xl);
}
.submit {
--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 {
font-style: normal;
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium);
font-size: 16px;
line-height: 24px;
letter-spacing: 0.1px;
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,
var(--gradient)
);
--control-slider-tooltip-font-size: 20px;
--control-slider-tooltip-font-size: var(--ha-font-size-xl);
--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 {
opacity: 0.8;
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 16px;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.current .value {
font-size: 22px;
font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-medium);
line-height: 28px;
direction: ltr;
@ -554,7 +554,7 @@ class MoreInfoClimate extends LitElement {
.target-humidity {
width: 90px;
font-size: 200%;
font-size: var(--ha-font-size-3xl);
margin: auto;
direction: ltr;
}

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

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

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

@ -165,7 +165,7 @@ class MoreInfoLock extends LitElement {
moreInfoControlStyle,
css`
ha-control-button {
font-size: 14px;
font-size: var(--ha-font-size-m);
height: 60px;
--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 {
opacity: 0.8;
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 16px;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.current .value {
font-size: 22px;
font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-medium);
line-height: 28px;
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 {
position: absolute;
font-size: 24px;
font-size: var(--ha-font-size-2xl);
top: 1px;
}
.state,
.temp-attribute .temp {
font-size: 28px;
font-size: var(--ha-font-size-3xl);
line-height: 1.2;
}
.attribute {
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 1;
}
@ -570,7 +570,7 @@ class MoreInfoWeather extends LitElement {
}
.forecast .temp {
font-size: 16px;
font-size: var(--ha-font-size-l);
}
.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 {
color: var(--primary-text-color);
font-size: 20px;
font-size: var(--ha-font-size-xl);
line-height: 24px;
}
.title .breadcrumb {
color: var(--secondary-text-color);
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 16px;
--mdc-icon-size: 16px;
padding: 4px;

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

@ -467,8 +467,8 @@ class DialogRestart extends LitElement {
background-color: var(--divider-color);
}
.section {
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
font-size: 14px;
line-height: 20px;
margin: 8px 0 4px 0;
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;
align-items: center;
justify-content: center;
font-size: 24px;
font-size: var(--ha-font-size-2xl);
}
.access .round-icon {
color: #00aef8;
background-color: #cceffe;
}
.feature h2 {
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium);
font-size: 16px;
line-height: 24px;
margin-top: 0;
margin-bottom: 8px;
}
.feature p {
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
font-size: 14px;
line-height: 20px;
margin: 0;
}

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

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

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

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

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

@ -97,7 +97,7 @@ class HassSubpage extends LitElement {
.toolbar {
display: flex;
align-items: center;
font-size: 20px;
font-size: var(--ha-font-size-xl);
height: var(--header-height);
padding: 8px 12px;
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-inline-start: 4px;
margin-inline-end: initial;
font-size: 14px;
font-size: var(--ha-font-size-m);
width: max-content;
cursor: initial;
direction: var(--direction);
@ -822,8 +822,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color);
line-height: 16px;
text-align: center;
@ -857,7 +857,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
justify-content: space-between;
padding: 8px 12px;
box-sizing: border-box;
font-size: 14px;
font-size: var(--ha-font-size-m);
--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 {
font-size: 20px;
font-size: var(--ha-font-size-xl);
height: var(--header-height);
background-color: var(--sidebar-background-color);
font-weight: var(--ha-font-weight-normal);
@ -259,7 +259,7 @@ class HassTabsSubpage extends LitElement {
#tabbar {
display: flex;
font-size: 14px;
font-size: var(--ha-font-size-m);
overflow: hidden;
}
@ -278,7 +278,7 @@ class HassTabsSubpage extends LitElement {
border-top: 1px solid var(--divider-color);
justify-content: space-around;
z-index: 2;
font-size: 12px;
font-size: var(--ha-font-size-s);
width: 100%;
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 {
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 20px;
}

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

@ -528,7 +528,10 @@ class OnboardingLocation extends LitElement {
--mdc-typography-caption-font-family,
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(
--mdc-typography-caption-font-weight,
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;
}
h2 {
font-size: 24px;
font-size: var(--ha-font-size-2xl);
display: flex;
align-items: center;
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;
}
h2 {
font-size: 22px;
font-size: var(--ha-font-size-xl);
margin-top: 24px;
margin-bottom: 8px;
font-style: normal;

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

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

2
src/onboarding/styles.ts
View File

@ -5,8 +5,8 @@ export const onBoardingStyles = css`
padding: 32px;
}
h1 {
font-size: var(--ha-font-size-3xl);
font-weight: var(--ha-font-weight-normal);
font-size: 28px;
line-height: 36px;
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;
}
.label {
font-size: 12px;
font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-medium);
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 {
background-color: var(--table-header-background-color);
color: var(--primary-text-color);
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-bold);
text-transform: uppercase;
}
@ -587,7 +587,7 @@ export class HAFullCalendar extends LitElement {
a.fc-daygrid-day-number {
float: none !important;
font-size: 12px;
font-size: var(--ha-font-size-s);
cursor: pointer;
}
@ -657,13 +657,13 @@ export class HAFullCalendar extends LitElement {
}
.fc-list-day-text {
font-size: 16px;
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-normal);
}
.fc-list-day-side-text {
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-normal);
font-size: 16px;
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-font-size: var(
--mdc-typography-headline6-font-size,
1.25rem
var(--ha-font-size-l)
);
--mdc-typography-button-font-weight: var(
--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;
}
.header-toolbar .selected-txt {
font-size: 16px;
font-size: var(--ha-font-size-l);
}
.header-toolbar .header-btns {
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;
}
.header h2 {
font-size: 14px;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
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;
left: 0px;
text-transform: uppercase;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-bold);
font-size: 14px;
background-color: var(--divider-color, #e0e0e0);
color: var(--text-primary-color);
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;
align-items: center;
justify-content: center;
font-size: 20px;
font-size: var(--ha-font-size-xl);
height: var(--header-height);
padding: 4px;
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;
left: 0px;
text-transform: uppercase;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-bold);
font-size: 14px;
background-color: var(--primary-color);
color: var(--text-primary-color);
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;
align-items: center;
gap: 16px;
font-size: 16px;
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-normal);
line-height: 24px;
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-inline-end: 4px;
margin-inline-start: initial;
font-size: 14px;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
line-height: 24px;
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;
}
.heading {
font-size: 22px;
font-size: var(--ha-font-size-xl);
font-style: normal;
font-weight: var(--ha-font-weight-normal);
line-height: 28px;
@ -136,7 +136,7 @@ class HaBackupSummaryCard extends LitElement {
white-space: nowrap;
}
.description {
font-size: 14px;
font-size: var(--ha-font-size-m);
font-style: normal;
font-weight: var(--ha-font-weight-normal);
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 {
margin: 0;
flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal;
font-weight: var(--ha-font-weight-normal);
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 {
margin: 0;
flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal;
font-weight: var(--ha-font-weight-normal);
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;
border: none;
padding: 0;
font-size: 14px;
font-size: var(--ha-font-size-m);
color: var(--primary-color);
text-decoration: underline;
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 {
margin: 0;
flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal;
font-weight: var(--ha-font-weight-normal);
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 {
margin: 0;
flex: 1;
font-size: var(--ha-font-size-xl);
font-family: var(--ha-font-family-code);
font-size: 20px;
font-style: normal;
font-weight: var(--ha-font-weight-normal);
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
? html`
<span
style="display: flex; align-items: center; font-size: 14px;"
style="display: flex; align-items: center; font-size: var(--ha-font-size-m);"
>
+${agentsMore}
</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 {
display: flex;
gap: 16px;
font-size: 22px;
font-size: var(--ha-font-size-xl);
align-items: center;
padding: 16px;
}

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

@ -244,7 +244,7 @@ class HaConfigSystemNavigation extends LitElement {
}
.title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding: 16px;
padding-bottom: 0;
}
@ -269,7 +269,7 @@ class HaConfigSystemNavigation extends LitElement {
}
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;
}
.title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding: 16px;
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`
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 [
css`
.title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding: 16px;
padding-bottom: 0;
}
@ -188,7 +188,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
text-decoration: underline;
}
ha-md-list-item {
font-size: 16px;
font-size: var(--ha-font-size-l);
}
div[slot="start"] {
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;
}
.name {
font-size: 14px;
font-size: var(--ha-font-size-m);
}
.name:dir(rtl) {
margin-inline-start: 8px;

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

@ -1553,7 +1553,7 @@ ${rejected
margin-top: 20px;
}
.header-toolbar .selected-txt {
font-size: 16px;
font-size: var(--ha-font-size-l);
}
.header-toolbar .header-btns {
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);
width: 100%;
opacity: var(--dark-primary-opacity);
font-size: 14px;
font-size: var(--ha-font-size-m);
padding-bottom: 20px;
}

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