More complete pass at Tailwind naming

bluesky-social · Jan 1, 2024 · c58a4d0 · c58a4d0
1 parent 4f4a3ef
commit c58a4d0
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 285 deletions.
diff --git a/src/alf/atoms.ts b/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
diff --git a/src/alf/themes.ts b/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,
-  positive: tokens.color.green,
-  negative: tokens.color.red,
-  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,
+  primary: tokens.color.blue_500,
+  positive: tokens.color.green_500,
+  negative: tokens.color.red_500,
 } as const
 
 export const darkPalette: Palette = {
-  primary: tokens.color.blue,
-  positive: tokens.color.green,
-  negative: tokens.color.red,
-  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,
+  primary: tokens.color.blue_500,
+  positive: tokens.color.green_400,
+  negative: tokens.color.red_400,
 } as const
 
 export const light = {
   palette: lightPalette,
   atoms: {
-    ...Object.keys(lightPalette).reduce((acc, key) => {
-      const k = key as keyof Palette
-      acc[`text_${k}`] = {
-        color: lightPalette[k],
-      }
-      return acc
-    }, {} as Record<`text_${keyof Palette}`, {color: string}>),
-    ...Object.keys(lightPalette).reduce((acc, key) => {
-      const k = key as keyof Palette
-      acc[`bg_${k}`] = {
-        backgroundColor: lightPalette[k],
-      }
-      return acc
-    }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
+    text: {
+      color: tokens.color.gray_950,
+    },
+    text_contrast_700: {
+      color: tokens.color.gray_600,
+    },
+    text_contrast_500: {
+      color: tokens.color.gray_400,
+    },
+    text_inverted: {
+      color: tokens.color.white,
+    },
+    bg: {
+      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) => {
-      const k = key as keyof Palette
-      acc[`text_${k}`] = {
-        color: darkPalette[k],
-      }
-      return acc
-    }, {} as Record<`text_${keyof Palette}`, {color: string}>),
-    ...Object.keys(darkPalette).reduce((acc, key) => {
-      const k = key as keyof Palette
-      acc[`bg_${k}`] = {
-        backgroundColor: darkPalette[k],
-      }
-      return acc
-    }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
+    text: {
+      color: tokens.color.white,
+    },
+    text_contrast_700: {
+      color: tokens.color.gray_300,
+    },
+    text_contrast_500: {
+      color: tokens.color.gray_500,
+    },
+    text_inverted: {
+      color: tokens.color.gray_950,
+    },
+    bg: {
+      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
+}
diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
@@ -1,25 +1,57 @@
-const BLUE_HUE = 210
-const GRAYSCALE_SATURATION = 12
+const BLUE_HUE = 211
+const GRAYSCALE_SATURATION = 22
 
 export const color = {
   white: '#FFFFFF',
 
-  /**
-   * Mathematical scale of grays, from lightest to darkest, all based on the
-   * primary blue color
-   */
-  gray1: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
-  gray2: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
-  gray3: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
-  gray4: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
-  gray5: `hsl(${BLUE_HUE} ${GRAYSCALE_SATURATION}%, 20%)`,
-  gray6: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
-  black: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
+  gray_50: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
+  gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 90%)`,
+  gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 80%)`,
+  gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 70%)`,
+  gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 60%)`,
+  gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 50%)`,
+  gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 40%)`,
+  gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
+  gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 20%)`,
+  gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
+  gray_950: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
 
-  blue: `hsl(${BLUE_HUE}, 100%, 53%)`,
-  green: '#54D469',
-  red: '#FB4566',
-} as const
+  blue_50: `hsl(${BLUE_HUE}, 99%, 98%)`,
+  blue_100: `hsl(${BLUE_HUE}, 99%, 93%)`,
+  blue_200: `hsl(${BLUE_HUE}, 99%, 83%)`,
+  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