@carbon/themes 11.26.0-rc.0 → 11.26.0

package/es/index.js

@@ -1,4 +1,4 @@
-import { white as white$2, gray80, blue60, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray50, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green50, yellow30, red50, green40, blue50, orange40, blue20, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, purple50, gray90Hover, rgba, black, blue80, green60, red80, red20, red70, red20Hover, red70Hover, magenta20, magenta70, magenta80, magenta20Hover, magenta70Hover, purple20, purple70, purple80, purple20Hover, purple70Hover, blue20Hover, blue70Hover, cyan20, cyan70, cyan80, cyan20Hover, cyan70Hover, teal20, teal70, teal80, teal20Hover, teal70Hover, green20, green70, green80, green20Hover, green70Hover, coolGray20, coolGray70, coolGray80, coolGray20Hover, coolGray70Hover, warmGray20, warmGray70, warmGray80, warmGray20Hover, warmGray70Hover, red10, green10, blue10, white0 } from '@carbon/colors';
+import { white as white$2, gray80, blue60, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray50, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green50, yellow30, red50, green40, blue50, orange40, blue20, rgba, blue10, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, purple50, gray90Hover, black, gray30Hover, blue80, green60, red80, red20, red70, red20Hover, red70Hover, magenta20, magenta70, magenta80, magenta20Hover, magenta70Hover, purple20, purple70, purple80, purple20Hover, purple70Hover, blue20Hover, blue70Hover, cyan20, cyan70, cyan80, cyan20Hover, cyan70Hover, teal20, teal70, teal80, teal20Hover, teal70Hover, green20, green70, green80, green20Hover, green70Hover, coolGray20, coolGray70, coolGray80, coolGray20Hover, coolGray70Hover, warmGray20, warmGray70, warmGray80, warmGray20Hover, warmGray70Hover, red10, green10, white0 } from '@carbon/colors';
 import Color from 'color';
 import { caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, unstable_tokens } from '@carbon/type';
 export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, helperText02, label01, label02, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
@@ -683,6 +683,17 @@ var overlay$7 = 'rgba(22, 22, 22, 0.5)';
 var toggleOff$7 = gray50;
 var shadow$7 = 'rgba(0, 0, 0, 0.3)';
 
+// AI
+var slugBackground$3 = gray70;
+var slugGradient$3 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray40, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugBackgroundHover$3 = gray60;
+var slugGradientHover$3 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray20Hover, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugHollowHover$3 = gray80Hover;
+var slugCalloutGradientTop$3 = rgba(gray10, 0.85);
+var slugCalloutGradientBottom$3 = rgba(gray20, 0.85);
+var slugCalloutAuraStart$3 = rgba(blue10, 0.6);
+var slugCalloutAuraEnd$3 = rgba(white$2, 0);
+
 var white$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$8,
@@ -785,6 +796,15 @@ var white$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$7,
   toggleOff: toggleOff$7,
   shadow: shadow$7,
+  slugBackground: slugBackground$3,
+  slugGradient: slugGradient$3,
+  slugBackgroundHover: slugBackgroundHover$3,
+  slugGradientHover: slugGradientHover$3,
+  slugHollowHover: slugHollowHover$3,
+  slugCalloutGradientTop: slugCalloutGradientTop$3,
+  slugCalloutGradientBottom: slugCalloutGradientBottom$3,
+  slugCalloutAuraStart: slugCalloutAuraStart$3,
+  slugCalloutAuraEnd: slugCalloutAuraEnd$3,
   caption01: caption01,
   caption02: caption02,
   label01: label01,
@@ -1022,6 +1042,17 @@ var overlay$6 = 'rgba(22, 22, 22, 0.5)';
 var toggleOff$6 = gray50;
 var shadow$6 = 'rgba(0, 0, 0, 0.3)';
 
+// AI
+var slugBackground$2 = gray70;
+var slugGradient$2 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray40, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugBackgroundHover$2 = gray60;
+var slugGradientHover$2 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray20Hover, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugHollowHover$2 = gray80Hover;
+var slugCalloutGradientTop$2 = rgba(gray10, 0.85);
+var slugCalloutGradientBottom$2 = rgba(gray20, 0.85);
+var slugCalloutAuraStart$2 = rgba(blue10, 0.6);
+var slugCalloutAuraEnd$2 = rgba(white$2, 0);
+
 var g10$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$7,
@@ -1124,6 +1155,15 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$6,
   toggleOff: toggleOff$6,
   shadow: shadow$6,
+  slugBackground: slugBackground$2,
+  slugGradient: slugGradient$2,
+  slugBackgroundHover: slugBackgroundHover$2,
+  slugGradientHover: slugGradientHover$2,
+  slugHollowHover: slugHollowHover$2,
+  slugCalloutGradientTop: slugCalloutGradientTop$2,
+  slugCalloutGradientBottom: slugCalloutGradientBottom$2,
+  slugCalloutAuraStart: slugCalloutAuraStart$2,
+  slugCalloutAuraEnd: slugCalloutAuraEnd$2,
   caption01: caption01,
   caption02: caption02,
   label01: label01,
@@ -1361,6 +1401,17 @@ var overlay$5 = rgba(black, 0.65);
 var toggleOff$5 = gray50;
 var shadow$5 = rgba(black, 0.8);
 
+// AI
+var slugBackground$1 = gray30;
+var slugGradient$1 = "".concat(gray50, " linear-gradient(135deg, ").concat(gray10, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugBackgroundHover$1 = gray20;
+var slugGradientHover$1 = "".concat(gray40, " linear-gradient(135deg, ").concat(white$2, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugHollowHover$1 = gray30Hover;
+var slugCalloutGradientTop$1 = rgba(gray100, 0.85);
+var slugCalloutGradientBottom$1 = rgba(gray90, 0.85);
+var slugCalloutAuraStart$1 = rgba(blue20, 0.2);
+var slugCalloutAuraEnd$1 = rgba(gray100, 0);
+
 var g90$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$6,
@@ -1463,6 +1514,15 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$5,
   toggleOff: toggleOff$5,
   shadow: shadow$5,
+  slugBackground: slugBackground$1,
+  slugGradient: slugGradient$1,
+  slugBackgroundHover: slugBackgroundHover$1,
+  slugGradientHover: slugGradientHover$1,
+  slugHollowHover: slugHollowHover$1,
+  slugCalloutGradientTop: slugCalloutGradientTop$1,
+  slugCalloutGradientBottom: slugCalloutGradientBottom$1,
+  slugCalloutAuraStart: slugCalloutAuraStart$1,
+  slugCalloutAuraEnd: slugCalloutAuraEnd$1,
   caption01: caption01,
   caption02: caption02,
   label01: label01,
@@ -1700,6 +1760,17 @@ var overlay$4 = rgba(black, 0.65);
 var toggleOff$4 = gray60;
 var shadow$4 = rgba(black, 0.8);
 
+// AI
+var slugBackground = gray30;
+var slugGradient = "".concat(gray50, " linear-gradient(135deg, ").concat(gray10, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugBackgroundHover = gray20;
+var slugGradientHover = "".concat(gray40, " linear-gradient(135deg, ").concat(white$2, " 0%, rgba(").concat(white$2, ", 0) 100%)");
+var slugHollowHover = gray30Hover;
+var slugCalloutGradientTop = rgba(gray100, 0.85);
+var slugCalloutGradientBottom = rgba(gray90, 0.85);
+var slugCalloutAuraStart = rgba(blue20, 0.2);
+var slugCalloutAuraEnd = rgba(gray100, 0);
+
 var g100$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$5,
@@ -1802,6 +1873,15 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$4,
   toggleOff: toggleOff$4,
   shadow: shadow$4,
+  slugBackground: slugBackground,
+  slugGradient: slugGradient,
+  slugBackgroundHover: slugBackgroundHover,
+  slugGradientHover: slugGradientHover,
+  slugHollowHover: slugHollowHover,
+  slugCalloutGradientTop: slugCalloutGradientTop,
+  slugCalloutGradientBottom: slugCalloutGradientBottom,
+  slugCalloutAuraStart: slugCalloutAuraStart,
+  slugCalloutAuraEnd: slugCalloutAuraEnd,
   caption01: caption01,
   caption02: caption02,
   label01: label01,
@@ -4695,6 +4775,11 @@ var contextual = TokenGroup.create({
   properties: [],
   tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong', 'border-tile']
 });
+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']
+});
 var group = TokenGroup.create({
   name: 'All',
   tokens: [background, layer, field,
@@ -4702,7 +4787,7 @@ var group = TokenGroup.create({
   {
     name: 'interactive',
     properties: ['background', 'text']
-  }, border, text, link, icon, support,
+  }, border, text, link, icon, support, ai,
   // Misc
   {
     name: 'highlight'
@@ -4849,4 +4934,4 @@ var themes = {
   g100: g100$1
 };
 
-export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, borderTile01$3 as borderTile01, borderTile02$3 as borderTile02, borderTile03$3 as borderTile03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInteractive$3 as iconInteractive, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };
+export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, borderTile01$3 as borderTile01, borderTile02$3 as borderTile02, borderTile03$3 as borderTile03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInteractive$3 as iconInteractive, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, slugBackground$3 as slugBackground, slugBackgroundHover$3 as slugBackgroundHover, slugCalloutAuraEnd$3 as slugCalloutAuraEnd, slugCalloutAuraStart$3 as slugCalloutAuraStart, slugCalloutGradientBottom$3 as slugCalloutGradientBottom, slugCalloutGradientTop$3 as slugCalloutGradientTop, slugGradient$3 as slugGradient, slugGradientHover$3 as slugGradientHover, slugHollowHover$3 as slugHollowHover, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };

package/lib/index.js

@@ -689,6 +689,17 @@ var overlay$7 = 'rgba(22, 22, 22, 0.5)';
 var toggleOff$7 = colors$1.gray50;
 var shadow$7 = 'rgba(0, 0, 0, 0.3)';
 
+// AI
+var slugBackground$3 = colors$1.gray70;
+var slugGradient$3 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray40, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+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 white$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$8,
@@ -791,6 +802,15 @@ var white$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$7,
   toggleOff: toggleOff$7,
   shadow: shadow$7,
+  slugBackground: slugBackground$3,
+  slugGradient: slugGradient$3,
+  slugBackgroundHover: slugBackgroundHover$3,
+  slugGradientHover: slugGradientHover$3,
+  slugHollowHover: slugHollowHover$3,
+  slugCalloutGradientTop: slugCalloutGradientTop$3,
+  slugCalloutGradientBottom: slugCalloutGradientBottom$3,
+  slugCalloutAuraStart: slugCalloutAuraStart$3,
+  slugCalloutAuraEnd: slugCalloutAuraEnd$3,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -1028,6 +1048,17 @@ var overlay$6 = 'rgba(22, 22, 22, 0.5)';
 var toggleOff$6 = colors$1.gray50;
 var shadow$6 = 'rgba(0, 0, 0, 0.3)';
 
+// AI
+var slugBackground$2 = colors$1.gray70;
+var slugGradient$2 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray40, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+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 g10$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$7,
@@ -1130,6 +1161,15 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$6,
   toggleOff: toggleOff$6,
   shadow: shadow$6,
+  slugBackground: slugBackground$2,
+  slugGradient: slugGradient$2,
+  slugBackgroundHover: slugBackgroundHover$2,
+  slugGradientHover: slugGradientHover$2,
+  slugHollowHover: slugHollowHover$2,
+  slugCalloutGradientTop: slugCalloutGradientTop$2,
+  slugCalloutGradientBottom: slugCalloutGradientBottom$2,
+  slugCalloutAuraStart: slugCalloutAuraStart$2,
+  slugCalloutAuraEnd: slugCalloutAuraEnd$2,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -1367,6 +1407,17 @@ var overlay$5 = colors$1.rgba(colors$1.black, 0.65);
 var toggleOff$5 = colors$1.gray50;
 var shadow$5 = colors$1.rgba(colors$1.black, 0.8);
 
+// AI
+var slugBackground$1 = colors$1.gray30;
+var slugGradient$1 = "".concat(colors$1.gray50, " linear-gradient(135deg, ").concat(colors$1.gray10, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+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 g90$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$6,
@@ -1469,6 +1520,15 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$5,
   toggleOff: toggleOff$5,
   shadow: shadow$5,
+  slugBackground: slugBackground$1,
+  slugGradient: slugGradient$1,
+  slugBackgroundHover: slugBackgroundHover$1,
+  slugGradientHover: slugGradientHover$1,
+  slugHollowHover: slugHollowHover$1,
+  slugCalloutGradientTop: slugCalloutGradientTop$1,
+  slugCalloutGradientBottom: slugCalloutGradientBottom$1,
+  slugCalloutAuraStart: slugCalloutAuraStart$1,
+  slugCalloutAuraEnd: slugCalloutAuraEnd$1,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -1706,6 +1766,17 @@ var overlay$4 = colors$1.rgba(colors$1.black, 0.65);
 var toggleOff$4 = colors$1.gray60;
 var shadow$4 = colors$1.rgba(colors$1.black, 0.8);
 
+// AI
+var slugBackground = colors$1.gray30;
+var slugGradient = "".concat(colors$1.gray50, " linear-gradient(135deg, ").concat(colors$1.gray10, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+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 g100$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   background: background$5,
@@ -1808,6 +1879,15 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   overlay: overlay$4,
   toggleOff: toggleOff$4,
   shadow: shadow$4,
+  slugBackground: slugBackground,
+  slugGradient: slugGradient,
+  slugBackgroundHover: slugBackgroundHover,
+  slugGradientHover: slugGradientHover,
+  slugHollowHover: slugHollowHover,
+  slugCalloutGradientTop: slugCalloutGradientTop,
+  slugCalloutGradientBottom: slugCalloutGradientBottom,
+  slugCalloutAuraStart: slugCalloutAuraStart,
+  slugCalloutAuraEnd: slugCalloutAuraEnd,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -4701,6 +4781,11 @@ var contextual = TokenGroup.create({
   properties: [],
   tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong', 'border-tile']
 });
+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']
+});
 var group = TokenGroup.create({
   name: 'All',
   tokens: [background, layer, field,
@@ -4708,7 +4793,7 @@ var group = TokenGroup.create({
   {
     name: 'interactive',
     properties: ['background', 'text']
-  }, border, text, link, icon, support,
+  }, border, text, link, icon, support, ai,
   // Misc
   {
     name: 'highlight'
@@ -5224,6 +5309,15 @@ exports.overlay = overlay$7;
 exports.shadow = shadow$7;
 exports.skeletonBackground = skeletonBackground$7;
 exports.skeletonElement = skeletonElement$7;
+exports.slugBackground = slugBackground$3;
+exports.slugBackgroundHover = slugBackgroundHover$3;
+exports.slugCalloutAuraEnd = slugCalloutAuraEnd$3;
+exports.slugCalloutAuraStart = slugCalloutAuraStart$3;
+exports.slugCalloutGradientBottom = slugCalloutGradientBottom$3;
+exports.slugCalloutGradientTop = slugCalloutGradientTop$3;
+exports.slugGradient = slugGradient$3;
+exports.slugGradientHover = slugGradientHover$3;
+exports.slugHollowHover = slugHollowHover$3;
 exports.supportCautionMajor = supportCautionMajor$3;
 exports.supportCautionMinor = supportCautionMinor$3;
 exports.supportCautionUndefined = supportCautionUndefined$3;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "11.26.0-rc.0",
+  "version": "11.26.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -30,15 +30,15 @@
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^11.20.0-rc.0",
-    "@carbon/layout": "^11.20.0-rc.0",
-    "@carbon/type": "^11.25.0-rc.0",
+    "@carbon/colors": "^11.20.0",
+    "@carbon/layout": "^11.20.0",
+    "@carbon/type": "^11.25.0",
     "color": "^4.0.0"
   },
   "devDependencies": {
     "@babel/node": "^7.17.10",
     "@babel/preset-env": "^7.18.2",
-    "@carbon/cli": "^11.15.0-rc.0",
+    "@carbon/cli": "^11.15.0",
     "@carbon/cli-reporter": "^10.7.0",
     "@carbon/scss-generator": "^10.18.0",
     "@carbon/test-utils": "^10.30.0",
@@ -49,5 +49,5 @@
     "rimraf": "^5.0.0"
   },
   "sideEffects": false,
-  "gitHead": "da28d28a2d3a34503099e25255076efd3da4db9f"
+  "gitHead": "abe693e46a9b76731f51e47104f3634b6346f845"
 }

package/scss/generated/_themes.scss

@@ -91,6 +91,17 @@ $white: (
   shadow: rgba(0, 0, 0, 0.3),
   skeleton-background: #e8e8e8,
   skeleton-element: #c6c6c6,
+  slug-background: #525252,
+  slug-background-hover: #6f6f6f,
+  slug-callout-aura-end: rgba(255, 255, 255, 0),
+  slug-callout-aura-start: rgba(237, 245, 255, 0.6),
+  slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85),
+  slug-callout-gradient-top: rgba(244, 244, 244, 0.85),
+  slug-gradient: #161616
+    linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%),
+  slug-gradient-hover: #161616
+    linear-gradient(135deg, #d1d1d1 0%, rgba(#ffffff, 0) 100%),
+  slug-hollow-hover: #474747,
   support-caution-major: #ff832b,
   support-caution-minor: #f1c21b,
   support-caution-undefined: #8a3ffc,
@@ -200,6 +211,17 @@ $g10: (
   shadow: rgba(0, 0, 0, 0.3),
   skeleton-background: #e8e8e8,
   skeleton-element: #c6c6c6,
+  slug-background: #525252,
+  slug-background-hover: #6f6f6f,
+  slug-callout-aura-end: rgba(255, 255, 255, 0),
+  slug-callout-aura-start: rgba(237, 245, 255, 0.6),
+  slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85),
+  slug-callout-gradient-top: rgba(244, 244, 244, 0.85),
+  slug-gradient: #161616
+    linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%),
+  slug-gradient-hover: #161616
+    linear-gradient(135deg, #d1d1d1 0%, rgba(#ffffff, 0) 100%),
+  slug-hollow-hover: #474747,
   support-caution-major: #ff832b,
   support-caution-minor: #f1c21b,
   support-caution-undefined: #8a3ffc,
@@ -309,6 +331,17 @@ $g90: (
   shadow: rgba(0, 0, 0, 0.8),
   skeleton-background: #333333,
   skeleton-element: #525252,
+  slug-background: #c6c6c6,
+  slug-background-hover: #e0e0e0,
+  slug-callout-aura-end: rgba(22, 22, 22, 0),
+  slug-callout-aura-start: rgba(208, 226, 255, 0.2),
+  slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85),
+  slug-callout-gradient-top: rgba(22, 22, 22, 0.85),
+  slug-gradient: #8d8d8d
+    linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%),
+  slug-gradient-hover: #a8a8a8
+    linear-gradient(135deg, #ffffff 0%, rgba(#ffffff, 0) 100%),
+  slug-hollow-hover: #b5b5b5,
   support-caution-major: #ff832b,
   support-caution-minor: #f1c21b,
   support-caution-undefined: #a56eff,
@@ -418,6 +451,17 @@ $g100: (
   shadow: rgba(0, 0, 0, 0.8),
   skeleton-background: #292929,
   skeleton-element: #393939,
+  slug-background: #c6c6c6,
+  slug-background-hover: #e0e0e0,
+  slug-callout-aura-end: rgba(22, 22, 22, 0),
+  slug-callout-aura-start: rgba(208, 226, 255, 0.2),
+  slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85),
+  slug-callout-gradient-top: rgba(22, 22, 22, 0.85),
+  slug-gradient: #8d8d8d
+    linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%),
+  slug-gradient-hover: #a8a8a8
+    linear-gradient(135deg, #ffffff 0%, rgba(#ffffff, 0) 100%),
+  slug-hollow-hover: #b5b5b5,
   support-caution-major: #ff832b,
   support-caution-minor: #f1c21b,
   support-caution-undefined: #a56eff,

package/scss/generated/_tokens.scss

@@ -292,6 +292,33 @@ $support-caution-minor: _get('support-caution-minor') !default;
 /// The CSS Custom Property for the `support-caution-undefined` token
 $support-caution-undefined: _get('support-caution-undefined') !default;
 
+/// The CSS Custom Property for the `slug-background` token
+$slug-background: _get('slug-background') !default;
+
+/// The CSS Custom Property for the `slug-gradient` token
+$slug-gradient: _get('slug-gradient') !default;
+
+/// The CSS Custom Property for the `slug-background-hover` token
+$slug-background-hover: _get('slug-background-hover') !default;
+
+/// The CSS Custom Property for the `slug-gradient-hover` token
+$slug-gradient-hover: _get('slug-gradient-hover') !default;
+
+/// The CSS Custom Property for the `slug-hollow-hover` token
+$slug-hollow-hover: _get('slug-hollow-hover') !default;
+
+/// The CSS Custom Property for the `slug-callout-gradient-top` token
+$slug-callout-gradient-top: _get('slug-callout-gradient-top') !default;
+
+/// The CSS Custom Property for the `slug-callout-gradient-bottom` token
+$slug-callout-gradient-bottom: _get('slug-callout-gradient-bottom') !default;
+
+/// The CSS Custom Property for the `slug-callout-aura-start` token
+$slug-callout-aura-start: _get('slug-callout-aura-start') !default;
+
+/// The CSS Custom Property for the `slug-callout-aura-end` token
+$slug-callout-aura-end: _get('slug-callout-aura-end') !default;
+
 /// The CSS Custom Property for the `highlight` token
 $highlight: _get('highlight') !default;
 

package/src/g10.js

@@ -7,6 +7,7 @@
 
 import {
   // Blue
+  blue10,
   blue20,
   blue30,
   blue40,
@@ -40,6 +41,7 @@ import {
   // Constants
   white,
   whiteHover,
+  rgba,
 } from '@carbon/colors';
 import { adjustAlpha } from './tools';
 
@@ -200,6 +202,17 @@ export const overlay = 'rgba(22, 22, 22, 0.5)';
 export const toggleOff = gray50;
 export const shadow = 'rgba(0, 0, 0, 0.3)';
 
+// AI
+export const slugBackground = gray70;
+export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`;
+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 {
   // Type
   caption01,

package/src/g100.js

@@ -7,6 +7,7 @@
 
 import {
   // Blue
+  blue20,
   blue40,
   blue60,
   blue70,
@@ -14,7 +15,10 @@ import {
 
   // Gray
   gray10,
+  gray10Hover,
+  gray20,
   gray30,
+  gray30Hover,
   gray40,
   gray50,
   gray60,
@@ -46,7 +50,6 @@ import {
 
   // Tools
   rgba,
-  gray10Hover,
 } from '@carbon/colors';
 import { adjustLightness, adjustAlpha } from './tools';
 
@@ -207,6 +210,17 @@ export const overlay = rgba(black, 0.65);
 export const toggleOff = gray60;
 export const shadow = rgba(black, 0.8);
 
+// AI
+export const slugBackground = gray30;
+export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`;
+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 {
   // Type
   caption01,

package/src/g90.js

@@ -7,13 +7,17 @@
 
 import {
   // Blue
+  blue20,
   blue40,
   blue60,
   blue70,
 
   // Gray
   gray10,
+  gray10Hover,
+  gray20,
   gray30,
+  gray30Hover,
   gray40,
   gray50,
   gray50Hover,
@@ -22,7 +26,9 @@ import {
   gray70,
   gray70Hover,
   gray80,
+  gray80Hover,
   gray90,
+  gray90Hover,
   gray100,
 
   // Support
@@ -44,9 +50,6 @@ import {
 
   // Tools
   rgba,
-  gray90Hover,
-  gray10Hover,
-  gray80Hover,
 } from '@carbon/colors';
 import { adjustAlpha } from './tools';
 
@@ -207,6 +210,17 @@ export const overlay = rgba(black, 0.65);
 export const toggleOff = gray50;
 export const shadow = rgba(black, 0.8);
 
+// AI
+export const slugBackground = gray30;
+export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`;
+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 {
   // Type
   caption01,

package/src/tokens/v11TokenGroup.js

@@ -341,6 +341,22 @@ export const contextual = TokenGroup.create({
   ],
 });
 
+export const 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',
+  ],
+});
+
 export const group = TokenGroup.create({
   name: 'All',
   tokens: [
@@ -359,6 +375,7 @@ export const group = TokenGroup.create({
     link,
     icon,
     support,
+    ai,
 
     // Misc
     {

package/src/white.js

@@ -7,6 +7,7 @@
 
 import {
   // Blue
+  blue10,
   blue20,
   blue30,
   blue40,
@@ -15,6 +16,7 @@ import {
 
   // Gray
   gray10,
+  gray10Hover,
   gray20,
   gray20Hover,
   gray30,
@@ -23,6 +25,7 @@ import {
   gray60,
   gray70,
   gray80,
+  gray80Hover,
   gray100,
 
   // Support
@@ -38,8 +41,7 @@ import {
   // Constants
   white,
   whiteHover,
-  gray80Hover,
-  gray10Hover,
+  rgba,
 } from '@carbon/colors';
 import { adjustAlpha } from './tools';
 
@@ -200,6 +202,17 @@ export const overlay = 'rgba(22, 22, 22, 0.5)';
 export const toggleOff = gray50;
 export const shadow = 'rgba(0, 0, 0, 0.3)';
 
+// AI
+export const slugBackground = gray70;
+export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`;
+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);
+
 // Type
 export {
   caption01,

package/umd/index.js

@@ -686,6 +686,17 @@
   var toggleOff$7 = colors$1.gray50;
   var shadow$7 = 'rgba(0, 0, 0, 0.3)';
 
+  // AI
+  var slugBackground$3 = colors$1.gray70;
+  var slugGradient$3 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray40, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+  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 white$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$8,
@@ -788,6 +799,15 @@
     overlay: overlay$7,
     toggleOff: toggleOff$7,
     shadow: shadow$7,
+    slugBackground: slugBackground$3,
+    slugGradient: slugGradient$3,
+    slugBackgroundHover: slugBackgroundHover$3,
+    slugGradientHover: slugGradientHover$3,
+    slugHollowHover: slugHollowHover$3,
+    slugCalloutGradientTop: slugCalloutGradientTop$3,
+    slugCalloutGradientBottom: slugCalloutGradientBottom$3,
+    slugCalloutAuraStart: slugCalloutAuraStart$3,
+    slugCalloutAuraEnd: slugCalloutAuraEnd$3,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1025,6 +1045,17 @@
   var toggleOff$6 = colors$1.gray50;
   var shadow$6 = 'rgba(0, 0, 0, 0.3)';
 
+  // AI
+  var slugBackground$2 = colors$1.gray70;
+  var slugGradient$2 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray40, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+  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 g10$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$7,
@@ -1127,6 +1158,15 @@
     overlay: overlay$6,
     toggleOff: toggleOff$6,
     shadow: shadow$6,
+    slugBackground: slugBackground$2,
+    slugGradient: slugGradient$2,
+    slugBackgroundHover: slugBackgroundHover$2,
+    slugGradientHover: slugGradientHover$2,
+    slugHollowHover: slugHollowHover$2,
+    slugCalloutGradientTop: slugCalloutGradientTop$2,
+    slugCalloutGradientBottom: slugCalloutGradientBottom$2,
+    slugCalloutAuraStart: slugCalloutAuraStart$2,
+    slugCalloutAuraEnd: slugCalloutAuraEnd$2,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1364,6 +1404,17 @@
   var toggleOff$5 = colors$1.gray50;
   var shadow$5 = colors$1.rgba(colors$1.black, 0.8);
 
+  // AI
+  var slugBackground$1 = colors$1.gray30;
+  var slugGradient$1 = "".concat(colors$1.gray50, " linear-gradient(135deg, ").concat(colors$1.gray10, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+  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 g90$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$6,
@@ -1466,6 +1517,15 @@
     overlay: overlay$5,
     toggleOff: toggleOff$5,
     shadow: shadow$5,
+    slugBackground: slugBackground$1,
+    slugGradient: slugGradient$1,
+    slugBackgroundHover: slugBackgroundHover$1,
+    slugGradientHover: slugGradientHover$1,
+    slugHollowHover: slugHollowHover$1,
+    slugCalloutGradientTop: slugCalloutGradientTop$1,
+    slugCalloutGradientBottom: slugCalloutGradientBottom$1,
+    slugCalloutAuraStart: slugCalloutAuraStart$1,
+    slugCalloutAuraEnd: slugCalloutAuraEnd$1,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -1703,6 +1763,17 @@
   var toggleOff$4 = colors$1.gray60;
   var shadow$4 = colors$1.rgba(colors$1.black, 0.8);
 
+  // AI
+  var slugBackground = colors$1.gray30;
+  var slugGradient = "".concat(colors$1.gray50, " linear-gradient(135deg, ").concat(colors$1.gray10, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
+  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 g100$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     background: background$5,
@@ -1805,6 +1876,15 @@
     overlay: overlay$4,
     toggleOff: toggleOff$4,
     shadow: shadow$4,
+    slugBackground: slugBackground,
+    slugGradient: slugGradient,
+    slugBackgroundHover: slugBackgroundHover,
+    slugGradientHover: slugGradientHover,
+    slugHollowHover: slugHollowHover,
+    slugCalloutGradientTop: slugCalloutGradientTop,
+    slugCalloutGradientBottom: slugCalloutGradientBottom,
+    slugCalloutAuraStart: slugCalloutAuraStart,
+    slugCalloutAuraEnd: slugCalloutAuraEnd,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -4698,6 +4778,11 @@
     properties: [],
     tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong', 'border-tile']
   });
+  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']
+  });
   var group = TokenGroup.create({
     name: 'All',
     tokens: [background, layer, field,
@@ -4705,7 +4790,7 @@
     {
       name: 'interactive',
       properties: ['background', 'text']
-    }, border, text, link, icon, support,
+    }, border, text, link, icon, support, ai,
     // Misc
     {
       name: 'highlight'
@@ -5221,6 +5306,15 @@
   exports.shadow = shadow$7;
   exports.skeletonBackground = skeletonBackground$7;
   exports.skeletonElement = skeletonElement$7;
+  exports.slugBackground = slugBackground$3;
+  exports.slugBackgroundHover = slugBackgroundHover$3;
+  exports.slugCalloutAuraEnd = slugCalloutAuraEnd$3;
+  exports.slugCalloutAuraStart = slugCalloutAuraStart$3;
+  exports.slugCalloutGradientBottom = slugCalloutGradientBottom$3;
+  exports.slugCalloutGradientTop = slugCalloutGradientTop$3;
+  exports.slugGradient = slugGradient$3;
+  exports.slugGradientHover = slugGradientHover$3;
+  exports.slugHollowHover = slugHollowHover$3;
   exports.supportCautionMajor = supportCautionMajor$3;
   exports.supportCautionMinor = supportCautionMinor$3;
   exports.supportCautionUndefined = supportCautionUndefined$3;