@carbon/elements 10.44.0-rc.0 → 10.46.0-rc.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.44.0-rc.0",
+  "version": "10.46.0-rc.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.32.0",
-    "@carbon/grid": "^10.36.0",
-    "@carbon/icons": "^10.39.0",
+    "@carbon/colors": "^10.33.0",
+    "@carbon/grid": "^10.39.0-rc.0",
+    "@carbon/icons": "^10.41.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.32.0",
-    "@carbon/motion": "^10.24.0",
-    "@carbon/themes": "^10.44.0-rc.0",
-    "@carbon/type": "^10.37.0-rc.0"
+    "@carbon/layout": "^10.34.0-rc.0",
+    "@carbon/motion": "^10.25.0",
+    "@carbon/themes": "^10.46.0-rc.0",
+    "@carbon/type": "^10.38.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.29.0",
+    "@carbon/cli": "^10.30.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "56777e5ca24e7cc05e3035e18183297eaeefcea2"
+  "gitHead": "b5f01ac2dbf9e5acb901cfc939b4ddd4d951a35e"
 }

package/scss/grid/_inlined/_mixins.import.scss

@@ -23,6 +23,7 @@
 // and often derived from, bootstrap:
 // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
 
+@use 'sass:meta';
 @use 'sass:math';
 @import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -46,21 +47,21 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: math.div($gutter, 2);
-  padding-left: math.div($gutter, 2);
+  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: math.div($condensed-gutter, 2);
-    padding-left: math.div($condensed-gutter, 2);
+    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: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
     padding-left: 0;
   }
 }
@@ -80,8 +81,13 @@
     // 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(math.div($span, $columns));
-    flex: 0 0 percentage(math.div($span, $columns));
+    @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));
+    }
   }
 }
 
@@ -91,7 +97,12 @@
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--make-col-offset($span, $columns) {
-  $offset: math.div($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 {
@@ -173,8 +184,8 @@
 @mixin carbon--make-row($gutter: $carbon--grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * math.div($gutter, 2);
-  margin-left: -1 * math.div($gutter, 2);
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -225,20 +236,20 @@
 /// @group @carbon/grid
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: math.div($gutter, 2);
+    padding-left: $gutter * 0.5;
   }
 
   .#{$prefix}--hang--end {
-    padding-right: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
   }
 
   // Deprecated ☠️
   .#{$prefix}--hang--left {
-    padding-left: math.div($gutter, 2);
+    padding-left: $gutter * 0.5;
   }
 
   .#{$prefix}--hang--right {
-    padding-right: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
   }
 }
 
@@ -299,7 +310,11 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage(math.div($height, $width));
+      @if meta.function-exists('div', 'math') {
+        padding-top: percentage(math.div($height, $width));
+      } @else {
+        padding-top: percentage(($height / $width));
+      }
     }
   }
 
@@ -336,14 +351,14 @@ $carbon--aspect-ratios: (
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include carbon--breakpoint($name) {
-          padding-right: #{math.div($carbon--grid-gutter, 2) + $margin};
-          padding-left: #{math.div($carbon--grid-gutter, 2) + $margin};
+          padding-right: #{($carbon--grid-gutter * 0.5) + $margin};
+          padding-left: #{($carbon--grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
       @include carbon--breakpoint($name) {
-        padding-right: #{math.div($carbon--grid-gutter, 2) + $margin};
-        padding-left: #{math.div($carbon--grid-gutter, 2) + $margin};
+        padding-right: #{($carbon--grid-gutter * 0.5) + $margin};
+        padding-left: #{($carbon--grid-gutter * 0.5) + $margin};
       }
     }
   }
@@ -400,13 +415,13 @@ $carbon--aspect-ratios: (
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: math.div($grid-gutter, 2);
-    padding-bottom: math.div($grid-gutter, 2);
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: math.div($condensed-gutter, 2);
-    padding-bottom: math.div($condensed-gutter, 2);
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
   }
 
   @include carbon--make-grid-columns($breakpoints, $grid-gutter);

package/scss/grid/_mixins.import.scss

@@ -23,6 +23,7 @@
 // and often derived from, bootstrap:
 // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
 
+@use 'sass:meta';
 @use 'sass:math';
 @import '../layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -46,21 +47,21 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: math.div($gutter, 2);
-  padding-left: math.div($gutter, 2);
+  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: math.div($condensed-gutter, 2);
-    padding-left: math.div($condensed-gutter, 2);
+    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: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
     padding-left: 0;
   }
 }
@@ -80,8 +81,13 @@
     // 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(math.div($span, $columns));
-    flex: 0 0 percentage(math.div($span, $columns));
+    @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));
+    }
   }
 }
 
@@ -91,7 +97,12 @@
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--make-col-offset($span, $columns) {
-  $offset: math.div($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 {
@@ -173,8 +184,8 @@
 @mixin carbon--make-row($gutter: $carbon--grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * math.div($gutter, 2);
-  margin-left: -1 * math.div($gutter, 2);
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -225,20 +236,20 @@
 /// @group @carbon/grid
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: math.div($gutter, 2);
+    padding-left: $gutter * 0.5;
   }
 
   .#{$prefix}--hang--end {
-    padding-right: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
   }
 
   // Deprecated ☠️
   .#{$prefix}--hang--left {
-    padding-left: math.div($gutter, 2);
+    padding-left: $gutter * 0.5;
   }
 
   .#{$prefix}--hang--right {
-    padding-right: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
   }
 }
 
@@ -299,7 +310,11 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage(math.div($height, $width));
+      @if meta.function-exists('div', 'math') {
+        padding-top: percentage(math.div($height, $width));
+      } @else {
+        padding-top: percentage(($height / $width));
+      }
     }
   }
 
@@ -336,14 +351,14 @@ $carbon--aspect-ratios: (
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include carbon--breakpoint($name) {
-          padding-right: #{math.div($carbon--grid-gutter, 2) + $margin};
-          padding-left: #{math.div($carbon--grid-gutter, 2) + $margin};
+          padding-right: #{($carbon--grid-gutter * 0.5) + $margin};
+          padding-left: #{($carbon--grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
       @include carbon--breakpoint($name) {
-        padding-right: #{math.div($carbon--grid-gutter, 2) + $margin};
-        padding-left: #{math.div($carbon--grid-gutter, 2) + $margin};
+        padding-right: #{($carbon--grid-gutter * 0.5) + $margin};
+        padding-left: #{($carbon--grid-gutter * 0.5) + $margin};
       }
     }
   }
@@ -400,13 +415,13 @@ $carbon--aspect-ratios: (
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: math.div($grid-gutter, 2);
-    padding-bottom: math.div($grid-gutter, 2);
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: math.div($condensed-gutter, 2);
-    padding-bottom: math.div($condensed-gutter, 2);
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
   }
 
   @include carbon--make-grid-columns($breakpoints, $grid-gutter);

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

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use "sass:math";
 
 @use 'sass:map';
@@ -254,10 +255,6 @@
   .#{$prefix}--col-start-#{$i} {
     grid-column-start: $i;
   }
-
-  .#{$prefix}--col-end-#{$i} {
-    grid-column-end: $i;
-  }
 }
 
 .#{$prefix}--col-start-auto {
@@ -272,17 +269,13 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    // The `grid-column-end` and `grid-column-start` properties are *not* inclusive.
-    // It starts/ends the column *at* the column, not *on* the column. We must
+    // 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;
       }
-
-      .#{$prefix}--#{$name}\:col-end-#{$i} {
-        grid-column-end: $i;
-      }
     }
 
     .#{$prefix}--#{$name}\:col-start-auto {
@@ -413,7 +406,11 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage(math.div($height, $width));
+      @if meta.function-exists('div', 'math') {
+        padding-top: percentage(math.div($height, $width));
+      } @else {
+        padding-top: percentage(($height / $width));
+      }
     }
   }
 }

package/scss/grid/modules/_mixins.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use "sass:math";
 
 @use 'config' as *;
@@ -63,8 +64,13 @@
     // 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(math.div($span, $columns));
-    flex: 0 0 percentage(math.div($span, $columns));
+    @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));
+    }
   }
 }
 
@@ -74,7 +80,12 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
-  $offset: math.div($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 {

package/scss/grid/vendor/@carbon/layout/_convert.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -38,7 +39,11 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1rem;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -52,5 +57,9 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1em;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1em;
+  }
 }

package/scss/grid/vendor/@carbon/layout/_key-height.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use "sass:math";
 @import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -39,7 +40,11 @@
     $margin: map-get($values, margin);
     $columns: map-get($values, columns);
 
-    @return math.div($width - (2 * $margin), $columns);
+    @if meta.function-exists('div', 'math') {
+      @return math.div($width - (2 * $margin), $columns);
+    } @else {
+      @return (($width - (2 * $margin)) / $columns);
+    }
   } @else {
     @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
   }

package/scss/grid/vendor/@carbon/layout/modules/_convert.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -24,7 +25,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -38,5 +43,9 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }

package/scss/layout/_convert.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -38,7 +39,11 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1rem;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -52,5 +57,9 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1em;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1em;
+  }
 }

package/scss/layout/_key-height.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use "sass:math";
 @import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -39,7 +40,11 @@
     $margin: map-get($values, margin);
     $columns: map-get($values, columns);
 
-    @return math.div($width - (2 * $margin), $columns);
+    @if meta.function-exists('div', 'math') {
+      @return math.div($width - (2 * $margin), $columns);
+    } @else {
+      @return (($width - (2 * $margin)) / $columns);
+    }
   } @else {
     @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
   }

package/scss/layout/modules/_convert.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -24,7 +25,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -38,5 +43,9 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }

package/scss/themes/compat/generated/_themes.scss

@@ -171,7 +171,7 @@ $g90: (
   inverse-support-02: #24a148,
   inverse-support-03: #f1c21b,
   inverse-support-04: #0f62fe,
-  overlay-01: rgba(22, 22, 22, 0.7),
+  overlay-01: rgba(0, 0, 0, 0.65),
   danger-01: #da1e28,
   danger-02: #ff8389,
   inverse-focus-ui: #0f62fe,
@@ -237,7 +237,7 @@ $g100: (
   inverse-support-02: #24a148,
   inverse-support-03: #f1c21b,
   inverse-support-04: #0f62fe,
-  overlay-01: rgba(22, 22, 22, 0.7),
+  overlay-01: rgba(0, 0, 0, 0.65),
   danger-01: #da1e28,
   danger-02: #fa4d56,
   inverse-focus-ui: #0f62fe,

package/scss/themes/generated/_mixins.scss

@@ -141,6 +141,7 @@
   $support-info-inverse: map-get($theme, 'support-info-inverse') !global;
   $overlay: map-get($theme, 'overlay') !global;
   $toggle-off: map-get($theme, 'toggle-off') !global;
+  $shadow: map-get($theme, 'shadow') !global;
   $button-primary: map-get($theme, 'button-primary') !global;
   $button-secondary: map-get($theme, 'button-secondary') !global;
   $button-tertiary: map-get($theme, 'button-tertiary') !global;
@@ -784,6 +785,10 @@
       --#{$custom-property-prefix}-toggle-off,
       map-get($theme, 'toggle-off')
     ) !global;
+    $shadow: var(
+      --#{$custom-property-prefix}-shadow,
+      map-get($theme, 'shadow')
+    ) !global;
     $button-primary: var(
       --#{$custom-property-prefix}-button-primary,
       map-get($theme, 'button-primary')
@@ -2128,6 +2133,10 @@
       @include custom-property('toggle-off', map-get($theme, 'toggle-off'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'shadow', $emit-difference) {
+      @include custom-property('shadow', map-get($theme, 'shadow'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/themes/generated/_themes.scss

@@ -110,6 +110,7 @@ $carbon--theme--white: (
   support-info-inverse: #4589ff,
   overlay: rgba(22, 22, 22, 0.5),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.3),
   button-primary: #0f62fe,
   button-secondary: #393939,
   button-tertiary: #0f62fe,
@@ -1000,7 +1001,8 @@ $carbon--theme--g80: map-merge(
     support-error-inverse: #da1e28,
     support-success-inverse: #24a148,
     support-info-inverse: #0f62fe,
-    overlay: rgba(22, 22, 22, 0.7),
+    overlay: rgba(0, 0, 0, 0.65),
+    shadow: rgba(0, 0, 0, 0.8),
     button-secondary: #6f6f6f,
     button-tertiary: #ffffff,
     button-danger-secondary: #ff8389,
@@ -1066,7 +1068,7 @@ $carbon--theme--g80: map-merge(
     inverse-support-01: #da1e28,
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
-    overlay-01: rgba(22, 22, 22, 0.7),
+    overlay-01: rgba(0, 0, 0, 0.65),
     danger-02: #ff8389,
     inverse-focus-ui: #0f62fe,
     hover-primary: #0151e4,
@@ -1133,7 +1135,7 @@ $carbon--theme--g90: map-merge(
     inverse-support-01: #da1e28,
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
-    overlay-01: rgba(22, 22, 22, 0.7),
+    overlay-01: rgba(0, 0, 0, 0.65),
     danger-02: #ff8389,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
@@ -1189,7 +1191,8 @@ $carbon--theme--g90: map-merge(
     support-error-inverse: #da1e28,
     support-success-inverse: #24a148,
     support-info-inverse: #0f62fe,
-    overlay: rgba(22, 22, 22, 0.7),
+    overlay: rgba(0, 0, 0, 0.65),
+    shadow: rgba(0, 0, 0, 0.8),
     button-secondary: #6f6f6f,
     button-tertiary: #ffffff,
     button-danger-secondary: #ff8389,
@@ -1266,7 +1269,7 @@ $carbon--theme--g100: map-merge(
     inverse-support-01: #da1e28,
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
-    overlay-01: rgba(22, 22, 22, 0.7),
+    overlay-01: rgba(0, 0, 0, 0.65),
     danger-02: #fa4d56,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
@@ -1322,8 +1325,9 @@ $carbon--theme--g100: map-merge(
     support-error-inverse: #da1e28,
     support-success-inverse: #24a148,
     support-info-inverse: #0f62fe,
-    overlay: rgba(22, 22, 22, 0.7),
+    overlay: rgba(0, 0, 0, 0.65),
     toggle-off: #6f6f6f,
+    shadow: rgba(0, 0, 0, 0.8),
     button-secondary: #6f6f6f,
     button-tertiary: #ffffff,
     button-danger-secondary: #fa4d56,
@@ -2126,6 +2130,12 @@ $carbon--theme: (
       $toggle-off,
       map-get($carbon--theme--white, 'toggle-off')
     ),
+  shadow:
+    if(
+      global-variable-exists('shadow'),
+      $shadow,
+      map-get($carbon--theme--white, 'shadow')
+    ),
   button-primary:
     if(
       global-variable-exists('button-primary'),

package/scss/themes/generated/_tokens.scss

@@ -1090,6 +1090,16 @@ $toggle-off: if(
   #8d8d8d
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$shadow: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'shadow'),
+  map-get($carbon--theme, 'shadow'),
+  rgba(0, 0, 0, 0.3)
+) !default;
+
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes

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

@@ -107,6 +107,7 @@ $white: (
   highlight: #d0e2ff,
   overlay: rgba(22, 22, 22, 0.5),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.3),
 ) !default;
 $white: utilities.merge(
   $white,
@@ -211,6 +212,7 @@ $g10: (
   highlight: #d0e2ff,
   overlay: rgba(22, 22, 22, 0.5),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.3),
 ) !default;
 $g10: utilities.merge(
   $g10,
@@ -313,8 +315,9 @@ $g90: (
   skeleton-element: #525252,
   interactive: #4589ff,
   highlight: #0043ce,
-  overlay: rgba(22, 22, 22, 0.7),
+  overlay: rgba(0, 0, 0, 0.65),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.8),
 ) !default;
 $g90: utilities.merge(
   $g90,
@@ -417,8 +420,9 @@ $g100: (
   skeleton-element: #393939,
   interactive: #4589ff,
   highlight: #d0e2ff,
-  overlay: rgba(22, 22, 22, 0.5),
+  overlay: rgba(0, 0, 0, 0.65),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.8),
 ) !default;
 $g100: utilities.merge(
   $g100,

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

@@ -289,6 +289,9 @@ $overlay: _get('overlay') !default;
 /// The CSS Custom Property for the `toggle-off` token
 $toggle-off: _get('toggle-off') !default;
 
+/// The CSS Custom Property for the `shadow` token
+$shadow: _get('shadow') !default;
+
 /// The CSS Custom Property for the `focus` token
 $focus: _get('focus') !default;
 

package/scss/type/_inlined/_styles.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use "sass:meta";
 @use "sass:math";
 @import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -582,7 +583,11 @@ $tokens: (
 /// @access public
 /// @group @carbon/type
 @function strip-unit($value) {
-  @return math.div($value, $value * 0 + 1);
+  @if meta.function-exists('div', 'math') {
+    @return math.div($value, $value * 0 + 1);
+  } @else {
+    @return $value / ($value * 0 + 1);
+  }
 }
 
 /// This helper includes fluid type styles for the given token value. Fluid type

package/scss/type/_styles.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use "sass:meta";
 @use "sass:math";
 @import '../layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -582,7 +583,11 @@ $tokens: (
 /// @access public
 /// @group @carbon/type
 @function strip-unit($value) {
-  @return math.div($value, $value * 0 + 1);
+  @if meta.function-exists('div', 'math') {
+    @return math.div($value, $value * 0 + 1);
+  } @else {
+    @return $value / ($value * 0 + 1);
+  }
 }
 
 /// This helper includes fluid type styles for the given token value. Fluid type

package/scss/type/vendor/@carbon/layout/_convert.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -38,7 +39,11 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1rem;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -52,5 +57,9 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1em;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1em;
+  }
 }

package/scss/type/vendor/@carbon/layout/_key-height.import.scss

@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use "sass:math";
 @import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -39,7 +40,11 @@
     $margin: map-get($values, margin);
     $columns: map-get($values, columns);
 
-    @return math.div($width - (2 * $margin), $columns);
+    @if meta.function-exists('div', 'math') {
+      @return math.div($width - (2 * $margin), $columns);
+    } @else {
+      @return (($width - (2 * $margin)) / $columns);
+    }
   } @else {
     @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
   }

package/scss/type/vendor/@carbon/layout/modules/_convert.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -24,7 +25,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -38,5 +43,9 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }

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

@@ -318,6 +318,7 @@ Array [
   "scale",
   "selectedLightUI",
   "selectedUI",
+  "shadow",
   "size2XLarge",
   "sizeLarge",
   "sizeMedium",