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

Use ha-font-weight typography css tokens (#25374)

Browse Source 
Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Wendelin 2025-05-08 17:11:53 +02:00 committed by GitHub
parent 6692d9c6aa
commit ba4ec960c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
158 changed files with 219 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cast/src/launcher/layout/hc-connect.ts
View File

@ -302,7 +302,7 @@ export class HcConnect extends LitElement {
}
.error {
color: red;
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.error a {

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

@ -113,7 +113,7 @@ class HcLayout extends LitElement {
}
:host ::slotted(.section-header) {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
padding: 4px 16px;
text-transform: uppercase;
}

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

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

2
gallery/src/pages/components/ha-control-button.ts
View File

@ -150,7 +150,7 @@ export class DemoHaBarButton extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-button-icon-color: var(--primary-color);

2
gallery/src/pages/components/ha-control-number-buttons.ts
View File

@ -86,7 +86,7 @@ export class DemoHarControlNumberButtons extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
color: #2196f3;

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

@ -125,7 +125,7 @@ export class DemoHaControlSelectMenu extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-button-icon-color: var(--primary-color);

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

@ -181,7 +181,7 @@ export class DemoHaControlSelect extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--mdc-icon-size: 24px;

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

@ -144,7 +144,7 @@ export class DemoHaBarSlider extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-slider-color: #ffcf4c;

2
gallery/src/pages/components/ha-control-switch.ts
View File

@ -112,7 +112,7 @@ export class DemoHaControlSwitch extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-switch-on-color: var(--green-color);

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

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

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

@ -123,7 +123,7 @@ export class DemoHaSelectBox extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
margin-bottom: 8px;
display: block;
}

2
gallery/src/pages/date-time/date-time-numeric.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time-seconds.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time-short-year.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time-short.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTime extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date.ts
View File

@ -92,7 +92,7 @@ export class DemoDateTimeDate extends LitElement {
static styles = css`
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/time-seconds.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/time-weekday.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/time.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeTime extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

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

@ -434,7 +434,7 @@ class HassioAddonConfig extends LitElement {
padding: 12px 16px 16px;
display: block;
margin-block: 0px;
font-weight: normal;
font-weight: var(--ha-font-weight-normal);
}
.card-actions.right {
justify-content: flex-end;

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

@ -391,7 +391,7 @@ export class HassioBackups extends LitElement {
top: -4px;
}
.selected-txt {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
padding-left: 16px;
padding-inline-start: 16px;
padding-inline-end: initial;

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

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

2
hassio/src/entrypoint.ts
View File

@ -13,7 +13,7 @@ body {
font-family: ${haFontFamilyBody};
-moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
-webkit-font-smoothing: ${haFontSmoothing};
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
margin: 0;
padding: 0;
height: 100vh;

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

@ -345,7 +345,7 @@ class HassioIngressView extends LitElement {
padding: 0 16px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;

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

@ -152,7 +152,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
}
h1 {
font-size: 28px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
margin-top: 16px;
margin-bottom: 16px;
}

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

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

8
src/components/data-table/ha-data-table.ts
View File

@ -933,7 +933,7 @@ export class HaDataTable extends LitElement {
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
letter-spacing: 0.0178571429em;
text-decoration: inherit;
text-transform: inherit;
@ -1053,7 +1053,7 @@ export class HaDataTable extends LitElement {
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
letter-spacing: 0.0178571429em;
text-decoration: inherit;
text-transform: inherit;
@ -1175,7 +1175,7 @@ export class HaDataTable extends LitElement {
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: 0.875rem;
line-height: 1.375rem;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
letter-spacing: 0.0071428571em;
text-decoration: inherit;
text-transform: inherit;
@ -1199,7 +1199,7 @@ export class HaDataTable extends LitElement {
padding-inline-start: 12px;
padding-inline-end: initial;
width: 100%;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
display: flex;
align-items: center;
cursor: pointer;

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

@ -129,7 +129,7 @@ class HaAlert extends LitElement {
}
.title {
margin-top: 2px;
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.action mwc-button,
.action ha-icon-button {

2
src/components/ha-ansi-to-html.ts
View File

@ -56,7 +56,7 @@ export class HaAnsiToHtml extends LitElement {
overflow-wrap: break-word;
}
.bold {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.italic {
font-style: italic;

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

@ -97,7 +97,7 @@ export class HaBadge extends LitElement {
.label {
font-size: 10px;
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
line-height: 10px;
letter-spacing: 0.1px;
color: var(--secondary-text-color);
@ -105,7 +105,7 @@ export class HaBadge extends LitElement {
.content {
font-size: var(--ha-badge-font-size, var(--ha-font-size-s));
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
line-height: 16px;
letter-spacing: 0.1px;
color: var(--primary-text-color);

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

@ -389,7 +389,10 @@ export class HaBaseTimeInput extends LitElement {
);
font-size: var(--mdc-typography-body2-font-size, 0.875rem);
line-height: var(--mdc-typography-body2-line-height, 1.25rem);
font-weight: var(--mdc-typography-body2-font-weight, 400);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
letter-spacing: var(
--mdc-typography-body2-letter-spacing,
0.0178571429em

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

@ -48,7 +48,7 @@ export class HaCard extends LitElement {
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
font-weight: var(--ha-font-weight-normal);
}
:host ::slotted(.card-content:not(:first-child)),

2
src/components/ha-climate-state.ts
View File

@ -154,7 +154,7 @@ class HaClimateState extends LitElement {
}
.state-label {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.unit {

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

@ -59,7 +59,7 @@ export class HaControlButton extends LitElement {
box-sizing: border-box;
line-height: inherit;
font-family: var(--ha-font-family-body);
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
outline: none;
overflow: hidden;
background: none;

2
src/components/ha-control-number-buttons.ts
View File

@ -194,7 +194,7 @@ export class HaControlNumberButton extends LitElement {
color: var(--primary-text-color);
-webkit-tap-highlight-color: transparent;
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
transition: color 180ms ease-in-out;
}
:host([disabled]) {

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

@ -208,7 +208,7 @@ export class HaControlSelectMenu extends SelectBase {
width: 100%;
user-select: none;
font-style: normal;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
letter-spacing: 0.25px;
}
.content {

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

@ -207,7 +207,7 @@ export class HaControlSelect extends LitElement {
outline: none;
transition: box-shadow 180ms ease-in-out;
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
color: var(--primary-text-color);
user-select: none;
-webkit-tap-highlight-color: transparent;

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

@ -55,7 +55,7 @@ export class HaDialogHeader extends LitElement {
.header-title {
font-size: 22px;
line-height: 28px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
}
.header-subtitle {
font-size: 14px;

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

@ -85,7 +85,7 @@ export class HaDialog extends DialogBase {
var(--dialog-backdrop-filter, none)
);
--mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
--mdc-typography-headline6-font-weight: 400;
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
--mdc-typography-headline6-font-size: 1.574rem;
}
.mdc-dialog__actions {

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

@ -188,7 +188,7 @@ export class HaExpansionPanel extends LitElement {
align-items: center;
cursor: pointer;
overflow: hidden;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
outline: none;
}
#summary.noCollapse {

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

@ -324,7 +324,7 @@ export class HaFileUpload extends LitElement {
box-sizing: border-box;
}
.header {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
.progress {
color: var(--secondary-text-color);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5
src/components/ha-form/ha-form-boolean.ts
View File

@ -71,7 +71,10 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
box-sizing: border-box;
color: var(--secondary-text-color);
font-size: 0.875rem;
font-weight: var(--mdc-typography-body2-font-weight, 400);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
}
`;
}

2
src/components/ha-form/ha-form-constant.ts
View File

@ -20,7 +20,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
display: block;
}
.label {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

2
src/components/ha-humidifier-state.ts
View File

@ -103,7 +103,7 @@ class HaHumidifierState extends LitElement {
}
.state-label {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.unit {

7
src/components/ha-label-badge.ts
View File

@ -91,7 +91,7 @@ class HaLabelBadge extends LitElement {
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
overflow: hidden;
text-transform: uppercase;
text-overflow: ellipsis;
@ -102,7 +102,10 @@ class HaLabelBadge extends LitElement {
margin-top: 1em;
font-size: var(--ha-label-badge-title-font-size, 0.9em);
width: var(--ha-label-badge-title-width, 5em);
font-weight: var(--ha-label-badge-title-font-weight, 400);
font-weight: var(
--ha-label-badge-title-font-weight,
var(--ha-font-weight-normal)
);
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;

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

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

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

@ -86,7 +86,7 @@ export class HaMarkdown extends LitElement {
}
h2 {
font-size: 1.5em;
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
hr {
border-color: var(--divider-color);

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

@ -155,7 +155,7 @@ export class HaSelectBox extends LitElement {
.option .content .text .label {
color: var(--primary-text-color);
font-size: 14px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
line-height: 20px;
overflow: hidden;
white-space: nowrap;
@ -164,7 +164,7 @@ export class HaSelectBox extends LitElement {
.option .content .text .description {
color: var(--secondary-text-color);
font-size: 13px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
line-height: 16px;
}
img {

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

@ -45,7 +45,7 @@ export class HaActionSelector extends LitElement {
label {
display: block;
margin-bottom: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

5
src/components/ha-selector/ha-selector-boolean.ts
View File

@ -62,7 +62,10 @@ export class HaBooleanSelector extends LitElement {
box-sizing: border-box;
color: var(--secondary-text-color);
font-size: 0.875rem;
font-weight: var(--mdc-typography-body2-font-weight, 400);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
}
`;
}

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

@ -36,7 +36,7 @@ export class HaConditionSelector extends LitElement {
label {
display: block;
margin-bottom: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

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

@ -45,7 +45,7 @@ export class HaTriggerSelector extends LitElement {
label {
display: block;
margin-bottom: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

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

@ -71,7 +71,10 @@ export class HaSettingsRow extends LitElement {
-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, 400);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
line-height: normal;
color: var(--secondary-text-color);
}

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

@ -829,7 +829,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
padding: 0 4px;
border-bottom: 1px solid transparent;
white-space: nowrap;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(
--sidebar-menu-button-text-color,
var(--primary-text-color)
@ -941,7 +941,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-md-list-item .item-text {
font-family: var(--ha-font-family-body);
display: none;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
font-size: 14px;
}
:host([expanded]) ha-md-list-item .item-text {
@ -964,7 +964,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
align-items: center;
min-width: 8px;
border-radius: 10px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
line-height: normal;
background-color: var(--accent-color);
padding: 2px 6px;
@ -998,7 +998,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.subheader {
color: var(--sidebar-text-color);
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
font-size: 14px;
padding: 16px;
white-space: nowrap;
@ -1013,7 +1013,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
color: var(--sidebar-background-color);
background-color: var(--sidebar-text-color);
padding: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
.menu ha-icon-button {

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

@ -38,7 +38,7 @@ class HaTip extends LitElement {
}
.prefix {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

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

@ -16,7 +16,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
padding-top: var(--header-height);
}
.mdc-top-app-bar {
--mdc-typography-headline6-font-weight: 400;
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
background-color: var(
--app-header-background-color,

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

@ -16,7 +16,7 @@ export class HaTopAppBar extends TopAppBarBase {
padding-top: var(--header-height);
}
.mdc-top-app-bar {
--mdc-typography-headline6-font-weight: 400;
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
background-color: var(
--app-header-background-color,

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

@ -268,7 +268,7 @@ export class TopAppBarBaseBase extends BaseElement {
);
}
.mdc-top-app-bar {
--mdc-typography-headline6-font-weight: 400;
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
background-color: var(
--app-header-background-color,

2
src/components/ha-water_heater-state.ts
View File

@ -71,7 +71,7 @@ export class HaWaterHeaterState extends LitElement {
}
.state-label {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.label {

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

@ -967,7 +967,7 @@ export class HaMediaPlayerBrowse extends LitElement {
.breadcrumb .title {
font-size: 32px;
line-height: 1.2;
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
margin: 0;
overflow: hidden;
display: -webkit-box;

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

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

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

@ -16,7 +16,10 @@ export const configFlowContentStyles = css`
);
font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
line-height: var(--mdc-typography-headline6-line-height, 2rem);
font-weight: var(--mdc-typography-headline6-font-weight, 500);
font-weight: var(
--mdc-typography-headline6-font-weight,
var(--ha-font-weight-medium)
);
letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
text-transform: var(--mdc-typography-headline6-text-transform, inherit);

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

@ -74,13 +74,13 @@ export class HaMoreInfoStateHeader extends LitElement {
}
.state {
font-style: normal;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
font-size: 36px;
line-height: 44px;
}
.last-changed {
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
font-size: 16px;
line-height: 24px;
letter-spacing: 0.1px;

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

@ -538,7 +538,7 @@ class MoreInfoClimate extends LitElement {
.current .value {
font-size: 22px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
line-height: 28px;
direction: ltr;
}

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

@ -240,7 +240,7 @@ class MoreInfoHumidifier extends LitElement {
}
.current .value {
font-size: 22px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
line-height: 28px;
direction: ltr;
}

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

@ -182,7 +182,7 @@ class MoreInfoLock extends LitElement {
align-items: center;
flex-direction: row;
gap: 8px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
color: var(--success-color);
}
ha-control-button-group.jammed {

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

@ -226,7 +226,7 @@ class MoreInfoScript extends LitElement {
margin-bottom: 16px;
}
.fields .title {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
ha-control-button ha-svg-icon {
z-index: -1;

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

@ -242,7 +242,7 @@ class MoreInfoWaterHeater extends LitElement {
.current .value {
font-size: 22px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
line-height: 28px;
direction: ltr;
}

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

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

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

@ -160,14 +160,14 @@ export class CloudStepIntro extends LitElement {
background-color: #cceffe;
}
.feature h2 {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
font-size: 16px;
line-height: 24px;
margin-top: 0;
margin-bottom: 8px;
}
.feature p {
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
font-size: 14px;
line-height: 20px;
margin: 0;

2
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -267,7 +267,7 @@ export class HaVoiceCommandDialog extends LitElement {
--mdc-theme-primary: var(--secondary-text-color);
--mdc-typography-button-text-transform: none;
--mdc-typography-button-font-size: unset;
--mdc-typography-button-font-weight: 400;
--mdc-typography-button-font-weight: var(--ha-font-weight-normal);
--mdc-typography-button-letter-spacing: var(
--mdc-typography-headline6-letter-spacing,
0.0125em

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

@ -69,7 +69,7 @@ class HassErrorScreen extends LitElement {
padding: 8px 12px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;

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

@ -69,7 +69,7 @@ class HassLoadingScreen extends LitElement {
padding: 8px 12px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;

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

@ -101,7 +101,7 @@ class HassSubpage extends LitElement {
height: var(--header-height);
padding: 8px 12px;
background-color: var(--app-header-background-color);
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;

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

@ -789,7 +789,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 20px;
text-align: center;
@ -822,7 +822,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
font-size: 11px;
background-color: var(--primary-color);
line-height: 16px;

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

@ -233,7 +233,7 @@ class HassTabsSubpage extends LitElement {
font-size: 20px;
height: var(--header-height);
background-color: var(--sidebar-background-color);
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
border-bottom: 1px solid var(--divider-color);
box-sizing: border-box;
}

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

@ -529,7 +529,10 @@ class OnboardingLocation extends LitElement {
var(--mdc-typography-font-family, var(--ha-font-family-body))
);
font-size: var(--mdc-typography-caption-font-size, 0.75rem);
font-weight: var(--mdc-typography-caption-font-weight, 400);
font-weight: var(
--mdc-typography-caption-font-weight,
var(--ha-font-weight-normal)
);
letter-spacing: var(
--mdc-typography-caption-letter-spacing,
0.0333333333em

2
src/onboarding/onboarding-welcome-link.ts
View File

@ -42,7 +42,7 @@ class OnboardingWelcomeLink extends LitElement {
flex-direction: column;
align-items: center;
text-align: center;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
padding: 32px 16px;
height: 100%;
}

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

@ -342,7 +342,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
margin-top: 24px;
margin-bottom: 8px;
font-style: normal;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
}
.supervisor-warning {
display: block;

2
src/onboarding/styles.ts
View File

@ -5,7 +5,7 @@ export const onBoardingStyles = css`
padding: 32px;
}
h1 {
font-weight: 400;
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

@ -624,7 +624,7 @@ class DialogCalendarEventEditor extends LitElement {
}
.label {
font-size: 12px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
color: var(--input-label-ink-color);
}
.date-range-details-content {

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

@ -564,7 +564,7 @@ export class HAFullCalendar extends LitElement {
background-color: var(--table-header-background-color);
color: var(--primary-text-color);
font-size: 11px;
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
text-transform: uppercase;
}
@ -658,11 +658,11 @@ export class HAFullCalendar extends LitElement {
.fc-list-day-text {
font-size: 16px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
}
.fc-list-day-side-text {
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
font-size: 16px;
color: var(--primary-color);
}

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

@ -311,7 +311,7 @@ class PanelCalendar extends LitElement {
);
--mdc-typography-button-font-weight: var(
--mdc-typography-headline6-font-weight,
500
var(--ha-font-weight-medium)
);
--mdc-typography-button-letter-spacing: var(
--mdc-typography-headline6-letter-spacing,

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

@ -330,7 +330,7 @@ export class HaConfigApplicationCredentials extends LitElement {
top: -4px;
}
.selected-txt {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
padding-left: 16px;
padding-inline-start: 16px;
direction: var(--direction);

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

@ -655,7 +655,7 @@ class HaConfigAreaPage extends LitElement {
h3 {
margin: 0;
padding: 0 16px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
color: var(--secondary-text-color);
}
img {

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

@ -456,7 +456,7 @@ export class HaConfigAreasDashboard extends LitElement {
}
.header h2 {
font-size: 14px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
margin-top: 28px;
}
.header ha-icon {

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

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

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

@ -532,7 +532,7 @@ export class HaAutomationTrace extends LitElement {
height: var(--header-height);
padding: 4px;
background-color: var(--primary-background-color);
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;

4
src/panels/config/automation/manual-automation-editor.ts
View File

@ -540,7 +540,7 @@ export class HaManualAutomationEditor extends LitElement {
margin-top: -16px;
}
.header .name {
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
flex: 1;
margin-bottom: 16px;
}
@ -549,7 +549,7 @@ export class HaManualAutomationEditor extends LitElement {
}
.header .small {
font-size: small;
font-weight: normal;
font-weight: var(--ha-font-weight-normal);
line-height: 0;
}
`,

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

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

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