Gradient colors and hovers

src/alf/tokens.ts

@@ -98,6 +98,56 @@ export const fontWeight = {
   bold: '900',
 } as const
 
+export const gradients = {
+  sky: {
+    values: [
+      [0, '#0A7AFF'],
+      [1, '#59B9FF'],
+    ],
+    hover_value: '#0A7AFF',
+  },
+  midnight: {
+    values: [
+      [0, '#022C5E'],
+      [1, '#4079BC'],
+    ],
+    hover_value: '#022C5E',
+  },
+  sunrise: {
+    values: [
+      [0, '#4E90AE'],
+      [0.4, '#AEA3AB'],
+      [0.8, '#E6A98F'],
+      [1, '#F3A84C'],
+    ],
+    hover_value: '#AEA3AB',
+  },
+  sunset: {
+    values: [
+      [0, '#6772AF'],
+      [0.6, '#B88BB6'],
+      [1, '#FFA6AC'],
+    ],
+    hover_value: '#B88BB6',
+  },
+  nordic: {
+    values: [
+      [0, '#083367'],
+      [1, '#9EE8C1'],
+    ],
+    hover_value: '#3A7085',
+  },
+  bonfire: {
+    values: [
+      [0, '#203E4E'],
+      [0.4, '#755B62'],
+      [0.8, '#CD7765'],
+      [1, '#EF956E'],
+    ],
+    hover_value: '#755B62',
+  },
+} as const
+
 export type Color = keyof typeof color
 export type Space = keyof typeof space
 export type FontSize = keyof typeof fontSize

src/components/Button.tsx

@@ -12,7 +12,16 @@ import LinearGradient from 'react-native-linear-gradient'
 import {useTheme, atoms, tokens, web, native} from '#/alf'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
-export type ButtonColor = 'primary' | 'secondary' | 'negative'
+export type ButtonColor =
+  | 'primary'
+  | 'secondary'
+  | 'negative'
+  | 'gradient_sky'
+  | 'gradient_midnight'
+  | 'gradient_sunrise'
+  | 'gradient_sunset'
+  | 'gradient_nordic'
+  | 'gradient_bonfire'
 export type ButtonSize = 'small' | 'large'
 export type VariantProps = {
   /**
@@ -270,6 +279,36 @@ export function Button({
     }
   }, [t, variant, color, size, disabled])
 
+  const {gradientColors, gradientHoverColors, gradientLocations} =
+    React.useMemo(() => {
+      const colors: string[] = []
+      const hoverColors: string[] = []
+      const locations: number[] = []
+      const gradient = {
+        primary: tokens.gradients.sky,
+        secondary: tokens.gradients.sky,
+        negative: tokens.gradients.sky,
+        gradient_sky: tokens.gradients.sky,
+        gradient_midnight: tokens.gradients.midnight,
+        gradient_sunrise: tokens.gradients.sunrise,
+        gradient_sunset: tokens.gradients.sunset,
+        gradient_nordic: tokens.gradients.nordic,
+        gradient_bonfire: tokens.gradients.bonfire,
+      }[color || 'primary']
+
+      if (variant === 'gradient') {
+        colors.push(...gradient.values.map(([_, color]) => color))
+        hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+        locations.push(...gradient.values.map(([location, _]) => location))
+      }
+
+      return {
+        gradientColors: colors,
+        gradientHoverColors: hoverColors,
+        gradientLocations: locations,
+      }
+    }, [variant, color])
+
   const childProps = React.useMemo(
     () => ({
       state,
@@ -311,10 +350,11 @@ export function Button({
       {variant === 'gradient' && (
         <LinearGradient
           colors={
-            state.hovered
+            state.hovered || state.pressed || state.focused
-              ? [t.palette.primary_700, t.palette.primary_500]
+              ? gradientHoverColors
-              : [t.palette.primary_600, t.palette.primary_400]
+              : gradientColors
           }
+          locations={gradientLocations}
           start={{x: 0, y: 0}}
           end={{x: 1, y: 1}}
           style={[atoms.absolute, atoms.inset_0]}
@@ -353,7 +393,7 @@ export function ButtonText({
     const light = t.name === 'light'
 
     if (color === 'primary') {
-      if (variant === 'solid' || variant === 'gradient') {
+      if (variant === 'solid') {
         if (!disabled) {
           baseStyles.push({color: t.palette.white})
         } else {
@@ -426,6 +466,12 @@ export function ButtonText({
           baseStyles.push({color: t.palette.negative_500, opacity: 0.5})
         }
       }
+    } else {
+      if (!disabled) {
+        baseStyles.push({color: t.palette.white})
+      } else {
+        baseStyles.push({color: t.palette.white, opacity: 0.5})
+      }
     }
 
     if (size === 'large') {

src/view/screens/Storybook/Buttons.tsx

@@ -10,7 +10,7 @@ export function Buttons() {
     <View style={[a.gap_md]}>
       <H1>Buttons</H1>
 
-      <View style={[a.flex_row, a.gap_md, a.align_start]}>
+      <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
         {['primary', 'secondary', 'negative'].map(color => (
           <View key={color} style={[a.gap_md, a.align_start]}>
             {['solid', 'outline', 'ghost'].map(variant => (
@@ -37,14 +37,58 @@ export function Buttons() {
           </View>
         ))}
 
-        <Button
+        <View style={[a.flex_row, a.gap_md, a.align_start]}>
-          variant="gradient"
+          <View style={[a.gap_md, a.align_start]}>
-          color="primary"
+            {['gradient_sky', 'gradient_midnight', 'gradient_sunrise'].map(
-          size="large"
+              name => (
-          accessibilityLabel="Click here"
+                <React.Fragment key={name}>
-          accessibilityHint="Opens something">
+                  <Button
-          Button
+                    variant="gradient"
-        </Button>
+                    color={name as ButtonColor}
+                    size="large"
+                    accessibilityLabel="Click here"
+                    accessibilityHint="Opens something">
+                    Button
+                  </Button>
+                  <Button
+                    disabled
+                    variant="gradient"
+                    color={name as ButtonColor}
+                    size="large"
+                    accessibilityLabel="Click here"
+                    accessibilityHint="Opens something">
+                    Button
+                  </Button>
+                </React.Fragment>
+              ),
+            )}
+          </View>
+          <View style={[a.gap_md, a.align_start]}>
+            {['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map(
+              name => (
+                <React.Fragment key={name}>
+                  <Button
+                    variant="gradient"
+                    color={name as ButtonColor}
+                    size="large"
+                    accessibilityLabel="Click here"
+                    accessibilityHint="Opens something">
+                    Button
+                  </Button>
+                  <Button
+                    disabled
+                    variant="gradient"
+                    color={name as ButtonColor}
+                    size="large"
+                    accessibilityLabel="Click here"
+                    accessibilityHint="Opens something">
+                    Button
+                  </Button>
+                </React.Fragment>
+              ),
+            )}
+          </View>
+        </View>
       </View>
     </View>
   )