acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Some renaming

Browse Source
This commit is contained in:
Eric Bailey
2023-12-24 13:16:18 -06:00
parent fe482177d4
commit 4f4a3efa18
3 changed files with 158 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/atoms.ts
+135 -247
View File
@@ -3,148 +3,77 @@ import * as tokens from '#/alf/tokens'
const gap = Object.keys(tokens.space).reduce((acc, key) => { const gap = Object.keys(tokens.space).reduce((acc, key) => {
const k = key as tokens.Space const k = key as tokens.Space
acc[k] = { acc[`gap_${k}`] = {
gap: tokens.space[k], gap: tokens.space[k],
} }
return acc 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 fontSize = Object.keys(tokens.fontSize).reduce((acc, key) => {
const k = key as tokens.FontSize const k = key as tokens.FontSize
acc[k] = { acc[`text_${k}`] = {
fontSize: tokens.fontSize[k], fontSize: tokens.fontSize[k],
lineHeight: tokens.fontSize[k], lineHeight: tokens.fontSize[k],
} }
return acc 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 lineHeight = Object.keys(tokens.lineHeight).reduce((acc, key) => {
const k = key as tokens.LineHeight const k = key as tokens.LineHeight
acc[k] = { acc[`leading_${k}`] = {
lineHeight: tokens.lineHeight[k], lineHeight: tokens.lineHeight[k],
} }
return acc 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 fontWeight = Object.keys(tokens.fontWeight).reduce((acc, key) => {
const k = key as tokens.FontWeight const k = key as tokens.FontWeight
acc[k] = { acc[`font_${k}`] = {
fontWeight: tokens.fontWeight[k], fontWeight: tokens.fontWeight[k],
} }
return acc 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 radius = Object.keys(tokens.borderRadius).reduce((acc, key) => {
const k = key as tokens.BorderRadius const k = key as tokens.BorderRadius
acc[k] = { acc[`rounded_${k}`] = {
borderRadius: tokens.borderRadius[k], borderRadius: tokens.borderRadius[k],
} }
return acc return acc
}, {} as Record<tokens.BorderRadius, {borderRadius: number}>) }, {} as Record<`rounded_${tokens.BorderRadius}`, {borderRadius: number}>)
const padding = Object.keys(tokens.space).reduce( const padding = Object.keys(tokens.space).reduce(
(acc, key) => { (acc, key) => {
const k = key as tokens.Space const k = key as tokens.Space
const value = tokens.space[k] const value = tokens.space[k]
return { return {
pa: { ...acc,
...acc.pa, [`p_${k}`]: {
[k]: { padding: value,
paddingTop: value,
paddingBottom: value,
paddingLeft: value,
paddingRight: value,
},
}, },
px: { [`px_${k}`]: {
...acc.px, paddingLeft: value,
[k]: { paddingRight: value,
paddingLeft: value,
paddingRight: value,
},
}, },
py: { [`py_${k}`]: {
...acc.py, paddingTop: value,
[k]: { paddingBottom: value,
paddingTop: value,
paddingBottom: value,
},
}, },
pt: { [`pt_${k}`]: {
...acc.pt, paddingTop: value,
[k]: {
paddingTop: value,
},
}, },
pb: { [`pb_${k}`]: {
...acc.pb, paddingBottom: value,
[k]: {
paddingBottom: value,
},
}, },
pl: { [`pl_${k}`]: {
...acc.pl, paddingLeft: value,
[k]: {
paddingLeft: value,
},
}, },
pr: { [`pr_${k}`]: {
...acc.pr, paddingRight: value,
[k]: {
paddingRight: value,
},
}, },
} }
}, },
{} as { {} as Record<`${'pa' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr'}_${tokens.Space}`, number>
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
}
>
},
) )
const margin = Object.keys(tokens.space).reduce( 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 k = key as tokens.Space
const value = tokens.space[k] const value = tokens.space[k]
return { return {
pa: { ...acc,
...acc.pa, [`m_${k}`]: {
[k]: { margin: value,
marginTop: value,
marginBottom: value,
marginLeft: value,
marginRight: value,
},
}, },
px: { [`mx_${k}`]: {
...acc.px, margin: value,
[k]: { marginRight: value,
marginLeft: value,
marginRight: value,
},
}, },
py: { [`my_${k}`]: {
...acc.py, marginTop: value,
[k]: { marginBottom: value,
marginTop: value,
marginBottom: value,
},
}, },
pt: { [`mt_${k}`]: {
...acc.pt, marginTop: value,
[k]: {
marginTop: value,
},
}, },
pb: { [`mb_${k}`]: {
...acc.pb, marginBottom: value,
[k]: {
marginBottom: value,
},
}, },
pl: { [`ml_${k}`]: {
...acc.pl, margin: value,
[k]: {
marginLeft: value,
},
}, },
pr: { [`mr_${k}`]: {
...acc.pr, marginRight: value,
[k]: {
marginRight: value,
},
}, },
} }
}, },
{} as { {} as Record<`${'pa' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr'}_${tokens.Space}`, number>
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
}
>
},
) )
export const atoms = { export const atoms = {
radius, /*
padding, * Positioning
margin, */
font: { absolute: {
...fontSize, position: 'absolute',
...fontWeight,
...lineHeight,
center: {
textAlign: 'center',
},
}, },
flex: { relative: {
gap, position: 'relative',
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',
},
}, },
pos: { inset_0: {
abs: { top: 0,
position: 'absolute', left: 0,
}, right: 0,
rel: { bottom: 0,
position: 'relative', },
}, z_10: {
cover: { zIndex: 10,
position: 'absolute', },
top: 0, z_20: {
left: 0, zIndex: 20,
right: 0, },
bottom: 0, 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 } as const
const s = atoms.gap_md
src/alf/themes.ts
+12 -12
View File
@@ -48,39 +48,39 @@ export const darkPalette: Palette = {
export const light = { export const light = {
palette: lightPalette, palette: lightPalette,
atoms: { atoms: {
color: Object.keys(lightPalette).reduce((acc, key) => { ...Object.keys(lightPalette).reduce((acc, key) => {
const k = key as keyof Palette const k = key as keyof Palette
acc[k] = { acc[`text_${k}`] = {
color: lightPalette[k], color: lightPalette[k],
} }
return acc return acc
}, {} as Record<keyof Palette, {color: string}>), }, {} as Record<`text_${keyof Palette}`, {color: string}>),
backgroundColor: Object.keys(lightPalette).reduce((acc, key) => { ...Object.keys(lightPalette).reduce((acc, key) => {
const k = key as keyof Palette const k = key as keyof Palette
acc[k] = { acc[`bg_${k}`] = {
backgroundColor: lightPalette[k], backgroundColor: lightPalette[k],
} }
return acc return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>), }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
}, },
} as const } as const
export const dark: Theme = { export const dark: Theme = {
palette: darkPalette, palette: darkPalette,
atoms: { atoms: {
color: Object.keys(darkPalette).reduce((acc, key) => { ...Object.keys(darkPalette).reduce((acc, key) => {
const k = key as keyof Palette const k = key as keyof Palette
acc[k] = { acc[`text_${k}`] = {
color: darkPalette[k], color: darkPalette[k],
} }
return acc return acc
}, {} as Record<keyof Palette, {color: string}>), }, {} as Record<`text_${keyof Palette}`, {color: string}>),
backgroundColor: Object.keys(darkPalette).reduce((acc, key) => { ...Object.keys(darkPalette).reduce((acc, key) => {
const k = key as keyof Palette const k = key as keyof Palette
acc[k] = { acc[`bg_${k}`] = {
backgroundColor: darkPalette[k], backgroundColor: darkPalette[k],
} }
return acc return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>), }, {} as Record<`bg_${keyof Palette}`, {backgroundColor: string}>),
}, },
} as const } as const
src/alf/tokens.ts
+11 -12
View File
@@ -24,9 +24,9 @@ export const color = {
export const space = { export const space = {
xxs: 2, xxs: 2,
xs: 4, xs: 4,
s: 8, sm: 8,
m: 12, md: 12,
l: 18, lg: 18,
xl: 24, xl: 24,
xxl: 32, xxl: 32,
} as const } as const
@@ -34,25 +34,24 @@ export const space = {
export const fontSize = { export const fontSize = {
xxs: 10, xxs: 10,
xs: 12, xs: 12,
s: 14, sm: 14,
m: 16, md: 16,
l: 18, lg: 18,
xl: 22, xl: 22,
xxl: 26, xxl: 26,
} as const } as const
// TODO test // TODO test
export const lineHeight = { export const lineHeight = {
tight: '1.0', // default normal: 1.5,
normal: '1.5', relaxed: 1.625,
relaxed: '1.625',
} as const } as const
export const borderRadius = { export const borderRadius = {
s: 8, sm: 8,
m: 12, md: 12,
xl: 36, xl: 36,
round: 999, full: 999,
} as const } as const
export const fontWeight = { export const fontWeight = {