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 e2621928..95a8d55d 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
@@ -24,22 +24,22 @@ exports[`should render correctly 1`] = `
   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);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  padding-top: var(--chakra-space-2);
+  padding-bottom: var(--chakra-space-2);
 }
 
 .emotion-3:focus,
 .emotion-3[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-3:hover,
 .emotion-3[data-hover] {
-  background: var(--colors-blackAlpha-50);
+  background: var(--chakra-colors-blackAlpha-50);
 }
 
 .emotion-3[disabled],
@@ -80,12 +80,12 @@ exports[`should render correctly 1`] = `
 }
 
 .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);
+  padding-top: var(--chakra-space-2);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  padding-bottom: var(--chakra-space-5);
 }
 
 <div
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 3ad08270..950db238 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
@@ -3,7 +3,7 @@
 exports[`should override icon if set explicitly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14,11 +14,11 @@ exports[`should override icon if set explicitly 1`] = `
   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);
+  padding-left: var(--chakra-space-4);
+  padding-right: var(--chakra-space-4);
+  padding-top: var(--chakra-space-3);
+  padding-bottom: var(--chakra-space-3);
+  background: var(--chakra-colors-red-100);
 }
 
 .emotion-1 {
@@ -34,15 +34,15 @@ exports[`should override icon if set explicitly 1`] = `
 }
 
 .emotion-2 {
-  width: var(--sizes-5);
-  height: var(--sizes-5);
+  width: var(--chakra-sizes-5);
+  height: var(--chakra-sizes-5);
   display: inline-block;
   vertical-align: middle;
 }
 
 .emotion-3 {
-  margin-right: var(--space-3);
-  color: var(--colors-red-500);
+  margin-right: var(--chakra-space-3);
+  color: var(--chakra-colors-red-500);
 }
 
 <div
@@ -82,7 +82,7 @@ exports[`should render correct variant styles 1`] = `
 }
 
 .emotion-2 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -93,12 +93,12 @@ exports[`should render correct variant styles 1`] = `
   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);
+  padding-left: var(--chakra-space-4);
+  padding-right: var(--chakra-space-4);
+  padding-top: var(--chakra-space-3);
+  padding-bottom: var(--chakra-space-3);
+  background: var(--chakra-colors-green-100);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-3 {
@@ -114,19 +114,19 @@ exports[`should render correct variant styles 1`] = `
 }
 
 .emotion-4 {
-  width: var(--sizes-5);
-  height: var(--sizes-5);
+  width: var(--chakra-sizes-5);
+  height: var(--chakra-sizes-5);
   display: inline-block;
   vertical-align: middle;
 }
 
 .emotion-5 {
-  margin-right: var(--space-3);
-  color: var(--colors-green-500);
+  margin-right: var(--chakra-space-3);
+  color: var(--chakra-colors-green-500);
 }
 
 .emotion-6 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -137,21 +137,21 @@ exports[`should render correct variant styles 1`] = `
   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);
+  padding-left: var(--chakra-space-4);
+  padding-right: var(--chakra-space-4);
+  padding-top: var(--chakra-space-3);
+  padding-bottom: var(--chakra-space-3);
+  background: var(--chakra-colors-green-500);
+  color: var(--chakra-colors-white);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-9 {
-  margin-right: var(--space-3);
+  margin-right: var(--chakra-space-3);
 }
 
 .emotion-10 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,18 +162,18 @@ exports[`should render correct variant styles 1`] = `
   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);
+  padding-left: var(--chakra-space-3);
+  padding-right: var(--chakra-space-4);
+  padding-top: var(--chakra-space-3);
+  padding-bottom: var(--chakra-space-3);
+  background: var(--chakra-colors-green-100);
+  border-left: var(--chakra-borders-4px);
+  border-color: var(--chakra-colors-green-500);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-14 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -184,13 +184,13 @@ exports[`should render correct variant styles 1`] = `
   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);
+  padding-left: var(--chakra-space-4);
+  padding-right: var(--chakra-space-4);
+  padding-top: var(--chakra-space-2);
+  padding-bottom: var(--chakra-space-3);
+  background: var(--chakra-colors-green-100);
+  border-top: var(--chakra-borders-4px);
+  border-color: var(--chakra-colors-green-500);
 }
 
 <div
@@ -292,7 +292,7 @@ exports[`should render correct variant styles 1`] = `
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -303,11 +303,11 @@ exports[`should render correctly 1`] = `
   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);
+  padding-left: var(--chakra-space-4);
+  padding-right: var(--chakra-space-4);
+  padding-top: var(--chakra-space-3);
+  padding-bottom: var(--chakra-space-3);
+  background: var(--chakra-colors-blue-100);
 }
 
 .emotion-1 {
@@ -323,20 +323,20 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2 {
-  width: var(--sizes-5);
-  height: var(--sizes-5);
+  width: var(--chakra-sizes-5);
+  height: var(--chakra-sizes-5);
   display: inline-block;
   vertical-align: middle;
 }
 
 .emotion-3 {
-  margin-right: var(--space-3);
-  color: var(--colors-blue-500);
+  margin-right: var(--chakra-space-3);
+  color: var(--chakra-colors-blue-500);
 }
 
 .emotion-4 {
-  font-weight: var(--fontWeights-bold);
-  line-height: var(--lineHeights-normal);
+  font-weight: var(--chakra-fontWeights-bold);
+  line-height: var(--chakra-lineHeights-normal);
 }
 
 <div
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 8e5ec9a7..29df94bd 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
@@ -10,28 +10,28 @@ exports[`should render correctly 1`] = `
   .emotion-0 {
   position: fixed;
   background: rgba( 0, 0, 0, 0.4);
-  left: var(--space-0);
-  top: var(--space-0);
+  left: var(--chakra-space-0);
+  top: var(--chakra-space-0);
   width: 100vw;
   height: 100vh;
-  z-index: var(--zIndices-overlay);
+  z-index: var(--chakra-zIndices-overlay);
 }
 
 .emotion-1 {
   overflow-y: auto;
   overflow-x: hidden;
   position: fixed;
-  left: var(--space-0);
-  top: var(--space-0);
+  left: var(--chakra-space-0);
+  top: var(--chakra-space-0);
   width: 100%;
   height: 100%;
-  z-index: var(--zIndices-modal);
+  z-index: var(--chakra-zIndices-modal);
 }
 
 .emotion-2 {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  max-width: var(--sizes-md);
+  max-width: var(--chakra-sizes-md);
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -41,11 +41,11 @@ exports[`should render correctly 1`] = `
   -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);
+  z-index: var(--chakra-zIndices-modal);
+  font-family: var(--chakra-fonts-body);
+  background: var(--chakra-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);
+  top: var(--chakra-space-0);
   -webkit-margin-start: auto;
   margin-inline-start: auto;
   -webkit-margin-end: auto;
@@ -55,24 +55,24 @@ exports[`should render correctly 1`] = `
 }
 
 .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);
+  -webkit-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-4);
+  padding-bottom: var(--chakra-space-4);
   position: relative;
-  font-size: var(--fontSizes-xl);
-  font-weight: var(--fontWeights-semibold);
+  font-size: var(--chakra-fontSizes-xl);
+  font-weight: var(--chakra-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-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-2);
+  padding-bottom: var(--chakra-space-2);
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -83,12 +83,12 @@ exports[`should render correctly 1`] = `
   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-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-4);
+  padding-bottom: var(--chakra-space-4);
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
@@ -124,33 +124,33 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-6:focus,
 .emotion-6[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-6:hover,
 .emotion-6[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-6:active,
 .emotion-6[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-6[disabled],
@@ -158,7 +158,7 @@ exports[`should render correctly 1`] = `
 .emotion-6[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-7 {
@@ -190,35 +190,35 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-red-400);
+  color: var(--chakra-colors-white);
+  margin-left: var(--chakra-space-3);
 }
 
 .emotion-7:focus,
 .emotion-7[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-7:hover,
 .emotion-7[data-hover] {
-  background: var(--colors-red-500);
+  background: var(--chakra-colors-red-500);
 }
 
 .emotion-7:active,
 .emotion-7[data-active] {
-  background: var(--colors-red-600);
+  background: var(--chakra-colors-red-600);
 }
 
 .emotion-7[disabled],
@@ -226,7 +226,7 @@ exports[`should render correctly 1`] = `
 .emotion-7[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <span
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 321cbd52..a309710c 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
@@ -16,10 +16,10 @@ exports[`should render correctly 1`] = `
 
 .emotion-1 {
   position: absolute;
-  width: var(--sizes-full);
-  height: var(--sizes-full);
-  top: var(--space-0);
-  left: var(--space-0);
+  width: var(--chakra-sizes-full);
+  height: var(--chakra-sizes-full);
+  top: var(--chakra-space-0);
+  left: var(--chakra-space-0);
 }
 
 .emotion-2 {
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 17ab4a6b..e9fd21da 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
@@ -3,8 +3,8 @@
 exports[`Avatar with AvatarBadge renders correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: var(--sizes-12);
-  height: var(--sizes-12);
+  width: var(--chakra-sizes-12);
+  height: var(--chakra-sizes-12);
   font-size: calc(3rem / 2.5);
   line-height: 3rem;
   vertical-align: top;
@@ -12,7 +12,7 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -26,15 +26,15 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
   justify-content: center;
   position: relative;
   background: #a8eb4f;
-  color: var(--colors-gray-800);
-  border: var(--borders-2px);
+  color: var(--chakra-colors-gray-800);
+  border: var(--chakra-borders-2px);
   border-color: #fff;
 }
 
 .emotion-1 {
   width: 100%;
   height: 100%;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   object-fit: cover;
 }
 
@@ -58,12 +58,12 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
   -moz-transform: translate(25%, 25%);
   -ms-transform: translate(25%, 25%);
   transform: translate(25%, 25%);
-  bottom: var(--space-0);
-  right: var(--space-0);
+  bottom: var(--chakra-space-0);
+  right: var(--chakra-space-0);
   border: 0.2em solid;
-  border-color: var(--colors-white);
-  border-radius: var(--radii-full);
-  background: var(--colors-green-500);
+  border-color: var(--chakra-colors-white);
+  border-radius: var(--chakra-radii-full);
+  background: var(--chakra-colors-green-500);
 }
 
 <div
@@ -87,8 +87,8 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: var(--sizes-12);
-  height: var(--sizes-12);
+  width: var(--chakra-sizes-12);
+  height: var(--chakra-sizes-12);
   font-size: calc(3rem / 2.5);
   line-height: 3rem;
   vertical-align: top;
@@ -96,7 +96,7 @@ exports[`should render correctly 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -110,15 +110,15 @@ exports[`should render correctly 1`] = `
   justify-content: center;
   position: relative;
   background: #a8eb4f;
-  color: var(--colors-gray-800);
-  border: var(--borders-2px);
+  color: var(--chakra-colors-gray-800);
+  border: var(--chakra-borders-2px);
   border-color: #fff;
 }
 
 .emotion-1 {
   width: 100%;
   height: 100%;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   object-fit: cover;
 }
 
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 0d6e37db..717a7d1a 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
@@ -11,8 +11,8 @@ exports[`should change avatar group size correctly 1`] = `
 }
 
 .emotion-1 {
-  width: var(--sizes-16);
-  height: var(--sizes-16);
+  width: var(--chakra-sizes-16);
+  height: var(--chakra-sizes-16);
   font-size: calc(4rem / 2.5);
   line-height: 4rem;
   vertical-align: top;
@@ -20,7 +20,7 @@ exports[`should change avatar group size correctly 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -34,9 +34,9 @@ exports[`should change avatar group size correctly 1`] = `
   justify-content: center;
   position: relative;
   background: #a8eb4f;
-  color: var(--colors-gray-800);
-  border: var(--borders-2px);
-  margin-left: var(--space-0);
+  color: var(--chakra-colors-gray-800);
+  border: var(--chakra-borders-2px);
+  margin-left: var(--chakra-space-0);
   z-index: 3;
 }
 
@@ -45,12 +45,12 @@ exports[`should change avatar group size correctly 1`] = `
   height: 4rem;
   text-align: center;
   text-transform: uppercase;
-  font-weight: var(--fontWeights-medium);
+  font-weight: var(--chakra-fontWeights-medium);
 }
 
 .emotion-3 {
-  width: var(--sizes-16);
-  height: var(--sizes-16);
+  width: var(--chakra-sizes-16);
+  height: var(--chakra-sizes-16);
   font-size: calc(4rem / 2.5);
   line-height: 4rem;
   vertical-align: top;
@@ -58,7 +58,7 @@ exports[`should change avatar group size correctly 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -72,9 +72,9 @@ exports[`should change avatar group size correctly 1`] = `
   justify-content: center;
   position: relative;
   background: #9d7d74;
-  color: var(--colors-gray-800);
-  border: var(--borders-2px);
-  margin-left: calc(var(--space-3) * -1);
+  color: var(--chakra-colors-gray-800);
+  border: var(--chakra-borders-2px);
+  margin-left: calc(var(--chakra-space-3) * -1);
   z-index: 2;
 }
 
@@ -91,15 +91,15 @@ exports[`should change avatar group size correctly 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  height: var(--sizes-16);
-  width: var(--sizes-16);
-  background: var(--colors-gray-200);
+  height: var(--chakra-sizes-16);
+  width: var(--chakra-sizes-16);
+  background: var(--chakra-colors-gray-200);
   color: inherit;
-  border-radius: var(--radii-full);
-  border: var(--borders-2px);
+  border-radius: var(--chakra-radii-full);
+  border: var(--chakra-borders-2px);
   border-color: #fff;
   font-size: calc(4rem / 2.75);
-  margin-left: calc(var(--space-3) * -1);
+  margin-left: calc(var(--chakra-space-3) * -1);
 }
 
 <div
@@ -151,8 +151,8 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
-  width: var(--sizes-12);
-  height: var(--sizes-12);
+  width: var(--chakra-sizes-12);
+  height: var(--chakra-sizes-12);
   font-size: calc(3rem / 2.5);
   line-height: 3rem;
   vertical-align: top;
@@ -160,7 +160,7 @@ exports[`should render correctly 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -174,22 +174,22 @@ exports[`should render correctly 1`] = `
   justify-content: center;
   position: relative;
   background: #a8eb4f;
-  color: var(--colors-gray-800);
-  border: var(--borders-2px);
-  margin-left: var(--space-0);
+  color: var(--chakra-colors-gray-800);
+  border: var(--chakra-borders-2px);
+  margin-left: var(--chakra-space-0);
   z-index: 3;
 }
 
 .emotion-2 {
   width: 100%;
   height: 100%;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   object-fit: cover;
 }
 
 .emotion-3 {
-  width: var(--sizes-12);
-  height: var(--sizes-12);
+  width: var(--chakra-sizes-12);
+  height: var(--chakra-sizes-12);
   font-size: calc(3rem / 2.5);
   line-height: 3rem;
   vertical-align: top;
@@ -197,7 +197,7 @@ exports[`should render correctly 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -211,9 +211,9 @@ exports[`should render correctly 1`] = `
   justify-content: center;
   position: relative;
   background: #9d7d74;
-  color: var(--colors-gray-800);
-  border: var(--borders-2px);
-  margin-left: calc(var(--space-3) * -1);
+  color: var(--chakra-colors-gray-800);
+  border: var(--chakra-borders-2px);
+  margin-left: calc(var(--chakra-space-3) * -1);
   z-index: 2;
 }
 
@@ -230,15 +230,15 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  height: var(--sizes-12);
-  width: var(--sizes-12);
-  background: var(--colors-gray-200);
+  height: var(--chakra-sizes-12);
+  width: var(--chakra-sizes-12);
+  background: var(--chakra-colors-gray-200);
   color: inherit;
-  border-radius: var(--radii-full);
-  border: var(--borders-2px);
+  border-radius: var(--chakra-radii-full);
+  border: var(--chakra-borders-2px);
   border-color: #fff;
   font-size: calc(3rem / 2.75);
-  margin-left: calc(var(--space-3) * -1);
+  margin-left: calc(var(--chakra-space-3) * -1);
 }
 
 <div
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 f26458f0..485c691c 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
@@ -15,66 +15,66 @@ exports[`should apply variant styles corectly 1`] = `
 .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);
+  font-size: var(--chakra-fontSizes-xs);
+  font-family: var(--chakra-fonts-body);
+  -webkit-padding-start: var(--chakra-space-1);
+  padding-inline-start: var(--chakra-space-1);
+  -webkit-padding-end: var(--chakra-space-1);
+  padding-inline-end: var(--chakra-space-1);
+  border-radius: var(--chakra-radii-sm);
+  font-weight: var(--chakra-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);
+  background-color: var(--chakra-colors-green-100);
+  color: var(--chakra-colors-green-800);
+  -webkit-margin-start: var(--chakra-space-2);
+  margin-inline-start: var(--chakra-space-2);
+  -webkit-margin-end: var(--chakra-space-2);
+  margin-inline-end: var(--chakra-space-2);
+  margin-right: var(--chakra-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);
+  font-size: var(--chakra-fontSizes-xs);
+  font-family: var(--chakra-fonts-body);
+  -webkit-padding-start: var(--chakra-space-1);
+  padding-inline-start: var(--chakra-space-1);
+  -webkit-padding-end: var(--chakra-space-1);
+  padding-inline-end: var(--chakra-space-1);
+  border-radius: var(--chakra-radii-sm);
+  font-weight: var(--chakra-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);
+  background-color: var(--chakra-colors-green-500);
+  color: var(--chakra-colors-white);
+  -webkit-margin-start: var(--chakra-space-2);
+  margin-inline-start: var(--chakra-space-2);
+  -webkit-margin-end: var(--chakra-space-2);
+  margin-inline-end: var(--chakra-space-2);
+  margin-right: var(--chakra-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);
+  font-size: var(--chakra-fontSizes-xs);
+  font-family: var(--chakra-fonts-body);
+  -webkit-padding-start: var(--chakra-space-1);
+  padding-inline-start: var(--chakra-space-1);
+  -webkit-padding-end: var(--chakra-space-1);
+  padding-inline-end: var(--chakra-space-1);
+  border-radius: var(--chakra-radii-sm);
+  font-weight: var(--chakra-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);
+  color: var(--chakra-colors-green-500);
+  -webkit-margin-start: var(--chakra-space-2);
+  margin-inline-start: var(--chakra-space-2);
+  -webkit-margin-end: var(--chakra-space-2);
+  margin-inline-end: var(--chakra-space-2);
 }
 
 <div
@@ -108,18 +108,18 @@ exports[`should render correctly 1`] = `
   .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);
+  font-size: var(--chakra-fontSizes-xs);
+  font-family: var(--chakra-fonts-body);
+  -webkit-padding-start: var(--chakra-space-1);
+  padding-inline-start: var(--chakra-space-1);
+  -webkit-padding-end: var(--chakra-space-1);
+  padding-inline-end: var(--chakra-space-1);
+  border-radius: var(--chakra-radii-sm);
+  font-weight: var(--chakra-fontWeights-bold);
   white-space: nowrap;
   vertical-align: middle;
-  background-color: var(--colors-gray-100);
-  color: var(--colors-gray-800);
+  background-color: var(--chakra-colors-gray-100);
+  color: var(--chakra-colors-gray-800);
 }
 
 <div
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 06ba7cd2..b7487ee4 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
@@ -8,19 +8,19 @@ exports[`should change the style 1`] = `
   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);
+  -webkit-padding-start: var(--chakra-space-5);
+  padding-inline-start: var(--chakra-space-5);
+  -webkit-padding-end: var(--chakra-space-5);
+  padding-inline-end: var(--chakra-space-5);
+  padding-top: var(--chakra-space-5);
+  padding-bottom: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-lg);
+  margin-top: var(--chakra-space-5);
+  margin-bottom: var(--chakra-space-5);
+  border-radius: var(--chakra-radii-sm);
+  font-family: var(--chakra-fonts-body);
+  background-color: var(--chakra-colors-blue-200);
+  color: var(--chakra-colors-blue-700);
 }
 
 <div
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 28468289..041064a7 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
@@ -25,7 +25,7 @@ exports[`should display custom seperator  1`] = `
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-2:hover,
@@ -44,10 +44,10 @@ exports[`should display custom seperator  1`] = `
 }
 
 .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);
+  -webkit-margin-start: var(--chakra-space-2);
+  margin-inline-start: var(--chakra-space-2);
+  -webkit-margin-end: var(--chakra-space-2);
+  margin-inline-end: var(--chakra-space-2);
 }
 
 <nav
@@ -137,7 +137,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-2:hover,
@@ -156,23 +156,23 @@ exports[`should render correctly 1`] = `
 }
 
 .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);
+  -webkit-margin-start: var(--chakra-space-2);
+  margin-inline-start: var(--chakra-space-2);
+  -webkit-margin-end: var(--chakra-space-2);
+  margin-inline-end: var(--chakra-space-2);
   color: tomato;
   font-size: 10px;
-  font-weight: var(--fontWeights-bold);
+  font-weight: var(--chakra-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);
+  -webkit-margin-start: var(--chakra-space-2);
+  margin-inline-start: var(--chakra-space-2);
+  -webkit-margin-end: var(--chakra-space-2);
+  margin-inline-end: var(--chakra-space-2);
   color: firebrick;
   font-size: 20px;
-  font-weight: var(--fontWeights-bold);
+  font-weight: var(--chakra-fontWeights-bold);
 }
 
 <div>
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 7ffe3f54..24b97299 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
@@ -31,33 +31,33 @@ exports[`CButton should display button with left icon 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-0:focus,
 .emotion-0[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-0:active,
 .emotion-0[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-0[disabled],
@@ -65,7 +65,7 @@ exports[`CButton should display button with left icon 1`] = `
 .emotion-0[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-1 {
@@ -94,8 +94,8 @@ exports[`CButton should display button with left icon 1`] = `
 }
 
 .emotion-4 {
-  margin-right: var(--space-1);
-  margin-bottom: var(--space-px);
+  margin-right: var(--chakra-space-1);
+  margin-bottom: var(--chakra-space-px);
   opacity: 1;
 }
 
@@ -169,33 +169,33 @@ exports[`CButton should display button with right icon 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-0:focus,
 .emotion-0[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-0:active,
 .emotion-0[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-0[disabled],
@@ -203,7 +203,7 @@ exports[`CButton should display button with right icon 1`] = `
 .emotion-0[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-1 {
@@ -232,8 +232,8 @@ exports[`CButton should display button with right icon 1`] = `
 }
 
 .emotion-4 {
-  margin-left: var(--space-1);
-  margin-bottom: var(--space-px);
+  margin-left: var(--chakra-space-1);
+  margin-bottom: var(--chakra-space-px);
   opacity: 1;
 }
 
@@ -306,33 +306,33 @@ exports[`CButton should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-0:focus,
 .emotion-0[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-0:active,
 .emotion-0[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-0[disabled],
@@ -340,7 +340,7 @@ exports[`CButton should render correctly 1`] = `
 .emotion-0[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <button
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 166ea567..b465a1e8 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
@@ -35,16 +35,16 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
   border-right: 0;
@@ -52,18 +52,18 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
 
 .emotion-1:focus,
 .emotion-1[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
   z-index: 1;
 }
 
 .emotion-1:hover,
 .emotion-1[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-1:active,
 .emotion-1[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-1[disabled],
@@ -71,7 +71,7 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
 .emotion-1[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-2 {
@@ -103,34 +103,34 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-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);
+  box-shadow: var(--chakra-shadows-outline);
   z-index: 1;
 }
 
 .emotion-2:hover,
 .emotion-2[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-2:active,
 .emotion-2[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-2[disabled],
@@ -138,7 +138,7 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
 .emotion-2[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <div
@@ -201,33 +201,33 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
+  margin-right: var(--chakra-space-2);
 }
 
 .emotion-1:focus,
 .emotion-1[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
   z-index: 1;
 }
 
 .emotion-1:hover,
 .emotion-1[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-1:active,
 .emotion-1[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-1[disabled],
@@ -235,7 +235,7 @@ exports[`should render correctly 1`] = `
 .emotion-1[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-2 {
@@ -267,32 +267,32 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
   z-index: 1;
 }
 
 .emotion-2:hover,
 .emotion-2[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-2:active,
 .emotion-2[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-2[disabled],
@@ -300,7 +300,7 @@ exports[`should render correctly 1`] = `
 .emotion-2[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <div
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 a99eef76..e82f40f8 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
@@ -45,60 +45,60 @@ exports[`should render correctly 1`] = `
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  width: var(--sizes-4);
-  height: var(--sizes-4);
+  width: var(--chakra-sizes-4);
+  height: var(--chakra-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: var(--chakra-borders-2px);
+  border-radius: var(--chakra-radii-sm);
   border-color: inherit;
-  color: var(--colors-white);
+  color: var(--chakra-colors-white);
 }
 
 .emotion-2[aria-checked=true],
 .emotion-2[data-checked] {
-  background: var(--colors-blue-500);
-  border-color: var(--colors-blue-500);
+  background: var(--chakra-colors-blue-500);
+  border-color: var(--chakra-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);
+  background: var(--chakra-colors-gray-100);
+  border-color: var(--chakra-colors-gray-100);
 }
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-2[aria-invalid=true],
 .emotion-2[data-invalid] {
-  border-color: var(--colors-red-500);
+  border-color: var(--chakra-colors-red-500);
 }
 
 input[type=checkbox]:focus+.emotion-3 {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 input[type=checkbox]:disabled+.emotion-3 {
-  background: var(--colors-gray-100);
-  border-color: var(--colors-gray-100);
+  background: var(--chakra-colors-gray-100);
+  border-color: var(--chakra-colors-gray-100);
 }
 
 input[type=checkbox][aria-invalid=true]+.emotion-3 {
-  border-color: var(--colors-red-500);
+  border-color: var(--chakra-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);
+  border-color: var(--chakra-colors-gray-200);
+  background: var(--chakra-colors-gray-200);
+  color: var(--chakra-colors-gray-500);
 }
 
 .emotion-3>* {
@@ -107,8 +107,8 @@ input[type=checkbox][aria-checked=mixed]:disabled+.emotion-3 {
 
 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);
+  background: var(--chakra-colors-blue-500);
+  border-color: var(--chakra-colors-blue-500);
 }
 
 input[type=checkbox]:checked+.emotion-3>*,
@@ -136,9 +136,9 @@ input[type=checkbox][aria-checked=mixed]+.emotion-3>* {
 }
 
 .emotion-7 {
-  margin-left: var(--space-2);
-  font-size: var(--fontSizes-md);
-  font-family: var(--fonts-body);
+  margin-left: var(--chakra-space-2);
+  font-size: var(--chakra-fontSizes-md);
+  font-family: var(--chakra-fonts-body);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
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 40e3e1a5..a31aee71 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
@@ -8,7 +8,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-2 {
   display: block;
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-3 {
@@ -54,60 +54,60 @@ exports[`should render correctly 1`] = `
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  width: var(--sizes-4);
-  height: var(--sizes-4);
+  width: var(--chakra-sizes-4);
+  height: var(--chakra-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: var(--chakra-borders-2px);
+  border-radius: var(--chakra-radii-sm);
   border-color: inherit;
-  color: var(--colors-white);
+  color: var(--chakra-colors-white);
 }
 
 .emotion-5[aria-checked=true],
 .emotion-5[data-checked] {
-  background: var(--colors-green-500);
-  border-color: var(--colors-green-500);
+  background: var(--chakra-colors-green-500);
+  border-color: var(--chakra-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);
+  background: var(--chakra-colors-gray-100);
+  border-color: var(--chakra-colors-gray-100);
 }
 
 .emotion-5:focus,
 .emotion-5[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-5[aria-invalid=true],
 .emotion-5[data-invalid] {
-  border-color: var(--colors-red-500);
+  border-color: var(--chakra-colors-red-500);
 }
 
 input[type=checkbox]:focus+.emotion-6 {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 input[type=checkbox]:disabled+.emotion-6 {
-  background: var(--colors-gray-100);
-  border-color: var(--colors-gray-100);
+  background: var(--chakra-colors-gray-100);
+  border-color: var(--chakra-colors-gray-100);
 }
 
 input[type=checkbox][aria-invalid=true]+.emotion-6 {
-  border-color: var(--colors-red-500);
+  border-color: var(--chakra-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);
+  border-color: var(--chakra-colors-gray-200);
+  background: var(--chakra-colors-gray-200);
+  color: var(--chakra-colors-gray-500);
 }
 
 .emotion-6>* {
@@ -116,8 +116,8 @@ input[type=checkbox][aria-checked=mixed]:disabled+.emotion-6 {
 
 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);
+  background: var(--chakra-colors-green-500);
+  border-color: var(--chakra-colors-green-500);
 }
 
 input[type=checkbox]:checked+.emotion-6>*,
@@ -145,9 +145,9 @@ input[type=checkbox][aria-checked=mixed]+.emotion-6>* {
 }
 
 .emotion-10 {
-  margin-left: var(--space-2);
-  font-size: var(--fontSizes-md);
-  font-family: var(--fonts-body);
+  margin-left: var(--chakra-space-2);
+  font-size: var(--chakra-fontSizes-md);
+  font-family: var(--chakra-fonts-body);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
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 f01c5466..6a7cbf71 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
@@ -22,16 +22,16 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-2 {
-  color: var(--colors-gray-100);
-  fill: var(--colors-transparent);
+  color: var(--chakra-colors-gray-100);
+  fill: var(--chakra-colors-transparent);
   stroke: currentColor;
   -webkit-transition: all 250ms;
   transition: all 250ms;
 }
 
 .emotion-3 {
-  color: var(--colors-blue-500);
-  fill: var(--colors-transparent);
+  color: var(--chakra-colors-blue-500);
+  fill: var(--chakra-colors-transparent);
   stroke: currentColor;
   -webkit-transition: all 250ms;
   transition: all 250ms;
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 d5733c26..31367056 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
@@ -20,24 +20,24 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-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);
+  border: var(--chakra-borders-none);
+  background: var(--chakra-colors-blackAlpha-50);
 }
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  background: var(--colors-blackAlpha-100);
+  background: var(--chakra-colors-blackAlpha-100);
 }
 
 .emotion-0:active,
 .emotion-0[data-active] {
-  background: var(--colors-blackAlpha-200);
+  background: var(--chakra-colors-blackAlpha-200);
 }
 
 .emotion-0[disabled],
@@ -48,7 +48,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:focus,
 .emotion-0[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-1 {
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 9f1be793..cdb27f3a 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
@@ -4,15 +4,15 @@ exports[`should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
   display: inline-block;
-  font-size: var(--fontSizes-sm);
+  font-size: var(--chakra-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);
+  font-family: var(--chakra-fonts-mono);
+  border-radius: var(--chakra-radii-sm);
+  background-color: var(--chakra-colors-gray-100);
+  color: var(--chakra-colors-gray-800);
 }
 
 <code
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 28f85c1b..8fca71c2 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
@@ -7,7 +7,7 @@ exports[`should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  border-color: var(--colors-gray-200);
+  border-color: var(--chakra-colors-gray-200);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -47,26 +47,26 @@ exports[`should render correctly 1`] = `
   flex-shrink: 0;
   width: 24px;
   height: 24px;
-  border: var(--borders-2px);
-  background: var(--colors-white);
-  border-radius: var(--radii-full);
+  border: var(--chakra-borders-2px);
+  background: var(--chakra-colors-white);
+  border-radius: var(--chakra-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);
+  background: var(--chakra-colors-green-500);
+  border-color: var(--chakra-colors-green-500);
 }
 
 .emotion-2:hover,
 .emotion-2[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-2[disabled],
@@ -76,11 +76,11 @@ exports[`should render correctly 1`] = `
 }
 
 input[type=checkbox]:focus+.emotion-3 {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 input[type=checkbox]:hover:not(:disabled):not(:checked)+.emotion-3 {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 input[type=checkbox]:disabled+.emotion-3 {
@@ -93,8 +93,8 @@ input[type=checkbox]:disabled+.emotion-3 {
 
 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);
+  background: var(--chakra-colors-green-500);
+  border-color: var(--chakra-colors-green-500);
 }
 
 input[type=checkbox]:checked+.emotion-3>*,
@@ -105,8 +105,8 @@ input[type=checkbox][aria-checked=mixed]+.emotion-3>* {
 .emotion-4 {
   width: 50%;
   height: 50%;
-  background: var(--colors-white);
-  border-radius: var(--radii-full);
+  background: var(--chakra-colors-white);
+  border-radius: var(--chakra-radii-full);
 }
 
 <label
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 94b63ad4..0a310ebd 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
@@ -6,10 +6,10 @@ exports[`should change orientation 1`] = `
   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);
+  -webkit-margin-start: var(--chakra-space-2);
+  margin-inline-start: var(--chakra-space-2);
+  -webkit-margin-end: var(--chakra-space-2);
+  margin-inline-end: var(--chakra-space-2);
   opacity: 0.6;
   border-color: inherit;
 }
@@ -29,8 +29,8 @@ exports[`should render correctly 1`] = `
   border: 0;
   border-bottom: 0.0625rem solid;
   width: auto;
-  margin-top: var(--space-2);
-  margin-bottom: var(--space-2);
+  margin-top: var(--chakra-space-2);
+  margin-bottom: var(--chakra-space-2);
   opacity: 0.6;
   border-color: inherit;
 }
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 b94e5a69..16393ff5 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
@@ -21,24 +21,24 @@ exports[`should render correctly 1`] = `
   -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);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
   line-height: 2.5rem;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
 }
 
 .emotion-0[aria-readonly=true],
 .emotion-0[readonly],
 .emotion-0[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -48,7 +48,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-0[disabled],
@@ -100,33 +100,33 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-1:focus,
 .emotion-1[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-1:hover,
 .emotion-1[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-1:active,
 .emotion-1[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-1[disabled],
@@ -134,7 +134,7 @@ exports[`should render correctly 1`] = `
 .emotion-1[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <div>
@@ -162,26 +162,26 @@ exports[`should render correctly 1`] = `
   .emotion-0 {
   position: fixed;
   background: rgba( 0, 0, 0, 0.4);
-  left: var(--space-0);
-  top: var(--space-0);
+  left: var(--chakra-space-0);
+  top: var(--chakra-space-0);
   width: 100vw;
   height: 100vh;
-  z-index: var(--zIndices-overlay);
+  z-index: var(--chakra-zIndices-overlay);
 }
 
 .emotion-1 {
   position: fixed;
-  left: var(--space-0);
-  top: var(--space-0);
+  left: var(--chakra-space-0);
+  top: var(--chakra-space-0);
   width: 100%;
   height: 100%;
-  z-index: var(--zIndices-modal);
+  z-index: var(--chakra-zIndices-modal);
 }
 
 .emotion-2 {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  max-width: var(--sizes-md);
+  max-width: var(--chakra-sizes-md);
   width: 100%;
   position: fixed;
   display: -webkit-box;
@@ -191,12 +191,12 @@ exports[`should render correctly 1`] = `
   -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);
+  z-index: var(--chakra-zIndices-modal);
+  font-family: var(--chakra-fonts-body);
+  background: var(--chakra-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);
+  right: var(--chakra-space-0);
+  top: var(--chakra-space-0);
   height: 100vh;
 }
 
@@ -221,25 +221,25 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-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);
+  border: var(--chakra-borders-none);
+  background: var(--chakra-colors-blackAlpha-50);
   z-index: 1;
 }
 
 .emotion-3:hover,
 .emotion-3[data-hover] {
-  background: var(--colors-blackAlpha-100);
+  background: var(--chakra-colors-blackAlpha-100);
 }
 
 .emotion-3:active,
 .emotion-3[data-active] {
-  background: var(--colors-blackAlpha-200);
+  background: var(--chakra-colors-blackAlpha-200);
 }
 
 .emotion-3[disabled],
@@ -250,7 +250,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-3:focus,
 .emotion-3[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-4 {
@@ -273,24 +273,24 @@ exports[`should render correctly 1`] = `
 }
 
 .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);
+  -webkit-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-4);
+  padding-bottom: var(--chakra-space-4);
   position: relative;
-  font-size: var(--fontSizes-xl);
-  font-weight: var(--fontWeights-semibold);
+  font-size: var(--chakra-fontSizes-xl);
+  font-weight: var(--chakra-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-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-2);
+  padding-bottom: var(--chakra-space-2);
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -315,24 +315,24 @@ exports[`should render correctly 1`] = `
   -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);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
   line-height: 2.5rem;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
 }
 
 .emotion-9[aria-readonly=true],
 .emotion-9[readonly],
 .emotion-9[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -342,7 +342,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-9:hover,
 .emotion-9[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-9[disabled],
@@ -370,12 +370,12 @@ exports[`should render correctly 1`] = `
   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-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-4);
+  padding-bottom: var(--chakra-space-4);
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
@@ -411,37 +411,37 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  border: var(--chakra-borders-1px);
+  border-color: var(--chakra-colors-gray-200);
+  color: var(--chakra-colors-gray-400);
+  background: var(--chakra-colors-transparent);
+  margin-right: var(--chakra-space-3);
 }
 
 .emotion-11:focus,
 .emotion-11[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-11:hover,
 .emotion-11[data-hover] {
-  background: var(--colors-gray-50);
+  background: var(--chakra-colors-gray-50);
 }
 
 .emotion-11:active,
 .emotion-11[data-active] {
-  background: var(--colors-gray-100);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-11[disabled],
@@ -449,7 +449,7 @@ exports[`should render correctly 1`] = `
 .emotion-11[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-12 {
@@ -481,16 +481,16 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
   color: blue;
 }
 
@@ -498,17 +498,17 @@ exports[`should render correctly 1`] = `
 .emotion-12[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-12:hover,
 .emotion-12[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-12:active,
 .emotion-12[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-12[disabled],
@@ -516,7 +516,7 @@ exports[`should render correctly 1`] = `
 .emotion-12[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <span
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 1f851b03..52079379 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
@@ -8,10 +8,10 @@ exports[`should render correctly - input 1`] = `
   font-size: inherit;
   font-weight: inherit;
   text-align: inherit;
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   -webkit-padding-start: 3px;
   padding-inline-start: 3px;
   -webkit-padding-end: 3px;
@@ -20,12 +20,12 @@ exports[`should render correctly - input 1`] = `
   margin-inline-start: -3px;
   -webkit-margin-end: -3px;
   margin-inline-end: -3px;
-  width: var(--sizes-full);
+  width: var(--chakra-sizes-full);
 }
 
 .emotion-1:focus,
 .emotion-1[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-1::-webkit-input-placeholder {
@@ -70,10 +70,10 @@ exports[`should render correctly 1`] = `
   font-size: inherit;
   font-weight: inherit;
   text-align: inherit;
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   -webkit-padding-start: 3px;
   padding-inline-start: 3px;
   -webkit-padding-end: 3px;
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 b01a96bf..43710e2f 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
@@ -3,12 +3,12 @@
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   .emotion-1 {
-  font-size: var(--fontSizes-md);
+  font-size: var(--chakra-fontSizes-md);
   padding-right: 12px;
   padding-bottom: 4px;
   opacity: 1;
-  font-weight: var(--fontWeights-medium);
-  font-family: var(--fonts-body);
+  font-weight: var(--chakra-fontWeights-medium);
+  font-family: var(--chakra-fonts-body);
   text-align: left;
   vertical-align: middle;
   display: inline-block;
@@ -33,24 +33,24 @@ exports[`should render correctly 1`] = `
   -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);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
   line-height: 2.5rem;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
 }
 
 .emotion-2[aria-readonly=true],
 .emotion-2[readonly],
 .emotion-2[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -60,7 +60,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-2:hover,
 .emotion-2[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-2[disabled],
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 690dafc3..53e9a994 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
@@ -4,7 +4,7 @@ exports[`should change gap 1`] = `
 <DocumentFragment>
   .emotion-0 {
   display: grid;
-  grid-gap: var(--space-6);
+  grid-gap: var(--chakra-space-6);
   grid-template-columns: repeat(5, 1fr);
   width: 600px;
 }
@@ -22,7 +22,7 @@ exports[`should offset columns 1`] = `
 <DocumentFragment>
   .emotion-0 {
   display: grid;
-  grid-gap: var(--space-6);
+  grid-gap: var(--chakra-space-6);
   grid-template-columns: repeat(5, 1fr);
   width: 600px;
 }
@@ -65,7 +65,7 @@ exports[`should span columns 1`] = `
 <DocumentFragment>
   .emotion-0 {
   display: grid;
-  grid-gap: var(--space-6);
+  grid-gap: var(--chakra-space-6);
   grid-template-columns: repeat(5, 1fr);
   width: 600px;
 }
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 b5ef0bb7..ebd2c9b0 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
@@ -3,15 +3,15 @@
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  font-size: var(--fontSizes-3xl);
-  line-height: var(--lineHeights-shorter);
-  font-weight: var(--fontWeights-bold);
-  font-family: var(--fonts-heading);
+  font-size: var(--chakra-fontSizes-3xl);
+  line-height: var(--chakra-lineHeights-shorter);
+  font-weight: var(--chakra-fontWeights-bold);
+  font-family: var(--chakra-fonts-heading);
 }
 
 @media screen and (min-width: 62em) {
   .emotion-0 {
-    font-size: var(--fontSizes-4xl);
+    font-size: var(--chakra-fontSizes-4xl);
   }
 }
 
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 e785bab2..111d29f8 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
@@ -31,35 +31,35 @@ exports[`should change icon 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-blue-400);
+  color: var(--chakra-colors-white);
+  padding: var(--chakra-space-0);
 }
 
 .emotion-0:focus,
 .emotion-0[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  background: var(--colors-blue-500);
+  background: var(--chakra-colors-blue-500);
 }
 
 .emotion-0:active,
 .emotion-0[data-active] {
-  background: var(--colors-blue-600);
+  background: var(--chakra-colors-blue-600);
 }
 
 .emotion-0[disabled],
@@ -67,7 +67,7 @@ exports[`should change icon 1`] = `
 .emotion-0[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-1 {
@@ -181,35 +181,35 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-blue-400);
+  color: var(--chakra-colors-white);
+  padding: var(--chakra-space-0);
 }
 
 .emotion-0:focus,
 .emotion-0[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  background: var(--colors-blue-500);
+  background: var(--chakra-colors-blue-500);
 }
 
 .emotion-0:active,
 .emotion-0[data-active] {
-  background: var(--colors-blue-600);
+  background: var(--chakra-colors-blue-600);
 }
 
 .emotion-0[disabled],
@@ -217,7 +217,7 @@ exports[`should render correctly 1`] = `
 .emotion-0[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-1 {
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 aaed2d33..ca7211f4 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
@@ -21,24 +21,24 @@ exports[`should render correctly 1`] = `
   -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);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
   line-height: 2.5rem;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
 }
 
 .emotion-0[aria-readonly=true],
 .emotion-0[readonly],
 .emotion-0[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -48,7 +48,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-0[disabled],
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 90574de1..7dd17666 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
@@ -12,8 +12,8 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
-  color: var(--colors-gray-300);
-  font-size: var(--fontSizes-md);
+  color: var(--chakra-colors-gray-300);
+  font-size: var(--chakra-fontSizes-md);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -27,11 +27,11 @@ exports[`should render correctly 1`] = `
   -webkit-justify-content: center;
   justify-content: center;
   position: absolute;
-  width: var(--sizes-10);
-  height: var(--sizes-10);
-  top: var(--space-0);
+  width: var(--chakra-sizes-10);
+  height: var(--chakra-sizes-10);
+  top: var(--chakra-space-0);
   z-index: 2;
-  left: var(--space-0);
+  left: var(--chakra-space-0);
 }
 
 .emotion-2 {
@@ -53,25 +53,25 @@ exports[`should render correctly 1`] = `
   -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);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
   line-height: 2.5rem;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
   padding-left: 2.5rem;
 }
 
 .emotion-2[aria-readonly=true],
 .emotion-2[readonly],
 .emotion-2[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -81,7 +81,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-2:hover,
 .emotion-2[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-2[disabled],
@@ -118,12 +118,12 @@ exports[`should render correctly 1`] = `
   -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);
+  width: var(--chakra-sizes-10);
+  height: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  top: var(--chakra-space-0);
   z-index: 2;
-  right: var(--space-0);
+  right: var(--chakra-space-0);
 }
 
 .emotion-4 {
@@ -146,7 +146,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-6 {
-  color: var(--colors-green-500);
+  color: var(--chakra-colors-green-500);
 }
 
 <div
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 a04ac749..e2e677fb 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
@@ -8,7 +8,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-1 {
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--chakra-space-3);
 }
 
 .emotion-2 {
@@ -31,8 +31,8 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-4 {
-  margin-right: var(--space-2);
-  color: var(--colors-green-500);
+  margin-right: var(--chakra-space-2);
+  color: var(--chakra-colors-green-500);
 }
 
 <ul
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 9ef7605f..13f9a8b9 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
@@ -21,24 +21,24 @@ exports[`should render correctly 1`] = `
   -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);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
   line-height: 2.5rem;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
 }
 
 .emotion-0[aria-readonly=true],
 .emotion-0[readonly],
 .emotion-0[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -48,7 +48,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-0:hover,
 .emotion-0[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-0[disabled],
@@ -100,33 +100,33 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-1:focus,
 .emotion-1[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-1:hover,
 .emotion-1[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-1:active,
 .emotion-1[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-1[disabled],
@@ -134,7 +134,7 @@ exports[`should render correctly 1`] = `
 .emotion-1[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <div>
@@ -162,28 +162,28 @@ exports[`should render correctly 1`] = `
   .emotion-0 {
   position: fixed;
   background: rgba( 0, 0, 0, 0.4);
-  left: var(--space-0);
-  top: var(--space-0);
+  left: var(--chakra-space-0);
+  top: var(--chakra-space-0);
   width: 100vw;
   height: 100vh;
-  z-index: var(--zIndices-overlay);
+  z-index: var(--chakra-zIndices-overlay);
 }
 
 .emotion-1 {
   overflow-y: auto;
   overflow-x: hidden;
   position: fixed;
-  left: var(--space-0);
-  top: var(--space-0);
+  left: var(--chakra-space-0);
+  top: var(--chakra-space-0);
   width: 100%;
   height: 100%;
-  z-index: var(--zIndices-modal);
+  z-index: var(--chakra-zIndices-modal);
 }
 
 .emotion-2 {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  max-width: var(--sizes-md);
+  max-width: var(--chakra-sizes-md);
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -193,11 +193,11 @@ exports[`should render correctly 1`] = `
   -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);
+  z-index: var(--chakra-zIndices-modal);
+  font-family: var(--chakra-fonts-body);
+  background: var(--chakra-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);
+  top: var(--chakra-space-0);
   -webkit-margin-start: auto;
   margin-inline-start: auto;
   -webkit-margin-end: auto;
@@ -227,24 +227,24 @@ exports[`should render correctly 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-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);
+  border: var(--chakra-borders-none);
+  background: var(--chakra-colors-blackAlpha-50);
 }
 
 .emotion-3:hover,
 .emotion-3[data-hover] {
-  background: var(--colors-blackAlpha-100);
+  background: var(--chakra-colors-blackAlpha-100);
 }
 
 .emotion-3:active,
 .emotion-3[data-active] {
-  background: var(--colors-blackAlpha-200);
+  background: var(--chakra-colors-blackAlpha-200);
 }
 
 .emotion-3[disabled],
@@ -255,7 +255,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-3:focus,
 .emotion-3[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-4 {
@@ -278,24 +278,24 @@ exports[`should render correctly 1`] = `
 }
 
 .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);
+  -webkit-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-4);
+  padding-bottom: var(--chakra-space-4);
   position: relative;
-  font-size: var(--fontSizes-xl);
-  font-weight: var(--fontWeights-semibold);
+  font-size: var(--chakra-fontSizes-xl);
+  font-weight: var(--chakra-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-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-2);
+  padding-bottom: var(--chakra-space-2);
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -320,24 +320,24 @@ exports[`should render correctly 1`] = `
   -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);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
   line-height: 2.5rem;
-  border-radius: var(--radii-md);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
 }
 
 .emotion-9[aria-readonly=true],
 .emotion-9[readonly],
 .emotion-9[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -347,7 +347,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-9:hover,
 .emotion-9[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-9[disabled],
@@ -375,12 +375,12 @@ exports[`should render correctly 1`] = `
   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-padding-start: var(--chakra-space-6);
+  padding-inline-start: var(--chakra-space-6);
+  -webkit-padding-end: var(--chakra-space-6);
+  padding-inline-end: var(--chakra-space-6);
+  padding-top: var(--chakra-space-4);
+  padding-bottom: var(--chakra-space-4);
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
@@ -416,37 +416,37 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  border: var(--chakra-borders-1px);
+  border-color: var(--chakra-colors-gray-200);
+  color: var(--chakra-colors-gray-400);
+  background: var(--chakra-colors-transparent);
+  margin-right: var(--chakra-space-3);
 }
 
 .emotion-11:focus,
 .emotion-11[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-11:hover,
 .emotion-11[data-hover] {
-  background: var(--colors-gray-50);
+  background: var(--chakra-colors-gray-50);
 }
 
 .emotion-11:active,
 .emotion-11[data-active] {
-  background: var(--colors-gray-100);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-11[disabled],
@@ -454,7 +454,7 @@ exports[`should render correctly 1`] = `
 .emotion-11[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-12 {
@@ -486,16 +486,16 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
   color: blue;
 }
 
@@ -503,17 +503,17 @@ exports[`should render correctly 1`] = `
 .emotion-12[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-12:hover,
 .emotion-12[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-12:active,
 .emotion-12[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-12[disabled],
@@ -521,7 +521,7 @@ exports[`should render correctly 1`] = `
 .emotion-12[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <span
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 c80a9467..6ad2ce42 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
@@ -7,8 +7,8 @@ exports[`should render correctly 1`] = `
   height: 0.5rem;
   overflow: hidden;
   width: 100%;
-  background: var(--colors-gray-100);
-  border-radius: var(--radii-sm);
+  background: var(--chakra-colors-gray-100);
+  border-radius: var(--chakra-radii-sm);
 }
 
 .emotion-1 {
@@ -16,8 +16,8 @@ exports[`should render correctly 1`] = `
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   width: 40%;
-  background-color: var(--colors-green-500);
-  border-radius: var(--radii-sm);
+  background-color: var(--chakra-colors-green-500);
+  border-radius: var(--chakra-radii-sm);
 }
 
 <div
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 44332831..d232a967 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
@@ -8,19 +8,19 @@ exports[`should change the style 1`] = `
   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);
+  -webkit-padding-start: var(--chakra-space-5);
+  padding-inline-start: var(--chakra-space-5);
+  -webkit-padding-end: var(--chakra-space-5);
+  padding-inline-end: var(--chakra-space-5);
+  padding-top: var(--chakra-space-5);
+  padding-bottom: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-lg);
+  margin-top: var(--chakra-space-5);
+  margin-bottom: var(--chakra-space-5);
+  border-radius: var(--chakra-radii-sm);
+  font-family: var(--chakra-fonts-body);
+  background-color: var(--chakra-colors-blue-200);
+  color: var(--chakra-colors-blue-700);
 }
 
 <div
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 51bb4fcb..895f56f8 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
@@ -45,59 +45,59 @@ exports[`should render correctly 1`] = `
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  width: var(--sizes-4);
-  height: var(--sizes-4);
+  width: var(--chakra-sizes-4);
+  height: var(--chakra-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: var(--chakra-borders-2px);
+  border-radius: var(--chakra-radii-full);
   border-color: inherit;
-  color: var(--colors-white);
+  color: var(--chakra-colors-white);
 }
 
 .emotion-2[aria-checked=true],
 .emotion-2[data-checked] {
-  background: var(--colors-blue-500);
-  border-color: var(--colors-blue-500);
+  background: var(--chakra-colors-blue-500);
+  border-color: var(--chakra-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);
+  background: var(--chakra-colors-gray-100);
+  border-color: var(--chakra-colors-gray-100);
 }
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-2[aria-invalid=true],
 .emotion-2[data-invalid] {
-  border-color: var(--colors-red-500);
+  border-color: var(--chakra-colors-red-500);
 }
 
 input[type=radio]:focus+.emotion-3 {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 input[type=radio]:disabled+.emotion-3 {
-  background: var(--colors-gray-100);
-  border-color: var(--colors-gray-100);
+  background: var(--chakra-colors-gray-100);
+  border-color: var(--chakra-colors-gray-100);
 }
 
 input[type=radio][aria-invalid=true]+.emotion-3 {
-  border-color: var(--colors-red-500);
+  border-color: var(--chakra-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);
+  border-color: var(--chakra-colors-gray-200);
+  background: var(--chakra-colors-gray-200);
+  color: var(--chakra-colors-gray-500);
 }
 
 .emotion-3>* {
@@ -106,8 +106,8 @@ input[type=radio][aria-checked=mixed]:disabled+.emotion-3 {
 
 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);
+  background: var(--chakra-colors-blue-500);
+  border-color: var(--chakra-colors-blue-500);
 }
 
 input[type=radio]:checked+.emotion-3>*,
@@ -117,15 +117,15 @@ input[type=radio][aria-checked=mixed]+.emotion-3>* {
 
 .emotion-4 {
   background: currentColor;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   width: 50%;
   height: 50%;
 }
 
 .emotion-5 {
-  margin-left: var(--space-2);
-  font-size: var(--fontSizes-md);
-  font-family: var(--fonts-body);
+  margin-left: var(--chakra-space-2);
+  font-size: var(--chakra-fontSizes-md);
+  font-family: var(--chakra-fonts-body);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
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 2daabc70..254203a7 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
@@ -31,34 +31,34 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-red-400);
+  color: var(--chakra-colors-white);
 }
 
 .emotion-1:focus,
 .emotion-1[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-1:hover,
 .emotion-1[data-hover] {
-  background: var(--colors-red-500);
+  background: var(--chakra-colors-red-500);
 }
 
 .emotion-1:active,
 .emotion-1[data-active] {
-  background: var(--colors-red-600);
+  background: var(--chakra-colors-red-600);
 }
 
 .emotion-1[disabled],
@@ -66,7 +66,7 @@ exports[`should render correctly 1`] = `
 .emotion-1[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 .emotion-2 {
@@ -98,33 +98,33 @@ exports[`should render correctly 1`] = `
   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);
+  font-weight: var(--chakra-fontWeights-bold);
+  border-radius: var(--chakra-radii-md);
+  height: var(--chakra-sizes-10);
+  min-width: var(--chakra-sizes-10);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  background: var(--chakra-colors-gray-100);
 }
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-2:hover,
 .emotion-2[data-hover] {
-  background: var(--colors-gray-200);
+  background: var(--chakra-colors-gray-200);
 }
 
 .emotion-2:active,
 .emotion-2[data-active] {
-  background: var(--colors-gray-300);
+  background: var(--chakra-colors-gray-300);
 }
 
 .emotion-2[disabled],
@@ -132,7 +132,7 @@ exports[`should render correctly 1`] = `
 .emotion-2[data-disabled] {
   opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: var(--shadows-none);
+  box-shadow: var(--chakra-shadows-none);
 }
 
 <div
diff --git a/packages/chakra-ui-core/src/CSelect/tests/__snapshots__/CSelect.test.js.snap b/packages/chakra-ui-core/src/CSelect/tests/__snapshots__/CSelect.test.js.snap
index 865f6788..baacad83 100644
--- a/packages/chakra-ui-core/src/CSelect/tests/__snapshots__/CSelect.test.js.snap
+++ b/packages/chakra-ui-core/src/CSelect/tests/__snapshots__/CSelect.test.js.snap
@@ -26,27 +26,27 @@ exports[`should render correctly 1`] = `
   -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: var(--lineHeights-normal);
-  border-radius: var(--radii-md);
+  font-size: var(--chakra-fontSizes-md);
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-4);
+  padding-inline-end: var(--chakra-space-4);
+  height: var(--chakra-sizes-10);
+  line-height: var(--chakra-lineHeights-normal);
+  border-radius: var(--chakra-radii-md);
   border-width: 1px;
   border-color: inherit;
-  background: var(--colors-white);
-  font-family: var(--fonts-body);
+  background: var(--chakra-colors-white);
+  font-family: var(--chakra-fonts-body);
   padding-right: 2rem;
-  padding-bottom: var(--space-px);
+  padding-bottom: var(--chakra-space-px);
   color: inherit;
 }
 
 .emotion-1[aria-readonly=true],
 .emotion-1[readonly],
 .emotion-1[data-readonly] {
-  background: var(--colors-transparent);
+  background: var(--chakra-colors-transparent);
   box-shadow: none!important;
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -56,7 +56,7 @@ exports[`should render correctly 1`] = `
 
 .emotion-1:hover,
 .emotion-1[data-hover] {
-  border-color: var(--colors-gray-300);
+  border-color: var(--chakra-colors-gray-300);
 }
 
 .emotion-1[disabled],
@@ -119,8 +119,8 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-4 {
-  width: var(--sizes-5);
-  height: var(--sizes-5);
+  width: var(--chakra-sizes-5);
+  height: var(--chakra-sizes-5);
   display: inline-block;
   vertical-align: middle;
 }
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 bf42c2c8..d1062da3 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
@@ -13,27 +13,27 @@ exports[`CStack should render CStack with element as nav 1`] = `
 }
 
 .emotion-2 {
-  padding: var(--space-5);
-  box-shadow: var(--shadows-md);
+  padding: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-md);
   border-width: 1px;
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-3 {
-  font-size: var(--fontSizes-xl);
-  line-height: var(--lineHeights-shorter);
-  font-weight: var(--fontWeights-bold);
-  font-family: var(--fonts-heading);
+  font-size: var(--chakra-fontSizes-xl);
+  line-height: var(--chakra-lineHeights-shorter);
+  font-weight: var(--chakra-fontWeights-bold);
+  font-family: var(--chakra-fonts-heading);
 }
 
 .emotion-4 {
-  font-family: var(--fonts-body);
-  margin-top: var(--space-4);
+  font-family: var(--chakra-fonts-body);
+  margin-top: var(--chakra-space-4);
 }
 
 .emotion-5 {
-  padding: var(--space-5);
-  box-shadow: var(--shadows-md);
+  padding: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-md);
   border-width: 1px;
 }
 
@@ -97,27 +97,27 @@ exports[`CStack should render CStack with element as section 1`] = `
 }
 
 .emotion-2 {
-  padding: var(--space-5);
-  box-shadow: var(--shadows-md);
+  padding: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-md);
   border-width: 1px;
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-3 {
-  font-size: var(--fontSizes-xl);
-  line-height: var(--lineHeights-shorter);
-  font-weight: var(--fontWeights-bold);
-  font-family: var(--fonts-heading);
+  font-size: var(--chakra-fontSizes-xl);
+  line-height: var(--chakra-lineHeights-shorter);
+  font-weight: var(--chakra-fontWeights-bold);
+  font-family: var(--chakra-fonts-heading);
 }
 
 .emotion-4 {
-  font-family: var(--fonts-body);
-  margin-top: var(--space-4);
+  font-family: var(--chakra-fonts-body);
+  margin-top: var(--chakra-space-4);
 }
 
 .emotion-5 {
-  padding: var(--space-5);
-  box-shadow: var(--shadows-md);
+  padding: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-md);
   border-width: 1px;
 }
 
@@ -181,27 +181,27 @@ exports[`CStack should render correctly 1`] = `
 }
 
 .emotion-2 {
-  padding: var(--space-5);
-  box-shadow: var(--shadows-md);
+  padding: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-md);
   border-width: 1px;
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-3 {
-  font-size: var(--fontSizes-xl);
-  line-height: var(--lineHeights-shorter);
-  font-weight: var(--fontWeights-bold);
-  font-family: var(--fonts-heading);
+  font-size: var(--chakra-fontSizes-xl);
+  line-height: var(--chakra-lineHeights-shorter);
+  font-weight: var(--chakra-fontWeights-bold);
+  font-family: var(--chakra-fonts-heading);
 }
 
 .emotion-4 {
-  font-family: var(--fonts-body);
-  margin-top: var(--space-4);
+  font-family: var(--chakra-fonts-body);
+  margin-top: var(--chakra-space-4);
 }
 
 .emotion-5 {
-  padding: var(--space-5);
-  box-shadow: var(--shadows-md);
+  padding: var(--chakra-space-5);
+  box-shadow: var(--chakra-shadows-md);
   border-width: 1px;
 }
 
@@ -284,18 +284,18 @@ exports[`CStack should should stack native html elements 1`] = `
 }
 
 .emotion-2 {
-  font-family: var(--fonts-body);
-  margin-top: var(--space-4);
-  margin-bottom: var(--space-2);
+  font-family: var(--chakra-fonts-body);
+  margin-top: var(--chakra-space-4);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-3 {
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-5 {
-  font-family: var(--fonts-body);
-  margin-top: var(--space-4);
+  font-family: var(--chakra-fonts-body);
+  margin-top: var(--chakra-space-4);
 }
 
 <div
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 93ad6c59..f73be8f5 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
@@ -6,28 +6,28 @@ exports[`"CStatArrow" should display corresponding icon for "type" prop 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  padding-right: var(--space-4);
+  padding-right: var(--chakra-space-4);
   position: relative;
 }
 
 .emotion-1 {
-  font-family: var(--fonts-body);
-  font-weight: var(--fontWeights-medium);
-  font-size: var(--fontSizes-sm);
+  font-family: var(--chakra-fonts-body);
+  font-weight: var(--chakra-fontWeights-medium);
+  font-size: var(--chakra-fontSizes-sm);
 }
 
 .emotion-2 {
-  font-family: var(--fonts-body);
-  font-size: var(--fontSizes-2xl);
+  font-family: var(--chakra-fonts-body);
+  font-size: var(--chakra-fontSizes-2xl);
   vertical-align: baseline;
-  font-weight: var(--fontWeights-semibold);
+  font-weight: var(--chakra-fontWeights-semibold);
 }
 
 .emotion-3 {
-  font-family: var(--fonts-body);
-  font-size: var(--fontSizes-sm);
+  font-family: var(--chakra-fonts-body);
+  font-size: var(--chakra-fontSizes-sm);
   opacity: 0.8;
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-4 {
@@ -50,9 +50,9 @@ exports[`"CStatArrow" should display corresponding icon for "type" prop 1`] = `
 }
 
 .emotion-6 {
-  margin-right: var(--space-1);
+  margin-right: var(--chakra-space-1);
   vertical-align: middle;
-  color: var(--colors-green-400);
+  color: var(--chakra-colors-green-400);
 }
 
 <div
@@ -104,28 +104,28 @@ exports[`"CStatArrow" should display corresponding icon for "type" prop 2`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  padding-right: var(--space-4);
+  padding-right: var(--chakra-space-4);
   position: relative;
 }
 
 .emotion-1 {
-  font-family: var(--fonts-body);
-  font-weight: var(--fontWeights-medium);
-  font-size: var(--fontSizes-sm);
+  font-family: var(--chakra-fonts-body);
+  font-weight: var(--chakra-fontWeights-medium);
+  font-size: var(--chakra-fontSizes-sm);
 }
 
 .emotion-2 {
-  font-family: var(--fonts-body);
-  font-size: var(--fontSizes-2xl);
+  font-family: var(--chakra-fonts-body);
+  font-size: var(--chakra-fontSizes-2xl);
   vertical-align: baseline;
-  font-weight: var(--fontWeights-semibold);
+  font-weight: var(--chakra-fontWeights-semibold);
 }
 
 .emotion-3 {
-  font-family: var(--fonts-body);
-  font-size: var(--fontSizes-sm);
+  font-family: var(--chakra-fonts-body);
+  font-size: var(--chakra-fontSizes-sm);
   opacity: 0.8;
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 .emotion-4 {
@@ -148,9 +148,9 @@ exports[`"CStatArrow" should display corresponding icon for "type" prop 2`] = `
 }
 
 .emotion-6 {
-  margin-right: var(--space-1);
+  margin-right: var(--chakra-space-1);
   vertical-align: middle;
-  color: var(--colors-red-400);
+  color: var(--chakra-colors-red-400);
 }
 
 <div
@@ -202,28 +202,28 @@ exports[`should render correctly 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  padding-right: var(--space-4);
+  padding-right: var(--chakra-space-4);
   position: relative;
 }
 
 .emotion-1 {
-  font-family: var(--fonts-body);
-  font-weight: var(--fontWeights-medium);
-  font-size: var(--fontSizes-sm);
+  font-family: var(--chakra-fonts-body);
+  font-weight: var(--chakra-fontWeights-medium);
+  font-size: var(--chakra-fontSizes-sm);
 }
 
 .emotion-2 {
-  font-family: var(--fonts-body);
-  font-size: var(--fontSizes-2xl);
+  font-family: var(--chakra-fonts-body);
+  font-size: var(--chakra-fontSizes-2xl);
   vertical-align: baseline;
-  font-weight: var(--fontWeights-semibold);
+  font-weight: var(--chakra-fontWeights-semibold);
 }
 
 .emotion-3 {
-  font-family: var(--fonts-body);
-  font-size: var(--fontSizes-sm);
+  font-family: var(--chakra-fonts-body);
+  font-size: var(--chakra-fontSizes-sm);
   opacity: 0.8;
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--chakra-space-2);
 }
 
 <div
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 7769ccd6..fb4135ab 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
@@ -40,20 +40,20 @@ exports[`should render correctly 1`] = `
   flex-shrink: 0;
   width: 1.875rem;
   height: 1rem;
-  border-radius: var(--radii-full);
-  background: var(--colors-gray-300);
+  border-radius: var(--chakra-radii-full);
+  background: var(--chakra-colors-gray-300);
   box-sizing: content-box;
   padding: 2px;
 }
 
 .emotion-2[aria-checked=true],
 .emotion-2[data-checked] {
-  background: var(--colors-blue-500);
+  background: var(--chakra-colors-blue-500);
 }
 
 .emotion-2:focus,
 .emotion-2[data-focus] {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 .emotion-2:hover,
@@ -69,7 +69,7 @@ exports[`should render correctly 1`] = `
 }
 
 input[type=checkbox]:focus+.emotion-3 {
-  box-shadow: var(--shadows-outline);
+  box-shadow: var(--chakra-shadows-outline);
 }
 
 input[type=checkbox]:hover:not(:disabled):not(:checked)+.emotion-3 {
@@ -95,7 +95,7 @@ input[type=checkbox][aria-checked=mixed]:hover:not(:disabled)+.emotion-3 {
 
 input[type=checkbox]:checked+.emotion-3,
 input[type=checkbox][aria-checked=mixed]+.emotion-3 {
-  background: var(--colors-blue-500);
+  background: var(--chakra-colors-blue-500);
 }
 
 input[type=checkbox]:checked+.emotion-3>*,
@@ -107,10 +107,10 @@ input[type=checkbox][aria-checked=mixed]+.emotion-3>* {
 }
 
 .emotion-4 {
-  background: var(--colors-white);
+  background: var(--chakra-colors-white);
   -webkit-transition: -webkit-transform 250ms;
   transition: transform 250ms;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   height: 1rem;
   width: 1rem;
 }
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 94e98590..5564558f 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
@@ -3,7 +3,7 @@
 exports[`should display tag with custom element 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--chakra-space-3);
 }
 
 .emotion-1 {
@@ -15,22 +15,22 @@ exports[`should display tag with custom element 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  min-height: var(--sizes-8);
+  min-height: var(--chakra-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);
+  border-radius: var(--chakra-radii-full);
+  font-weight: var(--chakra-fontWeights-medium);
+  min-width: var(--chakra-sizes-8);
+  -webkit-padding-start: var(--chakra-space-3);
+  padding-inline-start: var(--chakra-space-3);
+  -webkit-padding-end: var(--chakra-space-3);
+  padding-inline-end: var(--chakra-space-3);
+  background-color: var(--chakra-colors-red-100);
+  color: var(--chakra-colors-red-800);
 }
 
 .emotion-2 {
-  width: var(--sizes-6);
-  height: var(--sizes-6);
+  width: var(--chakra-sizes-6);
+  height: var(--chakra-sizes-6);
   font-size: calc(1.5rem / 2.5);
   line-height: 1.5rem;
   vertical-align: top;
@@ -38,7 +38,7 @@ exports[`should display tag with custom element 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border-radius: var(--radii-full);
+  border-radius: var(--chakra-radii-full);
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -52,8 +52,8 @@ exports[`should display tag with custom element 1`] = `
   justify-content: center;
   position: relative;
   background: #a8eb4f;
-  color: var(--colors-gray-800);
-  border: var(--borders-2px);
+  color: var(--chakra-colors-gray-800);
+  border: var(--chakra-borders-2px);
   border-color: #fff;
 }
 
@@ -62,11 +62,11 @@ exports[`should display tag with custom element 1`] = `
   height: 1.5rem;
   text-align: center;
   text-transform: uppercase;
-  font-weight: var(--fontWeights-medium);
+  font-weight: var(--chakra-fontWeights-medium);
 }
 
 .emotion-4 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -108,7 +108,7 @@ exports[`should display tag with custom element 1`] = `
 exports[`should display tag with right icon 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--chakra-space-3);
 }
 
 .emotion-1 {
@@ -120,22 +120,22 @@ exports[`should display tag with right icon 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  min-height: var(--sizes-6);
+  min-height: var(--chakra-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);
+  border-radius: var(--chakra-radii-md);
+  font-weight: var(--chakra-fontWeights-medium);
+  min-width: var(--chakra-sizes-6);
+  font-size: var(--chakra-fontSizes-sm);
+  -webkit-padding-start: var(--chakra-space-2);
+  padding-inline-start: var(--chakra-space-2);
+  -webkit-padding-end: var(--chakra-space-2);
+  padding-inline-end: var(--chakra-space-2);
+  background-color: var(--chakra-colors-green-100);
+  color: var(--chakra-colors-green-800);
 }
 
 .emotion-2 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -214,7 +214,7 @@ exports[`should display tag with right icon 1`] = `
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--chakra-space-3);
 }
 
 .emotion-1 {
@@ -226,18 +226,18 @@ exports[`should render correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  min-height: var(--sizes-6);
+  min-height: var(--chakra-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);
+  border-radius: var(--chakra-radii-md);
+  font-weight: var(--chakra-fontWeights-medium);
+  min-width: var(--chakra-sizes-6);
+  font-size: var(--chakra-fontSizes-sm);
+  -webkit-padding-start: var(--chakra-space-2);
+  padding-inline-start: var(--chakra-space-2);
+  -webkit-padding-end: var(--chakra-space-2);
+  padding-inline-end: var(--chakra-space-2);
+  background-color: var(--chakra-colors-green-100);
+  color: var(--chakra-colors-green-800);
 }
 
 .emotion-2 {
@@ -275,7 +275,7 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-6 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
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 e0ff4305..63159d83 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
@@ -3,7 +3,7 @@
 exports[`should change the style 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -23,7 +23,7 @@ exports[`should change the style 1`] = `
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  font-family: var(--fonts-body);
+  font-family: var(--chakra-fonts-body);
 }
 
 <p
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
index 6f505506..6b733aeb 100644
--- 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
@@ -9,258 +9,258 @@ exports[`CThemeProvider should inject global Css variables to root 1`] = `
  --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;
+ --chakra-colors-transparent: transparent;
+ --chakra-colors-current: currentColor;
+ --chakra-colors-black: #000;
+ --chakra-colors-white: #fff;
+ --chakra-colors-primary: #1a72ff;
+ --chakra-colors-secondary: #7425f3;
+ --chakra-colors-tertiary: #fe9e4d;
+ --chakra-colors-success: #3ea76a;
+ --chakra-colors-warning: #ffc61a;
+ --chakra-colors-error: #dd3b4b;
+ --chakra-colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
+ --chakra-colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
+ --chakra-colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
+ --chakra-colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
+ --chakra-colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
+ --chakra-colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
+ --chakra-colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
+ --chakra-colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
+ --chakra-colors-whiteAlpha-800: rgba(255, 255, 255, 0.80);
+ --chakra-colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
+ --chakra-colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
+ --chakra-colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
+ --chakra-colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
+ --chakra-colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
+ --chakra-colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
+ --chakra-colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
+ --chakra-colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
+ --chakra-colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
+ --chakra-colors-blackAlpha-800: rgba(0, 0, 0, 0.80);
+ --chakra-colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
+ --chakra-colors-gray-50: #F7FAFC;
+ --chakra-colors-gray-100: #EDF2F7;
+ --chakra-colors-gray-200: #E2E8F0;
+ --chakra-colors-gray-300: #CBD5E0;
+ --chakra-colors-gray-400: #A0AEC0;
+ --chakra-colors-gray-500: #718096;
+ --chakra-colors-gray-600: #4A5568;
+ --chakra-colors-gray-700: #2D3748;
+ --chakra-colors-gray-800: #1A202C;
+ --chakra-colors-gray-900: #171923;
+ --chakra-colors-cyan-50: #EDFDFD;
+ --chakra-colors-cyan-100: #C4F1F9;
+ --chakra-colors-cyan-200: #9DECF9;
+ --chakra-colors-cyan-300: #76E4F7;
+ --chakra-colors-cyan-400: #0BC5EA;
+ --chakra-colors-cyan-500: #00B5D8;
+ --chakra-colors-cyan-600: #00A3C4;
+ --chakra-colors-cyan-700: #0987A0;
+ --chakra-colors-cyan-800: #086F83;
+ --chakra-colors-cyan-900: #065666;
+ --chakra-colors-vue-50: #e1fbf0;
+ --chakra-colors-vue-100: #c0ecda;
+ --chakra-colors-vue-200: #9edfc2;
+ --chakra-colors-vue-300: #79d0aa;
+ --chakra-colors-vue-400: #55c392;
+ --chakra-colors-vue-500: #3caa79;
+ --chakra-colors-vue-600: #2d845e;
+ --chakra-colors-vue-700: #1d5e42;
+ --chakra-colors-vue-800: #0c3a26;
+ --chakra-colors-vue-900: #001508;
+ --chakra-colors-green-50: #e2fbed;
+ --chakra-colors-green-100: #c2ebd4;
+ --chakra-colors-green-200: #9fddb9;
+ --chakra-colors-green-300: #7ccf9e;
+ --chakra-colors-green-400: #58c184;
+ --chakra-colors-green-500: #3ea76a;
+ --chakra-colors-green-600: #2e8251;
+ --chakra-colors-green-700: #1f5d3a;
+ --chakra-colors-green-800: #0f3921;
+ --chakra-colors-green-900: #001506;
+ --chakra-colors-orange-50: #ffefdc;
+ --chakra-colors-orange-100: #ffd4ae;
+ --chakra-colors-orange-200: #ffba7f;
+ --chakra-colors-orange-300: #fe9e4d;
+ --chakra-colors-orange-400: #fd821b;
+ --chakra-colors-orange-500: #e46902;
+ --chakra-colors-orange-600: #b25100;
+ --chakra-colors-orange-700: #7f3900;
+ --chakra-colors-orange-800: #4e2200;
+ --chakra-colors-orange-900: #1f0900;
+ --chakra-colors-red-50: #ffe5e9;
+ --chakra-colors-red-100: #f9bcc2;
+ --chakra-colors-red-200: #ee919a;
+ --chakra-colors-red-300: #e66673;
+ --chakra-colors-red-400: #dd3b4b;
+ --chakra-colors-red-500: #c42231;
+ --chakra-colors-red-600: #991826;
+ --chakra-colors-red-700: #6e101a;
+ --chakra-colors-red-800: #44070e;
+ --chakra-colors-red-900: #1e0001;
+ --chakra-colors-yellow-50: #fff9da;
+ --chakra-colors-yellow-100: #ffecad;
+ --chakra-colors-yellow-200: #ffdf7d;
+ --chakra-colors-yellow-300: #ffd24b;
+ --chakra-colors-yellow-400: #ffc61a;
+ --chakra-colors-yellow-500: #e6ac00;
+ --chakra-colors-yellow-600: #b38600;
+ --chakra-colors-yellow-700: #806000;
+ --chakra-colors-yellow-800: #4e3900;
+ --chakra-colors-yellow-900: #1d1300;
+ --chakra-colors-indigo-50: #f2e5ff;
+ --chakra-colors-indigo-100: #d2b5ff;
+ --chakra-colors-indigo-200: #b285fa;
+ --chakra-colors-indigo-300: #9356f7;
+ --chakra-colors-indigo-400: #7425f3;
+ --chakra-colors-indigo-500: #5a0cda;
+ --chakra-colors-indigo-600: #4608aa;
+ --chakra-colors-indigo-700: #32057b;
+ --chakra-colors-indigo-800: #1e024c;
+ --chakra-colors-indigo-900: #0c001e;
+ --chakra-colors-pink-50: #fff5f7;
+ --chakra-colors-pink-100: #fed7e2;
+ --chakra-colors-pink-200: #fbb6ce;
+ --chakra-colors-pink-300: #f687b3;
+ --chakra-colors-pink-400: #ed64a6;
+ --chakra-colors-pink-500: #d53f8c;
+ --chakra-colors-pink-600: #b83280;
+ --chakra-colors-pink-700: #97266d;
+ --chakra-colors-pink-800: #702459;
+ --chakra-colors-pink-900: #521B41;
+ --chakra-colors-blue-50: #def0ff;
+ --chakra-colors-blue-100: #afd0ff;
+ --chakra-colors-blue-200: #7db1ff;
+ --chakra-colors-blue-300: #4b91ff;
+ --chakra-colors-blue-400: #1a72ff;
+ --chakra-colors-blue-500: #0058e6;
+ --chakra-colors-blue-600: #0045b4;
+ --chakra-colors-blue-700: #003182;
+ --chakra-colors-blue-800: #001d51;
+ --chakra-colors-blue-900: #000a21;
+ --chakra-borders-none: 0;
+ --chakra-borders-1px: 1px solid;
+ --chakra-borders-2px: 2px solid;
+ --chakra-borders-4px: 4px solid;
+ --chakra-borderWidths-sm: 1px;
+ --chakra-borderWidths-md: 2px;
+ --chakra-borderWidths-lg: 4px;
+ --chakra-fonts-heading: -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Helvetica,Arial,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\";
+ --chakra-fonts-body: -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Helvetica,Arial,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\";
+ --chakra-fonts-mono: SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;
+ --chakra-fontSizes-xs: 0.75rem;
+ --chakra-fontSizes-sm: 0.875rem;
+ --chakra-fontSizes-md: 1rem;
+ --chakra-fontSizes-lg: 1.125rem;
+ --chakra-fontSizes-xl: 1.25rem;
+ --chakra-fontSizes-2xl: 1.5rem;
+ --chakra-fontSizes-3xl: 1.875rem;
+ --chakra-fontSizes-4xl: 2.25rem;
+ --chakra-fontSizes-5xl: 3rem;
+ --chakra-fontSizes-6xl: 4rem;
+ --chakra-fontWeights-hairline: 100;
+ --chakra-fontWeights-thin: 200;
+ --chakra-fontWeights-light: 300;
+ --chakra-fontWeights-normal: 400;
+ --chakra-fontWeights-medium: 500;
+ --chakra-fontWeights-semibold: 600;
+ --chakra-fontWeights-bold: 700;
+ --chakra-fontWeights-extrabold: 800;
+ --chakra-fontWeights-black: 900;
+ --chakra-letterSpacings-tighter: -0.05em;
+ --chakra-letterSpacings-tight: -0.025em;
+ --chakra-letterSpacings-normal: 0;
+ --chakra-letterSpacings-wide: 0.025em;
+ --chakra-letterSpacings-wider: 0.05em;
+ --chakra-letterSpacings-widest: 0.1em;
+ --chakra-lineHeights-normal: normal;
+ --chakra-lineHeights-none: 1;
+ --chakra-lineHeights-shorter: 1.25;
+ --chakra-lineHeights-short: 1.375;
+ --chakra-lineHeights-base: 1.5;
+ --chakra-lineHeights-tall: 1.625;
+ --chakra-lineHeights-taller: 2;
+ --chakra-radii-none: 0;
+ --chakra-radii-sm: 0.125rem;
+ --chakra-radii-md: 0.25rem;
+ --chakra-radii-lg: 0.5rem;
+ --chakra-radii-full: 9999px;
+ --chakra-space-0: 0;
+ --chakra-space-1: 0.25rem;
+ --chakra-space-2: 0.5rem;
+ --chakra-space-3: 0.75rem;
+ --chakra-space-4: 1rem;
+ --chakra-space-5: 1.25rem;
+ --chakra-space-6: 1.5rem;
+ --chakra-space-8: 2rem;
+ --chakra-space-10: 2.5rem;
+ --chakra-space-12: 3rem;
+ --chakra-space-16: 4rem;
+ --chakra-space-20: 5rem;
+ --chakra-space-24: 6rem;
+ --chakra-space-32: 8rem;
+ --chakra-space-40: 10rem;
+ --chakra-space-48: 12rem;
+ --chakra-space-56: 14rem;
+ --chakra-space-64: 16rem;
+ --chakra-space-px: 1px;
+ --chakra-shadows-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ --chakra-shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ --chakra-shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ --chakra-shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ --chakra-shadows-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ --chakra-shadows-outline: 0 0 0 3px rgba(66, 153, 225, 0.6);
+ --chakra-shadows-inner: inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06);
+ --chakra-shadows-none: none;
+ --chakra-sizes-0: 0;
+ --chakra-sizes-1: 0.25rem;
+ --chakra-sizes-2: 0.5rem;
+ --chakra-sizes-3: 0.75rem;
+ --chakra-sizes-4: 1rem;
+ --chakra-sizes-5: 1.25rem;
+ --chakra-sizes-6: 1.5rem;
+ --chakra-sizes-8: 2rem;
+ --chakra-sizes-10: 2.5rem;
+ --chakra-sizes-12: 3rem;
+ --chakra-sizes-16: 4rem;
+ --chakra-sizes-20: 5rem;
+ --chakra-sizes-24: 6rem;
+ --chakra-sizes-32: 8rem;
+ --chakra-sizes-40: 10rem;
+ --chakra-sizes-48: 12rem;
+ --chakra-sizes-56: 14rem;
+ --chakra-sizes-64: 16rem;
+ --chakra-sizes-px: 1px;
+ --chakra-sizes-full: 100%;
+ --chakra-sizes-3xs: 14rem;
+ --chakra-sizes-2xs: 16rem;
+ --chakra-sizes-xs: 20rem;
+ --chakra-sizes-sm: 24rem;
+ --chakra-sizes-md: 28rem;
+ --chakra-sizes-lg: 32rem;
+ --chakra-sizes-xl: 36rem;
+ --chakra-sizes-2xl: 42rem;
+ --chakra-sizes-3xl: 48rem;
+ --chakra-sizes-4xl: 56rem;
+ --chakra-sizes-5xl: 64rem;
+ --chakra-sizes-6xl: 72rem;
+ --chakra-sizes-containers-sm: 640px;
+ --chakra-sizes-containers-md: 768px;
+ --chakra-sizes-containers-lg: 1024px;
+ --chakra-sizes-containers-xl: 1280px;
+ --chakra-zIndices-hide: -1;
+ --chakra-zIndices-auto: auto;
+ --chakra-zIndices-base: 0;
+ --chakra-zIndices-docked: 10;
+ --chakra-zIndices-dropdown: 1000;
+ --chakra-zIndices-sticky: 1100;
+ --chakra-zIndices-banner: 1200;
+ --chakra-zIndices-overlay: 1300;
+ --chakra-zIndices-modal: 1400;
+ --chakra-zIndices-popover: 1500;
+ --chakra-zIndices-skipLink: 1600;
+ --chakra-zIndices-toast: 1700;
+ --chakra-zIndices-tooltip: 1800;
 "
 `;
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
index c679c0b9..dbcedf5d 100644
--- a/packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap
+++ b/packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap
@@ -3,8 +3,8 @@
 exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  background: var(--colors-blue-200);
-  color: var(--colors-black);
+  background: var(--chakra-colors-blue-200);
+  color: var(--chakra-colors-black);
   border: 2px solid #0045b4;
 }
 
@@ -20,8 +20,8 @@ exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a functio
 exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 2`] = `
 <DocumentFragment>
   .emotion-0 {
-  background: var(--colors-vue-200);
-  color: var(--colors-white);
+  background: var(--chakra-colors-vue-200);
+  color: var(--chakra-colors-white);
   border: 2px solid #7db1ff;
 }
 
@@ -37,8 +37,8 @@ exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a functio
 exports[`createStyledAttrsMixin baseStyles should be overiden by props 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  background: var(--colors-blue-200);
-  color: var(--colors-gray-200);
+  background: var(--chakra-colors-blue-200);
+  color: var(--chakra-colors-gray-200);
 }
 
 <div
@@ -53,8 +53,8 @@ exports[`createStyledAttrsMixin baseStyles should be overiden by props 1`] = `
 exports[`createStyledAttrsMixin baseStyles should use theme.baseStyles if given 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  background: var(--colors-red-400);
-  color: var(--colors-gray-200);
+  background: var(--chakra-colors-red-400);
+  color: var(--chakra-colors-gray-200);
 }
 
 <div
diff --git a/packages/chakra-ui-core/src/utils/icons.js b/packages/chakra-ui-core/src/utils/icons.js
index aea5c114..5449da9d 100644
--- a/packages/chakra-ui-core/src/utils/icons.js
+++ b/packages/chakra-ui-core/src/utils/icons.js
@@ -14,7 +14,7 @@ const createIcon = (prefix, icon) => {
   const createGroupedPath = (groups, prefix) => {
     const paths = groups.map((d, idx) =>
       createPath(d, {
-        className: idx ? `${prefix}-primary` : `${prefix}-secondary`,
+        className: idx ? `${prefix}-primary` : `${prefix}-secondary`
       })
     )
 
@@ -32,7 +32,7 @@ const createIcon = (prefix, icon) => {
   return {
     path,
     viewBox: `0 0 ${w} ${h}`,
-    attrs,
+    attrs
   }
 }
 
diff --git a/packages/chakra-ui-theme/src/theme/index.js b/packages/chakra-ui-theme/src/theme/index.js
index 09ca06ed..7d40fbad 100644
--- a/packages/chakra-ui-theme/src/theme/index.js
+++ b/packages/chakra-ui-theme/src/theme/index.js
@@ -10,6 +10,12 @@ import breakpoints from './breakpoints'
 
 const space = baseSizes
 
+const config = {
+  useSystemColorMode: false,
+  initialColorMode: 'light',
+  cssVarPrefix: 'chakra'
+}
+
 const theme = {
   breakpoints,
   zIndices,
@@ -21,7 +27,8 @@ const theme = {
   borderWidths,
   sizes,
   shadows,
-  space
+  space,
+  config
 }
 
 export default theme
diff --git a/packages/chakra-ui-theme/types/index.d.ts b/packages/chakra-ui-theme/types/index.d.ts
index c3237bcd..f1ddcf5c 100644
--- a/packages/chakra-ui-theme/types/index.d.ts
+++ b/packages/chakra-ui-theme/types/index.d.ts
@@ -173,6 +173,12 @@ export type ComponentNames =
   'CTooltip' |
   'CVisuallyHidden'
 
+export interface ThemeConfig {
+  initialColorMode?: ColorMode
+  useSystemColorMode?: boolean,
+  cssVarPrefix?: string
+}
+
 declare const theme: Theme
 
 export default theme
diff --git a/website/pages/theme.mdx b/website/pages/theme.mdx
index 078a1588..2e6fa08f 100644
--- a/website/pages/theme.mdx
+++ b/website/pages/theme.mdx
@@ -252,4 +252,26 @@ export default {
     tooltip: 1800,
   },
 };
+```
+
+## Config
+
+The theme's config is to provide global settings that are used by different
+parts of the Chakra UI system.
+
+| Property                  | Description                                                                                                 | Default  |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------- | -------- |
+| `cssVarPrefix`            | The prefix to use for the generated CSS custom properties                                                   | `chakra` |
+| `initialColorMode`        | The initial color mode your application should start with. <br reset/> Can be either `light` or `dark` mode | `light`  |
+| `useSystemColorMode`      | If `true`, the chakra system will update color mode <br reset/> based on your system preferences            | `false`  |
+
+You can leverage the `extendTheme` function to override a specific theme config
+property.
+
+```js
+export default {
+  config: {
+    cssVarPrefix: "ck",
+  },
+};
 ```
\ No newline at end of file