From dc382fa2de19609f1a6f10cadd76458f3ef66ecf Mon Sep 17 00:00:00 2001
From: "Beau Beauchamp, WebTigers" <beau@webtigers.com>
Date: Fri, 28 Aug 2026 09:18:20 -0400
Subject: [PATCH] fix(theme): solid primary buttons follow the skin, like
 outline ones already did
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A card showing a `btn-primary` next to a `btn-outline-primary` drew one Bootstrap
blue and one skin orange under Bengal.

Bootstrap 5.3 bakes the stock blue (#0d6efd) into BOTH variants' component vars,
so a skin that swaps --bs-primary restyles neither. default.css already rebound
.btn-outline-primary to var(--bs-primary) — with a comment explaining exactly
this trap — but .btn-primary was never given the same treatment, so the outline
tracked the skin and the solid did not. Any pairing of the two disagreed, in
every skin except cheetah (which hardcodes its own solid rule and so looked
fine, hiding the bug).

Both variants are now bound to the token, so bengal orange, jaguar navy and
tabby orange all render a matching pair. Hover/active darken via color-mix, each
preceded by a plain var() fallback: a browser without color-mix drops the
unsupported declaration and keeps the earlier one, so the button degrades to a
flat skin-colored hover rather than to blue.

Also reunites the explanatory comment with the rules it documents — a later
.cell-emphasis addition had been inserted between them, leaving the comment
sitting above the wrong block.

cheetah.css keeps its bespoke solid override: it is now redundant (same teal,
hand-tuned shades) but it is precisely the per-skin escape hatch the comment
sanctions, and its shades are better than a generic mix.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WXgMENcwa4Q8yCJaHpjHpf
---
 themes/puma/assets/default.css | 36 ++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/themes/puma/assets/default.css b/themes/puma/assets/default.css
index 2d4095a..9c6469c 100644
--- a/themes/puma/assets/default.css
+++ b/themes/puma/assets/default.css
@@ -31,12 +31,6 @@ html[lang="tlh"] body {
  * language switcher, shown in its own script on every page (the @font-face above is global). */
 .tiger-lang-piqad { font-family: "pIqaD", system-ui, sans-serif; }
 
-/* Outline-primary buttons track the ACTIVE SKIN's primary color. Bootstrap 5.3 bakes the stock
- * blue (#0d6efd) straight into .btn-outline-primary's component vars, so a skin that only swaps
- * --bs-primary (bengal orange, cheetah teal, jaguar navy, tabby orange) would still render a blue
- * outline. Rebinding the button vars to var(--bs-primary) makes the border, label, hover-fill,
- * active state, and focus ring all follow the skin — no per-skin rule needed. Lives in the theme
- * base so every skin inherits it; a skin may still override for a bespoke outline. */
 /* Emphasized comparison-table column (the "our product" column on the marketing pages). A soft,
  * theme-aware primary wash that reads well in BOTH light and dark mode and follows the active skin —
  * unlike Bootstrap's .table-primary, whose fixed powder-blue background + forced black text clash in
@@ -51,6 +45,36 @@ html[lang="tlh"] body {
     --bs-table-bg: rgba(var(--bs-primary-rgb), .16);
 }
 
+/* Primary buttons — SOLID AND OUTLINE — track the ACTIVE SKIN's primary color.
+ *
+ * Bootstrap 5.3 bakes the stock blue (#0d6efd) straight into both variants' component vars, so a
+ * skin that only swaps --bs-primary (bengal orange, cheetah teal, jaguar navy, tabby orange) still
+ * renders blue buttons. Rebinding the button vars to var(--bs-primary) makes the fill, border,
+ * label, hover, active state and focus ring all follow the skin — no per-skin rule needed.
+ *
+ * BOTH variants must be here or they disagree: for a while only the outline was rebound, so a card
+ * offering `btn-primary` beside `btn-outline-primary` drew one orange and one Bootstrap blue.
+ *
+ * Hover/active darken via color-mix; the plain var() line before each is the fallback a browser
+ * without color-mix keeps (an unsupported declaration is dropped, so the earlier one stands).
+ *
+ * Lives in the theme base so every skin inherits it; a skin may still override for a bespoke look. */
+.btn-primary {
+    --bs-btn-bg: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-primary);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
+    --bs-btn-active-bg: var(--bs-primary);
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, #000);
+    --bs-btn-active-border-color: var(--bs-primary);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 72%, #000);
+    --bs-btn-disabled-bg: var(--bs-primary);
+    --bs-btn-disabled-border-color: var(--bs-primary);
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
+}
+
 .btn-outline-primary {
     --bs-btn-color: var(--bs-primary);
     --bs-btn-border-color: var(--bs-primary);