@carbon/themes 11.29.0 → 11.30.0-rc.0

package/scss/generated/_themes.scss

@@ -12,9 +12,19 @@
 @use '../utilities';
 
 $white: (
+  ai-aura-end: rgba(255, 255, 255, 0),
+  ai-aura-hover-background: #edf5ff,
+  ai-aura-hover-end: rgba(255, 255, 255, 0),
+  ai-aura-hover-start: rgba(69, 137, 255, 0.4),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: #d0e2ff,
+  ai-border-start: #78a9ff,
+  ai-border-strong: #4589ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(255, 255, 255, 0),
   ai-gradient-start-01: rgba(242, 244, 248, 0.5),
   ai-gradient-start-02: rgba(237, 245, 255, 0.5),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #ffffff,
   background-active: rgba(141, 141, 141, 0.5),
   background-brand: #0f62fe,
@@ -39,6 +49,15 @@ $white: (
   border-tile-01: #c6c6c6,
   border-tile-02: #a8a8a8,
   border-tile-03: #c6c6c6,
+  chat-avatar-agent: #161616,
+  chat-avatar-bot: #0f62fe,
+  chat-avatar-user: #161616,
+  chat-bubble-agent: #ffffff,
+  chat-bubble-agent-border: #e0e0e0,
+  chat-bubble-user: #e0e0e0,
+  chat-prompt-background: #ffffff,
+  chat-prompt-border-end: rgba(244, 244, 244, 0),
+  chat-prompt-border-start: #f4f4f4,
   field-01: #f4f4f4,
   field-02: #ffffff,
   field-03: #f4f4f4,
@@ -104,8 +123,6 @@ $white: (
   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,
@@ -116,7 +133,6 @@ $white: (
   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
@@ -154,9 +170,19 @@ $white: utilities.merge(
 );
 
 $g10: (
+  ai-aura-end: rgba(255, 255, 255, 0),
+  ai-aura-hover-background: #edf5ff,
+  ai-aura-hover-end: rgba(255, 255, 255, 0),
+  ai-aura-hover-start: rgba(69, 137, 255, 0.4),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: #d0e2ff,
+  ai-border-start: #78a9ff,
+  ai-border-strong: #4589ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(255, 255, 255, 0),
   ai-gradient-start-01: rgba(242, 244, 248, 0.5),
   ai-gradient-start-02: rgba(237, 245, 255, 0.5),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #f4f4f4,
   background-active: rgba(141, 141, 141, 0.5),
   background-brand: #0f62fe,
@@ -181,6 +207,15 @@ $g10: (
   border-tile-01: #a8a8a8,
   border-tile-02: #c6c6c6,
   border-tile-03: #a8a8a8,
+  chat-avatar-agent: #161616,
+  chat-avatar-bot: #0f62fe,
+  chat-avatar-user: #161616,
+  chat-bubble-agent: #ffffff,
+  chat-bubble-agent-border: #e0e0e0,
+  chat-bubble-user: #e0e0e0,
+  chat-prompt-background: #ffffff,
+  chat-prompt-border-end: rgba(244, 244, 244, 0),
+  chat-prompt-border-start: #f4f4f4,
   field-01: #ffffff,
   field-02: #f4f4f4,
   field-03: #ffffff,
@@ -246,8 +281,6 @@ $g10: (
   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,
@@ -258,7 +291,6 @@ $g10: (
   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
@@ -296,9 +328,19 @@ $g10: utilities.merge(
 );
 
 $g90: (
+  ai-aura-end: rgba(0, 0, 0, 0),
+  ai-aura-hover-background: #474747,
+  ai-aura-hover-end: rgba(0, 0, 0, 0),
+  ai-aura-hover-start: rgba(69, 137, 255, 0.4),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: rgba(166, 200, 255, 0.24),
+  ai-border-start: #4589ff,
+  ai-border-strong: #78a9ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(38, 38, 38, 0),
   ai-gradient-start-01: rgba(208, 226, 255, 0.2),
   ai-gradient-start-02: unquote('transparent'),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #262626,
   background-active: rgba(141, 141, 141, 0.4),
   background-brand: #0f62fe,
@@ -323,6 +365,15 @@ $g90: (
   border-tile-01: #6f6f6f,
   border-tile-02: #8d8d8d,
   border-tile-03: #a8a8a8,
+  chat-avatar-agent: #f4f4f4,
+  chat-avatar-bot: #4589ff,
+  chat-avatar-user: #f4f4f4,
+  chat-bubble-agent: #262626,
+  chat-bubble-agent-border: #525252,
+  chat-bubble-user: #393939,
+  chat-prompt-background: #161616,
+  chat-prompt-border-end: rgba(38, 38, 38, 0),
+  chat-prompt-border-start: #262626,
   field-01: #393939,
   field-02: #525252,
   field-03: #6f6f6f,
@@ -380,7 +431,7 @@ $g90: (
   skeleton-element: #525252,
   slug-background: #c6c6c6,
   slug-background-hover: #e0e0e0,
-  slug-callout-aura-end: rgba(255, 255, 255, 0),
+  slug-callout-aura-end: rgba(0, 0, 0, 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),
@@ -388,8 +439,6 @@ $g90: (
   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,
@@ -400,7 +449,6 @@ $g90: (
   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
@@ -438,9 +486,19 @@ $g90: utilities.merge(
 );
 
 $g100: (
+  ai-aura-end: rgba(0, 0, 0, 0),
+  ai-aura-hover-background: #333333,
+  ai-aura-hover-end: rgba(0, 0, 0, 0),
+  ai-aura-hover-start: rgba(69, 137, 255, 0.4),
+  ai-aura-start: rgba(69, 137, 255, 0.1),
+  ai-border-end: rgba(166, 200, 255, 0.24),
+  ai-border-start: #4589ff,
+  ai-border-strong: #78a9ff,
+  ai-drop-shadow: rgba(15, 98, 254, 0.32),
   ai-gradient-end: rgba(38, 38, 38, 0),
   ai-gradient-start-01: rgba(208, 226, 255, 0.2),
   ai-gradient-start-02: unquote('transparent'),
+  ai-inner-shadow: rgba(69, 137, 255, 0.2),
   background: #161616,
   background-active: rgba(141, 141, 141, 0.4),
   background-brand: #0f62fe,
@@ -465,6 +523,15 @@ $g100: (
   border-tile-01: #525252,
   border-tile-02: #6f6f6f,
   border-tile-03: #8d8d8d,
+  chat-avatar-agent: #f4f4f4,
+  chat-avatar-bot: #4589ff,
+  chat-avatar-user: #f4f4f4,
+  chat-bubble-agent: #262626,
+  chat-bubble-agent-border: #525252,
+  chat-bubble-user: #393939,
+  chat-prompt-background: #161616,
+  chat-prompt-border-end: rgba(38, 38, 38, 0),
+  chat-prompt-border-start: #262626,
   field-01: #262626,
   field-02: #393939,
   field-03: #525252,
@@ -522,7 +589,7 @@ $g100: (
   skeleton-element: #393939,
   slug-background: #c6c6c6,
   slug-background-hover: #e0e0e0,
-  slug-callout-aura-end: rgba(255, 255, 255, 0),
+  slug-callout-aura-end: rgba(0, 0, 0, 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),
@@ -530,8 +597,6 @@ $g100: (
   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,
@@ -542,7 +607,6 @@ $g100: (
   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

package/scss/generated/_tokens.scss

@@ -378,20 +378,41 @@ $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 `ai-inner-shadow` token
+$ai-inner-shadow: _get('ai-inner-shadow') !default;
+
+/// The CSS Custom Property for the `ai-aura-start` token
+$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;
+
+/// The CSS Custom Property for the `ai-border-start` token
+$ai-border-start: _get('ai-border-start') !default;
+
+/// The CSS Custom Property for the `ai-border-end` token
+$ai-border-end: _get('ai-border-end') !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 `ai-drop-shadow` token
+$ai-drop-shadow: _get('ai-drop-shadow') !default;
 
 /// The CSS Custom Property for the `slug-callout-caret-center` token
 $slug-callout-caret-center: _get('slug-callout-caret-center') !default;
@@ -409,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,6 +213,32 @@ 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;
+
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(white, 0);
+export const aiBorderStrong = blue50;
+export const aiBorderStart = blue40;
+export const aiBorderEnd = blue20;
+export const aiDropShadow = rgba(blue60, 0.32);
+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);
+
+//// 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);
@@ -223,26 +249,6 @@ export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
 export const slugCalloutAuraEndSelected = rgba(white, 0);
-// Linear gradient tokens
-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';
@@ -250,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,6 +218,32 @@ 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;
+
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(black, 0);
+export const aiBorderStrong = blue40;
+export const aiBorderStart = blue50;
+export const aiBorderEnd = rgba(blue30, 0.24);
+export const aiDropShadow = rgba(blue60, 0.32);
+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);
+
+//// 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);
@@ -228,26 +254,6 @@ export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
 export const slugCalloutAuraEndSelected = rgba(gray100, 0);
-// Linear gradient tokens
-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';
@@ -255,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

@@ -12,6 +12,7 @@ import {
   blue40,
   blue60,
   blue70,
+  blue80,
 
   // Gray
   gray10,
@@ -35,7 +36,6 @@ import {
   // Support
   blue30,
   blue50,
-  blue80,
   green40,
   green50,
   yellow30,
@@ -219,6 +219,32 @@ 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;
+
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(black, 0);
+export const aiBorderStrong = blue40;
+export const aiBorderStart = blue50;
+export const aiBorderEnd = rgba(blue30, 0.24);
+export const aiDropShadow = rgba(blue60, 0.32);
+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);
+
+//// 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);
@@ -229,26 +255,6 @@ export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
 export const slugCalloutAuraEndSelected = rgba(gray100, 0);
-// Linear gradient tokens
-export const aiGradientStart01 = rgba(blue20, 0.2);
-export const aiGradientStart02 = 'transparent';
-export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
-
-// Phase 2 - new
-export const slugCalloutShadowInner = rgba(blue50, 0.2);
-export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
-export const slugCalloutShadowOuter02 = rgba(black, 0.65);
-
-export const slugCalloutBorder01 = blue50;
-export const slugCalloutBorder02 = rgba(blue30, 0.25);
-
-// Changed
-export const slugCalloutAuraStart = rgba(blue50, 0.1);
-export const slugCalloutAuraEnd = rgba(white, 0);
-
-// Not used in phase 2 / possibly remove?
-export const slugCalloutGradientTop = rgba(gray100, 0.85);
-export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#456FB5';
@@ -256,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

@@ -368,16 +368,34 @@ export const ai = TokenGroup.create({
     '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',
+    // Linear gradient refactor
+    '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',
+    'ai-drop-shadow',
     // Caret tokens
     'slug-callout-caret-center',
     '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,6 +213,32 @@ 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;
+
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(white, 0);
+export const aiBorderStrong = blue50;
+export const aiBorderStart = blue40;
+export const aiBorderEnd = blue20;
+export const aiDropShadow = rgba(blue60, 0.32);
+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);
+
+//// 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);
@@ -223,26 +249,6 @@ export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
 export const slugCalloutAuraEndSelected = rgba(white, 0);
-// Linear gradient tokens
-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';
@@ -250,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,