@carbon/styles 1.31.2 → 1.32.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.31.2",
+  "version": "1.32.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "d08d95d74d074985456f6e452d3247789733e199"
+  "gitHead": "507ddae3074272a3be1ff98b3940532d74788d3c"
 }

package/scss/_layout.scss

@@ -75,7 +75,7 @@ $layout-tokens: (
         );
       }
 
-      .#{$prefix}--layout-constraint--#{$group}\:default-#{$step} {
+      .#{$prefix}--layout-constraint--#{$group}__default-#{$step} {
         @include custom-property.declaration(
           'layout-#{$group}-#{$property}',
           custom-property.get-var(
@@ -89,7 +89,7 @@ $layout-tokens: (
       }
 
       @each $constraint in ('min', 'max') {
-        .#{$prefix}--layout-constraint--#{$group}\:#{$constraint}-#{$step} {
+        .#{$prefix}--layout-constraint--#{$group}__#{$constraint}-#{$step} {
           @include custom-property.declaration(
             'layout-#{$group}-#{$property}-#{$constraint}',
             custom-property.get-var(

package/scss/components/button/_button.scss

@@ -156,6 +156,7 @@
     );
 
     > :first-child {
+      min-width: rem(16px);
       margin-block-start: rem(1px);
     }
 

package/scss/components/contained-list/_contained-list.scss

@@ -213,11 +213,8 @@
     @include focus-outline('outline');
 
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     content: '';
+    inset: 0;
   }
 
   .#{$prefix}--contained-list-item--with-action

package/scss/components/data-table/action/_data-table-action.scss

@@ -13,7 +13,6 @@
 @use '../../../utilities/button-reset';
 @use '../../../utilities/convert' as *;
 @use '../../../utilities/focus-outline' as *;
-@use '../../button/vars' as *;
 
 /// Data table action styles
 /// @access public
@@ -411,7 +410,8 @@
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn {
-    padding: $button-padding-ghost;
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
     color: $text-on-color;
     white-space: nowrap;
   }

package/scss/components/fluid-search/_fluid-search.scss

@@ -58,35 +58,26 @@
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon {
-    top: auto;
-    right: 1rem;
-    bottom: rem(13px);
-    left: auto;
+    inset: auto 1rem rem(13px) auto;
     transform: none;
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close {
-    top: auto;
-    right: rem(48px);
-    bottom: 0;
-    left: auto;
     width: rem(40px);
     height: rem(40px);
     border: none;
+    inset: auto rem(48px) 0 auto;
     transition: background-color $duration-fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-close::before {
     position: absolute;
-    top: auto;
-    right: rem(-1px);
-    bottom: rem(14px);
-    left: auto;
     display: block;
     width: rem(1px);
     height: 1rem;
     background: $border-subtle;
     content: '';
+    inset: auto rem(-1px) rem(14px) auto;
   }
 
   .#{$prefix}--search--fluid

package/scss/components/list-box/_list-box.scss

@@ -103,7 +103,15 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--expanded {
-    border-bottom-color: $border-subtle;
+    border-bottom-color: $border-subtle-01;
+  }
+
+  .#{$prefix}--layer-two .#{$prefix}--list-box--expanded {
+    border-bottom-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--list-box--expanded {
+    border-bottom-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box--expanded:hover {
@@ -582,7 +590,19 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item__option:hover {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
+  }
+
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box__menu-item:first-of-type
@@ -595,17 +615,35 @@ $list-box-menu-width: rem(300px);
     color: $text-primary;
   }
 
-  .#{$prefix}--list-box__menu-item:hover
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: transparent;
+    border-top-color: $border-subtle-01;
   }
 
-  .#{$prefix}--list-box--disabled
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
+  }
+
+  .#{$prefix}--layer-two .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box__menu-item__option {
@@ -617,7 +655,7 @@ $list-box-menu-width: rem(300px);
     padding: rem(11px) 0;
     padding-right: $spacing-06;
     border-top: 1px solid transparent;
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
     border-bottom: 1px solid transparent;
     margin: 0 $spacing-05;
     color: $text-secondary;
@@ -682,14 +720,40 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
   }
 
-  .#{$prefix}--list-box__menu-item[disabled]:hover
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box__menu-item[disabled]:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    + .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline

package/scss/components/modal/_modal.scss

@@ -72,6 +72,20 @@
       background-color: $border-subtle-02;
     }
 
+    .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $border-subtle-02;
+    }
+
+    .#{$prefix}--list-box__menu-item:hover
+      .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $layer-hover;
+    }
+
+    .#{$prefix}--list-box__menu-item--active:hover
+      .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $layer-selected-hover;
+    }
+
     // Fluid inputs
     .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
     .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,

package/scss/components/popover/_popover.scss

@@ -110,11 +110,8 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover {
     position: absolute;
     z-index: z('floating');
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     filter: $popover-drop-shadow;
+    inset: 0;
     pointer-events: none;
   }
 

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

@@ -68,10 +68,6 @@
   .#{$prefix}--progress-bar--indeterminate
     .#{$prefix}--progress-bar__track::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     animation-duration: 1400ms;
     animation-iteration-count: infinite;
     animation-name: progress-bar-indeterminate;
@@ -84,6 +80,7 @@
     background-position-x: 0%;
     background-size: 200% 100%;
     content: '';
+    inset: 0;
   }
 
   .#{$prefix}--progress-bar__helper-text {

package/scss/components/tabs/_tabs.scss

@@ -609,3 +609,25 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     @include high-contrast-mode('disabled');
   }
 }
+
+//-----------------------------
+// Grid contained tabs
+//-----------------------------
+
+.#{$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));
+
+  .#{$prefix}--tabs__nav-link {
+    .#{$prefix}--tabs__nav-item-label,
+    .#{$prefix}--tabs__nav-item-secondary-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .#{$prefix}--tabs__nav-item--icon {
+      margin-left: auto;
+    }
+  }
+}

package/scss/components/tile/_tile.scss

@@ -16,6 +16,10 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/layout';
+
+// padding + icon size (1rem) + padding
+$-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
 /// Tile styles
 /// @access public
@@ -26,11 +30,13 @@
   }
 
   .#{$prefix}--tile {
+    @include layout.use('density', $default: 'normal');
+
     position: relative;
     display: block;
     min-width: 8rem;
     min-height: 4rem;
-    padding: $spacing-05;
+    padding: layout.density('padding-inline');
     background-color: $layer;
     outline: 2px solid transparent;
     outline-offset: -2px;
@@ -99,7 +105,6 @@
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
-    padding: $spacing-05;
     background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
@@ -116,8 +121,8 @@
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
     .#{$prefix}--tile--disabled-icon {
     position: absolute;
-    right: 1rem;
-    bottom: 1rem;
+    right: layout.density('padding-inline');
+    bottom: layout.density('padding-inline');
   }
 
   .#{$prefix}--tile--clickable .#{$prefix}--tile--icon {
@@ -135,8 +140,8 @@
   }
 
   .#{$prefix}--tile--selectable {
-    padding-right: $spacing-09;
     border: 1px solid transparent;
+    padding-inline-end: $-icon-container-size;
 
     @if (
       enabled('enable-experimental-tile-contrast') or
@@ -148,8 +153,8 @@
 
   .#{$prefix}--tile__checkmark {
     position: absolute;
-    top: 1rem;
-    right: 1rem;
+    top: layout.density('padding-inline');
+    right: layout.density('padding-inline');
     height: 1rem;
     border: none;
     background: transparent;
@@ -175,8 +180,8 @@
     right: 0;
     bottom: 0;
     display: flex;
-    width: $spacing-09;
-    height: $spacing-09;
+    width: $-icon-container-size;
+    height: $-icon-container-size;
     align-items: center;
     justify-content: center;
 
@@ -205,8 +210,8 @@
     right: 0;
     bottom: 0;
     display: flex;
-    width: $spacing-09;
-    height: $spacing-09;
+    width: $-icon-container-size;
+    height: $-icon-container-size;
     align-items: center;
     justify-content: center;
 

package/scss/components/toggle/_toggle.scss

@@ -77,10 +77,8 @@
   .#{$prefix}--toggle__button:focus
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle__button:not(:disabled):active
-    + .#{$prefix}--toggle__label
-    .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle:active .#{$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;
   }
 
@@ -192,10 +190,30 @@
   .#{$prefix}--toggle__button:focus
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle__button:not(:disabled):active
-    + .#{$prefix}--toggle__label
-    .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle:active .#{$prefix}--toggle__switch {
+  .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
+    .#{$prefix}--toggle__switch {
     @include high-contrast-mode('focus');
   }
+
+  // Skeleton state
+  .#{$prefix}--toggle--skeleton {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle {
+    @include circular-skeleton;
+
+    width: rem(18px);
+    height: rem(18px);
+    border-radius: 50%;
+  }
+
+  .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-rectangle {
+    @include skeleton;
+
+    width: rem(24px);
+    height: rem(8px);
+    margin-left: rem(8px);
+  }
 }

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

@@ -48,6 +48,10 @@
     }
   }
 
+  .#{$prefix}--header__global .#{$prefix}--popover {
+    z-index: z('header') + 1;
+  }
+
   .#{$prefix}--header__action > :first-child {
     margin-block-start: 0;
   }

package/scss/utilities/_skeleton.scss

@@ -42,3 +42,28 @@
     }
   }
 }
+
+/// Circular Skeleton loading animation
+/// @access public
+/// @example @include circular-skeleton;
+/// @group utilities
+@mixin circular-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: $skeleton-background;
+  border-radius: 50%;
+
+  &::before {
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    animation: 3000ms ease-in-out skeleton infinite;
+    background: $skeleton-element;
+    content: '';
+    will-change: transform-origin, transform, opacity;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}