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}" } } } }