mirror of
https://github.com/we-promise/sure.git
synced 2026-05-08 05:04:59 +00:00
a7e964f8be
* 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.