@carbon/themes 11.28.0 → 11.29.0

package/lib/index.js

@@ -696,10 +696,6 @@ var slugGradient$3 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").co
 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);
@@ -715,6 +711,27 @@ 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);
+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,
@@ -822,10 +839,6 @@ var white$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -839,6 +852,19 @@ var white$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -1083,10 +1109,6 @@ var slugGradient$2 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").co
 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);
@@ -1102,6 +1124,27 @@ 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);
+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,
@@ -1209,10 +1252,6 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -1226,6 +1265,19 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -1375,12 +1427,12 @@ var fieldHover03$1 = colors$1.gray60Hover;
 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;
@@ -1470,10 +1522,6 @@ var slugGradient$1 = "".concat(colors$1.gray50, " linear-gradient(135deg, ").con
 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);
@@ -1489,6 +1537,27 @@ 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);
+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,
@@ -1596,10 +1665,6 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -1613,6 +1678,19 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -1762,12 +1840,12 @@ var fieldHover03 = colors$1.gray70Hover;
 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;
@@ -1857,10 +1935,6 @@ var slugGradient = "".concat(colors$1.gray50, " linear-gradient(135deg, ").conca
 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);
@@ -1876,6 +1950,27 @@ 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);
+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,
@@ -1983,10 +2078,6 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   slugBackgroundHover: slugBackgroundHover,
   slugGradientHover: slugGradientHover,
   slugHollowHover: slugHollowHover,
-  slugCalloutGradientTop: slugCalloutGradientTop,
-  slugCalloutGradientBottom: slugCalloutGradientBottom,
-  slugCalloutAuraStart: slugCalloutAuraStart,
-  slugCalloutAuraEnd: slugCalloutAuraEnd,
   slugCalloutGradientTopHover: slugCalloutGradientTopHover,
   slugCalloutGradientBottomHover: slugCalloutGradientBottomHover,
   slugCalloutAuraStartHover01: slugCalloutAuraStartHover01,
@@ -2000,6 +2091,19 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -4896,7 +5000,11 @@ var contextual = TokenGroup.create({
 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',
@@ -5434,12 +5542,21 @@ 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;
+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;

package/package.json

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

package/scss/generated/_themes.scss

@@ -100,16 +100,25 @@ $white: (
   slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0),
   slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0),
   slug-callout-aura-end-selected: rgba(255, 255, 255, 0),
-  slug-callout-aura-start: rgba(237, 245, 255, 0.6),
+  slug-callout-aura-start: rgba(69, 137, 255, 0.1),
   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,
+  slug-callout-caret-center: #a7c7ff,
   slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85),
   slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55),
   slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85),
   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
     linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%),
   slug-gradient-hover: #161616
@@ -233,16 +242,25 @@ $g10: (
   slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0),
   slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0),
   slug-callout-aura-end-selected: rgba(255, 255, 255, 0),
-  slug-callout-aura-start: rgba(237, 245, 255, 0.6),
+  slug-callout-aura-start: rgba(69, 137, 255, 0.1),
   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,
+  slug-callout-caret-center: #a7c7ff,
   slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85),
   slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55),
   slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85),
   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
     linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%),
   slug-gradient-hover: #161616
@@ -296,11 +314,11 @@ $g90: (
   border-strong-02: #a8a8a8,
   border-strong-03: #c6c6c6,
   border-subtle-00: #525252,
-  border-subtle-01: #525252,
-  border-subtle-02: #6f6f6f,
+  border-subtle-01: #6f6f6f,
+  border-subtle-02: #8d8d8d,
   border-subtle-03: #8d8d8d,
-  border-subtle-selected-01: #6f6f6f,
-  border-subtle-selected-02: #8d8d8d,
+  border-subtle-selected-01: #8d8d8d,
+  border-subtle-selected-02: #a8a8a8,
   border-subtle-selected-03: #a8a8a8,
   border-tile-01: #6f6f6f,
   border-tile-02: #8d8d8d,
@@ -362,20 +380,29 @@ $g90: (
   skeleton-element: #525252,
   slug-background: #c6c6c6,
   slug-background-hover: #e0e0e0,
-  slug-callout-aura-end: rgba(22, 22, 22, 0),
+  slug-callout-aura-end: rgba(255, 255, 255, 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),
-  slug-callout-aura-start: rgba(208, 226, 255, 0.2),
+  slug-callout-aura-start: rgba(69, 137, 255, 0.1),
   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,
+  slug-callout-caret-center: #456fb5,
   slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85),
   slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55),
   slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85),
   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
     linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%),
   slug-gradient-hover: #a8a8a8
@@ -429,11 +456,11 @@ $g100: (
   border-strong-02: #8d8d8d,
   border-strong-03: #a8a8a8,
   border-subtle-00: #393939,
-  border-subtle-01: #393939,
-  border-subtle-02: #525252,
+  border-subtle-01: #525252,
+  border-subtle-02: #6f6f6f,
   border-subtle-03: #6f6f6f,
-  border-subtle-selected-01: #525252,
-  border-subtle-selected-02: #6f6f6f,
+  border-subtle-selected-01: #6f6f6f,
+  border-subtle-selected-02: #8d8d8d,
   border-subtle-selected-03: #8d8d8d,
   border-tile-01: #525252,
   border-tile-02: #6f6f6f,
@@ -495,20 +522,29 @@ $g100: (
   skeleton-element: #393939,
   slug-background: #c6c6c6,
   slug-background-hover: #e0e0e0,
-  slug-callout-aura-end: rgba(22, 22, 22, 0),
+  slug-callout-aura-end: rgba(255, 255, 255, 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),
-  slug-callout-aura-start: rgba(208, 226, 255, 0.2),
+  slug-callout-aura-start: rgba(69, 137, 255, 0.1),
   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,
+  slug-callout-caret-center: #3f68af,
   slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85),
   slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55),
   slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85),
   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
     linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%),
   slug-gradient-hover: #a8a8a8

package/scss/generated/_tokens.scss

@@ -378,6 +378,37 @@ $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 `slug-callout-border-02` token
+$slug-callout-border-02: _get('slug-callout-border-02') !default;
+
+/// The CSS Custom Property for the `slug-callout-caret-center` token
+$slug-callout-caret-center: _get('slug-callout-caret-center') !default;
+
+/// The CSS Custom Property for the `slug-callout-caret-bottom` token
+$slug-callout-caret-bottom: _get('slug-callout-caret-bottom') !default;
+
+/// The CSS Custom Property for the `slug-callout-caret-bottom-background` token
+$slug-callout-caret-bottom-background: _get(
+  'slug-callout-caret-bottom-background'
+) !default;
+
+/// The CSS Custom Property for the `slug-callout-caret-bottom-background-actions` token
+$slug-callout-caret-bottom-background-actions: _get(
+  'slug-callout-caret-bottom-background-actions'
+) !default;
+
 /// The CSS Custom Property for the `highlight` token
 $highlight: _get('highlight') !default;
 

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);
@@ -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 = '#D2DCEE';
+export const slugCalloutCaretBottomBackground = '#CCDBF8';
+
 export {
   // Type
   caption01,

package/src/g100.js

@@ -123,12 +123,12 @@ export const fieldHover03 = gray70Hover;
 export const borderSubtle00 = gray80;
 
 // border-subtle-01
-export const borderSubtle01 = gray80;
-export const borderSubtleSelected01 = gray70;
+export const borderSubtle01 = gray70;
+export const borderSubtleSelected01 = gray60;
 
 // border-subtle-02
-export const borderSubtle02 = gray70;
-export const borderSubtleSelected02 = gray60;
+export const borderSubtle02 = gray60;
+export const borderSubtleSelected02 = gray50;
 
 // border-subtle-03
 export const borderSubtle03 = gray60;
@@ -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);
@@ -237,6 +233,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 = '#3F68AF';
+export const slugCalloutCaretBottom = '#3D4655';
+export const slugCalloutCaretBottomBackgroundActions = '#192436';
+export const slugCalloutCaretBottomBackground = '#213250';
+
 export {
   // Type
   caption01,