Integrate new design tokens, reorg storybook

src/Navigation.tsx

@@ -61,7 +61,7 @@ import {ProfileListScreen} from './view/screens/ProfileList'
 import {PostThreadScreen} from './view/screens/PostThread'
 import {PostLikedByScreen} from './view/screens/PostLikedBy'
 import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
-import {DebugScreen} from './view/screens/DebugNew'
+import {Storybook} from './view/screens/Storybook'
 import {LogScreen} from './view/screens/Log'
 import {SupportScreen} from './view/screens/Support'
 import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
@@ -191,7 +191,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       />
       <Stack.Screen
         name="Debug"
-        getComponent={() => DebugScreen}
+        getComponent={() => Storybook}
         options={{title: title('Debug'), requireAuth: true}}
       />
       <Stack.Screen

src/alf/atoms.ts

@@ -61,8 +61,8 @@ export const atoms = {
   /*
    * Flex
    */
-  gap_xxs: {
+  gap_2xs: {
-    gap: tokens.space.xxs,
+    gap: tokens.space._2xs,
   },
   gap_xs: {
     gap: tokens.space.xs,
@@ -79,8 +79,17 @@ export const atoms = {
   gap_xl: {
     gap: tokens.space.xl,
   },
-  gap_xxl: {
+  gap_2xl: {
-    gap: tokens.space.xxl,
+    gap: tokens.space._2xl,
+  },
+  gap_3xl: {
+    gap: tokens.space._3xl,
+  },
+  gap_4xl: {
+    gap: tokens.space._4xl,
+  },
+  gap_5xl: {
+    gap: tokens.space._5xl,
   },
   flex: {
     display: 'flex',
@@ -128,9 +137,9 @@ export const atoms = {
   text_right: {
     textAlign: 'right',
   },
-  text_xxs: {
+  text_2xs: {
-    fontSize: tokens.fontSize.xxs,
+    fontSize: tokens.fontSize._2xs,
-    lineHeight: tokens.fontSize.xxs,
+    lineHeight: tokens.fontSize._2xs,
   },
   text_xs: {
     fontSize: tokens.fontSize.xs,
@@ -152,9 +161,21 @@ export const atoms = {
     fontSize: tokens.fontSize.xl,
     lineHeight: tokens.fontSize.xl,
   },
-  text_xxl: {
+  text_2xl: {
-    fontSize: tokens.fontSize.xxl,
+    fontSize: tokens.fontSize._2xl,
-    lineHeight: tokens.fontSize.xxl,
+    lineHeight: tokens.fontSize._2xl,
+  },
+  text_3xl: {
+    fontSize: tokens.fontSize._3xl,
+    lineHeight: tokens.fontSize._3xl,
+  },
+  text_4xl: {
+    fontSize: tokens.fontSize._4xl,
+    lineHeight: tokens.fontSize._4xl,
+  },
+  text_5xl: {
+    fontSize: tokens.fontSize._5xl,
+    lineHeight: tokens.fontSize._5xl,
   },
   leading_tight: {
     lineHeight: 1.25,
@@ -165,11 +186,8 @@ export const atoms = {
   font_normal: {
     fontWeight: tokens.fontWeight.normal,
   },
-  font_semibold: {
-    fontWeight: tokens.fontWeight.semibold,
-  },
   font_bold: {
-    fontWeight: tokens.fontWeight.bold,
+    fontWeight: tokens.fontWeight.semibold,
   },
 
   /*
@@ -188,8 +206,8 @@ export const atoms = {
   /*
    * Padding
    */
-  p_xxs: {
+  p_2xs: {
-    padding: tokens.space.xxs,
+    padding: tokens.space._2xs,
   },
   p_xs: {
     padding: tokens.space.xs,
@@ -206,12 +224,21 @@ export const atoms = {
   p_xl: {
     padding: tokens.space.xl,
   },
-  p_xxl: {
+  p_2xl: {
-    padding: tokens.space.xxl,
+    padding: tokens.space._2xl,
   },
-  px_xxs: {
+  p_3xl: {
-    paddingLeft: tokens.space.xxs,
+    padding: tokens.space._3xl,
-    paddingRight: tokens.space.xxs,
+  },
+  p_4xl: {
+    padding: tokens.space._4xl,
+  },
+  p_5xl: {
+    padding: tokens.space._5xl,
+  },
+  px_2xs: {
+    paddingLeft: tokens.space._2xs,
+    paddingRight: tokens.space._2xs,
   },
   px_xs: {
     paddingLeft: tokens.space.xs,
@@ -233,13 +260,25 @@ export const atoms = {
     paddingLeft: tokens.space.xl,
     paddingRight: tokens.space.xl,
   },
-  px_xxl: {
+  px_2xl: {
-    paddingLeft: tokens.space.xxl,
+    paddingLeft: tokens.space._2xl,
-    paddingRight: tokens.space.xxl,
+    paddingRight: tokens.space._2xl,
   },
-  py_xxs: {
+  px_3xl: {
-    paddingTop: tokens.space.xxs,
+    paddingLeft: tokens.space._3xl,
-    paddingBottom: tokens.space.xxs,
+    paddingRight: tokens.space._3xl,
+  },
+  px_4xl: {
+    paddingLeft: tokens.space._4xl,
+    paddingRight: tokens.space._4xl,
+  },
+  px_5xl: {
+    paddingLeft: tokens.space._5xl,
+    paddingRight: tokens.space._5xl,
+  },
+  py_2xs: {
+    paddingTop: tokens.space._2xs,
+    paddingBottom: tokens.space._2xs,
   },
   py_xs: {
     paddingTop: tokens.space.xs,
@@ -261,12 +300,24 @@ export const atoms = {
     paddingTop: tokens.space.xl,
     paddingBottom: tokens.space.xl,
   },
-  py_xxl: {
+  py_2xl: {
-    paddingTop: tokens.space.xxl,
+    paddingTop: tokens.space._2xl,
-    paddingBottom: tokens.space.xxl,
+    paddingBottom: tokens.space._2xl,
   },
-  pt_xxs: {
+  py_3xl: {
-    paddingTop: tokens.space.xxs,
+    paddingTop: tokens.space._3xl,
+    paddingBottom: tokens.space._3xl,
+  },
+  py_4xl: {
+    paddingTop: tokens.space._4xl,
+    paddingBottom: tokens.space._4xl,
+  },
+  py_5xl: {
+    paddingTop: tokens.space._5xl,
+    paddingBottom: tokens.space._5xl,
+  },
+  pt_2xs: {
+    paddingTop: tokens.space._2xs,
   },
   pt_xs: {
     paddingTop: tokens.space.xs,
@@ -283,11 +334,20 @@ export const atoms = {
   pt_xl: {
     paddingTop: tokens.space.xl,
   },
-  pt_xxl: {
+  pt_2xl: {
-    paddingTop: tokens.space.xxl,
+    paddingTop: tokens.space._2xl,
   },
-  pb_xxs: {
+  pt_3xl: {
-    paddingBottom: tokens.space.xxs,
+    paddingTop: tokens.space._3xl,
+  },
+  pt_4xl: {
+    paddingTop: tokens.space._4xl,
+  },
+  pt_5xl: {
+    paddingTop: tokens.space._5xl,
+  },
+  pb_2xs: {
+    paddingBottom: tokens.space._2xs,
   },
   pb_xs: {
     paddingBottom: tokens.space.xs,
@@ -304,11 +364,20 @@ export const atoms = {
   pb_xl: {
     paddingBottom: tokens.space.xl,
   },
-  pb_xxl: {
+  pb_2xl: {
-    paddingBottom: tokens.space.xxl,
+    paddingBottom: tokens.space._2xl,
   },
-  pl_xxs: {
+  pb_3xl: {
-    paddingLeft: tokens.space.xxs,
+    paddingBottom: tokens.space._3xl,
+  },
+  pb_4xl: {
+    paddingBottom: tokens.space._4xl,
+  },
+  pb_5xl: {
+    paddingBottom: tokens.space._5xl,
+  },
+  pl_2xs: {
+    paddingLeft: tokens.space._2xs,
   },
   pl_xs: {
     paddingLeft: tokens.space.xs,
@@ -325,11 +394,20 @@ export const atoms = {
   pl_xl: {
     paddingLeft: tokens.space.xl,
   },
-  pl_xxl: {
+  pl_2xl: {
-    paddingLeft: tokens.space.xxl,
+    paddingLeft: tokens.space._2xl,
   },
-  pr_xxs: {
+  pl_3xl: {
-    paddingRight: tokens.space.xxs,
+    paddingLeft: tokens.space._3xl,
+  },
+  pl_4xl: {
+    paddingLeft: tokens.space._4xl,
+  },
+  pl_5xl: {
+    paddingLeft: tokens.space._5xl,
+  },
+  pr_2xs: {
+    paddingRight: tokens.space._2xs,
   },
   pr_xs: {
     paddingRight: tokens.space.xs,
@@ -346,15 +424,24 @@ export const atoms = {
   pr_xl: {
     paddingRight: tokens.space.xl,
   },
-  pr_xxl: {
+  pr_2xl: {
-    paddingRight: tokens.space.xxl,
+    paddingRight: tokens.space._2xl,
+  },
+  pr_3xl: {
+    paddingRight: tokens.space._3xl,
+  },
+  pr_4xl: {
+    paddingRight: tokens.space._4xl,
+  },
+  pr_5xl: {
+    paddingRight: tokens.space._5xl,
   },
 
   /*
    * Margin
    */
-  m_xxs: {
+  m_2xs: {
-    margin: tokens.space.xxs,
+    margin: tokens.space._2xs,
   },
   m_xs: {
     margin: tokens.space.xs,
@@ -371,12 +458,21 @@ export const atoms = {
   m_xl: {
     margin: tokens.space.xl,
   },
-  m_xxl: {
+  m_2xl: {
-    margin: tokens.space.xxl,
+    margin: tokens.space._2xl,
   },
-  mx_xxs: {
+  m_3xl: {
-    marginLeft: tokens.space.xxs,
+    margin: tokens.space._3xl,
-    marginRight: tokens.space.xxs,
+  },
+  m_4xl: {
+    margin: tokens.space._4xl,
+  },
+  m_5xl: {
+    margin: tokens.space._5xl,
+  },
+  mx_2xs: {
+    marginLeft: tokens.space._2xs,
+    marginRight: tokens.space._2xs,
   },
   mx_xs: {
     marginLeft: tokens.space.xs,
@@ -398,13 +494,25 @@ export const atoms = {
     marginLeft: tokens.space.xl,
     marginRight: tokens.space.xl,
   },
-  mx_xxl: {
+  mx_2xl: {
-    marginLeft: tokens.space.xxl,
+    marginLeft: tokens.space._2xl,
-    marginRight: tokens.space.xxl,
+    marginRight: tokens.space._2xl,
   },
-  my_xxs: {
+  mx_3xl: {
-    marginTop: tokens.space.xxs,
+    marginLeft: tokens.space._3xl,
-    marginBottom: tokens.space.xxs,
+    marginRight: tokens.space._3xl,
+  },
+  mx_4xl: {
+    marginLeft: tokens.space._4xl,
+    marginRight: tokens.space._4xl,
+  },
+  mx_5xl: {
+    marginLeft: tokens.space._5xl,
+    marginRight: tokens.space._5xl,
+  },
+  my_2xs: {
+    marginTop: tokens.space._2xs,
+    marginBottom: tokens.space._2xs,
   },
   my_xs: {
     marginTop: tokens.space.xs,
@@ -426,12 +534,24 @@ export const atoms = {
     marginTop: tokens.space.xl,
     marginBottom: tokens.space.xl,
   },
-  my_xxl: {
+  my_2xl: {
-    marginTop: tokens.space.xxl,
+    marginTop: tokens.space._2xl,
-    marginBottom: tokens.space.xxl,
+    marginBottom: tokens.space._2xl,
   },
-  mt_xxs: {
+  my_3xl: {
-    marginTop: tokens.space.xxs,
+    marginTop: tokens.space._3xl,
+    marginBottom: tokens.space._3xl,
+  },
+  my_4xl: {
+    marginTop: tokens.space._4xl,
+    marginBottom: tokens.space._4xl,
+  },
+  my_5xl: {
+    marginTop: tokens.space._5xl,
+    marginBottom: tokens.space._5xl,
+  },
+  mt_2xs: {
+    marginTop: tokens.space._2xs,
   },
   mt_xs: {
     marginTop: tokens.space.xs,
@@ -448,11 +568,20 @@ export const atoms = {
   mt_xl: {
     marginTop: tokens.space.xl,
   },
-  mt_xxl: {
+  mt_2xl: {
-    marginTop: tokens.space.xxl,
+    marginTop: tokens.space._2xl,
   },
-  mb_xxs: {
+  mt_3xl: {
-    marginBottom: tokens.space.xxs,
+    marginTop: tokens.space._3xl,
+  },
+  mt_4xl: {
+    marginTop: tokens.space._4xl,
+  },
+  mt_5xl: {
+    marginTop: tokens.space._5xl,
+  },
+  mb_2xs: {
+    marginBottom: tokens.space._2xs,
   },
   mb_xs: {
     marginBottom: tokens.space.xs,
@@ -469,11 +598,20 @@ export const atoms = {
   mb_xl: {
     marginBottom: tokens.space.xl,
   },
-  mb_xxl: {
+  mb_2xl: {
-    marginBottom: tokens.space.xxl,
+    marginBottom: tokens.space._2xl,
   },
-  ml_xxs: {
+  mb_3xl: {
-    marginLeft: tokens.space.xxs,
+    marginBottom: tokens.space._3xl,
+  },
+  mb_4xl: {
+    marginBottom: tokens.space._4xl,
+  },
+  mb_5xl: {
+    marginBottom: tokens.space._5xl,
+  },
+  ml_2xs: {
+    marginLeft: tokens.space._2xs,
   },
   ml_xs: {
     marginLeft: tokens.space.xs,
@@ -490,11 +628,20 @@ export const atoms = {
   ml_xl: {
     marginLeft: tokens.space.xl,
   },
-  ml_xxl: {
+  ml_2xl: {
-    marginLeft: tokens.space.xxl,
+    marginLeft: tokens.space._2xl,
   },
-  mr_xxs: {
+  ml_3xl: {
-    marginRight: tokens.space.xxs,
+    marginLeft: tokens.space._3xl,
+  },
+  ml_4xl: {
+    marginLeft: tokens.space._4xl,
+  },
+  ml_5xl: {
+    marginLeft: tokens.space._5xl,
+  },
+  mr_2xs: {
+    marginRight: tokens.space._2xs,
   },
   mr_xs: {
     marginRight: tokens.space.xs,
@@ -511,7 +658,16 @@ export const atoms = {
   mr_xl: {
     marginRight: tokens.space.xl,
   },
-  mr_xxl: {
+  mr_2xl: {
-    marginRight: tokens.space.xxl,
+    marginRight: tokens.space._2xl,
+  },
+  mr_3xl: {
+    marginRight: tokens.space._3xl,
+  },
+  mr_4xl: {
+    marginRight: tokens.space._4xl,
+  },
+  mr_5xl: {
+    marginRight: tokens.space._5xl,
   },
 } as const

src/alf/themes.ts

@@ -12,7 +12,8 @@ export const lightPalette = {
   positive: tokens.color.green_500,
   negative: tokens.color.red_500,
 
-  contrast_0: tokens.color.gray_0,
+  contrast_25: tokens.color.gray_25,
+  contrast_50: tokens.color.gray_50,
   contrast_100: tokens.color.gray_100,
   contrast_200: tokens.color.gray_200,
   contrast_300: tokens.color.gray_300,
@@ -22,7 +23,6 @@ export const lightPalette = {
   contrast_700: tokens.color.gray_700,
   contrast_800: tokens.color.gray_800,
   contrast_900: tokens.color.gray_900,
-  contrast_1000: tokens.color.gray_1000,
 } as const
 
 export const darkPalette: Palette = {
@@ -30,17 +30,17 @@ export const darkPalette: Palette = {
   positive: tokens.color.green_400,
   negative: tokens.color.red_400,
 
-  contrast_0: tokens.color.gray_1000,
+  contrast_25: tokens.color.gray_900,
-  contrast_100: tokens.color.gray_900,
+  contrast_50: tokens.color.gray_800,
-  contrast_200: tokens.color.gray_800,
+  contrast_100: tokens.color.gray_700,
-  contrast_300: tokens.color.gray_700,
+  contrast_200: tokens.color.gray_600,
-  contrast_400: tokens.color.gray_600,
+  contrast_300: tokens.color.gray_500,
-  contrast_500: tokens.color.gray_500,
+  contrast_400: tokens.color.gray_400,
-  contrast_600: tokens.color.gray_400,
+  contrast_500: tokens.color.gray_300,
-  contrast_700: tokens.color.gray_300,
+  contrast_600: tokens.color.gray_200,
-  contrast_800: tokens.color.gray_200,
+  contrast_700: tokens.color.gray_100,
-  contrast_900: tokens.color.gray_100,
+  contrast_800: tokens.color.gray_50,
-  contrast_1000: tokens.color.gray_0,
+  contrast_900: tokens.color.gray_25,
 } as const
 
 export const light = {
@@ -48,13 +48,16 @@ export const light = {
   palette: lightPalette,
   atoms: {
     text: {
-      color: tokens.color.gray_1000,
+      color: tokens.color.gray_900,
     },
-    text_contrast_700: {
+    text_contrast_600: {
-      color: tokens.color.gray_700,
+      color: lightPalette.contrast_600,
     },
     text_contrast_500: {
-      color: tokens.color.gray_500,
+      color: lightPalette.contrast_500,
+    },
+    text_contrast_400: {
+      color: lightPalette.contrast_400,
     },
     text_inverted: {
       color: tokens.color.white,
@@ -62,20 +65,20 @@ export const light = {
     bg: {
       backgroundColor: tokens.color.white,
     },
+    bg_contrast_25: {
+      backgroundColor: lightPalette.contrast_25,
+    },
+    bg_contrast_50: {
+      backgroundColor: lightPalette.contrast_50,
+    },
     bg_contrast_100: {
-      backgroundColor: tokens.color.gray_100,
+      backgroundColor: lightPalette.contrast_100,
     },
     bg_contrast_200: {
-      backgroundColor: tokens.color.gray_200,
+      backgroundColor: lightPalette.contrast_200,
     },
     bg_contrast_300: {
-      backgroundColor: tokens.color.gray_300,
+      backgroundColor: lightPalette.contrast_300,
-    },
-    bg_positive: {
-      backgroundColor: tokens.color.green_500,
-    },
-    bg_negative: {
-      backgroundColor: tokens.color.red_400,
     },
     border: {
       borderColor: tokens.color.gray_200,
@@ -93,32 +96,35 @@ export const dark: Theme = {
     text: {
       color: tokens.color.white,
     },
-    text_contrast_700: {
+    text_contrast_600: {
-      color: tokens.color.gray_300,
+      color: darkPalette.contrast_600,
     },
     text_contrast_500: {
-      color: tokens.color.gray_500,
+      color: darkPalette.contrast_500,
+    },
+    text_contrast_400: {
+      color: darkPalette.contrast_400,
     },
     text_inverted: {
-      color: tokens.color.gray_1000,
+      color: tokens.color.gray_900,
     },
     bg: {
-      backgroundColor: tokens.color.gray_1000,
-    },
-    bg_contrast_100: {
       backgroundColor: tokens.color.gray_900,
     },
+    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: tokens.color.gray_800,
+      backgroundColor: darkPalette.contrast_200,
     },
     bg_contrast_300: {
-      backgroundColor: tokens.color.gray_700,
+      backgroundColor: darkPalette.contrast_300,
-    },
-    bg_positive: {
-      backgroundColor: tokens.color.green_400,
-    },
-    bg_negative: {
-      backgroundColor: tokens.color.red_400,
     },
     border: {
       borderColor: tokens.color.gray_800,

src/alf/tokens.ts

@@ -1,79 +1,81 @@
-const BLUE_HUE = 211
-const GRAYSCALE_SATURATION = 22
-
 export const color = {
   white: '#FFFFFF',
 
-  gray_0: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 100%)`,
+  gray_25: `#FCFCFD`,
-  gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
+  gray_50: `#F9FAFB`,
-  gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
+  gray_100: `#F3F4F6`,
-  gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
+  gray_200: `#E5E7EB`,
-  gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 65%)`,
+  gray_300: `#D2D6DB`,
-  gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 55%)`,
+  gray_400: `#9DA4AE`,
-  gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 45%)`,
+  gray_500: `#6C737F`,
-  gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 35%)`,
+  gray_600: `#4D5761`,
-  gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 25%)`,
+  gray_700: `#384250`,
-  gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 15%)`,
+  gray_800: `#1F2A37`,
-  gray_1000: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
+  gray_900: `#111927`,
 
-  blue_0: `hsl(${BLUE_HUE}, 99%, 100%)`,
+  blue_25: `#F5FAFF`,
-  blue_100: `hsl(${BLUE_HUE}, 99%, 93%)`,
+  blue_50: `#EFF8FF`,
-  blue_200: `hsl(${BLUE_HUE}, 99%, 83%)`,
+  blue_100: `#EFF8FF`,
-  blue_300: `hsl(${BLUE_HUE}, 99%, 73%)`,
+  blue_200: `#B2DDFF`,
-  blue_400: `hsl(${BLUE_HUE}, 99%, 63%)`,
+  blue_300: `#84CAFF`,
-  blue_500: `hsl(${BLUE_HUE}, 99%, 53%)`,
+  blue_400: `#53B1FD`,
-  blue_600: `hsl(${BLUE_HUE}, 99%, 43%)`,
+  blue_500: `#1185FE`,
-  blue_700: `hsl(${BLUE_HUE}, 99%, 33%)`,
+  blue_600: `#1073DB`,
-  blue_800: `hsl(${BLUE_HUE}, 99%, 23%)`,
+  blue_700: `#0B5CB2`,
-  blue_900: `hsl(${BLUE_HUE}, 99%, 13%)`,
+  blue_800: `#084585`,
-  blue_1000: `hsl(${BLUE_HUE}, 99%, 8%)`,
+  blue_900: `#08305A`,
 
-  green_0: `hsl(130, 60%, 100%)`,
+  green_25: `#F6FEF9`,
-  green_100: `hsl(130, 60%, 95%)`,
+  green_50: `#ECFDF3`,
-  green_200: `hsl(130, 60%, 85%)`,
+  green_100: `#D1FADF`,
-  green_300: `hsl(130, 60%, 75%)`,
+  green_200: `#A6F4C5`,
-  green_400: `hsl(130, 60%, 65%)`,
+  green_300: `#6CE9A6`,
-  green_500: `hsl(130, 60%, 55%)`,
+  green_400: `#32D583`,
-  green_600: `hsl(130, 60%, 45%)`,
+  green_500: `#12B76A`,
-  green_700: `hsl(130, 60%, 35%)`,
+  green_600: `#039855`,
-  green_800: `hsl(130, 60%, 25%)`,
+  green_700: `#027A48`,
-  green_900: `hsl(130, 60%, 15%)`,
+  green_800: `#05603A`,
-  green_1000: `hsl(130, 60%, 5%)`,
+  green_900: `#054F31`,
 
-  red_0: `hsl(349, 96%, 100%)`,
+  red_25: `#FFF5F6`,
-  red_100: `hsl(349, 96%, 95%)`,
+  red_50: `#FFF1F3`,
-  red_200: `hsl(349, 96%, 85%)`,
+  red_100: `#FFE4E8`,
-  red_300: `hsl(349, 96%, 75%)`,
+  red_200: `#FECDD6`,
-  red_400: `hsl(349, 96%, 65%)`,
+  red_300: `#FEA3B4`,
-  red_500: `hsl(349, 96%, 55%)`,
+  red_400: `#FD6F8E`,
-  red_600: `hsl(349, 96%, 45%)`,
+  red_500: `#F63D68`,
-  red_700: `hsl(349, 96%, 35%)`,
+  red_600: `#E31B54`,
-  red_800: `hsl(349, 96%, 25%)`,
+  red_700: `#C01048`,
-  red_900: `hsl(349, 96%, 15%)`,
+  red_800: `#A11043`,
-  red_1000: `hsl(349, 96%, 5%)`,
+  red_900: `#89123E`,
 } as const
 
 export const space = {
-  xxs: 2,
+  _2xs: 2,
   xs: 4,
   sm: 8,
   md: 12,
-  lg: 18,
+  lg: 16,
-  xl: 24,
+  xl: 20,
-  xxl: 32,
+  _2xl: 24,
+  _3xl: 28,
+  _4xl: 32,
+  _5xl: 40,
 } as const
 
 export const fontSize = {
-  xxs: 10,
+  _2xs: 10,
   xs: 12,
   sm: 14,
   md: 16,
   lg: 18,
-  xl: 22,
+  xl: 20,
-  xxl: 26,
+  _2xl: 22,
+  _3xl: 26,
+  _4xl: 32,
+  _5xl: 40,
 } as const
 
-// TODO test
 export const lineHeight = {
   none: 1,
   normal: 1.5,

src/view/com/Button.tsx

@@ -284,7 +284,7 @@ export function ButtonText({
   return (
     <Text
       {...rest}
-      style={[atoms.font_semibold, atoms.text_center, ...textStyles, style]}>
+      style={[atoms.font_bold, atoms.text_center, ...textStyles, style]}>
       {children}
     </Text>
   )

src/view/com/Dialog/index.tsx

@@ -91,7 +91,7 @@ export function Inner(props: DialogInnerProps) {
     <View
       style={[
         a.p_lg,
-        a.pt_xxl,
+        a.pt_3xl,
         {
           borderTopLeftRadius: 40,
           borderTopRightRadius: 40,

src/view/com/Prompt.tsx

@@ -72,7 +72,7 @@ export function Title({children}: React.PropsWithChildren<{}>) {
   return (
     <H2
       nativeID={titleId}
-      style={[a.font_semibold, t.atoms.text_contrast_700, a.pb_sm]}>
+      style={[a.font_bold, t.atoms.text_contrast_600, a.pb_sm]}>
       {children}
     </H2>
   )
@@ -82,7 +82,7 @@ export function Description({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   const {descriptionId} = React.useContext(Context)
   return (
-    <P nativeID={descriptionId} style={[t.atoms.text_contrast_700, a.pb_lg]}>
+    <P nativeID={descriptionId} style={[t.atoms.text, a.pb_lg]}>
       {children}
     </P>
   )

src/view/com/Typography.tsx

@@ -19,7 +19,7 @@ export function H1({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.text_xl, atoms.font_bold, t.atoms.text, flatten(style)]}
+      style={[atoms.text_5xl, atoms.font_bold, t.atoms.text, flatten(style)]}
     />
   )
 }
@@ -35,7 +35,7 @@ export function H2({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.text_lg, atoms.font_bold, t.atoms.text, flatten(style)]}
+      style={[atoms.text_4xl, atoms.font_bold, t.atoms.text, flatten(style)]}
     />
   )
 }
@@ -51,7 +51,7 @@ export function H3({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.text_md, atoms.font_bold, t.atoms.text, flatten(style)]}
+      style={[atoms.text_3xl, atoms.font_bold, t.atoms.text, flatten(style)]}
     />
   )
 }
@@ -67,7 +67,7 @@ export function H4({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.text_sm, atoms.font_bold, t.atoms.text, flatten(style)]}
+      style={[atoms.text_2xl, atoms.font_bold, t.atoms.text, flatten(style)]}
     />
   )
 }
@@ -83,7 +83,7 @@ export function H5({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.text_xs, atoms.font_bold, t.atoms.text, flatten(style)]}
+      style={[atoms.text_xl, atoms.font_bold, t.atoms.text, flatten(style)]}
     />
   )
 }
@@ -99,7 +99,7 @@ export function H6({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.text_xxs, atoms.font_bold, t.atoms.text, flatten(style)]}
+      style={[atoms.text_lg, atoms.font_bold, t.atoms.text, flatten(style)]}
     />
   )
 }

src/view/com/forms/InputDate/index.android.tsx

@@ -87,8 +87,8 @@ export function InputDate({
           nativeID={labelId}
           style={[
             atoms.text_sm,
-            atoms.font_semibold,
+            atoms.font_bold,
-            t.atoms.text_contrast_700,
+            t.atoms.text_contrast_600,
             atoms.mb_sm,
           ]}>
           {label}

src/view/com/forms/InputDate/index.tsx

@@ -48,8 +48,8 @@ export function InputDate({
           nativeID={labelId}
           style={[
             atoms.text_sm,
-            atoms.font_semibold,
+            atoms.font_bold,
-            t.atoms.text_contrast_700,
+            t.atoms.text_contrast_600,
             atoms.mb_sm,
           ]}>
           {label}

src/view/com/forms/InputDate/index.web.tsx

@@ -85,8 +85,8 @@ export function InputDate({
           nativeID={labelId}
           style={[
             atoms.text_sm,
-            atoms.font_semibold,
+            atoms.font_bold,
-            t.atoms.text_contrast_700,
+            t.atoms.text_contrast_600,
             atoms.mb_sm,
           ]}>
           {label}

src/view/com/forms/InputText.tsx

@@ -100,8 +100,8 @@ export function InputText({
           nativeID={labelId}
           style={[
             atoms.text_sm,
-            atoms.font_semibold,
+            atoms.font_bold,
-            t.atoms.text_contrast_700,
+            t.atoms.text_contrast_600,
             atoms.mb_sm,
           ]}>
           {label}

src/view/icons/Logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet} from 'react-native'
+import {StyleSheet, TextProps} from 'react-native'
 import Svg, {
   Path,
   Defs,
@@ -15,7 +15,8 @@ const ratio = 57 / 64
 
 type Props = {
   fill?: PathProps['fill']
-} & SvgProps
+  style?: TextProps['style']
+} & Omit<SvgProps, 'style'>
 
 export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
   const {fill, ...rest} = props

src/view/screens/Debug.tsx

@@ -1,520 +0,0 @@
-import React from 'react'
-import {ScrollView, View} from 'react-native'
-import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
-import {ViewHeader} from '../com/util/ViewHeader'
-import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
-import * as Toast from 'view/com/util/Toast'
-import {Text} from '../com/util/text/Text'
-import {ViewSelector} from '../com/util/ViewSelector'
-import {EmptyState} from '../com/util/EmptyState'
-import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder'
-import {Button, ButtonType} from '../com/util/forms/Button'
-import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton'
-import {ToggleButton} from '../com/util/forms/ToggleButton'
-import {RadioGroup} from '../com/util/forms/RadioGroup'
-import {ErrorScreen} from '../com/util/error/ErrorScreen'
-import {ErrorMessage} from '../com/util/error/ErrorMessage'
-
-const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
-
-export const DebugScreen = ({}: NativeStackScreenProps<
-  CommonNavigatorParams,
-  'Debug'
->) => {
-  const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(
-    'light',
-  )
-  const onToggleColorScheme = () => {
-    setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
-  }
-  return (
-    <ThemeProvider theme={colorScheme}>
-      <DebugInner
-        colorScheme={colorScheme}
-        onToggleColorScheme={onToggleColorScheme}
-      />
-    </ThemeProvider>
-  )
-}
-
-function DebugInner({
-  colorScheme,
-  onToggleColorScheme,
-}: {
-  colorScheme: 'light' | 'dark'
-  onToggleColorScheme: () => void
-}) {
-  const [currentView, setCurrentView] = React.useState<number>(0)
-  const pal = usePalette('default')
-
-  const renderItem = (item: any) => {
-    return (
-      <View key={`view-${item.currentView}`}>
-        <View style={[s.pt10, s.pl10, s.pr10]}>
-          <ToggleButton
-            type="default-light"
-            onPress={onToggleColorScheme}
-            isSelected={colorScheme === 'dark'}
-            label="Dark mode"
-          />
-        </View>
-        {item.currentView === 3 ? (
-          <NotifsView />
-        ) : item.currentView === 2 ? (
-          <ErrorView />
-        ) : item.currentView === 1 ? (
-          <ControlsView />
-        ) : (
-          <BaseView />
-        )}
-      </View>
-    )
-  }
-
-  const items = [{currentView}]
-
-  return (
-    <View style={[s.hContentRegion, pal.view]}>
-      <ViewHeader title="Debug panel" />
-      <ViewSelector
-        swipeEnabled
-        sections={MAIN_VIEWS}
-        items={items}
-        renderItem={renderItem}
-        onSelectView={setCurrentView}
-      />
-    </View>
-  )
-}
-
-function Heading({label}: {label: string}) {
-  const pal = usePalette('default')
-  return (
-    <View style={[s.pt10, s.pb5]}>
-      <Text type="title-lg" style={pal.text}>
-        {label}
-      </Text>
-    </View>
-  )
-}
-
-function BaseView() {
-  return (
-    <View style={[s.pl10, s.pr10]}>
-      <Heading label="Typography" />
-      <TypographyView />
-      <Heading label="Palettes" />
-      <PaletteView palette="default" />
-      <PaletteView palette="primary" />
-      <PaletteView palette="secondary" />
-      <PaletteView palette="inverted" />
-      <PaletteView palette="error" />
-      <Heading label="Empty state" />
-      <EmptyStateView />
-      <Heading label="Loading placeholders" />
-      <LoadingPlaceholderView />
-      <View style={s.footerSpacer} />
-    </View>
-  )
-}
-
-function ControlsView() {
-  return (
-    <ScrollView style={[s.pl10, s.pr10]}>
-      <Heading label="Buttons" />
-      <ButtonsView />
-      <Heading label="Dropdown Buttons" />
-      <DropdownButtonsView />
-      <Heading label="Toggle Buttons" />
-      <ToggleButtonsView />
-      <Heading label="Radio Buttons" />
-      <RadioButtonsView />
-      <View style={s.footerSpacer} />
-    </ScrollView>
-  )
-}
-
-function ErrorView() {
-  return (
-    <View style={s.p10}>
-      <View style={s.mb5}>
-        <ErrorScreen
-          title="Error screen"
-          message="A major error occurred that led the entire screen to fail"
-          details="Here are some details"
-          onPressTryAgain={() => {}}
-        />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage message="This is an error that occurred while things were being done" />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage
-          message="This is an error that occurred while things were being done"
-          numberOfLines={1}
-        />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage
-          message="This is an error that occurred while things were being done"
-          onPressTryAgain={() => {}}
-        />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage
-          message="This is an error that occurred while things were being done"
-          onPressTryAgain={() => {}}
-          numberOfLines={1}
-        />
-      </View>
-    </View>
-  )
-}
-
-function NotifsView() {
-  const triggerPush = () => {
-    // TODO: implement local notification for testing
-  }
-  const triggerToast = () => {
-    Toast.show('The task has been completed')
-  }
-  const triggerToast2 = () => {
-    Toast.show('The task has been completed successfully and with no problems')
-  }
-  return (
-    <View style={s.p10}>
-      <View style={s.flexRow}>
-        <Button onPress={triggerPush} label="Trigger Push" />
-        <Button onPress={triggerToast} label="Trigger Toast" />
-        <Button onPress={triggerToast2} label="Trigger Toast 2" />
-      </View>
-    </View>
-  )
-}
-
-function PaletteView({palette}: {palette: PaletteColorName}) {
-  const defaultPal = usePalette('default')
-  const pal = usePalette(palette)
-  return (
-    <View style={[pal.view, pal.border, s.p10, s.mb5, s.border1]}>
-      <Text style={[pal.text]}>{palette} colors</Text>
-      <Text style={[pal.textLight]}>Light text</Text>
-      <Text style={[pal.link]}>Link text</Text>
-      {palette !== 'default' && (
-        <View style={[defaultPal.view]}>
-          <Text style={[pal.textInverted]}>Inverted text</Text>
-        </View>
-      )}
-    </View>
-  )
-}
-
-function TypographyView() {
-  const pal = usePalette('default')
-  return (
-    <View style={[pal.view]}>
-      <Text type="2xl-thin" style={[pal.text]}>
-        '2xl-thin' lorem ipsum dolor
-      </Text>
-      <Text type="2xl" style={[pal.text]}>
-        '2xl' lorem ipsum dolor
-      </Text>
-      <Text type="2xl-medium" style={[pal.text]}>
-        '2xl-medium' lorem ipsum dolor
-      </Text>
-      <Text type="2xl-bold" style={[pal.text]}>
-        '2xl-bold' lorem ipsum dolor
-      </Text>
-      <Text type="2xl-heavy" style={[pal.text]}>
-        '2xl-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="xl-thin" style={[pal.text]}>
-        'xl-thin' lorem ipsum dolor
-      </Text>
-      <Text type="xl" style={[pal.text]}>
-        'xl' lorem ipsum dolor
-      </Text>
-      <Text type="xl-medium" style={[pal.text]}>
-        'xl-medium' lorem ipsum dolor
-      </Text>
-      <Text type="xl-bold" style={[pal.text]}>
-        'xl-bold' lorem ipsum dolor
-      </Text>
-      <Text type="xl-heavy" style={[pal.text]}>
-        'xl-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="lg-thin" style={[pal.text]}>
-        'lg-thin' lorem ipsum dolor
-      </Text>
-      <Text type="lg" style={[pal.text]}>
-        'lg' lorem ipsum dolor
-      </Text>
-      <Text type="lg-medium" style={[pal.text]}>
-        'lg-medium' lorem ipsum dolor
-      </Text>
-      <Text type="lg-bold" style={[pal.text]}>
-        'lg-bold' lorem ipsum dolor
-      </Text>
-      <Text type="lg-heavy" style={[pal.text]}>
-        'lg-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="md-thin" style={[pal.text]}>
-        'md-thin' lorem ipsum dolor
-      </Text>
-      <Text type="md" style={[pal.text]}>
-        'md' lorem ipsum dolor
-      </Text>
-      <Text type="md-medium" style={[pal.text]}>
-        'md-medium' lorem ipsum dolor
-      </Text>
-      <Text type="md-bold" style={[pal.text]}>
-        'md-bold' lorem ipsum dolor
-      </Text>
-      <Text type="md-heavy" style={[pal.text]}>
-        'md-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="sm-thin" style={[pal.text]}>
-        'sm-thin' lorem ipsum dolor
-      </Text>
-      <Text type="sm" style={[pal.text]}>
-        'sm' lorem ipsum dolor
-      </Text>
-      <Text type="sm-medium" style={[pal.text]}>
-        'sm-medium' lorem ipsum dolor
-      </Text>
-      <Text type="sm-bold" style={[pal.text]}>
-        'sm-bold' lorem ipsum dolor
-      </Text>
-      <Text type="sm-heavy" style={[pal.text]}>
-        'sm-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="xs-thin" style={[pal.text]}>
-        'xs-thin' lorem ipsum dolor
-      </Text>
-      <Text type="xs" style={[pal.text]}>
-        'xs' lorem ipsum dolor
-      </Text>
-      <Text type="xs-medium" style={[pal.text]}>
-        'xs-medium' lorem ipsum dolor
-      </Text>
-      <Text type="xs-bold" style={[pal.text]}>
-        'xs-bold' lorem ipsum dolor
-      </Text>
-      <Text type="xs-heavy" style={[pal.text]}>
-        'xs-heavy' lorem ipsum dolor
-      </Text>
-
-      <Text type="title-2xl" style={[pal.text]}>
-        'title-2xl' lorem ipsum dolor
-      </Text>
-      <Text type="title-xl" style={[pal.text]}>
-        'title-xl' lorem ipsum dolor
-      </Text>
-      <Text type="title-lg" style={[pal.text]}>
-        'title-lg' lorem ipsum dolor
-      </Text>
-      <Text type="title" style={[pal.text]}>
-        'title' lorem ipsum dolor
-      </Text>
-      <Text type="button" style={[pal.text]}>
-        Button
-      </Text>
-      <Text type="button-lg" style={[pal.text]}>
-        Button-lg
-      </Text>
-    </View>
-  )
-}
-
-function EmptyStateView() {
-  return <EmptyState icon="bars" message="This is an empty state" />
-}
-
-function LoadingPlaceholderView() {
-  return (
-    <>
-      <LoadingPlaceholder.PostLoadingPlaceholder />
-      <LoadingPlaceholder.NotificationLoadingPlaceholder />
-    </>
-  )
-}
-
-function ButtonsView() {
-  const defaultPal = usePalette('default')
-  const buttonStyles = {marginRight: 5}
-  return (
-    <View style={[defaultPal.view]}>
-      <View style={[s.flexRow, s.mb5]}>
-        <Button type="primary" label="Primary solid" style={buttonStyles} />
-        <Button type="secondary" label="Secondary solid" style={buttonStyles} />
-      </View>
-      <View style={[s.flexRow, s.mb5]}>
-        <Button type="default" label="Default solid" style={buttonStyles} />
-        <Button type="inverted" label="Inverted solid" style={buttonStyles} />
-      </View>
-      <View style={s.flexRow}>
-        <Button
-          type="primary-outline"
-          label="Primary outline"
-          style={buttonStyles}
-        />
-        <Button
-          type="secondary-outline"
-          label="Secondary outline"
-          style={buttonStyles}
-        />
-      </View>
-      <View style={s.flexRow}>
-        <Button
-          type="primary-light"
-          label="Primary light"
-          style={buttonStyles}
-        />
-        <Button
-          type="secondary-light"
-          label="Secondary light"
-          style={buttonStyles}
-        />
-      </View>
-      <View style={s.flexRow}>
-        <Button
-          type="default-light"
-          label="Default light"
-          style={buttonStyles}
-        />
-      </View>
-    </View>
-  )
-}
-
-const DROPDOWN_ITEMS: DropdownItem[] = [
-  {
-    icon: ['far', 'paste'],
-    label: 'Copy post text',
-    onPress() {},
-  },
-  {
-    icon: 'share',
-    label: 'Share...',
-    onPress() {},
-  },
-  {
-    icon: 'circle-exclamation',
-    label: 'Report post',
-    onPress() {},
-  },
-]
-function DropdownButtonsView() {
-  const defaultPal = usePalette('default')
-  return (
-    <View style={[defaultPal.view]}>
-      <View style={s.mb5}>
-        <DropdownButton
-          type="primary"
-          items={DROPDOWN_ITEMS}
-          menuWidth={200}
-          label="Primary button"
-        />
-      </View>
-      <View style={s.mb5}>
-        <DropdownButton type="bare" items={DROPDOWN_ITEMS} menuWidth={200}>
-          <Text>Bare</Text>
-        </DropdownButton>
-      </View>
-    </View>
-  )
-}
-
-function ToggleButtonsView() {
-  const defaultPal = usePalette('default')
-  const buttonStyles = s.mb5
-  const [isSelected, setIsSelected] = React.useState(false)
-  const onToggle = () => setIsSelected(!isSelected)
-  return (
-    <View style={[defaultPal.view]}>
-      <ToggleButton
-        type="primary"
-        label="Primary solid"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="secondary"
-        label="Secondary solid"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="inverted"
-        label="Inverted solid"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="primary-outline"
-        label="Primary outline"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="secondary-outline"
-        label="Secondary outline"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="primary-light"
-        label="Primary light"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="secondary-light"
-        label="Secondary light"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="default-light"
-        label="Default light"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-    </View>
-  )
-}
-
-const RADIO_BUTTON_ITEMS = [
-  {key: 'default-light', label: 'Default Light'},
-  {key: 'primary', label: 'Primary'},
-  {key: 'secondary', label: 'Secondary'},
-  {key: 'inverted', label: 'Inverted'},
-  {key: 'primary-outline', label: 'Primary Outline'},
-  {key: 'secondary-outline', label: 'Secondary Outline'},
-  {key: 'primary-light', label: 'Primary Light'},
-  {key: 'secondary-light', label: 'Secondary Light'},
-]
-function RadioButtonsView() {
-  const defaultPal = usePalette('default')
-  const [rgType, setRgType] = React.useState<ButtonType>('default-light')
-  return (
-    <View style={[defaultPal.view]}>
-      <RadioGroup
-        type={rgType}
-        items={RADIO_BUTTON_ITEMS}
-        initialSelection="default-light"
-        onSelect={v => setRgType(v as ButtonType)}
-      />
-    </View>
-  )
-}

src/view/screens/DebugNew.tsx

@@ -1,746 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {CenteredView, ScrollView} from '#/view/com/util/Views'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-
-import {useSetColorMode} from '#/state/shell'
-import * as tokens from '#/alf/tokens'
-import {atoms as a, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
-import {Button, ButtonText} from '#/view/com/Button'
-import {Link} from '#/view/com/Link'
-import {Text, H1, H2, H3, H4, H5, H6, P} from '#/view/com/Typography'
-import {InputText} from '#/view/com/forms/InputText'
-import {InputDate, utils} from '#/view/com/forms/InputDate'
-import {Logo} from '#/view/icons/Logo'
-import * as Dialog from '#/view/com/Dialog'
-import * as Prompt from '#/view/com/Prompt'
-
-function ThemeSelector() {
-  const setColorMode = useSetColorMode()
-
-  return (
-    <View style={[a.flex_row, a.align_start, a.gap_md]}>
-      <Button
-        type="secondary"
-        size="small"
-        accessibilityLabel='Set theme to "system"'
-        accessibilityHint="Set theme to system default"
-        onPress={() => setColorMode('system')}>
-        System
-      </Button>
-      <Button
-        type="secondary"
-        size="small"
-        accessibilityLabel='Set theme to "system"'
-        accessibilityHint="Set theme to system default"
-        onPress={() => setColorMode('light')}>
-        Light
-      </Button>
-      <Button
-        type="secondary"
-        size="small"
-        accessibilityLabel='Set theme to "system"'
-        accessibilityHint="Set theme to system default"
-        onPress={() => setColorMode('dark')}>
-        Dark
-      </Button>
-    </View>
-  )
-}
-
-function BreakpointDebugger() {
-  const t = useTheme()
-  const breakpoints = useBreakpoints()
-
-  return (
-    <View>
-      <H3 style={[a.pb_md]}>Breakpoint Debugger</H3>
-      <Text style={[a.pb_md]}>
-        Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
-        {breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
-        {breakpoints.gtTablet && <Text>desktop</Text>}
-      </Text>
-      <Text
-        style={[a.p_md, t.atoms.bg_contrast_100, {fontFamily: 'monospace'}]}>
-        {JSON.stringify(breakpoints, null, 2)}
-      </Text>
-    </View>
-  )
-}
-
-function ThemedSection() {
-  const t = useTheme()
-
-  return (
-    <View style={[t.atoms.bg, a.gap_md, a.p_xl]}>
-      <H3 style={[a.font_bold]}>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]}>
-        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]}>
-        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]}>
-        <View
-          style={[
-            a.flex_1,
-            t.atoms.bg,
-            a.align_center,
-            a.justify_center,
-            {height: 60},
-          ]}>
-          <Text>theme.bg</Text>
-        </View>
-        <View
-          style={[
-            a.flex_1,
-            t.atoms.bg_contrast_100,
-            a.align_center,
-            a.justify_center,
-            {height: 60},
-          ]}>
-          <Text>theme.bg_contrast_100</Text>
-        </View>
-      </View>
-      <View style={[a.flex_row, a.gap_md]}>
-        <View
-          style={[
-            a.flex_1,
-            t.atoms.bg_contrast_200,
-            a.align_center,
-            a.justify_center,
-            {height: 60},
-          ]}>
-          <Text>theme.bg_contrast_200</Text>
-        </View>
-        <View
-          style={[
-            a.flex_1,
-            t.atoms.bg_contrast_300,
-            a.align_center,
-            a.justify_center,
-            {height: 60},
-          ]}>
-          <Text>theme.bg_contrast_300</Text>
-        </View>
-      </View>
-      <View style={[a.flex_row, a.gap_md]}>
-        <View
-          style={[
-            a.flex_1,
-            t.atoms.bg_positive,
-            a.align_center,
-            a.justify_center,
-            {height: 60},
-          ]}>
-          <Text>theme.bg_positive</Text>
-        </View>
-        <View
-          style={[
-            a.flex_1,
-            t.atoms.bg_negative,
-            a.align_center,
-            a.justify_center,
-            {height: 60},
-          ]}>
-          <Text>theme.bg_negative</Text>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-export function Buttons() {
-  const t = useTheme()
-
-  return (
-    <View style={[a.gap_md, a.align_start]}>
-      <Button
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something">
-        Unstyled button
-      </Button>
-
-      <Button
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something">
-        {({state}) => (
-          <View style={[a.p_md, a.rounded_full, t.atoms.bg_contrast_300]}>
-            <Text>Entirely custom button, state: {JSON.stringify(state)}</Text>
-          </View>
-        )}
-      </Button>
-
-      <Button
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        type="primary"
-        size="large">
-        Default button
-      </Button>
-
-      <Button
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        type="primary"
-        size="large"
-        disabled>
-        Default button (disabled)
-      </Button>
-
-      <Button
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        type="primary"
-        size="large">
-        {({props}) => (
-          <>
-            <FontAwesomeIcon icon={['fas', 'plus']} size={12} />
-            <ButtonText {...props}>Default with an icon</ButtonText>
-          </>
-        )}
-      </Button>
-
-      <Button
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        type="secondary"
-        size="small">
-        Small button
-      </Button>
-
-      <Button
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        type="secondary"
-        size="small"
-        disabled>
-        Small button (disabled)
-      </Button>
-
-      <Link
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        to="https://blueskyweb.xyz"
-        warnOnMismatchingTextChild
-        style={[a.text_md]}>
-        External
-      </Link>
-      <Link
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        to="https://blueskyweb.xyz"
-        style={[a.text_md]}>
-        <H3>External with custom children</H3>
-      </Link>
-      <Link
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        to="https://blueskyweb.xyz"
-        warnOnMismatchingTextChild
-        style={[a.text_md]}>
-        https://blueskyweb.xyz
-      </Link>
-      <Link
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        to="https://bsky.app/profile/bsky.app"
-        warnOnMismatchingTextChild
-        style={[a.text_md]}>
-        Internal
-      </Link>
-
-      <Link
-        accessibilityLabel="Click here"
-        accessibilityHint="Opens something"
-        type="primary"
-        size="large"
-        to="https://bsky.app/profile/bsky.app">
-        {({props}) => <ButtonText {...props}>Link as a button</ButtonText>}
-      </Link>
-    </View>
-  )
-}
-
-function Forms() {
-  return (
-    <View style={[a.gap_md, a.align_start]}>
-      <InputText
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value=""
-        onChange={text => console.log(text)}
-      />
-      <InputText
-        hasError
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value="Test initial value"
-        onChange={text => console.log(text)}
-      />
-      <InputText
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value=""
-        onChange={text => console.log(text)}
-        icon={Logo}
-      />
-      <InputText
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value=""
-        onChange={text => console.log(text)}
-        icon={Logo}
-        suffix={() => <Text>.bksy.social</Text>}
-      />
-
-      <InputDate
-        testID="date"
-        value={'2001-01-01'}
-        onChange={date => console.log(date)}
-        accessibilityLabel="Date"
-        accessibilityHint="Enter a date"
-      />
-      <InputDate
-        testID="date"
-        value={utils.toSimpleDateString(new Date())}
-        onChange={date => console.log(date)}
-        accessibilityLabel="Date"
-        accessibilityHint="Enter a date"
-      />
-    </View>
-  )
-}
-
-function Dialogs() {
-  const control = Dialog.useDialogControl()
-  const prompt = Prompt.usePromptControl()
-
-  return (
-    <>
-      <Button
-        type="secondary"
-        size="small"
-        onPress={() => control.open()}
-        accessibilityLabel="Open basic dialog"
-        accessibilityHint="Open basic dialog">
-        Open basic dialog
-      </Button>
-
-      <Button
-        type="negative"
-        size="small"
-        onPress={() => prompt.open()}
-        accessibilityLabel="Open prompt"
-        accessibilityHint="Open prompt">
-        Open prompt
-      </Button>
-
-      <Prompt.Outer control={prompt}>
-        <Prompt.Title>Are you sure?</Prompt.Title>
-        <Prompt.Description>
-          This action cannot be undone. This action cannot be undone. This
-          action cannot be undone.
-        </Prompt.Description>
-        <Prompt.Actions>
-          <Prompt.Cancel>Cancel</Prompt.Cancel>
-          <Prompt.Action>Confirm</Prompt.Action>
-        </Prompt.Actions>
-      </Prompt.Outer>
-
-      <Dialog.Outer control={control}>
-        <Dialog.Inner
-          accessibilityLabelledBy="dialog-title"
-          accessibilityDescribedBy="dialog-description">
-          <Dialog.Handle />
-          <View style={[a.gap_md]}>
-            <H3 nativeID="dialog-title">Dialog</H3>
-            <P nativeID="dialog-description">Description</P>
-            <View style={[a.flex_row, a.justify_end]}>
-              <Button
-                type="primary"
-                size="small"
-                onPress={() => control.close()}
-                accessibilityLabel="Open basic dialog"
-                accessibilityHint="Open basic dialog">
-                Close basic dialog
-              </Button>
-            </View>
-          </View>
-        </Dialog.Inner>
-      </Dialog.Outer>
-    </>
-  )
-}
-
-export function DebugScreen() {
-  const t = useTheme()
-
-  return (
-    <ScrollView>
-      <CenteredView style={[t.atoms.bg]}>
-        <View style={[a.p_xl, a.gap_xxl, {paddingBottom: 200}]}>
-          <ThemeSelector />
-
-          <Dialogs />
-
-          <Forms />
-          <Buttons />
-
-          <Alf theme="light">
-            <ThemedSection />
-          </Alf>
-          <Alf theme="dark">
-            <ThemedSection />
-          </Alf>
-
-          <H1>Heading 1</H1>
-          <H2>Heading 2</H2>
-          <H3>Heading 3</H3>
-          <H4>Heading 4</H4>
-          <H5>Heading 5</H5>
-          <H6>Heading 6</H6>
-
-          <Text style={[a.text_xxl]}>atoms.text_xxl</Text>
-          <Text style={[a.text_xl]}>atoms.text_xl</Text>
-          <Text style={[a.text_lg]}>atoms.text_lg</Text>
-          <Text style={[a.text_md]}>atoms.text_md</Text>
-          <Text style={[a.text_sm]}>atoms.text_sm</Text>
-          <Text style={[a.text_xs]}>atoms.text_xs</Text>
-          <Text style={[a.text_xxs]}>atoms.text_xxs</Text>
-
-          <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,
-                  {height: 60, backgroundColor: tokens.color.gray_100},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_200},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_300},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_400},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_500},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_600},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_700},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_800},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_900},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.gray_1000},
-                ]}
-              />
-            </View>
-
-            <View style={[a.flex_row, a.gap_md]}>
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_0},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_100},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_200},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_300},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_400},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_500},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_600},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_700},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_800},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_900},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.blue_1000},
-                ]}
-              />
-            </View>
-            <View style={[a.flex_row, a.gap_md]}>
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_0},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_100},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_200},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_300},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_400},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_500},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_600},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_700},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_800},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_900},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.green_1000},
-                ]}
-              />
-            </View>
-            <View style={[a.flex_row, a.gap_md]}>
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_0},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_100},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_200},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_300},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_400},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_500},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_600},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_700},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_800},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_900},
-                ]}
-              />
-              <View
-                style={[
-                  a.flex_1,
-                  {height: 60, backgroundColor: tokens.color.red_1000},
-                ]}
-              />
-            </View>
-          </View>
-
-          <View>
-            <H3 style={[a.pb_md, a.font_bold]}>Spacing</H3>
-
-            <View style={[a.gap_md]}>
-              <View style={[a.flex_row, a.align_center]}>
-                <Text style={{width: 80}}>xxs (2px)</Text>
-                <View style={[a.flex_1, a.pt_xxs, t.atoms.bg_contrast_300]} />
-              </View>
-
-              <View style={[a.flex_row, a.align_center]}>
-                <Text style={{width: 80}}>xs (4px)</Text>
-                <View style={[a.flex_1, a.pt_xs, t.atoms.bg_contrast_300]} />
-              </View>
-
-              <View style={[a.flex_row, a.align_center]}>
-                <Text style={{width: 80}}>sm (8px)</Text>
-                <View style={[a.flex_1, a.pt_sm, t.atoms.bg_contrast_300]} />
-              </View>
-
-              <View style={[a.flex_row, a.align_center]}>
-                <Text style={{width: 80}}>md (12px)</Text>
-                <View style={[a.flex_1, a.pt_md, t.atoms.bg_contrast_300]} />
-              </View>
-
-              <View style={[a.flex_row, a.align_center]}>
-                <Text style={{width: 80}}>lg (18px)</Text>
-                <View style={[a.flex_1, a.pt_lg, t.atoms.bg_contrast_300]} />
-              </View>
-
-              <View style={[a.flex_row, a.align_center]}>
-                <Text style={{width: 80}}>xl (24px)</Text>
-                <View style={[a.flex_1, a.pt_xl, t.atoms.bg_contrast_300]} />
-              </View>
-
-              <View style={[a.flex_row, a.align_center]}>
-                <Text style={{width: 80}}>xxl (32px)</Text>
-                <View style={[a.flex_1, a.pt_xxl, t.atoms.bg_contrast_300]} />
-              </View>
-            </View>
-          </View>
-
-          <BreakpointDebugger />
-        </View>
-      </CenteredView>
-    </ScrollView>
-  )
-}

src/view/screens/Storybook/Breakpoints.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, useTheme, useBreakpoints} from '#/alf'
+import {Text, H3} from '#/view/com/Typography'
+
+export function Breakpoints() {
+  const t = useTheme()
+  const breakpoints = useBreakpoints()
+
+  return (
+    <View>
+      <H3 style={[a.pb_md]}>Breakpoint Debugger</H3>
+      <Text style={[a.pb_md]}>
+        Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
+        {breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
+        {breakpoints.gtTablet && <Text>desktop</Text>}
+      </Text>
+      <Text
+        style={[a.p_md, t.atoms.bg_contrast_100, {fontFamily: 'monospace'}]}>
+        {JSON.stringify(breakpoints, null, 2)}
+      </Text>
+    </View>
+  )
+}

src/view/screens/Storybook/Buttons.tsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import {View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/view/com/Button'
+import {Link} from '#/view/com/Link'
+import {Text, H3} from '#/view/com/Typography'
+
+export function Buttons() {
+  const t = useTheme()
+
+  return (
+    <View style={[a.gap_md, a.align_start]}>
+      <Button
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something">
+        Unstyled button
+      </Button>
+
+      <Button
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something">
+        {({state}) => (
+          <View style={[a.p_md, a.rounded_full, t.atoms.bg_contrast_300]}>
+            <Text>Entirely custom button, state: {JSON.stringify(state)}</Text>
+          </View>
+        )}
+      </Button>
+
+      <Button
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        type="primary"
+        size="large">
+        Default button
+      </Button>
+
+      <Button
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        type="primary"
+        size="large"
+        disabled>
+        Default button (disabled)
+      </Button>
+
+      <Button
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        type="primary"
+        size="large">
+        {({props}) => (
+          <>
+            <FontAwesomeIcon icon={['fas', 'plus']} size={12} />
+            <ButtonText {...props}>Default with an icon</ButtonText>
+          </>
+        )}
+      </Button>
+
+      <Button
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        type="secondary"
+        size="small">
+        Small button
+      </Button>
+
+      <Button
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        type="secondary"
+        size="small"
+        disabled>
+        Small button (disabled)
+      </Button>
+
+      <Link
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        to="https://blueskyweb.xyz"
+        warnOnMismatchingTextChild
+        style={[a.text_md]}>
+        External
+      </Link>
+      <Link
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        to="https://blueskyweb.xyz"
+        style={[a.text_md]}>
+        <H3>External with custom children</H3>
+      </Link>
+      <Link
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        to="https://blueskyweb.xyz"
+        warnOnMismatchingTextChild
+        style={[a.text_md]}>
+        https://blueskyweb.xyz
+      </Link>
+      <Link
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        to="https://bsky.app/profile/bsky.app"
+        warnOnMismatchingTextChild
+        style={[a.text_md]}>
+        Internal
+      </Link>
+
+      <Link
+        accessibilityLabel="Click here"
+        accessibilityHint="Opens something"
+        type="primary"
+        size="large"
+        to="https://bsky.app/profile/bsky.app">
+        {({props}) => <ButtonText {...props}>Link as a button</ButtonText>}
+      </Link>
+    </View>
+  )
+}

src/view/screens/Storybook/Dialogs.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+import {Button} from '#/view/com/Button'
+import {H3, P} from '#/view/com/Typography'
+import * as Dialog from '#/view/com/Dialog'
+import * as Prompt from '#/view/com/Prompt'
+
+export function Dialogs() {
+  const control = Dialog.useDialogControl()
+  const prompt = Prompt.usePromptControl()
+
+  return (
+    <>
+      <Button
+        type="secondary"
+        size="small"
+        onPress={() => control.open()}
+        accessibilityLabel="Open basic dialog"
+        accessibilityHint="Open basic dialog">
+        Open basic dialog
+      </Button>
+
+      <Button
+        type="negative"
+        size="small"
+        onPress={() => prompt.open()}
+        accessibilityLabel="Open prompt"
+        accessibilityHint="Open prompt">
+        Open prompt
+      </Button>
+
+      <Prompt.Outer control={prompt}>
+        <Prompt.Title>Are you sure?</Prompt.Title>
+        <Prompt.Description>
+          This action cannot be undone. This action cannot be undone. This
+          action cannot be undone.
+        </Prompt.Description>
+        <Prompt.Actions>
+          <Prompt.Cancel>Cancel</Prompt.Cancel>
+          <Prompt.Action>Confirm</Prompt.Action>
+        </Prompt.Actions>
+      </Prompt.Outer>
+
+      <Dialog.Outer control={control}>
+        <Dialog.Inner
+          accessibilityLabelledBy="dialog-title"
+          accessibilityDescribedBy="dialog-description">
+          <Dialog.Handle />
+          <View style={[a.gap_md]}>
+            <H3 nativeID="dialog-title">Dialog</H3>
+            <P nativeID="dialog-description">Description</P>
+            <View style={[a.flex_row, a.justify_end]}>
+              <Button
+                type="primary"
+                size="small"
+                onPress={() => control.close()}
+                accessibilityLabel="Open basic dialog"
+                accessibilityHint="Open basic dialog">
+                Close basic dialog
+              </Button>
+            </View>
+          </View>
+        </Dialog.Inner>
+      </Dialog.Outer>
+    </>
+  )
+}

src/view/screens/Storybook/Forms.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+import {Text} from '#/view/com/Typography'
+import {InputText} from '#/view/com/forms/InputText'
+import {InputDate, utils} from '#/view/com/forms/InputDate'
+import {Logo} from '#/view/icons/Logo'
+
+export function Forms() {
+  return (
+    <View style={[a.gap_md, a.align_start]}>
+      <InputText
+        testID="input"
+        accessibilityLabel="Input"
+        accessibilityHint="Enter some text"
+        placeholder="Type here"
+        value=""
+        onChange={text => console.log(text)}
+      />
+      <InputText
+        hasError
+        testID="input"
+        accessibilityLabel="Input"
+        accessibilityHint="Enter some text"
+        placeholder="Type here"
+        value="Test initial value"
+        onChange={text => console.log(text)}
+      />
+      <InputText
+        testID="input"
+        accessibilityLabel="Input"
+        accessibilityHint="Enter some text"
+        placeholder="Type here"
+        value=""
+        onChange={text => console.log(text)}
+        icon={Logo}
+      />
+      <InputText
+        testID="input"
+        accessibilityLabel="Input"
+        accessibilityHint="Enter some text"
+        placeholder="Type here"
+        value=""
+        onChange={text => console.log(text)}
+        icon={Logo}
+        suffix={() => <Text>.bksy.social</Text>}
+      />
+
+      <InputDate
+        testID="date"
+        value={'2001-01-01'}
+        onChange={date => console.log(date)}
+        accessibilityLabel="Date"
+        accessibilityHint="Enter a date"
+      />
+      <InputDate
+        testID="date"
+        value={utils.toSimpleDateString(new Date())}
+        onChange={date => console.log(date)}
+        accessibilityLabel="Date"
+        accessibilityHint="Enter a date"
+      />
+    </View>
+  )
+}

src/view/screens/Storybook/Palette.tsx

@@ -0,0 +1,279 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import * as tokens from '#/alf/tokens'
+import {atoms as a} from '#/alf'
+
+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_25},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_50},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_100},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_200},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_300},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_400},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_500},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_600},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_700},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_800},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.gray_900},
+          ]}
+        />
+      </View>
+
+      <View style={[a.flex_row, a.gap_md]}>
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_25},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_50},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_100},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_200},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_300},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_400},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_500},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_600},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_700},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_800},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.blue_900},
+          ]}
+        />
+      </View>
+      <View style={[a.flex_row, a.gap_md]}>
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_25},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_50},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_100},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_200},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_300},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_400},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_500},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_600},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_700},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_800},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.green_900},
+          ]}
+        />
+      </View>
+      <View style={[a.flex_row, a.gap_md]}>
+        <View
+          style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_25}]}
+        />
+        <View
+          style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_50}]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_100},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_200},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_300},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_400},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_500},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_600},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_700},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_800},
+          ]}
+        />
+        <View
+          style={[
+            a.flex_1,
+            {height: 60, backgroundColor: tokens.color.red_900},
+          ]}
+        />
+      </View>
+    </View>
+  )
+}

src/view/screens/Storybook/Spacing.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/view/com/Typography'
+
+export function Spacing() {
+  const t = useTheme()
+  return (
+    <View>
+      <View style={[a.gap_md]}>
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>2xs (2px)</Text>
+          <View style={[a.flex_1, a.pt_2xs, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>xs (4px)</Text>
+          <View style={[a.flex_1, a.pt_xs, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>sm (8px)</Text>
+          <View style={[a.flex_1, a.pt_sm, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>md (12px)</Text>
+          <View style={[a.flex_1, a.pt_md, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>lg (16px)</Text>
+          <View style={[a.flex_1, a.pt_lg, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>xl (20px)</Text>
+          <View style={[a.flex_1, a.pt_xl, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>2xl (24px)</Text>
+          <View style={[a.flex_1, a.pt_2xl, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>3xl (28px)</Text>
+          <View style={[a.flex_1, a.pt_3xl, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>4xl (32px)</Text>
+          <View style={[a.flex_1, a.pt_4xl, t.atoms.bg_contrast_300]} />
+        </View>
+
+        <View style={[a.flex_row, a.align_center]}>
+          <Text style={{width: 80}}>5xl (40px)</Text>
+          <View style={[a.flex_1, a.pt_5xl, t.atoms.bg_contrast_300]} />
+        </View>
+      </View>
+    </View>
+  )
+}

src/view/screens/Storybook/Theming.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/view/com/Typography'
+import {Palette} from './Palette'
+
+export function Theming() {
+  const t = useTheme()
+
+  return (
+    <View style={[t.atoms.bg, a.gap_lg, a.p_xl]}>
+      <Palette />
+
+      <Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text>
+
+      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <Text style={[a.font_bold, t.atoms.text_contrast_600, a.px_md]}>
+        theme.atoms.text_contrast_600
+      </Text>
+
+      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <Text style={[a.font_bold, t.atoms.text_contrast_500, a.px_md]}>
+        theme.atoms.text_contrast_500
+      </Text>
+
+      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <Text style={[a.font_bold, t.atoms.text_contrast_400, a.px_md]}>
+        theme.atoms.text_contrast_400
+      </Text>
+
+      <View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
+
+      <View style={[a.w_full, a.gap_md]}>
+        <View style={[t.atoms.bg, a.justify_center, a.p_md]}>
+          <Text>theme.atoms.bg</Text>
+        </View>
+        <View style={[t.atoms.bg_contrast_25, a.justify_center, a.p_md]}>
+          <Text>theme.atoms.bg_contrast_25</Text>
+        </View>
+        <View style={[t.atoms.bg_contrast_50, a.justify_center, a.p_md]}>
+          <Text>theme.atoms.bg_contrast_50</Text>
+        </View>
+        <View style={[t.atoms.bg_contrast_100, a.justify_center, a.p_md]}>
+          <Text>theme.atoms.bg_contrast_100</Text>
+        </View>
+        <View style={[t.atoms.bg_contrast_200, a.justify_center, a.p_md]}>
+          <Text>theme.atoms.bg_contrast_200</Text>
+        </View>
+        <View style={[t.atoms.bg_contrast_300, a.justify_center, a.p_md]}>
+          <Text>theme.atoms.bg_contrast_300</Text>
+        </View>
+      </View>
+    </View>
+  )
+}

src/view/screens/Storybook/Typography.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import {atoms as a} from '#/alf'
+import {Text, H1, H2, H3, H4, H5, H6, P} from '#/view/com/Typography'
+
+export function Typography() {
+  return (
+    <>
+      <H1>H1 Heading</H1>
+      <H2>H2 Heading</H2>
+      <H3>H3 Heading</H3>
+      <H4>H4 Heading</H4>
+      <H5>H5 Heading</H5>
+      <H6>H6 Heading</H6>
+      <P>P Paragraph</P>
+
+      <Text style={[a.text_5xl]}>atoms.text_5xl</Text>
+      <Text style={[a.text_4xl]}>atoms.text_4xl</Text>
+      <Text style={[a.text_3xl]}>atoms.text_3xl</Text>
+      <Text style={[a.text_2xl]}>atoms.text_2xl</Text>
+      <Text style={[a.text_xl]}>atoms.text_xl</Text>
+      <Text style={[a.text_lg]}>atoms.text_lg</Text>
+      <Text style={[a.text_md]}>atoms.text_md</Text>
+      <Text style={[a.text_sm]}>atoms.text_sm</Text>
+      <Text style={[a.text_xs]}>atoms.text_xs</Text>
+      <Text style={[a.text_2xs]}>atoms.text_2xs</Text>
+    </>
+  )
+}

src/view/screens/Storybook/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import {View} from 'react-native'
+import {CenteredView, ScrollView} from '#/view/com/util/Views'
+
+import {atoms as a, useTheme, ThemeProvider} from '#/alf'
+import {useSetColorMode} from '#/state/shell'
+import {Button} from '#/view/com/Button'
+
+import {Theming} from './Theming'
+import {Typography} from './Typography'
+import {Spacing} from './Spacing'
+import {Buttons} from './Buttons'
+import {Forms} from './Forms'
+import {Dialogs} from './Dialogs'
+import {Breakpoints} from './Breakpoints'
+
+export function Storybook() {
+  const t = useTheme()
+  const setColorMode = useSetColorMode()
+
+  return (
+    <ScrollView>
+      <CenteredView style={[t.atoms.bg]}>
+        <View style={[a.p_xl, a.gap_2xl, {paddingBottom: 200}]}>
+          <View style={[a.flex_row, a.align_start, a.gap_md]}>
+            <Button
+              type="secondary"
+              size="small"
+              accessibilityLabel='Set theme to "system"'
+              accessibilityHint="Set theme to system default"
+              onPress={() => setColorMode('system')}>
+              System
+            </Button>
+            <Button
+              type="secondary"
+              size="small"
+              accessibilityLabel='Set theme to "system"'
+              accessibilityHint="Set theme to system default"
+              onPress={() => setColorMode('light')}>
+              Light
+            </Button>
+            <Button
+              type="secondary"
+              size="small"
+              accessibilityLabel='Set theme to "system"'
+              accessibilityHint="Set theme to system default"
+              onPress={() => setColorMode('dark')}>
+              Dark
+            </Button>
+          </View>
+
+          <ThemeProvider theme="light">
+            <Theming />
+          </ThemeProvider>
+          <ThemeProvider theme="dark">
+            <Theming />
+          </ThemeProvider>
+
+          <Typography />
+          <Spacing />
+          <Buttons />
+          <Forms />
+          <Dialogs />
+          <Breakpoints />
+        </View>
+      </CenteredView>
+    </ScrollView>
+  )
+}