Buttons, you get the idea

src/alf/components/Button.tsx

@@ -1,9 +1,171 @@
+import React from 'react'
 import {Pressable} from 'react-native'
-import {styled} from '#/alf/system'
 
-export const Button = styled(Pressable, {
-  px: 'l',
-  py: 's',
-  bg: 'l2',
-  radius: 40,
-})
+import {useStyles} from '#/alf/system'
+import {Text} from '#/alf/components/Typography'
+
+export type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'positive'
+  | 'negative'
+export type ButtonSize = 'small' | 'large'
+
+export type ButtonProps = React.ComponentProps<typeof Pressable> & {
+  type?: ButtonType
+  size?: ButtonSize
+}
+
+const colorVariants: {
+  [key in ButtonType]: Parameters<typeof useStyles>[0]
+} = {
+  primary: {
+    pressable: {
+      bg: 'primary',
+    },
+    pressableHovered: {
+      bg: 'primaryLight',
+    },
+    pressableFocused: {
+      bg: 'primaryLight',
+    },
+    pressablePressed: {
+      bg: 'primaryLight',
+    },
+    text: {
+      color: 'white',
+    },
+  },
+  secondary: {
+    pressable: {
+      bg: 'l2',
+    },
+    pressableHovered: {
+      bg: 'l1',
+    },
+    pressableFocused: {
+      bg: 'l1',
+    },
+    pressablePressed: {
+      bg: 'l1',
+    },
+    text: {
+      color: 'l6',
+    },
+  },
+  tertiary: {},
+  positive: {
+    pressable: {
+      bg: 'green',
+    },
+    pressableHovered: {
+      bg: 'green',
+    },
+    pressableFocused: {
+      bg: 'green',
+    },
+    pressablePressed: {
+      bg: 'green',
+    },
+    text: {
+      color: 'l0',
+    },
+  },
+  negative: {
+    pressable: {
+      bg: 'red',
+    },
+    pressableHovered: {
+      bg: 'red',
+    },
+    pressableFocused: {
+      bg: 'red',
+    },
+    pressablePressed: {
+      bg: 'red',
+    },
+    text: {
+      color: 'l0',
+    },
+  },
+}
+
+const sizeVariants: {
+  [key in ButtonSize]: Parameters<typeof useStyles>[0]
+} = {
+  small: {
+    pressable: {
+      py: 'm',
+      px: 'l',
+      radius: 'm',
+    },
+    text: {
+      fontSize: 'm',
+      fontWeight: 'semi',
+    },
+  },
+  large: {
+    pressable: {
+      py: 'm',
+      px: 'l',
+      radius: 'm',
+    },
+    text: {
+      fontSize: 'm',
+      fontWeight: 'semi',
+    },
+  },
+}
+
+export function Button({
+  children,
+  type = 'primary',
+  size = 'large',
+  ...rest
+}: React.PropsWithChildren<ButtonProps>) {
+  const styles = useStyles(
+    React.useMemo<Parameters<typeof useStyles>[0]>(
+      () => ({
+        pressable: {
+          ...colorVariants[type].pressable,
+          ...sizeVariants[size].pressable,
+        },
+        text: {
+          textAlign: 'center',
+          ...colorVariants[type].text,
+          ...sizeVariants[size].text,
+        },
+        pressableHovered: {
+          ...colorVariants[type].pressableHovered,
+        },
+        pressableFocused: {
+          ...colorVariants[type].pressableFocused,
+        },
+        pressablePressed: {
+          ...colorVariants[type].pressablePressed,
+        },
+      }),
+      [type, size],
+    ),
+  )
+
+  return (
+    <Pressable
+      {...rest}
+      style={state =>
+        [
+          styles.pressable,
+          state.hovered && styles.pressableHovered,
+          state.focused && styles.pressableFocused,
+          state.pressed && styles.pressablePressed,
+        ].filter(Boolean)
+      }>
+      {typeof children === 'string' ? (
+        <Text style={[styles.text]}>{children}</Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  )
+}

src/alf/themes.ts

@@ -18,7 +18,10 @@ export const palette = {
   gray6: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
   black: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
 
+  blueLight: `hsl(${BLUE_HUE}, 100%, 63%)`,
   blue: `hsl(${BLUE_HUE}, 100%, 53%)`,
+  blueDark: `hsl(${BLUE_HUE}, 100%, 43%)`,
+
   green: '#54D469',
   red: '#FB4566',
 }
@@ -35,7 +38,10 @@ export const light = createTheme({
       xxl: 32,
     },
     color: {
+      primaryLight: palette.blueLight,
       primary: palette.blue,
+      primaryDark: palette.blueDark,
+
       l0: palette.white,
       l1: palette.gray1,
       l2: palette.gray2,
@@ -71,7 +77,7 @@ export const light = createTheme({
     },
     fontWeight: {
       normal: '400',
-      semi: '700',
+      semi: '600',
       bold: '900',
     },
   },

src/view/screens/DebugNew.tsx

@@ -232,6 +232,19 @@ export function DebugScreen() {
               </Box>
             </Box>
           </Alf>
+
+          <Box>
+            <H3 pb="s" fontWeight="bold">
+              Breakpoint styles
+            </H3>
+
+            <Box gap="m">
+              <Button>Primary</Button>
+              <Button type="secondary">Secondary</Button>
+              <Button type="positive">Positive</Button>
+              <Button type="negative">Negative</Button>
+            </Box>
+          </Box>
         </Box>
       </CenteredView>
     </ScrollView>