chore: update design-system grays (#5097)

* chore: update design-system grays

* update snapshots

src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap

@@ -110,7 +110,7 @@ exports[`renders multi route 1`] = `
 }
 
 .c6 path {
-  stroke: #99A1BD;
+  stroke: #98A1C0;
 }
 
 .c8 {
@@ -129,9 +129,9 @@ exports[`renders multi route 1`] = `
 }
 
 .c9 {
-  background-color: #C9D0E7;
+  background-color: #B8C0DC;
   border-radius: 4px;
-  color: #5E6887;
+  color: #5D6785;
   font-size: 10px;
   padding: 2px 4px;
   z-index: 1021;
@@ -348,7 +348,7 @@ exports[`renders single route 1`] = `
 }
 
 .c6 path {
-  stroke: #99A1BD;
+  stroke: #98A1C0;
 }
 
 .c8 {
@@ -367,9 +367,9 @@ exports[`renders single route 1`] = `
 }
 
 .c9 {
-  background-color: #C9D0E7;
+  background-color: #B8C0DC;
   border-radius: 4px;
-  color: #5E6887;
+  color: #5D6785;
   font-size: 10px;
   padding: 2px 4px;
   z-index: 1021;

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders currency rows correctly when currencies list is non-empty 1`] = `
 <DocumentFragment>
   .c9 {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c7 {
@@ -21,7 +21,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
 .c8 {
   width: 1em;
   height: 1em;
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c4 {
@@ -90,7 +90,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
 }
 
 .c3:hover {
-  background-color: #C9D0E714;
+  background-color: #B8C0DC14;
 }
 
 .c6 {

src/components/TextInput/__snapshots__/index.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`ResizableTextArea renders correctly 1`] = `
   background-color: #F5F6FC;
   -webkit-transition: color 300ms step-start;
   transition: color 300ms step-start;
-  color: #0E111A;
+  color: #0D111C;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -34,19 +34,19 @@ exports[`ResizableTextArea renders correctly 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::-moz-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0:-ms-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 <textarea
@@ -77,7 +77,7 @@ exports[`TextInput renders correctly 1`] = `
   background-color: #F5F6FC;
   -webkit-transition: color 300ms step-start;
   transition: color 300ms step-start;
-  color: #0E111A;
+  color: #0D111C;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -96,19 +96,19 @@ exports[`TextInput renders correctly 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::-moz-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0:-ms-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 <div

src/theme/colors.ts

@@ -8,13 +8,21 @@ export interface GlobalPalette {
   black: Color
   gray50: Color
   gray100: Color
+  gray150: Color
   gray200: Color
+  gray250: Color
   gray300: Color
+  gray350: Color
   gray400: Color
+  gray450: Color
   gray500: Color
+  gray550: Color
   gray600: Color
+  gray650: Color
   gray700: Color
+  gray750: Color
   gray800: Color
+  gray850: Color
   gray900: Color
   pink50: Color
   pink100: Color
@@ -89,14 +97,22 @@ export const colors: GlobalPalette = {
   black: '#000000',
   gray50: '#F5F6FC',
   gray100: '#E8ECFB',
-  gray200: '#C9D0E7',
-  gray300: '#99A1BD',
-  gray400: '#7C85A2',
-  gray500: '#5E6887',
-  gray600: '#404963',
+  gray150: '#D2D9EE',
+  gray200: '#B8C0DC',
+  gray250: '#A6AFCA',
+  gray300: '#98A1C0',
+  gray350: '#888FAB',
+  gray400: '#7780A0',
+  gray450: '#6B7594',
+  gray500: '#5D6785',
+  gray550: '#505A78',
+  gray600: '#404A67',
+  gray650: '#333D59',
   gray700: '#293249',
-  gray800: '#141B2B',
-  gray900: '#0E111A',
+  gray750: '#1B2236',
+  gray800: '#131A2A',
+  gray850: '#0E1524',
+  gray900: '#0D111C',
   pink50: '#F9ECF1',
   pink100: '#FFD9E4',
   pink200: '#FBA4C0',