diff --git a/.yarn/cache/diff-npm-5.0.0-ad6900db18-ef241d3b20.zip b/.yarn/cache/diff-npm-5.0.0-ad6900db18-ef241d3b20.zip
new file mode 100644
index 000000000000..621a659a9069
Binary files /dev/null and b/.yarn/cache/diff-npm-5.0.0-ad6900db18-ef241d3b20.zip differ
diff --git a/docs/migration/11.x-layout.md b/docs/migration/11.x-layout.md
new file mode 100644
index 000000000000..a02f6e225c37
--- /dev/null
+++ b/docs/migration/11.x-layout.md
@@ -0,0 +1,24 @@
+# Layout
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| v10                               | v11                       |
+| --------------------------------- | ------------------------- |
+| `$carbon--base-font-size`         | `$base-font-size`         |
+| `carbon--rem`                     | `rem`                     |
+| `carbon--em`                      | `em`                      |
+| `$carbon--grid-gutter`            | `$grid-gutter`            |
+| `$carbon--grid-gutter--condensed` | `$grid-gutter--condensed` |
+| `$carbon--grid-breakpoints`       | `$grid-breakpoints`       |
+| `carbon--breakpoint-next`         | `breakpoint-next`         |
+| `carbon--breakpoint-prev`         | `breakpoint-prev`         |
+| `carbon--is-smallest-breakpoint`  | `is-smallest-breakpoint`  |
+| `carbon--largest-breakpoint-name` | `largest-breakpoint-name` |
+| `carbon--breakpoint-infix`        | `breakpoint-infix`        |
+| `carbon--breakpoint-up`           | `breakpoint-up`           |
+| `carbon--breakpoint-down`         | `breakpoint-down`         |
+| `carbon--breakpoint-between`      | `breakpoint-between`      |
+| `carbon--largest-breakpoint`      | `largest-breakpoint`      |
+| `carbon--breakpoint`              | `breakpoint`              |
diff --git a/docs/migration/11.x-motion.md b/docs/migration/11.x-motion.md
new file mode 100644
index 000000000000..f95b816b4bcd
--- /dev/null
+++ b/docs/migration/11.x-motion.md
@@ -0,0 +1,11 @@
+# Motion
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| v10                        | v11        |
+| -------------------------- | ---------- |
+| `$carbon--easings`         | `$easings` |
+| `@function carbon--motion` | `motion`   |
+| `@mixin carbon--motion`    | `motion`   |
diff --git a/packages/colors/.gitignore b/packages/colors/.gitignore
index a419809a4e0a..1cf596ae13eb 100644
--- a/packages/colors/.gitignore
+++ b/packages/colors/.gitignore
@@ -1 +1,2 @@
 scss
+index.scss
diff --git a/packages/colors/__tests__/__snapshots__/modules-test.js.snap b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
index 63fc487f896b..81a4ec030654 100644
--- a/packages/colors/__tests__/__snapshots__/modules-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`modules.scss Public API 1`] = `
+exports[`@carbon/colors Public API 1`] = `
 Object {
   "black": "#000000",
   "black-100": "#000000",
diff --git a/packages/colors/__tests__/modules-test.js b/packages/colors/__tests__/modules-test.js
index cf31fb635890..70d44044aedb 100644
--- a/packages/colors/__tests__/modules-test.js
+++ b/packages/colors/__tests__/modules-test.js
@@ -13,13 +13,13 @@ const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
 
-describe('modules.scss', () => {
+describe('@carbon/colors', () => {
   test('Public API', async () => {
     const { getValue } = await render(`
       @use 'sass:meta';
-      @use '../scss/module';
+      @use '../index.scss' as colors;
 
-      $_: get-value(meta.module-variables('module'));
+      $_: get-value(meta.module-variables('colors'));
     `);
 
     const variables = getValue(0);
diff --git a/packages/colors/docs/sass.md b/packages/colors/docs/sass.md
index ee6410b32806..350f9beda53a 100644
--- a/packages/colors/docs/sass.md
+++ b/packages/colors/docs/sass.md
@@ -11,118 +11,6 @@
 - [@carbon/colors](#carboncolors)
   - [✅⚠️ibm--colors [mixin]](#ibm--colors-mixin)
   - [✅carbon--colors [mixin]](#carbon--colors-mixin)
-  - [✅black [variable]](#black-variable)
-  - [✅white [variable]](#white-variable)
-  - [✅black-100 [variable]](#black-100-variable)
-  - [✅blue-10 [variable]](#blue-10-variable)
-  - [✅blue-20 [variable]](#blue-20-variable)
-  - [✅blue-30 [variable]](#blue-30-variable)
-  - [✅blue-40 [variable]](#blue-40-variable)
-  - [✅blue-50 [variable]](#blue-50-variable)
-  - [✅blue-60 [variable]](#blue-60-variable)
-  - [✅blue-70 [variable]](#blue-70-variable)
-  - [✅blue-80 [variable]](#blue-80-variable)
-  - [✅blue-90 [variable]](#blue-90-variable)
-  - [✅blue-100 [variable]](#blue-100-variable)
-  - [✅cool-gray-10 [variable]](#cool-gray-10-variable)
-  - [✅cool-gray-20 [variable]](#cool-gray-20-variable)
-  - [✅cool-gray-30 [variable]](#cool-gray-30-variable)
-  - [✅cool-gray-40 [variable]](#cool-gray-40-variable)
-  - [✅cool-gray-50 [variable]](#cool-gray-50-variable)
-  - [✅cool-gray-60 [variable]](#cool-gray-60-variable)
-  - [✅cool-gray-70 [variable]](#cool-gray-70-variable)
-  - [✅cool-gray-80 [variable]](#cool-gray-80-variable)
-  - [✅cool-gray-90 [variable]](#cool-gray-90-variable)
-  - [✅cool-gray-100 [variable]](#cool-gray-100-variable)
-  - [✅cyan-10 [variable]](#cyan-10-variable)
-  - [✅cyan-20 [variable]](#cyan-20-variable)
-  - [✅cyan-30 [variable]](#cyan-30-variable)
-  - [✅cyan-40 [variable]](#cyan-40-variable)
-  - [✅cyan-50 [variable]](#cyan-50-variable)
-  - [✅cyan-60 [variable]](#cyan-60-variable)
-  - [✅cyan-70 [variable]](#cyan-70-variable)
-  - [✅cyan-80 [variable]](#cyan-80-variable)
-  - [✅cyan-90 [variable]](#cyan-90-variable)
-  - [✅cyan-100 [variable]](#cyan-100-variable)
-  - [✅gray-10 [variable]](#gray-10-variable)
-  - [✅gray-20 [variable]](#gray-20-variable)
-  - [✅gray-30 [variable]](#gray-30-variable)
-  - [✅gray-40 [variable]](#gray-40-variable)
-  - [✅gray-50 [variable]](#gray-50-variable)
-  - [✅gray-60 [variable]](#gray-60-variable)
-  - [✅gray-70 [variable]](#gray-70-variable)
-  - [✅gray-80 [variable]](#gray-80-variable)
-  - [✅gray-90 [variable]](#gray-90-variable)
-  - [✅gray-100 [variable]](#gray-100-variable)
-  - [✅green-10 [variable]](#green-10-variable)
-  - [✅green-20 [variable]](#green-20-variable)
-  - [✅green-30 [variable]](#green-30-variable)
-  - [✅green-40 [variable]](#green-40-variable)
-  - [✅green-50 [variable]](#green-50-variable)
-  - [✅green-60 [variable]](#green-60-variable)
-  - [✅green-70 [variable]](#green-70-variable)
-  - [✅green-80 [variable]](#green-80-variable)
-  - [✅green-90 [variable]](#green-90-variable)
-  - [✅green-100 [variable]](#green-100-variable)
-  - [✅magenta-10 [variable]](#magenta-10-variable)
-  - [✅magenta-20 [variable]](#magenta-20-variable)
-  - [✅magenta-30 [variable]](#magenta-30-variable)
-  - [✅magenta-40 [variable]](#magenta-40-variable)
-  - [✅magenta-50 [variable]](#magenta-50-variable)
-  - [✅magenta-60 [variable]](#magenta-60-variable)
-  - [✅magenta-70 [variable]](#magenta-70-variable)
-  - [✅magenta-80 [variable]](#magenta-80-variable)
-  - [✅magenta-90 [variable]](#magenta-90-variable)
-  - [✅magenta-100 [variable]](#magenta-100-variable)
-  - [✅orange-40 [variable]](#orange-40-variable)
-  - [✅orange-60 [variable]](#orange-60-variable)
-  - [✅orange-70 [variable]](#orange-70-variable)
-  - [✅purple-10 [variable]](#purple-10-variable)
-  - [✅purple-20 [variable]](#purple-20-variable)
-  - [✅purple-30 [variable]](#purple-30-variable)
-  - [✅purple-40 [variable]](#purple-40-variable)
-  - [✅purple-50 [variable]](#purple-50-variable)
-  - [✅purple-60 [variable]](#purple-60-variable)
-  - [✅purple-70 [variable]](#purple-70-variable)
-  - [✅purple-80 [variable]](#purple-80-variable)
-  - [✅purple-90 [variable]](#purple-90-variable)
-  - [✅purple-100 [variable]](#purple-100-variable)
-  - [✅red-10 [variable]](#red-10-variable)
-  - [✅red-20 [variable]](#red-20-variable)
-  - [✅red-30 [variable]](#red-30-variable)
-  - [✅red-40 [variable]](#red-40-variable)
-  - [✅red-50 [variable]](#red-50-variable)
-  - [✅red-60 [variable]](#red-60-variable)
-  - [✅red-70 [variable]](#red-70-variable)
-  - [✅red-80 [variable]](#red-80-variable)
-  - [✅red-90 [variable]](#red-90-variable)
-  - [✅red-100 [variable]](#red-100-variable)
-  - [✅teal-10 [variable]](#teal-10-variable)
-  - [✅teal-20 [variable]](#teal-20-variable)
-  - [✅teal-30 [variable]](#teal-30-variable)
-  - [✅teal-40 [variable]](#teal-40-variable)
-  - [✅teal-50 [variable]](#teal-50-variable)
-  - [✅teal-60 [variable]](#teal-60-variable)
-  - [✅teal-70 [variable]](#teal-70-variable)
-  - [✅teal-80 [variable]](#teal-80-variable)
-  - [✅teal-90 [variable]](#teal-90-variable)
-  - [✅teal-100 [variable]](#teal-100-variable)
-  - [✅warm-gray-10 [variable]](#warm-gray-10-variable)
-  - [✅warm-gray-20 [variable]](#warm-gray-20-variable)
-  - [✅warm-gray-30 [variable]](#warm-gray-30-variable)
-  - [✅warm-gray-40 [variable]](#warm-gray-40-variable)
-  - [✅warm-gray-50 [variable]](#warm-gray-50-variable)
-  - [✅warm-gray-60 [variable]](#warm-gray-60-variable)
-  - [✅warm-gray-70 [variable]](#warm-gray-70-variable)
-  - [✅warm-gray-80 [variable]](#warm-gray-80-variable)
-  - [✅warm-gray-90 [variable]](#warm-gray-90-variable)
-  - [✅warm-gray-100 [variable]](#warm-gray-100-variable)
-  - [✅white-0 [variable]](#white-0-variable)
-  - [✅yellow-20 [variable]](#yellow-20-variable)
-  - [✅yellow-30 [variable]](#yellow-30-variable)
-  - [✅yellow-40 [variable]](#yellow-40-variable)
-  - [✅yellow-50 [variable]](#yellow-50-variable)
-  - [✅colors [variable]](#colors-variable)
 
 <!-- tocstop -->
 
@@ -813,2149 +701,3 @@ Define color variables
 </details>
 
 - **Group**: [@carbon/colors](#carboncolors)
-- **Requires**:
-  - [black-100 [variable]](#black-100-variable)
-  - [blue-10 [variable]](#blue-10-variable)
-  - [blue-20 [variable]](#blue-20-variable)
-  - [blue-30 [variable]](#blue-30-variable)
-  - [blue-40 [variable]](#blue-40-variable)
-  - [blue-50 [variable]](#blue-50-variable)
-  - [blue-60 [variable]](#blue-60-variable)
-  - [blue-70 [variable]](#blue-70-variable)
-  - [blue-80 [variable]](#blue-80-variable)
-  - [blue-90 [variable]](#blue-90-variable)
-  - [blue-100 [variable]](#blue-100-variable)
-  - [cool-gray-10 [variable]](#cool-gray-10-variable)
-  - [cool-gray-20 [variable]](#cool-gray-20-variable)
-  - [cool-gray-30 [variable]](#cool-gray-30-variable)
-  - [cool-gray-40 [variable]](#cool-gray-40-variable)
-  - [cool-gray-50 [variable]](#cool-gray-50-variable)
-  - [cool-gray-60 [variable]](#cool-gray-60-variable)
-  - [cool-gray-70 [variable]](#cool-gray-70-variable)
-  - [cool-gray-80 [variable]](#cool-gray-80-variable)
-  - [cool-gray-90 [variable]](#cool-gray-90-variable)
-  - [cool-gray-100 [variable]](#cool-gray-100-variable)
-  - [cyan-10 [variable]](#cyan-10-variable)
-  - [cyan-20 [variable]](#cyan-20-variable)
-  - [cyan-30 [variable]](#cyan-30-variable)
-  - [cyan-40 [variable]](#cyan-40-variable)
-  - [cyan-50 [variable]](#cyan-50-variable)
-  - [cyan-60 [variable]](#cyan-60-variable)
-  - [cyan-70 [variable]](#cyan-70-variable)
-  - [cyan-80 [variable]](#cyan-80-variable)
-  - [cyan-90 [variable]](#cyan-90-variable)
-  - [cyan-100 [variable]](#cyan-100-variable)
-  - [gray-10 [variable]](#gray-10-variable)
-  - [gray-20 [variable]](#gray-20-variable)
-  - [gray-30 [variable]](#gray-30-variable)
-  - [gray-40 [variable]](#gray-40-variable)
-  - [gray-50 [variable]](#gray-50-variable)
-  - [gray-60 [variable]](#gray-60-variable)
-  - [gray-70 [variable]](#gray-70-variable)
-  - [gray-80 [variable]](#gray-80-variable)
-  - [gray-90 [variable]](#gray-90-variable)
-  - [gray-100 [variable]](#gray-100-variable)
-  - [green-10 [variable]](#green-10-variable)
-  - [green-20 [variable]](#green-20-variable)
-  - [green-30 [variable]](#green-30-variable)
-  - [green-40 [variable]](#green-40-variable)
-  - [green-50 [variable]](#green-50-variable)
-  - [green-60 [variable]](#green-60-variable)
-  - [green-70 [variable]](#green-70-variable)
-  - [green-80 [variable]](#green-80-variable)
-  - [green-90 [variable]](#green-90-variable)
-  - [green-100 [variable]](#green-100-variable)
-  - [magenta-10 [variable]](#magenta-10-variable)
-  - [magenta-20 [variable]](#magenta-20-variable)
-  - [magenta-30 [variable]](#magenta-30-variable)
-  - [magenta-40 [variable]](#magenta-40-variable)
-  - [magenta-50 [variable]](#magenta-50-variable)
-  - [magenta-60 [variable]](#magenta-60-variable)
-  - [magenta-70 [variable]](#magenta-70-variable)
-  - [magenta-80 [variable]](#magenta-80-variable)
-  - [magenta-90 [variable]](#magenta-90-variable)
-  - [magenta-100 [variable]](#magenta-100-variable)
-  - [orange-40 [variable]](#orange-40-variable)
-  - [orange-60 [variable]](#orange-60-variable)
-  - [orange-70 [variable]](#orange-70-variable)
-  - [purple-10 [variable]](#purple-10-variable)
-  - [purple-20 [variable]](#purple-20-variable)
-  - [purple-30 [variable]](#purple-30-variable)
-  - [purple-40 [variable]](#purple-40-variable)
-  - [purple-50 [variable]](#purple-50-variable)
-  - [purple-60 [variable]](#purple-60-variable)
-  - [purple-70 [variable]](#purple-70-variable)
-  - [purple-80 [variable]](#purple-80-variable)
-  - [purple-90 [variable]](#purple-90-variable)
-  - [purple-100 [variable]](#purple-100-variable)
-  - [red-10 [variable]](#red-10-variable)
-  - [red-20 [variable]](#red-20-variable)
-  - [red-30 [variable]](#red-30-variable)
-  - [red-40 [variable]](#red-40-variable)
-  - [red-50 [variable]](#red-50-variable)
-  - [red-60 [variable]](#red-60-variable)
-  - [red-70 [variable]](#red-70-variable)
-  - [red-80 [variable]](#red-80-variable)
-  - [red-90 [variable]](#red-90-variable)
-  - [red-100 [variable]](#red-100-variable)
-  - [teal-10 [variable]](#teal-10-variable)
-  - [teal-20 [variable]](#teal-20-variable)
-  - [teal-30 [variable]](#teal-30-variable)
-  - [teal-40 [variable]](#teal-40-variable)
-  - [teal-50 [variable]](#teal-50-variable)
-  - [teal-60 [variable]](#teal-60-variable)
-  - [teal-70 [variable]](#teal-70-variable)
-  - [teal-80 [variable]](#teal-80-variable)
-  - [teal-90 [variable]](#teal-90-variable)
-  - [teal-100 [variable]](#teal-100-variable)
-  - [warm-gray-10 [variable]](#warm-gray-10-variable)
-  - [warm-gray-20 [variable]](#warm-gray-20-variable)
-  - [warm-gray-30 [variable]](#warm-gray-30-variable)
-  - [warm-gray-40 [variable]](#warm-gray-40-variable)
-  - [warm-gray-50 [variable]](#warm-gray-50-variable)
-  - [warm-gray-60 [variable]](#warm-gray-60-variable)
-  - [warm-gray-70 [variable]](#warm-gray-70-variable)
-  - [warm-gray-80 [variable]](#warm-gray-80-variable)
-  - [warm-gray-90 [variable]](#warm-gray-90-variable)
-  - [warm-gray-100 [variable]](#warm-gray-100-variable)
-  - [white-0 [variable]](#white-0-variable)
-  - [yellow-20 [variable]](#yellow-20-variable)
-  - [yellow-30 [variable]](#yellow-30-variable)
-  - [yellow-40 [variable]](#yellow-40-variable)
-  - [yellow-50 [variable]](#yellow-50-variable)
-
-### ✅black [variable]
-
-Value for black
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$black: #000000;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-
-### ✅white [variable]
-
-Value for white
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$white: #ffffff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-
-### ✅black-100 [variable]
-
-Value for black-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$black-100: #000000;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-10 [variable]
-
-Value for blue-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-10: #edf5ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-20 [variable]
-
-Value for blue-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-20: #d0e2ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-30 [variable]
-
-Value for blue-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-30: #a6c8ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-40 [variable]
-
-Value for blue-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-40: #78a9ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-50 [variable]
-
-Value for blue-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-50: #4589ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-60 [variable]
-
-Value for blue-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-60: #0f62fe;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-70 [variable]
-
-Value for blue-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-70: #0043ce;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-80 [variable]
-
-Value for blue-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-80: #002d9c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-90 [variable]
-
-Value for blue-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-90: #001d6c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-100 [variable]
-
-Value for blue-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-100: #001141;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-10 [variable]
-
-Value for cool-gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-10: #f2f4f8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-20 [variable]
-
-Value for cool-gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-20: #dde1e6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-30 [variable]
-
-Value for cool-gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-30: #c1c7cd;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-40 [variable]
-
-Value for cool-gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-40: #a2a9b0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-50 [variable]
-
-Value for cool-gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-50: #878d96;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-60 [variable]
-
-Value for cool-gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-60: #697077;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-70 [variable]
-
-Value for cool-gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-70: #4d5358;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-80 [variable]
-
-Value for cool-gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-80: #343a3f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-90 [variable]
-
-Value for cool-gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-90: #21272a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-100 [variable]
-
-Value for cool-gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-100: #121619;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-10 [variable]
-
-Value for cyan-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-10: #e5f6ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-20 [variable]
-
-Value for cyan-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-20: #bae6ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-30 [variable]
-
-Value for cyan-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-30: #82cfff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-40 [variable]
-
-Value for cyan-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-40: #33b1ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-50 [variable]
-
-Value for cyan-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-50: #1192e8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-60 [variable]
-
-Value for cyan-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-60: #0072c3;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-70 [variable]
-
-Value for cyan-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-70: #00539a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-80 [variable]
-
-Value for cyan-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-80: #003a6d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-90 [variable]
-
-Value for cyan-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-90: #012749;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-100 [variable]
-
-Value for cyan-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-100: #061727;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-10 [variable]
-
-Value for gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-10: #f4f4f4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-20 [variable]
-
-Value for gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-20: #e0e0e0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-30 [variable]
-
-Value for gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-30: #c6c6c6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-40 [variable]
-
-Value for gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-40: #a8a8a8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-50 [variable]
-
-Value for gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-50: #8d8d8d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-60 [variable]
-
-Value for gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-60: #6f6f6f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-70 [variable]
-
-Value for gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-70: #525252;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-80 [variable]
-
-Value for gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-80: #393939;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-90 [variable]
-
-Value for gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-90: #262626;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-100 [variable]
-
-Value for gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-100: #161616;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-10 [variable]
-
-Value for green-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-10: #defbe6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-20 [variable]
-
-Value for green-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-20: #a7f0ba;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-30 [variable]
-
-Value for green-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-30: #6fdc8c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-40 [variable]
-
-Value for green-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-40: #42be65;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-50 [variable]
-
-Value for green-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-50: #24a148;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-60 [variable]
-
-Value for green-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-60: #198038;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-70 [variable]
-
-Value for green-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-70: #0e6027;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-80 [variable]
-
-Value for green-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-80: #044317;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-90 [variable]
-
-Value for green-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-90: #022d0d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-100 [variable]
-
-Value for green-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-100: #071908;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-10 [variable]
-
-Value for magenta-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-10: #fff0f7;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-20 [variable]
-
-Value for magenta-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-20: #ffd6e8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-30 [variable]
-
-Value for magenta-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-30: #ffafd2;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-40 [variable]
-
-Value for magenta-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-40: #ff7eb6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-50 [variable]
-
-Value for magenta-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-50: #ee5396;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-60 [variable]
-
-Value for magenta-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-60: #d02670;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-70 [variable]
-
-Value for magenta-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-70: #9f1853;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-80 [variable]
-
-Value for magenta-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-80: #740937;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-90 [variable]
-
-Value for magenta-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-90: #510224;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-100 [variable]
-
-Value for magenta-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-100: #2a0a18;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-40 [variable]
-
-Value for orange-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-40: #ff832b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-60 [variable]
-
-Value for orange-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-60: #ba4e00;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-70 [variable]
-
-Value for orange-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-70: #8a3800;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-10 [variable]
-
-Value for purple-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-10: #f6f2ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-20 [variable]
-
-Value for purple-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-20: #e8daff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-30 [variable]
-
-Value for purple-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-30: #d4bbff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-40 [variable]
-
-Value for purple-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-40: #be95ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-50 [variable]
-
-Value for purple-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-50: #a56eff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-60 [variable]
-
-Value for purple-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-60: #8a3ffc;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-70 [variable]
-
-Value for purple-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-70: #6929c4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-80 [variable]
-
-Value for purple-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-80: #491d8b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-90 [variable]
-
-Value for purple-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-90: #31135e;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-100 [variable]
-
-Value for purple-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-100: #1c0f30;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-10 [variable]
-
-Value for red-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-10: #fff1f1;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-20 [variable]
-
-Value for red-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-20: #ffd7d9;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-30 [variable]
-
-Value for red-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-30: #ffb3b8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-40 [variable]
-
-Value for red-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-40: #ff8389;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-50 [variable]
-
-Value for red-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-50: #fa4d56;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-60 [variable]
-
-Value for red-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-60: #da1e28;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-70 [variable]
-
-Value for red-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-70: #a2191f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-80 [variable]
-
-Value for red-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-80: #750e13;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-90 [variable]
-
-Value for red-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-90: #520408;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-100 [variable]
-
-Value for red-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-100: #2d0709;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-10 [variable]
-
-Value for teal-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-10: #d9fbfb;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-20 [variable]
-
-Value for teal-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-20: #9ef0f0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-30 [variable]
-
-Value for teal-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-30: #3ddbd9;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-40 [variable]
-
-Value for teal-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-40: #08bdba;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-50 [variable]
-
-Value for teal-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-50: #009d9a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-60 [variable]
-
-Value for teal-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-60: #007d79;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-70 [variable]
-
-Value for teal-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-70: #005d5d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-80 [variable]
-
-Value for teal-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-80: #004144;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-90 [variable]
-
-Value for teal-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-90: #022b30;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-100 [variable]
-
-Value for teal-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-100: #081a1c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-10 [variable]
-
-Value for warm-gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-10: #f7f3f2;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-20 [variable]
-
-Value for warm-gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-20: #e5e0df;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-30 [variable]
-
-Value for warm-gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-30: #cac5c4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-40 [variable]
-
-Value for warm-gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-40: #ada8a8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-50 [variable]
-
-Value for warm-gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-50: #8f8b8b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-60 [variable]
-
-Value for warm-gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-60: #726e6e;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-70 [variable]
-
-Value for warm-gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-70: #565151;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-80 [variable]
-
-Value for warm-gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-80: #3c3838;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-90 [variable]
-
-Value for warm-gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-90: #272525;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-100 [variable]
-
-Value for warm-gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-100: #171414;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅white-0 [variable]
-
-Value for white-0 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$white-0: #ffffff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-20 [variable]
-
-Value for yellow-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-20: #fdd13a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-30 [variable]
-
-Value for yellow-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-30: #f1c21b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-40 [variable]
-
-Value for yellow-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-40: #d2a106;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-50 [variable]
-
-Value for yellow-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-50: #b28600;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅colors [variable]
-
-Colors from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$colors: (
-  black: (
-    100: #000000,
-  ),
-  blue: (
-    10: #edf5ff,
-    20: #d0e2ff,
-    30: #a6c8ff,
-    40: #78a9ff,
-    50: #4589ff,
-    60: #0f62fe,
-    70: #0043ce,
-    80: #002d9c,
-    90: #001d6c,
-    100: #001141,
-  ),
-  cool-gray: (
-    10: #f2f4f8,
-    20: #dde1e6,
-    30: #c1c7cd,
-    40: #a2a9b0,
-    50: #878d96,
-    60: #697077,
-    70: #4d5358,
-    80: #343a3f,
-    90: #21272a,
-    100: #121619,
-  ),
-  cyan: (
-    10: #e5f6ff,
-    20: #bae6ff,
-    30: #82cfff,
-    40: #33b1ff,
-    50: #1192e8,
-    60: #0072c3,
-    70: #00539a,
-    80: #003a6d,
-    90: #012749,
-    100: #061727,
-  ),
-  gray: (
-    10: #f4f4f4,
-    20: #e0e0e0,
-    30: #c6c6c6,
-    40: #a8a8a8,
-    50: #8d8d8d,
-    60: #6f6f6f,
-    70: #525252,
-    80: #393939,
-    90: #262626,
-    100: #161616,
-  ),
-  green: (
-    10: #defbe6,
-    20: #a7f0ba,
-    30: #6fdc8c,
-    40: #42be65,
-    50: #24a148,
-    60: #198038,
-    70: #0e6027,
-    80: #044317,
-    90: #022d0d,
-    100: #071908,
-  ),
-  magenta: (
-    10: #fff0f7,
-    20: #ffd6e8,
-    30: #ffafd2,
-    40: #ff7eb6,
-    50: #ee5396,
-    60: #d02670,
-    70: #9f1853,
-    80: #740937,
-    90: #510224,
-    100: #2a0a18,
-  ),
-  orange: (
-    40: #ff832b,
-    60: #ba4e00,
-    70: #8a3800,
-  ),
-  purple: (
-    10: #f6f2ff,
-    20: #e8daff,
-    30: #d4bbff,
-    40: #be95ff,
-    50: #a56eff,
-    60: #8a3ffc,
-    70: #6929c4,
-    80: #491d8b,
-    90: #31135e,
-    100: #1c0f30,
-  ),
-  red: (
-    10: #fff1f1,
-    20: #ffd7d9,
-    30: #ffb3b8,
-    40: #ff8389,
-    50: #fa4d56,
-    60: #da1e28,
-    70: #a2191f,
-    80: #750e13,
-    90: #520408,
-    100: #2d0709,
-  ),
-  teal: (
-    10: #d9fbfb,
-    20: #9ef0f0,
-    30: #3ddbd9,
-    40: #08bdba,
-    50: #009d9a,
-    60: #007d79,
-    70: #005d5d,
-    80: #004144,
-    90: #022b30,
-    100: #081a1c,
-  ),
-  warm-gray: (
-    10: #f7f3f2,
-    20: #e5e0df,
-    30: #cac5c4,
-    40: #ada8a8,
-    50: #8f8b8b,
-    60: #726e6e,
-    70: #565151,
-    80: #3c3838,
-    90: #272525,
-    100: #171414,
-  ),
-  white: (
-    0: #ffffff,
-  ),
-  yellow: (
-    20: #fdd13a,
-    30: #f1c21b,
-    40: #d2a106,
-    50: #b28600,
-  ),
-);
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
diff --git a/packages/colors/examples/sass-modules/src/styles.scss b/packages/colors/examples/sass-modules/src/styles.scss
index c3d7b42d24be..e09a7d581219 100644
--- a/packages/colors/examples/sass-modules/src/styles.scss
+++ b/packages/colors/examples/sass-modules/src/styles.scss
@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/colors/scss/module' as *;
+@use '@carbon/colors' as *;
 
 body {
   background: $gray-20;
diff --git a/packages/colors/package.json b/packages/colors/package.json
index 0588bd58af9c..27b0f5ceb7db 100644
--- a/packages/colors/package.json
+++ b/packages/colors/package.json
@@ -32,7 +32,7 @@
   },
   "scripts": {
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonColors && node tasks/build.js && carbon-cli check \"scss/*.scss\" && carbon-cli sassdoc \"scss/*.scss\"",
-    "clean": "rimraf css es lib umd scss"
+    "clean": "rimraf css es lib umd scss index.scss"
   },
   "devDependencies": {
     "@carbon/cli": "^10.18.0",
diff --git a/packages/colors/tasks/build.js b/packages/colors/tasks/build.js
index a96b78e7868d..72e14bdf0751 100644
--- a/packages/colors/tasks/build.js
+++ b/packages/colors/tasks/build.js
@@ -21,7 +21,7 @@ const SCSS_DIR = path.resolve(__dirname, '../scss');
 const COLORS_ENTRYPOINT = path.join(SCSS_DIR, 'colors.scss');
 const INDEX_ENTRYPOINT = path.join(SCSS_DIR, 'index.scss');
 const MIXINS_ENTRYPOINT = path.join(SCSS_DIR, 'mixins.scss');
-const MODULES_ENTRYPOINT = path.join(SCSS_DIR, 'module.scss');
+const MODULES_ENTRYPOINT = path.resolve(SCSS_DIR, '..', 'index.scss');
 const FILE_BANNER = t.Comment(` Code generated by @carbon/colors. DO NOT EDIT.
 
  Copyright IBM Corp. 2018, 2020
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 05fcffe5a58c..bc064c0caf99 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -11,118 +11,6 @@
 - [@carbon/colors](#carboncolors)
   - [✅⚠️ibm--colors [mixin]](#ibm--colors-mixin)
   - [✅carbon--colors [mixin]](#carbon--colors-mixin)
-  - [✅black [variable]](#black-variable)
-  - [✅white [variable]](#white-variable)
-  - [✅black-100 [variable]](#black-100-variable)
-  - [✅blue-10 [variable]](#blue-10-variable)
-  - [✅blue-20 [variable]](#blue-20-variable)
-  - [✅blue-30 [variable]](#blue-30-variable)
-  - [✅blue-40 [variable]](#blue-40-variable)
-  - [✅blue-50 [variable]](#blue-50-variable)
-  - [✅blue-60 [variable]](#blue-60-variable)
-  - [✅blue-70 [variable]](#blue-70-variable)
-  - [✅blue-80 [variable]](#blue-80-variable)
-  - [✅blue-90 [variable]](#blue-90-variable)
-  - [✅blue-100 [variable]](#blue-100-variable)
-  - [✅cool-gray-10 [variable]](#cool-gray-10-variable)
-  - [✅cool-gray-20 [variable]](#cool-gray-20-variable)
-  - [✅cool-gray-30 [variable]](#cool-gray-30-variable)
-  - [✅cool-gray-40 [variable]](#cool-gray-40-variable)
-  - [✅cool-gray-50 [variable]](#cool-gray-50-variable)
-  - [✅cool-gray-60 [variable]](#cool-gray-60-variable)
-  - [✅cool-gray-70 [variable]](#cool-gray-70-variable)
-  - [✅cool-gray-80 [variable]](#cool-gray-80-variable)
-  - [✅cool-gray-90 [variable]](#cool-gray-90-variable)
-  - [✅cool-gray-100 [variable]](#cool-gray-100-variable)
-  - [✅cyan-10 [variable]](#cyan-10-variable)
-  - [✅cyan-20 [variable]](#cyan-20-variable)
-  - [✅cyan-30 [variable]](#cyan-30-variable)
-  - [✅cyan-40 [variable]](#cyan-40-variable)
-  - [✅cyan-50 [variable]](#cyan-50-variable)
-  - [✅cyan-60 [variable]](#cyan-60-variable)
-  - [✅cyan-70 [variable]](#cyan-70-variable)
-  - [✅cyan-80 [variable]](#cyan-80-variable)
-  - [✅cyan-90 [variable]](#cyan-90-variable)
-  - [✅cyan-100 [variable]](#cyan-100-variable)
-  - [✅gray-10 [variable]](#gray-10-variable)
-  - [✅gray-20 [variable]](#gray-20-variable)
-  - [✅gray-30 [variable]](#gray-30-variable)
-  - [✅gray-40 [variable]](#gray-40-variable)
-  - [✅gray-50 [variable]](#gray-50-variable)
-  - [✅gray-60 [variable]](#gray-60-variable)
-  - [✅gray-70 [variable]](#gray-70-variable)
-  - [✅gray-80 [variable]](#gray-80-variable)
-  - [✅gray-90 [variable]](#gray-90-variable)
-  - [✅gray-100 [variable]](#gray-100-variable)
-  - [✅green-10 [variable]](#green-10-variable)
-  - [✅green-20 [variable]](#green-20-variable)
-  - [✅green-30 [variable]](#green-30-variable)
-  - [✅green-40 [variable]](#green-40-variable)
-  - [✅green-50 [variable]](#green-50-variable)
-  - [✅green-60 [variable]](#green-60-variable)
-  - [✅green-70 [variable]](#green-70-variable)
-  - [✅green-80 [variable]](#green-80-variable)
-  - [✅green-90 [variable]](#green-90-variable)
-  - [✅green-100 [variable]](#green-100-variable)
-  - [✅magenta-10 [variable]](#magenta-10-variable)
-  - [✅magenta-20 [variable]](#magenta-20-variable)
-  - [✅magenta-30 [variable]](#magenta-30-variable)
-  - [✅magenta-40 [variable]](#magenta-40-variable)
-  - [✅magenta-50 [variable]](#magenta-50-variable)
-  - [✅magenta-60 [variable]](#magenta-60-variable)
-  - [✅magenta-70 [variable]](#magenta-70-variable)
-  - [✅magenta-80 [variable]](#magenta-80-variable)
-  - [✅magenta-90 [variable]](#magenta-90-variable)
-  - [✅magenta-100 [variable]](#magenta-100-variable)
-  - [✅orange-40 [variable]](#orange-40-variable)
-  - [✅orange-60 [variable]](#orange-60-variable)
-  - [✅orange-70 [variable]](#orange-70-variable)
-  - [✅purple-10 [variable]](#purple-10-variable)
-  - [✅purple-20 [variable]](#purple-20-variable)
-  - [✅purple-30 [variable]](#purple-30-variable)
-  - [✅purple-40 [variable]](#purple-40-variable)
-  - [✅purple-50 [variable]](#purple-50-variable)
-  - [✅purple-60 [variable]](#purple-60-variable)
-  - [✅purple-70 [variable]](#purple-70-variable)
-  - [✅purple-80 [variable]](#purple-80-variable)
-  - [✅purple-90 [variable]](#purple-90-variable)
-  - [✅purple-100 [variable]](#purple-100-variable)
-  - [✅red-10 [variable]](#red-10-variable)
-  - [✅red-20 [variable]](#red-20-variable)
-  - [✅red-30 [variable]](#red-30-variable)
-  - [✅red-40 [variable]](#red-40-variable)
-  - [✅red-50 [variable]](#red-50-variable)
-  - [✅red-60 [variable]](#red-60-variable)
-  - [✅red-70 [variable]](#red-70-variable)
-  - [✅red-80 [variable]](#red-80-variable)
-  - [✅red-90 [variable]](#red-90-variable)
-  - [✅red-100 [variable]](#red-100-variable)
-  - [✅teal-10 [variable]](#teal-10-variable)
-  - [✅teal-20 [variable]](#teal-20-variable)
-  - [✅teal-30 [variable]](#teal-30-variable)
-  - [✅teal-40 [variable]](#teal-40-variable)
-  - [✅teal-50 [variable]](#teal-50-variable)
-  - [✅teal-60 [variable]](#teal-60-variable)
-  - [✅teal-70 [variable]](#teal-70-variable)
-  - [✅teal-80 [variable]](#teal-80-variable)
-  - [✅teal-90 [variable]](#teal-90-variable)
-  - [✅teal-100 [variable]](#teal-100-variable)
-  - [✅warm-gray-10 [variable]](#warm-gray-10-variable)
-  - [✅warm-gray-20 [variable]](#warm-gray-20-variable)
-  - [✅warm-gray-30 [variable]](#warm-gray-30-variable)
-  - [✅warm-gray-40 [variable]](#warm-gray-40-variable)
-  - [✅warm-gray-50 [variable]](#warm-gray-50-variable)
-  - [✅warm-gray-60 [variable]](#warm-gray-60-variable)
-  - [✅warm-gray-70 [variable]](#warm-gray-70-variable)
-  - [✅warm-gray-80 [variable]](#warm-gray-80-variable)
-  - [✅warm-gray-90 [variable]](#warm-gray-90-variable)
-  - [✅warm-gray-100 [variable]](#warm-gray-100-variable)
-  - [✅white-0 [variable]](#white-0-variable)
-  - [✅yellow-20 [variable]](#yellow-20-variable)
-  - [✅yellow-30 [variable]](#yellow-30-variable)
-  - [✅yellow-40 [variable]](#yellow-40-variable)
-  - [✅yellow-50 [variable]](#yellow-50-variable)
-  - [✅colors [variable]](#colors-variable)
 - [@carbon/grid](#carbongrid)
   - [✅carbon--12-column-grid [variable]](#carbon--12-column-grid-variable)
   - [❌carbon--make-col-ready [mixin]](#carbon--make-col-ready-mixin)
@@ -146,17 +34,30 @@
   - [✅exports [mixin]](#exports-mixin)
 - [@carbon/layout](#carbonlayout)
   - [✅carbon--grid-gutter [variable]](#carbon--grid-gutter-variable)
+  - [✅grid-gutter [variable]](#grid-gutter-variable)
   - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable)
+  - [✅grid-gutter--condensed [variable]](#grid-gutter--condensed-variable)
   - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable)
+  - [✅grid-breakpoints [variable]](#grid-breakpoints-variable)
   - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function)
+  - [✅breakpoint-next [function]](#breakpoint-next-function)
   - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function)
+  - [✅breakpoint-prev [function]](#breakpoint-prev-function)
   - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
+  - [✅is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
   - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
+  - [✅largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+  - [✅breakpoint-infix [function]](#breakpoint-infix-function)
   - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
+  - [✅breakpoint-up [mixin]](#breakpoint-up-mixin)
   - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [✅breakpoint-down [mixin]](#breakpoint-down-mixin)
   - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
+  - [✅breakpoint-between [mixin]](#breakpoint-between-mixin)
   - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
+  - [✅largest-breakpoint [mixin]](#largest-breakpoint-mixin)
   - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
+  - [✅breakpoint [mixin]](#breakpoint-mixin)
   - [✅carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [✅carbon--container-01 [variable]](#carbon--container-01-variable)
   - [✅carbon--container-02 [variable]](#carbon--container-02-variable)
@@ -170,13 +71,21 @@
   - [✅container-04 [variable]](#container-04-variable)
   - [✅container-05 [variable]](#container-05-variable)
   - [✅carbon--base-font-size [variable]](#carbon--base-font-size-variable)
+  - [✅base-font-size [variable]](#base-font-size-variable)
   - [✅carbon--rem [function]](#carbon--rem-function)
+  - [✅rem [function]](#rem-function)
   - [✅carbon--em [function]](#carbon--em-function)
+  - [✅em [function]](#em-function)
   - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable)
+  - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
   - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable)
+  - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
   - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable)
+  - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
   - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable)
+  - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable)
   - [✅carbon--fluid-spacing [variable]](#carbon--fluid-spacing-variable)
+  - [✅fluid-spacing [variable]](#fluid-spacing-variable)
   - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
   - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
   - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
@@ -207,18 +116,31 @@
   - [✅carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
   - [✅carbon--mini-units [function]](#carbon--mini-units-function)
   - [✅carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
+  - [✅spacing-01 [variable]](#spacing-01-variable)
   - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
+  - [✅spacing-02 [variable]](#spacing-02-variable)
   - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+  - [✅spacing-03 [variable]](#spacing-03-variable)
   - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
+  - [✅spacing-04 [variable]](#spacing-04-variable)
   - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
+  - [✅spacing-05 [variable]](#spacing-05-variable)
   - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
+  - [✅spacing-06 [variable]](#spacing-06-variable)
   - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
+  - [✅spacing-07 [variable]](#spacing-07-variable)
   - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
+  - [✅spacing-08 [variable]](#spacing-08-variable)
   - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
+  - [✅spacing-09 [variable]](#spacing-09-variable)
   - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable)
+  - [✅spacing-10 [variable]](#spacing-10-variable)
   - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable)
+  - [✅spacing-11 [variable]](#spacing-11-variable)
   - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable)
+  - [✅spacing-12 [variable]](#spacing-12-variable)
   - [✅carbon--spacing [variable]](#carbon--spacing-variable)
+  - [✅spacing [variable]](#spacing-variable)
   - [✅spacing-01 [variable]](#spacing-01-variable)
   - [✅spacing-02 [variable]](#spacing-02-variable)
   - [✅spacing-03 [variable]](#spacing-03-variable)
@@ -232,7 +154,10 @@
   - [✅spacing-11 [variable]](#spacing-11-variable)
   - [✅spacing-12 [variable]](#spacing-12-variable)
   - [✅map-deep-get [function]](#map-deep-get-function)
+  - [✅map-deep-get [function]](#map-deep-get-function)
   - [✅carbon--key-by-index [function]](#carbon--key-by-index-function)
+  - [✅key-by-index [function]](#key-by-index-function)
+  - [✅last-map-item [function]](#last-map-item-function)
   - [✅last-map-item [function]](#last-map-item-function)
 - [@carbon/motion](#carbonmotion)
   - [✅carbon--easings [variable]](#carbon--easings-variable)
@@ -1289,2434 +1214,288 @@ Define color variables
 </details>
 
 - **Group**: [@carbon/colors](#carboncolors)
-- **Requires**:
-  - [black-100 [variable]](#black-100-variable)
-  - [blue-10 [variable]](#blue-10-variable)
-  - [blue-20 [variable]](#blue-20-variable)
-  - [blue-30 [variable]](#blue-30-variable)
-  - [blue-40 [variable]](#blue-40-variable)
-  - [blue-50 [variable]](#blue-50-variable)
-  - [blue-60 [variable]](#blue-60-variable)
-  - [blue-70 [variable]](#blue-70-variable)
-  - [blue-80 [variable]](#blue-80-variable)
-  - [blue-90 [variable]](#blue-90-variable)
-  - [blue-100 [variable]](#blue-100-variable)
-  - [cool-gray-10 [variable]](#cool-gray-10-variable)
-  - [cool-gray-20 [variable]](#cool-gray-20-variable)
-  - [cool-gray-30 [variable]](#cool-gray-30-variable)
-  - [cool-gray-40 [variable]](#cool-gray-40-variable)
-  - [cool-gray-50 [variable]](#cool-gray-50-variable)
-  - [cool-gray-60 [variable]](#cool-gray-60-variable)
-  - [cool-gray-70 [variable]](#cool-gray-70-variable)
-  - [cool-gray-80 [variable]](#cool-gray-80-variable)
-  - [cool-gray-90 [variable]](#cool-gray-90-variable)
-  - [cool-gray-100 [variable]](#cool-gray-100-variable)
-  - [cyan-10 [variable]](#cyan-10-variable)
-  - [cyan-20 [variable]](#cyan-20-variable)
-  - [cyan-30 [variable]](#cyan-30-variable)
-  - [cyan-40 [variable]](#cyan-40-variable)
-  - [cyan-50 [variable]](#cyan-50-variable)
-  - [cyan-60 [variable]](#cyan-60-variable)
-  - [cyan-70 [variable]](#cyan-70-variable)
-  - [cyan-80 [variable]](#cyan-80-variable)
-  - [cyan-90 [variable]](#cyan-90-variable)
-  - [cyan-100 [variable]](#cyan-100-variable)
-  - [gray-10 [variable]](#gray-10-variable)
-  - [gray-20 [variable]](#gray-20-variable)
-  - [gray-30 [variable]](#gray-30-variable)
-  - [gray-40 [variable]](#gray-40-variable)
-  - [gray-50 [variable]](#gray-50-variable)
-  - [gray-60 [variable]](#gray-60-variable)
-  - [gray-70 [variable]](#gray-70-variable)
-  - [gray-80 [variable]](#gray-80-variable)
-  - [gray-90 [variable]](#gray-90-variable)
-  - [gray-100 [variable]](#gray-100-variable)
-  - [green-10 [variable]](#green-10-variable)
-  - [green-20 [variable]](#green-20-variable)
-  - [green-30 [variable]](#green-30-variable)
-  - [green-40 [variable]](#green-40-variable)
-  - [green-50 [variable]](#green-50-variable)
-  - [green-60 [variable]](#green-60-variable)
-  - [green-70 [variable]](#green-70-variable)
-  - [green-80 [variable]](#green-80-variable)
-  - [green-90 [variable]](#green-90-variable)
-  - [green-100 [variable]](#green-100-variable)
-  - [magenta-10 [variable]](#magenta-10-variable)
-  - [magenta-20 [variable]](#magenta-20-variable)
-  - [magenta-30 [variable]](#magenta-30-variable)
-  - [magenta-40 [variable]](#magenta-40-variable)
-  - [magenta-50 [variable]](#magenta-50-variable)
-  - [magenta-60 [variable]](#magenta-60-variable)
-  - [magenta-70 [variable]](#magenta-70-variable)
-  - [magenta-80 [variable]](#magenta-80-variable)
-  - [magenta-90 [variable]](#magenta-90-variable)
-  - [magenta-100 [variable]](#magenta-100-variable)
-  - [orange-40 [variable]](#orange-40-variable)
-  - [orange-60 [variable]](#orange-60-variable)
-  - [orange-70 [variable]](#orange-70-variable)
-  - [purple-10 [variable]](#purple-10-variable)
-  - [purple-20 [variable]](#purple-20-variable)
-  - [purple-30 [variable]](#purple-30-variable)
-  - [purple-40 [variable]](#purple-40-variable)
-  - [purple-50 [variable]](#purple-50-variable)
-  - [purple-60 [variable]](#purple-60-variable)
-  - [purple-70 [variable]](#purple-70-variable)
-  - [purple-80 [variable]](#purple-80-variable)
-  - [purple-90 [variable]](#purple-90-variable)
-  - [purple-100 [variable]](#purple-100-variable)
-  - [red-10 [variable]](#red-10-variable)
-  - [red-20 [variable]](#red-20-variable)
-  - [red-30 [variable]](#red-30-variable)
-  - [red-40 [variable]](#red-40-variable)
-  - [red-50 [variable]](#red-50-variable)
-  - [red-60 [variable]](#red-60-variable)
-  - [red-70 [variable]](#red-70-variable)
-  - [red-80 [variable]](#red-80-variable)
-  - [red-90 [variable]](#red-90-variable)
-  - [red-100 [variable]](#red-100-variable)
-  - [teal-10 [variable]](#teal-10-variable)
-  - [teal-20 [variable]](#teal-20-variable)
-  - [teal-30 [variable]](#teal-30-variable)
-  - [teal-40 [variable]](#teal-40-variable)
-  - [teal-50 [variable]](#teal-50-variable)
-  - [teal-60 [variable]](#teal-60-variable)
-  - [teal-70 [variable]](#teal-70-variable)
-  - [teal-80 [variable]](#teal-80-variable)
-  - [teal-90 [variable]](#teal-90-variable)
-  - [teal-100 [variable]](#teal-100-variable)
-  - [warm-gray-10 [variable]](#warm-gray-10-variable)
-  - [warm-gray-20 [variable]](#warm-gray-20-variable)
-  - [warm-gray-30 [variable]](#warm-gray-30-variable)
-  - [warm-gray-40 [variable]](#warm-gray-40-variable)
-  - [warm-gray-50 [variable]](#warm-gray-50-variable)
-  - [warm-gray-60 [variable]](#warm-gray-60-variable)
-  - [warm-gray-70 [variable]](#warm-gray-70-variable)
-  - [warm-gray-80 [variable]](#warm-gray-80-variable)
-  - [warm-gray-90 [variable]](#warm-gray-90-variable)
-  - [warm-gray-100 [variable]](#warm-gray-100-variable)
-  - [white-0 [variable]](#white-0-variable)
-  - [yellow-20 [variable]](#yellow-20-variable)
-  - [yellow-30 [variable]](#yellow-30-variable)
-  - [yellow-40 [variable]](#yellow-40-variable)
-  - [yellow-50 [variable]](#yellow-50-variable)
-
-### ✅black [variable]
-
-Value for black
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$black: #000000;
-```
 
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
+## @carbon/grid
 
-### ✅white [variable]
+### ✅carbon--12-column-grid [variable]
 
-Value for white
+Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the
+default 16
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$white: #ffffff;
+$carbon--12-column-grid: map-merge(
+  $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,
+        )
+      ),
+  )
+);
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Group**: [@carbon/grid](#carbongrid)
+- **Type**: `Map`
 
-### ✅black-100 [variable]
+### ❌carbon--make-col-ready [mixin]
 
-Value for black-100 from the IBM Design Language
+Used to initialize 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.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$black-100: #000000;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-10 [variable]
-
-Value for blue-10 from the IBM Design Language
+@mixin carbon--make-col-ready(
+  $gutter: $carbon--grid-gutter,
+  $collapsed-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);
 
-<details>
-<summary>Source code</summary>
+  // 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);
+  }
 
-```scss
-$blue-10: #edf5ff;
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: ($gutter / 2);
+    padding-left: 0;
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-20 [variable]
-
-Value for blue-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-20: #d0e2ff;
-```
+- **Parameters**:
 
-</details>
+| Name                | Description                    | Type     | Default value                     |
+| ------------------- | ------------------------------ | -------- | --------------------------------- |
+| `$gutter`           | The gutter for the grid system | `Number` | `$carbon--grid-gutter`            |
+| `$collapsed-gutter` | The condensed mode gutter      | `Number` | `$carbon--grid-gutter--condensed` |
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Group**: [@carbon/grid](#carbongrid)
+- **Requires**:
+  - [prefix [variable]](#prefix-variable)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
 
-### ✅blue-30 [variable]
+### ❌carbon--make-col [mixin]
 
-Value for blue-30 from the IBM Design Language
+Define the width of the column for a given span and column count. A width of 0
+will hide the column entirely.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-30: #a6c8ff;
+@mixin carbon--make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    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);
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name       | Description                           | Type     | Default value |
+| ---------- | ------------------------------------- | -------- | ------------- |
+| `$span`    | The number of columns covered         | `Number` | —             |
+| `$columns` | The total number of columns available | `Number` | —             |
+
+- **Group**: [@carbon/grid](#carbongrid)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
 
-### ✅blue-40 [variable]
+### ❌carbon--make-col-offset [mixin]
 
-Value for blue-40 from the IBM Design Language
+Create a column offset for a given span and column count.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-40: #78a9ff;
+@mixin carbon--make-col-offset($span, $columns) {
+  $offset: $span / $columns;
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: percentage($offset);
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name       | Description                                   | Type     | Default value |
+| ---------- | --------------------------------------------- | -------- | ------------- |
+| `$span`    | The number of columns the offset should cover | `Number` | —             |
+| `$columns` | The total number of columns available         | `Number` | —             |
+
+- **Group**: [@carbon/grid](#carbongrid)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
 
-### ✅blue-50 [variable]
+### ❌carbon--make-grid-columns [mixin]
 
-Value for blue-50 from the IBM Design Language
+Output the CSS required for all the columns in a given grid system.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-50: #4589ff;
-```
+@mixin carbon--make-grid-columns(
+  $breakpoints: $carbon--grid-breakpoints,
+  $gutter: $carbon--grid-gutter
+) {
+  .#{$prefix}--col {
+    @include carbon--make-col-ready($gutter);
+  }
 
-</details>
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: carbon--breakpoint-infix($breakpoint);
+    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
 
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 0 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include carbon--make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include carbon--make-col-ready($gutter);
+    }
 
-### ✅blue-60 [variable]
+    @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%;
+      }
 
-Value for blue-60 from the IBM Design Language
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        flex: 1 0 0%;
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+      }
 
-<details>
-<summary>Source code</summary>
+      @for $i from 0 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include carbon--make-col($i, $columns);
+        }
+      }
 
-```scss
-$blue-60: #0f62fe;
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include carbon--make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name           | Description                        | Type     | Default value               |
+| -------------- | ---------------------------------- | -------- | --------------------------- |
+| `$breakpoints` | The breakpoints in the grid system | `Map`    | `$carbon--grid-breakpoints` |
+| `$gutter`      | The gutter for the grid system     | `Number` | `$carbon--grid-gutter`      |
+
+- **Group**: [@carbon/grid](#carbongrid)
+- **Requires**:
+  - [carbon--make-col-ready [mixin]](#carbon--make-col-ready-mixin)
+  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [carbon--make-col [mixin]](#carbon--make-col-mixin)
+  - [carbon--make-col-offset [mixin]](#carbon--make-col-offset-mixin)
+  - [carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
+  - [prefix [variable]](#prefix-variable)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--grid [mixin]](#carbon--grid-mixin)
 
-### ✅blue-70 [variable]
+### ❌carbon--make-row [mixin]
 
-Value for blue-70 from the IBM Design Language
+Define the properties for a selector assigned to a row in the grid system.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-70: #0043ce;
+@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter / 2;
+  margin-left: -1 * $gutter / 2;
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name      | Description                   | Type     | Default value          |
+| --------- | ----------------------------- | -------- | ---------------------- |
+| `$gutter` | The gutter in the grid system | `Number` | `$carbon--grid-gutter` |
+
+- **Group**: [@carbon/grid](#carbongrid)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--grid [mixin]](#carbon--grid-mixin)
 
-### ✅blue-80 [variable]
+### ❌carbon--no-gutter [mixin]
 
-Value for blue-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-80: #002d9c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-90 [variable]
-
-Value for blue-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-90: #001d6c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-100 [variable]
-
-Value for blue-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-100: #001141;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-10 [variable]
-
-Value for cool-gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-10: #f2f4f8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-20 [variable]
-
-Value for cool-gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-20: #dde1e6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-30 [variable]
-
-Value for cool-gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-30: #c1c7cd;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-40 [variable]
-
-Value for cool-gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-40: #a2a9b0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-50 [variable]
-
-Value for cool-gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-50: #878d96;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-60 [variable]
-
-Value for cool-gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-60: #697077;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-70 [variable]
-
-Value for cool-gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-70: #4d5358;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-80 [variable]
-
-Value for cool-gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-80: #343a3f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-90 [variable]
-
-Value for cool-gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-90: #21272a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-100 [variable]
-
-Value for cool-gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-100: #121619;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-10 [variable]
-
-Value for cyan-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-10: #e5f6ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-20 [variable]
-
-Value for cyan-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-20: #bae6ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-30 [variable]
-
-Value for cyan-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-30: #82cfff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-40 [variable]
-
-Value for cyan-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-40: #33b1ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-50 [variable]
-
-Value for cyan-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-50: #1192e8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-60 [variable]
-
-Value for cyan-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-60: #0072c3;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-70 [variable]
-
-Value for cyan-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-70: #00539a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-80 [variable]
-
-Value for cyan-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-80: #003a6d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-90 [variable]
-
-Value for cyan-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-90: #012749;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-100 [variable]
-
-Value for cyan-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-100: #061727;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-10 [variable]
-
-Value for gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-10: #f4f4f4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-20 [variable]
-
-Value for gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-20: #e0e0e0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-30 [variable]
-
-Value for gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-30: #c6c6c6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-40 [variable]
-
-Value for gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-40: #a8a8a8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-50 [variable]
-
-Value for gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-50: #8d8d8d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-60 [variable]
-
-Value for gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-60: #6f6f6f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-70 [variable]
-
-Value for gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-70: #525252;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-80 [variable]
-
-Value for gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-80: #393939;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-90 [variable]
-
-Value for gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-90: #262626;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-100 [variable]
-
-Value for gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-100: #161616;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-10 [variable]
-
-Value for green-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-10: #defbe6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-20 [variable]
-
-Value for green-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-20: #a7f0ba;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-30 [variable]
-
-Value for green-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-30: #6fdc8c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-40 [variable]
-
-Value for green-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-40: #42be65;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-50 [variable]
-
-Value for green-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-50: #24a148;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-60 [variable]
-
-Value for green-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-60: #198038;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-70 [variable]
-
-Value for green-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-70: #0e6027;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-80 [variable]
-
-Value for green-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-80: #044317;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-90 [variable]
-
-Value for green-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-90: #022d0d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-100 [variable]
-
-Value for green-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-100: #071908;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-10 [variable]
-
-Value for magenta-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-10: #fff0f7;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-20 [variable]
-
-Value for magenta-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-20: #ffd6e8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-30 [variable]
-
-Value for magenta-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-30: #ffafd2;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-40 [variable]
-
-Value for magenta-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-40: #ff7eb6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-50 [variable]
-
-Value for magenta-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-50: #ee5396;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-60 [variable]
-
-Value for magenta-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-60: #d02670;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-70 [variable]
-
-Value for magenta-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-70: #9f1853;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-80 [variable]
-
-Value for magenta-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-80: #740937;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-90 [variable]
-
-Value for magenta-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-90: #510224;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-100 [variable]
-
-Value for magenta-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-100: #2a0a18;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-40 [variable]
-
-Value for orange-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-40: #ff832b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-60 [variable]
-
-Value for orange-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-60: #ba4e00;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-70 [variable]
-
-Value for orange-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-70: #8a3800;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-10 [variable]
-
-Value for purple-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-10: #f6f2ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-20 [variable]
-
-Value for purple-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-20: #e8daff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-30 [variable]
-
-Value for purple-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-30: #d4bbff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-40 [variable]
-
-Value for purple-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-40: #be95ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-50 [variable]
-
-Value for purple-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-50: #a56eff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-60 [variable]
-
-Value for purple-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-60: #8a3ffc;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-70 [variable]
-
-Value for purple-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-70: #6929c4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-80 [variable]
-
-Value for purple-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-80: #491d8b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-90 [variable]
-
-Value for purple-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-90: #31135e;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-100 [variable]
-
-Value for purple-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-100: #1c0f30;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-10 [variable]
-
-Value for red-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-10: #fff1f1;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-20 [variable]
-
-Value for red-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-20: #ffd7d9;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-30 [variable]
-
-Value for red-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-30: #ffb3b8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-40 [variable]
-
-Value for red-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-40: #ff8389;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-50 [variable]
-
-Value for red-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-50: #fa4d56;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-60 [variable]
-
-Value for red-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-60: #da1e28;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-70 [variable]
-
-Value for red-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-70: #a2191f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-80 [variable]
-
-Value for red-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-80: #750e13;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-90 [variable]
-
-Value for red-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-90: #520408;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-100 [variable]
-
-Value for red-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-100: #2d0709;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-10 [variable]
-
-Value for teal-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-10: #d9fbfb;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-20 [variable]
-
-Value for teal-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-20: #9ef0f0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-30 [variable]
-
-Value for teal-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-30: #3ddbd9;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-40 [variable]
-
-Value for teal-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-40: #08bdba;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-50 [variable]
-
-Value for teal-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-50: #009d9a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-60 [variable]
-
-Value for teal-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-60: #007d79;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-70 [variable]
-
-Value for teal-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-70: #005d5d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-80 [variable]
-
-Value for teal-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-80: #004144;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-90 [variable]
-
-Value for teal-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-90: #022b30;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-100 [variable]
-
-Value for teal-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-100: #081a1c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-10 [variable]
-
-Value for warm-gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-10: #f7f3f2;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-20 [variable]
-
-Value for warm-gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-20: #e5e0df;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-30 [variable]
-
-Value for warm-gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-30: #cac5c4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-40 [variable]
-
-Value for warm-gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-40: #ada8a8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-50 [variable]
-
-Value for warm-gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-50: #8f8b8b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-60 [variable]
-
-Value for warm-gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-60: #726e6e;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-70 [variable]
-
-Value for warm-gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-70: #565151;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-80 [variable]
-
-Value for warm-gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-80: #3c3838;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-90 [variable]
-
-Value for warm-gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-90: #272525;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-100 [variable]
-
-Value for warm-gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-100: #171414;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅white-0 [variable]
-
-Value for white-0 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$white-0: #ffffff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-20 [variable]
-
-Value for yellow-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-20: #fdd13a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-30 [variable]
-
-Value for yellow-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-30: #f1c21b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-40 [variable]
-
-Value for yellow-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-40: #d2a106;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-50 [variable]
-
-Value for yellow-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-50: #b28600;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅colors [variable]
-
-Colors from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$colors: (
-  black: (
-    100: #000000,
-  ),
-  blue: (
-    10: #edf5ff,
-    20: #d0e2ff,
-    30: #a6c8ff,
-    40: #78a9ff,
-    50: #4589ff,
-    60: #0f62fe,
-    70: #0043ce,
-    80: #002d9c,
-    90: #001d6c,
-    100: #001141,
-  ),
-  cool-gray: (
-    10: #f2f4f8,
-    20: #dde1e6,
-    30: #c1c7cd,
-    40: #a2a9b0,
-    50: #878d96,
-    60: #697077,
-    70: #4d5358,
-    80: #343a3f,
-    90: #21272a,
-    100: #121619,
-  ),
-  cyan: (
-    10: #e5f6ff,
-    20: #bae6ff,
-    30: #82cfff,
-    40: #33b1ff,
-    50: #1192e8,
-    60: #0072c3,
-    70: #00539a,
-    80: #003a6d,
-    90: #012749,
-    100: #061727,
-  ),
-  gray: (
-    10: #f4f4f4,
-    20: #e0e0e0,
-    30: #c6c6c6,
-    40: #a8a8a8,
-    50: #8d8d8d,
-    60: #6f6f6f,
-    70: #525252,
-    80: #393939,
-    90: #262626,
-    100: #161616,
-  ),
-  green: (
-    10: #defbe6,
-    20: #a7f0ba,
-    30: #6fdc8c,
-    40: #42be65,
-    50: #24a148,
-    60: #198038,
-    70: #0e6027,
-    80: #044317,
-    90: #022d0d,
-    100: #071908,
-  ),
-  magenta: (
-    10: #fff0f7,
-    20: #ffd6e8,
-    30: #ffafd2,
-    40: #ff7eb6,
-    50: #ee5396,
-    60: #d02670,
-    70: #9f1853,
-    80: #740937,
-    90: #510224,
-    100: #2a0a18,
-  ),
-  orange: (
-    40: #ff832b,
-    60: #ba4e00,
-    70: #8a3800,
-  ),
-  purple: (
-    10: #f6f2ff,
-    20: #e8daff,
-    30: #d4bbff,
-    40: #be95ff,
-    50: #a56eff,
-    60: #8a3ffc,
-    70: #6929c4,
-    80: #491d8b,
-    90: #31135e,
-    100: #1c0f30,
-  ),
-  red: (
-    10: #fff1f1,
-    20: #ffd7d9,
-    30: #ffb3b8,
-    40: #ff8389,
-    50: #fa4d56,
-    60: #da1e28,
-    70: #a2191f,
-    80: #750e13,
-    90: #520408,
-    100: #2d0709,
-  ),
-  teal: (
-    10: #d9fbfb,
-    20: #9ef0f0,
-    30: #3ddbd9,
-    40: #08bdba,
-    50: #009d9a,
-    60: #007d79,
-    70: #005d5d,
-    80: #004144,
-    90: #022b30,
-    100: #081a1c,
-  ),
-  warm-gray: (
-    10: #f7f3f2,
-    20: #e5e0df,
-    30: #cac5c4,
-    40: #ada8a8,
-    50: #8f8b8b,
-    60: #726e6e,
-    70: #565151,
-    80: #3c3838,
-    90: #272525,
-    100: #171414,
-  ),
-  white: (
-    0: #ffffff,
-  ),
-  yellow: (
-    20: #fdd13a,
-    30: #f1c21b,
-    40: #d2a106,
-    50: #b28600,
-  ),
-);
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-
-## @carbon/grid
-
-### ✅carbon--12-column-grid [variable]
-
-Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the
-default 16
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--12-column-grid: map-merge(
-  $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,
-        )
-      ),
-  )
-);
-```
-
-</details>
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Type**: `Map`
-
-### ❌carbon--make-col-ready [mixin]
-
-Used to initialize 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.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-col-ready(
-  $gutter: $carbon--grid-gutter,
-  $collapsed-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);
-  }
-
-  // For our narrow use-case, our container hangs 16px into the gutter
-  .#{$prefix}--row--narrow &,
-  .#{$prefix}--grid--narrow & {
-    padding-right: ($gutter / 2);
-    padding-left: 0;
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name                | Description                    | Type     | Default value                     |
-| ------------------- | ------------------------------ | -------- | --------------------------------- |
-| `$gutter`           | The gutter for the grid system | `Number` | `$carbon--grid-gutter`            |
-| `$collapsed-gutter` | The condensed mode gutter      | `Number` | `$carbon--grid-gutter--condensed` |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Requires**:
-  - [prefix [variable]](#prefix-variable)
-- **Used by**:
-  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
-
-### ❌carbon--make-col [mixin]
-
-Define the width of the column for a given span and column count. A width of 0
-will hide the column entirely.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-col($span, $columns) {
-  @if $span == 0 {
-    display: none;
-  } @else {
-    // Explicitly include `display: block` to override
-    display: block;
-    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);
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name       | Description                           | Type     | Default value |
-| ---------- | ------------------------------------- | -------- | ------------- |
-| `$span`    | The number of columns covered         | `Number` | —             |
-| `$columns` | The total number of columns available | `Number` | —             |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Used by**:
-  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
-
-### ❌carbon--make-col-offset [mixin]
-
-Create a column offset for a given span and column count.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-col-offset($span, $columns) {
-  $offset: $span / $columns;
-  @if $offset == 0 {
-    margin-left: 0;
-  } @else {
-    margin-left: percentage($offset);
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name       | Description                                   | Type     | Default value |
-| ---------- | --------------------------------------------- | -------- | ------------- |
-| `$span`    | The number of columns the offset should cover | `Number` | —             |
-| `$columns` | The total number of columns available         | `Number` | —             |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Used by**:
-  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
-
-### ❌carbon--make-grid-columns [mixin]
-
-Output the CSS required for all the columns in a given grid system.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-grid-columns(
-  $breakpoints: $carbon--grid-breakpoints,
-  $gutter: $carbon--grid-gutter
-) {
-  .#{$prefix}--col {
-    @include carbon--make-col-ready($gutter);
-  }
-
-  @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 0 through $columns {
-      .#{$prefix}--col#{$infix}-#{$i} {
-        @include carbon--make-col-ready($gutter);
-      }
-    }
-
-    .#{$prefix}--col#{$infix},
-    .#{$prefix}--col#{$infix}--auto {
-      @include carbon--make-col-ready($gutter);
-    }
-
-    @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 0 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);
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name           | Description                        | Type     | Default value               |
-| -------------- | ---------------------------------- | -------- | --------------------------- |
-| `$breakpoints` | The breakpoints in the grid system | `Map`    | `$carbon--grid-breakpoints` |
-| `$gutter`      | The gutter for the grid system     | `Number` | `$carbon--grid-gutter`      |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Requires**:
-  - [carbon--make-col-ready [mixin]](#carbon--make-col-ready-mixin)
-  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
-  - [carbon--make-col [mixin]](#carbon--make-col-mixin)
-  - [carbon--make-col-offset [mixin]](#carbon--make-col-offset-mixin)
-  - [carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
-  - [prefix [variable]](#prefix-variable)
-- **Used by**:
-  - [carbon--grid [mixin]](#carbon--grid-mixin)
-
-### ❌carbon--make-row [mixin]
-
-Define the properties for a selector assigned to a row in the grid system.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -1 * $gutter / 2;
-  margin-left: -1 * $gutter / 2;
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name      | Description                   | Type     | Default value          |
-| --------- | ----------------------------- | -------- | ---------------------- |
-| `$gutter` | The gutter in the grid system | `Number` | `$carbon--grid-gutter` |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Used by**:
-  - [carbon--grid [mixin]](#carbon--grid-mixin)
-
-### ❌carbon--no-gutter [mixin]
-
-Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
-classes are useful for dropping the gutter in fluid situations.
+Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
+classes are useful for dropping the gutter in fluid situations.
 
 <details>
 <summary>Source code</summary>
@@ -4075,6 +1854,7 @@ Generate the CSS for a grid for the given breakpoints and gutters
   - [carbon--hang [mixin]](#carbon--hang-mixin)
   - [carbon--aspect-ratio [mixin]](#carbon--aspect-ratio-mixin)
   - [prefix [variable]](#prefix-variable)
+  - [grid-gutter [variable]](#grid-gutter-variable)
 
 ### ✅prefix [variable]
 
@@ -4259,6 +2039,24 @@ $carbon--grid-gutter: carbon--rem(32px);
 - **Used by**:
   - [carbon--make-container [mixin]](#carbon--make-container-mixin)
 
+### ✅grid-gutter [variable]
+
+Carbon gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-gutter: convert.rem(32px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--grid [mixin]](#carbon--grid-mixin)
+
 ### ✅carbon--grid-gutter--condensed [variable]
 
 Carbon condensed gutter size in rem
@@ -4275,6 +2073,22 @@ $carbon--grid-gutter--condensed: carbon--rem(1px);
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 
+### ✅grid-gutter--condensed [variable]
+
+Carbon condensed gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-gutter--condensed: convert.rem(1px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--grid-breakpoints [variable]
 
 <details>
@@ -4315,6 +2129,46 @@ $carbon--grid-breakpoints: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Map`
 
+### ✅grid-breakpoints [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Map`
+
 ### ✅carbon--breakpoint-next [function]
 
 Get the value of the next breakpoint, or null for the last breakpoint
@@ -4351,6 +2205,40 @@ Get the value of the next breakpoint, or null for the last breakpoint
 - **Used by**:
   - [fluid-type-size [mixin]](#fluid-type-size-mixin)
 
+### ✅breakpoint-next [function]
+
+Get the value of the next breakpoint, or null for the last breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name                | Description                                                                                                     | Type     | Default value            |
+| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
+| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
+| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
+| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
 ### ✅carbon--breakpoint-prev [function]
 
 Get the value of the previous breakpoint, or null for the first breakpoint
@@ -4387,6 +2275,40 @@ Get the value of the previous breakpoint, or null for the first breakpoint
 - **Used by**:
   - [carbon--make-container [mixin]](#carbon--make-container-mixin)
 
+### ✅breakpoint-prev [function]
+
+Get the value of the previous breakpoint, or null for the first breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-prev(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return list.nth($breakpoint-names, $n - 1);
+  }
+  @return null;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name                | Description                                                                                                     | Type     | Default value            |
+| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
+| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
+| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
+| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
 ### ✅carbon--is-smallest-breakpoint [function]
 
 Check to see if the given breakpoint name
@@ -4415,21 +2337,106 @@ Check to see if the given breakpoint name
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Returns**: `Bool`
 - **Used by**:
-  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+
+### ✅is-smallest-breakpoint [function]
+
+Check to see if the given breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @return list.index(map.keys($breakpoints), $name) == 1;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                                                                                     | Type     | Default value       |
+| -------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------- |
+| `$name`        | The name of the brekapoint                                                                                      | `String` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Bool`
+- **Used by**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+
+### ✅carbon--largest-breakpoint-name [function]
+
+Returns the largest breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--largest-breakpoint-name(
+  $breakpoints: $carbon--grid-breakpoints
+) {
+  $total-breakpoints: length($breakpoints);
+  @return carbon--key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type  | Default value               |
+| -------------- | ---------------------------------------------- | ----- | --------------------------- |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+- **Requires**:
+  - [carbon--key-by-index [function]](#carbon--key-by-index-function)
+- **Used by**:
+  - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
+
+### ✅largest-breakpoint-name [function]
+
+Returns the largest breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: list.length($breakpoints);
+  @return key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type  | Default value       |
+| -------------- | ---------------------------------------------- | ----- | ------------------- |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+- **Requires**:
+  - [key-by-index [function]](#key-by-index-function)
+- **Used by**:
+  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
 
-### ✅carbon--largest-breakpoint-name [function]
+### ✅breakpoint-infix [function]
 
-Returns the largest breakpoint name
+Get the infix for a given breakpoint in a list of breakpoints. Usesful for
+generate the size part in a selector, for example: `.prefix--col-sm-2`.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-@function carbon--largest-breakpoint-name(
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  $total-breakpoints: length($breakpoints);
-  @return carbon--key-by-index($breakpoints, $total-breakpoints);
+@function breakpoint-infix($name) {
+  @return '-#{$name}';
 }
 ```
 
@@ -4437,16 +2444,12 @@ Returns the largest breakpoint name
 
 - **Parameters**:
 
-| Name           | Description                                    | Type  | Default value               |
-| -------------- | ---------------------------------------------- | ----- | --------------------------- |
-| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
+| Name    | Description                | Type     | Default value |
+| ------- | -------------------------- | -------- | ------------- |
+| `$name` | The name of the breakpoint | `String` | —             |
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Returns**: `String`
-- **Requires**:
-  - [carbon--key-by-index [function]](#carbon--key-by-index-function)
-- **Used by**:
-  - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
 
 ### ✅carbon--breakpoint-infix [function]
 
@@ -4475,6 +2478,51 @@ generate the size part in a selector, for example: `.prefix--col-sm-2`.
 - **Used by**:
   - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
 
+### ✅breakpoint-up [mixin]
+
+Generate a media query from the width of the given breakpoint to infinity
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width);
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @media (min-width: $width) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
+- **Used by**:
+  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
+  - [breakpoint [mixin]](#breakpoint-mixin)
+
 ### ✅carbon--breakpoint-up [mixin]
 
 Generate a media query from the width of the given breakpoint to infinity
@@ -4521,6 +2569,49 @@ Generate a media query from the width of the given breakpoint to infinity
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [accordion [mixin]](#accordion-mixin)
 
+### ✅breakpoint-down [mixin]
+
+Generate a media query for the maximum width of the given styles
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width) - 0.02;
+    @media (max-width: $width) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Used by**:
+  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
+
 ### ✅carbon--breakpoint-down [mixin]
 
 Generate a media query for the maximum width of the given styles
@@ -4566,6 +2657,55 @@ Generate a media query for the maximum width of the given styles
   - [pagination [mixin]](#pagination-mixin)
   - [carbon-side-nav [mixin]](#carbon-side-nav-mixin)
 
+### ✅breakpoint-between [mixin]
+
+Generate a media query for the range between the lower and upper breakpoints
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $is-number-lower: meta.type-of($lower) == 'number';
+  $is-number-upper: meta.type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
+
+  @if $min and $max {
+    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  } @else if $min != null and $max == null {
+    @include breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include breakpoint-down($upper) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$lower`       | —                                              | `String \| Number` | —                   |
+| `$upper`       | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+  - [breakpoint-down [mixin]](#breakpoint-down-mixin)
+
 ### ✅carbon--breakpoint-between [mixin]
 
 Generate a media query for the range between the lower and upper breakpoints
@@ -4619,6 +2759,34 @@ Generate a media query for the range between the lower and upper breakpoints
   - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
   - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
 
+### ✅largest-breakpoint [mixin]
+
+Generate media query for the largest breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type  | Default value       |
+| -------------- | ---------------------------------------------- | ----- | ------------------- |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint [mixin]](#breakpoint-mixin)
+  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+
 ### ✅carbon--largest-breakpoint [mixin]
 
 Generate media query for the largest breakpoint
@@ -4649,6 +2817,36 @@ Generate media query for the largest breakpoint
 - **Used by**:
   - [carbon--grid [mixin]](#carbon--grid-mixin)
 
+### ✅breakpoint [mixin]
+
+Generate a media query for a given breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @include breakpoint-up($name, $breakpoints) {
+    @content;
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+- **Used by**:
+  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
+
 ### ✅carbon--breakpoint [mixin]
 
 Generate a media query for a given breakpoint
@@ -4895,21 +3093,154 @@ $carbon--base-font-size: 16px;
   - [carbon--rem [function]](#carbon--rem-function)
   - [carbon--em [function]](#carbon--em-function)
 
-### ✅carbon--rem [function]
+### ✅base-font-size [variable]
+
+Default font size
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$base-font-size: 16px;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [rem [function]](#rem-function)
+  - [em [function]](#em-function)
+
+### ✅carbon--rem [function]
+
+Convert a given px unit to a rem unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $carbon--base-font-size) * 1rem;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name  | Description         | Type     | Default value |
+| ----- | ------------------- | -------- | ------------- |
+| `$px` | Number with px unit | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` Number with rem unit
+- **Requires**:
+  - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
+- **Used by**:
+  - [carbon--mini-units [function]](#carbon--mini-units-function)
+  - [toggle [mixin]](#toggle-mixin)
+
+### ✅rem [function]
+
+Convert a given px unit to a rem unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $base-font-size) * 1rem;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name  | Description         | Type     | Default value |
+| ----- | ------------------- | -------- | ------------- |
+| `$px` | Number with px unit | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` Number with rem unit
+- **Requires**:
+  - [base-font-size [variable]](#base-font-size-variable)
+- **Used by**:
+  - [accordion [mixin]](#accordion-mixin)
+  - [breadcrumb [mixin]](#breadcrumb-mixin)
+  - [button [mixin]](#button-mixin)
+  - [button-base [mixin]](#button-base-mixin)
+  - [checkbox [mixin]](#checkbox-mixin)
+  - [snippet [mixin]](#snippet-mixin)
+  - [bx--snippet [mixin]](#bx--snippet-mixin)
+  - [content-switcher [mixin]](#content-switcher-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
+  - [data-table-sort [mixin]](#data-table-sort-mixin)
+  - [date-picker [mixin]](#date-picker-mixin)
+  - [dropdown [mixin]](#dropdown-mixin)
+  - [file-uploader [mixin]](#file-uploader-mixin)
+  - [form [mixin]](#form-mixin)
+  - [inline-loading [mixin]](#inline-loading-mixin)
+  - [lists [mixin]](#lists-mixin)
+  - [listbox [mixin]](#listbox-mixin)
+  - [loading [mixin]](#loading-mixin)
+  - [modal [mixin]](#modal-mixin)
+  - [multiselect [mixin]](#multiselect-mixin)
+  - [inline-notifications [mixin]](#inline-notifications-mixin)
+  - [toast-notifications [mixin]](#toast-notifications-mixin)
+  - [number-input [mixin]](#number-input-mixin)
+  - [overflow-menu [mixin]](#overflow-menu-mixin)
+  - [pagination [mixin]](#pagination-mixin)
+  - [unstable_pagination [mixin]](#unstable_pagination-mixin)
+  - [progress-indicator [mixin]](#progress-indicator-mixin)
+  - [radio-button [mixin]](#radio-button-mixin)
+  - [search [mixin]](#search-mixin)
+  - [select [mixin]](#select-mixin)
+  - [slider [mixin]](#slider-mixin)
+  - [tabs [mixin]](#tabs-mixin)
+  - [tags [mixin]](#tags-mixin)
+  - [text-area [mixin]](#text-area-mixin)
+  - [text-input [mixin]](#text-input-mixin)
+  - [time-picker [mixin]](#time-picker-mixin)
+  - [toggle [mixin]](#toggle-mixin)
+  - [toolbar [mixin]](#toolbar-mixin)
+  - [tooltip--icon [mixin]](#tooltip--icon-mixin)
+  - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
+  - [tooltip [mixin]](#tooltip-mixin)
+  - [treeview [mixin]](#treeview-mixin)
+  - [carbon-header [mixin]](#carbon-header-mixin)
+  - [carbon-navigation [mixin]](#carbon-navigation-mixin)
+  - [carbon-side-nav [mixin]](#carbon-side-nav-mixin)
+  - [carbon-switcher [mixin]](#carbon-switcher-mixin)
+
+### ✅carbon--em [function]
 
-Convert a given px unit to a rem unit
+Convert a given px unit to a em unit
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-@function carbon--rem($px) {
+@function carbon--em($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $carbon--base-font-size) * 1rem;
+  @return ($px / $carbon--base-font-size) * 1em;
 }
 ```
 
@@ -4922,14 +3253,11 @@ Convert a given px unit to a rem unit
 | `$px` | Number with px unit | `Number` | —             |
 
 - **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` Number with rem unit
+- **Returns**: `Number` Number with em unit
 - **Requires**:
   - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
-- **Used by**:
-  - [carbon--mini-units [function]](#carbon--mini-units-function)
-  - [toggle [mixin]](#toggle-mixin)
 
-### ✅carbon--em [function]
+### ✅em [function]
 
 Convert a given px unit to a em unit
 
@@ -4937,13 +3265,13 @@ Convert a given px unit to a em unit
 <summary>Source code</summary>
 
 ```scss
-@function carbon--em($px) {
+@function em($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $carbon--base-font-size) * 1em;
+  @return ($px / $base-font-size) * 1em;
 }
 ```
 
@@ -4958,7 +3286,7 @@ Convert a given px unit to a em unit
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Returns**: `Number` Number with em unit
 - **Requires**:
-  - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
+  - [base-font-size [variable]](#base-font-size-variable)
 
 ### ✅carbon--fluid-spacing-01 [variable]
 
@@ -4976,6 +3304,22 @@ $carbon--fluid-spacing-01: 0;
 - **Aliased**:
   - `fluid-spacing-01`
 
+### ✅fluid-spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-01: 0;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅carbon--fluid-spacing-02 [variable]
 
 <details>
@@ -4992,6 +3336,22 @@ $carbon--fluid-spacing-02: 2vw;
 - **Aliased**:
   - `fluid-spacing-02`
 
+### ✅fluid-spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-02: 2vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅carbon--fluid-spacing-03 [variable]
 
 <details>
@@ -5008,6 +3368,22 @@ $carbon--fluid-spacing-03: 5vw;
 - **Aliased**:
   - `fluid-spacing-03`
 
+### ✅fluid-spacing-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-03: 5vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅carbon--fluid-spacing-04 [variable]
 
 <details>
@@ -5024,6 +3400,22 @@ $carbon--fluid-spacing-04: 10vw;
 - **Aliased**:
   - `fluid-spacing-04`
 
+### ✅fluid-spacing-04 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-04: 10vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅carbon--fluid-spacing [variable]
 
 <details>
@@ -5043,6 +3435,25 @@ $carbon--fluid-spacing: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `List`
 
+### ✅fluid-spacing [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing: (
+  $fluid-spacing-01,
+  $fluid-spacing-02,
+  $fluid-spacing-03,
+  $fluid-spacing-04
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
 ### ✅fluid-spacing-01 [variable]
 
 <details>
@@ -5057,8 +3468,6 @@ $fluid-spacing-01: $carbon--fluid-spacing-01;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-01`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅fluid-spacing-02 [variable]
 
@@ -5074,8 +3483,6 @@ $fluid-spacing-02: $carbon--fluid-spacing-02;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-02`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅fluid-spacing-03 [variable]
 
@@ -5091,8 +3498,6 @@ $fluid-spacing-03: $carbon--fluid-spacing-03;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-03`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅fluid-spacing-04 [variable]
 
@@ -5108,8 +3513,6 @@ $fluid-spacing-04: $carbon--fluid-spacing-04;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-04`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅carbon--icon-size-01 [variable]
 
@@ -5651,6 +4054,23 @@ $carbon--spacing-01: 0.125rem;
   - [search [mixin]](#search-mixin)
   - [time-picker [mixin]](#time-picker-mixin)
 
+### ✅spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-01: 0.125rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+
 ### ✅carbon--spacing-02 [variable]
 
 <details>
@@ -5677,6 +4097,24 @@ $carbon--spacing-02: 0.25rem;
   - [tags [mixin]](#tags-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
 
+### ✅spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-02: 0.25rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [modal [mixin]](#modal-mixin)
+  - [tags [mixin]](#tags-mixin)
+
 ### ✅carbon--spacing-03 [variable]
 
 <details>
@@ -5714,6 +4152,34 @@ $carbon--spacing-03: 0.5rem;
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
 
+### ✅spacing-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-03: 0.5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [accordion [mixin]](#accordion-mixin)
+  - [snippet [mixin]](#snippet-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+  - [data-table-sort [mixin]](#data-table-sort-mixin)
+  - [modal [mixin]](#modal-mixin)
+  - [multiselect [mixin]](#multiselect-mixin)
+  - [select [mixin]](#select-mixin)
+  - [tabs [mixin]](#tabs-mixin)
+  - [tooltip [mixin]](#tooltip-mixin)
+  - [treeview [mixin]](#treeview-mixin)
+  - [carbon-switcher [mixin]](#carbon-switcher-mixin)
+
 ### ✅carbon--spacing-04 [variable]
 
 <details>
@@ -5735,6 +4201,24 @@ $carbon--spacing-04: 0.75rem;
   - [text-area [mixin]](#text-area-mixin)
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
 
+### ✅spacing-04 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-04: 0.75rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+  - [tabs [mixin]](#tabs-mixin)
+
 ### ✅carbon--spacing-05 [variable]
 
 <details>
@@ -5780,6 +4264,36 @@ $carbon--spacing-05: 1rem;
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
 
+### ✅spacing-05 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-05: 1rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [accordion [mixin]](#accordion-mixin)
+  - [checkbox [mixin]](#checkbox-mixin)
+  - [snippet [mixin]](#snippet-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
+  - [modal [mixin]](#modal-mixin)
+  - [multiselect [mixin]](#multiselect-mixin)
+  - [pagination [mixin]](#pagination-mixin)
+  - [search [mixin]](#search-mixin)
+  - [select [mixin]](#select-mixin)
+  - [tabs [mixin]](#tabs-mixin)
+  - [treeview [mixin]](#treeview-mixin)
+  - [carbon-switcher [mixin]](#carbon-switcher-mixin)
+
 ### ✅carbon--spacing-06 [variable]
 
 <details>
@@ -5803,6 +4317,24 @@ $carbon--spacing-06: 1.5rem;
   - [progress-indicator [mixin]](#progress-indicator-mixin)
   - [padding-td [mixin]](#padding-td-mixin)
 
+### ✅spacing-06 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-06: 1.5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+
 ### ✅carbon--spacing-07 [variable]
 
 <details>
@@ -5827,6 +4359,27 @@ $carbon--spacing-07: 2rem;
   - [progress-indicator [mixin]](#progress-indicator-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
 
+### ✅spacing-07 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-07: 2rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [modal [mixin]](#modal-mixin)
+  - [search [mixin]](#search-mixin)
+  - [select [mixin]](#select-mixin)
+  - [treeview [mixin]](#treeview-mixin)
+  - [carbon-switcher [mixin]](#carbon-switcher-mixin)
+
 ### ✅carbon--spacing-08 [variable]
 
 <details>
@@ -5852,6 +4405,25 @@ $carbon--spacing-08: 2.5rem;
   - [text-area [mixin]](#text-area-mixin)
   - [text-input [mixin]](#text-input-mixin)
 
+### ✅spacing-08 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-08: 2.5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [dropdown [mixin]](#dropdown-mixin)
+  - [search [mixin]](#search-mixin)
+  - [treeview [mixin]](#treeview-mixin)
+
 ### ✅carbon--spacing-09 [variable]
 
 <details>
@@ -5879,6 +4451,28 @@ $carbon--spacing-09: 3rem;
   - [tabs [mixin]](#tabs-mixin)
   - [tile [mixin]](#tile-mixin)
 
+### ✅spacing-09 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-09: 3rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
+  - [modal [mixin]](#modal-mixin)
+  - [search [mixin]](#search-mixin)
+  - [select [mixin]](#select-mixin)
+  - [tabs [mixin]](#tabs-mixin)
+  - [carbon-side-nav [mixin]](#carbon-side-nav-mixin)
+
 ### ✅carbon--spacing-10 [variable]
 
 <details>
@@ -5895,6 +4489,22 @@ $carbon--spacing-10: 4rem;
 - **Aliased**:
   - `spacing-10`
 
+### ✅spacing-10 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-10: 4rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅carbon--spacing-11 [variable]
 
 <details>
@@ -5911,6 +4521,22 @@ $carbon--spacing-11: 5rem;
 - **Aliased**:
   - `spacing-11`
 
+### ✅spacing-11 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-11: 5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅carbon--spacing-12 [variable]
 
 <details>
@@ -5927,6 +4553,22 @@ $carbon--spacing-12: 6rem;
 - **Aliased**:
   - `spacing-12`
 
+### ✅spacing-12 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-12: 6rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅carbon--spacing [variable]
 
 <details>
@@ -5954,6 +4596,33 @@ $carbon--spacing: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `List`
 
+### ✅spacing [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing: (
+  $spacing-01,
+  $spacing-02,
+  $spacing-03,
+  $spacing-04,
+  $spacing-05,
+  $spacing-06,
+  $spacing-07,
+  $spacing-08,
+  $spacing-09,
+  $spacing-10,
+  $spacing-11,
+  $spacing-12
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
 ### ✅spacing-01 [variable]
 
 <details>
@@ -5968,9 +4637,6 @@ $spacing-01: $carbon--spacing-01;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-01`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
 
 ### ✅spacing-02 [variable]
 
@@ -5986,10 +4652,6 @@ $spacing-02: $carbon--spacing-02;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-02`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [modal [mixin]](#modal-mixin)
-  - [tags [mixin]](#tags-mixin)
 
 ### ✅spacing-03 [variable]
 
@@ -6005,20 +4667,6 @@ $spacing-03: $carbon--spacing-03;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-03`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [accordion [mixin]](#accordion-mixin)
-  - [snippet [mixin]](#snippet-mixin)
-  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
-  - [data-table-sort [mixin]](#data-table-sort-mixin)
-  - [modal [mixin]](#modal-mixin)
-  - [multiselect [mixin]](#multiselect-mixin)
-  - [select [mixin]](#select-mixin)
-  - [tabs [mixin]](#tabs-mixin)
-  - [tooltip [mixin]](#tooltip-mixin)
-  - [treeview [mixin]](#treeview-mixin)
-  - [carbon-switcher [mixin]](#carbon-switcher-mixin)
 
 ### ✅spacing-04 [variable]
 
@@ -6034,10 +4682,6 @@ $spacing-04: $carbon--spacing-04;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-04`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
-  - [tabs [mixin]](#tabs-mixin)
 
 ### ✅spacing-05 [variable]
 
@@ -6053,22 +4697,6 @@ $spacing-05: $carbon--spacing-05;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-05`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [accordion [mixin]](#accordion-mixin)
-  - [checkbox [mixin]](#checkbox-mixin)
-  - [snippet [mixin]](#snippet-mixin)
-  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
-  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
-  - [modal [mixin]](#modal-mixin)
-  - [multiselect [mixin]](#multiselect-mixin)
-  - [pagination [mixin]](#pagination-mixin)
-  - [search [mixin]](#search-mixin)
-  - [select [mixin]](#select-mixin)
-  - [tabs [mixin]](#tabs-mixin)
-  - [treeview [mixin]](#treeview-mixin)
-  - [carbon-switcher [mixin]](#carbon-switcher-mixin)
 
 ### ✅spacing-06 [variable]
 
@@ -6084,10 +4712,6 @@ $spacing-06: $carbon--spacing-06;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-06`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
 
 ### ✅spacing-07 [variable]
 
@@ -6103,13 +4727,6 @@ $spacing-07: $carbon--spacing-07;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-07`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [modal [mixin]](#modal-mixin)
-  - [search [mixin]](#search-mixin)
-  - [select [mixin]](#select-mixin)
-  - [treeview [mixin]](#treeview-mixin)
-  - [carbon-switcher [mixin]](#carbon-switcher-mixin)
 
 ### ✅spacing-08 [variable]
 
@@ -6125,11 +4742,6 @@ $spacing-08: $carbon--spacing-08;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-08`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [dropdown [mixin]](#dropdown-mixin)
-  - [search [mixin]](#search-mixin)
-  - [treeview [mixin]](#treeview-mixin)
 
 ### ✅spacing-09 [variable]
 
@@ -6145,14 +4757,6 @@ $spacing-09: $carbon--spacing-09;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-09`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
-  - [modal [mixin]](#modal-mixin)
-  - [search [mixin]](#search-mixin)
-  - [select [mixin]](#select-mixin)
-  - [tabs [mixin]](#tabs-mixin)
-  - [carbon-side-nav [mixin]](#carbon-side-nav-mixin)
 
 ### ✅spacing-10 [variable]
 
@@ -6168,8 +4772,6 @@ $spacing-10: $carbon--spacing-10;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-10`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-11 [variable]
 
@@ -6185,8 +4787,6 @@ $spacing-11: $carbon--spacing-11;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-11`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-12 [variable]
 
@@ -6202,8 +4802,34 @@ $spacing-12: $carbon--spacing-12;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-12`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅map-deep-get [function]
+
+Map deep get
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name    | Description | Type      | Default value |
+| ------- | ----------- | --------- | ------------- |
+| `$map`  | Map         | `Map`     | —             |
+| `$keys` | Key chain   | `Arglist` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `*` Desired value
 
 ### ✅map-deep-get [function]
 
@@ -6262,6 +4888,34 @@ Provide a map and index, and get back the relevant key value
   - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
   - [last-map-item [function]](#last-map-item-function)
 
+### ✅key-by-index [function]
+
+Provide a map and index, and get back the relevant key value
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function key-by-index($map, $index) {
+  $keys: map-keys($map);
+  @return nth($keys, $index);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name     | Description | Type      | Default value |
+| -------- | ----------- | --------- | ------------- |
+| `$map`   | Map         | `Map`     | —             |
+| `$index` | Key chain   | `Integer` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String` Desired value
+- **Used by**:
+  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+
 ### ✅last-map-item [function]
 
 Pass in a map, and get the last one in the list back
@@ -6291,6 +4945,33 @@ Pass in a map, and get the last one in the list back
 - **Used by**:
   - [carbon--set-largest-breakpoint [mixin]](#carbon--set-largest-breakpoint-mixin)
 
+### ✅last-map-item [function]
+
+Pass in a map, and get the last one in the list back
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function last-map-item($map) {
+  $total-length: length($map);
+  @return map-get($map, carbon--key-by-index($map, $total-length));
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name   | Description | Type  | Default value |
+| ------ | ----------- | ----- | ------------- |
+| `$map` | Map         | `Map` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `*` Desired value
+- **Requires**:
+  - [carbon--key-by-index [function]](#carbon--key-by-index-function)
+
 ## @carbon/motion
 
 ### ✅carbon--easings [variable]
@@ -16251,6 +14932,7 @@ Accordion styles
 - **Group**: [accordion](#accordion)
 - **Requires**:
   - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [text-01 [variable]](#text-01-variable)
@@ -16345,6 +15027,7 @@ Breadcrumb styles
 - **Group**: [breadcrumb](#breadcrumb)
 - **Requires**:
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [link-01 [variable]](#link-01-variable)
@@ -16795,6 +15478,7 @@ Button styles
 - **Requires**:
   - [button-base [mixin]](#button-base-mixin)
   - [button-theme [mixin]](#button-theme-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [interactive-01 [variable]](#interactive-01-variable)
   - [text-04 [variable]](#text-04-variable)
@@ -16881,6 +15565,7 @@ Button base styles
 
 - **Group**: [button](#button)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [disabled-03 [variable]](#disabled-03-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
@@ -17143,6 +15828,7 @@ Checkbox styles
 
 - **Group**: [checkbox](#checkbox)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
   - [carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
@@ -17744,6 +16430,7 @@ Code snippet styles
 - **Requires**:
   - [bx--snippet [mixin]](#bx--snippet-mixin)
   - [carbon--font-family [mixin]](#carbon--font-family-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
   - [disabled-01 [variable]](#disabled-01-variable)
@@ -17786,6 +16473,7 @@ Code snippet base styles
 
 - **Group**: [code-snippet](#code-snippet)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [field-01 [variable]](#field-01-variable)
 - **Used by**:
   - [snippet [mixin]](#snippet-mixin)
@@ -18019,6 +16707,7 @@ Content switcher styles
 
 - **Group**: [content-switcher](#content-switcher)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -18653,6 +17342,7 @@ Data table action styles
 
 - **Group**: [data-table](#data-table)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [layout-04 [variable]](#layout-04-variable)
   - [ui-01 [variable]](#ui-01-variable)
@@ -19414,6 +18104,7 @@ Data table core styles
 - **Group**: [data-table](#data-table)
 - **Requires**:
   - [text-overflow [mixin]](#text-overflow-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [spacing-01 [variable]](#spacing-01-variable)
   - [spacing-05 [variable]](#spacing-05-variable)
@@ -19828,6 +18519,7 @@ Data table expandable styles
 
 - **Group**: [data-table](#data-table)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [spacing-05 [variable]](#spacing-05-variable)
@@ -20058,6 +18750,7 @@ Data table sort styles
 
 - **Group**: [data-table](#data-table)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [layout-04 [variable]](#layout-04-variable)
   - [text-01 [variable]](#text-01-variable)
@@ -20258,6 +18951,7 @@ Date picker styles
 
 - **Group**: [date-picker](#date-picker)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [field-02 [variable]](#field-02-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -20743,6 +19437,7 @@ Dropdown styles
 
 - **Group**: [dropdown](#dropdown)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [text-01 [variable]](#text-01-variable)
   - [field-01 [variable]](#field-01-variable)
@@ -21098,6 +19793,7 @@ File uploader styles
 
 - **Group**: [file-uploader](#file-uploader)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [support-01 [variable]](#support-01-variable)
@@ -21290,6 +19986,7 @@ Form styles
 
 - **Group**: [form](#form)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [carbon--font-family [function]](#carbon--font-family-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
@@ -21402,6 +20099,7 @@ Inline loading styles
 
 - **Group**: [inline-loading](#inline-loading)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [loading--small\_\_gap [variable]](#loading--small__gap-variable)
   - [text-02 [variable]](#text-02-variable)
@@ -21592,6 +20290,7 @@ List styles
 
 - **Group**: [list](#list)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [text-01 [variable]](#text-01-variable)
   - [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
@@ -22449,6 +21148,7 @@ List box styles
 - **Group**: [list-box](#list-box)
 - **Requires**:
   - [tag-theme [mixin]](#tag-theme-mixin)
+  - [rem [function]](#rem-function)
   - [carbon--mini-units [function]](#carbon--mini-units-function)
   - [prefix [variable]](#prefix-variable)
   - [list-box-width [variable]](#list-box-width-variable)
@@ -22566,6 +21266,7 @@ Loading styles
 - **Requires**:
   - [animation\_\_loading--spin [mixin]](#animation__loading--spin-mixin)
   - [animation\_\_loading--stop [mixin]](#animation__loading--stop-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [loading\_\_size [variable]](#loading__size-variable)
   - [interactive-04 [variable]](#interactive-04-variable)
@@ -23055,6 +21756,7 @@ Modal styles
 - **Group**: [modal](#modal)
 - **Requires**:
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [overlay-01 [variable]](#overlay-01-variable)
   - [field-02 [variable]](#field-02-variable)
@@ -23152,6 +21854,7 @@ Multi select styles
 
 - **Group**: [multi-select](#multi-select)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [text-01 [variable]](#text-01-variable)
   - [spacing-03 [variable]](#spacing-03-variable)
@@ -23475,6 +22178,7 @@ Inline notification styles
 - **Requires**:
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [notification--experimental [mixin]](#notification--experimental-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
@@ -23778,6 +22482,7 @@ Toast notification styles
 - **Requires**:
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [notification--experimental [mixin]](#notification--experimental-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -24090,6 +22795,7 @@ Number input styles
 
 - **Group**: [number-input](#number-input)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [carbon--font-family [function]](#carbon--font-family-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
@@ -24448,6 +23154,7 @@ Overflow menu styles
 
 - **Group**: [overflow-menu](#overflow-menu)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [hover-ui [variable]](#hover-ui-variable)
   - [field-01 [variable]](#field-01-variable)
@@ -24672,6 +23379,7 @@ Pagination styles
 - **Requires**:
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [ui-01 [variable]](#ui-01-variable)
   - [ui-03 [variable]](#ui-03-variable)
@@ -24857,6 +23565,7 @@ Unstable pagination styles
 - **Requires**:
   - [carbon--type-style [mixin]](#carbon--type-style-mixin)
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [rem [function]](#rem-function)
   - [carbon--mini-units [function]](#carbon--mini-units-function)
   - [prefix [variable]](#prefix-variable)
   - [ui-01 [variable]](#ui-01-variable)
@@ -25397,6 +24106,7 @@ Progress indicator styles
 
 - **Group**: [progress-indicator](#progress-indicator)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
@@ -25595,6 +24305,7 @@ Radio button styles
 
 - **Group**: [radio-button](#radio-button)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [carbon--mini-units [function]](#carbon--mini-units-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
@@ -25876,6 +24587,7 @@ Search styles
 
 - **Group**: [search](#search)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
   - [text-01 [variable]](#text-01-variable)
@@ -26140,6 +24852,7 @@ Select styles
 
 - **Group**: [select](#select)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [carbon--mini-units [function]](#carbon--mini-units-function)
   - [prefix [variable]](#prefix-variable)
   - [spacing-09 [variable]](#spacing-09-variable)
@@ -26390,6 +25103,7 @@ Slider styles
 
 - **Group**: [slider](#slider)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [text-01 [variable]](#text-01-variable)
@@ -27332,6 +26046,7 @@ Tabs styles
 - **Group**: [tabs](#tabs)
 - **Requires**:
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [text-01 [variable]](#text-01-variable)
   - [spacing-09 [variable]](#spacing-09-variable)
@@ -27612,6 +26327,7 @@ Tag styles
 - **Group**: [tag](#tag)
 - **Requires**:
   - [tag-theme [mixin]](#tag-theme-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
@@ -27723,6 +26439,7 @@ Text area styles
 
 - **Group**: [text-area](#text-area)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [text-01 [variable]](#text-01-variable)
@@ -28051,6 +26768,7 @@ Text input styles
 
 - **Group**: [text-input](#text-input)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [text-01 [variable]](#text-01-variable)
@@ -28370,6 +27088,7 @@ Time picker styles
 
 - **Group**: [time-picker](#time-picker)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
   - [field-02 [variable]](#field-02-variable)
@@ -28852,6 +27571,7 @@ Toggle styles
 - **Group**: [toggle](#toggle)
 - **Requires**:
   - [carbon--rem [function]](#carbon--rem-function)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [ui-04 [variable]](#ui-04-variable)
@@ -28996,6 +27716,7 @@ Toolbar styles
 
 - **Group**: [toolbar](#toolbar)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [text-02 [variable]](#text-02-variable)
   - [field-02 [variable]](#field-02-variable)
@@ -29078,6 +27799,7 @@ Toolbar styles
 
 - **Group**: [tooltip](#tooltip)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [inverse-02 [variable]](#inverse-02-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
 - **Used by**:
@@ -29271,6 +27993,7 @@ Toolbar styles
 
 - **Group**: [tooltip](#tooltip)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [text-01 [variable]](#text-01-variable)
   - [interactive-01 [variable]](#interactive-01-variable)
@@ -29767,6 +28490,7 @@ Tooltip styles
   - [carbon--type-style [mixin]](#carbon--type-style-mixin)
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
   - [tooltip--icon--legacy [mixin]](#tooltip--icon--legacy-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [text-02 [variable]](#text-02-variable)
   - [icon-02 [variable]](#icon-02-variable)
@@ -29923,6 +28647,7 @@ Treeview styles
 
 - **Group**: [treeview](#treeview)
 - **Requires**:
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [spacing-05 [variable]](#spacing-05-variable)
   - [text-02 [variable]](#text-02-variable)
@@ -30424,6 +29149,7 @@ UI shell header
 - **Requires**:
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [mini-units [function]](#mini-units-function)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [shell-header-bg-01 [variable]](#shell-header-bg-01-variable)
   - [shell-header-border-01 [variable]](#shell-header-border-01-variable)
@@ -30653,6 +29379,7 @@ UI shell navigation
 - **Group**: [ui-shell](#ui-shell)
 - **Requires**:
   - [mini-units [function]](#mini-units-function)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
 
 ### ❌product-switcher [mixin]
@@ -31569,6 +30296,7 @@ UI shell side nav
   - [expanded [mixin]](#expanded-mixin)
   - [text-overflow [mixin]](#text-overflow-mixin)
   - [mini-units [function]](#mini-units-function)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [shell-side-nav-text-01 [variable]](#shell-side-nav-text-01-variable)
   - [shell-side-nav-bg-01 [variable]](#shell-side-nav-bg-01-variable)
@@ -31657,6 +30385,7 @@ UI shell side nav
 - **Group**: [ui-shell](#ui-shell)
 - **Requires**:
   - [carbon--type-style [mixin]](#carbon--type-style-mixin)
+  - [rem [function]](#rem-function)
   - [prefix [variable]](#prefix-variable)
   - [shell-panel-text-01 [variable]](#shell-panel-text-01-variable)
   - [spacing-07 [variable]](#spacing-07-variable)
diff --git a/packages/components/package.json b/packages/components/package.json
index d737712f2b6e..b23303d45288 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -49,7 +49,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "./tools/copy-vendor-styles.sh && gulp build && carbon-cli check \"scss/**/*.scss\" && yarn docs",
+    "build": "./tools/copy-vendor-styles.sh && gulp build && carbon-cli check \"scss/**/*.scss\" -i \"**/vendor/**\" && yarn docs",
     "build-dev": "gulp build:dev",
     "build-dev-rollup": "gulp build:dev:deploy --rollup --use-custom-properties",
     "clean": "gulp clean",
@@ -111,7 +111,7 @@
     "css-loader": "^3.4.2",
     "custom-event": "^1.0.0",
     "del": "~2.0.2",
-    "diff": "^3.4.0",
+    "diff": "^5.0.0",
     "express-handlebars": "^3.0.0",
     "fancy-log": "^1.3.0",
     "fibers": "^4.0.1",
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index fdae5978371f..6bb421129ec2 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -11,118 +11,6 @@
 - [@carbon/colors](#carboncolors)
   - [✅⚠️ibm--colors [mixin]](#ibm--colors-mixin)
   - [✅carbon--colors [mixin]](#carbon--colors-mixin)
-  - [✅black [variable]](#black-variable)
-  - [✅white [variable]](#white-variable)
-  - [✅black-100 [variable]](#black-100-variable)
-  - [✅blue-10 [variable]](#blue-10-variable)
-  - [✅blue-20 [variable]](#blue-20-variable)
-  - [✅blue-30 [variable]](#blue-30-variable)
-  - [✅blue-40 [variable]](#blue-40-variable)
-  - [✅blue-50 [variable]](#blue-50-variable)
-  - [✅blue-60 [variable]](#blue-60-variable)
-  - [✅blue-70 [variable]](#blue-70-variable)
-  - [✅blue-80 [variable]](#blue-80-variable)
-  - [✅blue-90 [variable]](#blue-90-variable)
-  - [✅blue-100 [variable]](#blue-100-variable)
-  - [✅cool-gray-10 [variable]](#cool-gray-10-variable)
-  - [✅cool-gray-20 [variable]](#cool-gray-20-variable)
-  - [✅cool-gray-30 [variable]](#cool-gray-30-variable)
-  - [✅cool-gray-40 [variable]](#cool-gray-40-variable)
-  - [✅cool-gray-50 [variable]](#cool-gray-50-variable)
-  - [✅cool-gray-60 [variable]](#cool-gray-60-variable)
-  - [✅cool-gray-70 [variable]](#cool-gray-70-variable)
-  - [✅cool-gray-80 [variable]](#cool-gray-80-variable)
-  - [✅cool-gray-90 [variable]](#cool-gray-90-variable)
-  - [✅cool-gray-100 [variable]](#cool-gray-100-variable)
-  - [✅cyan-10 [variable]](#cyan-10-variable)
-  - [✅cyan-20 [variable]](#cyan-20-variable)
-  - [✅cyan-30 [variable]](#cyan-30-variable)
-  - [✅cyan-40 [variable]](#cyan-40-variable)
-  - [✅cyan-50 [variable]](#cyan-50-variable)
-  - [✅cyan-60 [variable]](#cyan-60-variable)
-  - [✅cyan-70 [variable]](#cyan-70-variable)
-  - [✅cyan-80 [variable]](#cyan-80-variable)
-  - [✅cyan-90 [variable]](#cyan-90-variable)
-  - [✅cyan-100 [variable]](#cyan-100-variable)
-  - [✅gray-10 [variable]](#gray-10-variable)
-  - [✅gray-20 [variable]](#gray-20-variable)
-  - [✅gray-30 [variable]](#gray-30-variable)
-  - [✅gray-40 [variable]](#gray-40-variable)
-  - [✅gray-50 [variable]](#gray-50-variable)
-  - [✅gray-60 [variable]](#gray-60-variable)
-  - [✅gray-70 [variable]](#gray-70-variable)
-  - [✅gray-80 [variable]](#gray-80-variable)
-  - [✅gray-90 [variable]](#gray-90-variable)
-  - [✅gray-100 [variable]](#gray-100-variable)
-  - [✅green-10 [variable]](#green-10-variable)
-  - [✅green-20 [variable]](#green-20-variable)
-  - [✅green-30 [variable]](#green-30-variable)
-  - [✅green-40 [variable]](#green-40-variable)
-  - [✅green-50 [variable]](#green-50-variable)
-  - [✅green-60 [variable]](#green-60-variable)
-  - [✅green-70 [variable]](#green-70-variable)
-  - [✅green-80 [variable]](#green-80-variable)
-  - [✅green-90 [variable]](#green-90-variable)
-  - [✅green-100 [variable]](#green-100-variable)
-  - [✅magenta-10 [variable]](#magenta-10-variable)
-  - [✅magenta-20 [variable]](#magenta-20-variable)
-  - [✅magenta-30 [variable]](#magenta-30-variable)
-  - [✅magenta-40 [variable]](#magenta-40-variable)
-  - [✅magenta-50 [variable]](#magenta-50-variable)
-  - [✅magenta-60 [variable]](#magenta-60-variable)
-  - [✅magenta-70 [variable]](#magenta-70-variable)
-  - [✅magenta-80 [variable]](#magenta-80-variable)
-  - [✅magenta-90 [variable]](#magenta-90-variable)
-  - [✅magenta-100 [variable]](#magenta-100-variable)
-  - [✅orange-40 [variable]](#orange-40-variable)
-  - [✅orange-60 [variable]](#orange-60-variable)
-  - [✅orange-70 [variable]](#orange-70-variable)
-  - [✅purple-10 [variable]](#purple-10-variable)
-  - [✅purple-20 [variable]](#purple-20-variable)
-  - [✅purple-30 [variable]](#purple-30-variable)
-  - [✅purple-40 [variable]](#purple-40-variable)
-  - [✅purple-50 [variable]](#purple-50-variable)
-  - [✅purple-60 [variable]](#purple-60-variable)
-  - [✅purple-70 [variable]](#purple-70-variable)
-  - [✅purple-80 [variable]](#purple-80-variable)
-  - [✅purple-90 [variable]](#purple-90-variable)
-  - [✅purple-100 [variable]](#purple-100-variable)
-  - [✅red-10 [variable]](#red-10-variable)
-  - [✅red-20 [variable]](#red-20-variable)
-  - [✅red-30 [variable]](#red-30-variable)
-  - [✅red-40 [variable]](#red-40-variable)
-  - [✅red-50 [variable]](#red-50-variable)
-  - [✅red-60 [variable]](#red-60-variable)
-  - [✅red-70 [variable]](#red-70-variable)
-  - [✅red-80 [variable]](#red-80-variable)
-  - [✅red-90 [variable]](#red-90-variable)
-  - [✅red-100 [variable]](#red-100-variable)
-  - [✅teal-10 [variable]](#teal-10-variable)
-  - [✅teal-20 [variable]](#teal-20-variable)
-  - [✅teal-30 [variable]](#teal-30-variable)
-  - [✅teal-40 [variable]](#teal-40-variable)
-  - [✅teal-50 [variable]](#teal-50-variable)
-  - [✅teal-60 [variable]](#teal-60-variable)
-  - [✅teal-70 [variable]](#teal-70-variable)
-  - [✅teal-80 [variable]](#teal-80-variable)
-  - [✅teal-90 [variable]](#teal-90-variable)
-  - [✅teal-100 [variable]](#teal-100-variable)
-  - [✅warm-gray-10 [variable]](#warm-gray-10-variable)
-  - [✅warm-gray-20 [variable]](#warm-gray-20-variable)
-  - [✅warm-gray-30 [variable]](#warm-gray-30-variable)
-  - [✅warm-gray-40 [variable]](#warm-gray-40-variable)
-  - [✅warm-gray-50 [variable]](#warm-gray-50-variable)
-  - [✅warm-gray-60 [variable]](#warm-gray-60-variable)
-  - [✅warm-gray-70 [variable]](#warm-gray-70-variable)
-  - [✅warm-gray-80 [variable]](#warm-gray-80-variable)
-  - [✅warm-gray-90 [variable]](#warm-gray-90-variable)
-  - [✅warm-gray-100 [variable]](#warm-gray-100-variable)
-  - [✅white-0 [variable]](#white-0-variable)
-  - [✅yellow-20 [variable]](#yellow-20-variable)
-  - [✅yellow-30 [variable]](#yellow-30-variable)
-  - [✅yellow-40 [variable]](#yellow-40-variable)
-  - [✅yellow-50 [variable]](#yellow-50-variable)
-  - [✅colors [variable]](#colors-variable)
 - [@carbon/grid](#carbongrid)
   - [✅carbon--12-column-grid [variable]](#carbon--12-column-grid-variable)
   - [❌carbon--make-col-ready [mixin]](#carbon--make-col-ready-mixin)
@@ -146,17 +34,30 @@
   - [✅exports [mixin]](#exports-mixin)
 - [@carbon/layout](#carbonlayout)
   - [✅carbon--grid-gutter [variable]](#carbon--grid-gutter-variable)
+  - [✅grid-gutter [variable]](#grid-gutter-variable)
   - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable)
+  - [✅grid-gutter--condensed [variable]](#grid-gutter--condensed-variable)
   - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable)
+  - [✅grid-breakpoints [variable]](#grid-breakpoints-variable)
   - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function)
+  - [✅breakpoint-next [function]](#breakpoint-next-function)
   - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function)
+  - [✅breakpoint-prev [function]](#breakpoint-prev-function)
   - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
+  - [✅is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
   - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
+  - [✅largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+  - [✅breakpoint-infix [function]](#breakpoint-infix-function)
   - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
+  - [✅breakpoint-up [mixin]](#breakpoint-up-mixin)
   - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [✅breakpoint-down [mixin]](#breakpoint-down-mixin)
   - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
+  - [✅breakpoint-between [mixin]](#breakpoint-between-mixin)
   - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
+  - [✅largest-breakpoint [mixin]](#largest-breakpoint-mixin)
   - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
+  - [✅breakpoint [mixin]](#breakpoint-mixin)
   - [✅carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [✅carbon--container-01 [variable]](#carbon--container-01-variable)
   - [✅carbon--container-02 [variable]](#carbon--container-02-variable)
@@ -170,13 +71,21 @@
   - [✅container-04 [variable]](#container-04-variable)
   - [✅container-05 [variable]](#container-05-variable)
   - [✅carbon--base-font-size [variable]](#carbon--base-font-size-variable)
+  - [✅base-font-size [variable]](#base-font-size-variable)
   - [✅carbon--rem [function]](#carbon--rem-function)
+  - [✅rem [function]](#rem-function)
   - [✅carbon--em [function]](#carbon--em-function)
+  - [✅em [function]](#em-function)
   - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable)
+  - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
   - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable)
+  - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
   - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable)
+  - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
   - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable)
+  - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable)
   - [✅carbon--fluid-spacing [variable]](#carbon--fluid-spacing-variable)
+  - [✅fluid-spacing [variable]](#fluid-spacing-variable)
   - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
   - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
   - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
@@ -207,18 +116,31 @@
   - [✅carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
   - [✅carbon--mini-units [function]](#carbon--mini-units-function)
   - [✅carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
+  - [✅spacing-01 [variable]](#spacing-01-variable)
   - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
+  - [✅spacing-02 [variable]](#spacing-02-variable)
   - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+  - [✅spacing-03 [variable]](#spacing-03-variable)
   - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
+  - [✅spacing-04 [variable]](#spacing-04-variable)
   - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
+  - [✅spacing-05 [variable]](#spacing-05-variable)
   - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
+  - [✅spacing-06 [variable]](#spacing-06-variable)
   - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
+  - [✅spacing-07 [variable]](#spacing-07-variable)
   - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
+  - [✅spacing-08 [variable]](#spacing-08-variable)
   - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
+  - [✅spacing-09 [variable]](#spacing-09-variable)
   - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable)
+  - [✅spacing-10 [variable]](#spacing-10-variable)
   - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable)
+  - [✅spacing-11 [variable]](#spacing-11-variable)
   - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable)
+  - [✅spacing-12 [variable]](#spacing-12-variable)
   - [✅carbon--spacing [variable]](#carbon--spacing-variable)
+  - [✅spacing [variable]](#spacing-variable)
   - [✅spacing-01 [variable]](#spacing-01-variable)
   - [✅spacing-02 [variable]](#spacing-02-variable)
   - [✅spacing-03 [variable]](#spacing-03-variable)
@@ -232,7 +154,10 @@
   - [✅spacing-11 [variable]](#spacing-11-variable)
   - [✅spacing-12 [variable]](#spacing-12-variable)
   - [✅map-deep-get [function]](#map-deep-get-function)
+  - [✅map-deep-get [function]](#map-deep-get-function)
   - [✅carbon--key-by-index [function]](#carbon--key-by-index-function)
+  - [✅key-by-index [function]](#key-by-index-function)
+  - [✅last-map-item [function]](#last-map-item-function)
   - [✅last-map-item [function]](#last-map-item-function)
 - [@carbon/motion](#carbonmotion)
   - [✅carbon--easings [variable]](#carbon--easings-variable)
@@ -1130,2434 +1055,288 @@ Define color variables
 </details>
 
 - **Group**: [@carbon/colors](#carboncolors)
-- **Requires**:
-  - [black-100 [variable]](#black-100-variable)
-  - [blue-10 [variable]](#blue-10-variable)
-  - [blue-20 [variable]](#blue-20-variable)
-  - [blue-30 [variable]](#blue-30-variable)
-  - [blue-40 [variable]](#blue-40-variable)
-  - [blue-50 [variable]](#blue-50-variable)
-  - [blue-60 [variable]](#blue-60-variable)
-  - [blue-70 [variable]](#blue-70-variable)
-  - [blue-80 [variable]](#blue-80-variable)
-  - [blue-90 [variable]](#blue-90-variable)
-  - [blue-100 [variable]](#blue-100-variable)
-  - [cool-gray-10 [variable]](#cool-gray-10-variable)
-  - [cool-gray-20 [variable]](#cool-gray-20-variable)
-  - [cool-gray-30 [variable]](#cool-gray-30-variable)
-  - [cool-gray-40 [variable]](#cool-gray-40-variable)
-  - [cool-gray-50 [variable]](#cool-gray-50-variable)
-  - [cool-gray-60 [variable]](#cool-gray-60-variable)
-  - [cool-gray-70 [variable]](#cool-gray-70-variable)
-  - [cool-gray-80 [variable]](#cool-gray-80-variable)
-  - [cool-gray-90 [variable]](#cool-gray-90-variable)
-  - [cool-gray-100 [variable]](#cool-gray-100-variable)
-  - [cyan-10 [variable]](#cyan-10-variable)
-  - [cyan-20 [variable]](#cyan-20-variable)
-  - [cyan-30 [variable]](#cyan-30-variable)
-  - [cyan-40 [variable]](#cyan-40-variable)
-  - [cyan-50 [variable]](#cyan-50-variable)
-  - [cyan-60 [variable]](#cyan-60-variable)
-  - [cyan-70 [variable]](#cyan-70-variable)
-  - [cyan-80 [variable]](#cyan-80-variable)
-  - [cyan-90 [variable]](#cyan-90-variable)
-  - [cyan-100 [variable]](#cyan-100-variable)
-  - [gray-10 [variable]](#gray-10-variable)
-  - [gray-20 [variable]](#gray-20-variable)
-  - [gray-30 [variable]](#gray-30-variable)
-  - [gray-40 [variable]](#gray-40-variable)
-  - [gray-50 [variable]](#gray-50-variable)
-  - [gray-60 [variable]](#gray-60-variable)
-  - [gray-70 [variable]](#gray-70-variable)
-  - [gray-80 [variable]](#gray-80-variable)
-  - [gray-90 [variable]](#gray-90-variable)
-  - [gray-100 [variable]](#gray-100-variable)
-  - [green-10 [variable]](#green-10-variable)
-  - [green-20 [variable]](#green-20-variable)
-  - [green-30 [variable]](#green-30-variable)
-  - [green-40 [variable]](#green-40-variable)
-  - [green-50 [variable]](#green-50-variable)
-  - [green-60 [variable]](#green-60-variable)
-  - [green-70 [variable]](#green-70-variable)
-  - [green-80 [variable]](#green-80-variable)
-  - [green-90 [variable]](#green-90-variable)
-  - [green-100 [variable]](#green-100-variable)
-  - [magenta-10 [variable]](#magenta-10-variable)
-  - [magenta-20 [variable]](#magenta-20-variable)
-  - [magenta-30 [variable]](#magenta-30-variable)
-  - [magenta-40 [variable]](#magenta-40-variable)
-  - [magenta-50 [variable]](#magenta-50-variable)
-  - [magenta-60 [variable]](#magenta-60-variable)
-  - [magenta-70 [variable]](#magenta-70-variable)
-  - [magenta-80 [variable]](#magenta-80-variable)
-  - [magenta-90 [variable]](#magenta-90-variable)
-  - [magenta-100 [variable]](#magenta-100-variable)
-  - [orange-40 [variable]](#orange-40-variable)
-  - [orange-60 [variable]](#orange-60-variable)
-  - [orange-70 [variable]](#orange-70-variable)
-  - [purple-10 [variable]](#purple-10-variable)
-  - [purple-20 [variable]](#purple-20-variable)
-  - [purple-30 [variable]](#purple-30-variable)
-  - [purple-40 [variable]](#purple-40-variable)
-  - [purple-50 [variable]](#purple-50-variable)
-  - [purple-60 [variable]](#purple-60-variable)
-  - [purple-70 [variable]](#purple-70-variable)
-  - [purple-80 [variable]](#purple-80-variable)
-  - [purple-90 [variable]](#purple-90-variable)
-  - [purple-100 [variable]](#purple-100-variable)
-  - [red-10 [variable]](#red-10-variable)
-  - [red-20 [variable]](#red-20-variable)
-  - [red-30 [variable]](#red-30-variable)
-  - [red-40 [variable]](#red-40-variable)
-  - [red-50 [variable]](#red-50-variable)
-  - [red-60 [variable]](#red-60-variable)
-  - [red-70 [variable]](#red-70-variable)
-  - [red-80 [variable]](#red-80-variable)
-  - [red-90 [variable]](#red-90-variable)
-  - [red-100 [variable]](#red-100-variable)
-  - [teal-10 [variable]](#teal-10-variable)
-  - [teal-20 [variable]](#teal-20-variable)
-  - [teal-30 [variable]](#teal-30-variable)
-  - [teal-40 [variable]](#teal-40-variable)
-  - [teal-50 [variable]](#teal-50-variable)
-  - [teal-60 [variable]](#teal-60-variable)
-  - [teal-70 [variable]](#teal-70-variable)
-  - [teal-80 [variable]](#teal-80-variable)
-  - [teal-90 [variable]](#teal-90-variable)
-  - [teal-100 [variable]](#teal-100-variable)
-  - [warm-gray-10 [variable]](#warm-gray-10-variable)
-  - [warm-gray-20 [variable]](#warm-gray-20-variable)
-  - [warm-gray-30 [variable]](#warm-gray-30-variable)
-  - [warm-gray-40 [variable]](#warm-gray-40-variable)
-  - [warm-gray-50 [variable]](#warm-gray-50-variable)
-  - [warm-gray-60 [variable]](#warm-gray-60-variable)
-  - [warm-gray-70 [variable]](#warm-gray-70-variable)
-  - [warm-gray-80 [variable]](#warm-gray-80-variable)
-  - [warm-gray-90 [variable]](#warm-gray-90-variable)
-  - [warm-gray-100 [variable]](#warm-gray-100-variable)
-  - [white-0 [variable]](#white-0-variable)
-  - [yellow-20 [variable]](#yellow-20-variable)
-  - [yellow-30 [variable]](#yellow-30-variable)
-  - [yellow-40 [variable]](#yellow-40-variable)
-  - [yellow-50 [variable]](#yellow-50-variable)
-
-### ✅black [variable]
-
-Value for black
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$black: #000000;
-```
 
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
+## @carbon/grid
 
-### ✅white [variable]
+### ✅carbon--12-column-grid [variable]
 
-Value for white
+Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the
+default 16
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$white: #ffffff;
+$carbon--12-column-grid: map-merge(
+  $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,
+        )
+      ),
+  )
+);
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Group**: [@carbon/grid](#carbongrid)
+- **Type**: `Map`
 
-### ✅black-100 [variable]
+### ❌carbon--make-col-ready [mixin]
 
-Value for black-100 from the IBM Design Language
+Used to initialize 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.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$black-100: #000000;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-10 [variable]
-
-Value for blue-10 from the IBM Design Language
+@mixin carbon--make-col-ready(
+  $gutter: $carbon--grid-gutter,
+  $collapsed-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);
 
-<details>
-<summary>Source code</summary>
+  // 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);
+  }
 
-```scss
-$blue-10: #edf5ff;
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: ($gutter / 2);
+    padding-left: 0;
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-20 [variable]
-
-Value for blue-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-20: #d0e2ff;
-```
+- **Parameters**:
 
-</details>
+| Name                | Description                    | Type     | Default value                     |
+| ------------------- | ------------------------------ | -------- | --------------------------------- |
+| `$gutter`           | The gutter for the grid system | `Number` | `$carbon--grid-gutter`            |
+| `$collapsed-gutter` | The condensed mode gutter      | `Number` | `$carbon--grid-gutter--condensed` |
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Group**: [@carbon/grid](#carbongrid)
+- **Requires**:
+  - [prefix [variable]](#prefix-variable)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
 
-### ✅blue-30 [variable]
+### ❌carbon--make-col [mixin]
 
-Value for blue-30 from the IBM Design Language
+Define the width of the column for a given span and column count. A width of 0
+will hide the column entirely.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-30: #a6c8ff;
+@mixin carbon--make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    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);
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name       | Description                           | Type     | Default value |
+| ---------- | ------------------------------------- | -------- | ------------- |
+| `$span`    | The number of columns covered         | `Number` | —             |
+| `$columns` | The total number of columns available | `Number` | —             |
+
+- **Group**: [@carbon/grid](#carbongrid)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
 
-### ✅blue-40 [variable]
+### ❌carbon--make-col-offset [mixin]
 
-Value for blue-40 from the IBM Design Language
+Create a column offset for a given span and column count.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-40: #78a9ff;
+@mixin carbon--make-col-offset($span, $columns) {
+  $offset: $span / $columns;
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: percentage($offset);
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name       | Description                                   | Type     | Default value |
+| ---------- | --------------------------------------------- | -------- | ------------- |
+| `$span`    | The number of columns the offset should cover | `Number` | —             |
+| `$columns` | The total number of columns available         | `Number` | —             |
+
+- **Group**: [@carbon/grid](#carbongrid)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
 
-### ✅blue-50 [variable]
+### ❌carbon--make-grid-columns [mixin]
 
-Value for blue-50 from the IBM Design Language
+Output the CSS required for all the columns in a given grid system.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-50: #4589ff;
-```
+@mixin carbon--make-grid-columns(
+  $breakpoints: $carbon--grid-breakpoints,
+  $gutter: $carbon--grid-gutter
+) {
+  .#{$prefix}--col {
+    @include carbon--make-col-ready($gutter);
+  }
 
-</details>
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: carbon--breakpoint-infix($breakpoint);
+    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
 
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 0 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include carbon--make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include carbon--make-col-ready($gutter);
+    }
 
-### ✅blue-60 [variable]
+    @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%;
+      }
 
-Value for blue-60 from the IBM Design Language
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        flex: 1 0 0%;
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+      }
 
-<details>
-<summary>Source code</summary>
+      @for $i from 0 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include carbon--make-col($i, $columns);
+        }
+      }
 
-```scss
-$blue-60: #0f62fe;
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include carbon--make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name           | Description                        | Type     | Default value               |
+| -------------- | ---------------------------------- | -------- | --------------------------- |
+| `$breakpoints` | The breakpoints in the grid system | `Map`    | `$carbon--grid-breakpoints` |
+| `$gutter`      | The gutter for the grid system     | `Number` | `$carbon--grid-gutter`      |
+
+- **Group**: [@carbon/grid](#carbongrid)
+- **Requires**:
+  - [carbon--make-col-ready [mixin]](#carbon--make-col-ready-mixin)
+  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [carbon--make-col [mixin]](#carbon--make-col-mixin)
+  - [carbon--make-col-offset [mixin]](#carbon--make-col-offset-mixin)
+  - [carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
+  - [prefix [variable]](#prefix-variable)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--grid [mixin]](#carbon--grid-mixin)
 
-### ✅blue-70 [variable]
+### ❌carbon--make-row [mixin]
 
-Value for blue-70 from the IBM Design Language
+Define the properties for a selector assigned to a row in the grid system.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$blue-70: #0043ce;
+@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter / 2;
+  margin-left: -1 * $gutter / 2;
+}
 ```
 
 </details>
 
-- **Group**: [@carbon/colors](#carboncolors)
+- **Parameters**:
+
+| Name      | Description                   | Type     | Default value          |
+| --------- | ----------------------------- | -------- | ---------------------- |
+| `$gutter` | The gutter in the grid system | `Number` | `$carbon--grid-gutter` |
+
+- **Group**: [@carbon/grid](#carbongrid)
 - **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
+  - [carbon--grid [mixin]](#carbon--grid-mixin)
 
-### ✅blue-80 [variable]
+### ❌carbon--no-gutter [mixin]
 
-Value for blue-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-80: #002d9c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-90 [variable]
-
-Value for blue-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-90: #001d6c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-100 [variable]
-
-Value for blue-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$blue-100: #001141;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-10 [variable]
-
-Value for cool-gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-10: #f2f4f8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-20 [variable]
-
-Value for cool-gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-20: #dde1e6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-30 [variable]
-
-Value for cool-gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-30: #c1c7cd;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-40 [variable]
-
-Value for cool-gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-40: #a2a9b0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-50 [variable]
-
-Value for cool-gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-50: #878d96;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-60 [variable]
-
-Value for cool-gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-60: #697077;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-70 [variable]
-
-Value for cool-gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-70: #4d5358;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-80 [variable]
-
-Value for cool-gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-80: #343a3f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-90 [variable]
-
-Value for cool-gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-90: #21272a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cool-gray-100 [variable]
-
-Value for cool-gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cool-gray-100: #121619;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-10 [variable]
-
-Value for cyan-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-10: #e5f6ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-20 [variable]
-
-Value for cyan-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-20: #bae6ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-30 [variable]
-
-Value for cyan-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-30: #82cfff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-40 [variable]
-
-Value for cyan-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-40: #33b1ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-50 [variable]
-
-Value for cyan-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-50: #1192e8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-60 [variable]
-
-Value for cyan-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-60: #0072c3;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-70 [variable]
-
-Value for cyan-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-70: #00539a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-80 [variable]
-
-Value for cyan-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-80: #003a6d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-90 [variable]
-
-Value for cyan-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-90: #012749;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-100 [variable]
-
-Value for cyan-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$cyan-100: #061727;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-10 [variable]
-
-Value for gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-10: #f4f4f4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-20 [variable]
-
-Value for gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-20: #e0e0e0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-30 [variable]
-
-Value for gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-30: #c6c6c6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-40 [variable]
-
-Value for gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-40: #a8a8a8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-50 [variable]
-
-Value for gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-50: #8d8d8d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-60 [variable]
-
-Value for gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-60: #6f6f6f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-70 [variable]
-
-Value for gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-70: #525252;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-80 [variable]
-
-Value for gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-80: #393939;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-90 [variable]
-
-Value for gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-90: #262626;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-100 [variable]
-
-Value for gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$gray-100: #161616;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-10 [variable]
-
-Value for green-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-10: #defbe6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-20 [variable]
-
-Value for green-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-20: #a7f0ba;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-30 [variable]
-
-Value for green-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-30: #6fdc8c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-40 [variable]
-
-Value for green-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-40: #42be65;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-50 [variable]
-
-Value for green-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-50: #24a148;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-60 [variable]
-
-Value for green-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-60: #198038;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-70 [variable]
-
-Value for green-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-70: #0e6027;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-80 [variable]
-
-Value for green-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-80: #044317;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-90 [variable]
-
-Value for green-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-90: #022d0d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-100 [variable]
-
-Value for green-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$green-100: #071908;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-10 [variable]
-
-Value for magenta-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-10: #fff0f7;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-20 [variable]
-
-Value for magenta-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-20: #ffd6e8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-30 [variable]
-
-Value for magenta-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-30: #ffafd2;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-40 [variable]
-
-Value for magenta-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-40: #ff7eb6;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-50 [variable]
-
-Value for magenta-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-50: #ee5396;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-60 [variable]
-
-Value for magenta-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-60: #d02670;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-70 [variable]
-
-Value for magenta-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-70: #9f1853;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-80 [variable]
-
-Value for magenta-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-80: #740937;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-90 [variable]
-
-Value for magenta-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-90: #510224;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-100 [variable]
-
-Value for magenta-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$magenta-100: #2a0a18;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-40 [variable]
-
-Value for orange-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-40: #ff832b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-60 [variable]
-
-Value for orange-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-60: #ba4e00;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-70 [variable]
-
-Value for orange-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$orange-70: #8a3800;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-10 [variable]
-
-Value for purple-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-10: #f6f2ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-20 [variable]
-
-Value for purple-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-20: #e8daff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-30 [variable]
-
-Value for purple-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-30: #d4bbff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-40 [variable]
-
-Value for purple-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-40: #be95ff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-50 [variable]
-
-Value for purple-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-50: #a56eff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-60 [variable]
-
-Value for purple-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-60: #8a3ffc;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-70 [variable]
-
-Value for purple-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-70: #6929c4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-80 [variable]
-
-Value for purple-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-80: #491d8b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-90 [variable]
-
-Value for purple-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-90: #31135e;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-100 [variable]
-
-Value for purple-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$purple-100: #1c0f30;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-10 [variable]
-
-Value for red-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-10: #fff1f1;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-20 [variable]
-
-Value for red-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-20: #ffd7d9;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-30 [variable]
-
-Value for red-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-30: #ffb3b8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-40 [variable]
-
-Value for red-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-40: #ff8389;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-50 [variable]
-
-Value for red-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-50: #fa4d56;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-60 [variable]
-
-Value for red-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-60: #da1e28;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-70 [variable]
-
-Value for red-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-70: #a2191f;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-80 [variable]
-
-Value for red-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-80: #750e13;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-90 [variable]
-
-Value for red-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-90: #520408;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-100 [variable]
-
-Value for red-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$red-100: #2d0709;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-10 [variable]
-
-Value for teal-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-10: #d9fbfb;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-20 [variable]
-
-Value for teal-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-20: #9ef0f0;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-30 [variable]
-
-Value for teal-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-30: #3ddbd9;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-40 [variable]
-
-Value for teal-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-40: #08bdba;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-50 [variable]
-
-Value for teal-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-50: #009d9a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-60 [variable]
-
-Value for teal-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-60: #007d79;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-70 [variable]
-
-Value for teal-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-70: #005d5d;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-80 [variable]
-
-Value for teal-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-80: #004144;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-90 [variable]
-
-Value for teal-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-90: #022b30;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-100 [variable]
-
-Value for teal-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$teal-100: #081a1c;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-10 [variable]
-
-Value for warm-gray-10 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-10: #f7f3f2;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-20 [variable]
-
-Value for warm-gray-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-20: #e5e0df;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-30 [variable]
-
-Value for warm-gray-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-30: #cac5c4;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-40 [variable]
-
-Value for warm-gray-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-40: #ada8a8;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-50 [variable]
-
-Value for warm-gray-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-50: #8f8b8b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-60 [variable]
-
-Value for warm-gray-60 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-60: #726e6e;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-70 [variable]
-
-Value for warm-gray-70 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-70: #565151;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-80 [variable]
-
-Value for warm-gray-80 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-80: #3c3838;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-90 [variable]
-
-Value for warm-gray-90 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-90: #272525;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅warm-gray-100 [variable]
-
-Value for warm-gray-100 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$warm-gray-100: #171414;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅white-0 [variable]
-
-Value for white-0 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$white-0: #ffffff;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-20 [variable]
-
-Value for yellow-20 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-20: #fdd13a;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-30 [variable]
-
-Value for yellow-30 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-30: #f1c21b;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-40 [variable]
-
-Value for yellow-40 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-40: #d2a106;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-50 [variable]
-
-Value for yellow-50 from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$yellow-50: #b28600;
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
-  - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅colors [variable]
-
-Colors from the IBM Design Language
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$colors: (
-  black: (
-    100: #000000,
-  ),
-  blue: (
-    10: #edf5ff,
-    20: #d0e2ff,
-    30: #a6c8ff,
-    40: #78a9ff,
-    50: #4589ff,
-    60: #0f62fe,
-    70: #0043ce,
-    80: #002d9c,
-    90: #001d6c,
-    100: #001141,
-  ),
-  cool-gray: (
-    10: #f2f4f8,
-    20: #dde1e6,
-    30: #c1c7cd,
-    40: #a2a9b0,
-    50: #878d96,
-    60: #697077,
-    70: #4d5358,
-    80: #343a3f,
-    90: #21272a,
-    100: #121619,
-  ),
-  cyan: (
-    10: #e5f6ff,
-    20: #bae6ff,
-    30: #82cfff,
-    40: #33b1ff,
-    50: #1192e8,
-    60: #0072c3,
-    70: #00539a,
-    80: #003a6d,
-    90: #012749,
-    100: #061727,
-  ),
-  gray: (
-    10: #f4f4f4,
-    20: #e0e0e0,
-    30: #c6c6c6,
-    40: #a8a8a8,
-    50: #8d8d8d,
-    60: #6f6f6f,
-    70: #525252,
-    80: #393939,
-    90: #262626,
-    100: #161616,
-  ),
-  green: (
-    10: #defbe6,
-    20: #a7f0ba,
-    30: #6fdc8c,
-    40: #42be65,
-    50: #24a148,
-    60: #198038,
-    70: #0e6027,
-    80: #044317,
-    90: #022d0d,
-    100: #071908,
-  ),
-  magenta: (
-    10: #fff0f7,
-    20: #ffd6e8,
-    30: #ffafd2,
-    40: #ff7eb6,
-    50: #ee5396,
-    60: #d02670,
-    70: #9f1853,
-    80: #740937,
-    90: #510224,
-    100: #2a0a18,
-  ),
-  orange: (
-    40: #ff832b,
-    60: #ba4e00,
-    70: #8a3800,
-  ),
-  purple: (
-    10: #f6f2ff,
-    20: #e8daff,
-    30: #d4bbff,
-    40: #be95ff,
-    50: #a56eff,
-    60: #8a3ffc,
-    70: #6929c4,
-    80: #491d8b,
-    90: #31135e,
-    100: #1c0f30,
-  ),
-  red: (
-    10: #fff1f1,
-    20: #ffd7d9,
-    30: #ffb3b8,
-    40: #ff8389,
-    50: #fa4d56,
-    60: #da1e28,
-    70: #a2191f,
-    80: #750e13,
-    90: #520408,
-    100: #2d0709,
-  ),
-  teal: (
-    10: #d9fbfb,
-    20: #9ef0f0,
-    30: #3ddbd9,
-    40: #08bdba,
-    50: #009d9a,
-    60: #007d79,
-    70: #005d5d,
-    80: #004144,
-    90: #022b30,
-    100: #081a1c,
-  ),
-  warm-gray: (
-    10: #f7f3f2,
-    20: #e5e0df,
-    30: #cac5c4,
-    40: #ada8a8,
-    50: #8f8b8b,
-    60: #726e6e,
-    70: #565151,
-    80: #3c3838,
-    90: #272525,
-    100: #171414,
-  ),
-  white: (
-    0: #ffffff,
-  ),
-  yellow: (
-    20: #fdd13a,
-    30: #f1c21b,
-    40: #d2a106,
-    50: #b28600,
-  ),
-);
-```
-
-</details>
-
-- **Group**: [@carbon/colors](#carboncolors)
-
-## @carbon/grid
-
-### ✅carbon--12-column-grid [variable]
-
-Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the
-default 16
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$carbon--12-column-grid: map-merge(
-  $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,
-        )
-      ),
-  )
-);
-```
-
-</details>
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Type**: `Map`
-
-### ❌carbon--make-col-ready [mixin]
-
-Used to initialize 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.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-col-ready(
-  $gutter: $carbon--grid-gutter,
-  $collapsed-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);
-  }
-
-  // For our narrow use-case, our container hangs 16px into the gutter
-  .#{$prefix}--row--narrow &,
-  .#{$prefix}--grid--narrow & {
-    padding-right: ($gutter / 2);
-    padding-left: 0;
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name                | Description                    | Type     | Default value                     |
-| ------------------- | ------------------------------ | -------- | --------------------------------- |
-| `$gutter`           | The gutter for the grid system | `Number` | `$carbon--grid-gutter`            |
-| `$collapsed-gutter` | The condensed mode gutter      | `Number` | `$carbon--grid-gutter--condensed` |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Requires**:
-  - [prefix [variable]](#prefix-variable)
-- **Used by**:
-  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
-
-### ❌carbon--make-col [mixin]
-
-Define the width of the column for a given span and column count. A width of 0
-will hide the column entirely.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-col($span, $columns) {
-  @if $span == 0 {
-    display: none;
-  } @else {
-    // Explicitly include `display: block` to override
-    display: block;
-    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);
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name       | Description                           | Type     | Default value |
-| ---------- | ------------------------------------- | -------- | ------------- |
-| `$span`    | The number of columns covered         | `Number` | —             |
-| `$columns` | The total number of columns available | `Number` | —             |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Used by**:
-  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
-
-### ❌carbon--make-col-offset [mixin]
-
-Create a column offset for a given span and column count.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-col-offset($span, $columns) {
-  $offset: $span / $columns;
-  @if $offset == 0 {
-    margin-left: 0;
-  } @else {
-    margin-left: percentage($offset);
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name       | Description                                   | Type     | Default value |
-| ---------- | --------------------------------------------- | -------- | ------------- |
-| `$span`    | The number of columns the offset should cover | `Number` | —             |
-| `$columns` | The total number of columns available         | `Number` | —             |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Used by**:
-  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
-
-### ❌carbon--make-grid-columns [mixin]
-
-Output the CSS required for all the columns in a given grid system.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-grid-columns(
-  $breakpoints: $carbon--grid-breakpoints,
-  $gutter: $carbon--grid-gutter
-) {
-  .#{$prefix}--col {
-    @include carbon--make-col-ready($gutter);
-  }
-
-  @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 0 through $columns {
-      .#{$prefix}--col#{$infix}-#{$i} {
-        @include carbon--make-col-ready($gutter);
-      }
-    }
-
-    .#{$prefix}--col#{$infix},
-    .#{$prefix}--col#{$infix}--auto {
-      @include carbon--make-col-ready($gutter);
-    }
-
-    @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 0 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);
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name           | Description                        | Type     | Default value               |
-| -------------- | ---------------------------------- | -------- | --------------------------- |
-| `$breakpoints` | The breakpoints in the grid system | `Map`    | `$carbon--grid-breakpoints` |
-| `$gutter`      | The gutter for the grid system     | `Number` | `$carbon--grid-gutter`      |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Requires**:
-  - [carbon--make-col-ready [mixin]](#carbon--make-col-ready-mixin)
-  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
-  - [carbon--make-col [mixin]](#carbon--make-col-mixin)
-  - [carbon--make-col-offset [mixin]](#carbon--make-col-offset-mixin)
-  - [carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
-  - [prefix [variable]](#prefix-variable)
-- **Used by**:
-  - [carbon--grid [mixin]](#carbon--grid-mixin)
-
-### ❌carbon--make-row [mixin]
-
-Define the properties for a selector assigned to a row in the grid system.
-
-<details>
-<summary>Source code</summary>
-
-```scss
-@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -1 * $gutter / 2;
-  margin-left: -1 * $gutter / 2;
-}
-```
-
-</details>
-
-- **Parameters**:
-
-| Name      | Description                   | Type     | Default value          |
-| --------- | ----------------------------- | -------- | ---------------------- |
-| `$gutter` | The gutter in the grid system | `Number` | `$carbon--grid-gutter` |
-
-- **Group**: [@carbon/grid](#carbongrid)
-- **Used by**:
-  - [carbon--grid [mixin]](#carbon--grid-mixin)
-
-### ❌carbon--no-gutter [mixin]
-
-Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
-classes are useful for dropping the gutter in fluid situations.
+Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
+classes are useful for dropping the gutter in fluid situations.
 
 <details>
 <summary>Source code</summary>
@@ -3916,6 +1695,7 @@ Generate the CSS for a grid for the given breakpoints and gutters
   - [carbon--hang [mixin]](#carbon--hang-mixin)
   - [carbon--aspect-ratio [mixin]](#carbon--aspect-ratio-mixin)
   - [prefix [variable]](#prefix-variable)
+  - [grid-gutter [variable]](#grid-gutter-variable)
 
 ### ✅prefix [variable]
 
@@ -4040,6 +1820,24 @@ $carbon--grid-gutter: carbon--rem(32px);
 - **Used by**:
   - [carbon--make-container [mixin]](#carbon--make-container-mixin)
 
+### ✅grid-gutter [variable]
+
+Carbon gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-gutter: convert.rem(32px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--grid [mixin]](#carbon--grid-mixin)
+
 ### ✅carbon--grid-gutter--condensed [variable]
 
 Carbon condensed gutter size in rem
@@ -4056,6 +1854,22 @@ $carbon--grid-gutter--condensed: carbon--rem(1px);
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 
+### ✅grid-gutter--condensed [variable]
+
+Carbon condensed gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-gutter--condensed: convert.rem(1px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--grid-breakpoints [variable]
 
 <details>
@@ -4096,6 +1910,46 @@ $carbon--grid-breakpoints: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Map`
 
+### ✅grid-breakpoints [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Map`
+
 ### ✅carbon--breakpoint-next [function]
 
 Get the value of the next breakpoint, or null for the last breakpoint
@@ -4132,6 +1986,40 @@ Get the value of the next breakpoint, or null for the last breakpoint
 - **Used by**:
   - [fluid-type-size [mixin]](#fluid-type-size-mixin)
 
+### ✅breakpoint-next [function]
+
+Get the value of the next breakpoint, or null for the last breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name                | Description                                                                                                     | Type     | Default value            |
+| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
+| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
+| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
+| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
 ### ✅carbon--breakpoint-prev [function]
 
 Get the value of the previous breakpoint, or null for the first breakpoint
@@ -4168,6 +2056,40 @@ Get the value of the previous breakpoint, or null for the first breakpoint
 - **Used by**:
   - [carbon--make-container [mixin]](#carbon--make-container-mixin)
 
+### ✅breakpoint-prev [function]
+
+Get the value of the previous breakpoint, or null for the first breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-prev(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return list.nth($breakpoint-names, $n - 1);
+  }
+  @return null;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name                | Description                                                                                                     | Type     | Default value            |
+| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
+| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
+| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
+| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
 ### ✅carbon--is-smallest-breakpoint [function]
 
 Check to see if the given breakpoint name
@@ -4198,6 +2120,33 @@ Check to see if the given breakpoint name
 - **Used by**:
   - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
 
+### ✅is-smallest-breakpoint [function]
+
+Check to see if the given breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @return list.index(map.keys($breakpoints), $name) == 1;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                                                                                     | Type     | Default value       |
+| -------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------- |
+| `$name`        | The name of the brekapoint                                                                                      | `String` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Bool`
+- **Used by**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+
 ### ✅carbon--largest-breakpoint-name [function]
 
 Returns the largest breakpoint name
@@ -4229,17 +2178,113 @@ Returns the largest breakpoint name
 - **Used by**:
   - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
 
-### ✅carbon--breakpoint-infix [function]
+### ✅largest-breakpoint-name [function]
+
+Returns the largest breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: list.length($breakpoints);
+  @return key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type  | Default value       |
+| -------------- | ---------------------------------------------- | ----- | ------------------- |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+- **Requires**:
+  - [key-by-index [function]](#key-by-index-function)
+- **Used by**:
+  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
+
+### ✅breakpoint-infix [function]
+
+Get the infix for a given breakpoint in a list of breakpoints. Usesful for
+generate the size part in a selector, for example: `.prefix--col-sm-2`.
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-infix($name) {
+  @return '-#{$name}';
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name    | Description                | Type     | Default value |
+| ------- | -------------------------- | -------- | ------------- |
+| `$name` | The name of the breakpoint | `String` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
+### ✅carbon--breakpoint-infix [function]
+
+Get the infix for a given breakpoint in a list of breakpoints. Usesful for
+generate the size part in a selector, for example: `.prefix--col-sm-2`.
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--breakpoint-infix($name) {
+  @return '-#{$name}';
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name    | Description                | Type     | Default value |
+| ------- | -------------------------- | -------- | ------------- |
+| `$name` | The name of the breakpoint | `String` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+- **Used by**:
+  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
+
+### ✅breakpoint-up [mixin]
 
-Get the infix for a given breakpoint in a list of breakpoints. Usesful for
-generate the size part in a selector, for example: `.prefix--col-sm-2`.
+Generate a media query from the width of the given breakpoint to infinity
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-@function carbon--breakpoint-infix($name) {
-  @return '-#{$name}';
+@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width);
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @media (min-width: $width) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
 }
 ```
 
@@ -4247,14 +2292,17 @@ generate the size part in a selector, for example: `.prefix--col-sm-2`.
 
 - **Parameters**:
 
-| Name    | Description                | Type     | Default value |
-| ------- | -------------------------- | -------- | ------------- |
-| `$name` | The name of the breakpoint | `String` | —             |
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
 
 - **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `String`
+- **Requires**:
+  - [is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
 - **Used by**:
-  - [carbon--make-grid-columns [mixin]](#carbon--make-grid-columns-mixin)
+  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
+  - [breakpoint [mixin]](#breakpoint-mixin)
 
 ### ✅carbon--breakpoint-up [mixin]
 
@@ -4301,6 +2349,49 @@ Generate a media query from the width of the given breakpoint to infinity
   - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
 
+### ✅breakpoint-down [mixin]
+
+Generate a media query for the maximum width of the given styles
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width) - 0.02;
+    @media (max-width: $width) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Used by**:
+  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
+
 ### ✅carbon--breakpoint-down [mixin]
 
 Generate a media query for the maximum width of the given styles
@@ -4344,6 +2435,55 @@ Generate a media query for the maximum width of the given styles
 - **Used by**:
   - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
 
+### ✅breakpoint-between [mixin]
+
+Generate a media query for the range between the lower and upper breakpoints
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $is-number-lower: meta.type-of($lower) == 'number';
+  $is-number-upper: meta.type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
+
+  @if $min and $max {
+    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  } @else if $min != null and $max == null {
+    @include breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include breakpoint-down($upper) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$lower`       | —                                              | `String \| Number` | —                   |
+| `$upper`       | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+  - [breakpoint-down [mixin]](#breakpoint-down-mixin)
+
 ### ✅carbon--breakpoint-between [mixin]
 
 Generate a media query for the range between the lower and upper breakpoints
@@ -4397,6 +2537,34 @@ Generate a media query for the range between the lower and upper breakpoints
   - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
   - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
 
+### ✅largest-breakpoint [mixin]
+
+Generate media query for the largest breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type  | Default value       |
+| -------------- | ---------------------------------------------- | ----- | ------------------- |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint [mixin]](#breakpoint-mixin)
+  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+
 ### ✅carbon--largest-breakpoint [mixin]
 
 Generate media query for the largest breakpoint
@@ -4427,6 +2595,36 @@ Generate media query for the largest breakpoint
 - **Used by**:
   - [carbon--grid [mixin]](#carbon--grid-mixin)
 
+### ✅breakpoint [mixin]
+
+Generate a media query for a given breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @include breakpoint-up($name, $breakpoints) {
+    @content;
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+- **Used by**:
+  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
+
 ### ✅carbon--breakpoint [mixin]
 
 Generate a media query for a given breakpoint
@@ -4665,6 +2863,25 @@ $carbon--base-font-size: 16px;
   - [carbon--rem [function]](#carbon--rem-function)
   - [carbon--em [function]](#carbon--em-function)
 
+### ✅base-font-size [variable]
+
+Default font size
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$base-font-size: 16px;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [rem [function]](#rem-function)
+  - [em [function]](#em-function)
+
 ### ✅carbon--rem [function]
 
 Convert a given px unit to a rem unit
@@ -4698,6 +2915,37 @@ Convert a given px unit to a rem unit
 - **Used by**:
   - [carbon--mini-units [function]](#carbon--mini-units-function)
 
+### ✅rem [function]
+
+Convert a given px unit to a rem unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $base-font-size) * 1rem;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name  | Description         | Type     | Default value |
+| ----- | ------------------- | -------- | ------------- |
+| `$px` | Number with px unit | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` Number with rem unit
+- **Requires**:
+  - [base-font-size [variable]](#base-font-size-variable)
+
 ### ✅carbon--em [function]
 
 Convert a given px unit to a em unit
@@ -4729,13 +2977,108 @@ Convert a given px unit to a em unit
 - **Requires**:
   - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
 
-### ✅carbon--fluid-spacing-01 [variable]
+### ✅em [function]
+
+Convert a given px unit to a em unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function em($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $base-font-size) * 1em;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name  | Description         | Type     | Default value |
+| ----- | ------------------- | -------- | ------------- |
+| `$px` | Number with px unit | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` Number with em unit
+- **Requires**:
+  - [base-font-size [variable]](#base-font-size-variable)
+
+### ✅carbon--fluid-spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--fluid-spacing-01: 0;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `fluid-spacing-01`
+
+### ✅fluid-spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-01: 0;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--fluid-spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--fluid-spacing-02: 2vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `fluid-spacing-02`
+
+### ✅fluid-spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-02: 2vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--fluid-spacing-03 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--fluid-spacing-01: 0;
+$carbon--fluid-spacing-03: 5vw;
 ```
 
 </details>
@@ -4743,31 +3086,31 @@ $carbon--fluid-spacing-01: 0;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `fluid-spacing-01`
+  - `fluid-spacing-03`
 
-### ✅carbon--fluid-spacing-02 [variable]
+### ✅fluid-spacing-03 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--fluid-spacing-02: 2vw;
+$fluid-spacing-03: 5vw;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `fluid-spacing-02`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--fluid-spacing-03 [variable]
+### ✅carbon--fluid-spacing-04 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--fluid-spacing-03: 5vw;
+$carbon--fluid-spacing-04: 10vw;
 ```
 
 </details>
@@ -4775,23 +3118,23 @@ $carbon--fluid-spacing-03: 5vw;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `fluid-spacing-03`
+  - `fluid-spacing-04`
 
-### ✅carbon--fluid-spacing-04 [variable]
+### ✅fluid-spacing-04 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--fluid-spacing-04: 10vw;
+$fluid-spacing-04: 10vw;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `fluid-spacing-04`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅carbon--fluid-spacing [variable]
 
@@ -4812,6 +3155,25 @@ $carbon--fluid-spacing: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `List`
 
+### ✅fluid-spacing [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing: (
+  $fluid-spacing-01,
+  $fluid-spacing-02,
+  $fluid-spacing-03,
+  $fluid-spacing-04
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
 ### ✅fluid-spacing-01 [variable]
 
 <details>
@@ -4826,8 +3188,6 @@ $fluid-spacing-01: $carbon--fluid-spacing-01;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-01`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅fluid-spacing-02 [variable]
 
@@ -4843,8 +3203,6 @@ $fluid-spacing-02: $carbon--fluid-spacing-02;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-02`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅fluid-spacing-03 [variable]
 
@@ -4860,8 +3218,6 @@ $fluid-spacing-03: $carbon--fluid-spacing-03;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-03`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅fluid-spacing-04 [variable]
 
@@ -4877,8 +3233,6 @@ $fluid-spacing-04: $carbon--fluid-spacing-04;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--fluid-spacing-04`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅carbon--icon-size-01 [variable]
 
@@ -5259,143 +3613,335 @@ $layout-02: $carbon--layout-02;
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅layout-03 [variable]
+### ✅layout-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$layout-03: $carbon--layout-03;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-03`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-04 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$layout-04: $carbon--layout-04;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-04`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-05 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$layout-05: $carbon--layout-05;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-05`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-06 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$layout-06: $carbon--layout-06;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-06`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-07 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$layout-07: $carbon--layout-07;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-07`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--mini-unit-size [variable]
+
+Default mini-unit value
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--mini-unit-size: 8px;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--mini-units [function]](#carbon--mini-units-function)
+
+### ✅carbon--mini-units [function]
+
+Get the value of the corresponding number of units
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--mini-units($count) {
+  @return carbon--rem($carbon--mini-unit-size * $count);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name     | Description                              | Type     | Default value |
+| -------- | ---------------------------------------- | -------- | ------------- |
+| `$count` | The number of units to get the value for | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` In rem units
+- **Requires**:
+  - [carbon--rem [function]](#carbon--rem-function)
+  - [carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
+
+### ✅carbon--spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-01: 0.125rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-01`
+
+### ✅spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-01: 0.125rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-02: 0.25rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-02`
+
+### ✅spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-02: 0.25rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--spacing-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-03: 0.5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-03`
+
+### ✅spacing-03 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$layout-03: $carbon--layout-03;
+$spacing-03: 0.5rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Alias**: `carbon--layout-03`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅layout-04 [variable]
+### ✅carbon--spacing-04 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$layout-04: $carbon--layout-04;
+$carbon--spacing-04: 0.75rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Alias**: `carbon--layout-04`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
+- **Aliased**:
+  - `spacing-04`
 
-### ✅layout-05 [variable]
+### ✅spacing-04 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$layout-05: $carbon--layout-05;
+$spacing-04: 0.75rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Alias**: `carbon--layout-05`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅layout-06 [variable]
+### ✅carbon--spacing-05 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$layout-06: $carbon--layout-06;
+$carbon--spacing-05: 1rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Alias**: `carbon--layout-06`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
+- **Aliased**:
+  - `spacing-05`
 
-### ✅layout-07 [variable]
+### ✅spacing-05 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$layout-07: $carbon--layout-07;
+$spacing-05: 1rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Alias**: `carbon--layout-07`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--mini-unit-size [variable]
-
-Default mini-unit value
+### ✅carbon--spacing-06 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--mini-unit-size: 8px;
+$carbon--spacing-06: 1.5rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Used by**:
-  - [carbon--mini-units [function]](#carbon--mini-units-function)
-
-### ✅carbon--mini-units [function]
+- **Aliased**:
+  - `spacing-06`
 
-Get the value of the corresponding number of units
+### ✅spacing-06 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-@function carbon--mini-units($count) {
-  @return carbon--rem($carbon--mini-unit-size * $count);
-}
+$spacing-06: 1.5rem;
 ```
 
 </details>
 
-- **Parameters**:
-
-| Name     | Description                              | Type     | Default value |
-| -------- | ---------------------------------------- | -------- | ------------- |
-| `$count` | The number of units to get the value for | `Number` | —             |
-
 - **Group**: [@carbon/layout](#carbonlayout)
-- **Returns**: `Number` In rem units
-- **Requires**:
-  - [carbon--rem [function]](#carbon--rem-function)
-  - [carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--spacing-01 [variable]
+### ✅carbon--spacing-07 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-01: 0.125rem;
+$carbon--spacing-07: 2rem;
 ```
 
 </details>
@@ -5403,31 +3949,31 @@ $carbon--spacing-01: 0.125rem;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `spacing-01`
+  - `spacing-07`
 
-### ✅carbon--spacing-02 [variable]
+### ✅spacing-07 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-02: 0.25rem;
+$spacing-07: 2rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `spacing-02`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--spacing-03 [variable]
+### ✅carbon--spacing-08 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-03: 0.5rem;
+$carbon--spacing-08: 2.5rem;
 ```
 
 </details>
@@ -5435,31 +3981,31 @@ $carbon--spacing-03: 0.5rem;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `spacing-03`
+  - `spacing-08`
 
-### ✅carbon--spacing-04 [variable]
+### ✅spacing-08 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-04: 0.75rem;
+$spacing-08: 2.5rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `spacing-04`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--spacing-05 [variable]
+### ✅carbon--spacing-09 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-05: 1rem;
+$carbon--spacing-09: 3rem;
 ```
 
 </details>
@@ -5467,31 +4013,31 @@ $carbon--spacing-05: 1rem;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `spacing-05`
+  - `spacing-09`
 
-### ✅carbon--spacing-06 [variable]
+### ✅spacing-09 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-06: 1.5rem;
+$spacing-09: 3rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `spacing-06`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--spacing-07 [variable]
+### ✅carbon--spacing-10 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-07: 2rem;
+$carbon--spacing-10: 4rem;
 ```
 
 </details>
@@ -5499,31 +4045,31 @@ $carbon--spacing-07: 2rem;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `spacing-07`
+  - `spacing-10`
 
-### ✅carbon--spacing-08 [variable]
+### ✅spacing-10 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-08: 2.5rem;
+$spacing-10: 4rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `spacing-08`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--spacing-09 [variable]
+### ✅carbon--spacing-11 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-09: 3rem;
+$carbon--spacing-11: 5rem;
 ```
 
 </details>
@@ -5531,31 +4077,31 @@ $carbon--spacing-09: 3rem;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `spacing-09`
+  - `spacing-11`
 
-### ✅carbon--spacing-10 [variable]
+### ✅spacing-11 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-10: 4rem;
+$spacing-11: 5rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `spacing-10`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅carbon--spacing-11 [variable]
+### ✅carbon--spacing-12 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-11: 5rem;
+$carbon--spacing-12: 6rem;
 ```
 
 </details>
@@ -5563,23 +4109,23 @@ $carbon--spacing-11: 5rem;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Aliased**:
-  - `spacing-11`
+  - `spacing-12`
 
-### ✅carbon--spacing-12 [variable]
+### ✅spacing-12 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--spacing-12: 6rem;
+$spacing-12: 6rem;
 ```
 
 </details>
 
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
-- **Aliased**:
-  - `spacing-12`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅carbon--spacing [variable]
 
@@ -5608,6 +4154,33 @@ $carbon--spacing: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `List`
 
+### ✅spacing [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing: (
+  $spacing-01,
+  $spacing-02,
+  $spacing-03,
+  $spacing-04,
+  $spacing-05,
+  $spacing-06,
+  $spacing-07,
+  $spacing-08,
+  $spacing-09,
+  $spacing-10,
+  $spacing-11,
+  $spacing-12
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
 ### ✅spacing-01 [variable]
 
 <details>
@@ -5622,8 +4195,6 @@ $spacing-01: $carbon--spacing-01;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-01`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-02 [variable]
 
@@ -5639,8 +4210,6 @@ $spacing-02: $carbon--spacing-02;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-02`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-03 [variable]
 
@@ -5656,8 +4225,6 @@ $spacing-03: $carbon--spacing-03;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-03`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-04 [variable]
 
@@ -5673,8 +4240,6 @@ $spacing-04: $carbon--spacing-04;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-04`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-05 [variable]
 
@@ -5690,8 +4255,6 @@ $spacing-05: $carbon--spacing-05;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-05`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-06 [variable]
 
@@ -5707,8 +4270,6 @@ $spacing-06: $carbon--spacing-06;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-06`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-07 [variable]
 
@@ -5724,8 +4285,6 @@ $spacing-07: $carbon--spacing-07;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-07`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-08 [variable]
 
@@ -5741,8 +4300,6 @@ $spacing-08: $carbon--spacing-08;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-08`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-09 [variable]
 
@@ -5758,8 +4315,6 @@ $spacing-09: $carbon--spacing-09;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-09`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-10 [variable]
 
@@ -5775,8 +4330,6 @@ $spacing-10: $carbon--spacing-10;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-10`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-11 [variable]
 
@@ -5792,8 +4345,6 @@ $spacing-11: $carbon--spacing-11;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-11`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
 
 ### ✅spacing-12 [variable]
 
@@ -5809,8 +4360,34 @@ $spacing-12: $carbon--spacing-12;
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 - **Alias**: `carbon--spacing-12`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅map-deep-get [function]
+
+Map deep get
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name    | Description | Type      | Default value |
+| ------- | ----------- | --------- | ------------- |
+| `$map`  | Map         | `Map`     | —             |
+| `$keys` | Key chain   | `Arglist` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `*` Desired value
 
 ### ✅map-deep-get [function]
 
@@ -5869,6 +4446,34 @@ Provide a map and index, and get back the relevant key value
   - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
   - [last-map-item [function]](#last-map-item-function)
 
+### ✅key-by-index [function]
+
+Provide a map and index, and get back the relevant key value
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function key-by-index($map, $index) {
+  $keys: map-keys($map);
+  @return nth($keys, $index);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name     | Description | Type      | Default value |
+| -------- | ----------- | --------- | ------------- |
+| `$map`   | Map         | `Map`     | —             |
+| `$index` | Key chain   | `Integer` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String` Desired value
+- **Used by**:
+  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+
 ### ✅last-map-item [function]
 
 Pass in a map, and get the last one in the list back
@@ -5898,6 +4503,33 @@ Pass in a map, and get the last one in the list back
 - **Used by**:
   - [carbon--set-largest-breakpoint [mixin]](#carbon--set-largest-breakpoint-mixin)
 
+### ✅last-map-item [function]
+
+Pass in a map, and get the last one in the list back
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function last-map-item($map) {
+  $total-length: length($map);
+  @return map-get($map, carbon--key-by-index($map, $total-length));
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name   | Description | Type  | Default value |
+| ------ | ----------- | ----- | ------------- |
+| `$map` | Map         | `Map` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `*` Desired value
+- **Requires**:
+  - [carbon--key-by-index [function]](#carbon--key-by-index-function)
+
 ## @carbon/motion
 
 ### ✅carbon--easings [variable]
diff --git a/packages/layout/.gitignore b/packages/layout/.gitignore
index e1ceefc21865..86d4c2dd380e 100644
--- a/packages/layout/.gitignore
+++ b/packages/layout/.gitignore
@@ -1 +1 @@
-scss/generated
+generated
diff --git a/packages/layout/docs/sass.md b/packages/layout/docs/sass.md
index fb354bcffc0b..c4e77a519205 100644
--- a/packages/layout/docs/sass.md
+++ b/packages/layout/docs/sass.md
@@ -10,17 +10,30 @@
 
 - [@carbon/layout](#carbonlayout)
   - [✅carbon--grid-gutter [variable]](#carbon--grid-gutter-variable)
+  - [✅grid-gutter [variable]](#grid-gutter-variable)
   - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable)
+  - [✅grid-gutter--condensed [variable]](#grid-gutter--condensed-variable)
   - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable)
+  - [✅grid-breakpoints [variable]](#grid-breakpoints-variable)
   - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function)
+  - [✅breakpoint-next [function]](#breakpoint-next-function)
   - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function)
+  - [✅breakpoint-prev [function]](#breakpoint-prev-function)
   - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
+  - [✅is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
   - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
+  - [✅largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+  - [✅breakpoint-infix [function]](#breakpoint-infix-function)
   - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
+  - [✅breakpoint-up [mixin]](#breakpoint-up-mixin)
   - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [✅breakpoint-down [mixin]](#breakpoint-down-mixin)
   - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
+  - [✅breakpoint-between [mixin]](#breakpoint-between-mixin)
   - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
+  - [✅largest-breakpoint [mixin]](#largest-breakpoint-mixin)
   - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
+  - [✅breakpoint [mixin]](#breakpoint-mixin)
   - [✅carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [✅carbon--container-01 [variable]](#carbon--container-01-variable)
   - [✅carbon--container-02 [variable]](#carbon--container-02-variable)
@@ -34,13 +47,21 @@
   - [✅container-04 [variable]](#container-04-variable)
   - [✅container-05 [variable]](#container-05-variable)
   - [✅carbon--base-font-size [variable]](#carbon--base-font-size-variable)
+  - [✅base-font-size [variable]](#base-font-size-variable)
   - [✅carbon--rem [function]](#carbon--rem-function)
+  - [✅rem [function]](#rem-function)
   - [✅carbon--em [function]](#carbon--em-function)
+  - [✅em [function]](#em-function)
   - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable)
+  - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
   - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable)
+  - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
   - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable)
+  - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
   - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable)
+  - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable)
   - [✅carbon--fluid-spacing [variable]](#carbon--fluid-spacing-variable)
+  - [✅fluid-spacing [variable]](#fluid-spacing-variable)
   - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
   - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
   - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
@@ -71,18 +92,31 @@
   - [✅carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
   - [✅carbon--mini-units [function]](#carbon--mini-units-function)
   - [✅carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
+  - [✅spacing-01 [variable]](#spacing-01-variable)
   - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
+  - [✅spacing-02 [variable]](#spacing-02-variable)
   - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+  - [✅spacing-03 [variable]](#spacing-03-variable)
   - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
+  - [✅spacing-04 [variable]](#spacing-04-variable)
   - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
+  - [✅spacing-05 [variable]](#spacing-05-variable)
   - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
+  - [✅spacing-06 [variable]](#spacing-06-variable)
   - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
+  - [✅spacing-07 [variable]](#spacing-07-variable)
   - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
+  - [✅spacing-08 [variable]](#spacing-08-variable)
   - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
+  - [✅spacing-09 [variable]](#spacing-09-variable)
   - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable)
+  - [✅spacing-10 [variable]](#spacing-10-variable)
   - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable)
+  - [✅spacing-11 [variable]](#spacing-11-variable)
   - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable)
+  - [✅spacing-12 [variable]](#spacing-12-variable)
   - [✅carbon--spacing [variable]](#carbon--spacing-variable)
+  - [✅spacing [variable]](#spacing-variable)
   - [✅spacing-01 [variable]](#spacing-01-variable)
   - [✅spacing-02 [variable]](#spacing-02-variable)
   - [✅spacing-03 [variable]](#spacing-03-variable)
@@ -96,7 +130,10 @@
   - [✅spacing-11 [variable]](#spacing-11-variable)
   - [✅spacing-12 [variable]](#spacing-12-variable)
   - [✅map-deep-get [function]](#map-deep-get-function)
+  - [✅map-deep-get [function]](#map-deep-get-function)
   - [✅carbon--key-by-index [function]](#carbon--key-by-index-function)
+  - [✅key-by-index [function]](#key-by-index-function)
+  - [✅last-map-item [function]](#last-map-item-function)
   - [✅last-map-item [function]](#last-map-item-function)
 
 <!-- tocstop -->
@@ -119,6 +156,22 @@ $carbon--grid-gutter: carbon--rem(32px);
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 
+### ✅grid-gutter [variable]
+
+Carbon gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-gutter: convert.rem(32px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--grid-gutter--condensed [variable]
 
 Carbon condensed gutter size in rem
@@ -135,6 +188,22 @@ $carbon--grid-gutter--condensed: carbon--rem(1px);
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Number`
 
+### ✅grid-gutter--condensed [variable]
+
+Carbon condensed gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-gutter--condensed: convert.rem(1px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--grid-breakpoints [variable]
 
 <details>
@@ -175,6 +244,46 @@ $carbon--grid-breakpoints: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `Map`
 
+### ✅grid-breakpoints [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Map`
+
 ### ✅carbon--breakpoint-next [function]
 
 Get the value of the next breakpoint, or null for the last breakpoint
@@ -209,6 +318,40 @@ Get the value of the next breakpoint, or null for the last breakpoint
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Returns**: `String`
 
+### ✅breakpoint-next [function]
+
+Get the value of the next breakpoint, or null for the last breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name                | Description                                                                                                     | Type     | Default value            |
+| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
+| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
+| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
+| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
 ### ✅carbon--breakpoint-prev [function]
 
 Get the value of the previous breakpoint, or null for the first breakpoint
@@ -243,6 +386,40 @@ Get the value of the previous breakpoint, or null for the first breakpoint
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Returns**: `String`
 
+### ✅breakpoint-prev [function]
+
+Get the value of the previous breakpoint, or null for the first breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-prev(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return list.nth($breakpoint-names, $n - 1);
+  }
+  @return null;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name                | Description                                                                                                     | Type     | Default value            |
+| ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------ |
+| `$name`             | The name of the brekapoint                                                                                      | `String` | —                        |
+| `$breakpoints`      | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints`      |
+| `$breakpoint-names` | A list of names from the `$breakpoints` map                                                                     | `List`   | `map-keys($breakpoints)` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
 ### ✅carbon--is-smallest-breakpoint [function]
 
 Check to see if the given breakpoint name
@@ -273,6 +450,33 @@ Check to see if the given breakpoint name
 - **Used by**:
   - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
 
+### ✅is-smallest-breakpoint [function]
+
+Check to see if the given breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @return list.index(map.keys($breakpoints), $name) == 1;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                                                                                     | Type     | Default value       |
+| -------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------- |
+| `$name`        | The name of the brekapoint                                                                                      | `String` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map`    | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Bool`
+- **Used by**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+
 ### ✅carbon--largest-breakpoint-name [function]
 
 Returns the largest breakpoint name
@@ -304,6 +508,60 @@ Returns the largest breakpoint name
 - **Used by**:
   - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
 
+### ✅largest-breakpoint-name [function]
+
+Returns the largest breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: list.length($breakpoints);
+  @return key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type  | Default value       |
+| -------------- | ---------------------------------------------- | ----- | ------------------- |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+- **Requires**:
+  - [key-by-index [function]](#key-by-index-function)
+- **Used by**:
+  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
+
+### ✅breakpoint-infix [function]
+
+Get the infix for a given breakpoint in a list of breakpoints. Usesful for
+generate the size part in a selector, for example: `.prefix--col-sm-2`.
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function breakpoint-infix($name) {
+  @return '-#{$name}';
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name    | Description                | Type     | Default value |
+| ------- | -------------------------- | -------- | ------------- |
+| `$name` | The name of the breakpoint | `String` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String`
+
 ### ✅carbon--breakpoint-infix [function]
 
 Get the infix for a given breakpoint in a list of breakpoints. Usesful for
@@ -329,6 +587,51 @@ generate the size part in a selector, for example: `.prefix--col-sm-2`.
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Returns**: `String`
 
+### ✅breakpoint-up [mixin]
+
+Generate a media query from the width of the given breakpoint to infinity
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width);
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @media (min-width: $width) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [is-smallest-breakpoint [function]](#is-smallest-breakpoint-function)
+- **Used by**:
+  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
+  - [breakpoint [mixin]](#breakpoint-mixin)
+
 ### ✅carbon--breakpoint-up [mixin]
 
 Generate a media query from the width of the given breakpoint to infinity
@@ -374,6 +677,49 @@ Generate a media query from the width of the given breakpoint to infinity
   - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
 
+### ✅breakpoint-down [mixin]
+
+Generate a media query for the maximum width of the given styles
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width) - 0.02;
+    @media (max-width: $width) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Used by**:
+  - [breakpoint-between [mixin]](#breakpoint-between-mixin)
+
 ### ✅carbon--breakpoint-down [mixin]
 
 Generate a media query for the maximum width of the given styles
@@ -417,6 +763,55 @@ Generate a media query for the maximum width of the given styles
 - **Used by**:
   - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
 
+### ✅breakpoint-between [mixin]
+
+Generate a media query for the range between the lower and upper breakpoints
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $is-number-lower: meta.type-of($lower) == 'number';
+  $is-number-upper: meta.type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
+
+  @if $min and $max {
+    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  } @else if $min != null and $max == null {
+    @include breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include breakpoint-down($upper) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$lower`       | —                                              | `String \| Number` | —                   |
+| `$upper`       | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+  - [breakpoint-down [mixin]](#breakpoint-down-mixin)
+
 ### ✅carbon--breakpoint-between [mixin]
 
 Generate a media query for the range between the lower and upper breakpoints
@@ -470,6 +865,34 @@ Generate a media query for the range between the lower and upper breakpoints
   - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
   - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
 
+### ✅largest-breakpoint [mixin]
+
+Generate media query for the largest breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type  | Default value       |
+| -------------- | ---------------------------------------------- | ----- | ------------------- |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint [mixin]](#breakpoint-mixin)
+  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+
 ### ✅carbon--largest-breakpoint [mixin]
 
 Generate media query for the largest breakpoint
@@ -498,6 +921,36 @@ Generate media query for the largest breakpoint
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
 
+### ✅breakpoint [mixin]
+
+Generate a media query for a given breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @include breakpoint-up($name, $breakpoints) {
+    @content;
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description                                    | Type               | Default value       |
+| -------------- | ---------------------------------------------- | ------------------ | ------------------- |
+| `$name`        | —                                              | `String \| Number` | —                   |
+| `$breakpoints` | A map of breakpoints where the key is the name | `Map`              | `$grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [breakpoint-up [mixin]](#breakpoint-up-mixin)
+- **Used by**:
+  - [largest-breakpoint [mixin]](#largest-breakpoint-mixin)
+
 ### ✅carbon--breakpoint [mixin]
 
 Generate a media query for a given breakpoint
@@ -722,6 +1175,25 @@ $carbon--base-font-size: 16px;
   - [carbon--rem [function]](#carbon--rem-function)
   - [carbon--em [function]](#carbon--em-function)
 
+### ✅base-font-size [variable]
+
+Default font size
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$base-font-size: 16px;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [rem [function]](#rem-function)
+  - [em [function]](#em-function)
+
 ### ✅carbon--rem [function]
 
 Convert a given px unit to a rem unit
@@ -755,6 +1227,37 @@ Convert a given px unit to a rem unit
 - **Used by**:
   - [carbon--mini-units [function]](#carbon--mini-units-function)
 
+### ✅rem [function]
+
+Convert a given px unit to a rem unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $base-font-size) * 1rem;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name  | Description         | Type     | Default value |
+| ----- | ------------------- | -------- | ------------- |
+| `$px` | Number with px unit | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` Number with rem unit
+- **Requires**:
+  - [base-font-size [variable]](#base-font-size-variable)
+
 ### ✅carbon--em [function]
 
 Convert a given px unit to a em unit
@@ -786,6 +1289,37 @@ Convert a given px unit to a em unit
 - **Requires**:
   - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
 
+### ✅em [function]
+
+Convert a given px unit to a em unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function em($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $base-font-size) * 1em;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name  | Description         | Type     | Default value |
+| ----- | ------------------- | -------- | ------------- |
+| `$px` | Number with px unit | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` Number with em unit
+- **Requires**:
+  - [base-font-size [variable]](#base-font-size-variable)
+
 ### ✅carbon--fluid-spacing-01 [variable]
 
 <details>
@@ -802,6 +1336,20 @@ $carbon--fluid-spacing-01: 0;
 - **Aliased**:
   - `fluid-spacing-01`
 
+### ✅fluid-spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-01: 0;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--fluid-spacing-02 [variable]
 
 <details>
@@ -818,6 +1366,20 @@ $carbon--fluid-spacing-02: 2vw;
 - **Aliased**:
   - `fluid-spacing-02`
 
+### ✅fluid-spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-02: 2vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--fluid-spacing-03 [variable]
 
 <details>
@@ -834,6 +1396,20 @@ $carbon--fluid-spacing-03: 5vw;
 - **Aliased**:
   - `fluid-spacing-03`
 
+### ✅fluid-spacing-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-03: 5vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--fluid-spacing-04 [variable]
 
 <details>
@@ -850,17 +1426,50 @@ $carbon--fluid-spacing-04: 10vw;
 - **Aliased**:
   - `fluid-spacing-04`
 
-### ✅carbon--fluid-spacing [variable]
+### ✅fluid-spacing-04 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-04: 10vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
+### ✅carbon--fluid-spacing [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--fluid-spacing: (
+  $carbon--fluid-spacing-01,
+  $carbon--fluid-spacing-02,
+  $carbon--fluid-spacing-03,
+  $carbon--fluid-spacing-04
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
+### ✅fluid-spacing [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$carbon--fluid-spacing: (
-  $carbon--fluid-spacing-01,
-  $carbon--fluid-spacing-02,
-  $carbon--fluid-spacing-03,
-  $carbon--fluid-spacing-04
+$fluid-spacing: (
+  $fluid-spacing-01,
+  $fluid-spacing-02,
+  $fluid-spacing-03,
+  $fluid-spacing-04
 );
 ```
 
@@ -1436,6 +2045,20 @@ $carbon--spacing-01: 0.125rem;
 - **Aliased**:
   - `spacing-01`
 
+### ✅spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-01: 0.125rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-02 [variable]
 
 <details>
@@ -1452,6 +2075,20 @@ $carbon--spacing-02: 0.25rem;
 - **Aliased**:
   - `spacing-02`
 
+### ✅spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-02: 0.25rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-03 [variable]
 
 <details>
@@ -1468,6 +2105,20 @@ $carbon--spacing-03: 0.5rem;
 - **Aliased**:
   - `spacing-03`
 
+### ✅spacing-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-03: 0.5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-04 [variable]
 
 <details>
@@ -1484,6 +2135,20 @@ $carbon--spacing-04: 0.75rem;
 - **Aliased**:
   - `spacing-04`
 
+### ✅spacing-04 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-04: 0.75rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-05 [variable]
 
 <details>
@@ -1500,6 +2165,20 @@ $carbon--spacing-05: 1rem;
 - **Aliased**:
   - `spacing-05`
 
+### ✅spacing-05 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-05: 1rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-06 [variable]
 
 <details>
@@ -1516,6 +2195,20 @@ $carbon--spacing-06: 1.5rem;
 - **Aliased**:
   - `spacing-06`
 
+### ✅spacing-06 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-06: 1.5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-07 [variable]
 
 <details>
@@ -1532,6 +2225,20 @@ $carbon--spacing-07: 2rem;
 - **Aliased**:
   - `spacing-07`
 
+### ✅spacing-07 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-07: 2rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-08 [variable]
 
 <details>
@@ -1548,6 +2255,20 @@ $carbon--spacing-08: 2.5rem;
 - **Aliased**:
   - `spacing-08`
 
+### ✅spacing-08 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-08: 2.5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-09 [variable]
 
 <details>
@@ -1564,6 +2285,20 @@ $carbon--spacing-09: 3rem;
 - **Aliased**:
   - `spacing-09`
 
+### ✅spacing-09 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-09: 3rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-10 [variable]
 
 <details>
@@ -1580,6 +2315,20 @@ $carbon--spacing-10: 4rem;
 - **Aliased**:
   - `spacing-10`
 
+### ✅spacing-10 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-10: 4rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-11 [variable]
 
 <details>
@@ -1596,6 +2345,20 @@ $carbon--spacing-11: 5rem;
 - **Aliased**:
   - `spacing-11`
 
+### ✅spacing-11 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-11: 5rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing-12 [variable]
 
 <details>
@@ -1612,6 +2375,20 @@ $carbon--spacing-12: 6rem;
 - **Aliased**:
   - `spacing-12`
 
+### ✅spacing-12 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-12: 6rem;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
 ### ✅carbon--spacing [variable]
 
 <details>
@@ -1639,6 +2416,33 @@ $carbon--spacing: (
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Type**: `List`
 
+### ✅spacing [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing: (
+  $spacing-01,
+  $spacing-02,
+  $spacing-03,
+  $spacing-04,
+  $spacing-05,
+  $spacing-06,
+  $spacing-07,
+  $spacing-08,
+  $spacing-09,
+  $spacing-10,
+  $spacing-11,
+  $spacing-12
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
 ### ✅spacing-01 [variable]
 
 <details>
@@ -1847,6 +2651,34 @@ Map deep get
 - **Group**: [@carbon/layout](#carbonlayout)
 - **Returns**: `*` Desired value
 
+### ✅map-deep-get [function]
+
+Map deep get
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name    | Description | Type      | Default value |
+| ------- | ----------- | --------- | ------------- |
+| `$map`  | Map         | `Map`     | —             |
+| `$keys` | Key chain   | `Arglist` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `*` Desired value
+
 ### ✅carbon--key-by-index [function]
 
 Provide a map and index, and get back the relevant key value
@@ -1876,6 +2708,61 @@ Provide a map and index, and get back the relevant key value
   - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
   - [last-map-item [function]](#last-map-item-function)
 
+### ✅key-by-index [function]
+
+Provide a map and index, and get back the relevant key value
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function key-by-index($map, $index) {
+  $keys: map-keys($map);
+  @return nth($keys, $index);
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name     | Description | Type      | Default value |
+| -------- | ----------- | --------- | ------------- |
+| `$map`   | Map         | `Map`     | —             |
+| `$index` | Key chain   | `Integer` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `String` Desired value
+- **Used by**:
+  - [largest-breakpoint-name [function]](#largest-breakpoint-name-function)
+
+### ✅last-map-item [function]
+
+Pass in a map, and get the last one in the list back
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function last-map-item($map) {
+  $total-length: length($map);
+  @return map-get($map, carbon--key-by-index($map, $total-length));
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name   | Description | Type  | Default value |
+| ------ | ----------- | ----- | ------------- |
+| `$map` | Map         | `Map` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `*` Desired value
+- **Requires**:
+  - [carbon--key-by-index [function]](#carbon--key-by-index-function)
+
 ### ✅last-map-item [function]
 
 Pass in a map, and get the last one in the list back
diff --git a/packages/layout/index.scss b/packages/layout/index.scss
new file mode 100644
index 000000000000..aba783cac8b9
--- /dev/null
+++ b/packages/layout/index.scss
@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+@forward 'scss/modules/breakpoint';
+@forward 'scss/modules/convert';
+@forward 'scss/modules/spacing';
+// TODO: should these be public?
+@forward 'scss/modules/utilities';
diff --git a/packages/layout/package.json b/packages/layout/package.json
index 1b751ec4ff60..bc5fb93d1e32 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -26,7 +26,7 @@
   },
   "scripts": {
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonLayout && node tasks/build.js && carbon-cli sassdoc \"scss/**/*.scss\"",
-    "clean": "rimraf es lib umd scss/generated"
+    "clean": "rimraf es lib umd scss/generated scss/modules/generated"
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.4.0",
diff --git a/packages/layout/scss/modules/_breakpoint.scss b/packages/layout/scss/modules/_breakpoint.scss
new file mode 100644
index 000000000000..e1dbcc9681e6
--- /dev/null
+++ b/packages/layout/scss/modules/_breakpoint.scss
@@ -0,0 +1,232 @@
+//
+// 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.
+//
+
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'convert';
+@use 'utilities';
+
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter: convert.rem(32px);
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter--condensed: convert.rem(1px);
+
+// Initial map of our breakpoints and their values
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+) !default;
+
+/// Get the value of the next breakpoint, or null for the last breakpoint
+/// @param {String} $name - The name of the brekapoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
+}
+
+/// Get the value of the previous breakpoint, or null for the first breakpoint
+/// @param {String} $name - The name of the brekapoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-prev(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return list.nth($breakpoint-names, $n - 1);
+  }
+  @return null;
+}
+
+/// Check to see if the given breakpoint name
+/// @param {String} $name - The name of the brekapoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @return {Bool}
+/// @access public
+/// @group @carbon/layout
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @return list.index(map.keys($breakpoints), $name) == 1;
+}
+
+/// Returns the largest breakpoint name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: list.length($breakpoints);
+  @return key-by-index($breakpoints, $total-breakpoints);
+}
+
+/// Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`.
+/// @param {String} $name - The name of the breakpoint
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-infix($name) {
+  @return '-#{$name}';
+}
+
+/// Generate a media query from the width of the given breakpoint to infinity
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width);
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @media (min-width: $width) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the maximum width of the given styles
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width) - 0.02;
+    @media (max-width: $width) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the range between the lower and upper breakpoints
+/// @param {String | Number} $lower
+/// @param {String | Number} $upper
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $is-number-lower: meta.type-of($lower) == 'number';
+  $is-number-upper: meta.type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
+
+  @if $min and $max {
+    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  } @else if $min != null and $max == null {
+    @include breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include breakpoint-down($upper) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
+  }
+}
+
+/// Generate media query for the largest breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+
+/// Generate a media query for a given breakpoint
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @include breakpoint-up($name, $breakpoints) {
+    @content;
+  }
+}
diff --git a/packages/layout/scss/modules/_convert.scss b/packages/layout/scss/modules/_convert.scss
new file mode 100644
index 000000000000..a7ec602db518
--- /dev/null
+++ b/packages/layout/scss/modules/_convert.scss
@@ -0,0 +1,40 @@
+//
+// 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.
+//
+
+/// Default font size
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$base-font-size: 16px !default;
+
+/// Convert a given px unit to a rem unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+@function rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $base-font-size) * 1rem;
+}
+
+/// Convert a given px unit to a em unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with em unit
+/// @access public
+/// @group @carbon/layout
+@function em($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $base-font-size) * 1em;
+}
diff --git a/packages/layout/scss/modules/_spacing.scss b/packages/layout/scss/modules/_spacing.scss
new file mode 100644
index 000000000000..42e124108c91
--- /dev/null
+++ b/packages/layout/scss/modules/_spacing.scss
@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@forward './generated/fluid-spacing';
+@forward './generated/spacing';
diff --git a/packages/layout/scss/modules/_utilities.scss b/packages/layout/scss/modules/_utilities.scss
new file mode 100644
index 000000000000..26a423de7b48
--- /dev/null
+++ b/packages/layout/scss/modules/_utilities.scss
@@ -0,0 +1,41 @@
+//
+// 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.
+//
+
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @carbon/layout
+@function key-by-index($map, $index) {
+  $keys: map-keys($map);
+  @return nth($keys, $index);
+}
+
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function last-map-item($map) {
+  $total-length: length($map);
+  @return map-get($map, carbon--key-by-index($map, $total-length));
+}
diff --git a/packages/layout/tasks/build.js b/packages/layout/tasks/build.js
index f09adee7d432..188cabbca73f 100644
--- a/packages/layout/tasks/build.js
+++ b/packages/layout/tasks/build.js
@@ -27,7 +27,9 @@ async function build() {
   reporter.info('Building scss files for layout...');
 
   const SCSS_DIR = path.resolve(__dirname, '../scss/generated');
+  const MODULES_DIR = path.resolve(__dirname, '../scss/modules/generated');
   const files = [
+    // v10
     {
       filepath: path.join(SCSS_DIR, '_spacing.scss'),
       builder() {
@@ -58,9 +60,24 @@ async function build() {
         return buildTokenFile(iconSize, 'icon-size');
       },
     },
+
+    // v11
+    {
+      filepath: path.join(MODULES_DIR, '_spacing.scss'),
+      builder() {
+        return buildModulesTokenFile(spacing, 'spacing', '');
+      },
+    },
+    {
+      filepath: path.join(MODULES_DIR, '_fluid-spacing.scss'),
+      builder() {
+        return buildModulesTokenFile(fluidSpacing, 'fluid-spacing', '');
+      },
+    },
   ];
 
   await fs.ensureDir(SCSS_DIR);
+  await fs.ensureDir(MODULES_DIR);
   for (const { filepath, builder } of files) {
     const { code } = generate(builder());
     await fs.writeFile(filepath, code);
@@ -149,6 +166,69 @@ function buildTokenFile(tokenScale, group) {
     ...aliases,
   ]);
 }
+/**
+ * Build a Sass Module token stylesheet for a given token scale and group. This will help
+ * generate the initial collection of tokens and a list of all tokens. In
+ * addition, it will generate aliases for these tokens.
+ *
+ * @param {Array} tokenScale
+ * @param {string} group
+ * @returns {StyleSheet}
+ */
+function buildModulesTokenFile(tokenScale, group) {
+  const FILE_BANNER = t.Comment(` Code generated by @carbon/layout. DO NOT EDIT.
+
+ Copyright IBM Corp. 2018, 2019
+
+ This source code is licensed under the Apache-2.0 license found in the
+ LICENSE file in the root directory of this source tree.
+`);
+
+  const values = tokenScale.map((value, index) => {
+    const name = formatStep(`${group}`, index + 1);
+    const shorthand = formatStep(group, index + 1);
+    const id = t.Identifier(name);
+    return [
+      name,
+      shorthand,
+      id,
+      t.Assignment({
+        id,
+        init: t.SassValue(value),
+        default: true,
+      }),
+    ];
+  });
+
+  const variables = values.flatMap(([_name, _shorthand, _id, assignment]) => {
+    const comment = t.Comment(`/ @type Number
+/ @access public
+/ @group @carbon/layout`);
+    return [comment, assignment, t.Newline()];
+  });
+
+  const list = [
+    t.Comment(`/ @type List
+/ @access public
+/ @group @carbon/layout`),
+    t.Assignment({
+      id: t.Identifier(group),
+      init: t.SassList({
+        elements: values.map(([_name, _shorthand, id]) => {
+          return id;
+        }),
+      }),
+    }),
+  ];
+
+  return t.StyleSheet([
+    FILE_BANNER,
+    t.Newline(),
+    ...variables,
+    ...list,
+    t.Newline(),
+  ]);
+}
 
 /**
  * Format the given step for a token name. Most often, this is to pad a `0` for
diff --git a/packages/motion/index.scss b/packages/motion/index.scss
new file mode 100644
index 000000000000..4f51523f6d51
--- /dev/null
+++ b/packages/motion/index.scss
@@ -0,0 +1,56 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+
+/// Common component easings
+/// @type Map
+/// @access public
+/// @group @carbon/motion
+$easings: (
+  standard: (
+    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
+  ),
+  entrance: (
+    productive: cubic-bezier(0, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0, 0, 0.3, 1),
+  ),
+  exit: (
+    productive: cubic-bezier(0.2, 0, 1, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 1, 1),
+  ),
+);
+
+/// Get the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - Can be `standard`, `entrance`, or `exit`
+/// @param {String} $mode [productive] - Can be `productive` or `expressive`
+/// @param {Map} $easings [$carbon--easings] - Easings map
+/// @access public
+/// @group @carbon/motion
+/// @return {Function} CSS `cubic-bezier()` function
+@function motion($name, $mode: productive, $easings: $easings) {
+  @if map.has-key($easings, $name) {
+    $easing: map.get($easings, $name);
+    @if map.has-key($easing, $mode) {
+      @return map.get($easing, $mode);
+    } @else {
+      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
+    }
+  } @else {
+    @error 'Unable to find an easing named #{$name} in our supported easings.';
+  }
+}
+
+/// Set the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - The name of the easing curve to apply
+/// @param {String} $mode - The mode for the easing curve to use
+/// @access public
+/// @group @carbon/motion
+@mixin motion($name, $mode) {
+  transition-timing-function: motion($name, $mode);
+}
diff --git a/yarn.lock b/yarn.lock
index 81719b973ed0..1b6efe3ceb98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9080,7 +9080,7 @@ __metadata:
     css-loader: ^3.4.2
     custom-event: ^1.0.0
     del: ~2.0.2
-    diff: ^3.4.0
+    diff: ^5.0.0
     express-handlebars: ^3.0.0
     fancy-log: ^1.3.0
     fibers: ^4.0.1
@@ -11788,7 +11788,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff@npm:3.5.0, diff@npm:^3.1.0, diff@npm:^3.2.0, diff@npm:^3.4.0, diff@npm:^3.5.0":
+"diff@npm:3.5.0, diff@npm:^3.1.0, diff@npm:^3.2.0, diff@npm:^3.5.0":
   version: 3.5.0
   resolution: "diff@npm:3.5.0"
   checksum: b975b73d7e8fa867cc9e68c293c664e14f11391203603e3f4518689c19fe8e391b4d9e4df3df5b3e51adc6cd81bcb414c80c1666e2f6cf66067f60177eec01d1
@@ -11802,6 +11802,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "diff@npm:5.0.0"
+  checksum: ef241d3b20017b8a1a6f20d184035b836de662203638e16eb57267653a56392ea82e1f9c12b28836e6e22aa25c28c59847aaeb35dd65e77e75c822c7e848e7e8
+  languageName: node
+  linkType: hard
+
 "diffie-hellman@npm:^5.0.0":
   version: 5.0.3
   resolution: "diffie-hellman@npm:5.0.3"