Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#33,557 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

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

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.

Beschreibung

area: theming feature P4
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 currently expose only the baseline typescale (--mat-sys-headline-large, --mat-sys-body-medium, etc.). Apps that follow the M3 type scale 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.
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 7 Std.
Gemergte PRs (30 T.)
92

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/components

Alle Issues in angular/components

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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