@carbon/type 10.42.0 → 10.43.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.42.0",
+  "version": "10.43.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,7 +37,7 @@
     "clean": "rimraf css es lib umd scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/grid": "^10.42.0",
+    "@carbon/grid": "^10.43.0",
     "@carbon/import-once": "^10.7.0"
   },
   "devDependencies": {
@@ -52,5 +52,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "aadefba8b1097fad433fe63c9c896b1a3e1b589a"
+  "gitHead": "05b57e9181903cb87173d48a0635691a2e942e30"
 }

package/scss/modules/_styles.scss

@@ -9,7 +9,7 @@
 
 @use 'sass:map';
 @use 'sass:math';
-@use '@carbon/grid/scss/modules/breakpoint' as grid;
+@use '@carbon/grid/scss/modules/config' as grid;
 @use 'font-family';
 @use 'scale';
 

package/scss/vendor/@carbon/grid/modules/_breakpoint.scss

@@ -5,25 +5,11 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 @use '@carbon/layout/scss/modules/convert';
-
-/// Map deep get
-/// @author Hugo Giraudel
-/// @access public
-/// @param {Map} $map - Map
-/// @param {Arglist} $keys - Key chain
-/// @return {*} Desired value
-/// @group @carbon/layout
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map.get($map, $key);
-  }
-  @return $map;
-}
+@use 'config' as *;
 
 /// Provide a map and index, and get back the relevant key value
 /// @access public
@@ -31,65 +17,11 @@
 /// @param {Integer} $index - Key chain
 /// @return {String} Desired value
 /// @group @carbon/layout
-@function key-by-index($map, $index) {
+@function -key-by-index($map, $index) {
   $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
-/// Pass in a map, and get the last one in the list back
-/// @access public
-/// @param {Map} $map - Map
-/// @return {*} Desired value
-/// @group @carbon/layout
-@function last-map-item($map) {
-  $total-length: list.length($map);
-  @return map-get($map, key-by-index($map, $total-length));
-}
-
-/// Carbon gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$grid-gutter: convert.rem(32px);
-
-/// Carbon condensed gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$grid-gutter--condensed: convert.rem(1px);
-
-// Initial map of our breakpoints and their values
-/// @type Map
-/// @access public
-/// @group @carbon/layout
-$grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: convert.rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: convert.rem(16px),
-    width: convert.rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: convert.rem(24px),
-    width: convert.rem(1584px),
-  ),
-) !default;
-
 /// Get the value of the next breakpoint, or null for the last breakpoint
 /// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
@@ -145,7 +77,7 @@ $grid-breakpoints: (
 /// @group @carbon/layout
 @function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
   $total-breakpoints: list.length($breakpoints);
-  @return key-by-index($breakpoints, $total-breakpoints);
+  @return -key-by-index($breakpoints, $total-breakpoints);
 }
 
 /// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.

package/scss/vendor/@carbon/grid/modules/_config.scss

@@ -5,14 +5,90 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+@use '@carbon/layout/scss/modules/convert';
+
 /// Namespace prefix
 /// @type String
 /// @access public
 /// @group @carbon/grid
-$prefix: 'bx' !default;
+$prefix: 'cds' !default;
 
 /// Total columns used in the flex grid
 /// @type Number
 /// @access public
 /// @group @carbon/grid
 $flex-grid-columns: 16 !default;
+
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter: convert.rem(32px) !default;
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter-condensed: convert.rem(1px) !default;
+
+// Initial map of our breakpoints and their values
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+) !default;
+
+@if $flex-grid-columns == 12 {
+  $grid-breakpoints: map.merge(
+    $grid-breakpoints,
+    (
+      lg:
+        map.merge(
+          map.get($grid-breakpoints, lg),
+          (
+            columns: 12,
+          )
+        ),
+      xlg:
+        map.merge(
+          map.get($grid-breakpoints, xlg),
+          (
+            columns: 12,
+          )
+        ),
+      max:
+        map.merge(
+          map.get($grid-breakpoints, max),
+          (
+            columns: 12,
+          )
+        ),
+    )
+  );
+}

package/scss/vendor/@carbon/grid/modules/_css-grid.scss

@@ -7,341 +7,464 @@
 
 @use 'sass:list';
 @use 'sass:map';
-@use "sass:math";
+@use 'sass:math';
 @use 'sass:meta';
 @use 'config' as *;
 @use 'breakpoint' as *;
 
-@mixin css-grid() {
-  display: grid;
-  max-width: 99rem;
-  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  margin-right: auto;
-  margin-left: auto;
-  column-gap: var(--cds-grid-gutter);
-  grid-template-columns: repeat(
-    var(--cds-grid-columns),
-    minmax(0, var(--cds-grid-column-size))
-  );
-}
-
-@mixin subgrid() {
-  display: grid;
-  column-gap: var(--cds-grid-gutter);
-  grid-template-columns: repeat(
-    var(--cds-grid-columns),
-    minmax(0, var(--cds-grid-column-size))
-  );
-}
-
-:root {
-  --cds-grid-columns: 4;
-  --cds-grid-column-size: 1fr;
-  --cds-grid-gutter: 2rem;
-  // Used to configure appropriate margins for condensed subgrids inside wide grids
-  --cds-grid-gutter-wide: 2rem;
-  --cds-grid-hang: 1rem;
-  --cds-grid-margin: 0;
-
-  @include breakpoint(md) {
-    --cds-grid-columns: 8;
-    --cds-grid-margin: 1rem;
+/// Emit all the styles related to the CSS Grid, these include:
+/// - The base grid class
+/// - The various grid modes
+/// - The ability to specifiy column span
+/// - The ability to specifiy column start,end position
+/// - Support for subgrid
+/// - Support for hanging content on a grid column
+/// - Support for controlling grid gutter on a cell basis
+/// - Support for specifying content alignment
+///
+///
+/// In general, this mixin is structured in a way to emit the fewest CSS styles
+/// as possible. To do this, we will (as much as possible) not emit a value if
+/// one is already defined at a previous breakpoint.
+///
+/// In addition, this mixin will break down emitting styles into several stages:
+/// 1. Emit styles for the smallest breakpoint without any breakpoint. By
+/// default, these styles will be on
+/// 2. For every other breakpoint, wrap it in a breakpoint so that it only is
+/// triggered when that breakpoint is applied
+/// 3. In situations where it is appropriate, we also will emit "unconditional"
+/// selectors that will always apply. For example, if you wanted a column to
+/// always span four columns
+@mixin css-grid($breakpoints: $grid-breakpoints) {
+  /// The :root selector is responsible for setting several top-level CSS Custom
+  /// Properties, including the overall grid gutter, grid column count, and grid
+  /// margin
+  :root {
+    --cds-grid-gutter: #{$grid-gutter};
+
+    // Iterate through the grid breakpoints and only emit the grid-columns and
+    // grid-margin CSS Custom Properties if they've changed from the previous
+    // breakpoint. By default, we emit the smallest breakpoint values on the
+    // :root selector
+    @each $key, $value in $breakpoints {
+      @if is-smallest-breakpoint($key, $breakpoints) {
+        --cds-grid-columns: #{get-column-count($breakpoints, $key)};
+        --cds-grid-margin: #{get-margin($breakpoints, $key)};
+      } @else {
+        $previous-breakpoint: breakpoint-prev($key, $breakpoints);
+        $changes: ();
+
+        @if get-column-count($breakpoints, $key) !=
+          get-column-count($breakpoints, $previous-breakpoint)
+        {
+          $changes: map.set(
+            $changes,
+            grid-columns,
+            get-column-count($breakpoints, $key)
+          );
+        }
+
+        @if get-margin($breakpoints, $key) !=
+          get-margin($breakpoints, $previous-breakpoint)
+        {
+          $changes: map.set(
+            $changes,
+            grid-margin,
+            get-margin($breakpoints, $key)
+          );
+        }
+
+        @include breakpoint($key) {
+          @each $name, $value in $changes {
+            --cds-#{$name}: #{$value};
+          }
+        }
+      }
+    }
   }
 
-  @include breakpoint(lg) {
-    --cds-grid-columns: 16;
+  // -----------------------------------------------------------------------------
+  // Base CSS Grid
+  // -----------------------------------------------------------------------------
+  .#{$prefix}--css-grid {
+    --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
+    --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
+    // We split out a separate "column hang" since "gutter-start" is set
+    // dynamically and could be 0
+    --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
+
+    display: grid;
+    max-width: get-grid-width(
+      $breakpoints,
+      largest-breakpoint-name($breakpoints)
+    );
+    padding-right: var(--cds-grid-margin);
+    padding-left: var(--cds-grid-margin);
+    margin-right: auto;
+    margin-left: auto;
+    grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
   }
 
-  @include breakpoint(max) {
-    --cds-grid-margin: 1.5rem;
+  // -----------------------------------------------------------------------------
+  // Full width
+  // -----------------------------------------------------------------------------
+  .#{$prefix}--css-grid--full-width {
+    max-width: 100%;
   }
-}
 
-.#{$prefix}--css-grid {
-  @include css-grid();
-}
-
-.#{$prefix}--css-grid--12 {
-  @include css-grid();
-  @include breakpoint(lg) {
-    --cds-grid-columns: 12;
+  // -----------------------------------------------------------------------------
+  // Column
+  // -----------------------------------------------------------------------------
+
+  // Add gutter to columns in a CSS Grid. Unfortunately, we cannot use
+  // `grid-gap`, `column-gap`, etc. as we need to conditionally remove leading
+  // and trailing gutter from a column.
+  .#{$prefix}--css-grid-column {
+    // grid-mode-start, grid-mode-end are meant to capture the "grid settings"
+    // so that subgrids can correctly fit in parent grids by reverting the
+    // grid's outer padding
+    --cds-grid-mode-start: var(--cds-grid-gutter-start);
+    --cds-grid-mode-end: var(--cds-grid-gutter-end);
+
+    margin-right: var(--cds-grid-gutter-end);
+    margin-left: var(--cds-grid-gutter-start);
+
+    [dir='rtl'] & {
+      margin-right: var(--cds-grid-gutter-start);
+      margin-left: var(--cds-grid-gutter-end);
+    }
   }
-}
-
-.#{$prefix}--subgrid {
-  @include subgrid();
-}
 
-.#{$prefix}--subgrid[class*='col'] {
-  display: grid;
-}
-
-// -----------------------------------------------------------------------------
-// Condensed
-// -----------------------------------------------------------------------------
-.#{$prefix}--css-grid--condensed {
-  --cds-grid-gutter: 1px;
-
-  column-gap: var(--cds-grid-gutter);
-  row-gap: var(--cds-grid-gutter);
-}
+  // -----------------------------------------------------------------------------
+  // Grid modes
+  // -----------------------------------------------------------------------------
 
-// condensed subgrid inside wide
-.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
-  margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1);
-  margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1);
-}
-
-// -----------------------------------------------------------------------------
-// No Gutter
-// -----------------------------------------------------------------------------
-.#{$prefix}--css-grid--no-gutter {
-  // This is set to 0px (versus 0) so that the calc expression for padding for
-  // a grid container works as expected. Without the unit, the calc() will
-  // result in a value of 0.
-  // stylelint-disable-next-line length-zero-no-unit
-  --cds-grid-gutter: 0px;
-
-  column-gap: var(--cds-grid-gutter);
-}
-
-// -----------------------------------------------------------------------------
-// Full width
-// -----------------------------------------------------------------------------
-.#{$prefix}--css-grid--full-width {
-  max-width: 100%;
-}
-
-// -----------------------------------------------------------------------------
-// Column span
-// -----------------------------------------------------------------------------
-@mixin -column-span($i) {
-  @if $i == 0 {
-    display: none;
-  } @else {
-    --cds-grid-columns: #{$i};
+  // Narrow
+  .#{$prefix}--css-grid--narrow {
+    --cds-grid-gutter-start: 0;
+  }
 
-    display: block;
-    grid-column: span $i / span $i;
+  // Condensed
+  .#{$prefix}--css-grid--condensed {
+    --cds-grid-gutter: #{$grid-gutter-condensed};
+    --cds-grid-column-hang: #{math.div($grid-gutter, 2) -
+      math.div($grid-gutter-condensed, 2)};
   }
-}
 
-@for $i from 0 through 16 {
-  .#{$prefix}--col-span-#{$i} {
-    @include -column-span($i);
+  // -----------------------------------------------------------------------------
+  // Subgrid
+  // -----------------------------------------------------------------------------
+  .#{$prefix}--subgrid {
+    display: grid;
+    margin-right: calc(var(--cds-grid-mode-end) * -1);
+    margin-left: calc(var(--cds-grid-mode-start) * -1);
+    grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+
+    [dir='rtl'] & {
+      margin-right: calc(var(--cds-grid-mode-start) * -1);
+      margin-left: calc(var(--cds-grid-mode-end) * -1);
+    }
   }
-}
 
-.#{$prefix}--col-span-auto {
-  grid-column: auto;
-}
+  // Support the grid modes in subgrids
+  .#{$prefix}--subgrid--wide {
+    --cds-grid-gutter-start: #{math.div($grid-gutter, 2)};
+    --cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
+    --cds-grid-column-hang: 0;
+  }
 
-.#{$prefix}--col-span-100 {
-  grid-column: 1 / -1;
-}
+  .#{$prefix}--subgrid--narrow {
+    --cds-grid-gutter-start: 0;
+    --cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
+    --cds-grid-column-hang: #{math.div($grid-gutter, 2)};
+  }
 
-.#{$prefix}--col-span-25 {
-  --cds-grid-columns: 1;
+  .#{$prefix}--subgrid--condensed {
+    --cds-grid-gutter-start: #{math.div($grid-gutter-condensed, 2)};
+    --cds-grid-gutter-end: #{math.div($grid-gutter-condensed, 2)};
+    --cds-grid-column-hang: #{math.div($grid-gutter, 2) -
+      math.div($grid-gutter-condensed, 2)};
+  }
 
-  grid-column: span 1;
+  // -----------------------------------------------------------------------------
+  // Column hang
+  // -----------------------------------------------------------------------------
 
-  @include breakpoint(md) {
-    --cds-grid-columns: 2;
+  // Helper class to allow for text alignment in columns where the leading
+  // gutter is missing (like narrow) or is reduced (like in condensed).
+  .#{$prefix}--grid-column-hang {
+    margin-left: var(--cds-grid-column-hang);
 
-    grid-column: span 2;
+    [dir='rtl'] & {
+      margin-right: var(--cds-grid-column-hang);
+      margin-left: initial;
+    }
   }
 
-  @include breakpoint(lg) {
-    --cds-grid-columns: 4;
+  // -----------------------------------------------------------------------------
+  // Column span
+  // -----------------------------------------------------------------------------
 
-    grid-column: span 4;
+  // Generate col-span-{0-16} classes which unconditionally set column span
+  // regardless of breakpoint
+  @for $i from 0 through get-grid-columns($breakpoints) {
+    .#{$prefix}--col-span-#{$i} {
+      @include -column-span($i);
+    }
   }
-}
 
-.#{$prefix}--col-span-50 {
-  --cds-grid-columns: 2;
-
-  grid-column: span 2;
+  // Responsive column span
+  @each $name, $value in $breakpoints {
+    // Column span per breakpoint
+    @for $i from 0 through get-column-count($breakpoints, $name) {
+      @if is-smallest-breakpoint($name, $breakpoints) {
+        .#{$prefix}--#{$name}\:col-span-#{$i} {
+          @include -column-span($i);
+        }
+      } @else {
+        @include breakpoint($name) {
+          .#{$prefix}--#{$name}\:col-span-#{$i} {
+            @include -column-span($i);
+          }
+        }
+      }
+    }
 
-  @include breakpoint(md) {
-    --cds-grid-columns: 4;
+    // Percent column span per breakpoint
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      .#{$prefix}--#{$name}\:col-span-auto {
+        grid-column: auto;
+      }
 
-    grid-column: span 4;
-  }
+      .#{$prefix}--#{$name}\:col-span-100 {
+        grid-column: 1 / -1;
+      }
 
-  @include breakpoint(lg) {
-    --cds-grid-columns: 8;
+      $columns: get-column-count($breakpoints, $name);
 
-    grid-column: span 8;
-  }
-}
+      .#{$prefix}--#{$name}\:col-span-75 {
+        $span: $columns * 0.75;
+        --cds-grid-columns: #{$span};
 
-.#{$prefix}--col-span-75 {
-  --cds-grid-columns: 3;
+        grid-column: span #{$span} / span #{$span};
+      }
 
-  grid-column: span 3;
+      .#{$prefix}--#{$name}\:col-span-50 {
+        $span: $columns * 0.5;
+        --cds-grid-columns: #{$span};
 
-  @include breakpoint(md) {
-    --cds-grid-columns: 6;
+        grid-column: span #{$span} / span #{$span};
+      }
 
-    grid-column: span 6;
-  }
+      .#{$prefix}--#{$name}\:col-span-25 {
+        $span: $columns * 0.25;
+        --cds-grid-columns: #{$span};
 
-  @include breakpoint(lg) {
-    --cds-grid-columns: 12;
+        grid-column: span #{$span} / span #{$span};
+      }
+    } @else {
+      @include breakpoint($name) {
+        .#{$prefix}--#{$name}\:col-span-auto {
+          grid-column: auto;
+        }
 
-    grid-column: span 12;
-  }
-}
+        .#{$prefix}--#{$name}\:col-span-100 {
+          grid-column: 1 / -1;
+        }
 
-@each $name, $value in $grid-breakpoints {
-  $columns: map.get($value, columns);
+        $columns: get-column-count($breakpoints, $name);
 
-  @include breakpoint($name) {
-    @for $i from 0 through $columns {
-      .#{$prefix}--#{$name}\:col-span-#{$i} {
-        @include -column-span($i);
-      }
-    }
+        .#{$prefix}--#{$name}\:col-span-75 {
+          $span: $columns * 0.75;
+          --cds-grid-columns: #{$span};
 
-    .#{$prefix}--#{$name}\:col-span-auto {
-      grid-column: auto;
-    }
+          grid-column: span #{$span} / span #{$span};
+        }
 
-    .#{$prefix}--#{$name}\:col-span-100 {
-      grid-column: 1 / -1;
-    }
+        .#{$prefix}--#{$name}\:col-span-50 {
+          $span: $columns * 0.5;
+          --cds-grid-columns: #{$span};
 
-    $quarterGridColumns: math.div($columns, 4);
+          grid-column: span #{$span} / span #{$span};
+        }
 
-    .#{$prefix}--#{$name}\:col-span-75 {
-      $calc: $quarterGridColumns * 3;
-      --cds-grid-columns: #{$calc};
+        .#{$prefix}--#{$name}\:col-span-25 {
+          $span: $columns * 0.25;
+          --cds-grid-columns: #{$span};
 
-      grid-column: span $calc / span $calc;
+          grid-column: span #{$span} / span #{$span};
+        }
+      }
     }
+  }
 
-    .#{$prefix}--#{$name}\:col-span-50 {
-      $calc: $quarterGridColumns * 2;
-      --cds-grid-columns: #{$calc};
+  // -----------------------------------------------------------------------------
+  // Column percent span
+  // -----------------------------------------------------------------------------
+  .#{$prefix}--col-span-auto {
+    grid-column: auto;
+  }
 
-      grid-column: span $calc / span $calc;
-    }
+  .#{$prefix}--col-span-100 {
+    grid-column: 1 / -1;
+  }
 
-    .#{$prefix}--#{$name}\:col-span-25 {
-      --cds-grid-columns: #{$quarterGridColumns};
+  .#{$prefix}--col-span-75 {
+    @include -percent-column-span($breakpoints, 0.75);
+  }
 
-      grid-column: span $quarterGridColumns / span $quarterGridColumns;
-    }
+  .#{$prefix}--col-span-50 {
+    @include -percent-column-span($breakpoints, 0.5);
   }
-}
 
-// -----------------------------------------------------------------------------
-// Column offset
-// -----------------------------------------------------------------------------
-@for $i from 1 through 17 {
-  .#{$prefix}--col-start-#{$i} {
-    grid-column-start: $i;
+  .#{$prefix}--col-span-25 {
+    @include -percent-column-span($breakpoints, 0.25);
   }
 
-  .#{$prefix}--col-end-#{$i} {
-    grid-column-start: $i;
+  // -----------------------------------------------------------------------------
+  // Column offset
+  // -----------------------------------------------------------------------------
+  // Unconditional column start
+  // Note: we start at 1 and end at column-count to match grid lines. We do not
+  // start at column-count + 1 since starting at the end of the grid would mean
+  // a column would have no width available
+  @for $i from 1 through get-grid-columns($breakpoints) {
+    .#{$prefix}--col-start-#{$i} {
+      grid-column-start: $i;
+    }
   }
-}
 
-.#{$prefix}--col-start-auto {
-  grid-column-start: auto;
-}
+  // Unconditional column end
+  // Note: we start at 2 since a column ending at line 1 would have no width. We
+  // end at column-count + 1 since grid lines start at 1
+  @for $i from 2 through get-grid-columns($breakpoints) + 1 {
+    .#{$prefix}--col-end-#{$i} {
+      grid-column-end: $i;
+    }
+  }
 
-.#{$prefix}--col-end-auto {
-  grid-column-start: end;
-}
+  .#{$prefix}--col-start-auto {
+    grid-column-start: auto;
+  }
 
-@each $name, $value in $grid-breakpoints {
-  $columns: map.get($value, columns);
+  .#{$prefix}--col-end-auto {
+    grid-column-end: auto;
+  }
 
-  @include breakpoint($name) {
-    // The `grid-column-start` property is *not* inclusive.
-    // It starts the column *at* the column, not *on* the column. We must
-    // ensure that there is one additional class available for each breakpoint.
-    @for $i from 1 through $columns + 1 {
-      .#{$prefix}--#{$name}\:col-start-#{$i} {
-        grid-column-start: $i;
+  // Responsive column start, end
+  @each $name, $value in $breakpoints {
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      // Responsive column start
+      @for $i from 1 through get-grid-columns($breakpoints) {
+        .#{$prefix}--#{$name}\:col-start-#{$i} {
+          grid-column-start: $i;
+        }
       }
 
-      .#{$prefix}--#{$name}\:col-end-#{$i} {
-        grid-column-end: $i;
+      // Responsive column end
+      @for $i from 2 through get-grid-columns($breakpoints) + 1 {
+        .#{$prefix}--#{$name}\:col-end-#{$i} {
+          grid-column-end: $i;
+        }
       }
-    }
 
-    .#{$prefix}--#{$name}\:col-start-auto {
-      grid-column-start: auto;
-    }
+      .#{$prefix}--#{$name}\:col-start-auto {
+        grid-column-start: auto;
+      }
 
-    .#{$prefix}--#{$name}\:col-end-auto {
-      grid-column-start: end;
+      .#{$prefix}--#{$name}\:col-end-auto {
+        grid-column-end: auto;
+      }
+    } @else {
+      @include breakpoint($name) {
+        // Responsive column start
+        @for $i from 1 through get-grid-columns($breakpoints) {
+          .#{$prefix}--#{$name}\:col-start-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+
+        // Responsive column end
+        @for $i from 2 through get-grid-columns($breakpoints) + 1 {
+          .#{$prefix}--#{$name}\:col-end-#{$i} {
+            grid-column-end: $i;
+          }
+        }
+
+        .#{$prefix}--#{$name}\:col-start-auto {
+          grid-column-start: auto;
+        }
+
+        .#{$prefix}--#{$name}\:col-end-auto {
+          grid-column-end: auto;
+        }
+      }
     }
   }
 }
 
-// -----------------------------------------------------------------------------
-// Hang
-// -----------------------------------------------------------------------------
-.#{$prefix}--hang {
-  padding-left: var(--cds-grid-hang);
-}
-
-// -----------------------------------------------------------------------------
-// Column gutter
-// -----------------------------------------------------------------------------
-.#{$prefix}--gutter {
-  padding-right: var(--cds-grid-hang);
-  padding-left: var(--cds-grid-hang);
-}
-
-.#{$prefix}--gutter-start {
-  padding-left: var(--cds-grid-hang);
-}
+/// Generate the styles for a grid column
+@mixin -column-span($i) {
+  @if $i == 0 {
+    display: none;
+  } @else {
+    --cds-grid-columns: #{$i};
 
-[dir='rtl'] .#{$prefix}--gutter-start {
-  padding-right: var(--cds-grid-hang);
+    display: block;
+    grid-column: span $i / span $i;
+  }
 }
 
-.#{$prefix}--gutter-end {
-  padding-right: var(--cds-grid-hang);
-}
+/// Generate the styles for an unconditional class that represents a percent
+/// span of a grid
+@mixin -percent-column-span($breakpoints, $percent) {
+  @each $key, $value in $breakpoints {
+    $columns: get-column-count($breakpoints, $key);
+    $span: $columns * $percent;
 
-[dir='rtl'] .#{$prefix}--gutter-end {
-  padding-left: var(--cds-grid-hang);
-}
+    @if is-smallest-breakpoint($key, $breakpoints) {
+      --cds-grid-columns: #{$span};
 
-// -----------------------------------------------------------------------------
-// Utilities
-// -----------------------------------------------------------------------------
+      grid-column: span #{$span} / span #{$span};
+    } @else {
+      $previous-breakpoint: breakpoint-prev($key, $breakpoints);
+      $previous-column-count: get-column-count(
+        $breakpoints,
+        $previous-breakpoint
+      );
+      $previous-span: $previous-column-count * $percent;
 
-/// Justify items
-.#{$prefix}--justify-items-start {
-  justify-items: start;
-}
+      @if $span != $previous-span {
+        @include breakpoint($key) {
+          --cds-grid-columns: #{$span};
 
-.#{$prefix}--justify-items-end {
-  justify-items: end;
+          grid-column: span #{$span} / span #{$span};
+        }
+      }
+    }
+  }
 }
 
-.#{$prefix}--justify-items-center {
-  justify-items: center;
+/// Get the grid width for a specific breakpoint name
+@function get-grid-width($breakpoints, $breakpoint) {
+  @return map.get(map.get($breakpoints, $breakpoint), width);
 }
 
-/// Align items
-.#{$prefix}--align-items-start {
-  align-items: start;
+/// Get the grid column count for a specific breakpoint name
+@function get-column-count($breakpoints, $breakpoint) {
+  @return map.get(map.get($breakpoints, $breakpoint), columns);
 }
 
-.#{$prefix}--align-items-end {
-  align-items: end;
+/// Get the grid margin for a specific breakpoint name
+@function get-margin($breakpoints, $breakpoint) {
+  $value: map.get(map.get($breakpoints, $breakpoint), margin);
+  @if $value == 0 {
+    @return 0;
+  }
+  @return $value;
 }
 
-.#{$prefix}--align-items-center {
-  align-items: center;
+/// Return the largest column count from a set of breakpoints
+@function get-grid-columns($breakpoints) {
+  @return get-column-count($breakpoints, largest-breakpoint-name($breakpoints));
 }

package/scss/vendor/@carbon/grid/modules/_flex-grid.scss

@@ -9,6 +9,7 @@
 // and often derived from, bootstrap:
 // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
 
+@use 'sass:list';
 @use 'sass:meta';
 @use 'sass:math';
 @use 'sass:map';
@@ -24,12 +25,12 @@
 /// for setting width and default gutters when a column's breakpoint has not been
 /// hit yet.
 /// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
-/// @param {Number} $collapsed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @param {Number} $collapsed-gutter [$grid-gutter-condensed] - The condensed mode gutter
 /// @access private
 /// @group @carbon/grid
 @mixin -make-col-ready(
   $gutter: $grid-gutter,
-  $condensed-gutter: $grid-gutter--condensed
+  $condensed-gutter: $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
@@ -254,7 +255,7 @@
   margin-right: auto;
   margin-left: auto;
 
-  @include -set-largest-breakpoint();
+  @include -set-largest-breakpoint($breakpoints);
 
   @each $name, $value in $breakpoints {
     $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
@@ -282,7 +283,7 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
-  $largest-breakpoint: last-map-item($breakpoints);
+  $largest-breakpoint: -last-map-item($breakpoints);
 
   max-width: map.get($largest-breakpoint, 'width');
 }
@@ -299,16 +300,37 @@
   }
 }
 
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function -last-map-item($map) {
+  $total-length: list.length($map);
+  @return map-get($map, -key-by-index($map, $total-length));
+}
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @carbon/layout
+@function -key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}
+
 /// Generate the CSS for a grid for the given breakpoints and gutters
 /// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
 /// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
-/// @param {Number} $condensed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @param {Number} $condensed-gutter [$grid-gutter-condensed] - The condensed mode gutter
 /// @access public
 /// @group @carbon/grid
 @mixin flex-grid(
   $breakpoints: $grid-breakpoints,
   $grid-gutter: $grid-gutter,
-  $condensed-gutter: $grid-gutter--condensed
+  $condensed-gutter: $grid-gutter-condensed
 ) {
   .#{$prefix}--grid {
     @include -make-container($breakpoints);
@@ -339,36 +361,3 @@
   @include -no-gutter();
   @include -hang($grid-gutter);
 }
-
-@if $flex-grid-columns == 12 {
-  $flex-12-column-grid: map.merge(
-    $grid-breakpoints,
-    (
-      lg:
-        map.merge(
-          map.get($grid-breakpoints, lg),
-          (
-            columns: 12,
-          )
-        ),
-      xlg:
-        map.merge(
-          map.get($grid-breakpoints, xlg),
-          (
-            columns: 12,
-          )
-        ),
-      max:
-        map.merge(
-          map.get($grid-breakpoints, max),
-          (
-            columns: 12,
-          )
-        ),
-    )
-  );
-
-  @include flex-grid($breakpoints: $flex-12-column-grid);
-} @else {
-  @include flex-grid();
-}