From e67ff3e3dcdaad50ec4b5899953e4667dea7ef8b Mon Sep 17 00:00:00 2001 From: Guillem Arias Fauste Date: Wed, 20 May 2026 18:20:38 +0200 Subject: [PATCH] refactor(design-system): migrate single-color tokens to @theme + lint @utility /N footgun (#1849) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 `-` 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. --- .erb_lint.yml | 36 +++++- .../sure-design-system/_generated.css | 110 ++++-------------- app/components/provider_sync_summary.html.erb | 2 +- app/views/simplefin_items/edit.html.erb | 2 +- design/tokens/sure.tokens.json | 25 ++-- 5 files changed, 72 insertions(+), 103 deletions(-) diff --git a/.erb_lint.yml b/.erb_lint.yml index 25e2184f9..d9521ca07 100644 --- a/.erb_lint.yml +++ b/.erb_lint.yml @@ -40,4 +40,38 @@ linters: - 'border-gray-500' - 'border-gray-700' - 'border-gray-900' - - 'border-white' \ No newline at end of file + - 'border-white' + # Custom @utility tokens (bg-inverse, text-inverse, text-primary, etc.) do + # NOT support Tailwind's `/N` opacity modifier syntax — modifiers like + # `text-inverse/70` silently compile to nothing. Use `opacity-N` on the + # parent element, or migrate the token to `@theme --color-X` in + # design/tokens/sure.tokens.json so Tailwind auto-generates the + # color-mix pipeline. See #1653. + - suggestion: "Custom @utility tokens drop `/N` opacity modifiers silently. Use `opacity-N` instead, or migrate the token to @theme in design/tokens/sure.tokens.json (see #1653)." + deprecated: + - 'text-inverse\/\d+' + - 'bg-inverse\/\d+' + - 'bg-inverse-hover\/\d+' + - 'border-inverse\/\d+' + - 'text-primary\/\d+' + - 'text-secondary\/\d+' + - 'text-subdued\/\d+' + - 'border-primary\/\d+' + - 'border-secondary\/\d+' + - 'border-subdued\/\d+' + - 'border-destructive\/\d+' + - 'border-solid\/\d+' + - 'button-bg-primary\/\d+' + - 'button-bg-primary-hover\/\d+' + - 'button-bg-secondary\/\d+' + - 'button-bg-secondary-hover\/\d+' + - 'button-bg-secondary-strong\/\d+' + - 'button-bg-secondary-strong-hover\/\d+' + - 'button-bg-disabled\/\d+' + - 'button-bg-destructive\/\d+' + - 'button-bg-destructive-hover\/\d+' + - 'button-bg-ghost-hover\/\d+' + - 'button-bg-outline-hover\/\d+' + - 'tab-item-active\/\d+' + - 'tab-item-hover\/\d+' + - 'tab-bg-group\/\d+' diff --git a/app/assets/tailwind/sure-design-system/_generated.css b/app/assets/tailwind/sure-design-system/_generated.css index 8acbaaa4f..96a966b86 100644 --- a/app/assets/tailwind/sure-design-system/_generated.css +++ b/app/assets/tailwind/sure-design-system/_generated.css @@ -14,6 +14,17 @@ --color-destructive: var(--color-red-600); --color-info: var(--color-blue-600); --color-shadow: --alpha(var(--color-black) / 6%); + --color-link: var(--color-blue-600); + --color-tertiary: var(--color-alpha-black-100); + --color-surface: var(--color-gray-50); + --color-surface-hover: var(--color-gray-100); + --color-surface-inset: var(--color-gray-100); + --color-surface-inset-hover: var(--color-gray-200); + --color-container: var(--color-white); + --color-container-hover: var(--color-gray-50); + --color-container-inset: var(--color-gray-50); + --color-container-inset-hover: var(--color-gray-100); + --color-nav-indicator: var(--color-black); --color-gray-25: #FAFAFA; --color-gray-50: #F7F7F7; --color-gray-100: #F0F0F0; @@ -202,6 +213,17 @@ --color-destructive: var(--color-red-400); --color-info: var(--color-blue-500); --color-shadow: --alpha(var(--color-white) / 8%); + --color-link: var(--color-blue-500); + --color-tertiary: var(--color-alpha-white-200); + --color-surface: var(--color-black); + --color-surface-hover: var(--color-gray-800); + --color-surface-inset: var(--color-gray-800); + --color-surface-inset-hover: var(--color-gray-800); + --color-container: var(--color-gray-900); + --color-container-hover: var(--color-gray-800); + --color-container-inset: var(--color-gray-800); + --color-container-inset-hover: var(--color-gray-700); + --color-nav-indicator: var(--color-white); --budget-unused-fill: var(--color-gray-500); --budget-unallocated-fill: var(--color-gray-700); --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 8%); @@ -212,70 +234,6 @@ } } -@utility bg-surface { - @apply bg-gray-50; - - @variant theme-dark { - @apply bg-black; - } -} - -@utility bg-surface-hover { - @apply bg-gray-100; - - @variant theme-dark { - @apply bg-gray-800; - } -} - -@utility bg-surface-inset { - @apply bg-gray-100; - - @variant theme-dark { - @apply bg-gray-800; - } -} - -@utility bg-surface-inset-hover { - @apply bg-gray-200; - - @variant theme-dark { - @apply bg-gray-800; - } -} - -@utility bg-container { - @apply bg-white; - - @variant theme-dark { - @apply bg-gray-900; - } -} - -@utility bg-container-hover { - @apply bg-gray-50; - - @variant theme-dark { - @apply bg-gray-800; - } -} - -@utility bg-container-inset { - @apply bg-gray-50; - - @variant theme-dark { - @apply bg-gray-800; - } -} - -@utility bg-container-inset-hover { - @apply bg-gray-100; - - @variant theme-dark { - @apply bg-gray-700; - } -} - @utility bg-inverse { @apply bg-gray-800; @@ -336,14 +294,6 @@ } } -@utility text-link { - @apply text-blue-600; - - @variant theme-dark { - @apply text-blue-500; - } -} - @utility shadow-border-xs { box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-black-50); @@ -400,14 +350,6 @@ } } -@utility border-tertiary { - @apply border-alpha-black-100; - - @variant theme-dark { - @apply border-alpha-white-200; - } -} - @utility border-divider { @apply border-tertiary; } @@ -555,11 +497,3 @@ @apply bg-alpha-black-700; } } - -@utility bg-nav-indicator { - @apply bg-black; - - @variant theme-dark { - @apply bg-white; - } -} diff --git a/app/components/provider_sync_summary.html.erb b/app/components/provider_sync_summary.html.erb index c2df24d43..5770c4f56 100644 --- a/app/components/provider_sync_summary.html.erb +++ b/app/components/provider_sync_summary.html.erb @@ -123,7 +123,7 @@ <% if error_details.any? %>
<%= t("provider_sync_summary.health.view_error_details") %> -
+
<% error_details.each do |detail| %>

<% if detail["name"].present? %><%= detail["name"] %>: <% end %><%= detail["message"] %> diff --git a/app/views/simplefin_items/edit.html.erb b/app/views/simplefin_items/edit.html.erb index 51f26f39d..a350327bf 100644 --- a/app/views/simplefin_items/edit.html.erb +++ b/app/views/simplefin_items/edit.html.erb @@ -28,7 +28,7 @@

<% if @error_message %> -
+
<%= icon "alert-triangle", size: "sm", class: "text-destructive mt-0.5 flex-shrink-0" %>

<%= @error_message %>

diff --git a/design/tokens/sure.tokens.json b/design/tokens/sure.tokens.json index 8602a5a83..6e63b3b6b 100644 --- a/design/tokens/sure.tokens.json +++ b/design/tokens/sure.tokens.json @@ -24,6 +24,18 @@ "info": { "$value": "{color.blue.600}", "$type": "color", "$extensions": { "sure.dark": "{color.blue.500}" } }, "shadow": { "$value": "{color.black|6%}", "$type": "color", "$extensions": { "sure.dark": "{color.white|8%}" } }, + "link": { "$value": "{color.blue.600}", "$type": "color", "$extensions": { "sure.dark": "{color.blue.500}" } }, + "tertiary": { "$value": "{color.alpha-black.100}", "$type": "color", "$extensions": { "sure.dark": "{color.alpha-white.200}" } }, + "surface": { "$value": "{color.gray.50}", "$type": "color", "$extensions": { "sure.dark": "{color.black}" } }, + "surface-hover": { "$value": "{color.gray.100}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } }, + "surface-inset": { "$value": "{color.gray.100}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } }, + "surface-inset-hover": { "$value": "{color.gray.200}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } }, + "container": { "$value": "{color.white}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.900}" } }, + "container-hover": { "$value": "{color.gray.50}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } }, + "container-inset": { "$value": "{color.gray.50}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } }, + "container-inset-hover": { "$value": "{color.gray.100}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.700}" } }, + "nav-indicator": { "$value": "{color.black}", "$type": "color", "$extensions": { "sure.dark": "{color.white}" } }, + "gray": { "25": { "$value": "#FAFAFA", "$type": "color" }, "50": { "$value": "#F7F7F7", "$type": "color" }, @@ -253,14 +265,6 @@ }, "utility": { - "bg-surface": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.black}" } }, - "bg-surface-hover": { "$type": "utility", "$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } }, - "bg-surface-inset": { "$type": "utility", "$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } }, - "bg-surface-inset-hover": { "$type": "utility", "$value": "{color.gray.200}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } }, - "bg-container": { "$type": "utility", "$value": "{color.white}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.900}" } }, - "bg-container-hover": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } }, - "bg-container-inset": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } }, - "bg-container-inset-hover":{ "$type": "utility","$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } }, "bg-inverse": { "$type": "utility", "$value": "{color.gray.800}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.white}" } }, "bg-inverse-hover": { "$type": "utility", "$value": "{color.gray.700}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.100}" } }, "bg-overlay": { @@ -280,7 +284,6 @@ "text-inverse": { "$type": "utility", "$value": "{color.white}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.gray.900}" } }, "text-secondary": { "$type": "utility", "$value": "{color.gray.500}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.gray.300}" } }, "text-subdued": { "$type": "utility", "$value": "{color.gray.400}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.gray.500}" } }, - "text-link": { "$type": "utility", "$value": "{color.blue.600}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.blue.500}" } }, "shadow-border-xs": { "$type": "utility", @@ -325,7 +328,6 @@ "border-primary": { "$type": "utility", "$value": "{color.alpha-black.300}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.400}" } }, "border-secondary": { "$type": "utility", "$value": "{color.alpha-black.200}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.300}" } }, - "border-tertiary": { "$type": "utility", "$value": "{color.alpha-black.100}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.200}" } }, "border-divider": { "$type": "utility", "$value": "border-tertiary" }, "border-subdued": { "$type": "utility", "$value": "{color.alpha-black.50}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.100}" } }, "border-solid": { "$type": "utility", "$value": "{color.black}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.white}" } }, @@ -346,7 +348,6 @@ "tab-item-active": { "$type": "utility", "$value": "{color.white}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } }, "tab-item-hover": { "$type": "utility", "$value": "{color.gray.200}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } }, - "tab-bg-group": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.alpha-black.700}" } }, - "bg-nav-indicator": { "$type": "utility", "$value": "{color.black}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.white}" } } + "tab-bg-group": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.alpha-black.700}" } } } }