feat(Tile): update Tile AI styles to phase 2 spec (#15596)

* feat(Tile): update Tile AI styles to phase 2 spec * chore(Tile): add sasdocs, mark tokens for deprecation * fix(Tile): update selected state * chore(Button): remove test story * fix(Tile): adjust hover gradient
carbon-design-system · Jan 26, 2024 · 8114072 · 8114072
1 parent 7b5be4f
commit 8114072
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 109 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3,6 +3,9 @@
 exports[`Public API should only change with a semver change 1`] = `
 Array [
   "aiAuraEnd",
+  "aiAuraHoverBackground",
+  "aiAuraHoverEnd",
+  "aiAuraHoverStart",
   "aiAuraStart",
   "aiBorderEnd",
   "aiBorderStart",

diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Add, FitToScreen } from '@carbon/icons-react';
+import { Add } from '@carbon/icons-react';
 import { default as Button, ButtonSkeleton } from '../Button';
 import ButtonSet from '../ButtonSet';
 import mdx from './Button.mdx';
@@ -63,23 +63,6 @@ export const Default = (args) => {
   return <Button {...args}>Button</Button>;
 };
 
-export const ButtonTest = () => {
-  const sizes = ['sm', 'md', 'lg', 'xl'];
-  return (
-    <div>
-      {sizes.map((size) => (
-        <div key={size} className="container">
-          <Button size={size} renderIcon={FitToScreen}>
-            <span>label</span>
-          </Button>
-          <div className={`ruler top ${size}`} />
-          <div className={`ruler bottom ${size}`} />
-        </div>
-      ))}
-    </div>
-  );
-};
-
 export const Secondary = (args) => {
   return (
     <Button kind="secondary" {...args}>

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -154,6 +154,9 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-inner-shadow",
         "ai-aura-start",
         "ai-aura-end",
+        "ai-aura-hover-background",
+        "ai-aura-hover-start",
+        "ai-aura-hover-end",
         "ai-border-strong",
         "ai-border-start",
         "ai-border-end",

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -489,7 +489,7 @@
 
   // Slug styles
   .#{$prefix}--modal--slug .#{$prefix}--modal-container {
-    @include callout-gradient('default');
+    @include callout-gradient();
 
     background-color: $layer;
   }

diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
@@ -387,13 +387,15 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile {
-    @include callout-gradient();
+    @include callout-gradient('default', 0, 'layer');
 
-    border: 1px solid $border-tile;
+    border: 1px solid transparent;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
-    @include callout-gradient();
+    @include callout-gradient('default', 0, 'layer');
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
@@ -412,7 +414,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
-    @include callout-gradient('hover');
+    @include callout-gradient('hover', 0, 'layer');
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
@@ -421,7 +425,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
-    @include callout-gradient('selected');
+    @include callout-gradient('selected', 0, 'layer');
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::after {
+    opacity: 0;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
@@ -467,11 +477,11 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--clickable::before {
-    border-radius: $spacing-05;
+    border-radius: $spacing-03;
   }
 
   .#{$prefix}--tile--slug-rounded .#{$prefix}--tile__chevron {
-    border-end-end-radius: $spacing-05;
+    border-end-end-radius: $spacing-03;
   }
 
   // Windows HCM fix

diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -43,57 +43,70 @@
 /// @example @include callout-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
 /// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
+/// @param {String} $background  - specify if the background should be `layer` or `background`
 /// @group utilities
-@mixin callout-gradient($type: 'default', $offset: 0) {
+@mixin callout-gradient(
+  $type: 'default',
+  $offset: 0,
+  $background: theme.$background
+) {
   $start: 0%;
   @if $offset != 0 {
     $start: calc(0% + #{$offset});
   }
 
+  @if $background == 'layer' {
+    $background: theme.$layer;
+  }
+
   @if $type == 'hover' {
     background: linear-gradient(
-        0deg,
-        theme.$slug-callout-aura-start-hover-01 $start,
-        theme.$slug-callout-aura-end-hover-01 50%,
-        transparent 50%
-      ),
+          to top,
+          theme.$ai-aura-hover-start $start,
+          15%,
+          theme.$ai-aura-hover-end 50%
+        )
+        padding-box,
       linear-gradient(
-        0deg,
-        theme.$slug-callout-aura-start-hover-02 $start,
-        theme.$slug-callout-aura-end-hover-02 50%,
-        transparent 50%
-      ),
+          to top,
+          theme.$ai-aura-hover-background,
+          theme.$ai-aura-hover-background
+        )
+        padding-box,
+      linear-gradient(to bottom, theme.$ai-border-start, theme.$ai-border-end)
+        border-box,
+      // Needed to underlay the transparent border
       linear-gradient(
-          180deg,
-          theme.$slug-callout-gradient-top-hover $start,
-          theme.$slug-callout-gradient-bottom-hover 100%
+          to top,
+          theme.$ai-aura-hover-background,
+          theme.$ai-aura-hover-background
         )
-        rgba(0, 0, 0, 0.01);
+        border-box;
   } @else if $type == 'selected' {
     background: linear-gradient(
-        0deg,
-        theme.$slug-callout-aura-start-selected $start,
-        theme.$slug-callout-aura-end-selected 50%,
-        transparent 50%
-      ),
-      linear-gradient(
-          180deg,
-          theme.$slug-callout-gradient-top-selected $start,
-          theme.$slug-callout-gradient-bottom-selected 100%
+          to top,
+          theme.$ai-aura-start $start,
+          theme.$ai-aura-end 50%
         )
-        rgba(0, 0, 0, 0.01);
+        padding-box,
+      linear-gradient(to top, theme.$layer, theme.$layer) padding-box,
+      linear-gradient(to bottom, theme.$border-inverse, theme.$border-inverse)
+        border-box,
+      // Needed to underlay the transparent border
+      linear-gradient(to top, theme.$layer, theme.$layer)
+        border-box;
   } @else {
     background: linear-gradient(
           to top,
           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 top, $background, $background) padding-box,
       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)
+      linear-gradient(to top, $background, $background)
         border-box;
   }
 }
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -213,16 +213,6 @@ export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rg
 export const slugBackgroundHover = gray60;
 export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`;
 export const slugHollowHover = gray80Hover;
-export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
-export const slugCalloutAuraEndHover01 = rgba(white, 0);
-export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
-export const slugCalloutAuraEndHover02 = rgba(white, 0);
-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);
 
 //// Phase 2 - new \\\\
 // Shared
@@ -233,21 +223,32 @@ export const aiBorderStrong = blue50;
 export const aiBorderStart = blue40;
 export const aiBorderEnd = blue20;
 export const aiDropShadow = rgba(blue60, 0.32);
+export const aiAuraHoverBackground = blue10;
+export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverEnd = rgba(white, 0);
 
 // Callout
 export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.1);
 
-//// Changed
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-
 //// 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);
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
+export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
+export const slugCalloutAuraEndHover01 = rgba(white, 0);
+export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
+export const slugCalloutAuraEndHover02 = rgba(white, 0);
+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);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#A7C7FF';

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -218,16 +218,6 @@ export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgb
 export const slugBackgroundHover = gray20;
 export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
 export const slugHollowHover = gray30Hover;
-export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
-export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
-export const slugCalloutAuraStartHover02 = 'transparent';
-export const slugCalloutAuraEndHover02 = 'transparent';
-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);
 
 //// Phase 2 - new \\\\
 // Shared
@@ -238,21 +228,32 @@ export const aiBorderStrong = blue40;
 export const aiBorderStart = blue50;
 export const aiBorderEnd = rgba(blue30, 0.24);
 export const aiDropShadow = rgba(blue60, 0.32);
+export const aiAuraHoverBackground = layerHover01;
+export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverEnd = rgba(black, 0);
 
 // Callout
 export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.65);
 
-//// Changed
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-
 //// 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)';
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+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);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#3F68AF';

diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -219,16 +219,6 @@ export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgb
 export const slugBackgroundHover = gray20;
 export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
 export const slugHollowHover = gray30Hover;
-export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
-export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
-export const slugCalloutAuraStartHover02 = 'transparent';
-export const slugCalloutAuraEndHover02 = 'transparent';
-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);
 
 //// Phase 2 - new \\\\
 // Shared
@@ -239,21 +229,32 @@ export const aiBorderStrong = blue40;
 export const aiBorderStart = blue50;
 export const aiBorderEnd = rgba(blue30, 0.24);
 export const aiDropShadow = rgba(blue60, 0.32);
+export const aiAuraHoverBackground = layerHover01;
+export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverEnd = rgba(black, 0);
 
 // Callout
 export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.65);
 
-//// Changed
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-
 //// 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)';
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+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);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#456FB5';

diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -265,6 +265,9 @@ Array [
   "ai-inner-shadow",
   "ai-aura-start",
   "ai-aura-end",
+  "ai-aura-hover-background",
+  "ai-aura-hover-start",
+  "ai-aura-hover-end",
   "ai-border-strong",
   "ai-border-start",
   "ai-border-end",