Repository: laboratoriobridge/bold
Pull request #471 (2019-09-25 20:47:54)

Change colors


Patch:
diff --git a/src/components/Button/Button/skins/default.ts b/src/components/Button/Button/skins/default.ts
index b1a4cb93d..1eb123ba2 100644
--- a/src/components/Button/Button/skins/default.ts
+++ b/src/components/Button/Button/skins/default.ts
@@ -4,9 +4,9 @@ import { Skin } from '../ButtonSkins'
 export const createStyles = (theme: Theme): Skin => ({
   button: {
     backgroundColor: theme.pallete.surface.main,
-    border: '1px solid ' + theme.pallete.gray.c60,
+    border: '1px solid ' + theme.pallete.gray.c40,
     borderRadius: theme.radius.button,
-    color: theme.pallete.gray.c40,
+    color: theme.pallete.text.main,
     ':not(:disabled):active': {
       boxShadow: 'inset 0 2px 8px 0 rgba(0, 0, 0, 0.1)',
     },
diff --git a/src/components/Button/Button/skins/ghost.ts b/src/components/Button/Button/skins/ghost.ts
index 446940bda..973643fd8 100644
--- a/src/components/Button/Button/skins/ghost.ts
+++ b/src/components/Button/Button/skins/ghost.ts
@@ -6,7 +6,7 @@ export const createStyles = (theme: Theme): Skin => ({
     backgroundColor: 'transparent',
     border: '1px solid transparent',
     borderRadius: theme.radius.button,
-    color: theme.pallete.gray.c40,
+    color: theme.pallete.text.main,
     ':not(:disabled):active': {
       boxShadow: 'inset 0 2px 8px 0 rgba(0, 0, 0, 0.1)',
     },
diff --git a/src/components/Button/Button/skins/outline.ts b/src/components/Button/Button/skins/outline.ts
index a4ab7792b..78b17b3ad 100644
--- a/src/components/Button/Button/skins/outline.ts
+++ b/src/components/Button/Button/skins/outline.ts
@@ -4,9 +4,9 @@ import { Skin } from '../ButtonSkins'
 export const createStyles = (theme: Theme): Skin => ({
   button: {
     backgroundColor: 'transparent',
-    border: '1px solid ' + theme.pallete.gray.c60,
+    border: '1px solid ' + theme.pallete.gray.c40,
     borderRadius: theme.radius.button,
-    color: theme.pallete.gray.c40,
+    color: theme.pallete.text.main,
     ':not(:disabled):active': {
       boxShadow: 'inset 0 2px 8px 0 rgba(0, 0, 0, 0.1)',
     },
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 3734f8528..5421ad940 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -38,7 +38,7 @@ export const createStyles = (theme: Theme) => ({
   } as CSSProperties,
   check: {
     backgroundColor: theme.pallete.surface.main,
-    border: '1px solid ' + theme.pallete.gray.c70,
+    border: '1px solid ' + theme.pallete.gray.c60,
     borderRadius: theme.radius.input,
     display: 'inline-block',
     height: 16,
@@ -48,7 +48,6 @@ export const createStyles = (theme: Theme) => ({
     width: 16,
   } as CSSProperties,
   label: {
-    color: theme.pallete.gray.c30,
     marginLeft: '0.5rem',
   } as CSSProperties,
   disabled: {
@@ -61,7 +60,7 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'check' | 'l
     opacity: 0,
     marginRight: -13,
     [`&:hover + .${classes.check}`]: {
-      borderColor: theme.pallete.gray.c40,
+      borderColor: theme.pallete.gray.c50,
     },
     [`&:checked + .${classes.check}`]: {
       backgroundColor: theme.pallete.primary.main,
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 179f6b482..1030b5a6f 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -29,7 +29,7 @@ export const createStyles = (theme: Theme) => ({
   } as CSSProperties,
   radio: {
     backgroundColor: theme.pallete.surface.main,
-    border: '1px solid ' + theme.pallete.gray.c70,
+    border: '1px solid ' + theme.pallete.gray.c60,
     borderRadius: 100,
     display: 'inline-block',
     height: 16,
@@ -53,7 +53,6 @@ export const createStyles = (theme: Theme) => ({
     },
   } as CSSProperties,
   label: {
-    color: theme.pallete.gray.c30,
     marginLeft: '0.5rem',
   } as CSSProperties,
 })
@@ -63,7 +62,7 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'radio' | 'l
     opacity: 0,
     marginRight: -13,
     [`&:hover + .${classes.radio}`]: {
-      borderColor: theme.pallete.gray.c40,
+      borderColor: theme.pallete.gray.c50,
     },
     [`&:checked + .${classes.radio}`]: {
       backgroundColor: theme.pallete.primary.main,
diff --git a/src/components/TextField/TextInputBase.tsx b/src/components/TextField/TextInputBase.tsx
index 39dabd5aa..2fbfc5f8c 100644
--- a/src/components/TextField/TextInputBase.tsx
+++ b/src/components/TextField/TextInputBase.tsx
@@ -33,7 +33,7 @@ TextInputBase.defaultProps = {
 export const createStyleParts = (theme: Theme) => ({
   base: {
     backgroundColor: theme.pallete.surface.main,
-    border: 'solid 1px ' + theme.pallete.gray.c70,
+    border: 'solid 1px ' + theme.pallete.gray.c60,
     borderRadius: theme.radius.input,
     color: theme.pallete.text.main,
     fontFamily: theme.typography.fontFamily,
@@ -62,7 +62,7 @@ export const createStyleParts = (theme: Theme) => ({
     backgroundColor: theme.pallete.surface.background,
   } as CSSProperties,
   hover: {
-    borderColor: theme.pallete.gray.c60,
+    borderColor: theme.pallete.gray.c50,
   } as CSSProperties,
   active: {
     borderColor: theme.pallete.primary.main,


Test patch:
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index d705a0631..7e0780124 100644
--- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -180,7 +180,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
diff --git a/src/components/Button/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
index 60878215d..89b2d09d2 100644
--- a/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
@@ -35,9 +35,9 @@ exports[`should accept the loading prop 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -119,9 +119,9 @@ exports[`should render correctly with icon 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -199,9 +199,9 @@ exports[`should render correctly with label 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -263,9 +263,9 @@ exports[`should render the default skin 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -327,9 +327,9 @@ exports[`should render the default skin 2`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   background-color: #0069D0;
   color: #FFFFFF;
   border: 1px solid #0069D0;
@@ -398,9 +398,9 @@ exports[`should render the default skin 3`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   background-color: #D01E29;
   color: #FFFFFF;
   border: 1px solid #D01E29;
@@ -475,7 +475,7 @@ exports[`should render the ghost skin 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -539,7 +539,7 @@ exports[`should render the ghost skin 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   color: #0069D0;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
@@ -604,7 +604,7 @@ exports[`should render the ghost skin 3`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   color: #D01E29;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
@@ -671,9 +671,9 @@ exports[`should render the outline skin 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -735,9 +735,9 @@ exports[`should render the outline skin 2`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   border: 1px solid #0069D0;
   color: #0069D0;
   font-size: 0.875rem;
@@ -805,9 +805,9 @@ exports[`should render the outline skin 3`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   border: 1px solid #D01E29;
   color: #D01E29;
   font-size: 0.875rem;
diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
index f80cb8322..b9092b336 100644
--- a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
+++ b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
@@ -38,9 +38,9 @@ exports[`should render correctly 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
diff --git a/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
index f1085da2e..799dc8aa5 100644
--- a/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`Calendar should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
diff --git a/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap b/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
index 7bcac0668..83b29fbd8 100644
--- a/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
diff --git a/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap b/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
index e487b347d..a11e59802 100644
--- a/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 910c05fbe..2fde11c24 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Checkbox should render correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #AAAAB9;
+  border: 1px solid #8F8FA2;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -27,7 +27,6 @@ exports[`Checkbox should render correctly 1`] = `
 }
 
 .emotion-2 {
-  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -37,7 +36,7 @@ exports[`Checkbox should render correctly 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #696979;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:checked + .emotion-1 {
@@ -117,7 +116,7 @@ exports[`Checkbox should render correctly 1`] = `
 exports[`Checkbox should render correctly when disabled 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #AAAAB9;
+  border: 1px solid #8F8FA2;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -129,7 +128,6 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 }
 
 .emotion-2 {
-  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -139,7 +137,7 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #696979;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:checked + .emotion-1 {
@@ -245,7 +243,7 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #AAAAB9;
+  border: 1px solid #8F8FA2;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -257,7 +255,6 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 }
 
 .emotion-2 {
-  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -267,7 +264,7 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #696979;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:checked + .emotion-1 {
diff --git a/src/components/DateField/__snapshots__/DateField.test.tsx.snap b/src/components/DateField/__snapshots__/DateField.test.tsx.snap
index c011e70e7..d63183859 100644
--- a/src/components/DateField/__snapshots__/DateField.test.tsx.snap
+++ b/src/components/DateField/__snapshots__/DateField.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`DateField should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -93,7 +93,7 @@ exports[`DateField should render correctly 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -128,7 +128,7 @@ exports[`DateField should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -234,7 +234,7 @@ exports[`DateField should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -900,7 +900,7 @@ exports[`DateField should render correctly when disabled 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -956,7 +956,7 @@ exports[`DateField should render correctly when disabled 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -1041,7 +1041,7 @@ exports[`DateField should render correctly when disabled 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -1129,7 +1129,7 @@ exports[`DateField should render correctly when disabled 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   cursor: not-allowed;
diff --git a/src/components/DateField/__snapshots__/DateInput.test.tsx.snap b/src/components/DateField/__snapshots__/DateInput.test.tsx.snap
index c1ada70fe..afb6d7f19 100644
--- a/src/components/DateField/__snapshots__/DateInput.test.tsx.snap
+++ b/src/components/DateField/__snapshots__/DateInput.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -63,7 +63,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
diff --git a/src/components/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap b/src/components/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
index e20ca7d3a..7c19977ae 100644
--- a/src/components/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
+++ b/src/components/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`should accept the style prop 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -64,7 +64,7 @@ exports[`should accept the style prop 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -108,7 +108,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -164,7 +164,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
@@ -215,7 +215,7 @@ exports[`should render correctly with error 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -272,7 +272,7 @@ exports[`should render correctly with error 1`] = `
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 37e7cd579..5bd4c5719 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`Modal should accept "style" prop and pass down to ModalContainer 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -272,7 +272,7 @@ exports[`Modal should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -452,7 +452,7 @@ exports[`Modal sizes should accept the "auto" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -656,7 +656,7 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -836,7 +836,7 @@ exports[`Modal sizes should accept the "small" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
diff --git a/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap b/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
index 2628e49c8..34d82e2c7 100644
--- a/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`should accept the "style" prop 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -134,7 +134,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
diff --git a/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap b/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
index a6ffdc52d..ab2b9f7d3 100644
--- a/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
+++ b/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -157,9 +157,9 @@ exports[`should render correctly 1`] = `
   font-weight: bold;
   cursor: pointer;
   background-color: #FFFFFF;
-  border: 1px solid #8F8FA2;
+  border: 1px solid #696979;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   min-width: 144px;
diff --git a/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap b/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
index 8effac07a..65e3d2e2a 100644
--- a/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
+++ b/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Component presentation should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -93,7 +93,7 @@ exports[`Component presentation should render correctly 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -128,7 +128,7 @@ exports[`Component presentation should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -222,7 +222,7 @@ exports[`Component presentation should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -282,7 +282,7 @@ exports[`Component presentation should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   padding: calc(0.25rem - 1px) 1rem;
diff --git a/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap b/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
index 8e7d181f9..a0761606b 100644
--- a/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
+++ b/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -112,7 +112,7 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   padding: calc(0.25rem - 1px) 1rem;
@@ -169,7 +169,7 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
   padding: calc(0.25rem - 1px) 1rem;
diff --git a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
index c26325639..556becdca 100644
--- a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
+++ b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -102,7 +102,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -134,7 +134,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -193,7 +193,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-2:not(:disabled):focus {
@@ -322,7 +322,7 @@ exports[`should render correctly 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -354,7 +354,7 @@ exports[`should render correctly 2`] = `
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -413,7 +413,7 @@ exports[`should render correctly 2`] = `
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-2:not(:disabled):focus {
@@ -448,7 +448,7 @@ exports[`should render correctly 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   cursor: not-allowed;
@@ -596,7 +596,7 @@ exports[`should render correctly 3`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -628,7 +628,7 @@ exports[`should render correctly 3`] = `
 
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -687,7 +687,7 @@ exports[`should render correctly 3`] = `
 }
 
 .emotion-2:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-2:not(:disabled):focus {
@@ -722,7 +722,7 @@ exports[`should render correctly 3`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   cursor: not-allowed;
diff --git a/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
index 5f28e9aaa..826e42a82 100644
--- a/src/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: 1px solid #AAAAB9;
+  border: 1px solid #8F8FA2;
   border-radius: 100px;
   display: inline-block;
   height: 16px;
@@ -43,7 +43,6 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2 {
-  color: #515162;
   margin-left: 0.5rem;
 }
 
@@ -53,7 +52,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:hover + .emotion-1 {
-  border-color: #696979;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:checked + .emotion-1 {
diff --git a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
index 773c18f45..e6bab872a 100644
--- a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
+++ b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`input label label should have a htmlFor prop equals to the used id 1`] = `
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -50,7 +50,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
 }
 
 .emotion-2:hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-2:active {
@@ -149,7 +149,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
 exports[`input label should use aria-labelledby equals to an auto-assigned label id, if "id" is not provided 1`] = `
 .emotion-2 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -196,7 +196,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
 }
 
 .emotion-2:hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-2:active {
@@ -296,7 +296,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
 exports[`should render correctly when closed 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -343,7 +343,7 @@ exports[`should render correctly when closed 1`] = `
 }
 
 .emotion-1:hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:active {
@@ -429,7 +429,7 @@ exports[`should render correctly when closed 1`] = `
 exports[`should render correctly when opened 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -476,7 +476,7 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-1:hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:active {
@@ -591,7 +591,7 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-3 {
   background-color: #FFFFFF;
-  border: 1px solid #AAAAB9;
+  border: 1px solid #8F8FA2;
   border-radius: 2px;
   display: inline-block;
   height: 16px;
@@ -608,7 +608,7 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-2:hover + .emotion-3 {
-  border-color: #696979;
+  border-color: #7A7B8E;
 }
 
 .emotion-2:checked + .emotion-3 {
@@ -660,7 +660,7 @@ exports[`should render correctly when opened 1`] = `
   cursor: not-allowed;
 }
 
-.emotion-2:disabled + .emotion-3 + .css-tue92x {
+.emotion-2:disabled + .emotion-3 + .css-1f2k2gl {
   color: #AAAAB9;
   cursor: not-allowed;
 }
diff --git a/src/components/Select/SelectMulti/__snapshots__/SelectMultiInput.test.tsx.snap b/src/components/Select/SelectMulti/__snapshots__/SelectMultiInput.test.tsx.snap
index fbf008d60..ec6ded082 100644
--- a/src/components/Select/SelectMulti/__snapshots__/SelectMultiInput.test.tsx.snap
+++ b/src/components/Select/SelectMulti/__snapshots__/SelectMultiInput.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should render correctly 1`] = `
 .emotion-13 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -50,7 +50,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-13:hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-13:active {
diff --git a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
index fb118d59c..9a14ba966 100644
--- a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
+++ b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -89,7 +89,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
@@ -124,7 +124,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -271,7 +271,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -327,7 +327,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
@@ -362,7 +362,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -510,7 +510,7 @@ exports[`should render correctly when closed 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -566,7 +566,7 @@ exports[`should render correctly when closed 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -601,7 +601,7 @@ exports[`should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -735,7 +735,7 @@ exports[`should render correctly when opened 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -791,7 +791,7 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -826,7 +826,7 @@ exports[`should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
diff --git a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
index e71d8be15..f4d7af6ac 100644
--- a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
+++ b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -143,7 +143,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
 
 .emotion-4 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -199,7 +199,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-4:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-4:not(:disabled):focus {
@@ -234,7 +234,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -487,7 +487,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -586,7 +586,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
 
 .emotion-4 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -642,7 +642,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-4:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-4:not(:disabled):focus {
@@ -677,7 +677,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -941,7 +941,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -1049,7 +1049,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 
 .emotion-4 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -1105,7 +1105,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-4:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-4:not(:disabled):focus {
@@ -1140,7 +1140,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index b8ead3872..7b3f75412 100644
--- a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -88,7 +88,7 @@ exports[`renders correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   padding: 0 0.25rem;
@@ -163,7 +163,7 @@ exports[`renders correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -218,7 +218,7 @@ exports[`renders correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -250,7 +250,7 @@ exports[`renders correctly 1`] = `
 
 .emotion-8 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -309,7 +309,7 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-8:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-8:not(:disabled):focus {
diff --git a/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap b/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap
index 52952d63b..f161a6c8f 100644
--- a/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap
+++ b/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should accept style prop 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -60,7 +60,7 @@ exports[`should accept style prop 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -88,7 +88,7 @@ exports[`should accept style prop 1`] = `
 exports[`should render character counter 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -144,7 +144,7 @@ exports[`should render character counter 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -187,7 +187,7 @@ exports[`should render character counter 1`] = `
 exports[`should render character counter 2`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -243,7 +243,7 @@ exports[`should render character counter 2`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -286,7 +286,7 @@ exports[`should render character counter 2`] = `
 exports[`should render correctly 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -342,7 +342,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
@@ -387,7 +387,7 @@ exports[`should render correctly 1`] = `
 exports[`should render correctly when disabled 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -443,7 +443,7 @@ exports[`should render correctly when disabled 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -472,7 +472,7 @@ exports[`should render correctly when disabled 1`] = `
 exports[`should render correctly with error 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -529,7 +529,7 @@ exports[`should render correctly with error 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -585,7 +585,7 @@ exports[`should render correctly with error 1`] = `
 exports[`textarea label label should have a htmlFor prop equals to the used id 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -641,7 +641,7 @@ exports[`textarea label label should have a htmlFor prop equals to the used id 1
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
@@ -682,7 +682,7 @@ exports[`textarea label label should have a htmlFor prop equals to the used id 1
 exports[`textarea label should use aria-labelledby equals to an auto-assigned label id, if "id" is not provided 1`] = `
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -738,7 +738,7 @@ exports[`textarea label should use aria-labelledby equals to an auto-assigned la
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
diff --git a/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap b/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap
index 0b42d4beb..7f7e98cb6 100644
--- a/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap
@@ -156,7 +156,7 @@ exports[`should render correctly with button 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
diff --git a/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index c287e92ff..9fe237909 100644
--- a/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -70,7 +70,7 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
@@ -120,7 +120,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -176,7 +176,7 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
@@ -226,7 +226,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-1 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -283,7 +283,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-1:not(:disabled):focus {
diff --git a/src/components/TextField/__snapshots__/TextInput.test.tsx.snap b/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
index 26720c4e3..d55cb264c 100644
--- a/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`icon should render correctly with icon 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -59,7 +59,7 @@ exports[`icon should render correctly with icon 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
@@ -124,7 +124,7 @@ exports[`icon should render correctly with icon 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #696979;
+  color: #3A3A47;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -206,7 +206,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -262,7 +262,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
diff --git a/src/components/TextField/__snapshots__/TextInputBase.test.tsx.snap b/src/components/TextField/__snapshots__/TextInputBase.test.tsx.snap
index f2434ca56..6bec74280 100644
--- a/src/components/TextField/__snapshots__/TextInputBase.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/TextInputBase.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should render correctly 1`] = `
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -59,7 +59,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {
diff --git a/src/components/TimeField/__snapshots__/TimeField.test.tsx.snap b/src/components/TimeField/__snapshots__/TimeField.test.tsx.snap
index 9bf207d68..5b81a3951 100644
--- a/src/components/TimeField/__snapshots__/TimeField.test.tsx.snap
+++ b/src/components/TimeField/__snapshots__/TimeField.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`render should render correcly 1`] = `
 
 .emotion-0 {
   background-color: #FFFFFF;
-  border: solid 1px #AAAAB9;
+  border: solid 1px #8F8FA2;
   border-radius: 2px;
   color: #3A3A47;
   font-family: "IBM Plex Sans",sans-serif;
@@ -63,7 +63,7 @@ exports[`render should render correcly 1`] = `
 }
 
 .emotion-0:not(:disabled):hover {
-  border-color: #8F8FA2;
+  border-color: #7A7B8E;
 }
 
 .emotion-0:not(:disabled):focus {