@carbon/styles 1.35.0 → 1.36.0-rc.0

package/scss/components/radio-button/_radio-button.scss

@@ -20,7 +20,7 @@
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 
 /// @type Number
 /// @access public
@@ -81,11 +81,12 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button__appearance {
     @include reset;
 
-    width: rem(18px);
-    height: rem(18px);
+    width: convert.to-rem(18px);
+    height: convert.to-rem(18px);
     flex-shrink: 0;
     border: $radio-border-width solid $icon-primary;
-    margin: rem(1px) $spacing-03 rem(2px) rem(2px);
+    margin: convert.to-rem(1px) $spacing-03 convert.to-rem(2px)
+      convert.to-rem(2px);
     background-color: transparent;
     border-radius: 50%;
   }
@@ -163,11 +164,11 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button__validation-msg {
     display: none;
     align-items: flex-end;
-    margin-top: rem(6px);
+    margin-top: convert.to-rem(6px);
   }
 
   .#{$prefix}--radio-button__invalid-icon {
-    margin: 0 rem(1px) 0 rem(3px);
+    margin: 0 convert.to-rem(1px) 0 convert.to-rem(3px);
     fill: $support-error;
   }
 
@@ -206,7 +207,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button-group ~ .#{$prefix}--form__helper-text {
-    margin-top: rem(6px);
+    margin-top: convert.to-rem(6px);
   }
 
   // Focus
@@ -222,8 +223,8 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: rem(100px);
-    height: rem(18px);
+    width: convert.to-rem(100px);
+    height: convert.to-rem(18px);
   }
 
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton

package/scss/components/search/_search.scss

@@ -21,7 +21,7 @@
 @use '../../utilities/component-reset' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/button-reset';
 
 /// Search styles
@@ -91,33 +91,33 @@
   .#{$prefix}--search--sm .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
-    height: rem(32px);
+    height: convert.to-rem(32px);
     // 8px padding on either side of icon + 16px icon (32px)
     padding: 0 $spacing-07;
   }
 
   .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon {
-    left: rem(8px);
+    left: convert.to-rem(8px);
   }
 
   // Medium styles
   .#{$prefix}--search--md .#{$prefix}--search-input,
   .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
-    height: rem(40px);
+    height: convert.to-rem(40px);
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
   }
 
   .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
-    left: rem(12px);
+    left: convert.to-rem(12px);
   }
 
   // Large styles
   .#{$prefix}--search--lg .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
-    height: rem(48px);
+    height: convert.to-rem(48px);
     // 16px padding on either side of icon + 16px icon (48px)
     padding: 0 $spacing-09;
   }
@@ -129,8 +129,8 @@
     z-index: 2;
     top: 50%;
     left: $spacing-05;
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     fill: $icon-secondary;
     pointer-events: none;
     transform: translateY(-50%);
@@ -146,7 +146,7 @@
 
     &::before {
       position: absolute;
-      top: rem(1px);
+      top: convert.to-rem(1px);
       left: 0;
       display: block;
       width: 2px;
@@ -188,8 +188,8 @@
   .#{$prefix}--search-close,
   .#{$prefix}--search-button {
     display: flex;
-    width: rem(40px);
-    height: rem(40px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
     border-width: 1px 0;
@@ -256,12 +256,12 @@
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
     &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      width: rem(32px);
-      height: rem(32px);
+      width: convert.to-rem(32px);
+      height: convert.to-rem(32px);
     }
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
-      padding: 0 rem(32px);
+      padding: 0 convert.to-rem(32px);
     }
   }
 
@@ -271,12 +271,12 @@
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
     &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      width: rem(40px);
-      height: rem(40px);
+      width: convert.to-rem(40px);
+      height: convert.to-rem(40px);
     }
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
-      padding: 0 rem(40px);
+      padding: 0 convert.to-rem(40px);
     }
   }
 
@@ -286,12 +286,12 @@
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
     &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      width: rem(48px);
-      height: rem(48px);
+      width: convert.to-rem(48px);
+      height: convert.to-rem(48px);
     }
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
-      padding: 0 rem(48px);
+      padding: 0 convert.to-rem(48px);
     }
   }
 

package/scss/components/select/_select.scss

@@ -13,7 +13,7 @@
 @use '../../breakpoint' as *;
 @use '../../theme' 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/skeleton' as *;
@@ -45,7 +45,7 @@
 
     display: block;
     width: 100%;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     padding: 0 $spacing-09 0 $spacing-05;
     border: none;
     border-bottom: 1px solid $border-strong;
@@ -98,13 +98,13 @@
   }
 
   .#{$prefix}--select-input--sm {
-    height: rem(32px);
-    max-height: rem(32px);
+    height: convert.to-rem(32px);
+    max-height: convert.to-rem(32px);
   }
 
   .#{$prefix}--select-input--lg {
-    height: rem(48px);
-    max-height: rem(48px);
+    height: convert.to-rem(48px);
+    max-height: convert.to-rem(48px);
   }
 
   .#{$prefix}--select--disabled .#{$prefix}--label,
@@ -196,7 +196,7 @@
     .#{$prefix}--form__helper-text {
     align-self: flex-start;
     // Offset label text margin
-    margin-top: rem(13px);
+    margin-top: convert.to-rem(13px);
   }
 
   .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
@@ -235,7 +235,7 @@
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
     .#{$prefix}--select-input {
-    padding-right: rem(56px);
+    padding-right: convert.to-rem(56px);
   }
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid

package/scss/components/skeleton-styles/_skeleton-styles.scss

@@ -7,7 +7,7 @@
 
 @use '../../config' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../spacing' as *;
 
 /// Skeleton styles
@@ -19,17 +19,17 @@
     @include skeleton;
 
     display: inline-block;
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
   }
 
   //skeleton placeholder
   .#{$prefix}--skeleton__placeholder {
     @include skeleton;
 
-    width: rem(100px);
+    width: convert.to-rem(100px);
 
-    height: rem(100px);
+    height: convert.to-rem(100px);
   }
 
   //skeleton text

package/scss/components/slider/_slider.scss

@@ -20,7 +20,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 
 /// Slider styles
 /// @access public
@@ -36,8 +36,8 @@
   .#{$prefix}--slider {
     position: relative;
     width: 100%;
-    min-width: rem(200px);
-    max-width: rem(640px);
+    min-width: convert.to-rem(200px);
+    max-width: convert.to-rem(640px);
     padding: $spacing-05 0;
     margin: 0 $spacing-05;
     cursor: pointer;
@@ -57,18 +57,18 @@
   .#{$prefix}--slider__track {
     position: absolute;
     width: 100%;
-    height: rem(2px);
+    height: convert.to-rem(2px);
     background: $border-subtle;
     transform: translate(0%, -50%);
   }
 
   .#{$prefix}--slider__track:before {
     position: absolute;
-    top: rem(-5px);
+    top: convert.to-rem(-5px);
     left: 50%;
     display: inline-block;
-    width: rem(2px);
-    height: rem(4px);
+    width: convert.to-rem(2px);
+    height: convert.to-rem(4px);
     background: $border-subtle;
     content: '';
     transform: translate(-50%, 0);
@@ -77,7 +77,7 @@
   .#{$prefix}--slider__filled-track {
     position: absolute;
     width: 100%;
-    height: rem(2px);
+    height: convert.to-rem(2px);
     background: $layer-selected-inverse;
     pointer-events: none;
     transform: translate(0%, -50%);
@@ -88,8 +88,8 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
-    width: rem(14px);
-    height: rem(14px);
+    width: convert.to-rem(14px);
+    height: convert.to-rem(14px);
     background: $layer-selected-inverse;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
@@ -123,9 +123,10 @@
 
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
-    width: rem(64px);
-    height: rem(40px);
+    width: convert.to-rem(64px);
+    height: convert.to-rem(40px);
     -moz-appearance: textfield;
+    appearance: textfield;
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -254,8 +255,8 @@
     .#{$prefix}--slider__range-label {
     @include skeleton;
 
-    width: rem(20px);
-    height: rem(12px);
+    width: convert.to-rem(20px);
+    height: convert.to-rem(12px);
   }
 
   .#{$prefix}--slider-container.#{$prefix}--skeleton

package/scss/components/structured-list/_structured-list.scss

@@ -15,7 +15,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/component-reset';
 
 @mixin structured-list {
@@ -149,7 +149,7 @@
     @include type-style('heading-compact-01');
 
     display: table-cell;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     color: $text-primary;
     font-weight: 600;
     text-align: left;

package/scss/components/tabs/_tabs.scss

@@ -30,7 +30,7 @@
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/layout';
 
 /// Tabs styles
@@ -254,7 +254,7 @@
     &:not(.#{$prefix}--tabs--contained)
       .#{$prefix}--tabs__nav-item-label-wrapper {
       position: relative;
-      top: rem(1px);
+      top: convert.to-rem(1px);
     }
 
     //-----------------------------
@@ -272,7 +272,7 @@
     }
 
     .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item {
-      margin-left: rem(1px);
+      margin-left: convert.to-rem(1px);
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
@@ -284,7 +284,7 @@
       + .#{$prefix}--tabs__nav-item {
       margin-left: 0;
       // Draws the border without affecting the inner-content
-      box-shadow: rem(-1px) 0 0 0 $border-strong;
+      box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong;
     }
 
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
@@ -390,13 +390,13 @@
     &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
       .#{$prefix}--tabs__nav-item-label {
       // height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+      line-height: calc(#{convert.to-rem(48px)} - (#{$spacing-03} * 2));
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item-secondary-label {
       @include type-style('label-01');
 
-      min-height: rem(16px);
+      min-height: convert.to-rem(16px);
     }
 
     //-----------------------------
@@ -478,7 +478,7 @@
     &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
       .#{$prefix}--tabs__nav-item--selected:hover {
       // height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+      line-height: calc(#{convert.to-rem(48px)} - (#{$spacing-03} * 2));
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
@@ -598,7 +598,7 @@
 
     display: block;
     width: 100%;
-    height: rem(14px);
+    height: convert.to-rem(14px);
   }
 
   // Windows HCM fix

package/scss/components/tag/_tag.scss

@@ -11,7 +11,7 @@
 @use '../../motion' as *;
 @use '../../config' as *;
 @use '../../utilities/component-tokens' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/layout';
 @use '../../spacing' as *;
@@ -28,9 +28,9 @@
       (
         size: (
           height: (
-            xs: rem(18px),
-            sm: rem(18px),
-            md: rem(24px),
+            xs: convert.to-rem(18px),
+            sm: convert.to-rem(18px),
+            md: convert.to-rem(24px),
           ),
         ),
       )
@@ -43,14 +43,14 @@
 
     display: inline-flex;
     // ensures tag stays pill shaped;
-    min-width: rem(32px);
+    min-width: convert.to-rem(32px);
     // restricts size of contained elements
     max-width: 100%;
     min-height: layout.size('height');
     align-items: center;
     justify-content: center;
     margin: $spacing-02;
-    border-radius: rem(15px);
+    border-radius: convert.to-rem(15px);
     cursor: default;
     padding-inline: $spacing-03;
     vertical-align: middle;
@@ -188,7 +188,7 @@
     justify-content: center;
     padding: 0;
     border: 0;
-    margin: 0 0 0 rem(2px);
+    margin: 0 0 0 convert.to-rem(2px);
     background-color: transparent;
     border-radius: 50%;
     color: currentColor;
@@ -202,8 +202,8 @@
   }
 
   .#{$prefix}--tag__custom-icon {
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     flex-shrink: 0;
     padding: 0;
     border: 0;
@@ -245,7 +245,7 @@
   }
 
   .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
-    margin-left: rem(5px);
+    margin-left: convert.to-rem(5px);
   }
 
   // Skeleton state
@@ -256,7 +256,7 @@
     );
 
     overflow: hidden;
-    width: rem(60px);
+    width: convert.to-rem(60px);
 
     // Safari specific bug (#7672)
     @media not all and (min-resolution: 0.001dpcm) {

package/scss/components/text-area/_text-area.scss

@@ -13,7 +13,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/skeleton' as *;
@@ -29,8 +29,8 @@
 
     min-width: 10rem;
     height: 100%;
-    min-height: rem(40px);
-    padding: rem(11px) $spacing-05;
+    min-height: convert.to-rem(40px);
+    padding: convert.to-rem(11px) $spacing-05;
     border: none;
     border-bottom: 1px solid $border-strong;
     background-color: $field;
@@ -127,7 +127,7 @@
     @include skeleton;
 
     width: 100%;
-    height: rem(100px);
+    height: convert.to-rem(100px);
 
     &::placeholder {
       color: transparent;

package/scss/components/text-input/_text-input.scss

@@ -20,7 +20,7 @@
 @use '../../utilities/tooltip' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/layout';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/button-reset';
@@ -117,7 +117,7 @@
     position: absolute;
     right: 0;
     display: flex;
-    width: rem(40px);
+    width: convert.to-rem(40px);
     height: 100%;
     min-height: auto;
     align-items: center;
@@ -131,12 +131,12 @@
 
   .#{$prefix}--text-input--sm
     + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    width: rem(32px);
+    width: convert.to-rem(32px);
   }
 
   .#{$prefix}--text-input--lg
     + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    width: rem(48px);
+    width: convert.to-rem(48px);
   }
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
@@ -169,7 +169,7 @@
   }
 
   .#{$prefix}--text-input--invalid.#{$prefix}--password-input {
-    padding-right: rem(64px);
+    padding-right: convert.to-rem(64px);
   }
 
   .#{$prefix}--text-input--invalid
@@ -266,10 +266,10 @@
   .#{$prefix}--form--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: rem(13px);
+    top: convert.to-rem(13px);
     left: $spacing-05;
     display: flex;
-    height: rem(16px);
+    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
   }
@@ -279,8 +279,8 @@
   }
 
   .#{$prefix}--form--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,
@@ -307,7 +307,7 @@
   }
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input__invalid-icon {
-    top: rem(80px);
+    top: convert.to-rem(80px);
   }
 
   .#{$prefix}--form--fluid
@@ -353,29 +353,29 @@
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline {
     flex: 1;
-    margin: rem(13px) 0 0 0;
+    margin: convert.to-rem(13px) 0 0 0;
     overflow-wrap: break-word;
     word-break: break-word;
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--sm {
-    margin-top: rem(9px);
+    margin-top: convert.to-rem(9px);
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--lg {
-    margin-top: rem(17px);
+    margin-top: convert.to-rem(17px);
   }
 
   .#{$prefix}--text-input__label-helper-wrapper {
-    max-width: rem(128px);
+    max-width: convert.to-rem(128px);
     flex: 2;
     flex-direction: column;
-    margin-right: rem(24px);
+    margin-right: convert.to-rem(24px);
     overflow-wrap: break-word;
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--form__helper-text--inline {
-    margin-top: rem(2px);
+    margin-top: convert.to-rem(2px);
   }
 
   .#{$prefix}--text-input__field-outer-wrapper {
@@ -394,7 +394,7 @@
   .#{$prefix}--text-input-wrapper--inline .cds--form-requirement {
     display: block;
     overflow: visible;
-    max-height: rem(200px);
+    max-height: convert.to-rem(200px);
     font-weight: 400;
   }