From d796765ef3eeff8f0c5ff2cb2134034745ec78b8 Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:56:23 +0200
Subject: [PATCH] sync colors (#493)

* sync colors

* f

* a ch

* f
---
 .changeset/stale-ducks-chew.md                |   5 +
 packages/colors/src/customisation.ts          |   1 +
 packages/components/src/avatar/avatar.tsx     |   2 +-
 .../components/src/banner/banner.stories.tsx  |  14 +-
 packages/components/src/banner/banner.tsx     |   7 +-
 packages/components/src/button/button.tsx     |  12 +-
 packages/components/src/channel/channel.tsx   |   4 +-
 packages/components/src/checkbox/checkbox.tsx |  12 +-
 .../src/community/topbar/topbar.tsx           |   8 +-
 .../src/context-tag/context-tag.tsx           |   8 +-
 packages/components/src/counter/counter.tsx   |   6 +-
 .../divider-new-messages.stories.tsx          |   2 +-
 .../src/dynamic-button/dynamic-button.tsx     |  12 +-
 .../src/icon-button/icon-button.tsx           |  38 ++--
 .../components/src/icons/icons.stories.tsx    |   2 +-
 .../src/information-box/information-box.tsx   |   8 +-
 packages/components/src/input/input.tsx       |   2 +-
 .../src/messages/components/reactions.tsx     |   2 +-
 packages/components/src/messages/message.tsx  |   2 +-
 packages/components/src/shortcut/shortcut.tsx |   4 +-
 .../src/skeleton/topbar-skeleton.tsx          |   2 +-
 packages/components/src/step/step.tsx         |   2 +-
 .../added-users-message-content.tsx           |   2 +-
 .../components/deleted-message-content.tsx    |   2 +-
 .../components/pinned-message-content.tsx     |   2 +-
 .../src/system-message/system-message.tsx     |   4 +-
 packages/components/src/tag/tag.tsx           |  12 +-
 packages/components/src/themes.ts             |  64 +++---
 packages/components/src/toast/toast.tsx       |   2 +-
 packages/components/src/tokens.ts             | 213 +++---------------
 .../components/src/user-list/user-list.tsx    |   2 +-
 31 files changed, 151 insertions(+), 307 deletions(-)
 create mode 100644 .changeset/stale-ducks-chew.md

diff --git a/.changeset/stale-ducks-chew.md b/.changeset/stale-ducks-chew.md
new file mode 100644
index 00000000..592a1bb6
--- /dev/null
+++ b/.changeset/stale-ducks-chew.md
@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+sync colors
diff --git a/packages/colors/src/customisation.ts b/packages/colors/src/customisation.ts
index 2317f5c3..de1225c5 100644
--- a/packages/colors/src/customisation.ts
+++ b/packages/colors/src/customisation.ts
@@ -20,6 +20,7 @@ export const customisation = {
   'camel/30': 'rgba(199 143 103 / 30%)',
   'camel/40': 'rgba(199 143 103 / 40%)',
   'camel/5': 'rgba(199 143 103 / 5%)',
+  // fixme: rename to copper in Figma
   'cooper-50': 'rgba(203 98 86 / 100%)',
   'cooper-60': 'rgba(162 78 69 / 100%)',
   'cooper/10': 'rgba(203 98 86 / 10%)',
diff --git a/packages/components/src/avatar/avatar.tsx b/packages/components/src/avatar/avatar.tsx
index 0e3c089c..b4c1752f 100644
--- a/packages/components/src/avatar/avatar.tsx
+++ b/packages/components/src/avatar/avatar.tsx
@@ -188,7 +188,7 @@ const Avatar = (props: AvatarProps) => {
     }
 
     if (props.type === 'channel') {
-      return '$blue-50-opa-20'
+      return '$blue/20'
     }
 
     return '$neutral-95'
diff --git a/packages/components/src/banner/banner.stories.tsx b/packages/components/src/banner/banner.stories.tsx
index af3c4b2b..54bdd4d4 100644
--- a/packages/components/src/banner/banner.stories.tsx
+++ b/packages/components/src/banner/banner.stories.tsx
@@ -40,7 +40,7 @@ export const NoCount: Story = {
 
 export const NetworkStateConnecting: Story = {
   args: {
-    backgroundColor: '$neutral-80-opa-5',
+    backgroundColor: '$neutral-80/5',
     icon: <RecentIcon size={20} />,
     children: 'Connecting...',
   },
@@ -48,7 +48,7 @@ export const NetworkStateConnecting: Story = {
 
 export const NetworkStateError: Story = {
   args: {
-    backgroundColor: '$danger-50-opa-20',
+    backgroundColor: '$danger-/20',
     icon: <AlertIcon size={20} />,
     children: 'Network is down',
   },
@@ -62,16 +62,10 @@ export const AllVariants: Story = {
         Banner message
       </Banner>
       <Banner count={5}>Banner message</Banner>
-      <Banner
-        backgroundColor="$neutral-80-opa-5"
-        icon={<RecentIcon size={20} />}
-      >
+      <Banner backgroundColor="$neutral-80/20" icon={<RecentIcon size={20} />}>
         Connecting...
       </Banner>
-      <Banner
-        backgroundColor="$danger-50-opa-20"
-        icon={<AlertIcon size={20} />}
-      >
+      <Banner backgroundColor="$danger-/20" icon={<AlertIcon size={20} />}>
         Network is down
       </Banner>
       <Banner icon={<PinIcon size={20} />}>Banner message</Banner>
diff --git a/packages/components/src/banner/banner.tsx b/packages/components/src/banner/banner.tsx
index 8ca884e2..c79620a3 100644
--- a/packages/components/src/banner/banner.tsx
+++ b/packages/components/src/banner/banner.tsx
@@ -14,12 +14,7 @@ type Props = {
 }
 
 const Banner = (props: Props) => {
-  const {
-    icon = null,
-    children,
-    count,
-    backgroundColor = '$primary-50-opa-20',
-  } = props
+  const { icon = null, children, count, backgroundColor = '$blue/20' } = props
 
   return (
     <Base backgroundColor={backgroundColor}>
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index 31a4e1c0..a8eaf692 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -119,10 +119,10 @@ const Base = styled(View, {
   variants: {
     variant: {
       primary: {
-        backgroundColor: '$primary-50',
-        hoverStyle: { backgroundColor: '$primary-60' },
+        backgroundColor: '$blue-50',
+        hoverStyle: { backgroundColor: '$blue-60' },
         // TODO: update background color
-        pressStyle: { backgroundColor: '$primary-50' },
+        pressStyle: { backgroundColor: '$blue-50' },
       },
       positive: {
         backgroundColor: '$success-50',
@@ -174,9 +174,9 @@ const Base = styled(View, {
         pressStyle: { backgroundColor: '$orange-50' },
       },
       army: {
-        backgroundColor: '$indigo-50',
-        hoverStyle: { backgroundColor: '$indigo-60' },
-        pressStyle: { backgroundColor: '$indigo-50' },
+        backgroundColor: '$army-50',
+        hoverStyle: { backgroundColor: '$army-60' },
+        pressStyle: { backgroundColor: '$army-50' },
       },
       turquoise: {
         backgroundColor: '$turquoise-50',
diff --git a/packages/components/src/channel/channel.tsx b/packages/components/src/channel/channel.tsx
index 74fa4769..022345a7 100644
--- a/packages/components/src/channel/channel.tsx
+++ b/packages/components/src/channel/channel.tsx
@@ -126,10 +126,10 @@ const Base = styled(Stack, {
   variants: {
     state: {
       active: {
-        backgroundColor: '$primary-50-opa-5',
+        backgroundColor: '$blue/5',
       },
       selected: {
-        backgroundColor: '$primary-50-opa-10',
+        backgroundColor: '$blue/10',
       },
     },
   },
diff --git a/packages/components/src/checkbox/checkbox.tsx b/packages/components/src/checkbox/checkbox.tsx
index 4abe9d93..9730d7ae 100644
--- a/packages/components/src/checkbox/checkbox.tsx
+++ b/packages/components/src/checkbox/checkbox.tsx
@@ -90,18 +90,18 @@ const Base = styled(Root, {
     },
     selected: {
       filled: {
-        hoverStyle: { backgroundColor: '$primary-60' },
-        pressStyle: { backgroundColor: '$primary-60' },
+        hoverStyle: { backgroundColor: '$blue-60' },
+        pressStyle: { backgroundColor: '$blue-60' },
       },
       outline: {
-        backgroundColor: '$primary-50',
-        borderColor: '$primary-50',
+        backgroundColor: '$blue-50',
+        borderColor: '$blue-50',
 
         hoverStyle: {
-          backgroundColor: '$primary-60',
+          backgroundColor: '$blue-60',
         },
         pressStyle: {
-          backgroundColor: '$primary-60',
+          backgroundColor: '$blue-60',
         },
       },
     },
diff --git a/packages/components/src/community/topbar/topbar.tsx b/packages/components/src/community/topbar/topbar.tsx
index ce7d490d..0a7163b3 100644
--- a/packages/components/src/community/topbar/topbar.tsx
+++ b/packages/components/src/community/topbar/topbar.tsx
@@ -59,7 +59,7 @@ const Topbar = (props: Props) => {
         padding={16}
         backgroundColor={'$blurBackground'}
         borderBottomWidth={1}
-        borderColor={blur ? 'transparent' : '$neutral-80-opa-10'}
+        borderColor={blur ? 'transparent' : '$neutral-80/10'}
       >
         <Stack flexDirection="row" alignItems="center" flexWrap="wrap">
           <Stack marginRight={12} $gtSm={{ display: 'none' }}>
@@ -76,10 +76,10 @@ const Topbar = (props: Props) => {
             {title}
           </Text>
           <Stack marginLeft={4}>
-            <LockedIcon size={20} color="$neutral-80-opa-40" />
+            <LockedIcon size={20} color="$neutral-80/40" />
           </Stack>
           <Stack
-            backgroundColor="$neutral-80-opa-10"
+            backgroundColor="$neutral-80/10"
             marginHorizontal={12}
             height={16}
             width={1}
@@ -88,7 +88,7 @@ const Topbar = (props: Props) => {
         </Stack>
 
         <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}
           </Text>
         </Stack>
diff --git a/packages/components/src/context-tag/context-tag.tsx b/packages/components/src/context-tag/context-tag.tsx
index 3b44b7e0..aa992370 100644
--- a/packages/components/src/context-tag/context-tag.tsx
+++ b/packages/components/src/context-tag/context-tag.tsx
@@ -194,7 +194,7 @@ const ContextTag = (props: Props) => {
               type="icon"
               size={avatarSizes[size]}
               icon={<PlayIcon size={16} />}
-              backgroundColor="$primary-50"
+              backgroundColor="$blue-50"
               color="$white-100"
             />
             <Label size={textSize}>{props.audioLength}</Label>
@@ -220,7 +220,7 @@ const ContextTag = (props: Props) => {
               type="icon"
               size={avatarSizes[size]}
               backgroundColor="$purple-50"
-              color="$white-70"
+              color="$white/70"
               icon={props.group.icon}
             />
             <Label size={textSize}>{props.group.name}</Label>
@@ -300,13 +300,13 @@ const Base = styled(View, {
     outline: {
       true: {
         borderWidth: '1px',
-        borderColor: '$primary-50',
+        borderColor: '$blue-50',
         borderStyle: 'solid',
       },
     },
     blur: {
       true: {
-        backgroundColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/5',
       },
       false: {
         backgroundColor: '$neutral-10',
diff --git a/packages/components/src/counter/counter.tsx b/packages/components/src/counter/counter.tsx
index 0f77cbd2..ec0340be 100644
--- a/packages/components/src/counter/counter.tsx
+++ b/packages/components/src/counter/counter.tsx
@@ -37,7 +37,7 @@ const Base = styled(Stack, {
 })
 
 const Content = styled(Stack, {
-  backgroundColor: '$primary-50',
+  backgroundColor: '$blue-50',
   paddingHorizontal: 3,
   paddingVertical: 0,
   borderRadius: '$6',
@@ -53,10 +53,10 @@ const Content = styled(Stack, {
   variants: {
     type: {
       default: {
-        backgroundColor: '$primary-50',
+        backgroundColor: '$blue-50',
       },
       secondary: {
-        backgroundColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/5',
       },
       grey: {
         backgroundColor: '$neutral-10',
diff --git a/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx b/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx
index 5629d824..e6306246 100644
--- a/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx
+++ b/packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx
@@ -22,7 +22,7 @@ export const Default: Story = {
   render: () => {
     return (
       <Stack gap={24}>
-        <DividerNewMessages color="$primary-50" />
+        <DividerNewMessages color="$blue-50" />
         <DividerNewMessages color="$yellow-50" />
         <DividerNewMessages color="$turquoise-50" />
         {/* <NewMessages color="$cooper-50" /> */}
diff --git a/packages/components/src/dynamic-button/dynamic-button.tsx b/packages/components/src/dynamic-button/dynamic-button.tsx
index b495eff1..38289936 100644
--- a/packages/components/src/dynamic-button/dynamic-button.tsx
+++ b/packages/components/src/dynamic-button/dynamic-button.tsx
@@ -67,15 +67,15 @@ const Button = styled(View, {
   variants: {
     type: {
       mention: {
-        backgroundColor: '$primary-50',
-        hoverStyle: { backgroundColor: '$primary-60' },
-        pressStyle: { backgroundColor: '$primary-50' },
+        backgroundColor: '$blue-50',
+        hoverStyle: { backgroundColor: '$blue-60' },
+        pressStyle: { backgroundColor: '$blue-50' },
       },
 
       notification: {
-        backgroundColor: '$neutral-80-opa-70',
-        hoverStyle: { backgroundColor: '$neutral-90-opa-70' },
-        pressStyle: { backgroundColor: '$neutral-80-opa-80' },
+        backgroundColor: '$neutral-80/70',
+        hoverStyle: { backgroundColor: '$neutral-90/70' },
+        pressStyle: { backgroundColor: '$neutral-80/80' },
       },
     },
 
diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx
index 7cb4f4c0..ba88a9d1 100644
--- a/packages/components/src/icon-button/icon-button.tsx
+++ b/packages/components/src/icon-button/icon-button.tsx
@@ -28,8 +28,8 @@ const IconButton = (props: Props, ref: Ref<View>) => {
 
   const { pressableProps, color } = usePressableColors(
     {
-      default: blur ? '$neutral-80-opa-70' : '$neutral-50',
-      hover: blur ? '$neutral-80-opa-70' : '$neutral-50',
+      default: blur ? '$neutral-80/70' : '$neutral-50',
+      hover: blur ? '$neutral-80/70' : '$neutral-50',
       press: '$neutral-100',
       active: '$neutral-100',
     },
@@ -130,49 +130,49 @@ const Base = styled(View, {
 
     variantBlur: {
       default: {
-        backgroundColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/5',
         borderColor: 'transparent',
-        hoverStyle: { backgroundColor: '$neutral-80-opa-10' },
+        hoverStyle: { backgroundColor: '$neutral-80/10' },
         pressStyle: {
-          backgroundColor: '$neutral-80-opa-10',
-          borderColor: '$neutral-80-opa-5',
+          backgroundColor: '$neutral-80/10',
+          borderColor: '$neutral-80/5',
         },
       },
 
       outline: {
         backgroundColor: 'transparent',
-        borderColor: '$neutral-80-opa-10',
-        hoverStyle: { borderColor: '$neutral-80-opa-20' },
+        borderColor: '$neutral-80/10',
+        hoverStyle: { borderColor: '$neutral-80/20' },
         pressStyle: {
-          borderColor: '$neutral-80-opa-10',
-          backgroundColor: '$neutral-80-opa-5',
+          borderColor: '$neutral-80/10',
+          backgroundColor: '$neutral-80/5',
         },
       },
 
       ghost: {
         backgroundColor: 'transparent',
-        hoverStyle: { backgroundColor: '$neutral-80-opa-5' },
+        hoverStyle: { backgroundColor: '$neutral-80/5' },
         pressStyle: {
-          backgroundColor: '$neutral-80-opa-5',
-          borderColor: '$neutral-80-opa-10',
+          backgroundColor: '$neutral-80/5',
+          borderColor: '$neutral-80/10',
         },
       },
     },
 
     activeBlur: {
       default: {
-        backgroundColor: '$neutral-80-opa-10',
-        borderColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/10',
+        borderColor: '$neutral-80/5',
       },
 
       outline: {
-        borderColor: '$neutral-80-opa-10',
-        backgroundColor: '$neutral-80-opa-5',
+        borderColor: '$neutral-80/10',
+        backgroundColor: '$neutral-80/5',
       },
 
       ghost: {
-        backgroundColor: '$neutral-80-opa-5',
-        borderColor: '$neutral-80-opa-10',
+        backgroundColor: '$neutral-80/5',
+        borderColor: '$neutral-80/10',
       },
     },
 
diff --git a/packages/components/src/icons/icons.stories.tsx b/packages/components/src/icons/icons.stories.tsx
index e0e3f1c0..c479f32f 100644
--- a/packages/components/src/icons/icons.stories.tsx
+++ b/packages/components/src/icons/icons.stories.tsx
@@ -32,7 +32,7 @@ export const Overview: Story = {
   args: {
     search: '',
     size: 20,
-    // color: '$primary-50',
+    // color: '$blue-50',
   },
 
   argTypes: {
diff --git a/packages/components/src/information-box/information-box.tsx b/packages/components/src/information-box/information-box.tsx
index ac8913bb..64e8ec6f 100644
--- a/packages/components/src/information-box/information-box.tsx
+++ b/packages/components/src/information-box/information-box.tsx
@@ -122,12 +122,12 @@ const Base = styled(Stack, {
         borderColor: '$neutral-20',
       },
       information: {
-        backgroundColor: '$blue-50-opa-5',
-        borderColor: '$blue-50-opa-10',
+        backgroundColor: '$blue/5',
+        borderColor: '$blue/10',
       },
       error: {
-        backgroundColor: '$danger-50-opa-5',
-        borderColor: '$danger-50-opa-10',
+        backgroundColor: '$danger-/5',
+        borderColor: '$danger-/10',
       },
     },
   },
diff --git a/packages/components/src/input/input.tsx b/packages/components/src/input/input.tsx
index 0b7a0712..88ed0731 100644
--- a/packages/components/src/input/input.tsx
+++ b/packages/components/src/input/input.tsx
@@ -218,7 +218,7 @@ const InputContainer = styled(Stack, {
     },
     error: {
       true: {
-        borderColor: '$danger-50-opa-40',
+        borderColor: '$danger-/40',
       },
     },
 
diff --git a/packages/components/src/messages/components/reactions.tsx b/packages/components/src/messages/components/reactions.tsx
index cd088e60..ac6878ce 100644
--- a/packages/components/src/messages/components/reactions.tsx
+++ b/packages/components/src/messages/components/reactions.tsx
@@ -79,7 +79,7 @@ const Reaction = (props: ReactionProps) => {
                 and
               </Text>
               <Stack
-                backgroundColor="$turquoise-50-opa-10"
+                backgroundColor="$turquoise/10"
                 borderRadius="$6"
                 paddingHorizontal={4}
               >
diff --git a/packages/components/src/messages/message.tsx b/packages/components/src/messages/message.tsx
index ee51983a..5cf336f1 100644
--- a/packages/components/src/messages/message.tsx
+++ b/packages/components/src/messages/message.tsx
@@ -39,7 +39,7 @@ const Base = styled(Stack, {
 
     pinned: {
       true: {
-        backgroundColor: '$blue-50-opa-5',
+        backgroundColor: '$blue/5',
       },
     },
   } as const,
diff --git a/packages/components/src/shortcut/shortcut.tsx b/packages/components/src/shortcut/shortcut.tsx
index 68235cbd..dc3a569b 100644
--- a/packages/components/src/shortcut/shortcut.tsx
+++ b/packages/components/src/shortcut/shortcut.tsx
@@ -71,8 +71,8 @@ const Base = styled(Stack, {
   variants: {
     variant: {
       primary: {
-        backgroundColor: '$primary-50',
-        borderColor: '$primary-60',
+        backgroundColor: '$blue-50',
+        borderColor: '$blue-60',
       },
       secondary: {
         backgroundColor: '$neutral-10',
diff --git a/packages/components/src/skeleton/topbar-skeleton.tsx b/packages/components/src/skeleton/topbar-skeleton.tsx
index 1b584ee3..7a10a3b9 100644
--- a/packages/components/src/skeleton/topbar-skeleton.tsx
+++ b/packages/components/src/skeleton/topbar-skeleton.tsx
@@ -16,7 +16,7 @@ const TopbarSkeleton = () => {
           px={16}
           backgroundColor={'$blurBackground'}
           borderBottomWidth={1}
-          borderColor={'$neutral-80-opa-10'}
+          borderColor={'$neutral-80/10'}
           width="100%"
         >
           <Stack
diff --git a/packages/components/src/step/step.tsx b/packages/components/src/step/step.tsx
index 54da3c8a..27bfbe5a 100644
--- a/packages/components/src/step/step.tsx
+++ b/packages/components/src/step/step.tsx
@@ -63,7 +63,7 @@ const Content = styled(Stack, {
         backgroundColor: '$blue-50',
       },
       active: {
-        backgroundColor: '$blue-50-opa-10',
+        backgroundColor: '$blue/10',
       },
     },
   },
diff --git a/packages/components/src/system-message/components/added-users-message-content.tsx b/packages/components/src/system-message/components/added-users-message-content.tsx
index 0364134a..aa0464c0 100644
--- a/packages/components/src/system-message/components/added-users-message-content.tsx
+++ b/packages/components/src/system-message/components/added-users-message-content.tsx
@@ -23,7 +23,7 @@ const AddedUsersMessageContent = (props: Props) => {
         // fixme: map relative avatar size to icon size
         icon={<AddUserIcon size={20} />}
         size={32}
-        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$blue/5'}
         color="$blue-50"
       />
       <Stack flexDirection="row" gap={2} flexBasis="max-content" flexGrow={1}>
diff --git a/packages/components/src/system-message/components/deleted-message-content.tsx b/packages/components/src/system-message/components/deleted-message-content.tsx
index b040ee93..56bb2f58 100644
--- a/packages/components/src/system-message/components/deleted-message-content.tsx
+++ b/packages/components/src/system-message/components/deleted-message-content.tsx
@@ -26,7 +26,7 @@ const DeletedMessageContent = (props: Props) => {
         type="icon"
         size={32}
         icon={<TrashIcon size={20} />}
-        backgroundColor={state === 'landed' ? '$transparent' : '$red-50-opa-5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$danger-/5'}
         color="$neutral-100"
       />
       <Stack
diff --git a/packages/components/src/system-message/components/pinned-message-content.tsx b/packages/components/src/system-message/components/pinned-message-content.tsx
index 45279823..5300da72 100644
--- a/packages/components/src/system-message/components/pinned-message-content.tsx
+++ b/packages/components/src/system-message/components/pinned-message-content.tsx
@@ -31,7 +31,7 @@ const PinnedMessageContent = (props: Props) => {
         type="icon"
         size={32}
         icon={<PinIcon size={20} />}
-        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$blue/5'}
         color="$neutral-100"
       />
       <Stack
diff --git a/packages/components/src/system-message/system-message.tsx b/packages/components/src/system-message/system-message.tsx
index 119b703e..c21e08ac 100644
--- a/packages/components/src/system-message/system-message.tsx
+++ b/packages/components/src/system-message/system-message.tsx
@@ -111,10 +111,10 @@ const Base = styled(View, {
         backgroundColor: '$neutral-5',
       },
       landed: {
-        backgroundColor: '$blue-50-opa-5',
+        backgroundColor: '$blue/5',
       },
       landed_deleted: {
-        backgroundColor: '$red-50-opa-5',
+        backgroundColor: '$danger-/5',
       },
     },
   },
diff --git a/packages/components/src/tag/tag.tsx b/packages/components/src/tag/tag.tsx
index ca14f990..9db59412 100644
--- a/packages/components/src/tag/tag.tsx
+++ b/packages/components/src/tag/tag.tsx
@@ -134,16 +134,16 @@ const Base = styled(View, {
     },
     selected: {
       true: {
-        backgroundColor: '$primary-50-opa-10',
-        borderColor: '$primary-50',
+        backgroundColor: '$blue/10',
+        borderColor: '$blue-50',
 
         hoverStyle: {
-          backgroundColor: '$primary-50-opa-20',
-          borderColor: '$primary-60',
+          backgroundColor: '$blue/20',
+          borderColor: '$blue-60',
         },
         pressStyle: {
-          backgroundColor: '$primary-50-opa-20',
-          borderColor: '$primary-60',
+          backgroundColor: '$blue/20',
+          borderColor: '$blue-60',
         },
       },
     },
diff --git a/packages/components/src/themes.ts b/packages/components/src/themes.ts
index 71d46ee3..a9f3ae8e 100644
--- a/packages/components/src/themes.ts
+++ b/packages/components/src/themes.ts
@@ -5,59 +5,55 @@ 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'],
+  primary: tokens.color['blue-50'],
+  primaryHover: tokens.color['blue-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'],
+  army: tokens.color['army-50'],
+  armyHover: tokens.color['army-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'],
+  copper: tokens.color['cooper-50'],
+  copperHover: tokens.color['cooper-50'],
+  camel: tokens.color['camel-50'],
+  camelHover: tokens.color['camel-50'],
   placeHolderColor: tokens.color['neutral-40'],
-  placeHolderColorBlurred: tokens.color['neutral-80-opa-40'],
+  placeHolderColorBlurred: tokens.color['neutral-80/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'],
+  iconButtonBackgroundBlurred: tokens.color['neutral-80/5'],
+  iconButtonBackgroundBlurredHover: tokens.color['neutral-80/10'],
+  iconButtonBackgroundBlurredSelected: tokens.color['neutral-80/10'],
+  iconButtonBorderBlurredSelected: tokens.color['neutral-80/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'],
+  iconButtonOutlineBorderBlurred: tokens.color['neutral-80/10'],
+  iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80/20'],
+  iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80/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'],
+  iconButtonColorOutlineBlurred: tokens.color['neutral-80/70'],
+  blurBackground: tokens.color['white/70'],
 })
 
 // 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({
   background: tokens.color['neutral-95'],
   textPrimary: tokens.color['white-100'],
-  primary: tokens.color['primary-60'],
-  primaryHover: tokens.color['primary-50'],
+  primary: tokens.color['blue-60'],
+  primaryHover: tokens.color['blue-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'],
+  army: tokens.color['army-60'],
+  armyHover: tokens.color['army-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'],
+  copper: tokens.color['cooper-60'],
+  copperHover: tokens.color['cooper-50'],
+  camel: tokens.color['camel-60'],
+  camelHover: tokens.color['camel-50'],
   placeHolderColor: tokens.color['neutral-50'],
   placeHolderColorBlurred: tokens.color['white-30'],
   iconButtonBackground: tokens.color['neutral-90'],
@@ -104,7 +96,7 @@ const dark: BaseTheme = createTheme({
   iconButtonBackgroundBlurredHover: tokens.color['white-10'],
   iconButtonBackgroundBlurredSelected: tokens.color['white-10'],
   iconButtonBorderBlurredSelected: tokens.color['white-5'],
-  iconButtonOutlineBackgroundSelected: tokens.color['neutral-80-opa-70'],
+  iconButtonOutlineBackgroundSelected: tokens.color['neutral-80/70'],
   iconButtonOutlineBorder: tokens.color['neutral-80'],
   iconButtonOutlineBorderHover: tokens.color['neutral-70'],
   iconButtonOutlineBorderSelected: tokens.color['neutral-70'],
@@ -118,7 +110,7 @@ const dark: BaseTheme = createTheme({
   iconButtonColorOutline: tokens.color['neutral-40'],
   iconButtonColorOutlineSelected: tokens.color['white-100'],
   iconButtonColorOutlineBlurred: tokens.color['white-100'],
-  blurBackground: tokens.color['neutral-80-opa-70'],
+  blurBackground: tokens.color['neutral-70'],
 })
 
 const allThemes = {
diff --git a/packages/components/src/toast/toast.tsx b/packages/components/src/toast/toast.tsx
index a740c7ae..dded10d1 100644
--- a/packages/components/src/toast/toast.tsx
+++ b/packages/components/src/toast/toast.tsx
@@ -74,7 +74,7 @@ const Base = styled(Stack, {
   gap: 12,
   width: 351,
   minHeight: 40,
-  backgroundColor: '$neutral-80-opa-70',
+  backgroundColor: '$neutral-80/70',
   borderRadius: '$12',
   justifyContent: 'space-between',
 
diff --git a/packages/components/src/tokens.ts b/packages/components/src/tokens.ts
index e60923b0..d81b41fb 100644
--- a/packages/components/src/tokens.ts
+++ b/packages/components/src/tokens.ts
@@ -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 { 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({
   color: {
+    ...blur,
     ...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)',
+    ...(prefixColors('danger', danger) as {
+      [K in keyof typeof danger as `danger-${K}`]: (typeof danger)[K]
+    }),
+    ...networks,
+    ...(prefixColors('neutral', neutral) as {
+      [K in keyof typeof neutral as `neutral-${K}`]: (typeof neutral)[K]
+    }),
+    ...security,
+    ...social,
+    ...(prefixColors('success', success) as {
+      [K in keyof typeof success as `success-${K}`]: (typeof success)[K]
+    }),
+    ...(prefixColors('white', white) as {
+      [K in keyof typeof white as `white-${K}`]: (typeof white)[K]
+    }),
+
     transparent: 'hsla(0, 0%, 0%, 0)',
   },
   size,
diff --git a/packages/components/src/user-list/user-list.tsx b/packages/components/src/user-list/user-list.tsx
index 5067fa56..092a5429 100644
--- a/packages/components/src/user-list/user-list.tsx
+++ b/packages/components/src/user-list/user-list.tsx
@@ -28,7 +28,7 @@ const UserList = (props: Props) => {
             alignItems="center"
             cursor="pointer"
             hoverStyle={{
-              backgroundColor: '$primary-50-opa-5',
+              backgroundColor: '$blue/5',
             }}
           >
             <Avatar