@carbon/styles 1.35.0-rc.0 → 1.36.0-rc.0

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -11,7 +11,7 @@
 @use '../../../spacing' as *;
 @use '../../../theme' as *;
 @use '../../../utilities/button-reset';
-@use '../../../utilities/convert' as *;
+@use '../../../utilities/convert';
 @use '../../../utilities/focus-outline' as *;
 @use '../../../utilities/high-contrast-mode' as *;
 
@@ -176,8 +176,8 @@
   .#{$prefix}--data-table
     td.#{$prefix}--table-expand
     + .#{$prefix}--table-column-checkbox {
-    padding-right: rem(6px);
-    padding-left: rem(6px);
+    padding-right: convert.to-rem(6px);
+    padding-left: convert.to-rem(6px);
   }
 
   .#{$prefix}--data-table
@@ -188,7 +188,7 @@
     td.#{$prefix}--table-expand
     + .#{$prefix}--table-column-checkbox
     + td {
-    padding-left: rem(8px);
+    padding-left: convert.to-rem(8px);
   }
 
   .#{$prefix}--data-table td.#{$prefix}--table-expand,
@@ -227,7 +227,7 @@
   .#{$prefix}--data-table--top-aligned-header
     th
     .#{$prefix}--table-expand__button {
-    height: rem(32px);
+    height: convert.to-rem(32px);
     align-items: start;
     padding-top: $spacing-03;
   }
@@ -238,7 +238,7 @@
   .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
     th
     .#{$prefix}--table-expand__button {
-    height: rem(24px);
+    height: convert.to-rem(24px);
     padding-top: $spacing-02;
   }
 
@@ -264,7 +264,7 @@
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button {
-    width: rem(32px);
+    width: convert.to-rem(32px);
   }
 
   // fix expanded parent separating border length
@@ -272,10 +272,10 @@
     td.#{$prefix}--table-expand
     + td::after {
     position: absolute;
-    bottom: rem(-1px);
+    bottom: convert.to-rem(-1px);
     left: 0;
-    width: rem(8px);
-    height: rem(1px);
+    width: convert.to-rem(8px);
+    height: convert.to-rem(1px);
     background: $layer-accent;
     content: '';
   }
@@ -414,7 +414,7 @@
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
     + tr[data-child-row]:last-of-type
     td {
-    padding-bottom: rem(24px);
+    padding-bottom: convert.to-rem(24px);
     box-shadow: inset 0 -1px $layer-active;
   }
 

package/scss/components/data-table/skeleton/_data-table-skeleton.scss

@@ -8,7 +8,7 @@
 @use '../../../config' as *;
 @use '../../../spacing' as *;
 @use '../../../theme' as *;
-@use '../../../utilities/convert' as *;
+@use '../../../utilities/convert';
 @use '../../../utilities/skeleton' as *;
 
 /// Data table skeleton styles
@@ -26,8 +26,8 @@
 
     display: block;
 
-    width: rem(64px);
-    height: rem(16px);
+    width: convert.to-rem(64px);
+    height: convert.to-rem(16px);
   }
 
   .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td {
@@ -56,16 +56,16 @@
     .#{$prefix}--data-table-header__title {
     @include skeleton;
 
-    width: rem(120px);
-    height: rem(24px);
+    width: convert.to-rem(120px);
+    height: convert.to-rem(24px);
   }
 
   .#{$prefix}--data-table-container.#{$prefix}--skeleton
     .#{$prefix}--data-table-header__description {
     @include skeleton;
 
-    width: rem(160px);
-    height: rem(16px);
+    width: convert.to-rem(160px);
+    height: convert.to-rem(16px);
 
     margin-top: $spacing-03;
   }

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -10,7 +10,7 @@
 @use '../../../spacing' as *;
 @use '../../../theme' as *;
 @use '../../../utilities/button-reset';
-@use '../../../utilities/convert' as *;
+@use '../../../utilities/convert';
 @use '../../../utilities/focus-outline' as *;
 @use '../../../utilities/high-contrast-mode' as *;
 
@@ -113,14 +113,14 @@
 
   .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm
     th.#{$prefix}--table-sort__header {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+    padding-top: convert.to-rem(7px);
+    padding-bottom: convert.to-rem(7px);
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
     th.#{$prefix}--table-sort__header {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
+    padding-top: convert.to-rem(2px);
+    padding-bottom: convert.to-rem(2px);
   }
 
   .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(
@@ -174,7 +174,7 @@
   }
 
   .#{$prefix}--table-sort__icon-unsorted {
-    width: rem(20px);
+    width: convert.to-rem(20px);
     min-width: $spacing-05;
     margin-right: $spacing-03;
     margin-left: $spacing-03;
@@ -203,7 +203,7 @@
   }
 
   .#{$prefix}--table-sort__icon {
-    width: rem(20px);
+    width: convert.to-rem(20px);
     min-width: $spacing-05;
     margin-right: $spacing-03;
     margin-left: $spacing-03;
@@ -218,34 +218,34 @@
   //----------------------------------------------------------------------------
   // Sortable compact
   .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort th {
-    height: rem(24px);
+    height: convert.to-rem(24px);
   }
 
   // Sortable Short
   .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort th {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   // Sortable Medium
   .#{$prefix}--data-table--md.#{$prefix}--data-table--sort th {
-    height: rem(40px);
+    height: convert.to-rem(40px);
   }
 
   // Sortable Tall
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th {
-    height: rem(64px);
+    height: convert.to-rem(64px);
   }
 
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort {
     display: inline-block;
-    height: rem(64px);
+    height: convert.to-rem(64px);
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon-unsorted,
   .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon {
-    margin-top: rem(13px);
+    margin-top: convert.to-rem(13px);
   }
 
   // Windows HCM fix

package/scss/components/date-picker/_date-picker.scss

@@ -14,7 +14,7 @@
 @use '../../spacing' as *;
 @use '../../type' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/placeholder-colors' as *;
@@ -59,7 +59,7 @@
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label {
-    width: rem(120px);
+    width: convert.to-rem(120px);
   }
 
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
@@ -68,7 +68,7 @@
     .#{$prefix}--date-picker-input__wrapper--warn {
     .#{$prefix}--date-picker__input,
     ~ .#{$prefix}--form-requirement {
-      width: rem(152px);
+      width: convert.to-rem(152px);
     }
   }
 
@@ -80,7 +80,7 @@
 
   .#{$prefix}--date-picker.#{$prefix}--date-picker--single
     .#{$prefix}--date-picker__input {
-    width: rem(288px);
+    width: convert.to-rem(288px);
   }
 
   .#{$prefix}--date-picker
@@ -95,7 +95,7 @@
 
     position: relative;
     display: block;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     padding: 0 $spacing-05;
     border: none;
     border-bottom: 1px solid $border-strong;
@@ -130,11 +130,11 @@
 
   // Size variant styles
   .#{$prefix}--date-picker__input--lg {
-    height: rem(48px);
+    height: convert.to-rem(48px);
   }
 
   .#{$prefix}--date-picker__input--sm {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--date-picker__icon {
@@ -178,12 +178,12 @@
 
   .#{$prefix}--date-picker--range
     > .#{$prefix}--date-picker-container:first-child {
-    margin-right: rem(1px);
+    margin-right: convert.to-rem(1px);
   }
 
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container,
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input {
-    width: rem(143.5px);
+    width: convert.to-rem(143.5px);
   }
 
   // Skeleton State
@@ -201,8 +201,8 @@
   .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label {
     @include skeleton;
 
-    width: rem(75px);
-    height: rem(14px);
+    width: convert.to-rem(75px);
+    height: convert.to-rem(14px);
   }
 
   // Windows HCM fix

package/scss/components/date-picker/_flatpickr.scss

@@ -10,7 +10,7 @@
 @use '../../spacing' as *;
 @use '../../type' as *;
 @use '../../utilities/box-shadow' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 
@@ -92,7 +92,7 @@
   .flatpickr-calendar {
     position: absolute;
     overflow: hidden;
-    width: rem(315px);
+    width: convert.to-rem(315px);
     max-height: 0;
     box-sizing: border-box;
     padding: 0;
@@ -110,7 +110,7 @@
   .flatpickr-calendar.open,
   .flatpickr-calendar.inline {
     overflow: visible;
-    max-height: rem(640px);
+    max-height: convert.to-rem(640px);
     opacity: 1;
     visibility: inherit;
   }
@@ -121,14 +121,14 @@
     z-index: 99999;
     display: flex;
     overflow: hidden;
-    width: rem(288px);
-    height: rem(336px);
+    width: convert.to-rem(288px);
+    height: convert.to-rem(336px);
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: $spacing-02 $spacing-02 $spacing-03 $spacing-02;
     border: none;
-    margin-top: rem(-2px);
+    margin-top: convert.to-rem(-2px);
     background-color: $layer-01;
 
     &:focus {
@@ -146,7 +146,7 @@
 
   .flatpickr-calendar.inline {
     position: relative;
-    top: rem(2px);
+    top: convert.to-rem(2px);
     display: block;
   }
 
@@ -166,7 +166,7 @@
 
   .dayContainer {
     display: flex;
-    height: rem(246px);
+    height: convert.to-rem(246px);
     flex-wrap: wrap;
     justify-content: space-around;
     padding: 0;
@@ -185,7 +185,7 @@
   }
 
   .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
-    height: rem(40px);
+    height: convert.to-rem(40px);
     border-top: 1px solid #e6e6e6;
   }
 
@@ -207,7 +207,7 @@
     @include type-style('heading-compact-01');
 
     display: flex;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     align-items: center;
     background-color: transparent;
     color: $text-primary;
@@ -219,8 +219,8 @@
   .flatpickr-next-month {
     z-index: 3;
     display: flex;
-    width: rem(40px);
-    height: rem(40px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
     padding: 0;
@@ -258,7 +258,7 @@
     @include type-style('heading-compact-01');
 
     display: flex;
-    height: rem(28px);
+    height: convert.to-rem(28px);
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -275,7 +275,7 @@
 
   .numInputWrapper {
     position: relative;
-    width: rem(60px);
+    width: convert.to-rem(60px);
 
     &:hover {
       background-color: $background-hover;
@@ -317,19 +317,19 @@
   }
 
   .numInputWrapper .arrowUp {
-    top: rem(4px);
+    top: convert.to-rem(4px);
     border-bottom: 0;
 
     &::after {
-      border-bottom: rem(4px) solid $icon-primary;
+      border-bottom: convert.to-rem(4px) solid $icon-primary;
     }
   }
 
   .numInputWrapper .arrowDown {
-    top: rem(11px);
+    top: convert.to-rem(11px);
 
     &::after {
-      border-top: rem(4px) solid $icon-primary;
+      border-top: convert.to-rem(4px) solid $icon-primary;
     }
   }
 
@@ -337,9 +337,9 @@
   .numInputWrapper .arrowDown {
     position: absolute;
     left: 2.6rem;
-    width: rem(12px);
+    width: convert.to-rem(12px);
     height: 50%;
-    padding: 0 rem(4px) 0 rem(2px);
+    padding: 0 convert.to-rem(4px) 0 convert.to-rem(2px);
     border: none;
     cursor: pointer;
     line-height: 50%;
@@ -349,8 +349,8 @@
       position: absolute;
       top: 33%;
       display: block;
-      border-right: rem(4px) solid transparent;
-      border-left: rem(4px) solid transparent;
+      border-right: convert.to-rem(4px) solid transparent;
+      border-left: convert.to-rem(4px) solid transparent;
       content: '';
     }
 
@@ -385,7 +385,7 @@
 
   .flatpickr-weekdays {
     display: flex;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     align-items: center;
   }
 
@@ -436,8 +436,8 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    width: rem(40px);
-    height: rem(40px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
     color: $text-primary;
@@ -467,11 +467,11 @@
 
     &::after {
       position: absolute;
-      bottom: rem(7px);
+      bottom: convert.to-rem(7px);
       left: 50%;
       display: block;
-      width: rem(4px);
-      height: rem(4px);
+      width: convert.to-rem(4px);
+      height: convert.to-rem(4px);
       background-color: $link-primary;
       content: '';
       transform: translateX(-50%);
@@ -503,8 +503,8 @@
     }
 
     &:focus {
-      outline: rem(1px) solid $layer-02;
-      outline-offset: rem(-3px);
+      outline: convert.to-rem(1px) solid $layer-02;
+      outline-offset: convert.to-rem(-3px);
     }
   }
 

package/scss/components/dropdown/_dropdown.scss

@@ -13,7 +13,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/box-shadow' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
@@ -26,7 +26,7 @@
   .#{$prefix}--dropdown__wrapper--inline {
     display: inline-grid;
     align-items: center;
-    grid-gap: 0 rem(24px);
+    grid-gap: 0 convert.to-rem(24px);
     grid-template: auto auto / auto min-content;
 
     .#{$prefix}--label {
@@ -51,7 +51,7 @@
     position: relative;
     display: block;
     width: 100%;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     border: none;
     border-bottom: 1px solid $border-strong;
     background-color: $field;
@@ -72,21 +72,21 @@
   }
 
   .#{$prefix}--dropdown--lg {
-    height: rem(48px);
-    max-height: rem(48px);
+    height: convert.to-rem(48px);
+    max-height: convert.to-rem(48px);
   }
 
   .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow {
-    top: rem(16px);
+    top: convert.to-rem(16px);
   }
 
   .#{$prefix}--dropdown--sm {
-    height: rem(32px);
-    max-height: rem(32px);
+    height: convert.to-rem(32px);
+    max-height: convert.to-rem(32px);
   }
 
   .#{$prefix}--dropdown--sm .#{$prefix}--dropdown__arrow {
-    top: rem(8px);
+    top: convert.to-rem(8px);
   }
 
   .#{$prefix}--dropdown--open {
@@ -97,12 +97,12 @@
     @include focus-outline('invalid');
 
     .#{$prefix}--dropdown-text {
-      padding-right: rem(56px);
+      padding-right: convert.to-rem(56px);
     }
 
     + .#{$prefix}--form-requirement {
       display: inline-block;
-      max-height: rem(200px);
+      max-height: convert.to-rem(200px);
       color: $text-error;
     }
   }
@@ -127,7 +127,7 @@
     @include box-shadow;
 
     // 40px item height * 5.5 items shown
-    max-height: rem(220px);
+    max-height: convert.to-rem(220px);
     transition: max-height $duration-fast-02 motion(entrance, productive);
   }
 
@@ -145,7 +145,7 @@
 
   .#{$prefix}--dropdown__arrow {
     position: absolute;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     right: 1rem;
     fill: $icon-primary;
     pointer-events: none;
@@ -174,7 +174,7 @@
     // Account for the border in `.bx--dropdown`
     height: calc(100% + 1px);
     // 2rem + SVG width
-    padding-right: rem(42px);
+    padding-right: convert.to-rem(42px);
     padding-left: $spacing-05;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -244,8 +244,8 @@
 
     display: block;
     overflow: hidden;
-    height: rem(40px);
-    padding: rem(11px) 0;
+    height: convert.to-rem(40px);
+    padding: convert.to-rem(11px) 0;
     border: 1px solid transparent;
     border-top-color: $border-subtle;
     margin: 0 $spacing-05;
@@ -268,16 +268,16 @@
   }
 
   .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link {
-    height: rem(32px);
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+    height: convert.to-rem(32px);
+    padding-top: convert.to-rem(7px);
+    padding-bottom: convert.to-rem(7px);
   }
 
   .#{$prefix}--dropdown--focused,
   .#{$prefix}--dropdown-link:focus {
     @include focus-outline('outline');
 
-    padding: rem(11px) rem(16px);
+    padding: convert.to-rem(11px) convert.to-rem(16px);
     margin: 0;
   }
 
@@ -285,7 +285,7 @@
   .#{$prefix}--dropdown-list[aria-activedescendant]
     .#{$prefix}--dropdown-link:focus {
     // Copied from .bx--dropdown-link styles
-    padding: rem(11px) 0;
+    padding: convert.to-rem(11px) 0;
     margin: 0 $spacing-05;
     outline: none;
   }
@@ -296,7 +296,7 @@
     // copied from default focus styles
     @include focus-outline('outline');
 
-    padding: rem(11px) rem(16px);
+    padding: convert.to-rem(11px) convert.to-rem(16px);
     margin: 0;
   }
 
@@ -322,7 +322,7 @@
   .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm
     .#{$prefix}--dropdown-list {
     // 32px item height * 5.5 items shown
-    max-height: rem(176px);
+    max-height: convert.to-rem(176px);
   }
 
   .#{$prefix}--dropdown--open .#{$prefix}--dropdown-item {
@@ -365,7 +365,7 @@
 
   .#{$prefix}--dropdown--auto-width {
     width: auto;
-    max-width: rem(400px);
+    max-width: convert.to-rem(400px);
   }
 
   .#{$prefix}--dropdown--inline {
@@ -385,8 +385,8 @@
     }
 
     .#{$prefix}--dropdown__arrow {
-      top: rem(8px);
-      right: rem(8px);
+      top: convert.to-rem(8px);
+      right: convert.to-rem(8px);
     }
   }
 
@@ -397,8 +397,8 @@
   .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text {
     display: inline-block;
     overflow: visible;
-    height: rem(32px);
-    padding: rem(7px) $spacing-07 rem(7px) $spacing-04;
+    height: convert.to-rem(32px);
+    padding: convert.to-rem(7px) $spacing-07 convert.to-rem(7px) $spacing-04;
     color: $text-primary;
   }
 
@@ -414,12 +414,12 @@
 
   .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid
     .#{$prefix}--dropdown__invalid-icon {
-    right: rem(32px);
+    right: convert.to-rem(32px);
   }
 
   .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid
     .#{$prefix}--dropdown-text {
-    padding-right: rem(56px);
+    padding-right: convert.to-rem(56px);
   }
 
   .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus