mirror of
https://github.com/we-promise/sure.git
synced 2026-05-27 14:34:56 +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`.
44 lines
2.0 KiB
Plaintext
44 lines
2.0 KiB
Plaintext
<%# locals: (entry:, open:) %>
|
|
<%
|
|
status = entry[:summary][:status]
|
|
meta = entry[:summary][:meta]
|
|
last_synced = entry[:summary][:last_synced_at]
|
|
border_class =
|
|
case status
|
|
when :warn then "border border-warning/25"
|
|
when :err then "border border-destructive-subtle"
|
|
else "border border-transparent"
|
|
end
|
|
sync_action = entry[:partial].present? ? render("settings/providers/sync_button", provider_key: entry[:provider_key], last_synced_at: last_synced) : nil
|
|
status_pill = render("settings/providers/status_pill", status: status)
|
|
maturity_lbl = Settings::ProviderCard.maturity_label(entry[:maturity])
|
|
details_data = entry[:auto_open_param].present? ? { controller: "auto-open", auto_open_param_value: entry[:auto_open_param] } : {}
|
|
%>
|
|
<%= tag.details open: open,
|
|
class: "group bg-container shadow-border-xs rounded-xl #{border_class}",
|
|
data: details_data do %>
|
|
<summary class="flex items-center gap-3 min-h-15 px-4 py-3.5 cursor-pointer rounded-xl list-none [&::-webkit-details-marker]:hidden">
|
|
<%= icon "chevron-right", size: "sm", class: "!w-3.5 !h-3.5 text-secondary group-open:rotate-90 transition-transform" %>
|
|
<div class="flex items-center gap-2 flex-wrap min-w-0 flex-1">
|
|
<h3 class="text-sm font-medium text-primary"><%= entry[:title] %></h3>
|
|
<%= render "settings/providers/maturity_badge", label: maturity_lbl %>
|
|
</div>
|
|
<div class="flex items-center gap-2 shrink-0 group-open:hidden">
|
|
<% if meta.present? %>
|
|
<span class="text-xs text-subdued"><%= meta %></span>
|
|
<% end %>
|
|
<%= status_pill %>
|
|
<%= sync_action if sync_action %>
|
|
</div>
|
|
</summary>
|
|
<div class="space-y-4 mt-4 px-4 pb-4">
|
|
<% if entry[:configuration] %>
|
|
<%= render "settings/providers/provider_form", configuration: entry[:configuration] %>
|
|
<% else %>
|
|
<turbo-frame id="<%= entry[:turbo_id] %>-providers-panel">
|
|
<%= render "settings/providers/#{entry[:partial]}" %>
|
|
</turbo-frame>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|