Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#33,557 1 comentário 1 reação 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
55/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
angular, scss, typescript
Domínio
design, frontend

Direção de pesquisa

Revise a implementação existente de typography system-token e a documentação adjacente e, em seguida, compare o padrão de token de base com a orientação de tokens vinculada do Angular Material M3. Rastreie como a saída de abreviações e subtokens é gerada e verifique se todos os tamanhos de display, headline, title, body e label expõem as variantes enfatizadas solicitadas, enquanto os tokens de base permanecem inalterados.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.
Linguagem predominante
TypeScript
Estrelas
25k
Forks
6.8k
Merge médio
1d 7h
PRs com merge (30d)
92

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/components

Todas as issues de angular/components

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.