feat(design-system): live tokens reference page in Lookbook (#1618)

* feat(design-system): live tokens reference page in Lookbook

Adds `DesignTokensPreview` at `/design-system/inspect/design_tokens/*`,
split into seven sub-pages (typography, palette, surfaces, text,
borders, controls, effects). Each reads `design/tokens/sure.tokens.json`
at request time and renders the corresponding slice with values
pre-resolved to literal hex / rgba in Ruby — Tailwind doesn't need to
keep every CSS variable alive for the swatches to render.

Also drops the `@source not "../../../design/tokens"` directive added
in #1604. Excluding the JSON tree-shook ten or so design system
utilities that aren't yet used in app views (`shadow-border-md/sm/xl`,
`button-bg-ghost-hover`, etc.). The preview references each utility
through dynamic ERB, which Tailwind's scanner can't follow, so those
swatches were rendering blank. Letting Tailwind scan the JSON keeps
every declared utility available, which matches the intent of a design
system. Compiled CSS grows by about 3 KB.

Stacked previously on the `refactor/design-system-tokens` branch behind
#1604; rebased onto `main` once that landed.

* style(design-system): apply rubocop indented_internal_methods to preview

CI lint flagged the private helpers in DesignTokensPreview because the
project's RuboCop config uses `indented_internal_methods` style (methods
after `private`/`protected` get an extra 2-space indent). Auto-fixed
with `bin/rubocop -A`.

* fix(design-system): pre-resolve utility token values for the preview

CodeRabbit caught: collect_utilities was passing raw `{ref}` strings
(e.g. `{color.gray.50}`) as light_value/dark_value, while the rest of
the class pre-resolves to literal hex / rgba. The four templates that
display them (surfaces, text, borders, controls) showed the unresolved
template strings to users.

Adds `light_resolved` / `dark_resolved` fields to each utility entry,
populated via the same `resolve_template` helper the other collectors
use. Templates display `:light_resolved || :light_value` so plain class
strings (e.g. `border-tertiary`, `bg-gray-800 fg-inverse`) and compose
cases still fall through correctly.
This commit is contained in:
Guillem Arias Fauste
2026-05-01 16:06:25 +02:00
committed by GitHub
parent 05b5dba445
commit a7e964f8be
9 changed files with 514 additions and 5 deletions

View File

@@ -1,10 +1,5 @@
@import 'tailwindcss';
/* Exclude design/tokens/sure.tokens.json from Tailwind's content scanner: its utility
keys (e.g. `bg-surface`) would otherwise be treated as used classes and skip
tree-shaking. Path is relative to this file. */
@source not "../../../design/tokens";
@import "./sure-design-system.css";
@import "./geist-font.css";