angular / angular/components

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

Đang mở
#33,557 1 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: theming feature P4
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Xem xét triển khai typography system-token hiện có và tài liệu liên quan, sau đó so sánh mẫu token cơ sở với hướng dẫn token Angular Material M3 được liên kết. Truy vết cách tạo đầu ra của dạng viết tắt và subtoken, đồng thời xác minh rằng tất cả kích thước display, headline, title, body và label đều cung cấp các biến thể nhấn mạnh được yêu cầu, trong khi các token cơ sở vẫn không thay đổi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, scss, typescript
Lĩnh vực
design, frontend
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
55/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.