@carbon/elements 10.56.1 → 10.56.3

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.56.1",
+  "version": "10.56.3",
   "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.37.0",
-    "@carbon/grid": "^10.43.0",
-    "@carbon/icons": "^10.48.0",
+    "@carbon/colors": "^10.37.2",
+    "@carbon/grid": "^10.43.2",
+    "@carbon/icons": "^10.48.2",
     "@carbon/import-once": "^10.7.0",
-    "@carbon/layout": "^10.37.0",
-    "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.55.1",
-    "@carbon/type": "^10.45.1"
+    "@carbon/layout": "^10.37.2",
+    "@carbon/motion": "^10.29.2",
+    "@carbon/themes": "^10.55.3",
+    "@carbon/type": "^10.45.3"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.34.0",
+    "@carbon/cli": "^10.34.2",
     "fs-extra": "^10.0.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "f194dfb8beb09cf2ad62b521c65fddf3a439069b"
+  "gitHead": "58041d7d41b49eb391ccd4ac4eaf635c923aab84"
 }

package/scss/grid/modules/_config.scss

@@ -24,13 +24,13 @@ $flex-grid-columns: 16 !default;
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$grid-gutter: convert.rem(32px) !default;
+$grid-gutter: convert.to-rem(32px) !default;
 
 /// Carbon condensed gutter size in rem
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$grid-gutter-condensed: convert.rem(1px) !default;
+$grid-gutter-condensed: convert.to-rem(1px) !default;
 
 // Initial map of our breakpoints and their values
 /// @type Map
@@ -40,27 +40,27 @@ $grid-breakpoints: (
   sm: (
     columns: 4,
     margin: 0,
-    width: convert.rem(320px),
+    width: convert.to-rem(320px),
   ),
   md: (
     columns: 8,
-    margin: convert.rem(16px),
-    width: convert.rem(672px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(672px),
   ),
   lg: (
     columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1056px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1056px),
   ),
   xlg: (
     columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1312px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1312px),
   ),
   max: (
     columns: 16,
-    margin: convert.rem(24px),
-    width: convert.rem(1584px),
+    margin: convert.to-rem(24px),
+    width: convert.to-rem(1584px),
   ),
 ) !default;
 

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

@@ -13,13 +13,13 @@
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$carbon--grid-gutter: carbon--rem(32px);
+$carbon--grid-gutter: to-rem(32px);
 
 /// Carbon condensed gutter size in rem
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$carbon--grid-gutter--condensed: carbon--rem(1px);
+$carbon--grid-gutter--condensed: to-rem(1px);
 
 // Initial map of our breakpoints and their values
 /// @type Map
@@ -29,27 +29,27 @@ $carbon--grid-breakpoints: (
   sm: (
     columns: 4,
     margin: 0,
-    width: carbon--rem(320px),
+    width: to-rem(320px),
   ),
   md: (
     columns: 8,
-    margin: carbon--rem(16px),
-    width: carbon--rem(672px),
+    margin: to-rem(16px),
+    width: to-rem(672px),
   ),
   lg: (
     columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1056px),
+    margin: to-rem(16px),
+    width: to-rem(1056px),
   ),
   xlg: (
     columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1312px),
+    margin: to-rem(16px),
+    width: to-rem(1312px),
   ),
   max: (
     columns: 16,
-    margin: carbon--rem(24px),
-    width: carbon--rem(1584px),
+    margin: to-rem(24px),
+    width: to-rem(1584px),
   ),
 ) !default;
 

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

@@ -33,7 +33,26 @@ $carbon--base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function carbon--rem($px) {
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1rem;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1rem;
+  }
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+@function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";

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

@@ -30,7 +30,23 @@ $carbon--base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function carbon--rem($px) {
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $carbon--base-font-size) * 1rem;
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+/// @deprecated Use `to-rem()`
+@function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";

package/scss/grid/vendor/@carbon/layout/_mini-unit.scss

@@ -19,5 +19,5 @@ $carbon--mini-unit-size: 8px !default;
 /// @access public
 /// @group @carbon/layout
 @function carbon--mini-units($count) {
-  @return carbon--rem($carbon--mini-unit-size * $count);
+  @return to-rem($carbon--mini-unit-size * $count);
 }

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

@@ -19,6 +19,26 @@ $base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+/// @deprecated Use `to-rem()`
 @function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11

package/scss/layout/_breakpoint.scss

@@ -13,13 +13,13 @@
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$carbon--grid-gutter: carbon--rem(32px);
+$carbon--grid-gutter: to-rem(32px);
 
 /// Carbon condensed gutter size in rem
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$carbon--grid-gutter--condensed: carbon--rem(1px);
+$carbon--grid-gutter--condensed: to-rem(1px);
 
 // Initial map of our breakpoints and their values
 /// @type Map
@@ -29,27 +29,27 @@ $carbon--grid-breakpoints: (
   sm: (
     columns: 4,
     margin: 0,
-    width: carbon--rem(320px),
+    width: to-rem(320px),
   ),
   md: (
     columns: 8,
-    margin: carbon--rem(16px),
-    width: carbon--rem(672px),
+    margin: to-rem(16px),
+    width: to-rem(672px),
   ),
   lg: (
     columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1056px),
+    margin: to-rem(16px),
+    width: to-rem(1056px),
   ),
   xlg: (
     columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1312px),
+    margin: to-rem(16px),
+    width: to-rem(1312px),
   ),
   max: (
     columns: 16,
-    margin: carbon--rem(24px),
-    width: carbon--rem(1584px),
+    margin: to-rem(24px),
+    width: to-rem(1584px),
   ),
 ) !default;
 

package/scss/layout/_convert.import.scss

@@ -33,7 +33,26 @@ $carbon--base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function carbon--rem($px) {
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1rem;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1rem;
+  }
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+@function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";

package/scss/layout/_convert.scss

@@ -30,7 +30,23 @@ $carbon--base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function carbon--rem($px) {
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $carbon--base-font-size) * 1rem;
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+/// @deprecated Use `to-rem()`
+@function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";

package/scss/layout/_mini-unit.scss

@@ -19,5 +19,5 @@ $carbon--mini-unit-size: 8px !default;
 /// @access public
 /// @group @carbon/layout
 @function carbon--mini-units($count) {
-  @return carbon--rem($carbon--mini-unit-size * $count);
+  @return to-rem($carbon--mini-unit-size * $count);
 }

package/scss/layout/modules/_convert.scss

@@ -19,6 +19,26 @@ $base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+/// @deprecated Use `to-rem()`
 @function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11

package/scss/type/_inlined/_scale.scss

@@ -28,7 +28,7 @@ $carbon--type-scale: ();
 @for $i from 1 through 23 {
   $carbon--type-scale: append(
     $carbon--type-scale,
-    carbon--rem(carbon--get-type-size($i))
+    to-rem(carbon--get-type-size($i))
   );
 }
 

package/scss/type/_scale.scss

@@ -28,7 +28,7 @@ $carbon--type-scale: ();
 @for $i from 1 through 23 {
   $carbon--type-scale: append(
     $carbon--type-scale,
-    carbon--rem(carbon--get-type-size($i))
+    to-rem(carbon--get-type-size($i))
   );
 }
 

package/scss/type/modules/_scale.scss

@@ -27,7 +27,7 @@
 /// @group @carbon/type
 $type-scale: ();
 @for $i from 1 through 23 {
-  $type-scale: list.append($type-scale, layout.rem(get-type-size($i)));
+  $type-scale: list.append($type-scale, layout.to-rem(get-type-size($i)));
 }
 
 /// Get the value of a specific step in the type scale

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

@@ -24,13 +24,13 @@ $flex-grid-columns: 16 !default;
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$grid-gutter: convert.rem(32px) !default;
+$grid-gutter: convert.to-rem(32px) !default;
 
 /// Carbon condensed gutter size in rem
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$grid-gutter-condensed: convert.rem(1px) !default;
+$grid-gutter-condensed: convert.to-rem(1px) !default;
 
 // Initial map of our breakpoints and their values
 /// @type Map
@@ -40,27 +40,27 @@ $grid-breakpoints: (
   sm: (
     columns: 4,
     margin: 0,
-    width: convert.rem(320px),
+    width: convert.to-rem(320px),
   ),
   md: (
     columns: 8,
-    margin: convert.rem(16px),
-    width: convert.rem(672px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(672px),
   ),
   lg: (
     columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1056px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1056px),
   ),
   xlg: (
     columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1312px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1312px),
   ),
   max: (
     columns: 16,
-    margin: convert.rem(24px),
-    width: convert.rem(1584px),
+    margin: convert.to-rem(24px),
+    width: convert.to-rem(1584px),
   ),
 ) !default;
 

package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_breakpoint.scss

@@ -13,13 +13,13 @@
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$carbon--grid-gutter: carbon--rem(32px);
+$carbon--grid-gutter: to-rem(32px);
 
 /// Carbon condensed gutter size in rem
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$carbon--grid-gutter--condensed: carbon--rem(1px);
+$carbon--grid-gutter--condensed: to-rem(1px);
 
 // Initial map of our breakpoints and their values
 /// @type Map
@@ -29,27 +29,27 @@ $carbon--grid-breakpoints: (
   sm: (
     columns: 4,
     margin: 0,
-    width: carbon--rem(320px),
+    width: to-rem(320px),
   ),
   md: (
     columns: 8,
-    margin: carbon--rem(16px),
-    width: carbon--rem(672px),
+    margin: to-rem(16px),
+    width: to-rem(672px),
   ),
   lg: (
     columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1056px),
+    margin: to-rem(16px),
+    width: to-rem(1056px),
   ),
   xlg: (
     columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1312px),
+    margin: to-rem(16px),
+    width: to-rem(1312px),
   ),
   max: (
     columns: 16,
-    margin: carbon--rem(24px),
-    width: carbon--rem(1584px),
+    margin: to-rem(24px),
+    width: to-rem(1584px),
   ),
 ) !default;
 

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

@@ -33,7 +33,26 @@ $carbon--base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function carbon--rem($px) {
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1rem;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1rem;
+  }
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+@function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";

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

@@ -30,7 +30,23 @@ $carbon--base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function carbon--rem($px) {
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return ($px / $carbon--base-font-size) * 1rem;
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+/// @deprecated Use `to-rem()`
+@function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";

package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_mini-unit.scss

@@ -19,5 +19,5 @@ $carbon--mini-unit-size: 8px !default;
 /// @access public
 /// @group @carbon/layout
 @function carbon--mini-units($count) {
-  @return carbon--rem($carbon--mini-unit-size * $count);
+  @return to-rem($carbon--mini-unit-size * $count);
 }

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

@@ -19,6 +19,26 @@ $base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+/// @deprecated Use `to-rem()`
 @function rem($px) {
   @if unit($px) != 'px' {
     // TODO: update to @error in v11