@carbon/themes 11.29.1 → 11.30.0-rc.0

package/scss/generated/_tokens.scss

@@ -393,6 +393,15 @@ $ai-aura-start: _get('ai-aura-start') !default;
 /// The CSS Custom Property for the `ai-aura-end` token
 $ai-aura-end: _get('ai-aura-end') !default;
 
+/// The CSS Custom Property for the `ai-aura-hover-background` token
+$ai-aura-hover-background: _get('ai-aura-hover-background') !default;
+
+/// The CSS Custom Property for the `ai-aura-hover-start` token
+$ai-aura-hover-start: _get('ai-aura-hover-start') !default;
+
+/// The CSS Custom Property for the `ai-aura-hover-end` token
+$ai-aura-hover-end: _get('ai-aura-hover-end') !default;
+
 /// The CSS Custom Property for the `ai-border-strong` token
 $ai-border-strong: _get('ai-border-strong') !default;
 
@@ -421,6 +430,33 @@ $slug-callout-caret-bottom-background-actions: _get(
   'slug-callout-caret-bottom-background-actions'
 ) !default;
 
+/// The CSS Custom Property for the `chat-prompt-background` token
+$chat-prompt-background: _get('chat-prompt-background') !default;
+
+/// The CSS Custom Property for the `chat-prompt-border-start` token
+$chat-prompt-border-start: _get('chat-prompt-border-start') !default;
+
+/// The CSS Custom Property for the `chat-prompt-border-end` token
+$chat-prompt-border-end: _get('chat-prompt-border-end') !default;
+
+/// The CSS Custom Property for the `chat-bubble-user` token
+$chat-bubble-user: _get('chat-bubble-user') !default;
+
+/// The CSS Custom Property for the `chat-bubble-agent` token
+$chat-bubble-agent: _get('chat-bubble-agent') !default;
+
+/// The CSS Custom Property for the `chat-bubble-agent-border` token
+$chat-bubble-agent-border: _get('chat-bubble-agent-border') !default;
+
+/// The CSS Custom Property for the `chat-avatar-bot` token
+$chat-avatar-bot: _get('chat-avatar-bot') !default;
+
+/// The CSS Custom Property for the `chat-avatar-agent` token
+$chat-avatar-agent: _get('chat-avatar-agent') !default;
+
+/// The CSS Custom Property for the `chat-avatar-user` token
+$chat-avatar-user: _get('chat-avatar-user') !default;
+
 /// The CSS Custom Property for the `highlight` token
 $highlight: _get('highlight') !default;
 

package/src/g10.js

@@ -213,16 +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 slugCalloutGradientTopHover = rgba(gray20, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
-export const slugCalloutAuraEndHover01 = rgba(white, 0);
-export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
-export const slugCalloutAuraEndHover02 = rgba(white, 0);
-export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
-export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
-export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
-export const slugCalloutAuraEndSelected = rgba(white, 0);
 
 //// Phase 2 - new \\\\
 // Shared
@@ -233,21 +223,32 @@ export const aiBorderStrong = blue50;
 export const aiBorderStart = blue40;
 export const aiBorderEnd = blue20;
 export const aiDropShadow = rgba(blue60, 0.32);
+export const aiAuraHoverBackground = blue10;
+export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverEnd = rgba(white, 0);
 
 // Callout
 export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.1);
 
-//// Changed
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-
 //// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const aiGradientStart01 = rgba(coolGray10, 0.5);
 export const aiGradientStart02 = rgba(blue10, 0.5);
 export const aiGradientEnd = rgba(white, 0);
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
+export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
+export const slugCalloutAuraEndHover01 = rgba(white, 0);
+export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
+export const slugCalloutAuraEndHover02 = rgba(white, 0);
+export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
+export const slugCalloutAuraEndSelected = rgba(white, 0);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#A7C7FF';
@@ -255,6 +256,17 @@ export const slugCalloutCaretBottom = blue20;
 export const slugCalloutCaretBottomBackgroundActions = '#D2DCEE';
 export const slugCalloutCaretBottomBackground = '#CCDBF8';
 
+// Chat tokens
+export const chatPromptBackground = white;
+export const chatPromptBorderStart = gray10;
+export const chatPromptBorderEnd = rgba(gray10, 0);
+export const chatBubbleUser = gray20;
+export const chatBubbleAgent = white;
+export const chatBubbleAgentBorder = gray20;
+export const chatAvatarBot = blue60;
+export const chatAvatarAgent = gray100;
+export const chatAvatarUser = gray100;
+
 export {
   // Type
   caption01,

package/src/g100.js

@@ -218,16 +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 slugCalloutGradientTopHover = rgba(gray80, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
-export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
-export const slugCalloutAuraStartHover02 = 'transparent';
-export const slugCalloutAuraEndHover02 = 'transparent';
-export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
-export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
-export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
-export const slugCalloutAuraEndSelected = rgba(gray100, 0);
 
 //// Phase 2 - new \\\\
 // Shared
@@ -238,21 +228,32 @@ export const aiBorderStrong = blue40;
 export const aiBorderStart = blue50;
 export const aiBorderEnd = rgba(blue30, 0.24);
 export const aiDropShadow = rgba(blue60, 0.32);
+export const aiAuraHoverBackground = layerHover01;
+export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverEnd = rgba(black, 0);
 
 // Callout
 export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.65);
 
-//// Changed
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-
 //// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const aiGradientStart01 = rgba(blue20, 0.2);
 export const aiGradientStart02 = 'transparent';
 export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
+export const slugCalloutAuraEndSelected = rgba(gray100, 0);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#3F68AF';
@@ -260,6 +261,17 @@ export const slugCalloutCaretBottom = '#3D4655';
 export const slugCalloutCaretBottomBackgroundActions = '#192436';
 export const slugCalloutCaretBottomBackground = '#213250';
 
+// Chat tokens
+export const chatPromptBackground = gray100;
+export const chatPromptBorderStart = gray90;
+export const chatPromptBorderEnd = rgba(gray90, 0);
+export const chatBubbleUser = gray80;
+export const chatBubbleAgent = gray90;
+export const chatBubbleAgentBorder = gray70;
+export const chatAvatarBot = blue50;
+export const chatAvatarAgent = gray10;
+export const chatAvatarUser = gray10;
+
 export {
   // Type
   caption01,

package/src/g90.js

@@ -219,16 +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 slugCalloutGradientTopHover = rgba(gray80, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
-export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
-export const slugCalloutAuraStartHover02 = 'transparent';
-export const slugCalloutAuraEndHover02 = 'transparent';
-export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
-export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
-export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
-export const slugCalloutAuraEndSelected = rgba(gray100, 0);
 
 //// Phase 2 - new \\\\
 // Shared
@@ -239,21 +229,32 @@ export const aiBorderStrong = blue40;
 export const aiBorderStart = blue50;
 export const aiBorderEnd = rgba(blue30, 0.24);
 export const aiDropShadow = rgba(blue60, 0.32);
+export const aiAuraHoverBackground = layerHover01;
+export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverEnd = rgba(black, 0);
 
 // Callout
 export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.65);
 
-//// Changed
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-
 //// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const aiGradientStart01 = rgba(blue20, 0.2);
 export const aiGradientStart02 = 'transparent';
 export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
+export const slugCalloutAuraEndSelected = rgba(gray100, 0);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#456FB5';
@@ -261,6 +262,17 @@ export const slugCalloutCaretBottom = '#465060';
 export const slugCalloutCaretBottomBackgroundActions = '#253042';
 export const slugCalloutCaretBottomBackground = '#2D3F5C';
 
+// Chat tokens
+export const chatPromptBackground = gray100;
+export const chatPromptBorderStart = gray90;
+export const chatPromptBorderEnd = rgba(gray90, 0);
+export const chatBubbleUser = gray80;
+export const chatBubbleAgent = gray90;
+export const chatBubbleAgentBorder = gray70;
+export const chatAvatarBot = blue50;
+export const chatAvatarAgent = gray10;
+export const chatAvatarUser = gray10;
+
 export {
   // Type
   caption01,

package/src/tokens/v11TokenGroup.js

@@ -374,6 +374,9 @@ export const ai = TokenGroup.create({
     'ai-inner-shadow',
     'ai-aura-start',
     'ai-aura-end',
+    'ai-aura-hover-background',
+    'ai-aura-hover-start',
+    'ai-aura-hover-end',
     'ai-border-strong',
     'ai-border-start',
     'ai-border-end',
@@ -383,6 +386,16 @@ export const ai = TokenGroup.create({
     'slug-callout-caret-bottom',
     'slug-callout-caret-bottom-background',
     'slug-callout-caret-bottom-background-actions',
+    // Chat tokens
+    'chat-prompt-background',
+    'chat-prompt-border-start',
+    'chat-prompt-border-end',
+    'chat-bubble-user',
+    'chat-bubble-agent',
+    'chat-bubble-agent-border',
+    'chat-avatar-bot',
+    'chat-avatar-agent',
+    'chat-avatar-user',
   ],
 });
 

package/src/white.js

@@ -213,16 +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 slugCalloutGradientTopHover = rgba(gray20, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
-export const slugCalloutAuraEndHover01 = rgba(white, 0);
-export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
-export const slugCalloutAuraEndHover02 = rgba(white, 0);
-export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
-export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
-export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
-export const slugCalloutAuraEndSelected = rgba(white, 0);
 
 //// Phase 2 - new \\\\
 // Shared
@@ -233,21 +223,32 @@ export const aiBorderStrong = blue50;
 export const aiBorderStart = blue40;
 export const aiBorderEnd = blue20;
 export const aiDropShadow = rgba(blue60, 0.32);
+export const aiAuraHoverBackground = blue10;
+export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverEnd = rgba(white, 0);
 
 // Callout
 export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.1);
 
-//// Changed
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-
 //// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const aiGradientStart01 = rgba(coolGray10, 0.5);
 export const aiGradientStart02 = rgba(blue10, 0.5);
 export const aiGradientEnd = rgba(white, 0);
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
+export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
+export const slugCalloutAuraEndHover01 = rgba(white, 0);
+export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
+export const slugCalloutAuraEndHover02 = rgba(white, 0);
+export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
+export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
+export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
+export const slugCalloutAuraEndSelected = rgba(white, 0);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#A7C7FF';
@@ -255,6 +256,17 @@ export const slugCalloutCaretBottom = blue20;
 export const slugCalloutCaretBottomBackgroundActions = '#DAE5F8';
 export const slugCalloutCaretBottomBackground = '#D5E5FF';
 
+// Chat tokens
+export const chatPromptBackground = white;
+export const chatPromptBorderStart = gray10;
+export const chatPromptBorderEnd = rgba(gray10, 0);
+export const chatBubbleUser = gray20;
+export const chatBubbleAgent = white;
+export const chatBubbleAgentBorder = gray20;
+export const chatAvatarBot = blue60;
+export const chatAvatarAgent = gray100;
+export const chatAvatarUser = gray100;
+
 // Type
 export {
   caption01,