mirror of
https://github.com/we-promise/sure.git
synced 2026-05-10 22:25: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.
62 lines
2.7 KiB
Plaintext
62 lines
2.7 KiB
Plaintext
<%
|
|
card = "rounded-lg border border-secondary bg-container p-3 space-y-2"
|
|
meta = "text-xs text-secondary font-mono"
|
|
light_ctx = "rounded p-3 bg-surface"
|
|
dark_ctx = "rounded p-3 bg-gray-900"
|
|
|
|
render_group = ->(items) {
|
|
capture do
|
|
content_tag(:div, class: "grid gap-3 grid-cols-1 lg:grid-cols-2") do
|
|
safe_join(items.map do |u|
|
|
content_tag(:div, class: card) do
|
|
safe_join([
|
|
content_tag(:div, class: "grid grid-cols-2 gap-2") do
|
|
safe_join([
|
|
content_tag(:div, class: light_ctx) do
|
|
content_tag(:p, "Quick brown fox", class: "text-sm font-medium #{u[:name]}")
|
|
end,
|
|
content_tag(:div, class: dark_ctx) do
|
|
content_tag(:p, "Quick brown fox", class: "text-sm font-medium #{u[:name]}")
|
|
end
|
|
])
|
|
end,
|
|
content_tag(:div, class: "space-y-0.5") do
|
|
safe_join([
|
|
content_tag(:p, u[:name], class: "text-xs font-medium text-primary"),
|
|
content_tag(:p, u[:light_resolved] || u[:light_value], class: "#{meta} truncate"),
|
|
(u[:dark_value] ? content_tag(:p, "dark: #{u[:dark_resolved] || u[:dark_value]}", class: "#{meta} truncate text-subdued") : nil)
|
|
].compact)
|
|
end
|
|
])
|
|
end
|
|
end)
|
|
end
|
|
end
|
|
}
|
|
%>
|
|
<div class="bg-surface min-h-screen p-6 space-y-10">
|
|
<header>
|
|
<h2 class="text-2xl font-semibold text-primary">Text & foregrounds</h2>
|
|
<p class="text-sm text-secondary">
|
|
Each example renders the literal class on a light <em>and</em> a dark surface so utilities meant for inverse contexts show their intended state.
|
|
</p>
|
|
</header>
|
|
|
|
<section class="space-y-3">
|
|
<header class="space-y-1">
|
|
<h3 class="text-lg font-medium text-primary"><code class="font-mono">text-*</code> <span class="text-xs text-secondary font-normal">(canonical, ~2,000 uses across the codebase)</span></h3>
|
|
</header>
|
|
<%= render_group.call(text_utilities) %>
|
|
</section>
|
|
|
|
<section class="space-y-3">
|
|
<header class="space-y-1">
|
|
<h3 class="text-lg font-medium text-primary"><code class="font-mono">fg-*</code> <span class="text-xs text-warning font-normal">(legacy — prefer <code class="font-mono">text-*</code>)</span></h3>
|
|
<p class="text-sm text-secondary">
|
|
Older namespace, ~40 uses left in the codebase. Most are 1:1 duplicates of a <code class="font-mono">text-*</code> equivalent. Tracked for migration; no new code should reference these.
|
|
</p>
|
|
</header>
|
|
<%= render_group.call(fg_utilities) %>
|
|
</section>
|
|
</div>
|