Repository: laboratoriobridge/bold
Pull request #484 (2019-10-07 17:39:54)

Fix Button font-family back to default theme's font


Patch:
diff --git a/src/components/Button/Button/ButtonSkins.ts b/src/components/Button/Button/ButtonSkins.ts
index bfc767829..bc612a3f2 100644
--- a/src/components/Button/Button/ButtonSkins.ts
+++ b/src/components/Button/Button/ButtonSkins.ts
@@ -30,6 +30,7 @@ export interface SkinProps {
 
 export const createBaseStyles = (theme: Theme) => ({
   button: {
+    ...theme.typography.variant('main'),
     display: 'inline-flex',
     justifyContent: 'center',
     lineHeight: '1.5rem',


Test patch:
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 7e0780124..1cc5e9b4d 100644
--- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -159,6 +159,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -167,7 +171,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Button/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
index 89b2d09d2..e87f865e3 100644
--- a/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/Button/__snapshots__/Button.test.tsx.snap
@@ -16,6 +16,10 @@ exports[`should accept the loading prop 1`] = `
 }
 
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -24,7 +28,6 @@ exports[`should accept the loading prop 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -100,6 +103,10 @@ exports[`should accept the loading prop 1`] = `
 
 exports[`should render correctly with icon 1`] = `
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -108,7 +115,6 @@ exports[`should render correctly with icon 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -180,6 +186,10 @@ exports[`should render correctly with icon 1`] = `
 
 exports[`should render correctly with label 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -188,7 +198,6 @@ exports[`should render correctly with label 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -244,6 +253,10 @@ exports[`should render correctly with label 1`] = `
 
 exports[`should render the default skin 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -252,7 +265,6 @@ exports[`should render the default skin 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -308,6 +320,10 @@ exports[`should render the default skin 1`] = `
 
 exports[`should render the default skin 2`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -316,7 +332,6 @@ exports[`should render the default skin 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -379,6 +394,10 @@ exports[`should render the default skin 2`] = `
 
 exports[`should render the default skin 3`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -387,7 +406,6 @@ exports[`should render the default skin 3`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -454,6 +472,10 @@ exports[`should render the default skin 3`] = `
 
 exports[`should render the ghost skin 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -462,7 +484,6 @@ exports[`should render the ghost skin 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -518,6 +539,10 @@ exports[`should render the ghost skin 1`] = `
 
 exports[`should render the ghost skin 2`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -526,7 +551,6 @@ exports[`should render the ghost skin 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -583,6 +607,10 @@ exports[`should render the ghost skin 2`] = `
 
 exports[`should render the ghost skin 3`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -591,7 +619,6 @@ exports[`should render the ghost skin 3`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -652,6 +679,10 @@ exports[`should render the ghost skin 3`] = `
 
 exports[`should render the outline skin 1`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -660,7 +691,6 @@ exports[`should render the outline skin 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -716,6 +746,10 @@ exports[`should render the outline skin 1`] = `
 
 exports[`should render the outline skin 2`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -724,7 +758,6 @@ exports[`should render the outline skin 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -786,6 +819,10 @@ exports[`should render the outline skin 2`] = `
 
 exports[`should render the outline skin 3`] = `
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -794,7 +831,6 @@ exports[`should render the outline skin 3`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
index b9092b336..6164a0995 100644
--- a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
+++ b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
@@ -19,6 +19,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -27,7 +31,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
index 799dc8aa5..2de2f95a9 100644
--- a/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -30,6 +30,10 @@ exports[`Calendar should render correctly 1`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -38,7 +42,6 @@ exports[`Calendar should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap b/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
index 83b29fbd8..3fafdb859 100644
--- a/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/MonthControl.test.tsx.snap
@@ -13,6 +13,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -21,7 +25,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap b/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
index a11e59802..6d6066d1f 100644
--- a/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
+++ b/src/components/Calendar/__snapshots__/YearControl.test.tsx.snap
@@ -13,6 +13,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -21,7 +25,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/DateField/__snapshots__/DateField.test.tsx.snap b/src/components/DateField/__snapshots__/DateField.test.tsx.snap
index d63183859..9c0eec060 100644
--- a/src/components/DateField/__snapshots__/DateField.test.tsx.snap
+++ b/src/components/DateField/__snapshots__/DateField.test.tsx.snap
@@ -107,6 +107,10 @@ exports[`DateField should render correctly 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -115,7 +119,6 @@ exports[`DateField should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -213,6 +216,10 @@ exports[`DateField should render correctly 1`] = `
 }
 
 .emotion-8 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -221,7 +228,6 @@ exports[`DateField should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1020,6 +1026,10 @@ exports[`DateField should render correctly when disabled 1`] = `
 }
 
 .emotion-8 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1028,7 +1038,6 @@ exports[`DateField should render correctly when disabled 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1108,6 +1117,10 @@ exports[`DateField should render correctly when disabled 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1116,7 +1129,6 @@ exports[`DateField should render correctly when disabled 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 4d0f1b40f..c91ecf135 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -34,6 +34,10 @@ exports[`Modal should accept "style" prop and pass down to ModalContainer 1`] =
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -42,7 +46,6 @@ exports[`Modal should accept "style" prop and pass down to ModalContainer 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -251,6 +254,10 @@ exports[`Modal should render correctly when opened 1`] = `
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -259,7 +266,6 @@ exports[`Modal should render correctly when opened 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -437,6 +443,10 @@ exports[`Modal sizes should accept the "auto" size and render accordingly 1`] =
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -445,7 +455,6 @@ exports[`Modal sizes should accept the "auto" size and render accordingly 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -647,6 +656,10 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -655,7 +668,6 @@ exports[`Modal sizes should accept the "large" size and render accordingly 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -833,6 +845,10 @@ exports[`Modal sizes should accept the "small" size and render accordingly 1`] =
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -841,7 +857,6 @@ exports[`Modal sizes should accept the "small" size and render accordingly 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap b/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
index 34d82e2c7..68a175032 100644
--- a/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/ModalContainer.test.tsx.snap
@@ -2,6 +2,10 @@
 
 exports[`should accept the "style" prop 1`] = `
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -10,7 +14,6 @@ exports[`should accept the "style" prop 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -113,6 +116,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -121,7 +128,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap b/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
index 6b006cbb6..76ef440f1 100644
--- a/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
+++ b/src/components/Modal/auto/__snapshots__/ModalAuto.test.tsx.snap
@@ -39,6 +39,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -47,7 +51,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -145,6 +148,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-5 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -153,7 +160,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap b/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
index 65e3d2e2a..8b5e74021 100644
--- a/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
+++ b/src/components/MonthField/__snapshots__/MonthField.test.tsx.snap
@@ -107,6 +107,10 @@ exports[`Component presentation should render correctly 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -115,7 +119,6 @@ exports[`Component presentation should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -201,6 +204,10 @@ exports[`Component presentation should render correctly 1`] = `
 }
 
 .emotion-8 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -209,7 +216,6 @@ exports[`Component presentation should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -261,6 +267,10 @@ exports[`Component presentation should render correctly 1`] = `
 }
 
 .emotion-15 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -269,7 +279,6 @@ exports[`Component presentation should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap b/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
index a0761606b..9e9b9ef3a 100644
--- a/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
+++ b/src/components/MonthPicker/__snapshots__/MonthPicker.test.tsx.snap
@@ -26,6 +26,10 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -34,7 +38,6 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -91,6 +94,10 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
 }
 
 .emotion-8 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -99,7 +106,6 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -148,6 +154,10 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
 }
 
 .emotion-10 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -156,7 +166,6 @@ exports[`MonthPicker should render correctly with month and year 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
index d0fd3b546..ea529d4bf 100644
--- a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
+++ b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
@@ -14,6 +14,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -22,7 +26,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -155,6 +158,10 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-6 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -163,7 +170,6 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -375,6 +381,10 @@ exports[`should render correctly 2`] = `
 }
 
 .emotion-6 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -383,7 +393,6 @@ exports[`should render correctly 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -427,6 +436,10 @@ exports[`should render correctly 2`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -435,7 +448,6 @@ exports[`should render correctly 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -649,6 +661,10 @@ exports[`should render correctly 3`] = `
 }
 
 .emotion-6 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -657,7 +673,6 @@ exports[`should render correctly 3`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -701,6 +716,10 @@ exports[`should render correctly 3`] = `
 }
 
 .emotion-1 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -709,7 +728,6 @@ exports[`should render correctly 3`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
index b43328128..8b238a58e 100644
--- a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
+++ b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
@@ -103,6 +103,10 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -111,7 +115,6 @@ exports[`input label label should have a htmlFor prop equals to the used id 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -341,6 +344,10 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -349,7 +356,6 @@ exports[`input label should use aria-labelledby equals to an auto-assigned label
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -580,6 +586,10 @@ exports[`should render correctly when closed 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -588,7 +598,6 @@ exports[`should render correctly when closed 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -805,6 +814,10 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -813,7 +826,6 @@ exports[`should render correctly when opened 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
index ea9b8f905..b481025d1 100644
--- a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
+++ b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
@@ -14,6 +14,10 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -22,7 +26,6 @@ exports[`SelectInline should render correctly when closed 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -213,6 +216,10 @@ exports[`SelectInline should render correctly when closed 1`] = `
 }
 
 .emotion-6 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -221,7 +228,6 @@ exports[`SelectInline should render correctly when closed 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -466,6 +472,10 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -474,7 +484,6 @@ exports[`SelectInline should render correctly when opened 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -656,6 +665,10 @@ exports[`SelectInline should render correctly when opened 1`] = `
 }
 
 .emotion-6 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -664,7 +677,6 @@ exports[`SelectInline should render correctly when opened 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -920,6 +932,10 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -928,7 +944,6 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1119,6 +1134,10 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
 }
 
 .emotion-6 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1127,7 +1146,6 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index 8f16b9a2d..002fd8b41 100644
--- a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -67,6 +67,10 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -75,7 +79,6 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -142,6 +145,10 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-7 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -150,7 +157,6 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -271,6 +277,10 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-12 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -279,7 +289,6 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap b/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap
index 7f7e98cb6..dcb5757cb 100644
--- a/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/InputWrapper.test.tsx.snap
@@ -135,6 +135,10 @@ exports[`should render correctly with button 1`] = `
 }
 
 .emotion-3 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -143,7 +147,6 @@ exports[`should render correctly with button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/TextField/__snapshots__/TextInput.test.tsx.snap b/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
index d55cb264c..2983534f4 100644
--- a/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/TextInput.test.tsx.snap
@@ -103,6 +103,10 @@ exports[`icon should render correctly with icon 1`] = `
 }
 
 .emotion-2 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5rem;
+  color: #3A3A47;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -111,7 +115,6 @@ exports[`icon should render correctly with icon 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  line-height: 1.5rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;