status-im/wakuconnect-chat-sdk
2
0
Fork 0
mirror of https://github.com/status-im/wakuconnect-chat-sdk.git synced 2025-01-12 05:05:14 +00:00
Code Issues Projects Releases Wiki Activity

sync colors (#493)

Browse Source 
* sync colors

* f

* a ch

* f
This commit is contained in:
Felicio Mununga 2023-10-20 14:56:23 +02:00 committed by GitHub
parent 29b9734a56
commit d796765ef3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 151 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/stale-ducks-chew.md Normal file
View File

@ -0,0 +1,5 @@
---
'@status-im/components': patch
---
sync colors

1
packages/colors/src/customisation.ts
View File

@ -20,6 +20,7 @@ export const customisation = {
'camel/30': 'rgba(199 143 103 / 30%)', 'camel/30': 'rgba(199 143 103 / 30%)',
'camel/40': 'rgba(199 143 103 / 40%)', 'camel/40': 'rgba(199 143 103 / 40%)',
'camel/5': 'rgba(199 143 103 / 5%)', 'camel/5': 'rgba(199 143 103 / 5%)',
// fixme: rename to copper in Figma
'cooper-50': 'rgba(203 98 86 / 100%)', 'cooper-50': 'rgba(203 98 86 / 100%)',
'cooper-60': 'rgba(162 78 69 / 100%)', 'cooper-60': 'rgba(162 78 69 / 100%)',
'cooper/10': 'rgba(203 98 86 / 10%)', 'cooper/10': 'rgba(203 98 86 / 10%)',

2
packages/components/src/avatar/avatar.tsx
View File

@ -188,7 +188,7 @@ const Avatar = (props: AvatarProps) => {
} }
if (props.type === 'channel') { if (props.type === 'channel') {
return '$blue-50-opa-20' return '$blue/20'
} }
return '$neutral-95' return '$neutral-95'

14
packages/components/src/banner/banner.stories.tsx
View File

@ -40,7 +40,7 @@ export const NoCount: Story = {
export const NetworkStateConnecting: Story = { export const NetworkStateConnecting: Story = {
args: { args: {
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
icon: <RecentIcon size={20} />, icon: <RecentIcon size={20} />,
children: 'Connecting...', children: 'Connecting...',
}, },
@ -48,7 +48,7 @@ export const NetworkStateConnecting: Story = {
export const NetworkStateError: Story = { export const NetworkStateError: Story = {
args: { args: {
backgroundColor: '$danger-50-opa-20', backgroundColor: '$danger-/20',
icon: <AlertIcon size={20} />, icon: <AlertIcon size={20} />,
children: 'Network is down', children: 'Network is down',
}, },
@ -62,16 +62,10 @@ export const AllVariants: Story = {
Banner message Banner message
</Banner> </Banner>
<Banner count={5}>Banner message</Banner> <Banner count={5}>Banner message</Banner>
<Banner <Banner backgroundColor="$neutral-80/20" icon={<RecentIcon size={20} />}>
backgroundColor="$neutral-80-opa-5"
icon={<RecentIcon size={20} />}
>
Connecting... Connecting...
</Banner> </Banner>
<Banner <Banner backgroundColor="$danger-/20" icon={<AlertIcon size={20} />}>
backgroundColor="$danger-50-opa-20"
icon={<AlertIcon size={20} />}
>
Network is down Network is down
</Banner> </Banner>
<Banner icon={<PinIcon size={20} />}>Banner message</Banner> <Banner icon={<PinIcon size={20} />}>Banner message</Banner>

7
packages/components/src/banner/banner.tsx
View File

@ -14,12 +14,7 @@ type Props = {
} }
const Banner = (props: Props) => { const Banner = (props: Props) => {
const { const { icon = null, children, count, backgroundColor = '$blue/20' } = props
icon = null,
children,
count,
backgroundColor = '$primary-50-opa-20',
} = props
return ( return (
<Base backgroundColor={backgroundColor}> <Base backgroundColor={backgroundColor}>

12
packages/components/src/button/button.tsx
View File

@ -119,10 +119,10 @@ const Base = styled(View, {
variants: { variants: {
variant: { variant: {
primary: { primary: {
backgroundColor: '$primary-50', backgroundColor: '$blue-50',
hoverStyle: { backgroundColor: '$primary-60' }, hoverStyle: { backgroundColor: '$blue-60' },
// TODO: update background color // TODO: update background color
pressStyle: { backgroundColor: '$primary-50' }, pressStyle: { backgroundColor: '$blue-50' },
}, },
positive: { positive: {
backgroundColor: '$success-50', backgroundColor: '$success-50',
@ -174,9 +174,9 @@ const Base = styled(View, {
pressStyle: { backgroundColor: '$orange-50' }, pressStyle: { backgroundColor: '$orange-50' },
}, },
army: { army: {
backgroundColor: '$indigo-50', backgroundColor: '$army-50',
hoverStyle: { backgroundColor: '$indigo-60' }, hoverStyle: { backgroundColor: '$army-60' },
pressStyle: { backgroundColor: '$indigo-50' }, pressStyle: { backgroundColor: '$army-50' },
}, },
turquoise: { turquoise: {
backgroundColor: '$turquoise-50', backgroundColor: '$turquoise-50',

4
packages/components/src/channel/channel.tsx
View File

@ -126,10 +126,10 @@ const Base = styled(Stack, {
variants: { variants: {
state: { state: {
active: { active: {
backgroundColor: '$primary-50-opa-5', backgroundColor: '$blue/5',
}, },
selected: { selected: {
backgroundColor: '$primary-50-opa-10', backgroundColor: '$blue/10',
}, },
}, },
}, },

12
packages/components/src/checkbox/checkbox.tsx
View File

@ -90,18 +90,18 @@ const Base = styled(Root, {
}, },
selected: { selected: {
filled: { filled: {
hoverStyle: { backgroundColor: '$primary-60' }, hoverStyle: { backgroundColor: '$blue-60' },
pressStyle: { backgroundColor: '$primary-60' }, pressStyle: { backgroundColor: '$blue-60' },
}, },
outline: { outline: {
backgroundColor: '$primary-50', backgroundColor: '$blue-50',
borderColor: '$primary-50', borderColor: '$blue-50',
hoverStyle: { hoverStyle: {
backgroundColor: '$primary-60', backgroundColor: '$blue-60',
}, },
pressStyle: { pressStyle: {
backgroundColor: '$primary-60', backgroundColor: '$blue-60',
}, },
}, },
}, },

8
packages/components/src/community/topbar/topbar.tsx
View File

@ -59,7 +59,7 @@ const Topbar = (props: Props) => {
padding={16} padding={16}
backgroundColor={'$blurBackground'} backgroundColor={'$blurBackground'}
borderBottomWidth={1} borderBottomWidth={1}
borderColor={blur ? 'transparent' : '$neutral-80-opa-10'} borderColor={blur ? 'transparent' : '$neutral-80/10'}
> >
<Stack flexDirection="row" alignItems="center" flexWrap="wrap"> <Stack flexDirection="row" alignItems="center" flexWrap="wrap">
<Stack marginRight={12} $gtSm={{ display: 'none' }}> <Stack marginRight={12} $gtSm={{ display: 'none' }}>
@ -76,10 +76,10 @@ const Topbar = (props: Props) => {
{title} {title}
</Text> </Text>
<Stack marginLeft={4}> <Stack marginLeft={4}>
<LockedIcon size={20} color="$neutral-80-opa-40" /> <LockedIcon size={20} color="$neutral-80/40" />
</Stack> </Stack>
<Stack <Stack
backgroundColor="$neutral-80-opa-10" backgroundColor="$neutral-80/10"
marginHorizontal={12} marginHorizontal={12}
height={16} height={16}
width={1} width={1}
@ -88,7 +88,7 @@ const Topbar = (props: Props) => {
</Stack> </Stack>
<Stack flexGrow={1} flexShrink={1} $sm={{ display: 'none' }}> <Stack flexGrow={1} flexShrink={1} $sm={{ display: 'none' }}>
<Text size={13} weight="medium" color="$neutral-80-opa-50" truncate> <Text size={13} weight="medium" color="$neutral-80/50" truncate>
{description} {description}
</Text> </Text>
</Stack> </Stack>

8
packages/components/src/context-tag/context-tag.tsx
View File

@ -194,7 +194,7 @@ const ContextTag = (props: Props) => {
type="icon" type="icon"
size={avatarSizes[size]} size={avatarSizes[size]}
icon={<PlayIcon size={16} />} icon={<PlayIcon size={16} />}
backgroundColor="$primary-50" backgroundColor="$blue-50"
color="$white-100" color="$white-100"
/> />
<Label size={textSize}>{props.audioLength}</Label> <Label size={textSize}>{props.audioLength}</Label>
@ -220,7 +220,7 @@ const ContextTag = (props: Props) => {
type="icon" type="icon"
size={avatarSizes[size]} size={avatarSizes[size]}
backgroundColor="$purple-50" backgroundColor="$purple-50"
color="$white-70" color="$white/70"
icon={props.group.icon} icon={props.group.icon}
/> />
<Label size={textSize}>{props.group.name}</Label> <Label size={textSize}>{props.group.name}</Label>
@ -300,13 +300,13 @@ const Base = styled(View, {
outline: { outline: {
true: { true: {
borderWidth: '1px', borderWidth: '1px',
borderColor: '$primary-50', borderColor: '$blue-50',
borderStyle: 'solid', borderStyle: 'solid',
}, },
}, },
blur: { blur: {
true: { true: {
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
}, },
false: { false: {
backgroundColor: '$neutral-10', backgroundColor: '$neutral-10',

6
packages/components/src/counter/counter.tsx
View File

@ -37,7 +37,7 @@ const Base = styled(Stack, {
}) })
const Content = styled(Stack, { const Content = styled(Stack, {
backgroundColor: '$primary-50', backgroundColor: '$blue-50',
paddingHorizontal: 3, paddingHorizontal: 3,
paddingVertical: 0, paddingVertical: 0,
borderRadius: '$6', borderRadius: '$6',
@ -53,10 +53,10 @@ const Content = styled(Stack, {
variants: { variants: {
type: { type: {
default: { default: {
backgroundColor: '$primary-50', backgroundColor: '$blue-50',
}, },
secondary: { secondary: {
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
}, },
grey: { grey: {
backgroundColor: '$neutral-10', backgroundColor: '$neutral-10',

2
packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx
View File

@ -22,7 +22,7 @@ export const Default: Story = {
render: () => { render: () => {
return ( return (
<Stack gap={24}> <Stack gap={24}>
<DividerNewMessages color="$primary-50" /> <DividerNewMessages color="$blue-50" />
<DividerNewMessages color="$yellow-50" /> <DividerNewMessages color="$yellow-50" />
<DividerNewMessages color="$turquoise-50" /> <DividerNewMessages color="$turquoise-50" />
{/* <NewMessages color="$cooper-50" /> */} {/* <NewMessages color="$cooper-50" /> */}

12
packages/components/src/dynamic-button/dynamic-button.tsx
View File

@ -67,15 +67,15 @@ const Button = styled(View, {
variants: { variants: {
type: { type: {
mention: { mention: {
backgroundColor: '$primary-50', backgroundColor: '$blue-50',
hoverStyle: { backgroundColor: '$primary-60' }, hoverStyle: { backgroundColor: '$blue-60' },
pressStyle: { backgroundColor: '$primary-50' }, pressStyle: { backgroundColor: '$blue-50' },
}, },
notification: { notification: {
backgroundColor: '$neutral-80-opa-70', backgroundColor: '$neutral-80/70',
hoverStyle: { backgroundColor: '$neutral-90-opa-70' }, hoverStyle: { backgroundColor: '$neutral-90/70' },
pressStyle: { backgroundColor: '$neutral-80-opa-80' }, pressStyle: { backgroundColor: '$neutral-80/80' },
}, },
}, },

38
packages/components/src/icon-button/icon-button.tsx
View File

@ -28,8 +28,8 @@ const IconButton = (props: Props, ref: Ref<View>) => {
const { pressableProps, color } = usePressableColors( const { pressableProps, color } = usePressableColors(
{ {
default: blur ? '$neutral-80-opa-70' : '$neutral-50', default: blur ? '$neutral-80/70' : '$neutral-50',
hover: blur ? '$neutral-80-opa-70' : '$neutral-50', hover: blur ? '$neutral-80/70' : '$neutral-50',
press: '$neutral-100', press: '$neutral-100',
active: '$neutral-100', active: '$neutral-100',
}, },
@ -130,49 +130,49 @@ const Base = styled(View, {
variantBlur: { variantBlur: {
default: { default: {
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
borderColor: 'transparent', borderColor: 'transparent',
hoverStyle: { backgroundColor: '$neutral-80-opa-10' }, hoverStyle: { backgroundColor: '$neutral-80/10' },
pressStyle: { pressStyle: {
backgroundColor: '$neutral-80-opa-10', backgroundColor: '$neutral-80/10',
borderColor: '$neutral-80-opa-5', borderColor: '$neutral-80/5',
}, },
}, },
outline: { outline: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderColor: '$neutral-80-opa-10', borderColor: '$neutral-80/10',
hoverStyle: { borderColor: '$neutral-80-opa-20' }, hoverStyle: { borderColor: '$neutral-80/20' },
pressStyle: { pressStyle: {
borderColor: '$neutral-80-opa-10', borderColor: '$neutral-80/10',
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
}, },
}, },
ghost: { ghost: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
hoverStyle: { backgroundColor: '$neutral-80-opa-5' }, hoverStyle: { backgroundColor: '$neutral-80/5' },
pressStyle: { pressStyle: {
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
borderColor: '$neutral-80-opa-10', borderColor: '$neutral-80/10',
}, },
}, },
}, },
activeBlur: { activeBlur: {
default: { default: {
backgroundColor: '$neutral-80-opa-10', backgroundColor: '$neutral-80/10',
borderColor: '$neutral-80-opa-5', borderColor: '$neutral-80/5',
}, },
outline: { outline: {
borderColor: '$neutral-80-opa-10', borderColor: '$neutral-80/10',
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
}, },
ghost: { ghost: {
backgroundColor: '$neutral-80-opa-5', backgroundColor: '$neutral-80/5',
borderColor: '$neutral-80-opa-10', borderColor: '$neutral-80/10',
}, },
}, },

2
packages/components/src/icons/icons.stories.tsx
View File

@ -32,7 +32,7 @@ export const Overview: Story = {
args: { args: {
search: '', search: '',
size: 20, size: 20,
// color: '$primary-50', // color: '$blue-50',
}, },
argTypes: { argTypes: {

8
packages/components/src/information-box/information-box.tsx
View File

@ -122,12 +122,12 @@ const Base = styled(Stack, {
borderColor: '$neutral-20', borderColor: '$neutral-20',
}, },
information: { information: {
backgroundColor: '$blue-50-opa-5', backgroundColor: '$blue/5',
borderColor: '$blue-50-opa-10', borderColor: '$blue/10',
}, },
error: { error: {
backgroundColor: '$danger-50-opa-5', backgroundColor: '$danger-/5',
borderColor: '$danger-50-opa-10', borderColor: '$danger-/10',
}, },
}, },
}, },

2
packages/components/src/input/input.tsx
View File

@ -218,7 +218,7 @@ const InputContainer = styled(Stack, {
}, },
error: { error: {
true: { true: {
borderColor: '$danger-50-opa-40', borderColor: '$danger-/40',
}, },
}, },

2
packages/components/src/messages/components/reactions.tsx
View File

@ -79,7 +79,7 @@ const Reaction = (props: ReactionProps) => {
and and
</Text> </Text>
<Stack <Stack
backgroundColor="$turquoise-50-opa-10" backgroundColor="$turquoise/10"
borderRadius="$6" borderRadius="$6"
paddingHorizontal={4} paddingHorizontal={4}
> >

2
packages/components/src/messages/message.tsx
View File

@ -39,7 +39,7 @@ const Base = styled(Stack, {
pinned: { pinned: {
true: { true: {
backgroundColor: '$blue-50-opa-5', backgroundColor: '$blue/5',
}, },
}, },
} as const, } as const,

4
packages/components/src/shortcut/shortcut.tsx
View File

@ -71,8 +71,8 @@ const Base = styled(Stack, {
variants: { variants: {
variant: { variant: {
primary: { primary: {
backgroundColor: '$primary-50', backgroundColor: '$blue-50',
borderColor: '$primary-60', borderColor: '$blue-60',
}, },
secondary: { secondary: {
backgroundColor: '$neutral-10', backgroundColor: '$neutral-10',

2
packages/components/src/skeleton/topbar-skeleton.tsx
View File

@ -16,7 +16,7 @@ const TopbarSkeleton = () => {
px={16} px={16}
backgroundColor={'$blurBackground'} backgroundColor={'$blurBackground'}
borderBottomWidth={1} borderBottomWidth={1}
borderColor={'$neutral-80-opa-10'} borderColor={'$neutral-80/10'}
width="100%" width="100%"
> >
<Stack <Stack

2
packages/components/src/step/step.tsx
View File

@ -63,7 +63,7 @@ const Content = styled(Stack, {
backgroundColor: '$blue-50', backgroundColor: '$blue-50',
}, },
active: { active: {
backgroundColor: '$blue-50-opa-10', backgroundColor: '$blue/10',
}, },
}, },
}, },

2
packages/components/src/system-message/components/added-users-message-content.tsx
View File

@ -23,7 +23,7 @@ const AddedUsersMessageContent = (props: Props) => {
// fixme: map relative avatar size to icon size // fixme: map relative avatar size to icon size
icon={<AddUserIcon size={20} />} icon={<AddUserIcon size={20} />}
size={32} size={32}
backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'} backgroundColor={state === 'landed' ? '$transparent' : '$blue/5'}
color="$blue-50" color="$blue-50"
/> />
<Stack flexDirection="row" gap={2} flexBasis="max-content" flexGrow={1}> <Stack flexDirection="row" gap={2} flexBasis="max-content" flexGrow={1}>

2
packages/components/src/system-message/components/deleted-message-content.tsx
View File

@ -26,7 +26,7 @@ const DeletedMessageContent = (props: Props) => {
type="icon" type="icon"
size={32} size={32}
icon={<TrashIcon size={20} />} icon={<TrashIcon size={20} />}
backgroundColor={state === 'landed' ? '$transparent' : '$red-50-opa-5'} backgroundColor={state === 'landed' ? '$transparent' : '$danger-/5'}
color="$neutral-100" color="$neutral-100"
/> />
<Stack <Stack

2
packages/components/src/system-message/components/pinned-message-content.tsx
View File

@ -31,7 +31,7 @@ const PinnedMessageContent = (props: Props) => {
type="icon" type="icon"
size={32} size={32}
icon={<PinIcon size={20} />} icon={<PinIcon size={20} />}
backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'} backgroundColor={state === 'landed' ? '$transparent' : '$blue/5'}
color="$neutral-100" color="$neutral-100"
/> />
<Stack <Stack

4
packages/components/src/system-message/system-message.tsx
View File

@ -111,10 +111,10 @@ const Base = styled(View, {
backgroundColor: '$neutral-5', backgroundColor: '$neutral-5',
}, },
landed: { landed: {
backgroundColor: '$blue-50-opa-5', backgroundColor: '$blue/5',
}, },
landed_deleted: { landed_deleted: {
backgroundColor: '$red-50-opa-5', backgroundColor: '$danger-/5',
}, },
}, },
}, },

12
packages/components/src/tag/tag.tsx
View File

@ -134,16 +134,16 @@ const Base = styled(View, {
}, },
selected: { selected: {
true: { true: {
backgroundColor: '$primary-50-opa-10', backgroundColor: '$blue/10',
borderColor: '$primary-50', borderColor: '$blue-50',
hoverStyle: { hoverStyle: {
backgroundColor: '$primary-50-opa-20', backgroundColor: '$blue/20',
borderColor: '$primary-60', borderColor: '$blue-60',
}, },
pressStyle: { pressStyle: {
backgroundColor: '$primary-50-opa-20', backgroundColor: '$blue/20',
borderColor: '$primary-60', borderColor: '$blue-60',
}, },
}, },
}, },

64
packages/components/src/themes.ts
View File

@ -5,59 +5,55 @@ import { tokens } from './tokens'
const light = createTheme({ const light = createTheme({
background: tokens.color['white-100'], background: tokens.color['white-100'],
textPrimary: tokens.color['neutral-100'], textPrimary: tokens.color['neutral-100'],
primary: tokens.color['primary-50'], primary: tokens.color['blue-50'],
primaryHover: tokens.color['primary-60'], primaryHover: tokens.color['blue-60'],
success: tokens.color['success-50'], success: tokens.color['success-50'],
successHover: tokens.color['success-60'], successHover: tokens.color['success-60'],
danger: tokens.color['danger-50'], danger: tokens.color['danger-50'],
dangerHover: tokens.color['danger-60'], dangerHover: tokens.color['danger-60'],
purple: tokens.color['purple-50'], purple: tokens.color['purple-50'],
purpleHover: tokens.color['purple-60'], purpleHover: tokens.color['purple-60'],
indigo: tokens.color['indigo-50'], army: tokens.color['army-50'],
indigoHover: tokens.color['indigo-60'], armyHover: tokens.color['army-60'],
turquoise: tokens.color['turquoise-50'], turquoise: tokens.color['turquoise-50'],
turquoiseHover: tokens.color['turquoise-60'], turquoiseHover: tokens.color['turquoise-60'],
blue: tokens.color['blue-50'], blue: tokens.color['blue-50'],
blueHover: tokens.color['blue-60'], blueHover: tokens.color['blue-60'],
green: tokens.color['green-50'],
greenHover: tokens.color['green-60'],
yellow: tokens.color['yellow-50'], yellow: tokens.color['yellow-50'],
yellowHover: tokens.color['yellow-60'], yellowHover: tokens.color['yellow-60'],
orange: tokens.color['orange-50'], orange: tokens.color['orange-50'],
orangeHover: tokens.color['orange-60'], orangeHover: tokens.color['orange-60'],
red: tokens.color['red-50'],
redHover: tokens.color['red-60'],
pink: tokens.color['pink-50'], pink: tokens.color['pink-50'],
pinkHover: tokens.color['pink-60'], pinkHover: tokens.color['pink-60'],
brown: tokens.color['brown-50'], copper: tokens.color['cooper-50'],
brownHover: tokens.color['brown-60'], copperHover: tokens.color['cooper-50'],
beige: tokens.color['beige-50'], camel: tokens.color['camel-50'],
beigeHover: tokens.color['beige-60'], camelHover: tokens.color['camel-50'],
placeHolderColor: tokens.color['neutral-40'], placeHolderColor: tokens.color['neutral-40'],
placeHolderColorBlurred: tokens.color['neutral-80-opa-40'], placeHolderColorBlurred: tokens.color['neutral-80/40'],
iconButtonBackground: tokens.color['neutral-10'], iconButtonBackground: tokens.color['neutral-10'],
iconButtonBackgroundHover: tokens.color['neutral-20'], iconButtonBackgroundHover: tokens.color['neutral-20'],
iconButtonBackgroundSelected: tokens.color['neutral-20'], iconButtonBackgroundSelected: tokens.color['neutral-20'],
iconButtonBorderSelected: tokens.color['neutral-30'], iconButtonBorderSelected: tokens.color['neutral-30'],
iconButtonBackgroundBlurred: tokens.color['neutral-80-opa-5'], iconButtonBackgroundBlurred: tokens.color['neutral-80/5'],
iconButtonBackgroundBlurredHover: tokens.color['neutral-80-opa-10'], iconButtonBackgroundBlurredHover: tokens.color['neutral-80/10'],
iconButtonBackgroundBlurredSelected: tokens.color['neutral-80-opa-10'], iconButtonBackgroundBlurredSelected: tokens.color['neutral-80/10'],
iconButtonBorderBlurredSelected: tokens.color['neutral-80-opa-5'], iconButtonBorderBlurredSelected: tokens.color['neutral-80/5'],
iconButtonOutlineBackgroundSelected: tokens.color['neutral-10'], iconButtonOutlineBackgroundSelected: tokens.color['neutral-10'],
iconButtonOutlineBorder: tokens.color['neutral-20'], iconButtonOutlineBorder: tokens.color['neutral-20'],
iconButtonOutlineBorderHover: tokens.color['neutral-30'], iconButtonOutlineBorderHover: tokens.color['neutral-30'],
iconButtonOutlineBorderSelected: tokens.color['neutral-20'], iconButtonOutlineBorderSelected: tokens.color['neutral-20'],
iconButtonOutBackgroundBlurredSelected: tokens.color['neutral-10'], iconButtonOutBackgroundBlurredSelected: tokens.color['neutral-10'],
iconButtonOutlineBorderBlurred: tokens.color['neutral-80-opa-10'], iconButtonOutlineBorderBlurred: tokens.color['neutral-80/10'],
iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80-opa-20'], iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80/20'],
iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80-opa-10'], iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80/10'],
iconButtonColor: tokens.color['neutral-50'], iconButtonColor: tokens.color['neutral-50'],
iconButtonColorSelected: tokens.color['neutral-100'], iconButtonColorSelected: tokens.color['neutral-100'],
iconButtonColorBlurred: tokens.color['neutral-100'], iconButtonColorBlurred: tokens.color['neutral-100'],
iconButtonColorOutline: tokens.color['neutral-50'], iconButtonColorOutline: tokens.color['neutral-50'],
iconButtonColorOutlineSelected: tokens.color['neutral-100'], iconButtonColorOutlineSelected: tokens.color['neutral-100'],
iconButtonColorOutlineBlurred: tokens.color['neutral-80-opa-70'], iconButtonColorOutlineBlurred: tokens.color['neutral-80/70'],
blurBackground: tokens.color['white-70'], blurBackground: tokens.color['white/70'],
}) })
// note: we set up a single consistent base type to validate the rest: // note: we set up a single consistent base type to validate the rest:
@ -66,34 +62,30 @@ type BaseTheme = typeof light
const dark: BaseTheme = createTheme({ const dark: BaseTheme = createTheme({
background: tokens.color['neutral-95'], background: tokens.color['neutral-95'],
textPrimary: tokens.color['white-100'], textPrimary: tokens.color['white-100'],
primary: tokens.color['primary-60'], primary: tokens.color['blue-60'],
primaryHover: tokens.color['primary-50'], primaryHover: tokens.color['blue-50'],
success: tokens.color['success-60'], success: tokens.color['success-60'],
successHover: tokens.color['success-50'], successHover: tokens.color['success-50'],
danger: tokens.color['danger-60'], danger: tokens.color['danger-60'],
dangerHover: tokens.color['danger-50'], dangerHover: tokens.color['danger-50'],
purple: tokens.color['purple-60'], purple: tokens.color['purple-60'],
purpleHover: tokens.color['purple-50'], purpleHover: tokens.color['purple-50'],
indigo: tokens.color['indigo-60'], army: tokens.color['army-60'],
indigoHover: tokens.color['indigo-50'], armyHover: tokens.color['army-50'],
turquoise: tokens.color['turquoise-60'], turquoise: tokens.color['turquoise-60'],
turquoiseHover: tokens.color['turquoise-50'], turquoiseHover: tokens.color['turquoise-50'],
blue: tokens.color['blue-60'], blue: tokens.color['blue-60'],
blueHover: tokens.color['blue-50'], blueHover: tokens.color['blue-50'],
green: tokens.color['green-60'],
greenHover: tokens.color['green-50'],
yellow: tokens.color['yellow-60'], yellow: tokens.color['yellow-60'],
yellowHover: tokens.color['yellow-50'], yellowHover: tokens.color['yellow-50'],
orange: tokens.color['orange-60'], orange: tokens.color['orange-60'],
orangeHover: tokens.color['orange-50'], orangeHover: tokens.color['orange-50'],
red: tokens.color['red-60'],
redHover: tokens.color['red-50'],
pink: tokens.color['pink-60'], pink: tokens.color['pink-60'],
pinkHover: tokens.color['pink-50'], pinkHover: tokens.color['pink-50'],
brown: tokens.color['brown-60'], copper: tokens.color['cooper-60'],
brownHover: tokens.color['brown-50'], copperHover: tokens.color['cooper-50'],
beige: tokens.color['beige-60'], camel: tokens.color['camel-60'],
beigeHover: tokens.color['beige-50'], camelHover: tokens.color['camel-50'],
placeHolderColor: tokens.color['neutral-50'], placeHolderColor: tokens.color['neutral-50'],
placeHolderColorBlurred: tokens.color['white-30'], placeHolderColorBlurred: tokens.color['white-30'],
iconButtonBackground: tokens.color['neutral-90'], iconButtonBackground: tokens.color['neutral-90'],
@ -104,7 +96,7 @@ const dark: BaseTheme = createTheme({
iconButtonBackgroundBlurredHover: tokens.color['white-10'], iconButtonBackgroundBlurredHover: tokens.color['white-10'],
iconButtonBackgroundBlurredSelected: tokens.color['white-10'], iconButtonBackgroundBlurredSelected: tokens.color['white-10'],
iconButtonBorderBlurredSelected: tokens.color['white-5'], iconButtonBorderBlurredSelected: tokens.color['white-5'],
iconButtonOutlineBackgroundSelected: tokens.color['neutral-80-opa-70'], iconButtonOutlineBackgroundSelected: tokens.color['neutral-80/70'],
iconButtonOutlineBorder: tokens.color['neutral-80'], iconButtonOutlineBorder: tokens.color['neutral-80'],
iconButtonOutlineBorderHover: tokens.color['neutral-70'], iconButtonOutlineBorderHover: tokens.color['neutral-70'],
iconButtonOutlineBorderSelected: tokens.color['neutral-70'], iconButtonOutlineBorderSelected: tokens.color['neutral-70'],
@ -118,7 +110,7 @@ const dark: BaseTheme = createTheme({
iconButtonColorOutline: tokens.color['neutral-40'], iconButtonColorOutline: tokens.color['neutral-40'],
iconButtonColorOutlineSelected: tokens.color['white-100'], iconButtonColorOutlineSelected: tokens.color['white-100'],
iconButtonColorOutlineBlurred: tokens.color['white-100'], iconButtonColorOutlineBlurred: tokens.color['white-100'],
blurBackground: tokens.color['neutral-80-opa-70'], blurBackground: tokens.color['neutral-70'],
}) })
const allThemes = { const allThemes = {

2
packages/components/src/toast/toast.tsx
View File

@ -74,7 +74,7 @@ const Base = styled(Stack, {
gap: 12, gap: 12,
width: 351, width: 351,
minHeight: 40, minHeight: 40,
backgroundColor: '$neutral-80-opa-70', backgroundColor: '$neutral-80/70',
borderRadius: '$12', borderRadius: '$12',
justifyContent: 'space-between', justifyContent: 'space-between',

213
packages/components/src/tokens.ts
View File

@ -1,187 +1,44 @@
import { customisation } from '@status-im/colors' import {
blur,
customisation,
danger,
networks,
neutral,
security,
social,
success,
white,
} from '@status-im/colors'
import { createTokens } from '@tamagui/core' import { createTokens } from '@tamagui/core'
import { size, space, zIndex } from '@tamagui/theme-base' import { size, space, zIndex } from '@tamagui/theme-base'
function prefixColors(prefix: string, color: Record<string, string>) {
return Object.entries(color).reduce((acc, [key, value]) => {
acc[`${prefix}-${key}`] = value
return acc
}, {} as Record<string, string>)
}
export const tokens = createTokens({ export const tokens = createTokens({
color: { color: {
...blur,
...customisation, ...customisation,
'neutral-5': 'hsla(220, 18%, 97%, 1)', ...(prefixColors('danger', danger) as {
'neutral-10': 'hsla(216, 20%, 95%, 1)', [K in keyof typeof danger as `danger-${K}`]: (typeof danger)[K]
'neutral-20': 'hsla(214, 17%, 92%, 1)', }),
'neutral-30': 'hsla(213, 15%, 88%, 1)', ...networks,
'neutral-40': 'hsla(219, 17%, 69%, 1)', ...(prefixColors('neutral', neutral) as {
'neutral-50': 'hsla(218, 14%, 45%, 1)', [K in keyof typeof neutral as `neutral-${K}`]: (typeof neutral)[K]
'neutral-60': 'hsla(219, 28%, 26%, 1)', }),
'neutral-70': 'hsla(219, 35%, 19%, 1)', ...security,
'neutral-80': 'hsla(219, 38%, 17%, 1)', ...social,
'neutral-90': 'hsla(219, 42%, 13%, 1)', ...(prefixColors('success', success) as {
'neutral-95': 'hsla(218, 48%, 10%, 1)', [K in keyof typeof success as `success-${K}`]: (typeof success)[K]
'neutral-100': 'hsla(218, 51%, 7%, 1)', }),
'neutral-5-opa-70': 'hsla(220, 18%, 97%, 0.7)', ...(prefixColors('white', white) as {
'neutral-90-opa-70': 'hsla(219, 42%, 13%, 0.7)', [K in keyof typeof white as `white-${K}`]: (typeof white)[K]
'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)', transparent: 'hsla(0, 0%, 0%, 0)',
}, },
size, size,

2
packages/components/src/user-list/user-list.tsx
View File

@ -28,7 +28,7 @@ const UserList = (props: Props) => {
alignItems="center" alignItems="center"
cursor="pointer" cursor="pointer"
hoverStyle={{ hoverStyle={{
backgroundColor: '$primary-50-opa-5', backgroundColor: '$blue/5',
}} }}
> >
<Avatar <Avatar