feat(typography): Support Material 3 Emphasized type styles as system typography tokens
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 55/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- angular, scss, typescript
調査の方向性
既存の typography system-token 実装とその関連ドキュメントを確認し、ベースラインのトークンパターンを、リンクされている Angular Material M3 のトークンガイダンスと比較してください。短縮形とサブトークンの出力がどのように生成されるかを追跡し、display、headline、title、body、label のすべてのサイズで要求された強調バリアントが公開されていることを、ベースラインのトークンを変更せずに検証してください。
索引モデルが issue の本文から書いたものです。
説明
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
- Editorial headlines — Page and section titles should use emphasized Headline styles per M3, without hardcoding
font-weight: 500afterfont: var(--mat-sys-headline-*)(which fights the shorthand token). - 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.
- Selective emphasis — Keep baseline for body/UI chrome and switch to emphasized for selected/active text, primary CTAs, or important labels, matching Compose/Android
*EmphasizedAPIs and the M3 Expressive type scale. - Forward compatibility — Apps can adopt official tokens now and drop temporary theme overrides once Angular Material ships the full 30-style scale.
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 1時間
- マージ済み PR(30日)
- 84
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/components のほかの issue
-
area: material/tree docs gemini-triaged needs triage
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/components#33763 · コメント 2 件 · リアクション 3 件 ·
-
area: material/table gemini-triaged P4
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
angular/components#33709 · コメント 1 件 ·
-
area: material/table docs gemini-triaged P4
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
難易度 1/5 1時間未満 初心者へのやさしさ 78/100
angular/components#33059 · コメント 2 件 ·
angular/components の issue をすべて見る
似ている issue
-
難易度 1/5 1〜3時間 初心者へのやさしさ 88/100
motiondivision/motion#3849 ·
-
Add: S Play Event HD オープンcheck:passed streams:add
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
i-am-bee/beeai-framework#1697 · リアクション 1 件 ·
-
Support bun dedupe オープンenhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
antfu/node-modules-inspector#214 ·