mirror of
https://github.com/we-promise/sure.git
synced 2026-05-24 04:54:56 +00:00
e67ff3e3dc
* refactor(design-system): migrate single-color semantic tokens to @theme + lint @utility /N footgun Closes #1653. Tailwind v4 auto-generates the `/N` opacity-modifier pipeline (`color-mix(in oklab, var(--color-X) N%, transparent)`) only for colors declared in `@theme`. Tokens emitted as `@utility name { @apply ... }` bypass that pipeline entirely, so `text-link/70`, `bg-surface/50`, etc. silently compile to nothing — the workaround from #1626 was `text-inverse opacity-70`. Migrate the 11 single-color semantic tokens whose class names match Tailwind's color-utility convention (`bg-X`, `text-X`, `border-X`) and have no cross-prefix collision: bg-surface, bg-surface-hover, bg-surface-inset, bg-surface-inset-hover bg-container, bg-container-hover, bg-container-inset, bg-container-inset-hover bg-nav-indicator text-link border-tertiary After migration, `--color-surface`, `--color-container`, etc. live in `@theme` and Tailwind auto-generates every prefix variant (`bg-surface`, `text-surface`, `border-surface`, plus `/10`..`/100`). The original utility class names are preserved (now via auto-generation instead of `@utility` blocks), so every existing callsite continues to work. NOT migrated, by design: - **inverse family** (`bg-inverse`, `text-inverse`, `bg-inverse-hover`, `border-inverse`): bg- and text- variants have *different* colors, cannot share one `--color-inverse`. Renaming the family (`bg-strong-surface` + `text-on-strong-surface`) would touch ~61 view files and trade one footgun for semantic loss; deferred until a concrete `bg-inverse/N` use case appears. - **primary/secondary/subdued/destructive** (cross-prefix collision): `text-primary` (gray.900) and `border-primary` (alpha-black.300) carry deliberately distinct values, can't share `--color-primary`. Same for the secondary/subdued pairs. Migrating either alone would force a rename of the other. - **button-bg-*, tab-item-*, tab-bg-group**: class names don't follow Tailwind's `<prefix>-<name>` convention, so auto-generation would emit `bg-button-bg-primary` not `button-bg-primary`. - **composites** (`bg-loader`, `bg-overlay`, `shadow-border-*`, `border-divider`): compile to multiple properties or alias-reference other utilities — must stay as @utility. Add an `erb_lint` DeprecatedClasses rule covering the @utility-only tokens with `\d+` regex modifiers so any future `text-inverse/70` etc. fails CI with the explanation that `opacity-N` is the workaround and #1653 is the tracking issue. Verified the rule fires on synthetic input; verified zero new violations on the existing app. Stats: `@utility` blocks dropped from 45 → 34; @theme primitives grew from 183 → 194. * fix(review): cover remaining @utility /N footgun tokens in erb_lint CodeRabbit flagged that the new DeprecatedClasses /N rule missed seven still-defined @utility color tokens: border-destructive, border-solid, button-bg-secondary-strong, button-bg-secondary-strong-hover, button-bg-disabled, button-bg-ghost-hover, button-bg-outline-hover. Without them, classes like button-bg-disabled/50 pass lint while Tailwind silently drops the class. Adding the patterns surfaced two pre-existing offenders (border-destructive/30, border-destructive/20). Swap both to solid border-destructive — the @utility override defines red-500 (light) while --color-destructive in @theme is red-600, so the /N modifier was rendering an off-shade rather than the intended faded variant. Verified the rule fires on synthetic input for all seven new patterns, then verified zero remaining violations on the new patterns across app/**/*.erb. * chore(erb_lint): add trailing newline to .erb_lint.yml Per review feedback on #1849. Some editors flag the missing newline; keeps style consistent with the rest of the codebase.
65 lines
2.4 KiB
Plaintext
65 lines
2.4 KiB
Plaintext
<% content_for :title, t(".title") %>
|
|
|
|
<%= turbo_frame_tag "modal" do %>
|
|
<%= render DS::Dialog.new do |dialog| %>
|
|
<% dialog.with_header(title: t(".title")) do %>
|
|
<div class="flex items-center gap-2">
|
|
<%= icon "building-2", class: "text-primary" %>
|
|
<span class="text-primary"><%= t(".header_subtitle") %></span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% dialog.with_body do %>
|
|
<%= form_with model: @simplefin_item, local: true, class: "space-y-6" do |form| %>
|
|
<div class="bg-surface border border-primary p-4 rounded-lg">
|
|
<div class="flex items-start gap-3">
|
|
<%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
|
|
<div>
|
|
<p class="text-sm text-primary mb-2">
|
|
<strong><%= t(".connection_needs_update") %></strong>
|
|
</p>
|
|
<ol class="text-xs text-secondary space-y-1 list-decimal list-inside">
|
|
<li><%= t(".step_1_html") %></li>
|
|
<li><%= t(".step_2") %></li>
|
|
<li><%= t(".step_3") %></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% if @error_message %>
|
|
<div class="bg-destructive/10 border border-destructive p-4 rounded-lg">
|
|
<div class="flex items-start gap-3">
|
|
<%= icon "alert-triangle", size: "sm", class: "text-destructive mt-0.5 flex-shrink-0" %>
|
|
<p class="text-sm text-destructive"><%= @error_message %></p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div>
|
|
<%= form.label :setup_token, t(".setup_token.label"), class: "block text-sm font-medium text-primary mb-2" %>
|
|
<%= form.text_area :setup_token,
|
|
placeholder: t(".setup_token.placeholder"),
|
|
class: "appearance-none bg-container border border-primary rounded-md px-3 py-2 text-sm leading-6 text-primary focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none w-full h-32 resize-none font-mono" %>
|
|
<p class="text-xs text-secondary mt-1"><%= t(".setup_token.help_text") %></p>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<%= render DS::Button.new(
|
|
text: t(".update"),
|
|
variant: "primary",
|
|
icon: "refresh-cw",
|
|
type: "submit",
|
|
class: "flex-1"
|
|
) %>
|
|
<%= render DS::Link.new(
|
|
text: t(".cancel"),
|
|
variant: "secondary",
|
|
href: accounts_path
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|