@carbon/elements 10.50.0-rc.0 → 10.52.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.50.0-rc.0",
+  "version": "10.52.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,21 +35,21 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.35.0-rc.0",
-    "@carbon/grid": "^10.40.0-rc.0",
-    "@carbon/icons": "^10.45.0-rc.0",
+    "@carbon/colors": "^10.36.0",
+    "@carbon/grid": "^10.41.0",
+    "@carbon/icons": "^10.46.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.35.0-rc.0",
-    "@carbon/motion": "^10.27.0-rc.0",
-    "@carbon/themes": "^10.49.0-rc.0",
-    "@carbon/type": "^10.40.0-rc.0"
+    "@carbon/layout": "^10.36.0",
+    "@carbon/motion": "^10.28.0",
+    "@carbon/themes": "^10.51.0",
+    "@carbon/type": "^10.41.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.32.0-rc.0",
+    "@carbon/cli": "^10.33.0",
     "fs-extra": "^10.0.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "a8bade7e1200220296e8ed13621c7a1a88206f0e"
+  "gitHead": "6a49764a3df2cc3e3b8fce6575f4853d1400e183"
 }

package/scss/grid/modules/_config.scss

@@ -10,3 +10,9 @@
 /// @access public
 /// @group @carbon/grid
 $prefix: 'bx' !default;
+
+/// Total columns used in the flex grid
+/// @type Number
+/// @access public
+/// @group @carbon/grid
+$flex-grid-columns: 16 !default;

package/scss/grid/modules/_css-grid.scss

@@ -77,38 +77,6 @@
   display: grid;
 }
 
-// -----------------------------------------------------------------------------
-// Narrow
-// -----------------------------------------------------------------------------
-.#{$prefix}--css-grid--narrow {
-  --cds-grid-margin: 1rem;
-
-  padding-right: var(--cds-grid-margin);
-  padding-left: var(--cds-grid-margin);
-
-  @include breakpoint(md) {
-    padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-    padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  }
-}
-
-.#{$prefix}--css-grid--narrow > [class*='col'] {
-  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
-}
-
-// Narrow subgrid inside wide
-.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed)
-  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
-  padding: 0;
-}
-
-// Narrow subgrid column inside wide
-.#{$prefix}--css-grid
-  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow
-  > [class*='col'] {
-  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
-}
-
 // -----------------------------------------------------------------------------
 // Condensed
 // -----------------------------------------------------------------------------
@@ -120,8 +88,7 @@
 }
 
 // condensed subgrid inside wide
-.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow)
-  .bx--subgrid.#{$prefix}--css-grid--condensed {
+.#{$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);
 }
@@ -174,26 +141,6 @@
   grid-column: 1 / -1;
 }
 
-@each $name, $value in $grid-breakpoints {
-  $columns: map.get($value, columns);
-
-  @include breakpoint($name) {
-    @for $i from 0 through $columns {
-      .#{$prefix}--#{$name}\:col-span-#{$i} {
-        @include -column-span($i);
-      }
-    }
-
-    .#{$prefix}--#{$name}\:col-span-auto {
-      grid-column: auto;
-    }
-
-    .#{$prefix}--#{$name}\:col-span-100 {
-      grid-column: 1 / -1;
-    }
-  }
-}
-
 .#{$prefix}--col-span-25 {
   --cds-grid-columns: 1;
 
@@ -248,13 +195,59 @@
   }
 }
 
+@each $name, $value in $grid-breakpoints {
+  $columns: map.get($value, columns);
+
+  @include breakpoint($name) {
+    @for $i from 0 through $columns {
+      .#{$prefix}--#{$name}\:col-span-#{$i} {
+        @include -column-span($i);
+      }
+    }
+
+    .#{$prefix}--#{$name}\:col-span-auto {
+      grid-column: auto;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-100 {
+      grid-column: 1 / -1;
+    }
+
+    $quarterGridColumns: math.div($columns, 4);
+
+    .#{$prefix}--#{$name}\:col-span-75 {
+      $calc: $quarterGridColumns * 3;
+      --cds-grid-columns: #{$calc};
+
+      grid-column: span $calc / span $calc;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-50 {
+      $calc: $quarterGridColumns * 2;
+      --cds-grid-columns: #{$calc};
+
+      grid-column: span $calc / span $calc;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-25 {
+      --cds-grid-columns: #{$quarterGridColumns};
+
+      grid-column: span $quarterGridColumns / span $quarterGridColumns;
+    }
+  }
+}
+
 // -----------------------------------------------------------------------------
 // Column offset
 // -----------------------------------------------------------------------------
-@for $i from 1 through 16 {
+@for $i from 1 through 17 {
   .#{$prefix}--col-start-#{$i} {
     grid-column-start: $i;
   }
+
+  .#{$prefix}--col-end-#{$i} {
+    grid-column-start: $i;
+  }
 }
 
 .#{$prefix}--col-start-auto {
@@ -276,6 +269,10 @@
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
+
+      .#{$prefix}--#{$name}\:col-end-#{$i} {
+        grid-column-end: $i;
+      }
     }
 
     .#{$prefix}--#{$name}\:col-start-auto {
@@ -348,71 +345,3 @@
 .#{$prefix}--align-items-center {
   align-items: center;
 }
-
-// -----------------------------------------------------------------------------
-// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component?
-// -----------------------------------------------------------------------------
-
-/// The aspect ratios that are used to generate corresponding aspect ratio
-/// classes in code
-/// @type List
-/// @access public
-/// @group @carbon/grid
-$carbon--aspect-ratios: (
-  (16, 9),
-  (9, 16),
-  (2, 1),
-  (1, 2),
-  (4, 3),
-  (3, 4),
-  (3, 2),
-  (2, 3),
-  (1, 1)
-);
-
-/// Generates the CSS classname utilities for the aspect ratios
-///
-/// CSS Tricks article on aspect ratios and all the different ways it can be done.
-/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
-///
-/// That article references an earlier article on the topic.
-/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
-///
-/// @param {Number} $width width from an aspect ratio
-/// @param {Number} $height height from an aspect ratio
-/// @access private
-/// @group @carbon/grid
-@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
-  .#{$prefix}--aspect-ratio {
-    position: relative;
-  }
-
-  .#{$prefix}--aspect-ratio::before {
-    width: 1px;
-    height: 0;
-    margin-left: -1px;
-    content: '';
-    float: left;
-  }
-
-  .#{$prefix}--aspect-ratio::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  @each $aspect-ratio in $aspect-ratios {
-    $width: nth($aspect-ratio, 1);
-    $height: nth($aspect-ratio, 2);
-
-    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      @if meta.function-exists('div', 'math') {
-        padding-top: percentage(math.div($height, $width));
-      } @else {
-        padding-top: percentage(($height / $width));
-      }
-    }
-  }
-}
-
-@include carbon--aspect-ratio();

package/scss/grid/modules/_flex-grid.scss

@@ -0,0 +1,374 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Helpers for defining columns, rows, and containers are heavily inspired by,
+// and often derived from, bootstrap:
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
+
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+
+@use 'config' as *;
+@use 'breakpoint' as *;
+
+// -----------------------------------------------------------------------------
+// Columns
+// -----------------------------------------------------------------------------
+
+/// 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.
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @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
+) {
+  // 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 * 0.5;
+  padding-left: $gutter * 0.5;
+
+  // 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 * 0.5;
+    padding-left: $condensed-gutter * 0.5;
+  }
+
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: $gutter * 0.5;
+    padding-left: 0;
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// A width of 0 will hide the column entirely.
+/// @param {Number} $span - The number of columns covered
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    // 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.
+    @if meta.function-exists('div', 'math') {
+      max-width: percentage(math.div($span, $columns));
+      flex: 0 0 percentage(math.div($span, $columns));
+    } @else {
+      max-width: percentage(($span / $columns));
+      flex: 0 0 percentage(($span / $columns));
+    }
+  }
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - The number of columns the offset should cover
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col-offset($span, $columns) {
+  $offset: 0;
+  @if meta.function-exists('div', 'math') {
+    $offset: math.div($span, $columns);
+  } @else {
+    $offset: ($span / $columns);
+  }
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: percentage($offset);
+  }
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -make-grid-columns(
+  $breakpoints: $grid-breakpoints,
+  $gutter: $grid-gutter
+) {
+  .#{$prefix}--col {
+    @include -make-col-ready($gutter);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: 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 -make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include -make-col-ready($gutter);
+    }
+
+    @include breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}--col,
+      .#{$prefix}--col#{$infix} {
+        max-width: 100%;
+        flex-basis: 0;
+        flex-grow: 1;
+      }
+
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+        flex: 1 0 0%;
+      }
+
+      @for $i from 0 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include -make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include -make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Rows
+// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -make-row($gutter: $grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
+}
+
+// -----------------------------------------------------------------------------
+// No gutter
+// -----------------------------------------------------------------------------
+
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+/// @access private
+/// @group @carbon/grid
+@mixin -no-gutter {
+  .#{$prefix}--no-gutter,
+  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+
+  // Deprecated ☠️
+  .#{$prefix}--no-gutter--left,
+  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--right,
+  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -hang($gutter: $grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: $gutter * 0.5;
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: $gutter * 0.5;
+  }
+
+  // Deprecated ☠️
+  .#{$prefix}--hang--left {
+    padding-left: $gutter * 0.5;
+  }
+
+  .#{$prefix}--hang--right {
+    padding-right: $gutter * 0.5;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Grid
+// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `make-container-max-widths`
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -make-container($breakpoints: $grid-breakpoints) {
+  margin-right: auto;
+  margin-left: auto;
+
+  @include -set-largest-breakpoint();
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
+    $margin: map-get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map-get($prev-breakpoint, margin);
+      @if $prev-margin != $margin {
+        @include breakpoint($name) {
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
+        }
+      }
+    } @else {
+      @include breakpoint($name) {
+        padding-right: #{($grid-gutter * 0.5) + $margin};
+        padding-left: #{($grid-gutter * 0.5) + $margin};
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
+  $largest-breakpoint: last-map-item($breakpoints);
+
+  max-width: map-get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include breakpoint($name) {
+      max-width: map-get($value, width);
+    }
+  }
+}
+
+/// 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
+/// @access public
+/// @group @carbon/grid
+@mixin flex-grid(
+  $breakpoints: $grid-breakpoints,
+  $grid-gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
+) {
+  .#{$prefix}--grid {
+    @include -make-container($breakpoints);
+  }
+
+  @include largest-breakpoint($breakpoints) {
+    .#{$prefix}--grid--full-width {
+      max-width: 100%;
+    }
+  }
+
+  .#{$prefix}--row {
+    @include -make-row();
+  }
+
+  .#{$prefix}--row-padding [class*='#{$prefix}--col'],
+  .#{$prefix}--col-padding {
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
+  }
+
+  .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
+  }
+
+  @include -make-grid-columns($breakpoints, $grid-gutter);
+  @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();
+}

package/scss/themes/generated/_mixins.scss

@@ -176,8 +176,6 @@
   $layer-selected-hover: map-get($theme, 'layer-selected-hover') !global;
   $layer-selected-inverse: map-get($theme, 'layer-selected-inverse') !global;
   $border-subtle-selected: map-get($theme, 'border-subtle-selected') !global;
-  $layer-disabled: map-get($theme, 'layer-disabled') !global;
-  $field-disabled: map-get($theme, 'field-disabled') !global;
   $border-disabled: map-get($theme, 'border-disabled') !global;
   $text-disabled: map-get($theme, 'text-disabled') !global;
   $button-disabled: map-get($theme, 'button-disabled') !global;
@@ -358,8 +356,6 @@
     $layer-selected-hover: $hover-selected-ui !global;
     $layer-selected-inverse: $ui-05 !global;
     $border-subtle-selected: $active-ui !global;
-    $layer-disabled: $disabled-01 !global;
-    $field-disabled: $disabled-01 !global;
     $border-disabled: $disabled-01 !global;
     $text-disabled: $disabled-02 !global;
     $button-disabled: $disabled-02 !global;
@@ -901,14 +897,6 @@
       --#{$custom-property-prefix}-border-subtle-selected,
       map-get($theme, 'border-subtle-selected')
     ) !global;
-    $layer-disabled: var(
-      --#{$custom-property-prefix}-layer-disabled,
-      map-get($theme, 'layer-disabled')
-    ) !global;
-    $field-disabled: var(
-      --#{$custom-property-prefix}-field-disabled,
-      map-get($theme, 'field-disabled')
-    ) !global;
     $border-disabled: var(
       --#{$custom-property-prefix}-border-disabled,
       map-get($theme, 'border-disabled')
@@ -2489,32 +2477,6 @@
       );
     }
 
-    @if should-emit(
-      $theme,
-      $parent-carbon-theme,
-      'layer-disabled',
-      $emit-difference
-    )
-    {
-      @include custom-property(
-        'layer-disabled',
-        map-get($theme, 'layer-disabled')
-      );
-    }
-
-    @if should-emit(
-      $theme,
-      $parent-carbon-theme,
-      'field-disabled',
-      $emit-difference
-    )
-    {
-      @include custom-property(
-        'field-disabled',
-        map-get($theme, 'field-disabled')
-      );
-    }
-
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/themes/generated/_themes.scss

@@ -139,8 +139,6 @@ $carbon--theme--white: (
   layer-selected-hover: #cacaca,
   layer-selected-inverse: #161616,
   border-subtle-selected: #c6c6c6,
-  layer-disabled: #f4f4f4,
-  field-disabled: #f4f4f4,
   border-disabled: #f4f4f4,
   text-disabled: #c6c6c6,
   button-disabled: #c6c6c6,
@@ -957,8 +955,6 @@ $carbon--theme--g10: map-merge(
     background: #f4f4f4,
     layer: #ffffff,
     field: #ffffff,
-    layer-disabled: #ffffff,
-    field-disabled: #ffffff,
     border-disabled: #ffffff,
   )
 ) !default;
@@ -1029,8 +1025,6 @@ $carbon--theme--g80: map-merge(
     layer-selected-hover: #616161,
     layer-selected-inverse: #f4f4f4,
     border-subtle-selected: #8d8d8d,
-    layer-disabled: #525252,
-    field-disabled: #525252,
     border-disabled: #525252,
     text-disabled: #8d8d8d,
     button-disabled: #8d8d8d,
@@ -1215,8 +1209,6 @@ $carbon--theme--g90: map-merge(
     layer-selected-hover: #656565,
     layer-selected-inverse: #f4f4f4,
     border-subtle-selected: #6f6f6f,
-    layer-disabled: #393939,
-    field-disabled: #393939,
     border-disabled: #393939,
     text-disabled: #6f6f6f,
     button-disabled: #6f6f6f,
@@ -1350,8 +1342,6 @@ $carbon--theme--g100: map-merge(
     layer-selected-hover: #4c4c4c,
     layer-selected-inverse: #f4f4f4,
     border-subtle-selected: #525252,
-    layer-disabled: #262626,
-    field-disabled: #262626,
     border-disabled: #262626,
     text-disabled: #525252,
     button-disabled: #525252,
@@ -1487,8 +1477,6 @@ $carbon--theme--v9: map-merge(
     layer-selected-hover: #dfeafa,
     layer-selected-inverse: #5a6872,
     border-subtle-selected: #dfeafa,
-    layer-disabled: #fafbfd,
-    field-disabled: #fafbfd,
     border-disabled: #fafbfd,
     text-disabled: #dfe3e6,
     button-disabled: #dfe3e6,
@@ -2304,18 +2292,6 @@ $carbon--theme: (
       $border-subtle-selected,
       map-get($carbon--theme--white, 'border-subtle-selected')
     ),
-  layer-disabled:
-    if(
-      global-variable-exists('layer-disabled'),
-      $layer-disabled,
-      map-get($carbon--theme--white, 'layer-disabled')
-    ),
-  field-disabled:
-    if(
-      global-variable-exists('field-disabled'),
-      $field-disabled,
-      map-get($carbon--theme--white, 'field-disabled')
-    ),
   border-disabled:
     if(
       global-variable-exists('border-disabled'),

package/scss/themes/generated/_tokens.scss

@@ -1380,26 +1380,6 @@ $border-subtle-selected: if(
   #c6c6c6
 ) !default;
 
-/// @type {undefined}
-/// @access public
-/// @group @carbon/themes
-$layer-disabled: if(
-  global-variable-exists('carbon--theme') and
-    map-has-key($carbon--theme, 'layer-disabled'),
-  map-get($carbon--theme, 'layer-disabled'),
-  #f4f4f4
-) !default;
-
-/// @type {undefined}
-/// @access public
-/// @group @carbon/themes
-$field-disabled: if(
-  global-variable-exists('carbon--theme') and
-    map-has-key($carbon--theme, 'field-disabled'),
-  map-get($carbon--theme, 'field-disabled'),
-  #f4f4f4
-) !default;
-
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes

package/scss/themes/modules/generated/_themes.scss

@@ -36,7 +36,6 @@ $white: (
   field-01: #f4f4f4,
   field-02: #ffffff,
   field-03: #f4f4f4,
-  field-disabled: #f4f4f4,
   field-hover-01: #e8e8e8,
   field-hover-02: #e8e8e8,
   field-hover-03: #e8e8e8,
@@ -44,7 +43,7 @@ $white: (
   focus-inset: #ffffff,
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
-  icon-disabled: #c6c6c6,
+  icon-disabled: rgba(22, 22, 22, 0.25),
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -66,7 +65,6 @@ $white: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
-  layer-disabled: #f4f4f4,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -79,6 +77,8 @@ $white: (
   layer-selected-hover-03: #d1d1d1,
   layer-selected-inverse: #161616,
   link-inverse: #78a9ff,
+  link-inverse-active: #f4f4f4,
+  link-inverse-hover: #a6c8ff,
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -141,7 +141,6 @@ $g10: (
   field-01: #ffffff,
   field-02: #f4f4f4,
   field-03: #ffffff,
-  field-disabled: #ffffff,
   field-hover-01: #e8e8e8,
   field-hover-02: #e8e8e8,
   field-hover-03: #e8e8e8,
@@ -149,7 +148,7 @@ $g10: (
   focus-inset: #ffffff,
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
-  icon-disabled: #c6c6c6,
+  icon-disabled: rgba(22, 22, 22, 0.25),
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -171,7 +170,6 @@ $g10: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
-  layer-disabled: #ffffff,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -184,6 +182,8 @@ $g10: (
   layer-selected-hover-03: #d1d1d1,
   layer-selected-inverse: #161616,
   link-inverse: #78a9ff,
+  link-inverse-active: #f4f4f4,
+  link-inverse-hover: #a6c8ff,
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -246,7 +246,6 @@ $g90: (
   field-01: #393939,
   field-02: #525252,
   field-03: #6f6f6f,
-  field-disabled: #393939,
   field-hover-01: #474747,
   field-hover-02: #636363,
   field-hover-03: #5e5e5e,
@@ -254,7 +253,7 @@ $g90: (
   focus-inset: #161616,
   focus-inverse: #0f62fe,
   highlight: #0043ce,
-  icon-disabled: #6f6f6f,
+  icon-disabled: rgba(244, 244, 244, 0.25),
   icon-inverse: #161616,
   icon-on-color: #ffffff,
   icon-on-color-disabled: rgba(255, 255, 255, 0.25),
@@ -271,12 +270,11 @@ $g90: (
   layer-accent-active-02: #393939,
   layer-accent-active-03: #525252,
   layer-accent-hover-01: #636363,
-  layer-accent-hover-02: #404040,
+  layer-accent-hover-02: #5e5e5e,
   layer-accent-hover-03: #7a7a7a,
   layer-active-01: #6f6f6f,
   layer-active-02: #8d8d8d,
   layer-active-03: #393939,
-  layer-disabled: #393939,
   layer-hover-01: #474747,
   layer-hover-02: #636363,
   layer-hover-03: #5e5e5e,
@@ -289,6 +287,8 @@ $g90: (
   layer-selected-hover-03: #7a7a7a,
   layer-selected-inverse: #f4f4f4,
   link-inverse: #0f62fe,
+  link-inverse-active: #161616,
+  link-inverse-hover: #0043ce,
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,
@@ -303,7 +303,7 @@ $g90: (
   support-error: #ff8389,
   support-error-inverse: #da1e28,
   support-info: #4589ff,
-  support-info-inverse: #0f62fe,
+  support-info-inverse: #0043ce,
   support-success: #42be65,
   support-success-inverse: #24a148,
   support-warning: #f1c21b,
@@ -351,15 +351,14 @@ $g100: (
   field-01: #262626,
   field-02: #393939,
   field-03: #525252,
-  field-disabled: #393939,
   field-hover-01: #333333,
   field-hover-02: #474747,
   field-hover-03: #636363,
   focus: #ffffff,
   focus-inset: #161616,
   focus-inverse: #0f62fe,
-  highlight: #d0e2ff,
-  icon-disabled: #525252,
+  highlight: #002d9c,
+  icon-disabled: rgba(244, 244, 244, 0.25),
   icon-inverse: #161616,
   icon-on-color: #ffffff,
   icon-on-color-disabled: rgba(255, 255, 255, 0.25),
@@ -381,7 +380,6 @@ $g100: (
   layer-active-01: #525252,
   layer-active-02: #6f6f6f,
   layer-active-03: #8d8d8d,
-  layer-disabled: #262626,
   layer-hover-01: #333333,
   layer-hover-02: #474747,
   layer-hover-03: #636363,
@@ -394,6 +392,8 @@ $g100: (
   layer-selected-hover-03: #5e5e5e,
   layer-selected-inverse: #f4f4f4,
   link-inverse: #0f62fe,
+  link-inverse-active: #161616,
+  link-inverse-hover: #0043ce,
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,
@@ -408,13 +408,13 @@ $g100: (
   support-error: #fa4d56,
   support-error-inverse: #da1e28,
   support-info: #4589ff,
-  support-info-inverse: #0f62fe,
+  support-info-inverse: #0043ce,
   support-success: #42be65,
   support-success-inverse: #24a148,
   support-warning: #f1c21b,
   support-warning-inverse: #f1c21b,
   text-disabled: rgba(244, 244, 244, 0.25),
-  text-error: #ffb3b8,
+  text-error: #ff8389,
   text-helper: #a8a8a8,
   text-inverse: #161616,
   text-on-color: #ffffff,
@@ -422,7 +422,7 @@ $g100: (
   text-placeholder: rgba(244, 244, 244, 0.4),
   text-primary: #f4f4f4,
   text-secondary: #c6c6c6,
-  toggle-off: #8d8d8d,
+  toggle-off: #6f6f6f,
 ) !default;
 $g100: utilities.merge(
   $g100,

package/scss/themes/modules/generated/_tokens.scss

@@ -88,9 +88,6 @@ $layer-selected-03: _get('layer-selected-03') !default;
 /// The CSS Custom Property for the `layer-selected-hover-03` token
 $layer-selected-hover-03: _get('layer-selected-hover-03') !default;
 
-/// The CSS Custom Property for the `layer-disabled` token
-$layer-disabled: _get('layer-disabled') !default;
-
 /// The CSS Custom Property for the `layer-selected-inverse` token
 $layer-selected-inverse: _get('layer-selected-inverse') !default;
 
@@ -142,9 +139,6 @@ $field-03: _get('field-03') !default;
 /// The CSS Custom Property for the `field-hover-03` token
 $field-hover-03: _get('field-hover-03') !default;
 
-/// The CSS Custom Property for the `field-disabled` token
-$field-disabled: _get('field-disabled') !default;
-
 /// The CSS Custom Property for the `interactive` token
 $interactive: _get('interactive') !default;
 
@@ -223,11 +217,17 @@ $link-primary-hover: _get('link-primary-hover') !default;
 /// The CSS Custom Property for the `link-secondary` token
 $link-secondary: _get('link-secondary') !default;
 
+/// The CSS Custom Property for the `link-visited` token
+$link-visited: _get('link-visited') !default;
+
 /// The CSS Custom Property for the `link-inverse` token
 $link-inverse: _get('link-inverse') !default;
 
-/// The CSS Custom Property for the `link-visited` token
-$link-visited: _get('link-visited') !default;
+/// The CSS Custom Property for the `link-inverse-active` token
+$link-inverse-active: _get('link-inverse-active') !default;
+
+/// The CSS Custom Property for the `link-inverse-hover` token
+$link-inverse-hover: _get('link-inverse-hover') !default;
 
 /// The CSS Custom Property for the `icon-primary` token
 $icon-primary: _get('icon-primary') !default;

package/scss/type/modules/_styles.scss

@@ -8,6 +8,7 @@
 // stylelint-disable number-max-precision
 
 @use 'sass:map';
+@use 'sass:math';
 @use '@carbon/layout';
 @use 'font-family';
 @use 'scale';
@@ -696,7 +697,7 @@ $tokens: (
 /// @access public
 /// @group @carbon/type
 @function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, $value * 0 + 1);
 }
 
 /// This helper includes fluid type styles for the given token value. Fluid type

package/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -125,7 +125,6 @@ Array [
   "field",
   "field01",
   "field02",
-  "fieldDisabled",
   "fieldHover",
   "fluid",
   "fluidDisplay01",
@@ -234,7 +233,6 @@ Array [
   "layerAccentActive",
   "layerAccentHover",
   "layerActive",
-  "layerDisabled",
   "layerHover",
   "layerSelected",
   "layerSelectedDisabled",