@carbon/themes 11.29.0-rc.0 → 11.29.1

package/src/g10.js

@@ -42,6 +42,7 @@ import {
   purple60,
 
   // Constants
+  black,
   white,
   whiteHover,
   rgba,
@@ -212,10 +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 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);
 export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
 export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
 export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
@@ -226,11 +223,38 @@ 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
+
+//// 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);
+
+//// 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);
 
+// One off tokens for caret
+export const slugCalloutCaretCenter = '#A7C7FF';
+export const slugCalloutCaretBottom = blue20;
+export const slugCalloutCaretBottomBackgroundActions = '#D2DCEE';
+export const slugCalloutCaretBottomBackground = '#CCDBF8';
+
 export {
   // Type
   caption01,

package/src/g100.js

@@ -218,10 +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 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);
 export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
 export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
 export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
@@ -232,11 +228,38 @@ 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
+
+//// 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);
+
+//// 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)';
 
+// One off tokens for caret
+export const slugCalloutCaretCenter = '#3F68AF';
+export const slugCalloutCaretBottom = '#3D4655';
+export const slugCalloutCaretBottomBackgroundActions = '#192436';
+export const slugCalloutCaretBottomBackground = '#213250';
+
 export {
   // Type
   caption01,

package/src/g90.js

@@ -12,6 +12,7 @@ import {
   blue40,
   blue60,
   blue70,
+  blue80,
 
   // Gray
   gray10,
@@ -218,10 +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 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);
 export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
 export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
 export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
@@ -232,11 +229,38 @@ 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
+
+//// 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);
+
+//// 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)';
 
+// One off tokens for caret
+export const slugCalloutCaretCenter = '#456FB5';
+export const slugCalloutCaretBottom = '#465060';
+export const slugCalloutCaretBottomBackgroundActions = '#253042';
+export const slugCalloutCaretBottomBackground = '#2D3F5C';
+
 export {
   // Type
   caption01,

package/src/tokens/v11TokenGroup.js

@@ -367,6 +367,22 @@ export const ai = TokenGroup.create({
     'ai-gradient-start-01',
     'ai-gradient-start-02',
     'ai-gradient-end',
+    // Phase 2
+    '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',
   ],
 });
 

package/src/white.js

@@ -42,6 +42,7 @@ import {
   purple60,
 
   // Constants
+  black,
   white,
   whiteHover,
   rgba,
@@ -212,10 +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 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);
 export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
 export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
 export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
@@ -226,11 +223,38 @@ 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
+
+//// 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);
+
+//// 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);
 
+// One off tokens for caret
+export const slugCalloutCaretCenter = '#A7C7FF';
+export const slugCalloutCaretBottom = blue20;
+export const slugCalloutCaretBottomBackgroundActions = '#DAE5F8';
+export const slugCalloutCaretBottomBackground = '#D5E5FF';
+
 // Type
 export {
   caption01,

package/umd/index.js

@@ -693,10 +693,6 @@
   var slugBackgroundHover$3 = colors$1.gray60;
   var slugGradientHover$3 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray20Hover, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
   var slugHollowHover$3 = colors$1.gray80Hover;
-  var slugCalloutGradientTop$3 = colors$1.rgba(colors$1.gray10, 0.85);
-  var slugCalloutGradientBottom$3 = colors$1.rgba(colors$1.gray20, 0.85);
-  var slugCalloutAuraStart$3 = colors$1.rgba(colors$1.blue10, 0.6);
-  var slugCalloutAuraEnd$3 = colors$1.rgba(colors$1.white, 0);
   var slugCalloutGradientTopHover$3 = colors$1.rgba(colors$1.gray20, 0.55);
   var slugCalloutGradientBottomHover$3 = colors$1.rgba(colors$1.gray20Hover, 0.55);
   var slugCalloutAuraStartHover01$3 = colors$1.rgba(colors$1.white, 0.5);
@@ -707,11 +703,38 @@
   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
+
+  //// 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);
+
+  //// Changed
+  var slugCalloutAuraStart$3 = aiAuraStart$3;
+  var slugCalloutAuraEnd$3 = aiAuraEnd$3;
+
+  //// 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';
+  var slugCalloutCaretBottom$3 = colors$1.blue20;
+  var slugCalloutCaretBottomBackgroundActions$3 = '#DAE5F8';
+  var slugCalloutCaretBottomBackground$3 = '#D5E5FF';
+
   var white$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$8,
@@ -819,10 +842,6 @@
     slugBackgroundHover: slugBackgroundHover$3,
     slugGradientHover: slugGradientHover$3,
     slugHollowHover: slugHollowHover$3,
-    slugCalloutGradientTop: slugCalloutGradientTop$3,
-    slugCalloutGradientBottom: slugCalloutGradientBottom$3,
-    slugCalloutAuraStart: slugCalloutAuraStart$3,
-    slugCalloutAuraEnd: slugCalloutAuraEnd$3,
     slugCalloutGradientTopHover: slugCalloutGradientTopHover$3,
     slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$3,
     slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$3,
@@ -833,9 +852,26 @@
     slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$3,
     slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$3,
     slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$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,
+    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,
+    slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$3,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1080,10 +1116,6 @@
   var slugBackgroundHover$2 = colors$1.gray60;
   var slugGradientHover$2 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray20Hover, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
   var slugHollowHover$2 = colors$1.gray80Hover;
-  var slugCalloutGradientTop$2 = colors$1.rgba(colors$1.gray10, 0.85);
-  var slugCalloutGradientBottom$2 = colors$1.rgba(colors$1.gray20, 0.85);
-  var slugCalloutAuraStart$2 = colors$1.rgba(colors$1.blue10, 0.6);
-  var slugCalloutAuraEnd$2 = colors$1.rgba(colors$1.white, 0);
   var slugCalloutGradientTopHover$2 = colors$1.rgba(colors$1.gray20, 0.55);
   var slugCalloutGradientBottomHover$2 = colors$1.rgba(colors$1.gray20Hover, 0.55);
   var slugCalloutAuraStartHover01$2 = colors$1.rgba(colors$1.white, 0.5);
@@ -1094,11 +1126,38 @@
   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
+
+  //// 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);
+
+  //// Changed
+  var slugCalloutAuraStart$2 = aiAuraStart$2;
+  var slugCalloutAuraEnd$2 = aiAuraEnd$2;
+
+  //// 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';
+  var slugCalloutCaretBottom$2 = colors$1.blue20;
+  var slugCalloutCaretBottomBackgroundActions$2 = '#D2DCEE';
+  var slugCalloutCaretBottomBackground$2 = '#CCDBF8';
+
   var g10$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$7,
@@ -1206,10 +1265,6 @@
     slugBackgroundHover: slugBackgroundHover$2,
     slugGradientHover: slugGradientHover$2,
     slugHollowHover: slugHollowHover$2,
-    slugCalloutGradientTop: slugCalloutGradientTop$2,
-    slugCalloutGradientBottom: slugCalloutGradientBottom$2,
-    slugCalloutAuraStart: slugCalloutAuraStart$2,
-    slugCalloutAuraEnd: slugCalloutAuraEnd$2,
     slugCalloutGradientTopHover: slugCalloutGradientTopHover$2,
     slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$2,
     slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$2,
@@ -1220,9 +1275,26 @@
     slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$2,
     slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$2,
     slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$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,
+    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,
+    slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$2,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1467,10 +1539,6 @@
   var slugBackgroundHover$1 = colors$1.gray20;
   var slugGradientHover$1 = "".concat(colors$1.gray40, " linear-gradient(135deg, ").concat(colors$1.white, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
   var slugHollowHover$1 = colors$1.gray30Hover;
-  var slugCalloutGradientTop$1 = colors$1.rgba(colors$1.gray100, 0.85);
-  var slugCalloutGradientBottom$1 = colors$1.rgba(colors$1.gray90, 0.85);
-  var slugCalloutAuraStart$1 = colors$1.rgba(colors$1.blue20, 0.2);
-  var slugCalloutAuraEnd$1 = colors$1.rgba(colors$1.gray100, 0);
   var slugCalloutGradientTopHover$1 = colors$1.rgba(colors$1.gray80, 0.55);
   var slugCalloutGradientBottomHover$1 = colors$1.rgba(colors$1.gray80Hover, 0.55);
   var slugCalloutAuraStartHover01$1 = colors$1.rgba(colors$1.blue20Hover, 0.3);
@@ -1481,11 +1549,38 @@
   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
+
+  //// 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);
+
+  //// Changed
+  var slugCalloutAuraStart$1 = aiAuraStart$1;
+  var slugCalloutAuraEnd$1 = aiAuraEnd$1;
+
+  //// 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';
+  var slugCalloutCaretBottom$1 = '#465060';
+  var slugCalloutCaretBottomBackgroundActions$1 = '#253042';
+  var slugCalloutCaretBottomBackground$1 = '#2D3F5C';
+
   var g90$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$6,
@@ -1593,10 +1688,6 @@
     slugBackgroundHover: slugBackgroundHover$1,
     slugGradientHover: slugGradientHover$1,
     slugHollowHover: slugHollowHover$1,
-    slugCalloutGradientTop: slugCalloutGradientTop$1,
-    slugCalloutGradientBottom: slugCalloutGradientBottom$1,
-    slugCalloutAuraStart: slugCalloutAuraStart$1,
-    slugCalloutAuraEnd: slugCalloutAuraEnd$1,
     slugCalloutGradientTopHover: slugCalloutGradientTopHover$1,
     slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$1,
     slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$1,
@@ -1607,9 +1698,26 @@
     slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$1,
     slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$1,
     slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$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,
+    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,
+    slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$1,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1854,10 +1962,6 @@
   var slugBackgroundHover = colors$1.gray20;
   var slugGradientHover = "".concat(colors$1.gray40, " linear-gradient(135deg, ").concat(colors$1.white, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
   var slugHollowHover = colors$1.gray30Hover;
-  var slugCalloutGradientTop = colors$1.rgba(colors$1.gray100, 0.85);
-  var slugCalloutGradientBottom = colors$1.rgba(colors$1.gray90, 0.85);
-  var slugCalloutAuraStart = colors$1.rgba(colors$1.blue20, 0.2);
-  var slugCalloutAuraEnd = colors$1.rgba(colors$1.gray100, 0);
   var slugCalloutGradientTopHover = colors$1.rgba(colors$1.gray80, 0.55);
   var slugCalloutGradientBottomHover = colors$1.rgba(colors$1.gray80Hover, 0.55);
   var slugCalloutAuraStartHover01 = colors$1.rgba(colors$1.blue20Hover, 0.3);
@@ -1868,11 +1972,38 @@
   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
+
+  //// 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);
+
+  //// Changed
+  var slugCalloutAuraStart = aiAuraStart;
+  var slugCalloutAuraEnd = aiAuraEnd;
+
+  //// 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';
+  var slugCalloutCaretBottom = '#3D4655';
+  var slugCalloutCaretBottomBackgroundActions = '#192436';
+  var slugCalloutCaretBottomBackground = '#213250';
+
   var g100$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$5,
@@ -1980,10 +2111,6 @@
     slugBackgroundHover: slugBackgroundHover,
     slugGradientHover: slugGradientHover,
     slugHollowHover: slugHollowHover,
-    slugCalloutGradientTop: slugCalloutGradientTop,
-    slugCalloutGradientBottom: slugCalloutGradientBottom,
-    slugCalloutAuraStart: slugCalloutAuraStart,
-    slugCalloutAuraEnd: slugCalloutAuraEnd,
     slugCalloutGradientTopHover: slugCalloutGradientTopHover,
     slugCalloutGradientBottomHover: slugCalloutGradientBottomHover,
     slugCalloutAuraStartHover01: slugCalloutAuraStartHover01,
@@ -1994,9 +2121,26 @@
     slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected,
     slugCalloutAuraStartSelected: slugCalloutAuraStartSelected,
     slugCalloutAuraEndSelected: slugCalloutAuraEndSelected,
+    aiInnerShadow: aiInnerShadow,
+    aiAuraStart: aiAuraStart,
+    aiAuraEnd: aiAuraEnd,
+    aiBorderStrong: aiBorderStrong,
+    aiBorderStart: aiBorderStart,
+    aiBorderEnd: aiBorderEnd,
+    aiDropShadow: aiDropShadow,
+    slugCalloutShadowOuter01: slugCalloutShadowOuter01,
+    slugCalloutShadowOuter02: slugCalloutShadowOuter02,
+    slugCalloutAuraStart: slugCalloutAuraStart,
+    slugCalloutAuraEnd: slugCalloutAuraEnd,
+    slugCalloutGradientTop: slugCalloutGradientTop,
+    slugCalloutGradientBottom: slugCalloutGradientBottom,
     aiGradientStart01: aiGradientStart01,
     aiGradientStart02: aiGradientStart02,
     aiGradientEnd: aiGradientEnd,
+    slugCalloutCaretCenter: slugCalloutCaretCenter,
+    slugCalloutCaretBottom: slugCalloutCaretBottom,
+    slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions,
+    slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -4893,7 +5037,13 @@
   var ai = TokenGroup.create({
     name: 'AI',
     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']
+    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-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']
   });
   var group = TokenGroup.create({
     name: 'All',
@@ -5333,9 +5483,16 @@
     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;
@@ -5431,12 +5588,18 @@
   exports.slugCalloutAuraStartHover01 = slugCalloutAuraStartHover01$3;
   exports.slugCalloutAuraStartHover02 = slugCalloutAuraStartHover02$3;
   exports.slugCalloutAuraStartSelected = slugCalloutAuraStartSelected$3;
+  exports.slugCalloutCaretBottom = slugCalloutCaretBottom$3;
+  exports.slugCalloutCaretBottomBackground = slugCalloutCaretBottomBackground$3;
+  exports.slugCalloutCaretBottomBackgroundActions = slugCalloutCaretBottomBackgroundActions$3;
+  exports.slugCalloutCaretCenter = slugCalloutCaretCenter$3;
   exports.slugCalloutGradientBottom = slugCalloutGradientBottom$3;
   exports.slugCalloutGradientBottomHover = slugCalloutGradientBottomHover$3;
   exports.slugCalloutGradientBottomSelected = slugCalloutGradientBottomSelected$3;
   exports.slugCalloutGradientTop = slugCalloutGradientTop$3;
   exports.slugCalloutGradientTopHover = slugCalloutGradientTopHover$3;
   exports.slugCalloutGradientTopSelected = slugCalloutGradientTopSelected$3;
+  exports.slugCalloutShadowOuter01 = slugCalloutShadowOuter01$3;
+  exports.slugCalloutShadowOuter02 = slugCalloutShadowOuter02$3;
   exports.slugGradient = slugGradient$3;
   exports.slugGradientHover = slugGradientHover$3;
   exports.slugHollowHover = slugHollowHover$3;