fix: add proper tamagui config
This commit is contained in:
Ivana Andersson
parent
ffdc5942e5
commit
11510ee3bf
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createAnimations } from '@tamagui/animations-css'
|
||||||
|
|
||||||
|
export const animations = createAnimations({
|
||||||
|
fast: 'ease-in 150ms',
|
||||||
|
medium: 'ease-in 300ms',
|
||||||
|
slow: 'ease-in 450ms',
|
||||||
|
})
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nivo/pie": "^0.83.0",
|
"@nivo/pie": "^0.83.0",
|
||||||
|
"@status-im/colors": "^0.2.0",
|
||||||
"@status-im/components": "^0.2.6",
|
"@status-im/components": "^0.2.6",
|
||||||
"@tamagui/config": "1.36.4",
|
"@tamagui/config": "1.36.4",
|
||||||
"@tamagui/react-17-patch": "1.36.4",
|
"@tamagui/react-17-patch": "1.36.4",
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,81 @@
|
||||||
|
import { createFont, createTamagui, setupReactNative } from '@tamagui/core'
|
||||||
import { config } from '@tamagui/config'
|
import { config } from '@tamagui/config'
|
||||||
|
import { createInterFont } from '@tamagui/font-inter'
|
||||||
|
import { createMedia } from '@tamagui/react-native-media-driver'
|
||||||
|
import { shorthands } from '@tamagui/shorthands'
|
||||||
import { Text, View } from 'react-native'
|
import { Text, View } from 'react-native'
|
||||||
|
import { animations } from './animations'
|
||||||
import { createTamagui, setupReactNative } from '@tamagui/core'
|
import { themes } from './themes'
|
||||||
|
import { tokens } from './tokens'
|
||||||
|
import type { ColorTokens, GetStyledVariants, TamaguiComponent } from '@tamagui/core'
|
||||||
|
|
||||||
setupReactNative({ Text, View })
|
setupReactNative({ Text, View })
|
||||||
|
|
||||||
const appConfig = createTamagui(config)
|
// const appConfig = createTamagui(config)
|
||||||
|
export const appConfig = createTamagui({
|
||||||
|
fonts: {
|
||||||
|
sans: createInterFont({
|
||||||
|
size: {},
|
||||||
|
weight: {},
|
||||||
|
letterSpacing: {},
|
||||||
|
face: {
|
||||||
|
400: { normal: 'Inter' },
|
||||||
|
500: { normal: 'Inter' },
|
||||||
|
600: { normal: 'InterBold' },
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
mono: createFont({
|
||||||
|
family:
|
||||||
|
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;',
|
||||||
|
weight: {},
|
||||||
|
letterSpacing: {},
|
||||||
|
size: {},
|
||||||
|
lineHeight: {},
|
||||||
|
}),
|
||||||
|
// Tamagui requires this... weird
|
||||||
|
body: createInterFont({}),
|
||||||
|
},
|
||||||
|
themes,
|
||||||
|
tokens: {
|
||||||
|
colors: {
|
||||||
|
...tokens.color,
|
||||||
|
},
|
||||||
|
...tokens,
|
||||||
|
},
|
||||||
|
shouldAddPrefersColorThemes: true,
|
||||||
|
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,
|
||||||
|
})
|
||||||
export type AppConfig = typeof appConfig
|
export type AppConfig = typeof appConfig
|
||||||
declare module 'tamagui' {
|
declare module 'tamagui' {
|
||||||
interface TamaguiCustomConfig extends AppConfig {}
|
interface TamaguiCustomConfig extends AppConfig {}
|
||||||
}
|
}
|
||||||
|
declare module '@tamagui/core' {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||||
|
interface TamaguiCustomConfig extends AppConfig {}
|
||||||
|
}
|
||||||
export default appConfig
|
export default appConfig
|
||||||
|
|
||||||
|
export type TextColor<
|
||||||
|
C extends TamaguiComponent,
|
||||||
|
K extends keyof V,
|
||||||
|
V extends GetStyledVariants<C> = GetStyledVariants<C>,
|
||||||
|
> = {
|
||||||
|
[P in V[K] & string]: ColorTokens
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
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'],
|
||||||
|
placeHolderColor: tokens.color['neutral-40'],
|
||||||
|
placeHolderColorBlurred: tokens.color['neutral-80-opa-40'],
|
||||||
|
iconButtonBackground: tokens.color['neutral-10'],
|
||||||
|
iconButtonBackgroundHover: tokens.color['neutral-20'],
|
||||||
|
iconButtonBackgroundSelected: tokens.color['neutral-20'],
|
||||||
|
iconButtonBorderSelected: tokens.color['neutral-30'],
|
||||||
|
iconButtonBackgroundBlurred: tokens.color['neutral-80-opa-5'],
|
||||||
|
iconButtonBackgroundBlurredHover: tokens.color['neutral-80-opa-10'],
|
||||||
|
iconButtonBackgroundBlurredSelected: tokens.color['neutral-80-opa-10'],
|
||||||
|
iconButtonBorderBlurredSelected: tokens.color['neutral-80-opa-5'],
|
||||||
|
iconButtonOutlineBackgroundSelected: tokens.color['neutral-10'],
|
||||||
|
iconButtonOutlineBorder: tokens.color['neutral-20'],
|
||||||
|
iconButtonOutlineBorderHover: tokens.color['neutral-30'],
|
||||||
|
iconButtonOutlineBorderSelected: tokens.color['neutral-20'],
|
||||||
|
iconButtonOutBackgroundBlurredSelected: tokens.color['neutral-10'],
|
||||||
|
iconButtonOutlineBorderBlurred: tokens.color['neutral-80-opa-10'],
|
||||||
|
iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80-opa-20'],
|
||||||
|
iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80-opa-10'],
|
||||||
|
iconButtonColor: tokens.color['neutral-50'],
|
||||||
|
iconButtonColorSelected: tokens.color['neutral-100'],
|
||||||
|
iconButtonColorBlurred: tokens.color['neutral-100'],
|
||||||
|
iconButtonColorOutline: tokens.color['neutral-50'],
|
||||||
|
iconButtonColorOutlineSelected: tokens.color['neutral-100'],
|
||||||
|
iconButtonColorOutlineBlurred: tokens.color['neutral-80-opa-70'],
|
||||||
|
blurBackground: tokens.color['white-70'],
|
||||||
|
})
|
||||||
|
|
||||||
|
// note: we set up a single consistent base type to validate the rest:
|
||||||
|
type BaseTheme = typeof light
|
||||||
|
|
||||||
|
const dark: BaseTheme = 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'],
|
||||||
|
placeHolderColor: tokens.color['neutral-50'],
|
||||||
|
placeHolderColorBlurred: tokens.color['white-30'],
|
||||||
|
iconButtonBackground: tokens.color['neutral-90'],
|
||||||
|
iconButtonBackgroundHover: tokens.color['neutral-80'],
|
||||||
|
iconButtonBackgroundSelected: tokens.color['neutral-80'],
|
||||||
|
iconButtonBorderSelected: tokens.color['neutral-60'],
|
||||||
|
iconButtonBackgroundBlurred: tokens.color['white-5'],
|
||||||
|
iconButtonBackgroundBlurredHover: tokens.color['white-10'],
|
||||||
|
iconButtonBackgroundBlurredSelected: tokens.color['white-10'],
|
||||||
|
iconButtonBorderBlurredSelected: tokens.color['white-5'],
|
||||||
|
iconButtonOutlineBackgroundSelected: tokens.color['neutral-80-opa-70'],
|
||||||
|
iconButtonOutlineBorder: tokens.color['neutral-80'],
|
||||||
|
iconButtonOutlineBorderHover: tokens.color['neutral-70'],
|
||||||
|
iconButtonOutlineBorderSelected: tokens.color['neutral-70'],
|
||||||
|
iconButtonOutBackgroundBlurredSelected: tokens.color['white-5'],
|
||||||
|
iconButtonOutlineBorderBlurred: tokens.color['white-10'],
|
||||||
|
iconButtonOutlineBorderBlurredHover: tokens.color['white-20'],
|
||||||
|
iconButtonOutlineBorderBlurredSelected: tokens.color['white-10'],
|
||||||
|
iconButtonColor: tokens.color['neutral-40'],
|
||||||
|
iconButtonColorSelected: tokens.color['white-100'],
|
||||||
|
iconButtonColorBlurred: tokens.color['white-100'],
|
||||||
|
iconButtonColorOutline: tokens.color['neutral-40'],
|
||||||
|
iconButtonColorOutlineSelected: tokens.color['white-100'],
|
||||||
|
iconButtonColorOutlineBlurred: tokens.color['white-100'],
|
||||||
|
blurBackground: tokens.color['neutral-80-opa-70'],
|
||||||
|
})
|
||||||
|
|
||||||
|
const allThemes = {
|
||||||
|
light,
|
||||||
|
dark,
|
||||||
|
}
|
||||||
|
|
||||||
|
type ThemeName = keyof typeof allThemes
|
||||||
|
|
||||||
|
type Themes = {
|
||||||
|
[key in ThemeName]: BaseTheme
|
||||||
|
}
|
||||||
|
|
||||||
|
export const themes: Themes = allThemes
|
||||||
|
|
@ -0,0 +1,206 @@
|
||||||
|
import { customisation } from '@status-im/colors'
|
||||||
|
import { createTokens } from '@tamagui/core'
|
||||||
|
import { size, space, zIndex } from '@tamagui/theme-base'
|
||||||
|
|
||||||
|
export const tokens = createTokens({
|
||||||
|
color: {
|
||||||
|
...customisation,
|
||||||
|
'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': 'hsla(217, 30%, 41%, 1)',
|
||||||
|
'indigo-60': 'hsla(217, 31%, 35%, 1)',
|
||||||
|
'indigo-50-opa-5': 'hsla(217, 30%, 41%, 0.05)',
|
||||||
|
'indigo-50-opa-10': 'hsla(217, 30%, 41%, 0.1)',
|
||||||
|
'indigo-50-opa-20': 'hsla(217, 30%, 41%, 0.2)',
|
||||||
|
'indigo-50-opa-30': 'hsla(217, 30%, 41%, 0.3)',
|
||||||
|
'indigo-50-opa-40': '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(231, 91%, 56%, 1)',
|
||||||
|
'blue-60': 'hsla(231, 70%, 45%, 1)',
|
||||||
|
'blue-50-opa-5': 'hsla(231, 91%, 56%, 0.05)',
|
||||||
|
'blue-50-opa-10': 'hsla(231, 91%, 56%, 0.1)',
|
||||||
|
'blue-50-opa-20': 'hsla(231, 91%, 56%, 0.2)',
|
||||||
|
'blue-50-opa-30': 'hsla(231, 91%, 56%, 0.3)',
|
||||||
|
'blue-50-opa-40': 'hsla(231, 91%, 56%, 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)',
|
||||||
|
transparent: 'hsla(0, 0%, 0%, 0)',
|
||||||
|
},
|
||||||
|
size,
|
||||||
|
space,
|
||||||
|
zIndex,
|
||||||
|
radius: {
|
||||||
|
0: 0,
|
||||||
|
4: 4,
|
||||||
|
6: 6,
|
||||||
|
8: 8,
|
||||||
|
10: 10,
|
||||||
|
12: 12,
|
||||||
|
16: 16,
|
||||||
|
20: 20,
|
||||||
|
full: 1000,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`
|
||||||
|
type RadiusTokens = GetTokenString<keyof typeof tokens.radius> | number
|
||||||
|
|
||||||
|
export { type RadiusTokens }
|
||||||
|
|
@ -4110,7 +4110,7 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@status-im/colors@npm:*":
|
"@status-im/colors@npm:*, @status-im/colors@npm:^0.2.0":
|
||||||
version: 0.2.0
|
version: 0.2.0
|
||||||
resolution: "@status-im/colors@npm:0.2.0"
|
resolution: "@status-im/colors@npm:0.2.0"
|
||||||
checksum: 06390b83897193489f14b0e4fe371e87f30056b1c1d6ef9a14b0fe8dc068453e6b532a767077537eebc39f8fcedb832eb047c7f5e6f479683394152f115be3db
|
checksum: 06390b83897193489f14b0e4fe371e87f30056b1c1d6ef9a14b0fe8dc068453e6b532a767077537eebc39f8fcedb832eb047c7f5e6f479683394152f115be3db
|
||||||
|
|
@ -13549,6 +13549,7 @@ __metadata:
|
||||||
dependencies:
|
dependencies:
|
||||||
"@fsouza/prettierd": ^0.24.2
|
"@fsouza/prettierd": ^0.24.2
|
||||||
"@nivo/pie": ^0.83.0
|
"@nivo/pie": ^0.83.0
|
||||||
|
"@status-im/colors": ^0.2.0
|
||||||
"@status-im/components": ^0.2.6
|
"@status-im/components": ^0.2.6
|
||||||
"@storybook/addon-essentials": ^7.2.0
|
"@storybook/addon-essentials": ^7.2.0
|
||||||
"@storybook/addon-interactions": ^7.2.0
|
"@storybook/addon-interactions": ^7.2.0
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue