From 48862f8ed9867453b430c571cc0bb0bb52d14b29 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Thu, 21 May 2026 15:55:22 +0200 Subject: [PATCH] refactor(goals): use semantic color tokens for ring + status callout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `Goals::CardComponent#ring_color` and `goals/_status_callout` reached into the Tailwind palette directly (`text-yellow-700`, `var(--color-green-600)`, etc.) for status-coded colors. The sure-design-system already exposes the matching semantic tokens (`text-warning`, `text-success`, `--color-success`, `--color-warning`), which theme-swap correctly in dark mode and survive palette renames without view edits. - `ring_color`: collapse `:reached` / `:on_track` to `--color-success` (the status pill already differentiates them via icon — completed star vs check) and `:behind` to `--color-warning`. The `:no_target_date` fallback keeps `--color-gray-400` for now since there's no semantic neutral token; that gets cleaned up alongside the DS::ProgressRing extraction. - `_status_callout`: drop `text-yellow-700 theme-dark:text-yellow-300` and `text-green-700 theme-dark:text-green-300` for the equivalent semantic `text-warning` / `text-success` utilities. No visual regression in light mode (success collapses two adjacent greens into one); dark mode now properly inverts via the design system's theme variants instead of hand-rolled overrides. The `stroke="var(--budget-unused-fill)"` track on the inline card ring stays for now — that's a token-rename refactor that touches budget code outside this PR's scope and lands cleanest with the DS::ProgressRing primitive that consolidates the three ring implementations. --- app/components/goals/card_component.rb | 5 ++--- app/views/goals/_status_callout.html.erb | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app/components/goals/card_component.rb b/app/components/goals/card_component.rb index 4d2a22742..34fe7fd6f 100644 --- a/app/components/goals/card_component.rb +++ b/app/components/goals/card_component.rb @@ -15,9 +15,8 @@ class Goals::CardComponent < ApplicationComponent def ring_color case goal.status - when :reached then "var(--color-green-600)" - when :behind then "var(--color-yellow-600)" - when :on_track then "var(--color-green-500)" + when :reached, :on_track then "var(--color-success)" + when :behind then "var(--color-warning)" else "var(--color-gray-400)" end end diff --git a/app/views/goals/_status_callout.html.erb b/app/views/goals/_status_callout.html.erb index 721adb32e..2c6521d74 100644 --- a/app/views/goals/_status_callout.html.erb +++ b/app/views/goals/_status_callout.html.erb @@ -4,9 +4,9 @@ variant_classes = case goal.status when :behind - "bg-warning/10 border-warning/20 text-yellow-700 theme-dark:text-yellow-300" + "bg-warning/10 border-warning/20 text-warning" when :on_track - "bg-success/10 border-success/20 text-green-700 theme-dark:text-green-300" + "bg-success/10 border-success/20 text-success" else "bg-surface-inset border-secondary text-secondary" end