@carbon/styles 1.35.0 → 1.36.0

package/scss/components/tile/_tile.scss

@@ -125,8 +125,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
     .#{$prefix}--tile--disabled-icon {
     position: absolute;
-    right: layout.density('padding-inline');
-    bottom: layout.density('padding-inline');
+    inset-block-end: layout.density('padding-inline');
+    inset-inline-end: layout.density('padding-inline');
   }
 
   .#{$prefix}--tile--clickable .#{$prefix}--tile--icon {
@@ -157,11 +157,11 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile__checkmark {
     position: absolute;
-    top: layout.density('padding-inline');
-    right: layout.density('padding-inline');
     height: 1rem;
     border: none;
     background: transparent;
+    inset-block-start: layout.density('padding-inline');
+    inset-inline-end: layout.density('padding-inline');
     opacity: 0;
     transition: $duration-fast-02 motion(standard, productive);
 
@@ -181,13 +181,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile__chevron {
     position: absolute;
-    right: 0;
-    bottom: 0;
     display: flex;
     width: $-icon-container-size;
     height: $-icon-container-size;
     align-items: center;
     justify-content: center;
+    inset-block-end: 0;
+    inset-inline-end: 0;
 
     svg {
       fill: $icon-primary;
@@ -211,13 +211,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     @include button-reset.reset;
 
     position: absolute;
-    right: 0;
-    bottom: 0;
     display: flex;
     width: $-icon-container-size;
     height: $-icon-container-size;
     align-items: center;
     justify-content: center;
+    inset-block-end: 0;
+    inset-inline-end: 0;
 
     &:focus {
       outline: 2px solid $focus;
@@ -239,7 +239,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     cursor: pointer;
     font-family: inherit;
     font-size: inherit;
-    text-align: left;
+    text-align: start;
     transition: max-height $duration-moderate-01 motion(standard, productive);
 
     @include type-style('body-compact-01');

package/scss/components/time-picker/_time-picker.scss

@@ -12,7 +12,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/placeholder-colors' as *;
 
@@ -57,7 +57,7 @@
   .#{$prefix}--time-picker .#{$prefix}--select-input {
     width: auto;
     min-width: auto;
-    padding-right: rem(48px);
+    padding-right: convert.to-rem(48px);
     margin: 0;
     line-height: 1;
   }
@@ -68,7 +68,7 @@
 
     display: flex;
     width: 4.875rem;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     align-items: center;
     transition: outline $duration-fast-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
@@ -101,14 +101,14 @@
 
   .#{$prefix}--time-picker--sm .#{$prefix}--select-input,
   .#{$prefix}--time-picker--sm .#{$prefix}--time-picker__input-field {
-    height: rem(32px);
-    max-height: rem(32px);
+    height: convert.to-rem(32px);
+    max-height: convert.to-rem(32px);
   }
 
   .#{$prefix}--time-picker--lg .#{$prefix}--select-input,
   .#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field {
-    height: rem(48px);
-    max-height: rem(48px);
+    height: convert.to-rem(48px);
+    max-height: convert.to-rem(48px);
   }
 
   // readonly

package/scss/components/toggle/_toggle.scss

@@ -11,7 +11,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../button/tokens' as button;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/skeleton' as *;
@@ -51,18 +51,18 @@
 
   .#{$prefix}--toggle__switch {
     position: relative;
-    width: rem(48px);
-    height: rem(24px);
+    width: convert.to-rem(48px);
+    height: convert.to-rem(24px);
     background-color: $toggle-off;
-    border-radius: rem(12px);
+    border-radius: convert.to-rem(12px);
     transition: background-color $duration-fast-01 motion(exit, productive);
 
     &::before {
       position: absolute;
-      top: rem(3px);
-      left: rem(3px);
-      width: rem(18px);
-      height: rem(18px);
+      top: convert.to-rem(3px);
+      left: convert.to-rem(3px);
+      width: convert.to-rem(18px);
+      height: convert.to-rem(18px);
       background-color: $icon-on-color;
       border-radius: 50%;
       content: '';
@@ -86,7 +86,7 @@
     background-color: $support-success;
 
     &::before {
-      transform: translateX(rem(24px));
+      transform: translateX(convert.to-rem(24px));
     }
   }
 
@@ -97,26 +97,26 @@
   }
 
   .#{$prefix}--toggle__appearance--sm .#{$prefix}--toggle__switch {
-    width: rem(32px);
-    height: rem(16px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(16px);
 
     &::before {
-      width: rem(10px);
-      height: rem(10px);
+      width: convert.to-rem(10px);
+      height: convert.to-rem(10px);
     }
   }
 
   .#{$prefix}--toggle__appearance--sm
     .#{$prefix}--toggle__switch--checked::before {
-    transform: translateX(rem(16px));
+    transform: translateX(convert.to-rem(16px));
   }
 
   .#{$prefix}--toggle__check {
     position: absolute;
-    top: rem(6px);
-    right: rem(5px);
-    width: rem(6px);
-    height: rem(5px);
+    top: convert.to-rem(6px);
+    right: convert.to-rem(5px);
+    width: convert.to-rem(6px);
+    height: convert.to-rem(5px);
     fill: $support-success;
     visibility: hidden;
   }
@@ -162,15 +162,15 @@
     background-color: transparent;
 
     &::before {
-      top: rem(2px);
-      left: rem(2px);
+      top: convert.to-rem(2px);
+      left: convert.to-rem(2px);
       background-color: $text-primary;
     }
   }
 
   .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check {
-    top: rem(5px);
-    right: rem(4px);
+    top: convert.to-rem(5px);
+    right: convert.to-rem(4px);
     fill: $background;
   }
 
@@ -204,16 +204,16 @@
   .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle {
     @include circular-skeleton;
 
-    width: rem(18px);
-    height: rem(18px);
+    width: convert.to-rem(18px);
+    height: convert.to-rem(18px);
     border-radius: 50%;
   }
 
   .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-rectangle {
     @include skeleton;
 
-    width: rem(24px);
-    height: rem(8px);
-    margin-left: rem(8px);
+    width: convert.to-rem(24px);
+    height: convert.to-rem(8px);
+    margin-left: convert.to-rem(8px);
   }
 }

package/scss/components/toggletip/_toggletip.scss

@@ -44,7 +44,10 @@
   }
 
   .#{$prefix}--toggletip {
-    @include custom-property.declaration('popover-offset', convert.rem(13px));
+    @include custom-property.declaration(
+      'popover-offset',
+      convert.to-rem(13px)
+    );
   }
 
   .#{$prefix}--toggletip-content {

package/scss/components/tooltip/_tooltip.scss

@@ -34,7 +34,7 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--tooltip-content {
     @include type.type-style('body-01');
 
-    max-width: convert.rem(288px);
+    max-width: convert.to-rem(288px);
     padding: $tooltip-padding-block $tooltip-padding-inline;
 
     color: theme.$text-inverse;
@@ -64,8 +64,8 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-tooltip {
     @include type.type-style('body-01');
 
-    max-width: convert.rem(176px);
-    padding: convert.rem(8px) convert.rem(16px);
+    max-width: convert.to-rem(176px);
+    padding: convert.to-rem(8px) convert.to-rem(16px);
   }
 }
 
@@ -73,17 +73,17 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--icon-tooltip {
     @include custom-property.declaration(
       'tooltip-padding-block',
-      convert.rem(2px)
+      convert.to-rem(2px)
     );
     @include custom-property.declaration(
       'popover-caret-width',
-      convert.rem(8px)
+      convert.to-rem(8px)
     );
     @include custom-property.declaration(
       'popover-caret-height',
-      convert.rem(4px)
+      convert.to-rem(4px)
     );
-    @include custom-property.declaration('popover-offset', convert.rem(8px));
+    @include custom-property.declaration('popover-offset', convert.to-rem(8px));
   }
 
   .#{$prefix}--icon-tooltip .#{$prefix}--tooltip-content {

package/scss/components/treeview/_treeview.scss

@@ -11,7 +11,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
@@ -88,7 +88,7 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    min-height: rem(32px);
+    min-height: convert.to-rem(32px);
     flex: 1;
     align-items: center;
 
@@ -101,8 +101,8 @@
   .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node)
     .#{$prefix}--tree-node__label {
     // (min-height 32px - single line text height 18px) / 2 = 7px
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+    padding-top: convert.to-rem(7px);
+    padding-bottom: convert.to-rem(7px);
   }
 
   .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
@@ -140,8 +140,8 @@
 
   .#{$prefix}--tree-parent-node__toggle {
     display: flex;
-    width: rem(24px);
-    height: rem(24px);
+    width: convert.to-rem(24px);
+    height: convert.to-rem(24px);
     align-items: center;
     align-self: flex-start;
     padding-left: $spacing-02;
@@ -173,7 +173,7 @@
     min-width: 1rem;
     min-height: 1rem;
     align-self: flex-start;
-    margin-top: rem(1px);
+    margin-top: convert.to-rem(1px);
     margin-right: $spacing-03;
     margin-left: $spacing-03;
     fill: $icon-secondary;
@@ -210,7 +210,7 @@
       position: absolute;
       top: 0;
       left: 0;
-      width: rem(4px);
+      width: convert.to-rem(4px);
       height: 100%;
       background-color: $interactive;
       content: '';
@@ -219,7 +219,7 @@
 
   // xs size variant
   .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
-    min-height: rem(24px);
+    min-height: convert.to-rem(24px);
   }
 
   .#{$prefix}--tree--xs

package/scss/components/ui-shell/header/_header.scss

@@ -17,7 +17,7 @@
 @use '../../../type' as *;
 @use '../../../utilities/button-reset';
 @use '../../../utilities/component-reset';
-@use '../../../utilities/convert' as *;
+@use '../../../utilities/convert';
 @use '../../../utilities/z-index' as *;
 
 /// UI shell header
@@ -45,7 +45,7 @@
     display: inline-flex;
     width: mini-units(6);
     height: mini-units(6);
-    border: rem(1px) solid transparent;
+    border: convert.to-rem(1px) solid transparent;
     transition: background-color $duration-fast-02,
       border-color $duration-fast-02;
     @include breakpoint-down('md') {
@@ -146,7 +146,7 @@
     height: 100%;
     align-items: center;
     padding: 0 mini-units(4) 0 mini-units(2);
-    border: rem(2px) solid transparent;
+    border: convert.to-rem(2px) solid transparent;
     font-weight: 600;
     letter-spacing: 0.1px;
     line-height: 1.25rem;
@@ -175,7 +175,7 @@
 
   .#{$prefix}--header__menu-toggle:not(.#{$prefix}--header__menu-toggle__hidden)
     ~ .#{$prefix}--header__name {
-    padding-left: rem(8px);
+    padding-left: convert.to-rem(8px);
   }
 
   //--------------------------------------------------------------------------
@@ -197,8 +197,8 @@
       top: 50%;
       left: 0;
       display: block;
-      width: rem(1px);
-      height: rem(24px);
+      width: convert.to-rem(1px);
+      height: convert.to-rem(24px);
       background-color: $border-subtle;
       content: '';
       transform: translateY(-50%);
@@ -227,7 +227,7 @@
     background-color: $background;
     color: $text-secondary;
     // Text styles
-    font-size: rem(14px);
+    font-size: convert.to-rem(14px);
     font-weight: 400;
     letter-spacing: 0;
     line-height: 1.125rem;

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -16,7 +16,7 @@
 @use '../../../type' as *;
 @use '../../../utilities/button-reset';
 @use '../../../utilities/component-reset';
-@use '../../../utilities/convert' as *;
+@use '../../../utilities/convert';
 @use '../../../utilities/focus-outline' as *;
 @use '../../../utilities/high-contrast-mode' as *;
 @use '../../../utilities/z-index' as *;
@@ -76,7 +76,7 @@
 
   .#{$prefix}--side-nav__overlay {
     position: fixed;
-    top: rem(48px);
+    top: convert.to-rem(48px);
     left: 0;
     width: 0;
     height: 0;
@@ -234,8 +234,8 @@
   }
 
   .#{$prefix}--side-nav__submenu-chevron > svg {
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     transition: transform $duration-fast-02;
   }
 
@@ -291,7 +291,7 @@
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
     + .#{$prefix}--side-nav__menu {
-    max-height: rem(1500px);
+    max-height: convert.to-rem(1500px);
     visibility: inherit;
   }
 
@@ -349,7 +349,7 @@
     @include text-overflow();
 
     color: $text-secondary;
-    font-size: rem(14px);
+    font-size: convert.to-rem(14px);
     letter-spacing: 0.1px;
     line-height: 1.25rem;
     user-select: none;
@@ -453,16 +453,16 @@
     @include breakpoint-down('lg') {
       position: relative;
       display: block;
-      margin-bottom: rem(32px);
+      margin-bottom: convert.to-rem(32px);
     }
   }
 
   .#{$prefix}--side-nav__header-divider::after {
     position: absolute;
-    bottom: rem(-16px);
-    left: rem(16px);
+    bottom: convert.to-rem(-16px);
+    left: convert.to-rem(16px);
     width: calc(100% - 32px);
-    height: rem(1px);
+    height: convert.to-rem(1px);
     background: $border-subtle;
     content: '';
   }

package/scss/components/ui-shell/switcher/_switcher.scss

@@ -10,7 +10,7 @@
 @use '../../../theme' as *;
 @use '../../../type' as *;
 @use '../../../utilities/component-reset';
-@use '../../../utilities/convert' as *;
+@use '../../../utilities/convert';
 
 /// UI shell side nav
 /// @access private
@@ -40,7 +40,7 @@
 
   .#{$prefix}--switcher__item--divider {
     display: block;
-    width: rem(224px);
+    width: convert.to-rem(224px);
     height: 1px;
     border: none;
     margin: $spacing-03 $spacing-05;
@@ -52,7 +52,7 @@
 
     display: block;
     height: $spacing-07;
-    padding: rem(6px) $spacing-05;
+    padding: convert.to-rem(6px) $spacing-05;
     color: $text-secondary;
     text-decoration: none;
 

package/scss/utilities/_convert.scss

@@ -18,6 +18,21 @@ $base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group utilities
+@function to-rem($px) {
+  @if unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($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
+/// @deprecated
+/// @group @carbon/layout
 @function rem($px) {
   @if unit($px) != 'px' {
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";

package/scss/utilities/_tooltip.scss

@@ -6,7 +6,7 @@
 //
 
 @use 'box-shadow' as *;
-@use 'convert' as *;
+@use 'convert';
 @use 'focus-outline' as *;
 @use 'z-index' as *;
 @use '../config' as *;
@@ -37,16 +37,16 @@
 
   z-index: z('floating');
   width: max-content;
-  min-width: rem(24px);
-  max-width: rem(208px);
+  min-width: convert.to-rem(24px);
+  max-width: convert.to-rem(208px);
   height: auto;
   padding: if(
     $tooltip-type == 'definition',
-    rem(8px) rem(16px),
-    rem(3px) rem(16px)
+    convert.to-rem(8px) convert.to-rem(16px),
+    convert.to-rem(3px) convert.to-rem(16px)
   );
   background-color: $background-inverse;
-  border-radius: rem(2px);
+  border-radius: convert.to-rem(2px);
   color: $text-inverse;
   font-weight: 400;
   text-align: left;
@@ -232,11 +232,15 @@
   $align: 'center'
 ) {
   // position and alignment
-  $caret-spacing: if($tooltip-type == 'definition', rem(4px), rem(8px));
+  $caret-spacing: if(
+    $tooltip-type == 'definition',
+    convert.to-rem(4px),
+    convert.to-rem(8px)
+  );
 
   // space between caret and trigger button
-  $caret-height: rem(5px);
-  $caret-width: rem(8px);
+  $caret-height: convert.to-rem(5px);
+  $caret-width: convert.to-rem(8px);
   $body-spacing: $caret-spacing + $caret-height;
 
   // Use pseudo element to create invisible hover area to keep tooltip open on hover
@@ -249,26 +253,26 @@
     @if ($position == 'top' or $position == 'bottom') {
       left: 0;
       width: 100%;
-      height: rem(12px);
+      height: convert.to-rem(12px);
     }
 
     @if ($position == 'left' or $position == 'right') {
       top: 0;
-      width: rem(12px);
+      width: convert.to-rem(12px);
       height: 100%;
     }
 
     @if ($position == 'top') {
-      bottom: rem(-12px);
+      bottom: convert.to-rem(-12px);
     }
     @if ($position == 'right') {
-      left: rem(-12px);
+      left: convert.to-rem(-12px);
     }
     @if ($position == 'bottom') {
-      top: rem(-12px);
+      top: convert.to-rem(-12px);
     }
     @if ($position == 'left') {
-      right: rem(-12px);
+      right: convert.to-rem(-12px);
     }
   }
 
@@ -298,25 +302,37 @@
   &::before {
     @if ($position == 'top') {
       top: -$caret-spacing;
-      border-width: rem(5px) rem(4px) 0 rem(4px);
+      border-width: convert.to-rem(5px)
+        convert.to-rem(4px)
+        0
+        convert.to-rem(4px);
       border-color: $background-inverse transparent transparent transparent;
       transform: translate(-50%, -100%);
     }
     @if ($position == 'right') {
       right: -$caret-spacing;
-      border-width: rem(4px) rem(5px) rem(4px) 0;
+      border-width: convert.to-rem(4px)
+        convert.to-rem(5px)
+        convert.to-rem(4px)
+        0;
       border-color: transparent $background-inverse transparent transparent;
       transform: translate(100%, -50%);
     }
     @if ($position == 'bottom') {
       bottom: -$caret-spacing;
-      border-width: 0 rem(4px) rem(5px) rem(4px);
+      border-width: 0
+        convert.to-rem(4px)
+        convert.to-rem(5px)
+        convert.to-rem(4px);
       border-color: transparent transparent $background-inverse transparent;
       transform: translate(-50%, 100%);
     }
     @if ($position == 'left') {
       left: -$caret-spacing;
-      border-width: rem(4px) 0 rem(4px) rem(5px);
+      border-width: convert.to-rem(4px)
+        0
+        convert.to-rem(4px)
+        convert.to-rem(5px);
       border-color: transparent transparent transparent $background-inverse;
       transform: translate(-100%, -50%);
     }
@@ -369,7 +385,7 @@
     &.#{$prefix}--tooltip--a11y + .#{$prefix}--assistive-text {
       @if ($position == 'bottom') {
         // carryover from https://github.com/carbon-design-system/carbon/pull/3151/files#diff-93734be0784e9530b6d14a7b03b0d352R261-R265
-        bottom: -($body-spacing - rem(1px));
+        bottom: -($body-spacing - convert.to-rem(1px));
         @if ($align == 'start' or $align == 'end') {
           transform: translate(0, 100%);
         } @else {