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
This commit is contained in:
marcelines 2023-01-16 14:34:15 +00:00 committed by GitHub
parent b5696c32d5
commit 23def2264e
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
15 changed files with 662 additions and 136 deletions

View File

@ -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 { TamaguiProvider } from '@tamagui/core'
import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
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}>
<Shape />
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
<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>
)
}

Binary file not shown.

View File

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

View File

@ -1,24 +1,44 @@
import './app.css'
import { Shape } from '@status-im/components'
import { TamaguiProvider } from '@tamagui/core'
import React, { useState } from 'react'
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}>
<div>
<div>
<h1>Vite</h1>
<Circle />
</div>
<div>
<h1>UI</h1>
<Shape />
</div>
</div>
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
<Stack width="100%" height="100%" backgroundColor="$background">
<Stack
flexDirection="column"
justifyContent="center"
alignItems="center"
height="100%"
width="100%"
>
<Heading marginBottom={12}>This is an Heading 1</Heading>
<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>
)
}

View File

@ -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;
}

View File

@ -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',
})

View File

@ -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 {}
}

View File

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

View File

@ -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
// })

View File

@ -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)
},
};
}

View File

@ -1,99 +1,113 @@
import { createTamagui } from '@tamagui/core'
import { themes, tokens } from '@tamagui/theme-base'
import { createFont, createTamagui } from '@tamagui/core'
import { createInterFont } from '@tamagui/font-inter'
import { createMedia } from '@tamagui/react-native-media-driver'
import { shorthands } from '@tamagui/shorthands'
export type AppConfig = typeof config
declare module '@tamagui/core' {
// overrides TamaguiCustomConfig so your custom types
// work everywhere you import `tamagui`
type TamaguiCustomConfig = AppConfig
}
import { animations, animationsCSS } from './animations'
import { themes } from './themes'
import { tokens } from './tokens'
export const config = createTamagui({
fonts: {},
themes,
tokens
const interFont = createInterFont({
size: {
6: 11,
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
// export default config
const monoFont = createFont({
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'
// import { createInterFont } from '@tamagui/font-inter'
// import { shorthands } from '@tamagui/shorthands'
// import { themes, tokens } from '@tamagui/theme-base'
// import { createMedia } from '@tamagui/react-native-media-driver'
// import { animations } from './animations'
// const headingFont = createInterFont({
// size: {
// 6: 15,
// },
// transform: {
// 6: 'uppercase',
// 7: 'none',
// },
// weight: {
// 6: '400',
// 7: '700',
// },
// color: {
// 6: '$colorFocus',
// 7: '$color',
// },
// letterSpacing: {
// 5: 2,
// 6: 1,
// 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' },
// }),
// })
export const config = createTamagui({
fonts: {
inter: interFont,
mono: monoFont,
},
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' },
}),
shorthands,
animations: {
...animations,
...animationsCSS,
},
})

View File

@ -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,
}

View File

@ -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,
})

View File

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

View File

@ -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',
},
})