From cbc0e06d4f762c7e1634318ad579978f737713a1 Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Wed, 8 Nov 2023 10:41:17 +0100
Subject: [PATCH] fix copper color typo (#508)

* fix copper color typo

* ch
---
 .changeset/many-items-wave.md                     |  5 +++++
 packages/colors/src/customisation.ts              | 15 +++++++--------
 packages/components/src/button/button.tsx         | 10 +++++-----
 .../divider-new-messages.stories.tsx              |  2 +-
 packages/components/src/themes.ts                 |  8 ++++----
 5 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/many-items-wave.md

diff --git a/.changeset/many-items-wave.md b/.changeset/many-items-wave.md
new file mode 100644
index 00000000..27f291e4
--- /dev/null
+++ b/.changeset/many-items-wave.md
@@ -0,0 +1,5 @@
+---
+'@status-im/colors': minor
+---
+
+fix copper color typo
diff --git a/packages/colors/src/customisation.ts b/packages/colors/src/customisation.ts
index de1225c5..9b119325 100644
--- a/packages/colors/src/customisation.ts
+++ b/packages/colors/src/customisation.ts
@@ -20,14 +20,13 @@ 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%)',
-  'cooper/20': 'rgba(203 98 86 / 20%)',
-  'cooper/30': 'rgba(203 98 86 / 30%)',
-  'cooper/40': 'rgba(203 98 86 / 40%)',
-  'cooper/5': 'rgba(203 98 86 / 5%)',
+  'copper-50': 'rgba(203 98 86 / 100%)',
+  'copper-60': 'rgba(162 78 69 / 100%)',
+  'copper/10': 'rgba(203 98 86 / 10%)',
+  'copper/20': 'rgba(203 98 86 / 20%)',
+  'copper/30': 'rgba(203 98 86 / 30%)',
+  'copper/40': 'rgba(203 98 86 / 40%)',
+  'copper/5': 'rgba(203 98 86 / 5%)',
   'magenta-50': 'rgba(236 38 108 / 100%)',
   'magenta-60': 'rgba(189 30 86 / 100%)',
   'magenta/10': 'rgba(236 38 108 / 10%)',
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index 0bd6bd73..8d28e7f0 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -38,7 +38,7 @@ const textColors: MapVariant<typeof Base, 'variant'> = {
   sky: '$white-100',
   yellow: '$white-100',
   pink: '$white-100',
-  cooper: '$white-100',
+  copper: '$white-100',
   camel: '$white-100',
   magenta: '$white-100',
   yin: '$white-100',
@@ -202,10 +202,10 @@ const Base = styled(View, {
         hoverStyle: { backgroundColor: '$pink-60' },
         pressStyle: { backgroundColor: '$pink-50' },
       },
-      cooper: {
-        backgroundColor: '$cooper-50',
-        hoverStyle: { backgroundColor: '$cooper-60' },
-        pressStyle: { backgroundColor: '$cooper-50' },
+      copper: {
+        backgroundColor: '$copper-50',
+        hoverStyle: { backgroundColor: '$copper-60' },
+        pressStyle: { backgroundColor: '$copper-50' },
       },
       camel: {
         backgroundColor: '$camel-50',
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 e6306246..616d30d5 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
@@ -25,7 +25,7 @@ export const Default: Story = {
         <DividerNewMessages color="$blue-50" />
         <DividerNewMessages color="$yellow-50" />
         <DividerNewMessages color="$turquoise-50" />
-        {/* <NewMessages color="$cooper-50" /> */}
+        {/* <NewMessages color="$copper-50" /> */}
         {/* <NewMessages color="$sky-50" /> */}
         {/* <NewMessages color="$camel-50" /> */}
         <DividerNewMessages color="$orange-50" />
diff --git a/packages/components/src/themes.ts b/packages/components/src/themes.ts
index a9f3ae8e..80054ef6 100644
--- a/packages/components/src/themes.ts
+++ b/packages/components/src/themes.ts
@@ -25,8 +25,8 @@ const light = createTheme({
   orangeHover: tokens.color['orange-60'],
   pink: tokens.color['pink-50'],
   pinkHover: tokens.color['pink-60'],
-  copper: tokens.color['cooper-50'],
-  copperHover: tokens.color['cooper-50'],
+  copper: tokens.color['copper-50'],
+  copperHover: tokens.color['copper-50'],
   camel: tokens.color['camel-50'],
   camelHover: tokens.color['camel-50'],
   placeHolderColor: tokens.color['neutral-40'],
@@ -82,8 +82,8 @@ const dark: BaseTheme = createTheme({
   orangeHover: tokens.color['orange-50'],
   pink: tokens.color['pink-60'],
   pinkHover: tokens.color['pink-50'],
-  copper: tokens.color['cooper-60'],
-  copperHover: tokens.color['cooper-50'],
+  copper: tokens.color['copper-60'],
+  copperHover: tokens.color['copper-50'],
   camel: tokens.color['camel-60'],
   camelHover: tokens.color['camel-50'],
   placeHolderColor: tokens.color['neutral-50'],