@carbon/styles 1.96.0 → 1.98.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.96.0",
+  "version": "1.98.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.43.0",
+    "@carbon/colors": "^11.45.0-rc.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.48.0-rc.0",
+    "@carbon/layout": "^11.46.0-rc.0",
+    "@carbon/motion": "^11.39.0",
+    "@carbon/themes": "^11.66.0-rc.0",
+    "@carbon/type": "^11.52.0-rc.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -59,7 +59,7 @@
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.38.0",
+    "@carbon/test-utils": "^10.39.0-rc.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4a42de3036ca693bf2c6477e917824982fafd7af"
+  "gitHead": "8263c72357fc43c00e66c9030698f759ef7977ce"
 }

package/scss/__tests__/theme-test.js

@@ -131,6 +131,92 @@ 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",
+        "syntax-operator",
+        "syntax-deref-operator",
+        "syntax-arithmetic-operator",
+        "syntax-logic-operator",
+        "syntax-bitwise-operator",
+        "syntax-compare-operator",
+        "syntax-update-operator",
+        "syntax-definition-operator",
+        "syntax-type-operator",
+        "syntax-control-operator",
+        "syntax-modifier",
+        "syntax-punctuation",
+        "syntax-separator",
+        "syntax-bracket",
+        "syntax-angle-bracket",
+        "syntax-square-bracket",
+        "syntax-paren",
+        "syntax-brace",
+        "syntax-content",
+        "syntax-heading",
+        "syntax-heading-1",
+        "syntax-heading-2",
+        "syntax-heading-3",
+        "syntax-heading-4",
+        "syntax-heading-5",
+        "syntax-heading-6",
+        "syntax-content-separator",
+        "syntax-list",
+        "syntax-quote",
+        "syntax-emphasis",
+        "syntax-strong",
+        "syntax-monospace",
+        "syntax-link",
+        "syntax-strikethrough",
+        "syntax-invalid",
+        "syntax-meta",
+        "syntax-document-meta",
+        "syntax-annotation",
+        "syntax-processing-instruction",
+        "syntax-definition",
+        "syntax-constant",
+        "syntax-function",
+        "syntax-standard",
+        "syntax-local",
+        "syntax-special",
         "ai-popover-background",
         "ai-popover-shadow-outer-01",
         "ai-popover-shadow-outer-02",
@@ -155,14 +241,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/fluid-list-box/_fluid-list-box.scss

@@ -186,6 +186,14 @@
     border-block-end: 1px solid $border-strong;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--form-requirement:empty,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    ~ .#{$prefix}--form-requirement:empty {
+    block-size: convert.to-rem(32px);
+  }
+
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__invalid-icon,
@@ -428,7 +436,7 @@
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--dropdown)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: $spacing-04;
+    inset-inline-end: $spacing-05;
   }
 
   // remove ai-label divider when element is invalid and fluid

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -49,6 +49,11 @@
       inset-inline-start: auto;
     }
   }
+  .#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper--readonly
+    .#{$prefix}--text-input__field-wrapper
+    .#{$prefix}--text-input {
+    color: $text-secondary;
+  }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,
   .#{$prefix}--text-input--fluid

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

@@ -533,6 +533,11 @@ $list-box-menu-width: convert.to-rem(300px);
     }
   }
 
+  // Allow auto-alignment to control inline placement
+  .#{$prefix}--autoalign .#{$prefix}--list-box__menu {
+    inset-inline: auto;
+  }
+
   .#{$prefix}--list-box .#{$prefix}--list-box__field[aria-expanded='false'] {
     .#{$prefix}--list-box__menu {
       display: none;
@@ -885,9 +890,7 @@ $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'] {
+  .#{$prefix}--list-box .#{$prefix}--text-input {
     background-color: inherit;
     min-inline-size: 0;
     text-overflow: ellipsis;

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/components/text-input/_text-input.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -152,21 +152,13 @@
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg {
-    fill: $icon-secondary;
-    transition: fill $duration-fast-01 motion(standard, productive);
+    fill: $icon-primary;
   }
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
-    svg,
-  .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
-    svg {
-    fill: $icon-primary;
-  }
-
   .#{$prefix}--text-input--invalid,
   .#{$prefix}--text-input--warning {
     padding-inline-end: $spacing-08;

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

package/scss/utilities/_tooltip.scss

@@ -37,7 +37,7 @@
 
   z-index: z('floating');
   padding: if(
-    $tooltip-type == 'definition',
+    sass($tooltip-type == 'definition'),
     convert.to-rem(8px) convert.to-rem(16px),
     convert.to-rem(3px) convert.to-rem(16px)
   );
@@ -234,7 +234,7 @@
 ) {
   // position and alignment
   $caret-spacing: if(
-    $tooltip-type == 'definition',
+    sass($tooltip-type == 'definition'),
     convert.to-rem(4px),
     convert.to-rem(8px)
   );