diff --git a/jest.config.js b/jest.config.js
index d2c950c2..bf0bf284 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -20,7 +20,8 @@ module.exports = {
     breadstick: require.resolve('./tests/test-utils/module-mock.js')
   },
   snapshotSerializers: [
-    'jest-serializer-vue'
+    'jest-serializer-vue',
+    '@emotion/jest/serializer'
   ],
   testMatch: [
     '**/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
diff --git a/package.json b/package.json
index 5ef7dd33..86bfc506 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "evalbundle": "bundlesize"
   },
   "dependencies": {
+    "@chakra-ui/styled-system": "^1.12.1",
     "@emotion/css": "^11.0.0",
     "@mdx-js/vue-loader": "^1.6.1",
     "@nuxtjs/dotenv": "^1.4.0",
@@ -61,7 +62,6 @@
     "@storybook/storybook-deployer": "^2.8.1",
     "@storybook/theming": "^5.2.8",
     "@storybook/vue": "^5.3.3",
-    "@styled-system/css": "^5.0.23",
     "aria-hidden": "^1.1.1",
     "breadstick": "^0.2.14",
     "can-use-dom": "^0.1.0",
@@ -91,7 +91,6 @@
     "prismjs": "^1.19.0",
     "register-service-worker": "^1.6.2",
     "sass-loader": "^8.0.2",
-    "styled-system": "^5.1.2",
     "v-scroll-lock": "^1.1.0",
     "vue": "^2.6.11",
     "vue-error-boundary": "^1.0.3",
@@ -118,6 +117,7 @@
     "@commitlint/config-conventional": "^8.2.0",
     "@emotion/babel-plugin": "^11.1.2",
     "@emotion/eslint-plugin": "^11.0.0",
+    "@emotion/jest": "^11.3.0",
     "@nuxtjs/eslint-config": "^3.0.0",
     "@nuxtjs/eslint-module": "^1.0.0",
     "@nuxtjs/google-analytics": "^2.4.0",
@@ -169,7 +169,6 @@
     "rollup-plugin-scss": "^2.1.0",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-vue": "^5.1.4",
-    "styled-system": "^5.1.2",
     "v-scroll-lock": "^1.1.0",
     "vue-loader": "^15.7.1",
     "vue-lorem-ipsum": "^0.0.1",
diff --git a/packages/chakra-ui-core/package.json b/packages/chakra-ui-core/package.json
index 4496f39b..eb9a6f02 100644
--- a/packages/chakra-ui-core/package.json
+++ b/packages/chakra-ui-core/package.json
@@ -36,8 +36,8 @@
     "max-overall-size": "85KB"
   },
   "dependencies": {
+    "@chakra-ui/styled-system": "^1.12.1",
     "@popperjs/core": "^2.4.0",
-    "@styled-system/css": "^5.0.23",
     "animejs": "^3.1.0",
     "aria-hidden": "^1.1.1",
     "breadstick": "^0.2.14",
@@ -46,7 +46,6 @@
     "focus-trap-vue": "^0.0.4",
     "lodash-es": "^4.17.15",
     "portal-vue": "^2.1.6",
-    "styled-system": "^5.1.2",
     "v-scroll-lock": "^1.1.0"
   },
   "peerDependencies": {
diff --git a/packages/chakra-ui-core/src/CAccordion/tests/__snapshots__/CAccordion.test.js.snap b/packages/chakra-ui-core/src/CAccordion/tests/__snapshots__/CAccordion.test.js.snap
index 986172f8..e2621928 100644
--- a/packages/chakra-ui-core/src/CAccordion/tests/__snapshots__/CAccordion.test.js.snap
+++ b/packages/chakra-ui-core/src/CAccordion/tests/__snapshots__/CAccordion.test.js.snap
@@ -2,25 +2,111 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-0"
+  .emotion-2 {
+  border-top-width: 1px;
+}
+
+.emotion-2:last-of-type {
+  border-bottom-width: 1px;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+
+.emotion-3:focus,
+.emotion-3[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover] {
+  background: var(--colors-blackAlpha-50);
+}
+
+.emotion-3[disabled],
+.emotion-3[aria-disabled=true],
+.emotion-3[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-4:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-7 {
+  opacity: 1;
+  -webkit-transform: rotate(-180deg);
+  -moz-transform: rotate(-180deg);
+  -ms-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+  transform-origin: center;
+}
+
+.emotion-8 {
+  padding-top: var(--space-2);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  padding-bottom: var(--space-5);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAccordion"
   >
     <div
-      class="css-0 css-1b3isn8"
+      class="emotion-0 emotion-2"
       data-chakra-component="CAccordionItem"
     >
       <button
         aria-controls="accordion-panel-ac-1"
         aria-expanded="true"
-        class="css-3q8x3d"
+        class="emotion-3"
         data-chakra-component="CAccordionHeader"
         id="accordion-header-ac-1"
         type="button"
       >
         Section 1 title
         <svg
-          class="css-12j51pv css-3vopgu css-0 css-1cdnf31"
+          class="emotion-4 emotion-5 emotion-0 emotion-7"
           data-chakra-component="CAccordionIcon"
           role="presentation"
           viewBox="0 0 24 24"
@@ -40,7 +126,7 @@ exports[`should render correctly 1`] = `
       >
         <div
           aria-labelledby="accordion-header-ac-1"
-          class="css-t2ecxu"
+          class="emotion-8"
           data-chakra-component="CAccordionPanel"
           id="accordion-panel-ac-1"
           role="region"
diff --git a/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap b/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap
index ef61bd8e..9e4cf0c5 100644
--- a/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap
+++ b/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap
@@ -2,13 +2,56 @@
 
 exports[`should override icon if set explicitly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-nhrqr1"
+  .emotion-0 {
+  font-family: var(--fonts-body);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+  background: var(--colors-red-100);
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-1:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-2 {
+  width: var(--sizes-5);
+  height: var(--sizes-5);
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-3 {
+  margin-right: var(--space-3);
+  color: var(--colors-red-500);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAlert"
     role="alert"
   >
     <svg
-      class="css-12j51pv css-1oh9bp8 css-3v23kb"
+      class="emotion-1 emotion-2 emotion-3"
       data-chakra-component="CAlertIcon"
       role="presentation"
       viewBox="0 0 24 24"
@@ -28,17 +71,139 @@ exports[`should override icon if set explicitly 1`] = `
 
 exports[`should render correct variant styles 1`] = `
 <DocumentFragment>
-  <div
-    class="css-j7qwjs css-0"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
+  font-family: var(--fonts-body);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+  background: var(--colors-green-100);
+  margin-bottom: var(--space-2);
+}
+
+.emotion-3 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-3:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-4 {
+  width: var(--sizes-5);
+  height: var(--sizes-5);
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-5 {
+  margin-right: var(--space-3);
+  color: var(--colors-green-500);
+}
+
+.emotion-6 {
+  font-family: var(--fonts-body);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+  background: var(--colors-green-500);
+  color: var(--colors-white);
+  margin-bottom: var(--space-2);
+}
+
+.emotion-9 {
+  margin-right: var(--space-3);
+}
+
+.emotion-10 {
+  font-family: var(--fonts-body);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-left: var(--space-3);
+  padding-right: var(--space-4);
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+  background: var(--colors-green-100);
+  border-left: var(--borders-4px);
+  border-color: var(--colors-green-500);
+  margin-bottom: var(--space-2);
+}
+
+.emotion-14 {
+  font-family: var(--fonts-body);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-3);
+  background: var(--colors-green-100);
+  border-top: var(--borders-4px);
+  border-color: var(--colors-green-500);
+}
+
+<div
+    class="emotion-0 emotion-1"
     data-chakra-component="CStack"
   >
     <div
-      class="css-jc40v6"
+      class="emotion-2"
       data-chakra-component="CAlert"
       role="alert"
     >
       <svg
-        class="css-12j51pv css-1oh9bp8 css-8uesx6"
+        class="emotion-3 emotion-4 emotion-5"
         data-chakra-component="CAlertIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -55,12 +220,12 @@ exports[`should render correct variant styles 1`] = `
       
     </div>
     <div
-      class="css-u5y8wy"
+      class="emotion-6"
       data-chakra-component="CAlert"
       role="alert"
     >
       <svg
-        class="css-12j51pv css-1oh9bp8 css-uoder"
+        class="emotion-3 emotion-4 emotion-9"
         data-chakra-component="CAlertIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -77,12 +242,12 @@ exports[`should render correct variant styles 1`] = `
       
     </div>
     <div
-      class="css-16xha8s"
+      class="emotion-10"
       data-chakra-component="CAlert"
       role="alert"
     >
       <svg
-        class="css-12j51pv css-1oh9bp8 css-8uesx6"
+        class="emotion-3 emotion-4 emotion-5"
         data-chakra-component="CAlertIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -99,12 +264,12 @@ exports[`should render correct variant styles 1`] = `
       
     </div>
     <div
-      class="css-i78vk9"
+      class="emotion-14"
       data-chakra-component="CAlert"
       role="alert"
     >
       <svg
-        class="css-12j51pv css-1oh9bp8 css-8uesx6"
+        class="emotion-3 emotion-4 emotion-5"
         data-chakra-component="CAlertIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -126,13 +291,61 @@ exports[`should render correct variant styles 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-8c8mos"
+  .emotion-0 {
+  font-family: var(--fonts-body);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+  background: var(--colors-blue-100);
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-1:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-2 {
+  width: var(--sizes-5);
+  height: var(--sizes-5);
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-3 {
+  margin-right: var(--space-3);
+  color: var(--colors-blue-500);
+}
+
+.emotion-4 {
+  font-weight: var(--fontWeights-bold);
+  line-height: var(--lineHeights-normal);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAlert"
     role="alert"
   >
     <svg
-      class="css-12j51pv css-1oh9bp8 css-9y8umg"
+      class="emotion-1 emotion-2 emotion-3"
       data-chakra-component="CAlertIcon"
       role="presentation"
       viewBox="0 0 24 24"
@@ -148,14 +361,14 @@ exports[`should render correctly 1`] = `
     </svg>
      
     <div
-      class="css-11a523j"
+      class="emotion-4"
       data-chakra-component="CAlertTitle"
     >
       alert title
     </div>
      
     <div
-      class="css-0"
+      class="emotion-5"
       data-chakra-component="CAlertDescription"
     >
       alert description
diff --git a/packages/chakra-ui-core/src/CAlertDialog/tests/__snapshots__/CAlertDialog.test.js.snap b/packages/chakra-ui-core/src/CAlertDialog/tests/__snapshots__/CAlertDialog.test.js.snap
index 38936083..8e5ec9a7 100644
--- a/packages/chakra-ui-core/src/CAlertDialog/tests/__snapshots__/CAlertDialog.test.js.snap
+++ b/packages/chakra-ui-core/src/CAlertDialog/tests/__snapshots__/CAlertDialog.test.js.snap
@@ -7,7 +7,229 @@ exports[`should render correctly 1`] = `
       <!---->
     </div>
   </div>
-  <span
+  .emotion-0 {
+  position: fixed;
+  background: rgba( 0, 0, 0, 0.4);
+  left: var(--space-0);
+  top: var(--space-0);
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--zIndices-overlay);
+}
+
+.emotion-1 {
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: fixed;
+  left: var(--space-0);
+  top: var(--space-0);
+  width: 100%;
+  height: 100%;
+  z-index: var(--zIndices-modal);
+}
+
+.emotion-2 {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  max-width: var(--sizes-md);
+  width: 100%;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  z-index: var(--zIndices-modal);
+  font-family: var(--fonts-body);
+  background: var(--colors-white);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.1),0 3px 6px 0 rgba(0, 0, 0, .07);
+  top: var(--space-0);
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: auto;
+  margin-inline-end: auto;
+  margin-top: 3.75rem;
+  margin-bottom: 3.75rem;
+}
+
+.emotion-3 {
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+  position: relative;
+  font-size: var(--fontSizes-xl);
+  font-weight: var(--fontWeights-semibold);
+}
+
+.emotion-4 {
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-6:focus,
+.emotion-6[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-6:hover,
+.emotion-6[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-6:active,
+.emotion-6[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-6[disabled],
+.emotion-6[aria-disabled=true],
+.emotion-6[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-7 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-red-400);
+  color: var(--colors-white);
+  margin-left: var(--space-3);
+}
+
+.emotion-7:focus,
+.emotion-7[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-7:hover,
+.emotion-7[data-hover] {
+  background: var(--colors-red-500);
+}
+
+.emotion-7:active,
+.emotion-7[data-active] {
+  background: var(--colors-red-600);
+}
+
+.emotion-7[disabled],
+.emotion-7[aria-disabled=true],
+.emotion-7[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<span
     id="modal-portal-1"
   >
     <div
@@ -17,18 +239,18 @@ exports[`should render correctly 1`] = `
         style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"
       >
         <div
-          class="css-1a29t1v"
+          class="emotion-0"
           data-chakra-component="CModalOverlay"
         />
         <div
-          class="css-16gt2qg"
+          class="emotion-1"
           data-chakra-component="CBox"
         >
           <section
             aria-describedby="alert-dialog-1-desc"
             aria-labelledby="alert-dialog-1-label"
             aria-modal="true"
-            class="css-1uxbpb7"
+            class="emotion-2"
             data-chakra-component="CAlertDialogContent"
             data-testid="overlay"
             id="alert-dialog-1"
@@ -36,7 +258,7 @@ exports[`should render correctly 1`] = `
             tabindex="-1"
           >
             <header
-              class="css-w7idnj"
+              class="emotion-3"
               data-chakra-component="CModalHeader"
               id="alert-dialog-1-label"
             >
@@ -44,7 +266,7 @@ exports[`should render correctly 1`] = `
             </header>
              
             <div
-              class="css-5m10fw"
+              class="emotion-4"
               data-chakra-component="CModalBody"
               id="alert-dialog-1-desc"
             >
@@ -58,11 +280,11 @@ exports[`should render correctly 1`] = `
             </div>
              
             <footer
-              class="css-plnu2w"
+              class="emotion-5"
               data-chakra-component="CModalFooter"
             >
               <button
-                class="css-1bmeqe7"
+                class="emotion-6"
                 data-chakra-component="CButton"
                 data-testid="close-btn"
                 tabindex="0"
@@ -72,7 +294,7 @@ exports[`should render correctly 1`] = `
               </button>
                
               <button
-                class="css-7p9ddn"
+                class="emotion-7"
                 data-chakra-component="CButton"
                 tabindex="0"
                 type="button"
diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
index 9cdeb4f8..a2dd4b36 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
@@ -22,7 +22,7 @@ it('should render correctly', () => {
   expect(asFragment()).toMatchSnapshot()
 
   const [emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
-  const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
+  const pseudoStyles = getElementStyles(`.${emotionClassName}::before`)
 
   expect(pseudoStyles).toContain(
     `
@@ -34,40 +34,13 @@ it('should render correctly', () => {
 it('should have correct styles', () => {
   const inlineAttrs = ':ratio="2"'
   renderComponent({ inlineAttrs })
-  const image = screen.getByTestId('image')
-  const aspectRatioBox = screen.getByTestId('aspectRatioBox')
-  const child = screen.getByTestId('child')
 
-  const [emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
-  const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
+  const [emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
+  const pseudoStyles = getElementStyles(`.${emotionClassName}::before`)
 
   expect(pseudoStyles).toContain(
     `
     padding-bottom: 50%
   `.trim()
   )
-
-  expect(aspectRatioBox).toHaveStyle(`
-    max-width: 400px;
-    position: relative;
-  `)
-
-  // aspectRatioBox should contain exactly 1 immediate child
-  expect(aspectRatioBox.childElementCount).toEqual(1)
-
-  expect(child).toHaveStyle(`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-  `)
-
-  expect(child).not.toBeEmpty()
-
-  expect(image).toHaveStyle(`
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  `)
 })
diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap b/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap
index 532a905a..321cbd52 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap
@@ -2,19 +2,45 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-16idx8h"
+  .emotion-0 {
+  position: relative;
+  max-width: 400px;
+}
+
+.emotion-0::before {
+  height: 0px;
+  content: "";
+  display: block;
+  padding-bottom: 100%;
+}
+
+.emotion-1 {
+  position: absolute;
+  width: var(--sizes-full);
+  height: var(--sizes-full);
+  top: var(--space-0);
+  left: var(--space-0);
+}
+
+.emotion-2 {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAspectRatioBox"
     data-testid="aspectRatioBox"
   >
     <div
-      class="css-k57fb3"
+      class="emotion-1"
       data-chakra-component="CBox"
       data-testid="child"
     >
       <img
         alt="naruto"
-        class="css-ygtapu"
+        class="emotion-2"
         data-chakra-component="CBox"
         data-testid="image"
         src="https://bit.ly/naruto-sage"
diff --git a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
index 474ff9c9..17ab4a6b 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
@@ -2,18 +2,82 @@
 
 exports[`Avatar with AvatarBadge renders correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1sovlky"
+  .emotion-0 {
+  width: var(--sizes-12);
+  height: var(--sizes-12);
+  font-size: calc(3rem / 2.5);
+  line-height: 3rem;
+  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: var(--radii-full);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  background: #a8eb4f;
+  color: var(--colors-gray-800);
+  border: var(--borders-2px);
+  border-color: #fff;
+}
+
+.emotion-1 {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radii-full);
+  object-fit: cover;
+}
+
+.emotion-2 {
+  width: 1.0em;
+  height: 1.0em;
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transform: translate(25%, 25%);
+  -moz-transform: translate(25%, 25%);
+  -ms-transform: translate(25%, 25%);
+  transform: translate(25%, 25%);
+  bottom: var(--space-0);
+  right: var(--space-0);
+  border: 0.2em solid;
+  border-color: var(--colors-white);
+  border-radius: var(--radii-full);
+  background: var(--colors-green-500);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAvatar"
   >
     <img
       alt="Mesut Koca"
-      class="css-6qjm3j"
+      class="emotion-1"
       data-chakra-component="CBox"
       src="LOAD_SUCCESS_SRC"
     />
     <div
-      class="css-bruuz9"
+      class="emotion-2"
       data-chakra-component="CAvatarBadge"
     />
   </div>
@@ -22,14 +86,50 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1sovlky"
+  .emotion-0 {
+  width: var(--sizes-12);
+  height: var(--sizes-12);
+  font-size: calc(3rem / 2.5);
+  line-height: 3rem;
+  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: var(--radii-full);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  background: #a8eb4f;
+  color: var(--colors-gray-800);
+  border: var(--borders-2px);
+  border-color: #fff;
+}
+
+.emotion-1 {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radii-full);
+  object-fit: cover;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAvatar"
     data-testid="avatar"
   >
     <img
       alt="Mesut Koca"
-      class="css-6qjm3j"
+      class="emotion-1"
       data-chakra-component="CBox"
       src="LOAD_SUCCESS_SRC"
     />
diff --git a/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap b/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
index d4a31e95..0d6e37db 100644
--- a/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
@@ -2,36 +2,136 @@
 
 exports[`should change avatar group size correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-nqilgt"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 0;
+}
+
+.emotion-1 {
+  width: var(--sizes-16);
+  height: var(--sizes-16);
+  font-size: calc(4rem / 2.5);
+  line-height: 4rem;
+  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: var(--radii-full);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  background: #a8eb4f;
+  color: var(--colors-gray-800);
+  border: var(--borders-2px);
+  margin-left: var(--space-0);
+  z-index: 3;
+}
+
+.emotion-2 {
+  width: 4rem;
+  height: 4rem;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: var(--fontWeights-medium);
+}
+
+.emotion-3 {
+  width: var(--sizes-16);
+  height: var(--sizes-16);
+  font-size: calc(4rem / 2.5);
+  line-height: 4rem;
+  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: var(--radii-full);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  background: #9d7d74;
+  color: var(--colors-gray-800);
+  border: var(--borders-2px);
+  margin-left: calc(var(--space-3) * -1);
+  z-index: 2;
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  height: var(--sizes-16);
+  width: var(--sizes-16);
+  background: var(--colors-gray-200);
+  color: inherit;
+  border-radius: var(--radii-full);
+  border: var(--borders-2px);
+  border-color: #fff;
+  font-size: calc(4rem / 2.75);
+  margin-left: calc(var(--space-3) * -1);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAvatarGroup"
   >
     <div
-      class="css-1vz9fru"
+      class="emotion-1"
       data-chakra-component="CAvatar"
     >
       <div
         aria-label="Mesut Koca"
-        class="css-1sr52zs"
+        class="emotion-2"
         data-chakra-component="CAvatarName"
       >
         MK
       </div>
     </div>
     <div
-      class="css-z8puoe"
+      class="emotion-3"
       data-chakra-component="CAvatar"
     >
       <div
         aria-label="Evan You"
-        class="css-1sr52zs"
+        class="emotion-2"
         data-chakra-component="CAvatarName"
       >
         EY
       </div>
     </div>
     <div
-      class="css-pxig6c"
+      class="emotion-5"
       data-chakra-component="CMoreAvatarLabel"
     >
       +1
@@ -42,34 +142,133 @@ exports[`should change avatar group size correctly 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-nqilgt"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 0;
+}
+
+.emotion-1 {
+  width: var(--sizes-12);
+  height: var(--sizes-12);
+  font-size: calc(3rem / 2.5);
+  line-height: 3rem;
+  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: var(--radii-full);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  background: #a8eb4f;
+  color: var(--colors-gray-800);
+  border: var(--borders-2px);
+  margin-left: var(--space-0);
+  z-index: 3;
+}
+
+.emotion-2 {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radii-full);
+  object-fit: cover;
+}
+
+.emotion-3 {
+  width: var(--sizes-12);
+  height: var(--sizes-12);
+  font-size: calc(3rem / 2.5);
+  line-height: 3rem;
+  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: var(--radii-full);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  background: #9d7d74;
+  color: var(--colors-gray-800);
+  border: var(--borders-2px);
+  margin-left: calc(var(--space-3) * -1);
+  z-index: 2;
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  height: var(--sizes-12);
+  width: var(--sizes-12);
+  background: var(--colors-gray-200);
+  color: inherit;
+  border-radius: var(--radii-full);
+  border: var(--borders-2px);
+  border-color: #fff;
+  font-size: calc(3rem / 2.75);
+  margin-left: calc(var(--space-3) * -1);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CAvatarGroup"
   >
     <div
-      class="css-m3wjcp"
+      class="emotion-1"
       data-chakra-component="CAvatar"
     >
       <img
         alt="Mesut Koca"
-        class="css-6qjm3j"
+        class="emotion-2"
         data-chakra-component="CBox"
         src="LOAD_SUCCESS_SRC"
       />
     </div>
     <div
-      class="css-1a6a0zc"
+      class="emotion-3"
       data-chakra-component="CAvatar"
     >
       <img
         alt="Evan You"
-        class="css-6qjm3j"
+        class="emotion-2"
         data-chakra-component="CBox"
         src="LOAD_SUCCESS_SRC"
       />
     </div>
     <div
-      class="css-ypaprh"
+      class="emotion-5"
       data-chakra-component="CMoreAvatarLabel"
     >
       +1
diff --git a/packages/chakra-ui-core/src/CBadge/tests/__snapshots__/CBadge.test.js.snap b/packages/chakra-ui-core/src/CBadge/tests/__snapshots__/CBadge.test.js.snap
index 6da6d6d7..f26458f0 100644
--- a/packages/chakra-ui-core/src/CBadge/tests/__snapshots__/CBadge.test.js.snap
+++ b/packages/chakra-ui-core/src/CBadge/tests/__snapshots__/CBadge.test.js.snap
@@ -2,24 +2,99 @@
 
 exports[`should apply variant styles corectly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1xhj18k css-0"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-2 {
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: var(--fontSizes-xs);
+  font-family: var(--fonts-body);
+  -webkit-padding-start: var(--space-1);
+  padding-inline-start: var(--space-1);
+  -webkit-padding-end: var(--space-1);
+  padding-inline-end: var(--space-1);
+  border-radius: var(--radii-sm);
+  font-weight: var(--fontWeights-bold);
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--colors-green-100);
+  color: var(--colors-green-800);
+  -webkit-margin-start: var(--space-2);
+  margin-inline-start: var(--space-2);
+  -webkit-margin-end: var(--space-2);
+  margin-inline-end: var(--space-2);
+  margin-right: var(--space-2);
+}
+
+.emotion-3 {
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: var(--fontSizes-xs);
+  font-family: var(--fonts-body);
+  -webkit-padding-start: var(--space-1);
+  padding-inline-start: var(--space-1);
+  -webkit-padding-end: var(--space-1);
+  padding-inline-end: var(--space-1);
+  border-radius: var(--radii-sm);
+  font-weight: var(--fontWeights-bold);
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--colors-green-500);
+  color: var(--colors-white);
+  -webkit-margin-start: var(--space-2);
+  margin-inline-start: var(--space-2);
+  -webkit-margin-end: var(--space-2);
+  margin-inline-end: var(--space-2);
+  margin-right: var(--space-2);
+}
+
+.emotion-4 {
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: var(--fontSizes-xs);
+  font-family: var(--fonts-body);
+  -webkit-padding-start: var(--space-1);
+  padding-inline-start: var(--space-1);
+  -webkit-padding-end: var(--space-1);
+  padding-inline-end: var(--space-1);
+  border-radius: var(--radii-sm);
+  font-weight: var(--fontWeights-bold);
+  white-space: nowrap;
+  vertical-align: middle;
+  box-shadow: inset 0 0 0px 1px #3ea76a;
+  color: var(--colors-green-500);
+  -webkit-margin-start: var(--space-2);
+  margin-inline-start: var(--space-2);
+  -webkit-margin-end: var(--space-2);
+  margin-inline-end: var(--space-2);
+}
+
+<div
+    class="emotion-0 emotion-1"
     data-chakra-component="CStack"
   >
     <div
-      class="css-1sgz2im"
+      class="emotion-2"
       data-chakra-component="CBadge"
     >
       Subtle
     </div>
     <div
-      class="css-ps6r4y"
+      class="emotion-3"
       data-chakra-component="CBadge"
     >
       Solid
     </div>
     <div
-      class="css-1bvhmsh"
+      class="emotion-4"
       data-chakra-component="CBadge"
     >
       Outline
@@ -30,8 +105,25 @@ exports[`should apply variant styles corectly 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-2cw9wt"
+  .emotion-0 {
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: var(--fontSizes-xs);
+  font-family: var(--fonts-body);
+  -webkit-padding-start: var(--space-1);
+  padding-inline-start: var(--space-1);
+  -webkit-padding-end: var(--space-1);
+  padding-inline-end: var(--space-1);
+  border-radius: var(--radii-sm);
+  font-weight: var(--fontWeights-bold);
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--colors-gray-100);
+  color: var(--colors-gray-800);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CBadge"
   >
     500
diff --git a/packages/chakra-ui-core/src/CBox/tests/CBox.test.js b/packages/chakra-ui-core/src/CBox/tests/CBox.test.js
index 76e2978b..7556b594 100644
--- a/packages/chakra-ui-core/src/CBox/tests/CBox.test.js
+++ b/packages/chakra-ui-core/src/CBox/tests/CBox.test.js
@@ -23,19 +23,7 @@ it('should change the style', () => {
   background-color="blue.200" color="blue.700"`
   const { asFragment } = renderComponent({ inlineAttrs })
 
-  const box = screen.getByTestId('box')
-
   expect(asFragment()).toMatchSnapshot()
-  expect(box).toHaveStyle('display: flex')
-  expect(box).toHaveStyle('width: auto')
-  expect(box).toHaveStyle('margin-bottom: 1.25rem')
-  expect(box).toHaveStyle('margin-top: 1.25rem')
-  expect(box).toHaveStyle('box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);')
-  expect(box).toHaveStyle('padding: 1.25rem 1.25rem 1.25rem 1.25rem;')
-  expect(box).toHaveStyle('border-radius: 0.125rem;')
-  expect(box).toHaveStyle('font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";')
-  expect(box).toHaveStyle('color: rgb(0, 49, 130);')
-  expect(box).toHaveStyle('background-color: rgb(125, 177, 255);')
 })
 
 it.each`
diff --git a/packages/chakra-ui-core/src/CBox/tests/__snapshots__/CBox.test.js.snap b/packages/chakra-ui-core/src/CBox/tests/__snapshots__/CBox.test.js.snap
index b5554d33..06ba7cd2 100644
--- a/packages/chakra-ui-core/src/CBox/tests/__snapshots__/CBox.test.js.snap
+++ b/packages/chakra-ui-core/src/CBox/tests/__snapshots__/CBox.test.js.snap
@@ -2,8 +2,29 @@
 
 exports[`should change the style 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1pl3ejm"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+  -webkit-padding-start: var(--space-5);
+  padding-inline-start: var(--space-5);
+  -webkit-padding-end: var(--space-5);
+  padding-inline-end: var(--space-5);
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-5);
+  box-shadow: var(--shadows-lg);
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-5);
+  border-radius: var(--radii-sm);
+  font-family: var(--fonts-body);
+  background-color: var(--colors-blue-200);
+  color: var(--colors-blue-700);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CBox"
     data-testid="box"
   >
@@ -15,7 +36,7 @@ exports[`should change the style 1`] = `
 exports[`should display CBox with type as header 1`] = `
 <DocumentFragment>
   <header
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CBox"
     data-testid="box"
   >
@@ -27,7 +48,7 @@ exports[`should display CBox with type as header 1`] = `
 exports[`should display CBox with type as p 1`] = `
 <DocumentFragment>
   <p
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CBox"
     data-testid="box"
   >
@@ -39,7 +60,7 @@ exports[`should display CBox with type as p 1`] = `
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CBox"
     data-testid="box"
   >
diff --git a/packages/chakra-ui-core/src/CBreadcrumb/tests/__snapshots__/CBreadcrumb.test.js.snap b/packages/chakra-ui-core/src/CBreadcrumb/tests/__snapshots__/CBreadcrumb.test.js.snap
index 05fc476b..28468289 100644
--- a/packages/chakra-ui-core/src/CBreadcrumb/tests/__snapshots__/CBreadcrumb.test.js.snap
+++ b/packages/chakra-ui-core/src/CBreadcrumb/tests/__snapshots__/CBreadcrumb.test.js.snap
@@ -2,25 +2,73 @@
 
 exports[`should display custom seperator  1`] = `
 <DocumentFragment>
-  <nav
+  .emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-2 {
+  -webkit-transition: all 0.15s ease-out;
+  transition: all 0.15s ease-out;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-4 {
+  -webkit-margin-start: var(--space-2);
+  margin-inline-start: var(--space-2);
+  -webkit-margin-end: var(--space-2);
+  margin-inline-end: var(--space-2);
+}
+
+<nav
     aria-label="breadcrumb"
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CBreadcrumb"
   >
     <ol>
       <li
-        class="css-18biwo"
+        class="emotion-1"
         data-chakra-component="CBreadcrumbItem"
       >
         <a
-          class="css-1etxt64 css-0"
+          class="emotion-2 emotion-0"
           data-chakra-component="CBreadcrumbLink"
           href="/"
         >
           Home
         </a>
         <span
-          class="css-dp0f2t"
+          class="emotion-4"
           data-chakra-component="CBreadcrumbSeparator"
           role="presentation"
         >
@@ -28,18 +76,18 @@ exports[`should display custom seperator  1`] = `
         </span>
       </li>
       <li
-        class="css-18biwo"
+        class="emotion-1"
         data-chakra-component="CBreadcrumbItem"
       >
         <a
-          class="css-1etxt64 css-0"
+          class="emotion-2 emotion-0"
           data-chakra-component="CBreadcrumbLink"
           href="/about"
         >
           About
         </a>
         <span
-          class="css-dp0f2t"
+          class="emotion-4"
           data-chakra-component="CBreadcrumbSeparator"
           role="presentation"
         >
@@ -47,12 +95,12 @@ exports[`should display custom seperator  1`] = `
         </span>
       </li>
       <li
-        class="css-18biwo"
+        class="emotion-1"
         data-chakra-component="CBreadcrumbItem"
       >
         <span
           aria-current="page"
-          class="css-0"
+          class="emotion-0"
           data-chakra-component="CBreadcrumbLink"
           href="/contact"
         >
@@ -66,26 +114,87 @@ exports[`should display custom seperator  1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div>
+  .emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-2 {
+  -webkit-transition: all 0.15s ease-out;
+  transition: all 0.15s ease-out;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-4 {
+  -webkit-margin-start: var(--space-2);
+  margin-inline-start: var(--space-2);
+  -webkit-margin-end: var(--space-2);
+  margin-inline-end: var(--space-2);
+  color: tomato;
+  font-size: 10px;
+  font-weight: var(--fontWeights-bold);
+}
+
+.emotion-8 {
+  -webkit-margin-start: var(--space-2);
+  margin-inline-start: var(--space-2);
+  -webkit-margin-end: var(--space-2);
+  margin-inline-end: var(--space-2);
+  color: firebrick;
+  font-size: 20px;
+  font-weight: var(--fontWeights-bold);
+}
+
+<div>
     <nav
       aria-label="breadcrumb"
-      class="css-0"
+      class="emotion-0"
       data-chakra-component="CBreadcrumb"
     >
       <ol>
         <li
-          class="css-18biwo"
+          class="emotion-1"
           data-chakra-component="CBreadcrumbItem"
         >
           <a
-            class="css-1etxt64 css-0"
+            class="emotion-2 emotion-0"
             data-chakra-component="CBreadcrumbLink"
             href="#"
           >
             Breadcrumb 1
           </a>
           <span
-            class="css-1mqaog3"
+            class="emotion-4"
             data-chakra-component="CBreadcrumbSeparator"
             role="presentation"
           >
@@ -93,18 +202,18 @@ exports[`should render correctly 1`] = `
           </span>
         </li>
         <li
-          class="css-18biwo"
+          class="emotion-1"
           data-chakra-component="CBreadcrumbItem"
         >
           <a
-            class="css-1etxt64 css-0"
+            class="emotion-2 emotion-0"
             data-chakra-component="CBreadcrumbLink"
             href="#"
           >
             Breadcrumb 2
           </a>
           <span
-            class="css-15z81qo"
+            class="emotion-8"
             data-chakra-component="CBreadcrumbSeparator"
             role="presentation"
           >
diff --git a/packages/chakra-ui-core/src/CButton/CButton.stories.js b/packages/chakra-ui-core/src/CButton/CButton.stories.js
index 231c8561..e7be4d9e 100644
--- a/packages/chakra-ui-core/src/CButton/CButton.stories.js
+++ b/packages/chakra-ui-core/src/CButton/CButton.stories.js
@@ -7,11 +7,12 @@ storiesOf('UI | Button', module)
     components: { CButton },
     template: `
       <div>
-        <input v-chakra="{ ':focus': { shadow: 'outline' } }" transition="all 0.2s ease-in-out" shadow="sm" rounded="md" h="100%" v-model="value" />
         <CButton variant-color="blue" @click="action">New button</CButton>
       </div>
     `,
-    methods: { action: action('Button Clicked') },
+    methods: {
+      action: action('Button Clicked')
+    },
     data: () => ({
       value: ''
     })
diff --git a/packages/chakra-ui-core/src/CButton/tests/CButton.test.js b/packages/chakra-ui-core/src/CButton/tests/CButton.test.js
index e21c73c2..576a346f 100644
--- a/packages/chakra-ui-core/src/CButton/tests/CButton.test.js
+++ b/packages/chakra-ui-core/src/CButton/tests/CButton.test.js
@@ -12,58 +12,77 @@ const renderComponent = (props) => {
   return render(base)
 }
 
-it('should render correctly', () => {
-  const { asFragment } = renderComponent()
-  expect(asFragment()).toMatchSnapshot()
-})
+describe('CButton', () => {
+  it('should render correctly', () => {
+    const { asFragment } = renderComponent()
+    expect(asFragment()).toMatchSnapshot()
+  })
 
-it('should display button with left icon', () => {
-  const { asFragment } = renderComponent({ template: '<CButton leftIcon="email">Email</CButton>' })
-  expect(asFragment()).toMatchSnapshot()
-})
+  it('should display button with left icon', () => {
+    const { asFragment } = renderComponent({
+      template: '<CButton leftIcon="email">Email</CButton>'
+    })
+    expect(asFragment()).toMatchSnapshot()
+  })
 
-it('should display button with right icon', () => {
-  const { asFragment } = renderComponent({ template: '<CButton rightIcon="email">Email</CButton>' })
-  expect(asFragment()).toMatchSnapshot()
-})
+  it('should display button with right icon', () => {
+    const { asFragment } = renderComponent({
+      template: '<CButton rightIcon="email">Email</CButton>'
+    })
+    expect(asFragment()).toMatchSnapshot()
+  })
 
-it('should display spinner and hide text', () => {
-  const { container } = renderComponent({ template: '<CButton isLoading data-testid="btn">CButton</CButton>' })
-  const button = screen.getByTestId('btn')
+  it('should display spinner and hide text', () => {
+    const { container } = renderComponent({
+      template: '<CButton isLoading data-testid="btn">CButton</CButton>'
+    })
+    const button = screen.getByTestId('btn')
 
-  expect(button).toHaveAttribute('disabled')
-  expect(button).toHaveAttribute('aria-disabled', 'true')
+    expect(button).toHaveAttribute('disabled')
+    expect(button).toHaveAttribute('aria-disabled', 'true')
 
-  const spinner = container.querySelector('[data-chakra-component=CSpinner]')
-  expect(spinner).toBeInTheDocument()
-  expect(button).toHaveStyle('opacity: 0.4')
-})
+    const spinner = container.querySelector('[data-chakra-component=CSpinner]')
+    expect(spinner).toBeInTheDocument()
+    expect(button).toHaveStyle('opacity: 0.4')
+  })
 
-it('should display spinner with text', () => {
-  const { container } = renderComponent({ template: '<CButton isLoading loadingText="Submitting" data-testid="Spinner">Button</CButton>' })
+  it('should display spinner with text', () => {
+    const { container } = renderComponent({
+      template:
+      '<CButton isLoading loadingText="Submitting" data-testid="Spinner">Button</CButton>'
+    })
 
-  expect(screen.getByText('Submitting')).toBeInTheDocument()
-  const spinner = container.querySelector('[data-chakra-component=CSpinner]')
-  expect(spinner).toBeInTheDocument()
-})
+    expect(screen.getByText('Submitting')).toBeInTheDocument()
+    const spinner = container.querySelector('[data-chakra-component=CSpinner]')
+    expect(spinner).toBeInTheDocument()
+  })
 
-it('should display a disabled button', () => {
-  renderComponent({ template: '<CButton isDisabled>Button</CButton>' })
+  it('should display a disabled button', () => {
+    renderComponent({ template: '<CButton isDisabled>Button</CButton>' })
 
-  expect(screen.getByText('Button')).toHaveAttribute('disabled')
-})
+    expect(screen.getByText('Button')).toHaveAttribute('disabled')
+  })
 
-it('should emit "click" event', () => {
-  const handleClick = jest.fn()
-  renderComponent({
-    template: '<CButton @click="handleClick" data-testid="btn"></CButton>',
-    methods: {
-      handleClick
-    }
+  it('should support custom color', () => {
+    renderComponent({ template: '<CButton color="#fafafa">Button</CButton>' })
+
+    expect(screen.getByText('Button')).toHaveStyle({
+      color: '#fafafa'
+    })
   })
 
-  const button = screen.getByTestId('btn')
+  it('should emit "click" event', () => {
+    const handleClick = jest.fn()
+    renderComponent({
+      template: '<CButton @click="handleClick" data-testid="btn"></CButton>',
+      methods: {
+        handleClick
+      }
+    })
+
+    const button = screen.getByTestId('btn')
 
-  userEvent.click(button)
-  expect(handleClick).toHaveBeenCalled()
+    userEvent.click(button)
+    expect(handleClick).toHaveBeenCalled()
+  })
 })
diff --git a/packages/chakra-ui-core/src/CButton/tests/__snapshots__/CButton.test.js.snap b/packages/chakra-ui-core/src/CButton/tests/__snapshots__/CButton.test.js.snap
index 3535bd7e..7ffe3f54 100644
--- a/packages/chakra-ui-core/src/CButton/tests/__snapshots__/CButton.test.js.snap
+++ b/packages/chakra-ui-core/src/CButton/tests/__snapshots__/CButton.test.js.snap
@@ -1,15 +1,112 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should display button with left icon 1`] = `
+exports[`CButton should display button with left icon 1`] = `
 <DocumentFragment>
-  <button
-    class="css-1bmeqe7"
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-0:active,
+.emotion-0[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-1:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-2 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-3 {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+
+.emotion-4 {
+  margin-right: var(--space-1);
+  margin-bottom: var(--space-px);
+  opacity: 1;
+}
+
+<button
+    class="emotion-0"
     data-chakra-component="CButton"
     tabindex="0"
     type="button"
   >
     <svg
-      class="css-12j51pv css-3vopgu css-1me86bq css-amnuoh"
+      class="emotion-1 emotion-2 emotion-3 emotion-4"
       data-chakra-component="CButtonIcon"
       icon="email"
       role="presentation"
@@ -41,17 +138,114 @@ exports[`should display button with left icon 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should display button with right icon 1`] = `
+exports[`CButton should display button with right icon 1`] = `
 <DocumentFragment>
-  <button
-    class="css-1bmeqe7"
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-0:active,
+.emotion-0[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-1:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-2 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-3 {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+
+.emotion-4 {
+  margin-left: var(--space-1);
+  margin-bottom: var(--space-px);
+  opacity: 1;
+}
+
+<button
+    class="emotion-0"
     data-chakra-component="CButton"
     tabindex="0"
     type="button"
   >
     Email
     <svg
-      class="css-12j51pv css-3vopgu css-1me86bq css-1bbplbj"
+      class="emotion-1 emotion-2 emotion-3 emotion-4"
       data-chakra-component="CButtonIcon"
       role="presentation"
       viewBox="0 0 24 24"
@@ -81,10 +275,76 @@ exports[`should display button with right icon 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render correctly 1`] = `
+exports[`CButton should render correctly 1`] = `
 <DocumentFragment>
-  <button
-    class="css-1bmeqe7"
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-0:active,
+.emotion-0[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<button
+    class="emotion-0"
     data-chakra-component="CButton"
     tabindex="0"
     type="button"
diff --git a/packages/chakra-ui-core/src/CButton/utils/button.styles.js b/packages/chakra-ui-core/src/CButton/utils/button.styles.js
index 307f6cc5..3d3d42e5 100644
--- a/packages/chakra-ui-core/src/CButton/utils/button.styles.js
+++ b/packages/chakra-ui-core/src/CButton/utils/button.styles.js
@@ -18,7 +18,7 @@ const baseStyles = {
 
 const disabledProps = {
   _disabled: {
-    opacity: '40%',
+    opacity: '0.4',
     cursor: 'not-allowed',
     boxShadow: 'none'
   }
diff --git a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
index 41056950..896215e8 100644
--- a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
+++ b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
@@ -32,7 +32,7 @@ it('should attach buttons when `is-attached` is passed', () => {
   })
 
   const button = screen.getByText('Button1')
-  expect(button).toHaveStyle('border-top-right-radius: 0; border-bottom-right-radius: 0;')
+  expect(button).toHaveStyle('border-top-right-radius: 0px; border-bottom-right-radius: 0px;')
   expect(asFragment()).toMatchSnapshot()
 })
 
diff --git a/packages/chakra-ui-core/src/CButtonGroup/tests/__snapshots__/CButtonGroup.test.js.snap b/packages/chakra-ui-core/src/CButtonGroup/tests/__snapshots__/CButtonGroup.test.js.snap
index b98d4aa8..68265c51 100644
--- a/packages/chakra-ui-core/src/CButtonGroup/tests/__snapshots__/CButtonGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CButtonGroup/tests/__snapshots__/CButtonGroup.test.js.snap
@@ -2,12 +2,151 @@
 
 exports[`should attach buttons when \`is-attached\` is passed 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1baulvz"
+  .emotion-0 {
+  display: inline-block;
+}
+
+.emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-right: 0;
+}
+
+.emotion-1:focus,
+.emotion-1[data-focus] {
+  box-shadow: var(--shadows-outline);
+  z-index: 1;
+}
+
+.emotion-1:hover,
+.emotion-1[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-1:active,
+.emotion-1[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-1[disabled],
+.emotion-1[aria-disabled=true],
+.emotion-1[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+  z-index: 1;
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-2:active,
+.emotion-2[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CButtonGroup"
   >
     <button
-      class="css-9x7nat"
+      class="emotion-1"
       data-chakra-component="CButton"
       tabindex="0"
       type="button"
@@ -15,7 +154,7 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
       Button1
     </button>
     <button
-      class="css-566v0a"
+      class="emotion-2"
       data-chakra-component="CButton"
       tabindex="0"
       type="button"
@@ -28,12 +167,147 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1baulvz"
+  .emotion-0 {
+  display: inline-block;
+}
+
+.emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+  margin-right: var(--space-2);
+}
+
+.emotion-1:focus,
+.emotion-1[data-focus] {
+  box-shadow: var(--shadows-outline);
+  z-index: 1;
+}
+
+.emotion-1:hover,
+.emotion-1[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-1:active,
+.emotion-1[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-1[disabled],
+.emotion-1[aria-disabled=true],
+.emotion-1[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+  z-index: 1;
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-2:active,
+.emotion-2[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CButtonGroup"
   >
     <button
-      class="css-tcle5v"
+      class="emotion-1"
       data-chakra-component="CButton"
       tabindex="0"
       type="button"
@@ -41,7 +315,7 @@ exports[`should render correctly 1`] = `
       Button1
     </button>
     <button
-      class="css-ldbpgl"
+      class="emotion-2"
       data-chakra-component="CButton"
       tabindex="0"
       type="button"
diff --git a/packages/chakra-ui-core/src/CCheckbox/CCheckbox.js b/packages/chakra-ui-core/src/CCheckbox/CCheckbox.js
index 80ea60c0..a4945b9a 100644
--- a/packages/chakra-ui-core/src/CCheckbox/CCheckbox.js
+++ b/packages/chakra-ui-core/src/CCheckbox/CCheckbox.js
@@ -9,7 +9,7 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#button
  */
 
-import { StringNumber, StringArray } from '../config/props/props.types'
+import { StringNumber, StringArray } from '../config/props.types'
 import { useVariantColorWarning, useId, createStyledAttrsMixin } from '../utils'
 
 import CBox from '../CBox'
diff --git a/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap b/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap
index 7dfc9127..a99eef76 100644
--- a/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap
+++ b/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap
@@ -2,13 +2,157 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <label
-    class="css-jwmyb8"
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: top;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.emotion-1 {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: background-color 120ms,box-shadow 250ms;
+  transition: background-color 120ms,box-shadow 250ms;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: var(--sizes-4);
+  height: var(--sizes-4);
+  opacity: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: var(--borders-2px);
+  border-radius: var(--radii-sm);
+  border-color: inherit;
+  color: var(--colors-white);
+}
+
+.emotion-2[aria-checked=true],
+.emotion-2[data-checked] {
+  background: var(--colors-blue-500);
+  border-color: var(--colors-blue-500);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  background: var(--colors-gray-100);
+  border-color: var(--colors-gray-100);
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-2[aria-invalid=true],
+.emotion-2[data-invalid] {
+  border-color: var(--colors-red-500);
+}
+
+input[type=checkbox]:focus+.emotion-3 {
+  box-shadow: var(--shadows-outline);
+}
+
+input[type=checkbox]:disabled+.emotion-3 {
+  background: var(--colors-gray-100);
+  border-color: var(--colors-gray-100);
+}
+
+input[type=checkbox][aria-invalid=true]+.emotion-3 {
+  border-color: var(--colors-red-500);
+}
+
+input[type=checkbox]:checked:disabled+.emotion-3,
+input[type=checkbox][aria-checked=mixed]:disabled+.emotion-3 {
+  border-color: var(--colors-gray-200);
+  background: var(--colors-gray-200);
+  color: var(--colors-gray-500);
+}
+
+.emotion-3>* {
+  opacity: 0;
+}
+
+input[type=checkbox]:checked+.emotion-3,
+input[type=checkbox][aria-checked=mixed]+.emotion-3 {
+  background: var(--colors-blue-500);
+  border-color: var(--colors-blue-500);
+}
+
+input[type=checkbox]:checked+.emotion-3>*,
+input[type=checkbox][aria-checked=mixed]+.emotion-3>* {
+  opacity: 1;
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-4:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-7 {
+  margin-left: var(--space-2);
+  font-size: var(--fontSizes-md);
+  font-family: var(--fonts-body);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 1;
+}
+
+<label
+    class="emotion-0"
     data-chakra-component="CCheckbox"
     for="checkbox-1"
   >
     <input
-      class="css-f8n5zr"
+      class="emotion-1"
       data-chakra-component="CVisuallyHidden"
       id="checkbox-1"
       type="checkbox"
@@ -16,11 +160,11 @@ exports[`should render correctly 1`] = `
     />
     <div
       aria-hidden="true"
-      class="css-v1yklk css-xkdust"
+      class="emotion-2 emotion-3"
       data-chakra-component="CControlBox"
     >
       <svg
-        class="css-12j51pv css-2adi1i css-0"
+        class="emotion-4 emotion-5 emotion-6"
         data-chakra-component="CIcon"
         role="presentation"
         viewBox="0 0 14 14"
@@ -43,7 +187,7 @@ exports[`should render correctly 1`] = `
       </svg>
     </div>
     <div
-      class="css-1jg3nyw"
+      class="emotion-7"
       data-chakra-component="CBox"
     >
       check
diff --git a/packages/chakra-ui-core/src/CCheckboxGroup/CCheckboxGroup.js b/packages/chakra-ui-core/src/CCheckboxGroup/CCheckboxGroup.js
index b7702a05..ca23aa52 100644
--- a/packages/chakra-ui-core/src/CCheckboxGroup/CCheckboxGroup.js
+++ b/packages/chakra-ui-core/src/CCheckboxGroup/CCheckboxGroup.js
@@ -10,7 +10,7 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#button
  */
 
-import { SNA } from '../config/props/props.types'
+import { SNA } from '../config/props.types'
 import { isDef, useId, cleanChildren, cloneVNodeElement, createStyledAttrsMixin } from '../utils'
 
 import CBox from '../CBox'
diff --git a/packages/chakra-ui-core/src/CCheckboxGroup/tests/__snapshots__/CCheckboxGroup.test.js.snap b/packages/chakra-ui-core/src/CCheckboxGroup/tests/__snapshots__/CCheckboxGroup.test.js.snap
index 3f4114b7..40e3e1a5 100644
--- a/packages/chakra-ui-core/src/CCheckboxGroup/tests/__snapshots__/CCheckboxGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CCheckboxGroup/tests/__snapshots__/CCheckboxGroup.test.js.snap
@@ -2,27 +2,184 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1v5z18m"
+  .emotion-0 {
+  width: 300px;
+}
+
+.emotion-2 {
+  display: block;
+  margin-bottom: var(--space-2);
+}
+
+.emotion-3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: top;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.emotion-4 {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+.emotion-5 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: background-color 120ms,box-shadow 250ms;
+  transition: background-color 120ms,box-shadow 250ms;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: var(--sizes-4);
+  height: var(--sizes-4);
+  opacity: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: var(--borders-2px);
+  border-radius: var(--radii-sm);
+  border-color: inherit;
+  color: var(--colors-white);
+}
+
+.emotion-5[aria-checked=true],
+.emotion-5[data-checked] {
+  background: var(--colors-green-500);
+  border-color: var(--colors-green-500);
+}
+
+.emotion-5[disabled],
+.emotion-5[aria-disabled=true],
+.emotion-5[data-disabled] {
+  background: var(--colors-gray-100);
+  border-color: var(--colors-gray-100);
+}
+
+.emotion-5:focus,
+.emotion-5[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-5[aria-invalid=true],
+.emotion-5[data-invalid] {
+  border-color: var(--colors-red-500);
+}
+
+input[type=checkbox]:focus+.emotion-6 {
+  box-shadow: var(--shadows-outline);
+}
+
+input[type=checkbox]:disabled+.emotion-6 {
+  background: var(--colors-gray-100);
+  border-color: var(--colors-gray-100);
+}
+
+input[type=checkbox][aria-invalid=true]+.emotion-6 {
+  border-color: var(--colors-red-500);
+}
+
+input[type=checkbox]:checked:disabled+.emotion-6,
+input[type=checkbox][aria-checked=mixed]:disabled+.emotion-6 {
+  border-color: var(--colors-gray-200);
+  background: var(--colors-gray-200);
+  color: var(--colors-gray-500);
+}
+
+.emotion-6>* {
+  opacity: 0;
+}
+
+input[type=checkbox]:checked+.emotion-6,
+input[type=checkbox][aria-checked=mixed]+.emotion-6 {
+  background: var(--colors-green-500);
+  border-color: var(--colors-green-500);
+}
+
+input[type=checkbox]:checked+.emotion-6>*,
+input[type=checkbox][aria-checked=mixed]+.emotion-6>* {
+  opacity: 1;
+}
+
+.emotion-7 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-7:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-8 {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-10 {
+  margin-left: var(--space-2);
+  font-size: var(--fontSizes-md);
+  font-family: var(--fonts-body);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 1;
+}
+
+.emotion-20 {
+  display: block;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CBox"
   >
     <div
-      class="css-0"
+      class="emotion-1"
       data-chakra-component="CCheckboxGroup"
       role="group"
     >
       <div
-        class="css-1x9mqzb"
+        class="emotion-2"
         data-chakra-component="CBox"
       >
         <label
-          class="css-jwmyb8"
+          class="emotion-3"
           data-chakra-component="CCheckbox"
           data-testid="one"
           for="checkbox-1"
         >
           <input
-            class="css-f8n5zr"
+            class="emotion-4"
             data-chakra-component="CVisuallyHidden"
             id="checkbox-1"
             name="numbers-0"
@@ -31,11 +188,11 @@ exports[`should render correctly 1`] = `
           />
           <div
             aria-hidden="true"
-            class="css-v1yklk css-hpvc67"
+            class="emotion-5 emotion-6"
             data-chakra-component="CControlBox"
           >
             <svg
-              class="css-12j51pv css-2adi1i css-0"
+              class="emotion-7 emotion-8 emotion-1"
               data-chakra-component="CIcon"
               role="presentation"
               viewBox="0 0 14 14"
@@ -58,7 +215,7 @@ exports[`should render correctly 1`] = `
             </svg>
           </div>
           <div
-            class="css-1jg3nyw"
+            class="emotion-10"
             data-chakra-component="CBox"
           >
             One
@@ -66,18 +223,18 @@ exports[`should render correctly 1`] = `
         </label>
       </div>
       <div
-        class="css-1x9mqzb"
+        class="emotion-2"
         data-chakra-component="CBox"
       >
         <label
-          class="css-jwmyb8"
+          class="emotion-3"
           data-chakra-component="CCheckbox"
           data-testid="two"
           for="checkbox-2"
         >
           <input
             aria-checked="true"
-            class="css-f8n5zr"
+            class="emotion-4"
             data-chakra-component="CVisuallyHidden"
             id="checkbox-2"
             name="numbers-1"
@@ -86,11 +243,11 @@ exports[`should render correctly 1`] = `
           />
           <div
             aria-hidden="true"
-            class="css-v1yklk css-hpvc67"
+            class="emotion-5 emotion-6"
             data-chakra-component="CControlBox"
           >
             <svg
-              class="css-12j51pv css-2adi1i css-0"
+              class="emotion-7 emotion-8 emotion-1"
               data-chakra-component="CIcon"
               role="presentation"
               viewBox="0 0 14 14"
@@ -113,7 +270,7 @@ exports[`should render correctly 1`] = `
             </svg>
           </div>
           <div
-            class="css-1jg3nyw"
+            class="emotion-10"
             data-chakra-component="CBox"
           >
             Two
@@ -121,17 +278,17 @@ exports[`should render correctly 1`] = `
         </label>
       </div>
       <div
-        class="css-13o7eu2"
+        class="emotion-20"
         data-chakra-component="CBox"
       >
         <label
-          class="css-jwmyb8"
+          class="emotion-3"
           data-chakra-component="CCheckbox"
           data-testid="three"
           for="checkbox-3"
         >
           <input
-            class="css-f8n5zr"
+            class="emotion-4"
             data-chakra-component="CVisuallyHidden"
             id="checkbox-3"
             name="numbers-2"
@@ -140,11 +297,11 @@ exports[`should render correctly 1`] = `
           />
           <div
             aria-hidden="true"
-            class="css-v1yklk css-hpvc67"
+            class="emotion-5 emotion-6"
             data-chakra-component="CControlBox"
           >
             <svg
-              class="css-12j51pv css-2adi1i css-0"
+              class="emotion-7 emotion-8 emotion-1"
               data-chakra-component="CIcon"
               role="presentation"
               viewBox="0 0 14 14"
@@ -167,7 +324,7 @@ exports[`should render correctly 1`] = `
             </svg>
           </div>
           <div
-            class="css-1jg3nyw"
+            class="emotion-10"
             data-chakra-component="CBox"
           >
             Three
diff --git a/packages/chakra-ui-core/src/CCircularProgress/tests/__snapshots__/CCircularProgress.test.js.snap b/packages/chakra-ui-core/src/CCircularProgress/tests/__snapshots__/CCircularProgress.test.js.snap
index 151fcfdf..f01c5466 100644
--- a/packages/chakra-ui-core/src/CCircularProgress/tests/__snapshots__/CCircularProgress.test.js.snap
+++ b/packages/chakra-ui-core/src/CCircularProgress/tests/__snapshots__/CCircularProgress.test.js.snap
@@ -2,22 +2,57 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
+  .emotion-0 {
+  width: 1em;
+  height: 1em;
+  font-size: 48px;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.emotion-1 {
+  vertical-align: top;
+  -webkit-transform: rotate3d(0, 0, 1, -90deg);
+  -moz-transform: rotate3d(0, 0, 1, -90deg);
+  -ms-transform: rotate3d(0, 0, 1, -90deg);
+  transform: rotate3d(0, 0, 1, -90deg);
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-2 {
+  color: var(--colors-gray-100);
+  fill: var(--colors-transparent);
+  stroke: currentColor;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+}
+
+.emotion-3 {
+  color: var(--colors-blue-500);
+  fill: var(--colors-transparent);
+  stroke: currentColor;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+}
+
+<div
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="40"
-    class="css-1o3klep"
+    class="emotion-0"
     data-chakra-component="CCircularProgress"
     data-testid="CircularProgress"
     role="progressbar"
   >
     <svg
-      class="css-24ggqe"
+      class="emotion-1"
       data-chakra-component="CBox"
       viewBox="55.55555555555556 55.55555555555556 111.11111111111111 111.11111111111111"
     >
       <circle
-        class="css-1ohz8ms"
+        class="emotion-2"
         cx="111.11111111111111"
         cy="111.11111111111111"
         data-chakra-component="CBox"
@@ -27,7 +62,7 @@ exports[`should render correctly 1`] = `
         stroke-width="11.111111111111112"
       />
       <circle
-        class="css-4toooo"
+        class="emotion-3"
         cx="111.11111111111111"
         cy="111.11111111111111"
         data-chakra-component="CBox"
diff --git a/packages/chakra-ui-core/src/CCloseButton/tests/__snapshots__/CloseButton.test.js.snap b/packages/chakra-ui-core/src/CCloseButton/tests/__snapshots__/CloseButton.test.js.snap
index 56fab701..d5733c26 100644
--- a/packages/chakra-ui-core/src/CCloseButton/tests/__snapshots__/CloseButton.test.js.snap
+++ b/packages/chakra-ui-core/src/CCloseButton/tests/__snapshots__/CloseButton.test.js.snap
@@ -2,14 +2,82 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <button
+  .emotion-0 {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  border-radius: var(--radii-md);
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  border: var(--borders-none);
+  background: var(--colors-blackAlpha-50);
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  background: var(--colors-blackAlpha-100);
+}
+
+.emotion-0:active,
+.emotion-0[data-active] {
+  background: var(--colors-blackAlpha-200);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-1:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-2 {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+<button
     aria-label="Close"
-    class="css-1xs6s6"
+    class="emotion-0"
     data-chakra-component="CCloseButton"
   >
     <svg
       aria-hidden="true"
-      class="css-12j51pv css-xmst1h css-0"
+      class="emotion-1 emotion-2 emotion-3"
       data-chakra-component="CIcon"
       role="presentation"
       viewBox="0 0 24 24"
diff --git a/packages/chakra-ui-core/src/CCode/CCode.js b/packages/chakra-ui-core/src/CCode/CCode.js
index 25f1d017..045e133b 100644
--- a/packages/chakra-ui-core/src/CCode/CCode.js
+++ b/packages/chakra-ui-core/src/CCode/CCode.js
@@ -10,7 +10,7 @@
 import useBadgeStyle from '../CBadge/utils/badge.styles'
 import { useVariantColorWarning, createStyledAttrsMixin } from '../utils'
 
-import { SNA } from '../config/props/props.types'
+import { SNA } from '../config/props.types'
 
 /**
  * CCode component
diff --git a/packages/chakra-ui-core/src/CCode/tests/__snapshots__/CCode.test.js.snap b/packages/chakra-ui-core/src/CCode/tests/__snapshots__/CCode.test.js.snap
index 5aac1e53..9f1be793 100644
--- a/packages/chakra-ui-core/src/CCode/tests/__snapshots__/CCode.test.js.snap
+++ b/packages/chakra-ui-core/src/CCode/tests/__snapshots__/CCode.test.js.snap
@@ -2,8 +2,21 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <code
-    class="css-tjsh3c"
+  .emotion-0 {
+  display: inline-block;
+  font-size: var(--fontSizes-sm);
+  -webkit-padding-start: 0.2em;
+  padding-inline-start: 0.2em;
+  -webkit-padding-end: 0.2em;
+  padding-inline-end: 0.2em;
+  font-family: var(--fonts-mono);
+  border-radius: var(--radii-sm);
+  background-color: var(--colors-gray-100);
+  color: var(--colors-gray-800);
+}
+
+<code
+    class="emotion-0"
     data-chakra-component="CCode"
   >
     content
diff --git a/packages/chakra-ui-core/src/CCollapse/tests/__snapshots__/CCollapse.test.js.snap b/packages/chakra-ui-core/src/CCollapse/tests/__snapshots__/CCollapse.test.js.snap
index 71b504a2..6afe7e41 100644
--- a/packages/chakra-ui-core/src/CCollapse/tests/__snapshots__/CCollapse.test.js.snap
+++ b/packages/chakra-ui-core/src/CCollapse/tests/__snapshots__/CCollapse.test.js.snap
@@ -7,7 +7,7 @@ exports[`should render correctly 1`] = `
     style="overflow: hidden;"
   >
     <div
-      class="css-0"
+      class="emotion-0"
       data-chakra-component="CBox"
     >
       content
diff --git a/packages/chakra-ui-core/src/CControlBox/CControlBox.js b/packages/chakra-ui-core/src/CControlBox/CControlBox.js
index 669c8341..faac869a 100644
--- a/packages/chakra-ui-core/src/CControlBox/CControlBox.js
+++ b/packages/chakra-ui-core/src/CControlBox/CControlBox.js
@@ -15,8 +15,7 @@
  */
 
 import { css } from '@emotion/css'
-import __css from '@styled-system/css'
-import { tx } from '../utils'
+import { composeSystem } from '../utils/styled-system'
 import CBox from '../CBox'
 
 // Default ControlBox props types
@@ -73,23 +72,23 @@ const CControlBox = {
     const invalid = `input[type=${props.type}][aria-invalid=true] + &`
 
     const basePseudoAttrs = (attrs && ({
-      [focus]: tx(attrs._focus),
-      [hover]: tx(attrs._hover),
-      [disabled]: tx(attrs._disabled),
-      [invalid]: tx(attrs._invalid)
+      [focus]: (attrs._focus),
+      [hover]: (attrs._hover),
+      [disabled]: (attrs._disabled),
+      [invalid]: (attrs._invalid)
     })) || {}
 
-    const controlBoxStyleObject = __css({
+    const controlBoxStyleObject = composeSystem({
       ...basePseudoAttrs,
-      [checkedAndDisabled]: tx(props._checkedAndDisabled),
-      [checkedAndFocus]: tx(props._checkedAndFocus),
-      [checkedAndHover]: tx(props._checkedAndHover),
-      '& > *': tx(props._child),
+      [checkedAndDisabled]: (props._checkedAndDisabled),
+      [checkedAndFocus]: (props._checkedAndFocus),
+      [checkedAndHover]: (props._checkedAndHover),
+      '& > *': (props._child),
       [checked]: {
-        ...attrs && tx(attrs._checked),
-        '& > *': tx(props._checkedAndChild)
+        ...attrs && (attrs._checked),
+        '& > *': (props._checkedAndChild)
       }
-    })(theme)
+    }, theme)
 
     const className = css(controlBoxStyleObject)
 
diff --git a/packages/chakra-ui-core/src/CControlBox/CControlBox.stories.js b/packages/chakra-ui-core/src/CControlBox/CControlBox.stories.js
index bd561229..4ae470cd 100644
--- a/packages/chakra-ui-core/src/CControlBox/CControlBox.stories.js
+++ b/packages/chakra-ui-core/src/CControlBox/CControlBox.stories.js
@@ -55,7 +55,7 @@ storiesOf('UI | ControlBox', module)
           }"
           :_hover="{ borderColor: 'gray.300' }"
           :_focus="{ boxShadow: 'outline' }"
-          :_disabled="{ opacity: '40%' }"
+          :_disabled="{ opacity: '0.4' }"
         >
           <CBox w="50%" h="50%" bg="white" rounded="full" />
         </CControlBox>
diff --git a/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js b/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js
index 4ea7a3c4..a05751d0 100644
--- a/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js
+++ b/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js
@@ -25,7 +25,7 @@ const renderComponent = (props) => {
       }"
       :_hover="{ borderColor: 'gray.300' }"
       :_focus="{ boxShadow: 'outline' }"
-      :_disabled="{ opacity: '40%' }"
+      :_disabled="{ opacity: '0.4' }"
     >
       <CBox w="50%" h="50%" bg="white" rounded="full" />
     </CControlBox>
diff --git a/packages/chakra-ui-core/src/CControlBox/tests/__snapshots__/CControlBox.test.js.snap b/packages/chakra-ui-core/src/CControlBox/tests/__snapshots__/CControlBox.test.js.snap
index fa1f1a22..28f85c1b 100644
--- a/packages/chakra-ui-core/src/CControlBox/tests/__snapshots__/CControlBox.test.js.snap
+++ b/packages/chakra-ui-core/src/CControlBox/tests/__snapshots__/CControlBox.test.js.snap
@@ -2,13 +2,120 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <label
-    class="css-11o3u1c"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-color: var(--colors-gray-200);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.emotion-1 {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 120ms;
+  transition: all 120ms;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border: var(--borders-2px);
+  background: var(--colors-white);
+  border-radius: var(--radii-full);
+  border-color: inherit;
+}
+
+.emotion-2[aria-checked=true],
+.emotion-2[data-checked] {
+  background: var(--colors-green-500);
+  border-color: var(--colors-green-500);
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+}
+
+input[type=checkbox]:focus+.emotion-3 {
+  box-shadow: var(--shadows-outline);
+}
+
+input[type=checkbox]:hover:not(:disabled):not(:checked)+.emotion-3 {
+  border-color: var(--colors-gray-300);
+}
+
+input[type=checkbox]:disabled+.emotion-3 {
+  opacity: 0.4;
+}
+
+.emotion-3>* {
+  opacity: 0;
+}
+
+input[type=checkbox]:checked+.emotion-3,
+input[type=checkbox][aria-checked=mixed]+.emotion-3 {
+  background: var(--colors-green-500);
+  border-color: var(--colors-green-500);
+}
+
+input[type=checkbox]:checked+.emotion-3>*,
+input[type=checkbox][aria-checked=mixed]+.emotion-3>* {
+  opacity: 1;
+}
+
+.emotion-4 {
+  width: 50%;
+  height: 50%;
+  background: var(--colors-white);
+  border-radius: var(--radii-full);
+}
+
+<label
+    class="emotion-0"
     data-chakra-component="CBox"
     for="control-radio"
   >
     <input
-      class="css-f8n5zr"
+      class="emotion-1"
       data-chakra-component="CVisuallyHidden"
       data-testid="hiddenControl"
       id="control-radio"
@@ -17,12 +124,12 @@ exports[`should render correctly 1`] = `
      
     <div
       aria-hidden="true"
-      class="css-1i7cmrp css-1y5evcc"
+      class="emotion-2 emotion-3"
       data-chakra-component="CControlBox"
       data-testid="control"
     >
       <div
-        class="css-kcil1n"
+        class="emotion-4"
         data-chakra-component="CBox"
       />
     </div>
diff --git a/packages/chakra-ui-core/src/CDivider/tests/__snapshots__/CDivider.test.js.snap b/packages/chakra-ui-core/src/CDivider/tests/__snapshots__/CDivider.test.js.snap
index 96895731..94b63ad4 100644
--- a/packages/chakra-ui-core/src/CDivider/tests/__snapshots__/CDivider.test.js.snap
+++ b/packages/chakra-ui-core/src/CDivider/tests/__snapshots__/CDivider.test.js.snap
@@ -2,9 +2,21 @@
 
 exports[`should change orientation 1`] = `
 <DocumentFragment>
-  <hr
+  .emotion-0 {
+  border: 0;
+  border-left: 0.0625rem solid;
+  height: auto;
+  -webkit-margin-start: var(--space-2);
+  margin-inline-start: var(--space-2);
+  -webkit-margin-end: var(--space-2);
+  margin-inline-end: var(--space-2);
+  opacity: 0.6;
+  border-color: inherit;
+}
+
+<hr
     aria-orientation="vertical"
-    class="css-117cccq"
+    class="emotion-0"
     data-chakra-component="CDivider"
     data-testid="divider"
   />
@@ -13,9 +25,19 @@ exports[`should change orientation 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <hr
+  .emotion-0 {
+  border: 0;
+  border-bottom: 0.0625rem solid;
+  width: auto;
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+  opacity: 0.6;
+  border-color: inherit;
+}
+
+<hr
     aria-orientation="horizontal"
-    class="css-cgtghy"
+    class="emotion-0"
     data-chakra-component="CDivider"
     data-testid="divider"
   />
diff --git a/packages/chakra-ui-core/src/CDrawer/tests/__snapshots__/CDrawer.test.js.snap b/packages/chakra-ui-core/src/CDrawer/tests/__snapshots__/CDrawer.test.js.snap
index eb0d6d00..b94e5a69 100644
--- a/packages/chakra-ui-core/src/CDrawer/tests/__snapshots__/CDrawer.test.js.snap
+++ b/packages/chakra-ui-core/src/CDrawer/tests/__snapshots__/CDrawer.test.js.snap
@@ -2,17 +2,152 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div>
+  .emotion-0 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  height: var(--sizes-10);
+  line-height: 2.5rem;
+  border-radius: var(--radii-md);
+  border-width: 1px;
+  border-color: inherit;
+  background: var(--colors-white);
+  font-family: var(--fonts-body);
+}
+
+.emotion-0[aria-readonly=true],
+.emotion-0[readonly],
+.emotion-0[data-readonly] {
+  background: var(--colors-transparent);
+  box-shadow: none!important;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  z-index: 1;
+  border-color: #7db1ff;
+  box-shadow: 0 0 0 1px #7db1ff;
+}
+
+.emotion-0[aria-invalid=true],
+.emotion-0[data-invalid] {
+  border-color: #e66673;
+  box-shadow: 0 0 0 1px #e66673;
+}
+
+.emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-1:focus,
+.emotion-1[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-1:hover,
+.emotion-1[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-1:active,
+.emotion-1[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-1[disabled],
+.emotion-1[aria-disabled=true],
+.emotion-1[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<div>
     <div>
       <input
-        class="css-18expoa"
+        class="emotion-0"
         data-chakra-component="CInput"
         data-testid="inputOutsideDrawer"
         placeholder="Type here..."
       />
        
       <button
-        class="css-1bmeqe7"
+        class="emotion-1"
         data-chakra-component="CButton"
         data-testid="buttonOutside"
         tabindex="0"
@@ -24,7 +159,367 @@ exports[`should render correctly 1`] = `
       <!---->
     </div>
   </div>
-  <span
+  .emotion-0 {
+  position: fixed;
+  background: rgba( 0, 0, 0, 0.4);
+  left: var(--space-0);
+  top: var(--space-0);
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--zIndices-overlay);
+}
+
+.emotion-1 {
+  position: fixed;
+  left: var(--space-0);
+  top: var(--space-0);
+  width: 100%;
+  height: 100%;
+  z-index: var(--zIndices-modal);
+}
+
+.emotion-2 {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  max-width: var(--sizes-md);
+  width: 100%;
+  position: fixed;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  z-index: var(--zIndices-modal);
+  font-family: var(--fonts-body);
+  background: var(--colors-white);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.1),0 3px 6px 0 rgba(0, 0, 0, .07);
+  right: var(--space-0);
+  top: var(--space-0);
+  height: 100vh;
+}
+
+.emotion-3 {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  position: fixed;
+  top: 8px;
+  right: 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  border-radius: var(--radii-md);
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  border: var(--borders-none);
+  background: var(--colors-blackAlpha-50);
+  z-index: 1;
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover] {
+  background: var(--colors-blackAlpha-100);
+}
+
+.emotion-3:active,
+.emotion-3[data-active] {
+  background: var(--colors-blackAlpha-200);
+}
+
+.emotion-3[disabled],
+.emotion-3[aria-disabled=true],
+.emotion-3[data-disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-3:focus,
+.emotion-3[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-4:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-7 {
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+  position: relative;
+  font-size: var(--fontSizes-xl);
+  font-weight: var(--fontWeights-semibold);
+}
+
+.emotion-8 {
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-9 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  height: var(--sizes-10);
+  line-height: 2.5rem;
+  border-radius: var(--radii-md);
+  border-width: 1px;
+  border-color: inherit;
+  background: var(--colors-white);
+  font-family: var(--fonts-body);
+}
+
+.emotion-9[aria-readonly=true],
+.emotion-9[readonly],
+.emotion-9[data-readonly] {
+  background: var(--colors-transparent);
+  box-shadow: none!important;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+.emotion-9:hover,
+.emotion-9[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-9[disabled],
+.emotion-9[aria-disabled=true],
+.emotion-9[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-9:focus,
+.emotion-9[data-focus] {
+  z-index: 1;
+  border-color: #7db1ff;
+  box-shadow: 0 0 0 1px #7db1ff;
+}
+
+.emotion-9[aria-invalid=true],
+.emotion-9[data-invalid] {
+  border-color: #e66673;
+  box-shadow: 0 0 0 1px #e66673;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-11 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  border: var(--borders-1px);
+  border-color: var(--colors-gray-200);
+  color: var(--colors-gray-400);
+  background: var(--colors-transparent);
+  margin-right: var(--space-3);
+}
+
+.emotion-11:focus,
+.emotion-11[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-11:hover,
+.emotion-11[data-hover] {
+  background: var(--colors-gray-50);
+}
+
+.emotion-11:active,
+.emotion-11[data-active] {
+  background: var(--colors-gray-100);
+}
+
+.emotion-11[disabled],
+.emotion-11[aria-disabled=true],
+.emotion-11[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-12 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+  color: blue;
+}
+
+.emotion-12:focus,
+.emotion-12[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-12:hover,
+.emotion-12[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-12:active,
+.emotion-12[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-12[disabled],
+.emotion-12[aria-disabled=true],
+.emotion-12[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<span
     id="modal-portal-1"
   >
     <div
@@ -34,18 +529,18 @@ exports[`should render correctly 1`] = `
         style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"
       >
         <div
-          class="css-1a29t1v"
+          class="emotion-0"
           data-chakra-component="CModalOverlay"
         />
         <div
-          class="css-556rku"
+          class="emotion-1"
           data-chakra-component="CBox"
         >
           <section
             aria-describedby="drawer-1-body"
             aria-labelledby="drawer-1-header"
             aria-modal="true"
-            class="css-rwe4f7"
+            class="emotion-2"
             data-chakra-component="CDrawerContent"
             data-testid="overlay"
             id="drawer-1"
@@ -54,13 +549,13 @@ exports[`should render correctly 1`] = `
           >
             <button
               aria-label="Close"
-              class="css-1p5nos8"
+              class="emotion-3"
               data-chakra-component="CDrawerCloseButton"
               data-testid="close-btn"
             >
               <svg
                 aria-hidden="true"
-                class="css-12j51pv css-xmst1h css-0"
+                class="emotion-4 emotion-5 emotion-6"
                 data-chakra-component="CIcon"
                 role="presentation"
                 viewBox="0 0 24 24"
@@ -75,7 +570,7 @@ exports[`should render correctly 1`] = `
             </button>
              
             <header
-              class="css-w7idnj"
+              class="emotion-7"
               data-chakra-component="CModalHeader"
               id="drawer-1-header"
             >
@@ -83,12 +578,12 @@ exports[`should render correctly 1`] = `
             </header>
              
             <div
-              class="css-5m10fw"
+              class="emotion-8"
               data-chakra-component="CModalBody"
               id="drawer-1-body"
             >
               <input
-                class="css-18expoa"
+                class="emotion-9"
                 data-chakra-component="CInput"
                 data-testid="inputInsideDrawer"
                 placeholder="Type here..."
@@ -96,11 +591,11 @@ exports[`should render correctly 1`] = `
             </div>
              
             <footer
-              class="css-plnu2w"
+              class="emotion-10"
               data-chakra-component="CModalFooter"
             >
               <button
-                class="css-14m1qkx"
+                class="emotion-11"
                 data-chakra-component="CButton"
                 tabindex="0"
                 type="button"
@@ -109,7 +604,7 @@ exports[`should render correctly 1`] = `
               </button>
                
               <button
-                class="css-13x9q7f"
+                class="emotion-12"
                 data-chakra-component="CButton"
                 tabindex="0"
                 type="button"
diff --git a/packages/chakra-ui-core/src/CEditable/tests/__snapshots__/CEditable.test.js.snap b/packages/chakra-ui-core/src/CEditable/tests/__snapshots__/CEditable.test.js.snap
index 25c84cdb..1f851b03 100644
--- a/packages/chakra-ui-core/src/CEditable/tests/__snapshots__/CEditable.test.js.snap
+++ b/packages/chakra-ui-core/src/CEditable/tests/__snapshots__/CEditable.test.js.snap
@@ -2,15 +2,57 @@
 
 exports[`should render correctly - input 1`] = `
 <DocumentFragment>
-  <div>
+  .emotion-1 {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-size: inherit;
+  font-weight: inherit;
+  text-align: inherit;
+  background: var(--colors-transparent);
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  border-radius: var(--radii-md);
+  -webkit-padding-start: 3px;
+  padding-inline-start: 3px;
+  -webkit-padding-end: 3px;
+  padding-inline-end: 3px;
+  -webkit-margin-start: -3px;
+  margin-inline-start: -3px;
+  -webkit-margin-end: -3px;
+  margin-inline-end: -3px;
+  width: var(--sizes-full);
+}
+
+.emotion-1:focus,
+.emotion-1[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.emotion-1::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.emotion-1:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.emotion-1::placeholder {
+  opacity: 0.6;
+}
+
+<div>
     <div
-      class="css-0"
+      class="emotion-0"
       data-chakra-component="CEditable"
     >
       <!---->
        
       <input
-        class="css-gfj8et"
+        class="emotion-1"
         data-chakra-component="CEditableInput"
         data-testid="input"
         id="editable-1"
@@ -24,13 +66,33 @@ exports[`should render correctly - input 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div>
+  .emotion-1 {
+  font-size: inherit;
+  font-weight: inherit;
+  text-align: inherit;
+  background: var(--colors-transparent);
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  border-radius: var(--radii-md);
+  -webkit-padding-start: 3px;
+  padding-inline-start: 3px;
+  -webkit-padding-end: 3px;
+  padding-inline-end: 3px;
+  -webkit-margin-start: -3px;
+  margin-inline-start: -3px;
+  -webkit-margin-end: -3px;
+  margin-inline-end: -3px;
+  cursor: text;
+  display: inline-block;
+}
+
+<div>
     <div
-      class="css-0"
+      class="emotion-0"
       data-chakra-component="CEditable"
     >
       <span
-        class="css-87ebly"
+        class="emotion-1"
         data-chakra-component="CEditablePreview"
         data-testid="preview"
         tabindex="0"
diff --git a/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap b/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap
index e146ced5..39a84242 100644
--- a/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap
+++ b/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap
@@ -2,8 +2,26 @@
 
 exports[`CFlex should change styles 1`] = `
 <DocumentFragment>
-  <div
-    class="css-u6v8er"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CFlex"
     data-testid="flex"
   >
@@ -14,8 +32,15 @@ exports[`CFlex should change styles 1`] = `
 
 exports[`CFlex should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-k008qs"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CFlex"
     data-testid="flex"
   >
diff --git a/packages/chakra-ui-core/src/CFlex/utils/flex.props.js b/packages/chakra-ui-core/src/CFlex/utils/flex.props.js
index e423f14e..bda1f4d5 100644
--- a/packages/chakra-ui-core/src/CFlex/utils/flex.props.js
+++ b/packages/chakra-ui-core/src/CFlex/utils/flex.props.js
@@ -1,4 +1,4 @@
-import { SNA } from '../../config/props/props.types'
+import { SNA } from '../../config/props.types'
 
 const flexProps = {
   as: {
diff --git a/packages/chakra-ui-core/src/CFormControl/tests/__snapshots__/CFormControl.test.js.snap b/packages/chakra-ui-core/src/CFormControl/tests/__snapshots__/CFormControl.test.js.snap
index 51615ee6..b01a96bf 100644
--- a/packages/chakra-ui-core/src/CFormControl/tests/__snapshots__/CFormControl.test.js.snap
+++ b/packages/chakra-ui-core/src/CFormControl/tests/__snapshots__/CFormControl.test.js.snap
@@ -2,13 +2,94 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-0"
+  .emotion-1 {
+  font-size: var(--fontSizes-md);
+  padding-right: 12px;
+  padding-bottom: 4px;
+  opacity: 1;
+  font-weight: var(--fontWeights-medium);
+  font-family: var(--fonts-body);
+  text-align: left;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.emotion-2 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  height: var(--sizes-10);
+  line-height: 2.5rem;
+  border-radius: var(--radii-md);
+  border-width: 1px;
+  border-color: inherit;
+  background: var(--colors-white);
+  font-family: var(--fonts-body);
+}
+
+.emotion-2[aria-readonly=true],
+.emotion-2[readonly],
+.emotion-2[data-readonly] {
+  background: var(--colors-transparent);
+  box-shadow: none!important;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  z-index: 1;
+  border-color: #7db1ff;
+  box-shadow: 0 0 0 1px #7db1ff;
+}
+
+.emotion-2[aria-invalid=true],
+.emotion-2[data-invalid] {
+  border-color: #e66673;
+  box-shadow: 0 0 0 1px #e66673;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CFormControl"
     role="group"
   >
     <label
-      class="css-c48a2"
+      class="emotion-1"
       data-chakra-component="CFormLabel"
       for="fname"
     >
@@ -16,7 +97,7 @@ exports[`should render correctly 1`] = `
     </label>
      
     <input
-      class="css-18expoa"
+      class="emotion-2"
       data-chakra-component="CInput"
       id="fname"
       placeholder="First name"
diff --git a/packages/chakra-ui-core/src/CGrid/CGrid.js b/packages/chakra-ui-core/src/CGrid/CGrid.js
index be26534d..fc17c42d 100644
--- a/packages/chakra-ui-core/src/CGrid/CGrid.js
+++ b/packages/chakra-ui-core/src/CGrid/CGrid.js
@@ -10,7 +10,7 @@
  */
 
 import { createStyledAttrsMixin } from '../utils'
-import { SNA, StringArray } from '../config/props/props.types'
+import { SNA, StringArray } from '../config/props.types'
 
 /**
  * @description Map "span" values to accommodate breakpoint values
diff --git a/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap b/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap
index c14e6ff7..690dafc3 100644
--- a/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap
+++ b/packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap
@@ -2,8 +2,15 @@
 
 exports[`should change gap 1`] = `
 <DocumentFragment>
-  <div
-    class="css-12kxrxg"
+  .emotion-0 {
+  display: grid;
+  grid-gap: var(--space-6);
+  grid-template-columns: repeat(5, 1fr);
+  width: 600px;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CGrid"
   >
     Grid Me
@@ -13,12 +20,24 @@ exports[`should change gap 1`] = `
 
 exports[`should offset columns 1`] = `
 <DocumentFragment>
-  <div
-    class="css-12kxrxg"
+  .emotion-0 {
+  display: grid;
+  grid-gap: var(--space-6);
+  grid-template-columns: repeat(5, 1fr);
+  width: 600px;
+}
+
+.emotion-1 {
+  grid-column-start: 4;
+  grid-column-end: 6;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CGrid"
   >
     <div
-      class="css-1i8ejg0"
+      class="emotion-1"
       data-chakra-component="CGridItem"
     >
       I'm in a grid item
@@ -29,8 +48,12 @@ exports[`should offset columns 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-lgj0h8"
+  .emotion-0 {
+  display: grid;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CGrid"
   >
     Grid Me
@@ -40,12 +63,23 @@ exports[`should render correctly 1`] = `
 
 exports[`should span columns 1`] = `
 <DocumentFragment>
-  <div
-    class="css-12kxrxg"
+  .emotion-0 {
+  display: grid;
+  grid-gap: var(--space-6);
+  grid-template-columns: repeat(5, 1fr);
+  width: 600px;
+}
+
+.emotion-1 {
+  grid-column: span 2/span 2;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CGrid"
   >
     <div
-      class="css-tuh9u2"
+      class="emotion-1"
       data-chakra-component="CGridItem"
     >
       I'm in a grid item
diff --git a/packages/chakra-ui-core/src/CHeading/tests/__snapshots__/CHeading.test.js.snap b/packages/chakra-ui-core/src/CHeading/tests/__snapshots__/CHeading.test.js.snap
index b21d008b..b5ef0bb7 100644
--- a/packages/chakra-ui-core/src/CHeading/tests/__snapshots__/CHeading.test.js.snap
+++ b/packages/chakra-ui-core/src/CHeading/tests/__snapshots__/CHeading.test.js.snap
@@ -2,8 +2,21 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <h2
-    class="css-1lq7e61"
+  .emotion-0 {
+  font-size: var(--fontSizes-3xl);
+  line-height: var(--lineHeights-shorter);
+  font-weight: var(--fontWeights-bold);
+  font-family: var(--fonts-heading);
+}
+
+@media screen and (min-width: 62em) {
+  .emotion-0 {
+    font-size: var(--fontSizes-4xl);
+  }
+}
+
+<h2
+    class="emotion-0"
     data-chakra-component="CHeading"
   >
     Header
diff --git a/packages/chakra-ui-core/src/CIcon/tests/__snapshots__/CIcon.test.js.snap b/packages/chakra-ui-core/src/CIcon/tests/__snapshots__/CIcon.test.js.snap
index d6fc553e..12485e55 100644
--- a/packages/chakra-ui-core/src/CIcon/tests/__snapshots__/CIcon.test.js.snap
+++ b/packages/chakra-ui-core/src/CIcon/tests/__snapshots__/CIcon.test.js.snap
@@ -2,8 +2,27 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <svg
-    class="css-12j51pv css-3vopgu css-0"
+  .emotion-0 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-0:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-1 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+<svg
+    class="emotion-0 emotion-1 emotion-2"
     data-chakra-component="CIcon"
     role="presentation"
     viewBox="0 0 24 24"
diff --git a/packages/chakra-ui-core/src/CIconButton/tests/__snapshots__/CIconButton.test.js.snap b/packages/chakra-ui-core/src/CIconButton/tests/__snapshots__/CIconButton.test.js.snap
index 3df3e195..e785bab2 100644
--- a/packages/chakra-ui-core/src/CIconButton/tests/__snapshots__/CIconButton.test.js.snap
+++ b/packages/chakra-ui-core/src/CIconButton/tests/__snapshots__/CIconButton.test.js.snap
@@ -2,9 +2,129 @@
 
 exports[`should change icon 1`] = `
 <DocumentFragment>
-  <button
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-blue-400);
+  color: var(--colors-white);
+  padding: var(--space-0);
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  background: var(--colors-blue-500);
+}
+
+.emotion-0:active,
+.emotion-0[data-active] {
+  background: var(--colors-blue-600);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-1:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-2 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  color: currentColor;
+  margin-bottom: 2px;
+}
+
+<button
     aria-label="Phone"
-    class="css-j4xjee"
+    class="emotion-0"
     data-chakra-component="CIconButton"
     data-testid="btn"
     tabindex="0"
@@ -12,7 +132,7 @@ exports[`should change icon 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="css-12j51pv css-3vopgu css-kzfxtu"
+      class="emotion-1 emotion-2 emotion-3"
       data-chakra-component="CIcon"
       role="presentation"
       viewBox="0 0 24 24"
@@ -32,9 +152,129 @@ exports[`should change icon 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <button
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-blue-400);
+  color: var(--colors-white);
+  padding: var(--space-0);
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  background: var(--colors-blue-500);
+}
+
+.emotion-0:active,
+.emotion-0[data-active] {
+  background: var(--colors-blue-600);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-1:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-2 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  color: currentColor;
+  margin-bottom: 2px;
+}
+
+<button
     aria-label="Phone"
-    class="css-j4xjee"
+    class="emotion-0"
     data-chakra-component="CIconButton"
     data-testid="btn"
     tabindex="0"
@@ -42,7 +282,7 @@ exports[`should render correctly 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="css-12j51pv css-3vopgu css-kzfxtu"
+      class="emotion-1 emotion-2 emotion-3"
       data-chakra-component="CIcon"
       role="presentation"
       viewBox="0 0 14 14"
diff --git a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
index f3887799..54a808cb 100644
--- a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
+++ b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
@@ -4,7 +4,7 @@ exports[`"srcset" should work and be prioritized over "src" if provided to CImag
 <DocumentFragment>
   <img
     alt="My Image Description"
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CImage"
     src="LOAD_SUCCESS_SRC"
     srcset="LOAD_SUCCESS_SRC 400w"
@@ -16,7 +16,7 @@ exports[`should render correctly 1`] = `
 <DocumentFragment>
   <img
     alt="Mesut Koca"
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CImage"
     data-testid="avatar"
     src="LOAD_SUCCESS_SRC"
@@ -28,7 +28,7 @@ exports[`should use src if srcset provided is undefined 1`] = `
 <DocumentFragment>
   <img
     alt="My Image Description"
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CImage"
     src="LOAD_SUCCESS_SRC"
     srcset="LOAD_FAILURE_SRC"
diff --git a/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap b/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
index ffb8b5dd..aaed2d33 100644
--- a/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
+++ b/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
@@ -2,8 +2,77 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <input
-    class="css-18expoa"
+  .emotion-0 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  height: var(--sizes-10);
+  line-height: 2.5rem;
+  border-radius: var(--radii-md);
+  border-width: 1px;
+  border-color: inherit;
+  background: var(--colors-white);
+  font-family: var(--fonts-body);
+}
+
+.emotion-0[aria-readonly=true],
+.emotion-0[readonly],
+.emotion-0[data-readonly] {
+  background: var(--colors-transparent);
+  box-shadow: none!important;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  z-index: 1;
+  border-color: #7db1ff;
+  box-shadow: 0 0 0 1px #7db1ff;
+}
+
+.emotion-0[aria-invalid=true],
+.emotion-0[data-invalid] {
+  border-color: #e66673;
+  box-shadow: 0 0 0 1px #e66673;
+}
+
+<input
+    class="emotion-0"
     data-chakra-component="CInput"
     data-testid="input"
     placeholder="input placeholder"
diff --git a/packages/chakra-ui-core/src/CInput/utils/input.props.js b/packages/chakra-ui-core/src/CInput/utils/input.props.js
index 3cce425e..5ac6fa9a 100644
--- a/packages/chakra-ui-core/src/CInput/utils/input.props.js
+++ b/packages/chakra-ui-core/src/CInput/utils/input.props.js
@@ -1,4 +1,4 @@
-import { SNA, StringArray } from '../../config/props/props.types'
+import { SNA, StringArray } from '../../config/props.types'
 
 export const inputProps = {
   size: {
diff --git a/packages/chakra-ui-core/src/CInputGroup/CInputGroup.js b/packages/chakra-ui-core/src/CInputGroup/CInputGroup.js
index 874bd18f..56f94b0b 100644
--- a/packages/chakra-ui-core/src/CInputGroup/CInputGroup.js
+++ b/packages/chakra-ui-core/src/CInputGroup/CInputGroup.js
@@ -7,7 +7,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CInputGroup/CInputGroup.js
  */
 
-import { StringArray } from '../config/props/props.types'
+import { StringArray } from '../config/props.types'
 import { inputSizes } from '../CInput/utils/input.styles'
 import { cloneVNode, kebabify } from '../utils'
 
diff --git a/packages/chakra-ui-core/src/CInputGroup/tests/__snapshots__/CInputGroup.test.js.snap b/packages/chakra-ui-core/src/CInputGroup/tests/__snapshots__/CInputGroup.test.js.snap
index 85333bb6..90574de1 100644
--- a/packages/chakra-ui-core/src/CInputGroup/tests/__snapshots__/CInputGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CInputGroup/tests/__snapshots__/CInputGroup.test.js.snap
@@ -2,12 +2,159 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-15frdhg"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  z-index: 0;
+}
+
+.emotion-1 {
+  color: var(--colors-gray-300);
+  font-size: var(--fontSizes-md);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: absolute;
+  width: var(--sizes-10);
+  height: var(--sizes-10);
+  top: var(--space-0);
+  z-index: 2;
+  left: var(--space-0);
+}
+
+.emotion-2 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  height: var(--sizes-10);
+  line-height: 2.5rem;
+  border-radius: var(--radii-md);
+  border-width: 1px;
+  border-color: inherit;
+  background: var(--colors-white);
+  font-family: var(--fonts-body);
+  padding-left: 2.5rem;
+}
+
+.emotion-2[aria-readonly=true],
+.emotion-2[readonly],
+.emotion-2[data-readonly] {
+  background: var(--colors-transparent);
+  box-shadow: none!important;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  z-index: 1;
+  border-color: #7db1ff;
+  box-shadow: 0 0 0 1px #7db1ff;
+}
+
+.emotion-2[aria-invalid=true],
+.emotion-2[data-invalid] {
+  border-color: #e66673;
+  box-shadow: 0 0 0 1px #e66673;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: absolute;
+  width: var(--sizes-10);
+  height: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  top: var(--space-0);
+  z-index: 2;
+  right: var(--space-0);
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-4:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-6 {
+  color: var(--colors-green-500);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CInputGroup"
   >
     <div
-      class="css-rbouvx"
+      class="emotion-1"
       color="gray.300"
       data-chakra-component="CInputLeftElement"
       fontsize="1.2em"
@@ -15,16 +162,16 @@ exports[`should render correctly 1`] = `
       ¥
     </div>
     <input
-      class="css-lr9hjy"
+      class="emotion-2"
       data-chakra-component="CInput"
       placeholder="Enter amount"
     />
     <div
-      class="css-wqp70x"
+      class="emotion-3"
       data-chakra-component="CInputRightElement"
     >
       <svg
-        class="css-12j51pv css-3vopgu css-7w9hf9"
+        class="emotion-4 emotion-5 emotion-6"
         data-chakra-component="CIcon"
         role="presentation"
         viewBox="0 0 14 14"
diff --git a/packages/chakra-ui-core/src/CLink/CLink.js b/packages/chakra-ui-core/src/CLink/CLink.js
index a35c5758..28652c81 100644
--- a/packages/chakra-ui-core/src/CLink/CLink.js
+++ b/packages/chakra-ui-core/src/CLink/CLink.js
@@ -7,7 +7,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CLink/CLink.js
  */
 import { kebabify, createStyledAttrsMixin } from '../utils'
-import { SNA } from '../config/props/props.types'
+import { SNA } from '../config/props.types'
 
 /**
  * CLink component
diff --git a/packages/chakra-ui-core/src/CList/CList.js b/packages/chakra-ui-core/src/CList/CList.js
index ff6f3436..6a2f7df7 100644
--- a/packages/chakra-ui-core/src/CList/CList.js
+++ b/packages/chakra-ui-core/src/CList/CList.js
@@ -8,7 +8,7 @@
  */
 
 import { cleanChildren, isDef, cloneVNodeElement, createStyledAttrsMixin } from '../utils'
-import { SNA } from '../config/props/props.types'
+import { SNA } from '../config/props.types'
 
 import CIcon from '../CIcon'
 
diff --git a/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap b/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
index 5bc9ded4..a04ac749 100644
--- a/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
+++ b/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
@@ -2,16 +2,49 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <ul
-    class="css-19ndbdu"
+  .emotion-0 {
+  list-style-type: none;
+  list-style-position: inside;
+}
+
+.emotion-1 {
+  margin-bottom: var(--space-3);
+}
+
+.emotion-2 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-2:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-3 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-4 {
+  margin-right: var(--space-2);
+  color: var(--colors-green-500);
+}
+
+<ul
+    class="emotion-0"
     data-chakra-component="CList"
   >
     <li
-      class="css-82qlwu"
+      class="emotion-1"
       data-chakra-component="CListItem"
     >
       <svg
-        class="css-12j51pv css-3vopgu css-154al8w"
+        class="emotion-2 emotion-3 emotion-4"
         data-chakra-component="CListIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -27,11 +60,11 @@ exports[`should render correctly 1`] = `
       
     </li>
     <li
-      class="css-0"
+      class="emotion-5"
       data-chakra-component="CListItem"
     >
       <svg
-        class="css-12j51pv css-3vopgu css-154al8w"
+        class="emotion-2 emotion-3 emotion-4"
         data-chakra-component="CListIcon"
         role="presentation"
         viewBox="0 0 24 24"
diff --git a/packages/chakra-ui-core/src/CMenu/CMenu.stories.js b/packages/chakra-ui-core/src/CMenu/CMenu.stories.js
index 77012e76..d1041c52 100644
--- a/packages/chakra-ui-core/src/CMenu/CMenu.stories.js
+++ b/packages/chakra-ui-core/src/CMenu/CMenu.stories.js
@@ -1,7 +1,5 @@
 import { storiesOf } from '@storybook/vue'
-import { CMenu, CFade, CMenuGroup, CMenuButton, CMenuList, CMenuOptionGroup, CImage, CMenuItemOption, CMenuItem, CMenuDivider, CIcon, defaultTheme } from '..'
-
-console.log({ defaultTheme })
+import { CMenu, CFade, CMenuGroup, CMenuButton, CMenuList, CMenuOptionGroup, CImage, CMenuItemOption, CMenuItem, CMenuDivider, CIcon } from '..'
 
 storiesOf('UI | Menu', module)
   .add('With internal state', () => ({
diff --git a/packages/chakra-ui-core/src/CModal/CModal.js b/packages/chakra-ui-core/src/CModal/CModal.js
index a995f2d9..c65d6c73 100644
--- a/packages/chakra-ui-core/src/CModal/CModal.js
+++ b/packages/chakra-ui-core/src/CModal/CModal.js
@@ -270,7 +270,7 @@ const CModalOverlay = {
       ...rest,
       attrs: {
         pos: 'fixed',
-        bg: 'rgba(0,0,0,0.4)',
+        bg: 'rgba( 0, 0, 0, 0.4)',
         left: '0',
         top: '0',
         w: '100vw',
@@ -307,7 +307,7 @@ const CModalContent = {
       colorModeStyles: {
         light: {
           bg: 'white',
-          shadow: '0 7px 14px 0 rgba(0,0,0, 0.1), 0 3px 6px 0 rgba(0, 0, 0, .07)'
+          shadow: '0 7px 14px 0 rgba(0, 0, 0, 0.1), 0 3px 6px 0 rgba(0, 0, 0, .07)'
         },
         dark: {
           bg: 'gray.700',
diff --git a/packages/chakra-ui-core/src/CModal/tests/__snapshots__/CModal.test.js.snap b/packages/chakra-ui-core/src/CModal/tests/__snapshots__/CModal.test.js.snap
index b701aa19..9ef7605f 100644
--- a/packages/chakra-ui-core/src/CModal/tests/__snapshots__/CModal.test.js.snap
+++ b/packages/chakra-ui-core/src/CModal/tests/__snapshots__/CModal.test.js.snap
@@ -2,17 +2,152 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div>
+  .emotion-0 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  height: var(--sizes-10);
+  line-height: 2.5rem;
+  border-radius: var(--radii-md);
+  border-width: 1px;
+  border-color: inherit;
+  background: var(--colors-white);
+  font-family: var(--fonts-body);
+}
+
+.emotion-0[aria-readonly=true],
+.emotion-0[readonly],
+.emotion-0[data-readonly] {
+  background: var(--colors-transparent);
+  box-shadow: none!important;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+.emotion-0:hover,
+.emotion-0[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-0[disabled],
+.emotion-0[aria-disabled=true],
+.emotion-0[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-0:focus,
+.emotion-0[data-focus] {
+  z-index: 1;
+  border-color: #7db1ff;
+  box-shadow: 0 0 0 1px #7db1ff;
+}
+
+.emotion-0[aria-invalid=true],
+.emotion-0[data-invalid] {
+  border-color: #e66673;
+  box-shadow: 0 0 0 1px #e66673;
+}
+
+.emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-1:focus,
+.emotion-1[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-1:hover,
+.emotion-1[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-1:active,
+.emotion-1[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-1[disabled],
+.emotion-1[aria-disabled=true],
+.emotion-1[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<div>
     <div>
       <input
-        class="css-18expoa"
+        class="emotion-0"
         data-chakra-component="CInput"
         data-testid="inputOutsideModal"
         placeholder="Type here..."
       />
        
       <button
-        class="css-1bmeqe7"
+        class="emotion-1"
         data-chakra-component="CButton"
         data-testid="buttonOutside"
         tabindex="0"
@@ -24,7 +159,372 @@ exports[`should render correctly 1`] = `
       <!---->
     </div>
   </div>
-  <span
+  .emotion-0 {
+  position: fixed;
+  background: rgba( 0, 0, 0, 0.4);
+  left: var(--space-0);
+  top: var(--space-0);
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--zIndices-overlay);
+}
+
+.emotion-1 {
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: fixed;
+  left: var(--space-0);
+  top: var(--space-0);
+  width: 100%;
+  height: 100%;
+  z-index: var(--zIndices-modal);
+}
+
+.emotion-2 {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  max-width: var(--sizes-md);
+  width: 100%;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  z-index: var(--zIndices-modal);
+  font-family: var(--fonts-body);
+  background: var(--colors-white);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.1),0 3px 6px 0 rgba(0, 0, 0, .07);
+  top: var(--space-0);
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: auto;
+  margin-inline-end: auto;
+  margin-top: 3.75rem;
+  margin-bottom: 3.75rem;
+}
+
+.emotion-3 {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  border-radius: var(--radii-md);
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  border: var(--borders-none);
+  background: var(--colors-blackAlpha-50);
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover] {
+  background: var(--colors-blackAlpha-100);
+}
+
+.emotion-3:active,
+.emotion-3[data-active] {
+  background: var(--colors-blackAlpha-200);
+}
+
+.emotion-3[disabled],
+.emotion-3[aria-disabled=true],
+.emotion-3[data-disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-3:focus,
+.emotion-3[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-4:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-7 {
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+  position: relative;
+  font-size: var(--fontSizes-xl);
+  font-weight: var(--fontWeights-semibold);
+}
+
+.emotion-8 {
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-9 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  height: var(--sizes-10);
+  line-height: 2.5rem;
+  border-radius: var(--radii-md);
+  border-width: 1px;
+  border-color: inherit;
+  background: var(--colors-white);
+  font-family: var(--fonts-body);
+}
+
+.emotion-9[aria-readonly=true],
+.emotion-9[readonly],
+.emotion-9[data-readonly] {
+  background: var(--colors-transparent);
+  box-shadow: none!important;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+.emotion-9:hover,
+.emotion-9[data-hover] {
+  border-color: var(--colors-gray-300);
+}
+
+.emotion-9[disabled],
+.emotion-9[aria-disabled=true],
+.emotion-9[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.emotion-9:focus,
+.emotion-9[data-focus] {
+  z-index: 1;
+  border-color: #7db1ff;
+  box-shadow: 0 0 0 1px #7db1ff;
+}
+
+.emotion-9[aria-invalid=true],
+.emotion-9[data-invalid] {
+  border-color: #e66673;
+  box-shadow: 0 0 0 1px #e66673;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-padding-start: var(--space-6);
+  padding-inline-start: var(--space-6);
+  -webkit-padding-end: var(--space-6);
+  padding-inline-end: var(--space-6);
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.emotion-11 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  border: var(--borders-1px);
+  border-color: var(--colors-gray-200);
+  color: var(--colors-gray-400);
+  background: var(--colors-transparent);
+  margin-right: var(--space-3);
+}
+
+.emotion-11:focus,
+.emotion-11[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-11:hover,
+.emotion-11[data-hover] {
+  background: var(--colors-gray-50);
+}
+
+.emotion-11:active,
+.emotion-11[data-active] {
+  background: var(--colors-gray-100);
+}
+
+.emotion-11[disabled],
+.emotion-11[aria-disabled=true],
+.emotion-11[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-12 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+  color: blue;
+}
+
+.emotion-12:focus,
+.emotion-12[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-12:hover,
+.emotion-12[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-12:active,
+.emotion-12[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-12[disabled],
+.emotion-12[aria-disabled=true],
+.emotion-12[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<span
     id="modal-portal-1"
   >
     <div
@@ -34,18 +534,18 @@ exports[`should render correctly 1`] = `
         style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"
       >
         <div
-          class="css-1a29t1v"
+          class="emotion-0"
           data-chakra-component="CModalOverlay"
         />
         <div
-          class="css-16gt2qg"
+          class="emotion-1"
           data-chakra-component="CBox"
         >
           <section
             aria-describedby="modal-1-body"
             aria-labelledby="modal-1-header"
             aria-modal="true"
-            class="css-1uxbpb7"
+            class="emotion-2"
             data-chakra-component="CModalContent"
             data-testid="overlay"
             id="modal-1"
@@ -54,13 +554,13 @@ exports[`should render correctly 1`] = `
           >
             <button
               aria-label="Close"
-              class="css-w4n9ue"
+              class="emotion-3"
               data-chakra-component="CModalCloseButton"
               data-testid="close-btn"
             >
               <svg
                 aria-hidden="true"
-                class="css-12j51pv css-xmst1h css-0"
+                class="emotion-4 emotion-5 emotion-6"
                 data-chakra-component="CIcon"
                 role="presentation"
                 viewBox="0 0 24 24"
@@ -75,7 +575,7 @@ exports[`should render correctly 1`] = `
             </button>
              
             <header
-              class="css-w7idnj"
+              class="emotion-7"
               data-chakra-component="CModalHeader"
               id="modal-1-header"
             >
@@ -83,12 +583,12 @@ exports[`should render correctly 1`] = `
             </header>
              
             <div
-              class="css-5m10fw"
+              class="emotion-8"
               data-chakra-component="CModalBody"
               id="modal-1-body"
             >
               <input
-                class="css-18expoa"
+                class="emotion-9"
                 data-chakra-component="CInput"
                 data-testid="inputInsideModal"
                 placeholder="Type here..."
@@ -96,11 +596,11 @@ exports[`should render correctly 1`] = `
             </div>
              
             <footer
-              class="css-plnu2w"
+              class="emotion-10"
               data-chakra-component="CModalFooter"
             >
               <button
-                class="css-14m1qkx"
+                class="emotion-11"
                 data-chakra-component="CButton"
                 tabindex="0"
                 type="button"
@@ -109,7 +609,7 @@ exports[`should render correctly 1`] = `
               </button>
                
               <button
-                class="css-13x9q7f"
+                class="emotion-12"
                 data-chakra-component="CButton"
                 tabindex="0"
                 type="button"
diff --git a/packages/chakra-ui-core/src/CModal/utils/modal.props.js b/packages/chakra-ui-core/src/CModal/utils/modal.props.js
index 7b8f158a..8945182a 100644
--- a/packages/chakra-ui-core/src/CModal/utils/modal.props.js
+++ b/packages/chakra-ui-core/src/CModal/utils/modal.props.js
@@ -1,4 +1,4 @@
-import { StringArray } from '../../config/props/props.types'
+import { StringArray } from '../../config/props.types'
 import { HTMLElement } from '../../utils'
 
 export default {
diff --git a/packages/chakra-ui-core/src/CProgress/CProgress.js b/packages/chakra-ui-core/src/CProgress/CProgress.js
index 974006fc..72cd3709 100644
--- a/packages/chakra-ui-core/src/CProgress/CProgress.js
+++ b/packages/chakra-ui-core/src/CProgress/CProgress.js
@@ -182,7 +182,7 @@ const CProgress = {
       return {
         light: generateStripe({}),
         dark: generateStripe({
-          color: 'rgba(0,0,0,0.1)'
+          color: 'rgba( 0, 0, 0, 0.1)'
         })
       }
     },
@@ -199,7 +199,7 @@ const CProgress = {
     const stripeStyle = {
       light: generateStripe({}),
       dark: generateStripe({
-        color: 'rgba(0,0,0,0.1)'
+        color: 'rgba( 0, 0, 0, 0.1)'
       })
     }
 
@@ -225,7 +225,7 @@ const CProgress = {
           value: this.value
         },
         attrs: {
-          bg: indicatorColor[this.colorMode],
+          bgColor: indicatorColor[this.colorMode],
           borderRadius: this.__borderRadius,
           ...this.isIndeterminate && {
             width: '100%',
diff --git a/packages/chakra-ui-core/src/CProgress/tests/__snapshots__/CProgress.test.js.snap b/packages/chakra-ui-core/src/CProgress/tests/__snapshots__/CProgress.test.js.snap
index 7a9f3021..c80a9467 100644
--- a/packages/chakra-ui-core/src/CProgress/tests/__snapshots__/CProgress.test.js.snap
+++ b/packages/chakra-ui-core/src/CProgress/tests/__snapshots__/CProgress.test.js.snap
@@ -2,8 +2,26 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-fd3gnt"
+  .emotion-0 {
+  position: relative;
+  height: 0.5rem;
+  overflow: hidden;
+  width: 100%;
+  background: var(--colors-gray-100);
+  border-radius: var(--radii-sm);
+}
+
+.emotion-1 {
+  height: 100%;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  width: 40%;
+  background-color: var(--colors-green-500);
+  border-radius: var(--radii-sm);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CProgress"
     data-testid="progress"
   >
@@ -11,7 +29,7 @@ exports[`should render correctly 1`] = `
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="40"
-      class="css-1ox4r5w"
+      class="emotion-1"
       data-chakra-component="CProgressIndicator"
       role="progressbar"
     />
diff --git a/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js b/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js
index 6e8a2f23..89538967 100644
--- a/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js
+++ b/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js
@@ -23,19 +23,7 @@ it('should change the style', () => {
   background-color="blue.200" color="blue.700"`
   const { asFragment } = renderComponent({ inlineAttrs })
 
-  const pseudobox = screen.getByTestId('pseudobox')
-
   expect(asFragment()).toMatchSnapshot()
-  expect(pseudobox).toHaveStyle('display: flex')
-  expect(pseudobox).toHaveStyle('width: auto')
-  expect(pseudobox).toHaveStyle('margin-bottom: 1.25rem')
-  expect(pseudobox).toHaveStyle('margin-top: 1.25rem')
-  expect(pseudobox).toHaveStyle('box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);')
-  expect(pseudobox).toHaveStyle('padding: 1.25rem 1.25rem 1.25rem 1.25rem;')
-  expect(pseudobox).toHaveStyle('border-radius: 0.125rem;')
-  expect(pseudobox).toHaveStyle('font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";')
-  expect(pseudobox).toHaveStyle('color: rgb(0, 49, 130);')
-  expect(pseudobox).toHaveStyle('background-color: rgb(125, 177, 255);')
 })
 
 it.each`
diff --git a/packages/chakra-ui-core/src/CPseudoBox/tests/__snapshots__/CPseudoBox.test.js.snap b/packages/chakra-ui-core/src/CPseudoBox/tests/__snapshots__/CPseudoBox.test.js.snap
index 9bb47480..44332831 100644
--- a/packages/chakra-ui-core/src/CPseudoBox/tests/__snapshots__/CPseudoBox.test.js.snap
+++ b/packages/chakra-ui-core/src/CPseudoBox/tests/__snapshots__/CPseudoBox.test.js.snap
@@ -2,8 +2,29 @@
 
 exports[`should change the style 1`] = `
 <DocumentFragment>
-  <div
-    class="css-1pl3ejm"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+  -webkit-padding-start: var(--space-5);
+  padding-inline-start: var(--space-5);
+  -webkit-padding-end: var(--space-5);
+  padding-inline-end: var(--space-5);
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-5);
+  box-shadow: var(--shadows-lg);
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-5);
+  border-radius: var(--radii-sm);
+  font-family: var(--fonts-body);
+  background-color: var(--colors-blue-200);
+  color: var(--colors-blue-700);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CPseudoBox"
     data-testid="pseudobox"
   >
@@ -15,7 +36,7 @@ exports[`should change the style 1`] = `
 exports[`should display Box with type as header 1`] = `
 <DocumentFragment>
   <header
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CPseudoBox"
     data-testid="pseudobox"
   >
@@ -27,7 +48,7 @@ exports[`should display Box with type as header 1`] = `
 exports[`should display Box with type as p 1`] = `
 <DocumentFragment>
   <p
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CPseudoBox"
     data-testid="pseudobox"
   >
@@ -39,7 +60,7 @@ exports[`should display Box with type as p 1`] = `
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-0"
+    class="emotion-0"
     data-chakra-component="CPseudoBox"
     data-testid="pseudobox"
   >
diff --git a/packages/chakra-ui-core/src/CPseudoBox/utils.js b/packages/chakra-ui-core/src/CPseudoBox/utils.js
deleted file mode 100644
index ced6d5e7..00000000
--- a/packages/chakra-ui-core/src/CPseudoBox/utils.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { map } from 'lodash-es'
-import { splitProps, pickProperty as forwardProps, isEmpty } from '../utils/object'
-import { transformAlias as tx } from '../utils/transform'
-
-/**
- * PseudoBox pseudo selectors
- */
-export const selectors = {
-  _hover: '&:hover',
-  _active: '&:active, &[data-active=true]',
-  _focus: '&:focus',
-  _visited: '&:visited',
-  _even: '&:nth-of-type(even)',
-  _odd: '&:nth-of-type(odd)',
-  _disabled: '&:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover',
-  _checked: '&[aria-checked=true]',
-  _mixed: '&[aria-checked=mixed]',
-  _selected: '&[aria-selected=true]',
-  _invalid: '&[aria-invalid=true]',
-  _pressed: '&[aria-pressed=true]',
-  _readOnly: '&[aria-readonly=true], &[readonly]',
-  _first: '&:first-of-type',
-  _last: '&:last-of-type',
-  _expanded: '&[aria-expanded=true]',
-  _grabbed: '&[aria-grabbed=true]',
-  _notFirst: '&:not(:first-of-type)',
-  _notLast: '&:not(:last-of-type)',
-  _groupHover: '[role=group]:hover &',
-  _before: '&:before',
-  _after: '&:after',
-  _focusWithin: '&:focus-within',
-  _placeholder: '&::placeholder'
-}
-
-/**
- * Filter undefined props and parse pseudo style props to generate css styles object
- * @param {Object} props styles objects
- * @returns {{ baseStyles: Object, pseudoStyles: Object }}
- */
-export function parsePseudoStyles (props) {
-  const _pseudoStyles = {}
-  if (isEmpty(props)) return { pseudoStyles: _pseudoStyles, baseStyles: {} }
-
-  const clean = forwardProps(props)
-  const { baseStyles, pseudoStyles } = splitProps(clean)
-  const result = map(pseudoStyles, (value, prop) => ({ prop, value }))
-  result.forEach((pair) => {
-    if (selectors[pair.prop]) {
-      _pseudoStyles[selectors[pair.prop]] = tx(pair.value)
-    }
-  })
-
-  return { pseudoStyles: _pseudoStyles, baseStyles }
-}
diff --git a/packages/chakra-ui-core/src/CRadio/tests/__snapshots__/CRadio.test.js.snap b/packages/chakra-ui-core/src/CRadio/tests/__snapshots__/CRadio.test.js.snap
index 796c59f0..51bb4fcb 100644
--- a/packages/chakra-ui-core/src/CRadio/tests/__snapshots__/CRadio.test.js.snap
+++ b/packages/chakra-ui-core/src/CRadio/tests/__snapshots__/CRadio.test.js.snap
@@ -2,28 +2,159 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <label
-    class="css-jwmyb8"
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: top;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.emotion-1 {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: background-color 120ms,box-shadow 250ms;
+  transition: background-color 120ms,box-shadow 250ms;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: var(--sizes-4);
+  height: var(--sizes-4);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: var(--borders-2px);
+  border-radius: var(--radii-full);
+  border-color: inherit;
+  color: var(--colors-white);
+}
+
+.emotion-2[aria-checked=true],
+.emotion-2[data-checked] {
+  background: var(--colors-blue-500);
+  border-color: var(--colors-blue-500);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  background: var(--colors-gray-100);
+  border-color: var(--colors-gray-100);
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-2[aria-invalid=true],
+.emotion-2[data-invalid] {
+  border-color: var(--colors-red-500);
+}
+
+input[type=radio]:focus+.emotion-3 {
+  box-shadow: var(--shadows-outline);
+}
+
+input[type=radio]:disabled+.emotion-3 {
+  background: var(--colors-gray-100);
+  border-color: var(--colors-gray-100);
+}
+
+input[type=radio][aria-invalid=true]+.emotion-3 {
+  border-color: var(--colors-red-500);
+}
+
+input[type=radio]:checked:disabled+.emotion-3,
+input[type=radio][aria-checked=mixed]:disabled+.emotion-3 {
+  border-color: var(--colors-gray-200);
+  background: var(--colors-gray-200);
+  color: var(--colors-gray-500);
+}
+
+.emotion-3>* {
+  opacity: 0;
+}
+
+input[type=radio]:checked+.emotion-3,
+input[type=radio][aria-checked=mixed]+.emotion-3 {
+  background: var(--colors-blue-500);
+  border-color: var(--colors-blue-500);
+}
+
+input[type=radio]:checked+.emotion-3>*,
+input[type=radio][aria-checked=mixed]+.emotion-3>* {
+  opacity: 1;
+}
+
+.emotion-4 {
+  background: currentColor;
+  border-radius: var(--radii-full);
+  width: 50%;
+  height: 50%;
+}
+
+.emotion-5 {
+  margin-left: var(--space-2);
+  font-size: var(--fontSizes-md);
+  font-family: var(--fonts-body);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 1;
+}
+
+<label
+    class="emotion-0"
     data-chakra-component="CRadio"
   >
     <input
-      class="css-f8n5zr"
+      class="emotion-1"
       data-chakra-component="CVisuallyHidden"
       type="radio"
       value=""
     />
     <div
       aria-hidden="true"
-      class="css-ugfjx9 css-aufuif"
+      class="emotion-2 emotion-3"
       data-chakra-component="CControlBox"
     >
       <span
-        class="css-z7lnx4"
+        class="emotion-4"
         data-chakra-component="CBox"
       />
     </div>
     <div
-      class="css-1jg3nyw"
+      class="emotion-5"
       data-chakra-component="CBox"
     >
       radio
diff --git a/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js b/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js
index ef5949be..ca0a6947 100644
--- a/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js
+++ b/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js
@@ -7,7 +7,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js
  */
 
-import { StringNumber, SNA } from '../config/props/props.types'
+import { StringNumber, SNA } from '../config/props.types'
 import { isDef, useId, cloneVNodeElement, cleanChildren, createStyledAttrsMixin } from '../utils'
 
 /**
diff --git a/packages/chakra-ui-core/src/CRadioButtonGroup/tests/__snapshots__/CRadioButtonGroup.test.js.snap b/packages/chakra-ui-core/src/CRadioButtonGroup/tests/__snapshots__/CRadioButtonGroup.test.js.snap
index 49272aa5..2daabc70 100644
--- a/packages/chakra-ui-core/src/CRadioButtonGroup/tests/__snapshots__/CRadioButtonGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CRadioButtonGroup/tests/__snapshots__/CRadioButtonGroup.test.js.snap
@@ -2,14 +2,147 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-0"
+  .emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-red-400);
+  color: var(--colors-white);
+}
+
+.emotion-1:focus,
+.emotion-1[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-1:hover,
+.emotion-1[data-hover] {
+  background: var(--colors-red-500);
+}
+
+.emotion-1:active,
+.emotion-1[data-active] {
+  background: var(--colors-red-600);
+}
+
+.emotion-1[disabled],
+.emotion-1[aria-disabled=true],
+.emotion-1[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.2;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-weight: var(--fontWeights-bold);
+  border-radius: var(--radii-md);
+  height: var(--sizes-10);
+  min-width: var(--sizes-10);
+  font-size: var(--fontSizes-md);
+  -webkit-padding-start: var(--space-4);
+  padding-inline-start: var(--space-4);
+  -webkit-padding-end: var(--space-4);
+  padding-inline-end: var(--space-4);
+  background: var(--colors-gray-100);
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  background: var(--colors-gray-200);
+}
+
+.emotion-2:active,
+.emotion-2[data-active] {
+  background: var(--colors-gray-300);
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: var(--shadows-none);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CRadioButtonGroup"
     role="radiogroup"
   >
     <button
       aria-checked="true"
-      class="css-1cdejei"
+      class="emotion-1"
       data-chakra-component="CButton"
       data-testid="item-1"
       role="radio"
@@ -19,7 +152,7 @@ exports[`should render correctly 1`] = `
       Custom Radio 1
     </button>
     <button
-      class="css-1bmeqe7"
+      class="emotion-2"
       data-chakra-component="CButton"
       data-testid="item-2"
       role="radio"
@@ -29,7 +162,7 @@ exports[`should render correctly 1`] = `
       Custom Radio 2
     </button>
     <button
-      class="css-1bmeqe7"
+      class="emotion-2"
       data-chakra-component="CButton"
       data-testid="item-3"
       role="radio"
@@ -40,7 +173,7 @@ exports[`should render correctly 1`] = `
     </button>
     <button
       aria-disabled="true"
-      class="css-1bmeqe7"
+      class="emotion-2"
       data-chakra-component="CButton"
       data-testid="item-4"
       disabled="disabled"
diff --git a/packages/chakra-ui-core/src/CRadioGroup/CRadioGroup.js b/packages/chakra-ui-core/src/CRadioGroup/CRadioGroup.js
index 7aa8905e..70473d3f 100644
--- a/packages/chakra-ui-core/src/CRadioGroup/CRadioGroup.js
+++ b/packages/chakra-ui-core/src/CRadioGroup/CRadioGroup.js
@@ -7,7 +7,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CRadioGroup/CRadioGroup.js
  */
 
-import { StringNumber } from '../config/props/props.types'
+import { StringNumber } from '../config/props.types'
 import { useId, cloneVNodeElement, createStyledAttrsMixin } from '../utils'
 
 import CBox from '../CBox'
diff --git a/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js b/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
index e8a71fe0..ecf07fa8 100644
--- a/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
+++ b/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
@@ -9,7 +9,7 @@
  */
 
 import { CGrid } from '../CGrid'
-import { SNA } from '../config/props/props.types'
+import { SNA } from '../config/props.types'
 import { createStyledAttrsMixin } from '../utils'
 import { countToColumns, widthToColumns } from './utils/grid.styles'
 
diff --git a/packages/chakra-ui-core/src/CStack/CStack.js b/packages/chakra-ui-core/src/CStack/CStack.js
index 32dda2cd..10eba1a0 100644
--- a/packages/chakra-ui-core/src/CStack/CStack.js
+++ b/packages/chakra-ui-core/src/CStack/CStack.js
@@ -8,7 +8,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CStack/CStack.js
  */
 
-import { StringArray, SNA } from '../config/props/props.types'
+import { StringArray, SNA } from '../config/props.types'
 import { cloneVNode, createStyledAttrsMixin } from '../utils'
 
 import CFlex from '../CFlex'
diff --git a/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap b/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
index 97c679c3..bf42c2c8 100644
--- a/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
+++ b/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
@@ -2,44 +2,79 @@
 
 exports[`CStack should render CStack with element as nav 1`] = `
 <DocumentFragment>
-  <nav
-    class="css-j7qwjs css-0"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
+  padding: var(--space-5);
+  box-shadow: var(--shadows-md);
+  border-width: 1px;
+  margin-bottom: var(--space-2);
+}
+
+.emotion-3 {
+  font-size: var(--fontSizes-xl);
+  line-height: var(--lineHeights-shorter);
+  font-weight: var(--fontWeights-bold);
+  font-family: var(--fonts-heading);
+}
+
+.emotion-4 {
+  font-family: var(--fonts-body);
+  margin-top: var(--space-4);
+}
+
+.emotion-5 {
+  padding: var(--space-5);
+  box-shadow: var(--shadows-md);
+  border-width: 1px;
+}
+
+<nav
+    class="emotion-0 emotion-1"
     data-chakra-component="CStack"
     data-testid="stack"
   >
     <div
-      class="css-dtyjrz"
+      class="emotion-2"
       data-chakra-component="CBox"
       data-testid="stack-child-1"
     >
       <h2
-        class="css-aku8fb"
+        class="emotion-3"
         data-chakra-component="CHeading"
       >
         Plan Money
       </h2>
        
       <p
-        class="css-18iq2bq"
+        class="emotion-4"
         data-chakra-component="CText"
       >
         The future can be even brighter but a goal without a plan is just a wish
       </p>
     </div>
     <div
-      class="css-1ipbp6k"
+      class="emotion-5"
       data-chakra-component="CBox"
       data-testid="stack-child-2"
     >
       <h2
-        class="css-aku8fb"
+        class="emotion-3"
         data-chakra-component="CHeading"
       >
         Save Money
       </h2>
        
       <p
-        class="css-18iq2bq"
+        class="emotion-4"
         data-chakra-component="CText"
       >
         You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process
@@ -51,44 +86,79 @@ exports[`CStack should render CStack with element as nav 1`] = `
 
 exports[`CStack should render CStack with element as section 1`] = `
 <DocumentFragment>
-  <section
-    class="css-j7qwjs css-0"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
+  padding: var(--space-5);
+  box-shadow: var(--shadows-md);
+  border-width: 1px;
+  margin-bottom: var(--space-2);
+}
+
+.emotion-3 {
+  font-size: var(--fontSizes-xl);
+  line-height: var(--lineHeights-shorter);
+  font-weight: var(--fontWeights-bold);
+  font-family: var(--fonts-heading);
+}
+
+.emotion-4 {
+  font-family: var(--fonts-body);
+  margin-top: var(--space-4);
+}
+
+.emotion-5 {
+  padding: var(--space-5);
+  box-shadow: var(--shadows-md);
+  border-width: 1px;
+}
+
+<section
+    class="emotion-0 emotion-1"
     data-chakra-component="CStack"
     data-testid="stack"
   >
     <div
-      class="css-dtyjrz"
+      class="emotion-2"
       data-chakra-component="CBox"
       data-testid="stack-child-1"
     >
       <h2
-        class="css-aku8fb"
+        class="emotion-3"
         data-chakra-component="CHeading"
       >
         Plan Money
       </h2>
        
       <p
-        class="css-18iq2bq"
+        class="emotion-4"
         data-chakra-component="CText"
       >
         The future can be even brighter but a goal without a plan is just a wish
       </p>
     </div>
     <div
-      class="css-1ipbp6k"
+      class="emotion-5"
       data-chakra-component="CBox"
       data-testid="stack-child-2"
     >
       <h2
-        class="css-aku8fb"
+        class="emotion-3"
         data-chakra-component="CHeading"
       >
         Save Money
       </h2>
        
       <p
-        class="css-18iq2bq"
+        class="emotion-4"
         data-chakra-component="CText"
       >
         You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process
@@ -100,44 +170,79 @@ exports[`CStack should render CStack with element as section 1`] = `
 
 exports[`CStack should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-j7qwjs css-0"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
+  padding: var(--space-5);
+  box-shadow: var(--shadows-md);
+  border-width: 1px;
+  margin-bottom: var(--space-2);
+}
+
+.emotion-3 {
+  font-size: var(--fontSizes-xl);
+  line-height: var(--lineHeights-shorter);
+  font-weight: var(--fontWeights-bold);
+  font-family: var(--fonts-heading);
+}
+
+.emotion-4 {
+  font-family: var(--fonts-body);
+  margin-top: var(--space-4);
+}
+
+.emotion-5 {
+  padding: var(--space-5);
+  box-shadow: var(--shadows-md);
+  border-width: 1px;
+}
+
+<div
+    class="emotion-0 emotion-1"
     data-chakra-component="CStack"
     data-testid="stack"
   >
     <div
-      class="css-dtyjrz"
+      class="emotion-2"
       data-chakra-component="CBox"
       data-testid="stack-child-1"
     >
       <h2
-        class="css-aku8fb"
+        class="emotion-3"
         data-chakra-component="CHeading"
       >
         Plan Money
       </h2>
        
       <p
-        class="css-18iq2bq"
+        class="emotion-4"
         data-chakra-component="CText"
       >
         The future can be even brighter but a goal without a plan is just a wish
       </p>
     </div>
     <div
-      class="css-1ipbp6k"
+      class="emotion-5"
       data-chakra-component="CBox"
       data-testid="stack-child-2"
     >
       <h2
-        class="css-aku8fb"
+        class="emotion-3"
         data-chakra-component="CHeading"
       >
         Save Money
       </h2>
        
       <p
-        class="css-18iq2bq"
+        class="emotion-4"
         data-chakra-component="CText"
       >
         You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process
@@ -149,8 +254,18 @@ exports[`CStack should render correctly 1`] = `
 
 exports[`CStack should render empty children correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-j7qwjs css-0"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+<div
+    class="emotion-0 emotion-1"
     data-chakra-component="CStack"
   />
 </DocumentFragment>
@@ -158,19 +273,44 @@ exports[`CStack should render empty children correctly 1`] = `
 
 exports[`CStack should should stack native html elements 1`] = `
 <DocumentFragment>
-  <div
-    class="css-j7qwjs css-0"
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
+  font-family: var(--fonts-body);
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-2);
+}
+
+.emotion-3 {
+  margin-bottom: var(--space-2);
+}
+
+.emotion-5 {
+  font-family: var(--fonts-body);
+  margin-top: var(--space-4);
+}
+
+<div
+    class="emotion-0 emotion-1"
     data-chakra-component="CStack"
     data-testid="stack"
   >
     <p
-      class="css-16ec2e8"
+      class="emotion-2"
       data-chakra-component="CText"
     >
       The future can be even brighter but a goal without a plan is just a wish
     </p>
     <div
-      class="css-cet0rr"
+      class="emotion-3"
       data-chakra-component="CBox"
     >
       <p
@@ -180,7 +320,7 @@ exports[`CStack should should stack native html elements 1`] = `
       </p>
     </div>
     <div
-      class="css-cet0rr"
+      class="emotion-3"
       data-chakra-component="CBox"
     >
       <h3
@@ -190,7 +330,7 @@ exports[`CStack should should stack native html elements 1`] = `
       </h3>
     </div>
     <p
-      class="css-18iq2bq"
+      class="emotion-5"
       data-chakra-component="CText"
     >
       You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process
diff --git a/packages/chakra-ui-core/src/CStat/tests/__snapshots__/CStat.test.js.snap b/packages/chakra-ui-core/src/CStat/tests/__snapshots__/CStat.test.js.snap
index a366cc09..93ad6c59 100644
--- a/packages/chakra-ui-core/src/CStat/tests/__snapshots__/CStat.test.js.snap
+++ b/packages/chakra-ui-core/src/CStat/tests/__snapshots__/CStat.test.js.snap
@@ -2,28 +2,81 @@
 
 exports[`"CStatArrow" should display corresponding icon for "type" prop 1`] = `
 <DocumentFragment>
-  <div
-    class="css-j0m6ar"
+  .emotion-0 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding-right: var(--space-4);
+  position: relative;
+}
+
+.emotion-1 {
+  font-family: var(--fonts-body);
+  font-weight: var(--fontWeights-medium);
+  font-size: var(--fontSizes-sm);
+}
+
+.emotion-2 {
+  font-family: var(--fonts-body);
+  font-size: var(--fontSizes-2xl);
+  vertical-align: baseline;
+  font-weight: var(--fontWeights-semibold);
+}
+
+.emotion-3 {
+  font-family: var(--fonts-body);
+  font-size: var(--fontSizes-sm);
+  opacity: 0.8;
+  margin-bottom: var(--space-2);
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-4:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-6 {
+  margin-right: var(--space-1);
+  vertical-align: middle;
+  color: var(--colors-green-400);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CStat"
   >
     <p
-      class="css-fit510"
+      class="emotion-1"
       data-chakra-component="CStatLabel"
     >
       Sent
     </p>
     <p
-      class="css-gju2n4"
+      class="emotion-2"
       data-chakra-component="CStatNumber"
     >
       345,670
     </p>
     <p
-      class="css-1lq3jyp"
+      class="emotion-3"
       data-chakra-component="CStatHelperText"
     >
       <svg
-        class="css-12j51pv css-3vopgu css-1p5cxmr"
+        class="emotion-4 emotion-5 emotion-6"
         data-chakra-component="CStatArrow"
         role="presentation"
         viewBox="0 0 24 24"
@@ -47,28 +100,81 @@ exports[`"CStatArrow" should display corresponding icon for "type" prop 1`] = `
 
 exports[`"CStatArrow" should display corresponding icon for "type" prop 2`] = `
 <DocumentFragment>
-  <div
-    class="css-j0m6ar"
+  .emotion-0 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding-right: var(--space-4);
+  position: relative;
+}
+
+.emotion-1 {
+  font-family: var(--fonts-body);
+  font-weight: var(--fontWeights-medium);
+  font-size: var(--fontSizes-sm);
+}
+
+.emotion-2 {
+  font-family: var(--fonts-body);
+  font-size: var(--fontSizes-2xl);
+  vertical-align: baseline;
+  font-weight: var(--fontWeights-semibold);
+}
+
+.emotion-3 {
+  font-family: var(--fonts-body);
+  font-size: var(--fontSizes-sm);
+  opacity: 0.8;
+  margin-bottom: var(--space-2);
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-4:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-6 {
+  margin-right: var(--space-1);
+  vertical-align: middle;
+  color: var(--colors-red-400);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CStat"
   >
     <p
-      class="css-fit510"
+      class="emotion-1"
       data-chakra-component="CStatLabel"
     >
       Sent
     </p>
     <p
-      class="css-gju2n4"
+      class="emotion-2"
       data-chakra-component="CStatNumber"
     >
       345,670
     </p>
     <p
-      class="css-1lq3jyp"
+      class="emotion-3"
       data-chakra-component="CStatHelperText"
     >
       <svg
-        class="css-12j51pv css-3vopgu css-1yvh846"
+        class="emotion-4 emotion-5 emotion-6"
         data-chakra-component="CStatArrow"
         role="presentation"
         viewBox="0 0 24 24"
@@ -92,24 +198,52 @@ exports[`"CStatArrow" should display corresponding icon for "type" prop 2`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-j0m6ar"
+  .emotion-0 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding-right: var(--space-4);
+  position: relative;
+}
+
+.emotion-1 {
+  font-family: var(--fonts-body);
+  font-weight: var(--fontWeights-medium);
+  font-size: var(--fontSizes-sm);
+}
+
+.emotion-2 {
+  font-family: var(--fonts-body);
+  font-size: var(--fontSizes-2xl);
+  vertical-align: baseline;
+  font-weight: var(--fontWeights-semibold);
+}
+
+.emotion-3 {
+  font-family: var(--fonts-body);
+  font-size: var(--fontSizes-sm);
+  opacity: 0.8;
+  margin-bottom: var(--space-2);
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CStat"
   >
     <p
-      class="css-fit510"
+      class="emotion-1"
       data-chakra-component="CStatLabel"
     >
       Collected Fees
     </p>
     <p
-      class="css-gju2n4"
+      class="emotion-2"
       data-chakra-component="CStatNumber"
     >
       £0.00
     </p>
     <p
-      class="css-1lq3jyp"
+      class="emotion-3"
       data-chakra-component="CStatHelperText"
     >
       Feb 12 - Feb 28
diff --git a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
index 232edfb8..7769ccd6 100644
--- a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
+++ b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
@@ -2,23 +2,136 @@
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <label
-    class="css-lncjus"
+  .emotion-0 {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-1 {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+.emotion-2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-transition: all 120ms;
+  transition: all 120ms;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 1.875rem;
+  height: 1rem;
+  border-radius: var(--radii-full);
+  background: var(--colors-gray-300);
+  box-sizing: content-box;
+  padding: 2px;
+}
+
+.emotion-2[aria-checked=true],
+.emotion-2[data-checked] {
+  background: var(--colors-blue-500);
+}
+
+.emotion-2:focus,
+.emotion-2[data-focus] {
+  box-shadow: var(--shadows-outline);
+}
+
+.emotion-2:hover,
+.emotion-2[data-hover] {
+  cursor: pointer;
+}
+
+.emotion-2[disabled],
+.emotion-2[aria-disabled=true],
+.emotion-2[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+input[type=checkbox]:focus+.emotion-3 {
+  box-shadow: var(--shadows-outline);
+}
+
+input[type=checkbox]:hover:not(:disabled):not(:checked)+.emotion-3 {
+  cursor: pointer;
+}
+
+input[type=checkbox]:disabled+.emotion-3 {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+input[type=checkbox]:checked:hover:not(:disabled)+.emotion-3,
+input[type=checkbox][aria-checked=mixed]:hover:not(:disabled)+.emotion-3 {
+  cursor: pointer;
+}
+
+.emotion-3>* {
+  -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
+
+input[type=checkbox]:checked+.emotion-3,
+input[type=checkbox][aria-checked=mixed]+.emotion-3 {
+  background: var(--colors-blue-500);
+}
+
+input[type=checkbox]:checked+.emotion-3>*,
+input[type=checkbox][aria-checked=mixed]+.emotion-3>* {
+  -webkit-transform: translateX(calc(1.875rem - 1rem));
+  -moz-transform: translateX(calc(1.875rem - 1rem));
+  -ms-transform: translateX(calc(1.875rem - 1rem));
+  transform: translateX(calc(1.875rem - 1rem));
+}
+
+.emotion-4 {
+  background: var(--colors-white);
+  -webkit-transition: -webkit-transform 250ms;
+  transition: transform 250ms;
+  border-radius: var(--radii-full);
+  height: 1rem;
+  width: 1rem;
+}
+
+<label
+    class="emotion-0"
     data-chakra-component="CSwitch"
     data-testid="switch"
   >
     <input
-      class="css-f8n5zr"
+      class="emotion-1"
       data-chakra-component="CVisuallyHidden"
       type="checkbox"
     />
     <div
       aria-hidden="true"
-      class="css-o5cn09 css-14rwhig"
+      class="emotion-2 emotion-3"
       data-chakra-component="CControlBox"
     >
       <div
-        class="css-1jhagep"
+        class="emotion-4"
         data-chakra-component="CBox"
       />
     </div>
diff --git a/packages/chakra-ui-core/src/CTag/CTag.js b/packages/chakra-ui-core/src/CTag/CTag.js
index 45ff5396..4239bb02 100644
--- a/packages/chakra-ui-core/src/CTag/CTag.js
+++ b/packages/chakra-ui-core/src/CTag/CTag.js
@@ -83,7 +83,7 @@ const CTagCloseButton = {
         opacity: '0.5',
         mr: -1,
         _disabled: {
-          opacity: '40%',
+          opacity: '0.4',
           cursor: 'not-allowed',
           boxShadow: 'none'
         },
diff --git a/packages/chakra-ui-core/src/CTag/tests/__snapshots__/CTag.test.js.snap b/packages/chakra-ui-core/src/CTag/tests/__snapshots__/CTag.test.js.snap
index f93ed636..94e98590 100644
--- a/packages/chakra-ui-core/src/CTag/tests/__snapshots__/CTag.test.js.snap
+++ b/packages/chakra-ui-core/src/CTag/tests/__snapshots__/CTag.test.js.snap
@@ -2,21 +2,92 @@
 
 exports[`should display tag with custom element 1`] = `
 <DocumentFragment>
-  <div
-    class="css-82qlwu"
+  .emotion-0 {
+  margin-bottom: var(--space-3);
+}
+
+.emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: var(--sizes-8);
+  max-width: 100%;
+  border-radius: var(--radii-full);
+  font-weight: var(--fontWeights-medium);
+  min-width: var(--sizes-8);
+  -webkit-padding-start: var(--space-3);
+  padding-inline-start: var(--space-3);
+  -webkit-padding-end: var(--space-3);
+  padding-inline-end: var(--space-3);
+  background-color: var(--colors-red-100);
+  color: var(--colors-red-800);
+}
+
+.emotion-2 {
+  width: var(--sizes-6);
+  height: var(--sizes-6);
+  font-size: calc(1.5rem / 2.5);
+  line-height: 1.5rem;
+  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: var(--radii-full);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  background: #a8eb4f;
+  color: var(--colors-gray-800);
+  border: var(--borders-2px);
+  border-color: #fff;
+}
+
+.emotion-3 {
+  width: 1.5rem;
+  height: 1.5rem;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: var(--fontWeights-medium);
+}
+
+.emotion-4 {
+  font-family: var(--fonts-body);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CBox"
   >
     <div
-      class="css-bq4nt5"
+      class="emotion-1"
       data-chakra-component="CTag"
     >
       <div
-        class="css-1kvyzeh"
+        class="emotion-2"
         data-chakra-component="CAvatar"
       >
         <div
           aria-label="Mesut Koca"
-          class="css-1nx39wu"
+          class="emotion-3"
           data-chakra-component="CAvatarName"
         >
           MK
@@ -24,7 +95,7 @@ exports[`should display tag with custom element 1`] = `
       </div>
        
       <span
-        class="css-12hz31w"
+        class="emotion-4"
         data-chakra-component="CTagLabel"
       >
         Mesut
@@ -36,23 +107,92 @@ exports[`should display tag with custom element 1`] = `
 
 exports[`should display tag with right icon 1`] = `
 <DocumentFragment>
-  <div
-    class="css-82qlwu"
+  .emotion-0 {
+  margin-bottom: var(--space-3);
+}
+
+.emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: var(--sizes-6);
+  max-width: 100%;
+  border-radius: var(--radii-md);
+  font-weight: var(--fontWeights-medium);
+  min-width: var(--sizes-6);
+  font-size: var(--fontSizes-sm);
+  -webkit-padding-start: var(--space-2);
+  padding-inline-start: var(--space-2);
+  -webkit-padding-end: var(--space-2);
+  padding-inline-end: var(--space-2);
+  background-color: var(--colors-green-100);
+  color: var(--colors-green-800);
+}
+
+.emotion-2 {
+  font-family: var(--fonts-body);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+.emotion-3 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-3:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-4 {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-5 {
+  -webkit-margin-start: 0.5rem;
+  margin-inline-start: 0.5rem;
+  -webkit-margin-end: 0.5rem;
+  margin-inline-end: 0.5rem;
+}
+
+.emotion-6:first-child {
+  margin-left: 0;
+}
+
+.emotion-6:last-child {
+  margin-right: 0;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CBox"
   >
     <div
-      class="css-1h7p6x3"
+      class="emotion-1"
       data-chakra-component="CTag"
     >
       <span
-        class="css-12hz31w"
+        class="emotion-2"
         data-chakra-component="CTagLabel"
       >
         Green
       </span>
        
       <svg
-        class="css-12j51pv css-xmst1h css-dp0f2t css-9r03b"
+        class="emotion-3 emotion-4 emotion-5 emotion-6"
         data-chakra-component="CTagIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -73,16 +213,85 @@ exports[`should display tag with right icon 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <div
-    class="css-82qlwu"
+  .emotion-0 {
+  margin-bottom: var(--space-3);
+}
+
+.emotion-1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: var(--sizes-6);
+  max-width: 100%;
+  border-radius: var(--radii-md);
+  font-weight: var(--fontWeights-medium);
+  min-width: var(--sizes-6);
+  font-size: var(--fontSizes-sm);
+  -webkit-padding-start: var(--space-2);
+  padding-inline-start: var(--space-2);
+  -webkit-padding-end: var(--space-2);
+  padding-inline-end: var(--space-2);
+  background-color: var(--colors-green-100);
+  color: var(--colors-green-800);
+}
+
+.emotion-2 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.emotion-2:not(:root) {
+  overflow: hidden;
+}
+
+.emotion-3 {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emotion-4 {
+  -webkit-margin-start: 0.5rem;
+  margin-inline-start: 0.5rem;
+  -webkit-margin-end: 0.5rem;
+  margin-inline-end: 0.5rem;
+}
+
+.emotion-5:first-child {
+  margin-left: 0;
+}
+
+.emotion-5:last-child {
+  margin-right: 0;
+}
+
+.emotion-6 {
+  font-family: var(--fonts-body);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+<div
+    class="emotion-0"
     data-chakra-component="CBox"
   >
     <div
-      class="css-1h7p6x3"
+      class="emotion-1"
       data-chakra-component="CTag"
     >
       <svg
-        class="css-12j51pv css-xmst1h css-dp0f2t css-9r03b"
+        class="emotion-2 emotion-3 emotion-4 emotion-5"
         data-chakra-component="CTagIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -98,7 +307,7 @@ exports[`should render correctly 1`] = `
       </svg>
        
       <span
-        class="css-12hz31w"
+        class="emotion-6"
         data-chakra-component="CTagLabel"
       >
         Green
diff --git a/packages/chakra-ui-core/src/CText/CText.stories.js b/packages/chakra-ui-core/src/CText/CText.stories.js
index 682db1dd..6a31cbe1 100644
--- a/packages/chakra-ui-core/src/CText/CText.stories.js
+++ b/packages/chakra-ui-core/src/CText/CText.stories.js
@@ -108,3 +108,31 @@ storiesOf('UI | Text', module)
       </div>
     `
   }))
+  .add('with noOfLines', () => ({
+    components: { CText },
+    template: `
+      <div style="width: 80vw">
+        <div>This will not show more than 3 lines</div>
+        <CText noOfLines="3" mb="2" borderWidth="1px" borderColor="red.200">
+          Extra super duper long naruto heading in the village hidden in the leaves by the first Hokage who used to be friedns with Madara Uchiha but they went their separate ways because they could find a common understing around the definition of peace in the ninja world. Add text to make it long enough
+        </CText>
+      </div>
+    `
+  }))
+  .add('with textDecor', () => ({
+    components: { CText },
+    template: `
+      <div style="width: 80vw; padding-top: 20px;">
+        <div>Some decorations:</div>
+        <CText p="4" mb="2" borderWidth="1px" borderColor="red.200" textDecor="overline">
+          Extra super duper long naruto heading in the village hidden in the leaves by the first Hokage who used to be friedns with Madara Uchiha but they went their separate ways because they could find a common understing around the definition of peace in the ninja world.
+        </CText>
+        <CText p="4" mb="2" borderWidth="1px" borderColor="blue.200" textDecor="line-through">
+          Extra super duper long naruto heading in the village hidden in the leaves by the first Hokage who used to be friedns with Madara Uchiha but they went their separate ways because they could find a common understing around the definition of peace in the ninja world.
+        </CText>
+        <CText p="4" mb="2" borderWidth="1px" borderColor="green.200" textDecor="underline">
+          Extra super duper long naruto heading in the village hidden in the leaves by the first Hokage who used to be friedns with Madara Uchiha but they went their separate ways because they could find a common understing around the definition of peace in the ninja world.
+        </CText>
+      </div>
+    `
+  }))
diff --git a/packages/chakra-ui-core/src/CText/tests/__snapshots__/CText.test.js.snap b/packages/chakra-ui-core/src/CText/tests/__snapshots__/CText.test.js.snap
index 7fc343b4..e0ff4305 100644
--- a/packages/chakra-ui-core/src/CText/tests/__snapshots__/CText.test.js.snap
+++ b/packages/chakra-ui-core/src/CText/tests/__snapshots__/CText.test.js.snap
@@ -2,8 +2,16 @@
 
 exports[`should change the style 1`] = `
 <DocumentFragment>
-  <p
-    class="css-1y6cmsr"
+  .emotion-0 {
+  font-family: var(--fonts-body);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+<p
+    class="emotion-0"
     data-chakra-component="CText"
     data-testid="text"
   >
@@ -14,8 +22,12 @@ exports[`should change the style 1`] = `
 
 exports[`should render correctly 1`] = `
 <DocumentFragment>
-  <p
-    class="css-fzcsno"
+  .emotion-0 {
+  font-family: var(--fonts-body);
+}
+
+<p
+    class="emotion-0"
     data-chakra-component="CText"
     data-testid="text"
   >
diff --git a/packages/chakra-ui-core/src/CTextarea/CTextarea.js b/packages/chakra-ui-core/src/CTextarea/CTextarea.js
index de0b9bdf..d2e68a4c 100644
--- a/packages/chakra-ui-core/src/CTextarea/CTextarea.js
+++ b/packages/chakra-ui-core/src/CTextarea/CTextarea.js
@@ -12,7 +12,7 @@ import { inputProps } from '../CInput/utils/input.props'
 import { forwardProps, extractListeners } from '../utils'
 
 import CInput from '../CInput'
-import { SNA } from '../config/props/props.types'
+import { SNA } from '../config/props.types'
 
 /**
  * CTextarea component
diff --git a/packages/chakra-ui-core/src/CThemeProvider/CThemeProvider.js b/packages/chakra-ui-core/src/CThemeProvider/CThemeProvider.js
index c2d9e033..e00627a8 100644
--- a/packages/chakra-ui-core/src/CThemeProvider/CThemeProvider.js
+++ b/packages/chakra-ui-core/src/CThemeProvider/CThemeProvider.js
@@ -4,10 +4,11 @@
  * The CThemeProvider componeent provides theme context to all it's
  * children.
  *
- * @see Docs     https://vue.chakra-ui.com/textarea
+ * @see Docs     https://vue.chakra-ui.com/getting-started
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CThemeProvider/CThemeProvider.js
  */
 
+import { injectGlobal } from '@emotion/css'
 import { colorModeObserver } from '../utils/color-mode-observer'
 
 /**
@@ -27,6 +28,12 @@ const CThemeProvider = {
       $chakraColorMode: () => 'light'
     }
   },
+  props: {
+    rootKey: {
+      type: String,
+      default: ':root'
+    }
+  },
   computed: {
     icons () {
       return this.$chakra ? this.$chakra.icons : {}
@@ -40,6 +47,7 @@ const CThemeProvider = {
       immediate: true,
       handler (newVal) {
         colorModeObserver.theme = newVal
+        this.updateGlobalCssVars()
       }
     },
     icons: {
@@ -49,6 +57,15 @@ const CThemeProvider = {
       }
     }
   },
+  methods: {
+    updateGlobalCssVars () {
+      const rootKey = this.rootKey || ':root'
+      injectGlobal({
+        [rootKey]: this.theme.__cssVars
+      })
+    }
+
+  },
   render (h) {
     return h('div', {
       attrs: {
diff --git a/packages/chakra-ui-core/src/CThemeProvider/tests/CThemeProvider.test.js b/packages/chakra-ui-core/src/CThemeProvider/tests/CThemeProvider.test.js
index d7be8bd6..739ba5ab 100644
--- a/packages/chakra-ui-core/src/CThemeProvider/tests/CThemeProvider.test.js
+++ b/packages/chakra-ui-core/src/CThemeProvider/tests/CThemeProvider.test.js
@@ -1,16 +1,18 @@
-import { shallowMount } from '@vue/test-utils'
-import theme from '../../../../chakra-ui-theme/src'
+import { toCSSVar } from '@chakra-ui/styled-system'
+import { mount, shallowMount } from '@vue/test-utils'
+import theme from '@chakra-ui/theme-vue'
+import { getElementStyles } from '@/tests/test-utils'
+
 import CThemeProvider from '..'
 
-describe('===== CThemeProvider Component =====', () => {
-  let themeProvider
+describe('CThemeProvider', () => {
   const ChildComponent = {
     inject: ['$chakraTheme', '$chakraColorMode'],
     render: h => h('div', {})
   }
 
   it('should be a Vue component', () => {
-    themeProvider = shallowMount(CThemeProvider, {
+    const themeProvider = shallowMount(CThemeProvider, {
       mocks: {
         $chakra: {
           theme
@@ -24,20 +26,38 @@ describe('===== CThemeProvider Component =====', () => {
   })
 
   it('should provide theme & default color mode to child components', () => {
-    themeProvider = shallowMount(CThemeProvider, {
-      slots: {
-        default: [ChildComponent]
-      },
+    const themeProvider = shallowMount(CThemeProvider, {
       mocks: {
         $chakra: {
           theme
         }
       },
-      propsData: {
-        theme
+      slots: {
+        default: [ChildComponent]
       }
     })
     expect(themeProvider.find(ChildComponent).vm.$chakraTheme()).toBe(theme)
     expect(themeProvider.find(ChildComponent).vm.$chakraColorMode()).toBe('light')
   })
+
+  it('should inject global Css variables to root', () => {
+    const rootKey = ':root'
+
+    mount(CThemeProvider, {
+      props: {
+        rootKey
+      },
+      mocks: {
+        $chakra: {
+          theme: toCSSVar(theme)
+        }
+      },
+      slots: {
+        default: [ChildComponent]
+      }
+    })
+
+    const root = document.querySelector(rootKey)
+    expect(getElementStyles(root)).toMatchSnapshot()
+  })
 })
diff --git a/packages/chakra-ui-core/src/CThemeProvider/tests/__snapshots__/CThemeProvider.test.js.snap b/packages/chakra-ui-core/src/CThemeProvider/tests/__snapshots__/CThemeProvider.test.js.snap
new file mode 100644
index 00000000..6f505506
--- /dev/null
+++ b/packages/chakra-ui-core/src/CThemeProvider/tests/__snapshots__/CThemeProvider.test.js.snap
@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CThemeProvider should inject global Css variables to root 1`] = `
+"--chakra-ring-inset: var(--chakra-empty, );
+ --chakra-ring-offset-width: 0px;
+ --chakra-ring-offset-color: #fff;
+ --chakra-ring-color: rgba(66, 153, 225, 0.6);
+ --chakra-ring-offset-shadow: 0 0 #0000;
+ --chakra-ring-shadow: 0 0 #0000;
+ --chakra-space-x-reverse: 0;
+ --chakra-space-y-reverse: 0;
+ --colors-transparent: transparent;
+ --colors-current: currentColor;
+ --colors-black: #000;
+ --colors-white: #fff;
+ --colors-primary: #1a72ff;
+ --colors-secondary: #7425f3;
+ --colors-tertiary: #fe9e4d;
+ --colors-success: #3ea76a;
+ --colors-warning: #ffc61a;
+ --colors-error: #dd3b4b;
+ --colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
+ --colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
+ --colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
+ --colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
+ --colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
+ --colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
+ --colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
+ --colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
+ --colors-whiteAlpha-800: rgba(255, 255, 255, 0.80);
+ --colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
+ --colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
+ --colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
+ --colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
+ --colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
+ --colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
+ --colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
+ --colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
+ --colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
+ --colors-blackAlpha-800: rgba(0, 0, 0, 0.80);
+ --colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
+ --colors-gray-50: #F7FAFC;
+ --colors-gray-100: #EDF2F7;
+ --colors-gray-200: #E2E8F0;
+ --colors-gray-300: #CBD5E0;
+ --colors-gray-400: #A0AEC0;
+ --colors-gray-500: #718096;
+ --colors-gray-600: #4A5568;
+ --colors-gray-700: #2D3748;
+ --colors-gray-800: #1A202C;
+ --colors-gray-900: #171923;
+ --colors-cyan-50: #EDFDFD;
+ --colors-cyan-100: #C4F1F9;
+ --colors-cyan-200: #9DECF9;
+ --colors-cyan-300: #76E4F7;
+ --colors-cyan-400: #0BC5EA;
+ --colors-cyan-500: #00B5D8;
+ --colors-cyan-600: #00A3C4;
+ --colors-cyan-700: #0987A0;
+ --colors-cyan-800: #086F83;
+ --colors-cyan-900: #065666;
+ --colors-vue-50: #e1fbf0;
+ --colors-vue-100: #c0ecda;
+ --colors-vue-200: #9edfc2;
+ --colors-vue-300: #79d0aa;
+ --colors-vue-400: #55c392;
+ --colors-vue-500: #3caa79;
+ --colors-vue-600: #2d845e;
+ --colors-vue-700: #1d5e42;
+ --colors-vue-800: #0c3a26;
+ --colors-vue-900: #001508;
+ --colors-green-50: #e2fbed;
+ --colors-green-100: #c2ebd4;
+ --colors-green-200: #9fddb9;
+ --colors-green-300: #7ccf9e;
+ --colors-green-400: #58c184;
+ --colors-green-500: #3ea76a;
+ --colors-green-600: #2e8251;
+ --colors-green-700: #1f5d3a;
+ --colors-green-800: #0f3921;
+ --colors-green-900: #001506;
+ --colors-orange-50: #ffefdc;
+ --colors-orange-100: #ffd4ae;
+ --colors-orange-200: #ffba7f;
+ --colors-orange-300: #fe9e4d;
+ --colors-orange-400: #fd821b;
+ --colors-orange-500: #e46902;
+ --colors-orange-600: #b25100;
+ --colors-orange-700: #7f3900;
+ --colors-orange-800: #4e2200;
+ --colors-orange-900: #1f0900;
+ --colors-red-50: #ffe5e9;
+ --colors-red-100: #f9bcc2;
+ --colors-red-200: #ee919a;
+ --colors-red-300: #e66673;
+ --colors-red-400: #dd3b4b;
+ --colors-red-500: #c42231;
+ --colors-red-600: #991826;
+ --colors-red-700: #6e101a;
+ --colors-red-800: #44070e;
+ --colors-red-900: #1e0001;
+ --colors-yellow-50: #fff9da;
+ --colors-yellow-100: #ffecad;
+ --colors-yellow-200: #ffdf7d;
+ --colors-yellow-300: #ffd24b;
+ --colors-yellow-400: #ffc61a;
+ --colors-yellow-500: #e6ac00;
+ --colors-yellow-600: #b38600;
+ --colors-yellow-700: #806000;
+ --colors-yellow-800: #4e3900;
+ --colors-yellow-900: #1d1300;
+ --colors-indigo-50: #f2e5ff;
+ --colors-indigo-100: #d2b5ff;
+ --colors-indigo-200: #b285fa;
+ --colors-indigo-300: #9356f7;
+ --colors-indigo-400: #7425f3;
+ --colors-indigo-500: #5a0cda;
+ --colors-indigo-600: #4608aa;
+ --colors-indigo-700: #32057b;
+ --colors-indigo-800: #1e024c;
+ --colors-indigo-900: #0c001e;
+ --colors-pink-50: #fff5f7;
+ --colors-pink-100: #fed7e2;
+ --colors-pink-200: #fbb6ce;
+ --colors-pink-300: #f687b3;
+ --colors-pink-400: #ed64a6;
+ --colors-pink-500: #d53f8c;
+ --colors-pink-600: #b83280;
+ --colors-pink-700: #97266d;
+ --colors-pink-800: #702459;
+ --colors-pink-900: #521B41;
+ --colors-blue-50: #def0ff;
+ --colors-blue-100: #afd0ff;
+ --colors-blue-200: #7db1ff;
+ --colors-blue-300: #4b91ff;
+ --colors-blue-400: #1a72ff;
+ --colors-blue-500: #0058e6;
+ --colors-blue-600: #0045b4;
+ --colors-blue-700: #003182;
+ --colors-blue-800: #001d51;
+ --colors-blue-900: #000a21;
+ --borders-none: 0;
+ --borders-1px: 1px solid;
+ --borders-2px: 2px solid;
+ --borders-4px: 4px solid;
+ --borderWidths-sm: 1px;
+ --borderWidths-md: 2px;
+ --borderWidths-lg: 4px;
+ --fonts-heading: -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Helvetica,Arial,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\";
+ --fonts-body: -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Helvetica,Arial,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\";
+ --fonts-mono: SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;
+ --fontSizes-xs: 0.75rem;
+ --fontSizes-sm: 0.875rem;
+ --fontSizes-md: 1rem;
+ --fontSizes-lg: 1.125rem;
+ --fontSizes-xl: 1.25rem;
+ --fontSizes-2xl: 1.5rem;
+ --fontSizes-3xl: 1.875rem;
+ --fontSizes-4xl: 2.25rem;
+ --fontSizes-5xl: 3rem;
+ --fontSizes-6xl: 4rem;
+ --fontWeights-hairline: 100;
+ --fontWeights-thin: 200;
+ --fontWeights-light: 300;
+ --fontWeights-normal: 400;
+ --fontWeights-medium: 500;
+ --fontWeights-semibold: 600;
+ --fontWeights-bold: 700;
+ --fontWeights-extrabold: 800;
+ --fontWeights-black: 900;
+ --letterSpacings-tighter: -0.05em;
+ --letterSpacings-tight: -0.025em;
+ --letterSpacings-normal: 0;
+ --letterSpacings-wide: 0.025em;
+ --letterSpacings-wider: 0.05em;
+ --letterSpacings-widest: 0.1em;
+ --lineHeights-normal: normal;
+ --lineHeights-none: 1;
+ --lineHeights-shorter: 1.25;
+ --lineHeights-short: 1.375;
+ --lineHeights-base: 1.5;
+ --lineHeights-tall: 1.625;
+ --lineHeights-taller: 2;
+ --radii-none: 0;
+ --radii-sm: 0.125rem;
+ --radii-md: 0.25rem;
+ --radii-lg: 0.5rem;
+ --radii-full: 9999px;
+ --space-0: 0;
+ --space-1: 0.25rem;
+ --space-2: 0.5rem;
+ --space-3: 0.75rem;
+ --space-4: 1rem;
+ --space-5: 1.25rem;
+ --space-6: 1.5rem;
+ --space-8: 2rem;
+ --space-10: 2.5rem;
+ --space-12: 3rem;
+ --space-16: 4rem;
+ --space-20: 5rem;
+ --space-24: 6rem;
+ --space-32: 8rem;
+ --space-40: 10rem;
+ --space-48: 12rem;
+ --space-56: 14rem;
+ --space-64: 16rem;
+ --space-px: 1px;
+ --shadows-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ --shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ --shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ --shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ --shadows-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ --shadows-outline: 0 0 0 3px rgba(66, 153, 225, 0.6);
+ --shadows-inner: inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06);
+ --shadows-none: none;
+ --sizes-0: 0;
+ --sizes-1: 0.25rem;
+ --sizes-2: 0.5rem;
+ --sizes-3: 0.75rem;
+ --sizes-4: 1rem;
+ --sizes-5: 1.25rem;
+ --sizes-6: 1.5rem;
+ --sizes-8: 2rem;
+ --sizes-10: 2.5rem;
+ --sizes-12: 3rem;
+ --sizes-16: 4rem;
+ --sizes-20: 5rem;
+ --sizes-24: 6rem;
+ --sizes-32: 8rem;
+ --sizes-40: 10rem;
+ --sizes-48: 12rem;
+ --sizes-56: 14rem;
+ --sizes-64: 16rem;
+ --sizes-px: 1px;
+ --sizes-full: 100%;
+ --sizes-3xs: 14rem;
+ --sizes-2xs: 16rem;
+ --sizes-xs: 20rem;
+ --sizes-sm: 24rem;
+ --sizes-md: 28rem;
+ --sizes-lg: 32rem;
+ --sizes-xl: 36rem;
+ --sizes-2xl: 42rem;
+ --sizes-3xl: 48rem;
+ --sizes-4xl: 56rem;
+ --sizes-5xl: 64rem;
+ --sizes-6xl: 72rem;
+ --sizes-containers-sm: 640px;
+ --sizes-containers-md: 768px;
+ --sizes-containers-lg: 1024px;
+ --sizes-containers-xl: 1280px;
+ --zIndices-hide: -1;
+ --zIndices-auto: auto;
+ --zIndices-base: 0;
+ --zIndices-docked: 10;
+ --zIndices-dropdown: 1000;
+ --zIndices-sticky: 1100;
+ --zIndices-banner: 1200;
+ --zIndices-overlay: 1300;
+ --zIndices-modal: 1400;
+ --zIndices-popover: 1500;
+ --zIndices-skipLink: 1600;
+ --zIndices-toast: 1700;
+ --zIndices-tooltip: 1800;
+"
+`;
diff --git a/packages/chakra-ui-core/src/Chakra/index.js b/packages/chakra-ui-core/src/Chakra/index.js
index e1920b17..bc066ffd 100644
--- a/packages/chakra-ui-core/src/Chakra/index.js
+++ b/packages/chakra-ui-core/src/Chakra/index.js
@@ -1,9 +1,11 @@
 import VScrollLock from 'v-scroll-lock'
 import { merge } from 'lodash-es'
+import { toCSSVar } from '@chakra-ui/styled-system'
+import defaultTheme from '@chakra-ui/theme-vue'
+
 import { parsePackIcons } from '../utils/icons'
 import internalIcons from '../lib/internal-icons'
 import { createClientDirective } from '../directives'
-import defaultTheme from '../../../chakra-ui-theme/src'
 import useToast from '../CToast'
 
 /**
@@ -31,7 +33,7 @@ const Chakra = {
     }
 
     // Recursively merge extended theme variables
-    const mergedTheme = merge(defaultTheme, options.extendTheme)
+    const mergedTheme = toCSSVar(merge(defaultTheme, options.extendTheme))
 
     Vue.directive('chakra', createClientDirective(mergedTheme))
 
diff --git a/packages/chakra-ui-core/src/Css/Css.js b/packages/chakra-ui-core/src/Css/Css.js
index cc0227df..d105ca45 100644
--- a/packages/chakra-ui-core/src/Css/Css.js
+++ b/packages/chakra-ui-core/src/Css/Css.js
@@ -1,11 +1,9 @@
-import _css from '@styled-system/css'
-import { tx } from '../utils'
+import { css } from '@chakra-ui/styled-system'
 
 /**
- * Creates CSS styles and injects them in document
- * from an object of styles and returns a class name
+ * Build a CSS factory function, to create CSS object by given a theme
  * @param {Object} styleProps Styles object
- * @returns {String} class name
+ * @returns {Function} (theme) => CSSStyleObject
  */
-const Css = styleProps => _css(tx(styleProps))
-export default Css
+const buildCssFn = styleProps => css(styleProps)
+export default buildCssFn
diff --git a/packages/chakra-ui-core/src/config/index.js b/packages/chakra-ui-core/src/config/index.js
index 6f5bf35e..8db0fc54 100644
--- a/packages/chakra-ui-core/src/config/index.js
+++ b/packages/chakra-ui-core/src/config/index.js
@@ -1 +1 @@
-export * from './props'
+// to keep rollup work
diff --git a/packages/chakra-ui-core/src/config/props/props.types.js b/packages/chakra-ui-core/src/config/props.types.js
similarity index 100%
rename from packages/chakra-ui-core/src/config/props/props.types.js
rename to packages/chakra-ui-core/src/config/props.types.js
diff --git a/packages/chakra-ui-core/src/config/props/index.js b/packages/chakra-ui-core/src/config/props/index.js
deleted file mode 100644
index 0c22e83b..00000000
--- a/packages/chakra-ui-core/src/config/props/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import baseProps from './props'
-import pseudoProps from './pseudo'
-
-export { default as propsConfig } from './props.config'
-export * from './props.config'
-
-export {
-  baseProps,
-  pseudoProps
-}
-
-/**
- * Style props object
- */
-const styleProps = {
-  ...baseProps,
-  ...pseudoProps
-}
-
-export default styleProps
diff --git a/packages/chakra-ui-core/src/config/props/props.aliases.js b/packages/chakra-ui-core/src/config/props/props.aliases.js
deleted file mode 100644
index c9c6e078..00000000
--- a/packages/chakra-ui-core/src/config/props/props.aliases.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const aliases = {
-  roundedTop: ['borderTopLeftRadius', 'borderTopRightRadius'],
-  roundedBottom: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
-  roundedLeft: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
-  roundedRight: ['borderTopRightRadius', 'borderBottomRightRadius'],
-  roundedTopRight: 'borderTopRightRadius',
-  roundedTopLeft: 'borderTopLeftRadius',
-  roundedBottomRight: 'borderBottomRightRadius',
-  roundedBottomLeft: 'borderBottomLeftRadius',
-  rounded: 'borderRadius',
-  d: 'display',
-  w: 'width',
-  minW: 'minWidth',
-  maxW: 'maxWidth',
-  h: 'height',
-  minH: 'minHeight',
-  maxH: 'maxHeight',
-  bgImg: 'backgroundImage',
-  bgImage: 'backgroundImage',
-  bgSize: 'backgroundSize',
-  bgPos: 'backgroundPosition',
-  bgRepeat: 'backgroundRepeat',
-  pos: 'position',
-  flexDir: 'flexDirection',
-  shadow: 'boxShadow',
-  b: 'border',
-  bl: 'border-left',
-  bt: 'border-top',
-  br: 'border-right',
-  bb: 'border-bottom',
-  bgAttachment: 'backgroundAttachment',
-  textDecor: 'textDecoration',
-  listStylePos: 'listStylePosition',
-  listStyleImg: 'listStyleImage'
-}
-
-export default aliases
diff --git a/packages/chakra-ui-core/src/config/props/props.config.js b/packages/chakra-ui-core/src/config/props/props.config.js
deleted file mode 100644
index 89f011d7..00000000
--- a/packages/chakra-ui-core/src/config/props/props.config.js
+++ /dev/null
@@ -1,692 +0,0 @@
-import { system } from 'styled-system'
-/**
- * This configuration is meant for the intent of:
- *  - creating new custom properties for certian styled props
- *  - creating shorthand properties for some long attribute names.
- */
-export const config = {
-  roundedTop: {
-    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
-    scale: 'radii'
-  },
-  roundedBottom: {
-    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
-    scale: 'radii'
-  },
-  roundedLeft: {
-    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
-    scale: 'radii'
-  },
-  roundedRight: {
-    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
-    scale: 'radii'
-  },
-  roundedTopRight: {
-    property: 'borderTopRightRadius',
-    scale: 'radii'
-  },
-  roundedTopLeft: {
-    property: 'borderTopLeftRadius',
-    scale: 'radii'
-  },
-  roundedBottomRight: {
-    property: 'borderBottomRightRadius',
-    scale: 'radii'
-  },
-  roundedBottomLeft: {
-    property: 'borderBottomLeftRadius',
-    scale: 'radii'
-  },
-  rounded: {
-    property: 'borderRadius',
-    scale: 'radii'
-  },
-  d: {
-    property: 'display'
-  },
-  w: {
-    property: 'width',
-    scale: 'sizes'
-  },
-  minW: {
-    property: 'minWidth',
-    scale: 'sizes'
-  },
-  maxW: {
-    property: 'maxWidth',
-    scale: 'sizes'
-  },
-  h: {
-    property: 'height',
-    scale: 'sizes'
-  },
-  minH: {
-    property: 'minHeight',
-    scale: 'sizes'
-  },
-  maxH: {
-    property: 'maxHeight',
-    scale: 'sizes'
-  },
-  bgImg: {
-    property: 'backgroundImage'
-  },
-  bgImage: {
-    property: 'backgroundImage'
-  },
-  bgSize: {
-    property: 'backgroundSize'
-  },
-  bgPos: {
-    property: 'backgroundPosition'
-  },
-  bgRepeat: {
-    property: 'backgroundRepeat'
-  },
-  pos: {
-    property: 'position'
-  },
-  flexDir: {
-    property: 'flexDirection'
-  },
-  shadow: {
-    property: 'boxShadow',
-    scale: 'shadows'
-  },
-  b: {
-    property: 'border',
-    scale: 'borders'
-  },
-  bl: {
-    property: 'borderLeft',
-    scale: 'borders'
-  },
-  bt: {
-    property: 'borderTop',
-    scale: 'borders'
-  },
-  br: {
-    property: 'borderRight',
-    scale: 'borders'
-  },
-  bb: {
-    property: 'borderBottom',
-    scale: 'borders'
-  },
-  textDecoration: {
-    property: 'textDecoration'
-  },
-  overflowX: true,
-  overflowY: true,
-  textTransform: true,
-  animation: true,
-  appearance: true,
-  transform: true,
-  transformOrigin: true,
-  visibility: true,
-  whiteSpace: true,
-  userSelect: true,
-  pointerEvents: true,
-  wordBreak: true,
-  overflowWrap: true,
-  textOverflow: true,
-  boxSizing: true,
-  cursor: true,
-  resize: true,
-  transition: true,
-  listStyleType: true,
-  listStylePosition: true,
-  listStyleImage: true,
-  letterSpacing: true,
-  fill: {
-    property: 'fill',
-    scale: 'colors'
-  },
-  stroke: {
-    property: 'stroke',
-    scale: 'colors'
-  },
-  objectFit: true,
-  objectPosition: true,
-  backgroundAttachment: {
-    property: 'backgroundAttachment'
-  },
-  outline: true,
-  float: true,
-  willChange: true,
-  bgAttachment: {
-    property: 'backgroundAttachment'
-  },
-  textDecor: {
-    property: 'textDecoration'
-  },
-  listStylePos: true,
-  listStyleImg: true,
-  accelerator: true,
-  alignmentBaseline: true,
-  all: true,
-  animationDelay: true,
-  animationDirection: true,
-  animationDuration: true,
-  animationFillMode: true,
-  animationIterationCount: true,
-  animationName: true,
-  animationPlayState: true,
-  animationTimingFunction: true,
-  aspectRatio: true,
-  audioLevel: true,
-  azimuth: true,
-  backdropFilter: true,
-  backfaceVisibility: true,
-  backgroundBlendMode: true,
-  backgroundClip: true,
-  backgroundOrigin: true,
-  backgroundPositionX: true,
-  backgroundPositionY: true,
-  backgroundRepeatX: true,
-  backgroundRepeatY: true,
-  baselineShift: true,
-  baselineSource: true,
-  behavior: true,
-  blockEllipsis: true,
-  blockSize: true,
-  blockStep: true,
-  blockStepAlign: true,
-  blockStepInsert: true,
-  blockStepRound: true,
-  blockStepSize: true,
-  bookmarkLabel: true,
-  bookmarkLevel: true,
-  bookmarkState: true,
-  borderBlock: true,
-  borderBlockColor: true,
-  borderBlockEnd: true,
-  borderBlockEndColor: true,
-  borderBlockEndStyle: true,
-  borderBlockEndWidth: true,
-  borderBlockStart: true,
-  borderBlockStartColor: true,
-  borderBlockStartStyle: true,
-  borderBlockStartWidth: true,
-  borderBlockStyle: true,
-  borderBlockWidth: true,
-  borderBoundary: true,
-  borderCollapse: true,
-  borderEndEndRadius: true,
-  borderEndStartRadius: true,
-  borderImage: true,
-  borderImageOutset: true,
-  borderImageRepeat: true,
-  borderImageSlice: true,
-  borderImageSource: true,
-  borderImageWidth: true,
-  borderInline: true,
-  borderInlineColor: true,
-  borderInlineEnd: true,
-  borderInlineEndColor: true,
-  borderInlineEndStyle: true,
-  borderInlineEndWidth: true,
-  borderInlineStart: true,
-  borderInlineStartColor: true,
-  borderInlineStartStyle: true,
-  borderInlineStartWidth: true,
-  borderInlineStyle: true,
-  borderInlineWidth: true,
-  borderSpacing: true,
-  borderStartEndRadius: true,
-  borderStartStartRadius: true,
-  boxDecorationBreak: true,
-  boxSnap: true,
-  breakAfter: true,
-  breakBefore: true,
-  breakInside: true,
-  bufferedRendering: true,
-  captionSide: true,
-  caret: true,
-  caretColor: true,
-  caretShape: true,
-  chains: true,
-  clear: true,
-  clip: true,
-  clipPath: true,
-  clipRule: true,
-  colorAdjust: true,
-  colorInterpolation: true,
-  colorInterpolationFilters: true,
-  colorProfile: true,
-  colorRendering: true,
-  colorScheme: true,
-  columnCount: true,
-  columnFill: true,
-  columnGap: true,
-  columnProgression: true,
-  columnRule: true,
-  columnRuleColor: true,
-  columnRuleStyle: true,
-  columnRuleWidth: true,
-  columnSpan: true,
-  columnWidth: true,
-  columns: true,
-  contain: true,
-  containIntrinsicSize: true,
-  content: true,
-  contentVisibility: true,
-  continue: true,
-  counterIncrement: true,
-  counterReset: true,
-  counterSet: true,
-  cue: true,
-  cueAfter: true,
-  cueBefore: true,
-  direction: true,
-  displayAlign: true,
-  dominantBaseline: true,
-  elevation: true,
-  emptyCells: true,
-  enableBackground: true,
-  fillBreak: true,
-  fillColor: true,
-  fillImage: true,
-  fillOpacity: true,
-  fillOrigin: true,
-  fillPosition: true,
-  fillRepeat: true,
-  fillRule: true,
-  fillSize: true,
-  filter: true,
-  flexFlow: true,
-  floatDefer: true,
-  floatOffset: true,
-  floatReference: true,
-  floodColor: true,
-  floodOpacity: true,
-  flow: true,
-  flowFrom: true,
-  flowInto: true,
-  font: true,
-  fontDisplay: true,
-  fontFeatureSettings: true,
-  fontKerning: true,
-  fontLanguageOverride: true,
-  fontOpticalSizing: true,
-  fontPalette: true,
-  fontSizeAdjust: true,
-  fontStretch: true,
-  fontSynthesis: true,
-  fontSynthesisSmallCaps: true,
-  fontSynthesisStyle: true,
-  fontSynthesisWeight: true,
-  fontVariant: true,
-  fontVariantAlternates: true,
-  fontVariantCaps: true,
-  fontVariantEastAsian: true,
-  fontVariantEmoji: true,
-  fontVariantLigatures: true,
-  fontVariantNumeric: true,
-  fontVariantPosition: true,
-  fontVariationSettings: true,
-  footnoteDisplay: true,
-  footnotePolicy: true,
-  forcedColorAdjust: true,
-  gap: true,
-  glyphOrientationHorizontal: true,
-  glyphOrientationVertical: true,
-  grid: true,
-  gridColumnEnd: true,
-  gridColumnStart: true,
-  gridRowEnd: true,
-  gridRowStart: true,
-  gridTemplate: true,
-  hangingPunctuation: true,
-  hyphenateCharacter: true,
-  hyphenateLimitChars: true,
-  hyphenateLimitLast: true,
-  hyphenateLimitLines: true,
-  hyphenateLimitZone: true,
-  hyphens: true,
-  imageOrientation: true,
-  imageRendering: true,
-  imageResolution: true,
-  imeMode: true,
-  inherits: true,
-  initialLetter: true,
-  initialLetterAlign: true,
-  initialLetterWrap: true,
-  initialValue: true,
-  inlineSize: true,
-  inlineSizing: true,
-  inputFormat: true,
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
-  isolation: true,
-  kerning: true,
-  layoutFlow: true,
-  layoutGrid: true,
-  layoutGridChar: true,
-  layoutGridLine: true,
-  layoutGridMode: true,
-  layoutGridType: true,
-  leadingTrim: true,
-  lightingColor: true,
-  lineBreak: true,
-  lineClamp: true,
-  lineGrid: true,
-  lineHeightStep: true,
-  lineIncrement: true,
-  linePadding: true,
-  lineSnap: true,
-  listStyle: true,
-  marginBlock: true,
-  marginBlockEnd: true,
-  marginBlockStart: true,
-  marginBreak: true,
-  marginInline: true,
-  marginInlineEnd: true,
-  marginInlineStart: true,
-  marginTrim: true,
-  marker: true,
-  markerEnd: true,
-  markerKnockoutLeft: true,
-  markerKnockoutRight: true,
-  markerMid: true,
-  markerOffset: true,
-  markerPattern: true,
-  markerSegment: true,
-  markerSide: true,
-  markerStart: true,
-  marks: true,
-  mask: true,
-  maskBorder: true,
-  maskBorderMode: true,
-  maskBorderOutset: true,
-  maskBorderRepeat: true,
-  maskBorderSlice: true,
-  maskBorderSource: true,
-  maskBorderWidth: true,
-  maskClip: true,
-  maskComposite: true,
-  maskImage: true,
-  maskMode: true,
-  maskOrigin: true,
-  maskPosition: true,
-  maskPositionX: true,
-  maskPositionY: true,
-  maskRepeat: true,
-  maskSize: true,
-  maskSourceType: true,
-  maskType: true,
-  maxBlockSize: true,
-  maxInlineSize: true,
-  maxLines: true,
-  maxZoom: true,
-  minBlockSize: true,
-  minInlineSize: true,
-  minZoom: true,
-  mixBlendMode: true,
-  motion: true,
-  motionOffset: true,
-  motionPath: true,
-  motionRotation: true,
-  navDown: true,
-  navIndex: true,
-  navLeft: true,
-  navRight: true,
-  navUp: true,
-  offset: true,
-  offsetAnchor: true,
-  offsetBlockEnd: true,
-  offsetBlockStart: true,
-  offsetDistance: true,
-  offsetInlineEnd: true,
-  offsetInlineStart: true,
-  offsetPath: true,
-  offsetPosition: true,
-  offsetRotate: true,
-  offsetRotation: true,
-  orientation: true,
-  orphans: true,
-  outlineColor: true,
-  outlineOffset: true,
-  outlineStyle: true,
-  outlineWidth: true,
-  overflowAnchor: true,
-  overflowBlock: true,
-  overflowClipMargin: true,
-  overflowInline: true,
-  overscrollBehavior: true,
-  overscrollBehaviorBlock: true,
-  overscrollBehaviorInline: true,
-  overscrollBehaviorX: true,
-  overscrollBehaviorY: true,
-  paddingBlock: true,
-  paddingBlockEnd: true,
-  paddingBlockStart: true,
-  paddingInline: true,
-  paddingInlineEnd: true,
-  paddingInlineStart: true,
-  page: true,
-  pageBreakAfter: true,
-  pageBreakBefore: true,
-  pageBreakInside: true,
-  pageOrientation: true,
-  paintOrder: true,
-  pause: true,
-  pauseAfter: true,
-  pauseBefore: true,
-  penAction: true,
-  perspective: true,
-  perspectiveOrigin: true,
-  perspectiveOriginX: true,
-  perspectiveOriginY: true,
-  pitch: true,
-  pitchRange: true,
-  placeContent: true,
-  placeItems: true,
-  placeSelf: true,
-  playDuring: true,
-  propertyName: true,
-  quotes: true,
-  regionFragment: true,
-  rest: true,
-  restAfter: true,
-  restBefore: true,
-  richness: true,
-  rotate: true,
-  rowGap: true,
-  rubyAlign: true,
-  rubyMerge: true,
-  rubyOverhang: true,
-  rubyPosition: true,
-  running: true,
-  scale: true,
-  scrollBehavior: true,
-  scrollMargin: true,
-  scrollMarginBlock: true,
-  scrollMarginBlockEnd: true,
-  scrollMarginBlockStart: true,
-  scrollMarginBottom: true,
-  scrollMarginInline: true,
-  scrollMarginInlineEnd: true,
-  scrollMarginInlineStart: true,
-  scrollMarginLeft: true,
-  scrollMarginRight: true,
-  scrollMarginTop: true,
-  scrollPadding: true,
-  scrollPaddingBlock: true,
-  scrollPaddingBlockEnd: true,
-  scrollPaddingBlockStart: true,
-  scrollPaddingBottom: true,
-  scrollPaddingInline: true,
-  scrollPaddingInlineEnd: true,
-  scrollPaddingInlineStart: true,
-  scrollPaddingLeft: true,
-  scrollPaddingRight: true,
-  scrollPaddingTop: true,
-  scrollSnapAlign: true,
-  scrollSnapCoordinate: true,
-  scrollSnapDestination: true,
-  scrollSnapMargin: true,
-  scrollSnapMarginBottom: true,
-  scrollSnapMarginLeft: true,
-  scrollSnapMarginRight: true,
-  scrollSnapMarginTop: true,
-  scrollSnapPointsX: true,
-  scrollSnapPointsY: true,
-  scrollSnapStop: true,
-  scrollSnapType: true,
-  scrollSnapTypeX: true,
-  scrollSnapTypeY: true,
-  scrollbarArrowColor: true,
-  scrollbarBaseColor: true,
-  scrollbarColor: true,
-  scrollbarDarkShadowColor: true,
-  scrollbarDarkshadowColor: true,
-  scrollbarFaceColor: true,
-  scrollbarGutter: true,
-  scrollbarHighlightColor: true,
-  scrollbarShadowColor: true,
-  scrollbarTrackColor: true,
-  scrollbarWidth: true,
-  scrollbar3DLightColor: true,
-  scrollbar3DlightColor: true,
-  shapeImageThreshold: true,
-  shapeInside: true,
-  shapeMargin: true,
-  shapeOutside: true,
-  shapeRendering: true,
-  size: true,
-  snapHeight: true,
-  solidColor: true,
-  solidOpacity: true,
-  spatialNavigationAction: true,
-  spatialNavigationContain: true,
-  spatialNavigationFunction: true,
-  speak: true,
-  speakAs: true,
-  speakHeader: true,
-  speakNumeral: true,
-  speakPunctuation: true,
-  speechRate: true,
-  stopColor: true,
-  stopOpacity: true,
-  stress: true,
-  stringSet: true,
-  supportedColorSchemes: true,
-  syntax: true,
-  tabSize: true,
-  tableLayout: true,
-  textAlignAll: true,
-  textAlignLast: true,
-  textAnchor: true,
-  textAutospace: true,
-  textCombineUpright: true,
-  textDecorationBlink: true,
-  textDecorationColor: true,
-  textDecorationLine: true,
-  textDecorationLineThrough: true,
-  textDecorationNone: true,
-  textDecorationOverline: true,
-  textDecorationSkip: true,
-  textDecorationSkipBox: true,
-  textDecorationSkipInk: true,
-  textDecorationSkipInset: true,
-  textDecorationSkipSelf: true,
-  textDecorationSkipSpaces: true,
-  textDecorationStyle: true,
-  textDecorationThickness: true,
-  textDecorationUnderline: true,
-  textEdge: true,
-  textEmphasis: true,
-  textEmphasisColor: true,
-  textEmphasisPosition: true,
-  textEmphasisSkip: true,
-  textEmphasisStyle: true,
-  textGroupAlign: true,
-  textIndent: true,
-  textJustify: true,
-  textJustifyTrim: true,
-  textKashida: true,
-  textKashidaSpace: true,
-  textLineThrough: true,
-  textLineThroughColor: true,
-  textLineThroughMode: true,
-  textLineThroughStyle: true,
-  textLineThroughWidth: true,
-  textOrientation: true,
-  textOverline: true,
-  textOverlineColor: true,
-  textOverlineMode: true,
-  textOverlineStyle: true,
-  textOverlineWidth: true,
-  textRendering: true,
-  textSizeAdjust: true,
-  textSpaceCollapse: true,
-  textSpaceTrim: true,
-  textSpacing: true,
-  textUnderline: true,
-  textUnderlineColor: true,
-  textUnderlineMode: true,
-  textUnderlineOffset: true,
-  textUnderlinePosition: true,
-  textUnderlineStyle: true,
-  textUnderlineWidth: true,
-  textWrap: true,
-  touchAction: true,
-  touchActionDelay: true,
-  transformBox: true,
-  transformOriginX: true,
-  transformOriginY: true,
-  transformOriginZ: true,
-  transformStyle: true,
-  transitionDelay: true,
-  transitionDuration: true,
-  transitionProperty: true,
-  transitionTimingFunction: true,
-  translate: true,
-  ucAltSkin: true,
-  ucSkin: true,
-  unicodeBidi: true,
-  unicodeRange: true,
-  userZoom: true,
-  vectorEffect: true,
-  viewportFill: true,
-  viewportFillOpacity: true,
-  viewportFit: true,
-  voiceBalance: true,
-  voiceDuration: true,
-  voiceFamily: true,
-  voicePitch: true,
-  voiceRange: true,
-  voiceRate: true,
-  voiceStress: true,
-  voiceVolume: true,
-  volume: true,
-  widows: true,
-  wordBoundaryDetection: true,
-  wordBoundaryExpansion: true,
-  wordSpacing: true,
-  wordWrap: true,
-  wrapAfter: true,
-  wrapBefore: true,
-  wrapFlow: true,
-  wrapInside: true,
-  wrapThrough: true,
-  writingMode: true,
-  x: true,
-  y: true,
-  zoom: true
-}
-
-config.bgAttachment = config.backgroundAttachment
-config.textDecor = config.textDecoration
-config.listStylePos = config.listStylePosition
-config.listStyleImg = config.listStyleImage
-
-const styledConfig = system(config)
-
-export default styledConfig
diff --git a/packages/chakra-ui-core/src/config/props/props.js b/packages/chakra-ui-core/src/config/props/props.js
deleted file mode 100644
index 1ce12f9e..00000000
--- a/packages/chakra-ui-core/src/config/props/props.js
+++ /dev/null
@@ -1,704 +0,0 @@
-import { SNA } from './props.types'
-
-/**
- * All base CSS properties are adapted from `known-css-properties
- * @see https://www.npmjs.com/package/known-css-properties
- *
- * Here we include all our chakra CSS property shorthands by passing
- * them together with the other known CSS properties.
- *
- * The other we also update our styled-system config to sesolve
- * these values and include them in the CSS properties it consumes.
- */
-const baseProps = {
-  accelerator: SNA,
-  alignContent: SNA,
-  alignItems: SNA,
-  alignSelf: SNA,
-  alignmentBaseline: SNA,
-  all: SNA,
-  animation: SNA,
-  animationDelay: SNA,
-  animationDirection: SNA,
-  animationDuration: SNA,
-  animationFillMode: SNA,
-  animationIterationCount: SNA,
-  animationName: SNA,
-  animationPlayState: SNA,
-  animationTimingFunction: SNA,
-  appearance: SNA,
-  aspectRatio: SNA,
-  audioLevel: SNA,
-  azimuth: SNA,
-  backdropFilter: SNA,
-  backfaceVisibility: SNA,
-  background: SNA,
-  backgroundAttachment: SNA,
-  backgroundBlendMode: SNA,
-  backgroundClip: SNA,
-  backgroundColor: SNA,
-  backgroundImage: SNA,
-  backgroundOrigin: SNA,
-  backgroundPosition: SNA,
-  backgroundPositionX: SNA,
-  backgroundPositionY: SNA,
-  backgroundRepeat: SNA,
-  backgroundRepeatX: SNA,
-  backgroundRepeatY: SNA,
-  backgroundSize: SNA,
-  baselineShift: SNA,
-  baselineSource: SNA,
-  behavior: SNA,
-  blockEllipsis: SNA,
-  blockSize: SNA,
-  blockStep: SNA,
-  blockStepAlign: SNA,
-  blockStepInsert: SNA,
-  blockStepRound: SNA,
-  blockStepSize: SNA,
-  bookmarkLabel: SNA,
-  bookmarkLevel: SNA,
-  bookmarkState: SNA,
-  border: SNA,
-  borderBlock: SNA,
-  borderBlockColor: SNA,
-  borderBlockEnd: SNA,
-  borderBlockEndColor: SNA,
-  borderBlockEndStyle: SNA,
-  borderBlockEndWidth: SNA,
-  borderBlockStart: SNA,
-  borderBlockStartColor: SNA,
-  borderBlockStartStyle: SNA,
-  borderBlockStartWidth: SNA,
-  borderBlockStyle: SNA,
-  borderBlockWidth: SNA,
-  borderBottom: SNA,
-  borderBottomColor: SNA,
-  borderBottomLeftRadius: SNA,
-  borderBottomRightRadius: SNA,
-  borderBottomStyle: SNA,
-  borderBottomWidth: SNA,
-  borderBoundary: SNA,
-  borderCollapse: SNA,
-  borderColor: SNA,
-  borderEndEndRadius: SNA,
-  borderEndStartRadius: SNA,
-  borderImage: SNA,
-  borderImageOutset: SNA,
-  borderImageRepeat: SNA,
-  borderImageSlice: SNA,
-  borderImageSource: SNA,
-  borderImageWidth: SNA,
-  borderInline: SNA,
-  borderInlineColor: SNA,
-  borderInlineEnd: SNA,
-  borderInlineEndColor: SNA,
-  borderInlineEndStyle: SNA,
-  borderInlineEndWidth: SNA,
-  borderInlineStart: SNA,
-  borderInlineStartColor: SNA,
-  borderInlineStartStyle: SNA,
-  borderInlineStartWidth: SNA,
-  borderInlineStyle: SNA,
-  borderInlineWidth: SNA,
-  borderLeft: SNA,
-  borderLeftColor: SNA,
-  borderLeftStyle: SNA,
-  borderLeftWidth: SNA,
-  borderRadius: SNA,
-  borderRight: SNA,
-  borderRightColor: SNA,
-  borderRightStyle: SNA,
-  borderRightWidth: SNA,
-  borderSpacing: SNA,
-  borderStartEndRadius: SNA,
-  borderStartStartRadius: SNA,
-  borderStyle: SNA,
-  borderTop: SNA,
-  borderTopColor: SNA,
-  borderTopLeftRadius: SNA,
-  borderTopRightRadius: SNA,
-  borderTopStyle: SNA,
-  borderTopWidth: SNA,
-  borderWidth: SNA,
-  bottom: SNA,
-  boxDecorationBreak: SNA,
-  boxShadow: SNA,
-  boxSizing: SNA,
-  boxSnap: SNA,
-  breakAfter: SNA,
-  breakBefore: SNA,
-  breakInside: SNA,
-  bufferedRendering: SNA,
-  captionSide: SNA,
-  caret: SNA,
-  caretColor: SNA,
-  caretShape: SNA,
-  chains: SNA,
-  clear: SNA,
-  clip: SNA,
-  clipPath: SNA,
-  clipRule: SNA,
-  color: SNA,
-  colorAdjust: SNA,
-  colorInterpolation: SNA,
-  colorInterpolationFilters: SNA,
-  colorProfile: SNA,
-  colorRendering: SNA,
-  colorScheme: SNA,
-  columnCount: SNA,
-  columnFill: SNA,
-  columnGap: SNA,
-  columnProgression: SNA,
-  columnRule: SNA,
-  columnRuleColor: SNA,
-  columnRuleStyle: SNA,
-  columnRuleWidth: SNA,
-  columnSpan: SNA,
-  columnWidth: SNA,
-  columns: SNA,
-  contain: SNA,
-  containIntrinsicSize: SNA,
-  content: SNA,
-  contentVisibility: SNA,
-  continue: SNA,
-  counterIncrement: SNA,
-  counterReset: SNA,
-  counterSet: SNA,
-  cue: SNA,
-  cueAfter: SNA,
-  cueBefore: SNA,
-  cursor: SNA,
-  d: SNA,
-  direction: SNA,
-  display: SNA,
-  displayAlign: SNA,
-  dominantBaseline: SNA,
-  elevation: SNA,
-  emptyCells: SNA,
-  enableBackground: SNA,
-  fill: SNA,
-  fillBreak: SNA,
-  fillColor: SNA,
-  fillImage: SNA,
-  fillOpacity: SNA,
-  fillOrigin: SNA,
-  fillPosition: SNA,
-  fillRepeat: SNA,
-  fillRule: SNA,
-  fillSize: SNA,
-  filter: SNA,
-  flex: SNA,
-  flexBasis: SNA,
-  flexDirection: SNA,
-  flexFlow: SNA,
-  flexGrow: SNA,
-  flexShrink: SNA,
-  flexWrap: SNA,
-  float: SNA,
-  floatDefer: SNA,
-  floatOffset: SNA,
-  floatReference: SNA,
-  floodColor: SNA,
-  floodOpacity: SNA,
-  flow: SNA,
-  flowFrom: SNA,
-  flowInto: SNA,
-  font: SNA,
-  fontDisplay: SNA,
-  fontFamily: {
-    type: SNA,
-    default: 'body'
-  },
-  fontFeatureSettings: SNA,
-  fontKerning: SNA,
-  fontLanguageOverride: SNA,
-  fontOpticalSizing: SNA,
-  fontPalette: SNA,
-  fontSize: SNA,
-  fontSizeAdjust: SNA,
-  fontStretch: SNA,
-  fontStyle: SNA,
-  fontSynthesis: SNA,
-  fontSynthesisSmallCaps: SNA,
-  fontSynthesisStyle: SNA,
-  fontSynthesisWeight: SNA,
-  fontVariant: SNA,
-  fontVariantAlternates: SNA,
-  fontVariantCaps: SNA,
-  fontVariantEastAsian: SNA,
-  fontVariantEmoji: SNA,
-  fontVariantLigatures: SNA,
-  fontVariantNumeric: SNA,
-  fontVariantPosition: SNA,
-  fontVariationSettings: SNA,
-  fontWeight: SNA,
-  footnoteDisplay: SNA,
-  footnotePolicy: SNA,
-  forcedColorAdjust: SNA,
-  gap: SNA,
-  glyphOrientationHorizontal: SNA,
-  glyphOrientationVertical: SNA,
-  grid: SNA,
-  gridArea: SNA,
-  gridAutoColumns: SNA,
-  gridAutoFlow: SNA,
-  gridAutoRows: SNA,
-  gridColumn: SNA,
-  gridColumnEnd: SNA,
-  gridColumnGap: SNA,
-  gridColumnStart: SNA,
-  gridGap: SNA,
-  gridRow: SNA,
-  gridRowEnd: SNA,
-  gridRowGap: SNA,
-  gridRowStart: SNA,
-  gridTemplate: SNA,
-  gridTemplateAreas: SNA,
-  gridTemplateColumns: SNA,
-  gridTemplateRows: SNA,
-  hangingPunctuation: SNA,
-  height: SNA,
-  hyphenateCharacter: SNA,
-  hyphenateLimitChars: SNA,
-  hyphenateLimitLast: SNA,
-  hyphenateLimitLines: SNA,
-  hyphenateLimitZone: SNA,
-  hyphens: SNA,
-  imageOrientation: SNA,
-  imageRendering: SNA,
-  imageResolution: SNA,
-  imeMode: SNA,
-  inherits: SNA,
-  initialLetter: SNA,
-  initialLetterAlign: SNA,
-  initialLetterWrap: SNA,
-  initialValue: SNA,
-  inlineSize: SNA,
-  inlineSizing: SNA,
-  inputFormat: SNA,
-  inset: SNA,
-  insetBlock: SNA,
-  insetBlockEnd: SNA,
-  insetBlockStart: SNA,
-  insetInline: SNA,
-  insetInlineEnd: SNA,
-  insetInlineStart: SNA,
-  isolation: SNA,
-  justifyContent: SNA,
-  justifyItems: SNA,
-  justifySelf: SNA,
-  kerning: SNA,
-  layoutFlow: SNA,
-  layoutGrid: SNA,
-  layoutGridChar: SNA,
-  layoutGridLine: SNA,
-  layoutGridMode: SNA,
-  layoutGridType: SNA,
-  leadingTrim: SNA,
-  left: SNA,
-  letterSpacing: SNA,
-  lightingColor: SNA,
-  lineBreak: SNA,
-  lineClamp: SNA,
-  lineGrid: SNA,
-  lineHeight: SNA,
-  lineHeightStep: SNA,
-  lineIncrement: SNA,
-  linePadding: SNA,
-  lineSnap: SNA,
-  listStyle: SNA,
-  listStyleImage: SNA,
-  listStylePosition: SNA,
-  listStyleType: SNA,
-  margin: SNA,
-  marginBlock: SNA,
-  marginBlockEnd: SNA,
-  marginBlockStart: SNA,
-  marginBottom: SNA,
-  marginBreak: SNA,
-  marginInline: SNA,
-  marginInlineEnd: SNA,
-  marginInlineStart: SNA,
-  marginLeft: SNA,
-  marginRight: SNA,
-  marginTop: SNA,
-  marginTrim: SNA,
-  marker: SNA,
-  markerEnd: SNA,
-  markerKnockoutLeft: SNA,
-  markerKnockoutRight: SNA,
-  markerMid: SNA,
-  markerOffset: SNA,
-  markerPattern: SNA,
-  markerSegment: SNA,
-  markerSide: SNA,
-  markerStart: SNA,
-  marks: SNA,
-  mask: SNA,
-  maskBorder: SNA,
-  maskBorderMode: SNA,
-  maskBorderOutset: SNA,
-  maskBorderRepeat: SNA,
-  maskBorderSlice: SNA,
-  maskBorderSource: SNA,
-  maskBorderWidth: SNA,
-  maskClip: SNA,
-  maskComposite: SNA,
-  maskImage: SNA,
-  maskMode: SNA,
-  maskOrigin: SNA,
-  maskPosition: SNA,
-  maskPositionX: SNA,
-  maskPositionY: SNA,
-  maskRepeat: SNA,
-  maskSize: SNA,
-  maskSourceType: SNA,
-  maskType: SNA,
-  maxBlockSize: SNA,
-  maxHeight: SNA,
-  maxInlineSize: SNA,
-  maxLines: SNA,
-  maxWidth: SNA,
-  maxZoom: SNA,
-  minBlockSize: SNA,
-  minHeight: SNA,
-  minInlineSize: SNA,
-  minWidth: SNA,
-  minZoom: SNA,
-  mixBlendMode: SNA,
-  motion: SNA,
-  motionOffset: SNA,
-  motionPath: SNA,
-  motionRotation: SNA,
-  navDown: SNA,
-  navIndex: SNA,
-  navLeft: SNA,
-  navRight: SNA,
-  navUp: SNA,
-  objectFit: SNA,
-  objectPosition: SNA,
-  offset: SNA,
-  offsetAnchor: SNA,
-  offsetBlockEnd: SNA,
-  offsetBlockStart: SNA,
-  offsetDistance: SNA,
-  offsetInlineEnd: SNA,
-  offsetInlineStart: SNA,
-  offsetPath: SNA,
-  offsetPosition: SNA,
-  offsetRotate: SNA,
-  offsetRotation: SNA,
-  opacity: SNA,
-  order: SNA,
-  orientation: SNA,
-  orphans: SNA,
-  outline: SNA,
-  outlineColor: SNA,
-  outlineOffset: SNA,
-  outlineStyle: SNA,
-  outlineWidth: SNA,
-  overflow: SNA,
-  overflowAnchor: SNA,
-  overflowBlock: SNA,
-  overflowClipMargin: SNA,
-  overflowInline: SNA,
-  overflowWrap: SNA,
-  overflowX: SNA,
-  overflowY: SNA,
-  overscrollBehavior: SNA,
-  overscrollBehaviorBlock: SNA,
-  overscrollBehaviorInline: SNA,
-  overscrollBehaviorX: SNA,
-  overscrollBehaviorY: SNA,
-  padding: SNA,
-  paddingBlock: SNA,
-  paddingBlockEnd: SNA,
-  paddingBlockStart: SNA,
-  paddingBottom: SNA,
-  paddingInline: SNA,
-  paddingInlineEnd: SNA,
-  paddingInlineStart: SNA,
-  paddingLeft: SNA,
-  paddingRight: SNA,
-  paddingTop: SNA,
-  page: SNA,
-  pageBreakAfter: SNA,
-  pageBreakBefore: SNA,
-  pageBreakInside: SNA,
-  pageOrientation: SNA,
-  paintOrder: SNA,
-  pause: SNA,
-  pauseAfter: SNA,
-  pauseBefore: SNA,
-  penAction: SNA,
-  perspective: SNA,
-  perspectiveOrigin: SNA,
-  perspectiveOriginX: SNA,
-  perspectiveOriginY: SNA,
-  pitch: SNA,
-  pitchRange: SNA,
-  placeContent: SNA,
-  placeItems: SNA,
-  placeSelf: SNA,
-  playDuring: SNA,
-  pointerEvents: SNA,
-  position: SNA,
-  propertyName: SNA,
-  quotes: SNA,
-  regionFragment: SNA,
-  resize: SNA,
-  rest: SNA,
-  restAfter: SNA,
-  restBefore: SNA,
-  richness: SNA,
-  right: SNA,
-  rotate: SNA,
-  rowGap: SNA,
-  rubyAlign: SNA,
-  rubyMerge: SNA,
-  rubyOverhang: SNA,
-  rubyPosition: SNA,
-  running: SNA,
-  scale: SNA,
-  scrollBehavior: SNA,
-  scrollMargin: SNA,
-  scrollMarginBlock: SNA,
-  scrollMarginBlockEnd: SNA,
-  scrollMarginBlockStart: SNA,
-  scrollMarginBottom: SNA,
-  scrollMarginInline: SNA,
-  scrollMarginInlineEnd: SNA,
-  scrollMarginInlineStart: SNA,
-  scrollMarginLeft: SNA,
-  scrollMarginRight: SNA,
-  scrollMarginTop: SNA,
-  scrollPadding: SNA,
-  scrollPaddingBlock: SNA,
-  scrollPaddingBlockEnd: SNA,
-  scrollPaddingBlockStart: SNA,
-  scrollPaddingBottom: SNA,
-  scrollPaddingInline: SNA,
-  scrollPaddingInlineEnd: SNA,
-  scrollPaddingInlineStart: SNA,
-  scrollPaddingLeft: SNA,
-  scrollPaddingRight: SNA,
-  scrollPaddingTop: SNA,
-  scrollSnapAlign: SNA,
-  scrollSnapCoordinate: SNA,
-  scrollSnapDestination: SNA,
-  scrollSnapMargin: SNA,
-  scrollSnapMarginBottom: SNA,
-  scrollSnapMarginLeft: SNA,
-  scrollSnapMarginRight: SNA,
-  scrollSnapMarginTop: SNA,
-  scrollSnapPointsX: SNA,
-  scrollSnapPointsY: SNA,
-  scrollSnapStop: SNA,
-  scrollSnapType: SNA,
-  scrollSnapTypeX: SNA,
-  scrollSnapTypeY: SNA,
-  scrollbarArrowColor: SNA,
-  scrollbarBaseColor: SNA,
-  scrollbarColor: SNA,
-  scrollbarDarkShadowColor: SNA,
-  scrollbarDarkshadowColor: SNA,
-  scrollbarFaceColor: SNA,
-  scrollbarGutter: SNA,
-  scrollbarHighlightColor: SNA,
-  scrollbarShadowColor: SNA,
-  scrollbarTrackColor: SNA,
-  scrollbarWidth: SNA,
-  scrollbar3DLightColor: SNA,
-  scrollbar3DlightColor: SNA,
-  shapeImageThreshold: SNA,
-  shapeInside: SNA,
-  shapeMargin: SNA,
-  shapeOutside: SNA,
-  shapeRendering: SNA,
-  size: SNA,
-  snapHeight: SNA,
-  solidColor: SNA,
-  solidOpacity: SNA,
-  spatialNavigationAction: SNA,
-  spatialNavigationContain: SNA,
-  spatialNavigationFunction: SNA,
-  speak: SNA,
-  speakAs: SNA,
-  speakHeader: SNA,
-  speakNumeral: SNA,
-  speakPunctuation: SNA,
-  speechRate: SNA,
-  stopColor: SNA,
-  stopOpacity: SNA,
-  stress: SNA,
-  stringSet: SNA,
-  stroke: SNA,
-  supportedColorSchemes: SNA,
-  syntax: SNA,
-  tabSize: SNA,
-  tableLayout: SNA,
-  textAlign: SNA,
-  textAlignAll: SNA,
-  textAlignLast: SNA,
-  textAnchor: SNA,
-  textAutospace: SNA,
-  textCombineUpright: SNA,
-  textDecoration: SNA,
-  textDecorationBlink: SNA,
-  textDecorationColor: SNA,
-  textDecorationLine: SNA,
-  textDecorationLineThrough: SNA,
-  textDecorationNone: SNA,
-  textDecorationOverline: SNA,
-  textDecorationSkip: SNA,
-  textDecorationSkipBox: SNA,
-  textDecorationSkipInk: SNA,
-  textDecorationSkipInset: SNA,
-  textDecorationSkipSelf: SNA,
-  textDecorationSkipSpaces: SNA,
-  textDecorationStyle: SNA,
-  textDecorationThickness: SNA,
-  textDecorationUnderline: SNA,
-  textEdge: SNA,
-  textEmphasis: SNA,
-  textEmphasisColor: SNA,
-  textEmphasisPosition: SNA,
-  textEmphasisSkip: SNA,
-  textEmphasisStyle: SNA,
-  textGroupAlign: SNA,
-  textIndent: SNA,
-  textJustify: SNA,
-  textJustifyTrim: SNA,
-  textKashida: SNA,
-  textKashidaSpace: SNA,
-  textLineThrough: SNA,
-  textLineThroughColor: SNA,
-  textLineThroughMode: SNA,
-  textLineThroughStyle: SNA,
-  textLineThroughWidth: SNA,
-  textOrientation: SNA,
-  textOverflow: SNA,
-  textOverline: SNA,
-  textOverlineColor: SNA,
-  textOverlineMode: SNA,
-  textOverlineStyle: SNA,
-  textOverlineWidth: SNA,
-  textRendering: SNA,
-  textShadow: SNA,
-  textSizeAdjust: SNA,
-  textSpaceCollapse: SNA,
-  textSpaceTrim: SNA,
-  textSpacing: SNA,
-  textTransform: SNA,
-  textUnderline: SNA,
-  textUnderlineColor: SNA,
-  textUnderlineMode: SNA,
-  textUnderlineOffset: SNA,
-  textUnderlinePosition: SNA,
-  textUnderlineStyle: SNA,
-  textUnderlineWidth: SNA,
-  textWrap: SNA,
-  top: SNA,
-  touchAction: SNA,
-  touchActionDelay: SNA,
-  transform: SNA,
-  transformBox: SNA,
-  transformOrigin: SNA,
-  transformOriginX: SNA,
-  transformOriginY: SNA,
-  transformOriginZ: SNA,
-  transformStyle: SNA,
-  transition: SNA,
-  transitionDelay: SNA,
-  transitionDuration: SNA,
-  transitionProperty: SNA,
-  transitionTimingFunction: SNA,
-  translate: SNA,
-  ucAltSkin: SNA,
-  ucSkin: SNA,
-  unicodeBidi: SNA,
-  unicodeRange: SNA,
-  userSelect: SNA,
-  userZoom: SNA,
-  vectorEffect: SNA,
-  verticalAlign: SNA,
-  viewportFill: SNA,
-  viewportFillOpacity: SNA,
-  viewportFit: SNA,
-  visibility: SNA,
-  voiceBalance: SNA,
-  voiceDuration: SNA,
-  voiceFamily: SNA,
-  voicePitch: SNA,
-  voiceRange: SNA,
-  voiceRate: SNA,
-  voiceStress: SNA,
-  voiceVolume: SNA,
-  volume: SNA,
-  whiteSpace: SNA,
-  widows: SNA,
-  width: SNA,
-  willChange: SNA,
-  wordBoundaryDetection: SNA,
-  wordBoundaryExpansion: SNA,
-  wordBreak: SNA,
-  wordSpacing: SNA,
-  wordWrap: SNA,
-  wrapAfter: SNA,
-  wrapBefore: SNA,
-  wrapFlow: SNA,
-  wrapInside: SNA,
-  wrapThrough: SNA,
-  writingMode: SNA,
-  x: SNA,
-  y: SNA,
-  zIndex: SNA,
-  zoom: SNA,
-  bg: SNA,
-  w: SNA,
-  minW: SNA,
-  maxW: SNA,
-  h: SNA,
-  minH: SNA,
-  maxH: SNA,
-  truncate: SNA,
-  pt: SNA,
-  pr: SNA,
-  pb: SNA,
-  pl: SNA,
-  px: SNA,
-  py: SNA,
-  p: SNA,
-  mt: SNA,
-  mr: SNA,
-  ml: SNA,
-  mb: SNA,
-  mx: SNA,
-  my: SNA,
-  m: SNA,
-  rounded: SNA,
-  roundedTop: SNA,
-  roundedBottom: SNA,
-  roundedLeft: SNA,
-  roundedRight: SNA,
-  roundedTopRight: SNA,
-  roundedTopLeft: SNA,
-  roundedBottomRight: SNA,
-  roundedBottomLeft: SNA,
-  b: SNA,
-  br: SNA,
-  bb: SNA,
-  bl: SNA,
-  bt: SNA,
-  shadow: SNA,
-  pos: SNA,
-  flexDir: SNA,
-  bgImg: SNA,
-  bgImage: SNA,
-  bgSize: SNA,
-  bgPos: SNA,
-  bgRepeat: SNA
-}
-
-export default baseProps
diff --git a/packages/chakra-ui-core/src/config/props/proxy.js b/packages/chakra-ui-core/src/config/props/proxy.js
deleted file mode 100644
index 81bf452b..00000000
--- a/packages/chakra-ui-core/src/config/props/proxy.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import aliases from './props.aliases'
-
-/**
- * Proxies customized props values to styled-system prop values
- * @param {Object} props Style props object
- * @returns {Object} Final props object
- */
-export const proxyAliases = (props) => {
-  const _props = {}
-  Object.keys(props).forEach((key) => {
-    // If is aliased props
-    if (aliases[key]) {
-      // If single resolve
-      if (typeof aliases[key] === 'string') {
-        _props[aliases[key]] = props[key]
-        return
-      }
-      // If array resolve
-      if (Array.isArray(aliases[key])) {
-        aliases[key].map((declaration) => {
-          _props[declaration] = props[key]
-        })
-        return
-      }
-    }
-    // If is not aliased
-    _props[key] = props[key]
-  })
-
-  return _props
-}
diff --git a/packages/chakra-ui-core/src/config/props/proxy.test.js b/packages/chakra-ui-core/src/config/props/proxy.test.js
deleted file mode 100644
index bf4965ef..00000000
--- a/packages/chakra-ui-core/src/config/props/proxy.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { proxyAliases as pxls } from './proxy'
-
-describe('Proxy Alias props utility', () => {
-  it('should forward longhand props', () => {
-    const props = {
-      textDecoration: 'none'
-    }
-    expect(pxls(props)).toEqual(props)
-  })
-
-  it('should trap and replace single proxied prop', () => {
-    const props = {
-      d: 'flex'
-    }
-    expect(pxls(props)).toEqual({ display: 'flex' })
-  })
-
-  it('should trap and replace multiple declaration proxied props', () => {
-    const props = {
-      roundedTop: '2rem'
-    }
-    expect(pxls(props)).toEqual({
-      borderTopLeftRadius: '2rem',
-      borderTopRightRadius: '2rem'
-    })
-  })
-})
diff --git a/packages/chakra-ui-core/src/config/props/pseudo.config.js b/packages/chakra-ui-core/src/config/props/pseudo.config.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/chakra-ui-core/src/config/props/pseudo.js b/packages/chakra-ui-core/src/config/props/pseudo.js
deleted file mode 100644
index 9fc0da8b..00000000
--- a/packages/chakra-ui-core/src/config/props/pseudo.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const pseudoProps = {
-  _hover: [Object, String, Array],
-  _active: [Object, String, Array],
-  _focus: [Object, String, Array],
-  _odd: [Object, String, Array],
-  _visited: [Object, String, Array],
-  _even: [Object, String, Array],
-  _disabled: [Object, String, Array],
-  _checked: [Object, String, Array],
-  _mixed: [Object, String, Array],
-  _selected: [Object, String, Array],
-  _invalid: [Object, String, Array],
-  _pressed: [Object, String, Array],
-  _readOnly: [Object, String, Array],
-  _first: [Object, String, Array],
-  _last: [Object, String, Array],
-  _expanded: [Object, String, Array],
-  _grabbed: [Object, String, Array],
-  _notFirst: [Object, String, Array],
-  _notLast: [Object, String, Array],
-  _groupHover: [Object, String, Array],
-  _before: [Object, String, Array],
-  _after: [Object, String, Array],
-  _focusWithin: [Object, String, Array],
-  _placeholder: [Object, String, Array]
-}
-
-export default pseudoProps
diff --git a/packages/chakra-ui-core/src/index.js b/packages/chakra-ui-core/src/index.js
index 3b380c32..84b277c8 100644
--- a/packages/chakra-ui-core/src/index.js
+++ b/packages/chakra-ui-core/src/index.js
@@ -122,9 +122,6 @@ export { default as CVisuallyHidden } from './CVisuallyHidden'
 // Default theme object
 export { default as defaultTheme } from '@chakra-ui/theme-vue'
 
-// Props objects
-export { baseProps as boxProps, pseudoProps as pseudoBoxProps } from './config'
-
 // Internal icons
 export { parsePackIcons } from './utils/icons'
 export { default as internalIcons } from './lib/internal-icons'
diff --git a/packages/chakra-ui-core/src/lib/theme/borders.js b/packages/chakra-ui-core/src/lib/theme/borders.js
deleted file mode 100644
index e8936631..00000000
--- a/packages/chakra-ui-core/src/lib/theme/borders.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @description These border styles were adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-const borders = {
-  none: 0,
-  '1px': '1px solid',
-  '2px': '2px solid',
-  '4px': '4px solid'
-}
-
-export const borderWidths = {
-  sm: '1px',
-  md: '2px',
-  lg: '4px'
-}
-
-export default borders
diff --git a/packages/chakra-ui-core/src/lib/theme/breakpoints.js b/packages/chakra-ui-core/src/lib/theme/breakpoints.js
deleted file mode 100644
index 8104dc6f..00000000
--- a/packages/chakra-ui-core/src/lib/theme/breakpoints.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @description These breakpoint styles were adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-
-const breakpoints = ['30em', '48em', '62em', '80em']
-
-breakpoints.sm = breakpoints[0]
-breakpoints.md = breakpoints[1]
-breakpoints.lg = breakpoints[2]
-breakpoints.xl = breakpoints[3]
-
-export default breakpoints
diff --git a/packages/chakra-ui-core/src/lib/theme/colors.js b/packages/chakra-ui-core/src/lib/theme/colors.js
deleted file mode 100644
index 4e3d2061..00000000
--- a/packages/chakra-ui-core/src/lib/theme/colors.js
+++ /dev/null
@@ -1,159 +0,0 @@
-const colors = {
-  transparent: 'transparent',
-  current: 'currentColor',
-  black: '#000',
-  white: '#fff',
-  primary: '#1a72ff',
-  secondary: '#7425f3',
-  tertiary: '#fe9e4d',
-  success: '#3ea76a',
-  warning: '#ffc61a',
-  error: '#dd3b4b',
-
-  whiteAlpha: {
-    50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.06)',
-    200: 'rgba(255, 255, 255, 0.08)',
-    300: 'rgba(255, 255, 255, 0.16)',
-    400: 'rgba(255, 255, 255, 0.24)',
-    500: 'rgba(255, 255, 255, 0.36)',
-    600: 'rgba(255, 255, 255, 0.48)',
-    700: 'rgba(255, 255, 255, 0.64)',
-    800: 'rgba(255, 255, 255, 0.80)',
-    900: 'rgba(255, 255, 255, 0.92)'
-  },
-  blackAlpha: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
-    600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)'
-  },
-  gray: {
-    50: '#F7FAFC',
-    100: '#EDF2F7',
-    200: '#E2E8F0',
-    300: '#CBD5E0',
-    400: '#A0AEC0',
-    500: '#718096',
-    600: '#4A5568',
-    700: '#2D3748',
-    800: '#1A202C',
-    900: '#171923'
-  },
-  cyan: {
-    50: '#EDFDFD',
-    100: '#C4F1F9',
-    200: '#9DECF9',
-    300: '#76E4F7',
-    400: '#0BC5EA',
-    500: '#00B5D8',
-    600: '#00A3C4',
-    700: '#0987A0',
-    800: '#086F83',
-    900: '#065666'
-  },
-  teal: {
-    50: '#dbfff6',
-    100: '#affce6',
-    200: '#82fad7',
-    300: '#52f7c7',
-    400: '#24f4b7',
-    500: '#0bdb9e',
-    600: '#00aa7b',
-    700: '#007957',
-    800: '#004a34',
-    900: '#001a11'
-  },
-  green: {
-    50: '#e2fbed',
-    100: '#c2ebd4',
-    200: '#9fddb9',
-    300: '#7ccf9e',
-    400: '#58c184',
-    500: '#3ea76a',
-    600: '#2e8251',
-    700: '#1f5d3a',
-    800: '#0f3921',
-    900: '#001506'
-  },
-  orange: {
-    50: '#ffefdc',
-    100: '#ffd4ae',
-    200: '#ffba7f',
-    300: '#fe9e4d',
-    400: '#fd821b',
-    500: '#e46902',
-    600: '#b25100',
-    700: '#7f3900',
-    800: '#4e2200',
-    900: '#1f0900'
-  },
-  red: {
-    50: '#ffe5e9',
-    100: '#f9bcc2',
-    200: '#ee919a',
-    300: '#e66673',
-    400: '#dd3b4b',
-    500: '#c42231',
-    600: '#991826',
-    700: '#6e101a',
-    800: '#44070e',
-    900: '#1e0001'
-  },
-  yellow: {
-    50: '#fff9da',
-    100: '#ffecad',
-    200: '#ffdf7d',
-    300: '#ffd24b',
-    400: '#ffc61a',
-    500: '#e6ac00',
-    600: '#b38600',
-    700: '#806000',
-    800: '#4e3900',
-    900: '#1d1300'
-  },
-  indigo: {
-    50: '#f2e5ff',
-    100: '#d2b5ff',
-    200: '#b285fa',
-    300: '#9356f7',
-    400: '#7425f3',
-    500: '#5a0cda',
-    600: '#4608aa',
-    700: '#32057b',
-    800: '#1e024c',
-    900: '#0c001e'
-  },
-  pink: {
-    50: '#fff5f7',
-    100: '#fed7e2',
-    200: '#fbb6ce',
-    300: '#f687b3',
-    400: '#ed64a6',
-    500: '#d53f8c',
-    600: '#b83280',
-    700: '#97266d',
-    800: '#702459',
-    900: '#521B41'
-  },
-  blue: {
-    50: '#def0ff',
-    100: '#afd0ff',
-    200: '#7db1ff',
-    300: '#4b91ff',
-    400: '#1a72ff',
-    500: '#0058e6',
-    600: '#0045b4',
-    700: '#003182',
-    800: '#001d51',
-    900: '#000a21'
-  }
-}
-
-export default colors
diff --git a/packages/chakra-ui-core/src/lib/theme/index.js b/packages/chakra-ui-core/src/lib/theme/index.js
deleted file mode 100644
index 406bb125..00000000
--- a/packages/chakra-ui-core/src/lib/theme/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import colors from './colors'
-import typography from './typography'
-import borders, { borderWidths } from './borders'
-import opacity from './opacity'
-import radii from './radii'
-import shadows from './shadows'
-import sizes, { baseSizes } from './sizes'
-import zIndices from './z-indices'
-
-const space = baseSizes
-
-const theme = {
-  colors,
-  borders,
-  borderWidths,
-  opacity,
-  radii,
-  shadows,
-  space,
-  sizes,
-  zIndices,
-  ...typography
-}
-
-export default theme
diff --git a/packages/chakra-ui-core/src/lib/theme/opacity.js b/packages/chakra-ui-core/src/lib/theme/opacity.js
deleted file mode 100644
index 04fe3f28..00000000
--- a/packages/chakra-ui-core/src/lib/theme/opacity.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @description These opacity styles was adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-const opacity = {
-  0: '0',
-  '20%': '0.2',
-  '40%': '0.4',
-  '60%': '0.6',
-  '80%': '0.8',
-  '100%': '1'
-}
-
-export default opacity
diff --git a/packages/chakra-ui-core/src/lib/theme/radii.js b/packages/chakra-ui-core/src/lib/theme/radii.js
deleted file mode 100644
index b42ada0a..00000000
--- a/packages/chakra-ui-core/src/lib/theme/radii.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @description These radii styles was adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-const radii = {
-  none: '0',
-  sm: '0.125rem',
-  md: '0.25rem',
-  lg: '0.5rem',
-  full: '9999px'
-}
-
-export default radii
diff --git a/packages/chakra-ui-core/src/lib/theme/shadows.js b/packages/chakra-ui-core/src/lib/theme/shadows.js
deleted file mode 100644
index 296267cb..00000000
--- a/packages/chakra-ui-core/src/lib/theme/shadows.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * @description These shadow styles was adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-const shadows = {
-  sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-  xl:
-    '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-  outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
-  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-  none: 'none'
-}
-
-export default shadows
diff --git a/packages/chakra-ui-core/src/lib/theme/sizes.js b/packages/chakra-ui-core/src/lib/theme/sizes.js
deleted file mode 100644
index b36aed17..00000000
--- a/packages/chakra-ui-core/src/lib/theme/sizes.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * @description These sizes styles was adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-export const baseSizes = {
-  px: '1px',
-  0: '0',
-  1: '0.25rem',
-  2: '0.5rem',
-  3: '0.75rem',
-  4: '1rem',
-  5: '1.25rem',
-  6: '1.5rem',
-  8: '2rem',
-  10: '2.5rem',
-  12: '3rem',
-  16: '4rem',
-  20: '5rem',
-  24: '6rem',
-  32: '8rem',
-  40: '10rem',
-  48: '12rem',
-  56: '14rem',
-  64: '16rem'
-}
-
-const largeSizes = {
-  full: '100%',
-  '3xs': '14rem',
-  '2xs': '16rem',
-  xs: '20rem',
-  sm: '24rem',
-  md: '28rem',
-  lg: '32rem',
-  xl: '36rem',
-  '2xl': '42rem',
-  '3xl': '48rem',
-  '4xl': '56rem',
-  '5xl': '64rem',
-  '6xl': '72rem'
-}
-
-const containers = {
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px'
-}
-
-const sizes = {
-  ...baseSizes,
-  ...largeSizes,
-  containers
-}
-
-export default sizes
diff --git a/packages/chakra-ui-core/src/lib/theme/typography.js b/packages/chakra-ui-core/src/lib/theme/typography.js
deleted file mode 100644
index 60e3e2e2..00000000
--- a/packages/chakra-ui-core/src/lib/theme/typography.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @description This typography style was adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-const typography = {
-  letterSpacings: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em'
-  },
-  lineHeights: {
-    normal: 'normal',
-    none: '1',
-    shorter: '1.25',
-    short: '1.375',
-    base: '1.5',
-    tall: '1.625',
-    taller: '2'
-  },
-  fontWeights: {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900
-  },
-  fonts: {
-    heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
-  },
-  fontSizes: {
-    xs: '0.75rem',
-    sm: '0.875rem',
-    md: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '1.875rem',
-    '4xl': '2.25rem',
-    '5xl': '3rem',
-    '6xl': '4rem'
-  }
-}
-
-export default typography
diff --git a/packages/chakra-ui-core/src/lib/theme/utils/colors.js b/packages/chakra-ui-core/src/lib/theme/utils/colors.js
deleted file mode 100644
index 64e44ac9..00000000
--- a/packages/chakra-ui-core/src/lib/theme/utils/colors.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// Here we shall have files functions that manipulate colors based on the theme on a per component basis
-/**
- * An example would be in the `Badge` component
- * ```js
- * import { addOpacity } from '@/lib/theme/utils'
- * let foo = addOpacity('green')
- * ```
- */
diff --git a/packages/chakra-ui-core/src/lib/theme/z-indices.js b/packages/chakra-ui-core/src/lib/theme/z-indices.js
deleted file mode 100644
index 565c1bed..00000000
--- a/packages/chakra-ui-core/src/lib/theme/z-indices.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @description This typography style was adapted from [@chakra-ui](https://chakra-ui.com/)
- */
-const zIndices = {
-  hide: -1,
-  auto: 'auto',
-  base: 0,
-  docked: 10,
-  dropdown: 1000,
-  sticky: 1100,
-  banner: 1200,
-  overlay: 1300,
-  modal: 1400,
-  popover: 1500,
-  skipLink: 1600,
-  toast: 1700,
-  tooltip: 1800
-}
-
-export default zIndices
diff --git a/packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap b/packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap
new file mode 100644
index 00000000..69e0b3de
--- /dev/null
+++ b/packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: var(--colors-blue-200);
+  color: var(--colors-black);
+  border: 2px solid #0045b4;
+}
+
+<div
+    class="emotion-0"
+    data-chakra-component="FakeComponent"
+  >
+    Fake component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 2`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: var(--colors-vue-200);
+  color: var(--colors-white);
+  border: 2px solid #7db1ff;
+}
+
+<div
+    class="emotion-0"
+    data-chakra-component="FakeComponent"
+  >
+    Fake component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: var(--colors-blue-200);
+  color: var(--colors-gray-200);
+}
+
+<div
+    class="emotion-0"
+    data-chakra-component="FakeComponent"
+  >
+    Fake component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`createStyledAttrsMixin baseStyle should use theme.baseStyle if given 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: var(--colors-red-400);
+  color: var(--colors-gray-200);
+}
+
+<div
+    class="emotion-0"
+    data-chakra-component="FakeComponent"
+  >
+    Fake component
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/chakra-ui-core/src/utils/__snapshots__/styled-system.test.js.snap b/packages/chakra-ui-core/src/utils/__snapshots__/styled-system.test.js.snap
new file mode 100644
index 00000000..a13eecfc
--- /dev/null
+++ b/packages/chakra-ui-core/src/utils/__snapshots__/styled-system.test.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`__get should return correct value for given path 1`] = `
+Object {
+  "bg": "red.400",
+  "color": "black",
+}
+`;
+
+exports[`__get should return correct value for given path 2`] = `"red.400"`;
+
+exports[`__get should return correct value for given path 3`] = `"black"`;
+
+exports[`__get should return correct value for given path 4`] = `"#ff0000"`;
+
+exports[`__get should return correct value for given path 5`] = `
+Object {
+  "bg": "red.400",
+  "color": "black",
+}
+`;
+
+exports[`__get should return correct value for given path 6`] = `"red.400"`;
+
+exports[`__get should return correct value for given path 7`] = `"black"`;
+
+exports[`__get should return correct value for given path 8`] = `"#ff0000"`;
diff --git a/packages/chakra-ui-core/src/utils/component.test.js b/packages/chakra-ui-core/src/utils/component.test.js
new file mode 100644
index 00000000..38939cf7
--- /dev/null
+++ b/packages/chakra-ui-core/src/utils/component.test.js
@@ -0,0 +1,102 @@
+import defaultTheme from '@chakra-ui/theme-vue'
+import { toCSSVar } from '@chakra-ui/styled-system'
+import { createStyledAttrsMixin } from './components'
+import { render } from '@/tests/test-utils'
+
+describe('createStyledAttrsMixin', () => {
+  const FakeComponent = {
+    name: 'FakeComponent',
+    mixins: [createStyledAttrsMixin('FakeComponent', true)],
+    render (h) {
+      return h(
+        'div',
+        {
+          class: this.className,
+          attrs: this.computedAttrs
+        },
+        'Fake component'
+      )
+    }
+  }
+
+  describe('baseStyle', () => {
+    const renderFakeComponent = ({ theme, colorMode, ...props }) => {
+      const inlineAttrs = (props && props.inlineAttrs) || ''
+      return render({
+        template: `<FakeComponent ${inlineAttrs} />`,
+        components: {
+          FakeComponent
+        },
+        provide: () => ({
+          $chakraTheme: () => toCSSVar(theme),
+          $chakraColorMode: () => colorMode || 'light'
+        }),
+        ...props
+      })
+    }
+
+    it('should use theme.baseStyle if given', () => {
+      const { asFragment } = renderFakeComponent({
+        theme: {
+          ...defaultTheme,
+          baseStyle: {
+            FakeComponent: {
+              bg: 'red.400',
+              color: 'gray.200'
+            }
+          }
+        }
+      })
+      expect(asFragment()).toMatchSnapshot()
+    })
+
+    it('should be overiden by props', () => {
+      const { asFragment } = renderFakeComponent({
+        inlineAttrs: 'bg="blue.200"',
+        theme: {
+          ...defaultTheme,
+          baseStyle: {
+            FakeComponent: {
+              bg: 'red.400',
+              color: 'gray.200'
+            }
+          }
+        }
+      })
+      expect(asFragment()).toMatchSnapshot()
+    })
+
+    it('should accept baseStyle as a function', () => {
+      const theme = {
+        ...defaultTheme,
+        baseStyle: {
+          FakeComponent: ({ colorMode, theme }) => ({
+            bg: colorMode === 'light' ? 'red.400' : 'red.200',
+            color: colorMode === 'light' ? 'black' : 'white',
+            border: `2px solid ${
+              colorMode === 'light'
+                ? theme.colors.blue[600]
+                : theme.colors.blue[200]
+            }`
+          })
+        }
+      }
+
+      // light mode
+      const lightWrapper = renderFakeComponent({
+        theme,
+        colorMode: 'light',
+        inlineAttrs: 'bg="blue.200"'
+      })
+      expect(lightWrapper.asFragment()).toMatchSnapshot()
+
+      // dark mode
+      const darkWrapper = renderFakeComponent({
+        theme,
+        colorMode: 'dark',
+        inlineAttrs: 'bg="vue.200"'
+      })
+      expect(darkWrapper.asFragment()).toMatchSnapshot()
+    })
+  })
+})
diff --git a/packages/chakra-ui-core/src/utils/components.js b/packages/chakra-ui-core/src/utils/components.js
index 428a1f2b..6b4662dd 100644
--- a/packages/chakra-ui-core/src/utils/components.js
+++ b/packages/chakra-ui-core/src/utils/components.js
@@ -1,11 +1,10 @@
 import { css } from '@emotion/css'
-import __css from '@styled-system/css'
-import { parsePseudoStyles } from '../CPseudoBox/utils'
-import { composeSystem } from './styled-system'
+import { runIfFn } from '@chakra-ui/utils'
+import { composeSystem, __get } from './styled-system'
 import { hasOwn, extractChakraAttrs } from './object'
 
 export const isVueComponent = (value) => {
-  return (!!value && !!value.$el)
+  return !!value && !!value.$el
 }
 
 /**
@@ -14,7 +13,7 @@ export const isVueComponent = (value) => {
  * for primitives with changes in the $parent $attrs
  * and $listeners objects
  * @param {String} property
-*/
+ */
 export function createWatcher (property) {
   return {
     handler (newVal, oldVal) {
@@ -34,8 +33,8 @@ export function createWatcher (property) {
 /**
  * Create mixin for style attributes
  * @param {String} name Component name
-*/
-export const createStyledAttrsMixin = (name, isPseudo) => ({
+ */
+export const createStyledAttrsMixin = name => ({
   name,
   inheritAttrs: false,
   inject: ['$chakraTheme', '$chakraColorMode'],
@@ -70,24 +69,32 @@ export const createStyledAttrsMixin = (name, isPseudo) => ({
         nativeAttrs
       }
     },
+    baseStyle () {
+      const { nativeAttrs } = this.splitProps
+      const styleObjectOrFn = __get(this.theme, `baseStyle.${name}`)
+      return (
+        runIfFn(styleObjectOrFn, {
+          theme: this.theme,
+          colorMode: this.colorMode,
+          ...nativeAttrs
+        }) || {}
+      )
+    },
     className () {
       const { styleAttrs } = this.splitProps
-      if (isPseudo) {
-        const { pseudoStyles, baseStyles } = parsePseudoStyles(styleAttrs)
-        const _baseStyles = composeSystem(baseStyles, this.theme)
-        const _pseudoStyles = __css(pseudoStyles)(this.theme)
-        return css({
-          ..._baseStyles,
-          ..._pseudoStyles
-        })
-      }
-      const boxStylesObject = composeSystem(styleAttrs, this.theme)
+      const boxStylesObject = composeSystem(
+        {
+          ...this.baseStyle,
+          ...styleAttrs
+        },
+        this.theme
+      )
       return css(boxStylesObject)
     },
     /** Computed attributes object */
     computedAttrs () {
       return {
-        ...name && { 'data-chakra-component': name },
+        ...(name && { 'data-chakra-component': name }),
         ...this.splitProps.nativeAttrs
       }
     },
diff --git a/packages/chakra-ui-core/src/utils/index.js b/packages/chakra-ui-core/src/utils/index.js
index 54c94c34..fa53a58e 100644
--- a/packages/chakra-ui-core/src/utils/index.js
+++ b/packages/chakra-ui-core/src/utils/index.js
@@ -1,5 +1,5 @@
 export { default as Logger } from './logger'
-export { transformAlias as tx, valueToPercent } from './transform'
+export { valueToPercent } from './transform'
 export { pickProperty as forwardProps } from './object'
 export * from './object'
 export * from './color'
@@ -12,4 +12,3 @@ export * from './validators'
 export * from './functions'
 export * from './components'
 export * from './styled-system'
-export { proxyAliases as pxls } from '../config/props/proxy'
diff --git a/packages/chakra-ui-core/src/utils/object.js b/packages/chakra-ui-core/src/utils/object.js
index 4b2c7928..7727c8d9 100644
--- a/packages/chakra-ui-core/src/utils/object.js
+++ b/packages/chakra-ui-core/src/utils/object.js
@@ -1,5 +1,5 @@
 import { pickBy, startsWith } from 'lodash-es'
-import styleProps from '../config/props'
+import { isStyleProp } from '@chakra-ui/styled-system'
 import { camelize } from './strings'
 
 /**
@@ -48,7 +48,7 @@ export function extractChakraAttrs (attrs) {
 
   for (const _prop in attrs) {
     const prop = camelize(_prop)
-    if (styleProps[prop]) {
+    if (isStyleProp(prop)) {
       styleAttrs[prop] = attrs[_prop]
     } else {
       nativeAttrs[_prop] = attrs[_prop]
diff --git a/packages/chakra-ui-core/src/utils/styled-system.js b/packages/chakra-ui-core/src/utils/styled-system.js
index f07aa233..3150408a 100644
--- a/packages/chakra-ui-core/src/utils/styled-system.js
+++ b/packages/chakra-ui-core/src/utils/styled-system.js
@@ -1,5 +1,4 @@
-import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography, compose } from 'styled-system'
-import { propsConfig } from '../config/props'
+import { css } from '@chakra-ui/styled-system'
 
 /**
  * Existential getter function that can be used in any style declaration to get a value
@@ -8,76 +7,13 @@ import { propsConfig } from '../config/props'
  * @param {Object} obj Theme property
  * @param {String} key Theme key
  * @param {String} def Definition if non-existent
- * @param {*} p
- * @param {*} undef
  */
-export const __get = (obj, key, def, p, undef) => {
-  key = key && key.split ? key.split('.') : [key]
+export const __get = (obj, key, def) => {
+  const keys = key && key.split ? key.split('.') : [key]
 
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef
-  }
-
-  return obj === undef ? def : obj
-}
-
-const baseEllipsis = {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-}
-
-/**
- * @description Truncates text if `truncate` is set to true.
- * @param {Object} props Props
- */
-const truncate = (props) => {
-  if (props.truncate) {
-    if (!props.lineClamp) {
-      return baseEllipsis
-    }
-  }
+  return (
+    keys.reduce((res, key) => res && res[key], obj) || def
+  )
 }
 
-/**
- * @description Clamps text based on number of lines.
- * @param {Object} props Props
- */
-const clamp = (props) => {
-  if (props.lineClamp) {
-    return {
-      ...baseEllipsis,
-      '-webkit-box-orient': 'vertical',
-      '-webkit-line-clamp': `${props.lineClamp}`
-    }
-  }
-}
-
-const decorate = (props) => {
-  if (props.textDecoration || props.textDecor) {
-    return {
-      'text-decoration': `${props.textDecoration || props.textDecor}`
-    }
-  }
-}
-
-export const systemProps = compose(
-  space,
-  layout,
-  color,
-  background,
-  border,
-  borderRadius,
-  grid,
-  position,
-  shadow,
-  decorate,
-  typography,
-  flexbox,
-  propsConfig,
-  truncate,
-  clamp
-)
-
-/** Composes all styled-system css and theme props and returns resolved styles */
-export const composeSystem = (props = {}, theme = {}) => systemProps({ ...props, theme })
+export const composeSystem = (props = {}, theme = {}) => css(props)(theme)
diff --git a/packages/chakra-ui-core/src/utils/styled-system.test.js b/packages/chakra-ui-core/src/utils/styled-system.test.js
new file mode 100644
index 00000000..3bec6757
--- /dev/null
+++ b/packages/chakra-ui-core/src/utils/styled-system.test.js
@@ -0,0 +1,55 @@
+import { __get } from './styled-system'
+
+describe('__get', () => {
+  it('should return correct value for given path', () => {
+    const theme = {
+      baseStyle: {
+        Button: {
+          bg: 'red.400',
+          color: 'black'
+        }
+      },
+      colors: {
+        red: {
+          400: '#ff0000'
+        }
+      }
+    }
+
+    expect(__get(theme, 1)).toBeUndefined()
+    expect(__get(theme, 'someRandomKey')).toBeUndefined()
+    expect(__get(theme, 'colors.red.500')).toBeUndefined()
+    expect(__get(theme, 'baseStyle.Button.bg._focus')).toBeUndefined()
+
+    expect(__get(theme, 'baseStyle.Button')).toMatchSnapshot()
+    expect(__get(theme, 'baseStyle.Button.bg')).toMatchSnapshot()
+    expect(__get(theme, 'baseStyle.Button.color')).toMatchSnapshot()
+    expect(__get(theme, 'colors.red.400')).toMatchSnapshot()
+
+    expect(__get(theme.baseStyle, 'Button')).toMatchSnapshot()
+    expect(__get(theme.baseStyle, 'Button.bg')).toMatchSnapshot()
+    expect(__get(theme.baseStyle, 'Button.color')).toMatchSnapshot()
+    expect(__get(theme.colors, 'red.400')).toMatchSnapshot()
+  })
+
+  it('should return provide default value if specified', () => {
+    const theme = {
+      baseStyle: {
+        Button: {
+          bg: 'red.400',
+          color: 'black'
+        }
+      },
+      colors: {
+        red: {
+          400: '#ff0000'
+        }
+      }
+    }
+
+    expect(__get(theme, 1, 'default')).toEqual('default')
+    expect(__get(theme, 'someRandomKey', 'default')).toEqual('default')
+    expect(__get(theme, 'colors.red.500', 'default')).toEqual('default')
+    expect(__get(theme, 'baseStyle.Button.bg._focus', 'default')).toEqual('default')
+  })
+})
diff --git a/packages/chakra-ui-core/src/utils/transform.js b/packages/chakra-ui-core/src/utils/transform.js
index 3620f9a9..92860564 100644
--- a/packages/chakra-ui-core/src/utils/transform.js
+++ b/packages/chakra-ui-core/src/utils/transform.js
@@ -1,58 +1,3 @@
-import { config } from '../config/props'
-import { isEmpty } from './object'
-
-/**
- * @description Transforms the custom prop alias to a format that styled-system CSS supports
- * @param {*} prop - Prop
- * @param {*} propValue - Prop value
- * @returns {Object} Style object with transformed alias.
- * @see chakra-ui PseudoBox tx_ method.
- */
-function normalizeAlias (prop, propValue) {
-  const result = {}
-  const entry = config[prop]
-
-  if (entry) {
-    const { properties, property } = entry
-    if (properties) {
-      for (const _cssProp in properties) {
-        result[_cssProp] = propValue
-      }
-    }
-    if (property) {
-      result[property] = propValue
-    }
-    if (entry === true) {
-      result[prop] = propValue
-    }
-  } else {
-    result[prop] = propValue
-  }
-  return result
-}
-
-/**
- * @description Transforms the alias prop object to style-system supported syntax
- * @param {Object} props - Props object
- * @returns {Object} Normalized Props object
- */
-export const transformAlias = (props) => {
-  let result = {}
-  if (!props || isEmpty(props)) {
-    return result
-  }
-
-  for (const prop in props) {
-    if (typeof props[prop] === 'object') {
-      result = { ...result, [prop]: transformAlias(props[prop]) }
-    } else {
-      result = { ...result, ...normalizeAlias(prop, props[prop]) }
-    }
-  }
-
-  return result
-}
-
 /**
  * Converts value to percentage
  * @param {Number} value Value
diff --git a/packages/chakra-ui-theme/src/theme/shadows.js b/packages/chakra-ui-theme/src/theme/shadows.js
index 296267cb..43afe48e 100644
--- a/packages/chakra-ui-theme/src/theme/shadows.js
+++ b/packages/chakra-ui-theme/src/theme/shadows.js
@@ -9,7 +9,7 @@ const shadows = {
     '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
   '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
   outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
-  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+  inner: 'inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)',
   none: 'none'
 }
 
diff --git a/tests/test-utils/test-utils.js b/tests/test-utils/test-utils.js
index 1e72fef6..f8a2c05a 100644
--- a/tests/test-utils/test-utils.js
+++ b/tests/test-utils/test-utils.js
@@ -1,12 +1,13 @@
 import '@testing-library/jest-dom/extend-expect'
 import * as vtl from '@testing-library/vue'
+import { toCSSVar } from '@chakra-ui/styled-system'
 import userEvent from '@testing-library/user-event'
+import theme from '@chakra-ui/theme-vue'
 
 import icons from '@/packages/chakra-ui-core/src/lib/internal-icons'
-import theme from '@/packages/chakra-ui-core/src/lib/theme'
 
 const defaultProviders = options => ({
-  $chakraTheme: () => theme,
+  $chakraTheme: () => toCSSVar(theme),
   $chakraColorMode: () => 'light',
   $chakraIcons: icons,
   ...options
@@ -56,18 +57,17 @@ function waitMs (ms = 0) {
  *  const pseudoStyles = getElementStyles(`.${className2}:before`)
  */
 export function getElementStyles (selector) {
-  selector = new RegExp(selector)
-  let styles = []
-  let i; let j; const sel = selector
-  for (i = 0; i < document.styleSheets.length; ++i) {
-    for (j = 0; j < document.styleSheets[i].cssRules.length; ++j) {
-      if (sel.test(document.styleSheets[i].cssRules[j].selectorText)) {
-        // let selectorText = document.styleSheets[i].cssRules[j].selectorText
-        const cssText = document.styleSheets[i].cssRules[j].style.cssText
-        styles += cssText
+  let styles = ''
+  const sel = new RegExp(selector)
+  
+  document.styleSheets.forEach(sheet => {
+    sheet.cssRules.forEach(rule => {
+      if (sel.test(rule.selectorText)) {
+        const cssText = rule.style.cssText
+        styles += cssText.split(';').join(';\n')
       }
-    }
-  }
+    })
+  })
   return styles
 }
 
@@ -76,14 +76,40 @@ export function getElementStyles (selector) {
  * @param {HTMLElement} node Element
  */
 export const getTagName = (node) => {
-  if (!(node instanceof HTMLElement)) throw new Error('Expected HTMLElement as argument')
+  if (!(node instanceof HTMLElement)) {
+    throw new Error('Expected HTMLElement as argument')
+  }
   return node.tagName.toLowerCase()
 }
 
-export * from '@testing-library/vue'
-export {
-  render,
-  userEvent,
-  waitMs,
-  defaultProviders
+/**
+ * Gets all variables name from current document stylesheets
+ * @returns {Array} string
+ */
+export const getAllCssVariableNames = () => {
+  return Array.from(document.styleSheets)
+    .flatMap((sheet) => Array.from(sheet.cssRules))
+    .flatMap((rule) => rule.style && Array.from(rule.style))
+    .filter((key) => key && key.startsWith('--'))
+}
+
+/**
+ * Get a dict of variables for a given variables
+ * @param {*} element element to check
+ * @param {*} cssVarNames list of names, optional
+ * @returns {Object}
+ */
+export const getElementCssVariables = (element, cssVarNames) => {
+  const varNames = cssVarNames || getAllCssVariableNames()
+  const styles = getComputedStyle(element)
+  const styleDict = {}
+
+  varNames.forEach(key => {
+    styleDict[key] = styles.getPropertyValue(key)
+  })
+
+  return styleDict
 }
+
+export * from '@testing-library/vue'
+export { render, userEvent, waitMs, defaultProviders }
diff --git a/yarn.lock b/yarn.lock
index 6d3ee82d..1f4f812d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2261,6 +2261,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.13.10":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.4.4":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
@@ -2405,6 +2412,24 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@chakra-ui/styled-system@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.12.1.tgz#eb20cb4605f12f27a187141d70aa8fa15e243767"
+  integrity sha512-/92egMOe6/6xerCmoos1/HhZBJdeRwIRa2BR+wwkHJ4ehqxi4IBtU9oXc2g4P70GGh6UqKIgR/oURrvVY8vjow==
+  dependencies:
+    "@chakra-ui/utils" "1.8.1"
+    csstype "^3.0.6"
+
+"@chakra-ui/utils@1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.8.1.tgz#9778e4e8776da0ed4dc0051755d79002d2f21ec2"
+  integrity sha512-v0xL9U2ozDbHCl2kQTdJNOjUGT7ZjyFwEYuMW02ZaLkmLPj2w3G592iOsJ9Z9sBemQgoOrZGyTWqdxm6rhxJug==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.6"
+    css-box-model "1.2.1"
+    framesync "5.3.0"
+    lodash.mergewith "4.6.2"
+
 "@changesets/apply-release-plan@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-3.0.2.tgz#e8f77518f065181717cc998d60b9dcaeb7387870"
@@ -2811,6 +2836,14 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
+"@emotion/css-prettifier@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/css-prettifier/-/css-prettifier-1.0.0.tgz#3ed4240d93c9798c001cedf27dd0aa960bdddd1a"
+  integrity sha512-efxSrRTiTqHTQVKW15Gz5H4pNAw8OqcG8NaiwkJIkqIdNXTD4Qr1zC1Ou6r2acd1oJJ2s56nb1ClnXMiWoj6gQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    stylis "^4.0.3"
+
 "@emotion/css@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
@@ -2848,6 +2881,17 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
+"@emotion/jest@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.3.0.tgz#43bed6dcb47c8691b346cee231861ebc8f9b0016"
+  integrity sha512-LZqYc3yerhic1IvAcEwBLRs1DsUt3oY7Oz6n+e+HU32iYOK/vpfzlhgmQURE94BHfv6eCOj6DV38f3jSnIkBkQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/css-prettifier" "^1.0.0"
+    chalk "^4.1.0"
+    specificity "^0.4.1"
+    stylis "^4.0.3"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -5453,96 +5497,6 @@
     ts-dedent "^1.1.0"
     webpack "^4.33.0"
 
-"@styled-system/background@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
-  integrity sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/border@^5.1.5":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6"
-  integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/color@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43"
-  integrity sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/core@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/core/-/core-5.1.2.tgz#b8b7b86455d5a0514f071c4fa8e434b987f6a772"
-  integrity sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==
-  dependencies:
-    object-assign "^4.1.1"
-
-"@styled-system/css@^5.0.23", "@styled-system/css@^5.1.5":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc"
-  integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==
-
-"@styled-system/flexbox@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.1.2.tgz#077090f43f61c3852df63da24e4108087a8beecf"
-  integrity sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/grid@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/grid/-/grid-5.1.2.tgz#7165049877732900b99cd00759679fbe45c6c573"
-  integrity sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/layout@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/layout/-/layout-5.1.2.tgz#12d73e79887e10062f4dbbbc2067462eace42339"
-  integrity sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/position@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/position/-/position-5.1.2.tgz#56961266566836f57a24d8e8e33ce0c1adb59dd3"
-  integrity sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/shadow@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/shadow/-/shadow-5.1.2.tgz#beddab28d7de03cd0177a87ac4ed3b3b6d9831fd"
-  integrity sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/space@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.1.2.tgz#38925d2fa29a41c0eb20e65b7c3efb6e8efce953"
-  integrity sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/typography@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.1.2.tgz#65fb791c67d50cd2900d234583eaacdca8c134f7"
-  integrity sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-
-"@styled-system/variant@^5.1.5":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd"
-  integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==
-  dependencies:
-    "@styled-system/core" "^5.1.2"
-    "@styled-system/css" "^5.1.5"
-
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -5821,6 +5775,18 @@
   resolved "https://registry.yarnpkg.com/@types/less/-/less-3.0.1.tgz#625694093c72f8356c4042754e222407e50d6b08"
   integrity sha512-dBp05MtWN/w1fGVjj5LVrDw6VrdYllpWczbUkCsrzBj08IHsSyRLOFvUrCFqZFVR+nsqkrRLNg6oOlvqMLPaSA==
 
+"@types/lodash.mergewith@4.6.6":
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
+  integrity sha512-RY/8IaVENjG19rxTZu9Nukqh0W2UrYgmBj5sdns4hWRZaV8PqR7wIKHFKzvOTjo4zVRV7sVI+yFhAJql12Kfqg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.171"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.171.tgz#f01b3a5fe3499e34b622c362a46a609fdb23573b"
+  integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==
+
 "@types/memory-fs@*":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@types/memory-fs/-/memory-fs-0.3.2.tgz#5d4753f9b390cb077c8c8af97bc96463399ceccd"
@@ -10463,6 +10429,13 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
 
+css-box-model@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -10734,6 +10707,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
   integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
 
+csstype@^3.0.6:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 csv-generate@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/csv-generate/-/csv-generate-3.2.4.tgz#440dab9177339ee0676c9e5c16f50e2b3463c019"
@@ -13156,6 +13134,13 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framesync@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
+  integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@0.5.2, fresh@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -17448,6 +17433,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.mergewith@4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.rest@^4.0.0:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.rest/-/lodash.rest-4.0.5.tgz#954ef75049262038c96d1fc98b28fdaf9f0772aa"
@@ -23072,6 +23062,11 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
   integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
 
+specificity@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
+  integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -23557,25 +23552,6 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-system@^5.1.2:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
-  integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==
-  dependencies:
-    "@styled-system/background" "^5.1.2"
-    "@styled-system/border" "^5.1.5"
-    "@styled-system/color" "^5.1.2"
-    "@styled-system/core" "^5.1.2"
-    "@styled-system/flexbox" "^5.1.2"
-    "@styled-system/grid" "^5.1.2"
-    "@styled-system/layout" "^5.1.2"
-    "@styled-system/position" "^5.1.2"
-    "@styled-system/shadow" "^5.1.2"
-    "@styled-system/space" "^5.1.2"
-    "@styled-system/typography" "^5.1.2"
-    "@styled-system/variant" "^5.1.5"
-    object-assign "^4.1.1"
-
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -24058,6 +24034,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-invariant@^1.0.6:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -24279,6 +24260,11 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"