More complete pass at Tailwind naming

src/alf/atoms.ts

@@ -29,7 +29,7 @@ const lineHeight = Object.keys(tokens.lineHeight).reduce((acc, key) => {
 const fontWeight = Object.keys(tokens.fontWeight).reduce((acc, key) => {
   const k = key as tokens.FontWeight
   acc[`font_${k}`] = {
-    fontWeight: tokens.fontWeight[k],
+    fontWeight: tokens.fontWeight[k] as TextStyle['fontWeight'],
   }
   return acc
 }, {} as Record<`font_${tokens.FontWeight}`, {fontWeight: TextStyle['fontWeight']}>)
@@ -73,7 +73,16 @@ const padding = Object.keys(tokens.space).reduce(
       },
     }
   },
-  {} as Record<`${'pa' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr'}_${tokens.Space}`, number>
+  {} as Record<
+    `${'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr'}_${tokens.Space}`,
+    {
+      padding?: number
+      paddingLeft?: number
+      paddingRight?: number
+      paddingTop?: number
+      paddingBottom?: number
+    }
+  >,
 )
 
 const margin = Object.keys(tokens.space).reduce(
@@ -107,7 +116,16 @@ const margin = Object.keys(tokens.space).reduce(
       },
     }
   },
-  {} as Record<`${'pa' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr'}_${tokens.Space}`, number>
+  {} as Record<
+    `${'m' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr'}_${tokens.Space}`,
+    {
+      margin?: number
+      marginLeft?: number
+      marginRight?: number
+      marginTop?: number
+      marginBottom?: number
+    }
+  >,
 )
 
 export const atoms = {
@@ -154,6 +172,9 @@ export const atoms = {
    * Flex
    */
   ...gap,
+  flex: {
+    display: 'flex',
+  },
   flex_row: {
     flexDirection: 'row',
   },
@@ -163,6 +184,12 @@ export const atoms = {
   flex_1: {
     flex: 1,
   },
+  flex_grow: {
+    flexGrow: 1,
+  },
+  flex_shrink: {
+    flexShrink: 1,
+  },
   justify_center: {
     justifyContent: 'center',
   },
@@ -201,6 +228,20 @@ export const atoms = {
   border: {
     borderWidth: 1,
   },
-} as const
+  border_t: {
+    borderTopWidth: 1,
+  },
+  border_b: {
+    borderBottomWidth: 1,
+  },
 
-const s = atoms.gap_md
+  /*
+   * Width
+   */
+  w_full: {
+    width: '100%',
+  },
+  h_full: {
+    height: '100%',
+  },
+} as const

src/alf/themes.ts

@@ -7,80 +7,88 @@ export type Palette = {
   primary: string
   positive: string
   negative: string
-  l0: string
-  l1: string
-  l2: string
-  l3: string
-  l4: string
-  l5: string
-  l6: string
-  l7: string
 }
 
 export const lightPalette: Palette = {
-  primary: tokens.color.blue,
+  primary: tokens.color.blue_500,
-  positive: tokens.color.green,
+  positive: tokens.color.green_500,
-  negative: tokens.color.red,
+  negative: tokens.color.red_500,
-  l0: tokens.color.white,
-  l1: tokens.color.gray1,
-  l2: tokens.color.gray2,
-  l3: tokens.color.gray3,
-  l4: tokens.color.gray4,
-  l5: tokens.color.gray5,
-  l6: tokens.color.gray6,
-  l7: tokens.color.black,
 } as const
 
 export const darkPalette: Palette = {
-  primary: tokens.color.blue,
+  primary: tokens.color.blue_500,
-  positive: tokens.color.green,
+  positive: tokens.color.green_400,
-  negative: tokens.color.red,
+  negative: tokens.color.red_400,
-  l0: tokens.color.black,
-  l1: tokens.color.gray6,
-  l2: tokens.color.gray5,
-  l3: tokens.color.gray4,
-  l4: tokens.color.gray3,
-  l5: tokens.color.gray2,
-  l6: tokens.color.gray1,
-  l7: tokens.color.white,
 } as const
 
 export const light = {
   palette: lightPalette,
   atoms: {
-    ...Object.keys(lightPalette).reduce((acc, key) => {
+    text: {
-      const k = key as keyof Palette
+      color: tokens.color.gray_950,
-      acc[`text_${k}`] = {
+    },
-        color: lightPalette[k],
+    text_contrast_700: {
-      }
+      color: tokens.color.gray_600,
-      return acc
+    },
-    }, {} as Record<`text_${keyof Palette}`, {color: string}>),
+    text_contrast_500: {
-    ...Object.keys(lightPalette).reduce((acc, key) => {
+      color: tokens.color.gray_400,
-      const k = key as keyof Palette
+    },
-      acc[`bg_${k}`] = {
+    text_inverted: {
-        backgroundColor: lightPalette[k],
+      color: tokens.color.white,
-      }
+    },
-      return acc
+    bg: {
-    }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
+      backgroundColor: tokens.color.white,
+    },
+    bg_contrast_100: {
+      backgroundColor: tokens.color.gray_50,
+    },
+    bg_contrast_200: {
+      backgroundColor: tokens.color.gray_100,
+    },
+    bg_contrast_300: {
+      backgroundColor: tokens.color.gray_200,
+    },
+    border: {
+      borderColor: tokens.color.gray_100,
+    },
+    border_contrast_500: {
+      borderColor: tokens.color.gray_400,
+    },
   },
-} as const
+}
 
 export const dark: Theme = {
   palette: darkPalette,
   atoms: {
-    ...Object.keys(darkPalette).reduce((acc, key) => {
+    text: {
-      const k = key as keyof Palette
+      color: tokens.color.white,
-      acc[`text_${k}`] = {
+    },
-        color: darkPalette[k],
+    text_contrast_700: {
-      }
+      color: tokens.color.gray_300,
-      return acc
+    },
-    }, {} as Record<`text_${keyof Palette}`, {color: string}>),
+    text_contrast_500: {
-    ...Object.keys(darkPalette).reduce((acc, key) => {
+      color: tokens.color.gray_500,
-      const k = key as keyof Palette
+    },
-      acc[`bg_${k}`] = {
+    text_inverted: {
-        backgroundColor: darkPalette[k],
+      color: tokens.color.gray_950,
-      }
+    },
-      return acc
+    bg: {
-    }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
+      backgroundColor: tokens.color.gray_950,
+    },
+    bg_contrast_100: {
+      backgroundColor: tokens.color.gray_900,
+    },
+    bg_contrast_200: {
+      backgroundColor: tokens.color.gray_800,
+    },
+    bg_contrast_300: {
+      backgroundColor: tokens.color.gray_700,
+    },
+    border: {
+      borderColor: tokens.color.gray_800,
+    },
+    border_contrast_500: {
+      borderColor: tokens.color.gray_500,
+    },
   },
-} as const
+}

src/alf/tokens.ts

@@ -1,25 +1,57 @@
-const BLUE_HUE = 210
+const BLUE_HUE = 211
-const GRAYSCALE_SATURATION = 12
+const GRAYSCALE_SATURATION = 22
 
 export const color = {
   white: '#FFFFFF',
 
-  /**
+  gray_50: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
-   * Mathematical scale of grays, from lightest to darkest, all based on the
+  gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 90%)`,
-   * primary blue color
+  gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 80%)`,
-   */
+  gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 70%)`,
-  gray1: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
+  gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 60%)`,
-  gray2: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
+  gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 50%)`,
-  gray3: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
+  gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 40%)`,
-  gray4: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
+  gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
-  gray5: `hsl(${BLUE_HUE} ${GRAYSCALE_SATURATION}%, 20%)`,
+  gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 20%)`,
-  gray6: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
+  gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
-  black: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
+  gray_950: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
 
-  blue: `hsl(${BLUE_HUE}, 100%, 53%)`,
+  blue_50: `hsl(${BLUE_HUE}, 99%, 98%)`,
-  green: '#54D469',
+  blue_100: `hsl(${BLUE_HUE}, 99%, 93%)`,
-  red: '#FB4566',
+  blue_200: `hsl(${BLUE_HUE}, 99%, 83%)`,
-} as const
+  blue_300: `hsl(${BLUE_HUE}, 99%, 73%)`,
+  blue_400: `hsl(${BLUE_HUE}, 99%, 63%)`,
+  blue_500: `hsl(${BLUE_HUE}, 99%, 53%)`,
+  blue_600: `hsl(${BLUE_HUE}, 99%, 43%)`,
+  blue_700: `hsl(${BLUE_HUE}, 99%, 33%)`,
+  blue_800: `hsl(${BLUE_HUE}, 99%, 23%)`,
+  blue_900: `hsl(${BLUE_HUE}, 99%, 13%)`,
+  blue_950: `hsl(${BLUE_HUE}, 99%, 8%)`,
+
+  green_50: `hsl(130, 60%, 95%)`,
+  green_100: `hsl(130, 60%, 90%)`,
+  green_200: `hsl(130, 60%, 80%)`,
+  green_300: `hsl(130, 60%, 70%)`,
+  green_400: `hsl(130, 60%, 60%)`,
+  green_500: `hsl(130, 60%, 50%)`,
+  green_600: `hsl(130, 60%, 40%)`,
+  green_700: `hsl(130, 60%, 30%)`,
+  green_800: `hsl(130, 60%, 20%)`,
+  green_900: `hsl(130, 60%, 10%)`,
+  green_950: `hsl(130, 60%, 5%)`,
+
+  red_50: `hsl(349, 96%, 95%)`,
+  red_100: `hsl(349, 96%, 90%)`,
+  red_200: `hsl(349, 96%, 80%)`,
+  red_300: `hsl(349, 96%, 70%)`,
+  red_400: `hsl(349, 96%, 60%)`,
+  red_500: `hsl(349, 96%, 50%)`,
+  red_600: `hsl(349, 96%, 40%)`,
+  red_700: `hsl(349, 96%, 30%)`,
+  red_800: `hsl(349, 96%, 20%)`,
+  red_900: `hsl(349, 96%, 10%)`,
+  red_950: `hsl(349, 96%, 5%)`,
+}
 
 export const space = {
   xxs: 2,
@@ -29,7 +61,7 @@ export const space = {
   lg: 18,
   xl: 24,
   xxl: 32,
-} as const
+}
 
 export const fontSize = {
   xxs: 10,
@@ -39,26 +71,27 @@ export const fontSize = {
   lg: 18,
   xl: 22,
   xxl: 26,
-} as const
+}
 
 // TODO test
 export const lineHeight = {
+  none: 1,
   normal: 1.5,
   relaxed: 1.625,
-} as const
+}
 
 export const borderRadius = {
   sm: 8,
   md: 12,
   xl: 36,
   full: 999,
-} as const
+}
 
 export const fontWeight = {
   normal: '400',
-  semi: '600',
+  semibold: '600',
   bold: '900',
-} as const
+}
 
 export type Color = keyof typeof color
 export type Space = keyof typeof space

src/view/screens/DebugNew.tsx

@@ -4,7 +4,7 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 
 import {useSetColorMode} from '#/state/shell'
-import {atoms, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
+import {atoms as a, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
 import {Button, ButtonText} from '#/view/com/Button'
 import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography'
 
@@ -12,7 +12,7 @@ function ThemeSelector() {
   const setColorMode = useSetColorMode()
 
   return (
-    <View style={[atoms.flex.row, atoms.flex.gap.m]}>
+    <View style={[a.flex_row, a.gap_md]}>
       <Button
         type="secondary"
         size="small"
@@ -41,18 +41,14 @@ function BreakpointDebugger() {
 
   return (
     <View>
-      <H3 style={[atoms.padding.pb.m]}>Breakpoint Debugger</H3>
+      <H3 style={[a.pb_md]}>Breakpoint Debugger</H3>
-      <Text style={[atoms.padding.pb.m]}>
+      <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={[
+        style={[a.p_md, t.atoms.bg_contrast_100, {fontFamily: 'monospace'}]}>
-          atoms.padding.pa.m,
-          t.atoms.backgroundColor.l1,
-          {fontFamily: 'monospace'},
-        ]}>
         {JSON.stringify(breakpoints, null, 2)}
       </Text>
     </View>
@@ -63,35 +59,13 @@ function ThemedSection() {
   const t = useTheme()
 
   return (
-    <View style={[t.atoms.backgroundColor.l0, atoms.padding.pa.m]}>
+    <View style={[t.atoms.bg, a.p_md]}>
-      <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>
+      <H3 style={[a.pb_md, a.font_bold]}>
         Colors (this theme is always light)
       </H3>
-      <View style={[atoms.flex.row, atoms.flex.gap.m]}>
+      <View style={[a.flex_row, a.gap_md]}>
-        <View
+        <View style={[a.flex_1, t.atoms.bg, {height: 60}]} />
-          style={[atoms.flex.one, t.atoms.backgroundColor.l0, {height: 60}]}
+        <View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} />
-        />
-        <View
-          style={[atoms.flex.one, t.atoms.backgroundColor.l1, {height: 60}]}
-        />
-        <View
-          style={[atoms.flex.one, t.atoms.backgroundColor.l2, {height: 60}]}
-        />
-        <View
-          style={[atoms.flex.one, t.atoms.backgroundColor.l3, {height: 60}]}
-        />
-        <View
-          style={[atoms.flex.one, t.atoms.backgroundColor.l4, {height: 60}]}
-        />
-        <View
-          style={[atoms.flex.one, t.atoms.backgroundColor.l5, {height: 60}]}
-        />
-        <View
-          style={[atoms.flex.one, t.atoms.backgroundColor.l6, {height: 60}]}
-        />
-        <View
-          style={[atoms.flex.one, t.atoms.backgroundColor.l7, {height: 60}]}
-        />
       </View>
     </View>
   )
@@ -102,165 +76,34 @@ export function DebugScreen() {
 
   return (
     <ScrollView>
-      <CenteredView style={[t.atoms.backgroundColor.l0]}>
+      <CenteredView style={[t.atoms.bg]}>
-        <View
+        <View style={[a.p_xl, a.gap_xxl, {paddingBottom: 200}]}>
-          style={[
-            atoms.padding.pa.xl,
-            atoms.flex.gap.xxl,
-            {paddingBottom: 200},
-          ]}>
           <ThemeSelector />
 
           <BreakpointDebugger />
 
           <View>
-            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Colors</H3>
+            <H3 style={[a.pb_md, a.font_bold]}>Colors</H3>
-            <View style={[atoms.flex.row, atoms.flex.gap.m]}>
+            <View style={[a.flex_row, a.gap_md]}>
-              <View
+              <View style={[a.flex_1, t.atoms.bg, {height: 60}]} />
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l0,
-                  {height: 60},
-                ]}
-              />
-              <View
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l1,
-                  {height: 60},
-                ]}
-              />
-              <View
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l2,
-                  {height: 60},
-                ]}
-              />
-              <View
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l3,
-                  {height: 60},
-                ]}
-              />
-              <View
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l4,
-                  {height: 60},
-                ]}
-              />
-              <View
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l5,
-                  {height: 60},
-                ]}
-              />
-              <View
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l6,
-                  {height: 60},
-                ]}
-              />
-              <View
-                style={[
-                  atoms.flex.one,
-                  t.atoms.backgroundColor.l7,
-                  {height: 60},
-                ]}
-              />
             </View>
           </View>
 
           <View>
-            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Spacing</H3>
+            <H3 style={[a.pb_md, a.font_bold]}>Spacing</H3>
 
-            <View style={[atoms.flex.gap.m]}>
+            <View style={[a.gap_md]}>
-              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
+              <View style={[a.flex_row, a.text_center]}>
                 <Text style={{width: 80}}>xxs (2px)</Text>
-                <View
+                <View style={[a.flex_1, a.pt_xxs, t.atoms.bg_contrast_300]} />
-                  style={[
-                    atoms.flex.one,
-                    atoms.padding.pt.xxs,
-                    t.atoms.backgroundColor.l3,
-                  ]}
-                />
-              </View>
-              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
-                <Text style={{width: 80}}>xs (4px)</Text>
-                <View
-                  style={[
-                    atoms.flex.one,
-                    atoms.padding.pt.xs,
-                    t.atoms.backgroundColor.l3,
-                  ]}
-                />
-              </View>
-              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
-                <Text style={{width: 80}}>s (8px)</Text>
-                <View
-                  style={[
-                    atoms.flex.one,
-                    atoms.padding.pt.s,
-                    t.atoms.backgroundColor.l3,
-                  ]}
-                />
-              </View>
-              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
-                <Text style={{width: 80}}>m (12px)</Text>
-                <View
-                  style={[
-                    atoms.flex.one,
-                    atoms.padding.pt.m,
-                    t.atoms.backgroundColor.l3,
-                  ]}
-                />
-              </View>
-              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
-                <Text style={{width: 80}}>l (18px)</Text>
-                <View
-                  style={[
-                    atoms.flex.one,
-                    atoms.padding.pt.l,
-                    t.atoms.backgroundColor.l3,
-                  ]}
-                />
-              </View>
-              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
-                <Text style={{width: 80}}>xl (24px)</Text>
-                <View
-                  style={[
-                    atoms.flex.one,
-                    atoms.padding.pt.xl,
-                    t.atoms.backgroundColor.l3,
-                  ]}
-                />
-              </View>
-              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
-                <Text style={{width: 80}}>xxl (32px)</Text>
-                <View
-                  style={[
-                    atoms.flex.one,
-                    atoms.padding.pt.xxl,
-                    t.atoms.backgroundColor.l3,
-                  ]}
-                />
               </View>
             </View>
           </View>
 
           <View>
-            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Typography</H3>
+            <H3 style={[a.p_md, a.font_bold]}>Typography</H3>
 
-            <View
+            <View style={[a.gap_md, a.p_md, t.atoms.bg_contrast_100]}>
-              style={[
-                atoms.flex.gap.m,
-                atoms.padding.pa.m,
-                t.atoms.backgroundColor.l1,
-              ]}>
               <H1>Heading 1</H1>
               <H2>Heading 2</H2>
               <H3>Heading 3</H3>
@@ -268,35 +111,26 @@ export function DebugScreen() {
               <H5>Heading 5</H5>
               <H6>Heading 6</H6>
 
-              <Text style={[atoms.font.xxl]}>H1 Size Text</Text>
+              <Text style={[a.text_xxl]}>H1 Size Text</Text>
-              <Text style={[atoms.font.xl]}>H2 Size Text</Text>
+              <Text style={[a.text_xl]}>H2 Size Text</Text>
-              <Text style={[atoms.font.l]}>H3 Size Text</Text>
+              <Text style={[a.text_lg]}>H3 Size Text</Text>
-              <Text style={[atoms.font.m]}>H4 Size Text</Text>
+              <Text style={[a.text_md]}>H4 Size Text</Text>
-              <Text style={[atoms.font.s]}>H5 Size Text</Text>
+              <Text style={[a.text_sm]}>H5 Size Text</Text>
-              <Text style={[atoms.font.xs]}>H6 Size Text</Text>
+              <Text style={[a.text_xs]}>H6 Size Text</Text>
-              <Text style={[atoms.font.xxs]}>Very Small Size Text</Text>
+              <Text style={[a.text_xxs]}>Very Small Size Text</Text>
             </View>
           </View>
 
-          <View>
-            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Breakpoints</H3>
-          </View>
-
           <Alf theme="light">
             <ThemedSection />
           </Alf>
 
-          <View style={[atoms.flex.gap.m, atoms.flex.alignStart]}>
+          <View style={[a.gap_md, a.align_start]}>
-            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Buttons</H3>
+            <H3 style={[a.pb_md, a.font_bold]}>Buttons</H3>
 
             <Button>
               {({state}) => (
-                <View
+                <View style={[a.p_md, a.rounded_full, t.atoms.bg_contrast_300]}>
-                  style={[
-                    atoms.padding.pa.m,
-                    atoms.radius.round,
-                    t.atoms.backgroundColor.l2,
-                  ]}>
                   <Text>Unstyled button, state: {JSON.stringify(state)}</Text>
                 </View>
               )}