Button tweaks, some theme diffs

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') {

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 => (
+        {['primary', 'secondary', 'secondary_inverted', 'negative'].map(
-          <View key={color} style={[a.gap_md, a.align_start]}>
+          color => (
-            {['solid', 'outline', 'ghost'].map(variant => (
+            <View key={color} style={[a.gap_md, a.align_start]}>
-              <React.Fragment key={variant}>
+              {['solid', 'outline', 'ghost'].map(variant => (
-                <Button
+                <React.Fragment key={variant}>
-                  variant={variant as ButtonVariant}
+                  <Button
-                  color={color as ButtonColor}
+                    variant={variant as ButtonVariant}
-                  size="large"
+                    color={color as ButtonColor}
-                  label="Click here">
+                    size="large"
-                  <ButtonText>Button</ButtonText>
+                    label="Click here">
-                </Button>
+                    <ButtonText>Button</ButtonText>
-                <Button
+                  </Button>
-                  disabled
+                  <Button
-                  variant={variant as ButtonVariant}
+                    disabled
-                  color={color as ButtonColor}
+                    variant={variant as ButtonVariant}
-                  size="large"
+                    color={color as ButtonColor}
-                  label="Click here">
+                    size="large"
-                  <ButtonText>Button</ButtonText>
+                    label="Click here">
-                </Button>
+                    <ButtonText>Button</ButtonText>
-              </React.Fragment>
+                  </Button>
-            ))}
+                </React.Fragment>
-          </View>
+              ))}
-        ))}
+            </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>