Repository: laboratoriobridge/bold
Pull request #467 (2019-09-17 17:25:13)

Correção das cores dos ícones e textos dentro dos botoes para gray 40


Patch:
diff --git a/src/components/Button/Button/skins/default.ts b/src/components/Button/Button/skins/default.ts
index 6bce946c8..b1a4cb93d 100644
--- a/src/components/Button/Button/skins/default.ts
+++ b/src/components/Button/Button/skins/default.ts
@@ -6,7 +6,7 @@ export const createStyles = (theme: Theme): Skin => ({
     backgroundColor: theme.pallete.surface.main,
     border: '1px solid ' + theme.pallete.gray.c60,
     borderRadius: theme.radius.button,
-    color: theme.pallete.text.main,
+    color: theme.pallete.gray.c40,
     ':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 973643fd8..446940bda 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.text.main,
+    color: theme.pallete.gray.c40,
     ':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 4471c24a4..a4ab7792b 100644
--- a/src/components/Button/Button/skins/outline.ts
+++ b/src/components/Button/Button/skins/outline.ts
@@ -6,7 +6,7 @@ export const createStyles = (theme: Theme): Skin => ({
     backgroundColor: 'transparent',
     border: '1px solid ' + theme.pallete.gray.c60,
     borderRadius: theme.radius.button,
-    color: theme.pallete.text.main,
+    color: theme.pallete.gray.c40,
     ':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..1f99a35ee 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -99,12 +99,11 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'check' | 'l
       boxShadow: focusBoxShadow(theme),
     },
     [`&:disabled + .${classes.check}`]: {
-      opacity: 0.4,
-      cursor: 'not-allowed',
+      backgroundColor: theme.pallete.surface.background,
+      borderColor: theme.pallete.gray.c90,
     },
     [`&:disabled + .${classes.check} + .${classes.label}`]: {
       color: theme.pallete.gray.c70,
-      cursor: 'not-allowed',
     },
   },
 })
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 179f6b482..c6e7c7950 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -76,12 +76,11 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'radio' | 'l
       boxShadow: focusBoxShadow(theme),
     },
     [`&:disabled + .${classes.radio}`]: {
-      opacity: 0.4,
-      cursor: 'not-allowed',
+      backgroundColor: theme.pallete.surface.background,
+      borderColor: theme.pallete.gray.c90,
     },
     [`&:disabled + .${classes.radio} + .${classes.label}`]: {
       color: theme.pallete.gray.c70,
-      cursor: 'not-allowed',
     },
   },
 })
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 583c51284..bc115911a 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -64,7 +64,6 @@ export const createStyles = (theme: Theme) => ({
     width: '1rem',
     height: '1rem',
     transition: 'all .2s',
-    border: `1px solid ${theme.pallete.gray.c60}`,
     boxShadow: theme.shadows.outer['20'],
   } as CSSProperties,
   text: {
@@ -72,7 +71,7 @@ export const createStyles = (theme: Theme) => ({
   } as CSSProperties,
 })
 
-export const createInputStyles = (theme: Theme, classes: ClassNames<'switch' | 'knob' | 'text'>) => ({
+export const createInputStyles = (theme: Theme, classes: ClassNames<'switch' | 'knob'>) => ({
   wrapper: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -104,9 +103,5 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'switch' | '
       opacity: 0.4,
       cursor: 'not-allowed',
     },
-    [`&:disabled + .${classes.switch} + .${classes.text}`]: {
-      color: theme.pallete.gray.c70,
-      cursor: 'not-allowed',
-    },
   } as CSSProperties,
 })
diff --git a/src/components/Tooltip/TooltipPopper.tsx b/src/components/Tooltip/TooltipPopper.tsx
index 9fca6bb0d..c7f3050e9 100644
--- a/src/components/Tooltip/TooltipPopper.tsx
+++ b/src/components/Tooltip/TooltipPopper.tsx
@@ -23,7 +23,6 @@ export const styles = (theme: Theme) => ({
     maxWidth: theme.breakpoints.size.lg,
     background: theme.pallete.gray.c20,
     color: theme.pallete.gray.c100,
-    fontSize: '0.875rem',
     fontWeight: 'bold',
     lineHeight: 1.5,
   } as React.CSSProperties,


Test patch:
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index d27540bdc..4eaa6b25f 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: #3A3A47;
+  color: #696979;
   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 f514d038a..60878215d 100644
--- a/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`should accept the loading prop 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -121,7 +121,7 @@ exports[`should render correctly with icon 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -201,7 +201,7 @@ exports[`should render correctly with label 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -265,7 +265,7 @@ exports[`should render the default skin 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -329,7 +329,7 @@ exports[`should render the default skin 2`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   background-color: #0069D0;
   color: #FFFFFF;
   border: 1px solid #0069D0;
@@ -400,7 +400,7 @@ exports[`should render the default skin 3`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   color: #D01E29;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
@@ -673,7 +673,7 @@ exports[`should render the outline skin 1`] = `
   background-color: transparent;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.75rem - 1px) 2.5rem;
 }
@@ -737,7 +737,7 @@ exports[`should render the outline skin 2`] = `
   background-color: transparent;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   border: 1px solid #0069D0;
   color: #0069D0;
   font-size: 0.875rem;
@@ -807,7 +807,7 @@ exports[`should render the outline skin 3`] = `
   background-color: transparent;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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 c3c4ce5ce..f80cb8322 100644
--- a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
+++ b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`should render correctly 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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 799dc8aa5..f1085da2e 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: #3A3A47;
+  color: #696979;
   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 83b29fbd8..7bcac0668 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: #3A3A47;
+  color: #696979;
   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 a11e59802..e487b347d 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: #3A3A47;
+  color: #696979;
   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..204e9ff15 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -85,13 +85,12 @@ exports[`Checkbox should render correctly 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  opacity: 0.4;
-  cursor: not-allowed;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
-  cursor: not-allowed;
 }
 
 <div>
@@ -187,13 +186,12 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  opacity: 0.4;
-  cursor: not-allowed;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
-  cursor: not-allowed;
 }
 
 .emotion-3 {
@@ -315,13 +313,12 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  opacity: 0.4;
-  cursor: not-allowed;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
-  cursor: not-allowed;
 }
 
 <div>
diff --git a/src/components/DateField/__snapshots__/DateField.test.tsx.snap b/src/components/DateField/__snapshots__/DateField.test.tsx.snap
index f52af31e5..c011e70e7 100644
--- a/src/components/DateField/__snapshots__/DateField.test.tsx.snap
+++ b/src/components/DateField/__snapshots__/DateField.test.tsx.snap
@@ -128,7 +128,7 @@ exports[`DateField should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -1041,7 +1041,7 @@ exports[`DateField should render correctly when disabled 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   cursor: not-allowed;
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 520191222..3d2ab8ce1 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`Modal should accept "style" prop and pass down to ModalContainer 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -234,7 +234,7 @@ exports[`Modal should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -382,7 +382,7 @@ exports[`Modal sizes should accept the "auto" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -554,7 +554,7 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -702,7 +702,7 @@ exports[`Modal sizes should accept the "small" size and render accordingly 1`] =
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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 374fb5265..5b0ae7975 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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -133,7 +133,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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 8785fb3ee..ff3967231 100644
--- a/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
+++ b/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   float: right;
@@ -141,7 +141,7 @@ exports[`should render correctly 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #8F8FA2;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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 9cc4c3b2f..8effac07a 100644
--- a/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
+++ b/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
@@ -128,7 +128,7 @@ exports[`Component presentation should render correctly 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   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 a0761606b..8e7d181f9 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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   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 79b711dc9..c26325639 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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -322,7 +322,7 @@ exports[`should render correctly 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -448,7 +448,7 @@ exports[`should render correctly 2`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
@@ -722,7 +722,7 @@ exports[`should render correctly 3`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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..861411cdc 100644
--- a/src/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -70,13 +70,12 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  opacity: 0.4;
-  cursor: not-allowed;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
-  cursor: not-allowed;
 }
 
 <div>
diff --git a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
index 773c18f45..4cd948a8d 100644
--- a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
+++ b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
@@ -656,13 +656,12 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-2:disabled + .emotion-3 {
-  opacity: 0.4;
-  cursor: not-allowed;
+  background-color: #F0F0F5;
+  border-color: #F0F0F5;
 }
 
 .emotion-2:disabled + .emotion-3 + .css-tue92x {
   color: #AAAAB9;
-  cursor: not-allowed;
 }
 
 <div>
diff --git a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
index d0b50bc72..fb118d59c 100644
--- a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
+++ b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
@@ -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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -601,7 +601,7 @@ exports[`should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
@@ -826,7 +826,7 @@ exports[`should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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 fc5d3de5a..e71d8be15 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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -234,7 +234,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -677,7 +677,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
 }
@@ -1140,7 +1140,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
diff --git a/src/components/Switch/__snapshots__/Switch.test.tsx.snap b/src/components/Switch/__snapshots__/Switch.test.tsx.snap
index 018780c4d..47f953b8a 100644
--- a/src/components/Switch/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/Switch/__snapshots__/Switch.test.tsx.snap
@@ -22,7 +22,6 @@ exports[`should render correctly 1`] = `
   height: 1rem;
   -webkit-transition: all .2s;
   transition: all .2s;
-  border: 1px solid #8F8FA2;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
 }
 
@@ -74,11 +73,6 @@ exports[`should render correctly 1`] = `
   cursor: not-allowed;
 }
 
-.emotion-0:disabled + .emotion-2 + .css-1f2k2gl {
-  color: #AAAAB9;
-  cursor: not-allowed;
-}
-
 <div>
   <label
     class="emotion-3"
@@ -121,7 +115,6 @@ exports[`should render correctly when disabled 1`] = `
   height: 1rem;
   -webkit-transition: all .2s;
   transition: all .2s;
-  border: 1px solid #8F8FA2;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
 }
 
@@ -177,11 +170,6 @@ exports[`should render correctly when disabled 1`] = `
   cursor: not-allowed;
 }
 
-.emotion-0:disabled + .emotion-2 + .emotion-3 {
-  color: #AAAAB9;
-  cursor: not-allowed;
-}
-
 <div>
   <label
     class="emotion-4"
@@ -230,7 +218,6 @@ exports[`should render correctly with label 1`] = `
   height: 1rem;
   -webkit-transition: all .2s;
   transition: all .2s;
-  border: 1px solid #8F8FA2;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
 }
 
@@ -286,11 +273,6 @@ exports[`should render correctly with label 1`] = `
   cursor: not-allowed;
 }
 
-.emotion-0:disabled + .emotion-2 + .emotion-3 {
-  color: #AAAAB9;
-  cursor: not-allowed;
-}
-
 <div>
   <label
     class="emotion-4"
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index 4f3239a20..b8ead3872 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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   margin-left: 0.25rem;
diff --git a/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap b/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap
index 6f1f49b2f..405f3b97b 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: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
diff --git a/src/components/TextField/__snapshots__/TextInput.test.tsx.snap b/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
index d678c393b..26720c4e3 100644
--- a/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`icon should render correctly with icon 1`] = `
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: #3A3A47;
+  color: #696979;
   font-size: 0.875rem;
   padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
   border-radius: inherit;
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index a4875a72f..09278c7cc 100644
--- a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`should render correctly 2`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
-  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: center;
diff --git a/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap b/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
index 7099d12d1..274032224 100644
--- a/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`should accept style prop 1`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
-  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: center;
@@ -29,7 +28,6 @@ exports[`should render the big version when text length is > 60 1`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
-  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: left;
@@ -52,7 +50,6 @@ exports[`should render the small version when text length is <= 60 1`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
-  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: center;