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

package/scss/components/file-uploader/_file-uploader.scss

@@ -12,7 +12,7 @@
 @use '../../type' as *;
 
 @use '../../utilities/button-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
@@ -56,14 +56,14 @@
   // TODO: deprecate this block
   .#{$prefix}--file-btn {
     display: inline-flex;
-    padding-right: rem(64px);
+    padding-right: convert.to-rem(64px);
     margin: 0;
   }
 
   .#{$prefix}--file-browse-btn {
     display: inline-block;
     width: 100%;
-    max-width: rem(320px);
+    max-width: convert.to-rem(320px);
 
     color: $link-primary;
     cursor: pointer;
@@ -137,12 +137,12 @@
 
   .#{$prefix}--file__selected-file {
     display: grid;
-    max-width: rem(320px);
+    max-width: convert.to-rem(320px);
     min-height: $spacing-09;
     align-items: center;
     margin-bottom: $spacing-03;
     background-color: $layer;
-    gap: rem(12px) $spacing-05;
+    gap: convert.to-rem(12px) $spacing-05;
     grid-auto-rows: auto;
     grid-template-columns: 1fr auto;
     word-break: break-word;
@@ -174,12 +174,12 @@
   }
 
   .#{$prefix}--file__selected-file--md {
-    min-height: rem(40px);
+    min-height: convert.to-rem(40px);
     gap: $spacing-03 $spacing-05;
   }
 
   .#{$prefix}--file__selected-file--sm {
-    min-height: rem(32px);
+    min-height: convert.to-rem(32px);
     gap: $spacing-02 $spacing-05;
   }
 
@@ -187,7 +187,7 @@
   .#{$prefix}--file__selected-file--invalid__wrapper {
     @include focus-outline('invalid');
 
-    max-width: rem(320px);
+    max-width: convert.to-rem(320px);
     margin-bottom: $spacing-03;
     background-color: $layer;
     outline-width: 1px;
@@ -196,7 +196,7 @@
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
 
-    padding: rem(12px) 0;
+    padding: convert.to-rem(12px) 0;
   }
 
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm {
@@ -214,12 +214,12 @@
 
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm
     .#{$prefix}--form-requirement {
-    padding-top: rem(7px);
+    padding-top: convert.to-rem(7px);
   }
 
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md
     .#{$prefix}--form-requirement {
-    padding-top: rem(11px);
+    padding-top: convert.to-rem(11px);
   }
 
   .#{$prefix}--file__selected-file--invalid
@@ -247,7 +247,7 @@
 
     display: block;
     overflow: visible;
-    max-height: rem(200px);
+    max-height: convert.to-rem(200px);
     padding: $spacing-03 $spacing-05;
     color: $text-error;
     font-weight: 400;
@@ -322,7 +322,7 @@
 
     display: flex;
     overflow: hidden;
-    height: rem(96px);
+    height: convert.to-rem(96px);
     align-items: flex-start;
     justify-content: space-between;
     padding: $spacing-05;

package/scss/components/fluid-combo-box/_fluid-combo-box.scss

@@ -12,7 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../dropdown';
 @use '../fluid-list-box';
@@ -30,7 +30,7 @@
     .#{$prefix}--combo-box
     .#{$prefix}--text-input {
     overflow: hidden;
-    padding: rem(33px) $spacing-10 rem(13px) $spacing-05;
+    padding: convert.to-rem(33px) $spacing-10 convert.to-rem(13px) $spacing-05;
     text-overflow: ellipsis;
     transition: none;
     white-space: nowrap;
@@ -46,14 +46,14 @@
     .#{$prefix}--combo-box
     .#{$prefix}--list-box__selection {
     top: auto;
-    bottom: rem(10px);
+    bottom: convert.to-rem(10px);
     transform: none;
   }
 
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--combo-box
     .#{$prefix}--list-box__menu-icon {
-    bottom: rem(14px);
+    bottom: convert.to-rem(14px);
   }
 
   .#{$prefix}--list-box__wrapper--fluid

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -12,7 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../date-picker';
 
@@ -33,11 +33,11 @@
   .#{$prefix}--date-picker--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     left: $spacing-05;
     display: flex;
     width: calc(100% - 2rem);
-    height: rem(16px);
+    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
   }
@@ -63,9 +63,9 @@
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper
     .#{$prefix}--date-picker__input {
-    min-width: rem(144px);
-    min-height: rem(64px);
-    padding: rem(32px) $spacing-05 rem(13px);
+    min-width: convert.to-rem(144px);
+    min-height: convert.to-rem(64px);
+    padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px);
     border-bottom: none;
     background: transparent;
   }
@@ -90,7 +90,7 @@
 
   // Single, Range
   .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__icon {
-    top: rem(43px);
+    top: convert.to-rem(43px);
   }
 
   .#{$prefix}--date-picker--fluid
@@ -130,8 +130,8 @@
     .#{$prefix}--date-picker--range
     .#{$prefix}--date-picker-container {
     width: 100%;
-    min-width: rem(144px);
-    min-height: rem(63px);
+    min-width: convert.to-rem(144px);
+    min-height: convert.to-rem(63px);
   }
 
   .#{$prefix}--date-picker--fluid
@@ -175,7 +175,7 @@
     .#{$prefix}--form-requirement,
   .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn
     .#{$prefix}--form-requirement {
-    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    padding: $spacing-03 convert.to-rem(40px) $spacing-03 $spacing-05;
     margin: 0;
   }
 
@@ -225,7 +225,7 @@
     .#{$prefix}--date-picker--range
     .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
     position: absolute;
-    top: rem(8px);
+    top: convert.to-rem(8px);
     right: 0;
     display: block;
     width: 1px;
@@ -251,7 +251,7 @@
     .#{$prefix}--date-picker__icon--invalid,
   .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn
     .#{$prefix}--date-picker__icon--warn {
-    top: rem(80px);
+    top: convert.to-rem(80px);
   }
 
   .#{$prefix}--date-picker--fluid
@@ -281,7 +281,7 @@
     display: block;
     overflow: visible;
     max-height: 100%;
-    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    padding: $spacing-03 convert.to-rem(40px) $spacing-03 $spacing-05;
     margin-top: 0;
   }
 
@@ -302,12 +302,12 @@
   .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
     .#{$prefix}--date-picker--range
     + .#{$prefix}--date-picker__icon {
-    top: rem(80px);
+    top: convert.to-rem(80px);
   }
 
   // Skeleton
   .#{$prefix}--date-picker--fluid__skeleton {
-    height: rem(64px);
+    height: convert.to-rem(64px);
     border-bottom: 1px solid $skeleton-element;
     background: $skeleton-background;
   }
@@ -323,19 +323,19 @@
     top: $spacing-05;
     left: $spacing-05;
     width: 25%;
-    height: rem(8px);
+    height: convert.to-rem(8px);
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--label {
-    margin-bottom: rem(4px);
+    margin-bottom: convert.to-rem(4px);
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--text-input {
     position: absolute;
-    top: rem(36px);
+    top: convert.to-rem(36px);
     left: $spacing-05;
     width: 50%;
-    height: rem(8px);
+    height: convert.to-rem(8px);
     padding: 0;
   }
 

package/scss/components/fluid-dropdown/_fluid-dropdown.scss

@@ -12,7 +12,6 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../dropdown';
 @use '../fluid-list-box';

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -12,7 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 
@@ -26,18 +26,18 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box {
-    min-height: rem(64px);
+    min-height: convert.to-rem(64px);
     padding: 0;
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     left: $spacing-05;
     display: flex;
     width: calc(100% - 2rem);
-    height: rem(16px);
+    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
   }
@@ -61,8 +61,8 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field {
-    padding-top: rem(33px);
-    padding-bottom: rem(13px);
+    padding-top: convert.to-rem(33px);
+    padding-bottom: convert.to-rem(13px);
     padding-left: $spacing-05;
   }
 
@@ -82,7 +82,7 @@
       .#{$prefix}--list-box__wrapper--fluid--condensed
     )
     .#{$prefix}--list-box__menu-item__selected-icon {
-    top: rem(20px);
+    top: convert.to-rem(20px);
   }
 
   // Disabled styles
@@ -122,7 +122,7 @@
   .#{$prefix}--list-box__wrapper--fluid
     :not(.#{$prefix}--list-box--up)
     .#{$prefix}--list-box__menu {
-    top: calc(100% + rem(3px));
+    top: calc(100% + convert.to-rem(3px));
   }
 
   // Invalid / Warning styles
@@ -175,7 +175,7 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--list-box--warning
     ~ .#{$prefix}--form-requirement {
-    padding: rem(8px) 4rem rem(8px) $spacing-05;
+    padding: convert.to-rem(8px) 4rem convert.to-rem(8px) $spacing-05;
     margin-top: 0;
   }
 
@@ -190,7 +190,7 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__invalid-icon {
-    top: rem(81px);
+    top: convert.to-rem(81px);
     right: $spacing-05;
     pointer-events: none;
   }
@@ -251,10 +251,10 @@
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__field {
     position: absolute;
-    top: rem(36px);
+    top: convert.to-rem(36px);
     left: $spacing-05;
     width: 50%;
-    height: rem(8px);
+    height: convert.to-rem(8px);
     padding: 0;
   }
 
@@ -265,7 +265,7 @@
     top: $spacing-05;
     left: $spacing-05;
     width: 25%;
-    height: rem(8px);
+    height: convert.to-rem(8px);
   }
 
   .#{$prefix}--list-box__wrapper--fluid

package/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -12,7 +12,6 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../multiselect';
 @use '../fluid-list-box';

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -12,7 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../number-input';
 
@@ -26,11 +26,11 @@
   .#{$prefix}--number-input--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     left: $spacing-05;
     display: flex;
     width: calc(100% - 2rem);
-    height: rem(16px);
+    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
   }
@@ -58,15 +58,16 @@
   }
 
   .#{$prefix}--number-input--fluid input[type='number'] {
-    min-height: rem(64px);
-    padding: rem(32px) rem(80px) rem(13px) $spacing-05;
+    min-height: convert.to-rem(64px);
+    padding: convert.to-rem(32px) convert.to-rem(80px) convert.to-rem(13px)
+      $spacing-05;
     background: transparent;
     outline: none;
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
-    top: rem(23px);
-    height: rem(40px);
+    top: convert.to-rem(23px);
+    height: convert.to-rem(40px);
     transform: translate(0);
   }
 
@@ -134,7 +135,7 @@
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn::after {
     top: 0;
-    height: calc(100% - rem(1px));
+    height: calc(100% - convert.to-rem(1px));
   }
 
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
@@ -177,7 +178,7 @@
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid {
-    top: rem(73px);
+    top: convert.to-rem(73px);
     right: $spacing-05;
     pointer-events: none;
   }
@@ -206,17 +207,17 @@
     .#{$prefix}--number__input-wrapper--warning
     + .#{$prefix}--number-input__divider {
     position: absolute;
-    top: rem(63px);
+    top: convert.to-rem(63px);
     display: block;
     width: calc(100% - 2rem);
-    height: rem(1px);
+    height: convert.to-rem(1px);
     border: none;
     border-bottom: 1px solid $border-subtle;
     margin: 0 1rem;
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--form-requirement {
-    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    padding: $spacing-03 convert.to-rem(40px) $spacing-03 $spacing-05;
     margin: 0;
   }
 
@@ -273,7 +274,7 @@
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border: initial;
-    border-bottom-width: rem(1px);
+    border-bottom-width: convert.to-rem(1px);
   }
 
   // Disabled states

package/scss/components/fluid-search/_fluid-search.scss

@@ -12,24 +12,24 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../search';
 
 @mixin fluid-search {
   .#{$prefix}--search--fluid {
-    height: rem(64px);
+    height: convert.to-rem(64px);
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     left: $spacing-05;
     display: flex;
     overflow: initial;
     width: calc(100% - 2rem);
-    height: rem(16px);
+    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
     clip: initial;
@@ -54,30 +54,31 @@
 
   .#{$prefix}--search--fluid .#{$prefix}--search-input {
     height: 100%;
-    padding: rem(32px) rem(88px) rem(13px) $spacing-05;
+    padding: convert.to-rem(32px) convert.to-rem(88px) convert.to-rem(13px)
+      $spacing-05;
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon {
-    inset: auto 1rem rem(13px) auto;
+    inset: auto 1rem convert.to-rem(13px) auto;
     transform: none;
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close {
-    width: rem(40px);
-    height: rem(40px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
     border: none;
-    inset: auto rem(48px) 0 auto;
+    inset: auto convert.to-rem(48px) 0 auto;
     transition: background-color $duration-fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close::before {
     position: absolute;
     display: block;
-    width: rem(1px);
+    width: convert.to-rem(1px);
     height: 1rem;
     background: $border-subtle;
     content: '';
-    inset: auto rem(-1px) rem(14px) auto;
+    inset: auto convert.to-rem(-1px) convert.to-rem(14px) auto;
   }
 
   .#{$prefix}--search--fluid
@@ -92,7 +93,7 @@
     left: 0;
     display: block;
     width: 100%;
-    height: rem(2px);
+    height: convert.to-rem(2px);
     content: '';
   }
 
@@ -105,12 +106,12 @@
   .#{$prefix}--search--fluid
     .#{$prefix}--search-input:not(:focus)
     ~ .#{$prefix}--search-close:not([disabled])::after {
-    height: rem(1px);
+    height: convert.to-rem(1px);
     background: $border-strong;
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close svg {
-    margin-bottom: rem(2px);
+    margin-bottom: convert.to-rem(2px);
   }
 
   // Disabled styles

package/scss/components/fluid-select/_fluid-select.scss

@@ -12,7 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../select';
 
@@ -28,11 +28,11 @@
   .#{$prefix}--select--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     left: $spacing-05;
     display: flex;
     width: calc(100% - 2rem);
-    height: rem(16px);
+    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
   }
@@ -54,8 +54,9 @@
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select-input {
-    min-height: rem(64px);
-    padding: rem(32px) rem(32px) rem(13px) $spacing-05;
+    min-height: convert.to-rem(64px);
+    padding: convert.to-rem(32px) convert.to-rem(32px) convert.to-rem(13px)
+      $spacing-05;
     outline: none;
     text-overflow: ellipsis;
   }
@@ -96,7 +97,7 @@
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
     .#{$prefix}--select-input {
-    padding-right: rem(32px);
+    padding-right: convert.to-rem(32px);
     border-bottom: 1px solid transparent;
   }
 
@@ -135,7 +136,7 @@
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--form-requirement {
-    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    padding: $spacing-03 convert.to-rem(40px) $spacing-03 $spacing-05;
     margin: 0;
   }
 
@@ -155,7 +156,7 @@
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
     .#{$prefix}--select__invalid-icon {
-    top: rem(73px);
+    top: convert.to-rem(73px);
     right: $spacing-05;
     pointer-events: none;
   }

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -12,7 +12,7 @@
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 
 @mixin fluid-text-area {
@@ -37,11 +37,11 @@
   .#{$prefix}--text-area--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     left: $spacing-05;
     display: flex;
     width: calc(100% - 2rem);
-    height: rem(16px);
+    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
   }
@@ -71,8 +71,8 @@
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area {
-    min-height: rem(64px);
-    padding: 0 $spacing-05 rem(13px);
+    min-height: convert.to-rem(64px);
+    padding: 0 $spacing-05 convert.to-rem(13px);
     margin-top: 2rem;
     outline: none;
   }
@@ -99,8 +99,8 @@
 
   // accounts for 2px of border when invalid
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid {
-    padding: 0 rem(14px) rem(13px);
-    margin-top: rem(30px);
+    padding: 0 convert.to-rem(14px) convert.to-rem(13px);
+    margin-top: convert.to-rem(30px);
   }
 
   .#{$prefix}--text-area--fluid