From 34c660b8f70b9985201fd73c5dbe553c77f977ab Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 6 Aug 2025 15:46:45 -0500
Subject: [PATCH] Custom button colors

---
 src/components/Button.tsx              | 52 ++++++++++++++++++++++++--
 src/view/screens/Storybook/Buttons.tsx |  1 +
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index eba5d03a1f..6aefcee0bb 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -37,6 +37,7 @@ export type ButtonColor =
   | 'secondary'
   | 'secondary_inverted'
   | 'negative'
+  | 'primary_subtle'
   | 'negative_subtle'
 export type ButtonSize = 'tiny' | 'small' | 'large'
 export type ButtonShape = 'round' | 'square' | 'default'
@@ -269,6 +270,31 @@ export const Button = React.forwardRef<View, ButtonProps>(
               backgroundColor: t.palette.negative_700,
             })
           }
+        } else if (color === 'primary_subtle') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: select(t.name, {
+                light: t.palette.primary_50,
+                dim: t.palette.primary_100,
+                dark: t.palette.primary_100,
+              }),
+            })
+            hoverStyles.push({
+              backgroundColor: select(t.name, {
+                light: t.palette.primary_100,
+                dim: t.palette.primary_200,
+                dark: t.palette.primary_200,
+              }),
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: select(t.name, {
+                light: t.palette.primary_25,
+                dim: t.palette.primary_50,
+                dark: t.palette.primary_50,
+              }),
+            })
+          }
         } else if (color === 'negative_subtle') {
           if (!disabled) {
             baseStyles.push({
@@ -589,21 +615,39 @@ export function useSharedButtonTextStyles() {
         } else {
           baseStyles.push({color: t.palette.negative_300})
         }
+      } else if (color === 'primary_subtle') {
+        if (!disabled) {
+          baseStyles.push({
+            color: select(t.name, {
+              light: t.palette.primary_600,
+              dim: t.palette.primary_800,
+              dark: t.palette.primary_800,
+            }),
+          })
+        } else {
+          baseStyles.push({
+            color: select(t.name, {
+              light: t.palette.primary_200,
+              dim: t.palette.primary_200,
+              dark: t.palette.primary_200,
+            }),
+          })
+        }
       } else if (color === 'negative_subtle') {
         if (!disabled) {
           baseStyles.push({
             color: select(t.name, {
               light: t.palette.negative_600,
-              dim: t.palette.negative_950,
-              dark: t.palette.negative_950,
+              dim: t.palette.negative_800,
+              dark: t.palette.negative_800,
             }),
           })
         } else {
           baseStyles.push({
             color: select(t.name, {
               light: t.palette.negative_200,
-              dim: t.palette.negative_300,
-              dark: t.palette.negative_300,
+              dim: t.palette.negative_200,
+              dark: t.palette.negative_200,
             }),
           })
         }
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index 0ede1faceb..0db0629135 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -23,6 +23,7 @@ export function Buttons() {
         'secondary',
         'secondary_inverted',
         'negative',
+        'primary_subtle',
         'negative_subtle',
       ].map(color => (
         <Fragment key={color}>