@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/checkbox/_checkbox.scss

@@ -23,23 +23,23 @@
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
     position: relative;
-    margin-bottom: $spacing-02;
+    margin-block-end: $spacing-02;
   }
 
   // Spacing above collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type {
-    margin-top: convert.to-rem(3px);
+    margin-block-start: convert.to-rem(3px);
   }
 
   // Shift collection of checkboxes up if label is present
   // to account for the 2px top margin for the first checkbox
   .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-top: -#{$spacing-01};
+    margin-block-start: -#{$spacing-01};
   }
 
   // Spacing below collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
-    margin-bottom: convert.to-rem(3px);
+    margin-block-end: convert.to-rem(3px);
   }
 
   // Visually, we'll hide the checkbox input and create our own styled version
@@ -47,8 +47,8 @@
   .#{$prefix}--checkbox {
     @include visually-hidden;
     //even though its hidden, positioning is for native validation to be aligned to checkbox
-    top: 1.25rem;
-    left: 0.7rem;
+    inset-block-start: 1.25rem;
+    inset-inline-start: 0.7rem;
   }
 
   // The label corresponds to the content inside of the `label` tag. Since we're
@@ -60,16 +60,16 @@
 
     position: relative;
     display: flex;
-    min-height: convert.to-rem(24px);
-    padding-top: convert.to-rem(3px);
-    padding-left: convert.to-rem(20px);
     cursor: pointer;
+    min-block-size: convert.to-rem(24px);
+    padding-block-start: convert.to-rem(3px);
+    padding-inline-start: convert.to-rem(20px);
     user-select: none;
   }
 
   .#{$prefix}--checkbox-label-text {
     // Add extra spacing when label is present
-    padding-left: convert.to-rem(6px);
+    padding-inline-start: convert.to-rem(6px);
   }
 
   // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after`
@@ -85,14 +85,6 @@
     // `top` since we don't want the checkbox to be centered vertically with the
     // text overflows.
     position: absolute;
-    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: convert.to-rem(16px);
-    height: convert.to-rem(16px);
     border: 1px solid $icon-primary;
     // increase left margin for #6480
     margin: convert.to-rem(2px) convert.to-rem(2px) convert.to-rem(2px)
@@ -100,24 +92,32 @@
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
+    block-size: convert.to-rem(16px);
     border-radius: 2px;
     content: '';
+
+    // 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.
+    inline-size: convert.to-rem(16px);
+    inset-block-start: convert.to-rem(2px);
+    inset-inline-start: 0;
   }
 
   // Create the appearance of the check in the `after` pseudo-element
   .#{$prefix}--checkbox-label::after {
     position: absolute;
-    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: convert.to-rem(-3px) #{'/*rtl:0rem*/'};
     background: none;
+    block-size: convert.to-rem(5px);
+    border-block-end: 1.5px solid $icon-inverse;
+    border-inline-start: 1.5px solid $icon-inverse;
     content: '';
+    inline-size: convert.to-rem(9px);
+    inset-block-start: convert.to-rem(7.5px);
+    inset-inline-start: convert.to-rem(7px);
+    margin-block-start: convert.to-rem(-3px);
     transform: scale(0) rotate(-45deg);
-    transform-origin: bottom right #{'/*rtl:center*/'};
+    transform-origin: bottom right;
   }
 
   //----------------------------------------------
@@ -136,15 +136,15 @@
   // Display the check
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
-    transform: scale(1) rotate(-45deg) #{'/*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/'};
+    transform: scale(1) rotate(-45deg);
   }
 
   // Indeterminate symbol
   .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after {
-    top: convert.to-rem(11px);
-    width: convert.to-rem(8px);
-    border-bottom: 2px solid $icon-inverse;
-    border-left: 0 solid $icon-inverse;
+    border-block-end: 2px solid $icon-inverse;
+    border-inline-start: 0 solid $icon-inverse;
+    inline-size: convert.to-rem(8px);
+    inset-block-start: convert.to-rem(11px);
     transform: scale(1) rotate(0deg);
   }
 
@@ -224,13 +224,13 @@
   .#{$prefix}--checkbox__validation-msg {
     display: none;
     align-items: flex-start;
-    margin-top: $spacing-02;
+    margin-block-start: $spacing-02;
   }
 
   .#{$prefix}--checkbox__invalid-icon {
-    min-width: convert.to-rem(16px);
     margin: convert.to-rem(1px) convert.to-rem(1px) 0 convert.to-rem(3px);
     fill: $support-error;
+    min-inline-size: convert.to-rem(16px);
   }
 
   .#{$prefix}--checkbox__invalid-icon--warning {
@@ -266,9 +266,9 @@
     .#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    max-height: 100%;
-    margin-top: 0;
-    margin-left: $spacing-03;
+    margin-block-start: 0;
+    margin-inline-start: $spacing-03;
+    max-block-size: 100%;
   }
 
   .#{$prefix}--checkbox-group--invalid
@@ -332,11 +332,11 @@
   .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: convert.to-rem(100px);
-    height: $spacing-05;
-
     // Add extra spacing when label is present
-    margin: convert.to-rem(1px) 0 0 convert.to-rem(6px);
+    block-size: $spacing-05;
+    inline-size: convert.to-rem(100px);
+    margin-block: convert.to-rem(1px) 0;
+    margin-inline: convert.to-rem(6px) 0;
   }
 
   //-----------------------------------------------
@@ -345,4 +345,19 @@
   .#{$prefix}--checkbox--inline {
     position: relative;
   }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--checkbox-label::after {
+    margin-block-start: 0;
+    margin-inline-start: convert.to-rem(-1px);
+    transform-origin: center;
+  }
+
+  [dir='rtl']
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::after,
+  [dir='rtl']
+    .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
+    transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
+  }
 }

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

@@ -149,26 +149,26 @@ $copy-btn-feedback: $background-inverse !default;
     @include bx--snippet;
 
     display: flex;
-    height: $spacing-08;
     align-items: center;
-    padding-right: $spacing-08;
+    block-size: $spacing-08;
+    padding-inline-end: $spacing-08;
   }
 
   .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy {
     padding: 0;
 
     &::after {
-      right: $spacing-05;
+      inset-inline-end: $spacing-05;
     }
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
     position: relative;
     display: flex;
-    height: 100%;
     align-items: center;
-    padding-left: $spacing-05;
+    block-size: 100%;
     overflow-x: auto;
+    padding-inline-start: $spacing-05;
 
     &:focus {
       @include focus-outline('outline');
@@ -178,7 +178,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--single pre {
     @include type-style('code-01');
 
-    padding-right: $spacing-03;
+    padding-inline-end: $spacing-03;
   }
 
   // Preserve whitespace, but don't allow wrapping for inline and single
@@ -198,9 +198,9 @@ $copy-btn-feedback: $background-inverse !default;
   //collapsed snippet container
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
     position: relative;
-    min-height: 100%;
-    max-height: 100%;
     order: 1;
+    max-block-size: 100%;
+    min-block-size: 100%;
     overflow-y: auto;
     transition: max-height $duration-moderate-01 motion(standard, productive);
 
@@ -214,7 +214,7 @@ $copy-btn-feedback: $background-inverse !default;
   // expanded snippet container
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
     .#{$prefix}--snippet-container {
-    padding-bottom: $spacing-05;
+    padding-block-end: $spacing-05;
     transition: max-height $duration-moderate-01 motion(standard, productive);
   }
 
@@ -225,15 +225,15 @@ $copy-btn-feedback: $background-inverse !default;
 
   // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
-    padding-right: $spacing-08;
-    padding-bottom: convert.to-rem(24px);
     overflow-x: auto;
+    padding-block-end: convert.to-rem(24px);
+    padding-inline-end: $spacing-08;
   }
 
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy
     .#{$prefix}--snippet-container
     pre {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 
   // expanded pre
@@ -247,12 +247,19 @@ $copy-btn-feedback: $background-inverse !default;
     .#{$prefix}--snippet-container
     pre::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    width: convert.to-rem(16px);
-    height: 100%;
     background-image: linear-gradient(to right, transparent, $layer);
+    block-size: 100%;
     content: '';
+    inline-size: convert.to-rem(16px);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  [dir='rtl']
+    .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow
+    .#{$prefix}--snippet-container
+    pre::after {
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code {
@@ -261,9 +268,9 @@ $copy-btn-feedback: $background-inverse !default;
 
   //Copy Button
   .#{$prefix}--snippet__icon {
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
+    block-size: convert.to-rem(16px);
     fill: $icon-primary;
+    inline-size: convert.to-rem(16px);
     transition: all $duration-fast-01 motion(standard, productive);
   }
 
@@ -296,17 +303,17 @@ $copy-btn-feedback: $background-inverse !default;
     @include font-family('sans');
 
     position: absolute;
-    top: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
   }
 
   // Overrides for codesnippet copy btn
   // TLDR: Copy/CopyButton now uses IconButton, which uses Carbon buttons under the hood
   // v10 Copy just used native html button so it didn't have extra carbon styles that needed overriding
   .#{$prefix}--snippet--inline.#{$prefix}--btn {
-    width: initial;
-    height: 1.25rem;
-    min-height: 1.25rem;
+    block-size: 1.25rem;
+    inline-size: initial;
+    min-block-size: 1.25rem;
     padding-inline: 0;
   }
 
@@ -317,8 +324,8 @@ $copy-btn-feedback: $background-inverse !default;
   // override multi copy btn styles
   .#{$prefix}--snippet.#{$prefix}--snippet--multi
     .#{$prefix}--popover-container {
-    top: 0.5rem;
-    right: 0.5rem;
+    inset-block-start: 0.5rem;
+    inset-inline-end: 0.5rem;
   }
 
   .#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
@@ -332,21 +339,21 @@ $copy-btn-feedback: $background-inverse !default;
 
     position: absolute;
     z-index: 10;
-    right: 0;
-    bottom: 0;
     display: inline-flex;
-    height: convert.to-rem(32px);
     align-items: center;
 
     padding: $spacing-03 $spacing-05;
     border: 0;
     background-color: $layer;
+    block-size: convert.to-rem(32px);
     color: $text-primary;
+    inset-block-end: 0;
+    inset-inline-end: 0;
   }
 
   .#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text {
     position: relative;
-    top: convert.to-rem(-1px);
+    inset-block-start: convert.to-rem(-1px);
   }
 
   .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand {
@@ -354,8 +361,8 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
-    margin-left: $spacing-03;
     fill: $icon-primary;
+    margin-inline-start: $spacing-03;
     transform: rotate(0deg);
     transition: $duration-moderate-01 motion(standard, productive);
   }
@@ -416,22 +423,22 @@ $copy-btn-feedback: $background-inverse !default;
 
   // Skeleton State
   .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
     // (The height of button) + (The height of the tooltip's triangle) + 4px
-    top: convert.to-rem(50.8px);
-    right: auto;
-    left: 50%;
+    inset-block-start: convert.to-rem(50.8px);
+    inset-inline-end: auto;
+    inset-inline-start: 50%;
 
     &::before {
-      top: 0;
+      inset-block-start: 0;
     }
 
     &::after {
-      top: convert.to-rem(-4px);
+      inset-block-start: convert.to-rem(-4px);
     }
   }
 
@@ -439,63 +446,71 @@ $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: convert.to-rem(42.8px);
+    inset-block-start: 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% - #{convert.to-rem(4px)});
-    right: auto;
-    left: 50%;
+    inset-block-start: calc(100% - #{convert.to-rem(4px)});
+    inset-inline-end: auto;
+    inset-inline-start: 50%;
   }
 
   // Overflow Indicator
   .#{$prefix}--snippet__overflow-indicator--left,
   .#{$prefix}--snippet__overflow-indicator--right {
     z-index: 1;
-    width: $spacing-05;
     flex: 1 0 auto;
+    inline-size: $spacing-05;
   }
 
   .#{$prefix}--snippet__overflow-indicator--left {
     order: 0;
-    margin-right: -$spacing-05;
     background-image: linear-gradient(to left, transparent, $layer);
+    margin-inline-end: -$spacing-05;
   }
 
   .#{$prefix}--snippet__overflow-indicator--right {
     order: 2;
-    margin-left: -$spacing-05;
     background-image: linear-gradient(to right, transparent, $layer);
+    margin-inline-start: -$spacing-05;
+  }
+
+  [dir='rtl'] .#{$prefix}--snippet__overflow-indicator--left {
+    background-image: linear-gradient(to right, transparent, $layer);
+  }
+
+  [dir='rtl'] .#{$prefix}--snippet__overflow-indicator--right {
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right,
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--left {
     position: absolute;
-    width: $spacing-07;
-    height: calc(100% - #{$spacing-02});
+    block-size: calc(100% - #{$spacing-02});
+    inline-size: $spacing-07;
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right {
-    right: $spacing-08;
+    inset-inline-end: $spacing-08;
   }
 
   .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy
     .#{$prefix}--snippet__overflow-indicator--right {
-    right: 0;
+    inset-inline-end: 0;
   }
 
   .#{$prefix}--snippet--single
     .#{$prefix}--snippet-container:focus
     ~ .#{$prefix}--snippet__overflow-indicator--right {
-    right: calc(#{$spacing-08} + #{convert.to-rem(2px)});
+    inset-inline-end: calc(#{$spacing-08} + #{convert.to-rem(2px)});
   }
 
   .#{$prefix}--snippet--single
     .#{$prefix}--snippet-container:focus
     + .#{$prefix}--snippet__overflow-indicator--left {
-    left: convert.to-rem(2px);
+    inset-inline-start: convert.to-rem(2px);
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left {
@@ -509,7 +524,7 @@ $copy-btn-feedback: $background-inverse !default;
   // Safari-only media query
   // since fades won't appear correctly with CSS custom properties
   // see: tabs, code snippet, and modal overflow indicators
-  @media not all and (min-resolution: 0.001dpcm) {
+  @media not all and (min-resolution >= 0.001dpcm) {
     @supports (-webkit-appearance: none) and (stroke-color: transparent) {
       .#{$prefix}--snippet__overflow-indicator--left {
         background-image: linear-gradient(to left, rgba($layer, 0), $layer);
@@ -522,37 +537,37 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet--multi.#{$prefix}--skeleton {
-    height: convert.to-rem(98px);
+    block-size: convert.to-rem(98px);
   }
 
   .#{$prefix}--snippet--single.#{$prefix}--skeleton {
-    height: convert.to-rem(56px);
+    block-size: convert.to-rem(56px);
   }
 
   .#{$prefix}--snippet.#{$prefix}--skeleton span {
     @include skeleton;
 
     display: block;
-    width: 100%;
-    height: 1rem;
-    margin-top: 0.5rem;
+    block-size: 1rem;
+    inline-size: 100%;
+    margin-block-start: 0.5rem;
 
     &:first-child {
       margin: 0;
     }
 
     &:nth-child(2) {
-      width: 85%;
+      inline-size: 85%;
     }
 
     &:nth-child(3) {
-      width: 95%;
+      inline-size: 95%;
     }
   }
 
   .#{$prefix}--snippet--single.#{$prefix}--skeleton
     .#{$prefix}--snippet-container {
-    padding-bottom: 0;
+    padding-block-end: 0;
   }
 
   // Windows HCM fix

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

@@ -16,7 +16,7 @@
   @include type-style('code-01');
 
   position: relative;
-  width: 100%;
-  max-width: convert.to-rem(768px);
   background-color: $layer;
+  inline-size: 100%;
+  max-inline-size: convert.to-rem(768px);
 }

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

@@ -29,7 +29,7 @@
 
   .#{$prefix}--combo-box.#{$prefix}--list-box--expanded
     .#{$prefix}--text-input {
-    border-bottom-color: $border-subtle;
+    border-block-end-color: $border-subtle;
   }
 
   .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
@@ -55,7 +55,7 @@
   }
 
   .#{$prefix}--combo-box--readonly .#{$prefix}--text-input {
-    border-bottom-color: $border-subtle;
+    border-block-end-color: $border-subtle;
   }
 
   .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon,

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

@@ -29,12 +29,12 @@
   @each $size, $trigger in $triggerSizes {
     .#{$prefix}--combo-button__container--#{$size}
       .#{$prefix}--combo-button__primary-action {
-      min-width: 10rem - convert.to-rem(1px) - $trigger;
+      min-inline-size: 10rem - convert.to-rem(1px) - $trigger;
     }
   }
 
   .#{$prefix}--combo-button__primary-action .#{$prefix}--btn {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--combo-button__trigger svg {