mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
f0e270f578
Two regressions from the recent token sweep, both producing low-contrast results in dark mode. ## DS::Toggle off-track PR #1843 (DS::Toggle a11y + token swaps) replaced the raw `bg-gray-100 theme-dark:bg-gray-700` off-track with `bg-surface-inset` for semantic alignment. `bg-surface-inset` resolves to gray-800 in dark mode, but the toggle typically sits inside `bg-container` (gray-900). The contrast ratio dropped from ~2.45:1 (gray-700 vs gray-900) to ~1.5:1 (gray-800 vs gray-900) — visibly worse than the pre-#1843 baseline and below WCAG 1.4.11 (3:1 for UI components). Most visible inside the transaction-edit modal SETTINGS section (`Exclude`, `One-time Expense`) where the off-state switches nearly vanished into the modal chrome. Introduce `--color-toggle-track` (light: gray-100, dark: gray-700) and swap `bg-surface-inset` → `bg-toggle-track` in DS::Toggle. Restores the pre-#1843 off-track contrast while keeping a semantic token (instead of the raw palette references the migration was trying to remove). ## border-destructive subtle borders PR #1849 (single-color tokens to @theme) flagged that `border-destructive/N` rendered the wrong shade (the `@utility border-destructive` block defined red-500 light, while `--color-destructive` in `@theme` is red-600 — `/N` resolves from @theme), and swapped a couple of callsites to solid `border-destructive`. Solid renders red-500/red-400 at full saturation in both modes, which reads as a loud error border on contexts that were meant to be subtle (left-rule on the provider-sync "view error details" pane, error-message box in SimpleFIN settings, alert-component border, provider connection error rows). Two callsites (`DS::Alert`, settings/providers/_connection_row) still carried the broken `border-destructive/20` / `/25` modifier — same off-shade footgun #1849 was meant to retire. Introduce `--color-destructive-subtle` (light: red-200, dark: red-800) and swap the four subtle-by-intent callsites to `border-destructive-subtle`: - app/components/DS/alert.rb (destructive variant) - app/views/settings/providers/_connection_row.html.erb (err status) - app/components/provider_sync_summary.html.erb (error-details left rule) - app/views/simplefin_items/edit.html.erb (error-message box) The handful of intentionally-loud `border-destructive` callsites (split-transaction over-allocation, blank-name account labels, etc.) keep the solid token. Regenerated `_generated.css` via `npm run tokens:build`.
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-subtle 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 %>
|