@carbon/styles 1.37.0 → 1.38.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.37.0",
+  "version": "1.38.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.19.0",
+    "@carbon/grid": "^11.20.0-rc.0",
     "@carbon/layout": "^11.19.0",
     "@carbon/motion": "^11.15.0",
-    "@carbon/themes": "^11.24.0",
-    "@carbon/type": "^11.23.0",
+    "@carbon/themes": "^11.25.0-rc.0",
+    "@carbon/type": "^11.24.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "5078eb5204b21763244768af3b0b283551561d47"
+  "gitHead": "0a2c591ac9ac56286ab465334be3e1322d4c86cb"
 }

package/scss/components/accordion/_accordion.scss

@@ -51,18 +51,18 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     @include component-reset.reset;
 
-    width: 100%;
+    inline-size: 100%;
     list-style: none;
   }
 
   .#{$prefix}--accordion__item {
     display: list-item;
     overflow: visible;
-    border-top: 1px solid $border-subtle;
+    border-block-start: 1px solid $border-subtle;
     transition: all $duration-fast-02 motion(standard, productive);
 
     &:last-child {
-      border-bottom: 1px solid $border-subtle;
+      border-block-end: 1px solid $border-subtle;
     }
   }
 
@@ -71,24 +71,25 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     position: relative;
     display: flex;
-    width: 100%;
-    min-height: layout.size('height');
     flex-direction: $flex-direction;
     align-items: center;
     justify-content: $justify-content;
     margin: 0;
     color: $text-primary;
     cursor: pointer;
+    inline-size: 100%;
+    min-block-size: layout.size('height');
+    padding-inline-end: layout.density('padding-inline');
     transition: background-color motion(standard, productive) $duration-fast-02;
 
     &:hover::before,
     &:focus::before {
       position: absolute;
-      top: -1px;
-      left: 0;
-      width: 100%;
-      height: calc(100% + 2px);
+      block-size: calc(100% + 2px);
       content: '';
+      inline-size: 100%;
+      inset-block-start: -1px;
+      inset-inline-start: 0;
     }
 
     &:hover::before {
@@ -122,25 +123,24 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
     // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
     // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
-    border-top: 1px solid $border-subtle;
+    border-block-start: 1px solid $border-subtle;
   }
 
   li.#{$prefix}--accordion__item--disabled:last-of-type {
     // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
     // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
-    border-bottom: 1px solid $border-subtle;
+    border-block-end: 1px solid $border-subtle;
   }
 
   .#{$prefix}--accordion__arrow {
     @include focus-outline('reset');
 
-    width: 1rem;
-    height: 1rem;
-    // Without flex basis and flex shrink being set here, our icon width can go
-    // <16px and cause the icon to render in the incorrect artboard size
     flex: 0 0 1rem;
-    margin: $arrow-margin;
+    block-size: 1rem;
     fill: $icon-primary;
+    inline-size: 1rem;
+    // Without flex basis and flex shrink being set here, our icon width can go
+    // <16px and cause the icon to render in the incorrect artboard size
     transform: rotate(-270deg) #{'/*rtl:ignore*/'};
     transition: all $duration-fast-02 motion(standard, productive);
   }
@@ -149,10 +149,9 @@ $content-padding: 0 0 0 $spacing-05 !default;
     @include type-style('body-01');
 
     z-index: 1;
-    width: 100%;
-    padding-right: $spacing-05;
-    margin: $title-margin;
-    text-align: left;
+    inline-size: 100%;
+    padding-inline-start: $spacing-05;
+    text-align: start;
   }
 
   .#{$prefix}--accordion__content {
@@ -163,11 +162,11 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     // Custom breakpoints based on issue #4993
     @include breakpoint-up(480px) {
-      padding-right: $spacing-09;
+      padding-inline-end: $spacing-09;
     }
 
     @include breakpoint-up(640px) {
-      padding-right: 25%;
+      padding-inline-end: 25%;
     }
 
     > p {
@@ -186,11 +185,13 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
-    margin-right: $spacing-05;
+    margin-inline-end: $spacing-05;
   }
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
-    margin-left: calc(#{layout.density('padding-inline')} + #{$spacing-05});
+    margin-inline-start: calc(
+      #{layout.density('padding-inline')} + #{$spacing-05}
+    );
   }
 
   .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,
@@ -231,8 +232,8 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     .#{$prefix}--accordion__content {
       display: block;
-      padding-top: $spacing-03;
-      padding-bottom: $spacing-06;
+      padding-block: $spacing-03;
+      padding-block-end: $spacing-06;
       // Transition property for when the accordion opens
       transition: padding-top motion(entrance, productive) $duration-fast-02,
         padding-bottom motion(entrance, productive) $duration-fast-02;
@@ -271,7 +272,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion--end.#{$prefix}--skeleton
     .#{$prefix}--accordion__arrow {
-    margin-left: $spacing-05;
+    margin-inline-start: $spacing-05;
   }
 
   .#{$prefix}--skeleton
@@ -283,7 +284,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   // Windows HCM fix
@@ -291,37 +292,48 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
     @include high-contrast-mode('icon-fill');
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
+    padding-inline-end: 0;
+    padding-inline-start: layout.density('padding-inline');
+  }
+
+  [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
+    margin-inline-end: 0;
+    padding-inline-start: 0;
+  }
 }
 
 @mixin -content-visible {
-  height: 100%;
+  block-size: 100%;
   opacity: 1;
   visibility: inherit;
 }
 
 @mixin -content-hidden {
-  height: 0;
+  block-size: 0;
   opacity: 0;
   visibility: hidden;
 }
 
 // flush
 .#{$prefix}--accordion--flush .#{$prefix}--accordion__title {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .#{$prefix}--accordion--flush .#{$prefix}--accordion__arrow {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 .#{$prefix}--accordion--flush .#{$prefix}--accordion__content {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
   .#{$prefix}--accordion__heading:hover::before,
 .#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
   .#{$prefix}--accordion__heading:focus::before {
-  left: -1rem;
-  width: calc(100% + 32px);
+  inline-size: calc(100% + 32px);
+  inset-inline-start: -1rem;
 }

package/scss/components/aspect-ratio/_aspect-ratio.scss

@@ -45,11 +45,14 @@ $aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    width: 1px;
-    height: 0;
-    margin-left: -1px;
+    block-size: 0;
     content: '';
+    // float: inline-start is not supported yet
+    // https://caniuse.com/mdn-css_properties_float_flow_relative_values
+    // stylelint-disable-next-line csstools/use-logical
     float: left;
+    inline-size: 1px;
+    margin-inline-start: -1px;
   }
 
   .#{$prefix}--aspect-ratio::after {
@@ -63,7 +66,7 @@ $aspect-ratios: (
     $height: list.nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: math.percentage(math.div($height, $width));
+      padding-block-start: math.percentage(math.div($height, $width));
     }
   }
 }

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -34,7 +34,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 
   .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited {
@@ -46,9 +46,9 @@
   }
 
   .#{$prefix}--breadcrumb-item::after {
-    margin-left: $spacing-03;
     color: $text-primary;
     content: '/';
+    margin-inline-start: $spacing-03;
   }
 
   .#{$prefix}--breadcrumb--no-trailing-slash
@@ -58,7 +58,7 @@
 
   .#{$prefix}--breadcrumb-item:last-child,
   .#{$prefix}--breadcrumb-item:last-child::after {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   .#{$prefix}--breadcrumb .#{$prefix}--link {
@@ -79,8 +79,8 @@
   // Overflow Menu overrides
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
     position: relative;
-    width: convert.to-rem(20px);
-    height: convert.to-rem(18px);
+    block-size: convert.to-rem(18px);
+    inline-size: convert.to-rem(20px);
 
     &:focus {
       outline: 1px solid $focus;
@@ -93,11 +93,11 @@
     // Used to mimic link underline
     &::after {
       position: absolute;
-      bottom: 2px;
-      width: convert.to-rem(12px);
-      height: 1px;
       background: $link-primary-hover;
+      block-size: 1px;
       content: '';
+      inline-size: convert.to-rem(12px);
+      inset-block-end: 2px;
       opacity: 0;
       transition: opacity $duration-fast-01 motion(standard, productive);
 
@@ -135,29 +135,35 @@
 
   $caret-size: convert.to-rem(7px);
   .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
-    top: -$caret-size;
-    left: $caret-size * 2;
-    width: 0;
-    height: 0;
-    border-right: $caret-size solid transparent;
-    border-bottom: $caret-size solid $field;
-    border-left: $caret-size solid transparent;
     margin: 0 auto;
     background: transparent;
+    block-size: 0;
+    border-block-end: $caret-size solid $field;
+    border-inline-end: $caret-size solid transparent;
+    border-inline-start: $caret-size solid transparent;
+    inline-size: 0;
+    inset-block-start: -$caret-size;
+    inset-inline-start: $caret-size * 2;
+  }
+
+  [dir='rtl']
+    .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
+    inset-inline-end: $caret-size * 2;
+    inset-inline-start: initial;
   }
 
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;
 
-    width: convert.to-rem(100px);
-    height: 1rem;
+    block-size: 1rem;
+    inline-size: convert.to-rem(100px);
   }
 
   .#{$prefix}--breadcrumb
     .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
-    min-height: 1.125rem;
-    padding-right: 0;
-    padding-left: 0;
+    min-block-size: 1.125rem;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
   }
 }

package/scss/components/button/_button.scss

@@ -119,7 +119,7 @@
 
     .#{$prefix}--btn__icon {
       position: static;
-      margin-left: $spacing-03;
+      margin-inline-start: $spacing-03;
     }
 
     &:hover,
@@ -149,10 +149,10 @@
   }
 
   .#{$prefix}--btn--icon-only {
-    width: layout.size('height');
-    height: layout.size('height');
     justify-content: center;
     padding: 0;
+    block-size: layout.size('height');
+    inline-size: layout.size('height');
     // -1px to compensate for border width
     padding-block-start: min(
       calc(
@@ -162,8 +162,8 @@
     );
 
     > :first-child {
-      min-width: convert.to-rem(16px);
       margin-block-start: convert.to-rem(1px);
+      min-inline-size: convert.to-rem(16px);
     }
 
     .#{$prefix}--btn__icon {
@@ -283,7 +283,7 @@
 
       .#{$prefix}--btn__icon {
         position: static;
-        margin-left: $spacing-03;
+        margin-inline-start: $spacing-03;
       }
 
       &:hover,
@@ -324,19 +324,19 @@
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon {
-    width: convert.to-rem(20px);
-    height: convert.to-rem(20px);
+    block-size: convert.to-rem(20px);
+    inline-size: convert.to-rem(20px);
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--expressive {
-    max-width: convert.to-rem(320px);
+    max-inline-size: convert.to-rem(320px);
   }
 
   // Skeleton State
   .#{$prefix}--btn.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: convert.to-rem(150px);
+    inline-size: convert.to-rem(150px);
   }
 
   // button set styles
@@ -349,9 +349,9 @@
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn {
-    width: 100%;
+    inline-size: 100%;
     // 196px from design kit
-    max-width: convert.to-rem(196px);
+    max-inline-size: convert.to-rem(196px);
 
     &:not(:focus) {
       box-shadow: convert.to-rem(-1px) 0 0 0 $button-separator;
@@ -403,4 +403,9 @@
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
     @include high-contrast-mode('icon-fill');
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--btn-set .#{$prefix}--btn:not(:focus) {
+    box-shadow: convert.to-rem(1px) 0 0 0 $button-separator;
+  }
 }

package/scss/components/button/_mixins.scss

@@ -46,15 +46,15 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
   position: relative;
   display: inline-flex;
-  width: max-content;
-  max-width: convert.to-rem(320px);
-  min-height: layout.size('height');
   flex-shrink: 0;
   justify-content: space-between;
   // Fix to remove added margins on buttons in safari (see #5155)
   margin: 0;
   border-radius: $button-border-radius;
   cursor: pointer;
+  inline-size: max-content;
+  max-inline-size: convert.to-rem(320px);
+  min-block-size: layout.size('height');
   outline: none;
   // -1px to compensate for border width
   padding-block: min(
@@ -68,7 +68,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   padding-inline-start: calc(
     layout.density('padding-inline') - convert.to-rem(1px)
   );
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   transition: background $duration-fast-01 motion(entrance, productive),
     box-shadow $duration-fast-01 motion(entrance, productive),
@@ -91,17 +91,17 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
   .#{$prefix}--btn__icon {
     position: absolute;
+    flex-shrink: 0;
+    block-size: convert.to-rem(16px);
+    inline-size: convert.to-rem(16px);
     // -1px to compensate for border width
-    top: min(
+    inset-block-start: min(
       calc(
         (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px)
       ),
       var(--temp-padding-block-max)
     );
-    right: layout.density('padding-inline');
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
-    flex-shrink: 0;
+    inset-inline-end: layout.density('padding-inline');
     margin-block-start: convert.to-rem(1px);
   }
 }
@@ -145,7 +145,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
 @mixin button-padding-large {
   align-items: baseline;
-  padding-top: $spacing-05;
-  padding-right: $spacing-10;
-  padding-left: $spacing-05;
+  padding-block-start: $spacing-05;
+  padding-inline-end: $spacing-10;
+  padding-inline-start: $spacing-05;
 }