From 4e1bbb81c990b341b1adb77bd65864fd64dcb3e2 Mon Sep 17 00:00:00 2001
From: Denis Sellu <denissellu@users.noreply.github.com>
Date: Fri, 6 Dec 2024 12:19:01 +0100
Subject: [PATCH 1/2] [WEB-4012] Update neutral color ramp in Ably UI

Update the neutral color ramp in the CSS variables.

* Update the CSS variables for the new neutral shades in `src/core/styles/properties.css`
* Remove the old neutral shades from the CSS variables in `src/core/styles/properties.css`

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ably/ably-ui?shareId=XXXX-XXXX-XXXX-XXXX).
---
 src/core/styles/properties.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css
index 733fc34c..0dbd6db0 100644
--- a/src/core/styles/properties.css
+++ b/src/core/styles/properties.css
@@ -7,12 +7,12 @@
     --color-neutral-300: #e6eaf0;
     --color-neutral-400: #e2e7ef;
     --color-neutral-500: #c6ced9;
-    --color-neutral-600: #adb6c2;
-    --color-neutral-700: #89929f;
-    --color-neutral-800: #667085;
-    --color-neutral-900: #39414e;
-    --color-neutral-1000: #2b303b;
-    --color-neutral-1100: #202531;
+    --color-neutral-600: #a7b1be;
+    --color-neutral-700: #8992a4;
+    --color-neutral-800: #687288;
+    --color-neutral-900: #5b5a72;
+    --color-neutral-1000: #434356;
+    --color-neutral-1100: #2c3344;
     --color-neutral-1200: #141924;
     --color-neutral-1300: #03020d;
 

From 5713e87b126700deebef6b8ff912e5ad1ea06b01 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 9 Dec 2024 11:31:47 +0000
Subject: [PATCH 2/2] chore: update colors snapshot to reflect neutral shade
 updates

---
 .../__snapshots__/Colors.stories.tsx.snap     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
index 33d3f4c2..c5974f16 100644
--- a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
+++ b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
@@ -340,10 +340,10 @@ exports[`Styles/Colors NeutralColors smoke-test 1`] = `
         neutral-600
       </p>
       <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
-        #adb6c2
+        #a7b1be
       </p>
       <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
-        rgb(173, 182, 194)
+        rgb(167, 177, 190)
       </p>
     </div>
   </div>
@@ -357,10 +357,10 @@ exports[`Styles/Colors NeutralColors smoke-test 1`] = `
         neutral-700
       </p>
       <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
-        #89929f
+        #8992a4
       </p>
       <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
-        rgb(137, 146, 159)
+        rgb(137, 146, 164)
       </p>
     </div>
   </div>
@@ -374,10 +374,10 @@ exports[`Styles/Colors NeutralColors smoke-test 1`] = `
         neutral-800
       </p>
       <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
-        #667085
+        #687288
       </p>
       <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
-        rgb(102, 112, 133)
+        rgb(104, 114, 136)
       </p>
     </div>
   </div>
@@ -391,10 +391,10 @@ exports[`Styles/Colors NeutralColors smoke-test 1`] = `
         neutral-900
       </p>
       <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
-        #39414e
+        #5b5a72
       </p>
       <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
-        rgb(57, 65, 78)
+        rgb(91, 90, 114)
       </p>
     </div>
   </div>
@@ -408,10 +408,10 @@ exports[`Styles/Colors NeutralColors smoke-test 1`] = `
         neutral-1000
       </p>
       <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
-        #2b303b
+        #434356
       </p>
       <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
-        rgb(43, 48, 59)
+        rgb(67, 67, 86)
       </p>
     </div>
   </div>
@@ -425,10 +425,10 @@ exports[`Styles/Colors NeutralColors smoke-test 1`] = `
         neutral-1100
       </p>
       <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
-        #202531
+        #2c3344
       </p>
       <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
-        rgb(32, 37, 49)
+        rgb(44, 51, 68)
       </p>
     </div>
   </div>