From 812e5f6f7cd4474534f638c40e8745e0bf1ef14d Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Tue, 10 Aug 2021 14:15:47 +0700
Subject: [PATCH] refactor(core): update colour palette (#383)

* refactor(core): update colour palette

Closes #381.

* docs: updated stories for colors

* test: update snapshots
---
 packages/core/src/foundations/colors.ts       | 294 ++++++++++--------
 .../Button/__snapshots__/Button.test.tsx.snap |  18 +-
 .../__snapshots__/ButtonAnchor.test.tsx.snap  |  18 +-
 .../__snapshots__/LinkButton.test.tsx.snap    |   2 +-
 .../__snapshots__/Message.test.tsx.snap       |   2 +-
 .../src/layout/__stories__/Colors.stories.tsx | 101 +++---
 .../react/src/utils/storybook/ColorSwatch.tsx |   8 +-
 7 files changed, 244 insertions(+), 199 deletions(-)

diff --git a/packages/core/src/foundations/colors.ts b/packages/core/src/foundations/colors.ts
index b44996a8a..55120f1bd 100644
--- a/packages/core/src/foundations/colors.ts
+++ b/packages/core/src/foundations/colors.ts
@@ -1,171 +1,204 @@
 const blue = {
   // Blue
-  /** Blue01 - Glitter */
-  blue01: '#e7f1fc',
-  /** Blue02 - Pale Aqua */
-  blue02: '#b9d7f8',
-  /** Blue03 - Jordy Blue */
-  blue03: '#8bbdf3',
-  /** Blue04 - Blue Jeans */
-  blue04: '#5ca3ef',
-  /** Blue05 - Bleu de France */
-  blue05: '#2e89ea',
-  /** Blue06 - Brandeis Blue */
-  blue06: '#006fe6',
-  /** Blue07 - Absolute Zero */
-  blue07: '#005bbd',
-  /** Blue08 - Usafa Blue */
-  blue08: '#004793',
-  /** Blue09 - Dark Midnight Blue */
-  blue09: '#003369',
-  /** blue10 - Maastricht Blue */
-  blue10: '#001f3f',
+  /** blue-01 - Glitter */
+  blue01: '#EBF5FF',
+  /** blue-02 - Aqua */
+  blue02: '#D7EAFF',
+  /** blue-03 - Jordy */
+  blue03: '#AFD6FF',
+  /** blue-04 - Jeans */
+  blue04: '#87C1FF',
+  /** blue-05 - France */
+  blue05: '#5FACFF',
+  /** blue-06 - Absolute */
+  blue06: '#3797FF',
+  /** blue-07 - Brandeis */
+  blue07: '#006FE6',
+  /** blue-08 - Usafa */
+  blue08: '#0057B4',
+  /** blue-09 - Midnight */
+  blue09: '#004793',
+  /** blue-10 - Maastricht */
+  blue10: '#002C5C',
 };
 
 const indigo = {
   // Indigo
-  /** Indigo01 - Soap */
-  indigo01: '#e7eaf4',
-  /** Indigo02 - Light Steel Blue */
-  indigo02: '#b9c0df',
-  /** Indigo03 - Ceil */
-  indigo03: '#8b97c9',
-  /** Indigo04 - Glaucous */
-  indigo04: '#5c6db4',
-  /** Indigo05 - Pigment Blue */
-  indigo05: '#2e449f',
-  /** Indigo06 - Indigo */
-  indigo06: '#001b8a',
-  /** Indigo07 - Dark Imperial Blue */
-  indigo07: '#001771',
-  /** Indigo08 - Royal Blue */
-  indigo08: '#001258',
-  /** Indigo09 - Maastricht Indigo */
-  indigo09: '#000d3f',
-  /** Indigo10 - Black Indigo */
-  indigo10: '#000826',
+  /** indigo-01 - Soap */
+  indigo01: '#F3F1FD',
+  /** indigo-02 - Steel */
+  indigo02: '#E8E2FB',
+  /** indigo-03 - Ceil */
+  indigo03: '#D0C6F6',
+  /** indigo-04 - Glaucous */
+  indigo04: '#B9A9F2',
+  /** indigo-05 - Pigment */
+  indigo05: '#967FEC',
+  /** indigo-06 - Imperial */
+  indigo06: '#6E4EE4',
+  /** indigo-07 - Indigo */
+  indigo07: '#5F3AE1',
+  /** indigo-08 - Royal */
+  indigo08: '#461FD1',
+  /** indigo-09 - Zaffre */
+  indigo09: '#34179D',
+  /** indigo-10 - Xiketic */
+  indigo10: '#1D0D57',
 };
 
 const turquoise = {
   // Turquoise
-  /** Turquoise01 - Bubbles */
-  turquoise01: '#e7fafd',
-  /** Turquoise02 - Diamond */
-  turquoise02: '#b9f1f9',
-  /** Turquoise03 - Pale Cyan */
-  turquoise03: '#8be7f5',
-  /** Turquoise04 - Sky Blue */
-  turquoise04: '#5cdef1',
-  /** Turquoise05 - Turquoise Surf */
-  turquoise05: '#2ed5ed',
-  /** Turquoise06 - Turquoise */
-  turquoise06: '#00cce9',
-  /** Turquoise07 - Bondi Blue */
-  turquoise07: '#00a7bf',
-  /** Turquoise08 - Teal */
+  /** turquoise-01 - Bubbles */
+  turquoise01: '#E7FAFD',
+  /** turquoise-02 - Diamond */
+  turquoise02: '#B9F1F9',
+  /** turquoise-03 - Cyan */
+  turquoise03: '#8BE7F5',
+  /** turquoise-04 - Sky */
+  turquoise04: '#5CDEF1',
+  /** turquoise-05 - Surf */
+  turquoise05: '#2ED5ED',
+  /** turquoise-06 - Turquoise */
+  turquoise06: '#00CCE9',
+  /** turquoise-07 - Bondi */
+  turquoise07: '#00A7BF',
+  /** turquoise-08 - Teal */
   turquoise08: '#008295',
-  /** Turquoise09 - Bubbles */
-  turquoise09: '#005d6a',
-  /** Turquoise10 - Bubbles */
+  /** turquoise-09 - Metallic */
+  turquoise09: '#005D6A',
+  /** turquoise-10 - Jungle */
   turquoise10: '#003840',
 };
 
 const green = {
   // Green
-  /** Green01 - Honeydew */
-  green01: '#f2f8f0',
-  /** Green02 - Timbrewolf */
-  green02: '#daecd3',
-  /** Green03 - Celadon */
-  green03: '#c1e0b7',
-  /** Green04 - Granny Smith Apple */
-  green04: '#a9d49a',
-  /** Green05 - Pistachio */
-  green05: '#90c87d',
-  /** Green06 - Green Bud */
-  green06: '#78bc61',
-  /** Green07 - Palm Leaf */
-  green07: '#639a50',
-  /** Green08 - Fern Green */
-  green08: '#4d783e',
-  /** Green09 - Mughal Green */
-  green09: '#37562d',
-  /** Green10 - Leather Jacket */
-  green10: '#21341b',
+  /** green-01 - Honeydew */
+  green01: '#EAFDF5',
+  /** green-02 - Timberwolf */
+  green02: '#D5FCEB',
+  /** green-03 - Celadon */
+  green03: '#AAF8D6',
+  /** green-04 - Granny */
+  green04: '#6AF3B8',
+  /** green-05 - Pistachio */
+  green05: '#12D983',
+  /** green-06 - Bud */
+  green06: '#10C476',
+  /** green-07 - Leaf */
+  green07: '#0EAD69',
+  /** green-08 - Fern */
+  green08: '#0C965A',
+  /** green-09 - Mughal */
+  green09: '#08643C',
+  /** green-10 - Leather */
+  green10: '#053E26',
 };
 
 const yellow = {
   // Yellow
-  /** Yellow01 - Seashell */
-  yellow01: '#fff7ed',
-  /** Yellow02 - Lumber */
-  yellow02: '#ffe7ca',
-  /** Yellow03 - Tuscan */
-  yellow03: '#ffd7a8',
-  /** Yellow04 - Topaz */
-  yellow04: '#ffc885',
-  /** Yellow05 - Rajah */
-  yellow05: '#ffb862',
-  /** Yellow06 - Yellow Orange */
-  yellow06: '#ffa940',
-  /** Yellow07 - Bronze */
-  yellow07: '#d18b35',
-  /** Yellow08 - Liver */
-  yellow08: '#a36c29',
-  /** Yellow09 - Drab */
-  yellow09: '#744d1e',
-  /** Yellow10 - Pullman */
-  yellow10: '#462f12',
+  /** yellow-01 - Seashell */
+  yellow01: '#FFFBED',
+  /** yellow-02 - Lumber */
+  yellow02: '#FFF7DB',
+  /** yellow-03 - Tuscan */
+  yellow03: '#FFEEB6',
+  /** yellow-04 - Topaz */
+  yellow04: '#FFE592',
+  /** yellow-05 - Rajah */
+  yellow05: '#FFD95B',
+  /** yellow-06 - Yellow */
+  yellow06: '#FFCC24',
+  /** yellow-07 - Mango */
+  yellow07: '#FFBE0B',
+  /** yellow-08 - Liver */
+  yellow08: '#DBA800',
+  /** yellow-09 - Drab */
+  yellow09: '#A37D00',
+  /** yellow-10 - Pullman */
+  yellow10: '#5B4600',
 };
 
 const red = {
   // Red
-  /** Red01 - Linen */
-  red01: '#fce9e8',
-  /** Red02 - Spanish Pink */
-  red02: '#f7bfbc',
-  /** Red03 - Salmon Pink */
-  red03: '#f2958f',
-  /** Red04 - Pastel */
-  red04: '#ed6b63',
-  /** Red05 - Vermilion */
-  red05: '#e84136',
-  /** Red06 - Crimson */
-  red06: '#e3170a',
-  /** Red07 - Orange */
-  red07: '#ba1309',
-  /** Red08 - Sangria */
-  red08: '#910f07',
-  /** Red09 - Rosewood */
-  red09: '#680b05',
-  /** Red10 - Bean */
-  red10: '#3e0703',
+  /** red-01 - Linen */
+  red01: '#FFF4F3',
+  /** red-02 - Pink */
+  red02: '#FFE9E6',
+  /** red-03 - Salmon */
+  red03: '#FFDBD6',
+  /** red-04 - Pastel */
+  red04: '#FFB1A8',
+  /** red-05 - Vermilion */
+  red05: '#FF9083',
+  /** red-06 - Crimson */
+  red06: '#FF796A',
+  /** red-07 - Soda */
+  red07: '#FF6150',
+  /** red-08 - Sangria */
+  red08: '#FF3822',
+  /** red-09 - Rosewood */
+  red09: '#D81600',
+  /** red-10 - Bean */
+  red10: '#780C00',
 };
 
-const grey = {
-  // Grey
-  /** Grey 01 - White */
+const greyLegacy = {
+  // Grey (legacy)
+  /** grey-01 - White */
   grey01: '#ffffff',
-  /** Grey 02 - Ghost */
+  /** grey-02 - Ghost */
   grey02: '#f7f8f9',
-  /** Grey 03 - Isabelline */
+  /** grey-03 - Isabelline */
   grey03: '#ebedef',
-  /** Grey 04 - Gainsboro */
+  /** grey-04 - Gainsboro */
   grey04: '#d7dbdf',
-  /** Grey 05 - Ash Grey */
+  /** grey-05 - Ash Grey */
   grey05: '#b0b7bf',
-  /** Grey 06 - Grey Blue */
+  /** grey-06 - Grey Blue */
   grey06: '#89949f',
-  /** Grey 07 - Aurometalsaurus */
+  /** grey-07 - Aurometalsaurus */
   grey07: '#62707f',
-  /** Grey 08 - Outer Space */
+  /** grey-08 - Outer Space */
   grey08: '#313f4e',
-  /** Grey 09 - Japanese Indigo */
+  /** grey-09 - Japanese Indigo */
   grey09: '#253648',
-  /** Grey 10 - Yankees Blue */
+  /** grey-10 - Yankees Blue */
   grey10: '#1e2b3a',
 };
 
+const grey = {
+  /** greylight-01 - White */
+  greylight01: '#FFFFFF',
+  /** greylight-02 - Ghost */
+  greylight02: '#FAFBFD',
+  /** greylight-03 - Isabeline */
+  greylight03: '#F5F6F8',
+  /** greylight-04 - Gainsboro */
+  greylight04: '#E5EAEF',
+  /** greylight-05 - Ash Grey */
+  greylight05: '#C6D0DB',
+  /** greymed-01 - Crayola */
+  greymed01: '#B0B7BF',
+  /** greymed-02 - Cadet */
+  greymed02: '#949DA7',
+  /** greymed-03 - Light state */
+  greymed03: '#758495',
+  /** greymed-04 - Slate */
+  greymed04: '#6A7A8A',
+  /** greymed-05 - Electric */
+  greymed05: '#62707F',
+  /** greydark-01 - Charcoal */
+  greydark01: '#3C4D5F',
+  /** greydark-02 - Gunmetal */
+  greydark02: '#313F4E',
+  /** greydark-03 - Raisin */
+  greydark03: '#2A3643',
+  /** greydark-04 - Rich black */
+  greydark04: '#232D38',
+  /** greydark-05 - Black */
+  greydark05: '#181E25',
+};
+
 const systemColors = {
   ...blue,
   ...indigo,
@@ -173,6 +206,7 @@ const systemColors = {
   ...green,
   ...yellow,
   ...red,
+  ...greyLegacy,
   ...grey,
 };
 
diff --git a/packages/react/src/components/button/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react/src/components/button/components/Button/__snapshots__/Button.test.tsx.snap
index c62e782eb..bfc75e157 100644
--- a/packages/react/src/components/button/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/react/src/components/button/components/Button/__snapshots__/Button.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`components/Button <Button /> renders block buttons correctly 1`] = `
 .c0:not(:disabled):not(.disabled):focus,
 .c0:not(:disabled):not(.disabled).focus {
   background-color: #ebedef;
-  color: #004793;
+  color: #0057B4;
 }
 
 .c0:not(:disabled):not(.disabled):focus,
@@ -59,9 +59,9 @@ exports[`components/Button <Button /> renders block buttons correctly 1`] = `
 .c0:not(:disabled):not(.disabled):active,
 .c0:not(:disabled):not(.disabled).active {
   background-color: #ebedef;
-  color: #004793;
-  border-color: #006fe6;
-  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #006fe6;
+  color: #0057B4;
+  border-color: #3797FF;
+  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #3797FF;
 }
 
 .c0:disabled,
@@ -102,7 +102,7 @@ exports[`components/Button <Button /> renders colors correctly by variant 1`] =
   -ms-letter-spacing: 0.2px;
   letter-spacing: 0.2px;
   border: 1px solid transparent;
-  background-color: #006fe6;
+  background-color: #3797FF;
   color: #fff;
   height: 40px;
   padding: 0 16px;
@@ -131,7 +131,7 @@ exports[`components/Button <Button /> renders colors correctly by variant 1`] =
 .c0:not(:disabled):not(.disabled).hover,
 .c0:not(:disabled):not(.disabled):focus,
 .c0:not(:disabled):not(.disabled).focus {
-  background-color: #005bbd;
+  background-color: #006FE6;
   color: #fff;
 }
 
@@ -139,9 +139,9 @@ exports[`components/Button <Button /> renders colors correctly by variant 1`] =
 .c0:not(:disabled):not(.disabled).focus,
 .c0:not(:disabled):not(.disabled):active,
 .c0:not(:disabled):not(.disabled).active {
-  background-color: #004793;
-  border-color: #006fe6;
-  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #006fe6;
+  background-color: #0057B4;
+  border-color: #3797FF;
+  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #3797FF;
 }
 
 .c0:disabled,
diff --git a/packages/react/src/components/button/components/Button/__snapshots__/ButtonAnchor.test.tsx.snap b/packages/react/src/components/button/components/Button/__snapshots__/ButtonAnchor.test.tsx.snap
index da5a3146f..3e5321fbf 100644
--- a/packages/react/src/components/button/components/Button/__snapshots__/ButtonAnchor.test.tsx.snap
+++ b/packages/react/src/components/button/components/Button/__snapshots__/ButtonAnchor.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`components/Button <ButtonAnchor /> renders block buttons correctly 1`]
 .c0:not(:disabled):not(.disabled):focus,
 .c0:not(:disabled):not(.disabled).focus {
   background-color: #ebedef;
-  color: #004793;
+  color: #0057B4;
 }
 
 .c0:not(:disabled):not(.disabled):focus,
@@ -59,9 +59,9 @@ exports[`components/Button <ButtonAnchor /> renders block buttons correctly 1`]
 .c0:not(:disabled):not(.disabled):active,
 .c0:not(:disabled):not(.disabled).active {
   background-color: #ebedef;
-  color: #004793;
-  border-color: #006fe6;
-  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #006fe6;
+  color: #0057B4;
+  border-color: #3797FF;
+  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #3797FF;
 }
 
 .c0:disabled,
@@ -101,7 +101,7 @@ exports[`components/Button <ButtonAnchor /> renders colors correctly by variant
   -ms-letter-spacing: 0.2px;
   letter-spacing: 0.2px;
   border: 1px solid transparent;
-  background-color: #006fe6;
+  background-color: #3797FF;
   color: #fff;
   height: 40px;
   padding: 0 16px;
@@ -130,7 +130,7 @@ exports[`components/Button <ButtonAnchor /> renders colors correctly by variant
 .c0:not(:disabled):not(.disabled).hover,
 .c0:not(:disabled):not(.disabled):focus,
 .c0:not(:disabled):not(.disabled).focus {
-  background-color: #005bbd;
+  background-color: #006FE6;
   color: #fff;
 }
 
@@ -138,9 +138,9 @@ exports[`components/Button <ButtonAnchor /> renders colors correctly by variant
 .c0:not(:disabled):not(.disabled).focus,
 .c0:not(:disabled):not(.disabled):active,
 .c0:not(:disabled):not(.disabled).active {
-  background-color: #004793;
-  border-color: #006fe6;
-  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #006fe6;
+  background-color: #0057B4;
+  border-color: #3797FF;
+  box-shadow: 0 0 2px 1px rgba(0,111,230,0.4),0 0 0 1px #3797FF;
 }
 
 .c0:disabled,
diff --git a/packages/react/src/components/button/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap b/packages/react/src/components/button/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap
index 59cfa444e..02b475ecc 100644
--- a/packages/react/src/components/button/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap
+++ b/packages/react/src/components/button/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`components/Button <LinkButton /> renders colors correctly by variant 1`
   color: blue08;
   -webkit-text-decoration: underline;
   text-decoration: underline;
-  box-shadow: 0 0 0 1px #5ca3ef;
+  box-shadow: 0 0 0 1px #87C1FF;
 }
 
 .c0:disabled,
diff --git a/packages/react/src/components/message/components/__snapshots__/Message.test.tsx.snap b/packages/react/src/components/message/components/__snapshots__/Message.test.tsx.snap
index 33aae8326..84b1a15d8 100644
--- a/packages/react/src/components/message/components/__snapshots__/Message.test.tsx.snap
+++ b/packages/react/src/components/message/components/__snapshots__/Message.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`components/Banner <Banner /> renders correctly 1`] = `
     >
       <path
         d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 8.2l-5 5c-.4.4-1 .4-1.4 0l-2-2c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l1.3 1.3 4.3-4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z"
-        fill="#639a50"
+        fill="#0EAD69"
       />
     </svg>
   </div>
diff --git a/packages/react/src/layout/__stories__/Colors.stories.tsx b/packages/react/src/layout/__stories__/Colors.stories.tsx
index 4e5b1aebe..34eb0b8dd 100644
--- a/packages/react/src/layout/__stories__/Colors.stories.tsx
+++ b/packages/react/src/layout/__stories__/Colors.stories.tsx
@@ -14,30 +14,30 @@ export default {
 export const Primary = () => (
   <ColorSwatchGrid>
     <ColorSwatch title="Glitter" colorKey="blue01" hex={theme.colors.blue01} />
-    <ColorSwatch title="Pale Aqua" colorKey="blue02" hex={theme.colors.blue02} />
-    <ColorSwatch title="Jordy Blue" colorKey="blue03" hex={theme.colors.blue03} />
-    <ColorSwatch title="Blue Jeans" colorKey="blue04" hex={theme.colors.blue04} />
-    <ColorSwatch title="Bleu de France" colorKey="blue05" hex={theme.colors.blue05} />
-    <ColorSwatch title="Brandeis Blue" colorKey="blue06" hex={theme.colors.blue06} />
-    <ColorSwatch title="Absolute Zero" colorKey="blue07" hex={theme.colors.blue07} />
-    <ColorSwatch title="Usafa Blue" colorKey="blue08" hex={theme.colors.blue08} />
-    <ColorSwatch title="Dark Midnight Blue" colorKey="blue09" hex={theme.colors.blue09} />
-    <ColorSwatch title="Maastricht Blue" colorKey="blue10" hex={theme.colors.blue10} />
+    <ColorSwatch title="Aqua" colorKey="blue02" hex={theme.colors.blue02} />
+    <ColorSwatch title="Jordy" colorKey="blue03" hex={theme.colors.blue03} />
+    <ColorSwatch title="Jeans" colorKey="blue04" hex={theme.colors.blue04} />
+    <ColorSwatch title="France" colorKey="blue05" hex={theme.colors.blue05} />
+    <ColorSwatch title="Absolute" colorKey="blue06" hex={theme.colors.blue06} />
+    <ColorSwatch title="Brandeis" colorKey="blue07" hex={theme.colors.blue07} />
+    <ColorSwatch title="Usafa" colorKey="blue08" hex={theme.colors.blue08} />
+    <ColorSwatch title="Midnight" colorKey="blue09" hex={theme.colors.blue09} />
+    <ColorSwatch title="Maastricht" colorKey="blue10" hex={theme.colors.blue10} />
   </ColorSwatchGrid>
 );
 
 export const Secondary = () => (
   <ColorSwatchGrid>
     <ColorSwatch title="Soap" colorKey="indigo01" hex={theme.colors.indigo01} />
-    <ColorSwatch title="Light Steel Blue" colorKey="indigo02" hex={theme.colors.indigo02} />
+    <ColorSwatch title="Steel" colorKey="indigo02" hex={theme.colors.indigo02} />
     <ColorSwatch title="Ceil" colorKey="indigo03" hex={theme.colors.indigo03} />
     <ColorSwatch title="Glaucous" colorKey="indigo04" hex={theme.colors.indigo04} />
-    <ColorSwatch title="Pigment Blue" colorKey="indigo05" hex={theme.colors.indigo05} />
-    <ColorSwatch title="Indigo" colorKey="indigo06" hex={theme.colors.indigo06} />
-    <ColorSwatch title="Dark Imperial Blue" colorKey="indigo07" hex={theme.colors.indigo07} />
-    <ColorSwatch title="Royal Blue" colorKey="indigo08" hex={theme.colors.indigo08} />
-    <ColorSwatch title="Maastricht Indigo" colorKey="indigo09" hex={theme.colors.indigo09} />
-    <ColorSwatch title="Black Indigo" colorKey="indigo10" hex={theme.colors.indigo10} />
+    <ColorSwatch title="Pigment" colorKey="indigo05" hex={theme.colors.indigo05} />
+    <ColorSwatch title="Imperial" colorKey="indigo06" hex={theme.colors.indigo06} />
+    <ColorSwatch title="Indigo" colorKey="indigo07" hex={theme.colors.indigo07} />
+    <ColorSwatch title="Royal" colorKey="indigo08" hex={theme.colors.indigo08} />
+    <ColorSwatch title="Zaffre" colorKey="indigo09" hex={theme.colors.indigo09} />
+    <ColorSwatch title="Xiketic" colorKey="indigo10" hex={theme.colors.indigo10} />
   </ColorSwatchGrid>
 );
 
@@ -45,14 +45,14 @@ export const Tertiary = () => (
   <ColorSwatchGrid>
     <ColorSwatch title="Bubbles" colorKey="turquoise01" hex={theme.colors.turquoise01} />
     <ColorSwatch title="Diamond" colorKey="turquoise02" hex={theme.colors.turquoise02} />
-    <ColorSwatch title="Pale Cyan" colorKey="turquoise03" hex={theme.colors.turquoise03} />
-    <ColorSwatch title="Sky Blue" colorKey="turquoise04" hex={theme.colors.turquoise04} />
-    <ColorSwatch title="Turquoise Surf" colorKey="turquoise05" hex={theme.colors.turquoise05} />
+    <ColorSwatch title="Cyan" colorKey="turquoise03" hex={theme.colors.turquoise03} />
+    <ColorSwatch title="Sky" colorKey="turquoise04" hex={theme.colors.turquoise04} />
+    <ColorSwatch title="Surf" colorKey="turquoise05" hex={theme.colors.turquoise05} />
     <ColorSwatch title="Turquoise" colorKey="turquoise06" hex={theme.colors.turquoise06} />
-    <ColorSwatch title="Bondi Blue" colorKey="turquoise07" hex={theme.colors.turquoise07} />
+    <ColorSwatch title="Bondi" colorKey="turquoise07" hex={theme.colors.turquoise07} />
     <ColorSwatch title="Teal" colorKey="turquoise08" hex={theme.colors.turquoise08} />
-    <ColorSwatch title="Dark Cyan" colorKey="turquoise09" hex={theme.colors.turquoise09} />
-    <ColorSwatch title="Midnight Green" colorKey="turquoise10" hex={theme.colors.turquoise10} />
+    <ColorSwatch title="Metallic" colorKey="turquoise09" hex={theme.colors.turquoise09} />
+    <ColorSwatch title="Jungle" colorKey="turquoise10" hex={theme.colors.turquoise10} />
   </ColorSwatchGrid>
 );
 
@@ -61,13 +61,13 @@ export const FunctionalGreen = () => (
     <ColorSwatch title="Honeydew" colorKey="green01" hex={theme.colors.green01} />
     <ColorSwatch title="Timberwolf" colorKey="green02" hex={theme.colors.green02} />
     <ColorSwatch title="Celadon" colorKey="green03" hex={theme.colors.green03} />
-    <ColorSwatch title="Granny Smith Apple" colorKey="green04" hex={theme.colors.green04} />
+    <ColorSwatch title="Granny" colorKey="green04" hex={theme.colors.green04} />
     <ColorSwatch title="Pistachio" colorKey="green05" hex={theme.colors.green05} />
-    <ColorSwatch title="Green Bud" colorKey="green06" hex={theme.colors.green06} />
-    <ColorSwatch title="Palm Leaf" colorKey="green07" hex={theme.colors.green07} />
-    <ColorSwatch title="Fern Green" colorKey="green08" hex={theme.colors.green08} />
-    <ColorSwatch title="Mughal Green" colorKey="green09" hex={theme.colors.green09} />
-    <ColorSwatch title="Leather Jacket" colorKey="green10" hex={theme.colors.green10} />
+    <ColorSwatch title="Bud" colorKey="green06" hex={theme.colors.green06} />
+    <ColorSwatch title="Leaf" colorKey="green07" hex={theme.colors.green07} />
+    <ColorSwatch title="Fern" colorKey="green08" hex={theme.colors.green08} />
+    <ColorSwatch title="Mughal" colorKey="green09" hex={theme.colors.green09} />
+    <ColorSwatch title="Leather" colorKey="green10" hex={theme.colors.green10} />
   </ColorSwatchGrid>
 );
 
@@ -78,8 +78,8 @@ export const FunctionalYellow = () => (
     <ColorSwatch title="Tuscan" colorKey="yellow03" hex={theme.colors.yellow03} />
     <ColorSwatch title="Topaz" colorKey="yellow04" hex={theme.colors.yellow04} />
     <ColorSwatch title="Rajah" colorKey="yellow05" hex={theme.colors.yellow05} />
-    <ColorSwatch title="Yellow Orange" colorKey="yellow06" hex={theme.colors.yellow06} />
-    <ColorSwatch title="Bronze" colorKey="yellow07" hex={theme.colors.yellow07} />
+    <ColorSwatch title="Yellow" colorKey="yellow06" hex={theme.colors.yellow06} />
+    <ColorSwatch title="Mango" colorKey="yellow07" hex={theme.colors.yellow07} />
     <ColorSwatch title="Liver" colorKey="yellow08" hex={theme.colors.yellow08} />
     <ColorSwatch title="Drab" colorKey="yellow09" hex={theme.colors.yellow09} />
     <ColorSwatch title="Pullman" colorKey="yellow10" hex={theme.colors.yellow10} />
@@ -89,12 +89,12 @@ export const FunctionalYellow = () => (
 export const FunctionalRed = () => (
   <ColorSwatchGrid>
     <ColorSwatch title="Linen" colorKey="red01" hex={theme.colors.red01} />
-    <ColorSwatch title="Spanish Pink" colorKey="red02" hex={theme.colors.red02} />
-    <ColorSwatch title="Salmon Pink" colorKey="red03" hex={theme.colors.red03} />
+    <ColorSwatch title="Pink" colorKey="red02" hex={theme.colors.red02} />
+    <ColorSwatch title="Salmon" colorKey="red03" hex={theme.colors.red03} />
     <ColorSwatch title="Pastel" colorKey="red04" hex={theme.colors.red04} />
     <ColorSwatch title="Vermilion" colorKey="red05" hex={theme.colors.red05} />
     <ColorSwatch title="Crimson" colorKey="red06" hex={theme.colors.red06} />
-    <ColorSwatch title="Orange" colorKey="red07" hex={theme.colors.red07} />
+    <ColorSwatch title="Soda" colorKey="red07" hex={theme.colors.red07} />
     <ColorSwatch title="Sangria" colorKey="red08" hex={theme.colors.red08} />
     <ColorSwatch title="Rosewood" colorKey="red09" hex={theme.colors.red09} />
     <ColorSwatch title="Bean" colorKey="red10" hex={theme.colors.red10} />
@@ -102,16 +102,27 @@ export const FunctionalRed = () => (
 );
 
 export const Neutral = () => (
-  <ColorSwatchGrid>
-    <ColorSwatch title="White" colorKey="grey01" hex={theme.colors.grey01} hasBorder />
-    <ColorSwatch title="Ghost" colorKey="grey02" hex={theme.colors.grey02} />
-    <ColorSwatch title="Isabelline" colorKey="grey03" hex={theme.colors.grey03} />
-    <ColorSwatch title="Gainsboro" colorKey="grey04" hex={theme.colors.grey04} />
-    <ColorSwatch title="Ash Grey" colorKey="grey05" hex={theme.colors.grey05} />
-    <ColorSwatch title="Grey Blue" colorKey="grey06" hex={theme.colors.grey06} />
-    <ColorSwatch title="Aurometalsaurus" colorKey="grey07" hex={theme.colors.grey07} />
-    <ColorSwatch title="Outer Space" colorKey="grey08" hex={theme.colors.grey08} />
-    <ColorSwatch title="Japanese Indigo" colorKey="grey09" hex={theme.colors.grey09} />
-    <ColorSwatch title="Yankees Blue" colorKey="grey10" hex={theme.colors.grey10} />
-  </ColorSwatchGrid>
+  <>
+    <ColorSwatchGrid>
+      <ColorSwatch title="White" colorKey="greylight01" hex={theme.colors.greylight01} hasBorder />
+      <ColorSwatch title="Ghost" colorKey="greylight02" hex={theme.colors.greylight02} hasBorder />
+      <ColorSwatch title="Isabelline" colorKey="greylight03" hex={theme.colors.greylight03} />
+      <ColorSwatch title="Gainsboro" colorKey="greylight04" hex={theme.colors.greylight04} />
+      <ColorSwatch title="Ash Grey" colorKey="greylight05" hex={theme.colors.greylight05} />
+    </ColorSwatchGrid>
+    <ColorSwatchGrid>
+      <ColorSwatch title="Crayola" colorKey="greymed01" hex={theme.colors.greymed01} />
+      <ColorSwatch title="Cadet" colorKey="greymed02" hex={theme.colors.greymed02} />
+      <ColorSwatch title="Light state" colorKey="greymed03" hex={theme.colors.greymed03} />
+      <ColorSwatch title="Slate" colorKey="greymed04" hex={theme.colors.greymed04} />
+      <ColorSwatch title="Electric" colorKey="greymed05" hex={theme.colors.greymed05} />
+    </ColorSwatchGrid>
+    <ColorSwatchGrid>
+      <ColorSwatch title="Charcoal" colorKey="greydark01" hex={theme.colors.greydark01} />
+      <ColorSwatch title="Gunmetal" colorKey="greydark02" hex={theme.colors.greydark02} />
+      <ColorSwatch title="Raisin" colorKey="greydark03" hex={theme.colors.greydark03} />
+      <ColorSwatch title="Rich black" colorKey="greydark04" hex={theme.colors.greydark04} />
+      <ColorSwatch title="Black" colorKey="greydark05" hex={theme.colors.greydark05} />
+    </ColorSwatchGrid>
+  </>
 );
diff --git a/packages/react/src/utils/storybook/ColorSwatch.tsx b/packages/react/src/utils/storybook/ColorSwatch.tsx
index d82838c4d..f4d81fc65 100644
--- a/packages/react/src/utils/storybook/ColorSwatch.tsx
+++ b/packages/react/src/utils/storybook/ColorSwatch.tsx
@@ -10,18 +10,18 @@ interface ColorSwatchProps {
 
 const ColorSwatch: React.FC<ColorSwatchProps> = ({ title, colorKey, hex, hasBorder }) => (
   <Box>
-    <Box bg={hex} height={64} border="1px solid" borderColor={hasBorder ? 'grey03' : 'transparent'} />
+    <Box bg={hex} height={64} border="1px solid" borderColor={hasBorder ? 'greylight03' : 'transparent'} />
     <Box display="flex" flexDirection="row" justifyContent="space-between" mt="xxs">
       <Box>
-        <Heading as="h5" scale={300} color="grey09" fontWeight={700} m={0}>
+        <Heading as="h5" scale={300} color="greydark05" fontWeight={700} m={0}>
           {title}
         </Heading>
-        <Text as="p" fontFamily="monospace" scale={200} color="grey09" m={0}>
+        <Text as="p" fontFamily="monospace" scale={200} color="greydark05" m={0}>
           {colorKey}
         </Text>
       </Box>
       <Box>
-        <Heading as="p" scale={300} color="grey07" m={0}>
+        <Heading as="p" scale={300} color="greymed05" m={0}>
           {hex.toUpperCase()}
         </Heading>
       </Box>