@carbon/styles 1.65.0 → 1.66.0-rc.0

package/scss/components/notification/_actionable-notification.scss

@@ -336,8 +336,7 @@
     margin-inline-start: calc(
       #{$spacing-07} + #{convert.to-rem(20px)} - #{convert.to-rem(2px)}
     );
-    padding-inline-end: $spacing-05;
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05;
   }
 
   // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification

package/scss/components/number-input/_number-input.scss

@@ -59,8 +59,7 @@
     font-weight: 400;
     inline-size: 100%;
     min-inline-size: 9.375rem;
-    padding-inline-end: $spacing-12;
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05 $spacing-12;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -202,14 +202,12 @@
 
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after,
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
-    inset-inline-end: 0;
-    inset-inline-start: auto;
+    inset-inline: auto 0;
   }
 
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after,
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
-    inset-block-end: 0;
-    inset-block-start: auto;
+    inset-block: auto 0;
   }
 
   .#{$prefix}--overflow-menu-options--open {

package/scss/components/pagination/_pagination.scss

@@ -164,14 +164,12 @@
   }
 
   .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
-    margin-inline-end: 1rem;
-    margin-inline-start: convert.to-rem(1px);
+    margin-inline: convert.to-rem(1px) 1rem;
   }
 
   .#{$prefix}--pagination__right
     .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text {
-    margin-inline-end: convert.to-rem(1px);
-    margin-inline-start: 1rem;
+    margin-inline: 1rem convert.to-rem(1px);
   }
 
   .#{$prefix}--pagination__right

package/scss/components/pagination/_unstable_pagination.scss

@@ -66,8 +66,7 @@
 
   .#{$prefix}--unstable-pagination__right
     .#{$prefix}--unstable-pagination__text {
-    margin-inline-end: $spacing-05;
-    margin-inline-start: convert.to-rem(1px);
+    margin-inline: convert.to-rem(1px) $spacing-05;
   }
 
   .#{$prefix}--unstable-pagination__button {

package/scss/components/popover/_popover.scss

@@ -297,8 +297,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover-content::before {
     block-size: $popover-offset;
     inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
     transform: translateY(-100%);
   }
 
@@ -461,8 +460,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover-content::before {
     block-size: $popover-offset;
     inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
     transform: translateY(100%);
   }
 
@@ -618,8 +616,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
     inline-size: $popover-offset;
-    inset-block-end: 0;
-    inset-block-start: 0;
+    inset-block: 0 0;
     inset-inline-start: 0;
     transform: translateX(-100%);
   }
@@ -786,8 +783,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
     inline-size: $popover-offset;
-    inset-block-end: 0;
-    inset-block-start: 0;
+    inset-block: 0 0;
     inset-inline-end: 0;
     transform: translateX(100%);
   }

package/scss/components/radio-button/_radio-button.scss

@@ -285,8 +285,7 @@ $radio-border-width: 1px !default;
     .#{$prefix}--radio-button__appearance,
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
     .#{$prefix}--radio-button__appearance {
-    margin-inline-end: 0;
-    margin-inline-start: $spacing-03;
+    margin-inline: $spacing-03 0;
   }
 
   // Slug styles

package/scss/components/select/_select.scss

@@ -217,8 +217,7 @@
     border-block-end: none;
     color: $text-primary;
     inline-size: auto;
-    padding-inline-end: $spacing-07;
-    padding-inline-start: $spacing-03;
+    padding-inline: $spacing-03 $spacing-07;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus,

package/scss/components/slider/_slider.scss

@@ -280,8 +280,7 @@
     transform: none;
 
     &::before {
-      inset-inline-end: auto;
-      inset-inline-start: 0;
+      inset-inline: 0 auto;
     }
 
     &:hover,

package/scss/components/slug/_slug.scss

@@ -684,8 +684,7 @@ $sizes: (
 
   .#{$prefix}--slug .#{$prefix}--toggletip-content {
     // This sets the max size to the size of the action bar with 3 buttons
-    padding-block-end: convert.to-rem(80px);
-    padding-block-start: convert.to-rem(24px);
+    padding-block: convert.to-rem(24px) convert.to-rem(80px);
     padding-inline: convert.to-rem(24px);
   }
 

package/scss/components/structured-list/_mixins.scss

@@ -32,13 +32,11 @@ $structured-list-text-transform: none !default;
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-inline-end: $padding * 0.5;
-  padding-inline-start: $padding * 0.5;
+  padding-inline: $padding * 0.5 $padding * 0.5;
 
   // Controls gutter sizes for check
   &:first-child {
-    padding-inline-end: $padding * 0.5;
-    padding-inline-start: $padding * 0.5;
+    padding-inline: $padding * 0.5 $padding * 0.5;
   }
 }
 

package/scss/components/structured-list/_structured-list.scss

@@ -68,8 +68,7 @@
     &.#{$prefix}--structured-list--flush
       .#{$prefix}--structured-list-row
       .#{$prefix}--structured-list-th:first-of-type {
-      padding-inline-end: 1rem;
-      padding-inline-start: 0;
+      padding-inline: 0 1rem;
     }
   }
 

package/scss/components/tabs/_tabs.scss

@@ -91,10 +91,9 @@
       }
 
       .#{$prefix}--tab--list {
+        overflow: visible auto;
         flex-direction: column;
         inline-size: 100%;
-        overflow-x: visible;
-        overflow-y: auto;
       }
 
       .#{$prefix}--tab--list-gradient_bottom {
@@ -157,8 +156,7 @@
 
     .#{$prefix}--tab--overflow-nav-button--next {
       position: absolute;
-      inset-block-end: 0;
-      inset-block-start: 0;
+      inset-block: 0 0;
       inset-inline-end: 0;
     }
 
@@ -187,8 +185,7 @@
 
     .#{$prefix}--tab--overflow-nav-button--previous {
       position: absolute;
-      inset-block-end: 0;
-      inset-block-start: 0;
+      inset-block: 0 0;
       inset-inline-start: 0;
     }
 

package/scss/components/tag/_tag.scss

@@ -97,8 +97,7 @@
 
   // tags used for filtering
   .#{$prefix}--tag--filter {
-    padding-block-end: 0;
-    padding-block-start: 0;
+    padding-block: 0;
     padding-inline-end: 0;
 
     &:hover {

package/scss/components/treeview/_treeview.scss

@@ -100,9 +100,8 @@
 
   .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node)
     .#{$prefix}--tree-node__label {
-    padding-block-end: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(7px);
     // (min-height 32px - single line text height 18px) / 2 = 7px
-    padding-block-start: convert.to-rem(7px);
   }
 
   .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
@@ -146,8 +145,7 @@
     block-size: convert.to-rem(24px);
     inline-size: convert.to-rem(24px);
     margin-block-start: $spacing-02;
-    margin-inline-end: $spacing-02;
-    margin-inline-start: -$spacing-02;
+    margin-inline: -$spacing-02 $spacing-02;
     padding-inline-start: $spacing-02;
 
     &:hover {
@@ -173,8 +171,7 @@
     align-self: flex-start;
     fill: $icon-secondary;
     margin-block-start: convert.to-rem(1px);
-    margin-inline-end: $spacing-03;
-    margin-inline-start: $spacing-03;
+    margin-inline: $spacing-03 $spacing-03;
     min-block-size: 1rem;
     min-inline-size: 1rem;
   }

package/scss/components/ui-shell/header/_header.scss

@@ -35,8 +35,7 @@
     block-size: mini-units(6);
     border-block-end: 1px solid $border-subtle;
     inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
   }
 
   .#{$prefix}--header__action {

package/scss/components/ui-shell/header-panel/_header-panel.scss

@@ -27,8 +27,7 @@
     background-color: $layer;
     color: $text-secondary;
     inline-size: 0;
-    inset-block-end: 0;
-    inset-block-start: mini-units(6);
+    inset-block: mini-units(6) 0;
     inset-inline-end: 0;
     transition: width $duration-fast-02 motion(exit, productive);
     will-change: width;

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -36,8 +36,7 @@
     background-color: $background;
     color: $text-secondary;
     inline-size: mini-units(6);
-    inset-block-end: 0;
-    inset-block-start: 0;
+    inset-block: 0 0;
     inset-inline-start: 0;
     max-inline-size: mini-units(32);
     // TODO: sync with motion work
@@ -271,8 +270,7 @@
       background-color: $border-interactive;
       content: '';
       inline-size: 3px;
-      inset-block-end: 0;
-      inset-block-start: 0;
+      inset-block: 0 0;
       inset-inline-start: 0;
     }
   }
@@ -383,8 +381,7 @@
     background-color: $border-interactive;
     content: '';
     inline-size: 3px;
-    inset-block-end: 0;
-    inset-block-start: 0;
+    inset-block: 0 0;
     inset-inline-start: 0;
   }