Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#33,557 1 comentario 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
55/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
angular, scss, typescript
Área
design, frontend

Línea de trabajo

Revisa la implementación existente de typography system-token y su documentación relacionada; después, compara el patrón de token base con la guía de tokens de Angular Material M3 enlazada. Rastrea cómo se genera la salida de abreviaturas y subtokens, y verifica que todos los tamaños de display, headline, title, body y label expongan las variantes enfatizadas solicitadas, mientras los tokens base permanezcan sin cambios.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 7 h
PR fusionados (30 d)
92

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.