DS 2.0 typography layer (wb-text-* roles) - #84
Open
librowski wants to merge 20 commits into
Open
Conversation
librowski
force-pushed
the
ds2-typography
branch
from
August 20, 2026 16:48
50b0173 to
8a457c0
Compare
39 wb-type-{family}-{size}[-emphasized] utility classes straight from the
Typography guidelines table (Display, Headline, Title, Body, Label, Node,
UI/Code). Font sizes reference the wb/font-size primitives; until the DS 2.0
variables export ships them in tokens.css, the same block defines them as
provisional values — the unlayered export will override the layered block,
and the block gets removed with the export task. Existing ax-public-*
classes are untouched; adoption starts with the Chips redesign.
Same rationale as Poppins — CSP-safe, GDPR-safe, air-gap-safe. Regular only, matching the single UI/Code style.
- wb-type-code sets the family on descendants too — the SDK's universal font-family rule would otherwise repaint nested elements in Poppins, defeating the one role that ships its own typeface. - Font weights are order-independent: 400 and 600 live on disjoint selector lists instead of a base rule overridden later by source order (the repo already treats that hazard as a shipped bug class). - The NNN = px x 12.5 formula is approximate for 137 and 162 (truncation) — say so; drop the false monospace claim from the UI/Code comment. - sdk README documents the wb-type-* carve-out from --wb-font-family.
The wb-type-* classes declare families the package did not deliver — a standalone consumer silently fell back to system-ui. The fontsource imports move from the SDK stylesheet to a ui fonts.css entry on the root barrel (layered via import layer(), matching the built-css guard), with the CSP/GDPR/air-gap bundling rationale carried along. The SDK inherits the same 12 font faces through the JS module graph — no duplication, and its own fontsource dependencies are gone.
In code, "type" reads as a data type before it reads as typography; text-* is the established CSS convention for typographic utilities. The classes have no consumers yet, so the rename is free.
The per-family group headers restated the class names; the used-for prose lives in the docs page. What stays carries information the code cannot: the provisional block's lifecycle, the descendant-selector workaround, the naming scheme with the Emphasized=600 mapping, and the deliberate absence of an emphasized UI/Code variant.
…file A to-be-deleted block hiding inside typography.css relies on someone reading the comment; a dedicated provisional.css is wired into both distribution channels (the barrel import and the combine-css-bundle globals list), so deleting the file without cleaning the wire-ups fails the build in two places instead of silently shipping stale values.
_provisional.css sorts first and reads as exceptional at a glance.
The theming section stays about what the variable does today; the 3.0.0 removal-or-narrowing decision lives as a comment at the definition, where whoever touches it will actually look.
The Emphasized=600 mapping is visible in the weight rule itself and the provisional file announces itself by name.
The hazard is any universal font-family reset, not specifically the SDK's — the comment should survive the variable's possible 3.0.0 removal.
The docs page's scale table already records it.
The original move committed fonts.css but lost the package.json/lockfile hunks in a branch-hop stash; local builds kept passing on node_modules installed outside git, and a clean install failed to resolve the imports — vite then emits no CSS assets at all and the combine step aborts.
"Remain available" invited new adoption; they only exist for the migration window and are removed in 3.0.0.
librowski
force-pushed
the
ds2-typography
branch
from
August 20, 2026 17:11
7e0ea58 to
0c3e8d2
Compare
It patched one role against the universal font-family reset while every role's descendants stay exposed — symptom-level and inconsistent. The reset's fate is decided at the 3.0.0 close-out; until then the layers are allowed to be individually incomplete as long as the whole stack lands coherent.
librowski
marked this pull request as ready for review
August 20, 2026 19:43
librowski
requested review from
lukasz-jazwa,
piotrblaszczyk and
szymon-t-sc
as code owners
August 20, 2026 19:43
Naming the system version in component docs and headers goes stale the moment the next version starts; the export references carry the meaning on their own.
Contributor
There was a problem hiding this comment.
Knip config didn't follow the font move. knip.config.js still has ignoreDependencies: ['@fontsource/poppins'] under packages/sdk, but this PR removes that dependency from the SDK, so the entry is now dead. Meanwhile packages/ui gained @fontsource/poppins and @fontsource/inter as devDependencies consumed only via CSS @import in fonts.css. Knip doesn't parse CSS, so pnpm knip will report both as unused devDependencies. Please move the ignoreDependencies entry from the sdk workspace to the ui workspace and add @fontsource/inter to it. Not CI-gating (knip isn't part of pnpm check or pr-check), so fine to do here or in a follow-up within the stack.
Contributor
|
|
piotrblaszczyk
approved these changes
Aug 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
DS 2.0 typography layer. Stacked on #83 (needs the token-usage lint); rebase onto
mainand retarget after #83 merges.Changes
wb-text-{family}-{size}[-emphasized]utility classes inpackages/ui/src/styles/typography.css, one per text style from the Figma Typography guidelines (Display, Headline, Title, Body, Label, Node, UI/Code). Regular = 400, Emphasized = 600, line-heights per style. Existingax-public-*classes untouched; nothing consumes the new classes yet (first consumer: the Chips redesign).--wb-font-size-*primitives live in a dedicated_provisional.css, wired into both distribution channels (barrel import + combine globals list) so deleting the file without cleaning the wire-ups fails the build; the future unlayered DS 2.0 export overrides the layered definitions automatically, and the whole file is removed in the token-export task.@workflowbuilder/uiitself (fonts.css on the root barrel, imports layered vialayer(ui.base); lib mode embeds the files as base64, as the SDK bundle always did). The SDK inherits the same 12 font faces through the JS module graph and drops its own fontsource dependencies — the classes work for standaloneuiconsumers.@workflowbuilder/uiand@workflowbuilder/sdk.Source of truth: Figma DS page Typography (
?node-id=1-53) — per-style table extracted programmatically; scale cross-checked against the "39 text styles" foundation note.