@carbon/styles 1.96.0 → 1.97.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.96.0",
+  "version": "1.97.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.43.0",
+    "@carbon/colors": "^11.44.0",
     "@carbon/feature-flags": ">=0.32.0",
-    "@carbon/grid": "^11.46.0",
-    "@carbon/layout": "^11.44.0",
-    "@carbon/motion": "^11.38.0",
-    "@carbon/themes": "^11.64.0",
-    "@carbon/type": "^11.50.0",
+    "@carbon/grid": "^11.47.0",
+    "@carbon/layout": "^11.45.0",
+    "@carbon/motion": "^11.39.0",
+    "@carbon/themes": "^11.65.0",
+    "@carbon/type": "^11.51.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4a42de3036ca693bf2c6477e917824982fafd7af"
+  "gitHead": "57fdbc7bfad9349b5c4359c7d621e709cd4daa25"
 }

package/scss/__tests__/theme-test.js

@@ -131,6 +131,47 @@ describe('@carbon/styles/scss/theme', () => {
         "support-caution-major",
         "support-caution-minor",
         "support-caution-undefined",
+        "syntax-comment",
+        "syntax-line-comment",
+        "syntax-block-comment",
+        "syntax-doc-comment",
+        "syntax-doc-string",
+        "syntax-keyword",
+        "syntax-operator-keyword",
+        "syntax-control-keyword",
+        "syntax-definition-keyword",
+        "syntax-module-keyword",
+        "syntax-variable",
+        "syntax-name",
+        "syntax-variable-name",
+        "syntax-label-name",
+        "syntax-attribute",
+        "syntax-attribute-name",
+        "syntax-property-name",
+        "syntax-tag",
+        "syntax-tag-name",
+        "syntax-type",
+        "syntax-type-name",
+        "syntax-class-name",
+        "syntax-namespace",
+        "syntax-macro-name",
+        "syntax-atom",
+        "syntax-literal",
+        "syntax-bool",
+        "syntax-null",
+        "syntax-self",
+        "syntax-number",
+        "syntax-integer",
+        "syntax-float",
+        "syntax-unit",
+        "syntax-string",
+        "syntax-character",
+        "syntax-attribute-value",
+        "syntax-special-string",
+        "syntax-regexp",
+        "syntax-escape",
+        "syntax-url",
+        "syntax-color",
         "ai-popover-background",
         "ai-popover-shadow-outer-01",
         "ai-popover-shadow-outer-02",
@@ -155,14 +196,18 @@ describe('@carbon/styles/scss/theme', () => {
         "chat-prompt-background",
         "chat-prompt-border-start",
         "chat-prompt-border-end",
+        "chat-prompt-text",
         "chat-bubble-user",
+        "chat-bubble-user-text",
         "chat-bubble-agent",
+        "chat-bubble-agent-text",
         "chat-bubble-border",
         "chat-avatar-bot",
         "chat-avatar-agent",
         "chat-avatar-user",
         "chat-shell-background",
         "chat-header-background",
+        "chat-header-text",
         "chat-button",
         "chat-button-hover",
         "chat-button-text-hover",

package/scss/components/button/_button.scss

@@ -1,10 +1,11 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2024
 //
 // 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:math';
 @use 'tokens' as *;
 @use 'vars' as *;
 @use 'mixins' as *;
@@ -21,6 +22,93 @@
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/layout';
 
+@function has-n-children($n) {
+  // Uses nth-child() to select the nth child, and :last-child to ensure that
+  // the selector only matches the last child of its parent.
+  @return ':has(:nth-child(#{$n}):last-child)';
+}
+
+@mixin button-set-fluid-column() {
+  --flex-direction: column;
+
+  .#{$prefix}--btn {
+    flex: initial;
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+
+  .#{$prefix}--btn--ghost {
+    padding-inline-start: $spacing-05;
+  }
+}
+
+@mixin button-set-fluid-layout() {
+  container-type: inline-size;
+
+  .#{$prefix}--btn-set__fluid-inner {
+    --flex-direction: row;
+
+    display: flex;
+    flex-direction: var(--flex-direction);
+    align-items: stretch;
+    justify-content: flex-end;
+    inline-size: 100%;
+  }
+
+  // NOTE: Container queries are based on this value which is based on IBM Products implementation
+  // Side panel has up to 3 buttons unstacked from size lg (640px). Min 160.33px/button
+  // Narrow Tearsheet 540px has 4 buttons unstacked buttons. Min 135px/button
+  // May need to be configurable as 3 * 135px is less than 640px.
+  // Current value 176px only supports up to 3 buttons at 540px.
+  $min-inline-button-size: convert.to-rem(176px);
+
+  .#{$prefix}--btn-set__fluid-inner .#{$prefix}--btn {
+    // default non-column layout
+    flex: 0 1 25%;
+
+    // This increased size comes from use in IBM Products Tearsheet and SidePanel
+    max-inline-size: convert.to-rem(232px);
+  }
+
+  .#{$prefix}--btn-set__fluid-inner--auto-stack .#{$prefix}--btn {
+    min-inline-size: $min-inline-button-size;
+  }
+
+  .#{$prefix}--btn-set__fluid-inner .#{$prefix}--btn--ghost,
+  .#{$prefix}--btn-set__fluid-inner .#{$prefix}--btn--danger--ghost {
+    // ghost buttons always grow to fill the container
+    flex: 1 1 25%;
+    max-inline-size: none;
+    padding-inline-start: $spacing-07; /* increased padding when inline */
+  }
+
+  $max-fluid-buttons: 4;
+  // this determines whether or not column is used
+  @for $i from 1 through $max-fluid-buttons {
+    @container (width <= #{$i * $min-inline-button-size}) {
+      .#{$prefix}--btn-set__fluid-inner--auto-stack#{has-n-children($i)} {
+        @include button-set-fluid-column();
+      }
+    }
+  }
+
+  @container (width <= #{4 * $min-inline-button-size}) {
+    .#{$prefix}--btn-set__fluid-inner#{has-n-children(2)} {
+      .#{$prefix}--btn {
+        flex-basis: 50%;
+        max-inline-size: none;
+      }
+    }
+  }
+
+  @container (width <= #{3 * $min-inline-button-size}) {
+    .#{$prefix}--btn-set__fluid-inner#{has-n-children(1)} .#{$prefix}--btn {
+      flex: 1 1 100%;
+      max-inline-size: none;
+    }
+  }
+}
+
 @mixin button {
   .#{$prefix}--btn {
     @include layout.use('size', $min: 'xs', $default: 'lg', $max: '2xl');
@@ -426,4 +514,8 @@
   [dir='rtl'] .#{$prefix}--btn-set .#{$prefix}--btn:not(:focus) {
     box-shadow: convert.to-rem(1px) 0 0 0 $button-separator;
   }
+
+  .#{$prefix}--btn-set--fluid {
+    @include button-set-fluid-layout();
+  }
 }

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

@@ -91,6 +91,15 @@
     padding-inline: $spacing-05;
   }
 
+  .#{$prefix}--data-table-header.#{$prefix}--data-table-header__with-decorator {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .#{$prefix}--data-table-header.#{$prefix}--data-table-header__with-decorator.#{$prefix}--data-table-header__with-decorator--standalone {
+    justify-content: flex-end;
+  }
+
   .#{$prefix}--data-table-header__title {
     @include type-style('heading-03');
 

package/scss/components/file-uploader/_file-uploader.scss

@@ -290,7 +290,7 @@
     .#{$prefix}--form-requirement__title,
   .#{$prefix}--file__selected-file--invalid
     .#{$prefix}--form-requirement__supplement {
-    @include type-style('label-01');
+    @include type-style('helper-text-01');
 
     padding: 0 $spacing-05;
   }
@@ -307,7 +307,7 @@
 
   // TODO: deprecate
   .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
-    @include type-style('label-01');
+    @include type-style('helper-text-01');
 
     display: block;
     overflow: visible;

package/scss/components/form/_form.scss

@@ -217,7 +217,7 @@ $input-label-weight: 400 !default;
 
   .#{$prefix}--form-requirement {
     @include reset;
-    @include type-style('label-01');
+    @include type-style('helper-text-01');
 
     display: none;
     overflow: hidden;

package/scss/components/link/_link.scss

@@ -84,10 +84,12 @@ $link-focus-text-color: custom-property.get-var(
     text-decoration: none;
   }
 
+  .#{$prefix}--link.#{$prefix}--link--visited,
   .#{$prefix}--link.#{$prefix}--link--visited:visited {
     color: $link-visited-text-color;
   }
 
+  .#{$prefix}--link.#{$prefix}--link--visited:hover,
   .#{$prefix}--link.#{$prefix}--link--visited:visited:hover {
     color: $link-hover-text-color;
   }

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

@@ -885,8 +885,6 @@ $list-box-menu-width: convert.to-rem(300px);
   // When handling input, we need to target nodes that specifically opt-in to
   // the type text in order to make sure the text input is styled
   // correctly.
-  // TODO: remove [role='combobox'] in v11
-  .#{$prefix}--list-box input[role='combobox'],
   .#{$prefix}--list-box input[type='text'] {
     background-color: inherit;
     min-inline-size: 0;

package/scss/components/multiselect/_multiselect.scss

@@ -18,6 +18,10 @@
 /// @access public
 /// @group multi-select
 @mixin multiselect {
+  .#{$prefix}--multi-select {
+    box-sizing: border-box;
+  }
+
   .#{$prefix}--multi-select .#{$prefix}--list-box__field--wrapper {
     display: inline-flex;
     align-items: center;

package/scss/components/pagination/_pagination.scss

@@ -303,4 +303,13 @@
   [dir='rtl'] .#{$prefix}--pagination .#{$prefix}--select__arrow {
     transform: translate(0.5rem, -50%);
   }
+  // Override for disabled select inputs to maintain layer background color
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input[disabled],
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input[disabled]:hover {
+    background-color: $layer;
+  }
 }

package/scss/utilities/_button-reset.scss

@@ -12,8 +12,6 @@
 /// @example @include button-reset($width: false);
 /// @group utilities
 @mixin reset($width: true) {
-  @include component-reset.reset;
-
   display: inline-block;
   padding: 0;
   border: 0;
@@ -26,6 +24,8 @@
     inline-size: 100%;
   }
 
+  @include component-reset.reset;
+
   &::-moz-focus-inner {
     border: 0;
   }