@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/tabs/_tabs.scss

@@ -54,11 +54,11 @@
 
     position: relative;
     display: flex;
-    width: 100%;
-    height: auto;
-    min-height: layout.size('height');
-    max-height: custom-property.get-var('layout-size-height-xl');
+    block-size: auto;
     color: $text-primary;
+    inline-size: 100%;
+    max-block-size: custom-property.get-var('layout-size-height-xl');
+    min-block-size: layout.size('height');
 
     &.#{$prefix}--tabs--contained {
       @include layout.use('size', $min: 'sm', $max: 'xl', $default: 'lg');
@@ -66,7 +66,7 @@
 
     .#{$prefix}--tab--list {
       display: flex;
-      width: auto;
+      inline-size: auto;
       overflow-x: auto;
       scroll-behavior: smooth;
       scrollbar-width: none;
@@ -90,11 +90,11 @@
       @include button-reset.reset;
 
       display: flex;
-      width: $spacing-08;
       flex-shrink: 0;
       align-items: center;
       justify-content: center;
       background-color: $background;
+      inline-size: $spacing-08;
 
       &:focus {
         @include focus-outline('outline');
@@ -106,9 +106,9 @@
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
-      width: $spacing-09;
       margin: 0;
       background-color: $layer-accent;
+      inline-size: $spacing-09;
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
@@ -117,23 +117,23 @@
 
     .#{$prefix}--tab--overflow-nav-button--next {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      inset-block-end: 0;
+      inset-block-start: 0;
+      inset-inline-end: 0;
     }
 
     .#{$prefix}--tab--overflow-nav-button--next::before {
       position: absolute;
       z-index: 1;
-      left: -$spacing-03;
-      width: $spacing-03;
-      height: 100%;
       background: linear-gradient(
         to right,
         rgba(255, 255, 255, 0),
         $background
       );
+      block-size: 100%;
       content: '';
+      inline-size: $spacing-03;
+      inset-inline-start: -$spacing-03;
     }
 
     &.#{$prefix}--tabs--contained
@@ -147,19 +147,19 @@
 
     .#{$prefix}--tab--overflow-nav-button--previous {
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-end: 0;
+      inset-block-start: 0;
+      inset-inline-start: 0;
     }
 
     .#{$prefix}--tab--overflow-nav-button--previous::before {
       position: absolute;
       z-index: 1;
-      right: -$spacing-03;
-      width: $spacing-03;
-      height: 100%;
       background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
+      block-size: 100%;
       content: '';
+      inline-size: $spacing-03;
+      inset-inline-end: -$spacing-03;
     }
 
     &.#{$prefix}--tabs--contained
@@ -206,7 +206,7 @@
     // Safari-only media query
     // won't appear correctly with CSS custom properties
     // see: code snippet and modal overflow indicators
-    @media not all and (min-resolution: 0.001dpcm) {
+    @media not all and (resolution >= 0.001dpcm) {
       @supports (-webkit-appearance: none) and (stroke-color: transparent) {
         .#{$prefix}--tabs__overflow-indicator--left {
           background-image: linear-gradient(
@@ -254,7 +254,7 @@
     &:not(.#{$prefix}--tabs--contained)
       .#{$prefix}--tabs__nav-item-label-wrapper {
       position: relative;
-      top: convert.to-rem(1px);
+      inset-block-start: convert.to-rem(1px);
     }
 
     //-----------------------------
@@ -272,7 +272,7 @@
     }
 
     .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item {
-      margin-left: convert.to-rem(1px);
+      margin-inline-start: convert.to-rem(1px);
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
@@ -282,9 +282,9 @@
     &.#{$prefix}--tabs--contained
       .#{$prefix}--tabs__nav-item
       + .#{$prefix}--tabs__nav-item {
-      margin-left: 0;
       // Draws the border without affecting the inner-content
       box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong;
+      margin-inline-start: 0;
     }
 
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
@@ -306,10 +306,10 @@
       }
 
       svg {
-        width: 24px;
-        height: 24px;
         padding: $spacing-02;
         margin: -$spacing-02;
+        block-size: 24px;
+        inline-size: 24px;
       }
 
       svg:hover {
@@ -336,7 +336,7 @@
     .#{$prefix}--tabs__nav-item--icon {
       display: flex;
       align-items: center;
-      padding-left: $spacing-03;
+      padding-inline-start: $spacing-03;
 
       .#{$prefix}--tabs__nav-item--close-icon {
         padding: $spacing-02;
@@ -349,8 +349,8 @@
     .#{$prefix}--tabs__nav-item--icon-left {
       display: flex;
       align-items: center;
-      padding-right: $spacing-03;
-      margin-top: -2px;
+      margin-block-start: -2px;
+      padding-inline-end: $spacing-03;
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
@@ -366,10 +366,10 @@
       @include type-style('body-compact-01');
 
       overflow: hidden;
-      border-bottom: $tab-underline-color;
+      border-block-end: $tab-underline-color;
       color: $text-secondary;
       padding-inline: layout.density('padding-inline');
-      text-align: left;
+      text-align: start;
       text-decoration: none;
       text-overflow: ellipsis;
       transition: border $duration-fast-01 motion(standard, productive),
@@ -383,7 +383,7 @@
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
-      border-bottom: 0;
+      border-block-end: 0;
       padding-inline: layout.density('padding-inline');
     }
 
@@ -396,7 +396,7 @@
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item-secondary-label {
       @include type-style('label-01');
 
-      min-height: convert.to-rem(16px);
+      min-block-size: convert.to-rem(16px);
     }
 
     //-----------------------------
@@ -410,11 +410,11 @@
     .#{$prefix}--tabs__nav-item--icon-only,
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only {
       display: flex;
-      width: layout.size('height');
-      height: layout.size('height');
       align-items: center;
       justify-content: center;
       padding: 0;
+      block-size: layout.size('height');
+      inline-size: layout.size('height');
 
       .#{$prefix}--tabs__nav-item-label {
         line-height: 0;
@@ -428,7 +428,7 @@
       .#{$prefix}--tabs__nav-item:not(
         .#{$prefix}--tabs__nav-item--selected
       ):not(.#{$prefix}--tabs__nav-item--disabled):hover {
-      border-bottom: $tab-underline-color-hover;
+      border-block-end: $tab-underline-color-hover;
       color: $text-primary;
     }
 
@@ -446,7 +446,7 @@
     // Item Selected
     //-----------------------------
     .#{$prefix}--tabs__nav-item--selected {
-      border-bottom: 2px solid $border-interactive;
+      border-block-end: 2px solid $border-interactive;
       transition: color $duration-fast-01 motion(standard, productive);
     }
 
@@ -503,14 +503,14 @@
     //-----------------------------
 
     .#{$prefix}--tabs__nav-item--disabled {
-      border-bottom: $tab-underline-disabled;
       background-color: transparent;
+      border-block-end: $tab-underline-disabled;
       color: $tab-text-disabled;
       outline: none;
     }
 
     .#{$prefix}--tabs__nav-item--disabled:hover {
-      border-bottom: $tab-underline-disabled;
+      border-block-end: $tab-underline-disabled;
       color: $tab-text-disabled;
       cursor: not-allowed;
     }
@@ -524,7 +524,7 @@
 
     .#{$prefix}--tabs__nav-item--disabled:focus,
     .#{$prefix}--tabs__nav-item--disabled:active {
-      border-bottom: $tab-underline-disabled;
+      border-block-end: $tab-underline-disabled;
       outline: none;
       pointer-events: none;
     }
@@ -532,13 +532,13 @@
     .#{$prefix}--tabs--light
       .#{$prefix}--tabs__nav-item--disabled
       .#{$prefix}--tabs__nav-link {
-      border-bottom-color: $border-subtle;
+      border-block-end-color: $border-subtle;
     }
 
     .#{$prefix}--tabs--light
       .#{$prefix}--tabs__nav-item--disabled:hover
       .#{$prefix}--tabs__nav-link {
-      border-bottom-color: $border-subtle;
+      border-block-end-color: $border-subtle;
     }
 
     .#{$prefix}--tabs--light
@@ -547,11 +547,11 @@
     .#{$prefix}--tabs--light
       .#{$prefix}--tabs__nav-item--disabled
       .#{$prefix}--tabs__nav-link:active {
-      border-bottom-color: $border-subtle;
+      border-block-end-color: $border-subtle;
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--disabled {
-      border-bottom: none;
+      border-block-end: none;
       color: $text-on-color-disabled;
     }
   }
@@ -582,23 +582,23 @@
 
   .#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--contained)
     .#{$prefix}--tabs__nav-link {
-    border-bottom: 2px solid $skeleton-element;
+    border-block-end: 2px solid $skeleton-element;
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
     display: flex;
-    width: 10rem;
-    height: 100%;
     align-items: center;
     padding: 0 layout.density('padding-inline');
+    block-size: 100%;
+    inline-size: 10rem;
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link span {
     @include skeleton;
 
     display: block;
-    width: 100%;
-    height: convert.to-rem(14px);
+    block-size: convert.to-rem(14px);
+    inline-size: 100%;
   }
 
   // Windows HCM fix
@@ -622,8 +622,8 @@
 .#{$prefix}--tabs.#{$prefix}--tabs--contained.#{$prefix}--tabs--full-width
   .#{$prefix}--tab--list {
   display: grid;
-  width: 100%;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  inline-size: 100%;
 
   .#{$prefix}--tabs__nav-link {
     .#{$prefix}--tabs__nav-item-label,
@@ -632,7 +632,7 @@
       text-overflow: ellipsis;
     }
     .#{$prefix}--tabs__nav-item--icon {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
   }
 }

package/scss/components/tag/_tag.scss

@@ -17,7 +17,7 @@
 @use '../../spacing' as *;
 @use './tokens' as *;
 @use './mixins' as *;
-@use '../../utilities/skeleton';
+@use '../../utilities/skeleton' as *;
 
 /// Tag styles
 /// @access public
@@ -42,22 +42,22 @@
     @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
 
     display: inline-flex;
-    // ensures tag stays pill shaped;
-    min-width: convert.to-rem(32px);
-    // restricts size of contained elements
-    max-width: 100%;
-    min-height: layout.size('height');
     align-items: center;
     justify-content: center;
     margin: $spacing-02;
     border-radius: convert.to-rem(15px);
     cursor: default;
+    // restricts size of contained elements
+    max-inline-size: 100%;
+    min-block-size: layout.size('height');
+    // ensures tag stays pill shaped;
+    min-inline-size: convert.to-rem(32px);
     padding-inline: $spacing-03;
     vertical-align: middle;
     word-break: break-word;
 
     &:not(:first-child) {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 
@@ -149,7 +149,7 @@
 
   .#{$prefix}--tag__label {
     overflow: hidden;
-    max-width: 100%;
+    max-inline-size: 100%;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -165,10 +165,10 @@
 
   // tags used for filtering
   .#{$prefix}--tag--filter {
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
     cursor: pointer;
+    padding-block-end: 0;
+    padding-block-start: 0;
+    padding-inline-end: 0;
 
     &:hover {
       outline: none;
@@ -181,8 +181,6 @@
 
   .#{$prefix}--tag__close-icon {
     display: flex;
-    width: layout.size('height');
-    height: layout.size('height');
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
@@ -190,9 +188,11 @@
     border: 0;
     margin: 0 0 0 convert.to-rem(2px);
     background-color: transparent;
+    block-size: layout.size('height');
     border-radius: 50%;
     color: currentColor;
     cursor: pointer;
+    inline-size: layout.size('height');
     transition: background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
 
@@ -202,14 +202,14 @@
   }
 
   .#{$prefix}--tag__custom-icon {
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
     flex-shrink: 0;
     padding: 0;
     border: 0;
-    margin-right: $spacing-02;
     background-color: transparent;
+    block-size: convert.to-rem(16px);
     color: currentColor;
+    inline-size: convert.to-rem(16px);
+    margin-inline-end: $spacing-02;
     outline: none;
 
     svg {
@@ -241,25 +241,27 @@
   }
 
   .#{$prefix}--tag--sm.#{$prefix}--tag--filter {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 
   .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
-    margin-left: convert.to-rem(5px);
+    margin-inline-start: convert.to-rem(5px);
   }
 
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
+    @include skeleton;
+
     @include tag-theme(
       $bg-color: $skeleton-background,
       $text-color: $text-primary
     );
 
     overflow: hidden;
-    width: convert.to-rem(60px);
+    inline-size: convert.to-rem(60px);
 
     // Safari specific bug (#7672)
-    @media not all and (min-resolution: 0.001dpcm) {
+    @media not all and (min-resolution >= 0.001dpcm) {
       @supports (-webkit-appearance: none) and (stroke-color: transparent) {
         transform: translateZ(0);
       }

package/scss/components/text-area/_text-area.scss

@@ -27,15 +27,16 @@
     @include type-style('body-01');
     @include focus-outline('reset');
 
-    min-width: 10rem;
-    height: 100%;
-    min-height: convert.to-rem(40px);
     padding: convert.to-rem(11px) $spacing-05;
     border: none;
-    border-bottom: 1px solid $border-strong;
     background-color: $field;
+    block-size: 100%;
+    border-block-end: 1px solid $border-strong;
     color: $text-primary;
     font-family: inherit;
+    min-block-size: convert.to-rem(40px);
+
+    min-inline-size: 10rem;
     resize: vertical;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
@@ -57,20 +58,20 @@
   }
 
   .#{$prefix}--text-area--invalid {
-    padding-right: $spacing-08;
+    padding-inline-end: $spacing-08;
   }
 
   .#{$prefix}--text-area__wrapper {
     position: relative;
     display: flex;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--text-area__invalid-icon {
     position: absolute;
-    top: $spacing-04;
-    right: $spacing-05;
     fill: $support-error;
+    inset-block-start: $spacing-04;
+    inset-inline-end: $spacing-05;
   }
 
   .#{$prefix}--text-area__invalid-icon--warning {
@@ -85,20 +86,20 @@
   .#{$prefix}--text-area__counter-alert {
     position: absolute;
     overflow: hidden;
-    width: 1px;
-    height: 1px;
     padding: 0;
     border: 0;
     margin: -1px;
+    block-size: 1px;
     clip: rect(0, 0, 0, 0);
+    inline-size: 1px;
   }
 
   //-----------------------------
   // Disabled
   //-----------------------------
   .#{$prefix}--text-area:disabled {
-    border-bottom: 1px solid transparent;
     background-color: $field;
+    border-block-end: 1px solid transparent;
     color: $text-disabled;
     cursor: not-allowed;
     outline: none;
@@ -113,8 +114,8 @@
   // Readonly
   //-----------------------------
   .#{$prefix}--text-area__wrapper--readonly .#{$prefix}--text-area {
-    border-bottom-color: $border-subtle;
     background: transparent;
+    border-block-end-color: $border-subtle;
   }
 
   // V11: Possibly deprecate
@@ -126,8 +127,9 @@
   .#{$prefix}--text-area.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: 100%;
-    height: convert.to-rem(100px);
+    block-size: convert.to-rem(100px);
+
+    inline-size: 100%;
 
     &::placeholder {
       color: transparent;
@@ -136,7 +138,7 @@
 
   .#{$prefix}--text-area__label-wrapper {
     display: flex;
-    width: 100%;
     justify-content: space-between;
+    inline-size: 100%;
   }
 }