@carbon/styles 1.42.1 → 1.43.0-rc.0

package/scss/components/number-input/_number-input.scss

@@ -12,6 +12,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/high-contrast-mode' as *;
@@ -159,26 +160,6 @@
     border-block-end: convert.to-rem(1px) solid $border-strong;
     color: $icon-primary;
 
-    &::before,
-    &::after {
-      position: absolute;
-      display: block;
-      background-color: $field;
-      // block-size: calc(100% - 4px) is calculated differently in Safari
-      block-size: convert.to-rem(36px);
-      content: '';
-      inline-size: convert.to-rem(2px);
-      inset-block-start: convert.to-rem(2px);
-    }
-
-    &::before {
-      inset-inline-start: 0;
-    }
-
-    &::after {
-      inset-inline-end: 0;
-    }
-
     svg {
       fill: currentColor;
     }
@@ -195,18 +176,6 @@
       background-color: $field-hover;
       color: $icon-primary;
       cursor: pointer;
-
-      &::before,
-      &::after {
-        background-color: $field-hover;
-      }
-    }
-
-    &:focus::before,
-    &:focus::after,
-    &:hover:focus::before,
-    &:hover:focus::after {
-      background-color: transparent;
     }
 
     &:disabled {
@@ -225,56 +194,50 @@
     order: 2;
   }
 
-  // add top and bottom outlines to number controls when input is focused
   .#{$prefix}--number
-    input[type='number']:focus
+    input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-block-end-color: transparent;
-
-    &:hover {
-      @include focus-outline('outline');
-    }
+    border-block-end-color: $support-error;
   }
 
+  // add top and bottom outlines to number controls when input is focused
   .#{$prefix}--number
-    input[type='number'][data-invalid]
+    input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-block-end-color: transparent;
+    border-block-end-color: $focus;
+    box-shadow: inset 0 2px $focus, inset 0 -1px $focus;
   }
 
-  // add invalid outline to number controls only when invalid input is not focused
   .#{$prefix}--number
-    input[type='number'][data-invalid]:not(:focus)
+    input[type='number']:focus
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:hover {
-    @include focus-outline('invalid');
+    .#{$prefix}--number__control-btn:last-of-type {
+    box-shadow: inset 0 2px $focus, inset 0 -1px $focus, inset -2px 0 $focus;
   }
 
+  // add invalid box-shadow to number controls only when invalid input is not focused
   .#{$prefix}--number
-    input[type='number']:focus
+    input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after {
-    background-color: transparent;
+    .#{$prefix}--number__control-btn:last-of-type:hover {
+    box-shadow: inset 0 2px $support-error, inset 0 -1px $support-error,
+      inset -2px 0 $support-error;
   }
 
   .#{$prefix}--number
-    input[type='number'][data-invalid]
+    input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after {
-    background-color: $support-error;
+    .#{$prefix}--number__control-btn:hover {
+    box-shadow: inset 0 2px $support-error, inset 0 -1px $support-error;
   }
 
   .#{$prefix}--number
-    input[type='number'][data-invalid]:focus
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after,
-  .#{$prefix}--number
-    input[type='number'][data-invalid]
+    input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon:focus::after {
-    background-color: $focus;
+    .#{$prefix}--number__control-btn:focus:hover {
+    @include focus-outline('outline');
   }
 
   .#{$prefix}--number__rule-divider {
@@ -380,38 +343,6 @@
     opacity: 1;
   }
 
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light input[type='number'] {
-    background-color: $field-02;
-  }
-
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light input[type='number']:disabled {
-    background-color: $field-02;
-  }
-
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn::after {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
-    background-color: transparent;
-  }
-
-  // V11: Possibly deprecate
-  // We include `:not(:focus)` here because the pseudo elements will overlap the
-  // focus outline on the button if we set their background-color on focus
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light
-    .#{$prefix}--number__control-btn:not(:focus):hover::before,
-  .#{$prefix}--number--light
-    .#{$prefix}--number__control-btn:not(:focus):hover::after {
-    background-color: $layer-hover-02;
-  }
-
   // Size Variant styles
   .#{$prefix}--number--lg input[type='number'] {
     block-size: convert.to-rem(48px);
@@ -423,12 +354,6 @@
 
   .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
     inline-size: convert.to-rem(48px);
-
-    &::before,
-    &::after {
-      // block-size: calc(100% - 4px) is calculated differently in Safari
-      block-size: convert.to-rem(44px);
-    }
   }
 
   .#{$prefix}--number--sm input[type='number'] {
@@ -441,12 +366,6 @@
 
   .#{$prefix}--number--sm .#{$prefix}--number__control-btn {
     inline-size: convert.to-rem(32px);
-
-    &::before,
-    &::after {
-      // block-size: calc(100% - 4px) is calculated differently in Safari
-      block-size: convert.to-rem(28px);
-    }
   }
 
   //No label positioning adjustment
@@ -478,11 +397,6 @@
     &:hover {
       background-color: transparent;
       cursor: pointer;
-
-      &::before,
-      &::after {
-        background-color: transparent;
-      }
     }
   }
 
@@ -493,17 +407,43 @@
     outline: none;
   }
 
-  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn::before,
-  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn::after {
-    background: transparent;
-  }
-
   .#{$prefix}--number--readonly
     .#{$prefix}--number__controls:hover
     .#{$prefix}--number__rule-divider:not(:first-of-type) {
     background-color: $border-subtle;
   }
 
+  // Styles for `Slug` rendered inside `NumberInput`
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: convert.to-rem(88px);
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--number__input-wrapper--slug
+    input[data-invalid]
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--number__input-wrapper--slug.#{$prefix}--number__input-wrapper--warning
+    .#{$prefix}--slug {
+    inset-inline-end: convert.to-rem(120px);
+  }
+
+  .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper--slug
+    input[data-invalid],
+  .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper--slug.#{$prefix}--number__input-wrapper--warning
+    input {
+    padding-inline-end: convert.to-rem(144px);
+  }
+
+  .#{$prefix}--number__input-wrapper--slug input[type='number'] {
+    @include ai-gradient;
+
+    padding-inline-end: convert.to-rem(112px);
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;
@@ -516,19 +456,19 @@
     }
   }
 
-  // // Windows HCM fix
-  // /* stylelint-disable */
-  // .#{$prefix}--number__control-btn:hover,
-  // .#{$prefix}--number__control-btn:focus {
-  //   @include high-contrast-mode('focus');
-  // }
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number__control-btn:focus {
+    @include high-contrast-mode('focus');
+  }
 
-  // .#{$prefix}--number__control-btn {
-  //   @include high-contrast-mode('outline');
-  // }
+  .#{$prefix}--number__control-btn {
+    @include high-contrast-mode('outline');
+  }
 
-  // .#{$prefix}--number__control-btn svg {
-  //   @include high-contrast-mode('icon-fill');
-  // }
-  // /* stylelint-enable */
+  .#{$prefix}--number__control-btn svg {
+    @include high-contrast-mode('icon-fill');
+  }
+  /* stylelint-enable */
 }

package/scss/components/select/_select.scss

@@ -6,12 +6,14 @@
 //
 
 @use '../form';
+@use '../../colors' as *;
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
 @use '../../type' as *;
 @use '../../breakpoint' as *;
 @use '../../theme' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
@@ -171,7 +173,7 @@
   }
 
   .#{$prefix}--select__invalid-icon--warning path[fill] {
-    fill: $icon-primary;
+    fill: $black-100;
     opacity: 1;
   }
 
@@ -265,7 +267,7 @@
     fill: $icon-disabled;
   }
 
-  //Skeleton State
+  // Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;
 
@@ -278,6 +280,32 @@
     display: none;
   }
 
+  // Slug styles
+  .#{$prefix}--select--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--select--slug .#{$prefix}--select-input {
+    @include ai-gradient;
+
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--select--slug.#{$prefix}--select--invalid
+    .#{$prefix}--select-input,
+  .#{$prefix}--select--slug.#{$prefix}--select--warning
+    .#{$prefix}--select-input {
+    padding-inline-end: $spacing-12;
+  }
+
+  .#{$prefix}--select--slug.#{$prefix}--select--invalid .#{$prefix}--slug,
+  .#{$prefix}--select--slug.#{$prefix}--select--warning .#{$prefix}--slug {
+    inset-inline-end: $spacing-10;
+  }
+
   // Windows HCM fix
   // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--select__arrow {

package/scss/components/slug/_slug.scss

@@ -1,6 +1,7 @@
 @use '../../config' as *;
 @use '../../colors' as *;
 @use '../../motion' as *;
+@use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/convert';
@@ -65,6 +66,10 @@ $sizes: (
     display: flex;
   }
 
+  .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
+    z-index: 2;
+  }
+
   .#{$prefix}--slug .#{$prefix}--slug__button {
     position: relative;
     display: flex;
@@ -383,4 +388,18 @@ $sizes: (
     order: 1;
     border-end-end-radius: convert.to-rem(16px);
   }
+
+  // Revert styles
+  .#{$prefix}--slug.#{$prefix}--slug--revert {
+    transform: translate($spacing-03, -50%);
+  }
+
+  .#{$prefix}--slug--revert .#{$prefix}--btn--icon-only {
+    align-items: center;
+    padding-block-start: 0;
+  }
+
+  .#{$prefix}--slug--revert .#{$prefix}--btn--icon-only svg {
+    margin: 0;
+  }
 }

package/scss/components/structured-list/_structured-list.scss

@@ -32,7 +32,7 @@
 
     display: table;
 
-    background-color: transparent;
+    background-color: $layer transparent;
     border-collapse: collapse;
     border-spacing: 0;
     inline-size: 100%;

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

@@ -12,6 +12,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
@@ -121,9 +122,39 @@
     border-block-end-color: $border-subtle;
   }
 
-  // V11: Possibly deprecate
-  .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
-    background-color: $field-02;
+  // Styles for `Slug` rendered inside `TextArea`
+  .#{$prefix}--text-area__wrapper--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: $spacing-04;
+    inset-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--slug.#{$prefix}--slug--revert {
+    inset-block-start: $spacing-02;
+    inset-inline-end: $spacing-03;
+    transform: translate(0);
+  }
+
+  .#{$prefix}--text-area__wrapper--slug .#{$prefix}--text-area {
+    @include ai-gradient;
+
+    padding-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--text-area--invalid:has(~ .#{$prefix}--slug),
+  .#{$prefix}--text-area--warn:has(~ .#{$prefix}--slug) {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--text-area--invalid ~ .#{$prefix}--slug,
+  .#{$prefix}--text-area--warn ~ .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--text-area--invalid ~ .#{$prefix}--slug.#{$prefix}--slug--revert,
+  .#{$prefix}--text-area--warn ~ .#{$prefix}--slug.#{$prefix}--slug--revert {
+    inset-inline-end: $spacing-07;
   }
 
   // Skeleton State
@@ -131,7 +162,6 @@
     @include skeleton;
 
     block-size: convert.to-rem(100px);
-
     inline-size: 100%;
 
     &::placeholder {

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

@@ -15,6 +15,7 @@
 @use '../../type' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/tooltip' as *;
@@ -414,6 +415,30 @@
     border-block-end-color: $border-subtle;
   }
 
+  // Styles for Slug rendered inside TextInput
+  .#{$prefix}--text-input__field-wrapper .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-05;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--text-input__field-wrapper--slug .#{$prefix}--text-input {
+    @include ai-gradient;
+
+    padding-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--text-input--invalid:has(~ .#{$prefix}--slug),
+  .#{$prefix}--text-input--warning:has(~ .#{$prefix}--slug) {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--text-input--invalid ~ .#{$prefix}--slug,
+  .#{$prefix}--text-input--warning ~ .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
   // Windows HCM fix
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg,

package/scss/utilities/_ai-gradient.scss

@@ -12,10 +12,10 @@
 /// @access public
 /// @param {String} $direction  - Direction of gradient from: `left`, `right`, `top`, and `bottom`
 /// @param {Number} $width - Percentage width of gradient with regards to parent component
-/// @example @include focus-outline('outline');
+/// @example @include ai-gradient('right', '33%');
 /// @group utilities
 
-@mixin ai-gradient($direction: 'right', $width: 50%) {
+@mixin ai-gradient($direction: 'right', $width: 33%) {
   $deg: 0;
   @if $direction == 'bottom' {
     $deg: 0deg;