Some renaming

src/alf/atoms.ts

@@ -3,148 +3,77 @@ import * as tokens from '#/alf/tokens'
 
 const gap = Object.keys(tokens.space).reduce((acc, key) => {
   const k = key as tokens.Space
-  acc[k] = {
+  acc[`gap_${k}`] = {
     gap: tokens.space[k],
   }
   return acc
-}, {} as Record<tokens.Space, {gap: number}>)
+}, {} as Record<`gap_${tokens.Space}`, {gap: number}>)
 
 const fontSize = Object.keys(tokens.fontSize).reduce((acc, key) => {
   const k = key as tokens.FontSize
-  acc[k] = {
+  acc[`text_${k}`] = {
     fontSize: tokens.fontSize[k],
     lineHeight: tokens.fontSize[k],
   }
   return acc
-}, {} as Record<tokens.FontSize, {fontSize: number; lineHeight: number}>)
+}, {} as Record<`text_${tokens.FontSize}`, {fontSize: number; lineHeight: number}>)
 
 const lineHeight = Object.keys(tokens.lineHeight).reduce((acc, key) => {
   const k = key as tokens.LineHeight
-  acc[k] = {
+  acc[`leading_${k}`] = {
     lineHeight: tokens.lineHeight[k],
   }
   return acc
-}, {} as Record<tokens.LineHeight, {lineHeight: string}>)
+}, {} as Record<`leading_${tokens.LineHeight}`, {lineHeight: number}>)
 
 const fontWeight = Object.keys(tokens.fontWeight).reduce((acc, key) => {
   const k = key as tokens.FontWeight
-  acc[k] = {
+  acc[`font_${k}`] = {
     fontWeight: tokens.fontWeight[k],
   }
   return acc
-}, {} as Record<tokens.FontWeight, {fontWeight: TextStyle['fontWeight']}>)
+}, {} as Record<`font_${tokens.FontWeight}`, {fontWeight: TextStyle['fontWeight']}>)
 
 const radius = Object.keys(tokens.borderRadius).reduce((acc, key) => {
   const k = key as tokens.BorderRadius
-  acc[k] = {
+  acc[`rounded_${k}`] = {
     borderRadius: tokens.borderRadius[k],
   }
   return acc
-}, {} as Record<tokens.BorderRadius, {borderRadius: number}>)
+}, {} as Record<`rounded_${tokens.BorderRadius}`, {borderRadius: number}>)
 
 const padding = Object.keys(tokens.space).reduce(
   (acc, key) => {
     const k = key as tokens.Space
     const value = tokens.space[k]
     return {
-      pa: {
-        ...acc.pa,
-        [k]: {
-          paddingTop: value,
-          paddingBottom: value,
-          paddingLeft: value,
-          paddingRight: value,
-        },
+      ...acc,
+      [`p_${k}`]: {
+        padding: value,
       },
-      px: {
-        ...acc.px,
-        [k]: {
-          paddingLeft: value,
-          paddingRight: value,
-        },
+      [`px_${k}`]: {
+        paddingLeft: value,
+        paddingRight: value,
       },
-      py: {
-        ...acc.py,
-        [k]: {
-          paddingTop: value,
-          paddingBottom: value,
-        },
+      [`py_${k}`]: {
+        paddingTop: value,
+        paddingBottom: value,
       },
-      pt: {
-        ...acc.pt,
-        [k]: {
-          paddingTop: value,
-        },
+      [`pt_${k}`]: {
+        paddingTop: value,
       },
-      pb: {
-        ...acc.pb,
-        [k]: {
-          paddingBottom: value,
-        },
+      [`pb_${k}`]: {
+        paddingBottom: value,
       },
-      pl: {
-        ...acc.pl,
-        [k]: {
-          paddingLeft: value,
-        },
+      [`pl_${k}`]: {
+        paddingLeft: value,
       },
-      pr: {
-        ...acc.pr,
-        [k]: {
-          paddingRight: value,
-        },
+      [`pr_${k}`]: {
+        paddingRight: value,
       },
     }
   },
-  {} as {
-    pa: Record<
-      tokens.Space,
-      {
-        paddingTop: number
-        paddingBottom: number
-        paddingLeft: number
-        paddingRight: number
-      }
-    >
-    px: Record<
-      tokens.Space,
-      {
-        paddingLeft: number
-        paddingRight: number
-      }
-    >
-    py: Record<
-      tokens.Space,
-      {
-        paddingTop: number
-        paddingBottom: number
-      }
-    >
-    pt: Record<
-      tokens.Space,
-      {
-        paddingTop: number
-      }
-    >
-    pb: Record<
-      tokens.Space,
-      {
-        paddingBottom: number
-      }
-    >
-    pl: Record<
-      tokens.Space,
-      {
-        paddingLeft: number
-      }
-    >
-    pr: Record<
-      tokens.Space,
-      {
-        paddingRight: number
-      }
-    >
-  },
+  {} as Record<`${'pa' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr'}_${tokens.Space}`, number>
 )
 
 const margin = Object.keys(tokens.space).reduce(
@@ -152,167 +81,126 @@ const margin = Object.keys(tokens.space).reduce(
     const k = key as tokens.Space
     const value = tokens.space[k]
     return {
-      pa: {
-        ...acc.pa,
-        [k]: {
-          marginTop: value,
-          marginBottom: value,
-          marginLeft: value,
-          marginRight: value,
-        },
+      ...acc,
+      [`m_${k}`]: {
+        margin: value,
       },
-      px: {
-        ...acc.px,
-        [k]: {
-          marginLeft: value,
-          marginRight: value,
-        },
+      [`mx_${k}`]: {
+        margin: value,
+        marginRight: value,
       },
-      py: {
-        ...acc.py,
-        [k]: {
-          marginTop: value,
-          marginBottom: value,
-        },
+      [`my_${k}`]: {
+        marginTop: value,
+        marginBottom: value,
       },
-      pt: {
-        ...acc.pt,
-        [k]: {
-          marginTop: value,
-        },
+      [`mt_${k}`]: {
+        marginTop: value,
       },
-      pb: {
-        ...acc.pb,
-        [k]: {
-          marginBottom: value,
-        },
+      [`mb_${k}`]: {
+        marginBottom: value,
       },
-      pl: {
-        ...acc.pl,
-        [k]: {
-          marginLeft: value,
-        },
+      [`ml_${k}`]: {
+        margin: value,
       },
-      pr: {
-        ...acc.pr,
-        [k]: {
-          marginRight: value,
-        },
+      [`mr_${k}`]: {
+        marginRight: value,
       },
     }
   },
-  {} as {
-    pa: Record<
-      tokens.Space,
-      {
-        marginTop: number
-        marginBottom: number
-        marginLeft: number
-        marginRight: number
-      }
-    >
-    px: Record<
-      tokens.Space,
-      {
-        marginLeft: number
-        marginRight: number
-      }
-    >
-    py: Record<
-      tokens.Space,
-      {
-        marginTop: number
-        marginBottom: number
-      }
-    >
-    pt: Record<
-      tokens.Space,
-      {
-        marginTop: number
-      }
-    >
-    pb: Record<
-      tokens.Space,
-      {
-        marginBottom: number
-      }
-    >
-    pl: Record<
-      tokens.Space,
-      {
-        marginLeft: number
-      }
-    >
-    pr: Record<
-      tokens.Space,
-      {
-        marginRight: number
-      }
-    >
-  },
+  {} as Record<`${'pa' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr'}_${tokens.Space}`, number>
 )
 
 export const atoms = {
-  radius,
-  padding,
-  margin,
-  font: {
-    ...fontSize,
-    ...fontWeight,
-    ...lineHeight,
-    center: {
-      textAlign: 'center',
-    },
+  /*
+   * Positioning
+   */
+  absolute: {
+    position: 'absolute',
   },
-  flex: {
-    gap,
-    row: {
-      flexDirection: 'row',
-    },
-    wrap: {
-      flexWrap: 'wrap',
-    },
-    one: {
-      flex: 1,
-    },
-    two: {
-      flex: 2,
-    },
-    three: {
-      flex: 3,
-    },
-    alignCenter: {
-      alignItems: 'center',
-    },
-    alignStart: {
-      alignItems: 'flex-start',
-    },
-    alignEnd: {
-      alignItems: 'flex-end',
-    },
-    justifyCenter: {
-      justifyContent: 'center',
-    },
-    justifyBetween: {
-      justifyContent: 'space-between',
-    },
-    justifyEnd: {
-      justifyContent: 'flex-end',
-    },
+  relative: {
+    position: 'relative',
   },
-  pos: {
-    abs: {
-      position: 'absolute',
-    },
-    rel: {
-      position: 'relative',
-    },
-    cover: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    },
+  inset_0: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  z_10: {
+    zIndex: 10,
+  },
+  z_20: {
+    zIndex: 20,
+  },
+  z_30: {
+    zIndex: 30,
+  },
+  z_40: {
+    zIndex: 40,
+  },
+  z_50: {
+    zIndex: 50,
+  },
+
+  ...radius,
+
+  /*
+   * Spacing
+   */
+  ...padding,
+  ...margin,
+
+  /*
+   * Flex
+   */
+  ...gap,
+  flex_row: {
+    flexDirection: 'row',
+  },
+  flex_wrap: {
+    flexWrap: 'wrap',
+  },
+  flex_1: {
+    flex: 1,
+  },
+  justify_center: {
+    justifyContent: 'center',
+  },
+  justify_between: {
+    justifyContent: 'space-between',
+  },
+  justify_end: {
+    justifyContent: 'flex-end',
+  },
+  align_center: {
+    alignItems: 'center',
+  },
+  align_start: {
+    alignItems: 'flex-start',
+  },
+  align_end: {
+    alignItems: 'flex-end',
+  },
+
+  /*
+   * Text
+   */
+  text_center: {
+    textAlign: 'center',
+  },
+  text_right: {
+    textAlign: 'right',
+  },
+  ...fontSize,
+  ...lineHeight,
+  ...fontWeight,
+
+  /*
+   * Border
+   */
+  border: {
+    borderWidth: 1,
   },
 } as const
+
+const s = atoms.gap_md

src/alf/themes.ts

@@ -48,39 +48,39 @@ export const darkPalette: Palette = {
 export const light = {
   palette: lightPalette,
   atoms: {
-    color: Object.keys(lightPalette).reduce((acc, key) => {
+    ...Object.keys(lightPalette).reduce((acc, key) => {
       const k = key as keyof Palette
-      acc[k] = {
+      acc[`text_${k}`] = {
         color: lightPalette[k],
       }
       return acc
-    }, {} as Record<keyof Palette, {color: string}>),
-    backgroundColor: Object.keys(lightPalette).reduce((acc, key) => {
+    }, {} as Record<`text_${keyof Palette}`, {color: string}>),
+    ...Object.keys(lightPalette).reduce((acc, key) => {
       const k = key as keyof Palette
-      acc[k] = {
+      acc[`bg_${k}`] = {
         backgroundColor: lightPalette[k],
       }
       return acc
-    }, {} as Record<keyof Palette, {backgroundColor: string}>),
+    }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
   },
 } as const
 
 export const dark: Theme = {
   palette: darkPalette,
   atoms: {
-    color: Object.keys(darkPalette).reduce((acc, key) => {
+    ...Object.keys(darkPalette).reduce((acc, key) => {
       const k = key as keyof Palette
-      acc[k] = {
+      acc[`text_${k}`] = {
         color: darkPalette[k],
       }
       return acc
-    }, {} as Record<keyof Palette, {color: string}>),
-    backgroundColor: Object.keys(darkPalette).reduce((acc, key) => {
+    }, {} as Record<`text_${keyof Palette}`, {color: string}>),
+    ...Object.keys(darkPalette).reduce((acc, key) => {
       const k = key as keyof Palette
-      acc[k] = {
+      acc[`bg_${k}`] = {
         backgroundColor: darkPalette[k],
       }
       return acc
-    }, {} as Record<keyof Palette, {backgroundColor: string}>),
+    }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
   },
 } as const

src/alf/tokens.ts

@@ -24,9 +24,9 @@ export const color = {
 export const space = {
   xxs: 2,
   xs: 4,
-  s: 8,
-  m: 12,
-  l: 18,
+  sm: 8,
+  md: 12,
+  lg: 18,
   xl: 24,
   xxl: 32,
 } as const
@@ -34,25 +34,24 @@ export const space = {
 export const fontSize = {
   xxs: 10,
   xs: 12,
-  s: 14,
-  m: 16,
-  l: 18,
+  sm: 14,
+  md: 16,
+  lg: 18,
   xl: 22,
   xxl: 26,
 } as const
 
 // TODO test
 export const lineHeight = {
-  tight: '1.0', // default
-  normal: '1.5',
-  relaxed: '1.625',
+  normal: 1.5,
+  relaxed: 1.625,
 } as const
 
 export const borderRadius = {
-  s: 8,
-  m: 12,
+  sm: 8,
+  md: 12,
   xl: 36,
-  round: 999,
+  full: 999,
 } as const
 
 export const fontWeight = {