@carbon/styles 1.30.0 → 1.31.0

package/index.scss

@@ -17,5 +17,6 @@
 @forward 'scss/fonts';
 @forward 'scss/grid';
 @forward 'scss/layer';
+@forward 'scss/layout';
 @forward 'scss/zone';
 @use 'scss/components';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,17 +32,17 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.15.0",
-    "@carbon/feature-flags": "^0.14.0",
-    "@carbon/grid": "^11.14.0",
-    "@carbon/layout": "^11.14.0",
-    "@carbon/motion": "^11.11.0",
-    "@carbon/themes": "^11.19.0",
-    "@carbon/type": "^11.18.0",
+    "@carbon/colors": "^11.16.0",
+    "@carbon/feature-flags": "^0.15.0",
+    "@carbon/grid": "^11.15.0",
+    "@carbon/layout": "^11.15.0",
+    "@carbon/motion": "^11.12.0",
+    "@carbon/themes": "^11.20.0",
+    "@carbon/type": "^11.19.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.29.0",
+    "@carbon/test-utils": "^10.30.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "8fb6526d2f73634b13f3bec63b7112839754092d"
+  "gitHead": "4f3787a474ab93252975d717426c186ec4355812"
 }

package/scss/_layout.scss

@@ -0,0 +1,85 @@
+//
+// Copyright IBM Corp. 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use 'sass:list';
+
+@use './config' as *;
+@use './utilities/custom-property';
+@use './utilities/convert' as *;
+@use './utilities/layout' as *;
+
+:root {
+  @each $group, $properties in $tokens {
+    @each $property, $steps in $properties {
+      @each $step, $value in $steps {
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}-#{$step}',
+          $value
+        );
+      }
+
+      // CSS max() doesn't accept '0' as a value without a unit
+      // stylelint-disable length-zero-no-unit
+      @include custom-property.declaration(
+        'layout-#{$group}-#{$property}-min',
+        0px
+      );
+      // stylelint-enable length-zero-no-unit
+
+      @include custom-property.declaration(
+        'layout-#{$group}-#{$property}-max',
+        999999999px
+      );
+    }
+  }
+}
+
+@each $group, $properties in $tokens {
+  @each $property, $steps in $properties {
+    @each $step, $value in $steps {
+      .#{$prefix}--layout--#{$group}-#{$step} {
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}-context',
+          custom-property.get-var(
+            'layout-#{$group}-#{$property}-#{$step}',
+            $value
+          )
+        );
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}',
+          custom-property.get-var('layout-#{$group}-#{$property}-context')
+        );
+      }
+
+      .#{$prefix}--layout-constraint--#{$group}\:default-#{$step} {
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}',
+          custom-property.get-var(
+            'layout-#{$group}-#{$property}-context',
+            custom-property.get-var(
+              'layout-#{$group}-#{$property}-#{$step}',
+              $value
+            )
+          )
+        );
+      }
+
+      @each $constraint in ('min', 'max') {
+        .#{$prefix}--layout-constraint--#{$group}\:#{$constraint}-#{$step} {
+          @include custom-property.declaration(
+            'layout-#{$group}-#{$property}-#{$constraint}',
+            custom-property.get-var(
+              'layout-#{$group}-#{$property}-#{$step}',
+              $value
+            )
+          );
+        }
+      }
+    }
+  }
+}

package/scss/_reset.scss

@@ -103,6 +103,15 @@
     vertical-align: baseline;
   }
 
+  // Chrome 62 fix
+  button,
+  select,
+  input,
+  textarea {
+    border-radius: 0;
+    font-family: inherit;
+  }
+
   /* HTML5 display-role reset for older browsers */
   article,
   aside,

package/scss/components/accordion/_accordion.scss

@@ -14,6 +14,7 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
+@use '../../utilities/layout';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 
@@ -30,12 +31,12 @@ $justify-content: flex-start !default;
 /// @type Value
 /// @access public
 /// @group accordion
-$arrow-margin: 2px $spacing-05 0 0 !default;
+$arrow-margin: 0 layout.density('padding-inline') 0 0 !default;
 
 /// @type Value
 /// @access public
 /// @group accordion
-$title-margin: 0 0 0 $spacing-05 !default;
+$title-margin: 0 0 0 layout.density('padding-inline') !default;
 
 /// @type Value
 /// @access public
@@ -44,6 +45,9 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
 @mixin accordion {
   .#{$prefix}--accordion {
+    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
+    @include layout.use('density', $default: 'normal');
+
     @include component-reset.reset;
 
     width: 100%;
@@ -67,11 +71,10 @@ $content-padding: 0 0 0 $spacing-05 !default;
     position: relative;
     display: flex;
     width: 100%;
-    min-height: convert.rem(40px);
+    min-height: layout.size('height');
     flex-direction: $flex-direction;
-    align-items: flex-start;
+    align-items: center;
     justify-content: $justify-content;
-    padding: convert.rem(10px) 0;
     margin: 0;
     color: $text-primary;
     cursor: pointer;
@@ -100,17 +103,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
   }
 
-  // Size styles
-  .#{$prefix}--accordion--lg .#{$prefix}--accordion__heading {
-    min-height: convert.rem(48px);
-    align-items: center;
-  }
-
-  .#{$prefix}--accordion--sm .#{$prefix}--accordion__heading {
-    min-height: convert.rem(32px);
-    padding: convert.rem(5px) 0;
-  }
-
   // Disabled styles
   .#{$prefix}--accordion__heading[disabled] {
     color: $text-disabled;
@@ -164,8 +156,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion__content {
     display: none;
-    padding-right: $spacing-05;
-    padding-left: $spacing-05;
+    padding-inline: layout.density('padding-inline');
     // Transition property for when the accordion closes
     transition: padding motion(standard, productive) $duration-fast-02;
 
@@ -190,7 +181,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow {
     // Alters `$arrow-margin` token:
-    margin: 2px 0 0 $spacing-05;
+    margin: 2px 0 0 layout.density('padding-inline');
   }
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
@@ -198,7 +189,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
-    margin-left: $spacing-07;
+    margin-left: calc(#{layout.density('padding-inline')} + #{$spacing-05});
   }
 
   .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,

package/scss/components/button/_button.scss

@@ -16,10 +16,14 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/layout';
 @use 'tokens' as *;
 
 @mixin button {
   .#{$prefix}--btn {
+    @include layout.use('size', $default: 'lg');
+    @include layout.use('density', $default: 'normal');
+
     @include button-base;
   }
 
@@ -107,7 +111,7 @@
       $layer-active
     );
 
-    padding: $button-padding-ghost;
+    padding-inline-end: calc(layout.density('padding-inline') - rem(1px));
 
     .#{$prefix}--btn__icon {
       position: static;
@@ -135,24 +139,25 @@
       outline: none;
     }
 
-    &.#{$prefix}--btn--sm {
-      padding: $button-padding-ghost-sm;
-    }
-
-    // V11: remove field
-    &.#{$prefix}--btn--field,
-    &.#{$prefix}--btn--md {
-      padding: $button-padding-ghost-field;
-    }
-
     &:not([disabled]) svg {
       fill: $icon-primary;
     }
   }
 
   .#{$prefix}--btn--icon-only {
-    padding-right: rem(15px);
-    padding-left: rem(15px);
+    width: layout.size('height');
+    height: layout.size('height');
+    justify-content: center;
+    padding: 0;
+    // -1px to compensate for border width
+    padding-block-start: min(
+      calc((layout.size('height') - rem(16px)) / 2 - rem(1px)),
+      var(--temp-padding-block-max)
+    );
+
+    > :first-child {
+      margin-block-start: rem(1px);
+    }
 
     .#{$prefix}--btn__icon {
       position: static;
@@ -193,16 +198,14 @@
     cursor: not-allowed;
   }
 
-  // V11: remove field
-  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only,
-  .#{$prefix}--btn--md.#{$prefix}--btn--icon-only {
-    padding-right: rem(11px);
-    padding-left: rem(11px);
+  // Workaround to ensure onMouseEnter events fire when moving
+  // from a disabled button to a non-disabled button (#13815)
+  .#{$prefix}--icon-tooltip--disabled .#{$prefix}--tooltip-trigger__wrapper {
+    cursor: not-allowed;
   }
 
-  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
-    padding-right: rem(7px);
-    padding-left: rem(7px);
+  .#{$prefix}--icon-tooltip--disabled .#{$prefix}--btn--icon-only[disabled] {
+    pointer-events: none;
   }
 
   .#{$prefix}--btn--danger {
@@ -267,7 +270,7 @@
         $button-danger-active
       );
 
-      padding: $button-padding-ghost;
+      padding-inline-end: calc(layout.density('padding-inline') - rem(1px));
 
       .#{$prefix}--btn__icon {
         position: static;
@@ -290,48 +293,12 @@
         color: $text-disabled;
         outline: none;
       }
-
-      &.#{$prefix}--btn--sm {
-        padding: $button-padding-ghost-sm;
-      }
-
-      // V11: Remove field
-      &.#{$prefix}--btn--field,
-      &.#{$prefix}--btn--md {
-        padding: $button-padding-ghost-field;
-      }
     }
   }
 
-  .#{$prefix}--btn--sm {
-    min-height: rem(32px);
-    padding: $button-padding-sm;
-  }
-
-  .#{$prefix}--btn--2xl:not(.#{$prefix}--btn--icon-only) {
-    @include button-padding-large;
-
-    min-height: rem(80px);
-  }
-
-  .#{$prefix}--btn--xl:not(.#{$prefix}--btn--icon-only) {
-    @include button-padding-large;
-
-    min-height: rem(64px);
-  }
-
-  // V11: Remove field
-  .#{$prefix}--btn--field,
-  .#{$prefix}--btn--md {
-    min-height: rem(40px);
-    padding: $button-padding-field;
-  }
-
   //expressive styles
   .#{$prefix}--btn--expressive {
     @include type-style('body-compact-02');
-
-    min-height: 3rem;
   }
 
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {

package/scss/components/button/_mixins.scss

@@ -14,11 +14,19 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/custom-property';
+@use '../../utilities/layout';
 @use 'tokens' as *;
 
 $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);
+  // -1px to compensate for border width
+  --temp-padding-block-max: calc(
+    (var(--#{$prefix}-layout-size-height-lg) - var(--temp-1lh)) / 2 - #{rem(1px)}
+  );
+
   @include component-reset.reset;
   @include type-style('body-compact-01');
 
@@ -26,16 +34,23 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   display: inline-flex;
   width: max-content;
   max-width: rem(320px);
-  min-height: $button-height;
+  height: layout.size('height');
   flex-shrink: 0;
-  align-items: center;
   justify-content: space-between;
-  padding: $button-padding;
   // Fix to remove added margins on buttons in safari (see #5155)
   margin: 0;
   border-radius: $button-border-radius;
   cursor: pointer;
   outline: none;
+  // -1px to compensate for border width
+  padding-block-start: min(
+    calc((layout.size('height') - var(--temp-1lh)) / 2 - rem(1px)),
+    var(--temp-padding-block-max)
+  );
+  padding-inline-end: calc(
+    layout.density('padding-inline') * 3 + rem(16px) - rem(1px)
+  );
+  padding-inline-start: calc(layout.density('padding-inline') - rem(1px));
   text-align: left;
   text-decoration: none;
   transition: background $duration-fast-01 motion(entrance, productive),
@@ -59,10 +74,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
   .#{$prefix}--btn__icon {
     position: absolute;
-    right: rem(16px);
+    // -1px to compensate for border width
+    top: min(
+      calc((layout.size('height') - rem(16px)) / 2 - rem(1px)),
+      var(--temp-padding-block-max)
+    );
+    right: layout.density('padding-inline');
     width: rem(16px);
     height: rem(16px);
     flex-shrink: 0;
+    margin-block-start: rem(1px);
   }
 }
 

package/scss/components/code-snippet/_code-snippet.scss

@@ -265,13 +265,15 @@ $copy-btn-feedback: $background-inverse !default;
     transition: all $duration-fast-01 motion(standard, productive);
   }
 
+  .#{$prefix}--btn > .#{$prefix}--snippet__icon {
+    margin-block-start: 0;
+  }
+
   .#{$prefix}--copy-btn {
     @include reset;
 
     display: flex;
     overflow: visible;
-    width: $spacing-08;
-    height: $spacing-08;
     align-items: center;
     justify-content: center;
     padding: 0;
@@ -298,17 +300,14 @@ $copy-btn-feedback: $background-inverse !default;
 
   // Overrides for codesnippet copy btn
   // TLDR: Copy/CopyButton now uses IconButton, which uses Carbon buttons under the hood
-  // v10 opy just used native html button so it didn't have extra carbon styles that needed overriding
-  .#{$prefix}--snippet--inline.#{$prefix}--btn--md.#{$prefix}--btn--icon-only {
-    padding-right: 0;
-    padding-left: 0;
+  // v10 Copy just used native html button so it didn't have extra carbon styles that needed overriding
+  .#{$prefix}--snippet--inline.#{$prefix}--btn {
+    width: initial;
+    height: 1.25rem;
+    padding-inline: 0;
   }
 
-  .#{$prefix}--snippet--inline.#{$prefix}--btn--md {
-    min-height: 1.25rem;
-  }
-
-  .#{$prefix}--snippet--inline.#{$prefix}--btn--primary:hover {
+  .#{$prefix}--snippet--inline.#{$prefix}--btn.#{$prefix}--btn--primary:hover {
     color: $text-primary;
   }
 
@@ -319,12 +318,8 @@ $copy-btn-feedback: $background-inverse !default;
     right: 0.5rem;
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn.#{$prefix}--btn--md {
+  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
     z-index: 10;
-    width: $spacing-07;
-    height: $spacing-07;
-    min-height: $spacing-07;
-    padding: 0;
   }
 
   // Show more / less button

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

@@ -12,21 +12,27 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/button-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/button-reset';
+@use '../../utilities/layout';
 
 /// Contained List styles
 /// @access public
 /// @group contained-list
 @mixin contained-list {
+  .#{$prefix}--contained-list {
+    @include layout.use('size', $default: 'lg', $min: 'sm', $max: 'xl');
+    @include layout.use('density', $default: 'normal');
+  }
+
   .#{$prefix}--contained-list__header {
     position: sticky;
     z-index: 1;
     top: 0;
     display: flex;
     align-items: center;
-    padding-inline: $spacing-05;
+    padding-inline: layout.density('padding-inline');
   }
 
   .#{$prefix}--contained-list__label {
@@ -36,7 +42,7 @@
   .#{$prefix}--contained-list .#{$prefix}--search {
     position: sticky;
     z-index: 1;
-    top: 48px;
+    top: layout.size('height');
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input {
       background-color: $field;
@@ -79,35 +85,6 @@
     outline: none;
   }
 
-  // Sizes
-
-  $sizes: (
-    // size: (height, item-block-padding)
-    'sm': (rem(32px), $spacing-03),
-    'md': (rem(40px), $spacing-04),
-    'lg': (rem(48px), $spacing-05),
-    'xl': (rem(64px), $spacing-06)
-  );
-
-  @each $size, $definition in $sizes {
-    $height: list.nth($definition, 1);
-    $item-block-padding: list.nth($definition, 2);
-
-    .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--#{$size}
-      .#{$prefix}--contained-list__header {
-      height: $height;
-    }
-
-    .#{$prefix}--contained-list--#{$size}
-      .#{$prefix}--contained-list-item__content,
-    .#{$prefix}--contained-list--#{$size}
-      .#{$prefix}--contained-list-item--clickable
-      .#{$prefix}--contained-list-item__content {
-      min-height: $height;
-      padding: calc(#{$item-block-padding} - #{rem(2px)}) $spacing-05;
-    }
-  }
-
   // "On Page" variant
 
   .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
@@ -117,6 +94,7 @@
   .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
     @include type-style('heading-compact-01');
 
+    height: layout.size('height');
     border-bottom: 1px solid $border-subtle;
     background-color: $background;
     color: $text-primary;
@@ -166,8 +144,14 @@
   .#{$prefix}--contained-list-item__content,
   .#{$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);
+
     @include type-style('body-01');
 
+    min-height: layout.size('height');
+    padding: calc(calc((#{layout.size('height')} - var(--temp-1lh)) / 2))
+      layout.density('padding-inline');
     color: $text-primary;
   }
 
@@ -183,8 +167,8 @@
 
   .#{$prefix}--contained-list--inset-rulers
     .#{$prefix}--contained-list-item:not(:last-of-type)::before {
-    right: $spacing-05;
-    left: $spacing-05;
+    right: layout.density('padding-inline');
+    left: layout.density('padding-inline');
   }
 
   .#{$prefix}--contained-list-item--clickable

package/scss/components/content-switcher/_content-switcher.scss

@@ -13,23 +13,19 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/layout';
 
 @mixin content-switcher {
   .#{$prefix}--content-switcher {
+    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
+    @include layout.use('density', $default: 'normal');
+
     display: flex;
     width: 100%;
-    height: rem(40px);
+    height: layout.size('height');
     justify-content: space-evenly;
   }
 
-  .#{$prefix}--content-switcher--sm {
-    height: rem(32px);
-  }
-
-  .#{$prefix}--content-switcher--lg {
-    height: rem(48px);
-  }
-
   .#{$prefix}--content-switcher-btn {
     @include reset;
     @include font-family('sans');
@@ -39,9 +35,6 @@
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    width: 100%;
-    align-items: center;
-    padding: $spacing-03 $spacing-05;
     border: none;
     border-top: rem(1px) solid $border-inverse;
     border-bottom: rem(1px) solid $border-inverse;
@@ -113,6 +106,13 @@
     }
   }
 
+  .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
+    .#{$prefix}--content-switcher-btn {
+    width: 100%;
+    align-items: center;
+    padding: $spacing-03 layout.density('padding-inline');
+  }
+
   .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
     .#{$prefix}--content-switcher-btn:first-child {
     border-left: rem(1px) solid $border-inverse;

package/scss/components/copy-button/_copy-button.scss

@@ -23,8 +23,6 @@
 
     position: relative;
     display: flex;
-    width: $spacing-08;
-    height: $spacing-08;
     align-items: center;
     justify-content: center;
     padding: 0;