From 414167c3cbef182557f83237cf1c18d687a3eb8a Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 11 Jul 2024 13:52:37 -0500
Subject: [PATCH] Button tweaks, some theme diffs

---
 src/components/Button.tsx              | 28 +++++++++++----
 src/view/screens/Storybook/Buttons.tsx | 50 ++++++++++++++------------
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 7538cb67a4..f7233b1294 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -13,7 +13,7 @@ import {
 } from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
 
-import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'
+import {android, atoms as a, flatten, select, tokens, useTheme} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {normalizeTextStyles} from '#/components/Typography'
 
@@ -164,7 +164,11 @@ export const Button = React.forwardRef<View, ButtonProps>(
             })
           } else {
             baseStyles.push({
-              backgroundColor: t.palette.primary_300,
+              backgroundColor: select(t.name, {
+                light: t.palette.primary_700,
+                dim: t.palette.primary_300,
+                dark: t.palette.primary_300,
+              }),
             })
           }
         } else if (variant === 'outline') {
@@ -196,14 +200,26 @@ export const Button = React.forwardRef<View, ButtonProps>(
         if (variant === 'solid') {
           if (!disabled) {
             baseStyles.push({
-              backgroundColor: t.palette.contrast_100,
+              backgroundColor: select(t.name, {
+                light: t.palette.contrast_25,
+                dim: t.palette.contrast_100,
+                dark: t.palette.contrast_100,
+              }),
             })
             hoverStyles.push({
-              backgroundColor: t.palette.contrast_200,
+              backgroundColor: select(t.name, {
+                light: t.palette.contrast_50,
+                dim: t.palette.contrast_200,
+                dark: t.palette.contrast_200,
+              }),
             })
           } else {
             baseStyles.push({
-              backgroundColor: t.palette.contrast_25,
+              backgroundColor: select(t.name, {
+                light: t.palette.contrast_100,
+                dim: t.palette.contrast_25,
+                dark: t.palette.contrast_25,
+              }),
             })
           }
         } else if (variant === 'outline') {
@@ -240,7 +256,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
             })
           } else {
             baseStyles.push({
-              backgroundColor: t.palette.contrast_700,
+              backgroundColor: t.palette.contrast_600,
             })
           }
         } else if (variant === 'outline') {
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index 7cc3f60bf7..2935103dfb 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -20,29 +20,31 @@ export function Buttons() {
       <H1>Buttons</H1>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
-        {['primary', 'secondary', 'secondary_inverted'].map(color => (
-          <View key={color} style={[a.gap_md, a.align_start]}>
-            {['solid', 'outline', 'ghost'].map(variant => (
-              <React.Fragment key={variant}>
-                <Button
-                  variant={variant as ButtonVariant}
-                  color={color as ButtonColor}
-                  size="large"
-                  label="Click here">
-                  <ButtonText>Button</ButtonText>
-                </Button>
-                <Button
-                  disabled
-                  variant={variant as ButtonVariant}
-                  color={color as ButtonColor}
-                  size="large"
-                  label="Click here">
-                  <ButtonText>Button</ButtonText>
-                </Button>
-              </React.Fragment>
-            ))}
-          </View>
-        ))}
+        {['primary', 'secondary', 'secondary_inverted', 'negative'].map(
+          color => (
+            <View key={color} style={[a.gap_md, a.align_start]}>
+              {['solid', 'outline', 'ghost'].map(variant => (
+                <React.Fragment key={variant}>
+                  <Button
+                    variant={variant as ButtonVariant}
+                    color={color as ButtonColor}
+                    size="large"
+                    label="Click here">
+                    <ButtonText>Button</ButtonText>
+                  </Button>
+                  <Button
+                    disabled
+                    variant={variant as ButtonVariant}
+                    color={color as ButtonColor}
+                    size="large"
+                    label="Click here">
+                    <ButtonText>Button</ButtonText>
+                  </Button>
+                </React.Fragment>
+              ))}
+            </View>
+          ),
+        )}
 
         <View style={[a.flex_row, a.gap_md, a.align_start]}>
           <View style={[a.gap_md, a.align_start]}>
@@ -68,6 +70,7 @@ export function Buttons() {
               ),
             )}
           </View>
+          {/*
           <View style={[a.gap_md, a.align_start]}>
             {['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map(
               name => (
@@ -91,6 +94,7 @@ export function Buttons() {
               ),
             )}
           </View>
+            */}
         </View>
       </View>