Add color tokens, theming and typography

* feat: adds custom theme setup with several options

* feat: add typography and few examples with theme switch

* fix: sort import rule

* fix: remove unnecessary file

* fix: changes from review

* fix: changes as const as stated in tamagui's docs

apps/mobile/App.tsx

@@ -1,16 +1,68 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable import/namespace */
 import 'expo-dev-client'
 
-import React from 'react'
+import React, { useState } from 'react'
 
-import { Shape } from '@status-im/components'
+import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
-import { TamaguiProvider } from '@tamagui/core'
+import { Stack, TamaguiProvider } from '@tamagui/core'
+import { useFonts } from 'expo-font'
+import { SafeAreaView, TouchableOpacity } from 'react-native'
 
 import tamaguiConfig from './tamagui.config'
 
+type ThemeVars = 'light' | 'dark'
+
 export default function App() {
+  const [theme, setTheme] = useState<ThemeVars>('light')
+  const [loaded] = useFonts({
+    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
+    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
+    // Tamagui does this for you on web, but you need to do it manually on native. Only for the demo. We should seek a better solution.
+    UbuntuMono: require('./assets/fonts/UbuntuMono.ttf'),
+  })
+
+  if (!loaded) {
+    return null
+  }
+
   return (
-    <TamaguiProvider config={tamaguiConfig}>
+    <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
-      <Shape />
+      <SafeAreaView>
+        <Stack
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          marginTop={20}
+          height="100%"
+          width="100%"
+          backgroundColor="$background"
+        >
+          <Heading weight="semibold" marginBottom={12}>
+            Communities
+          </Heading>
+          <Heading heading="h2" marginBottom={12}>
+            This is an Heading 2
+          </Heading>
+          <Paragraph weight="semibold" marginBottom={12} uppercase>
+            Paragraph uppercased and bolded
+          </Paragraph>
+          <Paragraph marginBottom={12} uppercase>
+            This is a paragraph
+          </Paragraph>
+          <Label marginBottom={12}>This is a label</Label>
+          <Code marginBottom={12}>This is a code line</Code>
+          <Paragraph fontWeight="400">0x213abc190 ... 121ah4a9e</Paragraph>
+          <Shape marginVertical={20} />
+
+          <Paragraph>Theme selected - {theme}</Paragraph>
+          <TouchableOpacity
+            onPress={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+          >
+            <Paragraph>Toogle theme</Paragraph>
+          </TouchableOpacity>
+        </Stack>
+      </SafeAreaView>
     </TamaguiProvider>
   )
 }

apps/vite/src/app.css

@@ -1,7 +1,7 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
+  width: 100%;
   text-align: center;
 }
 

apps/vite/src/app.tsx

@@ -1,24 +1,44 @@
 import './app.css'
 
-import { Shape } from '@status-im/components'
+import React, { useState } from 'react'
-import { TamaguiProvider } from '@tamagui/core'
+
+import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
+import { Stack, TamaguiProvider } from '@tamagui/core'
 
 import tamaguiConfig from '../tamagui.config'
-import { Circle } from './components/circle'
+
+type ThemeVars = 'light' | 'dark'
 
 function App() {
+  const [theme, setTheme] = useState<ThemeVars>('light')
+
   return (
-    <TamaguiProvider config={tamaguiConfig}>
+    <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
-      <div>
+      <Stack width="100%" height="100%" backgroundColor="$background">
-        <div>
+        <Stack
-          <h1>Vite</h1>
+          flexDirection="column"
-          <Circle />
+          justifyContent="center"
-        </div>
+          alignItems="center"
-        <div>
+          height="100%"
-          <h1>UI</h1>
+          width="100%"
-          <Shape />
+        >
-        </div>
+          <Heading marginBottom={12}>This is an Heading 1</Heading>
-      </div>
+          <Heading marginBottom={12} heading="h2">
+            This is an Heading 2
+          </Heading>
+          <Paragraph weight="semibold" uppercase marginBottom={12}>
+            This is a paragraph
+          </Paragraph>
+          <Label marginBottom={12}>This is a label</Label>
+          <Code marginBottom={12}>This is a code</Code>
+          <Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
+          <Paragraph marginVertical={20}>Theme selected - {theme} </Paragraph>
+          <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+            Toogle theme
+          </button>
+          <Shape marginTop={20} />
+        </Stack>
+      </Stack>
     </TamaguiProvider>
   )
 }

apps/vite/src/index.css

@@ -6,7 +6,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #fff;
+  width: 100%;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -27,7 +27,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  width: 100%;
   min-width: 320px;
   min-height: 100vh;
 }

packages/components/src/animations.ts

@@ -1,3 +1,4 @@
+import { createAnimations as createAnimationsCSS } from '@tamagui/animations-css'
 import { createAnimations } from '@tamagui/animations-react-native'
 
 export const animations = createAnimations({
@@ -19,3 +20,9 @@ export const animations = createAnimations({
     stiffness: 250,
   },
 })
+
+export const animationsCSS = createAnimationsCSS({
+  fast: 'ease-in 150ms',
+  medium: 'ease-in 300ms',
+  slow: 'ease-in 450ms',
+})

packages/components/src/global.ts

@@ -1,8 +1,10 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable @typescript-eslint/no-empty-interface */
 import { config } from './tamagui.config'
 
 export type Conf = typeof config
 
-declare module 'tamagui' {
+declare module '@tamagui/core' {
   interface TamaguiCustomConfig extends Conf {}
 }
 

packages/components/src/index.tsx

@@ -1,2 +1,3 @@
 export * from './shape'
 export { config } from './tamagui.config'
+export * from './typography'

packages/components/src/shape/shape.tsx

@@ -1,15 +1,16 @@
 import { Stack, styled } from '@tamagui/core'
 
 export const Shape = styled(Stack, {
-  backgroundColor: 'pink',
+  backgroundColor: '$primary',
   width: 100,
-  height: 100
+  height: 100,
+  cursor: 'pointer',
+  animation: 'fast',
+  borderRadius: '$4',
+  hoverStyle: {
+    backgroundColor: '$primaryHover',
+  },
+  pressStyle: {
+    backgroundColor: '$primaryHover',
+  },
 })
-
-// import { styled, YStack } from 'tamagui'
-
-// export const MyComponent = styled(YStack, {
-//   backgroundColor: 'pink',
-//   width: 100,
-//   height: 100
-// })

packages/components/src/stories/Page.stories.js

@@ -1,6 +1,6 @@
-import { within, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library'
 
-import { Page } from './Page';
+import { Page } from './Page'
 
 export default {
   title: 'Example/Page',
@@ -9,17 +9,17 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
-};
+}
 
-export const LoggedOut = {};
+export const LoggedOut = {}
 
 // More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    const canvas = within(canvasElement)
     const loginButton = await canvas.getByRole('button', {
       name: /Log in/i,
-    });
+    })
-    await userEvent.click(loginButton);
+    await userEvent.click(loginButton)
   },
-};
+}

packages/components/src/tamagui.config.ts

@@ -1,99 +1,113 @@
-import { createTamagui } from '@tamagui/core'
+import { createFont, createTamagui } from '@tamagui/core'
-import { themes, tokens } from '@tamagui/theme-base'
+import { createInterFont } from '@tamagui/font-inter'
+import { createMedia } from '@tamagui/react-native-media-driver'
+import { shorthands } from '@tamagui/shorthands'
 
-export type AppConfig = typeof config
+import { animations, animationsCSS } from './animations'
-declare module '@tamagui/core' {
+import { themes } from './themes'
-  // overrides TamaguiCustomConfig so your custom types
+import { tokens } from './tokens'
-  // work everywhere you import `tamagui`
-  type TamaguiCustomConfig = AppConfig
-}
 
-export const config = createTamagui({
+const interFont = createInterFont({
-  fonts: {},
+  size: {
-  themes,
+    6: 11,
-  tokens
+    7: 13,
+    8: 15,
+    9: 19,
+    10: 27,
+  },
+  transform: {
+    6: 'uppercase',
+    7: 'none',
+  },
+  weight: {
+    6: '400',
+    7: '500',
+    8: '600',
+  },
+  letterSpacing: {
+    5: 2,
+    6: 1,
+    7: 0,
+    8: -1,
+    9: -2,
+    10: -3,
+    12: -4,
+    14: -5,
+    15: -6,
+  },
+  face: {
+    400: { normal: 'Inter' },
+    500: { normal: 'Inter' },
+    600: { normal: 'InterBold' },
+  },
 })
 
-// export const styled = config
+const monoFont = createFont({
-// export default config
+  family: 'UbuntuMono',
+  weight: {
+    1: '500',
+  },
+  letterSpacing: {
+    5: 2,
+    6: 1,
+    7: 0,
+    8: -1,
+    9: -2,
+    10: -3,
+    12: -4,
+    14: -5,
+    15: -6,
+  },
+  size: {
+    1: 11,
+    2: 12,
+    3: 13,
+    4: 14,
+    5: 16,
+    6: 18,
+    7: 20,
+    8: 22,
+    9: 30,
+    10: 42,
+    11: 52,
+    12: 62,
+    13: 72,
+    14: 92,
+    15: 114,
+    16: 124,
+  },
+  lineHeight: {
+    1: 14,
+    2: 15,
+  },
+})
 
-// import { createTamagui } from 'tamagui'
+export const config = createTamagui({
-// import { createInterFont } from '@tamagui/font-inter'
+  fonts: {
-// import { shorthands } from '@tamagui/shorthands'
+    inter: interFont,
-// import { themes, tokens } from '@tamagui/theme-base'
+    mono: monoFont,
-// import { createMedia } from '@tamagui/react-native-media-driver'
+  },
-
+  themes,
-// import { animations } from './animations'
+  tokens,
-
+  media: createMedia({
-// const headingFont = createInterFont({
+    xs: { maxWidth: 660 },
-//   size: {
+    sm: { maxWidth: 800 },
-//     6: 15,
+    md: { maxWidth: 1020 },
-//   },
+    lg: { maxWidth: 1280 },
-//   transform: {
+    xl: { maxWidth: 1420 },
-//     6: 'uppercase',
+    xxl: { maxWidth: 1600 },
-//     7: 'none',
+    gtXs: { minWidth: 660 + 1 },
-//   },
+    gtSm: { minWidth: 800 + 1 },
-//   weight: {
+    gtMd: { minWidth: 1020 + 1 },
-//     6: '400',
+    gtLg: { minWidth: 1280 + 1 },
-//     7: '700',
+    short: { maxHeight: 820 },
-//   },
+    tall: { minHeight: 820 },
-//   color: {
+    hoverNone: { hover: 'none' },
-//     6: '$colorFocus',
+    pointerCoarse: { pointer: 'coarse' },
-//     7: '$color',
+  }),
-//   },
+  shorthands,
-//   letterSpacing: {
+  animations: {
-//     5: 2,
+    ...animations,
-//     6: 1,
+    ...animationsCSS,
-//     7: 0,
+  },
-//     8: -1,
+})
-//     9: -2,
-//     10: -3,
-//     12: -4,
-//     14: -5,
-//     15: -6,
-//   },
-//   face: {
-//     700: { normal: 'InterBold' },
-//   },
-// })
-
-// const bodyFont = createInterFont(
-//   {
-//     face: {
-//       700: { normal: 'InterBold' },
-//     },
-//   },
-//   {
-//     sizeSize: (size) => Math.round(size * 1.1),
-//     sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
-//   }
-// )
-
-// export const config = createTamagui({
-//   animations,
-//   shouldAddPrefersColorThemes: true,
-//   themeClassNameOnRoot: true,
-//   shorthands,
-//   fonts: {
-//     heading: headingFont,
-//     body: bodyFont,
-//   },
-//   themes,
-//   tokens,
-//   media: createMedia({
-//     xs: { maxWidth: 660 },
-//     sm: { maxWidth: 800 },
-//     md: { maxWidth: 1020 },
-//     lg: { maxWidth: 1280 },
-//     xl: { maxWidth: 1420 },
-//     xxl: { maxWidth: 1600 },
-//     gtXs: { minWidth: 660 + 1 },
-//     gtSm: { minWidth: 800 + 1 },
-//     gtMd: { minWidth: 1020 + 1 },
-//     gtLg: { minWidth: 1280 + 1 },
-//     short: { maxHeight: 820 },
-//     tall: { minHeight: 820 },
-//     hoverNone: { hover: 'none' },
-//     pointerCoarse: { pointer: 'coarse' },
-//   }),
-// })

packages/components/src/themes.ts

@@ -0,0 +1,74 @@
+import { createTheme } from '@tamagui/core'
+
+import { tokens } from './tokens'
+
+const light = createTheme({
+  background: tokens.color['white-100'],
+  textPrimary: tokens.color['neutral-100'],
+  primary: tokens.color['primary-50'],
+  primaryHover: tokens.color['primary-60'],
+  success: tokens.color['success-50'],
+  successHover: tokens.color['success-60'],
+  danger: tokens.color['danger-50'],
+  dangerHover: tokens.color['danger-60'],
+  purple: tokens.color['purple-50'],
+  purpleHover: tokens.color['purple-60'],
+  indigo: tokens.color['indigo-50'],
+  indigoHover: tokens.color['indigo-60'],
+  turquoise: tokens.color['turquoise-50'],
+  turquoiseHover: tokens.color['turquoise-60'],
+  blue: tokens.color['blue-50'],
+  blueHover: tokens.color['blue-60'],
+  green: tokens.color['green-50'],
+  greenHover: tokens.color['green-60'],
+  yellow: tokens.color['yellow-50'],
+  yellowHover: tokens.color['yellow-60'],
+  orange: tokens.color['orange-50'],
+  orangeHover: tokens.color['orange-60'],
+  red: tokens.color['red-50'],
+  redHover: tokens.color['red-60'],
+  pink: tokens.color['pink-50'],
+  pinkHover: tokens.color['pink-60'],
+  brown: tokens.color['brown-50'],
+  brownHover: tokens.color['brown-60'],
+  beige: tokens.color['beige-50'],
+  beigeHover: tokens.color['beige-60'],
+})
+
+const dark = createTheme({
+  background: tokens.color['neutral-95'],
+  textPrimary: tokens.color['white-100'],
+  primary: tokens.color['primary-60'],
+  primaryHover: tokens.color['primary-50'],
+  success: tokens.color['success-60'],
+  successHover: tokens.color['success-50'],
+  danger: tokens.color['danger-60'],
+  dangerHover: tokens.color['danger-50'],
+  purple: tokens.color['purple-60'],
+  purpleHover: tokens.color['purple-50'],
+  indigo: tokens.color['indigo-60'],
+  indigoHover: tokens.color['indigo-50'],
+  turquoise: tokens.color['turquoise-60'],
+  turquoiseHover: tokens.color['turquoise-50'],
+  blue: tokens.color['blue-60'],
+  blueHover: tokens.color['blue-50'],
+  green: tokens.color['green-60'],
+  greenHover: tokens.color['green-50'],
+  yellow: tokens.color['yellow-60'],
+  yellowHover: tokens.color['yellow-50'],
+  orange: tokens.color['orange-60'],
+  orangeHover: tokens.color['orange-50'],
+  red: tokens.color['red-60'],
+  redHover: tokens.color['red-50'],
+  pink: tokens.color['pink-60'],
+  pinkHover: tokens.color['pink-50'],
+  brown: tokens.color['brown-60'],
+  brownHover: tokens.color['brown-50'],
+  beige: tokens.color['beige-60'],
+  beigeHover: tokens.color['beige-50'],
+})
+
+export const themes = {
+  light,
+  dark,
+}

packages/components/src/tokens.ts

@@ -0,0 +1,188 @@
+import { createTokens } from '@tamagui/core'
+import { radius, size, space, zIndex } from '@tamagui/theme-base'
+
+export const tokens = createTokens({
+  color: {
+    'neutral-5': 'hsla(220, 18%, 97%, 1)',
+    'neutral-10': 'hsla(216, 20%, 95%, 1)',
+    'neutral-20': 'hsla(214, 17%, 92%, 1)',
+    'neutral-30': 'hsla(213, 15%, 88%, 1)',
+    'neutral-40': 'hsla(219, 17%, 69%, 1)',
+    'neutral-50': 'hsla(218, 14%, 45%, 1)',
+    'neutral-60': 'hsla(219, 28%, 26%, 1)',
+    'neutral-70': 'hsla(219, 35%, 19%, 1)',
+    'neutral-80': 'hsla(219, 38%, 17%, 1)',
+    'neutral-90': 'hsla(219, 42%, 13%, 1)',
+    'neutral-95': 'hsla(218, 48%, 10%, 1)',
+    'neutral-100': 'hsla(218, 51%, 7%, 1)',
+    'neutral-5-opa-70': 'hsla(220, 18%, 97%, 0.7)',
+    'neutral-90-opa-70': 'hsla(219, 42%, 13%, 0.7)',
+    'neutral-95-opa-70': 'hsla(218, 48%, 10%, 0.7)',
+    'neutral-80-opa-5': 'hsla(219, 38%, 17%, 0.05)',
+    'neutral-80-opa-10': 'hsla(219, 38%, 17%, 0.1)',
+    'neutral-80-opa-20': 'hsla(219, 38%, 17%, 0.2)',
+    'neutral-80-opa-30': 'hsla(219, 38%, 17%, 0.3)',
+    'neutral-80-opa-40': 'hsla(219, 38%, 17%, 0.4)',
+    'neutral-80-opa-50': 'hsla(219, 38%, 17%, 0.5)',
+    'neutral-80-opa-60': 'hsla(219, 38%, 17%, 0.6)',
+    'neutral-80-opa-70': 'hsla(219, 38%, 17%, 0.7)',
+    'neutral-80-opa-80': 'hsla(219, 38%, 17%, 0.8)',
+    'neutral-80-opa-90': 'hsla(219, 38%, 17%, 0.9)',
+    'neutral-80-opa-95': 'hsla(219, 38%, 17%, 0.95)',
+    'neutral-80-opa-100': 'hsla(219, 38%, 17%, 1)',
+    'white-5': 'hsla(0, 0%, 100%, 0.05)',
+    'white-10': 'hsla(0, 0%, 100%, 0.1)',
+    'white-20': 'hsla(0, 0%, 100%, 0.2)',
+    'white-30': 'hsla(0, 0%, 100%, 0.3)',
+    'white-40': 'hsla(0, 0%, 100%, 0.4)',
+    'white-50': 'hsla(0, 0%, 100%, 0.5)',
+    'white-60': 'hsla(0, 0%, 100%, 0.6)',
+    'white-70': 'hsla(0, 0%, 100%, 0.7)',
+    'white-80': 'hsla(0, 0%, 100%, 0.8)',
+    'white-90': 'hsla(0, 0%, 100%, 0.9)',
+    'white-95': 'hsla(0, 0%, 100%, 0.95)',
+    'white-100': 'hsla(0, 0%, 100%, 1)',
+    'primary-50': 'hsla(229, 71%, 57%, 1)',
+    'primary-60': 'hsla(229, 54%, 45%, 1)',
+    'primary-50-opa-5': 'hsla(229, 71%, 57%, 0.05)',
+    'primary-50-opa-10': 'hsla(229, 71%, 57%, 0.1)',
+    'primary-50-opa-20': 'hsla(229, 71%, 57%, 0.2)',
+    'primary-50-opa-30': 'hsla(229, 71%, 57%, 0.3)',
+    'primary-50-opa-40': 'hsla(229, 71%, 57%, 0.4)',
+    'success-50': 'hsla(174, 63%, 40%, 1)',
+    'success-60': 'hsla(174, 63%, 34%, 1)',
+    'success-50-opa-5': 'hsla(174, 63%, 40%, 0.05)',
+    'success-50-opa-10': 'hsla(174, 63%, 40%, 0.1)',
+    'success-50-opa-20': 'hsla(174, 63%, 40%, 0.2)',
+    'success-50-opa-30': 'hsla(174, 63%, 40%, 0.3)',
+    'success-50-opa-40': 'hsla(174, 63%, 40%, 0.4)',
+    'danger-50': 'hsla(1, 73%, 63%, 1)',
+    'danger-60': 'hsla(2, 48%, 53%, 1)',
+    'danger-50-opa-5': 'hsla(1, 73%, 63%, 0.05)',
+    'danger-50-opa-10': 'hsla(1, 73%, 63%, 0.1)',
+    'danger-50-opa-20': 'hsla(1, 73%, 63%, 0.2)',
+    'danger-50-opa-30': 'hsla(1, 73%, 63%, 0.3)',
+    'danger-50-opa-40': 'hsla(1, 73%, 63%, 0.4)',
+    'purple-50': 'hsla(263, 44%, 57%, 1)',
+    'purple-60': 'hsla(260, 33%, 41%, 1)',
+    'purple-50-opa-5': 'hsla(263, 44%, 57%, 0.05)',
+    'purple-50-opa-10': 'hsla(263, 44%, 57%, 0.1)',
+    'purple-50-opa-20': 'hsla(263, 44%, 57%, 0.2)',
+    'purple-50-opa-30': 'hsla(263, 44%, 57%, 0.3)',
+    'purple-50-opa-40': 'hsla(263, 44%, 57%, 0.4)',
+    'indigo-50': 'background: hsla(217, 30%, 41%, 1)',
+    'indigo-60': 'background: hsla(217, 31%, 35%, 1)',
+    'indigo-50-opa-5': 'background: hsla(217, 30%, 41%, 0.05)',
+    'indigo-50-opa-10': 'background: hsla(217, 30%, 41%, 0.1)',
+    'indigo-50-opa-20': 'background: hsla(217, 30%, 41%, 0.2)',
+    'indigo-50-opa-30': 'background: hsla(217, 30%, 41%, 0.3)',
+    'indigo-50-opa-40': 'background: hsla(217, 30%, 41%, 0.4)',
+    'turquoise-50': 'hsla(193, 41%, 45%, 1)',
+    'turquoise-60': 'hsla(193, 41%, 38%, 1)',
+    'turquoise-50-opa-5': 'hsla(193, 41%, 45%, 0.05)',
+    'turquoise-50-opa-10': 'hsla(193, 41%, 45%, 0.1)',
+    'turquoise-50-opa-20': 'hsla(193, 41%, 45%, 0.2)',
+    'turquoise-50-opa-30': 'hsla(193, 41%, 45%, 0.3)',
+    'turquoise-50-opa-40': 'hsla(193, 41%, 45%, 0.4)',
+    'blue-50': 'hsla(202, 84%, 62%, 1)',
+    'blue-60': 'hsla(202, 56%, 52%, 1)',
+    'blue-50-opa-5': 'hsla(202, 84%, 62%, 0.05)',
+    'blue-50-opa-10': 'hsla(202, 84%, 62%, 0.1)',
+    'blue-50-opa-20': 'hsla(202, 84%, 62%, 0.2)',
+    'blue-50-opa-30': 'hsla(202, 84%, 62%, 0.3)',
+    'blue-50-opa-40': 'hsla(202, 84%, 62%, 0.4)',
+    'green-50': 'hsla(151, 53%, 58%, 1)',
+    'green-60': 'hsla(151, 38%, 48%, 1)',
+    'green-50-opa-5': 'hsla(151, 53%, 58%, 0.05)',
+    'green-50-opa-10': 'hsla(151, 53%, 58%, 0.1)',
+    'green-50-opa-20': 'hsla(151, 53%, 58%, 0.2)',
+    'green-50-opa-30': 'hsla(151, 53%, 58%, 0.3)',
+    'green-50-opa-40': 'hsla(151, 53%, 58%, 0.4)',
+    'yellow-50': 'hsla(42, 100%, 66%, 1)',
+    'yellow-60': 'hsla(42, 64%, 56%, 1)',
+    'yellow-50-opa-5': 'hsla(42, 100%, 66%, 0.05)',
+    'yellow-50-opa-10': 'hsla(42, 100%, 66%, 0.1)',
+    'yellow-50-opa-20': 'hsla(42, 100%, 66%, 0.2)',
+    'yellow-50-opa-30': 'hsla(42, 100%, 66%, 0.3)',
+    'yellow-50-opa-40': 'hsla(42, 100%, 66%, 0.4)',
+    'orange-50': 'hsla(18, 95%, 68%, 1)',
+    'orange-60': 'hsla(18, 60%, 57%, 1)',
+    'orange-50-opa-5': 'hsla(18, 95%, 68%, 0.05)',
+    'orange-50-opa-10': 'hsla(18, 95%, 68%, 0.1)',
+    'orange-50-opa-20': 'hsla(18, 95%, 68%, 0.2)',
+    'orange-50-opa-30': 'hsla(18, 95%, 68%, 0.3)',
+    'orange-50-opa-40': 'hsla(18, 95%, 68%, 0.4)',
+    'red-50': 'hsla(0, 87%, 68%, 1)',
+    'red-60': 'hsla(0, 54%, 57%, 1)',
+    'red-50-opa-5': 'hsla(0, 87%, 68%, 0.05)',
+    'red-50-opa-10': 'hsla(0, 87%, 68%, 0.1)',
+    'red-50-opa-20': 'hsla(0, 87%, 68%, 0.2)',
+    'red-50-opa-30': 'hsla(0, 87%, 68%, 0.3)',
+    'red-50-opa-40': 'hsla(0, 87%, 68%, 0.4)',
+    'pink-50': 'hsla(338, 96%, 74%, 1)',
+    'pink-60': 'hsla(337, 56%, 62%, 1)',
+    'pink-50-opa-5': 'hsla(338, 96%, 74%, 0.05)',
+    'pink-50-opa-10': 'hsla(338, 96%, 74%, 0.1)',
+    'pink-50-opa-20': 'hsla(338, 96%, 74%, 0.2)',
+    'pink-50-opa-30': 'hsla(338, 96%, 74%, 0.3)',
+    'pink-50-opa-40': 'hsla(338, 96%, 74%, 0.4)',
+    'brown-50': 'hsla(15, 33%, 45%, 1)',
+    'brown-60': 'hsla(15, 33%, 38%, 1)',
+    'brown-50-opa-5': 'hsla(15, 33%, 45%, 0.05)',
+    'brown-50-opa-10': 'hsla(15, 33%, 45%, 0.1)',
+    'brown-50-opa-20': 'hsla(15, 33%, 45%, 0.2)',
+    'brown-50-opa-30': 'hsla(15, 33%, 45%, 0.3)',
+    'brown-50-opa-40': 'hsla(15, 33%, 45%, 0.4)',
+    'beige-50': 'hsla(29, 34%, 68%, 1)',
+    'beige-60': 'hsla(29, 21%, 58%, 1)',
+    'beige-50-opa-5': 'hsla(29, 34%, 68%, 0.05)',
+    'beige-50-opa-10': 'hsla(29, 34%, 68%, 0.1)',
+    'beige-50-opa-20': 'hsla(29, 34%, 68%, 0.2)',
+    'beige-50-opa-30': 'hsla(29, 34%, 68%, 0.3)',
+    'beige-50-opa-40': 'hsla(29, 34%, 68%, 0.4)',
+    'identifier-1': 'hsla(0, 0%, 0%, 1)',
+    'identifier-2': 'hsla(120, 100%, 50%, 1)',
+    'identifier-3': 'hsla(60, 100%, 50%, 1)',
+    'identifier-4': 'hsla(0, 100%, 50%, 1)',
+    'identifier-5': 'hsla(300, 100%, 50%, 1)',
+    'identifier-6': 'hsla(240, 100%, 50%, 1)',
+    'identifier-7': 'hsla(180, 100%, 50%, 1)',
+    'identifier-8': 'hsla(0, 1%, 44%, 1)',
+    'identifier-9': 'hsla(120, 100%, 30%, 1)',
+    'identifier-10': 'hsla(61, 100%, 34%, 1)',
+    'identifier-11': 'hsla(0, 100%, 30%, 1)',
+    'identifier-12': 'hsla(300, 100%, 28%, 1)',
+    'identifier-13': 'hsla(240, 100%, 26%, 1)',
+    'identifier-14': 'hsla(186, 100%, 29%, 1)',
+    'identifier-15': 'hsla(0, 0%, 77%, 1)',
+    'identifier-16': 'hsla(123, 100%, 86%, 1)',
+    'identifier-17': 'hsla(60, 100%, 85%, 1)',
+    'identifier-18': 'hsla(0, 100%, 81%, 1)',
+    'identifier-19': 'hsla(300, 100%, 85%, 1)',
+    'identifier-20': 'hsla(252, 100%, 75%, 1)',
+    'identifier-21': 'hsla(180, 100%, 88%, 1)',
+    'identifier-22': 'hsla(0, 0%, 91%, 1)',
+    'identifier-23': 'hsla(45, 100%, 54%, 1)',
+    'identifier-24': 'hsla(11, 100%, 60%, 1)',
+    'identifier-25': 'hsla(324, 100%, 50%, 1)',
+    'identifier-26': 'hsla(277, 100%, 50%, 1)',
+    'identifier-27': 'hsla(204, 94%, 61%, 1)',
+    'identifier-28': 'hsla(165, 100%, 47%, 1)',
+    'identifier-29': 'hsla(0, 0%, 100%, 1)',
+    'identifier-30': 'hsla(12, 38%, 45%, 1)',
+    'identifier-31': 'hsla(324, 100%, 39%, 1)',
+    'identifier-32': 'hsla(40, 100%, 30%, 1)',
+    ethereum: 'hsla(227, 75%, 69%, 1)',
+    optimism: 'hsla(0, 72%, 67%, 1)',
+    arbitrum: 'hsla(192, 82%, 68%, 1)',
+    zksync: 'hsla(239, 98%, 81%, 1)',
+    hermez: 'hsla(15, 77%, 65%, 1)',
+    xdai: 'hsla(179, 51%, 50%, 1)',
+    polygon: 'hsla(268, 84%, 70%, 1)',
+    unknown: 'hsla(206, 26%, 95%, 1)',
+  },
+  size,
+  space,
+  zIndex,
+  radius,
+})

packages/components/src/typography/index.tsx

@@ -0,0 +1 @@
+export * from './typography'

packages/components/src/typography/typography.tsx

@@ -0,0 +1,166 @@
+import { styled } from '@tamagui/core'
+import { SizableText } from 'tamagui'
+
+export const Heading = styled(SizableText, {
+  name: 'Heading',
+  fontFamily: '$inter',
+  color: '$textPrimary',
+
+  variants: {
+    heading: {
+      h1: {
+        fontSize: 27,
+        lineHeight: 32,
+        letterSpacing: '-0.021em',
+      },
+      h2: {
+        fontSize: 19,
+        lineHeight: 26,
+        letterSpacing: '-0.016em',
+      },
+    },
+    uppercase: {
+      true: {
+        textTransform: 'uppercase',
+      },
+    },
+    weight: {
+      regular: {
+        fontWeight: '400',
+      },
+      medium: {
+        fontWeight: '500',
+      },
+      semibold: {
+        fontWeight: '600',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale
+    size: '$true',
+    heading: 'h1',
+  },
+})
+
+export const Paragraph = styled(SizableText, {
+  name: 'Paragraph',
+  fontFamily: '$inter',
+  color: '$textPrimary',
+
+  variants: {
+    variant: {
+      normal: {
+        fontSize: 15,
+        lineHeight: 22,
+        letterSpacing: '-0.009em',
+      },
+      smaller: {
+        fontSize: 13,
+        lineHeight: 18,
+        letterSpacing: '-0.003em',
+      },
+    },
+    uppercase: {
+      true: {
+        textTransform: 'uppercase',
+      },
+    },
+    weight: {
+      regular: {
+        fontWeight: '400',
+      },
+      medium: {
+        fontWeight: '500',
+      },
+      semibold: {
+        fontWeight: '600',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale
+    size: '$true',
+    variant: 'normal',
+    weight: 'regular',
+  },
+})
+
+export const Label = styled(SizableText, {
+  name: 'Label',
+  fontFamily: '$inter',
+  color: '$textPrimary',
+
+  fontSize: 11,
+  lineHeight: 16,
+  letterSpacing: '-0.005em',
+
+  variants: {
+    uppercase: {
+      true: {
+        textTransform: 'uppercase',
+      },
+    },
+    weight: {
+      regular: {
+        fontWeight: '400',
+      },
+      medium: {
+        fontWeight: '500',
+      },
+      semibold: {
+        fontWeight: '600',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale
+    size: '$true',
+    weight: 'regular',
+  },
+})
+
+export const Code = styled(SizableText, {
+  name: 'Code',
+  fontFamily: '$mono',
+  color: '$textPrimary',
+
+  fontSize: 11,
+  lineHeight: 16,
+  letterSpacing: '-0.005em',
+
+  variants: {
+    normal: {
+      fontSize: 15,
+      lineHeight: 22,
+      letterSpacing: '-0.009em',
+    },
+    smaller: {
+      fontSize: 13,
+      lineHeight: 18,
+      letterSpacing: '-0.003em',
+    },
+    uppercase: {
+      true: {
+        textTransform: 'uppercase',
+      },
+    },
+    weight: {
+      regular: {
+        fontWeight: '400',
+      },
+      medium: {
+        fontWeight: '500',
+      },
+      semibold: {
+        fontWeight: '600',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale
+    size: '$true',
+    variant: 'normal',
+    weight: 'regular',
+  },
+})