mirror of
https://github.com/we-promise/sure.git
synced 2026-05-12 15:15:01 +00:00
4dbac74507
The design system carried two parallel namespaces for foreground colors: text-* (canonical, ~2,000 uses) and fg-* (32 uses). Most fg-* tokens were 1:1 duplicates of a text-* counterpart. fg-gray was nearly identical to text-secondary, with a one-step shade difference in dark mode. This PR migrates all 32 usages to their text-* equivalents and removes the fg-* block from the design tokens. Closes #1606. Mapping: - fg-inverse -> text-inverse (20 usages, identical light/dark values) - fg-gray -> text-secondary (7 usages; light values match, dark is one step lighter: gray-300 vs gray-400) - fg-primary -> text-primary (3 usages, identical values) - fg-subdued -> text-subdued (2 usages, identical values) The four other fg-* tokens (fg-contrast, fg-primary-variant, fg-secondary, fg-secondary-variant) had zero usages despite being defined; they are removed without replacement. JSON / build: - design/tokens/sure.tokens.json: $version 1.0.0 -> 2.0.0 (breaking schema change per the policy added in #1620). 8 fg-* token definitions removed. - button-bg-ghost-hover's dark value still references "fg-inverse" internally; rewritten to "bg-gray-800 text-inverse" so the cleanup doesn't break that utility. - _generated.css regenerated. 42 utility blocks now (was 50). Lookbook tokens preview: - The Text & foregrounds section dropped its split between text-* (canonical) and fg-* (legacy). Now a single section listing the five text-* utilities. The "(legacy)" framing is gone since there's no legacy left. README: - design/tokens/README.md's button-bg-ghost-hover edge-case example updated to reflect the new "bg-gray-800 text-inverse" dark value. Visual review needed in dark mode: - Anywhere icons use the application_helper#icon helper with color: "default" (most icons in the app). The default class moved from fg-gray (gray-400 dark) to text-secondary (gray-300 dark), so default-color icons render slightly lighter in dark mode. - DS::Buttonish icons in secondary buttons (same shade shift). - DS::Link icons (same). - Time series chart axes (same). - All tooltips, account add flow, settings hostings buttons, invitations, AI consent, family export, danger-zone buttons -- these used fg-inverse, which is identical to text-inverse, so no visual change expected.
37 lines
1.5 KiB
Plaintext
37 lines
1.5 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"
|
|
%>
|
|
<div class="bg-surface min-h-screen p-6 space-y-6">
|
|
<header>
|
|
<h2 class="text-2xl font-semibold text-primary">Text & foregrounds</h2>
|
|
<p class="text-sm text-secondary">
|
|
<code class="font-mono">text-*</code> utilities. 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>
|
|
|
|
<div class="grid gap-3 grid-cols-1 lg:grid-cols-2">
|
|
<% utilities.each do |u| %>
|
|
<div class="<%= card %>">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="<%= light_ctx %>">
|
|
<p class="text-sm font-medium <%= u[:name] %>">Quick brown fox</p>
|
|
</div>
|
|
<div class="<%= dark_ctx %>">
|
|
<p class="text-sm font-medium <%= u[:name] %>">Quick brown fox</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-0.5">
|
|
<p class="text-xs font-medium text-primary"><%= u[:name] %></p>
|
|
<p class="<%= meta %> truncate"><%= u[:light_resolved] || u[:light_value] %></p>
|
|
<% if u[:dark_value] %>
|
|
<p class="<%= meta %> truncate text-subdued">dark: <%= u[:dark_resolved] || u[:dark_value] %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|