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
GitHub
parent
f44abac4b0
commit
9a28570b44
|
|
@ -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.
|
|
@ -1,7 +1,7 @@
|
|||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export * from './shape'
|
||||
export { config } from './tamagui.config'
|
||||
export * from './typography'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// })
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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,
|
||||
})
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './typography'
|
||||
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue