Expand color palette

src/alf/themes.ts

@@ -9,8 +9,8 @@ export type ReadonlyPalette = typeof lightPalette
 export type Palette = Mutable<ReadonlyPalette>
 
 export const lightPalette = {
-  white: tokens.color.white,
+  white: tokens.color.gray_0,
-  black: tokens.color.black,
+  black: tokens.color.gray_1000,
 
   contrast_25: tokens.color.gray_25,
   contrast_50: tokens.color.gray_50,
@@ -23,6 +23,8 @@ export const lightPalette = {
   contrast_700: tokens.color.gray_700,
   contrast_800: tokens.color.gray_800,
   contrast_900: tokens.color.gray_900,
+  contrast_950: tokens.color.gray_950,
+  contrast_975: tokens.color.gray_975,
 
   primary_25: tokens.color.blue_25,
   primary_50: tokens.color.blue_50,
@@ -35,6 +37,8 @@ export const lightPalette = {
   primary_700: tokens.color.blue_700,
   primary_800: tokens.color.blue_800,
   primary_900: tokens.color.blue_900,
+  primary_950: tokens.color.blue_950,
+  primary_975: tokens.color.blue_975,
 
   positive_25: tokens.color.green_25,
   positive_50: tokens.color.green_50,
@@ -47,6 +51,8 @@ export const lightPalette = {
   positive_700: tokens.color.green_700,
   positive_800: tokens.color.green_800,
   positive_900: tokens.color.green_900,
+  positive_950: tokens.color.green_950,
+  positive_975: tokens.color.green_975,
 
   negative_25: tokens.color.red_25,
   negative_50: tokens.color.red_50,
@@ -59,23 +65,27 @@ export const lightPalette = {
   negative_700: tokens.color.red_700,
   negative_800: tokens.color.red_800,
   negative_900: tokens.color.red_900,
+  negative_950: tokens.color.red_950,
+  negative_975: tokens.color.red_975,
 } as const
 
 export const darkPalette: Palette = {
-  white: tokens.color.white,
+  white: tokens.color.gray_0,
-  black: tokens.color.black,
+  black: tokens.color.gray_1000,
 
-  contrast_25: tokens.color.gray_900,
+  contrast_25: tokens.color.gray_975,
-  contrast_50: tokens.color.gray_800,
+  contrast_50: tokens.color.gray_950,
-  contrast_100: tokens.color.gray_700,
+  contrast_100: tokens.color.gray_900,
-  contrast_200: tokens.color.gray_600,
+  contrast_200: tokens.color.gray_800,
-  contrast_300: tokens.color.gray_500,
+  contrast_300: tokens.color.gray_700,
-  contrast_400: tokens.color.gray_400,
+  contrast_400: tokens.color.gray_600,
-  contrast_500: tokens.color.gray_300,
+  contrast_500: tokens.color.gray_500,
-  contrast_600: tokens.color.gray_200,
+  contrast_600: tokens.color.gray_400,
-  contrast_700: tokens.color.gray_100,
+  contrast_700: tokens.color.gray_300,
-  contrast_800: tokens.color.gray_50,
+  contrast_800: tokens.color.gray_200,
-  contrast_900: tokens.color.gray_25,
+  contrast_900: tokens.color.gray_100,
+  contrast_950: tokens.color.gray_50,
+  contrast_975: tokens.color.gray_25,
 
   primary_25: tokens.color.blue_25,
   primary_50: tokens.color.blue_50,
@@ -88,6 +98,8 @@ export const darkPalette: Palette = {
   primary_700: tokens.color.blue_700,
   primary_800: tokens.color.blue_800,
   primary_900: tokens.color.blue_900,
+  primary_950: tokens.color.blue_950,
+  primary_975: tokens.color.blue_975,
 
   positive_25: tokens.color.green_25,
   positive_50: tokens.color.green_50,
@@ -100,6 +112,8 @@ export const darkPalette: Palette = {
   positive_700: tokens.color.green_700,
   positive_800: tokens.color.green_800,
   positive_900: tokens.color.green_900,
+  positive_950: tokens.color.green_950,
+  positive_975: tokens.color.green_975,
 
   negative_25: tokens.color.red_25,
   negative_50: tokens.color.red_50,
@@ -112,6 +126,8 @@ export const darkPalette: Palette = {
   negative_700: tokens.color.red_700,
   negative_800: tokens.color.red_800,
   negative_900: tokens.color.red_900,
+  negative_950: tokens.color.red_950,
+  negative_975: tokens.color.red_975,
 } as const
 
 export const light = {
@@ -121,6 +137,9 @@ export const light = {
     text: {
       color: lightPalette.black,
     },
+    text_contrast_700: {
+      color: lightPalette.contrast_700,
+    },
     text_contrast_600: {
       color: lightPalette.contrast_600,
     },
@@ -179,6 +198,73 @@ export const dim: Theme = {
     text: {
       color: darkPalette.white,
     },
+    text_contrast_700: {
+      color: darkPalette.contrast_800,
+    },
+    text_contrast_600: {
+      color: darkPalette.contrast_700,
+    },
+    text_contrast_500: {
+      color: darkPalette.contrast_600,
+    },
+    text_contrast_400: {
+      color: darkPalette.contrast_500,
+    },
+    text_inverted: {
+      color: darkPalette.black,
+    },
+    bg: {
+      backgroundColor: darkPalette.contrast_50,
+    },
+    bg_contrast_25: {
+      backgroundColor: darkPalette.contrast_100,
+    },
+    bg_contrast_50: {
+      backgroundColor: darkPalette.contrast_200,
+    },
+    bg_contrast_100: {
+      backgroundColor: darkPalette.contrast_300,
+    },
+    bg_contrast_200: {
+      backgroundColor: darkPalette.contrast_400,
+    },
+    bg_contrast_300: {
+      backgroundColor: darkPalette.contrast_500,
+    },
+    border: {
+      borderColor: darkPalette.contrast_200,
+    },
+    border_contrast: {
+      borderColor: darkPalette.contrast_400,
+    },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+  },
+}
+
+export const dark: Theme = {
+  name: 'dark',
+  palette: darkPalette,
+  atoms: {
+    text: {
+      color: darkPalette.white,
+    },
+    text_contrast_700: {
+      color: darkPalette.contrast_700,
+    },
     text_contrast_600: {
       color: darkPalette.contrast_600,
     },
@@ -210,68 +296,7 @@ export const dim: Theme = {
       backgroundColor: darkPalette.contrast_400,
     },
     border: {
-      borderColor: darkPalette.contrast_50,
+      borderColor: darkPalette.contrast_100,
-    },
-    border_contrast: {
-      borderColor: darkPalette.contrast_300,
-    },
-    shadow_sm: {
-      ...atoms.shadow_sm,
-      shadowOpacity: 0.7,
-      shadowColor: tokens.color.trueBlack,
-    },
-    shadow_md: {
-      ...atoms.shadow_md,
-      shadowOpacity: 0.7,
-      shadowColor: tokens.color.trueBlack,
-    },
-    shadow_lg: {
-      ...atoms.shadow_lg,
-      shadowOpacity: 0.7,
-      shadowColor: tokens.color.trueBlack,
-    },
-  },
-}
-
-export const dark: Theme = {
-  name: 'dark',
-  palette: darkPalette,
-  atoms: {
-    text: {
-      color: darkPalette.white,
-    },
-    text_contrast_600: {
-      color: darkPalette.contrast_600,
-    },
-    text_contrast_500: {
-      color: darkPalette.contrast_500,
-    },
-    text_contrast_400: {
-      color: darkPalette.contrast_400,
-    },
-    text_inverted: {
-      color: darkPalette.black,
-    },
-    bg: {
-      backgroundColor: darkPalette.black,
-    },
-    bg_contrast_25: {
-      backgroundColor: darkPalette.contrast_25,
-    },
-    bg_contrast_50: {
-      backgroundColor: darkPalette.contrast_50,
-    },
-    bg_contrast_100: {
-      backgroundColor: darkPalette.contrast_100,
-    },
-    bg_contrast_200: {
-      backgroundColor: darkPalette.contrast_200,
-    },
-    bg_contrast_300: {
-      backgroundColor: darkPalette.contrast_300,
-    },
-    border: {
-      borderColor: darkPalette.contrast_50,
     },
     border_contrast: {
       borderColor: darkPalette.contrast_300,

src/alf/tokens.ts

@@ -1,55 +1,67 @@
+const BLUE_HUE = 211
+const RED_HUE = 346
+const GREEN_HUE = 152
+
 export const color = {
-  white: '#FFFFFF',
-  black: '#080B12',
   trueBlack: '#000000',
 
-  gray_25: `#FCFCFD`,
+  gray_0: `hsl(${BLUE_HUE}, 20%, 100%)`,
-  gray_50: `#F9FAFB`,
+  gray_25: `hsl(${BLUE_HUE}, 20%, 97%)`,
-  gray_100: `#F3F4F6`,
+  gray_50: `hsl(${BLUE_HUE}, 20%, 95%)`,
-  gray_200: `#E5E7EB`,
+  gray_100: `hsl(${BLUE_HUE}, 20%, 90%)`,
-  gray_300: `#D2D6DB`,
+  gray_200: `hsl(${BLUE_HUE}, 20%, 80%)`,
-  gray_400: `#9DA4AE`,
+  gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`,
-  gray_500: `#6C737F`,
+  gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`,
-  gray_600: `#4D5761`,
+  gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`,
-  gray_700: `#384250`,
+  gray_600: `hsl(${BLUE_HUE}, 20%, 42%)`,
-  gray_800: `#1F2A37`,
+  gray_700: `hsl(${BLUE_HUE}, 20%, 34%)`,
-  gray_900: `#111927`,
+  gray_800: `hsl(${BLUE_HUE}, 20%, 26%)`,
+  gray_900: `hsl(${BLUE_HUE}, 20%, 18%)`,
+  gray_950: `hsl(${BLUE_HUE}, 20%, 10%)`,
+  gray_975: `hsl(${BLUE_HUE}, 20%, 7%)`,
+  gray_1000: `hsl(${BLUE_HUE}, 20%, 4%)`,
 
-  blue_25: `#F5FAFF`,
+  blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
-  blue_50: `#EFF8FF`,
+  blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,
-  blue_100: `#D1E9FF`,
+  blue_100: `hsl(${BLUE_HUE}, 99%, 90%)`,
-  blue_200: `#B2DDFF`,
+  blue_200: `hsl(${BLUE_HUE}, 99%, 80%)`,
-  blue_300: `#84CAFF`,
+  blue_300: `hsl(${BLUE_HUE}, 99%, 70%)`,
-  blue_400: `#53B1FD`,
+  blue_400: `hsl(${BLUE_HUE}, 99%, 60%)`,
-  blue_500: `#1185FE`,
+  blue_500: `hsl(${BLUE_HUE}, 99%, 53%)`,
-  blue_600: `#1073DB`,
+  blue_600: `hsl(${BLUE_HUE}, 99%, 42%)`,
-  blue_700: `#0B5CB2`,
+  blue_700: `hsl(${BLUE_HUE}, 99%, 34%)`,
-  blue_800: `#084585`,
+  blue_800: `hsl(${BLUE_HUE}, 99%, 26%)`,
-  blue_900: `#08305A`,
+  blue_900: `hsl(${BLUE_HUE}, 99%, 18%)`,
+  blue_950: `hsl(${BLUE_HUE}, 99%, 10%)`,
+  blue_975: `hsl(${BLUE_HUE}, 99%, 7%)`,
 
-  green_25: `#F6FEF9`,
+  green_25: `hsl(${GREEN_HUE}, 82%, 97%)`,
-  green_50: `#ECFDF3`,
+  green_50: `hsl(${GREEN_HUE}, 82%, 95%)`,
-  green_100: `#D1FADF`,
+  green_100: `hsl(${GREEN_HUE}, 82%, 90%)`,
-  green_200: `#A6F4C5`,
+  green_200: `hsl(${GREEN_HUE}, 82%, 80%)`,
-  green_300: `#6CE9A6`,
+  green_300: `hsl(${GREEN_HUE}, 82%, 70%)`,
-  green_400: `#32D583`,
+  green_400: `hsl(${GREEN_HUE}, 82%, 60%)`,
-  green_500: `#12B76A`,
+  green_500: `hsl(${GREEN_HUE}, 82%, 50%)`,
-  green_600: `#039855`,
+  green_600: `hsl(${GREEN_HUE}, 82%, 42%)`,
-  green_700: `#027A48`,
+  green_700: `hsl(${GREEN_HUE}, 82%, 34%)`,
-  green_800: `#05603A`,
+  green_800: `hsl(${GREEN_HUE}, 82%, 26%)`,
-  green_900: `#054F31`,
+  green_900: `hsl(${GREEN_HUE}, 82%, 18%)`,
+  green_950: `hsl(${GREEN_HUE}, 82%, 10%)`,
+  green_975: `hsl(${GREEN_HUE}, 82%, 7%)`,
 
-  red_25: `#FFF5F6`,
+  red_25: `hsl(${RED_HUE}, 91%, 97%)`,
-  red_50: `#FFF1F3`,
+  red_50: `hsl(${RED_HUE}, 91%, 95%)`,
-  red_100: `#FFE4E8`,
+  red_100: `hsl(${RED_HUE}, 91%, 90%)`,
-  red_200: `#FECDD6`,
+  red_200: `hsl(${RED_HUE}, 91%, 80%)`,
-  red_300: `#FEA3B4`,
+  red_300: `hsl(${RED_HUE}, 91%, 70%)`,
-  red_400: `#FD6F8E`,
+  red_400: `hsl(${RED_HUE}, 91%, 60%)`,
-  red_500: `#F63D68`,
+  red_500: `hsl(${RED_HUE}, 91%, 50%)`,
-  red_600: `#E31B54`,
+  red_600: `hsl(${RED_HUE}, 91%, 42%)`,
-  red_700: `#C01048`,
+  red_700: `hsl(${RED_HUE}, 91%, 34%)`,
-  red_800: `#A11043`,
+  red_800: `hsl(${RED_HUE}, 91%, 26%)`,
-  red_900: `#89123E`,
+  red_900: `hsl(${RED_HUE}, 91%, 18%)`,
+  red_950: `hsl(${RED_HUE}, 91%, 10%)`,
+  red_975: `hsl(${RED_HUE}, 91%, 7%)`,
 } as const
 
 export const space = {

src/components/Button.tsx

@@ -152,8 +152,8 @@ export function Button({
           })
           hoverStyles.push(a.border, {
             backgroundColor: light
-              ? t.palette.primary_100
+              ? t.palette.primary_50
-              : t.palette.primary_900,
+              : t.palette.primary_950,
           })
         } else {
           baseStyles.push(a.border, {
@@ -175,19 +175,19 @@ export function Button({
         if (!disabled) {
           baseStyles.push({
             backgroundColor: light
-              ? tokens.color.gray_200
+              ? tokens.color.gray_100
-              : tokens.color.gray_800,
+              : tokens.color.gray_900,
           })
           hoverStyles.push({
             backgroundColor: light
-              ? tokens.color.gray_300
+              ? tokens.color.gray_200
-              : tokens.color.gray_900,
+              : tokens.color.gray_950,
           })
         } else {
           baseStyles.push({
             backgroundColor: light
               ? tokens.color.gray_300
-              : tokens.color.gray_900,
+              : tokens.color.gray_950,
           })
         }
       } else if (variant === 'outline') {
@@ -211,7 +211,7 @@ export function Button({
           hoverStyles.push({
             backgroundColor: light
               ? tokens.color.gray_100
-              : tokens.color.gray_800,
+              : tokens.color.gray_900,
           })
         }
       }
@@ -219,14 +219,14 @@ export function Button({
       if (variant === 'solid') {
         if (!disabled) {
           baseStyles.push({
-            backgroundColor: t.palette.negative_500,
+            backgroundColor: t.palette.negative_400,
           })
           hoverStyles.push({
-            backgroundColor: t.palette.negative_600,
+            backgroundColor: t.palette.negative_500,
           })
         } else {
           baseStyles.push({
-            backgroundColor: t.palette.negative_700,
+            backgroundColor: t.palette.negative_600,
           })
         }
       } else if (variant === 'outline') {
@@ -236,10 +236,12 @@ export function Button({
 
         if (!disabled) {
           baseStyles.push(a.border, {
-            borderColor: t.palette.negative_600,
+            borderColor: t.palette.negative_400,
           })
           hoverStyles.push(a.border, {
-            backgroundColor: light ? t.palette.negative_50 : '#2D0614', // darker red
+            backgroundColor: light
+              ? t.palette.negative_50
+              : t.palette.negative_975,
           })
         } else {
           baseStyles.push(a.border, {
@@ -252,7 +254,9 @@ export function Button({
         if (!disabled) {
           baseStyles.push(t.atoms.bg)
           hoverStyles.push({
-            backgroundColor: light ? t.palette.negative_50 : '#2D0614', // darker red
+            backgroundColor: light
+              ? t.palette.negative_100
+              : t.palette.negative_950,
           })
         }
       }
@@ -437,15 +441,15 @@ export function useSharedButtonTextStyles() {
         }
       } else if (variant === 'outline') {
         if (!disabled) {
-          baseStyles.push({color: t.palette.negative_500})
+          baseStyles.push({color: t.palette.negative_400})
         } else {
-          baseStyles.push({color: t.palette.negative_500, opacity: 0.5})
+          baseStyles.push({color: t.palette.negative_400, opacity: 0.5})
         }
       } else if (variant === 'ghost') {
         if (!disabled) {
-          baseStyles.push({color: t.palette.negative_500})
+          baseStyles.push({color: t.palette.negative_400})
         } else {
-          baseStyles.push({color: t.palette.negative_500, opacity: 0.5})
+          baseStyles.push({color: t.palette.negative_400, opacity: 0.5})
         }
       }
     } else {

src/components/Prompt.tsx

@@ -55,7 +55,7 @@ export function Title({children}: React.PropsWithChildren<{}>) {
   return (
     <H4
       nativeID={titleId}
-      style={[a.font_bold, t.atoms.text_contrast_600, a.pb_sm]}>
+      style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}>
       {children}
     </H4>
   )

src/components/forms/TextField.tsx

@@ -94,6 +94,7 @@ export function Root({children, isInvalid = false}: RootProps) {
             paddingVertical: 14,
           },
         ]}
+        // onPressIn/out don't work on android web
         onPress={() => inputRef.current?.focus()}
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}>
@@ -214,7 +215,7 @@ export function createInput(Component: typeof TextInput) {
             a.absolute,
             a.inset_0,
             a.rounded_sm,
-            t.atoms.bg_contrast_50,
+            t.atoms.bg_contrast_25,
             {borderColor: 'transparent', borderWidth: 2},
             ctx.hovered ? chromeHover : {},
             ctx.focused ? chromeFocus : {},

src/components/forms/Toggle.tsx

@@ -288,7 +288,8 @@ export function createSharedToggleStyles({
   } else {
     if (hovered || focused) {
       baseHover.push({
-        backgroundColor: t.palette.contrast_50,
+        backgroundColor:
+          t.name === 'light' ? t.palette.contrast_50 : t.palette.contrast_100,
         borderColor: t.palette.contrast_500,
       })
     }
@@ -313,8 +314,8 @@ export function createSharedToggleStyles({
 
   if (disabled) {
     base.push({
-      backgroundColor: t.palette.contrast_200,
+      backgroundColor: t.palette.contrast_100,
-      borderColor: t.palette.contrast_300,
+      borderColor: t.palette.contrast_400,
     })
   }
 

src/view/screens/Storybook/Palette.tsx

@@ -8,6 +8,9 @@ export function Palette() {
   return (
     <View style={[a.gap_md]}>
       <View style={[a.flex_row, a.gap_md]}>
+        <View
+          style={[a.flex_1, {height: 60, backgroundColor: tokens.color.gray_0}]}
+        />
         <View
           style={[
             a.flex_1,
@@ -74,6 +77,24 @@ export function Palette() {
             {height: 60, backgroundColor: tokens.color.gray_900},
           ]}
         />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_950},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_975},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_1000},
+          ]}
+        />
       </View>
 
       <View style={[a.flex_row, a.gap_md]}>
@@ -143,6 +164,18 @@ export function Palette() {
             {height: 60, backgroundColor: tokens.color.blue_900},
           ]}
         />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_950},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_975},
+          ]}
+        />
       </View>
       <View style={[a.flex_row, a.gap_md]}>
         <View
@@ -211,6 +244,18 @@ export function Palette() {
             {height: 60, backgroundColor: tokens.color.green_900},
           ]}
         />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_950},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_975},
+          ]}
+        />
       </View>
       <View style={[a.flex_row, a.gap_md]}>
         <View
@@ -273,6 +318,18 @@ export function Palette() {
             {height: 60, backgroundColor: tokens.color.red_900},
           ]}
         />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_950},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_975},
+          ]}
+        />
       </View>
     </View>
   )