fix(ui): add button-primary-base variable and use primary variant for Comment button

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()

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);
 

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);

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)",