feat(typography): Support Material 3 Emphasized type styles as system typography tokens
- 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
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