Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
#33,557 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

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

調査の方向性

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

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

説明

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.
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 1時間
マージ済み PR(30日)
84

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

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

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/components のほかの issue

angular/components の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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