@carbon/styles 1.31.1 → 1.32.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.31.1",
+  "version": "1.32.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4d5dedb5de37b8c55b004c787146b4df6f218670"
+  "gitHead": "fe40fbf428231bd35f6bc8cc871ea09c7afa5051"
 }

package/scss/_layout.scss

@@ -11,10 +11,29 @@
 @use './config' as *;
 @use './utilities/custom-property';
 @use './utilities/convert' as *;
-@use './utilities/layout' as *;
+@use './spacing' as *;
+
+$layout-tokens: (
+  size: (
+    height: (
+      xs: rem(24px),
+      sm: rem(32px),
+      md: rem(40px),
+      lg: rem(48px),
+      xl: rem(64px),
+      2xl: rem(80px),
+    ),
+  ),
+  density: (
+    padding-inline: (
+      condensed: $spacing-03,
+      normal: $spacing-05,
+    ),
+  ),
+);
 
 :root {
-  @each $group, $properties in $tokens {
+  @each $group, $properties in $layout-tokens {
     @each $property, $steps in $properties {
       @each $step, $value in $steps {
         @include custom-property.declaration(
@@ -39,7 +58,7 @@
   }
 }
 
-@each $group, $properties in $tokens {
+@each $group, $properties in $layout-tokens {
   @each $property, $steps in $properties {
     @each $step, $value in $steps {
       .#{$prefix}--layout--#{$group}-#{$step} {
@@ -56,7 +75,7 @@
         );
       }
 
-      .#{$prefix}--layout-constraint--#{$group}\:default-#{$step} {
+      .#{$prefix}--layout-constraint--#{$group}__default-#{$step} {
         @include custom-property.declaration(
           'layout-#{$group}-#{$property}',
           custom-property.get-var(
@@ -70,7 +89,7 @@
       }
 
       @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/button/_mixins.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 @use 'vars' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -21,10 +23,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
 @mixin button-base {
   // https://caniuse.com/mdn-css_types_length_lh
-  --temp-1lh: (var(--#{$prefix}-body-compact-01-line-height) * 1em);
+  --temp-1lh: (
+    #{custom-property.get-var(
+        'body-compact-01-line-height',
+        map.get($body-compact-01, line-height)
+      )} * 1em
+  );
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
-    (var(--#{$prefix}-layout-size-height-lg) - var(--temp-1lh)) / 2 - #{rem(1px)}
+    (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
+      #{rem(1px)}
   );
 
   @include component-reset.reset;

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'sass:list';
+@use 'sass:map';
 
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -15,6 +15,7 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
+@use '../../utilities/custom-property';
 @use '../../utilities/layout';
 
 /// Contained List styles
@@ -26,6 +27,11 @@
     @include layout.use('density', $default: 'normal');
   }
 
+  .#{$prefix}--contained-list > ul {
+    padding: 0;
+    margin: 0;
+  }
+
   .#{$prefix}--contained-list__header {
     position: sticky;
     z-index: 1;
@@ -126,12 +132,17 @@
 
   .#{$prefix}--contained-list-item {
     position: relative;
+    list-style: none;
   }
 
   .#{$prefix}--contained-list-item:not(:first-of-type) {
     margin-top: -1px;
   }
 
+  .#{$prefix}--contained-list-item__content {
+    box-sizing: border-box;
+  }
+
   .#{$prefix}--contained-list-item--clickable
     .#{$prefix}--contained-list-item__content {
     @include button-reset.reset;
@@ -145,7 +156,12 @@
   .#{$prefix}--contained-list-item--clickable
     .#{$prefix}--contained-list-item__content {
     // https://caniuse.com/mdn-css_types_length_lh
-    --temp-1lh: (var(--#{$prefix}-body-01-line-height) * 1em);
+    --temp-1lh: (
+      #{custom-property.get-var(
+          'body-01-line-height',
+          map.get($body-01, line-height)
+        )} * 1em
+    );
 
     @include type-style('body-01');
 
@@ -197,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/notification/_actionable-notification.scss

@@ -315,7 +315,8 @@
 
   /* Tertiary action button when not inline (toast) */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
-    padding: 0 $spacing-05;
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
     margin-bottom: $spacing-05;
 
     // Button should be left aligned with text.

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/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/_layout.scss

@@ -8,28 +8,8 @@
 @use 'sass:map';
 
 @use '../config';
-@use '../spacing' as *;
+@use '../layout' as *;
 @use './custom-property';
-@use './convert' as *;
-
-$tokens: (
-  size: (
-    height: (
-      xs: rem(24px),
-      sm: rem(32px),
-      md: rem(40px),
-      lg: rem(48px),
-      xl: rem(64px),
-      2xl: rem(80px),
-    ),
-  ),
-  density: (
-    padding-inline: (
-      condensed: $spacing-03,
-      normal: $spacing-05,
-    ),
-  ),
-);
 
 /// Enables the use of contextual layout tokens within a component. This mixin should be
 /// included on the outermost selector of the component.
@@ -41,7 +21,7 @@ $tokens: (
 /// @group utilities
 /// @access public
 @mixin use($group, $default, $min: null, $max: null) {
-  $properties: map.get($tokens, $group);
+  $properties: map.get($layout-tokens, $group);
 
   @each $property, $steps in $properties {
     $minValue: custom-property.get-var('layout-#{$group}-#{$property}-min');
@@ -106,7 +86,7 @@ $tokens: (
 }
 
 /// Internal base function for retrieving a property from a layout group.
-/// @param {String} $group - The group name as defined in the $tokens
+/// @param {String} $group - The group name as defined in the $layout-tokens
 /// @param {String} $property - The property name
 /// @example @include -group('size', $property)
 /// @group utilities

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;
+    }
+  }
+}