mirror of
https://github.com/we-promise/sure.git
synced 2026-05-09 05:35:00 +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.
61 lines
2.9 KiB
Plaintext
61 lines
2.9 KiB
Plaintext
<%
|
|
card = "rounded-lg border border-secondary bg-container p-3 space-y-1.5"
|
|
label = "text-xs font-medium text-primary"
|
|
meta = "text-xs text-secondary font-mono"
|
|
%>
|
|
<div class="bg-surface min-h-screen p-6 space-y-10">
|
|
<header>
|
|
<h2 class="text-2xl font-semibold text-primary">Typography</h2>
|
|
<p class="text-sm text-secondary">Font family tokens defined in <code class="font-mono">design/tokens/sure.tokens.json</code>. Sizes, weights, and line heights are not yet curated as Sure tokens — the codebase uses Tailwind defaults, listed below for reference.</p>
|
|
</header>
|
|
|
|
<section class="space-y-3">
|
|
<h3 class="text-lg font-medium text-primary">Font families <span class="text-xs text-secondary font-normal">(Sure tokens)</span></h3>
|
|
<div class="grid gap-3 grid-cols-1 lg:grid-cols-2">
|
|
<% fonts.each do |entry| %>
|
|
<div class="<%= card %>">
|
|
<div class="flex items-baseline justify-between">
|
|
<span class="<%= label %>"><%= entry[:var] %></span>
|
|
<span class="<%= meta %>"><%= entry[:name] %></span>
|
|
</div>
|
|
<p class="text-2xl text-primary" style="font-family: var(<%= entry[:var] %>)">
|
|
The quick brown fox jumps over the lazy dog. 0123456789
|
|
</p>
|
|
<p class="<%= meta %> truncate"><%= entry[:value] %></p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-3">
|
|
<header class="space-y-1">
|
|
<h3 class="text-lg font-medium text-primary">Size scale <span class="text-xs text-secondary font-normal">(Tailwind defaults — not Sure tokens)</span></h3>
|
|
<p class="text-sm text-secondary">Used heavily across the codebase. Listed here as reference until a Sure-specific hierarchy is curated.</p>
|
|
</header>
|
|
<div class="<%= card %>">
|
|
<% text_sizes.each do |class_name, value| %>
|
|
<div class="flex items-baseline gap-4 py-1.5 border-b border-subdued last:border-0">
|
|
<code class="<%= meta %> w-20 shrink-0"><%= class_name %></code>
|
|
<span class="<%= meta %> w-24 shrink-0 text-subdued"><%= value %></span>
|
|
<span class="<%= class_name %> text-primary truncate">The quick brown fox</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-3">
|
|
<header class="space-y-1">
|
|
<h3 class="text-lg font-medium text-primary">Weight scale <span class="text-xs text-secondary font-normal">(Tailwind defaults — not Sure tokens)</span></h3>
|
|
</header>
|
|
<div class="<%= card %>">
|
|
<% font_weights.each do |class_name, value| %>
|
|
<div class="flex items-baseline gap-4 py-1.5 border-b border-subdued last:border-0">
|
|
<code class="<%= meta %> w-28 shrink-0"><%= class_name %></code>
|
|
<span class="<%= meta %> w-12 shrink-0 text-subdued"><%= value %></span>
|
|
<span class="text-lg <%= class_name %> text-primary">The quick brown fox</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</section>
|
|
</div>
|