@carbon/styles 1.114.0 → 1.115.0

package/scss/components/date-picker/_date-picker-next.scss

@@ -11,6 +11,8 @@
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/skeleton' as *;
+@use '../../feature-flags' as *;
+@use '../../border-radius' as *;
 
 /// Shared v12 date-picker rules for both React and Web Components. Each one
 /// scopes them differently so they don't clash with the v11 date picker:
@@ -132,6 +134,10 @@
     inset-block-start: 100%;
     inset-inline-start: 0;
     margin-block-start: 0;
+
+    @if enabled('enable-v12-release') {
+      margin-block-start: $spacing-02;
+    }
   }
 
   // DATE PICKER INPUT STYLES
@@ -183,6 +189,24 @@
   // Range date picker sizing
   .#{$prefix}--date-picker-container--from {
     margin-inline-end: rem(1px);
+
+    @if enabled('enable-v12-release') {
+      .#{$prefix}--date-picker__input {
+        border-end-end-radius: $border-radius-00;
+        border-inline-end: none;
+        border-start-end-radius: $border-radius-00;
+      }
+    }
+  }
+
+  .#{$prefix}--date-picker-container--to {
+    @if enabled('enable-v12-release') {
+      .#{$prefix}--date-picker__input {
+        border-end-start-radius: $border-radius-00;
+        border-inline-start: none;
+        border-start-start-radius: $border-radius-00;
+      }
+    }
   }
 
   .#{$prefix}--date-picker-container--from,
@@ -198,6 +222,29 @@
   .#{$prefix}--date-picker-container--ai-label {
     .#{$prefix}--date-picker__input--decorator {
       @include ai-gradient;
+
+      @if enabled('enable-v12-release') {
+        // Reset the bottom-edge color override from @include ai-gradient so the
+        // border-box gradient layer controls all four sides uniformly.
+        background:
+          linear-gradient(
+              0deg,
+              $ai-aura-start-sm 0%,
+              15%,
+              $ai-aura-end 50%,
+              transparent 100%
+            )
+            padding-box,
+          linear-gradient($field, $field) padding-box,
+          // (ai-border-start → ai-border-end), mirroring the default v12 border gradient
+          linear-gradient(
+              to bottom,
+              $ai-border-start calc(100% - 4px),
+              $ai-border-strong 100%
+            )
+            border-box;
+        border-block-end-color: transparent;
+      }
     }
   }
 
@@ -262,6 +309,11 @@
     max-inline-size: rem(288px);
     outline: none;
 
+    @if enabled('enable-v12-release') {
+      border: 1px solid $border-subtle;
+      border-radius: $border-radius-08;
+    }
+
     &:focus {
       outline: none;
     }
@@ -297,6 +349,10 @@
     svg {
       fill: $icon-primary;
     }
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
   }
 
   .#{$prefix}--date-picker__current-month {
@@ -405,6 +461,10 @@
       outline: 2px solid $focus;
       outline-offset: -2px;
     }
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
   }
 }
 

package/scss/components/date-picker/_date-picker.scss

@@ -13,6 +13,8 @@
 @use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
@@ -133,6 +135,50 @@
     }
   }
 
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--date-picker__calendar.open.arrowTop {
+      // flatpickr calendar renders with 2px margin-top, add $spacing-01 to get 4px
+      margin-block-start: $spacing-01;
+    }
+    .#{$prefix}--date-picker__calendar.open {
+      border: 1px solid $border-subtle;
+      border-radius: $border-radius-08;
+    }
+
+    .#{$prefix}--date-picker__input {
+      border: 1px solid transparent;
+      border-radius: $border-radius-04;
+
+      &:not(:disabled) {
+        // (gray-20 → gray-50)
+        background:
+          linear-gradient($field, $field) padding-box,
+          linear-gradient(
+              to bottom,
+              $border-subtle calc(100% - 4px),
+              $border-strong 100%
+            )
+            border-box;
+      }
+    }
+
+    .#{$prefix}--date-picker--range {
+      .#{$prefix}--date-picker-container:first-of-type
+        .#{$prefix}--date-picker__input {
+        border-end-end-radius: $border-radius-00;
+        border-inline-end: none;
+        border-start-end-radius: $border-radius-00;
+      }
+
+      .#{$prefix}--date-picker-container:last-of-type
+        .#{$prefix}--date-picker__input {
+        border-end-start-radius: $border-radius-00;
+        border-inline-start: none;
+        border-start-start-radius: $border-radius-00;
+      }
+    }
+  }
+
   // Size variant styles
   .#{$prefix}--date-picker__input--lg {
     block-size: convert.to-rem(48px);
@@ -232,6 +278,29 @@
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;
+
+    @if enabled('enable-v12-release') {
+      // Reset the bottom-edge color override from @include ai-gradient so the
+      // border-box gradient layer controls all four sides uniformly.
+      background:
+        linear-gradient(
+            0deg,
+            $ai-aura-start-sm 0%,
+            15%,
+            $ai-aura-end 50%,
+            transparent 100%
+          )
+          padding-box,
+        linear-gradient($field, $field) padding-box,
+        // (ai-border-start → ai-border-end), mirroring the default v12 border gradient
+        linear-gradient(
+            to bottom,
+            $ai-border-start calc(100% - 4px),
+            $ai-border-strong 100%
+          )
+          border-box;
+      border-block-end-color: transparent;
+    }
   }
 
   // Read-only State
@@ -239,6 +308,10 @@
     background: transparent;
     border-block-end-color: $border-subtle;
     cursor: text;
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-00;
+    }
   }
 
   .#{$prefix}--date-picker__input[readonly] + .#{$prefix}--date-picker__icon {

package/scss/components/date-picker/_flatpickr.scss

@@ -10,8 +10,10 @@
 @use '../../spacing' as *;
 @use '../../type' as *;
 @use '../../utilities/box-shadow' as *;
+@use '../../border-radius' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
+@use '../../feature-flags' as *;
 @use '../../utilities/high-contrast-mode' as *;
 
 @use '../button/tokens' as *;
@@ -276,6 +278,14 @@
     }
   }
 
+  @if enabled('enable-v12-release') {
+    .flatpickr-prev-month,
+    .flatpickr-next-month,
+    .flatpickr-day {
+      border-radius: $border-radius-04;
+    }
+  }
+
   .numInputWrapper {
     position: relative;
     inline-size: convert.to-rem(60px);

package/scss/components/dropdown/_dropdown.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.
@@ -7,6 +7,7 @@
 
 @use '../list-box';
 @use '../../config' as *;
+@use '../../feature-flags' as *;
 @use '../../layer' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -68,6 +69,10 @@
     &:hover {
       background-color: $field-hover;
     }
+
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+    }
   }
 
   // Menu's triggering element updated to button with Downshift v5 upgrade
@@ -94,15 +99,32 @@
   }
 
   .#{$prefix}--dropdown--open {
-    border-block-end-color: $border-subtle;
+    @if not enabled('enable-v12-release') {
+      border-block-end-color: $border-subtle;
+    }
   }
 
   .#{$prefix}--dropdown--open .#{$prefix}--list-box__field {
     outline: none;
   }
 
-  .#{$prefix}--dropdown--focus .#{$prefix}--list-box__field {
-    @include focus-outline('outline');
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--dropdown--focus .#{$prefix}--list-box__field {
+      @include focus-outline('outline');
+    }
+  } @else {
+    // v12 focus outline is on the dropdown itself
+    .#{$prefix}--dropdown--focus,
+    .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--open):has(
+        .#{$prefix}--list-box__field:focus
+      ) {
+      @include focus-outline('outline');
+    }
+
+    // prevent nested borders
+    .#{$prefix}--dropdown .#{$prefix}--list-box__field:focus {
+      outline: transparent;
+    }
   }
 
   .#{$prefix}--dropdown--invalid {

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 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.
@@ -15,12 +15,43 @@
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../date-picker';
 
 @mixin fluid-date-picker {
   .#{$prefix}--date-picker--fluid {
     display: inline-flex;
     background: $field;
+
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+
+      &:not(.#{$prefix}--date-picker--fluid--readonly) {
+        border-radius: $border-radius-04;
+        // (gray-20 → gray-50)
+        &:not([disabled]) {
+          background:
+            linear-gradient($field, $field) padding-box,
+            linear-gradient(
+                to bottom,
+                $border-subtle calc(100% - 4px),
+                $border-strong 100%
+              )
+              border-box;
+        }
+      }
+
+      &.#{$prefix}--date-picker--fluid--readonly {
+        border-block-end: 1px solid $border-subtle;
+      }
+
+      &:focus-within {
+        .#{$prefix}--date-picker__input {
+          outline-offset: convert.to-rem(-1.5px);
+        }
+      }
+    }
   }
 
   .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker {
@@ -93,7 +124,9 @@
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker--fluid--warn {
-    border-block-end: 1px solid $border-strong;
+    @if not enabled('enable-v12-release') {
+      border-block-end: 1px solid $border-strong;
+    }
   }
 
   // Single, Range
@@ -117,7 +150,9 @@
       .#{$prefix}--date-picker__input--invalid
     ),
   .#{$prefix}--date-picker--single .#{$prefix}--date-picker--fluid--warn {
-    border-block-end: 1px solid $border-strong;
+    @if not enabled('enable-v12-release') {
+      border-block-end: 1px solid $border-strong;
+    }
   }
 
   // Range
@@ -128,7 +163,9 @@
     .#{$prefix}--date-picker-container:not(
       .#{$prefix}--date-picker--fluid--invalid
     ) {
-    border-block-end: 1px solid $border-strong;
+    @if not enabled('enable-v12-release') {
+      border-block-end: 1px solid $border-strong;
+    }
   }
 
   .#{$prefix}--date-picker--fluid
@@ -153,14 +190,34 @@
     > .#{$prefix}--date-picker-container:last-child
     .#{$prefix}--date-picker__input {
     border-inline-start: 1px solid $border-strong;
+
+    @if enabled('enable-v12-release') {
+      border-inline-start-color: $border-subtle;
+    }
+  }
+
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--date-picker--fluid:focus-within
+      .#{$prefix}--date-picker--range
+      > .#{$prefix}--date-picker-container:last-child
+      .#{$prefix}--date-picker__input {
+      border-inline-start-color: transparent;
+    }
   }
 
   // Invalid
   // Entire input
-  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid,
+
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid {
+      @include focus-outline('invalid');
+    }
+  } @else {
+    .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid,
   // Just one input invalid
   .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid {
-    @include focus-outline('invalid');
+      @include focus-outline('invalid');
+    }
   }
 
   .#{$prefix}--date-picker--fluid
@@ -228,18 +285,35 @@
     > .#{$prefix}--date-picker-container:first-child::after,
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--range
-    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:first-child::after,
-  .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker--range
-    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
+    .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:first-child::after {
     position: absolute;
     display: block;
-    background: $border-strong;
     block-size: calc(100% - 1rem);
     content: '';
     inline-size: 1px;
     inset-block-start: convert.to-rem(8px);
     inset-inline-end: 0;
+
+    @if enabled('enable-v12-release') {
+      background: $border-subtle;
+    } @else {
+      background: $border-strong;
+    }
+  }
+
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--date-picker--fluid
+      .#{$prefix}--date-picker--range
+      .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
+      position: absolute;
+      display: block;
+      background: $border-strong;
+      block-size: calc(100% - 1rem);
+      content: '';
+      inline-size: 1px;
+      inset-block-start: convert.to-rem(8px);
+      inset-inline-end: 0;
+    }
   }
 
   .#{$prefix}--date-picker--fluid
@@ -318,6 +392,10 @@
     background: $skeleton-background;
     block-size: convert.to-rem(64px);
     border-block-end: 1px solid $skeleton-element;
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
   }
 
   .#{$prefix}--date-picker--fluid__skeleton--container {
@@ -463,4 +541,10 @@
     .#{$prefix}--date-picker__input {
     padding-inline-end: $spacing-10;
   }
+
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--date-picker__calendar.#{$prefix}--date-picker__calendar--fluid.open.arrowTop {
+      margin-block-start: $spacing-02;
+    }
+  }
 }

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 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.
@@ -12,6 +12,8 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
@@ -24,6 +26,52 @@
     transition:
       background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
+
+    @if enabled('enable-v12-release') {
+      .#{$prefix}--list-box[data-invalid],
+      .#{$prefix}--list-box--warning {
+        background: none;
+      }
+
+      &:has(.#{$prefix}--list-box--warning) {
+        border: 1px solid transparent;
+        background:
+          linear-gradient($field, $field) padding-box,
+          linear-gradient(
+              to bottom,
+              $border-subtle calc(100% - 4px),
+              $border-strong 100%
+            )
+            border-box;
+
+        // 2px to offset the wrapper's border, keeping the field 64px.
+        .#{$prefix}--list-box {
+          border: none;
+          min-block-size: convert.to-rem(62px);
+        }
+        .#{$prefix}--label {
+          inline-size: calc(100% - 2rem + 2px);
+          inset-block-start: convert.to-rem(12px);
+          inset-inline-start: calc(#{$spacing-05} - 1px);
+        }
+
+        &:focus-within {
+          .#{$prefix}--list-box {
+            outline-offset: -1px;
+          }
+        }
+      }
+
+      &:not(
+          :has(
+              .#{$prefix}--dropdown--readonly,
+              .#{$prefix}--combo-box--readonly,
+              .#{$prefix}--multi-select--readonly
+            )
+        ) {
+        border-radius: $border-radius-04;
+      }
+    }
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box {
@@ -132,22 +180,28 @@
     ) {
     @include focus-outline('invalid');
 
-    z-index: 2;
-    outline-offset: 0;
+    @if not enabled('enable-v12-release') {
+      z-index: 2;
+      &:not(:has(.#{$prefix}--list-box__wrapper--fluid-invalid)) {
+        outline-offset: 0;
+      }
+    }
   }
 
-  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
-    .#{$prefix}--list-box:not(.#{$prefix}--list-box--invalid),
-  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
-    .#{$prefix}--list-box
-    .#{$prefix}--text-input,
-  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
-    .#{$prefix}--list-box
-    .#{$prefix}--text-input,
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--combo-box.#{$prefix}--list-box--warning
-    .#{$prefix}--text-input {
-    border-block-end: 1px solid transparent;
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
+      .#{$prefix}--list-box:not(.#{$prefix}--list-box--invalid),
+    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
+      .#{$prefix}--list-box
+      .#{$prefix}--text-input,
+    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+      .#{$prefix}--list-box
+      .#{$prefix}--text-input,
+    .#{$prefix}--list-box__wrapper--fluid
+      .#{$prefix}--combo-box.#{$prefix}--list-box--warning
+      .#{$prefix}--text-input {
+      border-block-end: 1px solid transparent;
+    }
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
@@ -162,13 +216,19 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:focus-within {
-    outline-offset: 0;
+    @if not enabled('enable-v12-release') {
+      &:not(:has(.#{$prefix}--list-box__wrapper--fluid-invalid)) {
+        outline-offset: 0;
+      }
+    }
   }
 
-  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
-    .#{$prefix}--list-box,
-  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning {
-    border-block-end: 1px solid transparent;
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+      .#{$prefix}--list-box,
+    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning {
+      border-block-end: 1px solid transparent;
+    }
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
@@ -178,12 +238,18 @@
     ~ .#{$prefix}--form-requirement {
     padding: convert.to-rem(8px) 4rem convert.to-rem(8px) $spacing-05;
     margin-block-start: 0;
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
   }
 
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--list-box--warning
     ~ .#{$prefix}--form-requirement {
-    border-block-end: 1px solid $border-strong;
+    @if not enabled('enable-v12-release') {
+      border-block-end: 1px solid $border-strong;
+    }
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
@@ -252,8 +318,21 @@
 
   // Skeleton styles
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton {
-    background: $skeleton-background;
-    border-block-end: 1px solid $skeleton-element;
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      border-radius: $border-radius-04;
+      background:
+        linear-gradient($skeleton-background, $skeleton-background) padding-box,
+        linear-gradient(
+            to bottom,
+            $border-subtle calc(100% - 4px),
+            $skeleton-element 100%
+          )
+          border-box;
+    } @else {
+      background: $skeleton-background;
+      border-block-end: 1px solid $skeleton-element;
+    }
   }
 
   .#{$prefix}--list-box__wrapper--fluid