Playing around with curves

src/alf/themes.ts

@@ -10,15 +10,15 @@ export type Palette = {
 }
 
 export const lightPalette: Palette = {
-  primary: tokens.color.blue_500,
+  primary: tokens.color.blue_600,
-  positive: tokens.color.green_500,
+  positive: tokens.color.green_600,
-  negative: tokens.color.red_500,
+  negative: tokens.color.red_600,
 } as const
 
 export const darkPalette: Palette = {
-  primary: tokens.color.blue_500,
+  primary: tokens.color.blue_600,
-  positive: tokens.color.green_400,
+  positive: tokens.color.green_600,
-  negative: tokens.color.red_400,
+  negative: tokens.color.red_600,
 } as const
 
 export const light = {
@@ -30,6 +30,9 @@ export const light = {
     text_contrast_700: {
       color: tokens.color.gray_700,
     },
+    text_contrast_600: {
+      color: tokens.color.gray_600,
+    },
     text_contrast_500: {
       color: tokens.color.gray_500,
     },
@@ -49,13 +52,13 @@ export const light = {
       backgroundColor: tokens.color.gray_300,
     },
     bg_positive: {
-      backgroundColor: tokens.color.green_500,
+      backgroundColor: lightPalette.positive,
     },
     bg_negative: {
-      backgroundColor: tokens.color.red_400,
+      backgroundColor: lightPalette.negative,
     },
     border: {
-      borderColor: tokens.color.gray_200,
+      borderColor: tokens.color.gray_300,
     },
     border_contrast_500: {
       borderColor: tokens.color.gray_500,
@@ -72,6 +75,9 @@ export const dark: Theme = {
     text_contrast_700: {
       color: tokens.color.gray_300,
     },
+    text_contrast_600: {
+      color: tokens.color.gray_400,
+    },
     text_contrast_500: {
       color: tokens.color.gray_500,
     },
@@ -91,10 +97,10 @@ export const dark: Theme = {
       backgroundColor: tokens.color.gray_700,
     },
     bg_positive: {
-      backgroundColor: tokens.color.green_400,
+      backgroundColor: darkPalette.positive,
     },
     bg_negative: {
-      backgroundColor: tokens.color.red_400,
+      backgroundColor: darkPalette.negative,
     },
     border: {
       borderColor: tokens.color.gray_800,

src/alf/tokens.ts

@@ -1,7 +1,9 @@
 const BLUE_HUE = 211
 const GRAYSCALE_SATURATION = 22
 
-export const color = {
+export const color: {
+  [key: string]: string
+} = {
   white: '#FFFFFF',
 
   gray_0: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 100%)`,
@@ -53,6 +55,25 @@ export const color = {
   red_1000: `hsl(349, 96%, 5%)`,
 }
 
+function bezier(time: number, start: number, end: number, duration: number) {
+  if ((time /= duration / 2) < 1) return (end / 2) * time * time + start
+  return (-end / 2) * (--time * (time - 2) - 1) + start
+}
+
+for (let i = 0; i < 11; i++) {
+  const slope = bezier((i / 11) * 89, 0, 100, 100)
+  const percent = Math.ceil(100 - slope)
+
+  color[
+    `gray_${i * 100}`
+  ] = `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, ${percent}%)`
+  color[`blue_${i * 100}`] = `hsl(${BLUE_HUE}, 99%, ${percent}%)`
+  color[`green_${i * 100}`] = `hsl(130, 60%, ${percent}%)`
+  color[`red_${i * 100}`] = `hsl(349, 90%, ${percent}%)`
+}
+
+console.log(color)
+
 export const space = {
   xxs: 2,
   xs: 4,

src/view/com/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Pressable, Text, PressableProps, TextProps} from 'react-native'
 import * as tokens from '#/alf/tokens'
-import {atoms} from '#/alf'
+import {useTheme, atoms} from '#/alf'
 
 export type ButtonType =
   | 'primary'
@@ -34,6 +34,7 @@ export type ButtonProps = Omit<PressableProps, 'children'> &
 export type ButtonTextProps = TextProps & VariantProps
 
 export function Button({children, style, type, size, ...rest}: ButtonProps) {
+  const t = useTheme()
   const {baseStyles, hoverStyles} = React.useMemo(() => {
     const baseStyles = []
     const hoverStyles = []
@@ -41,15 +42,18 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
     switch (type) {
       case 'primary':
         baseStyles.push({
+          backgroundColor: t.palette.primary,
+        })
+        hoverStyles.push({
           backgroundColor: tokens.color.blue_500,
         })
         break
       case 'secondary':
         baseStyles.push({
-          backgroundColor: tokens.color.gray_200,
+          backgroundColor: tokens.color.gray_300,
         })
         hoverStyles.push({
-          backgroundColor: tokens.color.gray_100,
+          backgroundColor: tokens.color.gray_200,
         })
         break
       default:
@@ -79,7 +83,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
       baseStyles,
       hoverStyles,
     }
-  }, [type, size])
+  }, [type, size, t])
 
   const [state, setState] = React.useState({
     pressed: false,

src/view/com/Typography.tsx

@@ -15,11 +15,7 @@ export function H1({style, ...rest}: TextProps) {
       'aria-level': 1,
     }) || {}
   return (
-    <RNText
+    <RNText {...attr} {...rest} style={[atoms.text_xl, t.atoms.text, style]} />
-      {...attr}
-      {...rest}
-      style={[atoms.text_xl, atoms.font_bold, t.atoms.text, style]}
-    />
   )
 }
 
@@ -31,11 +27,7 @@ export function H2({style, ...rest}: TextProps) {
       'aria-level': 2,
     }) || {}
   return (
-    <RNText
+    <RNText {...attr} {...rest} style={[atoms.text_lg, t.atoms.text, style]} />
-      {...attr}
-      {...rest}
-      style={[atoms.text_lg, atoms.font_bold, t.atoms.text, style]}
-    />
   )
 }
 
@@ -47,11 +39,7 @@ export function H3({style, ...rest}: TextProps) {
       'aria-level': 3,
     }) || {}
   return (
-    <RNText
+    <RNText {...attr} {...rest} style={[atoms.text_md, t.atoms.text, style]} />
-      {...attr}
-      {...rest}
-      style={[atoms.text_md, atoms.font_bold, t.atoms.text, style]}
-    />
   )
 }
 
@@ -63,11 +51,7 @@ export function H4({style, ...rest}: TextProps) {
       'aria-level': 4,
     }) || {}
   return (
-    <RNText
+    <RNText {...attr} {...rest} style={[atoms.text_sm, t.atoms.text, style]} />
-      {...attr}
-      {...rest}
-      style={[atoms.text_sm, atoms.font_bold, t.atoms.text, style]}
-    />
   )
 }
 
@@ -79,11 +63,7 @@ export function H5({style, ...rest}: TextProps) {
       'aria-level': 5,
     }) || {}
   return (
-    <RNText
+    <RNText {...attr} {...rest} style={[atoms.text_xs, t.atoms.text, style]} />
-      {...attr}
-      {...rest}
-      style={[atoms.text_xs, atoms.font_bold, t.atoms.text, style]}
-    />
   )
 }
 
@@ -95,10 +75,6 @@ export function H6({style, ...rest}: TextProps) {
       'aria-level': 6,
     }) || {}
   return (
-    <RNText
+    <RNText {...attr} {...rest} style={[atoms.text_xxs, t.atoms.text, style]} />
-      {...attr}
-      {...rest}
-      style={[atoms.text_xxs, atoms.font_bold, t.atoms.text, style]}
-    />
   )
 }

src/view/screens/DebugNew.tsx

@@ -61,15 +61,13 @@ function ThemedSection() {
 
   return (
     <View style={[t.atoms.bg, a.gap_md, a.p_xl]}>
-      <H3 style={[a.font_bold]}>theme.atoms.text</H3>
+      <H3 style={[]}>theme.atoms.text</H3>
       <View style={[a.flex_1, t.atoms.border, a.border_t]} />
-      <H3 style={[a.font_bold, t.atoms.text_contrast_700]}>
+      <H3 style={[t.atoms.text_contrast_700]}>theme.atoms.text_contrast_700</H3>
-        theme.atoms.text_contrast_700
-      </H3>
       <View style={[a.flex_1, t.atoms.border, a.border_t]} />
-      <H3 style={[a.font_bold, t.atoms.text_contrast_500]}>
+      <H3 style={[t.atoms.text_contrast_600]}>theme.atoms.text_contrast_600</H3>
-        theme.atoms.text_contrast_500
+      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
-      </H3>
+      <H3 style={[t.atoms.text_contrast_500]}>theme.atoms.text_contrast_500</H3>
       <View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
 
       <View style={[a.flex_row, a.gap_md]}>