📝 feat: small quality of life for tags

frontend/mobile/app/(app)/(tabs)/discover.tsx

@@ -1,11 +1,9 @@
-import { Box, Text } from '@/app/(design-system)';
+import { Box, Tag, Text } from '@/app/(design-system)';
 
 const DiscoverPage = () => {
     return (
         <Box flex={1} alignItems="center" justifyContent="center" padding="m">
-            <Text color="aqua" variant="text-1">
-                DiscoverAA
-            </Text>
+            <Tag variant="darkRed">Discover</Tag>
         </Box>
     );
 };

frontend/mobile/app/(design-system)/Tag/Tag.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {
+    BoxProps,
+    VariantProps,
+    createBox,
+    createRestyleComponent,
+    createVariant
+} from '@shopify/restyle';
+
+import { Text } from '../Text/Text';
+import { Theme } from '../theme';
+
+const Box = createBox<Theme>();
+
+const tagVariant = createVariant<Theme, 'tagVariants'>({
+    themeKey: 'tagVariants'
+});
+
+type TagProps = VariantProps<Theme, 'tagVariants'> &
+    BoxProps<Theme> & {
+        children?: React.ReactNode;
+    };
+
+const TagBase = createRestyleComponent<TagProps, Theme>([tagVariant], Box);
+
+export const Tag: React.FC<TagProps> = ({ variant, children, ...rest }) => {
+    return (
+        <TagBase variant={variant} {...rest}>
+            {typeof children === 'string' ? (
+                <Text variant="body-1">{children}</Text>
+            ) : (
+                children
+            )}
+        </TagBase>
+    );
+};

frontend/mobile/app/(design-system)/Tag/TagVariants.ts

@@ -0,0 +1,42 @@
+const TagColorVariants = {
+    darkBlue: {
+        backgroundColor: 'darkBlue'
+    },
+    darkRed: {
+        backgroundColor: 'darkRed'
+    },
+    green: {
+        backgroundColor: 'green'
+    },
+    blue: {
+        backgroundColor: 'blue'
+    },
+    aqua: {
+        backgroundColor: 'aqua'
+    },
+    purple: {
+        backgroundColor: 'purple'
+    },
+    red: {
+        backgroundColor: 'red'
+    },
+    orange: {
+        backgroundColor: 'orange'
+    },
+    yellow: {
+        backgroundColor: 'yellow'
+    }
+} as const;
+
+export const TagVariants = {
+    defaults: {
+        flex: '1',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 'l',
+        paddingVertical: 'xs',
+        backgroundColor: 'aqua',
+        borderRadius: 105
+    },
+    ...TagColorVariants
+};

frontend/mobile/app/(design-system)/Text.tsx → frontend/mobile/app/(design-system)/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { createText } from '@shopify/restyle';
 
-import { Theme } from './theme';
+import { Theme } from '../theme';
 
 export const Text = createText<Theme>();

frontend/mobile/app/(design-system)/Text/TextVariants.ts

@@ -0,0 +1,43 @@
+const Texts = {
+    'header-1': {
+        fontFamily: 'DMSans-Bold',
+        fontSize: 32,
+        fontStyle: 'normal',
+        fontWeight: '700',
+        lineHeight: 'normal'
+    },
+    'subheader-1': {
+        fontFamily: 'DMSans-Medium',
+        fontSize: 24,
+        fontStyle: 'normal',
+        fontWeight: '500',
+        lineHeight: 'normal',
+        color: '#000'
+    },
+    'body-1': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 16,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    },
+    'caption-1': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 12,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    },
+    'caption-2': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 10,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    }
+} as const;
+
+export const TextVariants = {
+    defaults: Texts['body-1'],
+    ...Texts
+};

frontend/mobile/app/(design-system)/index.ts

@@ -1,5 +1,6 @@
-export * from './Text';
+export * from './Text/Text';
 export * from './Box';
 export * from './theme';
 export * from './Colors';
 export * from './Spacing';
+export * from './Tag/Tag';

frontend/mobile/app/(design-system)/theme.ts

@@ -2,12 +2,14 @@ import { createTheme } from '@shopify/restyle';
 
 import { Colors } from './Colors';
 import { Spacing } from './Spacing';
-import { TextVariants } from './TextVariants';
+import { TagVariants } from './Tag/TagVariants';
+import { TextVariants } from './Text/TextVariants';
 
 export const theme = createTheme({
     colors: Colors,
     spacing: Spacing,
-    textVariants: TextVariants
+    textVariants: TextVariants,
+    tagVariants: TagVariants
 });
 
 export type Theme = typeof theme;