@carbon/themes 11.28.0 → 11.29.0

package/src/g90.js

@@ -35,6 +35,7 @@ import {
   // Support
   blue30,
   blue50,
+  blue80,
   green40,
   green50,
   yellow30,
@@ -123,12 +124,12 @@ export const fieldHover03 = gray60Hover;
 export const borderSubtle00 = gray70;
 
 // border-subtle-01
-export const borderSubtle01 = gray70;
-export const borderSubtleSelected01 = gray60;
+export const borderSubtle01 = gray60;
+export const borderSubtleSelected01 = gray50;
 
 // border-subtle-02
-export const borderSubtle02 = gray60;
-export const borderSubtleSelected02 = gray50;
+export const borderSubtle02 = gray50;
+export const borderSubtleSelected02 = gray40;
 
 // border-subtle-03
 export const borderSubtle03 = gray50;
@@ -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);
@@ -237,6 +234,28 @@ 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);
+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);
+
+// Not used in phase 2 / possibly remove?
+export const slugCalloutGradientTop = rgba(gray100, 0.85);
+export const slugCalloutGradientBottom = rgba(gray90, 0.85);
+
+// 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,17 @@ export const ai = TokenGroup.create({
     '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',
+    // 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);
@@ -231,6 +228,28 @@ 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);
+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);
+
+// Not used in phase 2 / possibly remove?
+export const slugCalloutGradientTop = rgba(gray10, 0.85);
+export const slugCalloutGradientBottom = rgba(gray20, 0.85);
+
+// 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);
@@ -712,6 +708,27 @@
   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);
+  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);
+
+  // 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);
+
+  // 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 +836,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,
@@ -836,6 +849,19 @@
     aiGradientStart01: aiGradientStart01$3,
     aiGradientStart02: aiGradientStart02$3,
     aiGradientEnd: aiGradientEnd$3,
+    slugCalloutShadowInner: slugCalloutShadowInner$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,
+    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 +1106,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);
@@ -1099,6 +1121,27 @@
   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);
+  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);
+
+  // 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);
+
+  // 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 +1249,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,
@@ -1223,6 +1262,19 @@
     aiGradientStart01: aiGradientStart01$2,
     aiGradientStart02: aiGradientStart02$2,
     aiGradientEnd: aiGradientEnd$2,
+    slugCalloutShadowInner: slugCalloutShadowInner$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,
+    slugCalloutCaretCenter: slugCalloutCaretCenter$2,
+    slugCalloutCaretBottom: slugCalloutCaretBottom$2,
+    slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$2,
+    slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$2,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1372,12 +1424,12 @@
   var borderSubtle00$1 = colors$1.gray70;
 
   // border-subtle-01
-  var borderSubtle01$1 = colors$1.gray70;
-  var borderSubtleSelected01$1 = colors$1.gray60;
+  var borderSubtle01$1 = colors$1.gray60;
+  var borderSubtleSelected01$1 = colors$1.gray50;
 
   // border-subtle-02
-  var borderSubtle02$1 = colors$1.gray60;
-  var borderSubtleSelected02$1 = colors$1.gray50;
+  var borderSubtle02$1 = colors$1.gray50;
+  var borderSubtleSelected02$1 = colors$1.gray40;
 
   // border-subtle-03
   var borderSubtle03$1 = colors$1.gray50;
@@ -1467,10 +1519,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);
@@ -1486,6 +1534,27 @@
   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);
+  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);
+
+  // 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);
+
+  // 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 +1662,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,
@@ -1610,6 +1675,19 @@
     aiGradientStart01: aiGradientStart01$1,
     aiGradientStart02: aiGradientStart02$1,
     aiGradientEnd: aiGradientEnd$1,
+    slugCalloutShadowInner: slugCalloutShadowInner$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,
+    slugCalloutCaretCenter: slugCalloutCaretCenter$1,
+    slugCalloutCaretBottom: slugCalloutCaretBottom$1,
+    slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$1,
+    slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$1,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1759,12 +1837,12 @@
   var borderSubtle00 = colors$1.gray80;
 
   // border-subtle-01
-  var borderSubtle01 = colors$1.gray80;
-  var borderSubtleSelected01 = colors$1.gray70;
+  var borderSubtle01 = colors$1.gray70;
+  var borderSubtleSelected01 = colors$1.gray60;
 
   // border-subtle-02
-  var borderSubtle02 = colors$1.gray70;
-  var borderSubtleSelected02 = colors$1.gray60;
+  var borderSubtle02 = colors$1.gray60;
+  var borderSubtleSelected02 = colors$1.gray50;
 
   // border-subtle-03
   var borderSubtle03 = colors$1.gray60;
@@ -1854,10 +1932,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);
@@ -1873,6 +1947,27 @@
   var aiGradientStart02 = 'transparent';
   var aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
+  // Phase 2 - new
+  var slugCalloutShadowInner = colors$1.rgba(colors$1.blue50, 0.2);
+  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);
+
+  // 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);
+
+  // 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 +2075,6 @@
     slugBackgroundHover: slugBackgroundHover,
     slugGradientHover: slugGradientHover,
     slugHollowHover: slugHollowHover,
-    slugCalloutGradientTop: slugCalloutGradientTop,
-    slugCalloutGradientBottom: slugCalloutGradientBottom,
-    slugCalloutAuraStart: slugCalloutAuraStart,
-    slugCalloutAuraEnd: slugCalloutAuraEnd,
     slugCalloutGradientTopHover: slugCalloutGradientTopHover,
     slugCalloutGradientBottomHover: slugCalloutGradientBottomHover,
     slugCalloutAuraStartHover01: slugCalloutAuraStartHover01,
@@ -1997,6 +2088,19 @@
     aiGradientStart01: aiGradientStart01,
     aiGradientStart02: aiGradientStart02,
     aiGradientEnd: aiGradientEnd,
+    slugCalloutShadowInner: slugCalloutShadowInner,
+    slugCalloutShadowOuter01: slugCalloutShadowOuter01,
+    slugCalloutShadowOuter02: slugCalloutShadowOuter02,
+    slugCalloutBorder01: slugCalloutBorder01,
+    slugCalloutBorder02: slugCalloutBorder02,
+    slugCalloutAuraStart: slugCalloutAuraStart,
+    slugCalloutAuraEnd: slugCalloutAuraEnd,
+    slugCalloutGradientTop: slugCalloutGradientTop,
+    slugCalloutGradientBottom: slugCalloutGradientBottom,
+    slugCalloutCaretCenter: slugCalloutCaretCenter,
+    slugCalloutCaretBottom: slugCalloutCaretBottom,
+    slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions,
+    slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -4893,7 +4997,11 @@
   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-inner', 'slug-callout-shadow-outer-01', 'slug-callout-shadow-outer-02', 'slug-callout-border-01', 'slug-callout-border-02',
+    // 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',
@@ -5431,12 +5539,21 @@
   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;
+  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.slugCalloutShadowInner = slugCalloutShadowInner$3;
+  exports.slugCalloutShadowOuter01 = slugCalloutShadowOuter01$3;
+  exports.slugCalloutShadowOuter02 = slugCalloutShadowOuter02$3;
   exports.slugGradient = slugGradient$3;
   exports.slugGradientHover = slugGradientHover$3;
   exports.slugHollowHover = slugHollowHover$3;