@carbon/styles 1.105.0 → 1.106.0

package/scss/components/search/_search.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -22,16 +22,31 @@
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/convert';
 @use '../../utilities/button-reset';
+@use '../../utilities/layout';
 
 /// Search styles
 /// @access public
 /// @group search
 @mixin search {
   .#{$prefix}--search {
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
+
     position: relative;
     display: flex;
     align-items: center;
     inline-size: 100%;
+
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button {
+      block-size: layout.size('height');
+      inline-size: layout.size('height');
+    }
+
+    &.#{$prefix}--search--expandable,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
+      block-size: layout.size('height');
+      inline-size: layout.size('height');
+    }
   }
 
   .#{$prefix}--search .#{$prefix}--label {
@@ -39,15 +54,18 @@
   }
 
   .#{$prefix}--search-input {
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
+    @include layout.use('density', $default: 'normal');
     @include reset;
     @include type.type-style('body-compact-01');
     @include focus-outline('reset');
 
     order: 1;
-    padding: 0 $spacing-08;
+    padding: 0 layout.size('height');
     border: none;
     appearance: none;
     background-color: $field;
+    block-size: layout.size('height');
     border-block-end: 1px solid $border-strong;
     color: $text-primary;
 
@@ -97,42 +115,8 @@
     background: $field-02;
   }
 
-  // Small styles
-  .#{$prefix}--search--sm .#{$prefix}--search-input,
-  .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
-    .#{$prefix}--search-input {
-    // 8px padding on either side of icon + 16px icon (32px)
-    padding: 0 $spacing-07;
-    block-size: convert.to-rem(32px);
-  }
-
-  .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon {
-    inset-inline-start: convert.to-rem(8px);
-  }
-
-  // Medium styles
-  .#{$prefix}--search--md .#{$prefix}--search-input,
-  .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded
-    .#{$prefix}--search-input {
-    // 12px padding on either side of icon + 16px icon (40px)
-    padding: 0 $spacing-08;
-    block-size: convert.to-rem(40px);
-  }
-
-  .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
-    inset-inline-start: convert.to-rem(12px);
-  }
-
-  // Large styles
-  .#{$prefix}--search--lg .#{$prefix}--search-input,
-  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
-    .#{$prefix}--search-input {
-    // 16px padding on either side of icon + 16px icon (48px)
-    padding: 0 $spacing-09;
-    block-size: convert.to-rem(48px);
-  }
-
   .#{$prefix}--search-magnifier-icon {
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
     @include reset;
 
     position: absolute;
@@ -141,7 +125,7 @@
     fill: $icon-secondary;
     inline-size: convert.to-rem(16px);
     inset-block-start: 50%;
-    inset-inline-start: $spacing-05;
+    inset-inline-start: calc((layout.size('height') - 1rem) / 2);
     pointer-events: none;
     transform: translateY(-50%);
   }
@@ -179,16 +163,18 @@
 
   .#{$prefix}--search-close,
   .#{$prefix}--search-button {
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
+
     display: flex;
     align-items: center;
     justify-content: center;
     border-width: 0 0 1px;
     border-style: solid;
     border-color: transparent;
-    block-size: convert.to-rem(40px);
+    block-size: layout.size('height');
     cursor: pointer;
     fill: $icon-primary;
-    inline-size: convert.to-rem(40px);
+    inline-size: layout.size('height');
     opacity: 1;
     visibility: inherit;
 
@@ -243,59 +229,12 @@
     fill: $icon-on-color-disabled;
   }
 
-  // Small
-  .#{$prefix}--search--sm {
-    .#{$prefix}--search-close,
-    ~ .#{$prefix}--search-button,
-    &.#{$prefix}--search--expandable,
-    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      block-size: convert.to-rem(32px);
-      inline-size: convert.to-rem(32px);
-    }
-
-    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
-      padding: 0 convert.to-rem(32px);
-    }
-  }
-
-  // Medium
-  .#{$prefix}--search--md {
-    .#{$prefix}--search-close,
-    ~ .#{$prefix}--search-button,
-    &.#{$prefix}--search--expandable,
-    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      block-size: convert.to-rem(40px);
-      inline-size: convert.to-rem(40px);
-    }
-
-    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
-      padding: 0 convert.to-rem(40px);
-    }
-  }
-
-  // Large
-  .#{$prefix}--search--lg {
-    .#{$prefix}--search-close,
-    ~ .#{$prefix}--search-button,
-    &.#{$prefix}--search--expandable,
-    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      block-size: convert.to-rem(48px);
-      inline-size: convert.to-rem(48px);
-    }
-
-    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
-      padding: 0 convert.to-rem(48px);
-    }
-  }
-
   .#{$prefix}--search-close--hidden {
     opacity: 0;
     visibility: hidden;
   }
 
-  .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
-  .#{$prefix}--search--md.#{$prefix}--skeleton .#{$prefix}--search-input,
-  .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
+  .#{$prefix}--skeleton .#{$prefix}--search-input {
     @include skeleton;
 
     inline-size: 100%;
@@ -329,6 +268,7 @@
 
   .#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
+    padding: 0 layout.size('height');
     inline-size: 100%;
     transition: padding $duration-fast-01 motion(standard, productive);
 

package/scss/components/select/_select.scss

@@ -17,6 +17,7 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
+@use '../../utilities/layout';
 @use '../../utilities/skeleton' as *;
 
 /// Select styles
@@ -25,6 +26,7 @@
 @mixin select {
   .#{$prefix}--select {
     @include component-reset.reset;
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
 
     position: relative;
     display: flex;
@@ -43,13 +45,15 @@
   .#{$prefix}--select-input {
     @include type-style('body-compact-01');
     @include focus-outline('reset');
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
+    @include layout.use('density', $default: 'normal');
 
     display: block;
     border: none;
     border-radius: 0;
     appearance: none;
     background-color: $field;
-    block-size: convert.to-rem(40px);
+    block-size: layout.size('height');
     border-block-end: 1px solid $border-strong;
     color: $text-primary;
     cursor: pointer;
@@ -102,16 +106,6 @@
     }
   }
 
-  .#{$prefix}--select-input--sm {
-    block-size: convert.to-rem(32px);
-    max-block-size: convert.to-rem(32px);
-  }
-
-  .#{$prefix}--select-input--lg {
-    block-size: convert.to-rem(48px);
-    max-block-size: convert.to-rem(48px);
-  }
-
   .#{$prefix}--select--disabled .#{$prefix}--label,
   .#{$prefix}--select--disabled .#{$prefix}--form__helper-text {
     color: $text-disabled;
@@ -370,6 +364,21 @@
     inset-inline-end: -($divider-width);
   }
 
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select-input__wrapper
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon,
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon,
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input__wrapper
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
+    inset-inline-end: $spacing-11;
+  }
+
   .#{$prefix}--select--decorator
     .#{$prefix}--select-input:has(
       ~ .#{$prefix}--select__inner-wrapper--decorator
@@ -421,19 +430,4 @@
     .#{$prefix}--slug::before {
     display: block;
   }
-
-  .#{$prefix}--select--decorator
-    .#{$prefix}--select-input__wrapper
-    .#{$prefix}--select-input
-    ~ .#{$prefix}--select__invalid-icon,
-  .#{$prefix}--select--slug
-    .#{$prefix}--select-input__wrapper[data-invalid]
-    .#{$prefix}--select-input
-    ~ .#{$prefix}--select__invalid-icon,
-  .#{$prefix}--select--slug
-    .#{$prefix}--select-input__wrapper
-    .#{$prefix}--select-input
-    ~ .#{$prefix}--select__invalid-icon {
-    inset-inline-end: $spacing-11;
-  }
 }

package/scss/components/slug/_slug.scss

@@ -13,6 +13,7 @@
 @use '../../type' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
+@use '../../utilities/custom-property';
 @use '../toggletip';
 @use '../popover';
 
@@ -1061,6 +1062,13 @@ $sizes: (
     // This sets the max size to the size of the action bar with 3 buttons
     padding-block: convert.to-rem(24px) convert.to-rem(80px);
     padding-inline: convert.to-rem(24px);
+
+    // Reset the custom properties of the link styles to initial for AI-label and slug. as the AI-label uses gradient backgrounds.
+    @include custom-property.declaration('button-focus-color', initial);
+    @include custom-property.declaration('link-text-color', initial);
+    @include custom-property.declaration('link-hover-text-color', initial);
+    @include custom-property.declaration('link-visited-text-color', initial);
+    @include custom-property.declaration('link-focus-text-color', initial);
   }
 
   .#{$prefix}--ai-label

package/scss/components/tabs/_tabs.scss

@@ -517,7 +517,7 @@
 
     &.#{$prefix}--tabs--vertical:not(.#{$prefix}--tabs--tall)
       .#{$prefix}--tabs__nav-item-label {
-      line-height: var(--cds-body-compact-01-line-height);
+      line-height: custom-property.get-var('body-compact-01-line-height');
     }
 
     //-----------------------------

package/scss/components/text-input/_text-input.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2025
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -31,7 +31,7 @@
 /// @group text-input
 @mixin text-input {
   .#{$prefix}--text-input {
-    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
     @include layout.use('density', $default: 'normal');
     @include component-reset.reset;
     @include type-style('body-compact-01');
@@ -61,15 +61,7 @@
   }
 
   .#{$prefix}--password-input {
-    padding-inline-end: $spacing-08;
-  }
-
-  .#{$prefix}--text-input--sm.#{$prefix}--password-input {
-    padding-inline-end: $spacing-07;
-  }
-
-  .#{$prefix}--text-input--lg.#{$prefix}--password-input {
-    padding-inline-end: $spacing-09;
+    padding-inline-end: layout.size('height');
   }
 
   .#{$prefix}--text-input::placeholder {
@@ -123,33 +115,26 @@
     justify-content: center;
     padding: 0;
     border: 0;
+    aspect-ratio: 1;
     background: none;
     block-size: 100%;
     cursor: pointer;
-    inline-size: convert.to-rem(40px);
     inset-inline-end: 0;
     min-block-size: auto;
     transition: outline $duration-fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--toggle-password-tooltip .#{$prefix}--popover {
-    inset-inline-start: -($spacing-08);
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
+
+    gap: $spacing-02;
+    inset-inline-start: calc(-1 * (layout.size('height')));
   }
 
   .#{$prefix}--toggle-password-tooltip .#{$prefix}--popover-content {
     min-inline-size: $spacing-08;
   }
 
-  .#{$prefix}--text-input--sm
-    + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    inline-size: convert.to-rem(32px);
-  }
-
-  .#{$prefix}--text-input--lg
-    + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    inline-size: convert.to-rem(48px);
-  }
-
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg {
     fill: $icon-primary;
@@ -164,17 +149,15 @@
     padding-inline-end: $spacing-08;
   }
 
-  .#{$prefix}--text-input--invalid.#{$prefix}--password-input {
-    padding-inline-end: convert.to-rem(64px);
-  }
-
-  .#{$prefix}--text-input--invalid
-    + .#{$prefix}--text-input--password__visibility__toggle {
-    inset-inline-end: $spacing-05;
+  .#{$prefix}--text-input--invalid.#{$prefix}--password-input,
+  .#{$prefix}--text-input--warning.#{$prefix}--password-input {
+    padding-inline-end: calc(layout.size('height') + 1.5rem);
   }
 
   .#{$prefix}--password-input-wrapper .#{$prefix}--text-input__invalid-icon {
-    inset-inline-end: $spacing-08;
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
+
+    inset-inline-end: layout.size('height');
   }
 
   .#{$prefix}--text-input:disabled
@@ -251,10 +234,6 @@
     @include focus-outline('invalid');
 
     box-shadow: none;
-
-    .#{$prefix}--text-input--password__visibility__toggle {
-      inset-inline-end: $spacing-08;
-    }
   }
 
   //-----------------------------
@@ -363,36 +342,43 @@
   //-----------------------------
 
   .#{$prefix}--text-input-wrapper.#{$prefix}--text-input-wrapper--inline {
-    flex-flow: row wrap;
+    flex-flow: row nowrap;
+    align-items: center;
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline {
-    flex: 1;
-    margin: convert.to-rem(13px) 0 0 0;
+    flex: 0 1 auto;
+    margin: 0;
     overflow-wrap: break-word;
     word-break: break-word;
   }
 
-  .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--sm {
-    margin-block-start: convert.to-rem(9px);
-  }
-
-  .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--lg {
-    margin-block-start: convert.to-rem(17px);
-  }
-
   .#{$prefix}--text-input__label-helper-wrapper {
-    flex: 2;
+    flex: 0 1 auto;
     flex-direction: column;
-    margin-inline-end: convert.to-rem(24px);
-    max-inline-size: convert.to-rem(128px);
+    max-inline-size: convert.to-rem(142px);
     overflow-wrap: break-word;
+
+    &:first-of-type {
+      margin-inline-end: $spacing-03;
+    }
+
+    &:last-of-type {
+      margin-inline-start: $spacing-03;
+    }
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--form__helper-text--inline {
     margin-block-start: convert.to-rem(2px);
   }
 
+  .#{$prefix}--text-input-wrapper--inline {
+    .#{$prefix}--form__helper-text--inline,
+    .#{$prefix}--form-requirement {
+      margin: 0;
+    }
+  }
+
   .#{$prefix}--text-input__field-outer-wrapper {
     display: flex;
     flex: 1 1 auto;
@@ -460,15 +446,18 @@
     ) {
     @include ai-gradient;
   }
-
   .#{$prefix}--text-input__field-wrapper--decorator
-    .#{$prefix}--text-input:has(
-      ~ .#{$prefix}--text-input__field-inner-wrapper--decorator > *
-    ),
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--invalid):not(
+      .#{$prefix}--text-input--warning
+    ):has(~ .#{$prefix}--text-input__field-inner-wrapper--decorator > *),
   .#{$prefix}--text-input__field-wrapper--slug
-    .#{$prefix}--text-input:has(~ .#{$prefix}--ai-label),
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--invalid):not(
+      .#{$prefix}--text-input--warning
+    ):has(~ .#{$prefix}--ai-label),
   .#{$prefix}--text-input__field-wrapper--slug
-    .#{$prefix}--text-input:has(~ .#{$prefix}--slug) {
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--invalid):not(
+      .#{$prefix}--text-input--warning
+    ):has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-08;
   }
 
@@ -485,17 +474,25 @@
     padding-inline-end: $spacing-10;
   }
 
-  .#{$prefix}--text-input--invalid
-    ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
-    > *,
-  .#{$prefix}--text-input--warning
-    ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
-    > *,
-  .#{$prefix}--text-input--invalid ~ .#{$prefix}--ai-label,
-  .#{$prefix}--text-input--warning ~ .#{$prefix}--ai-label,
-  .#{$prefix}--text-input--invalid ~ .#{$prefix}--slug,
-  .#{$prefix}--text-input--warning ~ .#{$prefix}--slug {
-    inset-inline-end: $spacing-08;
+  .#{$prefix}--text-input__field-wrapper--decorator,
+  .#{$prefix}--text-input__field-wrapper--slug {
+    .#{$prefix}--text-input--invalid ~ .#{$prefix}--text-input__invalid-icon,
+    .#{$prefix}--text-input--warning ~ .#{$prefix}--text-input__invalid-icon {
+      inset-inline-end: $spacing-08;
+    }
+
+    .#{$prefix}--text-input--invalid
+      ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+      > *,
+    .#{$prefix}--text-input--warning
+      ~ .#{$prefix}--text-input__field-inner-wrapper--decorator
+      > *,
+    .#{$prefix}--text-input--invalid ~ .#{$prefix}--ai-label,
+    .#{$prefix}--text-input--warning ~ .#{$prefix}--ai-label,
+    .#{$prefix}--text-input--invalid ~ .#{$prefix}--slug,
+    .#{$prefix}--text-input--warning ~ .#{$prefix}--slug {
+      inset-inline-end: $spacing-05;
+    }
   }
 
   // Decorator