Skip to content

Split _type.scss into separate partials, add CSS tokens to more type styles#42700

Merged
mdo merged 2 commits into
v6-devfrom
typography-css-tokens
Jul 17, 2026
Merged

Split _type.scss into separate partials, add CSS tokens to more type styles#42700
mdo merged 2 commits into
v6-devfrom
typography-css-tokens

Conversation

@mdo

@mdo mdo commented Jul 17, 2026

Copy link
Copy Markdown
Member

Summary

  • Move heading, paragraph, description list, and legend styling from build-time Sass variables to a runtime type-tokens CSS custom property map, defined in _reboot.scss next to where it is consumed.
  • Removed the now-redundant Sass variables (headings-margin-bottom, headings-font-family, headings-font-style, headings-font-weight, headings-line-height, paragraph-margin-bottom, legend-margin-bottom, legend-font-size, legend-font-weight, dt-font-weight); headings-color is the only one that remains.
  • Heading and dt font-weight fall back to shared weight tokens instead of a hardcoded value.
  • Added link-underline-offset to root-tokens for runtime customization.
  • Tokenized hardcoded rem margins/paddings (address, lists, dd, blockquote, pre, figure, caption, kbd padding, and a new list-padding-x for ol/ul) against the spacer scale. Visual output is unchanged.
  • Split _type.scss into _lists.scss and _blockquote.scss, and moved .initialism next to abbr in _reboot.scss, so each content partial only defines and consumes its own tokens.
  • Updated the Typography docs and the v5-to-v6 migration guide accordingly.

Test plan

  • npm run css-lint
  • npm run dist
  • npm run docs-build

@mdo
mdo requested a review from a team as a code owner July 17, 2026 02:34
mdo added 2 commits July 16, 2026 19:50
Move heading, paragraph, description list, and legend styling from
build-time Sass variables to a runtime `$type-tokens` map alongside
their consumer in `_reboot.scss`, and tokenize related hardcoded
margin/padding values against the `--spacer-*` scale. Also split
`_type.scss` into `_lists.scss` and `_blockquote.scss`, and relocate
`.initialism` next to `abbr` in Reboot, so each partial only defines
and consumes its own tokens.
@mdo
mdo force-pushed the typography-css-tokens branch from f4307d5 to eded301 Compare July 17, 2026 02:51
@mdo mdo changed the title Port typography Sass variables to CSS custom properties Split _type.scss into separate partials, add CSS tokens to more type styles Jul 17, 2026
@mdo mdo added this to v6.0.0 Jul 17, 2026
@github-project-automation github-project-automation Bot moved this to Inbox in v6.0.0 Jul 17, 2026
@mdo
mdo merged commit a1a96c6 into v6-dev Jul 17, 2026
11 checks passed
@mdo
mdo deleted the typography-css-tokens branch July 17, 2026 02:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

1 participant