@carbon/styles 1.35.0 → 1.36.0-rc.0

package/scss/components/fluid-text-input/_fluid-text-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 '../text-input';
 
@@ -28,11 +28,11 @@
   .#{$prefix}--text-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;
   }
@@ -60,8 +60,8 @@
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--text-input {
-    min-height: rem(64px);
-    padding: rem(32px) $spacing-05 rem(13px);
+    min-height: convert.to-rem(64px);
+    padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px);
   }
 
   .#{$prefix}--text-input__divider,
@@ -81,7 +81,7 @@
   }
 
   .#{$prefix}--text-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;
   }
 
@@ -104,7 +104,7 @@
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--text-input__invalid-icon {
-    top: rem(80px);
+    top: convert.to-rem(80px);
   }
 
   .#{$prefix}--text-input--fluid
@@ -155,16 +155,16 @@
 
   .#{$prefix}--text-input--fluid
     .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    top: rem(26px);
+    top: convert.to-rem(26px);
     right: $spacing-03;
-    width: rem(32px);
-    height: rem(32px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
   }
 
   // Skeleton
   .#{$prefix}--text-input--fluid__skeleton {
     position: relative;
-    height: rem(64px);
+    height: convert.to-rem(64px);
     border-bottom: 1px solid $skeleton-element;
     background: $skeleton-background;
   }
@@ -174,15 +174,15 @@
     top: $spacing-05;
     left: $spacing-05;
     width: 25%;
-    height: rem(8px);
+    height: convert.to-rem(8px);
   }
 
   .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label {
     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-time-picker/_fluid-time-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 '../fluid-text-input';
 @use '../fluid-select';
@@ -89,7 +89,7 @@
 
   // Invalid + Warn states
   .#{$prefix}--time-picker--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;
     background: $field;
   }
@@ -108,7 +108,7 @@
   }
 
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input {
-    padding-top: rem(30px);
+    padding-top: convert.to-rem(30px);
     border-top: 2px solid transparent;
   }
 
@@ -142,7 +142,7 @@
   .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon,
   .#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__icon {
     position: absolute;
-    top: rem(72px);
+    top: convert.to-rem(72px);
     right: $spacing-05;
     display: block;
   }
@@ -214,7 +214,7 @@
   .#{$prefix}--time-picker--fluid--skeleton {
     display: flex;
     width: 100%;
-    height: rem(64px);
+    height: convert.to-rem(64px);
   }
 
   .#{$prefix}--time-picker--fluid--skeleton > * {

package/scss/components/form/_form.scss

@@ -11,7 +11,7 @@
 @use '../../type' as *;
 @use '../../layer' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 @use '../..//utilities/button-reset';
@@ -111,8 +111,8 @@ $input-label-weight: 400 !default;
   .#{$prefix}--label.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: rem(75px);
-    height: rem(14px);
+    width: convert.to-rem(75px);
+    height: convert.to-rem(14px);
   }
 
   input[type='number'] {
@@ -156,7 +156,7 @@ $input-label-weight: 400 !default;
     ~ .#{$prefix}--form-requirement {
       display: block;
       overflow: visible;
-      max-height: rem(200px);
+      max-height: convert.to-rem(200px);
       font-weight: 400;
     }
   }
@@ -187,7 +187,7 @@ $input-label-weight: 400 !default;
   }
 
   .#{$prefix}--form--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;
   }
 

package/scss/components/inline-loading/_inline-loading.scss

@@ -11,7 +11,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 
 /// @type Number
 /// @access private
@@ -71,8 +71,8 @@ $-loading-gap-small: 110;
   }
 
   .#{$prefix}--inline-loading--error {
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     fill: $support-error;
 
     &[hidden] {

package/scss/components/list/_list.scss

@@ -48,7 +48,7 @@
   }
 
   .#{$prefix}--list--nested {
-    margin-left: convert.rem(32px);
+    margin-left: convert.to-rem(32px);
   }
 
   .#{$prefix}--list--nested .#{$prefix}--list__item {
@@ -67,7 +67,7 @@
   .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested)
     > .#{$prefix}--list__item::before {
     position: absolute;
-    left: convert.rem(-24px);
+    left: convert.to-rem(-24px);
     content: counter(item) '.';
     counter-increment: item;
   }

package/scss/components/list-box/_list-box.scss

@@ -19,7 +19,7 @@
 @use '../../utilities/box-shadow' 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 *;
@@ -32,7 +32,7 @@ $list-box-width: 100%;
 /// @type Number
 /// @access public
 /// @group list-box
-$list-box-height: rem(40px);
+$list-box-height: convert.to-rem(40px);
 
 /// @type Number
 /// @access public
@@ -42,7 +42,7 @@ $list-box-inline-height: $list-box-height;
 /// @type Number
 /// @access public
 /// @group list-box
-$list-box-menu-width: rem(300px);
+$list-box-menu-width: convert.to-rem(300px);
 
 /// List box styles
 /// @access public
@@ -53,7 +53,7 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__wrapper--inline {
     display: inline-grid;
     align-items: center;
-    grid-gap: rem(4px);
+    grid-gap: convert.to-rem(4px);
     grid-template: auto auto / auto auto;
 
     .#{$prefix}--label {
@@ -80,8 +80,8 @@ $list-box-menu-width: rem(300px);
 
     position: relative;
     width: $list-box-width;
-    height: rem(40px);
-    max-height: rem(40px);
+    height: convert.to-rem(40px);
+    max-height: convert.to-rem(40px);
     border: none;
     border-bottom: 1px solid $border-strong;
     background-color: $field;
@@ -95,13 +95,13 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--lg {
-    height: rem(48px);
-    max-height: rem(48px);
+    height: convert.to-rem(48px);
+    max-height: convert.to-rem(48px);
   }
 
   .#{$prefix}--list-box--sm {
-    height: rem(32px);
-    max-height: rem(32px);
+    height: convert.to-rem(32px);
+    max-height: convert.to-rem(32px);
   }
 
   .#{$prefix}--list-box--expanded {
@@ -159,7 +159,7 @@ $list-box-menu-width: rem(300px);
     .#{$prefix}--list-box__field,
   .#{$prefix}--list-box.#{$prefix}--list-box--warning.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__field {
-    padding-right: rem(56px);
+    padding-right: convert.to-rem(56px);
   }
 
   // V11: Possibly deprecate
@@ -291,12 +291,12 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--dropdown--inline .#{$prefix}--list-box__field {
-    max-width: rem(480px);
+    max-width: convert.to-rem(480px);
   }
 
   .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu {
-    min-width: rem(288px);
-    max-width: rem(480px);
+    min-width: convert.to-rem(288px);
+    max-width: convert.to-rem(480px);
   }
 
   // The field we use for input, showing selection, etc.
@@ -328,7 +328,7 @@ $list-box-menu-width: rem(300px);
 
   // populated input field
   .#{$prefix}--list-box__field .#{$prefix}--text-input {
-    padding-right: rem(72px);
+    padding-right: convert.to-rem(72px);
   }
 
   // invalid && populated input field
@@ -339,7 +339,7 @@ $list-box-menu-width: rem(300px);
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input {
     // to account for clear input button outline
-    padding-right: rem(98px);
+    padding-right: convert.to-rem(98px);
   }
 
   .#{$prefix}--list-box[data-invalid]
@@ -351,7 +351,7 @@ $list-box-menu-width: rem(300px);
     .#{$prefix}--text-input
     + .#{$prefix}--list-box__invalid-icon {
     // to account for clear input button outline
-    right: rem(66px);
+    right: convert.to-rem(66px);
   }
 
   // empty input field
@@ -378,7 +378,7 @@ $list-box-menu-width: rem(300px);
     .#{$prefix}--text-input--empty
     + .#{$prefix}--list-box__invalid-icon {
     // to account for clear input button outline
-    right: rem(40px);
+    right: convert.to-rem(40px);
   }
 
   // Label for a `list-box__field`
@@ -399,8 +399,8 @@ $list-box-menu-width: rem(300px);
     position: absolute;
     right: $spacing-05;
     display: flex;
-    width: rem(24px);
-    height: rem(24px);
+    width: convert.to-rem(24px);
+    height: convert.to-rem(24px);
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -413,7 +413,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-icon--open {
-    width: rem(24px);
+    width: convert.to-rem(24px);
     justify-content: center;
     transform: rotate(180deg);
   }
@@ -425,10 +425,10 @@ $list-box-menu-width: rem(300px);
     position: absolute;
     top: 50%;
     /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
-    right: rem(36px);
+    right: convert.to-rem(36px);
     display: flex;
-    width: rem(24px);
-    height: rem(24px);
+    width: convert.to-rem(24px);
+    height: convert.to-rem(24px);
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -461,25 +461,25 @@ $list-box-menu-width: rem(300px);
     top: auto;
     display: flex;
     width: auto;
-    height: rem(24px);
+    height: convert.to-rem(24px);
     align-items: center;
     justify-content: space-between;
-    padding: rem(8px);
+    padding: convert.to-rem(8px);
     // Align with hover circle of X button
-    padding-right: rem(2px);
-    margin-right: rem(10px);
+    padding-right: convert.to-rem(2px);
+    margin-right: convert.to-rem(10px);
     background-color: $background-inverse;
-    border-radius: rem(12px);
+    border-radius: convert.to-rem(12px);
     color: $text-inverse;
     line-height: 0;
     transform: none;
   }
 
   .#{$prefix}--list-box__selection--multi > svg {
-    width: rem(20px);
-    height: rem(20px);
-    padding: rem(2px);
-    margin-left: rem(4px);
+    width: convert.to-rem(20px);
+    height: convert.to-rem(20px);
+    padding: convert.to-rem(2px);
+    margin-left: convert.to-rem(4px);
     fill: $icon-inverse;
 
     &:hover {
@@ -535,19 +535,19 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
     display: block;
     // 40px item height * 5.5 items shown
-    max-height: rem(220px);
+    max-height: convert.to-rem(220px);
   }
 
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
     .#{$prefix}--list-box__menu {
     // 48px item height * 5.5 items shown
-    max-height: rem(264px);
+    max-height: convert.to-rem(264px);
   }
 
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm
     .#{$prefix}--list-box__menu {
     // 32px item height * 5.5 items shown
-    max-height: rem(176px);
+    max-height: convert.to-rem(176px);
   }
 
   // Descendant of a `list-box__menu` that represents a selection for a control
@@ -555,7 +555,7 @@ $list-box-menu-width: rem(300px);
     @include type-style('body-compact-01');
 
     position: relative;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     color: $text-secondary;
     cursor: pointer;
     transition: background $duration-fast-01 motion(standard, productive);
@@ -576,11 +576,11 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
-    height: rem(48px);
+    height: convert.to-rem(48px);
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover {
@@ -656,8 +656,8 @@ $list-box-menu-width: rem(300px);
 
     display: block;
     overflow: hidden;
-    height: rem(40px);
-    padding: rem(11px) 0;
+    height: convert.to-rem(40px);
+    padding: convert.to-rem(11px) 0;
     padding-right: $spacing-06;
     border-top: 1px solid transparent;
     border-top-color: $border-subtle-01;
@@ -675,7 +675,7 @@ $list-box-menu-width: rem(300px);
     &:focus {
       @include focus-outline('outline');
 
-      padding: rem(11px) rem(16px);
+      padding: convert.to-rem(11px) convert.to-rem(16px);
       border-color: transparent;
       margin: 0;
     }
@@ -687,15 +687,15 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option {
-    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}--list-box--lg .#{$prefix}--list-box__menu-item__option {
-    height: rem(48px);
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
+    height: convert.to-rem(48px);
+    padding-top: convert.to-rem(15px);
+    padding-bottom: convert.to-rem(15px);
   }
 
   .#{$prefix}--list-box--disabled
@@ -823,7 +823,7 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__menu-item__selected-icon {
     position: absolute;
     top: 50%;
-    right: rem(16px);
+    right: convert.to-rem(16px);
     display: none;
     fill: $icon-primary;
     transform: translateY(-50%);
@@ -831,7 +831,7 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box--inline
     .#{$prefix}--list-box__menu-item__selected-icon {
-    right: rem(8px);
+    right: convert.to-rem(8px);
   }
 
   .#{$prefix}--list-box__menu-item--active

package/scss/components/loading/_loading.scss

@@ -54,8 +54,8 @@
   }
 
   .#{$prefix}--loading--small {
-    width: convert.rem(16px);
-    height: convert.rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
 
     circle {
       stroke-width: 16;

package/scss/components/menu/_menu.scss

@@ -15,7 +15,7 @@
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/z-index' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/component-reset';
 
 /// Menu styles
@@ -152,7 +152,7 @@
   .#{$prefix}--menu-item-divider {
     display: block;
     width: 100%;
-    height: rem(1px);
+    height: convert.to-rem(1px);
     background-color: $border-subtle;
     margin-block: $spacing-02;
   }

package/scss/components/menu-button/_menu-button.scss

@@ -9,7 +9,6 @@
 @use '../menu';
 @use '../../config' as *;
 @use '../../motion' as *;
-@use '../../utilities/convert' as *;
 
 /// Menu Button styles
 /// @access public

package/scss/components/modal/_modal.scss

@@ -12,7 +12,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/high-contrast-mode' as *;
@@ -67,6 +67,11 @@
       background-color: $field-02;
     }
 
+    // Override to align layer token with field
+    .#{$prefix}--list-box__menu {
+      background-color: $layer-02;
+    }
+
     .#{$prefix}--number__rule-divider {
       background-color: $border-subtle-02;
     }
@@ -77,12 +82,12 @@
 
     .#{$prefix}--list-box__menu-item:hover
       .#{$prefix}--list-box__menu-item__option {
-      border-top-color: $layer-hover;
+      border-top-color: $layer-hover-02;
     }
 
     .#{$prefix}--list-box__menu-item--active:hover
       .#{$prefix}--list-box__menu-item__option {
-      border-top-color: $layer-selected-hover;
+      border-top-color: $layer-selected-hover-02;
     }
 
     // Fluid inputs
@@ -106,6 +111,23 @@
       background-color: $field-01;
     }
 
+    // Override to align layer token with field
+    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
+      background-color: $layer-01;
+    }
+
+    .#{$prefix}--list-box__menu-item:hover {
+      background-color: $layer-hover-02;
+    }
+
+    .#{$prefix}--list-box__menu-item--active {
+      background-color: $layer-selected-02;
+    }
+
+    .#{$prefix}--list-box__menu-item--active:hover {
+      background-color: $layer-selected-hover-02;
+    }
+
     .#{$prefix}--number-input--fluid
       .#{$prefix}--number__control-btn:hover::before,
     .#{$prefix}--number-input--fluid
@@ -334,7 +356,7 @@
     bottom: $spacing-09;
     left: 0;
     width: 100%;
-    height: rem(32px);
+    height: convert.to-rem(32px);
     background-image: linear-gradient(to bottom, transparent, $layer);
     content: '';
     grid-column: 1/-1;
@@ -374,7 +396,7 @@
   // -----------------------------
   .#{$prefix}--modal-footer {
     display: flex;
-    height: rem(64px);
+    height: convert.to-rem(64px);
     justify-content: flex-end;
     margin-top: auto;
     grid-column: 1/-1;
@@ -383,10 +405,10 @@
 
   .#{$prefix}--modal-footer .#{$prefix}--btn {
     max-width: none;
-    height: rem(64px);
+    height: convert.to-rem(64px);
     flex: 0 1 50%;
     align-items: baseline;
-    padding-top: calc($spacing-05 - rem(2px));
+    padding-top: calc($spacing-05 - convert.to-rem(2px));
     padding-bottom: $spacing-07;
     margin: 0;
   }
@@ -407,7 +429,7 @@
     overflow: hidden;
     width: 3rem;
     height: 3rem;
-    padding: rem(12px);
+    padding: convert.to-rem(12px);
     border: 2px solid transparent;
     background-color: transparent;
     cursor: pointer;
@@ -428,8 +450,8 @@
   }
 
   .#{$prefix}--modal-close__icon {
-    width: rem(20px);
-    height: rem(20px);
+    width: convert.to-rem(20px);
+    height: convert.to-rem(20px);
     fill: $icon-primary;
   }
 

package/scss/components/multiselect/_multiselect.scss

@@ -11,7 +11,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 
 /// Multi select styles
@@ -57,7 +57,7 @@
     display: inline-block;
     overflow: hidden;
     width: 100%;
-    padding-left: rem(28px);
+    padding-left: convert.to-rem(28px);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -82,7 +82,7 @@
 
   .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
     .#{$prefix}--text-input {
-    border: rem(2px) solid transparent;
+    border: convert.to-rem(2px) solid transparent;
     background-clip: padding-box;
     outline: none;
   }