@carbon/styles 1.42.0 → 1.43.0-rc.0

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;