58aaad704a
* Add bare minimum hashtags support (#2804) * Add bare minimum hashtags support As atproto/api already parses hashtags, this is as simple as hooking it up like link segments. This is "bare minimum" because: - Opening hashtag "#foo" is actually just a search for "foo" right now to work around #2491. - There is no integration in the composer. This hasn't stopped people from using hashtags already, and can be added later. - This change itself only had to hook things up - thank you for having already put the hashtag parsing in place. * Remove workaround for hash search not working now that it's fixed * Add RichTextTag and TagMenu * Sketch * Remove hackfix * Some cleanup * Sketch web * Mobile design * Mobile handling of tags search * Web only * Fix navigation woes * Use new callback * Hook it up * Integrate muted tags * Fix dropdown styles * Type error * Use close callback * Fix styles * Cleanup, install latest sdk * Quick muted words screen * Targets * Dir structure * Icons, list view * Move to dialog * Add removal confirmation * Swap copy * Improve checkboxees * Update matching, add tests * Moderate embeds * Create global dialogs concept again to prevent flashing * Add access from moderation screen * Highlight tags on native * Add web highlighting * Add close to web modal * Adjust close color * Rename toggles and adjust logic * Icon update * Load states * Improve regex * Improve regex * Improve regex * Revert link test * Hyphenated words * Improve matching * Enhance * Some tweaks * Muted words modal changes * Handle invalid handles, handle long tags * Remove main regex * Better test * Space/punct check drop to includes * Lowercase post text before comparison * Add better real world test case --------- Co-authored-by: Kisaragi Hiu <mail@kisaragi-hiu.com>
754 lines
13 KiB
TypeScript
754 lines
13 KiB
TypeScript
import {web, native} from '#/alf/util/platform'
|
|
import * as tokens from '#/alf/tokens'
|
|
|
|
export const atoms = {
|
|
/*
|
|
* Positioning
|
|
*/
|
|
fixed: {
|
|
position: 'fixed',
|
|
},
|
|
absolute: {
|
|
position: 'absolute',
|
|
},
|
|
relative: {
|
|
position: 'relative',
|
|
},
|
|
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,
|
|
},
|
|
|
|
overflow_hidden: {
|
|
overflow: 'hidden',
|
|
},
|
|
|
|
/*
|
|
* Width
|
|
*/
|
|
w_full: {
|
|
width: '100%',
|
|
},
|
|
h_full: {
|
|
height: '100%',
|
|
},
|
|
|
|
/*
|
|
* Border radius
|
|
*/
|
|
rounded_2xs: {
|
|
borderRadius: tokens.borderRadius._2xs,
|
|
},
|
|
rounded_xs: {
|
|
borderRadius: tokens.borderRadius.xs,
|
|
},
|
|
rounded_sm: {
|
|
borderRadius: tokens.borderRadius.sm,
|
|
},
|
|
rounded_md: {
|
|
borderRadius: tokens.borderRadius.md,
|
|
},
|
|
rounded_full: {
|
|
borderRadius: tokens.borderRadius.full,
|
|
},
|
|
|
|
/*
|
|
* Flex
|
|
*/
|
|
gap_2xs: {
|
|
gap: tokens.space._2xs,
|
|
},
|
|
gap_xs: {
|
|
gap: tokens.space.xs,
|
|
},
|
|
gap_sm: {
|
|
gap: tokens.space.sm,
|
|
},
|
|
gap_md: {
|
|
gap: tokens.space.md,
|
|
},
|
|
gap_lg: {
|
|
gap: tokens.space.lg,
|
|
},
|
|
gap_xl: {
|
|
gap: tokens.space.xl,
|
|
},
|
|
gap_2xl: {
|
|
gap: tokens.space._2xl,
|
|
},
|
|
gap_3xl: {
|
|
gap: tokens.space._3xl,
|
|
},
|
|
gap_4xl: {
|
|
gap: tokens.space._4xl,
|
|
},
|
|
gap_5xl: {
|
|
gap: tokens.space._5xl,
|
|
},
|
|
flex: {
|
|
display: 'flex',
|
|
},
|
|
flex_col: {
|
|
flexDirection: 'column',
|
|
},
|
|
flex_row: {
|
|
flexDirection: 'row',
|
|
},
|
|
flex_wrap: {
|
|
flexWrap: 'wrap',
|
|
},
|
|
flex_0: {
|
|
flex: web('0 0 auto') || (native(0) as number),
|
|
},
|
|
flex_1: {
|
|
flex: 1,
|
|
},
|
|
flex_grow: {
|
|
flexGrow: 1,
|
|
},
|
|
flex_shrink: {
|
|
flexShrink: 1,
|
|
},
|
|
justify_start: {
|
|
justifyContent: 'flex-start',
|
|
},
|
|
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',
|
|
},
|
|
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',
|
|
},
|
|
text_right: {
|
|
textAlign: 'right',
|
|
},
|
|
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.3,
|
|
},
|
|
leading_normal: {
|
|
lineHeight: 1.5,
|
|
},
|
|
tracking_normal: {
|
|
letterSpacing: 0,
|
|
},
|
|
tracking_wide: {
|
|
letterSpacing: 0.25,
|
|
},
|
|
font_normal: {
|
|
fontWeight: tokens.fontWeight.normal,
|
|
},
|
|
font_bold: {
|
|
fontWeight: tokens.fontWeight.semibold,
|
|
},
|
|
italic: {
|
|
fontStyle: 'italic',
|
|
},
|
|
|
|
/*
|
|
* Border
|
|
*/
|
|
border_0: {
|
|
borderWidth: 0,
|
|
},
|
|
border: {
|
|
borderWidth: 1,
|
|
},
|
|
border_t: {
|
|
borderTopWidth: 1,
|
|
},
|
|
border_b: {
|
|
borderBottomWidth: 1,
|
|
},
|
|
border_l: {
|
|
borderLeftWidth: 1,
|
|
},
|
|
border_r: {
|
|
borderRightWidth: 1,
|
|
},
|
|
|
|
/*
|
|
* Shadow
|
|
*/
|
|
shadow_sm: {
|
|
shadowRadius: 8,
|
|
shadowOpacity: 0.1,
|
|
elevation: 8,
|
|
},
|
|
shadow_md: {
|
|
shadowRadius: 16,
|
|
shadowOpacity: 0.1,
|
|
elevation: 16,
|
|
},
|
|
shadow_lg: {
|
|
shadowRadius: 32,
|
|
shadowOpacity: 0.1,
|
|
elevation: 24,
|
|
},
|
|
|
|
/*
|
|
* Padding
|
|
*/
|
|
p_2xs: {
|
|
padding: tokens.space._2xs,
|
|
},
|
|
p_xs: {
|
|
padding: tokens.space.xs,
|
|
},
|
|
p_sm: {
|
|
padding: tokens.space.sm,
|
|
},
|
|
p_md: {
|
|
padding: tokens.space.md,
|
|
},
|
|
p_lg: {
|
|
padding: tokens.space.lg,
|
|
},
|
|
p_xl: {
|
|
padding: tokens.space.xl,
|
|
},
|
|
p_2xl: {
|
|
padding: tokens.space._2xl,
|
|
},
|
|
p_3xl: {
|
|
padding: tokens.space._3xl,
|
|
},
|
|
p_4xl: {
|
|
padding: tokens.space._4xl,
|
|
},
|
|
p_5xl: {
|
|
padding: tokens.space._5xl,
|
|
},
|
|
px_2xs: {
|
|
paddingLeft: tokens.space._2xs,
|
|
paddingRight: tokens.space._2xs,
|
|
},
|
|
px_xs: {
|
|
paddingLeft: tokens.space.xs,
|
|
paddingRight: tokens.space.xs,
|
|
},
|
|
px_sm: {
|
|
paddingLeft: tokens.space.sm,
|
|
paddingRight: tokens.space.sm,
|
|
},
|
|
px_md: {
|
|
paddingLeft: tokens.space.md,
|
|
paddingRight: tokens.space.md,
|
|
},
|
|
px_lg: {
|
|
paddingLeft: tokens.space.lg,
|
|
paddingRight: tokens.space.lg,
|
|
},
|
|
px_xl: {
|
|
paddingLeft: tokens.space.xl,
|
|
paddingRight: tokens.space.xl,
|
|
},
|
|
px_2xl: {
|
|
paddingLeft: tokens.space._2xl,
|
|
paddingRight: tokens.space._2xl,
|
|
},
|
|
px_3xl: {
|
|
paddingLeft: tokens.space._3xl,
|
|
paddingRight: tokens.space._3xl,
|
|
},
|
|
px_4xl: {
|
|
paddingLeft: tokens.space._4xl,
|
|
paddingRight: tokens.space._4xl,
|
|
},
|
|
px_5xl: {
|
|
paddingLeft: tokens.space._5xl,
|
|
paddingRight: tokens.space._5xl,
|
|
},
|
|
py_2xs: {
|
|
paddingTop: tokens.space._2xs,
|
|
paddingBottom: tokens.space._2xs,
|
|
},
|
|
py_xs: {
|
|
paddingTop: tokens.space.xs,
|
|
paddingBottom: tokens.space.xs,
|
|
},
|
|
py_sm: {
|
|
paddingTop: tokens.space.sm,
|
|
paddingBottom: tokens.space.sm,
|
|
},
|
|
py_md: {
|
|
paddingTop: tokens.space.md,
|
|
paddingBottom: tokens.space.md,
|
|
},
|
|
py_lg: {
|
|
paddingTop: tokens.space.lg,
|
|
paddingBottom: tokens.space.lg,
|
|
},
|
|
py_xl: {
|
|
paddingTop: tokens.space.xl,
|
|
paddingBottom: tokens.space.xl,
|
|
},
|
|
py_2xl: {
|
|
paddingTop: tokens.space._2xl,
|
|
paddingBottom: tokens.space._2xl,
|
|
},
|
|
py_3xl: {
|
|
paddingTop: tokens.space._3xl,
|
|
paddingBottom: tokens.space._3xl,
|
|
},
|
|
py_4xl: {
|
|
paddingTop: tokens.space._4xl,
|
|
paddingBottom: tokens.space._4xl,
|
|
},
|
|
py_5xl: {
|
|
paddingTop: tokens.space._5xl,
|
|
paddingBottom: tokens.space._5xl,
|
|
},
|
|
pt_2xs: {
|
|
paddingTop: tokens.space._2xs,
|
|
},
|
|
pt_xs: {
|
|
paddingTop: tokens.space.xs,
|
|
},
|
|
pt_sm: {
|
|
paddingTop: tokens.space.sm,
|
|
},
|
|
pt_md: {
|
|
paddingTop: tokens.space.md,
|
|
},
|
|
pt_lg: {
|
|
paddingTop: tokens.space.lg,
|
|
},
|
|
pt_xl: {
|
|
paddingTop: tokens.space.xl,
|
|
},
|
|
pt_2xl: {
|
|
paddingTop: tokens.space._2xl,
|
|
},
|
|
pt_3xl: {
|
|
paddingTop: tokens.space._3xl,
|
|
},
|
|
pt_4xl: {
|
|
paddingTop: tokens.space._4xl,
|
|
},
|
|
pt_5xl: {
|
|
paddingTop: tokens.space._5xl,
|
|
},
|
|
pb_2xs: {
|
|
paddingBottom: tokens.space._2xs,
|
|
},
|
|
pb_xs: {
|
|
paddingBottom: tokens.space.xs,
|
|
},
|
|
pb_sm: {
|
|
paddingBottom: tokens.space.sm,
|
|
},
|
|
pb_md: {
|
|
paddingBottom: tokens.space.md,
|
|
},
|
|
pb_lg: {
|
|
paddingBottom: tokens.space.lg,
|
|
},
|
|
pb_xl: {
|
|
paddingBottom: tokens.space.xl,
|
|
},
|
|
pb_2xl: {
|
|
paddingBottom: tokens.space._2xl,
|
|
},
|
|
pb_3xl: {
|
|
paddingBottom: tokens.space._3xl,
|
|
},
|
|
pb_4xl: {
|
|
paddingBottom: tokens.space._4xl,
|
|
},
|
|
pb_5xl: {
|
|
paddingBottom: tokens.space._5xl,
|
|
},
|
|
pl_2xs: {
|
|
paddingLeft: tokens.space._2xs,
|
|
},
|
|
pl_xs: {
|
|
paddingLeft: tokens.space.xs,
|
|
},
|
|
pl_sm: {
|
|
paddingLeft: tokens.space.sm,
|
|
},
|
|
pl_md: {
|
|
paddingLeft: tokens.space.md,
|
|
},
|
|
pl_lg: {
|
|
paddingLeft: tokens.space.lg,
|
|
},
|
|
pl_xl: {
|
|
paddingLeft: tokens.space.xl,
|
|
},
|
|
pl_2xl: {
|
|
paddingLeft: tokens.space._2xl,
|
|
},
|
|
pl_3xl: {
|
|
paddingLeft: tokens.space._3xl,
|
|
},
|
|
pl_4xl: {
|
|
paddingLeft: tokens.space._4xl,
|
|
},
|
|
pl_5xl: {
|
|
paddingLeft: tokens.space._5xl,
|
|
},
|
|
pr_2xs: {
|
|
paddingRight: tokens.space._2xs,
|
|
},
|
|
pr_xs: {
|
|
paddingRight: tokens.space.xs,
|
|
},
|
|
pr_sm: {
|
|
paddingRight: tokens.space.sm,
|
|
},
|
|
pr_md: {
|
|
paddingRight: tokens.space.md,
|
|
},
|
|
pr_lg: {
|
|
paddingRight: tokens.space.lg,
|
|
},
|
|
pr_xl: {
|
|
paddingRight: tokens.space.xl,
|
|
},
|
|
pr_2xl: {
|
|
paddingRight: tokens.space._2xl,
|
|
},
|
|
pr_3xl: {
|
|
paddingRight: tokens.space._3xl,
|
|
},
|
|
pr_4xl: {
|
|
paddingRight: tokens.space._4xl,
|
|
},
|
|
pr_5xl: {
|
|
paddingRight: tokens.space._5xl,
|
|
},
|
|
|
|
/*
|
|
* Margin
|
|
*/
|
|
m_2xs: {
|
|
margin: tokens.space._2xs,
|
|
},
|
|
m_xs: {
|
|
margin: tokens.space.xs,
|
|
},
|
|
m_sm: {
|
|
margin: tokens.space.sm,
|
|
},
|
|
m_md: {
|
|
margin: tokens.space.md,
|
|
},
|
|
m_lg: {
|
|
margin: tokens.space.lg,
|
|
},
|
|
m_xl: {
|
|
margin: tokens.space.xl,
|
|
},
|
|
m_2xl: {
|
|
margin: tokens.space._2xl,
|
|
},
|
|
m_3xl: {
|
|
margin: tokens.space._3xl,
|
|
},
|
|
m_4xl: {
|
|
margin: tokens.space._4xl,
|
|
},
|
|
m_5xl: {
|
|
margin: tokens.space._5xl,
|
|
},
|
|
mx_2xs: {
|
|
marginLeft: tokens.space._2xs,
|
|
marginRight: tokens.space._2xs,
|
|
},
|
|
mx_xs: {
|
|
marginLeft: tokens.space.xs,
|
|
marginRight: tokens.space.xs,
|
|
},
|
|
mx_sm: {
|
|
marginLeft: tokens.space.sm,
|
|
marginRight: tokens.space.sm,
|
|
},
|
|
mx_md: {
|
|
marginLeft: tokens.space.md,
|
|
marginRight: tokens.space.md,
|
|
},
|
|
mx_lg: {
|
|
marginLeft: tokens.space.lg,
|
|
marginRight: tokens.space.lg,
|
|
},
|
|
mx_xl: {
|
|
marginLeft: tokens.space.xl,
|
|
marginRight: tokens.space.xl,
|
|
},
|
|
mx_2xl: {
|
|
marginLeft: tokens.space._2xl,
|
|
marginRight: tokens.space._2xl,
|
|
},
|
|
mx_3xl: {
|
|
marginLeft: tokens.space._3xl,
|
|
marginRight: tokens.space._3xl,
|
|
},
|
|
mx_4xl: {
|
|
marginLeft: tokens.space._4xl,
|
|
marginRight: tokens.space._4xl,
|
|
},
|
|
mx_5xl: {
|
|
marginLeft: tokens.space._5xl,
|
|
marginRight: tokens.space._5xl,
|
|
},
|
|
my_2xs: {
|
|
marginTop: tokens.space._2xs,
|
|
marginBottom: tokens.space._2xs,
|
|
},
|
|
my_xs: {
|
|
marginTop: tokens.space.xs,
|
|
marginBottom: tokens.space.xs,
|
|
},
|
|
my_sm: {
|
|
marginTop: tokens.space.sm,
|
|
marginBottom: tokens.space.sm,
|
|
},
|
|
my_md: {
|
|
marginTop: tokens.space.md,
|
|
marginBottom: tokens.space.md,
|
|
},
|
|
my_lg: {
|
|
marginTop: tokens.space.lg,
|
|
marginBottom: tokens.space.lg,
|
|
},
|
|
my_xl: {
|
|
marginTop: tokens.space.xl,
|
|
marginBottom: tokens.space.xl,
|
|
},
|
|
my_2xl: {
|
|
marginTop: tokens.space._2xl,
|
|
marginBottom: tokens.space._2xl,
|
|
},
|
|
my_3xl: {
|
|
marginTop: tokens.space._3xl,
|
|
marginBottom: tokens.space._3xl,
|
|
},
|
|
my_4xl: {
|
|
marginTop: tokens.space._4xl,
|
|
marginBottom: tokens.space._4xl,
|
|
},
|
|
my_5xl: {
|
|
marginTop: tokens.space._5xl,
|
|
marginBottom: tokens.space._5xl,
|
|
},
|
|
mt_2xs: {
|
|
marginTop: tokens.space._2xs,
|
|
},
|
|
mt_xs: {
|
|
marginTop: tokens.space.xs,
|
|
},
|
|
mt_sm: {
|
|
marginTop: tokens.space.sm,
|
|
},
|
|
mt_md: {
|
|
marginTop: tokens.space.md,
|
|
},
|
|
mt_lg: {
|
|
marginTop: tokens.space.lg,
|
|
},
|
|
mt_xl: {
|
|
marginTop: tokens.space.xl,
|
|
},
|
|
mt_2xl: {
|
|
marginTop: tokens.space._2xl,
|
|
},
|
|
mt_3xl: {
|
|
marginTop: tokens.space._3xl,
|
|
},
|
|
mt_4xl: {
|
|
marginTop: tokens.space._4xl,
|
|
},
|
|
mt_5xl: {
|
|
marginTop: tokens.space._5xl,
|
|
},
|
|
mb_2xs: {
|
|
marginBottom: tokens.space._2xs,
|
|
},
|
|
mb_xs: {
|
|
marginBottom: tokens.space.xs,
|
|
},
|
|
mb_sm: {
|
|
marginBottom: tokens.space.sm,
|
|
},
|
|
mb_md: {
|
|
marginBottom: tokens.space.md,
|
|
},
|
|
mb_lg: {
|
|
marginBottom: tokens.space.lg,
|
|
},
|
|
mb_xl: {
|
|
marginBottom: tokens.space.xl,
|
|
},
|
|
mb_2xl: {
|
|
marginBottom: tokens.space._2xl,
|
|
},
|
|
mb_3xl: {
|
|
marginBottom: tokens.space._3xl,
|
|
},
|
|
mb_4xl: {
|
|
marginBottom: tokens.space._4xl,
|
|
},
|
|
mb_5xl: {
|
|
marginBottom: tokens.space._5xl,
|
|
},
|
|
ml_2xs: {
|
|
marginLeft: tokens.space._2xs,
|
|
},
|
|
ml_xs: {
|
|
marginLeft: tokens.space.xs,
|
|
},
|
|
ml_sm: {
|
|
marginLeft: tokens.space.sm,
|
|
},
|
|
ml_md: {
|
|
marginLeft: tokens.space.md,
|
|
},
|
|
ml_lg: {
|
|
marginLeft: tokens.space.lg,
|
|
},
|
|
ml_xl: {
|
|
marginLeft: tokens.space.xl,
|
|
},
|
|
ml_2xl: {
|
|
marginLeft: tokens.space._2xl,
|
|
},
|
|
ml_3xl: {
|
|
marginLeft: tokens.space._3xl,
|
|
},
|
|
ml_4xl: {
|
|
marginLeft: tokens.space._4xl,
|
|
},
|
|
ml_5xl: {
|
|
marginLeft: tokens.space._5xl,
|
|
},
|
|
mr_2xs: {
|
|
marginRight: tokens.space._2xs,
|
|
},
|
|
mr_xs: {
|
|
marginRight: tokens.space.xs,
|
|
},
|
|
mr_sm: {
|
|
marginRight: tokens.space.sm,
|
|
},
|
|
mr_md: {
|
|
marginRight: tokens.space.md,
|
|
},
|
|
mr_lg: {
|
|
marginRight: tokens.space.lg,
|
|
},
|
|
mr_xl: {
|
|
marginRight: tokens.space.xl,
|
|
},
|
|
mr_2xl: {
|
|
marginRight: tokens.space._2xl,
|
|
},
|
|
mr_3xl: {
|
|
marginRight: tokens.space._3xl,
|
|
},
|
|
mr_4xl: {
|
|
marginRight: tokens.space._4xl,
|
|
},
|
|
mr_5xl: {
|
|
marginRight: tokens.space._5xl,
|
|
},
|
|
} as const
|