fix(ui): Cyrillic/Greek weights, html lang, weight normalisation (#1780)

Load Roboto 600/700 and DM Sans 700 so Cyrillic and Greek headings render
real semibold and bold faces instead of a synthetic bold, keep
<html lang> in step with the UI language, and move every font weight onto
the 400/500/600/700 scale (JetBrains Mono at 500 or lighter; the dashboard
LIVE badge now uses the interface font at 700).

Add the `styles:font-weights:validate` ratchet guard and its CI step. It
reads stylesheets much as Sass and the browser do (cascade, layers,
mixins, content blocks, `@extend`, `@at-root`, `:is()`/`:where()`,
keyframes) and lists what it deliberately does not trace in its header.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Opus 5.5 authored and GitHub committed 2026-10-04 08:55:23 +02:00
1 parent ab8460338a
commit e8b181fcea
52 files changed
+11216 -97

No files matched your search

@@ -192,7 +192,7 @@
background: transparent;
color: var(--app-heading-color);
font-size: 0.93rem;
font-weight: 650;
font-weight: 600;
line-height: 1.3;
text-align: left;
transition: color 140ms ease;
@@ -218,7 +218,7 @@
padding: 8px 4px;
background: transparent;
color: var(--mat-sys-primary);
font-weight: 650;
font-weight: 600;
}
.download-library__episode-label {
@@ -33,7 +33,7 @@
.downloaded-series-dialog__eyebrow {
color: var(--app-eyebrow-color);
font-size: 0.68rem;
font-weight: 750;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
@@ -93,7 +93,7 @@ mat-dialog-content {
color: var(--mat-sys-primary);
font-family: var(--mat-sys-label-small-font);
font-size: 0.73rem;
font-weight: 750;
font-weight: 700;
text-align: center;
}
@@ -53,7 +53,7 @@
h1 {
margin: 0;
font-size: clamp(1.25rem, 1.8vw, 1.6rem);
font-weight: 680;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.035em;
}
@@ -86,7 +86,7 @@
'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono',
monospace;
font-variant-numeric: tabular-nums;
font-weight: 650;
font-weight: 500;
}
}
@@ -188,7 +188,7 @@
background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
font: inherit;
font-size: 0.79rem;
font-weight: 620;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition:
@@ -271,7 +271,7 @@
margin: 0;
color: var(--app-heading-color, var(--mat-sys-on-surface));
font-size: 1rem;
font-weight: 670;
font-weight: 600;
letter-spacing: -0.015em;
}
@@ -44,7 +44,7 @@ mat-card-content {
--error-empty-illustration-size: clamp(132px, 15vw, 180px);
--error-empty-max-width: min(270px, 100%);
--error-empty-title-size: clamp(1.15rem, 1.35vw, 1.4rem);
--error-empty-title-weight: 610;
--error-empty-title-weight: 600;
--error-empty-title-spacing: -0.006em;
--error-empty-copy-gap: 4px;
--error-empty-description-opacity: 0.82;
@@ -193,7 +193,7 @@ mat-card {
--error-empty-max-width: min(480px, 100%);
--error-empty-title-size: clamp(1.45rem, 2vw, 1.9rem);
--error-empty-description-size: clamp(0.95rem, 1.15vw, 1.05rem);
--error-empty-title-weight: 660;
--error-empty-title-weight: 600;
--error-empty-title-spacing: -0.014em;
--error-empty-copy-gap: 10px;
--error-empty-description-line-height: 1.44;
@@ -211,7 +211,7 @@ mat-card {
--error-empty-max-width: 310px;
--error-empty-title-size: 1.3rem;
--error-empty-description-size: 0.9rem;
--error-empty-title-weight: 640;
--error-empty-title-weight: 600;
--error-empty-copy-gap: 8px;
}
}
@@ -12,7 +12,7 @@
--error-view-copy-width: var(--error-empty-max-width, 420px);
--error-view-copy-gap: var(--error-empty-copy-gap, 8px);
--error-view-title-size: var(--error-empty-title-size, 1.55rem);
--error-view-title-weight: var(--error-empty-title-weight, 640);
--error-view-title-weight: var(--error-empty-title-weight, 600);
--error-view-title-spacing: var(--error-empty-title-spacing, -0.012em);
--error-view-description-size: var(--error-empty-description-size, 0.98rem);
--error-view-description-line-height: var(
@@ -27,7 +27,7 @@
.empty-state-title {
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0;
opacity: 0.6;
@@ -68,7 +68,7 @@
margin: 0;
white-space: nowrap;
font-size: 1.2rem;
font-weight: 650;
font-weight: 600;
letter-spacing: -0.02em;
}
@@ -135,7 +135,7 @@
h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text-color);
}
@@ -150,7 +150,7 @@ app-unified-live-tab {
.empty-title {
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0;
}
@@ -2,7 +2,7 @@
@include detail-view.base(
$season-title-font-size: 1.2rem,
$season-title-font-weight: 650,
$season-title-font-weight: 600,
$season-title-letter-spacing: -0.02em,
$episode-title-font-size: 1rem,
$episode-title-letter-spacing: -0.01em
@@ -115,7 +115,7 @@
.empty-state-title {
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 8px;
text-wrap: balance;
@@ -18,7 +18,7 @@
.recently-added-page__title {
margin: 0;
font-size: 1.5rem;
font-weight: 650;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--app-heading-color, #d8dce8);
@@ -131,7 +131,7 @@
.no-results-title {
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
@@ -69,7 +69,7 @@
margin: 0;
font-size: 1.3rem;
line-height: 1.2;
font-weight: 650;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--app-heading-color, var(--mat-sys-on-surface));
}
@@ -169,7 +169,7 @@
.channel-stat__value {
font-size: 1.1rem;
font-weight: 650;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--app-heading-color, var(--mat-sys-on-surface));
overflow: hidden;
@@ -179,6 +179,8 @@
&--mono {
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
font-size: 0.92rem;
// JetBrains Mono is bundled up to 500; the value's 600 would be faked.
font-weight: 500;
}
&--empty {
@@ -57,7 +57,7 @@
.empty-source-state__title {
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
margin: 0;
letter-spacing: -0.01em;
}
@@ -32,7 +32,7 @@
.empty-favorites {
margin-top: 40px;
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
}
@@ -220,7 +220,7 @@
&__title {
font-size: 0.85rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 4px;
text-wrap: balance;
@@ -310,7 +310,7 @@
.empty-state-title {
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
@@ -32,7 +32,7 @@
.empty-recent {
margin-top: 40px;
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
}
@@ -41,7 +41,7 @@ $font-mono: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
// size as the hint and the action beside it, so all three scanned as
// column headers over the list.
font-size: 15px;
font-weight: 650;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--app-on-surface);
overflow: hidden;
@@ -41,7 +41,7 @@
background: rgb(255 148 35 / 15%);
color: #ffb24c;
font-size: 0.78rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0;
line-height: 1.1;
text-transform: uppercase;
@@ -66,7 +66,7 @@
margin: 20px 0 0;
color: #fff;
font-size: 1.65rem;
font-weight: 760;
font-weight: 700;
letter-spacing: 0;
line-height: 1.05;
}
@@ -98,7 +98,7 @@
background: rgb(255 255 255 / 5%);
color: rgb(255 255 255 / 68%);
font-size: 0.78rem;
font-weight: 620;
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
@@ -267,7 +267,7 @@
.web-player-diagnostic__player-label {
overflow: hidden;
font-size: 0.95rem;
font-weight: 760;
font-weight: 700;
line-height: 1.05;
text-overflow: ellipsis;
white-space: nowrap;
@@ -289,7 +289,7 @@
min-width: 0;
color: currentColor;
font-size: 0.78rem;
font-weight: 680;
font-weight: 600;
line-height: 1.1;
opacity: 0.82;
overflow-wrap: anywhere;
@@ -325,7 +325,7 @@
cursor: pointer;
font: inherit;
font-size: 0.86rem;
font-weight: 640;
font-weight: 600;
line-height: 1.2;
}
@@ -196,7 +196,7 @@
overflow: hidden;
color: var(--pc-text);
font-size: 17px;
font-weight: 650;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
@@ -304,7 +304,7 @@
.player-settings__seg-item--selected {
color: var(--pc-accent-violet, #b599ff);
background: rgba(181, 153, 255, 0.2);
font-weight: 650;
font-weight: 600;
}
// The default value selected is "nothing changed": neutral, not violet.
+4 -2
View File
@@ -68,7 +68,7 @@
margin: 0;
font-size: 1.3rem;
line-height: 1.2;
font-weight: 650;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--app-heading-color, var(--mat-sys-on-surface));
}
@@ -184,7 +184,7 @@
.account-stat__value {
font-size: 1.3rem;
font-weight: 650;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--app-heading-color, var(--mat-sys-on-surface));
overflow-wrap: anywhere;
@@ -360,6 +360,8 @@
.account-chip--mono {
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
// JetBrains Mono is bundled up to 500; the chip's 600 would be faked.
font-weight: 500;
text-transform: none;
}
@@ -690,14 +690,6 @@
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(
--font-mono,
ui-monospace,
'SF Mono',
'JetBrains Mono',
Menlo,
monospace
);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
@@ -65,7 +65,7 @@
.empty-title {
font-size: 1.05rem;
font-weight: 520;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
@@ -44,7 +44,7 @@
color: var(--mat-sys-on-surface);
font: inherit;
font-size: 0.94rem;
font-weight: 450;
font-weight: 500;
width: 100%;
min-width: 0;
@@ -188,7 +188,7 @@
.palette-command__label {
font-size: 0.84rem;
font-weight: 530;
font-weight: 500;
letter-spacing: -0.006em;
white-space: nowrap;
overflow: hidden;
@@ -104,7 +104,7 @@ mat-card-content {
--error-empty-illustration-size: clamp(132px, 15vw, 180px);
--error-empty-max-width: min(270px, 100%);
--error-empty-title-size: clamp(1.15rem, 1.35vw, 1.4rem);
--error-empty-title-weight: 610;
--error-empty-title-weight: 600;
--error-empty-title-spacing: -0.006em;
--error-empty-copy-gap: 4px;
--error-empty-description-opacity: 0.82;
@@ -12,7 +12,7 @@
--error-view-copy-width: var(--error-empty-max-width, 420px);
--error-view-copy-gap: var(--error-empty-copy-gap, 8px);
--error-view-title-size: var(--error-empty-title-size, 1.55rem);
--error-view-title-weight: var(--error-empty-title-weight, 640);
--error-view-title-weight: var(--error-empty-title-weight, 600);
--error-view-title-spacing: var(--error-empty-title-spacing, -0.012em);
--error-view-description-size: var(--error-empty-description-size, 0.98rem);
--error-view-description-line-height: var(
@@ -117,7 +117,7 @@
border: 1px solid var(--shortcut-border);
border-radius: 8px;
font-size: 0.76rem;
font-weight: 650;
font-weight: 600;
line-height: 1;
white-space: nowrap;
@@ -186,7 +186,7 @@
margin: 0;
color: var(--shortcut-text);
font-size: 0.74rem;
font-weight: 750;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
@@ -273,7 +273,7 @@
0 1px 0 color-mix(in srgb, white 28%, transparent);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.72rem;
font-weight: 750;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
@@ -52,7 +52,7 @@
h3 {
margin: 0;
font-size: 1.55rem;
font-weight: 650;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--app-heading-color);
}