angular / angular/components

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

オープン
#33,557 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: theming feature P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

既存の typography system-token 実装とその関連ドキュメントを確認し、ベースラインのトークンパターンを、リンクされている Angular Material M3 のトークンガイダンスと比較してください。短縮形とサブトークンの出力がどのように生成されるかを追跡し、display、headline、title、body、label のすべてのサイズで要求された強調バリアントが公開されていることを、ベースラインのトークンを変更せずに検証してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, scss, typescript
領域
design, frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
55/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。