diff --git a/src/js/__tests__/__snapshots__/default-props-test.js.snap b/src/js/__tests__/__snapshots__/default-props-test.js.snap
index 05de09b3d18..26cf4a3f864 100644
--- a/src/js/__tests__/__snapshots__/default-props-test.js.snap
+++ b/src/js/__tests__/__snapshots__/default-props-test.js.snap
@@ -110,7 +110,8 @@ exports[`uses Grommet theme instead of default 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background: red;
+  background-color: #7D4CDB;
+  color: #f8f8f8;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -119,8 +120,11 @@ exports[`uses Grommet theme instead of default 1`] = `
 }
 
 .c0 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 18px;
   line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
diff --git a/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap b/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap
index 8da86720f12..ee9736349ae 100644
--- a/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap
+++ b/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap
@@ -3906,7 +3906,7 @@ exports[`Accordion complex title 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  border-bottom: solid 1px rgba(0,0,0,0.33);
+  border-bottom: solid 1px rgba(255,255,255,0.33);
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -3998,7 +3998,7 @@ exports[`Accordion complex title 1`] = `
 
 @media only screen and (max-width:768px) {
   .c8 {
-    border-bottom: solid 1px rgba(0,0,0,0.33);
+    border-bottom: solid 1px rgba(255,255,255,0.33);
   }
 }
 
diff --git a/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap b/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap
index a848391ee07..a299e744c25 100644
--- a/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap
+++ b/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap
@@ -991,7 +991,7 @@ exports[`Anchor renders a11yTitle and aria-label 1`] = `
 
 exports[`Anchor renders size specific theming 1`] = `
 <DocumentFragment>
-  .c17 {
+  .c18 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1002,30 +1002,30 @@ exports[`Anchor renders size specific theming 1`] = `
   stroke: #000000;
 }
 
-.c17 g {
+.c18 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c17 *:not([stroke])[fill='none'] {
+.c18 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c17 *[stroke*='#'],
-.c17 *[STROKE*='#'] {
+.c18 *[stroke*='#'],
+.c18 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c17 *[fill-rule],
-.c17 *[FILL-RULE],
-.c17 *[fill*='#'],
-.c17 *[FILL*='#'] {
+.c18 *[fill-rule],
+.c18 *[FILL-RULE],
+.c18 *[fill*='#'],
+.c18 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c19 {
+.c20 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1036,25 +1036,25 @@ exports[`Anchor renders size specific theming 1`] = `
   stroke: #7D4CDB;
 }
 
-.c19 g {
+.c20 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c19 *:not([stroke])[fill='none'] {
+.c20 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c19 *[stroke*='#'],
-.c19 *[STROKE*='#'] {
+.c20 *[stroke*='#'],
+.c20 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c19 *[fill-rule],
-.c19 *[FILL-RULE],
-.c19 *[fill*='#'],
-.c19 *[FILL*='#'] {
+.c20 *[fill-rule],
+.c20 *[FILL-RULE],
+.c20 *[fill*='#'],
+.c20 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -1083,7 +1083,7 @@ exports[`Anchor renders size specific theming 1`] = `
   flex-direction: column;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1101,7 +1101,7 @@ exports[`Anchor renders size specific theming 1`] = `
   flex-direction: row;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -1119,10 +1119,10 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: 12px;
   line-height: 18px;
-  color: #7D4CDB;
-  font-weight: 600;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -1139,10 +1139,10 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: 14px;
   line-height: 20px;
-  color: #7D4CDB;
-  font-weight: 600;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -1159,10 +1159,10 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: 18px;
   line-height: 24px;
-  color: #7D4CDB;
-  font-weight: 600;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -1180,7 +1180,7 @@ exports[`Anchor renders size specific theming 1`] = `
   font-size: 22px;
   line-height: 28px;
   color: #7D4CDB;
-  font-weight: 600;
+  font-weight: 500;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1200,7 +1200,7 @@ exports[`Anchor renders size specific theming 1`] = `
   font-size: 26px;
   line-height: 32px;
   color: #7D4CDB;
-  font-weight: 600;
+  font-weight: 500;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1220,7 +1220,7 @@ exports[`Anchor renders size specific theming 1`] = `
   font-size: 34px;
   line-height: 40px;
   color: #7D4CDB;
-  font-weight: 600;
+  font-weight: 500;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1239,14 +1239,34 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: inherit;
   line-height: inherit;
-  color: #7D4CDB;
-  font-weight: 600;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.c15:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c16 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: inherit;
+  line-height: inherit;
+  color: #000000;
+  font-weight: 700;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.c15:hover {
+.c16:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -1427,14 +1447,14 @@ exports[`Anchor renders size specific theming 1`] = `
       Default anchor with no size prop should receive medium
     </a>
     <a
-      class="c15"
+      class="c16"
     >
       <span
-        class="c16"
+        class="c17"
       >
         <svg
           aria-label="LinkNext"
-          class="c17"
+          class="c18"
           viewBox="0 0 24 24"
         >
           <path
@@ -1445,7 +1465,7 @@ exports[`Anchor renders size specific theming 1`] = `
           />
         </svg>
         <span
-          class="c18"
+          class="c19"
         />
         Anchor with icon
       </span>
@@ -1454,11 +1474,11 @@ exports[`Anchor renders size specific theming 1`] = `
       class="c8"
     >
       <span
-        class="c16"
+        class="c17"
       >
         <svg
           aria-label="LinkNext"
-          class="c19"
+          class="c20"
           viewBox="0 0 24 24"
         >
           <path
@@ -1469,7 +1489,7 @@ exports[`Anchor renders size specific theming 1`] = `
           />
         </svg>
         <span
-          class="c18"
+          class="c19"
         />
         Large anchor with icon should receive color on icon
       </span>
diff --git a/src/js/components/Box/__tests__/__snapshots__/Box-style-test.tsx.snap b/src/js/components/Box/__tests__/__snapshots__/Box-style-test.tsx.snap
index 6da53862331..48e05ae5d57 100644
--- a/src/js/components/Box/__tests__/__snapshots__/Box-style-test.tsx.snap
+++ b/src/js/components/Box/__tests__/__snapshots__/Box-style-test.tsx.snap
@@ -826,7 +826,7 @@ exports[`Box background clip 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-image: gradient-1;
+  background-image: linear-gradient( hsl(240deg 90% 55%) 0%, hsl(341deg 90% 55%) 50%, hsl(60deg 90% 55%) 100%);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
@@ -881,7 +881,7 @@ exports[`Box background from theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background: gradient-1;
+  background: linear-gradient( hsl(240deg 90% 55%) 0%, hsl(341deg 90% 55%) 50%, hsl(60deg 90% 55%) 100%);
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -916,7 +916,7 @@ exports[`Box background from theme 1`] = `
   z-index: -1;
   border-radius: inherit;
   background-color: red;
-  background-image: image-2;
+  background-image: url(https://images.unsplash.com/photo-1603484477859-abe6a73f9366?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
@@ -1649,6 +1649,21 @@ exports[`Box elevation 1`] = `
   box-shadow: 0px 2px 4px rgba(0,0,0,0.20);
 }
 
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  box-shadow: 0px 4px 4px rgba(255,255,255,0.40);
+}
+
 <div
   class="c0"
 >
@@ -1674,7 +1689,7 @@ exports[`Box elevation 1`] = `
     class="c7"
   >
     <div
-      class="c3"
+      class="c8"
     />
   </div>
 </div>
diff --git a/src/js/components/Button/__tests__/__snapshots__/Button-kind-test.js.snap b/src/js/components/Button/__tests__/__snapshots__/Button-kind-test.js.snap
index a4914a3bd86..a1a0d131378 100644
--- a/src/js/components/Button/__tests__/__snapshots__/Button-kind-test.js.snap
+++ b/src/js/components/Button/__tests__/__snapshots__/Button-kind-test.js.snap
@@ -47,7 +47,7 @@ exports[`Button kind badge should align to button container if specified in them
 .c6 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
@@ -235,6 +235,10 @@ exports[`Button kind badge should apply background 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: rgba(0,0,0,0.33);
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -396,6 +400,10 @@ exports[`Button kind badge should be offset from top-right corner 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: rgba(0,0,0,0.33);
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -538,7 +546,7 @@ exports[`Button kind badge should display "+" when number is greater than max 1`
 .c6 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
@@ -558,6 +566,10 @@ exports[`Button kind badge should display "+" when number is greater than max 1`
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: rgba(0,0,0,0.33);
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -706,7 +718,7 @@ exports[`Button kind badge should display number content 1`] = `
 .c6 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
@@ -726,6 +738,10 @@ exports[`Button kind badge should display number content 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: rgba(0,0,0,0.33);
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -907,6 +923,10 @@ exports[`Button kind badge should render custom element 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: rgba(0,0,0,0.33);
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -1237,6 +1257,10 @@ exports[`Button kind border on default button 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: green;
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -1359,6 +1383,8 @@ exports[`Button kind button icon colors 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 0;
+  background-color: #000;
+  border-color: #666666;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -1609,8 +1635,8 @@ exports[`Button kind button with transparent background 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  background-color: background;
-  color: #f8f8f8;
+  background-color: rgba(28,28,28,1);
+  color: #FFFFFF;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1660,10 +1686,12 @@ exports[`Button kind button with transparent background 1`] = `
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 22px;
+  border-radius: 2em;
+  padding: 6px 18px;
   font-size: 18px;
   line-height: 24px;
+  background-color: #FFFFFF0F;
+  color: #FFFFFF;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -1671,11 +1699,13 @@ exports[`Button kind button with transparent background 1`] = `
   transition-duration: 0.1s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
+  font-size: 19px;
+  line-height: 24px;
 }
 
 .c2:focus {
   outline: none;
-  box-shadow: 0 0 2px 2px #6FFFB0;
+  box-shadow: 0 0 2px 2px #00E8CF;
 }
 
 .c2:focus > circle,
@@ -1686,7 +1716,7 @@ exports[`Button kind button with transparent background 1`] = `
 .c2:focus > polyline,
 .c2:focus > rect {
   outline: none;
-  box-shadow: 0 0 2px 2px #6FFFB0;
+  box-shadow: 0 0 2px 2px #00E8CF;
 }
 
 .c2:focus::-moz-focus-inner {
@@ -1724,15 +1754,18 @@ exports[`Button kind button with transparent background 1`] = `
   background: transparent;
   overflow: visible;
   text-transform: none;
-  background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  background-color: #FFFFFF0F;
+  color: #FFFFFF;
   border: none;
-  border-radius: 18px;
-  padding: 4px 22px;
+  border-radius: 2em;
+  padding: 6px 18px;
   font-size: 18px;
   line-height: 24px;
-  background-color: #33333310;
-  color: #000000;
+  background-color: #FFFFFF0F;
+  color: #FFFFFF;
+  background-color: rgba(255,255,255,0.058823529411764705);
+  color: #FFFFFF;
+  color: #FFFFFF;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -1740,11 +1773,13 @@ exports[`Button kind button with transparent background 1`] = `
   transition-duration: 0.1s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
+  font-size: 19px;
+  line-height: 24px;
 }
 
 .c4:focus {
   outline: none;
-  box-shadow: 0 0 2px 2px #6FFFB0;
+  box-shadow: 0 0 2px 2px #00E8CF;
 }
 
 .c4:focus > circle,
@@ -1755,7 +1790,7 @@ exports[`Button kind button with transparent background 1`] = `
 .c4:focus > polyline,
 .c4:focus > rect {
   outline: none;
-  box-shadow: 0 0 2px 2px #6FFFB0;
+  box-shadow: 0 0 2px 2px #00E8CF;
 }
 
 .c4:focus::-moz-focus-inner {
@@ -1782,9 +1817,155 @@ exports[`Button kind button with transparent background 1`] = `
   border: 0;
 }
 
+.c6 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  border: none;
+  border-radius: 2em;
+  padding: 6px 18px;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #0000000A;
+  color: #333333;
+  text-align: center;
+  -webkit-transition-property: color,background-color,border-color,box-shadow;
+  transition-property: color,background-color,border-color,box-shadow;
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  font-size: 19px;
+  line-height: 24px;
+}
+
+.c6:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #00E8CF;
+}
+
+.c6:focus > circle,
+.c6:focus > ellipse,
+.c6:focus > line,
+.c6:focus > path,
+.c6:focus > polygon,
+.c6:focus > polyline,
+.c6:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #00E8CF;
+}
+
+.c6:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c6:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible) > circle,
+.c6:focus:not(:focus-visible) > ellipse,
+.c6:focus:not(:focus-visible) > line,
+.c6:focus:not(:focus-visible) > path,
+.c6:focus:not(:focus-visible) > polygon,
+.c6:focus:not(:focus-visible) > polyline,
+.c6:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
+.c7 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  background-color: #0000000A;
+  color: #555555;
+  border: none;
+  border-radius: 2em;
+  padding: 6px 18px;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #0000000A;
+  color: #333333;
+  background-color: rgba(0,0,0,0.0392156862745098);
+  color: #333333;
+  color: #333333;
+  text-align: center;
+  -webkit-transition-property: color,background-color,border-color,box-shadow;
+  transition-property: color,background-color,border-color,box-shadow;
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  font-size: 19px;
+  line-height: 24px;
+}
+
+.c7:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #00E8CF;
+}
+
+.c7:focus > circle,
+.c7:focus > ellipse,
+.c7:focus > line,
+.c7:focus > path,
+.c7:focus > polygon,
+.c7:focus > polyline,
+.c7:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #00E8CF;
+}
+
+.c7:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c7:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c7:focus:not(:focus-visible) > circle,
+.c7:focus:not(:focus-visible) > ellipse,
+.c7:focus:not(:focus-visible) > line,
+.c7:focus:not(:focus-visible) > path,
+.c7:focus:not(:focus-visible) > polygon,
+.c7:focus:not(:focus-visible) > polyline,
+.c7:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c7:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c0 {
+  font-family: 'Metric',Arial,sans-serif;
   font-size: 18px;
   line-height: 24px;
+  background-color: #FFFFFF;
+  color: #555555;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -1836,7 +2017,7 @@ exports[`Button kind button with transparent background 1`] = `
       class="c5"
     >
       <button
-        class="c2"
+        class="c6"
         type="button"
       >
         Test button
@@ -1845,7 +2026,7 @@ exports[`Button kind button with transparent background 1`] = `
         class="c3"
       />
       <button
-        class="c4"
+        class="c7"
         type="button"
       >
         Active Test button
@@ -1868,10 +2049,13 @@ exports[`Button kind default button 1`] = `
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 22px;
+  border-radius: 4px;
+  padding: 4px 10px;
   font-size: 18px;
   line-height: 24px;
+  padding: 6px 12px;
+  color: #444444;
+  font-weight: 700;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -1881,6 +2065,10 @@ exports[`Button kind default button 1`] = `
   transition-timing-function: ease-in-out;
 }
 
+.c1:hover {
+  background-color: rgba(51,51,51,0.06274509803921569);
+}
+
 .c1:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
@@ -2064,6 +2252,7 @@ exports[`Button kind extend on default button 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  color: green;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -2390,6 +2579,8 @@ exports[`Button kind font on button default 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  line-height: 20px;
+  font-weight: 700;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -2652,6 +2843,8 @@ exports[`Button kind hover secondary with color and background 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  background-color: skyblue;
+  color: #FFFFFF;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -2661,6 +2854,11 @@ exports[`Button kind hover secondary with color and background 1`] = `
   transition-timing-function: ease-in-out;
 }
 
+.c1:hover {
+  background-color: orange;
+  color: green;
+}
+
 .c1:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
@@ -2728,7 +2926,7 @@ exports[`Button kind hover secondary with color and background 2`] = `
   class="StyledGrommet-sc-19lkkz7-0 gIiCYk"
 >
   <button
-    class="StyledButtonKind-sc-1vhfpnt-0 hXBXTb"
+    class="StyledButtonKind-sc-1vhfpnt-0 daTts"
     type="button"
   >
     Button
@@ -2891,7 +3089,7 @@ exports[`Button kind icon only pad should apply when icon but no label 1`] = `
   text-transform: none;
   border: none;
   border-radius: 18px;
-  padding: 4px 20px;
+  padding: 5px 5px;
   font-size: 14px;
   line-height: 0;
   text-align: center;
@@ -2967,7 +3165,7 @@ exports[`Button kind icon only pad should apply when icon but no label 1`] = `
   text-transform: none;
   border: none;
   border-radius: 18px;
-  padding: 4px 20px;
+  padding: 5px 12px;
   font-size: 14px;
   line-height: 20px;
   text-align: center;
@@ -3032,7 +3230,7 @@ exports[`Button kind icon only pad should apply when icon but no label 1`] = `
   text-transform: none;
   border: none;
   border-radius: 18px;
-  padding: 4px 22px;
+  padding: 8px 12px;
   font-size: 18px;
   line-height: 0;
   text-align: center;
@@ -3108,7 +3306,7 @@ exports[`Button kind icon only pad should apply when icon but no label 1`] = `
   text-transform: none;
   border: none;
   border-radius: 18px;
-  padding: 4px 22px;
+  padding: 8px 18px;
   font-size: 18px;
   line-height: 24px;
   text-align: center;
@@ -3173,7 +3371,7 @@ exports[`Button kind icon only pad should apply when icon but no label 1`] = `
   text-transform: none;
   border: none;
   border-radius: 24px;
-  padding: 8px 32px;
+  padding: 18px 18px;
   font-size: 22px;
   line-height: 0;
   text-align: center;
@@ -3249,7 +3447,7 @@ exports[`Button kind icon only pad should apply when icon but no label 1`] = `
   text-transform: none;
   border: none;
   border-radius: 24px;
-  padding: 8px 32px;
+  padding: 18px 24px;
   font-size: 22px;
   line-height: 28px;
   text-align: center;
@@ -4196,6 +4394,8 @@ exports[`Button kind mouseOver and mouseOut events 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  background-color: #000;
+  color: #f8f8f8;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -4302,7 +4502,7 @@ exports[`Button kind mouseOver and mouseOut events 2`] = `
   class="StyledGrommet-sc-19lkkz7-0 gIiCYk"
 >
   <button
-    class="StyledButtonKind-sc-1vhfpnt-0 hOGpqB"
+    class="StyledButtonKind-sc-1vhfpnt-0 cFkjwE"
     type="button"
   >
     <div
@@ -4346,6 +4546,7 @@ exports[`Button kind no border on default button 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  border: none;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -4434,6 +4635,8 @@ exports[`Button kind no padding on default button 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  padding: 0px;
+  color: #444444;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -4522,6 +4725,7 @@ exports[`Button kind opacity on default button 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  opacity: 0.4;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -4610,6 +4814,9 @@ exports[`Button kind padding on default button 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  padding: 6px 12px;
+  background-color: green;
+  color: #444444;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -4902,10 +5109,13 @@ exports[`Button kind primary button 1`] = `
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 22px;
+  border-radius: 4px;
+  padding: 4px 10px;
   font-size: 18px;
   line-height: 24px;
+  padding: 6px 12px;
+  background-color: green;
+  color: #000000;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -4967,13 +5177,22 @@ exports[`Button kind primary button 1`] = `
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 22px;
+  border-radius: 4px;
+  padding: 4px 10px;
   font-size: 18px;
   line-height: 24px;
-  opacity: 0.3;
+  padding: 6px 12px;
+  background-color: green;
+  color: #000000;
+  background-color: transparent;
+  color: #555555;
+  opacity: 1;
+  padding: 4px 10px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #555555;
   text-align: center;
-  opacity: 0.3;
+  opacity: 1;
   cursor: default;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -5168,10 +5387,15 @@ exports[`Button kind secondary button 1`] = `
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 22px;
+  border-radius: 4px;
+  padding: 4px 10px;
   font-size: 18px;
   line-height: 24px;
+  padding: 4px 10px;
+  color: #444444;
+  border-style: solid;
+  border-width: 2px;
+  border-color: green;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -5181,6 +5405,12 @@ exports[`Button kind secondary button 1`] = `
   transition-timing-function: ease-in-out;
 }
 
+.c1:hover {
+  padding: 3px 9px;
+  border-style: solid;
+  border-width: 3px;
+}
+
 .c1:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
@@ -5291,6 +5521,7 @@ exports[`Button kind should apply kind direction 1`] = `
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  font-size: 12px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -5395,8 +5626,8 @@ exports[`Button kind should apply styling according to theme size definitions 1`
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 20px;
+  border-radius: 4px;
+  padding: 4px 8px;
   font-size: 14px;
   line-height: 20px;
   text-align: center;
@@ -5460,8 +5691,8 @@ exports[`Button kind should apply styling according to theme size definitions 1`
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 22px;
+  border-radius: 4px;
+  padding: 6px 12px;
   font-size: 18px;
   line-height: 24px;
   text-align: center;
@@ -5525,8 +5756,8 @@ exports[`Button kind should apply styling according to theme size definitions 1`
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 24px;
-  padding: 8px 32px;
+  border-radius: 6px;
+  padding: 6px 16px;
   font-size: 22px;
   line-height: 28px;
   text-align: center;
@@ -6001,8 +6232,8 @@ exports[`Button kind size of default button 1`] = `
   overflow: visible;
   text-transform: none;
   border: none;
-  border-radius: 18px;
-  padding: 4px 20px;
+  border-radius: 4px;
+  padding: 4px 8px;
   font-size: 14px;
   line-height: 20px;
   text-align: center;
diff --git a/src/js/components/Button/__tests__/__snapshots__/Button-test.tsx.snap b/src/js/components/Button/__tests__/__snapshots__/Button-test.tsx.snap
index a82d0bf573f..54de1925590 100644
--- a/src/js/components/Button/__tests__/__snapshots__/Button-test.tsx.snap
+++ b/src/js/components/Button/__tests__/__snapshots__/Button-test.tsx.snap
@@ -758,7 +758,7 @@ exports[`Button badge should display "+" when number is greater than max 1`] = `
 .c6 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
@@ -930,7 +930,7 @@ exports[`Button badge should display number content 1`] = `
 .c6 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
diff --git a/src/js/components/Card/__tests__/__snapshots__/Card-test.tsx.snap b/src/js/components/Card/__tests__/__snapshots__/Card-test.tsx.snap
index 7303fd11341..0066966f4d3 100644
--- a/src/js/components/Card/__tests__/__snapshots__/Card-test.tsx.snap
+++ b/src/js/components/Card/__tests__/__snapshots__/Card-test.tsx.snap
@@ -79,7 +79,7 @@ exports[`Card Themed 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #FFFFFF27;
-  color: #444444;
+  color: #f8f8f8;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: row;
@@ -99,6 +99,7 @@ exports[`Card Themed 1`] = `
 }
 
 .c0 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
   font-size: 18px;
   line-height: 24px;
   box-sizing: border-box;
diff --git a/src/js/components/CheckBox/__tests__/__snapshots__/CheckBox-test.tsx.snap b/src/js/components/CheckBox/__tests__/__snapshots__/CheckBox-test.tsx.snap
index 3f44c6fc6a6..dd99f94c29c 100644
--- a/src/js/components/CheckBox/__tests__/__snapshots__/CheckBox-test.tsx.snap
+++ b/src/js/components/CheckBox/__tests__/__snapshots__/CheckBox-test.tsx.snap
@@ -428,6 +428,10 @@ exports[`CheckBox custom theme 1`] = `
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   cursor: pointer;
 }
 
diff --git a/src/js/components/Clock/__tests__/__snapshots__/Clock-test.tsx.snap b/src/js/components/Clock/__tests__/__snapshots__/Clock-test.tsx.snap
index 59713c9452b..1fa8ecf2d7f 100644
--- a/src/js/components/Clock/__tests__/__snapshots__/Clock-test.tsx.snap
+++ b/src/js/components/Clock/__tests__/__snapshots__/Clock-test.tsx.snap
@@ -2192,8 +2192,8 @@ exports[`Clock type digital custom size 1`] = `
   width: 0.8em;
   text-align: center;
   overflow: hidden;
-  font-size: 18px;
-  line-height: 1.375;
+  font-size: 30px;
+  line-height: 1.234;
 }
 
 .c1 {
diff --git a/src/js/components/Data/__tests__/__snapshots__/Data-test.tsx.snap b/src/js/components/Data/__tests__/__snapshots__/Data-test.tsx.snap
index 3eebb20cc0d..4b1e9139698 100644
--- a/src/js/components/Data/__tests__/__snapshots__/Data-test.tsx.snap
+++ b/src/js/components/Data/__tests__/__snapshots__/Data-test.tsx.snap
@@ -9689,7 +9689,7 @@ exports[`Data view property range 1`] = `
 .c15 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
diff --git a/src/js/components/DataFilter/__tests__/__snapshots__/DataFilter-test.tsx.snap b/src/js/components/DataFilter/__tests__/__snapshots__/DataFilter-test.tsx.snap
index 367965c4231..42db084d611 100644
--- a/src/js/components/DataFilter/__tests__/__snapshots__/DataFilter-test.tsx.snap
+++ b/src/js/components/DataFilter/__tests__/__snapshots__/DataFilter-test.tsx.snap
@@ -3551,7 +3551,7 @@ exports[`DataFilter select multiple options 1`] = `
 .c9 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
@@ -5334,7 +5334,7 @@ exports[`DataFilter should allow filtering on multiple sub-properties from same
 .c9 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
diff --git a/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap b/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap
index 555c4819cd8..e50ac2618e0 100644
--- a/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap
+++ b/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap
@@ -881,7 +881,7 @@ exports[`DataFilters drop badge 1`] = `
 .c9 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
@@ -5490,7 +5490,7 @@ exports[`DataFilters sub objects with rangeSelector 1`] = `
 .c9 {
   font-size: 14px;
   line-height: 20px;
-  color: #000000;
+  color: #FFFFFF;
   font-weight: normal;
 }
 
diff --git a/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.tsx.snap b/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.tsx.snap
index 9dd08e25082..4604cd6cdd7 100644
--- a/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.tsx.snap
+++ b/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.tsx.snap
@@ -3699,6 +3699,11 @@ exports[`DataTable custom theme 1`] = `
   padding: 6px 12px;
 }
 
+.c8:hover {
+  background-color: rgba(242,242,242,1);
+  color: #444444;
+}
+
 @media only screen and (max-width:768px) {
   .c17 {
     border-inline-end: solid 1px red;
@@ -3942,7 +3947,7 @@ exports[`DataTable custom theme 2`] = `
               class="StyledBox-sc-13pk1d4-0 eFLSlE"
             >
               <button
-                class="StyledButton-sc-323bzc-0 gHJzI Header__StyledHeaderCellButton-sc-1baku5q-0 juEVSP"
+                class="StyledButton-sc-323bzc-0 gHJzI Header__StyledHeaderCellButton-sc-1baku5q-0 jztZSl"
                 type="button"
               >
                 <div
@@ -18092,6 +18097,36 @@ exports[`DataTable pin + background context 1`] = `
   padding-bottom: 6px;
 }
 
+.c20 {
+  margin: 0;
+  padding: 0;
+  font-weight: inherit;
+  text-align: inherit;
+  text-align: start;
+  background-color: rgba(51,51,51,0.8);
+  color: #f8f8f8;
+  border-bottom: solid 1px rgba(255,255,255,0.33);
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.c21 {
+  margin: 0;
+  padding: 0;
+  font-weight: inherit;
+  text-align: inherit;
+  text-align: start;
+  background-color: rgba(51,51,51,0.8);
+  color: #f8f8f8;
+  border-top: solid 1px rgba(255,255,255,0.33);
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
 .c2 {
   border-spacing: 0;
   border-collapse: collapse;
@@ -18448,7 +18483,7 @@ exports[`DataTable pin + background context 1`] = `
           class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
         >
           <th
-            class="c4 c5"
+            class="c20 c5"
             scope="col"
           >
             <div
@@ -18462,7 +18497,7 @@ exports[`DataTable pin + background context 1`] = `
             </div>
           </th>
           <th
-            class="c4 c8"
+            class="c20 c8"
             scope="col"
           >
             <div
@@ -18550,7 +18585,7 @@ exports[`DataTable pin + background context 1`] = `
           class="StyledTable__StyledTableRow-sc-1m3u5g-2"
         >
           <td
-            class="c15 c16"
+            class="c21 c16"
           >
             <div
               class="c12"
@@ -18563,7 +18598,7 @@ exports[`DataTable pin + background context 1`] = `
             </div>
           </td>
           <td
-            class="c15 c17"
+            class="c21 c17"
           >
             <div
               class="c12"
diff --git a/src/js/components/Drop/__tests__/__snapshots__/Drop-test.tsx.snap b/src/js/components/Drop/__tests__/__snapshots__/Drop-test.tsx.snap
index 4e870c06bb6..a1acda109de 100644
--- a/src/js/components/Drop/__tests__/__snapshots__/Drop-test.tsx.snap
+++ b/src/js/components/Drop/__tests__/__snapshots__/Drop-test.tsx.snap
@@ -1054,12 +1054,13 @@ exports[`Drop elevation 1`] = `
   -ms-text-size-adjust: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
+  border-radius: 10px;
   position: fixed;
-  z-index: 20;
+  z-index: 15;
   outline: none;
-  background-color: #FFFFFF;
+  background-color: #33333310;
   color: #444444;
+  margin: 6px;
   opacity: 0;
   -webkit-transform-origin: top left;
   -ms-transform-origin: top left;
@@ -1095,30 +1096,7 @@ exports[`Drop elevation 1`] = `
 `;
 
 exports[`Drop elevation 2`] = `
-".jWOvQG {
-  font-size: 18px;
-  line-height: 24px;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
-  position: fixed;
-  z-index: 20;
-  outline: none;
-  background-color: #ffffff;
-  color: #444444;
-  opacity: 0;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-animation: kPQHBD 0.1s forwards;
-  animation: kPQHBD 0.1s forwards;
-  -webkit-animation-delay: 0.01s;
-  animation-delay: 0.01s;
-}
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+"@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .jWOvQG {
     display: -webkit-box;
     display: -webkit-flex;
@@ -2048,6 +2026,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-left: 12px;
   opacity: 0;
   -webkit-transform-origin: bottom left;
   -ms-transform-origin: bottom left;
@@ -2145,6 +2124,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-left: -12px;
   opacity: 0;
   -webkit-transform-origin: bottom right;
   -ms-transform-origin: bottom right;
@@ -2242,6 +2222,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-bottom: 12px;
   opacity: 0;
   -webkit-transform-origin: bottom left;
   -ms-transform-origin: bottom left;
@@ -2339,6 +2320,8 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-bottom: 12px;
+  margin-left: 12px;
   opacity: 0;
   -webkit-transform-origin: bottom left;
   -ms-transform-origin: bottom left;
@@ -2436,6 +2419,8 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-bottom: 12px;
+  margin-left: -12px;
   opacity: 0;
   -webkit-transform-origin: bottom right;
   -ms-transform-origin: bottom right;
@@ -2533,6 +2518,8 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-bottom: 12px;
+  margin-left: -12px;
   opacity: 0;
   -webkit-transform-origin: bottom right;
   -ms-transform-origin: bottom right;
@@ -2630,6 +2617,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-bottom: 12px;
   opacity: 0;
   -webkit-transform-origin: bottom right;
   -ms-transform-origin: bottom right;
@@ -2727,6 +2715,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-top: 12px;
   opacity: 0;
   -webkit-transform-origin: top left;
   -ms-transform-origin: top left;
@@ -2778,29 +2767,6 @@ exports[`Drop should render correct margin depending on value of align:
   overflow: auto;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 }
-.jWOvQG {
-  font-size: 18px;
-  line-height: 24px;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
-  position: fixed;
-  z-index: 20;
-  outline: none;
-  background-color: #ffffff;
-  color: #444444;
-  opacity: 0;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-animation: kPQHBD 0.1s forwards;
-  animation: kPQHBD 0.1s forwards;
-  -webkit-animation-delay: 0.01s;
-  animation-delay: 0.01s;
-}
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .jWOvQG {
     display: -webkit-box;
@@ -2847,6 +2813,8 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-top: 12px;
+  margin-left: 12px;
   opacity: 0;
   -webkit-transform-origin: top left;
   -ms-transform-origin: top left;
@@ -2898,29 +2866,6 @@ exports[`Drop should render correct margin depending on value of align:
   overflow: auto;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 }
-.jWOvQG {
-  font-size: 18px;
-  line-height: 24px;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
-  position: fixed;
-  z-index: 20;
-  outline: none;
-  background-color: #ffffff;
-  color: #444444;
-  opacity: 0;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-animation: kPQHBD 0.1s forwards;
-  animation: kPQHBD 0.1s forwards;
-  -webkit-animation-delay: 0.01s;
-  animation-delay: 0.01s;
-}
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .jWOvQG {
     display: -webkit-box;
@@ -2967,6 +2912,8 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-top: 12px;
+  margin-left: -12px;
   opacity: 0;
   -webkit-transform-origin: top right;
   -ms-transform-origin: top right;
@@ -3064,6 +3011,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-top: 12px;
   opacity: 0;
   -webkit-transform-origin: top right;
   -ms-transform-origin: top right;
@@ -3161,6 +3109,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-top: 12px;
   opacity: 0;
   -webkit-transform-origin: top left;
   -ms-transform-origin: top left;
@@ -3212,29 +3161,6 @@ exports[`Drop should render correct margin depending on value of align:
   overflow: auto;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 }
-.jWOvQG {
-  font-size: 18px;
-  line-height: 24px;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
-  position: fixed;
-  z-index: 20;
-  outline: none;
-  background-color: #ffffff;
-  color: #444444;
-  opacity: 0;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-animation: kPQHBD 0.1s forwards;
-  animation: kPQHBD 0.1s forwards;
-  -webkit-animation-delay: 0.01s;
-  animation-delay: 0.01s;
-}
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .jWOvQG {
     display: -webkit-box;
@@ -3281,6 +3207,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-left: 12px;
   opacity: 0;
   -webkit-transform-origin: top left;
   -ms-transform-origin: top left;
@@ -3332,29 +3259,6 @@ exports[`Drop should render correct margin depending on value of align:
   overflow: auto;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 }
-.jWOvQG {
-  font-size: 18px;
-  line-height: 24px;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
-  position: fixed;
-  z-index: 20;
-  outline: none;
-  background-color: #ffffff;
-  color: #444444;
-  opacity: 0;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-animation: kPQHBD 0.1s forwards;
-  animation: kPQHBD 0.1s forwards;
-  -webkit-animation-delay: 0.01s;
-  animation-delay: 0.01s;
-}
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .jWOvQG {
     display: -webkit-box;
@@ -3401,6 +3305,7 @@ exports[`Drop should render correct margin depending on value of align:
   outline: none;
   background-color: #FFFFFF;
   color: #444444;
+  margin-left: -12px;
   opacity: 0;
   -webkit-transform-origin: top right;
   -ms-transform-origin: top right;
@@ -3609,12 +3514,13 @@ exports[`Drop theme elevation renders 1`] = `
   -ms-text-size-adjust: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
+  border-radius: 10px;
   position: fixed;
-  z-index: 20;
+  z-index: 15;
   outline: none;
-  background-color: #FFFFFF;
+  background-color: #33333310;
   color: #444444;
+  margin: 6px;
   opacity: 0;
   -webkit-transform-origin: top left;
   -ms-transform-origin: top left;
@@ -3650,30 +3556,7 @@ exports[`Drop theme elevation renders 1`] = `
 `;
 
 exports[`Drop theme elevation renders 2`] = `
-".jWOvQG {
-  font-size: 18px;
-  line-height: 24px;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  border-radius: 0px;
-  position: fixed;
-  z-index: 20;
-  outline: none;
-  background-color: #ffffff;
-  color: #444444;
-  opacity: 0;
-  -webkit-transform-origin: top left;
-  -ms-transform-origin: top left;
-  transform-origin: top left;
-  -webkit-animation: kPQHBD 0.1s forwards;
-  animation: kPQHBD 0.1s forwards;
-  -webkit-animation-delay: 0.01s;
-  animation-delay: 0.01s;
-}
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+"@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .jWOvQG {
     display: -webkit-box;
     display: -webkit-flex;
diff --git a/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap b/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap
index ab133a9992d..131fbc6238c 100644
--- a/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap
+++ b/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap
@@ -922,7 +922,7 @@ exports[`FileInput custom theme input font size 1`] = `
   height: 100%;
   width: 100%;
   box-sizing: border-box;
-  font-size: inherit;
+  font-size: 16px;
   font-family: inherit;
   border: none;
   -webkit-appearance: none;
diff --git a/src/js/components/Grid/StyledGrid.js b/src/js/components/Grid/StyledGrid.js
index 7459bc87858..83fc8813b3a 100644
--- a/src/js/components/Grid/StyledGrid.js
+++ b/src/js/components/Grid/StyledGrid.js
@@ -213,7 +213,7 @@ const areasStyle = (props) => {
 };
 
 const StyledGrid = styled.div.attrs((props) => ({
-  ...getDefaultProps(),
+  ...getDefaultProps(props),
   'aria-label': props.a11yTitleProp,
 }))`
   display: grid;
diff --git a/src/js/components/Grommet/__tests__/__snapshots__/Grommet-test.js.snap b/src/js/components/Grommet/__tests__/__snapshots__/Grommet-test.js.snap
index 95b4d01361e..69fc9b475a0 100644
--- a/src/js/components/Grommet/__tests__/__snapshots__/Grommet-test.js.snap
+++ b/src/js/components/Grommet/__tests__/__snapshots__/Grommet-test.js.snap
@@ -42,6 +42,8 @@ exports[`Grommet background 1`] = `
 .c0 {
   font-size: 18px;
   line-height: 24px;
+  background-color: #0000ff;
+  color: #f8f8f8;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -177,8 +179,11 @@ exports[`Grommet full min 1`] = `
 
 exports[`Grommet grommet theme 1`] = `
 .c0 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 18px;
   line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -193,8 +198,11 @@ exports[`Grommet grommet theme 1`] = `
 
 exports[`Grommet hpe theme 1`] = `
 .c0 {
+  font-family: 'Metric',Arial,sans-serif;
   font-size: 18px;
   line-height: 24px;
+  background-color: #FFFFFF;
+  color: #555555;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -213,6 +221,8 @@ exports[`Grommet message format function 1`] = `
 .c0 {
   font-size: 18px;
   line-height: 24px;
+  background-color: #0000ff;
+  color: #f8f8f8;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -250,8 +260,11 @@ exports[`Grommet messages 1`] = `
 
 exports[`Grommet themeMode 1`] = `
 .c0 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 18px;
   line-height: 24px;
+  background-color: #000000;
+  color: #f8f8f8;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
diff --git a/src/js/components/Heading/__tests__/__snapshots__/Heading-test.tsx.snap b/src/js/components/Heading/__tests__/__snapshots__/Heading-test.tsx.snap
index e65a90f87be..af8607f4c0c 100644
--- a/src/js/components/Heading/__tests__/__snapshots__/Heading-test.tsx.snap
+++ b/src/js/components/Heading/__tests__/__snapshots__/Heading-test.tsx.snap
@@ -898,6 +898,7 @@ exports[`Theme based font family renders 1`] = `
 }
 
 .c1 {
+  font-family: Arial;
   font-size: 50px;
   line-height: 56px;
   max-width: 1200px;
@@ -906,6 +907,7 @@ exports[`Theme based font family renders 1`] = `
 }
 
 .c2 {
+  font-family: Roboto;
   font-size: 34px;
   line-height: 40px;
   max-width: 816px;
@@ -914,6 +916,7 @@ exports[`Theme based font family renders 1`] = `
 }
 
 .c3 {
+  font-family: Ubuntu;
   font-size: 26px;
   line-height: 32px;
   max-width: 624px;
@@ -922,6 +925,7 @@ exports[`Theme based font family renders 1`] = `
 }
 
 .c4 {
+  font-family: Fira Sans;
   font-size: 18px;
   line-height: 24px;
   max-width: 432px;
@@ -994,7 +998,7 @@ exports[`Theme based font weight renders 1`] = `
   font-size: 50px;
   line-height: 56px;
   max-width: 1200px;
-  font-weight: 600;
+  font-weight: 700;
   overflow-wrap: break-word;
 }
 
@@ -1002,7 +1006,7 @@ exports[`Theme based font weight renders 1`] = `
   font-size: 34px;
   line-height: 40px;
   max-width: 816px;
-  font-weight: 600;
+  font-weight: 400;
   overflow-wrap: break-word;
 }
 
@@ -1010,7 +1014,7 @@ exports[`Theme based font weight renders 1`] = `
   font-size: 26px;
   line-height: 32px;
   max-width: 624px;
-  font-weight: 600;
+  font-weight: 200;
   overflow-wrap: break-word;
 }
 
@@ -1089,6 +1093,7 @@ exports[`Theme color renders 1`] = `
   max-width: 1200px;
   font-weight: 600;
   overflow-wrap: break-word;
+  color: #000000;
 }
 
 .c2 {
@@ -1097,6 +1102,7 @@ exports[`Theme color renders 1`] = `
   max-width: 816px;
   font-weight: 600;
   overflow-wrap: break-word;
+  color: #000000;
 }
 
 .c3 {
@@ -1105,6 +1111,7 @@ exports[`Theme color renders 1`] = `
   max-width: 624px;
   font-weight: 600;
   overflow-wrap: break-word;
+  color: #000000;
 }
 
 .c4 {
@@ -1113,6 +1120,7 @@ exports[`Theme color renders 1`] = `
   max-width: 432px;
   font-weight: 600;
   overflow-wrap: break-word;
+  color: #000000;
 }
 
 @media only screen and (max-width:768px) {
diff --git a/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap b/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap
index 67e80e982e9..6ca195701f9 100644
--- a/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap
+++ b/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap
@@ -850,6 +850,8 @@ exports[`Layer custom theme 1`] = `
   left: 0px;
   right: 0px;
   bottom: 0px;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
   background-color: rgba(0,0,0,0.5);
   color: #f8f8f8;
   pointer-events: all;
@@ -870,6 +872,7 @@ exports[`Layer custom theme 1`] = `
   outline: none;
   pointer-events: all;
   z-index: 20;
+  box-shadow: 0px 8px 16px rgba(0,0,0,0.20);
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
@@ -1023,8 +1026,8 @@ exports[`Layer dark context 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   min-height: 48px;
-  background-color: #FFFFFF;
-  color: #444444;
+  background-color: #000000;
+  color: #f8f8f8;
   outline: none;
   pointer-events: all;
   z-index: 20;
@@ -11364,7 +11367,7 @@ exports[`Layer should render correct border radius for position: bottom -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 48px 48px 0 0;
   bottom: 0px;
   left: 50%;
   -webkit-transform: translate(-50%,0);
@@ -12036,7 +12039,7 @@ exports[`Layer should render correct border radius for position: bottom-left -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 0 48px 0 0;
   bottom: 0px;
   left: 0px;
   -webkit-transform: translateY(0);
@@ -12708,7 +12711,7 @@ exports[`Layer should render correct border radius for position: bottom-right -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 48px 0 0 0;
   bottom: 0px;
   right: 0px;
   -webkit-transform: translateY(0);
@@ -13380,7 +13383,7 @@ exports[`Layer should render correct border radius for position: center -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 48px;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%,-50%);
@@ -14049,7 +14052,8 @@ exports[`Layer should render correct border radius for position: end -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-start-start-radius: 48px;
+  border-end-start-radius: 48px;
   inset-inline-end: 0px;
   top: 50%;
   -webkit-transform: translate(0,-50%);
@@ -14721,7 +14725,7 @@ exports[`Layer should render correct border radius for position: left -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 0 48px 48px 0;
   left: 0px;
   top: 50%;
   -webkit-transform: translate(0,-50%);
@@ -15393,7 +15397,7 @@ exports[`Layer should render correct border radius for position: right -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 48px 0 0 48px;
   right: 0px;
   top: 50%;
   -webkit-transform: translate(0,-50%);
@@ -16065,7 +16069,8 @@ exports[`Layer should render correct border radius for position: start -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-end-end-radius: 48px;
+  border-start-end-radius: 48px;
   inset-inline-start: 0px;
   top: 50%;
   -webkit-transform: translate(0,-50%);
@@ -16737,7 +16742,7 @@ exports[`Layer should render correct border radius for position: top -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 0 0 48px 48px;
   top: 0px;
   left: 50%;
   -webkit-transform: translate(-50%,0);
@@ -17409,7 +17414,7 @@ exports[`Layer should render correct border radius for position: top-left -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 0 0 48px 0;
   top: 0px;
   left: 0px;
   -webkit-transform: translateY(0);
@@ -18081,7 +18086,7 @@ exports[`Layer should render correct border radius for position: top-right -
   position: absolute;
   max-height: calc(100% - 0px - 0px);
   max-width: calc(100% - 0px - 0px);
-  border-radius: 4px;
+  border-radius: 0 0 0 48px;
   top: 0px;
   right: 0px;
   -webkit-transform: translateY(0);
diff --git a/src/js/components/MaskedInput/__tests__/__snapshots__/MaskedInput-test.js.snap b/src/js/components/MaskedInput/__tests__/__snapshots__/MaskedInput-test.js.snap
index 26883b26f6b..534f3e4615b 100644
--- a/src/js/components/MaskedInput/__tests__/__snapshots__/MaskedInput-test.js.snap
+++ b/src/js/components/MaskedInput/__tests__/__snapshots__/MaskedInput-test.js.snap
@@ -141,8 +141,8 @@ exports[`MaskedInput applies custom global.hover theme to options 2`] = `
 }
 
 .c0:hover {
-  background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  background-color: lightgreen;
+  color: #7D4CDB;
 }
 
 .c0:focus {
diff --git a/src/js/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap b/src/js/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap
index 07e65851394..f91ac555a75 100644
--- a/src/js/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap
+++ b/src/js/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap
@@ -2269,6 +2269,11 @@ exports[`Pagination should apply button kind style when referenced by a string 1
   padding: 4px 22px;
   font-size: 18px;
   line-height: 0;
+  color: #000000;
+  border-style: solid;
+  border-width: 2px;
+  border-color: skyblue;
+  padding: 2px 20px;
   opacity: 0.3;
   text-align: center;
   opacity: 0.3;
@@ -2356,8 +2361,16 @@ exports[`Pagination should apply button kind style when referenced by a string 1
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  color: #000000;
+  border-style: solid;
+  border-width: 2px;
+  border-color: skyblue;
+  padding: 2px 20px;
   background-color: #33333310;
   color: #000000;
+  background-color: rgba(202,156,234,1);
+  color: #444444;
+  border-color: transparent;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -2429,6 +2442,11 @@ exports[`Pagination should apply button kind style when referenced by a string 1
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
+  color: #000000;
+  border-style: solid;
+  border-width: 2px;
+  border-color: skyblue;
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -2500,6 +2518,11 @@ exports[`Pagination should apply button kind style when referenced by a string 1
   padding: 4px 22px;
   font-size: 18px;
   line-height: 0;
+  color: #000000;
+  border-style: solid;
+  border-width: 2px;
+  border-color: skyblue;
+  padding: 2px 20px;
   text-align: center;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
@@ -2776,7 +2799,7 @@ exports[`Pagination should apply button kind style when referenced by a string 1
 `;
 
 exports[`Pagination should apply custom theme 1`] = `
-.c6 {
+.c7 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2787,30 +2810,30 @@ exports[`Pagination should apply custom theme 1`] = `
   stroke: #666666;
 }
 
-.c6 g {
+.c7 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c6 *:not([stroke])[fill='none'] {
+.c7 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c6 *[stroke*='#'],
-.c6 *[STROKE*='#'] {
+.c7 *[stroke*='#'],
+.c7 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c6 *[fill-rule],
-.c6 *[FILL-RULE],
-.c6 *[fill*='#'],
-.c6 *[FILL*='#'] {
+.c7 *[fill-rule],
+.c7 *[FILL-RULE],
+.c7 *[fill*='#'],
+.c7 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c13 {
+.c14 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2821,25 +2844,25 @@ exports[`Pagination should apply custom theme 1`] = `
   stroke: #000000;
 }
 
-.c13 g {
+.c14 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c13 *:not([stroke])[fill='none'] {
+.c14 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c13 *[stroke*='#'],
-.c13 *[STROKE*='#'] {
+.c14 *[stroke*='#'],
+.c14 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c13 *[fill-rule],
-.c13 *[FILL-RULE],
-.c13 *[fill*='#'],
-.c13 *[FILL*='#'] {
+.c14 *[fill-rule],
+.c14 *[FILL-RULE],
+.c14 *[fill*='#'],
+.c14 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -2871,7 +2894,7 @@ exports[`Pagination should apply custom theme 1`] = `
   flex: 0 0 auto;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2891,7 +2914,7 @@ exports[`Pagination should apply custom theme 1`] = `
   padding: 0px;
 }
 
-.c7 {
+.c8 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -2901,12 +2924,12 @@ exports[`Pagination should apply custom theme 1`] = `
   width: 3px;
 }
 
-.c10 {
+.c11 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c4 {
+.c5 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -2939,7 +2962,7 @@ exports[`Pagination should apply custom theme 1`] = `
   flex: 1 0 auto;
 }
 
-.c4 > svg {
+.c5 > svg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2950,47 +2973,47 @@ exports[`Pagination should apply custom theme 1`] = `
   vertical-align: middle;
 }
 
-.c4:focus {
+.c5:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c4:focus > circle,
-.c4:focus > ellipse,
-.c4:focus > line,
-.c4:focus > path,
-.c4:focus > polygon,
-.c4:focus > polyline,
-.c4:focus > rect {
+.c5:focus > circle,
+.c5:focus > ellipse,
+.c5:focus > line,
+.c5:focus > path,
+.c5:focus > polygon,
+.c5:focus > polyline,
+.c5:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c4:focus::-moz-focus-inner {
+.c5:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c4:focus:not(:focus-visible) {
+.c5:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c4:focus:not(:focus-visible) > circle,
-.c4:focus:not(:focus-visible) > ellipse,
-.c4:focus:not(:focus-visible) > line,
-.c4:focus:not(:focus-visible) > path,
-.c4:focus:not(:focus-visible) > polygon,
-.c4:focus:not(:focus-visible) > polyline,
-.c4:focus:not(:focus-visible) > rect {
+.c5:focus:not(:focus-visible) > circle,
+.c5:focus:not(:focus-visible) > ellipse,
+.c5:focus:not(:focus-visible) > line,
+.c5:focus:not(:focus-visible) > path,
+.c5:focus:not(:focus-visible) > polygon,
+.c5:focus:not(:focus-visible) > polyline,
+.c5:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c4:focus:not(:focus-visible)::-moz-focus-inner {
+.c5:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -3025,51 +3048,51 @@ exports[`Pagination should apply custom theme 1`] = `
   flex: 1 0 auto;
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgba(51,51,51,0.06274509803921569);
 }
 
-.c8:focus {
+.c9:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c8:focus > circle,
-.c8:focus > ellipse,
-.c8:focus > line,
-.c8:focus > path,
-.c8:focus > polygon,
-.c8:focus > polyline,
-.c8:focus > rect {
+.c9:focus > circle,
+.c9:focus > ellipse,
+.c9:focus > line,
+.c9:focus > path,
+.c9:focus > polygon,
+.c9:focus > polyline,
+.c9:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c8:focus::-moz-focus-inner {
+.c9:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c8:focus:not(:focus-visible) {
+.c9:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c8:focus:not(:focus-visible) > circle,
-.c8:focus:not(:focus-visible) > ellipse,
-.c8:focus:not(:focus-visible) > line,
-.c8:focus:not(:focus-visible) > path,
-.c8:focus:not(:focus-visible) > polygon,
-.c8:focus:not(:focus-visible) > polyline,
-.c8:focus:not(:focus-visible) > rect {
+.c9:focus:not(:focus-visible) > circle,
+.c9:focus:not(:focus-visible) > ellipse,
+.c9:focus:not(:focus-visible) > line,
+.c9:focus:not(:focus-visible) > path,
+.c9:focus:not(:focus-visible) > polygon,
+.c9:focus:not(:focus-visible) > polyline,
+.c9:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c8:focus:not(:focus-visible)::-moz-focus-inner {
+.c9:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -3101,51 +3124,51 @@ exports[`Pagination should apply custom theme 1`] = `
   flex: 1 0 auto;
 }
 
-.c9:hover {
+.c10:hover {
   background-color: rgba(51,51,51,0.06274509803921569);
 }
 
-.c9:focus {
+.c10:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c9:focus > circle,
-.c9:focus > ellipse,
-.c9:focus > line,
-.c9:focus > path,
-.c9:focus > polygon,
-.c9:focus > polyline,
-.c9:focus > rect {
+.c10:focus > circle,
+.c10:focus > ellipse,
+.c10:focus > line,
+.c10:focus > path,
+.c10:focus > polygon,
+.c10:focus > polyline,
+.c10:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c9:focus::-moz-focus-inner {
+.c10:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c9:focus:not(:focus-visible) {
+.c10:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c9:focus:not(:focus-visible) > circle,
-.c9:focus:not(:focus-visible) > ellipse,
-.c9:focus:not(:focus-visible) > line,
-.c9:focus:not(:focus-visible) > path,
-.c9:focus:not(:focus-visible) > polygon,
-.c9:focus:not(:focus-visible) > polyline,
-.c9:focus:not(:focus-visible) > rect {
+.c10:focus:not(:focus-visible) > circle,
+.c10:focus:not(:focus-visible) > ellipse,
+.c10:focus:not(:focus-visible) > line,
+.c10:focus:not(:focus-visible) > path,
+.c10:focus:not(:focus-visible) > polygon,
+.c10:focus:not(:focus-visible) > polyline,
+.c10:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c9:focus:not(:focus-visible)::-moz-focus-inner {
+.c10:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c12 {
+.c13 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -3177,7 +3200,7 @@ exports[`Pagination should apply custom theme 1`] = `
   flex: 1 0 auto;
 }
 
-.c12 > svg {
+.c13 > svg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3188,60 +3211,60 @@ exports[`Pagination should apply custom theme 1`] = `
   vertical-align: middle;
 }
 
-.c12:hover {
+.c13:hover {
   background-color: rgba(51,51,51,0.06274509803921569);
 }
 
-.c12:focus {
+.c13:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c12:focus > circle,
-.c12:focus > ellipse,
-.c12:focus > line,
-.c12:focus > path,
-.c12:focus > polygon,
-.c12:focus > polyline,
-.c12:focus > rect {
+.c13:focus > circle,
+.c13:focus > ellipse,
+.c13:focus > line,
+.c13:focus > path,
+.c13:focus > polygon,
+.c13:focus > polyline,
+.c13:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c12:focus::-moz-focus-inner {
+.c13:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c12:focus:not(:focus-visible) {
+.c13:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c12:focus:not(:focus-visible) > circle,
-.c12:focus:not(:focus-visible) > ellipse,
-.c12:focus:not(:focus-visible) > line,
-.c12:focus:not(:focus-visible) > path,
-.c12:focus:not(:focus-visible) > polygon,
-.c12:focus:not(:focus-visible) > polyline,
-.c12:focus:not(:focus-visible) > rect {
+.c13:focus:not(:focus-visible) > circle,
+.c13:focus:not(:focus-visible) > ellipse,
+.c13:focus:not(:focus-visible) > line,
+.c13:focus:not(:focus-visible) > path,
+.c13:focus:not(:focus-visible) > polygon,
+.c13:focus:not(:focus-visible) > polyline,
+.c13:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c12:focus:not(:focus-visible)::-moz-focus-inner {
+.c13:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c5 {
+.c6 {
   font-size: 18px;
   line-height: 0;
 }
 
-.c5 > svg {
+.c6 > svg {
   margin: 0 auto;
 }
 
-.c3 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3259,26 +3282,30 @@ exports[`Pagination should apply custom theme 1`] = `
   min-width: 36px;
 }
 
-.c11 {
+.c12 {
   font-weight: bold;
   font-size: 18px;
   line-height: 0;
 }
 
+.c2 {
+  background: red;
+}
+
 @media only screen and (max-width:768px) {
-  .c2 {
+  .c3 {
     margin: 0px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c2 {
+  .c3 {
     padding: 0px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c7 {
+  .c8 {
     width: 2px;
   }
 }
@@ -3287,28 +3314,28 @@ exports[`Pagination should apply custom theme 1`] = `
   class="c0"
 >
   <div
-    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
+    class="c1 c2"
   >
     <nav
       aria-label="Pagination Navigation"
       class="c1"
     >
       <ul
-        class="c2"
+        class="c3"
       >
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-disabled="true"
             aria-label="Go to previous page"
-            class="c4 c5"
+            class="c5 c6"
             disabled=""
             type="button"
           >
             <svg
               aria-label="Previous"
-              class="c6"
+              class="c7"
               viewBox="0 0 24 24"
             >
               <path
@@ -3321,116 +3348,116 @@ exports[`Pagination should apply custom theme 1`] = `
           </button>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-current="page"
             aria-label="Go to page 1"
-            class="c8 c5"
+            class="c9 c6"
             type="button"
           >
             1
           </button>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-label="Go to page 2"
-            class="c9 c5"
+            class="c10 c6"
             type="button"
           >
             2
           </button>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-label="Go to page 3"
-            class="c9 c5"
+            class="c10 c6"
             type="button"
           >
             3
           </button>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-label="Go to page 4"
-            class="c9 c5"
+            class="c10 c6"
             type="button"
           >
             4
           </button>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-label="Go to page 5"
-            class="c9 c5"
+            class="c10 c6"
             type="button"
           >
             5
           </button>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <span
-            class="c10 c11"
+            class="c11 c12"
           >
             …
           </span>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-label="Go to page 24"
-            class="c9 c5"
+            class="c10 c6"
             type="button"
           >
             24
           </button>
         </li>
         <div
-          class="c7"
+          class="c8"
         />
         <li
-          class="c3"
+          class="c4"
         >
           <button
             aria-label="Go to next page"
-            class="c12 c5"
+            class="c13 c6"
             type="button"
           >
             <svg
               aria-label="Next"
-              class="c13"
+              class="c14"
               viewBox="0 0 24 24"
             >
               <path
diff --git a/src/js/components/RadioButton/__tests__/__snapshots__/RadioButton-test.tsx.snap b/src/js/components/RadioButton/__tests__/__snapshots__/RadioButton-test.tsx.snap
index 20ee87e3a54..7055aabb543 100644
--- a/src/js/components/RadioButton/__tests__/__snapshots__/RadioButton-test.tsx.snap
+++ b/src/js/components/RadioButton/__tests__/__snapshots__/RadioButton-test.tsx.snap
@@ -1220,6 +1220,10 @@ exports[`RadioButton label themed 1`] = `
   cursor: pointer;
 }
 
+.c5 {
+  font-weight: 500;
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     margin-right: 6px;
@@ -1251,7 +1255,7 @@ exports[`RadioButton label themed 1`] = `
       />
     </div>
     <span
-      class="StyledRadioButton__StyledRadioButtonLabel-sc-g1f6ld-2"
+      class="c5"
     >
       test
     </span>
diff --git a/src/js/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap b/src/js/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap
index 38e65e7b44a..b272c417610 100644
--- a/src/js/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap
+++ b/src/js/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap
@@ -816,7 +816,7 @@ exports[`RangeInput track themed 1`] = `
   box-sizing: border-box;
   width: 100%;
   height: 4px;
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,1);
 }
 
 .c1::-webkit-slider-thumb {
@@ -840,7 +840,7 @@ exports[`RangeInput track themed 1`] = `
   box-sizing: border-box;
   width: 100%;
   height: 4px;
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,1);
 }
 
 .c1::-moz-range-thumb {
@@ -885,18 +885,18 @@ exports[`RangeInput track themed 1`] = `
   box-sizing: border-box;
   width: 100%;
   height: 4px;
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,1);
   border-color: transparent;
   color: transparent;
 }
 
 .c1::-ms-fill-lower {
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,1);
   border-color: transparent;
 }
 
 .c1::-ms-fill-upper {
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,1);
   border-color: transparent;
 }
 
@@ -961,7 +961,7 @@ exports[`RangeInput track themed with color and opacity 1`] = `
   box-sizing: border-box;
   width: 100%;
   height: 4px;
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,0.3);
 }
 
 .c1::-webkit-slider-thumb {
@@ -985,7 +985,7 @@ exports[`RangeInput track themed with color and opacity 1`] = `
   box-sizing: border-box;
   width: 100%;
   height: 4px;
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,0.3);
 }
 
 .c1::-moz-range-thumb {
@@ -1030,18 +1030,18 @@ exports[`RangeInput track themed with color and opacity 1`] = `
   box-sizing: border-box;
   width: 100%;
   height: 4px;
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,0.3);
   border-color: transparent;
   color: transparent;
 }
 
 .c1::-ms-fill-lower {
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,0.3);
   border-color: transparent;
 }
 
 .c1::-ms-fill-upper {
-  background: rgba(0,0,0,0.2);
+  background: rgba(125,76,219,0.3);
   border-color: transparent;
 }
 
diff --git a/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap b/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
index 3f3533bfd98..81691330b3d 100644
--- a/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
+++ b/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
@@ -2320,15 +2320,15 @@ exports[`Select applies custom global.hover theme to options 2`] = `
 }
 
 .c1 {
-  background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  background-color: lightgreen;
+  color: #7D4CDB;
   display: block;
   width: 100%;
 }
 
 .c1:focus {
-  background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  background-color: lightgreen;
+  color: #7D4CDB;
 }
 
 @media only screen and (max-width:768px) {
@@ -3362,7 +3362,7 @@ exports[`Select dark 1`] = `
   padding: 11px;
   font-weight: 600;
   margin: 0;
-  border: 1px solid rgba(0,0,0,0.33);
+  border: 1px solid rgba(255,255,255,0.33);
   border-radius: 4px;
   border: none;
   outline: none;
@@ -3405,7 +3405,7 @@ exports[`Select dark 1`] = `
 }
 
 .c3 {
-  border: 1px solid rgba(0,0,0,0.33);
+  border: 1px solid rgba(255,255,255,0.33);
   border-radius: 4px;
 }
 
@@ -6747,6 +6747,7 @@ exports[`Select modifies select control style on open 1`] = `
 .c2 {
   border: 1px solid rgba(0,0,0,0.33);
   border-radius: 4px;
+  background: purple;
 }
 
 .c0 {
diff --git a/src/js/components/Tabs/__tests__/__snapshots__/Tabs-test.tsx.snap b/src/js/components/Tabs/__tests__/__snapshots__/Tabs-test.tsx.snap
index f1eebb501f8..ea569a015fe 100644
--- a/src/js/components/Tabs/__tests__/__snapshots__/Tabs-test.tsx.snap
+++ b/src/js/components/Tabs/__tests__/__snapshots__/Tabs-test.tsx.snap
@@ -2946,6 +2946,10 @@ exports[`Tabs should allow to extend tab styles 1`] = `
 
 .c5 {
   white-space: nowrap;
+  color: red;
+  padding: 20px;
+  box-shadow: rgba(0,0,0,0.25) 0px 54px 55px,rgba(0,0,0,0.12) 0px -12px 30px,rgba(0,0,0,0.12) 0px 4px 6px,rgba(0,0,0,0.17) 0px 12px 13px,rgba(0,0,0,0.09) 0px -3px 5px;
+  margin: 30px;
 }
 
 .c7 {
@@ -2954,6 +2958,10 @@ exports[`Tabs should allow to extend tab styles 1`] = `
   margin-right: 12px;
   margin-top: 3px;
   margin-bottom: 3px;
+  color: red;
+  padding: 20px;
+  box-shadow: rgba(0,0,0,0.25) 0px 54px 55px,rgba(0,0,0,0.12) 0px -12px 30px,rgba(0,0,0,0.12) 0px 4px 6px,rgba(0,0,0,0.17) 0px 12px 13px,rgba(0,0,0,0.09) 0px -3px 5px;
+  margin: 30px;
 }
 
 .c7:hover {
@@ -3306,6 +3314,7 @@ exports[`Tabs should apply custom theme disabled style 1`] = `
   margin-right: 12px;
   margin-top: 3px;
   margin-bottom: 3px;
+  color: blue;
 }
 
 .c12 {
@@ -3683,6 +3692,7 @@ exports[`Tabs should apply custom theme disabled style when theme.button.default
   margin-right: 12px;
   margin-top: 3px;
   margin-bottom: 3px;
+  color: blue;
 }
 
 .c12 {
diff --git a/src/js/components/TextArea/__tests__/__snapshots__/TextArea-test.tsx.snap b/src/js/components/TextArea/__tests__/__snapshots__/TextArea-test.tsx.snap
index 898fa92df36..cc261abe077 100644
--- a/src/js/components/TextArea/__tests__/__snapshots__/TextArea-test.tsx.snap
+++ b/src/js/components/TextArea/__tests__/__snapshots__/TextArea-test.tsx.snap
@@ -1086,7 +1086,7 @@ exports[`TextArea custom theme input font size 1`] = `
 
 .c1 {
   box-sizing: border-box;
-  font-size: inherit;
+  font-size: 16px;
   font-family: inherit;
   border: none;
   -webkit-appearance: none;
diff --git a/src/js/components/TextInput/__tests__/__snapshots__/TextInput-test.tsx.snap b/src/js/components/TextInput/__tests__/__snapshots__/TextInput-test.tsx.snap
index 47509240956..fa188b4b5fb 100644
--- a/src/js/components/TextInput/__tests__/__snapshots__/TextInput-test.tsx.snap
+++ b/src/js/components/TextInput/__tests__/__snapshots__/TextInput-test.tsx.snap
@@ -1432,7 +1432,7 @@ exports[`TextInput custom theme input font size 1`] = `
 
 .c2 {
   box-sizing: border-box;
-  font-size: inherit;
+  font-size: 16px;
   font-family: inherit;
   border: none;
   -webkit-appearance: none;
@@ -2361,7 +2361,7 @@ exports[`TextInput matches icon size to size prop when theme.icon.matchSize is t
   line-height: 20px;
   border: 1px solid rgba(0,0,0,0.33);
   border-radius: 4px;
-  padding-left: 48px;
+  padding-left: 36px;
 }
 
 .c4:focus {
@@ -2491,7 +2491,7 @@ exports[`TextInput matches icon size to size prop when theme.icon.matchSize is t
   line-height: 28px;
   border: 1px solid rgba(0,0,0,0.33);
   border-radius: 4px;
-  padding-left: 48px;
+  padding-left: 72px;
 }
 
 .c8:focus {
diff --git a/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap b/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap
index 4482fc9f53a..8f733029598 100644
--- a/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap
+++ b/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap
@@ -528,7 +528,7 @@ exports[`Tip themed 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   overflow: auto;
-  box-shadow: 0px 8px 16px rgba(0,0,0,0.20);
+  box-shadow: 0px 8px 16px rgba(255,255,255,0.40);
 }
 
 .c2 {
@@ -539,8 +539,8 @@ exports[`Tip themed 1`] = `
   box-sizing: border-box;
   max-width: 100%;
   margin: 6px;
-  background-color: #33333310;
-  color: #444444;
+  background-color: #FFFFFF18;
+  color: #f8f8f8;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -551,7 +551,7 @@ exports[`Tip themed 1`] = `
   padding-top: 6px;
   padding-bottom: 6px;
   border-radius: 12px;
-  box-shadow: 0px 2px 4px rgba(0,0,0,0.20);
+  box-shadow: 0px 4px 4px rgba(255,255,255,0.40);
 }
 
 .c1 {
diff --git a/src/js/components/Video/__tests__/__snapshots__/Video-test.tsx.snap b/src/js/components/Video/__tests__/__snapshots__/Video-test.tsx.snap
index f549b5bcd17..e3e4de970df 100644
--- a/src/js/components/Video/__tests__/__snapshots__/Video-test.tsx.snap
+++ b/src/js/components/Video/__tests__/__snapshots__/Video-test.tsx.snap
@@ -186,7 +186,7 @@ exports[`Video Configure Menu Button 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -726,7 +726,7 @@ exports[`Video End event handler 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -1254,7 +1254,7 @@ exports[`Video Play and Pause event handlers 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -1620,7 +1620,7 @@ exports[`Video Play and Pause event handlers 2`] = `
         class="StyledBox-sc-13pk1d4-0 gTjiHd"
       >
         <button
-          class="StyledButton-sc-323bzc-0 ckELTg"
+          class="StyledButton-sc-323bzc-0 bumPYc"
           type="button"
         >
           .c0 {
@@ -1948,7 +1948,7 @@ exports[`Video autoPlay renders 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -2999,7 +2999,7 @@ exports[`Video controls over renders 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -3527,7 +3527,7 @@ exports[`Video duration event handler 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -4055,7 +4055,7 @@ exports[`Video fit  cover renders 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -4588,7 +4588,7 @@ exports[`Video fit contain renders 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -5121,7 +5121,7 @@ exports[`Video loop renders 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -5650,7 +5650,7 @@ exports[`Video mouse events handlers of controls 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -6016,7 +6016,7 @@ exports[`Video mouse events handlers of controls 2`] = `
         class="StyledBox-sc-13pk1d4-0 gTjiHd"
       >
         <button
-          class="StyledButton-sc-323bzc-0 ckELTg"
+          class="StyledButton-sc-323bzc-0 bumPYc"
           type="button"
         >
           <svg
@@ -6140,7 +6140,7 @@ exports[`Video mouse events handlers of controls 3`] = `
         class="StyledBox-sc-13pk1d4-0 gTjiHd"
       >
         <button
-          class="StyledButton-sc-323bzc-0 ckELTg"
+          class="StyledButton-sc-323bzc-0 bumPYc"
           type="button"
         >
           <svg
@@ -6426,7 +6426,7 @@ exports[`Video mute renders 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -6954,7 +6954,7 @@ exports[`Video renders 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -7482,7 +7482,7 @@ exports[`Video renders with theme 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -8010,7 +8010,7 @@ exports[`Video scrubber 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
@@ -8376,7 +8376,7 @@ exports[`Video scrubber 2`] = `
         class="StyledBox-sc-13pk1d4-0 gTjiHd"
       >
         <button
-          class="StyledButton-sc-323bzc-0 ckELTg"
+          class="StyledButton-sc-323bzc-0 bumPYc"
           type="button"
         >
           <svg
@@ -8662,7 +8662,7 @@ exports[`Video timeUpdate event handler 1`] = `
 
 .c5:hover {
   background-color: rgba(221,221,221,0.4);
-  color: #000000;
+  color: #FFFFFF;
 }
 
 .c5:focus {
diff --git a/src/js/default-props.js b/src/js/default-props.js
index 3f6c8bf9f15..a503ef837fb 100644
--- a/src/js/default-props.js
+++ b/src/js/default-props.js
@@ -9,8 +9,10 @@ export const extendDefaultTheme = theme => {
   defaultProps.theme = deepMerge(base, theme);
 };
 
-export const getDefaultProps = () => {
-  const result = {};
-  Object.setPrototypeOf(result, defaultProps);
+export const getDefaultProps = props => {
+  const result = Object.create(defaultProps);
+  if (props.theme) {
+    result.theme = props.theme;
+  }
   return result;
 };
diff --git a/src/js/themes/__tests__/__snapshots__/theme-test.js.snap b/src/js/themes/__tests__/__snapshots__/theme-test.js.snap
index 21a2c47a2f1..8926eeb9d8c 100644
--- a/src/js/themes/__tests__/__snapshots__/theme-test.js.snap
+++ b/src/js/themes/__tests__/__snapshots__/theme-test.js.snap
@@ -9,7 +9,7 @@ exports[`Grommet ThemeContext theme 1`] = `
   display: inline-flex;
   font-size: inherit;
   line-height: inherit;
-  color: test;
+  color: #000;
   font-weight: 600;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -22,8 +22,11 @@ exports[`Grommet ThemeContext theme 1`] = `
 }
 
 .c0 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 18px;
   line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -111,7 +114,7 @@ exports[`Grommet custom theme 1`] = `
   stroke: none;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -122,25 +125,25 @@ exports[`Grommet custom theme 1`] = `
   stroke: #6FFFB0;
 }
 
-.c9 g {
+.c10 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c9 *:not([stroke])[fill='none'] {
+.c10 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c9 *[stroke*='#'],
-.c9 *[STROKE*='#'] {
+.c10 *[stroke*='#'],
+.c10 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c9 *[fill-rule],
-.c9 *[FILL-RULE],
-.c9 *[fill*='#'],
-.c9 *[FILL*='#'] {
+.c10 *[fill-rule],
+.c10 *[FILL-RULE],
+.c10 *[fill*='#'],
+.c10 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -231,7 +234,7 @@ exports[`Grommet custom theme 1`] = `
   display: inline-flex;
   font-size: inherit;
   line-height: inherit;
-  color: custom;
+  color: #cc6633;
   font-weight: 600;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -243,69 +246,102 @@ exports[`Grommet custom theme 1`] = `
   text-decoration: underline;
 }
 
-.c11 {
+.c9 {
   box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   font-size: inherit;
+  line-height: inherit;
+  color: #6FFFB0;
+  font-weight: 600;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c9:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c12 {
+  box-sizing: border-box;
+  font-size: 22px;
   font-family: inherit;
   border: none;
   -webkit-appearance: none;
   background: transparent;
   color: inherit;
   width: 100%;
+  line-height: 50px;
   padding: 11px;
-  font-weight: 600;
+  font-weight: bold;
   margin: 0;
   border: 1px solid rgba(0,0,0,0.33);
   border-radius: 4px;
 }
 
-.c11:focus {
+.c12:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c11:focus > circle,
-.c11:focus > ellipse,
-.c11:focus > line,
-.c11:focus > path,
-.c11:focus > polygon,
-.c11:focus > polyline,
-.c11:focus > rect {
+.c12:focus > circle,
+.c12:focus > ellipse,
+.c12:focus > line,
+.c12:focus > path,
+.c12:focus > polygon,
+.c12:focus > polyline,
+.c12:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c11:focus::-moz-focus-inner {
+.c12:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c11::-webkit-input-placeholder {
-  color: #AAAAAA;
+.c12::-webkit-input-placeholder {
+  color: #cc6633;
 }
 
-.c11::-moz-placeholder {
-  color: #AAAAAA;
+.c12::-moz-placeholder {
+  color: #cc6633;
 }
 
-.c11:-ms-input-placeholder {
-  color: #AAAAAA;
+.c12:-ms-input-placeholder {
+  color: #cc6633;
 }
 
-.c11::-webkit-search-decoration {
+.c12::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c11::-moz-focus-inner {
+.c12::-moz-focus-inner {
   border: none;
   outline: none;
 }
 
-.c11:-moz-placeholder,
-.c11::-moz-placeholder {
+.c12:-moz-placeholder,
+.c12::-moz-placeholder {
   opacity: 1;
 }
 
-.c10 {
+.c12::-webkit-input-placeholder {
+  font-weight: normal;
+}
+
+.c12::-moz-placeholder {
+  font-weight: normal;
+}
+
+.c12:-ms-input-placeholder {
+  font-weight: normal;
+}
+
+.c11 {
   position: relative;
   width: 100%;
 }
@@ -379,14 +415,14 @@ exports[`Grommet custom theme 1`] = `
     class="c8"
   >
     <a
-      class="c2"
+      class="c9"
     >
       <span
         class="c3"
       >
         <svg
           aria-label="Add"
-          class="c9"
+          class="c10"
           viewBox="0 0 24 24"
         >
           <path
@@ -431,11 +467,11 @@ exports[`Grommet custom theme 1`] = `
     class="c1"
   >
     <div
-      class="c10"
+      class="c11"
     >
       <input
         autocomplete="off"
-        class="c11"
+        class="c12"
         placeholder="Placeholder"
         value="Value"
       />
@@ -452,7 +488,7 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #6FFFB0;
+  background-color: #FD6FFF;
   color: #444444;
   min-width: 0;
   min-height: 0;
@@ -468,7 +504,7 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #FD6FFF;
+  background-color: #60EB9F;
   color: #444444;
   min-width: 0;
   min-height: 0;
@@ -484,7 +520,7 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #81FCED;
+  background-color: #60EBE1;
   color: #444444;
   min-width: 0;
   min-height: 0;
@@ -500,8 +536,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #7D4CDB;
-  color: #f8f8f8;
+  background-color: #333333;
+  color: #eeeeee;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -516,8 +552,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #333333;
-  color: #f8f8f8;
+  background-color: #555555;
+  color: #eeeeee;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -532,8 +568,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #555555;
-  color: #f8f8f8;
+  background-color: #777777;
+  color: #eeeeee;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -548,8 +584,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #777777;
-  color: #f8f8f8;
+  background-color: #999999;
+  color: #444444;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -564,7 +600,7 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #999999;
+  background-color: #FFCA58;
   color: #444444;
   min-width: 0;
   min-height: 0;
@@ -644,8 +680,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #00873D;
-  color: #f8f8f8;
+  background-color: #EB6060;
+  color: #444444;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -660,8 +696,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #3D138D;
-  color: #f8f8f8;
+  background-color: #01C781;
+  color: #444444;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -676,8 +712,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #00739D;
-  color: #f8f8f8;
+  background-color: #6095EB;
+  color: #444444;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -692,8 +728,8 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #FF4040;
-  color: #f8f8f8;
+  background-color: #FF3333;
+  color: #eeeeee;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -708,7 +744,7 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #CCCCCC;
+  background-color: #a8a8a8;
   color: #444444;
   min-width: 0;
   min-height: 0;
@@ -724,7 +760,7 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #00C781;
+  background-color: #7DD892;
   color: #444444;
   min-width: 0;
   min-height: 0;
@@ -740,7 +776,7 @@ exports[`Grommet dark theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #FFAA15;
+  background-color: #F7E464;
   color: #444444;
   min-width: 0;
   min-height: 0;
@@ -755,8 +791,11 @@ exports[`Grommet dark theme 1`] = `
 }
 
 .c0 {
+  font-family: Arial;
   font-size: 18px;
   line-height: 24px;
+  background-color: #111111;
+  color: #eeeeee;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -795,7 +834,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c5"
+    class="c1"
   >
     <span
       class="c2"
@@ -804,7 +843,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c6"
+    class="c5"
   >
     <span
       class="c2"
@@ -813,7 +852,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c7"
+    class="c6"
   >
     <span
       class="c2"
@@ -822,7 +861,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c8"
+    class="c7"
   >
     <span
       class="c2"
@@ -831,7 +870,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c9"
+    class="c8"
   >
     <span
       class="c2"
@@ -840,7 +879,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c9"
+    class="c8"
   >
     <span
       class="c2"
@@ -849,7 +888,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c9"
+    class="c8"
   >
     <span
       class="c2"
@@ -858,7 +897,7 @@ exports[`Grommet dark theme 1`] = `
     </span>
   </div>
   <div
-    class="c1"
+    class="c9"
   >
     <span
       class="c2"
@@ -1570,6 +1609,7 @@ exports[`Grommet grommet theme 1`] = `
   transition-duration: 0.1s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
+  font-weight: bold;
 }
 
 .c1:hover {
@@ -1675,8 +1715,11 @@ exports[`Grommet grommet theme 1`] = `
 }
 
 .c0 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 18px;
   line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -1710,8 +1753,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #7D4CDB;
-  color: #f8f8f8;
+  background-color: #01A982;
+  color: #FFFFFF;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1726,8 +1769,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #33333310;
-  color: #444444;
+  background-color: #0000000A;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1743,7 +1786,7 @@ exports[`Grommet hpe theme 1`] = `
   box-sizing: border-box;
   max-width: 100%;
   background-color: #FFFFFF;
-  color: #444444;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1758,8 +1801,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #6FFFB0;
-  color: #444444;
+  background-color: #FF8300;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1774,8 +1817,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #00873D;
-  color: #f8f8f8;
+  background-color: #00739D;
+  color: #FFFFFF;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1790,8 +1833,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #3D138D;
-  color: #f8f8f8;
+  background-color: #7630EA;
+  color: #FFFFFF;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1806,8 +1849,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #00739D;
-  color: #f8f8f8;
+  background-color: #FEC901;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1822,8 +1865,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #A2423D;
-  color: #f8f8f8;
+  background-color: #00E8CF;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1838,8 +1881,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #FF4040;
-  color: #f8f8f8;
+  background-color: #FC5A5A;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1855,7 +1898,7 @@ exports[`Grommet hpe theme 1`] = `
   box-sizing: border-box;
   max-width: 100%;
   background-color: #CCCCCC;
-  color: #444444;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1870,8 +1913,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #00C781;
-  color: #444444;
+  background-color: #17EBA0;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1886,8 +1929,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #FFAA15;
-  color: #444444;
+  background-color: #FFBC44;
+  color: #555555;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1902,8 +1945,8 @@ exports[`Grommet hpe theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-color: #444444;
-  color: #f8f8f8;
+  background-color: #555555;
+  color: #FFFFFF;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -1917,8 +1960,11 @@ exports[`Grommet hpe theme 1`] = `
 }
 
 .c0 {
+  font-family: 'Metric',Arial,sans-serif;
   font-size: 18px;
   line-height: 24px;
+  background-color: #FFFFFF;
+  color: #555555;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -2011,7 +2057,7 @@ exports[`Grommet hpe theme 1`] = `
     </span>
   </div>
   <div
-    class="c5"
+    class="c9"
   >
     <span
       class="c2"