feat(typography): Support Material 3 Emphasized type styles as system typography tokens
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Esamina l’implementazione esistente di typography system-token e la documentazione adiacente, quindi confronta il pattern dei token di base con la guida collegata ai token di Angular Material M3. Traccia il modo in cui viene generato l’output di abbreviazioni e sottotoken e verifica che tutte le dimensioni di display, headline, title, body e label espongano le varianti enfatizzate richieste, mentre i token di base rimangono invariati.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, scss, typescript
- Ambito
- design, frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Attiva
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 55/100