@carbon/styles 1.48.0 → 1.48.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.48.0",
+  "version": "1.48.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "@carbon/grid": "^11.21.0",
     "@carbon/layout": "^11.20.0",
     "@carbon/motion": "^11.16.0",
-    "@carbon/themes": "^11.29.0",
+    "@carbon/themes": "^11.29.1",
     "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "6d133d4f920b7c01f6ea2221938a339c14a85b42"
+  "gitHead": "68c58d98fe0c287eb4456c8b5153f6cb7b58c5bf"
 }

package/scss/__tests__/theme-test.js

@@ -149,11 +149,15 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-gradient-start-01",
         "ai-gradient-start-02",
         "ai-gradient-end",
-        "slug-callout-shadow-inner",
         "slug-callout-shadow-outer-01",
         "slug-callout-shadow-outer-02",
-        "slug-callout-border-01",
-        "slug-callout-border-02",
+        "ai-inner-shadow",
+        "ai-aura-start",
+        "ai-aura-end",
+        "ai-border-strong",
+        "ai-border-start",
+        "ai-border-end",
+        "ai-drop-shadow",
         "slug-callout-caret-center",
         "slug-callout-caret-bottom",
         "slug-callout-caret-bottom-background",

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

@@ -198,7 +198,7 @@
   }
 
   .#{$prefix}--date-picker-input__wrapper--slug
-    .#{$prefix}--date-picker__input {
+    .#{$prefix}--date-picker__input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;

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

@@ -407,10 +407,18 @@
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug {
+    .#{$prefix}--date-picker-input__wrapper--slug:not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:not(.cds--date-picker__input--invalid) {
+    border-block-end-color: $ai-border-strong;
+  }
+
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--date-picker__input,

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

@@ -303,7 +303,10 @@
     padding-inline-end: convert.to-rem(120px);
   }
 
-  .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper--slug {
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug:not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 }

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

@@ -219,7 +219,10 @@
   }
 
   // Slug styles
-  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper--slug {
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug:not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 

package/scss/components/list-box/_list-box.scss

@@ -897,10 +897,17 @@ $list-box-menu-width: convert.to-rem(300px);
     transform: translateY(-50%);
   }
 
-  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box {
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box:not(:has(.#{$prefix}--slug--revert)) {
     @include ai-gradient;
   }
 
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box
+    input[role='combobox'] {
+    border-block-end-color: transparent;
+  }
+
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box__field,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--text-input--empty {
     padding-inline-end: $spacing-10;

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

@@ -445,13 +445,18 @@
     padding-inline-end: convert.to-rem(144px);
   }
 
-  .#{$prefix}--number__input-wrapper--slug input[type='number'],
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='number']:not(:has(~ .#{$prefix}--slug--revert)),
   .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
     @include ai-gradient;
 
     padding-inline-end: convert.to-rem(112px);
   }
 
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__control-btn {
+    border-block-end-color: $ai-border-strong;
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;

package/scss/components/select/_select.scss

@@ -288,7 +288,8 @@
     transform: translateY(-50%);
   }
 
-  .#{$prefix}--select--slug .#{$prefix}--select-input {
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;

package/scss/components/slug/_slug.scss

@@ -332,7 +332,7 @@ $sizes: (
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
-    box-shadow: inset 0 -80px 70px -65px $slug-callout-shadow-inner,
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       -40px 30px 100px -25px $slug-callout-shadow-outer-01,
       -60px 80px 60px -45px $slug-callout-shadow-outer-02;
     color: $text-primary;
@@ -368,7 +368,7 @@ $sizes: (
     > .#{$prefix}--popover-caret::before {
     position: absolute;
     display: block;
-    border: 1px solid $slug-callout-border-01;
+    border: 1px solid $ai-border-start;
     background: $background;
     block-size: convert.to-rem(12px);
     clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;

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

@@ -136,7 +136,8 @@
     transform: translate(0);
   }
 
-  .#{$prefix}--text-area__wrapper--slug .#{$prefix}--text-area {
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-08;

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

@@ -423,7 +423,8 @@
     transform: translateY(-50%);
   }
 
-  .#{$prefix}--text-input__field-wrapper--slug .#{$prefix}--text-input {
+  .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-08;

package/scss/utilities/_ai-gradient.scss

@@ -11,10 +11,10 @@
 /// Adds AI gradient styles to a component
 /// @access private
 /// @param {String} $direction  - Direction of gradient from: `left`, `right`, `top`, and `bottom`
-/// @param {Number} $width - Percentage width of gradient with regards to parent component
+/// @param {Number} $span - Percentage span of gradient with regards to parent component
 /// @example @include ai-gradient('right', '33%');
 /// @group utilities
-@mixin ai-gradient($direction: 'right', $width: 33%) {
+@mixin ai-gradient($direction: 'bottom', $span: 50%) {
   $deg: 0;
   @if $direction == 'bottom' {
     $deg: 0deg;
@@ -27,17 +27,14 @@
   }
 
   background-image: linear-gradient(
-      $deg,
-      theme.$ai-gradient-start-01 0%,
-      theme.$ai-gradient-end $width,
-      transparent 100%
-    ),
-    linear-gradient(
-      $deg,
-      theme.$ai-gradient-start-02 0%,
-      theme.$ai-gradient-end $width,
-      transparent 100%
-    );
+    $deg,
+    theme.$ai-inner-shadow 0%,
+    15%,
+    theme.$ai-aura-end $span,
+    transparent 100%
+  );
+
+  border-block-end-color: theme.$ai-border-strong;
 }
 
 /// Experimental - name and structure subject to change. Use at your own risk!
@@ -45,7 +42,7 @@
 /// @access private
 /// @example @include callout-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
-/// @param {Number} $type  - specify a pixel offset the callout should start from the bottom
+/// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
 /// @group utilities
 @mixin callout-gradient($type: 'default', $offset: 0) {
   $start: 0%;
@@ -88,16 +85,12 @@
   } @else {
     background: linear-gradient(
           to top,
-          theme.$slug-callout-aura-start $start,
-          theme.$slug-callout-aura-end 50%
+          theme.$ai-aura-start $start,
+          theme.$ai-aura-end 50%
         )
         padding-box,
       linear-gradient(to top, theme.$background, theme.$background) padding-box,
-      linear-gradient(
-          to bottom,
-          theme.$slug-callout-border-01,
-          theme.$slug-callout-border-02
-        )
+      linear-gradient(to bottom, theme.$ai-border-start, theme.$ai-border-end)
         border-box,
       // Needed to underlay the transparent border
       linear-gradient(to top, theme.$background, theme.$background)