From 944d4c6a820c5bf6e81833004e17375a718e941f Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Sat, 9 Mar 2024 11:08:18 -0800
Subject: [PATCH] Add tertiary button color

---
 src/components/Button.tsx              | 71 ++++++++++++++++++++++++++
 src/view/screens/Storybook/Buttons.tsx |  2 +-
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 2d65b56834..36350f619d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -20,6 +20,7 @@ export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
   | 'primary'
   | 'secondary'
+  | 'tertiary'
   | 'negative'
   | 'gradient_sky'
   | 'gradient_midnight'
@@ -224,6 +225,43 @@ export function Button({
           })
         }
       }
+    } else if (color === 'tertiary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.contrast_25,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_50,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: t.palette.contrast_50,
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_200,
+          })
+          hoverStyles.push(t.atoms.bg_contrast_25)
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_100,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_50,
+          })
+        }
+      }
     } else if (color === 'negative') {
       if (variant === 'solid') {
         if (!disabled) {
@@ -323,6 +361,7 @@ export function Button({
       const gradient = {
         primary: tokens.gradients.sky,
         secondary: tokens.gradients.sky,
+        tertiary: tokens.gradients.sky,
         negative: tokens.gradients.sky,
         gradient_sky: tokens.gradients.sky,
         gradient_midnight: tokens.gradients.midnight,
@@ -480,6 +519,38 @@ export function useSharedButtonTextStyles() {
           })
         }
       }
+    } else if (color === 'tertiary') {
+      if (variant === 'solid' || variant === 'gradient') {
+        if (!disabled) {
+          baseStyles.push({
+            color: t.palette.contrast_700,
+          })
+        } else {
+          baseStyles.push({
+            color: t.palette.contrast_400,
+          })
+        }
+      } else if (variant === 'outline') {
+        if (!disabled) {
+          baseStyles.push({
+            color: t.palette.contrast_500,
+          })
+        } else {
+          baseStyles.push({
+            color: t.palette.contrast_300,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push({
+            color: t.palette.contrast_400,
+          })
+        } else {
+          baseStyles.push({
+            color: t.palette.contrast_200,
+          })
+        }
+      }
     } else if (color === 'negative') {
       if (variant === 'solid' || variant === 'gradient') {
         if (!disabled) {
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index ad2fff3f4a..1a8f2f3707 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -20,7 +20,7 @@ export function Buttons() {
       <H1>Buttons</H1>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
-        {['primary', 'secondary', 'negative'].map(color => (
+        {['primary', 'secondary', 'tertiary', 'negative'].map(color => (
           <View key={color} style={[a.gap_md, a.align_start]}>
             {['solid', 'outline', 'ghost'].map(variant => (
               <React.Fragment key={variant}>