feat(gradient): linear gradient mixin (#15081)

* feat(gradient): add linear gradient mixin * feat(gradient): add gradient tokens, update demo story * fix(gradient): change default direction * chore(snapshot): update snapshots * refactor(Gradient): use color tokens, update token names * test(snapshot): update snapshots * docs(ai-gradient): mark mixin experimental, update year * chore(storybook): remove test story
carbon-design-system · Nov 7, 2023 · 5b6ba55 · 5b6ba55
1 parent e73113f
commit 5b6ba55
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 4 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2,6 +2,9 @@
 
 exports[`Public API should only change with a semver change 1`] = `
 Array [
+  "aiGradientEnd",
+  "aiGradientStart01",
+  "aiGradientStart02",
   "background",
   "backgroundActive",
   "backgroundBrand",

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -136,6 +136,9 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-gradient-bottom",
         "slug-callout-aura-start",
         "slug-callout-aura-end",
+        "ai-gradient-start-01",
+        "ai-gradient-start-02",
+        "ai-gradient-end",
         "highlight",
         "overlay",
         "toggle-off",

diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -0,0 +1,42 @@
+//
+// Copyright IBM Corp. 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../theme';
+
+/// Experimental - name and structure subject to change. Use at your own risk!
+/// Adds AI gradient styles to a component
+/// @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');
+/// @group utilities
+
+@mixin ai-gradient($direction: 'right', $width: 50%) {
+  $deg: 0;
+  @if $direction == 'bottom' {
+    $deg: 0deg;
+  } @else if $direction == 'left' {
+    $deg: 90deg;
+  } @else if $direction == 'top' {
+    $deg: 180deg;
+  } @else if $direction == 'right' {
+    $deg: 270deg;
+  }
+
+  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%
+    );
+}
diff --git a/packages/styles/scss/utilities/_index.scss b/packages/styles/scss/utilities/_index.scss
@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@forward 'ai-gradient';
 @forward 'box-shadow';
 @forward 'button-reset' as button-*;
 @forward 'component-reset' as component-*;

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -14,6 +14,9 @@ import {
   blue60,
   blue70,
 
+  // CoolGray
+  coolGray10,
+
   // Gray
   gray10,
   gray10Hover,
@@ -202,7 +205,8 @@ export const overlay = 'rgba(22, 22, 22, 0.5)';
 export const toggleOff = gray50;
 export const shadow = 'rgba(0, 0, 0, 0.3)';
 
-// AI
+//// AI - Experimental (Use at your own risk)
+// Slug tokens
 export const slugBackground = gray70;
 export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`;
 export const slugBackgroundHover = gray60;
@@ -212,6 +216,10 @@ export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const slugCalloutAuraStart = rgba(blue10, 0.6);
 export const slugCalloutAuraEnd = 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);
 
 export {
   // Type

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -210,7 +210,8 @@ export const overlay = rgba(black, 0.65);
 export const toggleOff = gray60;
 export const shadow = rgba(black, 0.8);
 
-// AI
+//// AI - Experimental (Use at your own risk)
+// Slug tokens
 export const slugBackground = gray30;
 export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`;
 export const slugBackgroundHover = gray20;
@@ -220,6 +221,10 @@ export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const slugCalloutAuraStart = rgba(blue20, 0.2);
 export const slugCalloutAuraEnd = 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)';
 
 export {
   // Type

diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -210,7 +210,8 @@ export const overlay = rgba(black, 0.65);
 export const toggleOff = gray50;
 export const shadow = rgba(black, 0.8);
 
-// AI
+//// AI - Experimental (Use at your own risk)
+// Slug tokens
 export const slugBackground = gray30;
 export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`;
 export const slugBackgroundHover = gray20;
@@ -220,6 +221,10 @@ export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const slugCalloutAuraStart = rgba(blue20, 0.2);
 export const slugCalloutAuraEnd = 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)';
 
 export {
   // Type

diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -247,6 +247,9 @@ Array [
   "slug-callout-gradient-bottom",
   "slug-callout-aura-start",
   "slug-callout-aura-end",
+  "ai-gradient-start-01",
+  "ai-gradient-start-02",
+  "ai-gradient-end",
   "highlight",
   "overlay",
   "toggle-off",

diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -961,6 +961,18 @@ test('metadata', () => {
           "name": "slug-callout-aura-end",
           "type": "color",
         },
+        Object {
+          "name": "ai-gradient-start-01",
+          "type": "color",
+        },
+        Object {
+          "name": "ai-gradient-start-02",
+          "type": "color",
+        },
+        Object {
+          "name": "ai-gradient-end",
+          "type": "color",
+        },
         Object {
           "name": "highlight",
           "type": "color",

diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
@@ -354,6 +354,9 @@ export const ai = TokenGroup.create({
     'slug-callout-gradient-bottom',
     'slug-callout-aura-start',
     'slug-callout-aura-end',
+    'ai-gradient-start-01',
+    'ai-gradient-start-02',
+    'ai-gradient-end',
   ],
 });
 

diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
@@ -14,6 +14,9 @@ import {
   blue60,
   blue70,
 
+  // CoolGray
+  coolGray10,
+
   // Gray
   gray10,
   gray10Hover,
@@ -202,7 +205,8 @@ export const overlay = 'rgba(22, 22, 22, 0.5)';
 export const toggleOff = gray50;
 export const shadow = 'rgba(0, 0, 0, 0.3)';
 
-// AI
+//// AI - Experimental (Use at your own risk)
+// Slug tokens
 export const slugBackground = gray70;
 export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`;
 export const slugBackgroundHover = gray60;
@@ -212,6 +216,10 @@ export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const slugCalloutAuraStart = rgba(blue10, 0.6);
 export const slugCalloutAuraEnd = 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);
 
 // Type
 export {