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
- **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
-
-
-Source code
-
-```scss
-$black: #000000;
-```
-
-
-- **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
Source code
```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,
+ )
+ ),
+ )
+);
```
-- **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.
Source code
```scss
-$black-100: #000000;
-```
-
-
-
-- **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);
-
-Source code
+ // 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;
+ }
+}
```
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-20 [variable]
-
-Value for blue-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$blue-20: #d0e2ff;
-```
+- **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/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.
Source code
```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);
+ }
+}
```
-- **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.
Source code
```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);
+ }
+}
```
-- **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.
Source code
```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);
+ }
-
+ @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%;
+ }
-
-Source code
+ @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);
+ }
+ }
+ }
+ }
+ }
+}
```
-- **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.
Source code
```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;
+}
```
-- **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
-
-
-Source code
-
-```scss
-$blue-80: #002d9c;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-90 [variable]
-
-Value for blue-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$blue-90: #001d6c;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-100 [variable]
-
-Value for blue-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$blue-100: #001141;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-10: #f2f4f8;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-20: #dde1e6;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-30: #c1c7cd;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-40: #a2a9b0;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-50: #878d96;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-60: #697077;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-70: #4d5358;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-80: #343a3f;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-90: #21272a;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-100: #121619;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-10 [variable]
-
-Value for cyan-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-10: #e5f6ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-20 [variable]
-
-Value for cyan-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-20: #bae6ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-30 [variable]
-
-Value for cyan-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-30: #82cfff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-40 [variable]
-
-Value for cyan-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-40: #33b1ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-50 [variable]
-
-Value for cyan-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-50: #1192e8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-60 [variable]
-
-Value for cyan-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-60: #0072c3;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-70 [variable]
-
-Value for cyan-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-70: #00539a;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-80 [variable]
-
-Value for cyan-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-80: #003a6d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-90 [variable]
-
-Value for cyan-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-90: #012749;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-100 [variable]
-
-Value for cyan-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-100: #061727;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-10 [variable]
-
-Value for gray-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-10: #f4f4f4;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-20 [variable]
-
-Value for gray-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-20: #e0e0e0;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-30 [variable]
-
-Value for gray-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-30: #c6c6c6;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-40 [variable]
-
-Value for gray-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-40: #a8a8a8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-50 [variable]
-
-Value for gray-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-50: #8d8d8d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-60 [variable]
-
-Value for gray-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-60: #6f6f6f;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-70 [variable]
-
-Value for gray-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-70: #525252;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-80 [variable]
-
-Value for gray-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-80: #393939;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-90 [variable]
-
-Value for gray-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-90: #262626;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-100 [variable]
-
-Value for gray-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-100: #161616;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-10 [variable]
-
-Value for green-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-10: #defbe6;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-20 [variable]
-
-Value for green-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-20: #a7f0ba;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-30 [variable]
-
-Value for green-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-30: #6fdc8c;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-40 [variable]
-
-Value for green-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-40: #42be65;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-50 [variable]
-
-Value for green-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-50: #24a148;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-60 [variable]
-
-Value for green-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-60: #198038;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-70 [variable]
-
-Value for green-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-70: #0e6027;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-80 [variable]
-
-Value for green-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-80: #044317;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-90 [variable]
-
-Value for green-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-90: #022d0d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-100 [variable]
-
-Value for green-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-100: #071908;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-10 [variable]
-
-Value for magenta-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-10: #fff0f7;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-20 [variable]
-
-Value for magenta-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-20: #ffd6e8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-30 [variable]
-
-Value for magenta-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-30: #ffafd2;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-40 [variable]
-
-Value for magenta-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-40: #ff7eb6;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-50 [variable]
-
-Value for magenta-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-50: #ee5396;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-60 [variable]
-
-Value for magenta-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-60: #d02670;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-70 [variable]
-
-Value for magenta-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-70: #9f1853;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-80 [variable]
-
-Value for magenta-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-80: #740937;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-90 [variable]
-
-Value for magenta-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-90: #510224;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-100 [variable]
-
-Value for magenta-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-100: #2a0a18;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-40 [variable]
-
-Value for orange-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$orange-40: #ff832b;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-60 [variable]
-
-Value for orange-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$orange-60: #ba4e00;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-70 [variable]
-
-Value for orange-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$orange-70: #8a3800;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-10 [variable]
-
-Value for purple-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-10: #f6f2ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-20 [variable]
-
-Value for purple-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-20: #e8daff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-30 [variable]
-
-Value for purple-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-30: #d4bbff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-40 [variable]
-
-Value for purple-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-40: #be95ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-50 [variable]
-
-Value for purple-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-50: #a56eff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-60 [variable]
-
-Value for purple-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-60: #8a3ffc;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-70 [variable]
-
-Value for purple-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-70: #6929c4;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-80 [variable]
-
-Value for purple-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-80: #491d8b;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-90 [variable]
-
-Value for purple-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-90: #31135e;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-100 [variable]
-
-Value for purple-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-100: #1c0f30;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-10 [variable]
-
-Value for red-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-10: #fff1f1;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-20 [variable]
-
-Value for red-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-20: #ffd7d9;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-30 [variable]
-
-Value for red-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-30: #ffb3b8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-40 [variable]
-
-Value for red-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-40: #ff8389;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-50 [variable]
-
-Value for red-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-50: #fa4d56;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-60 [variable]
-
-Value for red-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-60: #da1e28;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-70 [variable]
-
-Value for red-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-70: #a2191f;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-80 [variable]
-
-Value for red-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-80: #750e13;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-90 [variable]
-
-Value for red-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-90: #520408;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-100 [variable]
-
-Value for red-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-100: #2d0709;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-10 [variable]
-
-Value for teal-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-10: #d9fbfb;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-20 [variable]
-
-Value for teal-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-20: #9ef0f0;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-30 [variable]
-
-Value for teal-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-30: #3ddbd9;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-40 [variable]
-
-Value for teal-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-40: #08bdba;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-50 [variable]
-
-Value for teal-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-50: #009d9a;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-60 [variable]
-
-Value for teal-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-60: #007d79;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-70 [variable]
-
-Value for teal-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-70: #005d5d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-80 [variable]
-
-Value for teal-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-80: #004144;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-90 [variable]
-
-Value for teal-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-90: #022b30;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-100 [variable]
-
-Value for teal-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-100: #081a1c;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-10: #f7f3f2;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-20: #e5e0df;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-30: #cac5c4;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-40: #ada8a8;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-50: #8f8b8b;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-60: #726e6e;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-70: #565151;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-80: #3c3838;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-90: #272525;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-100: #171414;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅white-0 [variable]
-
-Value for white-0 from the IBM Design Language
-
-
-Source code
-
-```scss
-$white-0: #ffffff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-20 [variable]
-
-Value for yellow-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-20: #fdd13a;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-30 [variable]
-
-Value for yellow-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-30: #f1c21b;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-40 [variable]
-
-Value for yellow-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-40: #d2a106;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-50 [variable]
-
-Value for yellow-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-50: #b28600;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅colors [variable]
-
-Colors from the IBM Design Language
-
-
-Source code
-
-```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,
- ),
-);
-```
-
-
-
-- **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
-
-
-Source code
-
-```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,
- )
- ),
- )
-);
-```
-
-
-
-- **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.
-
-
-Source code
-
-```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;
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```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);
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```scss
-@mixin carbon--make-col-offset($span, $columns) {
- $offset: $span / $columns;
- @if $offset == 0 {
- margin-left: 0;
- } @else {
- margin-left: percentage($offset);
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```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);
- }
- }
- }
- }
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```scss
-@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
- display: flex;
- flex-wrap: wrap;
- margin-right: -1 * $gutter / 2;
- margin-left: -1 * $gutter / 2;
-}
-```
-
-
-
-- **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.
Source code
@@ -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
+
+
+Source code
+
+```scss
+$grid-gutter: convert.rem(32px);
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+$grid-gutter--condensed: convert.rem(1px);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--grid-breakpoints [variable]
@@ -4315,6 +2129,46 @@ $carbon--grid-breakpoints: (
- **Group**: [@carbon/layout](#carbonlayout)
- **Type**: `Map`
+### ✅grid-breakpoints [variable]
+
+
+Source code
+
+```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),
+ ),
+);
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+ @return list.index(map.keys($breakpoints), $name) == 1;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function carbon--largest-breakpoint-name(
+ $breakpoints: $carbon--grid-breakpoints
+) {
+ $total-breakpoints: length($breakpoints);
+ @return carbon--key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+ $total-breakpoints: list.length($breakpoints);
+ @return key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+
+
+- **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`.
Source code
```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
+
+
+Source code
+
+```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)})';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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)})';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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)}).';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+ @include breakpoint(largest-breakpoint-name()) {
+ @content;
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+ @include breakpoint-up($name, $breakpoints) {
+ @content;
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+$base-font-size: 16px;
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
Source code
```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
Source code
```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]
+
+
+Source code
+
+```scss
+$fluid-spacing-01: 0;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
### ✅carbon--fluid-spacing-02 [variable]
@@ -4992,6 +3336,22 @@ $carbon--fluid-spacing-02: 2vw;
- **Aliased**:
- `fluid-spacing-02`
+### ✅fluid-spacing-02 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-02: 2vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
### ✅carbon--fluid-spacing-03 [variable]
@@ -5008,6 +3368,22 @@ $carbon--fluid-spacing-03: 5vw;
- **Aliased**:
- `fluid-spacing-03`
+### ✅fluid-spacing-03 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-03: 5vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
### ✅carbon--fluid-spacing-04 [variable]
@@ -5024,6 +3400,22 @@ $carbon--fluid-spacing-04: 10vw;
- **Aliased**:
- `fluid-spacing-04`
+### ✅fluid-spacing-04 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-04: 10vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
### ✅carbon--fluid-spacing [variable]
@@ -5043,6 +3435,25 @@ $carbon--fluid-spacing: (
- **Group**: [@carbon/layout](#carbonlayout)
- **Type**: `List`
+### ✅fluid-spacing [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing: (
+ $fluid-spacing-01,
+ $fluid-spacing-02,
+ $fluid-spacing-03,
+ $fluid-spacing-04
+);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
### ✅fluid-spacing-01 [variable]
@@ -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]
+
+
+Source code
+
+```scss
+$spacing-01: 0.125rem;
+```
+
+
+
+- **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]
@@ -5677,6 +4097,24 @@ $carbon--spacing-02: 0.25rem;
- [tags [mixin]](#tags-mixin)
- [tooltip [mixin]](#tooltip-mixin)
+### ✅spacing-02 [variable]
+
+
+Source code
+
+```scss
+$spacing-02: 0.25rem;
+```
+
+
+
+- **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]
@@ -5714,6 +4152,34 @@ $carbon--spacing-03: 0.5rem;
- [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
- [tooltip [mixin]](#tooltip-mixin)
+### ✅spacing-03 [variable]
+
+
+Source code
+
+```scss
+$spacing-03: 0.5rem;
+```
+
+
+
+- **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]
@@ -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]
+
+
+Source code
+
+```scss
+$spacing-04: 0.75rem;
+```
+
+
+
+- **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]
@@ -5780,6 +4264,36 @@ $carbon--spacing-05: 1rem;
- [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
- [tooltip [mixin]](#tooltip-mixin)
+### ✅spacing-05 [variable]
+
+
+Source code
+
+```scss
+$spacing-05: 1rem;
+```
+
+
+
+- **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]
@@ -5803,6 +4317,24 @@ $carbon--spacing-06: 1.5rem;
- [progress-indicator [mixin]](#progress-indicator-mixin)
- [padding-td [mixin]](#padding-td-mixin)
+### ✅spacing-06 [variable]
+
+
+Source code
+
+```scss
+$spacing-06: 1.5rem;
+```
+
+
+
+- **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]
@@ -5827,6 +4359,27 @@ $carbon--spacing-07: 2rem;
- [progress-indicator [mixin]](#progress-indicator-mixin)
- [tooltip [mixin]](#tooltip-mixin)
+### ✅spacing-07 [variable]
+
+
+Source code
+
+```scss
+$spacing-07: 2rem;
+```
+
+
+
+- **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]
@@ -5852,6 +4405,25 @@ $carbon--spacing-08: 2.5rem;
- [text-area [mixin]](#text-area-mixin)
- [text-input [mixin]](#text-input-mixin)
+### ✅spacing-08 [variable]
+
+
+Source code
+
+```scss
+$spacing-08: 2.5rem;
+```
+
+
+
+- **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]
@@ -5879,6 +4451,28 @@ $carbon--spacing-09: 3rem;
- [tabs [mixin]](#tabs-mixin)
- [tile [mixin]](#tile-mixin)
+### ✅spacing-09 [variable]
+
+
+Source code
+
+```scss
+$spacing-09: 3rem;
+```
+
+
+
+- **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]
@@ -5895,6 +4489,22 @@ $carbon--spacing-10: 4rem;
- **Aliased**:
- `spacing-10`
+### ✅spacing-10 [variable]
+
+
+Source code
+
+```scss
+$spacing-10: 4rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
### ✅carbon--spacing-11 [variable]
@@ -5911,6 +4521,22 @@ $carbon--spacing-11: 5rem;
- **Aliased**:
- `spacing-11`
+### ✅spacing-11 [variable]
+
+
+Source code
+
+```scss
+$spacing-11: 5rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
### ✅carbon--spacing-12 [variable]
@@ -5927,6 +4553,22 @@ $carbon--spacing-12: 6rem;
- **Aliased**:
- `spacing-12`
+### ✅spacing-12 [variable]
+
+
+Source code
+
+```scss
+$spacing-12: 6rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
### ✅carbon--spacing [variable]
@@ -5954,6 +4596,33 @@ $carbon--spacing: (
- **Group**: [@carbon/layout](#carbonlayout)
- **Type**: `List`
+### ✅spacing [variable]
+
+
+Source code
+
+```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
+);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
### ✅spacing-01 [variable]
@@ -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
+
+
+Source code
+
+```scss
+@function map-deep-get($map, $keys) {
+ @each $key in $keys {
+ $map: map-get($map, $key);
+ }
+ @return $map;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function key-by-index($map, $index) {
+ $keys: map-keys($map);
+ @return nth($keys, $index);
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function last-map-item($map) {
+ $total-length: length($map);
+ @return map-get($map, carbon--key-by-index($map, $total-length));
+}
+```
+
+
+
+- **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/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
- **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
-
-
-Source code
-
-```scss
-$black: #000000;
-```
-
-
-- **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
Source code
```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,
+ )
+ ),
+ )
+);
```
-- **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.
Source code
```scss
-$black-100: #000000;
-```
-
-
-
-- **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);
-
-Source code
+ // 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;
+ }
+}
```
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-20 [variable]
-
-Value for blue-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$blue-20: #d0e2ff;
-```
+- **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/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.
Source code
```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);
+ }
+}
```
-- **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.
Source code
```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);
+ }
+}
```
-- **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.
Source code
```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);
+ }
-
+ @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%;
+ }
-
-Source code
+ @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);
+ }
+ }
+ }
+ }
+ }
+}
```
-- **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.
Source code
```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;
+}
```
-- **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
-
-
-Source code
-
-```scss
-$blue-80: #002d9c;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-90 [variable]
-
-Value for blue-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$blue-90: #001d6c;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅blue-100 [variable]
-
-Value for blue-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$blue-100: #001141;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-10: #f2f4f8;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-20: #dde1e6;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-30: #c1c7cd;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-40: #a2a9b0;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-50: #878d96;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-60: #697077;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-70: #4d5358;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-80: #343a3f;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-90: #21272a;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$cool-gray-100: #121619;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-10 [variable]
-
-Value for cyan-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-10: #e5f6ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-20 [variable]
-
-Value for cyan-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-20: #bae6ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-30 [variable]
-
-Value for cyan-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-30: #82cfff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-40 [variable]
-
-Value for cyan-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-40: #33b1ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-50 [variable]
-
-Value for cyan-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-50: #1192e8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-60 [variable]
-
-Value for cyan-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-60: #0072c3;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-70 [variable]
-
-Value for cyan-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-70: #00539a;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-80 [variable]
-
-Value for cyan-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-80: #003a6d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-90 [variable]
-
-Value for cyan-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-90: #012749;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅cyan-100 [variable]
-
-Value for cyan-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$cyan-100: #061727;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-10 [variable]
-
-Value for gray-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-10: #f4f4f4;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-20 [variable]
-
-Value for gray-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-20: #e0e0e0;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-30 [variable]
-
-Value for gray-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-30: #c6c6c6;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-40 [variable]
-
-Value for gray-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-40: #a8a8a8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-50 [variable]
-
-Value for gray-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-50: #8d8d8d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-60 [variable]
-
-Value for gray-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-60: #6f6f6f;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-70 [variable]
-
-Value for gray-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-70: #525252;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-80 [variable]
-
-Value for gray-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-80: #393939;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-90 [variable]
-
-Value for gray-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-90: #262626;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅gray-100 [variable]
-
-Value for gray-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$gray-100: #161616;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-10 [variable]
-
-Value for green-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-10: #defbe6;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-20 [variable]
-
-Value for green-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-20: #a7f0ba;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-30 [variable]
-
-Value for green-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-30: #6fdc8c;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-40 [variable]
-
-Value for green-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-40: #42be65;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-50 [variable]
-
-Value for green-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-50: #24a148;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-60 [variable]
-
-Value for green-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-60: #198038;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-70 [variable]
-
-Value for green-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-70: #0e6027;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-80 [variable]
-
-Value for green-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-80: #044317;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-90 [variable]
-
-Value for green-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-90: #022d0d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅green-100 [variable]
-
-Value for green-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$green-100: #071908;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-10 [variable]
-
-Value for magenta-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-10: #fff0f7;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-20 [variable]
-
-Value for magenta-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-20: #ffd6e8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-30 [variable]
-
-Value for magenta-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-30: #ffafd2;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-40 [variable]
-
-Value for magenta-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-40: #ff7eb6;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-50 [variable]
-
-Value for magenta-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-50: #ee5396;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-60 [variable]
-
-Value for magenta-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-60: #d02670;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-70 [variable]
-
-Value for magenta-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-70: #9f1853;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-80 [variable]
-
-Value for magenta-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-80: #740937;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-90 [variable]
-
-Value for magenta-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-90: #510224;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅magenta-100 [variable]
-
-Value for magenta-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$magenta-100: #2a0a18;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-40 [variable]
-
-Value for orange-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$orange-40: #ff832b;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-60 [variable]
-
-Value for orange-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$orange-60: #ba4e00;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅orange-70 [variable]
-
-Value for orange-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$orange-70: #8a3800;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-10 [variable]
-
-Value for purple-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-10: #f6f2ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-20 [variable]
-
-Value for purple-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-20: #e8daff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-30 [variable]
-
-Value for purple-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-30: #d4bbff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-40 [variable]
-
-Value for purple-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-40: #be95ff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-50 [variable]
-
-Value for purple-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-50: #a56eff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-60 [variable]
-
-Value for purple-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-60: #8a3ffc;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-70 [variable]
-
-Value for purple-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-70: #6929c4;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-80 [variable]
-
-Value for purple-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-80: #491d8b;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-90 [variable]
-
-Value for purple-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-90: #31135e;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅purple-100 [variable]
-
-Value for purple-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$purple-100: #1c0f30;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-10 [variable]
-
-Value for red-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-10: #fff1f1;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-20 [variable]
-
-Value for red-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-20: #ffd7d9;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-30 [variable]
-
-Value for red-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-30: #ffb3b8;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-40 [variable]
-
-Value for red-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-40: #ff8389;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-50 [variable]
-
-Value for red-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-50: #fa4d56;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-60 [variable]
-
-Value for red-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-60: #da1e28;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-70 [variable]
-
-Value for red-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-70: #a2191f;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-80 [variable]
-
-Value for red-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-80: #750e13;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-90 [variable]
-
-Value for red-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-90: #520408;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅red-100 [variable]
-
-Value for red-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$red-100: #2d0709;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-10 [variable]
-
-Value for teal-10 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-10: #d9fbfb;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-20 [variable]
-
-Value for teal-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-20: #9ef0f0;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-30 [variable]
-
-Value for teal-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-30: #3ddbd9;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-40 [variable]
-
-Value for teal-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-40: #08bdba;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-50 [variable]
-
-Value for teal-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-50: #009d9a;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-60 [variable]
-
-Value for teal-60 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-60: #007d79;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-70 [variable]
-
-Value for teal-70 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-70: #005d5d;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-80 [variable]
-
-Value for teal-80 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-80: #004144;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-90 [variable]
-
-Value for teal-90 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-90: #022b30;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅teal-100 [variable]
-
-Value for teal-100 from the IBM Design Language
-
-
-Source code
-
-```scss
-$teal-100: #081a1c;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-10: #f7f3f2;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-20: #e5e0df;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-30: #cac5c4;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-40: #ada8a8;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-50: #8f8b8b;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-60: #726e6e;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-70: #565151;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-80: #3c3838;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-90: #272525;
-```
-
-
-
-- **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
-
-
-Source code
-
-```scss
-$warm-gray-100: #171414;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅white-0 [variable]
-
-Value for white-0 from the IBM Design Language
-
-
-Source code
-
-```scss
-$white-0: #ffffff;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-20 [variable]
-
-Value for yellow-20 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-20: #fdd13a;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-30 [variable]
-
-Value for yellow-30 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-30: #f1c21b;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-40 [variable]
-
-Value for yellow-40 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-40: #d2a106;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅yellow-50 [variable]
-
-Value for yellow-50 from the IBM Design Language
-
-
-Source code
-
-```scss
-$yellow-50: #b28600;
-```
-
-
-
-- **Group**: [@carbon/colors](#carboncolors)
-- **Used by**:
- - [carbon--colors [mixin]](#carbon--colors-mixin)
-
-### ✅colors [variable]
-
-Colors from the IBM Design Language
-
-
-Source code
-
-```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,
- ),
-);
-```
-
-
-
-- **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
-
-
-Source code
-
-```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,
- )
- ),
- )
-);
-```
-
-
-
-- **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.
-
-
-Source code
-
-```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;
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```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);
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```scss
-@mixin carbon--make-col-offset($span, $columns) {
- $offset: $span / $columns;
- @if $offset == 0 {
- margin-left: 0;
- } @else {
- margin-left: percentage($offset);
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```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);
- }
- }
- }
- }
- }
-}
-```
-
-
-
-- **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.
-
-
-Source code
-
-```scss
-@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
- display: flex;
- flex-wrap: wrap;
- margin-right: -1 * $gutter / 2;
- margin-left: -1 * $gutter / 2;
-}
-```
-
-
-
-- **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.
Source code
@@ -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
+
+
+Source code
+
+```scss
+$grid-gutter: convert.rem(32px);
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+$grid-gutter--condensed: convert.rem(1px);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--grid-breakpoints [variable]
@@ -4096,6 +1910,46 @@ $carbon--grid-breakpoints: (
- **Group**: [@carbon/layout](#carbonlayout)
- **Type**: `Map`
+### ✅grid-breakpoints [variable]
+
+
+Source code
+
+```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),
+ ),
+);
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+ @return list.index(map.keys($breakpoints), $name) == 1;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+ $total-breakpoints: list.length($breakpoints);
+ @return key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+
+
+- **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`.
+
+
+Source code
+
+```scss
+@function breakpoint-infix($name) {
+ @return '-#{$name}';
+}
+```
+
+
+
+- **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`.
+
+
+Source code
+
+```scss
+@function carbon--breakpoint-infix($name) {
+ @return '-#{$name}';
+}
+```
+
+
+
+- **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
Source code
```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
+
+
+Source code
+
+```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)})';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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)}).';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+ @include breakpoint(largest-breakpoint-name()) {
+ @content;
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+ @include breakpoint-up($name, $breakpoints) {
+ @content;
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+$base-font-size: 16px;
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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]
+
+
+Source code
+
+```scss
+$carbon--fluid-spacing-01: 0;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+ - `fluid-spacing-01`
+
+### ✅fluid-spacing-01 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-01: 0;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--fluid-spacing-02 [variable]
+
+
+Source code
+
+```scss
+$carbon--fluid-spacing-02: 2vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+ - `fluid-spacing-02`
+
+### ✅fluid-spacing-02 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-02: 2vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--fluid-spacing-03 [variable]
Source code
```scss
-$carbon--fluid-spacing-01: 0;
+$carbon--fluid-spacing-03: 5vw;
```
@@ -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]
Source code
```scss
-$carbon--fluid-spacing-02: 2vw;
+$fluid-spacing-03: 5vw;
```
- **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]
Source code
```scss
-$carbon--fluid-spacing-03: 5vw;
+$carbon--fluid-spacing-04: 10vw;
```
@@ -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]
Source code
```scss
-$carbon--fluid-spacing-04: 10vw;
+$fluid-spacing-04: 10vw;
```
- **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]
+
+
+Source code
+
+```scss
+$fluid-spacing: (
+ $fluid-spacing-01,
+ $fluid-spacing-02,
+ $fluid-spacing-03,
+ $fluid-spacing-04
+);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
### ✅fluid-spacing-01 [variable]
@@ -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]
+
+
+Source code
+
+```scss
+$layout-03: $carbon--layout-03;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-03`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-04 [variable]
+
+
+Source code
+
+```scss
+$layout-04: $carbon--layout-04;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-04`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-05 [variable]
+
+
+Source code
+
+```scss
+$layout-05: $carbon--layout-05;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-05`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-06 [variable]
+
+
+Source code
+
+```scss
+$layout-06: $carbon--layout-06;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Alias**: `carbon--layout-06`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅layout-07 [variable]
+
+
+Source code
+
+```scss
+$layout-07: $carbon--layout-07;
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+$carbon--mini-unit-size: 8px;
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function carbon--mini-units($count) {
+ @return carbon--rem($carbon--mini-unit-size * $count);
+}
+```
+
+
+
+- **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]
+
+
+Source code
+
+```scss
+$carbon--spacing-01: 0.125rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+ - `spacing-01`
+
+### ✅spacing-01 [variable]
+
+
+Source code
+
+```scss
+$spacing-01: 0.125rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--spacing-02 [variable]
+
+
+Source code
+
+```scss
+$carbon--spacing-02: 0.25rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+ - `spacing-02`
+
+### ✅spacing-02 [variable]
+
+
+Source code
+
+```scss
+$spacing-02: 0.25rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅carbon--spacing-03 [variable]
+
+
+Source code
+
+```scss
+$carbon--spacing-03: 0.5rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+- **Aliased**:
+ - `spacing-03`
+
+### ✅spacing-03 [variable]
Source code
```scss
-$layout-03: $carbon--layout-03;
+$spacing-03: 0.5rem;
```
- **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]
Source code
```scss
-$layout-04: $carbon--layout-04;
+$carbon--spacing-04: 0.75rem;
```
- **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]
Source code
```scss
-$layout-05: $carbon--layout-05;
+$spacing-04: 0.75rem;
```
- **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]
Source code
```scss
-$layout-06: $carbon--layout-06;
+$carbon--spacing-05: 1rem;
```
- **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]
Source code
```scss
-$layout-07: $carbon--layout-07;
+$spacing-05: 1rem;
```
- **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]
Source code
```scss
-$carbon--mini-unit-size: 8px;
+$carbon--spacing-06: 1.5rem;
```
- **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]
Source code
```scss
-@function carbon--mini-units($count) {
- @return carbon--rem($carbon--mini-unit-size * $count);
-}
+$spacing-06: 1.5rem;
```
-- **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]
Source code
```scss
-$carbon--spacing-01: 0.125rem;
+$carbon--spacing-07: 2rem;
```
@@ -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]
Source code
```scss
-$carbon--spacing-02: 0.25rem;
+$spacing-07: 2rem;
```
- **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]
Source code
```scss
-$carbon--spacing-03: 0.5rem;
+$carbon--spacing-08: 2.5rem;
```
@@ -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]
Source code
```scss
-$carbon--spacing-04: 0.75rem;
+$spacing-08: 2.5rem;
```
- **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]
Source code
```scss
-$carbon--spacing-05: 1rem;
+$carbon--spacing-09: 3rem;
```
@@ -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]
Source code
```scss
-$carbon--spacing-06: 1.5rem;
+$spacing-09: 3rem;
```
- **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]
Source code
```scss
-$carbon--spacing-07: 2rem;
+$carbon--spacing-10: 4rem;
```
@@ -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]
Source code
```scss
-$carbon--spacing-08: 2.5rem;
+$spacing-10: 4rem;
```
- **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]
Source code
```scss
-$carbon--spacing-09: 3rem;
+$carbon--spacing-11: 5rem;
```
@@ -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]
Source code
```scss
-$carbon--spacing-10: 4rem;
+$spacing-11: 5rem;
```
- **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]
Source code
```scss
-$carbon--spacing-11: 5rem;
+$carbon--spacing-12: 6rem;
```
@@ -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]
Source code
```scss
-$carbon--spacing-12: 6rem;
+$spacing-12: 6rem;
```
- **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]
+
+
+Source code
+
+```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
+);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
### ✅spacing-01 [variable]
@@ -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
+
+
+Source code
+
+```scss
+@function map-deep-get($map, $keys) {
+ @each $key in $keys {
+ $map: map-get($map, $key);
+ }
+ @return $map;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function key-by-index($map, $index) {
+ $keys: map-keys($map);
+ @return nth($keys, $index);
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function last-map-item($map) {
+ $total-length: length($map);
+ @return map-get($map, carbon--key-by-index($map, $total-length));
+}
+```
+
+
+
+- **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/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)
@@ -119,6 +156,22 @@ $carbon--grid-gutter: carbon--rem(32px);
- **Group**: [@carbon/layout](#carbonlayout)
- **Type**: `Number`
+### ✅grid-gutter [variable]
+
+Carbon gutter size in rem
+
+
+Source code
+
+```scss
+$grid-gutter: convert.rem(32px);
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+$grid-gutter--condensed: convert.rem(1px);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--grid-breakpoints [variable]
@@ -175,6 +244,46 @@ $carbon--grid-breakpoints: (
- **Group**: [@carbon/layout](#carbonlayout)
- **Type**: `Map`
+### ✅grid-breakpoints [variable]
+
+
+Source code
+
+```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),
+ ),
+);
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+ @return list.index(map.keys($breakpoints), $name) == 1;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+ $total-breakpoints: list.length($breakpoints);
+ @return key-by-index($breakpoints, $total-breakpoints);
+}
+```
+
+
+
+- **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`.
+
+
+Source code
+
+```scss
+@function breakpoint-infix($name) {
+ @return '-#{$name}';
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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)})';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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)})';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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)}).';
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+ @include breakpoint(largest-breakpoint-name()) {
+ @content;
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+ @include breakpoint-up($name, $breakpoints) {
+ @content;
+ }
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+$base-font-size: 16px;
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```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;
+}
+```
+
+
+
+- **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]
@@ -802,6 +1336,20 @@ $carbon--fluid-spacing-01: 0;
- **Aliased**:
- `fluid-spacing-01`
+### ✅fluid-spacing-01 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-01: 0;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--fluid-spacing-02 [variable]
@@ -818,6 +1366,20 @@ $carbon--fluid-spacing-02: 2vw;
- **Aliased**:
- `fluid-spacing-02`
+### ✅fluid-spacing-02 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-02: 2vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--fluid-spacing-03 [variable]
@@ -834,6 +1396,20 @@ $carbon--fluid-spacing-03: 5vw;
- **Aliased**:
- `fluid-spacing-03`
+### ✅fluid-spacing-03 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-03: 5vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--fluid-spacing-04 [variable]
@@ -850,17 +1426,50 @@ $carbon--fluid-spacing-04: 10vw;
- **Aliased**:
- `fluid-spacing-04`
-### ✅carbon--fluid-spacing [variable]
+### ✅fluid-spacing-04 [variable]
+
+
+Source code
+
+```scss
+$fluid-spacing-04: 10vw;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
+### ✅carbon--fluid-spacing [variable]
+
+
+Source code
+
+```scss
+$carbon--fluid-spacing: (
+ $carbon--fluid-spacing-01,
+ $carbon--fluid-spacing-02,
+ $carbon--fluid-spacing-03,
+ $carbon--fluid-spacing-04
+);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
+### ✅fluid-spacing [variable]
Source code
```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]
+
+
+Source code
+
+```scss
+$spacing-01: 0.125rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-02 [variable]
@@ -1452,6 +2075,20 @@ $carbon--spacing-02: 0.25rem;
- **Aliased**:
- `spacing-02`
+### ✅spacing-02 [variable]
+
+
+Source code
+
+```scss
+$spacing-02: 0.25rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-03 [variable]
@@ -1468,6 +2105,20 @@ $carbon--spacing-03: 0.5rem;
- **Aliased**:
- `spacing-03`
+### ✅spacing-03 [variable]
+
+
+Source code
+
+```scss
+$spacing-03: 0.5rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-04 [variable]
@@ -1484,6 +2135,20 @@ $carbon--spacing-04: 0.75rem;
- **Aliased**:
- `spacing-04`
+### ✅spacing-04 [variable]
+
+
+Source code
+
+```scss
+$spacing-04: 0.75rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-05 [variable]
@@ -1500,6 +2165,20 @@ $carbon--spacing-05: 1rem;
- **Aliased**:
- `spacing-05`
+### ✅spacing-05 [variable]
+
+
+Source code
+
+```scss
+$spacing-05: 1rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-06 [variable]
@@ -1516,6 +2195,20 @@ $carbon--spacing-06: 1.5rem;
- **Aliased**:
- `spacing-06`
+### ✅spacing-06 [variable]
+
+
+Source code
+
+```scss
+$spacing-06: 1.5rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-07 [variable]
@@ -1532,6 +2225,20 @@ $carbon--spacing-07: 2rem;
- **Aliased**:
- `spacing-07`
+### ✅spacing-07 [variable]
+
+
+Source code
+
+```scss
+$spacing-07: 2rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-08 [variable]
@@ -1548,6 +2255,20 @@ $carbon--spacing-08: 2.5rem;
- **Aliased**:
- `spacing-08`
+### ✅spacing-08 [variable]
+
+
+Source code
+
+```scss
+$spacing-08: 2.5rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-09 [variable]
@@ -1564,6 +2285,20 @@ $carbon--spacing-09: 3rem;
- **Aliased**:
- `spacing-09`
+### ✅spacing-09 [variable]
+
+
+Source code
+
+```scss
+$spacing-09: 3rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-10 [variable]
@@ -1580,6 +2315,20 @@ $carbon--spacing-10: 4rem;
- **Aliased**:
- `spacing-10`
+### ✅spacing-10 [variable]
+
+
+Source code
+
+```scss
+$spacing-10: 4rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-11 [variable]
@@ -1596,6 +2345,20 @@ $carbon--spacing-11: 5rem;
- **Aliased**:
- `spacing-11`
+### ✅spacing-11 [variable]
+
+
+Source code
+
+```scss
+$spacing-11: 5rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing-12 [variable]
@@ -1612,6 +2375,20 @@ $carbon--spacing-12: 6rem;
- **Aliased**:
- `spacing-12`
+### ✅spacing-12 [variable]
+
+
+Source code
+
+```scss
+$spacing-12: 6rem;
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `Number`
+
### ✅carbon--spacing [variable]
@@ -1639,6 +2416,33 @@ $carbon--spacing: (
- **Group**: [@carbon/layout](#carbonlayout)
- **Type**: `List`
+### ✅spacing [variable]
+
+
+Source code
+
+```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
+);
+```
+
+
+
+- **Group**: [@carbon/layout](#carbonlayout)
+- **Type**: `List`
+
### ✅spacing-01 [variable]
@@ -1847,6 +2651,34 @@ Map deep get
- **Group**: [@carbon/layout](#carbonlayout)
- **Returns**: `*` Desired value
+### ✅map-deep-get [function]
+
+Map deep get
+
+
+Source code
+
+```scss
+@function map-deep-get($map, $keys) {
+ @each $key in $keys {
+ $map: map-get($map, $key);
+ }
+ @return $map;
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function key-by-index($map, $index) {
+ $keys: map-keys($map);
+ @return nth($keys, $index);
+}
+```
+
+
+
+- **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
+
+
+Source code
+
+```scss
+@function last-map-item($map) {
+ $total-length: length($map);
+ @return map-get($map, carbon--key-by-index($map, $total-length));
+}
+```
+
+
+
+- **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