Merge pull request #573 from ably/denissellu/update-neutral-colors

[WEB-4012] Update neutral color ramp in Ably UI
ably · Dec 9, 2024 · 3fe1bc2 · 3fe1bc2
2 parents 285b81e + 5713e87
commit 3fe1bc2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git 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>

diff --git 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;