Revert "Playing around with curves"

This reverts commit 6b0e0e5c9d.

src/alf/themes.ts

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

src/alf/tokens.ts

@@ -1,9 +1,7 @@
 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%)`,
@@ -55,25 +53,6 @@ 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 {useTheme, atoms} from '#/alf'
+import {atoms} from '#/alf'
 
 export type ButtonType =
   | 'primary'
@@ -34,7 +34,6 @@ 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 = []
@@ -42,18 +41,15 @@ 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_300,
+          backgroundColor: tokens.color.gray_200,
         })
         hoverStyles.push({
-          backgroundColor: tokens.color.gray_200,
+          backgroundColor: tokens.color.gray_100,
         })
         break
       default:
@@ -83,7 +79,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
       baseStyles,
       hoverStyles,
     }
-  }, [type, size, t])
+  }, [type, size])
 
   const [state, setState] = React.useState({
     pressed: false,

src/view/com/Typography.tsx

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

src/view/screens/DebugNew.tsx

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