From 2daa3652bb74e57153bf00c500f30087e040e73f Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Fri, 23 Jan 2026 20:11:33 +0000
Subject: [PATCH] fix(ui): add button-primary-base variable and use primary
 variant for Comment button

---
 packages/app/src/pages/session.tsx     | 2 +-
 packages/ui/src/components/button.css  | 2 +-
 packages/ui/src/styles/theme.css       | 2 ++
 packages/ui/src/theme/themes/oc-1.json | 2 ++
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index b41afb18c..bb6c752d0 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -2087,7 +2087,7 @@ export default function Page() {
                                       </Button>
                                       <Button
                                         size="small"
-                                        variant="secondary"
+                                        variant="primary"
                                         disabled={draft().trim().length === 0}
                                         onClick={() => {
                                           const value = draft().trim()
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index c25b89af9..6922d996f 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -12,7 +12,7 @@
   white-space: nowrap;
 
   &[data-variant="primary"] {
-    background-color: var(--icon-strong-base);
+    background-color: var(--button-primary-base);
     border-color: var(--border-weak-base);
     color: var(--icon-invert-base);
 
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 8eed18748..e6d0cdb86 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -182,6 +182,7 @@
   --text-on-brand-weak: var(--smoke-light-alpha-9);
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
   --text-on-brand-strong: var(--smoke-light-alpha-12);
+  --button-primary-base: var(--smoke-light-12);
   --button-secondary-base: #fdfcfc;
   --button-secondary-hover: #faf9f9;
   --border-base: var(--smoke-light-alpha-7);
@@ -438,6 +439,7 @@
     --text-on-brand-weak: var(--smoke-dark-alpha-9);
     --text-on-brand-weaker: var(--smoke-dark-alpha-8);
     --text-on-brand-strong: var(--smoke-dark-alpha-12);
+    --button-primary-base: var(--smoke-dark-12);
     --button-secondary-base: #231f1f;
     --button-secondary-hover: #2a2727;
     --border-base: var(--smoke-dark-alpha-7);
diff --git a/packages/ui/src/theme/themes/oc-1.json b/packages/ui/src/theme/themes/oc-1.json
index fe04b1901..11b2c56dd 100644
--- a/packages/ui/src/theme/themes/oc-1.json
+++ b/packages/ui/src/theme/themes/oc-1.json
@@ -115,6 +115,7 @@
       "text-on-brand-weak": "var(--smoke-light-alpha-9)",
       "text-on-brand-weaker": "var(--smoke-light-alpha-8)",
       "text-on-brand-strong": "var(--smoke-light-alpha-12)",
+      "button-primary-base": "var(--smoke-light-12)",
       "button-secondary-base": "#fdfcfc",
       "button-secondary-hover": "#faf9f9",
       "border-base": "var(--smoke-light-alpha-7)",
@@ -380,6 +381,7 @@
       "text-on-brand-weak": "var(--smoke-dark-alpha-9)",
       "text-on-brand-weaker": "var(--smoke-dark-alpha-8)",
       "text-on-brand-strong": "var(--smoke-dark-alpha-12)",
+      "button-primary-base": "var(--smoke-dark-12)",
       "button-secondary-base": "#231f1f",
       "button-secondary-hover": "#2a2727",
       "border-base": "var(--smoke-dark-alpha-7)",