@carbon/themes 11.29.0 → 11.29.1

package/lib/index.js

@@ -706,25 +706,31 @@ var slugCalloutGradientTopSelected$3 = colors$1.rgba(colors$1.gray20, 0.85);
 var slugCalloutGradientBottomSelected$3 = colors$1.rgba(colors$1.gray20Hover, 0.85);
 var slugCalloutAuraStartSelected$3 = colors$1.rgba(colors$1.blue10, 0.6);
 var slugCalloutAuraEndSelected$3 = colors$1.rgba(colors$1.white, 0);
-// Linear gradient tokens
-var aiGradientStart01$3 = colors$1.rgba(colors$1.coolGray10, 0.5);
-var aiGradientStart02$3 = colors$1.rgba(colors$1.blue10, 0.5);
-var aiGradientEnd$3 = colors$1.rgba(colors$1.white, 0);
 
-// Phase 2 - new
-var slugCalloutShadowInner$3 = colors$1.rgba(colors$1.blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+var aiInnerShadow$3 = colors$1.rgba(colors$1.blue50, 0.2);
+var aiAuraStart$3 = colors$1.rgba(colors$1.blue50, 0.1);
+var aiAuraEnd$3 = colors$1.rgba(colors$1.white, 0);
+var aiBorderStrong$3 = colors$1.blue50;
+var aiBorderStart$3 = colors$1.blue40;
+var aiBorderEnd$3 = colors$1.blue20;
+var aiDropShadow$3 = colors$1.rgba(colors$1.blue60, 0.32);
+
+// Callout
 var slugCalloutShadowOuter01$3 = colors$1.rgba(colors$1.blue70, 0.25);
 var slugCalloutShadowOuter02$3 = colors$1.rgba(colors$1.black, 0.1);
-var slugCalloutBorder01$3 = colors$1.blue40;
-var slugCalloutBorder02$3 = colors$1.blue20;
 
-// Changed
-var slugCalloutAuraStart$3 = colors$1.rgba(colors$1.blue50, 0.1);
-var slugCalloutAuraEnd$3 = colors$1.rgba(colors$1.white, 0);
+//// Changed
+var slugCalloutAuraStart$3 = aiAuraStart$3;
+var slugCalloutAuraEnd$3 = aiAuraEnd$3;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 var slugCalloutGradientTop$3 = colors$1.rgba(colors$1.gray10, 0.85);
 var slugCalloutGradientBottom$3 = colors$1.rgba(colors$1.gray20, 0.85);
+var aiGradientStart01$3 = colors$1.rgba(colors$1.coolGray10, 0.5);
+var aiGradientStart02$3 = colors$1.rgba(colors$1.blue10, 0.5);
+var aiGradientEnd$3 = colors$1.rgba(colors$1.white, 0);
 
 // One off tokens for caret
 var slugCalloutCaretCenter$3 = '#A7C7FF';
@@ -849,18 +855,22 @@ var white$1 = /*#__PURE__*/Object.freeze({
   slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$3,
   slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$3,
   slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$3,
-  aiGradientStart01: aiGradientStart01$3,
-  aiGradientStart02: aiGradientStart02$3,
-  aiGradientEnd: aiGradientEnd$3,
-  slugCalloutShadowInner: slugCalloutShadowInner$3,
+  aiInnerShadow: aiInnerShadow$3,
+  aiAuraStart: aiAuraStart$3,
+  aiAuraEnd: aiAuraEnd$3,
+  aiBorderStrong: aiBorderStrong$3,
+  aiBorderStart: aiBorderStart$3,
+  aiBorderEnd: aiBorderEnd$3,
+  aiDropShadow: aiDropShadow$3,
   slugCalloutShadowOuter01: slugCalloutShadowOuter01$3,
   slugCalloutShadowOuter02: slugCalloutShadowOuter02$3,
-  slugCalloutBorder01: slugCalloutBorder01$3,
-  slugCalloutBorder02: slugCalloutBorder02$3,
   slugCalloutAuraStart: slugCalloutAuraStart$3,
   slugCalloutAuraEnd: slugCalloutAuraEnd$3,
   slugCalloutGradientTop: slugCalloutGradientTop$3,
   slugCalloutGradientBottom: slugCalloutGradientBottom$3,
+  aiGradientStart01: aiGradientStart01$3,
+  aiGradientStart02: aiGradientStart02$3,
+  aiGradientEnd: aiGradientEnd$3,
   slugCalloutCaretCenter: slugCalloutCaretCenter$3,
   slugCalloutCaretBottom: slugCalloutCaretBottom$3,
   slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$3,
@@ -1119,25 +1129,31 @@ var slugCalloutGradientTopSelected$2 = colors$1.rgba(colors$1.gray20, 0.85);
 var slugCalloutGradientBottomSelected$2 = colors$1.rgba(colors$1.gray20Hover, 0.85);
 var slugCalloutAuraStartSelected$2 = colors$1.rgba(colors$1.blue10, 0.6);
 var slugCalloutAuraEndSelected$2 = colors$1.rgba(colors$1.white, 0);
-// Linear gradient tokens
-var aiGradientStart01$2 = colors$1.rgba(colors$1.coolGray10, 0.5);
-var aiGradientStart02$2 = colors$1.rgba(colors$1.blue10, 0.5);
-var aiGradientEnd$2 = colors$1.rgba(colors$1.white, 0);
 
-// Phase 2 - new
-var slugCalloutShadowInner$2 = colors$1.rgba(colors$1.blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+var aiInnerShadow$2 = colors$1.rgba(colors$1.blue50, 0.2);
+var aiAuraStart$2 = colors$1.rgba(colors$1.blue50, 0.1);
+var aiAuraEnd$2 = colors$1.rgba(colors$1.white, 0);
+var aiBorderStrong$2 = colors$1.blue50;
+var aiBorderStart$2 = colors$1.blue40;
+var aiBorderEnd$2 = colors$1.blue20;
+var aiDropShadow$2 = colors$1.rgba(colors$1.blue60, 0.32);
+
+// Callout
 var slugCalloutShadowOuter01$2 = colors$1.rgba(colors$1.blue70, 0.25);
 var slugCalloutShadowOuter02$2 = colors$1.rgba(colors$1.black, 0.1);
-var slugCalloutBorder01$2 = colors$1.blue40;
-var slugCalloutBorder02$2 = colors$1.blue20;
 
-// Changed
-var slugCalloutAuraStart$2 = colors$1.rgba(colors$1.blue50, 0.1);
-var slugCalloutAuraEnd$2 = colors$1.rgba(colors$1.white, 0);
+//// Changed
+var slugCalloutAuraStart$2 = aiAuraStart$2;
+var slugCalloutAuraEnd$2 = aiAuraEnd$2;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 var slugCalloutGradientTop$2 = colors$1.rgba(colors$1.gray10, 0.85);
 var slugCalloutGradientBottom$2 = colors$1.rgba(colors$1.gray20, 0.85);
+var aiGradientStart01$2 = colors$1.rgba(colors$1.coolGray10, 0.5);
+var aiGradientStart02$2 = colors$1.rgba(colors$1.blue10, 0.5);
+var aiGradientEnd$2 = colors$1.rgba(colors$1.white, 0);
 
 // One off tokens for caret
 var slugCalloutCaretCenter$2 = '#A7C7FF';
@@ -1262,18 +1278,22 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$2,
   slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$2,
   slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$2,
-  aiGradientStart01: aiGradientStart01$2,
-  aiGradientStart02: aiGradientStart02$2,
-  aiGradientEnd: aiGradientEnd$2,
-  slugCalloutShadowInner: slugCalloutShadowInner$2,
+  aiInnerShadow: aiInnerShadow$2,
+  aiAuraStart: aiAuraStart$2,
+  aiAuraEnd: aiAuraEnd$2,
+  aiBorderStrong: aiBorderStrong$2,
+  aiBorderStart: aiBorderStart$2,
+  aiBorderEnd: aiBorderEnd$2,
+  aiDropShadow: aiDropShadow$2,
   slugCalloutShadowOuter01: slugCalloutShadowOuter01$2,
   slugCalloutShadowOuter02: slugCalloutShadowOuter02$2,
-  slugCalloutBorder01: slugCalloutBorder01$2,
-  slugCalloutBorder02: slugCalloutBorder02$2,
   slugCalloutAuraStart: slugCalloutAuraStart$2,
   slugCalloutAuraEnd: slugCalloutAuraEnd$2,
   slugCalloutGradientTop: slugCalloutGradientTop$2,
   slugCalloutGradientBottom: slugCalloutGradientBottom$2,
+  aiGradientStart01: aiGradientStart01$2,
+  aiGradientStart02: aiGradientStart02$2,
+  aiGradientEnd: aiGradientEnd$2,
   slugCalloutCaretCenter: slugCalloutCaretCenter$2,
   slugCalloutCaretBottom: slugCalloutCaretBottom$2,
   slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$2,
@@ -1532,25 +1552,31 @@ var slugCalloutGradientTopSelected$1 = colors$1.rgba(colors$1.gray80, 0.85);
 var slugCalloutGradientBottomSelected$1 = colors$1.rgba(colors$1.gray80Hover, 0.85);
 var slugCalloutAuraStartSelected$1 = colors$1.rgba(colors$1.blue20, 0.2);
 var slugCalloutAuraEndSelected$1 = colors$1.rgba(colors$1.gray100, 0);
-// Linear gradient tokens
-var aiGradientStart01$1 = colors$1.rgba(colors$1.blue20, 0.2);
-var aiGradientStart02$1 = 'transparent';
-var aiGradientEnd$1 = 'rgba(38, 38, 38, 0)';
 
-// Phase 2 - new
-var slugCalloutShadowInner$1 = colors$1.rgba(colors$1.blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+var aiInnerShadow$1 = colors$1.rgba(colors$1.blue50, 0.2);
+var aiAuraStart$1 = colors$1.rgba(colors$1.blue50, 0.1);
+var aiAuraEnd$1 = colors$1.rgba(colors$1.black, 0);
+var aiBorderStrong$1 = colors$1.blue40;
+var aiBorderStart$1 = colors$1.blue50;
+var aiBorderEnd$1 = colors$1.rgba(colors$1.blue30, 0.24);
+var aiDropShadow$1 = colors$1.rgba(colors$1.blue60, 0.32);
+
+// Callout
 var slugCalloutShadowOuter01$1 = colors$1.rgba(colors$1.blue80, 0.25);
 var slugCalloutShadowOuter02$1 = colors$1.rgba(colors$1.black, 0.65);
-var slugCalloutBorder01$1 = colors$1.blue50;
-var slugCalloutBorder02$1 = colors$1.rgba(colors$1.blue30, 0.25);
 
-// Changed
-var slugCalloutAuraStart$1 = colors$1.rgba(colors$1.blue50, 0.1);
-var slugCalloutAuraEnd$1 = colors$1.rgba(colors$1.white, 0);
+//// Changed
+var slugCalloutAuraStart$1 = aiAuraStart$1;
+var slugCalloutAuraEnd$1 = aiAuraEnd$1;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 var slugCalloutGradientTop$1 = colors$1.rgba(colors$1.gray100, 0.85);
 var slugCalloutGradientBottom$1 = colors$1.rgba(colors$1.gray90, 0.85);
+var aiGradientStart01$1 = colors$1.rgba(colors$1.blue20, 0.2);
+var aiGradientStart02$1 = 'transparent';
+var aiGradientEnd$1 = 'rgba(38, 38, 38, 0)';
 
 // One off tokens for caret
 var slugCalloutCaretCenter$1 = '#456FB5';
@@ -1675,18 +1701,22 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$1,
   slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$1,
   slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$1,
-  aiGradientStart01: aiGradientStart01$1,
-  aiGradientStart02: aiGradientStart02$1,
-  aiGradientEnd: aiGradientEnd$1,
-  slugCalloutShadowInner: slugCalloutShadowInner$1,
+  aiInnerShadow: aiInnerShadow$1,
+  aiAuraStart: aiAuraStart$1,
+  aiAuraEnd: aiAuraEnd$1,
+  aiBorderStrong: aiBorderStrong$1,
+  aiBorderStart: aiBorderStart$1,
+  aiBorderEnd: aiBorderEnd$1,
+  aiDropShadow: aiDropShadow$1,
   slugCalloutShadowOuter01: slugCalloutShadowOuter01$1,
   slugCalloutShadowOuter02: slugCalloutShadowOuter02$1,
-  slugCalloutBorder01: slugCalloutBorder01$1,
-  slugCalloutBorder02: slugCalloutBorder02$1,
   slugCalloutAuraStart: slugCalloutAuraStart$1,
   slugCalloutAuraEnd: slugCalloutAuraEnd$1,
   slugCalloutGradientTop: slugCalloutGradientTop$1,
   slugCalloutGradientBottom: slugCalloutGradientBottom$1,
+  aiGradientStart01: aiGradientStart01$1,
+  aiGradientStart02: aiGradientStart02$1,
+  aiGradientEnd: aiGradientEnd$1,
   slugCalloutCaretCenter: slugCalloutCaretCenter$1,
   slugCalloutCaretBottom: slugCalloutCaretBottom$1,
   slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$1,
@@ -1945,25 +1975,31 @@ var slugCalloutGradientTopSelected = colors$1.rgba(colors$1.gray80, 0.85);
 var slugCalloutGradientBottomSelected = colors$1.rgba(colors$1.gray80Hover, 0.85);
 var slugCalloutAuraStartSelected = colors$1.rgba(colors$1.blue20, 0.2);
 var slugCalloutAuraEndSelected = colors$1.rgba(colors$1.gray100, 0);
-// Linear gradient tokens
-var aiGradientStart01 = colors$1.rgba(colors$1.blue20, 0.2);
-var aiGradientStart02 = 'transparent';
-var aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
-// Phase 2 - new
-var slugCalloutShadowInner = colors$1.rgba(colors$1.blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+var aiInnerShadow = colors$1.rgba(colors$1.blue50, 0.2);
+var aiAuraStart = colors$1.rgba(colors$1.blue50, 0.1);
+var aiAuraEnd = colors$1.rgba(colors$1.black, 0);
+var aiBorderStrong = colors$1.blue40;
+var aiBorderStart = colors$1.blue50;
+var aiBorderEnd = colors$1.rgba(colors$1.blue30, 0.24);
+var aiDropShadow = colors$1.rgba(colors$1.blue60, 0.32);
+
+// Callout
 var slugCalloutShadowOuter01 = colors$1.rgba(colors$1.blue80, 0.25);
 var slugCalloutShadowOuter02 = colors$1.rgba(colors$1.black, 0.65);
-var slugCalloutBorder01 = colors$1.blue50;
-var slugCalloutBorder02 = colors$1.rgba(colors$1.blue30, 0.25);
 
-// Changed
-var slugCalloutAuraStart = colors$1.rgba(colors$1.blue50, 0.1);
-var slugCalloutAuraEnd = colors$1.rgba(colors$1.white, 0);
+//// Changed
+var slugCalloutAuraStart = aiAuraStart;
+var slugCalloutAuraEnd = aiAuraEnd;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 var slugCalloutGradientTop = colors$1.rgba(colors$1.gray100, 0.85);
 var slugCalloutGradientBottom = colors$1.rgba(colors$1.gray90, 0.85);
+var aiGradientStart01 = colors$1.rgba(colors$1.blue20, 0.2);
+var aiGradientStart02 = 'transparent';
+var aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
 // One off tokens for caret
 var slugCalloutCaretCenter = '#3F68AF';
@@ -2088,18 +2124,22 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected,
   slugCalloutAuraStartSelected: slugCalloutAuraStartSelected,
   slugCalloutAuraEndSelected: slugCalloutAuraEndSelected,
-  aiGradientStart01: aiGradientStart01,
-  aiGradientStart02: aiGradientStart02,
-  aiGradientEnd: aiGradientEnd,
-  slugCalloutShadowInner: slugCalloutShadowInner,
+  aiInnerShadow: aiInnerShadow,
+  aiAuraStart: aiAuraStart,
+  aiAuraEnd: aiAuraEnd,
+  aiBorderStrong: aiBorderStrong,
+  aiBorderStart: aiBorderStart,
+  aiBorderEnd: aiBorderEnd,
+  aiDropShadow: aiDropShadow,
   slugCalloutShadowOuter01: slugCalloutShadowOuter01,
   slugCalloutShadowOuter02: slugCalloutShadowOuter02,
-  slugCalloutBorder01: slugCalloutBorder01,
-  slugCalloutBorder02: slugCalloutBorder02,
   slugCalloutAuraStart: slugCalloutAuraStart,
   slugCalloutAuraEnd: slugCalloutAuraEnd,
   slugCalloutGradientTop: slugCalloutGradientTop,
   slugCalloutGradientBottom: slugCalloutGradientBottom,
+  aiGradientStart01: aiGradientStart01,
+  aiGradientStart02: aiGradientStart02,
+  aiGradientEnd: aiGradientEnd,
   slugCalloutCaretCenter: slugCalloutCaretCenter,
   slugCalloutCaretBottom: slugCalloutCaretBottom,
   slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions,
@@ -5002,7 +5042,9 @@ var ai = TokenGroup.create({
   properties: ['background'],
   tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end',
   // Phase 2
-  'slug-callout-shadow-inner', 'slug-callout-shadow-outer-01', 'slug-callout-shadow-outer-02', 'slug-callout-border-01', 'slug-callout-border-02',
+  'slug-callout-shadow-outer-01', 'slug-callout-shadow-outer-02',
+  // Linear gradient refactor
+  'ai-inner-shadow', 'ai-aura-start', 'ai-aura-end', 'ai-border-strong', 'ai-border-start', 'ai-border-end', 'ai-drop-shadow',
   // Caret tokens
   'slug-callout-caret-center', 'slug-callout-caret-bottom', 'slug-callout-caret-bottom-background', 'slug-callout-caret-bottom-background-actions']
 });
@@ -5444,9 +5486,16 @@ Object.defineProperty(exports, 'spacing13', {
   enumerable: true,
   get: function () { return layout$2.spacing13; }
 });
+exports.aiAuraEnd = aiAuraEnd$3;
+exports.aiAuraStart = aiAuraStart$3;
+exports.aiBorderEnd = aiBorderEnd$3;
+exports.aiBorderStart = aiBorderStart$3;
+exports.aiBorderStrong = aiBorderStrong$3;
+exports.aiDropShadow = aiDropShadow$3;
 exports.aiGradientEnd = aiGradientEnd$3;
 exports.aiGradientStart01 = aiGradientStart01$3;
 exports.aiGradientStart02 = aiGradientStart02$3;
+exports.aiInnerShadow = aiInnerShadow$3;
 exports.background = background$8;
 exports.backgroundActive = backgroundActive$7;
 exports.backgroundBrand = backgroundBrand$7;
@@ -5542,8 +5591,6 @@ exports.slugCalloutAuraStart = slugCalloutAuraStart$3;
 exports.slugCalloutAuraStartHover01 = slugCalloutAuraStartHover01$3;
 exports.slugCalloutAuraStartHover02 = slugCalloutAuraStartHover02$3;
 exports.slugCalloutAuraStartSelected = slugCalloutAuraStartSelected$3;
-exports.slugCalloutBorder01 = slugCalloutBorder01$3;
-exports.slugCalloutBorder02 = slugCalloutBorder02$3;
 exports.slugCalloutCaretBottom = slugCalloutCaretBottom$3;
 exports.slugCalloutCaretBottomBackground = slugCalloutCaretBottomBackground$3;
 exports.slugCalloutCaretBottomBackgroundActions = slugCalloutCaretBottomBackgroundActions$3;
@@ -5554,7 +5601,6 @@ exports.slugCalloutGradientBottomSelected = slugCalloutGradientBottomSelected$3;
 exports.slugCalloutGradientTop = slugCalloutGradientTop$3;
 exports.slugCalloutGradientTopHover = slugCalloutGradientTopHover$3;
 exports.slugCalloutGradientTopSelected = slugCalloutGradientTopSelected$3;
-exports.slugCalloutShadowInner = slugCalloutShadowInner$3;
 exports.slugCalloutShadowOuter01 = slugCalloutShadowOuter01$3;
 exports.slugCalloutShadowOuter02 = slugCalloutShadowOuter02$3;
 exports.slugGradient = slugGradient$3;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "11.29.0",
+  "version": "11.29.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,5 +49,5 @@
     "rimraf": "^5.0.0"
   },
   "sideEffects": false,
-  "gitHead": "6d133d4f920b7c01f6ea2221938a339c14a85b42"
+  "gitHead": "68c58d98fe0c287eb4456c8b5153f6cb7b58c5bf"
 }

package/scss/generated/_themes.scss

@@ -12,9 +12,16 @@
 @use '../utilities';
 
 $white: (
+  ai-aura-end: rgba(255, 255, 255, 0),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: #d0e2ff,
+  ai-border-start: #78a9ff,
+  ai-border-strong: #4589ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(255, 255, 255, 0),
   ai-gradient-start-01: rgba(242, 244, 248, 0.5),
   ai-gradient-start-02: rgba(237, 245, 255, 0.5),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #ffffff,
   background-active: rgba(141, 141, 141, 0.5),
   background-brand: #0f62fe,
@@ -104,8 +111,6 @@ $white: (
   slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5),
   slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5),
   slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6),
-  slug-callout-border-01: #78a9ff,
-  slug-callout-border-02: #d0e2ff,
   slug-callout-caret-bottom: #d0e2ff,
   slug-callout-caret-bottom-background: #d5e5ff,
   slug-callout-caret-bottom-background-actions: #dae5f8,
@@ -116,7 +121,6 @@ $white: (
   slug-callout-gradient-top: rgba(244, 244, 244, 0.85),
   slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55),
   slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85),
-  slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
   slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25),
   slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1),
   slug-gradient: #161616
@@ -154,9 +158,16 @@ $white: utilities.merge(
 );
 
 $g10: (
+  ai-aura-end: rgba(255, 255, 255, 0),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: #d0e2ff,
+  ai-border-start: #78a9ff,
+  ai-border-strong: #4589ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(255, 255, 255, 0),
   ai-gradient-start-01: rgba(242, 244, 248, 0.5),
   ai-gradient-start-02: rgba(237, 245, 255, 0.5),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #f4f4f4,
   background-active: rgba(141, 141, 141, 0.5),
   background-brand: #0f62fe,
@@ -246,8 +257,6 @@ $g10: (
   slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5),
   slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5),
   slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6),
-  slug-callout-border-01: #78a9ff,
-  slug-callout-border-02: #d0e2ff,
   slug-callout-caret-bottom: #d0e2ff,
   slug-callout-caret-bottom-background: #ccdbf8,
   slug-callout-caret-bottom-background-actions: #d2dcee,
@@ -258,7 +267,6 @@ $g10: (
   slug-callout-gradient-top: rgba(244, 244, 244, 0.85),
   slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55),
   slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85),
-  slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
   slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25),
   slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1),
   slug-gradient: #161616
@@ -296,9 +304,16 @@ $g10: utilities.merge(
 );
 
 $g90: (
+  ai-aura-end: rgba(0, 0, 0, 0),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: rgba(166, 200, 255, 0.24),
+  ai-border-start: #4589ff,
+  ai-border-strong: #78a9ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(38, 38, 38, 0),
   ai-gradient-start-01: rgba(208, 226, 255, 0.2),
   ai-gradient-start-02: unquote('transparent'),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #262626,
   background-active: rgba(141, 141, 141, 0.4),
   background-brand: #0f62fe,
@@ -380,7 +395,7 @@ $g90: (
   skeleton-element: #525252,
   slug-background: #c6c6c6,
   slug-background-hover: #e0e0e0,
-  slug-callout-aura-end: rgba(255, 255, 255, 0),
+  slug-callout-aura-end: rgba(0, 0, 0, 0),
   slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0),
   slug-callout-aura-end-hover-02: unquote('transparent'),
   slug-callout-aura-end-selected: rgba(22, 22, 22, 0),
@@ -388,8 +403,6 @@ $g90: (
   slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3),
   slug-callout-aura-start-hover-02: unquote('transparent'),
   slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2),
-  slug-callout-border-01: #4589ff,
-  slug-callout-border-02: rgba(166, 200, 255, 0.25),
   slug-callout-caret-bottom: #465060,
   slug-callout-caret-bottom-background: #2d3f5c,
   slug-callout-caret-bottom-background-actions: #253042,
@@ -400,7 +413,6 @@ $g90: (
   slug-callout-gradient-top: rgba(22, 22, 22, 0.85),
   slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55),
   slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85),
-  slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
   slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25),
   slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65),
   slug-gradient: #8d8d8d
@@ -438,9 +450,16 @@ $g90: utilities.merge(
 );
 
 $g100: (
+  ai-aura-end: rgba(0, 0, 0, 0),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: rgba(166, 200, 255, 0.24),
+  ai-border-start: #4589ff,
+  ai-border-strong: #78a9ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(38, 38, 38, 0),
   ai-gradient-start-01: rgba(208, 226, 255, 0.2),
   ai-gradient-start-02: unquote('transparent'),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #161616,
   background-active: rgba(141, 141, 141, 0.4),
   background-brand: #0f62fe,
@@ -522,7 +541,7 @@ $g100: (
   skeleton-element: #393939,
   slug-background: #c6c6c6,
   slug-background-hover: #e0e0e0,
-  slug-callout-aura-end: rgba(255, 255, 255, 0),
+  slug-callout-aura-end: rgba(0, 0, 0, 0),
   slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0),
   slug-callout-aura-end-hover-02: unquote('transparent'),
   slug-callout-aura-end-selected: rgba(22, 22, 22, 0),
@@ -530,8 +549,6 @@ $g100: (
   slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3),
   slug-callout-aura-start-hover-02: unquote('transparent'),
   slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2),
-  slug-callout-border-01: #4589ff,
-  slug-callout-border-02: rgba(166, 200, 255, 0.25),
   slug-callout-caret-bottom: #3d4655,
   slug-callout-caret-bottom-background: #213250,
   slug-callout-caret-bottom-background-actions: #192436,
@@ -542,7 +559,6 @@ $g100: (
   slug-callout-gradient-top: rgba(22, 22, 22, 0.85),
   slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55),
   slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85),
-  slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
   slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25),
   slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65),
   slug-gradient: #8d8d8d

package/scss/generated/_tokens.scss

@@ -378,20 +378,32 @@ $ai-gradient-start-02: _get('ai-gradient-start-02') !default;
 /// The CSS Custom Property for the `ai-gradient-end` token
 $ai-gradient-end: _get('ai-gradient-end') !default;
 
-/// The CSS Custom Property for the `slug-callout-shadow-inner` token
-$slug-callout-shadow-inner: _get('slug-callout-shadow-inner') !default;
-
 /// The CSS Custom Property for the `slug-callout-shadow-outer-01` token
 $slug-callout-shadow-outer-01: _get('slug-callout-shadow-outer-01') !default;
 
 /// The CSS Custom Property for the `slug-callout-shadow-outer-02` token
 $slug-callout-shadow-outer-02: _get('slug-callout-shadow-outer-02') !default;
 
-/// The CSS Custom Property for the `slug-callout-border-01` token
-$slug-callout-border-01: _get('slug-callout-border-01') !default;
+/// The CSS Custom Property for the `ai-inner-shadow` token
+$ai-inner-shadow: _get('ai-inner-shadow') !default;
+
+/// The CSS Custom Property for the `ai-aura-start` token
+$ai-aura-start: _get('ai-aura-start') !default;
+
+/// The CSS Custom Property for the `ai-aura-end` token
+$ai-aura-end: _get('ai-aura-end') !default;
+
+/// The CSS Custom Property for the `ai-border-strong` token
+$ai-border-strong: _get('ai-border-strong') !default;
+
+/// The CSS Custom Property for the `ai-border-start` token
+$ai-border-start: _get('ai-border-start') !default;
+
+/// The CSS Custom Property for the `ai-border-end` token
+$ai-border-end: _get('ai-border-end') !default;
 
-/// The CSS Custom Property for the `slug-callout-border-02` token
-$slug-callout-border-02: _get('slug-callout-border-02') !default;
+/// The CSS Custom Property for the `ai-drop-shadow` token
+$ai-drop-shadow: _get('ai-drop-shadow') !default;
 
 /// The CSS Custom Property for the `slug-callout-caret-center` token
 $slug-callout-caret-center: _get('slug-callout-caret-center') !default;

package/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';

package/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';