@carbon/styles 1.35.0 → 1.36.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.35.0",
+  "version": "1.36.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,11 +40,11 @@
   "dependencies": {
     "@carbon/colors": "^11.19.0",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/grid": "^11.18.0",
-    "@carbon/layout": "^11.18.0",
+    "@carbon/grid": "^11.19.0-rc.0",
+    "@carbon/layout": "^11.19.0-rc.0",
     "@carbon/motion": "^11.15.0",
-    "@carbon/themes": "^11.23.0",
-    "@carbon/type": "^11.22.0",
+    "@carbon/themes": "^11.24.0-rc.0",
+    "@carbon/type": "^11.23.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "f9ac32a70a209100bb30ed41edc39c596eae7956"
+  "gitHead": "d51dfbb8dc951c6f609561a1e2935e8208bf6e30"
 }

package/scss/_layout.scss

@@ -10,18 +10,18 @@
 
 @use './config' as *;
 @use './utilities/custom-property';
-@use './utilities/convert' as *;
+@use './utilities/convert';
 @use './spacing' as *;
 
 $layout-tokens: (
   size: (
     height: (
-      xs: rem(24px),
-      sm: rem(32px),
-      md: rem(40px),
-      lg: rem(48px),
-      xl: rem(64px),
-      2xl: rem(80px),
+      xs: convert.to-rem(24px),
+      sm: convert.to-rem(32px),
+      md: convert.to-rem(40px),
+      lg: convert.to-rem(48px),
+      xl: convert.to-rem(64px),
+      2xl: convert.to-rem(80px),
     ),
   ),
   density: (

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -14,7 +14,7 @@
 @use '../../type' as *;
 @use '../../layer' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/skeleton' as *;
 
 @mixin breadcrumb {
@@ -79,8 +79,8 @@
   // Overflow Menu overrides
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
     position: relative;
-    width: rem(20px);
-    height: rem(18px);
+    width: convert.to-rem(20px);
+    height: convert.to-rem(18px);
 
     &:focus {
       outline: 1px solid $focus;
@@ -94,7 +94,7 @@
     &::after {
       position: absolute;
       bottom: 2px;
-      width: rem(12px);
+      width: convert.to-rem(12px);
       height: 1px;
       background: $link-primary-hover;
       content: '';
@@ -133,7 +133,7 @@
     outline: none;
   }
 
-  $caret-size: rem(7px);
+  $caret-size: convert.to-rem(7px);
   .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
     top: -$caret-size;
     left: $caret-size * 2;
@@ -150,7 +150,7 @@
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;
 
-    width: rem(100px);
+    width: convert.to-rem(100px);
     height: 1rem;
   }
 

package/scss/components/button/_button.scss

@@ -14,7 +14,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../layer' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
@@ -108,12 +108,14 @@
       transparent,
       transparent,
       $link-primary,
-      $layer-hover,
+      $background-hover,
       currentColor,
-      $layer-active
+      $background-active
     );
 
-    padding-inline-end: calc(layout.density('padding-inline') - rem(1px));
+    padding-inline-end: calc(
+      layout.density('padding-inline') - convert.to-rem(1px)
+    );
 
     .#{$prefix}--btn__icon {
       position: static;
@@ -153,13 +155,15 @@
     padding: 0;
     // -1px to compensate for border width
     padding-block-start: min(
-      calc((layout.size('height') - rem(16px)) / 2 - rem(1px)),
+      calc(
+        (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px)
+      ),
       var(--temp-padding-block-max)
     );
 
     > :first-child {
-      min-width: rem(16px);
-      margin-block-start: rem(1px);
+      min-width: convert.to-rem(16px);
+      margin-block-start: convert.to-rem(1px);
     }
 
     .#{$prefix}--btn__icon {
@@ -273,7 +277,9 @@
         $button-danger-active
       );
 
-      padding-inline-end: calc(layout.density('padding-inline') - rem(1px));
+      padding-inline-end: calc(
+        layout.density('padding-inline') - convert.to-rem(1px)
+      );
 
       .#{$prefix}--btn__icon {
         position: static;
@@ -304,7 +310,10 @@
     @include type-style('body-compact-02');
 
     padding-block: min(
-      calc((layout.size('height') - var(--temp-expressive-1lh)) / 2 - rem(1px)),
+      calc(
+        (layout.size('height') - var(--temp-expressive-1lh)) / 2 -
+          convert.to-rem(1px)
+      ),
       var(--temp-padding-block-max)
     );
   }
@@ -315,19 +324,19 @@
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon {
-    width: rem(20px);
-    height: rem(20px);
+    width: convert.to-rem(20px);
+    height: convert.to-rem(20px);
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--expressive {
-    max-width: rem(320px);
+    max-width: convert.to-rem(320px);
   }
 
   // Skeleton State
   .#{$prefix}--btn.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: rem(150px);
+    width: convert.to-rem(150px);
   }
 
   // button set styles
@@ -342,10 +351,10 @@
   .#{$prefix}--btn-set .#{$prefix}--btn {
     width: 100%;
     // 196px from design kit
-    max-width: rem(196px);
+    max-width: convert.to-rem(196px);
 
     &:not(:focus) {
-      box-shadow: rem(-1px) 0 0 0 $button-separator;
+      box-shadow: convert.to-rem(-1px) 0 0 0 $button-separator;
     }
 
     &:first-of-type:not(:focus) {
@@ -358,7 +367,7 @@
   }
 
   .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) {
-    box-shadow: 0 rem(-1px) 0 0 $button-separator;
+    box-shadow: 0 convert.to-rem(-1px) 0 0 $button-separator;
   }
 
   .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) {
@@ -366,7 +375,7 @@
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled {
-    box-shadow: rem(-1px) 0 0 0 $icon-on-color-disabled;
+    box-shadow: convert.to-rem(-1px) 0 0 0 $icon-on-color-disabled;
 
     &:first-of-type {
       box-shadow: none;
@@ -374,7 +383,7 @@
   }
 
   .#{$prefix}--btn-set--stacked .#{$prefix}--btn.#{$prefix}--btn--disabled {
-    box-shadow: 0 rem(-1px) 0 0 $layer-selected-disabled;
+    box-shadow: 0 convert.to-rem(-1px) 0 0 $layer-selected-disabled;
 
     &:first-of-type {
       box-shadow: none;

package/scss/components/button/_mixins.scss

@@ -14,7 +14,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/custom-property';
 @use '../../utilities/layout';
 @use 'tokens' as *;
@@ -38,7 +38,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
     (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
-      #{rem(1px)}
+      #{convert.to-rem(1px)}
   );
 
   @include component-reset.reset;
@@ -47,7 +47,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   position: relative;
   display: inline-flex;
   width: max-content;
-  max-width: rem(320px);
+  max-width: convert.to-rem(320px);
   min-height: layout.size('height');
   flex-shrink: 0;
   justify-content: space-between;
@@ -58,13 +58,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   outline: none;
   // -1px to compensate for border width
   padding-block: min(
-    calc((layout.size('height') - var(--temp-1lh)) / 2 - rem(1px)),
+    calc((layout.size('height') - var(--temp-1lh)) / 2 - convert.to-rem(1px)),
     var(--temp-padding-block-max)
   );
   padding-inline-end: calc(
-    layout.density('padding-inline') * 3 + rem(16px) - rem(1px)
+    layout.density('padding-inline') * 3 + convert.to-rem(16px) -
+      convert.to-rem(1px)
+  );
+  padding-inline-start: calc(
+    layout.density('padding-inline') - convert.to-rem(1px)
   );
-  padding-inline-start: calc(layout.density('padding-inline') - rem(1px));
   text-align: left;
   text-decoration: none;
   transition: background $duration-fast-01 motion(entrance, productive),
@@ -90,14 +93,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
     position: absolute;
     // -1px to compensate for border width
     top: min(
-      calc((layout.size('height') - rem(16px)) / 2 - rem(1px)),
+      calc(
+        (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px)
+      ),
       var(--temp-padding-block-max)
     );
     right: layout.density('padding-inline');
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     flex-shrink: 0;
-    margin-block-start: rem(1px);
+    margin-block-start: convert.to-rem(1px);
   }
 }
 

package/scss/components/checkbox/_checkbox.scss

@@ -11,7 +11,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 
@@ -28,7 +28,7 @@
 
   // Spacing above collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type {
-    margin-top: rem(3px);
+    margin-top: convert.to-rem(3px);
   }
 
   // Shift collection of checkboxes up if label is present
@@ -39,7 +39,7 @@
 
   // Spacing below collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
-    margin-bottom: rem(3px);
+    margin-bottom: convert.to-rem(3px);
   }
 
   // Visually, we'll hide the checkbox input and create our own styled version
@@ -60,16 +60,16 @@
 
     position: relative;
     display: flex;
-    min-height: rem(24px);
-    padding-top: rem(3px);
-    padding-left: rem(20px);
+    min-height: convert.to-rem(24px);
+    padding-top: convert.to-rem(3px);
+    padding-left: convert.to-rem(20px);
     cursor: pointer;
     user-select: none;
   }
 
   .#{$prefix}--checkbox-label-text {
     // Add extra spacing when label is present
-    padding-left: rem(6px);
+    padding-left: convert.to-rem(6px);
   }
 
   // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after`
@@ -85,17 +85,18 @@
     // `top` since we don't want the checkbox to be centered vertically with the
     // text overflows.
     position: absolute;
-    top: rem(2px);
+    top: convert.to-rem(2px);
     left: 0;
 
     // According to the spec, we'll want the bounding box for our checkbox to
     // be 16px. The border size will be what will be updated during the
     // different checkbox states.
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     border: 1px solid $icon-primary;
     // increase left margin for #6480
-    margin: rem(2px) rem(2px) rem(2px) rem(3px);
+    margin: convert.to-rem(2px) convert.to-rem(2px) convert.to-rem(2px)
+      convert.to-rem(3px);
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
@@ -106,13 +107,13 @@
   // Create the appearance of the check in the `after` pseudo-element
   .#{$prefix}--checkbox-label::after {
     position: absolute;
-    top: rem(7.5px);
-    left: rem(7px);
-    width: rem(9px);
-    height: rem(5px);
+    top: convert.to-rem(7.5px);
+    left: convert.to-rem(7px);
+    width: convert.to-rem(9px);
+    height: convert.to-rem(5px);
     border-bottom: 1.5px solid $icon-inverse;
     border-left: 1.5px solid $icon-inverse;
-    margin-top: rem(-3px) #{'/*rtl:0rem*/'};
+    margin-top: convert.to-rem(-3px) #{'/*rtl:0rem*/'};
     background: none;
     content: '';
     transform: scale(0) rotate(-45deg);
@@ -140,8 +141,8 @@
 
   // Indeterminate symbol
   .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after {
-    top: rem(11px);
-    width: rem(8px);
+    top: convert.to-rem(11px);
+    width: convert.to-rem(8px);
     border-bottom: 2px solid $icon-inverse;
     border-left: 0 solid $icon-inverse;
     transform: scale(1) rotate(0deg);
@@ -227,7 +228,7 @@
   }
 
   .#{$prefix}--checkbox__invalid-icon {
-    margin: 0 rem(1px) 0 rem(3px);
+    margin: 0 convert.to-rem(1px) 0 convert.to-rem(3px);
     fill: $support-error;
   }
 
@@ -330,11 +331,11 @@
   .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: rem(100px);
+    width: convert.to-rem(100px);
     height: $spacing-05;
 
     // Add extra spacing when label is present
-    margin: rem(1px) 0 0 rem(6px);
+    margin: convert.to-rem(1px) 0 0 convert.to-rem(6px);
   }
 
   //-----------------------------------------------

package/scss/components/code-snippet/_code-snippet.scss

@@ -13,7 +13,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/keyframes' as *;
@@ -226,7 +226,7 @@ $copy-btn-feedback: $background-inverse !default;
   // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
     padding-right: $spacing-08;
-    padding-bottom: rem(24px);
+    padding-bottom: convert.to-rem(24px);
     overflow-x: auto;
   }
 
@@ -249,7 +249,7 @@ $copy-btn-feedback: $background-inverse !default;
     position: absolute;
     top: 0;
     right: 0;
-    width: rem(16px);
+    width: convert.to-rem(16px);
     height: 100%;
     background-image: linear-gradient(to right, transparent, $layer);
     content: '';
@@ -261,8 +261,8 @@ $copy-btn-feedback: $background-inverse !default;
 
   //Copy Button
   .#{$prefix}--snippet__icon {
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     fill: $icon-primary;
     transition: all $duration-fast-01 motion(standard, productive);
   }
@@ -335,7 +335,7 @@ $copy-btn-feedback: $background-inverse !default;
     right: 0;
     bottom: 0;
     display: inline-flex;
-    height: rem(32px);
+    height: convert.to-rem(32px);
     align-items: center;
 
     padding: $spacing-03 $spacing-05;
@@ -346,7 +346,7 @@ $copy-btn-feedback: $background-inverse !default;
 
   .#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text {
     position: relative;
-    top: rem(-1px);
+    top: convert.to-rem(-1px);
   }
 
   .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand {
@@ -422,7 +422,7 @@ $copy-btn-feedback: $background-inverse !default;
 
   .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
     // (The height of button) + (The height of the tooltip's triangle) + 4px
-    top: rem(50.8px);
+    top: convert.to-rem(50.8px);
     right: auto;
     left: 50%;
 
@@ -431,7 +431,7 @@ $copy-btn-feedback: $background-inverse !default;
     }
 
     &::after {
-      top: rem(-4px);
+      top: convert.to-rem(-4px);
     }
   }
 
@@ -439,13 +439,13 @@ $copy-btn-feedback: $background-inverse !default;
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {
     // (The height of button) + (The height of the tooltip's triangle) + 4px
-    top: rem(42.8px);
+    top: convert.to-rem(42.8px);
   }
 
   .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
     // TODO: use updated global tooltip mixins under the hood
     // since all of the positioning values for the copy button tooltip are arbitrary hard coded rem values, we need this arbitrary 4px offset to keep the proper tooltip spacing according to the spec
-    top: calc(100% - #{rem(4px)});
+    top: calc(100% - #{convert.to-rem(4px)});
     right: auto;
     left: 50%;
   }
@@ -489,13 +489,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--single
     .#{$prefix}--snippet-container:focus
     ~ .#{$prefix}--snippet__overflow-indicator--right {
-    right: calc(#{$spacing-08} + #{rem(2px)});
+    right: calc(#{$spacing-08} + #{convert.to-rem(2px)});
   }
 
   .#{$prefix}--snippet--single
     .#{$prefix}--snippet-container:focus
     + .#{$prefix}--snippet__overflow-indicator--left {
-    left: rem(2px);
+    left: convert.to-rem(2px);
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left {
@@ -522,11 +522,11 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet--multi.#{$prefix}--skeleton {
-    height: rem(98px);
+    height: convert.to-rem(98px);
   }
 
   .#{$prefix}--snippet--single.#{$prefix}--skeleton {
-    height: rem(56px);
+    height: convert.to-rem(56px);
   }
 
   .#{$prefix}--snippet.#{$prefix}--skeleton span {

package/scss/components/code-snippet/_mixins.scss

@@ -7,7 +7,7 @@
 
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 
 /// Code snippet base styles
 /// @access private
@@ -17,6 +17,6 @@
 
   position: relative;
   width: 100%;
-  max-width: rem(768px);
+  max-width: convert.to-rem(768px);
   background-color: $layer;
 }

package/scss/components/combo-button/_combo-button.scss

@@ -9,7 +9,7 @@
 @use '../menu';
 @use '../../config' as *;
 @use '../../motion' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 
 /// Combo Button styles
 /// @access public
@@ -17,19 +17,19 @@
 @mixin combo-button {
   .#{$prefix}--combo-button__container {
     display: inline-flex;
-    column-gap: rem(1px);
+    column-gap: convert.to-rem(1px);
   }
 
   $triggerSizes: (
-    'sm': rem(32px),
-    'md': rem(40px),
-    'lg': rem(48px),
+    'sm': convert.to-rem(32px),
+    'md': convert.to-rem(40px),
+    'lg': convert.to-rem(48px),
   );
 
   @each $size, $trigger in $triggerSizes {
     .#{$prefix}--combo-button__container--#{$size}
       .#{$prefix}--combo-button__primary-action {
-      min-width: 10rem - rem(1px) - $trigger;
+      min-width: 10rem - convert.to-rem(1px) - $trigger;
     }
   }
 

package/scss/components/contained-list/_contained-list.scss

@@ -15,7 +15,6 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/button-reset';
-@use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/custom-property';
 @use '../../utilities/layout';