diff options
Diffstat (limited to 'src/alf/atoms.ts')
| -rw-r--r-- | src/alf/atoms.ts | 151 |
1 files changed, 148 insertions, 3 deletions
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index bbf7e3243..45ab72ca6 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,11 +1,14 @@ +import {Platform} from 'react-native' + import * as tokens from '#/alf/tokens' +import {native, web} from '#/alf/util/platform' export const atoms = { /* * Positioning */ fixed: { - position: 'fixed', + position: Platform.select({web: 'fixed', native: 'absolute'}) as 'absolute', }, absolute: { position: 'absolute', @@ -48,6 +51,9 @@ export const atoms = { h_full: { height: '100%', }, + h_full_vh: web({ + height: '100vh', + }), /* * Border radius @@ -110,9 +116,18 @@ export const atoms = { flex_row: { flexDirection: 'row', }, + flex_col_reverse: { + flexDirection: 'column-reverse', + }, + flex_row_reverse: { + flexDirection: 'row-reverse', + }, flex_wrap: { flexWrap: 'wrap', }, + flex_0: { + flex: web('0 0 auto') || (native(0) as number), + }, flex_1: { flex: 1, }, @@ -122,6 +137,9 @@ export const atoms = { flex_shrink: { flexShrink: 1, }, + justify_start: { + justifyContent: 'flex-start', + }, justify_center: { justifyContent: 'center', }, @@ -140,10 +158,37 @@ export const atoms = { align_end: { alignItems: 'flex-end', }, + align_baseline: { + alignItems: 'baseline', + }, + align_stretch: { + alignItems: 'stretch', + }, + self_auto: { + alignSelf: 'auto', + }, + self_start: { + alignSelf: 'flex-start', + }, + self_end: { + alignSelf: 'flex-end', + }, + self_center: { + alignSelf: 'center', + }, + self_stretch: { + alignSelf: 'stretch', + }, + self_baseline: { + alignSelf: 'baseline', + }, /* * Text */ + text_left: { + textAlign: 'left', + }, text_center: { textAlign: 'center', }, @@ -152,53 +197,78 @@ export const atoms = { }, text_2xs: { fontSize: tokens.fontSize._2xs, + letterSpacing: 0.25, }, text_xs: { fontSize: tokens.fontSize.xs, + letterSpacing: 0.25, }, text_sm: { fontSize: tokens.fontSize.sm, + letterSpacing: 0.25, }, text_md: { fontSize: tokens.fontSize.md, + letterSpacing: 0.25, }, text_lg: { fontSize: tokens.fontSize.lg, + letterSpacing: 0.25, }, text_xl: { fontSize: tokens.fontSize.xl, + letterSpacing: 0.25, }, text_2xl: { fontSize: tokens.fontSize._2xl, + letterSpacing: 0.25, }, text_3xl: { fontSize: tokens.fontSize._3xl, + letterSpacing: 0.25, }, text_4xl: { fontSize: tokens.fontSize._4xl, + letterSpacing: 0.25, }, text_5xl: { fontSize: tokens.fontSize._5xl, + letterSpacing: 0.25, }, leading_tight: { lineHeight: 1.15, }, leading_snug: { - lineHeight: 1.25, + lineHeight: 1.3, }, leading_normal: { lineHeight: 1.5, }, + tracking_normal: { + letterSpacing: 0, + }, + tracking_wide: { + letterSpacing: 0.25, + }, font_normal: { fontWeight: tokens.fontWeight.normal, }, - font_bold: { + font_semibold: { fontWeight: tokens.fontWeight.semibold, }, + font_bold: { + fontWeight: tokens.fontWeight.bold, + }, + italic: { + fontStyle: 'italic', + }, /* * Border */ + border_0: { + borderWidth: 0, + }, border: { borderWidth: 1, }, @@ -208,6 +278,12 @@ export const atoms = { border_b: { borderBottomWidth: 1, }, + border_l: { + borderLeftWidth: 1, + }, + border_r: { + borderRightWidth: 1, + }, /* * Shadow @@ -231,6 +307,9 @@ export const atoms = { /* * Padding */ + p_0: { + padding: 0, + }, p_2xs: { padding: tokens.space._2xs, }, @@ -261,6 +340,10 @@ export const atoms = { p_5xl: { padding: tokens.space._5xl, }, + px_0: { + paddingLeft: 0, + paddingRight: 0, + }, px_2xs: { paddingLeft: tokens.space._2xs, paddingRight: tokens.space._2xs, @@ -301,6 +384,10 @@ export const atoms = { paddingLeft: tokens.space._5xl, paddingRight: tokens.space._5xl, }, + py_0: { + paddingTop: 0, + paddingBottom: 0, + }, py_2xs: { paddingTop: tokens.space._2xs, paddingBottom: tokens.space._2xs, @@ -341,6 +428,9 @@ export const atoms = { paddingTop: tokens.space._5xl, paddingBottom: tokens.space._5xl, }, + pt_0: { + paddingTop: 0, + }, pt_2xs: { paddingTop: tokens.space._2xs, }, @@ -371,6 +461,9 @@ export const atoms = { pt_5xl: { paddingTop: tokens.space._5xl, }, + pb_0: { + paddingBottom: 0, + }, pb_2xs: { paddingBottom: tokens.space._2xs, }, @@ -401,6 +494,9 @@ export const atoms = { pb_5xl: { paddingBottom: tokens.space._5xl, }, + pl_0: { + paddingLeft: 0, + }, pl_2xs: { paddingLeft: tokens.space._2xs, }, @@ -431,6 +527,9 @@ export const atoms = { pl_5xl: { paddingLeft: tokens.space._5xl, }, + pr_0: { + paddingRight: 0, + }, pr_2xs: { paddingRight: tokens.space._2xs, }, @@ -465,6 +564,9 @@ export const atoms = { /* * Margin */ + m_0: { + margin: 0, + }, m_2xs: { margin: tokens.space._2xs, }, @@ -495,6 +597,13 @@ export const atoms = { m_5xl: { margin: tokens.space._5xl, }, + m_auto: { + margin: 'auto', + }, + mx_0: { + marginLeft: 0, + marginRight: 0, + }, mx_2xs: { marginLeft: tokens.space._2xs, marginRight: tokens.space._2xs, @@ -535,6 +644,14 @@ export const atoms = { marginLeft: tokens.space._5xl, marginRight: tokens.space._5xl, }, + mx_auto: { + marginLeft: 'auto', + marginRight: 'auto', + }, + my_0: { + marginTop: 0, + marginBottom: 0, + }, my_2xs: { marginTop: tokens.space._2xs, marginBottom: tokens.space._2xs, @@ -575,6 +692,13 @@ export const atoms = { marginTop: tokens.space._5xl, marginBottom: tokens.space._5xl, }, + my_auto: { + marginTop: 'auto', + marginBottom: 'auto', + }, + mt_0: { + marginTop: 0, + }, mt_2xs: { marginTop: tokens.space._2xs, }, @@ -605,6 +729,12 @@ export const atoms = { mt_5xl: { marginTop: tokens.space._5xl, }, + mt_auto: { + marginTop: 'auto', + }, + mb_0: { + marginBottom: 0, + }, mb_2xs: { marginBottom: tokens.space._2xs, }, @@ -635,6 +765,12 @@ export const atoms = { mb_5xl: { marginBottom: tokens.space._5xl, }, + mb_auto: { + marginBottom: 'auto', + }, + ml_0: { + marginLeft: 0, + }, ml_2xs: { marginLeft: tokens.space._2xs, }, @@ -665,6 +801,12 @@ export const atoms = { ml_5xl: { marginLeft: tokens.space._5xl, }, + ml_auto: { + marginLeft: 'auto', + }, + mr_0: { + marginRight: 0, + }, mr_2xs: { marginRight: tokens.space._2xs, }, @@ -695,4 +837,7 @@ export const atoms = { mr_5xl: { marginRight: tokens.space._5xl, }, + mr_auto: { + marginRight: 'auto', + }, } as const |