angular / angular/components

feat(typography): Support Material 3 Emphasized type styles as system typography tokens

Offen
#33,557 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: theming feature P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Feature Description

Material Design 3 defines **15 emphasized type styles** alongside the baseline scale (Display, Headline, Title, Body, Label × Large/Medium/Small). Emphasized styles mirror baseline size, line height, tracking, and font family, but use a higher weight (typically Medium for headlines/display, Bold for some title roles) for selection, actions, headlines, and editorial emphasis.

[Angular Material’s M3 system tokens](https://github.com/angular/components/blob/main/guides/theming-your-components.md) currently expose only the baseline typescale (`--mat-sys-headline-large`, `--mat-sys-body-medium`, etc.). Apps that follow the [M3 type scale](https://m3.material.io/styles/typography/type-scale-tokens) must manually override weights or invent custom tokens, which diverges from Material components and breaks when the theme’s shorthand `font` tokens bake in Regular weight.

Please emit emphasized typescale tokens (shorthand + subtokens: font, size, line-height, tracking, weight), e.g.:

- `--mat-sys-headline-large-emphasized` (+ `-font`, `-size`, `-line-height`, `-tracking`, `-weight`)
- same pattern for display / headline / title / body / label × large / medium / small

Ideally document usage next to the existing typography system tokens and keep baseline tokens unchanged.

### Use Case

1. **Editorial headlines** — Page and section titles should use emphasized Headline styles per M3, without hardcoding `font-weight: 500` after `font: var(--mat-sys-headline-*)` (which fights the shorthand token).
2. **Consistent theming** — One theme change should update app SCSS and Material surfaces that consume typescale tokens (dialogs, cards, lists), instead of per-component weight overrides.
3. **Selective emphasis** — Keep baseline for body/UI chrome and switch to emphasized for selected/active text, primary CTAs, or important labels, matching Compose/Android `*Emphasized` APIs and the M3 Expressive type scale.
4. **Forward compatibility** — Apps can adopt official tokens now and drop temporary theme overrides once Angular Material ships the full 30-style scale.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Überprüfe die bestehende typography system-token-Implementierung und die zugehörige Dokumentation. Vergleiche anschließend das Baseline-Token-Muster mit der verknüpften Angular Material M3-Token-Anleitung. Verfolge, wie die Ausgabe von Kurzformen und Subtokens generiert wird, und verifiziere, dass alle Größen von display, headline, title, body und label die angeforderten hervorgehobenen Varianten bereitstellen, während die Baseline-Tokens unverändert bleiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, scss, typescript
Bereich
design, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.