@carbon/styles 1.68.0-rc.0 → 1.69.0-rc.0

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

@@ -40,7 +40,8 @@
     cursor: pointer;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(40px);
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:focus {
@@ -272,7 +273,8 @@
     inline-size: 100%;
     max-inline-size: 11.25rem;
     text-align: start;
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive),
       color $duration-fast-02 motion(entrance, productive);
 

package/scss/components/pagination/_pagination.scss

@@ -220,7 +220,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 

package/scss/components/pagination/_unstable_pagination.scss

@@ -85,7 +85,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -88,7 +88,8 @@
     outline: 0;
     text-align: center;
     text-decoration: none;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     user-select: none;
 

package/scss/components/popover/_popover.scss

@@ -104,11 +104,10 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Drop shadow modifier
-  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
-    @include custom-property.declaration(
-      'popover-drop-shadow',
-      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
-    );
+  .#{$prefix}--popover--drop-shadow
+    .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
   }
 
   // Caret tip modifier

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -91,7 +91,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     line-height: 1.45;
     max-inline-size: convert.to-rem(88px);
     text-overflow: ellipsis;
-    transition: box-shadow $duration-fast-02 motion(standard, productive),
+    transition:
+      box-shadow $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     white-space: nowrap;
 

package/scss/components/search/_search.scss

@@ -54,7 +54,8 @@
 
     inline-size: 100%;
     text-overflow: ellipsis;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive);
 
     &:focus {
@@ -199,7 +200,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     opacity: 1;
-    transition: opacity $duration-fast-02 motion(standard, productive),
+    transition:
+      opacity $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive),
       border $duration-fast-02 motion(standard, productive);
@@ -324,7 +326,8 @@
   .#{$prefix}--search--expandable .#{$prefix}--search-input {
     padding: 0;
     inline-size: 0;
-    transition: padding $duration-fast-01 motion(standard, productive),
+    transition:
+      padding $duration-fast-01 motion(standard, productive),
       width 0s linear $duration-fast-01;
 
     &::placeholder {

package/scss/components/slider/_slider.scss

@@ -187,10 +187,13 @@
     position: absolute;
     border-radius: 50%;
     background: $layer-selected-inverse;
-    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
+    box-shadow:
+      inset 0 0 0 1px transparent,
+      inset 0 0 0 2px transparent;
     inset: 0;
     outline: none;
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       background $duration-fast-02 motion(standard, productive),
       box-shadow $duration-fast-02 motion(standard, productive);
 
@@ -201,7 +204,9 @@
 
     &:focus {
       background-color: $interactive;
-      box-shadow: inset 0 0 0 2px $interactive, inset 0 0 0 3px $layer;
+      box-shadow:
+        inset 0 0 0 2px $interactive,
+        inset 0 0 0 3px $layer;
       // 20px / 14px = 1.4286
       transform: scale(1.4286);
     }

package/scss/components/slug/_slug.scss

@@ -76,7 +76,8 @@ $sizes: (
     color: $text-primary;
     font-weight: 600;
     outline: none;
-    transition: color $duration-fast-01 motion(entrance, productive),
+    transition:
+      color $duration-fast-01 motion(entrance, productive),
       border-color $duration-fast-01 motion(entrance, productive),
       box-shadow $duration-fast-01 motion(entrance, productive),
       background $duration-fast-01 motion(entrance, productive);
@@ -114,7 +115,9 @@ $sizes: (
 
   .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
     background: $border-inverse;
-    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
+    box-shadow:
+      inset 0 0 0 1px $focus,
+      inset 0 0 0 2px $focus-inset;
     color: $text-inverse;
   }
 
@@ -192,7 +195,8 @@ $sizes: (
     inset-inline-start: 0;
     opacity: 1;
     transform: translateY(-50%);
-    transition: background $duration-fast-01 motion(entrance, productive),
+    transition:
+      background $duration-fast-01 motion(entrance, productive),
       box-shadow $duration-fast-01 motion(entrance, productive);
   }
 
@@ -254,7 +258,8 @@ $sizes: (
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       -40px 44px 60px -24px $ai-popover-shadow-outer-01,
       -56px 64px 64px -24px $ai-popover-shadow-outer-02;
     color: $text-primary;
@@ -707,7 +712,9 @@ $sizes: (
 
   .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn:focus {
     border-color: $focus;
-    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background;
+    box-shadow:
+      inset 0 0 0 1px $focus,
+      inset 0 0 0 2px $background;
   }
 
   .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn--primary {

package/scss/components/tabs/_tabs.scss

@@ -353,7 +353,8 @@
     }
 
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
-      transition: color $duration-fast-01 motion(standard, productive),
+      transition:
+        color $duration-fast-01 motion(standard, productive),
         border-bottom-color $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
     }
@@ -484,7 +485,8 @@
       text-align: start;
       text-decoration: none;
       text-overflow: ellipsis;
-      transition: border $duration-fast-01 motion(standard, productive),
+      transition:
+        border $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
       white-space: nowrap;
 

package/scss/components/tag/_tag.scss

@@ -303,7 +303,8 @@
     color: currentColor;
     cursor: pointer;
     inline-size: layout.size('height');
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
 
     svg {

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

@@ -40,7 +40,8 @@
 
     min-inline-size: 10rem;
     resize: vertical;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

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

@@ -46,7 +46,8 @@
     font-family: inherit;
 
     inline-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
     &:focus,
@@ -286,7 +287,8 @@
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
     position: relative;
     background: $field;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

package/scss/components/tile/_tile.scss

@@ -297,7 +297,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile-content__below-the-fold {
     display: block;
     opacity: 0;
-    transition: opacity $duration-fast-02 motion(standard, productive),
+    transition:
+      opacity $duration-fast-02 motion(standard, productive),
       visibility $duration-fast-02 motion(standard, productive);
     visibility: hidden;
   }
@@ -312,7 +313,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     .#{$prefix}--tile-content__below-the-fold {
       opacity: 1;
-      transition: opacity $duration-fast-02 motion(standard, productive),
+      transition:
+        opacity $duration-fast-02 motion(standard, productive),
         visibility $duration-fast-02 motion(standard, productive);
       visibility: inherit;
 
@@ -424,7 +426,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }
 
@@ -450,7 +453,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
   }
 
@@ -468,7 +472,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }
 

package/scss/components/time-picker/_time-picker.scss

@@ -67,7 +67,8 @@
     align-items: center;
     block-size: convert.to-rem(40px);
     inline-size: 4.875rem;
-    transition: outline $duration-fast-01 motion(standard, productive),
+    transition:
+      outline $duration-fast-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
 
     &::placeholder {

package/scss/components/toggle/_toggle.scss

@@ -79,7 +79,9 @@
     .#{$prefix}--toggle__switch,
   .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
     .#{$prefix}--toggle__switch {
-    box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
+    box-shadow:
+      0 0 0 1px $focus-inset,
+      0 0 0 3px $focus;
   }
 
   .#{$prefix}--toggle__switch--checked {

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

@@ -45,7 +45,8 @@
     border: convert.to-rem(1px) solid transparent;
     block-size: mini-units(6);
     inline-size: mini-units(6);
-    transition: background-color $duration-fast-02,
+    transition:
+      background-color $duration-fast-02,
       border-color $duration-fast-02;
     @include breakpoint-down('md') {
       min-inline-size: $spacing-09;
@@ -232,8 +233,10 @@
     line-height: 1.125rem;
     // Reset link styles and make sure the text isn't selectable
     text-decoration: none;
-    transition: background-color $duration-fast-02,
-      border-color $duration-fast-02, color $duration-fast-02;
+    transition:
+      background-color $duration-fast-02,
+      border-color $duration-fast-02,
+      color $duration-fast-02;
     user-select: none;
   }
 
@@ -387,7 +390,9 @@
   .#{$prefix}--header__menu-arrow {
     fill: $icon-secondary;
     margin-inline-start: mini-units(1);
-    transition: transform $duration-fast-02, fill $duration-fast-02;
+    transition:
+      transform $duration-fast-02,
+      fill $duration-fast-02;
   }
 
   //--------------------------------------------------------------------------

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

@@ -40,7 +40,8 @@
     inset-inline-start: 0;
     max-inline-size: mini-units(32);
     // TODO: sync with motion work
-    transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
+    transition:
+      inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
       transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
     will-change: inline-size;
   }
@@ -82,7 +83,8 @@
     inset-block-start: convert.to-rem(48px);
     inset-inline-start: 0;
     opacity: 0;
-    transition: opacity $transition-expansion $standard-easing,
+    transition:
+      opacity $transition-expansion $standard-easing,
       background-color $transition-expansion $standard-easing;
   }
 
@@ -93,7 +95,8 @@
       block-size: 100vh;
       inline-size: 100vw;
       opacity: 1;
-      transition: opacity $transition-expansion $standard-easing,
+      transition:
+        opacity $transition-expansion $standard-easing,
         background-color $transition-expansion $standard-easing;
     }
   }
@@ -211,7 +214,9 @@
     padding: 0 mini-units(2);
     block-size: mini-units(4);
     color: $text-secondary;
-    transition: color $duration-fast-02, background-color $duration-fast-02,
+    transition:
+      color $duration-fast-02,
+      background-color $duration-fast-02,
       outline $duration-fast-02;
     user-select: none;
   }
@@ -337,7 +342,9 @@
     padding: 0 mini-units(2);
     min-block-size: mini-units(4);
     text-decoration: none;
-    transition: color $duration-fast-02, background-color $duration-fast-02,
+    transition:
+      color $duration-fast-02,
+      background-color $duration-fast-02,
       outline $duration-fast-02;
   }
 

package/scss/utilities/_ai-gradient.scss

@@ -89,7 +89,8 @@
   );
 
   @if $type == 'hover' {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           theme.$ai-aura-hover-start $start,
           15%,
@@ -112,7 +113,8 @@
         )
         border-box;
   } @else if $type == 'selected' {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           theme.$ai-aura-start $start,
           15%,
@@ -126,7 +128,8 @@
       linear-gradient(to top, theme.$layer, theme.$layer)
         border-box;
   } @else {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           $background $start,
           theme.$ai-aura-start $start,