From 4e45b8b1ae91ca3370384326748875d113b822ae Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 14 Mar 2019 14:45:14 +0900
Subject: [PATCH] chore(components): update spacing tokens

And upgrade `carbon-elements`.

Refs #1501.
---
 package.json                                  |   4 +-
 src/components/accordion/_accordion.scss      |  12 +-
 src/components/button/_button.scss            |   6 +-
 src/components/button/_mixins.scss            |   8 +-
 .../code-snippet/_code-snippet.scss           |  18 +-
 .../content-switcher/_content-switcher.scss   |   6 +-
 src/components/date-picker/_date-picker.scss  |  14 +-
 src/components/dropdown/_dropdown.scss        |  10 +-
 .../file-uploader/_file-uploader.scss         |  18 +-
 src/components/form/_form.scss                |   8 +-
 src/components/list-box/_list-box.scss        |   4 +-
 src/components/list/_list.scss                |   6 +-
 src/components/modal/_modal.scss              |   6 +-
 .../notification/_inline-notification.scss    |  12 +-
 .../notification/_toast-notification.scss     |  20 +-
 .../number-input/_number-input.scss           |   6 +-
 .../overflow-menu/_overflow-menu.scss         |   2 +-
 .../pagination-nav/_pagination-nav.scss       |  22 +-
 src/components/pagination/_pagination.scss    |  24 +-
 .../_progress-indicator.scss                  |  14 +-
 .../radio-button/_radio-button.scss           |  12 +-
 src/components/search/_search.scss            |   2 +-
 src/components/select/_select.scss            |   8 +-
 src/components/skeleton/_skeleton-text.scss   |   2 +-
 src/components/slider/_slider.scss            |   4 +-
 src/components/structured-list/_mixins.scss   |  16 +-
 .../structured-list/_structured-list.scss     |   2 +-
 src/components/tabs/_tabs.scss                |  16 +-
 src/components/tag/_tag.scss                  |  26 +-
 src/components/text-area/_text-area.scss      |   6 +-
 src/components/text-input/_text-input.scss    |   2 +-
 src/components/tile/_tile.scss                |   4 +-
 src/components/time-picker/_time-picker.scss  |   4 +-
 src/components/toggle/_toggle.scss            |   4 +-
 src/components/tooltip/_tooltip.scss          |  12 +-
 src/components/ui-shell/_header.scss          |  12 +-
 src/components/ui-shell/_navigation-menu.scss |  26 +-
 src/components/ui-shell/_side-nav.scss        |   6 +-
 src/components/ui-shell/_theme.scss           |  14 +-
 src/globals/grid/_experimental.scss           |   4 +-
 src/globals/scss/_spacing.scss                |   3 +
 src/globals/scss/_theme-tokens.scss           |  10 +-
 .../vendor/@carbon/colors/scss/mixins.scss    | 107 ------
 .../vendor/@carbon/elements/scss/grid/12.scss |  66 ++--
 .../@carbon/elements/scss/grid/_col.scss      | 124 -------
 .../elements/scss/grid/_container.scss        |  59 ----
 .../@carbon/elements/scss/grid/_mixins.scss   | 312 ++++++++++++++++++
 .../@carbon/elements/scss/grid/_row.scss      |  21 --
 .../elements/scss/grid/aspect-ratio.scss      |  45 ---
 .../@carbon/elements/scss/grid/grid.scss      |  29 +-
 .../elements/scss/layout/_breakpoint.scss     |   2 +-
 .../elements/scss/layout/_spacing.scss        |  70 ++--
 .../@carbon/elements/scss/themes/mixins.scss  |  12 +-
 .../@carbon/elements/scss/type/_styles.scss   |  26 ++
 .../scss/vendor/@carbon/grid/scss/12.scss     |  66 ++--
 .../scss/vendor/@carbon/grid/scss/_col.scss   | 124 -------
 .../vendor/@carbon/grid/scss/_container.scss  |  59 ----
 .../vendor/@carbon/grid/scss/_mixins.scss     | 312 ++++++++++++++++++
 .../scss/vendor/@carbon/grid/scss/_row.scss   |  21 --
 .../@carbon/grid/scss/aspect-ratio.scss       |  45 ---
 .../scss/vendor/@carbon/grid/scss/grid.scss   |  29 +-
 .../@carbon/layout/scss/_breakpoint.scss      |   2 +-
 .../vendor/@carbon/layout/scss/_spacing.scss  |  70 ++--
 .../vendor/@carbon/themes/scss/mixins.scss    |  12 +-
 .../vendor/@carbon/type/scss/_styles.scss     |  26 ++
 yarn.lock                                     | 121 +++----
 66 files changed, 1114 insertions(+), 1061 deletions(-)
 delete mode 100644 src/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss
 delete mode 100644 src/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss
 create mode 100644 src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss
 delete mode 100644 src/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss
 delete mode 100644 src/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss
 delete mode 100644 src/globals/scss/vendor/@carbon/grid/scss/_col.scss
 delete mode 100644 src/globals/scss/vendor/@carbon/grid/scss/_container.scss
 create mode 100644 src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss
 delete mode 100644 src/globals/scss/vendor/@carbon/grid/scss/_row.scss
 delete mode 100644 src/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss

diff --git a/package.json b/package.json
index 4fe7a16bf4ed..3dfea983de76 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,8 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.0.0",
-    "@carbon/elements": "^0.0.1-beta.0",
-    "@carbon/icons-handlebars": "^0.0.1-beta.0",
+    "@carbon/elements": "^0.0.1-beta.1",
+    "@carbon/icons-handlebars": "^0.0.1-beta.1",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",
     "@frctl/fractal": "^1.1.0",
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 4ed255355285..21e615d48731 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -224,15 +224,16 @@
 
   .#{$prefix}--accordion__content {
     // Transition property for when the accordion closes
-    transition: height motion(standard, productive) $transition--fast-02, padding motion(standard, productive) $transition--fast-02;
-    padding-left: $spacing-md;
+    transition: height motion(standard, productive) $transition--fast-02,
+      padding motion(standard, productive) $transition--fast-02;
+    padding-left: $carbon--spacing-05;
     padding-right: 25%;
     height: 0;
     visibility: hidden;
     opacity: 0;
 
     @include max-breakpoint('bp--xs--major') {
-      padding-right: $spacing-3xl;
+      padding-right: $carbon--spacing-08;
     }
 
     p {
@@ -246,13 +247,14 @@
     overflow: visible;
 
     .#{$prefix}--accordion__content {
-      padding-bottom: $spacing-lg;
+      padding-bottom: $carbon--spacing-06;
       padding-top: $spacing-xs;
       height: auto;
       visibility: visible;
       opacity: 1;
       // Transition property for when the accordion opens
-      transition: height motion(entrance, productive) $transition--fast-02, padding-top motion(entrance, productive) $transition--fast-02,
+      transition: height motion(entrance, productive) $transition--fast-02,
+        padding-top motion(entrance, productive) $transition--fast-02,
         padding-bottom motion(entrance, productive) $transition--fast-02;
 
       p {
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index e22cb4f60b58..0e8770e20a3e 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -242,10 +242,10 @@
 
     &:hover,
     &:active {
-      color: $ibm-colors__blue-70;
+      color: $ibm-color__blue-70;
 
       .#{$prefix}--btn__icon {
-        fill: $ibm-colors__blue-70;
+        fill: $ibm-color__blue-70;
       }
     }
 
@@ -292,7 +292,7 @@
 
   .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary,
   .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger {
-    margin-left: $spacing-md;
+    margin-left: $carbon--spacing-05;
   }
 
   // Skeleton State
diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
index c814c00b2511..7679e98c8fdf 100644
--- a/src/components/button/_mixins.scss
+++ b/src/components/button/_mixins.scss
@@ -94,8 +94,8 @@
   &:disabled {
     cursor: not-allowed;
     color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
+    background: $ibm-color__gray-30;
+    border-color: $ibm-color__gray-30;
   }
 
   .#{$prefix}--btn__icon {
@@ -155,8 +155,8 @@
   &:disabled:hover,
   &:disabled:focus {
     color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
+    background: $ibm-color__gray-30;
+    border-color: $ibm-color__gray-30;
     text-decoration: none;
   }
 
diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
index 6011e87f6e65..43f5fc2fcc32 100644
--- a/src/components/code-snippet/_code-snippet.scss
+++ b/src/components/code-snippet/_code-snippet.scss
@@ -353,8 +353,8 @@
     border: none;
     max-width: rem(760px);
     min-width: rem(320px);
-    height: $spacing-2xl;
-    padding: 0 56px 0 $spacing-md;
+    height: carbon--mini-units(3.5);
+    padding: 0 56px 0 $carbon--spacing-05;
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
@@ -362,7 +362,7 @@
     align-items: center;
     overflow-x: scroll;
     position: relative;
-    padding: 0 0 $spacing-md 0;
+    padding: 0 0 $carbon--spacing-05 0;
     height: rem(56px);
   }
 
@@ -385,7 +385,7 @@
   .#{$prefix}--snippet--multi {
     @include bx--snippet--x;
     border: none;
-    padding: $spacing-md;
+    padding: $carbon--spacing-05;
     min-width: rem(320px);
     max-width: 100%;
   }
@@ -435,8 +435,8 @@
     background-color: $ui-01;
     outline: none;
     padding: 0;
-    height: $spacing-2xl;
-    width: $spacing-2xl;
+    height: carbon--mini-units(3.5);
+    width: carbon--mini-units(3.5);
     overflow: visible;
 
     &:focus {
@@ -446,8 +446,8 @@
   }
 
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
-    height: $spacing-xl;
-    width: $spacing-xl;
+    height: $carbon--spacing-07;
+    width: $carbon--spacing-07;
     top: $spacing-xs;
     right: $spacing-xs;
   }
@@ -486,7 +486,7 @@
     right: $spacing-xs;
     bottom: $spacing-xs;
     padding: $spacing-xs;
-    padding-left: $spacing-md;
+    padding-left: $carbon--spacing-05;
     color: $text-01;
     background-color: $field-01;
   }
diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
index b856f4825dab..78a58aea64ac 100644
--- a/src/components/content-switcher/_content-switcher.scss
+++ b/src/components/content-switcher/_content-switcher.scss
@@ -131,7 +131,7 @@
     display: inline-block;
     width: 100%;
     height: rem(40px);
-    padding: $spacing-xs $spacing-md;
+    padding: $carbon--spacing-03 $carbon--spacing-05;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
@@ -203,7 +203,7 @@
   }
 
   .#{$prefix}--content-switcher__icon + span {
-    margin-left: $spacing-xs;
+    margin-left: $carbon--spacing-03;
   }
 
   .#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon,
@@ -218,7 +218,7 @@
 
     // TODO: replace with new disabled color token when finalized
     &:disabled {
-      background-color: $ibm-colors__gray-30;
+      background-color: $ibm-color__gray-30;
     }
   }
 
diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
index f38caa75432d..aabce515fb96 100644
--- a/src/components/date-picker/_date-picker.scss
+++ b/src/components/date-picker/_date-picker.scss
@@ -505,7 +505,7 @@
       display: block;
       color: $support-01;
       font-weight: 400;
-      margin-top: $spacing-2xs;
+      margin-top: $carbon--spacing-02;
       overflow: visible;
 
       &::before {
@@ -545,7 +545,7 @@
     position: relative;
     height: rem(40px);
     max-width: rem(288px);
-    padding: 0 $spacing-md;
+    padding: 0 $carbon--spacing-05;
     background-color: $field-01;
     border: none;
     color: $text-01;
@@ -587,7 +587,7 @@
   }
 
   .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input {
-    padding-right: $spacing-3xl;
+    padding-right: $carbon--spacing-08;
   }
 
   .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child {
@@ -607,7 +607,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: $spacing-2xs $spacing-2xs $spacing-xs $spacing-2xs;
+    padding: $carbon--spacing-02 $carbon--spacing-02 $carbon--spacing-03 $carbon--spacing-02;
     width: rem(288px) !important;
     height: rem(336px);
     border-radius: 0;
@@ -631,7 +631,7 @@
     align-items: center;
     width: 100%;
     height: rem(40px);
-    margin-bottom: $spacing-2xs;
+    margin-bottom: $carbon--spacing-02;
   }
 
   .#{$prefix}--date-picker__month .flatpickr-prev-month,
@@ -669,7 +669,7 @@
 
   .#{$prefix}--date-picker__month .flatpickr-current-month .cur-month,
   .flatpickr-month .flatpickr-current-month .cur-month {
-    margin-right: $spacing-2xs;
+    margin-right: $carbon--spacing-02;
     color: $text-01;
   }
 
@@ -680,7 +680,7 @@
     background-color: $field-01;
     border: none;
     border-radius: 0;
-    padding: $spacing-2xs;
+    padding: $carbon--spacing-02;
     // Added in when upgraded to Flatpickr 4.5.5
     -moz-appearance: textfield; /* Firefox */
 
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
index 79c1bca778e4..958f9c150265 100644
--- a/src/components/dropdown/_dropdown.scss
+++ b/src/components/dropdown/_dropdown.scss
@@ -338,9 +338,9 @@
     display: flex;
     align-items: center;
     height: rem(40px);
-    padding-top: $spacing-sm;
-    padding-bottom: $spacing-sm;
-    padding-left: $spacing-md;
+    padding-top: $carbon--spacing-04;
+    padding-bottom: $carbon--spacing-04;
+    padding-left: $carbon--spacing-05;
     padding-right: rem(42px); // 2rem + SVG width
     white-space: nowrap;
     overflow: hidden;
@@ -497,7 +497,7 @@
 
   .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text {
     display: inline-block;
-    padding: rem(7px) rem(32px) rem(7px) $spacing-sm; // TODO: spacing token
+    padding: rem(7px) rem(32px) rem(7px) $carbon--spacing-04; // TODO: spacing token
     height: rem(32px);
     overflow: visible;
     color: $text-01;
@@ -525,7 +525,7 @@
 
   .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-link {
     font-weight: normal;
-    margin-right: $spacing-sm;
+    margin-right: $carbon--spacing-04;
     margin-left: rem(10px);
   }
 
diff --git a/src/components/file-uploader/_file-uploader.scss b/src/components/file-uploader/_file-uploader.scss
index e595fab01374..c11c6a59b7bc 100644
--- a/src/components/file-uploader/_file-uploader.scss
+++ b/src/components/file-uploader/_file-uploader.scss
@@ -114,7 +114,7 @@
   }
 
   .#{$prefix}--file--invalid {
-    margin-right: $spacing-xs;
+    margin-right: $carbon--spacing-03;
     fill: $support-01;
   }
 
@@ -124,7 +124,7 @@
     @include type-style('heading-01');
 
     color: $text-01;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $carbon--spacing-03;
   }
 
   .#{$prefix}--file-input {
@@ -142,13 +142,13 @@
     @include type-style('body-short-01');
 
     color: $text-02;
-    margin-bottom: $spacing-md;
+    margin-bottom: $carbon--spacing-05;
   }
 
   .#{$prefix}--file-container {
     display: block;
     width: 100%;
-    margin-top: $spacing-lg;
+    margin-top: $carbon--spacing-06;
   }
 
   .#{$prefix}--file__selected-file {
@@ -157,8 +157,8 @@
     justify-content: space-between;
     min-height: rem(40px);
     max-width: rem(300px);
-    margin-bottom: $spacing-xs;
-    padding: 0 $spacing-xs 0 $spacing-md;
+    margin-bottom: $carbon--spacing-03;
+    padding: 0 $carbon--spacing-03 0 $carbon--spacing-05;
     background-color: $field-01;
     overflow: hidden;
 
@@ -176,7 +176,7 @@
 
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
-    margin-bottom: $spacing-2xs;
+    margin-bottom: $carbon--spacing-02;
   }
 
   .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
@@ -184,7 +184,7 @@
     max-height: rem(200px);
     color: $support-01;
     font-weight: 400;
-    margin: 0 0 $spacing-xs 0;
+    margin: 0 0 $carbon--spacing-03 0;
     overflow: visible;
   }
 
@@ -194,7 +194,7 @@
     display: inline-block;
     align-items: center;
     color: $text-01;
-    margin-right: $spacing-md;
+    margin-right: $carbon--spacing-05;
     /*rtl:ignore*/
     direction: ltr;
     justify-content: flex-start; /*rtl:{flex-end}*/
diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
index 424cc4429fed..ce0df90be05a 100644
--- a/src/components/form/_form.scss
+++ b/src/components/form/_form.scss
@@ -110,7 +110,7 @@
 @mixin form--x {
   .#{$prefix}--fieldset {
     @include reset;
-    margin-bottom: $spacing-xl;
+    margin-bottom: $carbon--spacing-07;
   }
 
   .#{$prefix}--form-item {
@@ -129,7 +129,7 @@
     font-weight: $input-label-weight;
     display: inline-block;
     vertical-align: baseline;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $carbon--spacing-03;
     line-height: rem(16px);
   }
 
@@ -171,7 +171,7 @@
   .#{$prefix}--form-requirement {
     @include reset;
     @include type-style('caption-01');
-    margin: $spacing-2xs 0 0;
+    margin: $carbon--spacing-02 0 0;
     max-height: 0;
     overflow: hidden;
     line-height: 1.5;
@@ -188,7 +188,7 @@
     color: $text-02;
     z-index: 0;
     opacity: 1;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $carbon--spacing-03;
   }
 
   .#{$prefix}--label--disabled,
diff --git a/src/components/list-box/_list-box.scss b/src/components/list-box/_list-box.scss
index e01f6382095c..a20086ca7339 100644
--- a/src/components/list-box/_list-box.scss
+++ b/src/components/list-box/_list-box.scss
@@ -331,7 +331,7 @@ $list-box-menu-width: rem(300px);
     order: 3;
     color: $support-01;
     font-weight: 400;
-    margin-top: $spacing-2xs;
+    margin-top: $carbon--spacing-02;
 
     &::before {
       display: none;
@@ -382,7 +382,7 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon {
     position: static;
-    padding: 0 $spacing-xs;
+    padding: 0 $carbon--spacing-03;
   }
 
   .#{$prefix}--list-box--inline > .#{$prefix}--list-box__menu {
diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss
index 3bfe3f325bab..adcffcaeac28 100644
--- a/src/components/list/_list.scss
+++ b/src/components/list/_list.scss
@@ -79,19 +79,19 @@
 
   .#{$prefix}--list--nested {
     margin-bottom: rem(4px);
-    margin-left: $spacing-xl;
+    margin-left: $carbon--spacing-07;
   }
 
   .#{$prefix}--list--unordered > .#{$prefix}--list__item:before,
   .#{$prefix}--list--ordered > .#{$prefix}--list__item:before {
     display: inline-block;
-    margin-right: $spacing-xs;
+    margin-right: $carbon--spacing-03;
     margin-bottom: rem(4px);
   }
 
   .#{$prefix}--list--unordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before,
   .#{$prefix}--list--ordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
-    margin-right: $spacing-xs;
+    margin-right: $carbon--spacing-03;
     display: inline-block;
   }
 
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index b9b061667142..975eaec6cf66 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -220,14 +220,14 @@
 
   .#{$prefix}--modal-header {
     padding-top: 1rem;
-    margin-bottom: $spacing-md;
+    margin-bottom: $carbon--spacing-05;
   }
 
   .#{$prefix}--modal-header__label {
     @include type-style('label-01');
 
     color: $text-02;
-    margin-bottom: $spacing-2xs;
+    margin-bottom: $carbon--spacing-02;
   }
 
   .#{$prefix}--modal-header__heading {
@@ -240,7 +240,7 @@
     @include type-style('body-long-01');
 
     overflow-y: auto;
-    margin-bottom: $spacing-3xl;
+    margin-bottom: $carbon--spacing-08;
     color: $text-01;
     font-weight: 400;
   }
diff --git a/src/components/notification/_inline-notification.scss b/src/components/notification/_inline-notification.scss
index d72da727fc13..fad173c9c3ba 100644
--- a/src/components/notification/_inline-notification.scss
+++ b/src/components/notification/_inline-notification.scss
@@ -120,8 +120,8 @@
     min-width: rem(288px);
     max-width: rem(288px);
     color: $text-01;
-    margin-top: $spacing-md;
-    margin-bottom: $spacing-md;
+    margin-top: $carbon--spacing-05;
+    margin-bottom: $carbon--spacing-05;
 
     @include breakpoint(md) {
       max-width: rem(608px);
@@ -163,7 +163,7 @@
 
   .#{$prefix}--inline-notification__details {
     display: flex;
-    margin: 0 $spacing-md;
+    margin: 0 $carbon--spacing-05;
   }
 
   .#{$prefix}--inline-notification__icon {
@@ -171,7 +171,7 @@
     width: rem(20px);
     min-height: rem(20px);
     min-width: rem(20px);
-    margin-right: $spacing-md;
+    margin-right: $carbon--spacing-05;
     margin-top: rem(14px);
   }
 
@@ -179,12 +179,12 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    padding: $spacing-sm 0;
+    padding: $carbon--spacing-04 0;
   }
 
   .#{$prefix}--inline-notification__title {
     @include type-style('heading-01');
-    margin: 0 $spacing-2xs 0 0;
+    margin: 0 $carbon--spacing-02 0 0;
     white-space: nowrap;
   }
 
diff --git a/src/components/notification/_toast-notification.scss b/src/components/notification/_toast-notification.scss
index d8985f22892c..e5ae42124d54 100644
--- a/src/components/notification/_toast-notification.scss
+++ b/src/components/notification/_toast-notification.scss
@@ -111,14 +111,14 @@
     display: flex;
     width: rem(288px);
     height: auto;
-    padding-left: $spacing-md;
+    padding-left: $carbon--spacing-05;
     color: $text-01;
-    margin-top: $spacing-xs;
-    margin-bottom: $spacing-xs;
-    margin-right: $spacing-md;
+    margin-top: $carbon--spacing-03;
+    margin-bottom: $carbon--spacing-03;
+    margin-right: $carbon--spacing-05;
 
     &:first-child {
-      margin-top: $spacing-md;
+      margin-top: $carbon--spacing-05;
     }
 
     @include breakpoint(max) {
@@ -152,12 +152,12 @@
     width: 1rem;
     min-height: 1rem;
     min-width: 1rem;
-    margin-right: $spacing-md;
-    margin-top: $spacing-md;
+    margin-right: $carbon--spacing-05;
+    margin-top: $carbon--spacing-05;
   }
 
   .#{$prefix}--toast-notification__details {
-    margin-right: $spacing-md;
+    margin-right: $carbon--spacing-05;
   }
 
   .#{$prefix}--toast-notification__close-button {
@@ -196,14 +196,14 @@
 
     color: $text-01;
     margin-top: 0;
-    margin-bottom: $spacing-lg;
+    margin-bottom: $carbon--spacing-06;
   }
 
   .#{$prefix}--toast-notification__caption {
     @include type-style('body-short-01');
 
     color: $text-01;
-    margin-bottom: $spacing-md;
+    margin-bottom: $carbon--spacing-05;
   }
 }
 
diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
index efc074c3377c..dfc50ebe93d9 100644
--- a/src/components/number-input/_number-input.scss
+++ b/src/components/number-input/_number-input.scss
@@ -199,8 +199,8 @@
     display: inline-flex;
     width: 100%;
     min-width: 9.375rem;
-    padding-left: $spacing-md;
-    padding-right: $spacing-xl;
+    padding-left: $carbon--spacing-05;
+    padding-right: $carbon--spacing-07;
     font-weight: 300;
     height: rem(40px);
     color: $text-01;
@@ -247,7 +247,7 @@
     ~ .#{$prefix}--form-requirement {
       color: $support-01;
       font-weight: 400;
-      margin-top: $spacing-2xs;
+      margin-top: $carbon--spacing-02;
       overflow: visible;
 
       &::before {
diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
index 25e97b9b6c11..5581a3398264 100644
--- a/src/components/overflow-menu/_overflow-menu.scss
+++ b/src/components/overflow-menu/_overflow-menu.scss
@@ -323,7 +323,7 @@
     align-items: center;
     background-color: transparent;
     text-align: left;
-    padding: 0 $spacing-md;
+    padding: 0 $carbon--spacing-05;
     cursor: pointer;
     color: $text-02;
     max-width: 11.25rem;
diff --git a/src/components/pagination-nav/_pagination-nav.scss b/src/components/pagination-nav/_pagination-nav.scss
index a86a6b954503..992a7ff5a888 100644
--- a/src/components/pagination-nav/_pagination-nav.scss
+++ b/src/components/pagination-nav/_pagination-nav.scss
@@ -26,7 +26,7 @@
         bottom: 0;
         content: '';
         display: block;
-        height: $spacing-2xs;
+        height: $carbon--spacing-02;
         left: 50%;
         position: absolute;
         opacity: 0;
@@ -37,9 +37,9 @@
 
     .#{$prefix}--pagination-nav__page--active + &::after,
     &.#{$prefix}--pagination-nav__page--active::after {
-      left: calc(50% - #{$spacing-md/2});
+      left: calc(50% - #{$carbon--spacing-05/2});
       opacity: 1;
-      width: $spacing-md;
+      width: $carbon--spacing-05;
     }
   }
 }
@@ -51,9 +51,11 @@
   $background-color-active: initial,
   $font-weight: 400,
   $item-padding: 0,
-  $button-min-width: $spacing-3xl,
-  $button-padding: 1.0625rem $spacing-2xs,
-  $button-direction-size: $spacing-3xl
+  $button-min-width: $carbon--spacing-08,
+  $button-padding: 1.0625rem $carbon--spacing-02,
+  $button-direction-size: $carbon--spacing-08,
+  $select-icon-top-position: $carbon--spacing-05,
+  $select-icon-left-position: $carbon--spacing-05
 ) {
   .#{$prefix}--pagination-nav {
     @include reset;
@@ -172,10 +174,10 @@
   }
 
   .#{$prefix}--pagination-nav__select-icon {
-    left: calc(50% - #{$spacing-md/2});
+    left: calc(50% - #{$select-icon-top-position/2});
     pointer-events: none;
     position: absolute;
-    top: calc(50% - #{$spacing-md/2});
+    top: calc(50% - #{$select-icon-top-position/2});
   }
 
   .#{$prefix}--pagination-nav__accessibility-label {
@@ -195,7 +197,9 @@
     $item-padding: 0 $spacing-xs,
     $button-min-width: $spacing-lg,
     $button-padding: 0.3125rem $spacing-2xs,
-    $button-direction-size: $spacing-lg
+    $button-direction-size: $spacing-lg,
+    $select-icon-top-position: $spacing-md,
+    $select-icon-left-position: $spacing-md
   );
 
   .#{$prefix}--pagination-nav__list-item {
diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
index 2141b3166fdd..9f2ff03dca62 100644
--- a/src/components/pagination/_pagination.scss
+++ b/src/components/pagination/_pagination.scss
@@ -207,7 +207,7 @@ $css--helpers: true;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-top: $spacing-4xs solid $ui-03;
+    border-top: 1px solid $ui-03;
     height: rem(48px);
 
     .#{$prefix}--select {
@@ -236,12 +236,12 @@ $css--helpers: true;
     }
 
     .#{$prefix}--select__item-count {
-      border-right: $spacing-4xs solid $ui-03;
+      border-right: 1px solid $ui-03;
       padding-right: 0.5rem;
     }
 
     .#{$prefix}--select__page-number {
-      border-left: $spacing-4xs solid $ui-03;
+      border-left: 1px solid $ui-03;
       padding-left: 0.5rem;
     }
   }
@@ -268,7 +268,7 @@ $css--helpers: true;
   }
 
   .#{$prefix}--pagination__left {
-    padding: 0 $spacing-md;
+    padding: 0 $carbon--spacing-05;
   }
 
   .#{$prefix}--pagination__text {
@@ -286,7 +286,7 @@ $css--helpers: true;
   }
 
   span.#{$prefix}--pagination__text {
-    margin-left: $spacing-md;
+    margin-left: $carbon--spacing-05;
     color: $text-02;
   }
 
@@ -298,7 +298,7 @@ $css--helpers: true;
     height: 100%;
     margin: 0;
     padding: 0 rem(14px);
-    border-left: $spacing-4xs solid $ui-03;
+    border-left: 1px solid $ui-03;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -331,20 +331,20 @@ $css--helpers: true;
 
     .#{$prefix}--pagination__button {
       height: rem(40px);
-      border-left: $spacing-4xs solid $ui-03;
-      border-right: $spacing-4xs solid $ui-03;
+      border-left: 1px solid $ui-03;
+      border-right: 1px solid $ui-03;
       margin: 0;
     }
 
     .#{$prefix}--pagination__button--forward {
       border-right: 0;
-      padding: 0 $spacing-md;
-      margin-left: $spacing-md;
+      padding: 0 $carbon--spacing-05;
+      margin-left: $carbon--spacing-05;
     }
 
     .#{$prefix}--pagination__button--backward {
-      margin: 0 $spacing-md;
-      padding: 0 $spacing-md;
+      margin: 0 $carbon--spacing-05;
+      padding: 0 $carbon--spacing-05;
     }
   }
 
diff --git a/src/components/progress-indicator/_progress-indicator.scss b/src/components/progress-indicator/_progress-indicator.scss
index 637097929291..edd402555e8f 100644
--- a/src/components/progress-indicator/_progress-indicator.scss
+++ b/src/components/progress-indicator/_progress-indicator.scss
@@ -198,17 +198,17 @@
   .#{$prefix}--progress-step svg {
     position: relative;
     z-index: 1;
-    width: $spacing-md;
-    height: $spacing-md;
+    width: $carbon--spacing-05;
+    height: $carbon--spacing-05;
     border-radius: 50%;
-    margin: 9px $spacing-xs 0 0;
+    margin: 9px $carbon--spacing-03 0 0;
     fill: $interactive-01;
   }
 
   .#{$prefix}--progress-label {
     line-height: 1.45;
     max-width: rem(88px);
-    margin: $spacing-xs 0 0 0;
+    margin: $carbon--spacing-03 0 0 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -254,10 +254,10 @@
   .#{$prefix}--progress-step .#{$prefix}--tooltip {
     min-width: rem(115px);
     width: rem(125px);
-    min-height: $spacing-lg;
+    min-height: $carbon--spacing-06;
     margin-left: rem(22px);
     margin-top: rem(40px);
-    padding: $spacing-xs $spacing-md;
+    padding: $carbon--spacing-03 $carbon--spacing-05;
     display: block;
     visibility: hidden;
     @include type-style('body-long-01');
@@ -275,7 +275,7 @@
   //OPTIONAL HELPER TEXT STYLING
   .#{$prefix}--progress-optional {
     position: absolute;
-    margin-left: $spacing-lg;
+    margin-left: $carbon--spacing-06;
     margin-top: rem(28px);
     @include type-style('label-01');
     color: $text-02;
diff --git a/src/components/radio-button/_radio-button.scss b/src/components/radio-button/_radio-button.scss
index 23e6288e91ba..1470cd14a262 100644
--- a/src/components/radio-button/_radio-button.scss
+++ b/src/components/radio-button/_radio-button.scss
@@ -152,7 +152,7 @@
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {
-      margin-bottom: $spacing-xs;
+      margin-bottom: $carbon--spacing-03;
     }
   }
 
@@ -166,7 +166,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin-right: $spacing-md;
+    margin-right: $carbon--spacing-05;
   }
 
   .#{$prefix}--radio-button__appearance {
@@ -177,7 +177,7 @@
     flex-shrink: 0;
     height: rem(18px);
     width: rem(18px);
-    margin-right: $spacing-xs;
+    margin-right: $carbon--spacing-03;
   }
 
   .#{$prefix}--radio-button:checked + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
@@ -238,12 +238,12 @@
   }
 
   .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
-    margin-right: $spacing-md;
+    margin-right: $carbon--spacing-05;
   }
 
   .#{$prefix}--radio-button-group--vertical .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
     margin-right: 0;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $carbon--spacing-03;
   }
 
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right .#{$prefix}--radio-button__label {
@@ -256,7 +256,7 @@
 
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left .#{$prefix}--radio-button__appearance {
     margin-right: 0;
-    margin-left: $spacing-xs;
+    margin-left: $carbon--spacing-03;
   }
 }
 
diff --git a/src/components/search/_search.scss b/src/components/search/_search.scss
index 62d5d909afe8..01bb4c6ae2fa 100644
--- a/src/components/search/_search.scss
+++ b/src/components/search/_search.scss
@@ -188,7 +188,7 @@
     border: none;
     background-color: $field-01;
     color: $text-01;
-    padding: 0 $spacing-2xl;
+    padding: 0 carbon--mini-units(3.5);
     text-overflow: ellipsis;
     width: 100%;
     order: 1;
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
index 87509b92e3e3..375c76752e79 100644
--- a/src/components/select/_select.scss
+++ b/src/components/select/_select.scss
@@ -225,7 +225,7 @@
     width: rem(224px);
     min-width: rem(128px);
     max-width: rem(448px);
-    padding: 0 rem(34px) 0 $spacing-md; // 1.5rem + chevron width
+    padding: 0 rem(34px) 0 $carbon--spacing-05; // 1.5rem + chevron width
     color: $text-01;
     background-color: $field-01;
     border: none;
@@ -341,7 +341,7 @@
 
   .#{$prefix}--select--inline .#{$prefix}--label {
     white-space: nowrap;
-    margin: 0 $spacing-xs 0 0;
+    margin: 0 $carbon--spacing-03 0 0;
     align-self: center;
   }
 
@@ -349,7 +349,7 @@
     background-color: transparent;
     color: $text-01;
     border-bottom: none;
-    padding-left: $spacing-xs;
+    padding-left: $carbon--spacing-03;
 
     @-moz-document url-prefix() {
       padding-top: 0;
@@ -363,7 +363,7 @@
   .#{$prefix}--select--inline .#{$prefix}--select__arrow {
     bottom: auto;
     top: 1.125rem;
-    right: $spacing-xs;
+    right: $carbon--spacing-03;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select--invalid ~ .#{$prefix}--select__invalid-icon {
diff --git a/src/components/skeleton/_skeleton-text.scss b/src/components/skeleton/_skeleton-text.scss
index bac280e4ab6a..1c74db0a2c5e 100644
--- a/src/components/skeleton/_skeleton-text.scss
+++ b/src/components/skeleton/_skeleton-text.scss
@@ -14,7 +14,7 @@
     @include skeleton;
     width: 100%;
     height: 1rem;
-    margin-bottom: $spacing-xs;
+    margin-bottom: if(not feature-flag-enabled('components-x'), $spacing-xs, $carbon--spacing-03);
   }
 
   .#{$prefix}--skeleton__heading {
diff --git a/src/components/slider/_slider.scss b/src/components/slider/_slider.scss
index 3f70206a7b35..1c74798d784b 100644
--- a/src/components/slider/_slider.scss
+++ b/src/components/slider/_slider.scss
@@ -165,7 +165,7 @@
   .#{$prefix}--slider {
     position: relative;
     width: 100%;
-    margin: 0 $spacing-md;
+    margin: 0 $carbon--spacing-05;
     max-width: rem(640px);
     min-width: rem(200px);
   }
@@ -176,7 +176,7 @@
     color: $text-01;
 
     &:last-of-type {
-      margin-right: $spacing-md;
+      margin-right: $carbon--spacing-05;
     }
   }
 
diff --git a/src/components/structured-list/_mixins.scss b/src/components/structured-list/_mixins.scss
index eece1b0a1dd8..93204db8fc22 100644
--- a/src/components/structured-list/_mixins.scss
+++ b/src/components/structured-list/_mixins.scss
@@ -71,16 +71,16 @@
 
 // Used only for experimental normal structured-list
 @mixin padding-th--x($padding: $structured-list-padding) {
-  padding-left: $spacing-md;
-  padding-right: $spacing-md;
-  padding-top: $spacing-md;
-  padding-bottom: $spacing-xs;
+  padding-left: $carbon--spacing-05;
+  padding-right: $carbon--spacing-05;
+  padding-top: $carbon--spacing-05;
+  padding-bottom: $carbon--spacing-03;
 }
 
 // Used only for experimental normal structured-list
 @mixin padding-td--x($padding: $structured-list-padding) {
-  padding-top: $spacing-md;
-  padding-right: $spacing-md;
-  padding-bottom: $spacing-lg;
-  padding-left: $spacing-md;
+  padding-top: $carbon--spacing-05;
+  padding-right: $carbon--spacing-05;
+  padding-bottom: $carbon--spacing-06;
+  padding-left: $carbon--spacing-05;
 }
diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss
index bcab2f239874..473a3a073d80 100644
--- a/src/components/structured-list/_structured-list.scss
+++ b/src/components/structured-list/_structured-list.scss
@@ -296,7 +296,7 @@
   }
 
   .#{$prefix}--structured-list-row:hover .#{$prefix}--structured-list-svg {
-    fill: $ibm-colors__gray-40;
+    fill: $ibm-color__gray-40;
   }
 
   .#{$prefix}--structured-list-input:checked + .#{$prefix}--structured-list-row .#{$prefix}--structured-list-svg,
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index 19a8f3ca7e9f..ee02a730283c 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -232,7 +232,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 $spacing-md;
+    padding: 0 $carbon--spacing-05;
     height: rem(40px);
     cursor: pointer;
     color: $text-01;
@@ -302,8 +302,8 @@
     background: $ui-01;
     @include breakpoint(bp--sm--major) {
       flex-direction: row;
-      margin-right: $spacing-md;
-      margin-left: $spacing-md;
+      margin-right: $carbon--spacing-05;
+      margin-left: $carbon--spacing-05;
       background: none;
       box-shadow: none;
       z-index: auto;
@@ -316,7 +316,7 @@
       transition: max-height $transition--expansion $carbon--standard-easing;
       max-height: 600px;
       width: 100%;
-      padding-top: $spacing-4xs;
+      padding-top: 0;
     }
   }
 
@@ -405,19 +405,19 @@
     color: $text-02;
     text-decoration: none;
     font-weight: 400;
-    padding: $spacing-xs $spacing-md;
+    padding: $carbon--spacing-03 $carbon--spacing-05;
     width: rem(160px);
     white-space: nowrap;
     text-overflow: ellipsis;
     @include breakpoint(bp--sm--major) {
       border-bottom: $tab-underline-color;
-      padding: $spacing-xs $spacing-md;
+      padding: $carbon--spacing-03 $carbon--spacing-05;
     }
     @include max-breakpoint(bp--sm--major) {
       height: rem(40px);
       width: calc(100% - 32px);
-      margin: 0 $spacing-md;
-      padding: $spacing-sm 0;
+      margin: 0 $carbon--spacing-05;
+      padding: $carbon--spacing-04 0;
       line-height: rem(16px);
       color: $text-02;
       border-bottom: 1px solid $ui-03;
diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss
index a9d22668b42b..ba6ba0928753 100644
--- a/src/components/tag/_tag.scss
+++ b/src/components/tag/_tag.scss
@@ -77,9 +77,9 @@
     @include type-style('label-01');
     display: inline-flex;
     align-items: center;
-    padding: 0 $spacing-xs;
+    padding: 0 $carbon--spacing-03;
     height: 1.5rem;
-    margin: $spacing-2xs;
+    margin: $carbon--spacing-02;
     border-radius: rem(15px);
 
     &:not(:first-child) {
@@ -92,47 +92,47 @@
   }
 
   .#{$prefix}--tag--red {
-    @include tag-theme--x($ibm-colors__red-20, $ibm-colors__red-70);
+    @include tag-theme--x($ibm-color__red-20, $ibm-color__red-70);
   }
 
   .#{$prefix}--tag--magenta {
-    @include tag-theme--x($ibm-colors__magenta-20, $ibm-colors__magenta-70);
+    @include tag-theme--x($ibm-color__magenta-20, $ibm-color__magenta-70);
   }
 
   .#{$prefix}--tag--purple {
-    @include tag-theme--x($ibm-colors__purple-20, $ibm-colors__purple-70);
+    @include tag-theme--x($ibm-color__purple-20, $ibm-color__purple-70);
   }
 
   .#{$prefix}--tag--blue {
-    @include tag-theme--x($ibm-colors__blue-20, $ibm-colors__blue-70);
+    @include tag-theme--x($ibm-color__blue-20, $ibm-color__blue-70);
   }
 
   .#{$prefix}--tag--cyan {
-    @include tag-theme--x($ibm-colors__cyan-20, $ibm-colors__cyan-70);
+    @include tag-theme--x($ibm-color__cyan-20, $ibm-color__cyan-70);
   }
 
   .#{$prefix}--tag--teal {
-    @include tag-theme--x($ibm-colors__teal-20, $ibm-colors__teal-70);
+    @include tag-theme--x($ibm-color__teal-20, $ibm-color__teal-70);
   }
 
   .#{$prefix}--tag--green {
-    @include tag-theme--x($ibm-colors__green-20, $ibm-colors__green-70);
+    @include tag-theme--x($ibm-color__green-20, $ibm-color__green-70);
   }
 
   .#{$prefix}--tag--gray {
-    @include tag-theme--x($ibm-colors__gray-20, $ibm-colors__gray-100);
+    @include tag-theme--x($ibm-color__gray-20, $ibm-color__gray-100);
   }
 
   .#{$prefix}--tag--cool-gray {
-    @include tag-theme--x($ibm-colors__cool-gray-20, $ibm-colors__cool-gray-100);
+    @include tag-theme--x($ibm-color__cool-gray-20, $ibm-color__cool-gray-100);
   }
 
   .#{$prefix}--tag--warm-gray {
-    @include tag-theme--x($ibm-colors__warm-gray-20, $ibm-colors__warm-gray-100);
+    @include tag-theme--x($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
   }
 
   .#{$prefix}--tag--disabled {
-    @include tag-theme--x($ibm-colors__gray-10, $ibm-colors__gray-30);
+    @include tag-theme--x($ibm-color__gray-10, $ibm-color__gray-30);
 
     &:hover {
       cursor: not-allowed;
diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
index 48c7ace3f7db..0c0bb8259f9b 100644
--- a/src/components/text-area/_text-area.scss
+++ b/src/components/text-area/_text-area.scss
@@ -105,7 +105,7 @@
     width: 100%;
     min-width: 10rem;
     min-height: rem(40px);
-    padding: rem(11px) $spacing-md;
+    padding: rem(11px) $carbon--spacing-05;
     color: $text-01;
     order: 3;
     resize: vertical;
@@ -123,7 +123,7 @@
       order: 4;
       color: $support-01;
       font-weight: 400;
-      margin-top: $spacing-2xs;
+      margin-top: $carbon--spacing-02;
 
       &::before {
         display: none;
@@ -146,7 +146,7 @@
   }
 
   .#{$prefix}--text-area--invalid {
-    padding-right: $spacing-2xl;
+    padding-right: carbon--mini-units(3.5);
   }
 
   .#{$prefix}--text-area__wrapper {
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index bb43721a4866..4fb563a174c1 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -133,7 +133,7 @@
     background-color: $field-01;
     width: 100%;
     height: rem(40px);
-    padding: 0 $spacing-md; // TODO: REPLACE SPACING TOKEN
+    padding: 0 $carbon--spacing-05;
     color: $text-01;
     border: none;
     border-bottom: 1px solid $ui-04;
diff --git a/src/components/tile/_tile.scss b/src/components/tile/_tile.scss
index 61879e211cbe..a511f8e6cecb 100644
--- a/src/components/tile/_tile.scss
+++ b/src/components/tile/_tile.scss
@@ -190,7 +190,7 @@
     min-height: 4rem;
     background-color: $ui-01;
     position: relative;
-    padding: $spacing-md;
+    padding: $carbon--spacing-05;
     outline: 2px solid transparent;
     outline-offset: -2px;
 
@@ -225,7 +225,7 @@
   }
 
   .#{$prefix}--tile--selectable {
-    padding-right: $spacing-3xl;
+    padding-right: $carbon--spacing-08;
   }
 
   .#{$prefix}--tile__checkmark,
diff --git a/src/components/time-picker/_time-picker.scss b/src/components/time-picker/_time-picker.scss
index 1b72eaf53498..87aef93e4ec5 100644
--- a/src/components/time-picker/_time-picker.scss
+++ b/src/components/time-picker/_time-picker.scss
@@ -117,7 +117,7 @@
   }
 
   .#{$prefix}--time-picker__select:not(:last-of-type) {
-    margin: 0 $spacing-3xs;
+    margin: 0 $carbon--spacing-01;
   }
 
   .#{$prefix}--time-picker__input {
@@ -147,7 +147,7 @@
     width: 4.875rem;
     color: $text-01;
     height: rem(40px);
-    padding: 0 $spacing-md;
+    padding: 0 $carbon--spacing-05;
     order: 2;
     transition: outline $transition--base;
 
diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
index b13b4c93e805..4a995922dbae 100644
--- a/src/components/toggle/_toggle.scss
+++ b/src/components/toggle/_toggle.scss
@@ -238,7 +238,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin: $spacing-xs 0;
+    margin: $carbon--spacing-03 0;
   }
 
   .#{$prefix}--toggle__appearance {
@@ -316,7 +316,7 @@
   .#{$prefix}--toggle__text--right {
     @include type-style('body-short-01');
     position: relative;
-    margin-left: $spacing-xs;
+    margin-left: $carbon--spacing-03;
   }
 
   .#{$prefix}--toggle__text--left {
diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
index 29bd97f80d2d..a96558a0ad82 100644
--- a/src/components/tooltip/_tooltip.scss
+++ b/src/components/tooltip/_tooltip.scss
@@ -346,7 +346,7 @@
     color: $text-02;
 
     .#{$prefix}--tooltip__trigger {
-      margin-left: $spacing-xs;
+      margin-left: $carbon--spacing-03;
     }
   }
 
@@ -381,7 +381,7 @@
     min-width: rem(208px);
     max-width: rem(288px);
     background: $inverse-02;
-    margin-top: $spacing-2xs;
+    margin-top: $carbon--spacing-02;
     padding: 1rem;
     border-radius: rem(2px);
     z-index: z('floating');
@@ -393,7 +393,7 @@
     }
 
     button {
-      padding-right: $spacing-xl;
+      padding-right: $carbon--spacing-07;
     }
 
     .#{$prefix}--link {
@@ -503,8 +503,8 @@
     display: none;
     background: $inverse-02;
     width: rem(208px);
-    margin-top: $spacing-sm;
-    padding: $spacing-xs $spacing-md;
+    margin-top: $carbon--spacing-04;
+    padding: $carbon--spacing-03 $carbon--spacing-05;
     border-radius: rem(2px);
     pointer-events: none;
     cursor: pointer;
@@ -521,7 +521,7 @@
       width: 0.6rem;
       height: 0.6rem;
       background: $inverse-02;
-      margin-left: $spacing-md;
+      margin-left: $carbon--spacing-05;
     }
   }
 
diff --git a/src/components/ui-shell/_header.scss b/src/components/ui-shell/_header.scss
index b37fad1baf72..ad6b9d365843 100644
--- a/src/components/ui-shell/_header.scss
+++ b/src/components/ui-shell/_header.scss
@@ -140,11 +140,11 @@
 
   .#{$prefix}--header__action:active,
   a.#{$prefix}--header__menu-item[role='menuitem']:active {
-    background-color: $ibm-colors__gray-80;
+    background-color: $ibm-color__gray-80;
   }
 
   a.#{$prefix}--header__menu-item[role='menuitem']:focus {
-    border-color: $ibm-colors__blue-60;
+    border-color: $ibm-color__blue-60;
     outline: none;
   }
 
@@ -157,7 +157,7 @@
   }
 
   .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
-    background-color: $ibm-colors__gray-80;
+    background-color: $ibm-color__gray-80;
     // Note: needs to be higher than menu. Adding 1 here instead of moving to
     // the next level.
     z-index: #{z('header') + 1};
@@ -179,7 +179,7 @@
     width: mini-units(25);
     flex-direction: column;
     transform: translateY(100%);
-    background-color: $ibm-colors__gray-80;
+    background-color: $ibm-color__gray-80;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
     z-index: z('header');
   }
@@ -194,7 +194,7 @@
   }
 
   .#{$prefix}--header__menu-arrow {
-    fill: $ibm-colors__gray-10;
+    fill: $ibm-color__gray-10;
     margin-left: mini-units(1);
   }
 
@@ -232,7 +232,7 @@
     width: auto;
     height: 3rem;
     clip: auto;
-    border: 4px solid $ibm-colors__blue-60;
+    border: 4px solid $ibm-color__blue-60;
     z-index: 9999;
     background-color: $shell-header-bg-01;
     color: $shell-header-text-01;
diff --git a/src/components/ui-shell/_navigation-menu.scss b/src/components/ui-shell/_navigation-menu.scss
index 5215777a9ebc..ae0fe671210d 100644
--- a/src/components/ui-shell/_navigation-menu.scss
+++ b/src/components/ui-shell/_navigation-menu.scss
@@ -19,11 +19,11 @@
     top: mini-units(6);
     bottom: 0;
     left: 0;
-    background-color: $ibm-colors__gray-90;
+    background-color: $ibm-color__gray-90;
     width: mini-units(32);
     z-index: z('dropdown');
     box-shadow: 0 mini-units(1) mini-units(2) 0 rgba(0, 0, 0, 0.25);
-    color: $ibm-colors__gray-10;
+    color: $ibm-color__gray-10;
   }
 
   .#{$prefix}--navigation--right {
@@ -32,7 +32,7 @@
   }
 
   .#{$prefix}--navigation svg {
-    fill: $ibm-colors__gray-10;
+    fill: $ibm-color__gray-10;
   }
 
   //----------------------------------------------------------------------------
@@ -42,7 +42,7 @@
     display: block;
     content: '';
     height: 1px;
-    background-color: $ibm-colors__gray-80;
+    background-color: $ibm-color__gray-80;
     margin: 0 mini-units(2);
   }
 
@@ -56,7 +56,7 @@
   }
 
   .#{$prefix}--navigation-item--active > a.#{$prefix}--navigation-link {
-    color: $ibm-colors__white;
+    color: $ibm-color__white-0;
     font-weight: 600;
   }
 
@@ -68,7 +68,7 @@
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: $ibm-colors__blue-60;
+    background-color: $ibm-color__blue-60;
   }
 
   //----------------------------------------------------------------------------
@@ -77,7 +77,7 @@
   a.#{$prefix}--navigation-link {
     display: flex;
     align-items: center;
-    color: $ibm-colors__gray-10;
+    color: $ibm-color__gray-10;
     text-decoration: none;
     font-size: rem(14px);
     font-weight: 400;
@@ -88,11 +88,11 @@
 
   a.#{$prefix}--navigation-link:hover {
     background-color: #333333;
-    color: $ibm-colors__white;
+    color: $ibm-color__white-0;
   }
 
   a.#{$prefix}--navigation-link:focus {
-    outline: rem(3px) solid $ibm-colors__blue-60;
+    outline: rem(3px) solid $ibm-color__blue-60;
     outline-offset: rem(-3px);
   }
 
@@ -119,7 +119,7 @@
   }
 
   .#{$prefix}--navigation__category-toggle:focus {
-    outline: rem(3px) solid $ibm-colors__blue-60;
+    outline: rem(3px) solid $ibm-color__blue-60;
     outline-offset: rem(-3px);
   }
 
@@ -129,7 +129,7 @@
     justify-content: space-between;
     padding-right: mini-units(2);
     width: 100%;
-    color: $ibm-colors__gray-10;
+    color: $ibm-color__gray-10;
     font-size: rem(14px);
     font-weight: 400;
     min-height: mini-units(5);
@@ -168,12 +168,12 @@
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: $ibm-colors__blue-60;
+    background-color: $ibm-color__blue-60;
   }
 
   .#{$prefix}--navigation__category-item--active > a.#{$prefix}--navigation-link {
     font-weight: 600;
-    color: $ibm-colors__white;
+    color: $ibm-color__white-0;
   }
 
   .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-title {
diff --git a/src/components/ui-shell/_side-nav.scss b/src/components/ui-shell/_side-nav.scss
index 51b17707579a..11f06cc32611 100644
--- a/src/components/ui-shell/_side-nav.scss
+++ b/src/components/ui-shell/_side-nav.scss
@@ -90,7 +90,7 @@
     // Useful to toggle this property to see what's going on when not expanded
     overflow: hidden;
     // Separates out the panel from the header of the same color
-    border-top: 1px solid $ibm-colors__gray-80;
+    border-top: 1px solid $ibm-color__gray-80;
     z-index: z('header');
   }
 
@@ -123,7 +123,7 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__header {
     display: flex;
-    border-bottom: 1px solid $ibm-colors__gray-80;
+    border-bottom: 1px solid $ibm-color__gray-80;
     width: 100%;
     height: mini-units(6);
     max-width: 100%;
@@ -333,7 +333,7 @@
 
   .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link--current,
   .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link[aria-current='page'] {
-    background-color: $ibm-colors__gray-70;
+    background-color: $ibm-color__gray-70;
   }
 
   //----------------------------------------------------------------------------
diff --git a/src/components/ui-shell/_theme.scss b/src/components/ui-shell/_theme.scss
index 3ee746a1281c..d336a44ef8ec 100644
--- a/src/components/ui-shell/_theme.scss
+++ b/src/components/ui-shell/_theme.scss
@@ -47,32 +47,32 @@ $shell-header-link: #0062ff;
 $shell-header-icon-selected: #0062ff;
 
 // Side-nav panel background
-$shell-side-nav-bg-01: $ibm-colors__gray-90;
+$shell-side-nav-bg-01: $ibm-color__gray-90;
 
 // Selected category background
 // Select L2 flatted item background
 // Item hover background
 // Footer-bar background
-$shell-side-nav-bg-02: $ibm-colors__gray-80;
+$shell-side-nav-bg-02: $ibm-color__gray-80;
 
 // Selected L2 nested item
-$shell-side-nav-bg-03: $ibm-colors__gray-70;
+$shell-side-nav-bg-03: $ibm-color__gray-70;
 
 // Primary text in side-nav
 // L2 Flatten item text
 // L2 Nested item text
 // L1 title text
-$shell-side-nav-text-01: $ibm-colors__gray-10;
+$shell-side-nav-text-01: $ibm-color__gray-10;
 
 // Secondary text in side nav
 // L2 Category label
-$shell-side-nav-text-02: $ibm-colors__gray-30;
+$shell-side-nav-text-02: $ibm-color__gray-30;
 
 // side-nav icon color
-$shell-side-nav-icon-01: $ibm-colors__gray-10;
+$shell-side-nav-icon-01: $ibm-color__gray-10;
 
 // item highlight bar
-$shell-side-nav-accent-01: $ibm-colors__blue-60;
+$shell-side-nav-accent-01: $ibm-color__blue-60;
 
 // Temporary token
 $shell-brand-01: #0062ff;
diff --git a/src/globals/grid/_experimental.scss b/src/globals/grid/_experimental.scss
index 5a16533a24b6..0cae5c1c7fbf 100644
--- a/src/globals/grid/_experimental.scss
+++ b/src/globals/grid/_experimental.scss
@@ -39,9 +39,7 @@
 }
 
 @import '../scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import '../scss/vendor/@carbon/elements/scss/grid/container';
-@import '../scss/vendor/@carbon/elements/scss/grid/row';
-@import '../scss/vendor/@carbon/elements/scss/grid/col';
+@import '../scss/vendor/@carbon/elements/scss/grid/mixins';
 
 @mixin grid--x {
   // Fluid variant of the grid.
diff --git a/src/globals/scss/_spacing.scss b/src/globals/scss/_spacing.scss
index 37735948ec58..429ea3964c99 100644
--- a/src/globals/scss/_spacing.scss
+++ b/src/globals/scss/_spacing.scss
@@ -5,6 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@import './vendor/@carbon/elements/scss/layout/mini-unit';
+@import './vendor/@carbon/elements/scss/layout/spacing';
+
 //-------------------------------------------
 // 🌌 Spacing
 // ------------------------------------------
diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
index 08152e33607f..8ca54efa545a 100644
--- a/src/globals/scss/_theme-tokens.scss
+++ b/src/globals/scss/_theme-tokens.scss
@@ -140,7 +140,7 @@
   $button-height: 48px !default !global;
   $button-padding: 0.875rem 4rem 0.875rem 1rem !default !global;
   $button-padding-sm: 0.375rem 4rem 0.375rem 1rem !default !global;
-  $button-padding-lg: $spacing-sm !default !global;
+  $button-padding-lg: $carbon--spacing-04 !default !global;
   $button-border-width: 1px !default !global;
   $button-outline-width: 3px !default !global;
   $button-outline-offset: -5px !default !global;
@@ -149,9 +149,9 @@
   // Accordion (Reverse)
   $accordion-flex-direction: row-reverse !default !global;
   $accordion-justify-content: flex-start !default !global;
-  $accordion-arrow-margin: 0 $spacing-md 0 0 !default !global;
-  $accordion-title-margin: 0 0 0 $spacing-md !default !global;
-  $accordion-content-padding: 0 0 0 $spacing-md !default !global;
+  $accordion-arrow-margin: 0 $carbon--spacing-05 0 0 !default !global;
+  $accordion-title-margin: 0 0 0 $carbon--spacing-05 !default !global;
+  $accordion-content-padding: 0 0 0 $carbon--spacing-05 !default !global;
 
   // Card
   $card-text-align: center !default !global;
@@ -194,7 +194,7 @@
 
   //Code Snippet
   $copy-active: $active-ui !default !global;
-  $copy-btn-feedback: $ibm-colors__gray-80 !default !global;
+  $copy-btn-feedback: $ibm-color__gray-80 !default !global;
 
   // Radio Button
   $radio-border-width: 1px !default !global;
diff --git a/src/globals/scss/vendor/@carbon/colors/scss/mixins.scss b/src/globals/scss/vendor/@carbon/colors/scss/mixins.scss
index 506eaabdf980..44925ebd7782 100644
--- a/src/globals/scss/vendor/@carbon/colors/scss/mixins.scss
+++ b/src/globals/scss/vendor/@carbon/colors/scss/mixins.scss
@@ -107,113 +107,6 @@
   $ibm-color__white-0: #ffffff !default !global;
   $ibm-color__yellow-20: #fdd13a !default !global;
 
-  $ibm-colors__black: #000000 !default !global;
-  $ibm-colors__black-100: #000000 !default !global;
-  $ibm-colors__blue-10: #edf4ff !default !global;
-  $ibm-colors__blue-20: #c9deff !default !global;
-  $ibm-colors__blue-30: #97c1ff !default !global;
-  $ibm-colors__blue-40: #6ea6ff !default !global;
-  $ibm-colors__blue-50: #408bfc !default !global;
-  $ibm-colors__blue-60: #0062ff !default !global;
-  $ibm-colors__blue-70: #054ada !default !global;
-  $ibm-colors__blue-80: #0530ad !default !global;
-  $ibm-colors__blue-90: #061f80 !default !global;
-  $ibm-colors__blue-100: #051243 !default !global;
-  $ibm-colors__cool-gray-10: #f2f4f8 !default !global;
-  $ibm-colors__cool-gray-20: #d5d9e0 !default !global;
-  $ibm-colors__cool-gray-30: #b9bfc7 !default !global;
-  $ibm-colors__cool-gray-40: #9fa5ad !default !global;
-  $ibm-colors__cool-gray-50: #868d95 !default !global;
-  $ibm-colors__cool-gray-60: #697077 !default !global;
-  $ibm-colors__cool-gray-70: #50565b !default !global;
-  $ibm-colors__cool-gray-80: #373d42 !default !global;
-  $ibm-colors__cool-gray-90: #242a2e !default !global;
-  $ibm-colors__cool-gray-100: #13171a !default !global;
-  $ibm-colors__cyan-10: #e3f6ff !default !global;
-  $ibm-colors__cyan-20: #b3e6ff !default !global;
-  $ibm-colors__cyan-30: #6ccaff !default !global;
-  $ibm-colors__cyan-40: #30b0ff !default !global;
-  $ibm-colors__cyan-50: #1191e6 !default !global;
-  $ibm-colors__cyan-60: #0072c3 !default !global;
-  $ibm-colors__cyan-70: #0058a1 !default !global;
-  $ibm-colors__cyan-80: #003d73 !default !global;
-  $ibm-colors__cyan-90: #002b50 !default !global;
-  $ibm-colors__cyan-100: #07192b !default !global;
-  $ibm-colors__gray-10: #f3f3f3 !default !global;
-  $ibm-colors__gray-20: #dcdcdc !default !global;
-  $ibm-colors__gray-30: #bebebe !default !global;
-  $ibm-colors__gray-40: #a4a4a4 !default !global;
-  $ibm-colors__gray-50: #8c8c8c !default !global;
-  $ibm-colors__gray-60: #6f6f6f !default !global;
-  $ibm-colors__gray-70: #565656 !default !global;
-  $ibm-colors__gray-80: #3d3d3d !default !global;
-  $ibm-colors__gray-90: #282828 !default !global;
-  $ibm-colors__gray-100: #171717 !default !global;
-  $ibm-colors__green-10: #dafbe4 !default !global;
-  $ibm-colors__green-20: #9deeb2 !default !global;
-  $ibm-colors__green-30: #56d679 !default !global;
-  $ibm-colors__green-40: #3dbb61 !default !global;
-  $ibm-colors__green-50: #24a148 !default !global;
-  $ibm-colors__green-60: #198038 !default !global;
-  $ibm-colors__green-70: #10642a !default !global;
-  $ibm-colors__green-80: #054719 !default !global;
-  $ibm-colors__green-90: #01330f !default !global;
-  $ibm-colors__green-100: #081b09 !default !global;
-  $ibm-colors__magenta-10: #fff0f6 !default !global;
-  $ibm-colors__magenta-20: #ffcfe1 !default !global;
-  $ibm-colors__magenta-30: #ffa0c2 !default !global;
-  $ibm-colors__magenta-40: #fa75a6 !default !global;
-  $ibm-colors__magenta-50: #ee538b !default !global;
-  $ibm-colors__magenta-60: #d12765 !default !global;
-  $ibm-colors__magenta-70: #a11950 !default !global;
-  $ibm-colors__magenta-80: #760a3a !default !global;
-  $ibm-colors__magenta-90: #57002b !default !global;
-  $ibm-colors__magenta-100: #2a0a16 !default !global;
-  $ibm-colors__orange-40: #fc7b1e !default !global;
-  $ibm-colors__purple-10: #f7f1ff !default !global;
-  $ibm-colors__purple-20: #e6d6ff !default !global;
-  $ibm-colors__purple-30: #d0b0ff !default !global;
-  $ibm-colors__purple-40: #bb8eff !default !global;
-  $ibm-colors__purple-50: #a66efa !default !global;
-  $ibm-colors__purple-60: #8a3ffc !default !global;
-  $ibm-colors__purple-70: #6e32c9 !default !global;
-  $ibm-colors__purple-80: #4f2196 !default !global;
-  $ibm-colors__purple-90: #38146b !default !global;
-  $ibm-colors__purple-100: #1e1033 !default !global;
-  $ibm-colors__red-10: #fff0f1 !default !global;
-  $ibm-colors__red-20: #fcd0d3 !default !global;
-  $ibm-colors__red-30: #ffa4a9 !default !global;
-  $ibm-colors__red-40: #ff767c !default !global;
-  $ibm-colors__red-50: #fb4b53 !default !global;
-  $ibm-colors__red-60: #da1e28 !default !global;
-  $ibm-colors__red-70: #a51920 !default !global;
-  $ibm-colors__red-80: #750e13 !default !global;
-  $ibm-colors__red-90: #570408 !default !global;
-  $ibm-colors__red-100: #2c080a !default !global;
-  $ibm-colors__teal-10: #dbfbfb !default !global;
-  $ibm-colors__teal-20: #92eeee !default !global;
-  $ibm-colors__teal-30: #20d5d2 !default !global;
-  $ibm-colors__teal-40: #00bab6 !default !global;
-  $ibm-colors__teal-50: #009c98 !default !global;
-  $ibm-colors__teal-60: #007d79 !default !global;
-  $ibm-colors__teal-70: #006161 !default !global;
-  $ibm-colors__teal-80: #004548 !default !global;
-  $ibm-colors__teal-90: #003137 !default !global;
-  $ibm-colors__teal-100: #081a1c !default !global;
-  $ibm-colors__warm-gray-10: #f7f3f1 !default !global;
-  $ibm-colors__warm-gray-20: #e0dbda !default !global;
-  $ibm-colors__warm-gray-30: #c1bcbb !default !global;
-  $ibm-colors__warm-gray-40: #a7a2a2 !default !global;
-  $ibm-colors__warm-gray-50: #8f8b8b !default !global;
-  $ibm-colors__warm-gray-60: #726e6e !default !global;
-  $ibm-colors__warm-gray-70: #595555 !default !global;
-  $ibm-colors__warm-gray-80: #403c3c !default !global;
-  $ibm-colors__warm-gray-90: #2b2828 !default !global;
-  $ibm-colors__warm-gray-100: #1a1717 !default !global;
-  $ibm-colors__white: #ffffff !default !global;
-  $ibm-colors__white-0: #ffffff !default !global;
-  $ibm-colors__yellow-20: #fdd13a !default !global;
-
   $ibm-color-map: (
     'black': (
       100: #000000,
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/grid/12.scss b/src/globals/scss/vendor/@carbon/elements/scss/grid/12.scss
index 982a6f5512c7..d306640f2bee 100644
--- a/src/globals/scss/vendor/@carbon/elements/scss/grid/12.scss
+++ b/src/globals/scss/vendor/@carbon/elements/scss/grid/12.scss
@@ -5,47 +5,33 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../layout/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
+@import 'mixins';
 
-$breakpoints: map-merge(
+$carbon--12-column-grid: map-merge(
+  $carbon--grid-breakpoints,
   (
-    sm: (
-      columns: 12,
-    ),
-    md: (
-      columns: 12,
-    ),
-    lg: (
-      columns: 12,
-    ),
-    xlg: (
-      columns: 12,
-    ),
-    max: (
-      columns: 12,
-    ),
-  ),
-  $carbon--grid-breakpoints
+    lg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, lg),
+        (
+          columns: 12,
+        )
+      ),
+    xlg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, xlg),
+        (
+          columns: 12,
+        )
+      ),
+    max:
+      map-merge(
+        map-get($carbon--grid-breakpoints, max),
+        (
+          columns: 12,
+        )
+      ),
+  )
 );
 
-// Default container class for a grid. Includes max-width for each breakpoint
-.#{$prefix}--grid {
-  @include carbon--make-container($breakpoints);
-  @include carbon--make-container-max-widths($breakpoints);
-}
-
-// Fluid variant of the grid. Will not set max-width for breakpoints and will
-// full-bleed across the page.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container($breakpoints);
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($breakpoints, $carbon--grid-gutter);
+@include carbon--grid($breakpoints: $carbon--12-column-grid);
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss b/src/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss
deleted file mode 100644
index c70747e7708a..000000000000
--- a/src/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Column helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '../layout/breakpoint';
-@import 'prefix';
-
-@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter) {
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we use `flex` values
-  // later on to override this initial width.
-  width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
-
-  // Support the padding use-case for each columns. Idea is that each child in a
-  // cell selector should have the default padding applied.
-  .#{$prefix}--grid--padding & > * {
-    padding: $carbon--grid-cell-padding;
-  }
-
-  // When in a bleed grid, we collapse all gutters so each column is flat with
-  // the each other.
-  .#{$prefix}--grid--bleed & {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
-  // side.
-  .#{$prefix}--grid--condensed & {
-    padding-right: 1px;
-    padding-left: 1px;
-  }
-
-  .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-left: 0;
-  }
-
-  [dir='rtl'] .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-right: 0;
-    padding-left: initial;
-  }
-}
-
-@mixin carbon--make-col($span, $columns) {
-  flex: 0 0 percentage($span / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($span / $columns);
-}
-
-@mixin carbon--make-col-offset($span, $columns) {
-  $offset: $span / $columns;
-  @if $offset == 0 {
-    margin-left: 0;
-  } @else {
-    margin-left: percentage($offset);
-  }
-}
-
-@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
-  .#{$prefix}--col {
-    @include carbon--make-col-ready();
-  }
-
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: carbon--breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
-
-    // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
-      .#{$prefix}--col#{$infix}-#{$i} {
-        @include carbon--make-col-ready();
-      }
-    }
-
-    .#{$prefix}--col#{$infix},
-    .#{$prefix}--col#{$infix}--auto {
-      @include carbon--make-col-ready();
-    }
-
-    @include carbon--breakpoint($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .#{$prefix}--col,
-      .#{$prefix}--col#{$infix} {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 100%;
-      }
-
-      .#{$prefix}--col--auto,
-      .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
-        width: auto;
-        // Reset earlier grid tiers
-        max-width: 100%;
-      }
-
-      @for $i from 1 through $columns {
-        .#{$prefix}--col#{$infix}-#{$i} {
-          @include carbon--make-col($i, $columns);
-        }
-      }
-
-      @for $i from 0 through ($columns - 1) {
-        @if not($infix == '') {
-          .#{$prefix}--offset#{$infix}-#{$i} {
-            @include carbon--make-col-offset($i, $columns);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss b/src/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss
deleted file mode 100644
index e6635ad45368..000000000000
--- a/src/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Container helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '../layout/breakpoint';
-@import '../layout/utilities';
-
-/// Create the container for a grid. Will cause full-bleed for the grid unless
-/// max-width properties are added with `make-container-max-widths`
-@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
-
-  @include carbon--set-largest-breakpoint();
-
-  @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
-    $margin: map-get($value, margin);
-
-    @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
-      @if $prev-margin != $margin {
-        @include carbon--breakpoint($name) {
-          padding-left: #{($carbon--grid-gutter / 2) + $margin};
-          padding-right: #{($carbon--grid-gutter / 2) + $margin};
-        }
-      }
-    } @else {
-      @include carbon--breakpoint($name) {
-        padding-left: #{($carbon--grid-gutter / 2) + $margin};
-        padding-right: #{($carbon--grid-gutter / 2) + $margin};
-      }
-    }
-  }
-}
-
-// gets the last breakpoint width, and sets it to a max-width
-@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  $largest-breakpoint: last-map-item($breakpoints);
-
-  max-width: map-get($largest-breakpoint, 'width');
-}
-
-/// Add in the max-widths for each breakpoint to the container
-@mixin carbon--make-container-max-widths($breakpoints: $carbon--grid-breakpoints) {
-  @each $name, $value in $breakpoints {
-    @include carbon--breakpoint($name) {
-      max-width: map-get($value, width);
-    }
-  }
-}
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss b/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss
new file mode 100644
index 000000000000..8a13f478e9d2
--- /dev/null
+++ b/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss
@@ -0,0 +1,312 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Helpers for defining columns, rows, and containers are heavily inspired by,
+/// and often derived from, bootstrap:
+/// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
+
+@import '../layout/breakpoint';
+@import 'prefix';
+
+/// -----------------------------------------------------------------------------
+/// Columns
+/// -----------------------------------------------------------------------------
+
+/// Used to intialize the default properties for a column class, most notably
+/// for setting width and default gutters when a column's breakpoint has not been
+/// hit yet.
+/// @param {Number} $gutter - the default gutter used in the grid system
+/// @param {Number} $collapsed-gutter - the condensed mode gutter
+/// @access private
+@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter, $condensed-gutter: $carbon--grid-gutter--condensed) {
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: ($gutter / 2);
+  padding-left: ($gutter / 2);
+
+  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
+  // side.
+  .#{$prefix}--row--condensed &,
+  .#{$prefix}--grid--condensed & {
+    padding-right: ($condensed-gutter / 2);
+    padding-left: ($condensed-gutter / 2);
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// @param {Number} $span - the number of columns covered
+/// @param {Number} $columns - the total number of columns available
+/// @access private
+@mixin carbon--make-col($span, $columns) {
+  flex: 0 0 percentage($span / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($span / $columns);
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - the number of columns the offset should cover
+/// @param {Number} $columns - the total number of columns available
+/// @access private
+@mixin carbon--make-col-offset($span, $columns) {
+  $offset: $span / $columns;
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: percentage($offset);
+  }
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints - the breakpoints in the grid system
+/// @param {Number} $gutter - the gutter for the grid system
+/// @access private
+@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
+  .#{$prefix}--col {
+    @include carbon--make-col-ready();
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: carbon--breakpoint-infix($breakpoint);
+    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 1 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include carbon--make-col-ready();
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include carbon--make-col-ready();
+    }
+
+    @include carbon--breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}--col,
+      .#{$prefix}--col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        flex: 1 0 0%;
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+      }
+
+      @for $i from 1 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include carbon--make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include carbon--make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Rows
+/// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter - the gutter in the grid system
+/// @access private
+@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter / 2;
+  margin-left: -1 * $gutter / 2;
+}
+
+/// -----------------------------------------------------------------------------
+/// No gutter
+/// -----------------------------------------------------------------------------
+
+/// Add no-gutter and no-gutter--{left,right} classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+/// @access private
+@mixin carbon--no-gutter {
+  .#{$prefix}--no-gutter,
+  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .#{$prefix}--no-gutter--left,
+  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--right,
+  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Hang
+/// -----------------------------------------------------------------------------
+
+/// Add hang--left and hang--right classes for a given gutter. These classes are
+/// used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+/// @param {Number} $gutter
+/// @access private
+@mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--left {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--right {
+    padding-right: ($gutter / 2);
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Aspect ratio
+/// -----------------------------------------------------------------------------
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @access public
+$carbon--aspect-ratios: ((16, 9), (2, 1), (4, 3), (1, 1));
+
+/// Output the CSS classes for generating aspect ratio classes
+/// @param {List} $aspect-ratios - a list of aspect ratios to generate
+/// @access private
+@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+  .#{$prefix}--aspect-ratio {
+    height: 0;
+    position: relative;
+  }
+
+  .#{$prefix}--aspect-ratio--object {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+  }
+
+  @each $ratio in $aspect-ratios {
+    $width: nth($ratio, 1);
+    $height: nth($ratio, 2);
+
+    .#{$prefix}--aspect-ratio--#{$width}x#{$height} {
+      padding-bottom: percentage($height / $width);
+    }
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Grid
+/// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `make-container-max-widths`
+/// @param {Map} $breakpoints
+/// @access private
+@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
+  margin-right: auto;
+  margin-left: auto;
+
+  @include carbon--set-largest-breakpoint();
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
+    $margin: map-get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map-get($prev-breakpoint, margin);
+      @if $prev-margin != $margin {
+        @include carbon--breakpoint($name) {
+          padding-left: #{($carbon--grid-gutter / 2) + $margin};
+          padding-right: #{($carbon--grid-gutter / 2) + $margin};
+        }
+      }
+    } @else {
+      @include carbon--breakpoint($name) {
+        padding-left: #{($carbon--grid-gutter / 2) + $margin};
+        padding-right: #{($carbon--grid-gutter / 2) + $margin};
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints
+/// @access private
+@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
+  $largest-breakpoint: last-map-item($breakpoints);
+
+  max-width: map-get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints
+/// @access private
+@mixin carbon--make-container-max-widths($breakpoints: $carbon--grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include carbon--breakpoint($name) {
+      max-width: map-get($value, width);
+    }
+  }
+}
+
+/// Generate the CSS for a grid for the given breakpoints and gutter
+/// @param {Map} $breakpoints
+/// @param {Number} $grid-gutter
+/// @access public
+@mixin carbon--grid(
+  $breakpoints: $carbon--grid-breakpoints,
+  $grid-gutter: $carbon--grid-gutter,
+  $condensed-gutter: $carbon--grid-gutter--condensed
+) {
+  .#{$prefix}--grid {
+    @include carbon--make-container($breakpoints);
+  }
+
+  @include carbon--largest-breakpoint($breakpoints) {
+    .#{$prefix}--grid--full-width {
+      max-width: 100%;
+    }
+  }
+
+  .#{$prefix}--row {
+    @include carbon--make-row();
+  }
+
+  .#{$prefix}--grid--condensed .#{$prefix}--row:not(:last-of-type) {
+    margin-bottom: $condensed-gutter;
+  }
+
+  .#{$prefix}--row--condensed + .#{$prefix}--row--condensed {
+    margin-top: $condensed-gutter;
+  }
+
+  @include carbon--make-grid-columns($breakpoints, $grid-gutter);
+  @include carbon--no-gutter();
+  @include carbon--hang($grid-gutter);
+  @include carbon--aspect-ratio();
+}
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss b/src/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss
deleted file mode 100644
index 4e069516fab5..000000000000
--- a/src/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Row helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '../layout/breakpoint';
-
-/// Used to build a row inside of a grid
-@mixin carbon--make-row() {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -1 * $carbon--grid-gutter / 2;
-  margin-left: -1 * $carbon--grid-gutter / 2;
-}
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss b/src/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss
deleted file mode 100644
index bddfc4230dc1..000000000000
--- a/src/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../import-once/import-once';
-@import 'prefix';
-
-// Inspired by:
-// https://github.com/tachyons-css/tachyons-aspect-ratios/blob/fdccef8d0d534a7faddde4cb5754ffb6d1c36b16/src/tachyons-aspect-ratios.css#L11-L22
-@include exports('@carbon/grid/aspect-ratio.scss') {
-  .#{$prefix}--aspect-ratio {
-    height: 0;
-    position: relative;
-  }
-
-  .#{$prefix}--aspect-ratio--object {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-  }
-
-  .#{$prefix}--aspect-ratio--16x9 {
-    padding-bottom: 56.25%;
-  }
-
-  .#{$prefix}--aspect-ratio--2x1 {
-    padding-bottom: 50%;
-  }
-
-  .#{$prefix}--aspect-ratio--4x3 {
-    padding-bottom: 75%;
-  }
-
-  .#{$prefix}--aspect-ratio--1x1 {
-    padding-bottom: 100%;
-  }
-}
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss b/src/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss
index 1d3ac3f990a6..6e4772178b3d 100644
--- a/src/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss
+++ b/src/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss
@@ -5,31 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../layout/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
+@import 'mixins';
 
-// Fluid variant of the grid.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container();
-}
-
-// Default container class for a grid. Includes max-width for all breakpoints
-.#{$prefix}--grid {
-  @include carbon--make-container();
-  @include carbon--make-container-max-widths();
-}
-
-.#{$prefix}--grid--full-width {
-  @include carbon--largest-breakpoint() {
-    max-width: 100%;
-  }
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($carbon--grid-breakpoints, $carbon--grid-gutter);
+@include carbon--grid();
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss b/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
index d28e7b08c140..59e877a954a6 100644
--- a/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
+++ b/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
@@ -9,8 +9,8 @@
 @import 'convert';
 @import 'utilities';
 
-$carbon--grid-cell-padding: carbon--rem(16px);
 $carbon--grid-gutter: carbon--rem(32px);
+$carbon--grid-gutter--condensed: carbon--rem(2px);
 
 // Initial map of our breakpoints and their values
 $carbon--grid-breakpoints: (
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss b/src/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss
index 63450abbc058..ebd216dc5884 100644
--- a/src/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss
+++ b/src/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss
@@ -7,33 +7,49 @@
 
 @import 'mini-unit';
 
-// fixed spacing
-// Supports 0, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 96px
-$carbon--fixed-spacing-scale: (
-  0,
-  carbon--mini-units(0.25),
-  carbon--mini-units(0.5),
-  carbon--mini-units(1),
-  carbon--mini-units(1.5),
-  carbon--mini-units(2),
-  carbon--mini-units(3),
-  carbon--mini-units(4),
-  carbon--mini-units(6),
-  carbon--mini-units(8),
-  carbon--mini-units(10),
-  carbon--mini-units(12)
-);
+$carbon--spacing-01: carbon--mini-units(0.25) !default;
+$carbon--spacing-02: carbon--mini-units(0.5) !default;
+$carbon--spacing-03: carbon--mini-units(1) !default;
+$carbon--spacing-04: carbon--mini-units(1.5) !default;
+$carbon--spacing-05: carbon--mini-units(2) !default;
+$carbon--spacing-06: carbon--mini-units(3) !default;
+$carbon--spacing-07: carbon--mini-units(4) !default;
+$carbon--spacing-08: carbon--mini-units(5) !default;
+$carbon--spacing-09: carbon--mini-units(6) !default;
+
+$spacing-01: $carbon--spacing-01 !default;
+$spacing-02: $carbon--spacing-02 !default;
+$spacing-03: $carbon--spacing-03 !default;
+$spacing-04: $carbon--spacing-04 !default;
+$spacing-05: $carbon--spacing-05 !default;
+$spacing-06: $carbon--spacing-06 !default;
+$spacing-07: $carbon--spacing-07 !default;
+$spacing-08: $carbon--spacing-08 !default;
+$spacing-09: $carbon--spacing-09 !default;
+
+$carbon--layout-01: carbon--mini-units(2) !default;
+$carbon--layout-02: carbon--mini-units(3) !default;
+$carbon--layout-03: carbon--mini-units(4) !default;
+$carbon--layout-04: carbon--mini-units(6) !default;
+$carbon--layout-05: carbon--mini-units(8) !default;
+$carbon--layout-06: carbon--mini-units(12) !default;
+$carbon--layout-07: carbon--mini-units(20) !default;
+
+$layout-01: $carbon--layout-01 !default;
+$layout-02: $carbon--layout-02 !default;
+$layout-03: $carbon--layout-03 !default;
+$layout-04: $carbon--layout-04 !default;
+$layout-05: $carbon--layout-05 !default;
+$layout-06: $carbon--layout-06 !default;
+$layout-07: $carbon--layout-07 !default;
 
 // fluid spacing
-$carbon--fluid-spacing-scale: (0, 2vw, 5vw, 10vw);
+$carbon--fluid-spacing-01: 0;
+$carbon--fluid-spacing-02: 2vw;
+$carbon--fluid-spacing-03: 5vw;
+$carbon--fluid-spacing-04: 10vw;
 
-/// Get the value of the spacing scale at the given step. The first step is
-/// surprisingly 0, even though lists in sass start at 1. This is because we
-/// want to make accesses to the 0 value more natural, in addition to mirroring
-/// how this would be called in other programming languages
-//  $step: integer
-//  $fluid: boolean
-@function carbon--spacing($step, $fluid: false) {
-  $scale: if($fluid, $carbon--fluid-spacing-scale, $carbon--fixed-spacing-scale);
-  @return nth($scale, $step + 1);
-}
+$fluid-spacing-01: $carbon--fluid-spacing-01 !default;
+$fluid-spacing-02: $carbon--fluid-spacing-02 !default;
+$fluid-spacing-03: $carbon--fluid-spacing-03 !default;
+$fluid-spacing-04: $carbon--fluid-spacing-04 !default;
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss b/src/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss
index 46c695dfd90d..77bce39e0bbb 100644
--- a/src/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss
+++ b/src/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss
@@ -4,6 +4,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #171717 !default !global;
   $interactive-03: #0062ff !default !global;
+  $interactive-04: #0062ff !default !global;
   $ui-background: #ffffff !default !global;
   $ui-01: #f3f3f3 !default !global;
   $ui-02: #ffffff !default !global;
@@ -17,6 +18,7 @@
   $icon-01: #171717 !default !global;
   $icon-02: #565656 !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #0062ff !default !global;
   $field-01: #f3f3f3 !default !global;
   $field-02: #ffffff !default !global;
   $inverse-01: #ffffff !default !global;
@@ -56,6 +58,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #171717 !default !global;
   $interactive-03: #0062ff !default !global;
+  $interactive-04: #0062ff !default !global;
   $ui-background: #f3f3f3 !default !global;
   $ui-01: #ffffff !default !global;
   $ui-02: #f3f3f3 !default !global;
@@ -69,6 +72,7 @@
   $icon-01: #171717 !default !global;
   $icon-02: #565656 !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #0062ff !default !global;
   $field-01: #ffffff !default !global;
   $field-02: #f3f3f3 !default !global;
   $inverse-01: #ffffff !default !global;
@@ -108,6 +112,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #6f6f6f !default !global;
   $interactive-03: #ffffff !default !global;
+  $interactive-04: #408bfc !default !global;
   $ui-background: #282828 !default !global;
   $ui-01: #3d3d3d !default !global;
   $ui-02: #565656 !default !global;
@@ -121,12 +126,13 @@
   $icon-01: #f3f3f3 !default !global;
   $icon-02: #bebebe !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #6ea6ff !default !global;
   $field-01: #3d3d3d !default !global;
   $field-02: #565656 !default !global;
   $inverse-01: #171717 !default !global;
   $inverse-02: #f3f3f3 !default !global;
   $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
+  $support-02: #3dbb61 !default !global;
   $support-03: #fdd13a !default !global;
   $support-04: #408bfc !default !global;
   $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
@@ -160,6 +166,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #6f6f6f !default !global;
   $interactive-03: #ffffff !default !global;
+  $interactive-04: #408bfc !default !global;
   $ui-background: #171717 !default !global;
   $ui-01: #282828 !default !global;
   $ui-02: #3d3d3d !default !global;
@@ -173,12 +180,13 @@
   $icon-01: #f3f3f3 !default !global;
   $icon-02: #bebebe !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #6ea6ff !default !global;
   $field-01: #282828 !default !global;
   $field-02: #3d3d3d !default !global;
   $inverse-01: #171717 !default !global;
   $inverse-02: #f3f3f3 !default !global;
   $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
+  $support-02: #3dbb61 !default !global;
   $support-03: #fdd13a !default !global;
   $support-04: #408bfc !default !global;
   $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
diff --git a/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss b/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
index f0881add4916..b079fb3943bf 100644
--- a/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
+++ b/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
@@ -180,6 +180,31 @@ $expressive-heading-05: (
   ),
 ) !default;
 
+$expressive-heading-06: (
+  font-family: carbon--font-family('sans'),
+  font-size: carbon--type-scale(8),
+  font-weight: carbon--font-weight('semibold'),
+  line-height: 125%,
+  letter-spacing: 0,
+  breakpoints: (
+    md: (
+      font-size: carbon--type-scale(9),
+      line-height: 122%,
+    ),
+    lg: (
+      font-size: carbon--type-scale(10),
+      line-height: 119%,
+    ),
+    xlg: (
+      font-size: carbon--type-scale(11),
+      line-height: 117%,
+    ),
+    max: (
+      font-size: carbon--type-scale(13),
+    ),
+  ),
+) !default;
+
 $expressive-paragraph-01: (
   font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(6),
@@ -384,6 +409,7 @@ $tokens: (
   expressive-heading-03: $expressive-heading-03,
   expressive-heading-04: $expressive-heading-04,
   expressive-heading-05: $expressive-heading-05,
+  expressive-heading-06: $expressive-heading-06,
 
   quotation-01: $quotation-01,
   quotation-02: $quotation-02,
diff --git a/src/globals/scss/vendor/@carbon/grid/scss/12.scss b/src/globals/scss/vendor/@carbon/grid/scss/12.scss
index ccb83bb3a93c..d306640f2bee 100644
--- a/src/globals/scss/vendor/@carbon/grid/scss/12.scss
+++ b/src/globals/scss/vendor/@carbon/grid/scss/12.scss
@@ -5,47 +5,33 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/layout/scss/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
+@import 'mixins';
 
-$breakpoints: map-merge(
+$carbon--12-column-grid: map-merge(
+  $carbon--grid-breakpoints,
   (
-    sm: (
-      columns: 12,
-    ),
-    md: (
-      columns: 12,
-    ),
-    lg: (
-      columns: 12,
-    ),
-    xlg: (
-      columns: 12,
-    ),
-    max: (
-      columns: 12,
-    ),
-  ),
-  $carbon--grid-breakpoints
+    lg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, lg),
+        (
+          columns: 12,
+        )
+      ),
+    xlg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, xlg),
+        (
+          columns: 12,
+        )
+      ),
+    max:
+      map-merge(
+        map-get($carbon--grid-breakpoints, max),
+        (
+          columns: 12,
+        )
+      ),
+  )
 );
 
-// Default container class for a grid. Includes max-width for each breakpoint
-.#{$prefix}--grid {
-  @include carbon--make-container($breakpoints);
-  @include carbon--make-container-max-widths($breakpoints);
-}
-
-// Fluid variant of the grid. Will not set max-width for breakpoints and will
-// full-bleed across the page.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container($breakpoints);
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($breakpoints, $carbon--grid-gutter);
+@include carbon--grid($breakpoints: $carbon--12-column-grid);
diff --git a/src/globals/scss/vendor/@carbon/grid/scss/_col.scss b/src/globals/scss/vendor/@carbon/grid/scss/_col.scss
deleted file mode 100644
index 0e88a734fc24..000000000000
--- a/src/globals/scss/vendor/@carbon/grid/scss/_col.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Column helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '@carbon/layout/scss/breakpoint';
-@import 'prefix';
-
-@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter) {
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we use `flex` values
-  // later on to override this initial width.
-  width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
-
-  // Support the padding use-case for each columns. Idea is that each child in a
-  // cell selector should have the default padding applied.
-  .#{$prefix}--grid--padding & > * {
-    padding: $carbon--grid-cell-padding;
-  }
-
-  // When in a bleed grid, we collapse all gutters so each column is flat with
-  // the each other.
-  .#{$prefix}--grid--bleed & {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
-  // side.
-  .#{$prefix}--grid--condensed & {
-    padding-right: 1px;
-    padding-left: 1px;
-  }
-
-  .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-left: 0;
-  }
-
-  [dir='rtl'] .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-right: 0;
-    padding-left: initial;
-  }
-}
-
-@mixin carbon--make-col($span, $columns) {
-  flex: 0 0 percentage($span / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($span / $columns);
-}
-
-@mixin carbon--make-col-offset($span, $columns) {
-  $offset: $span / $columns;
-  @if $offset == 0 {
-    margin-left: 0;
-  } @else {
-    margin-left: percentage($offset);
-  }
-}
-
-@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
-  .#{$prefix}--col {
-    @include carbon--make-col-ready();
-  }
-
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: carbon--breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
-
-    // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
-      .#{$prefix}--col#{$infix}-#{$i} {
-        @include carbon--make-col-ready();
-      }
-    }
-
-    .#{$prefix}--col#{$infix},
-    .#{$prefix}--col#{$infix}--auto {
-      @include carbon--make-col-ready();
-    }
-
-    @include carbon--breakpoint($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .#{$prefix}--col,
-      .#{$prefix}--col#{$infix} {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 100%;
-      }
-
-      .#{$prefix}--col--auto,
-      .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
-        width: auto;
-        // Reset earlier grid tiers
-        max-width: 100%;
-      }
-
-      @for $i from 1 through $columns {
-        .#{$prefix}--col#{$infix}-#{$i} {
-          @include carbon--make-col($i, $columns);
-        }
-      }
-
-      @for $i from 0 through ($columns - 1) {
-        @if not($infix == '') {
-          .#{$prefix}--offset#{$infix}-#{$i} {
-            @include carbon--make-col-offset($i, $columns);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/globals/scss/vendor/@carbon/grid/scss/_container.scss b/src/globals/scss/vendor/@carbon/grid/scss/_container.scss
deleted file mode 100644
index 91870acd02f1..000000000000
--- a/src/globals/scss/vendor/@carbon/grid/scss/_container.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Container helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '@carbon/layout/scss/breakpoint';
-@import '@carbon/layout/scss/utilities';
-
-/// Create the container for a grid. Will cause full-bleed for the grid unless
-/// max-width properties are added with `make-container-max-widths`
-@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
-
-  @include carbon--set-largest-breakpoint();
-
-  @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
-    $margin: map-get($value, margin);
-
-    @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
-      @if $prev-margin != $margin {
-        @include carbon--breakpoint($name) {
-          padding-left: #{($carbon--grid-gutter / 2) + $margin};
-          padding-right: #{($carbon--grid-gutter / 2) + $margin};
-        }
-      }
-    } @else {
-      @include carbon--breakpoint($name) {
-        padding-left: #{($carbon--grid-gutter / 2) + $margin};
-        padding-right: #{($carbon--grid-gutter / 2) + $margin};
-      }
-    }
-  }
-}
-
-// gets the last breakpoint width, and sets it to a max-width
-@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  $largest-breakpoint: last-map-item($breakpoints);
-
-  max-width: map-get($largest-breakpoint, 'width');
-}
-
-/// Add in the max-widths for each breakpoint to the container
-@mixin carbon--make-container-max-widths($breakpoints: $carbon--grid-breakpoints) {
-  @each $name, $value in $breakpoints {
-    @include carbon--breakpoint($name) {
-      max-width: map-get($value, width);
-    }
-  }
-}
diff --git a/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss b/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss
new file mode 100644
index 000000000000..c29c0242bfba
--- /dev/null
+++ b/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss
@@ -0,0 +1,312 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Helpers for defining columns, rows, and containers are heavily inspired by,
+/// and often derived from, bootstrap:
+/// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
+
+@import '@carbon/layout/scss/breakpoint';
+@import 'prefix';
+
+/// -----------------------------------------------------------------------------
+/// Columns
+/// -----------------------------------------------------------------------------
+
+/// Used to intialize the default properties for a column class, most notably
+/// for setting width and default gutters when a column's breakpoint has not been
+/// hit yet.
+/// @param {Number} $gutter - the default gutter used in the grid system
+/// @param {Number} $collapsed-gutter - the condensed mode gutter
+/// @access private
+@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter, $condensed-gutter: $carbon--grid-gutter--condensed) {
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: ($gutter / 2);
+  padding-left: ($gutter / 2);
+
+  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
+  // side.
+  .#{$prefix}--row--condensed &,
+  .#{$prefix}--grid--condensed & {
+    padding-right: ($condensed-gutter / 2);
+    padding-left: ($condensed-gutter / 2);
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// @param {Number} $span - the number of columns covered
+/// @param {Number} $columns - the total number of columns available
+/// @access private
+@mixin carbon--make-col($span, $columns) {
+  flex: 0 0 percentage($span / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($span / $columns);
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - the number of columns the offset should cover
+/// @param {Number} $columns - the total number of columns available
+/// @access private
+@mixin carbon--make-col-offset($span, $columns) {
+  $offset: $span / $columns;
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: percentage($offset);
+  }
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints - the breakpoints in the grid system
+/// @param {Number} $gutter - the gutter for the grid system
+/// @access private
+@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
+  .#{$prefix}--col {
+    @include carbon--make-col-ready();
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: carbon--breakpoint-infix($breakpoint);
+    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 1 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include carbon--make-col-ready();
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include carbon--make-col-ready();
+    }
+
+    @include carbon--breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}--col,
+      .#{$prefix}--col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        flex: 1 0 0%;
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+      }
+
+      @for $i from 1 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include carbon--make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include carbon--make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Rows
+/// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter - the gutter in the grid system
+/// @access private
+@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter / 2;
+  margin-left: -1 * $gutter / 2;
+}
+
+/// -----------------------------------------------------------------------------
+/// No gutter
+/// -----------------------------------------------------------------------------
+
+/// Add no-gutter and no-gutter--{left,right} classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+/// @access private
+@mixin carbon--no-gutter {
+  .#{$prefix}--no-gutter,
+  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .#{$prefix}--no-gutter--left,
+  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--right,
+  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Hang
+/// -----------------------------------------------------------------------------
+
+/// Add hang--left and hang--right classes for a given gutter. These classes are
+/// used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+/// @param {Number} $gutter
+/// @access private
+@mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--left {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--right {
+    padding-right: ($gutter / 2);
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Aspect ratio
+/// -----------------------------------------------------------------------------
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @access public
+$carbon--aspect-ratios: ((16, 9), (2, 1), (4, 3), (1, 1));
+
+/// Output the CSS classes for generating aspect ratio classes
+/// @param {List} $aspect-ratios - a list of aspect ratios to generate
+/// @access private
+@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+  .#{$prefix}--aspect-ratio {
+    height: 0;
+    position: relative;
+  }
+
+  .#{$prefix}--aspect-ratio--object {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+  }
+
+  @each $ratio in $aspect-ratios {
+    $width: nth($ratio, 1);
+    $height: nth($ratio, 2);
+
+    .#{$prefix}--aspect-ratio--#{$width}x#{$height} {
+      padding-bottom: percentage($height / $width);
+    }
+  }
+}
+
+/// -----------------------------------------------------------------------------
+/// Grid
+/// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `make-container-max-widths`
+/// @param {Map} $breakpoints
+/// @access private
+@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
+  margin-right: auto;
+  margin-left: auto;
+
+  @include carbon--set-largest-breakpoint();
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
+    $margin: map-get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map-get($prev-breakpoint, margin);
+      @if $prev-margin != $margin {
+        @include carbon--breakpoint($name) {
+          padding-left: #{($carbon--grid-gutter / 2) + $margin};
+          padding-right: #{($carbon--grid-gutter / 2) + $margin};
+        }
+      }
+    } @else {
+      @include carbon--breakpoint($name) {
+        padding-left: #{($carbon--grid-gutter / 2) + $margin};
+        padding-right: #{($carbon--grid-gutter / 2) + $margin};
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints
+/// @access private
+@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
+  $largest-breakpoint: last-map-item($breakpoints);
+
+  max-width: map-get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints
+/// @access private
+@mixin carbon--make-container-max-widths($breakpoints: $carbon--grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include carbon--breakpoint($name) {
+      max-width: map-get($value, width);
+    }
+  }
+}
+
+/// Generate the CSS for a grid for the given breakpoints and gutter
+/// @param {Map} $breakpoints
+/// @param {Number} $grid-gutter
+/// @access public
+@mixin carbon--grid(
+  $breakpoints: $carbon--grid-breakpoints,
+  $grid-gutter: $carbon--grid-gutter,
+  $condensed-gutter: $carbon--grid-gutter--condensed
+) {
+  .#{$prefix}--grid {
+    @include carbon--make-container($breakpoints);
+  }
+
+  @include carbon--largest-breakpoint($breakpoints) {
+    .#{$prefix}--grid--full-width {
+      max-width: 100%;
+    }
+  }
+
+  .#{$prefix}--row {
+    @include carbon--make-row();
+  }
+
+  .#{$prefix}--grid--condensed .#{$prefix}--row:not(:last-of-type) {
+    margin-bottom: $condensed-gutter;
+  }
+
+  .#{$prefix}--row--condensed + .#{$prefix}--row--condensed {
+    margin-top: $condensed-gutter;
+  }
+
+  @include carbon--make-grid-columns($breakpoints, $grid-gutter);
+  @include carbon--no-gutter();
+  @include carbon--hang($grid-gutter);
+  @include carbon--aspect-ratio();
+}
diff --git a/src/globals/scss/vendor/@carbon/grid/scss/_row.scss b/src/globals/scss/vendor/@carbon/grid/scss/_row.scss
deleted file mode 100644
index ae4900dfff94..000000000000
--- a/src/globals/scss/vendor/@carbon/grid/scss/_row.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Row helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '@carbon/layout/scss/breakpoint';
-
-/// Used to build a row inside of a grid
-@mixin carbon--make-row() {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -1 * $carbon--grid-gutter / 2;
-  margin-left: -1 * $carbon--grid-gutter / 2;
-}
diff --git a/src/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss b/src/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss
deleted file mode 100644
index f7fab758ad90..000000000000
--- a/src/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '@carbon/import-once/scss/import-once';
-@import 'prefix';
-
-// Inspired by:
-// https://github.com/tachyons-css/tachyons-aspect-ratios/blob/fdccef8d0d534a7faddde4cb5754ffb6d1c36b16/src/tachyons-aspect-ratios.css#L11-L22
-@include exports('@carbon/grid/aspect-ratio.scss') {
-  .#{$prefix}--aspect-ratio {
-    height: 0;
-    position: relative;
-  }
-
-  .#{$prefix}--aspect-ratio--object {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-  }
-
-  .#{$prefix}--aspect-ratio--16x9 {
-    padding-bottom: 56.25%;
-  }
-
-  .#{$prefix}--aspect-ratio--2x1 {
-    padding-bottom: 50%;
-  }
-
-  .#{$prefix}--aspect-ratio--4x3 {
-    padding-bottom: 75%;
-  }
-
-  .#{$prefix}--aspect-ratio--1x1 {
-    padding-bottom: 100%;
-  }
-}
diff --git a/src/globals/scss/vendor/@carbon/grid/scss/grid.scss b/src/globals/scss/vendor/@carbon/grid/scss/grid.scss
index 513b9c9b508b..6e4772178b3d 100644
--- a/src/globals/scss/vendor/@carbon/grid/scss/grid.scss
+++ b/src/globals/scss/vendor/@carbon/grid/scss/grid.scss
@@ -5,31 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/layout/scss/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
+@import 'mixins';
 
-// Fluid variant of the grid.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container();
-}
-
-// Default container class for a grid. Includes max-width for all breakpoints
-.#{$prefix}--grid {
-  @include carbon--make-container();
-  @include carbon--make-container-max-widths();
-}
-
-.#{$prefix}--grid--full-width {
-  @include carbon--largest-breakpoint() {
-    max-width: 100%;
-  }
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($carbon--grid-breakpoints, $carbon--grid-gutter);
+@include carbon--grid();
diff --git a/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss b/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
index d28e7b08c140..59e877a954a6 100644
--- a/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
+++ b/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
@@ -9,8 +9,8 @@
 @import 'convert';
 @import 'utilities';
 
-$carbon--grid-cell-padding: carbon--rem(16px);
 $carbon--grid-gutter: carbon--rem(32px);
+$carbon--grid-gutter--condensed: carbon--rem(2px);
 
 // Initial map of our breakpoints and their values
 $carbon--grid-breakpoints: (
diff --git a/src/globals/scss/vendor/@carbon/layout/scss/_spacing.scss b/src/globals/scss/vendor/@carbon/layout/scss/_spacing.scss
index 63450abbc058..ebd216dc5884 100644
--- a/src/globals/scss/vendor/@carbon/layout/scss/_spacing.scss
+++ b/src/globals/scss/vendor/@carbon/layout/scss/_spacing.scss
@@ -7,33 +7,49 @@
 
 @import 'mini-unit';
 
-// fixed spacing
-// Supports 0, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 96px
-$carbon--fixed-spacing-scale: (
-  0,
-  carbon--mini-units(0.25),
-  carbon--mini-units(0.5),
-  carbon--mini-units(1),
-  carbon--mini-units(1.5),
-  carbon--mini-units(2),
-  carbon--mini-units(3),
-  carbon--mini-units(4),
-  carbon--mini-units(6),
-  carbon--mini-units(8),
-  carbon--mini-units(10),
-  carbon--mini-units(12)
-);
+$carbon--spacing-01: carbon--mini-units(0.25) !default;
+$carbon--spacing-02: carbon--mini-units(0.5) !default;
+$carbon--spacing-03: carbon--mini-units(1) !default;
+$carbon--spacing-04: carbon--mini-units(1.5) !default;
+$carbon--spacing-05: carbon--mini-units(2) !default;
+$carbon--spacing-06: carbon--mini-units(3) !default;
+$carbon--spacing-07: carbon--mini-units(4) !default;
+$carbon--spacing-08: carbon--mini-units(5) !default;
+$carbon--spacing-09: carbon--mini-units(6) !default;
+
+$spacing-01: $carbon--spacing-01 !default;
+$spacing-02: $carbon--spacing-02 !default;
+$spacing-03: $carbon--spacing-03 !default;
+$spacing-04: $carbon--spacing-04 !default;
+$spacing-05: $carbon--spacing-05 !default;
+$spacing-06: $carbon--spacing-06 !default;
+$spacing-07: $carbon--spacing-07 !default;
+$spacing-08: $carbon--spacing-08 !default;
+$spacing-09: $carbon--spacing-09 !default;
+
+$carbon--layout-01: carbon--mini-units(2) !default;
+$carbon--layout-02: carbon--mini-units(3) !default;
+$carbon--layout-03: carbon--mini-units(4) !default;
+$carbon--layout-04: carbon--mini-units(6) !default;
+$carbon--layout-05: carbon--mini-units(8) !default;
+$carbon--layout-06: carbon--mini-units(12) !default;
+$carbon--layout-07: carbon--mini-units(20) !default;
+
+$layout-01: $carbon--layout-01 !default;
+$layout-02: $carbon--layout-02 !default;
+$layout-03: $carbon--layout-03 !default;
+$layout-04: $carbon--layout-04 !default;
+$layout-05: $carbon--layout-05 !default;
+$layout-06: $carbon--layout-06 !default;
+$layout-07: $carbon--layout-07 !default;
 
 // fluid spacing
-$carbon--fluid-spacing-scale: (0, 2vw, 5vw, 10vw);
+$carbon--fluid-spacing-01: 0;
+$carbon--fluid-spacing-02: 2vw;
+$carbon--fluid-spacing-03: 5vw;
+$carbon--fluid-spacing-04: 10vw;
 
-/// Get the value of the spacing scale at the given step. The first step is
-/// surprisingly 0, even though lists in sass start at 1. This is because we
-/// want to make accesses to the 0 value more natural, in addition to mirroring
-/// how this would be called in other programming languages
-//  $step: integer
-//  $fluid: boolean
-@function carbon--spacing($step, $fluid: false) {
-  $scale: if($fluid, $carbon--fluid-spacing-scale, $carbon--fixed-spacing-scale);
-  @return nth($scale, $step + 1);
-}
+$fluid-spacing-01: $carbon--fluid-spacing-01 !default;
+$fluid-spacing-02: $carbon--fluid-spacing-02 !default;
+$fluid-spacing-03: $carbon--fluid-spacing-03 !default;
+$fluid-spacing-04: $carbon--fluid-spacing-04 !default;
diff --git a/src/globals/scss/vendor/@carbon/themes/scss/mixins.scss b/src/globals/scss/vendor/@carbon/themes/scss/mixins.scss
index 46c695dfd90d..77bce39e0bbb 100644
--- a/src/globals/scss/vendor/@carbon/themes/scss/mixins.scss
+++ b/src/globals/scss/vendor/@carbon/themes/scss/mixins.scss
@@ -4,6 +4,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #171717 !default !global;
   $interactive-03: #0062ff !default !global;
+  $interactive-04: #0062ff !default !global;
   $ui-background: #ffffff !default !global;
   $ui-01: #f3f3f3 !default !global;
   $ui-02: #ffffff !default !global;
@@ -17,6 +18,7 @@
   $icon-01: #171717 !default !global;
   $icon-02: #565656 !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #0062ff !default !global;
   $field-01: #f3f3f3 !default !global;
   $field-02: #ffffff !default !global;
   $inverse-01: #ffffff !default !global;
@@ -56,6 +58,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #171717 !default !global;
   $interactive-03: #0062ff !default !global;
+  $interactive-04: #0062ff !default !global;
   $ui-background: #f3f3f3 !default !global;
   $ui-01: #ffffff !default !global;
   $ui-02: #f3f3f3 !default !global;
@@ -69,6 +72,7 @@
   $icon-01: #171717 !default !global;
   $icon-02: #565656 !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #0062ff !default !global;
   $field-01: #ffffff !default !global;
   $field-02: #f3f3f3 !default !global;
   $inverse-01: #ffffff !default !global;
@@ -108,6 +112,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #6f6f6f !default !global;
   $interactive-03: #ffffff !default !global;
+  $interactive-04: #408bfc !default !global;
   $ui-background: #282828 !default !global;
   $ui-01: #3d3d3d !default !global;
   $ui-02: #565656 !default !global;
@@ -121,12 +126,13 @@
   $icon-01: #f3f3f3 !default !global;
   $icon-02: #bebebe !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #6ea6ff !default !global;
   $field-01: #3d3d3d !default !global;
   $field-02: #565656 !default !global;
   $inverse-01: #171717 !default !global;
   $inverse-02: #f3f3f3 !default !global;
   $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
+  $support-02: #3dbb61 !default !global;
   $support-03: #fdd13a !default !global;
   $support-04: #408bfc !default !global;
   $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
@@ -160,6 +166,7 @@
   $interactive-01: #0062ff !default !global;
   $interactive-02: #6f6f6f !default !global;
   $interactive-03: #ffffff !default !global;
+  $interactive-04: #408bfc !default !global;
   $ui-background: #171717 !default !global;
   $ui-01: #282828 !default !global;
   $ui-02: #3d3d3d !default !global;
@@ -173,12 +180,13 @@
   $icon-01: #f3f3f3 !default !global;
   $icon-02: #bebebe !default !global;
   $icon-03: #ffffff !default !global;
+  $link-01: #6ea6ff !default !global;
   $field-01: #282828 !default !global;
   $field-02: #3d3d3d !default !global;
   $inverse-01: #171717 !default !global;
   $inverse-02: #f3f3f3 !default !global;
   $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
+  $support-02: #3dbb61 !default !global;
   $support-03: #fdd13a !default !global;
   $support-04: #408bfc !default !global;
   $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
diff --git a/src/globals/scss/vendor/@carbon/type/scss/_styles.scss b/src/globals/scss/vendor/@carbon/type/scss/_styles.scss
index 362d47a1ad3c..5e6b5212237f 100644
--- a/src/globals/scss/vendor/@carbon/type/scss/_styles.scss
+++ b/src/globals/scss/vendor/@carbon/type/scss/_styles.scss
@@ -180,6 +180,31 @@ $expressive-heading-05: (
   ),
 ) !default;
 
+$expressive-heading-06: (
+  font-family: carbon--font-family('sans'),
+  font-size: carbon--type-scale(8),
+  font-weight: carbon--font-weight('semibold'),
+  line-height: 125%,
+  letter-spacing: 0,
+  breakpoints: (
+    md: (
+      font-size: carbon--type-scale(9),
+      line-height: 122%,
+    ),
+    lg: (
+      font-size: carbon--type-scale(10),
+      line-height: 119%,
+    ),
+    xlg: (
+      font-size: carbon--type-scale(11),
+      line-height: 117%,
+    ),
+    max: (
+      font-size: carbon--type-scale(13),
+    ),
+  ),
+) !default;
+
 $expressive-paragraph-01: (
   font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(6),
@@ -384,6 +409,7 @@ $tokens: (
   expressive-heading-03: $expressive-heading-03,
   expressive-heading-04: $expressive-heading-04,
   expressive-heading-05: $expressive-heading-05,
+  expressive-heading-06: $expressive-heading-06,
 
   quotation-01: $quotation-01,
   quotation-02: $quotation-02,
diff --git a/yarn.lock b/yarn.lock
index 96ae0d0019cc..45ec5be8fb35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -605,44 +605,49 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@carbon/colors@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-0.0.1-beta.0.tgz#4cb349abca9b25490a39dca284f84fb21911e3bb"
-  integrity sha512-RMn6JMvE9CFv47Mum+3lm3oSOeWVo8rl2v4kDYJ6JW6hxLL7XE3wiGTl0PBPU8R7Lsa+Itjj0db3ota3WvctIA==
-
-"@carbon/elements@^0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-0.0.1-beta.0.tgz#4677f6ea8a69c902bf7f07a7e48227e1a9e5928a"
-  integrity sha512-hxFGDecysblv3H7FagsY7fchEV95UscSFoBHV7gf+zal7ypWfi8iIAWvh6pBy8RhkyxyKArDnR1S5rbGkKCboA==
-  dependencies:
-    "@carbon/colors" "0.0.1-beta.0"
-    "@carbon/grid" "0.0.1-beta.0"
-    "@carbon/import-once" "0.0.1-beta.0"
-    "@carbon/layout" "0.0.1-beta.0"
-    "@carbon/motion" "0.0.1-beta.0"
-    "@carbon/themes" "0.0.1-beta.0"
-    "@carbon/type" "0.0.1-beta.0"
-
-"@carbon/grid@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-0.0.1-beta.0.tgz#92ff60a505fb114d4b41dd8f408c6bc7cf534328"
-  integrity sha512-3MBcE2RtILeWGyDLC+vYURw+WmYMRwHQp4JlkPV4Xwfv5nQuI7OdYl3M3GVo0fR6o0dAaRz76pP1zdkkySwKyg==
-  dependencies:
-    "@carbon/import-once" "0.0.1-beta.0"
-    "@carbon/layout" "0.0.1-beta.0"
+"@carbon/colors@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-0.0.1-beta.1.tgz#e99fc69d9c64ff37b3ae176d610797ea4999af3d"
+  integrity sha512-JrSzefUs81HGkM7kRgrvkK1OFdTzdJ1vAjHSpT8E+2IsHYKsKl0cQiWvxMv4tT15uWdCAE2l/5qRJyVdXC7hoA==
+
+"@carbon/elements@^0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-0.0.1-beta.1.tgz#15f1012106eb07b18e37aead53dca025ad183d12"
+  integrity sha512-OvHIud+/kzvyrBAARXQJqQk9NLr6jC86mNL5TBucr5CX1MeszgAx+BYglvHwZ1pqkJYu1j2P1pCxDMyKRzYbEw==
+  dependencies:
+    "@carbon/colors" "0.0.1-beta.1"
+    "@carbon/grid" "0.0.1-beta.1"
+    "@carbon/import-once" "0.0.1-beta.1"
+    "@carbon/layout" "0.0.1-beta.1"
+    "@carbon/motion" "0.0.1-beta.1"
+    "@carbon/themes" "0.0.1-beta.1"
+    "@carbon/type" "0.0.1-beta.1"
+
+"@carbon/grid@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-0.0.1-beta.1.tgz#c99f8005e108dcda10aa58e81fe79e42b0541578"
+  integrity sha512-3MqyCyKB72hOGuRx/OxzPZjFaHqpTByOWsmssy88FxHv7vS8IZUcJFSZYZpTg1U6vl8tGCEfHXP0/AIfZUZFbA==
+  dependencies:
+    "@carbon/import-once" "0.0.1-beta.1"
+    "@carbon/layout" "0.0.1-beta.1"
 
 "@carbon/icon-helpers@0.0.1-beta.0":
   version "0.0.1-beta.0"
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-0.0.1-beta.0.tgz#58a71fbe64128ac606dad2fadcab53aa701cbcd8"
   integrity sha512-O7wZ8drife1mYjxWQRzRhllePPLQWhLcXAxSAPSKRBTZZy5kaQCPOFYiNOsZ86fh+B6ycqEO/8suIeWoZsoWxA==
 
-"@carbon/icons-handlebars@^0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icons-handlebars/-/icons-handlebars-0.0.1-beta.0.tgz#0aa0376509f10c177801d98cc9d53882dd7b380e"
-  integrity sha512-hD81ZpsxbJfn3si6RN754ugqS/60Q615QzOwmZ6x/Qk3G8DN0/4ln8RPcFRV7Q7/g5MywE7HACrEP7muUMi5Hg==
+"@carbon/icon-helpers@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-0.0.1-beta.1.tgz#3a4dcc653c8ccc1a1173f50df96d1bd851f4c202"
+  integrity sha512-634xRn8MZFzrDeKYvZnw5lpDifqtmhO2/WitzBiBGxzETyjfBG9nwIIkwgJ6g1Ujpi0m0UhPN5NpL4rcIByw8Q==
+
+"@carbon/icons-handlebars@^0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/icons-handlebars/-/icons-handlebars-0.0.1-beta.1.tgz#108fe5b07aa8d7617de1e1822e0dc2f9f00d80ff"
+  integrity sha512-K+VIuH095aDJgHXhuinGF0quSqstyjAOI+v0GGBwGBGhgo/fOnQBBPEzXH1ESJM79eke8S5LRqJ7LA8VuFkyYA==
   dependencies:
-    "@carbon/icon-helpers" "0.0.1-beta.0"
-    "@carbon/icons" "0.0.1-beta.0"
+    "@carbon/icon-helpers" "0.0.1-beta.1"
+    "@carbon/icons" "0.0.1-beta.1"
 
 "@carbon/icons-react@^0.0.1-alpha.32":
   version "0.0.1-beta.0"
@@ -652,40 +657,40 @@
     "@carbon/icon-helpers" "0.0.1-beta.0"
     prop-types "^15.6.2"
 
-"@carbon/icons@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-0.0.1-beta.0.tgz#7105a24a54c8ba43845fe3b560db6d5235d8591b"
-  integrity sha512-4AX6CEG1qeO5yY8jQoUvtah3A6eGtFE90E5E87CeT8DSZGcUcADsETQ5ydKYn1OdsTxtym4Xi0MczQwXtdrNlQ==
+"@carbon/icons@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-0.0.1-beta.1.tgz#be8ee91973b6306abcca6e0f7ca006b80656c8a9"
+  integrity sha512-BzUsNCw67l6pmV0CyCeMDFollnR2VHU9gwrLC2rPQeB47URtQ42A6Jh4Z4O9ygGsJaDI0eA+DJOyax0DHuYP6w==
 
-"@carbon/import-once@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/import-once/-/import-once-0.0.1-beta.0.tgz#f47e0c4f0952b4ee21ffbbd5a6daa3c2a6849e14"
-  integrity sha512-UTFFsGknF6/aSG8k4QRmFCeX/FrYlh0qUgujcyy3TlCyK89lnOPHekvECOeJ+ig05vD89JKKMHGF41n/axcJdg==
+"@carbon/import-once@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/import-once/-/import-once-0.0.1-beta.1.tgz#7301bc375fdedebe3ca627794bb3bd00e8097fa4"
+  integrity sha512-nSPEz35QgQsN7y50LZ4E6OnhLObbUQGd1yUE/b3Cvb5M/AZahs5BCjHVgD18n4tC3ZFZ0vJahjrEz4KdyC2XBA==
 
-"@carbon/layout@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-0.0.1-beta.0.tgz#5d641e295beb90d60b3121f15bb3871d53d2a032"
-  integrity sha512-f8fJj220yE5niUqWlVSueEoGpUXeIKqmCVMRG3Z5MtVQWEKcEOvzeH8ccA/zhIt+A45/fYwUg3LENsG7zqWp/g==
+"@carbon/layout@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-0.0.1-beta.1.tgz#137182c69f65e038220b464659299b41eb31c2b7"
+  integrity sha512-7GaMN1rdKgq9cDWB2QHVD+lR4muBWNmjTaev6yR9P3RwiTmiwpezr1MVBjEW75hdbO8o1HgfI3aXS6j6EpK9xg==
 
-"@carbon/motion@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-0.0.1-beta.0.tgz#2c44421cf69b42737fbe640b24fc2c56c3c9b303"
-  integrity sha512-8Uoc0NP3adCCdp16ResApZ42vsevJ/6pVxC0ltCMhefab3iPsXvksF3hmGdeqO7ZRXnLmuAGCh56E8dXzeeQjQ==
+"@carbon/motion@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-0.0.1-beta.1.tgz#56ec3d5fd0a566625007d856b727bbcfc8635031"
+  integrity sha512-oco1O2qTzwPtNTabaIyviNtKmXl2pZVytBl+MMPdtuTvBTgXkqlerB1n/2e+FSNFeAKIzpGFrh6dLF8xl9zpOg==
 
-"@carbon/themes@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-0.0.1-beta.0.tgz#08ea6d02e0cca8e26838e1aa2848f9342c5fef8c"
-  integrity sha512-tghOlItcAu3I3HH9Ebbp0LLeEYI/rgfxeyH6mBt0NN2dTeTk96BxuCwIhOI85xv6gs1QKCoGCBCcN4oPj7l1tw==
+"@carbon/themes@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-0.0.1-beta.1.tgz#77c29dec3613178ba6420544797bc73a26bc213d"
+  integrity sha512-1hYGWCv515Ls7Vch84zcr8EbaiiiXWOjAqY3I9nmvGdg0ryvh6Mcy1dSXuqh9ZIIj6mfTN/BLope/x6OU+/S8w==
   dependencies:
-    "@carbon/colors" "0.0.1-beta.0"
+    "@carbon/colors" "0.0.1-beta.1"
 
-"@carbon/type@0.0.1-beta.0":
-  version "0.0.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@carbon/type/-/type-0.0.1-beta.0.tgz#312df05819bc8d81f6c439a17bc1de391df821d0"
-  integrity sha512-SR79Ci8Um2iOzxVhLLQ/zyQf59XRRaA0WIPq1GIL6PXXjYB272iG9Un7har72JuJq5bHzaPpcJuAHeGwCmrx4g==
+"@carbon/type@0.0.1-beta.1":
+  version "0.0.1-beta.1"
+  resolved "https://registry.yarnpkg.com/@carbon/type/-/type-0.0.1-beta.1.tgz#c1069dfc4e9767f52ae493a4063063207efece74"
+  integrity sha512-R3w/lS6EiRattryqfG23RQGh3loaqJil/11gkvWvtHzxDpHZVcjH1jcMo+sBcBv1iZzqBkZSWNDsgZzQAnIv7g==
   dependencies:
-    "@carbon/import-once" "0.0.1-beta.0"
-    "@carbon/layout" "0.0.1-beta.0"
+    "@carbon/import-once" "0.0.1-beta.1"
+    "@carbon/layout" "0.0.1-beta.1"
 
 "@commitlint/cli@^7.0.0":
   version "7.2.1"