feat(typography): Support Material 3 Emphasized type styles as system typography tokens
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 55/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- angular, scss, typescript
调研方向
审查现有的 typography system-token 实现及其相关文档，然后将基线 token 模式与链接的 Angular Material M3 token 指南进行比较。追踪 shorthand 和 subtoken 输出的生成方式，并验证 display、headline、title、body 和 label 的所有字号都公开所请求的 emphasized 变体，同时保持基线 token 不变。
由索引模型根据 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 天 7 小时
- 30 天内合并 PR
- 92
环境准备
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
angular/components 的其他 Issue
-
area: material/datepicker P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33763 · 2 条评论 · 3 个 reaction ·
维护者通常 1 天内回复
-
area: material/table P4
难度 1/5 1 小时以内 新手友好度 88/100
angular/components#33709 · 1 条评论 ·
维护者通常 1 天内回复
-
area: material/table docs gemini-triaged P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33455 ·
维护者通常 1 天内回复
-
area: material/core gemini-triaged P3
难度 1/5 1 小时以内 新手友好度 78/100
angular/components#33059 · 2 条评论 ·
维护者通常 1 天内回复
-
area: material/dialog P2
难度 2/5 1-3 小时 新手友好度 64/100
angular/components#30536 · 3 个 reaction ·
维护者通常 1 天内回复
查看 angular/components 的全部 Issue
相似的 Issue
-
docs
难度 1/5 1 小时以内 新手友好度 68/100
remix-run/react-router#15558 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
solana-foundation/pay-kit#341 ·
维护者通常 1 天内回复
-
难度 1/5 1-3 小时 新手友好度 88/100
supabase/agent-skills#607 ·
-
enhancement
难度 2/5 1-3 小时 新手友好度 88/100
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复