Eric Bailey
66b8774ecb
* Install on native as well * Add button and link components * Comments * Use new prop * Add some form elements * Add labels to input * Fix line height, add suffix * Date inputs * Autofill styles * Clean up InputDate types * Improve types for InputText, value handling * Enforce a11y props on buttons * Add Dialog, Portal * Dialog contents * Native dialog * Clean up * Fix animations * Improvements to web modal, exiting still broken * Clean up dialog types * Add Prompt, Dialog refinement, mobile refinement * Integrate new design tokens, reorg storybook * Button colors * Dim mode * Reorg * Some styles * Toggles * Improve a11y * Autosize dialog, handle max height, Dialog.ScrolLView not working * Try to use BottomSheet's own APIs * Scrollable dialogs * Add web shadow * Handle overscroll * Styles * Dialog text input * Shadows * Button focus states * Button pressed states * Gradient poc * Gradient colors and hovers * Add hrefAttrs to Link * Some more a11y * Toggle invalid states * Update dialog descriptions for demo * Icons * WIP Toggle cleanup * Refactor toggle to not rely on immediate children * Make Toggle controlled * Clean up Toggles storybook * ToggleButton styles * Improve a11y labels * ToggleButton hover darkmode * Some i18n * Refactor input * Allow extension of input * Remove old input * Improve icons, add CalendarDays * Refactor DateField, web done * Add label example * Clean up old InputDate, DateField android, text area example * Consistent imports * Button context, icons * Add todo * Add closeAllDialogs control * Alignment * Expand color palette * Hitslops, add shortcut to Storybook in dev * Fix multiline on ios * Mark dialog close button as unused
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Text, H1} from '#/components/Typography'
|
|
|
|
export function Spacing() {
|
|
const t = useTheme()
|
|
return (
|
|
<View style={[a.gap_md]}>
|
|
<H1>Spacing</H1>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>2xs (2px)</Text>
|
|
<View style={[a.flex_1, a.pt_2xs, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>xs (4px)</Text>
|
|
<View style={[a.flex_1, a.pt_xs, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>sm (8px)</Text>
|
|
<View style={[a.flex_1, a.pt_sm, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>md (12px)</Text>
|
|
<View style={[a.flex_1, a.pt_md, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>lg (16px)</Text>
|
|
<View style={[a.flex_1, a.pt_lg, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>xl (20px)</Text>
|
|
<View style={[a.flex_1, a.pt_xl, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>2xl (24px)</Text>
|
|
<View style={[a.flex_1, a.pt_2xl, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>3xl (28px)</Text>
|
|
<View style={[a.flex_1, a.pt_3xl, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>4xl (32px)</Text>
|
|
<View style={[a.flex_1, a.pt_4xl, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
|
|
<View style={[a.flex_row, a.align_center]}>
|
|
<Text style={{width: 80}}>5xl (40px)</Text>
|
|
<View style={[a.flex_1, a.pt_5xl, t.atoms.bg_contrast_300]} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|