feat(AI): update ai-gradient to phase 2 spec (#15528)

* feat(Slug): port slug callout changes * feat(Gradient): update ai gradient styles to match new spec * style(Gradient): tweak gradient values * refactor(themes): remove extraneous tokens * refactor(themes): add in old token until later * fix(Slug): don't apply ai gradient styles if revert is active * fix(gradient): fix sassdoc
carbon-design-system · Jan 22, 2024 · d82da66 · d82da66
1 parent be888a8
commit d82da66
Show file tree

Hide file tree

Showing 20 changed files with 177 additions and 102 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2,9 +2,16 @@
 
 exports[`Public API should only change with a semver change 1`] = `
 Array [
+  "aiAuraEnd",
+  "aiAuraStart",
+  "aiBorderEnd",
+  "aiBorderStart",
+  "aiBorderStrong",
+  "aiDropShadow",
   "aiGradientEnd",
   "aiGradientStart01",
   "aiGradientStart02",
+  "aiInnerShadow",
   "background",
   "backgroundActive",
   "backgroundBrand",
@@ -284,8 +291,6 @@ Array [
   "slugCalloutAuraStartHover01",
   "slugCalloutAuraStartHover02",
   "slugCalloutAuraStartSelected",
-  "slugCalloutBorder01",
-  "slugCalloutBorder02",
   "slugCalloutCaretBottom",
   "slugCalloutCaretBottomBackground",
   "slugCalloutCaretBottomBackgroundActions",
@@ -296,7 +301,6 @@ Array [
   "slugCalloutGradientTop",
   "slugCalloutGradientTopHover",
   "slugCalloutGradientTopSelected",
-  "slugCalloutShadowInner",
   "slugCalloutShadowOuter01",
   "slugCalloutShadowOuter02",
   "slugGradient",

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/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",

diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/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;

diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/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,

diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/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;
   }
 }
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/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;
   }
 

diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/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;

diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/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;

diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/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;

diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/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;

diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/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;

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/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;

diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/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,25 +27,22 @@
   }
 
   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!
 /// Adds callout gradient styles to a component
 /// @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)

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -223,26 +223,31 @@ export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
 export const slugCalloutAuraEndSelected = rgba(white, 0);
-// Linear gradient tokens
-export const aiGradientStart01 = rgba(coolGray10, 0.5);
-export const aiGradientStart02 = rgba(blue10, 0.5);
-export const aiGradientEnd = rgba(white, 0);
 
-// Phase 2 - new
-export const slugCalloutShadowInner = rgba(blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(white, 0);
+export const aiBorderStrong = blue50;
+export const aiBorderStart = blue40;
+export const aiBorderEnd = blue20;
+export const aiDropShadow = rgba(blue60, 0.32);
+
+// Callout
 export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.1);
 
-export const slugCalloutBorder01 = blue40;
-export const slugCalloutBorder02 = blue20;
-
-// Changed
-export const slugCalloutAuraStart = rgba(blue50, 0.1);
-export const slugCalloutAuraEnd = rgba(white, 0);
+//// Changed
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
+export const aiGradientStart01 = rgba(coolGray10, 0.5);
+export const aiGradientStart02 = rgba(blue10, 0.5);
+export const aiGradientEnd = rgba(white, 0);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#A7C7FF';

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -228,26 +228,31 @@ export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
 export const slugCalloutAuraEndSelected = rgba(gray100, 0);
-// Linear gradient tokens
-export const aiGradientStart01 = rgba(blue20, 0.2);
-export const aiGradientStart02 = 'transparent';
-export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
-// Phase 2 - new
-export const slugCalloutShadowInner = rgba(blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(black, 0);
+export const aiBorderStrong = blue40;
+export const aiBorderStart = blue50;
+export const aiBorderEnd = rgba(blue30, 0.24);
+export const aiDropShadow = rgba(blue60, 0.32);
+
+// Callout
 export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.65);
 
-export const slugCalloutBorder01 = blue50;
-export const slugCalloutBorder02 = rgba(blue30, 0.25);
-
-// Changed
-export const slugCalloutAuraStart = rgba(blue50, 0.1);
-export const slugCalloutAuraEnd = rgba(white, 0);
+//// Changed
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
+export const aiGradientStart01 = rgba(blue20, 0.2);
+export const aiGradientStart02 = 'transparent';
+export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#3F68AF';