@carbon/styles 1.35.0 → 1.36.0-rc.0

package/scss/components/content-switcher/_content-switcher.scss

@@ -11,7 +11,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/layout';
@@ -37,8 +37,8 @@
     display: inline-flex;
     overflow: hidden;
     border: none;
-    border-top: rem(1px) solid $border-inverse;
-    border-bottom: rem(1px) solid $border-inverse;
+    border-top: convert.to-rem(1px) solid $border-inverse;
+    border-bottom: convert.to-rem(1px) solid $border-inverse;
     margin: 0;
     background-color: transparent;
     color: $text-secondary;
@@ -116,9 +116,9 @@
 
   .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
     .#{$prefix}--content-switcher-btn:first-child {
-    border-left: rem(1px) solid $border-inverse;
-    border-bottom-left-radius: rem(4px);
-    border-top-left-radius: rem(4px);
+    border-left: convert.to-rem(1px) solid $border-inverse;
+    border-bottom-left-radius: convert.to-rem(4px);
+    border-top-left-radius: convert.to-rem(4px);
 
     &:disabled {
       border-color: $border-disabled;
@@ -128,9 +128,9 @@
 
   .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
     .#{$prefix}--content-switcher-btn:last-child {
-    border-right: rem(1px) solid $border-inverse;
-    border-bottom-right-radius: rem(4px);
-    border-top-right-radius: rem(4px);
+    border-right: convert.to-rem(1px) solid $border-inverse;
+    border-bottom-right-radius: convert.to-rem(4px);
+    border-top-right-radius: convert.to-rem(4px);
 
     &:disabled {
       border-color: $border-disabled;
@@ -152,8 +152,8 @@
     z-index: 2;
     left: 0;
     display: block;
-    width: rem(1px);
-    height: rem(16px);
+    width: convert.to-rem(1px);
+    height: convert.to-rem(16px);
     background-color: $border-subtle;
     content: '';
   }
@@ -244,9 +244,9 @@
   .#{$prefix}--content-switcher--icon-only
     .#{$prefix}--content-switcher-popover__wrapper:first-child
     .#{$prefix}--content-switcher-btn {
-    border-left: rem(1px) solid $border-inverse;
-    border-bottom-left-radius: rem(4px);
-    border-top-left-radius: rem(4px);
+    border-left: convert.to-rem(1px) solid $border-inverse;
+    border-bottom-left-radius: convert.to-rem(4px);
+    border-top-left-radius: convert.to-rem(4px);
   }
 
   .#{$prefix}--content-switcher--icon-only
@@ -261,9 +261,9 @@
   .#{$prefix}--content-switcher--icon-only
     .#{$prefix}--content-switcher-popover__wrapper:last-child
     .#{$prefix}--content-switcher-btn {
-    border-right: rem(1px) solid $border-inverse;
-    border-bottom-right-radius: rem(4px);
-    border-top-right-radius: rem(4px);
+    border-right: convert.to-rem(1px) solid $border-inverse;
+    border-bottom-right-radius: convert.to-rem(4px);
+    border-top-right-radius: convert.to-rem(4px);
   }
 
   .#{$prefix}--content-switcher--icon-only
@@ -277,8 +277,8 @@
 
   .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn {
     // accounts for the larger icon sizes to keep the switcher at 48px
-    padding-right: rem(14px);
-    padding-left: rem(14px);
+    padding-right: convert.to-rem(14px);
+    padding-left: convert.to-rem(14px);
   }
 
   .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn svg {

package/scss/components/copy-button/_copy-button.scss

@@ -11,7 +11,6 @@
 @use '../../motion' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/keyframes' as *;

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

@@ -16,7 +16,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../layer' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/text-overflow' as *;
@@ -138,7 +138,7 @@
       }
 
       &.#{$prefix}--table-column-checkbox:not(.#{$prefix}--table-column-radio) {
-        padding-top: rem(13px);
+        padding-top: convert.to-rem(13px);
       }
     }
 
@@ -158,7 +158,7 @@
       }
 
       &.#{$prefix}--table-column-checkbox {
-        padding-top: rem(13px);
+        padding-top: convert.to-rem(13px);
       }
     }
 
@@ -286,7 +286,7 @@
     svg {
     position: relative;
     // Used to center svg without setting display flex //display block needed for overflow text truncation
-    top: rem(3px);
+    top: convert.to-rem(3px);
     margin-right: $spacing-03;
   }
 
@@ -311,17 +311,17 @@
 
   .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
-    height: rem(24px);
+    height: convert.to-rem(24px);
     padding-top: 0;
     padding-bottom: 0;
   }
 
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--data-table--md td.#{$prefix}--table-column-menu {
-    height: rem(40px);
+    height: convert.to-rem(40px);
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-menu {
@@ -367,7 +367,7 @@
   .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;
-    width: rem(32px);
+    width: convert.to-rem(32px);
     background: $layer-accent;
     transition: background-color $duration-fast-01 motion(entrance, productive);
   }
@@ -383,47 +383,47 @@
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
     min-width: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
-    padding-right: rem(4px);
+    padding-right: convert.to-rem(4px);
     padding-left: 1rem;
   }
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-expand {
-    width: rem(32px);
-    height: rem(32px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--data-table--xs thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand {
-    width: rem(24px);
-    height: rem(24px);
+    width: convert.to-rem(24px);
+    height: convert.to-rem(24px);
     padding: 0 0 0 0.5rem;
   }
 
   .#{$prefix}--data-table--sm thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand {
-    width: rem(32px);
-    height: rem(32px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
     padding: 0;
     padding-left: 0.5rem;
   }
 
   .#{$prefix}--data-table--md thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--md tbody td.#{$prefix}--table-expand {
-    width: rem(40px);
-    height: rem(40px);
-    padding: rem(4px) 0 rem(4px) rem(8px);
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
+    padding: convert.to-rem(4px) 0 convert.to-rem(4px) convert.to-rem(8px);
   }
 
   .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand {
-    height: rem(64px);
-    padding-top: rem(10px);
-    padding-bottom: rem(22px);
+    height: convert.to-rem(64px);
+    padding-top: convert.to-rem(10px);
+    padding-bottom: convert.to-rem(22px);
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox {
-    padding-top: rem(13px);
+    padding-top: convert.to-rem(13px);
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-radio {
@@ -438,7 +438,7 @@
   }
 
   .#{$prefix}--table-column-radio .#{$prefix}--radio-button__appearance {
-    margin-right: rem(-2px);
+    margin-right: convert.to-rem(-2px);
   }
 
   // default selected row + zebra select - even child
@@ -519,22 +519,22 @@
   .#{$prefix}--data-table--xs thead tr,
   .#{$prefix}--data-table--xs tbody tr,
   .#{$prefix}--data-table--xs tbody tr th {
-    height: rem(24px);
+    height: convert.to-rem(24px);
   }
 
   .#{$prefix}--data-table--xs .#{$prefix}--table-header-label {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
+    padding-top: convert.to-rem(2px);
+    padding-bottom: convert.to-rem(2px);
   }
 
   .#{$prefix}--data-table--xs td,
   .#{$prefix}--data-table--xs tbody tr th {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
+    padding-top: convert.to-rem(2px);
+    padding-bottom: convert.to-rem(2px);
   }
 
   .#{$prefix}--data-table--xs .#{$prefix}--overflow-menu {
-    width: rem(32px);
+    width: convert.to-rem(32px);
     height: calc(100% + 1px);
   }
 
@@ -553,9 +553,9 @@
   .#{$prefix}--data-table.#{$prefix}--data-table--xs
     .#{$prefix}--table-column-checkbox
     .#{$prefix}--checkbox-label {
-    height: rem(23px);
+    height: convert.to-rem(23px);
     // 24px row - 1px border
-    min-height: rem(23px);
+    min-height: convert.to-rem(23px);
   }
 
   //----------------------------------------------------------------------------
@@ -564,20 +564,20 @@
   .#{$prefix}--data-table--sm thead tr,
   .#{$prefix}--data-table--sm tbody tr,
   .#{$prefix}--data-table--sm tbody tr th {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--data-table--sm .#{$prefix}--table-header-label {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+    padding-top: convert.to-rem(7px);
+    padding-bottom: convert.to-rem(7px);
   }
 
   .#{$prefix}--data-table--sm td,
   .#{$prefix}--data-table--sm tbody tr th,
   .#{$prefix}--data-table--sm.#{$prefix}--data-table--top-aligned-header
     th.#{$prefix}--table-column-checkbox {
-    padding-top: rem(7px);
-    padding-bottom: rem(6px);
+    padding-top: convert.to-rem(7px);
+    padding-bottom: convert.to-rem(6px);
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--sm:not(
@@ -588,8 +588,8 @@
       .#{$prefix}--data-table--top-aligned-header
     )
     th.#{$prefix}--table-column-checkbox {
-    padding-top: rem(3px);
-    padding-bottom: rem(3px);
+    padding-top: convert.to-rem(3px);
+    padding-bottom: convert.to-rem(3px);
   }
 
   .#{$prefix}--data-table--sm .#{$prefix}--overflow-menu {
@@ -602,20 +602,20 @@
   .#{$prefix}--data-table--md thead tr,
   .#{$prefix}--data-table--md tbody tr,
   .#{$prefix}--data-table--md tbody tr th {
-    height: rem(40px);
+    height: convert.to-rem(40px);
   }
 
   .#{$prefix}--data-table--md .#{$prefix}--table-header-label,
   .#{$prefix}--data-table--md.#{$prefix}--data-table--top-aligned-header
     th.#{$prefix}--table-column-checkbox {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+    padding-top: convert.to-rem(7px);
+    padding-bottom: convert.to-rem(7px);
   }
 
   .#{$prefix}--data-table--md td,
   .#{$prefix}--data-table--md tbody tr th {
-    padding-top: rem(7px);
-    padding-bottom: rem(6px);
+    padding-top: convert.to-rem(7px);
+    padding-bottom: convert.to-rem(6px);
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--md:not(
@@ -626,13 +626,13 @@
       .#{$prefix}--data-table--top-aligned-header
     )
     th.#{$prefix}--table-column-checkbox {
-    padding-top: rem(3px);
-    padding-bottom: rem(3px);
+    padding-top: convert.to-rem(3px);
+    padding-bottom: convert.to-rem(3px);
   }
 
   .#{$prefix}--data-table--md .#{$prefix}--table-column-menu {
-    padding-top: rem(3px);
-    padding-bottom: rem(3px);
+    padding-top: convert.to-rem(3px);
+    padding-bottom: convert.to-rem(3px);
   }
 
   //----------------------------------------------------------------------------
@@ -641,7 +641,7 @@
   .#{$prefix}--data-table--xl thead tr,
   .#{$prefix}--data-table--xl tbody tr,
   .#{$prefix}--data-table--xl tbody tr th {
-    height: rem(64px);
+    height: convert.to-rem(64px);
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-header-label {
@@ -728,7 +728,7 @@
     }
 
     .#{$prefix}--table-expand {
-      max-width: rem(48px);
+      max-width: convert.to-rem(48px);
     }
 
     thead .#{$prefix}--table-expand {
@@ -745,7 +745,7 @@
       td:not(.#{$prefix}--table-column-menu):not(
         .#{$prefix}--table-column-checkbox
       ) {
-      padding-top: rem(14px);
+      padding-top: convert.to-rem(14px);
     }
 
     // Taken from L125 _data-table-expandable
@@ -767,8 +767,8 @@
     // Selectable fix
     thead th.#{$prefix}--table-column-checkbox,
     tbody tr td.#{$prefix}--table-column-checkbox {
-      width: rem(36px);
-      min-width: rem(36px);
+      width: convert.to-rem(36px);
+      min-width: convert.to-rem(36px);
       align-items: center;
     }
 
@@ -780,7 +780,7 @@
     // Overflow fix
     /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */
     th.#{$prefix}--table-column-checkbox ~ th:last-of-type:empty {
-      max-width: rem(64px);
+      max-width: convert.to-rem(64px);
     }
 
     th:empty:not(.#{$prefix}--table-expand) {
@@ -828,24 +828,24 @@
     }
 
     &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row) {
-      min-height: rem(24px);
+      min-height: convert.to-rem(24px);
     }
 
     &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row) {
-      min-height: rem(32px);
+      min-height: convert.to-rem(32px);
     }
 
     &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) {
-      min-height: rem(64px);
+      min-height: convert.to-rem(64px);
     }
 
     // Expansion overrides
     &.#{$prefix}--data-table--xs tr td.#{$prefix}--table-expand {
-      padding-top: rem(4px);
+      padding-top: convert.to-rem(4px);
     }
 
     &.#{$prefix}--data-table--sm tr td.#{$prefix}--table-expand {
-      padding-top: rem(8px);
+      padding-top: convert.to-rem(8px);
     }
 
     .#{$prefix}--table-header-label {
@@ -853,18 +853,18 @@
 
       max-width: calc(100% - 10px);
       // Needed to reduce 1px jump when toggling between variations
-      padding-top: rem(15px);
+      padding-top: convert.to-rem(15px);
       padding-bottom: 1rem;
       overflow-y: hidden;
     }
 
     &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label {
-      padding-top: rem(3px);
+      padding-top: convert.to-rem(3px);
       padding-bottom: 0;
     }
 
     &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label {
-      padding-top: rem(8px);
+      padding-top: convert.to-rem(8px);
       padding-bottom: 0;
     }
 
@@ -901,7 +901,7 @@
     .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
   .#{$prefix}--data-table--sm
     .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
-    margin: rem(-3px) 0;
+    margin: convert.to-rem(-3px) 0;
   }
 
   // Windows HCM fix

package/scss/components/data-table/_mixins.scss

@@ -5,17 +5,18 @@
 // LICENSE file in the root directory of this source tree.
 //
 @use '../../config' as *;
+@use '../../utilities/convert';
 
 // @access public
 // @content Includes a block of styles for sticky data tables that sets table max-width, max-height and column min-width
-// @example - @include sticky-header($max-height: rem(900px), $min-width: rem(30px));
+// @example - @include sticky-header($max-height: to-rem(900px), $min-width: to-rem(30px));
 // @param {value} $max-width [100%] - sets the max-width of the data table parent container
 // @param {value} $max-height [rem(300px)] - sets the max-height of the data table
 // @param {value} $min-width [rem(100px)] - sets the min-width of th's and td's so their sizes align
 @mixin sticky-header(
   $min-width: false,
   $max-width: 100%,
-  $max-height: rem(300px)
+  $max-height: convert.to-rem(300px)
 ) {
   .#{$prefix}--data-table--max-width {
     max-width: $max-width;

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

@@ -14,7 +14,7 @@
 @use '../../../theme' as *;
 @use '../../../type' as *;
 @use '../../../utilities/button-reset';
-@use '../../../utilities/convert' as *;
+@use '../../../utilities/convert';
 @use '../../../utilities/focus-outline' as *;
 
 /// Data table action styles
@@ -119,8 +119,8 @@
     height: $spacing-09;
 
     &::before {
-      top: rem(2px);
-      height: calc(100% - #{rem(4px)});
+      top: convert.to-rem(2px);
+      height: calc(100% - #{convert.to-rem(4px)});
       background-color: $field-hover;
     }
   }
@@ -442,7 +442,7 @@
 
   .#{$prefix}--batch-download {
     //makes it smaller to match other icons
-    padding: rem(1px);
+    padding: convert.to-rem(1px);
   }
 
   // Override btn styles
@@ -455,7 +455,7 @@
 
   .#{$prefix}--action-list .#{$prefix}--btn--primary:focus {
     outline: 2px solid $layer;
-    outline-offset: rem(-2px);
+    outline-offset: convert.to-rem(-2px);
   }
 
   // cancel btn pseudo element
@@ -471,10 +471,10 @@
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
     position: absolute;
     //visually 16px spacing is 1px too low
-    top: rem(15px);
+    top: convert.to-rem(15px);
     left: 0;
     display: block;
-    width: rem(1px);
+    width: convert.to-rem(1px);
     height: $spacing-05;
     border: none;
     background-color: $text-on-color;
@@ -515,31 +515,31 @@
   //-------------------------------------------------
 
   .#{$prefix}--table-toolbar--sm {
-    height: rem(32px);
-    min-height: rem(32px);
+    height: convert.to-rem(32px);
+    min-height: convert.to-rem(32px);
 
     .#{$prefix}--toolbar-search-container-expandable,
     .#{$prefix}--toolbar-search-container-persistent {
-      height: rem(32px);
+      height: convert.to-rem(32px);
     }
 
     .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input,
     .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
-      height: rem(32px);
+      height: convert.to-rem(32px);
     }
 
     .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close,
     .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
-      width: rem(32px);
-      height: rem(32px);
+      width: convert.to-rem(32px);
+      height: convert.to-rem(32px);
     }
 
     .#{$prefix}--toolbar-search-container-expandable
       .#{$prefix}--search-magnifier-icon,
     .#{$prefix}--toolbar-search-container-persistent
       .#{$prefix}--search-magnifier-icon {
-      width: rem(32px);
-      height: rem(32px);
+      width: convert.to-rem(32px);
+      height: convert.to-rem(32px);
       padding: $spacing-03;
     }
 
@@ -549,7 +549,7 @@
 
     //hidden
     .#{$prefix}--toolbar-search-container-expandable {
-      width: rem(32px);
+      width: convert.to-rem(32px);
     }
 
     .#{$prefix}--toolbar-search-container-expandable
@@ -594,14 +594,14 @@
     }
 
     .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
-      width: rem(32px);
+      width: convert.to-rem(32px);
       //:after element is 2rem but w/o this trigger button is for some reason 28px
-      min-width: rem(32px);
-      height: rem(32px);
+      min-width: convert.to-rem(32px);
+      height: convert.to-rem(32px);
     }
 
     .#{$prefix}--toolbar-content {
-      height: rem(32px);
+      height: convert.to-rem(32px);
     }
 
     .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
@@ -621,32 +621,32 @@
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--batch-actions
     .#{$prefix}--action-list {
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action {
-    width: rem(32px);
-    height: rem(32px);
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
     padding: $spacing-03 0;
   }
 
   .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
-    height: rem(32px);
+    height: convert.to-rem(32px);
     min-height: auto;
-    padding-top: calc(0.375rem - 3px);
-    padding-bottom: calc(0.375rem - 3px);
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
   }
 
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
-    top: rem(8px);
+    top: convert.to-rem(8px);
   }
 
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--toolbar-action
     ~ .#{$prefix}--btn {
     overflow: hidden;
-    height: rem(32px);
+    height: convert.to-rem(32px);
   }
 
   .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {