@carbon/styles 1.35.0 → 1.36.0-rc.0

package/scss/components/notification/_actionable-notification.scss

@@ -15,7 +15,7 @@
 @use '../../theme' as *;
 @use '../../themes' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use './tokens' as *;
@@ -32,31 +32,31 @@
     position: relative;
     display: flex;
     width: 100%;
-    min-width: rem(288px);
-    max-width: rem(288px);
+    min-width: convert.to-rem(288px);
+    max-width: convert.to-rem(288px);
     height: auto;
-    min-height: rem(48px);
+    min-height: convert.to-rem(48px);
     flex-wrap: wrap;
 
     color: $text-inverse;
 
     @include breakpoint(md) {
-      max-width: rem(608px);
+      max-width: convert.to-rem(608px);
       flex-wrap: nowrap;
     }
 
     @include breakpoint(lg) {
-      max-width: rem(736px);
+      max-width: convert.to-rem(736px);
     }
 
     @include breakpoint(max) {
-      max-width: rem(832px);
+      max-width: convert.to-rem(832px);
     }
   }
 
   .#{$prefix}--actionable-notification--toast {
-    min-width: rem(288px);
-    max-width: rem(288px);
+    min-width: convert.to-rem(288px);
+    max-width: convert.to-rem(288px);
     flex-wrap: wrap;
     box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
   }
@@ -194,7 +194,7 @@
   .#{$prefix}--actionable-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $spacing-09 0 rem(13px);
+    margin: 0 $spacing-09 0 convert.to-rem(13px);
   }
 
   .#{$prefix}--actionable-notification:not(
@@ -202,13 +202,13 @@
     )
     .#{$prefix}--actionable-notification__details {
     @include breakpoint(md) {
-      margin: 0 rem(13px);
+      margin: 0 convert.to-rem(13px);
     }
   }
 
   .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon {
     flex-shrink: 0;
-    margin-top: rem(14px);
+    margin-top: convert.to-rem(14px);
     margin-right: $spacing-05;
   }
 
@@ -221,12 +221,12 @@
   .#{$prefix}--actionable-notification__text-wrapper {
     display: flex;
     flex-wrap: wrap;
-    padding: rem(15px) 0;
+    padding: convert.to-rem(15px) 0;
   }
 
   .#{$prefix}--actionable-notification--toast
     .#{$prefix}--actionable-notification__text-wrapper {
-    padding: rem(15px) 0 rem(23px) 0;
+    padding: convert.to-rem(15px) 0 convert.to-rem(23px) 0;
   }
 
   .#{$prefix}--actionable-notification__content {
@@ -269,7 +269,7 @@
   }
   /* Ghost action button when inline */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
-    height: rem(32px);
+    height: convert.to-rem(32px);
     margin-bottom: $spacing-03;
     margin-left: $spacing-08;
 
@@ -323,7 +323,9 @@
     // Button should be left aligned with text.
     // 20px is the width of the notification icon
     // 2px is the width of the left border that should be negated
-    margin-left: calc(#{$spacing-07} + #{rem(20px)} - #{rem(2px)});
+    margin-left: calc(
+      #{$spacing-07} + #{convert.to-rem(20px)} - #{convert.to-rem(2px)}
+    );
   }
 
   // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification
@@ -415,10 +417,10 @@
     top: 0;
     right: 0;
     display: flex;
-    width: rem(48px);
-    min-width: rem(48px);
-    max-width: rem(48px);
-    height: rem(48px);
+    width: convert.to-rem(48px);
+    min-width: convert.to-rem(48px);
+    max-width: convert.to-rem(48px);
+    height: convert.to-rem(48px);
     flex-direction: column;
     align-items: center;
     justify-content: center;

package/scss/components/notification/_inline-notification.scss

@@ -14,7 +14,7 @@
 @use '../../theme' as *;
 @use '../../themes' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use './tokens' as *;
@@ -29,25 +29,25 @@
     position: relative;
     display: flex;
     width: 100%;
-    min-width: rem(288px);
-    max-width: rem(288px);
+    min-width: convert.to-rem(288px);
+    max-width: convert.to-rem(288px);
     height: auto;
-    min-height: rem(48px);
+    min-height: convert.to-rem(48px);
     flex-wrap: wrap;
 
     color: $text-inverse;
 
     @include breakpoint(md) {
-      max-width: rem(608px);
+      max-width: convert.to-rem(608px);
       flex-wrap: nowrap;
     }
 
     @include breakpoint(lg) {
-      max-width: rem(736px);
+      max-width: convert.to-rem(736px);
     }
 
     @include breakpoint(max) {
-      max-width: rem(832px);
+      max-width: convert.to-rem(832px);
     }
   }
 
@@ -182,23 +182,23 @@
   .#{$prefix}--inline-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $spacing-09 0 rem(13px);
+    margin: 0 $spacing-09 0 convert.to-rem(13px);
 
     @include breakpoint(md) {
-      margin: 0 rem(13px);
+      margin: 0 convert.to-rem(13px);
     }
   }
 
   .#{$prefix}--inline-notification__icon {
     flex-shrink: 0;
-    margin-top: rem(14px);
+    margin-top: convert.to-rem(14px);
     margin-right: $spacing-05;
   }
 
   .#{$prefix}--inline-notification__text-wrapper {
     display: flex;
     flex-wrap: wrap;
-    padding: rem(15px) 0;
+    padding: convert.to-rem(15px) 0;
   }
 
   .#{$prefix}--inline-notification__title {
@@ -214,7 +214,7 @@
   }
 
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
-    height: rem(32px);
+    height: convert.to-rem(32px);
     margin-bottom: $spacing-03;
     margin-left: $spacing-08;
 
@@ -266,10 +266,10 @@
     top: 0;
     right: 0;
     display: flex;
-    width: rem(48px);
-    min-width: rem(48px);
-    max-width: rem(48px);
-    height: rem(48px);
+    width: convert.to-rem(48px);
+    min-width: convert.to-rem(48px);
+    max-width: convert.to-rem(48px);
+    height: convert.to-rem(48px);
     flex-direction: column;
     align-items: center;
     justify-content: center;

package/scss/components/notification/_toast-notification.scss

@@ -16,7 +16,7 @@
 @use '../../theme' as *;
 @use '../../themes' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use './tokens' as *;
@@ -29,15 +29,15 @@
     @include reset;
 
     display: flex;
-    width: rem(288px);
+    width: convert.to-rem(288px);
     height: auto;
-    padding-left: rem(13px);
+    padding-left: convert.to-rem(13px);
 
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $text-inverse;
 
     @include breakpoint(max) {
-      width: rem(352px);
+      width: convert.to-rem(352px);
     }
   }
 
@@ -153,10 +153,10 @@
     @include focus-outline('reset');
 
     display: flex;
-    width: rem(48px);
-    min-width: rem(48px);
-    height: rem(48px);
-    min-height: rem(48px);
+    width: convert.to-rem(48px);
+    min-width: convert.to-rem(48px);
+    height: convert.to-rem(48px);
+    min-height: convert.to-rem(48px);
     flex-direction: column;
     align-items: center;
     justify-content: center;

package/scss/components/number-input/_number-input.scss

@@ -16,7 +16,7 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/z-index' as *;
 
 /// Number input styles
@@ -35,7 +35,7 @@
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--warning
     input[type='number'] {
-    padding-right: rem(128px);
+    padding-right: convert.to-rem(128px);
   }
 
   .#{$prefix}--number input[type='number'] {
@@ -45,15 +45,16 @@
     display: inline-flex;
     width: 100%;
     min-width: 9.375rem;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     box-sizing: border-box;
-    padding-right: rem(96px);
+    padding-right: convert.to-rem(96px);
     padding-left: $spacing-05;
     border: 0;
-    border-bottom: rem(1px) solid $border-strong;
+    border-bottom: convert.to-rem(1px) solid $border-strong;
 
     // Firefox: Hide spinner (up and down buttons)
     -moz-appearance: textfield;
+    appearance: textfield;
     background-color: $field;
     border-radius: 0;
     color: $text-primary;
@@ -86,35 +87,35 @@
     }
 
     &[data-invalid] {
-      padding-right: rem(128px);
+      padding-right: convert.to-rem(128px);
     }
   }
 
   .#{$prefix}--number--lg.#{$prefix}--number {
     input[type='number'] {
-      padding-right: rem(112px);
+      padding-right: convert.to-rem(112px);
 
       &[data-invalid] {
-        padding-right: rem(144px);
+        padding-right: convert.to-rem(144px);
       }
     }
 
     .#{$prefix}--number__input-wrapper--warning input[type='number'] {
-      padding-right: rem(144px);
+      padding-right: convert.to-rem(144px);
     }
   }
 
   .#{$prefix}--number--sm.#{$prefix}--number {
     input[type='number'] {
-      padding-right: rem(80px);
+      padding-right: convert.to-rem(80px);
 
       &[data-invalid] {
-        padding-right: rem(112px);
+        padding-right: convert.to-rem(112px);
       }
     }
 
     .#{$prefix}--number__input-wrapper--warning input[type='number'] {
-      padding-right: rem(112px);
+      padding-right: convert.to-rem(112px);
     }
   }
 
@@ -139,7 +140,7 @@
     top: 50%;
     right: 0;
     display: flex;
-    width: rem(80px);
+    width: convert.to-rem(80px);
     height: 100%;
     flex-direction: row;
     align-items: center;
@@ -155,17 +156,17 @@
     height: 100%;
     align-items: center;
     justify-content: center;
-    border-bottom: rem(1px) solid $border-strong;
+    border-bottom: convert.to-rem(1px) solid $border-strong;
     color: $icon-primary;
 
     &::before,
     &::after {
       position: absolute;
-      top: rem(2px);
+      top: convert.to-rem(2px);
       display: block;
-      width: rem(2px);
+      width: convert.to-rem(2px);
       // height: calc(100% - 4px) is calculated differently in Safari
-      height: rem(36px);
+      height: convert.to-rem(36px);
       background-color: $field;
       content: '';
     }
@@ -279,8 +280,8 @@
   .#{$prefix}--number__rule-divider {
     position: absolute;
     z-index: z('overlay');
-    width: rem(1px);
-    height: rem(16px);
+    width: convert.to-rem(1px);
+    height: convert.to-rem(16px);
     background-color: $border-subtle;
 
     &:first-of-type {
@@ -330,33 +331,33 @@
 
   .#{$prefix}--number__invalid {
     position: absolute;
-    right: rem(96px);
+    right: convert.to-rem(96px);
     fill: $support-error;
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__invalid {
-    right: rem(112px);
+    right: convert.to-rem(112px);
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__invalid {
-    right: rem(80px);
+    right: convert.to-rem(80px);
   }
 
   .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider {
     position: absolute;
-    right: rem(80px);
+    right: convert.to-rem(80px);
   }
 
   .#{$prefix}--number--lg
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
-    right: rem(96px);
+    right: convert.to-rem(96px);
   }
 
   .#{$prefix}--number--sm
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
-    right: rem(64px);
+    right: convert.to-rem(64px);
   }
 
   .#{$prefix}--number__control-btn.down-icon:hover
@@ -413,38 +414,38 @@
 
   // Size Variant styles
   .#{$prefix}--number--lg input[type='number'] {
-    height: rem(48px);
+    height: convert.to-rem(48px);
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__controls {
-    width: rem(96px);
+    width: convert.to-rem(96px);
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
-    width: rem(48px);
+    width: convert.to-rem(48px);
 
     &::before,
     &::after {
       // height: calc(100% - 4px) is calculated differently in Safari
-      height: rem(44px);
+      height: convert.to-rem(44px);
     }
   }
 
   .#{$prefix}--number--sm input[type='number'] {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__controls {
-    width: rem(64px);
+    width: convert.to-rem(64px);
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__control-btn {
-    width: rem(32px);
+    width: convert.to-rem(32px);
 
     &::before,
     &::after {
       // height: calc(100% - 4px) is calculated differently in Safari
-      height: rem(28px);
+      height: convert.to-rem(28px);
     }
   }
 
@@ -457,11 +458,11 @@
 
   // No steppers
   .#{$prefix}--number--nosteppers input[type='number'] {
-    padding-right: rem(48px);
+    padding-right: convert.to-rem(48px);
   }
 
   .#{$prefix}--number--nosteppers .#{$prefix}--number__invalid {
-    right: rem(16px);
+    right: convert.to-rem(16px);
   }
 
   // Readonly

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -18,7 +18,7 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/z-index' as *;
 
 /// Overflow menu styles
@@ -33,9 +33,9 @@
 
     position: relative;
     display: flex;
-    width: rem(40px);
-    height: rem(40px);
-    min-height: rem(40px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
+    min-height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -56,13 +56,13 @@
   }
 
   .#{$prefix}--overflow-menu--sm {
-    width: rem(32px);
-    height: rem(32px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--overflow-menu--lg {
-    width: rem(48px);
-    height: rem(48px);
+    width: convert.to-rem(48px);
+    height: convert.to-rem(48px);
   }
 
   // Overwrite Icon Tooltip focus styles
@@ -90,8 +90,8 @@
   }
 
   .#{$prefix}--overflow-menu__icon {
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     fill: $icon-primary;
   }
 
@@ -108,7 +108,7 @@
     top: 32px;
     left: 0;
     display: none;
-    width: rem(160px);
+    width: convert.to-rem(160px);
     flex-direction: column;
     align-items: flex-start;
     background-color: $layer;
@@ -147,54 +147,54 @@
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(
       .#{$prefix}--breadcrumb-menu-options
     )::after {
-    top: rem(-3px);
+    top: convert.to-rem(-3px);
     left: 0;
-    width: rem(40px);
-    height: rem(3px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(3px);
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after {
-    bottom: rem(-8px);
+    bottom: convert.to-rem(-8px);
     left: 0;
-    width: rem(40px);
-    height: rem(8px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(8px);
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after {
     top: 0;
-    right: rem(-6px);
-    width: rem(6px);
-    height: rem(40px);
+    right: convert.to-rem(-6px);
+    width: convert.to-rem(6px);
+    height: convert.to-rem(40px);
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
     top: 0;
-    left: rem(-6px);
-    width: rem(6px);
-    height: rem(40px);
+    left: convert.to-rem(-6px);
+    width: convert.to-rem(6px);
+    height: convert.to-rem(40px);
   }
 
   .#{$prefix}--overflow-menu-options--sm.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
-      width: rem(32px);
+      width: convert.to-rem(32px);
     }
 
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
-      height: rem(32px);
+      height: convert.to-rem(32px);
     }
   }
 
   .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
-      width: rem(48px);
+      width: convert.to-rem(48px);
     }
 
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
-      height: rem(48px);
+      height: convert.to-rem(48px);
     }
   }
 
@@ -223,7 +223,7 @@
 
     display: flex;
     width: 100%;
-    height: rem(40px);
+    height: convert.to-rem(40px);
     align-items: center;
     padding: 0;
     background-color: transparent;
@@ -232,12 +232,12 @@
 
   .#{$prefix}--overflow-menu-options--sm
     .#{$prefix}--overflow-menu-options__option {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--overflow-menu-options--lg
     .#{$prefix}--overflow-menu-options__option {
-    height: rem(48px);
+    height: convert.to-rem(48px);
   }
 
   .#{$prefix}--overflow-menu--divider {