From f7adcac2eb4903d3a8490df6169b6086702d3603 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 18 May 2026 20:27:35 +0200
Subject: [PATCH] fix(DS::Pill): readable contrast in light mode + drop pill
 from Goal detail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bind CSS `color-scheme` to Sure's `data-theme` attribute so the pill's
  `light-dark()` resolves to the side that matches the active theme. In
  the dark theme it was previously falling back to the light branch.
- Darken light-mode pill text 30% with black on top of the 700 stop so
  the 10–11px uppercase label reads against the violet-50 background.
- Drop the Beta pill from the Goal detail page header. A single goal is
  not the feature; the pill belongs on the feature index, not on each
  record.
---
 app/assets/tailwind/sure-design-system/base.css | 11 +++++++++++
 app/components/DS/pill.rb                       | 14 +++++++++-----
 app/views/goals/show.html.erb                   |  5 +----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/app/assets/tailwind/sure-design-system/base.css b/app/assets/tailwind/sure-design-system/base.css
index 991cfc4ef..f1e9c822b 100644
--- a/app/assets/tailwind/sure-design-system/base.css
+++ b/app/assets/tailwind/sure-design-system/base.css
@@ -1,4 +1,15 @@
 @layer base {
+  /* Bind CSS color-scheme to Sure's data-theme attribute so the CSS
+     `light-dark()` function resolves to the side that matches the active
+     theme (used by DS::Pill and any future tokens that opt in). */
+  :root {
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
   button {
     @apply cursor-pointer focus-visible:outline-gray-900;
   }
diff --git a/app/components/DS/pill.rb b/app/components/DS/pill.rb
index 0e742612c..05733c4f4 100644
--- a/app/components/DS/pill.rb
+++ b/app/components/DS/pill.rb
@@ -25,12 +25,16 @@ class DS::Pill < DesignSystemComponent
   end
 
   def palette
+    # Light-mode `text` is mixed 30% with black on top of the 700 stop so
+    # the 10–11px uppercase label still reads against the very pale 50
+    # background. Without the mix the perceptual contrast feels low even
+    # though the raw ratio passes WCAG.
     {
-      violet:  { bg: "var(--color-violet-50)",  bg_dark: "var(--color-violet-tint-10)",  text: "var(--color-violet-700)",  text_dark: "var(--color-violet-200)",  border: "var(--color-violet-200)",  dot: "var(--color-violet-500)",  fill: "var(--color-violet-500)" },
-      indigo:  { bg: "var(--color-indigo-50)",  bg_dark: "var(--color-indigo-tint-10)",  text: "var(--color-indigo-700)",  text_dark: "var(--color-indigo-200)",  border: "var(--color-indigo-200)",  dot: "var(--color-indigo-500)",  fill: "var(--color-indigo-500)" },
-      fuchsia: { bg: "var(--color-fuchsia-50)", bg_dark: "var(--color-fuchsia-tint-10)", text: "var(--color-fuchsia-700)", text_dark: "var(--color-fuchsia-200)", border: "var(--color-fuchsia-200)", dot: "var(--color-fuchsia-500)", fill: "var(--color-fuchsia-500)" },
-      amber:   { bg: "var(--color-yellow-50)",  bg_dark: "var(--color-yellow-tint-10)",  text: "var(--color-yellow-700)",  text_dark: "var(--color-yellow-200)",  border: "var(--color-yellow-200)",  dot: "var(--color-yellow-500)",  fill: "var(--color-yellow-500)" },
-      gray:    { bg: "var(--color-gray-100)",   bg_dark: "var(--color-gray-tint-10)",    text: "var(--color-gray-700)",    text_dark: "var(--color-gray-200)",    border: "var(--color-gray-200)",    dot: "var(--color-gray-500)",    fill: "var(--color-gray-500)" }
+      violet:  { bg: "var(--color-violet-50)",  bg_dark: "var(--color-violet-tint-10)",  text: "color-mix(in oklab, var(--color-violet-700), black 30%)",  text_dark: "var(--color-violet-200)",  border: "var(--color-violet-200)",  dot: "var(--color-violet-500)",  fill: "var(--color-violet-500)" },
+      indigo:  { bg: "var(--color-indigo-50)",  bg_dark: "var(--color-indigo-tint-10)",  text: "color-mix(in oklab, var(--color-indigo-700), black 30%)",  text_dark: "var(--color-indigo-200)",  border: "var(--color-indigo-200)",  dot: "var(--color-indigo-500)",  fill: "var(--color-indigo-500)" },
+      fuchsia: { bg: "var(--color-fuchsia-50)", bg_dark: "var(--color-fuchsia-tint-10)", text: "color-mix(in oklab, var(--color-fuchsia-700), black 30%)", text_dark: "var(--color-fuchsia-200)", border: "var(--color-fuchsia-200)", dot: "var(--color-fuchsia-500)", fill: "var(--color-fuchsia-500)" },
+      amber:   { bg: "var(--color-yellow-50)",  bg_dark: "var(--color-yellow-tint-10)",  text: "color-mix(in oklab, var(--color-yellow-700), black 30%)",  text_dark: "var(--color-yellow-200)",  border: "var(--color-yellow-200)",  dot: "var(--color-yellow-500)",  fill: "var(--color-yellow-500)" },
+      gray:    { bg: "var(--color-gray-100)",   bg_dark: "var(--color-gray-tint-10)",    text: "color-mix(in oklab, var(--color-gray-700), black 30%)",    text_dark: "var(--color-gray-200)",    border: "var(--color-gray-200)",    dot: "var(--color-gray-500)",    fill: "var(--color-gray-500)" }
     }[tone]
   end
 
diff --git a/app/views/goals/show.html.erb b/app/views/goals/show.html.erb
index cbdf63cf9..7036e1638 100644
--- a/app/views/goals/show.html.erb
+++ b/app/views/goals/show.html.erb
@@ -4,10 +4,7 @@
       <%= render Goals::AvatarComponent.new(goal: @goal, size: "xl") %>
     </div>
     <div class="min-w-0 flex-1">
-      <div class="flex items-center gap-2 flex-wrap">
-        <h1 class="text-2xl font-semibold text-primary break-words"><%= @goal.name %></h1>
-        <%= render DS::Pill.new(label: "Beta", size: :md) %>
-      </div>
+      <h1 class="text-2xl font-semibold text-primary break-words"><%= @goal.name %></h1>
       <p class="text-sm text-secondary mt-1"><%= @goal.header_summary %></p>
       <% last_days = @goal.last_matched_pledge_days_ago %>
       <% unless last_days.nil? %>