@carbon/layout 10.0.0-rc.0 → 10.2.0

package/docs/sass.md

@@ -0,0 +1,1681 @@
+# Sass API
+
+| Mark | Description                                                |
+| ---- | ---------------------------------------------------------- |
+| ✅   | Public functions, mixins, placeholders, and variables      |
+| ❌   | Private items - not supported outside package's build      |
+| ⚠️   | Deprecated items - may not be available in future releases |
+
+<!-- toc -->
+
+- [@carbon/layout](#carbonlayout)
+  - [✅carbon--grid-gutter [variable]](#carbon--grid-gutter-variable)
+  - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable)
+  - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable)
+  - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function)
+  - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function)
+  - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
+  - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
+  - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
+  - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
+  - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
+  - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
+  - [✅carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [✅carbon--base-font-size [variable]](#carbon--base-font-size-variable)
+  - [✅carbon--rem [function]](#carbon--rem-function)
+  - [✅carbon--em [function]](#carbon--em-function)
+  - [✅carbon--get-column-width [function]](#carbon--get-column-width-function)
+  - [✅carbon--key-height-scales [variable]](#carbon--key-height-scales-variable)
+  - [✅carbon--key-height [function]](#carbon--key-height-function)
+  - [✅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)
+  - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
+  - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+  - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
+  - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
+  - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
+  - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
+  - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
+  - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
+  - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable)
+  - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable)
+  - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable)
+  - [✅carbon--spacing [variable]](#carbon--spacing-variable)
+  - [✅spacing-01 [variable]](#spacing-01-variable)
+  - [✅spacing-02 [variable]](#spacing-02-variable)
+  - [✅spacing-03 [variable]](#spacing-03-variable)
+  - [✅spacing-04 [variable]](#spacing-04-variable)
+  - [✅spacing-05 [variable]](#spacing-05-variable)
+  - [✅spacing-06 [variable]](#spacing-06-variable)
+  - [✅spacing-07 [variable]](#spacing-07-variable)
+  - [✅spacing-08 [variable]](#spacing-08-variable)
+  - [✅spacing-09 [variable]](#spacing-09-variable)
+  - [✅spacing-10 [variable]](#spacing-10-variable)
+  - [✅spacing-11 [variable]](#spacing-11-variable)
+  - [✅spacing-12 [variable]](#spacing-12-variable)
+  - [✅carbon--layout-01 [variable]](#carbon--layout-01-variable)
+  - [✅carbon--layout-02 [variable]](#carbon--layout-02-variable)
+  - [✅carbon--layout-03 [variable]](#carbon--layout-03-variable)
+  - [✅carbon--layout-04 [variable]](#carbon--layout-04-variable)
+  - [✅carbon--layout-05 [variable]](#carbon--layout-05-variable)
+  - [✅carbon--layout-06 [variable]](#carbon--layout-06-variable)
+  - [✅carbon--layout-07 [variable]](#carbon--layout-07-variable)
+  - [✅carbon--layout [variable]](#carbon--layout-variable)
+  - [✅layout-01 [variable]](#layout-01-variable)
+  - [✅layout-02 [variable]](#layout-02-variable)
+  - [✅layout-03 [variable]](#layout-03-variable)
+  - [✅layout-04 [variable]](#layout-04-variable)
+  - [✅layout-05 [variable]](#layout-05-variable)
+  - [✅layout-06 [variable]](#layout-06-variable)
+  - [✅layout-07 [variable]](#layout-07-variable)
+  - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable)
+  - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable)
+  - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable)
+  - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable)
+  - [✅carbon--fluid-spacing [variable]](#carbon--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)
+  - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable)
+  - [✅map-deep-get [function]](#map-deep-get-function)
+  - [✅carbon--key-by-index [function]](#carbon--key-by-index-function)
+  - [✅last-map-item [function]](#last-map-item-function)
+
+<!-- tocstop -->
+
+## @carbon/layout
+
+### ✅carbon--grid-gutter [variable]
+
+Carbon gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--grid-gutter: carbon--rem(32px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
+### ✅carbon--grid-gutter--condensed [variable]
+
+Carbon condensed gutter size in rem
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--grid-gutter--condensed: carbon--rem(2px);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
+### ✅carbon--grid-breakpoints [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: carbon--rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: carbon--rem(16px),
+    width: carbon--rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: carbon--rem(16px),
+    width: carbon--rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: carbon--rem(16px),
+    width: carbon--rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: carbon--rem(16px),
+    width: carbon--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
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--breakpoint-next(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: index($breakpoint-names, $name);
+  @if $n != null and $n < length($breakpoint-names) {
+    @return 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`    | `$carbon--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
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--breakpoint-prev(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return 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`    | `$carbon--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
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--is-smallest-breakpoint(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints
+) {
+  @return 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`    | `$carbon--grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Bool`
+- **Used by**:
+  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-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)
+
+### ✅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`
+
+### ✅carbon--breakpoint-up [mixin]
+
+Generate a media query up to the width of the given breakpoint name
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
+  @if 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 carbon--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`              | `$carbon--grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
+- **Used by**:
+  - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
+  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+
+### ✅carbon--breakpoint-down [mixin]
+
+Generate a media query for the maximum width of the given styles
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
+  @if type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map-has-key($breakpoints, $name) {
+    $breakpoint: map-get($breakpoints, $name);
+    $width: map-get($breakpoint, width);
+    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @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`              | `$carbon--grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
+- **Used by**:
+  - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
+
+### ✅carbon--breakpoint-between [mixin]
+
+Generate a media query for the range between the lower and upper breakpoints
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin carbon--breakpoint-between(
+  $lower,
+  $upper,
+  $breakpoints: $carbon--grid-breakpoints
+) {
+  $is-number-lower: type-of($lower) == 'number';
+  $is-number-upper: 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 carbon--breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include carbon--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`              | `$carbon--grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+  - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
+
+### ✅carbon--largest-breakpoint [mixin]
+
+Generate media query for the largest breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
+  @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
+    @content;
+  }
+}
+```
+
+</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)
+- **Requires**:
+  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+  - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
+
+### ✅carbon--breakpoint [mixin]
+
+Generate a media query for a given breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
+  @include carbon--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`              | `$carbon--grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Requires**:
+  - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
+- **Used by**:
+  - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
+
+### ✅carbon--base-font-size [variable]
+
+Default font size
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--base-font-size: 16px;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+  - [carbon--rem [function]](#carbon--rem-function)
+  - [carbon--em [function]](#carbon--em-function)
+
+### ✅carbon--rem [function]
+
+Convert a given px unit to a rem unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--rem($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)
+
+### ✅carbon--em [function]
+
+Convert a given px unit to a em unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--em($px) {
+  @return ($px / $carbon--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**:
+  - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
+
+### ✅carbon--get-column-width [function]
+
+Get the column width for a given breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--get-column-width(
+  $breakpoint,
+  $breakpoints: $carbon--grid-breakpoints
+) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    $values: map-get($breakpoints, $breakpoint);
+    $width: map-get($values, width);
+    $margin: map-get($values, margin);
+    $columns: map-get($values, columns);
+
+    @return ($width - (2 * $margin)) / $columns;
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name           | Description | Type     | Default value               |
+| -------------- | ----------- | -------- | --------------------------- |
+| `$breakpoint`  | —           | `String` | —                           |
+| `$breakpoints` | —           | `Map`    | `$carbon--grid-breakpoints` |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` In rem
+
+### ✅carbon--key-height-scales [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--key-height-scales: (
+  sm: (
+    carbon--get-column-width(sm),
+    carbon--get-column-width(sm) * 2,
+    carbon--get-column-width(sm) * 3,
+    carbon--get-column-width(sm) * 4,
+    carbon--get-column-width(sm) * 5,
+    carbon--get-column-width(sm) * 6,
+  ),
+  md: (
+    carbon--get-column-width(md),
+    carbon--get-column-width(md) * 2,
+    carbon--get-column-width(md) * 3,
+    carbon--get-column-width(md) * 4,
+    carbon--get-column-width(md) * 5,
+    carbon--get-column-width(md) * 6,
+  ),
+  lg: (
+    carbon--get-column-width(lg),
+    carbon--get-column-width(lg) * 2,
+    carbon--get-column-width(lg) * 3,
+    carbon--get-column-width(lg) * 4,
+    carbon--get-column-width(lg) * 5,
+    carbon--get-column-width(lg) * 6,
+    carbon--get-column-width(lg) * 7,
+    carbon--get-column-width(lg) * 8,
+  ),
+  xlg: (
+    carbon--get-column-width(xlg),
+    carbon--get-column-width(xlg) * 2,
+    carbon--get-column-width(xlg) * 3,
+    carbon--get-column-width(xlg) * 4,
+    carbon--get-column-width(xlg) * 5,
+    carbon--get-column-width(xlg) * 6,
+    carbon--get-column-width(xlg) * 7,
+    carbon--get-column-width(xlg) * 8,
+  ),
+  max: (
+    carbon--get-column-width(max),
+    carbon--get-column-width(max) * 2,
+    carbon--get-column-width(max) * 3,
+    carbon--get-column-width(max) * 4,
+    carbon--get-column-width(max) * 5,
+    carbon--get-column-width(max) * 6,
+    carbon--get-column-width(max) * 7,
+    carbon--get-column-width(max) * 8,
+  ),
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Map`
+- **Used by**:
+  - [carbon--key-height [function]](#carbon--key-height-function)
+
+### ✅carbon--key-height [function]
+
+Get the value of a key height step at a given breakpoint
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--key-height($breakpoint, $step) {
+  @if map-has-key($carbon--key-height-scales, $breakpoint) {
+    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name          | Description | Type     | Default value |
+| ------------- | ----------- | -------- | ------------- |
+| `$breakpoint` | —           | `String` | —             |
+| `$step`       | —           | `Number` | —             |
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Returns**: `Number` In rem
+- **Requires**:
+  - [carbon--key-height-scales [variable]](#carbon--key-height-scales-variable)
+
+### ✅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]
+
+0.125rem (2px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-01: carbon--mini-units(0.25);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-01`
+
+### ✅carbon--spacing-02 [variable]
+
+0.25rem (4px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-02: carbon--mini-units(0.5);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-02`
+
+### ✅carbon--spacing-03 [variable]
+
+0.5rem (8px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-03: carbon--mini-units(1);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-03`
+
+### ✅carbon--spacing-04 [variable]
+
+0.75rem (12px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-04: carbon--mini-units(1.5);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-04`
+
+### ✅carbon--spacing-05 [variable]
+
+1rem (16px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-05: carbon--mini-units(2);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-05`
+
+### ✅carbon--spacing-06 [variable]
+
+1.5rem (24px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-06: carbon--mini-units(3);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-06`
+
+### ✅carbon--spacing-07 [variable]
+
+2rem (32px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-07: carbon--mini-units(4);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-07`
+
+### ✅carbon--spacing-08 [variable]
+
+2.5rem (40px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-08: carbon--mini-units(5);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-08`
+
+### ✅carbon--spacing-09 [variable]
+
+3rem (48px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-09: carbon--mini-units(6);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-09`
+
+### ✅carbon--spacing-10 [variable]
+
+4rem (64px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-10: carbon--mini-units(8);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-10`
+
+### ✅carbon--spacing-11 [variable]
+
+5rem (80px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-11: carbon--mini-units(10);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-11`
+
+### ✅carbon--spacing-12 [variable]
+
+6rem (96px) spacing with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing-12: carbon--mini-units(12);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `spacing-12`
+
+### ✅carbon--spacing [variable]
+
+All spacing increments in a map
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--spacing: (
+  $carbon--spacing-01,
+  $carbon--spacing-02,
+  $carbon--spacing-03,
+  $carbon--spacing-04,
+  $carbon--spacing-05,
+  $carbon--spacing-06,
+  $carbon--spacing-07,
+  $carbon--spacing-08,
+  $carbon--spacing-09,
+  $carbon--spacing-10,
+  $carbon--spacing-11,
+  $carbon--spacing-12
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Map`
+
+### ✅spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-01: $carbon--spacing-01;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-01`
+
+### ✅spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-02: $carbon--spacing-02;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-02`
+
+### ✅spacing-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-03: $carbon--spacing-03;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-03`
+
+### ✅spacing-04 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-04: $carbon--spacing-04;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-04`
+
+### ✅spacing-05 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-05: $carbon--spacing-05;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-05`
+
+### ✅spacing-06 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-06: $carbon--spacing-06;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-06`
+
+### ✅spacing-07 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-07: $carbon--spacing-07;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-07`
+
+### ✅spacing-08 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-08: $carbon--spacing-08;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-08`
+
+### ✅spacing-09 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-09: $carbon--spacing-09;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-09`
+
+### ✅spacing-10 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-10: $carbon--spacing-10;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-10`
+
+### ✅spacing-11 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-11: $carbon--spacing-11;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-11`
+
+### ✅spacing-12 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$spacing-12: $carbon--spacing-12;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--spacing-12`
+
+### ✅carbon--layout-01 [variable]
+
+1rem (16px) layout with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout-01: carbon--mini-units(2);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `layout-01`
+
+### ✅carbon--layout-02 [variable]
+
+1.5rem (24px) layout with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout-02: carbon--mini-units(3);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `layout-02`
+
+### ✅carbon--layout-03 [variable]
+
+2rem (32px) layout with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout-03: carbon--mini-units(4);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `layout-03`
+
+### ✅carbon--layout-04 [variable]
+
+3rem (48px) layout with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout-04: carbon--mini-units(6);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `layout-04`
+
+### ✅carbon--layout-05 [variable]
+
+4rem (64px) layout with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout-05: carbon--mini-units(8);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `layout-05`
+
+### ✅carbon--layout-06 [variable]
+
+4rem (96px) layout with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout-06: carbon--mini-units(12);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `layout-06`
+
+### ✅carbon--layout-07 [variable]
+
+10rem (160px) layout with default mini unit
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout-07: carbon--mini-units(20);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `layout-07`
+
+### ✅carbon--layout [variable]
+
+All layout increments in a map
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--layout: (
+  $carbon--layout-01,
+  $carbon--layout-02,
+  $carbon--layout-03,
+  $carbon--layout-04,
+  $carbon--layout-05,
+  $carbon--layout-06,
+  $carbon--layout-07
+);
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Map`
+
+### ✅layout-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$layout-01: $carbon--layout-01;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-01`
+
+### ✅layout-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$layout-02: $carbon--layout-02;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-02`
+
+### ✅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`
+
+### ✅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`
+
+### ✅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`
+
+### ✅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`
+
+### ✅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`
+
+### ✅carbon--fluid-spacing-01 [variable]
+
+0vw fluid spacing
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--fluid-spacing-01: 0;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `fluid-spacing-01`
+
+### ✅carbon--fluid-spacing-02 [variable]
+
+2vw fluid spacing
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--fluid-spacing-02: 2vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `fluid-spacing-02`
+
+### ✅carbon--fluid-spacing-03 [variable]
+
+5vw fluid spacing
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--fluid-spacing-03: 5vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `fluid-spacing-03`
+
+### ✅carbon--fluid-spacing-04 [variable]
+
+10vw fluid spacing
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$carbon--fluid-spacing-04: 10vw;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+  - `fluid-spacing-04`
+
+### ✅carbon--fluid-spacing [variable]
+
+All fluid spacing increments in a map
+
+<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**: `Map`
+
+### ✅fluid-spacing-01 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-01: $carbon--fluid-spacing-01;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--fluid-spacing-01`
+
+### ✅fluid-spacing-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-02: $carbon--fluid-spacing-02;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--fluid-spacing-02`
+
+### ✅fluid-spacing-03 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-03: $carbon--fluid-spacing-03;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--fluid-spacing-03`
+
+### ✅fluid-spacing-04 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$fluid-spacing-04: $carbon--fluid-spacing-04;
+```
+
+</details>
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--fluid-spacing-04`
+
+### ✅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
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@function carbon--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**:
+  - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
+  - [last-map-item [function]](#last-map-item-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)