From 4f4a3efa180466a8f681bafbdc19565e39a001a4 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Sun, 24 Dec 2023 13:16:18 -0600 Subject: [PATCH] Some renaming --- src/alf/atoms.ts | 382 ++++++++++++++++------------------------------ src/alf/themes.ts | 24 +-- src/alf/tokens.ts | 23 ++- 3 files changed, 158 insertions(+), 271 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 651ba0fc9e..b1b5ccd96d 100644 --- a/src/alf/atoms.ts +++ b/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) +}, {} 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) +}, {} 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) +}, {} 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) +}, {} 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) +}, {} 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 diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 31d4ee2d0f..b02d4b2d56 100644 --- a/src/alf/themes.ts +++ b/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), - 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), + }, {} 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), - 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), + }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>), }, } as const diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index fff50a551a..194b10acf5 100644 --- a/src/alf/tokens.ts +++ b/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 = {