From 99844c1b90049de69c5dcbb0410001e2db9f1a61 Mon Sep 17 00:00:00 2001 From: Guillem Arias Fauste Date: Mon, 4 May 2026 21:44:47 +0200 Subject: [PATCH] chore(design-system): swap raw gray classes for semantic tokens in holdings/ (#1654) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(design-system): swap raw gray classes for semantic tokens in holdings/ Continues the raw-color sweep on the holdings/ domain plus the related account activity feed component. 11 occurrences across 5 files. Token additions: - button-bg-secondary-strong (gray-200 / gray-700) and -hover (gray-300 / gray-600). Holdings CTAs (Add Trade, Add Holding, Edit Cost Basis, Sync Prices, etc.) used a hand-rolled "secondary-strong" pattern that doesn't match the existing button-bg-secondary token (which is gray-50 / gray-700, much subtler). Adding the strong variant preserves the intentional visual weight of these CTAs and gives future PRs a name to reuse. - $version bump 1.0.0 -> 1.1.0 (additive). Mappings: - 8x text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600 (holdings/show + sync_prices + cost_basis_cell) -> text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover - 1x bg-gray-50 theme-dark:bg-gray-700 hover:bg-gray-100 theme-dark:hover:bg-gray-600 (holdings/index search button) -> button-bg-secondary hover:button-bg-secondary-hover - 1x hover:bg-gray-100 theme-dark:hover:bg-gray-700 (cost_basis_cell hover row) -> hover:bg-container-inset-hover - 1x focus-within:border-gray-900 (activity_feed search wrapper) -> focus-within:border-primary Left intentionally: - bg-gray-300 status indicator dot in show.html.erb (same pattern as the settings pilot; no semantic equivalent for "neutral inactive indicator" yet). - bg-gray-700 in _missing_price_tooltip.html.erb (already fixed in PR #1626; would conflict on rebase). - focus-within:ring-gray-100 (subtle effect that works in both modes; ring-color tokens are a separate concern). * chore(design-system): bump $version to 2.1.0 for additive token additions Per the design tokens semver contract: PR #1626 already bumped to 2.0.0 (major / breaking when fg-* utilities were removed). This PR adds button-bg-secondary-strong + hover without removing or changing existing tokens, so the correct bump is minor (2.0.0 → 2.1.0). Spotted by CodeRabbit on the rebased branch. * fix(design-system): drop dead focus-within:ring-gray-100 on activity feed search The focus-within:ring-gray-100 class only sets --tw-ring-color, but the parent has no ring-width utility, so it produces no visible ring — dead code from before the focus-within:border-primary swap landed. Same issue spotted on app/views/accounts/show/_activity.html.erb in the finalize sweep PR; applying the equivalent fix here for the holdings activity feed component. --------- Signed-off-by: Guillem Arias Fauste --- .../tailwind/sure-design-system/_generated.css | 16 ++++++++++++++++ app/components/UI/account/activity_feed.html.erb | 2 +- app/views/holdings/_cost_basis_cell.html.erb | 4 ++-- app/views/holdings/index.html.erb | 2 +- app/views/holdings/show.html.erb | 10 +++++----- app/views/holdings/sync_prices.turbo_stream.erb | 2 +- design/tokens/sure.tokens.json | 4 +++- 7 files changed, 29 insertions(+), 11 deletions(-) diff --git a/app/assets/tailwind/sure-design-system/_generated.css b/app/assets/tailwind/sure-design-system/_generated.css index dc4e8f855..fe92a6a29 100644 --- a/app/assets/tailwind/sure-design-system/_generated.css +++ b/app/assets/tailwind/sure-design-system/_generated.css @@ -474,6 +474,22 @@ } } +@utility button-bg-secondary-strong { + @apply bg-gray-200; + + @variant theme-dark { + @apply bg-gray-700; + } +} + +@utility button-bg-secondary-strong-hover { + @apply bg-gray-300; + + @variant theme-dark { + @apply bg-gray-600; + } +} + @utility button-bg-disabled { @apply bg-gray-50; diff --git a/app/components/UI/account/activity_feed.html.erb b/app/components/UI/account/activity_feed.html.erb index 00adaf3fd..4d97b2d4c 100644 --- a/app/components/UI/account/activity_feed.html.erb +++ b/app/components/UI/account/activity_feed.html.erb @@ -54,7 +54,7 @@ data: { controller: "auto-submit-form" } do |form| %>
-
+
<%= helpers.icon("search") %> <%= hidden_field_tag :account_id, account.id %> diff --git a/app/views/holdings/_cost_basis_cell.html.erb b/app/views/holdings/_cost_basis_cell.html.erb index f482d0097..7bc19c237 100644 --- a/app/views/holdings/_cost_basis_cell.html.erb +++ b/app/views/holdings/_cost_basis_cell.html.erb @@ -28,7 +28,7 @@ <%= icon "pencil", size: "xs", class: "text-secondary opacity-0 group-hover:opacity-100 transition-opacity" %>
<% else %> -
+
<%= icon "pencil", size: "xs" %> Set
@@ -95,7 +95,7 @@
diff --git a/app/views/holdings/index.html.erb b/app/views/holdings/index.html.erb index a98a88c27..22eb0afa2 100644 --- a/app/views/holdings/index.html.erb +++ b/app/views/holdings/index.html.erb @@ -5,7 +5,7 @@ <%= link_to new_trade_path(account_id: @account.id), id: dom_id(@account, "new_trade"), data: { turbo_frame: :modal }, - class: "flex gap-1 font-medium items-center bg-gray-50 theme-dark:bg-gray-700 hover:bg-gray-100 theme-dark:hover:bg-gray-600 text-primary p-2 rounded-lg" do %> + class: "flex gap-1 font-medium items-center button-bg-secondary hover:button-bg-secondary-hover text-primary p-2 rounded-lg" do %> <%= icon("plus", color: "current") %> diff --git a/app/views/holdings/show.html.erb b/app/views/holdings/show.html.erb index 37c7c86d4..153166c2d 100644 --- a/app/views/holdings/show.html.erb +++ b/app/views/holdings/show.html.erb @@ -68,7 +68,7 @@
@@ -181,7 +181,7 @@
@@ -278,7 +278,7 @@ <%= button_to t(".reset_to_provider"), reset_security_holding_path(@holding), method: :post, - class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600", + class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover", form: { data: { turbo: false } }, data: { turbo_confirm: { title: t(".reset_confirm_title"), @@ -297,7 +297,7 @@ <%= button_to t(".market_data_sync_button"), sync_prices_holding_path(@holding), method: :post, - class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600", + class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover", data: { loading_button_target: "button" }, form: { data: { controller: "loading-button", @@ -315,7 +315,7 @@ <%= button_to t(".unlock_cost_basis"), unlock_cost_basis_holding_path(@holding), method: :post, - class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600", + class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover", form: { data: { turbo: false } }, data: { turbo_confirm: { title: t(".unlock_confirm_title"), body: t(".unlock_confirm_body") } } %>
diff --git a/app/views/holdings/sync_prices.turbo_stream.erb b/app/views/holdings/sync_prices.turbo_stream.erb index f2e253d91..98ab65d43 100644 --- a/app/views/holdings/sync_prices.turbo_stream.erb +++ b/app/views/holdings/sync_prices.turbo_stream.erb @@ -45,7 +45,7 @@ <%= button_to t("holdings.show.market_data_sync_button"), sync_prices_holding_path(@holding), method: :post, - class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600", + class: "inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover", data: { loading_button_target: "button" }, form: { data: { controller: "loading-button", diff --git a/design/tokens/sure.tokens.json b/design/tokens/sure.tokens.json index e8c3ce27c..8803068e6 100644 --- a/design/tokens/sure.tokens.json +++ b/design/tokens/sure.tokens.json @@ -1,6 +1,6 @@ { "$schema": "https://design-tokens.github.io/community-group/format/", - "$version": "2.0.0", + "$version": "2.1.0", "$description": "Sure design tokens. Single source of truth. Hand-edit; run `npm run tokens:build` to regenerate CSS. Template syntax in $value strings: `{path.to.token}` resolves to `var(--path-to-token)`; `{path|N%}` becomes `--alpha(var(--path) / N%)`. Utility tokens whose value lacks `{}` are treated as raw Tailwind class lists for @apply.", "font": { @@ -335,6 +335,8 @@ "button-bg-primary-hover": { "$type": "utility", "$value": "{color.gray.800}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.50}" } }, "button-bg-secondary": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } }, "button-bg-secondary-hover": { "$type": "utility", "$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.600}" } }, + "button-bg-secondary-strong": { "$type": "utility", "$value": "{color.gray.200}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } }, + "button-bg-secondary-strong-hover": { "$type": "utility", "$value": "{color.gray.300}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.600}" } }, "button-bg-disabled": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } }, "button-bg-destructive": { "$type": "utility", "$value": "{color.red.500}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.red.400}" } }, "button-bg-destructive-hover": { "$type": "utility", "$value": "{color.red.600}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.red.500}" } },