@carbon/themes 11.33.0 → 11.33.1

package/scss/generated/_themes.scss

@@ -15,21 +15,22 @@ $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-hover-start: rgba(69, 137, 255, 0.32),
   ai-aura-start: rgba(69, 137, 255, 0.1),
-  ai-aura-start-table: rgba(69, 137, 255, 0.15),
-  ai-border-end: #d0e2ff,
-  ai-border-start: #78a9ff,
+  ai-aura-start-sm: rgba(69, 137, 255, 0.16),
+  ai-border-end: #78a9ff,
+  ai-border-start: rgba(166, 200, 255, 0.64),
   ai-border-strong: #4589ff,
-  ai-drop-shadow: rgba(15, 98, 254, 0.32),
-  ai-inner-shadow: rgba(69, 137, 255, 0.2),
+  ai-drop-shadow: rgba(15, 98, 254, 0.1),
+  ai-inner-shadow: rgba(69, 137, 255, 0.1),
   ai-overlay: rgba(0, 17, 65, 0.5),
-  ai-popover-caret-bottom: #d0e2ff,
-  ai-popover-caret-bottom-background: #d5e5ff,
-  ai-popover-caret-bottom-background-actions: #dae5f8,
-  ai-popover-caret-center: #a7c7ff,
-  ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.25),
-  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.1),
+  ai-popover-background: #ffffff,
+  ai-popover-caret-bottom: #78a9ff,
+  ai-popover-caret-bottom-background: #eaf1ff,
+  ai-popover-caret-bottom-background-actions: #e9effa,
+  ai-popover-caret-center: #a0c3ff,
+  ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06),
+  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04),
   ai-skeleton-background: #d0e2ff,
   ai-skeleton-element-background: #4589ff,
   background: #ffffff,
@@ -60,7 +61,7 @@ $white: (
   chat-avatar-bot: #6f6f6f,
   chat-avatar-user: #0f62fe,
   chat-bubble-agent: #ffffff,
-  chat-bubble-agent-border: #e0e0e0,
+  chat-bubble-border: #e0e0e0,
   chat-bubble-user: #e0e0e0,
   chat-button: #0f62fe,
   chat-button-active: rgba(141, 141, 141, 0.5),
@@ -128,13 +129,6 @@ $white: (
   shadow: rgba(0, 0, 0, 0.3),
   skeleton-background: #e8e8e8,
   skeleton-element: #c6c6c6,
-  slug-background: #525252,
-  slug-background-hover: #6f6f6f,
-  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,
@@ -168,21 +162,22 @@ $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-hover-start: rgba(69, 137, 255, 0.32),
   ai-aura-start: rgba(69, 137, 255, 0.1),
-  ai-aura-start-table: rgba(69, 137, 255, 0.15),
-  ai-border-end: #d0e2ff,
-  ai-border-start: #78a9ff,
+  ai-aura-start-sm: rgba(69, 137, 255, 0.16),
+  ai-border-end: #78a9ff,
+  ai-border-start: rgba(166, 200, 255, 0.64),
   ai-border-strong: #4589ff,
-  ai-drop-shadow: rgba(15, 98, 254, 0.32),
-  ai-inner-shadow: rgba(69, 137, 255, 0.2),
+  ai-drop-shadow: rgba(15, 98, 254, 0.1),
+  ai-inner-shadow: rgba(69, 137, 255, 0.1),
   ai-overlay: rgba(0, 17, 65, 0.5),
-  ai-popover-caret-bottom: #d0e2ff,
-  ai-popover-caret-bottom-background: #ccdbf8,
-  ai-popover-caret-bottom-background-actions: #d2dcee,
-  ai-popover-caret-center: #a7c7ff,
-  ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.25),
-  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.1),
+  ai-popover-background: #ffffff,
+  ai-popover-caret-bottom: #78a9ff,
+  ai-popover-caret-bottom-background: #eaf1ff,
+  ai-popover-caret-bottom-background-actions: #e9effa,
+  ai-popover-caret-center: #a0c3ff,
+  ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06),
+  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04),
   ai-skeleton-background: #d0e2ff,
   ai-skeleton-element-background: #4589ff,
   background: #f4f4f4,
@@ -213,7 +208,7 @@ $g10: (
   chat-avatar-bot: #6f6f6f,
   chat-avatar-user: #0f62fe,
   chat-bubble-agent: #ffffff,
-  chat-bubble-agent-border: #e0e0e0,
+  chat-bubble-border: #e0e0e0,
   chat-bubble-user: #e0e0e0,
   chat-button: #0f62fe,
   chat-button-active: rgba(141, 141, 141, 0.5),
@@ -281,13 +276,6 @@ $g10: (
   shadow: rgba(0, 0, 0, 0.3),
   skeleton-background: #e8e8e8,
   skeleton-element: #c6c6c6,
-  slug-background: #525252,
-  slug-background-hover: #6f6f6f,
-  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,
@@ -323,21 +311,22 @@ $g90: (
   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-aura-start-table: rgba(69, 137, 255, 0.15),
-  ai-border-end: rgba(166, 200, 255, 0.24),
-  ai-border-start: #4589ff,
+  ai-aura-start-sm: rgba(69, 137, 255, 0.16),
+  ai-border-end: #4589ff,
+  ai-border-start: rgba(166, 200, 255, 0.36),
   ai-border-strong: #78a9ff,
-  ai-drop-shadow: rgba(15, 98, 254, 0.32),
-  ai-inner-shadow: rgba(69, 137, 255, 0.2),
-  ai-overlay: rgba(0, 17, 65, 0.5),
-  ai-popover-caret-bottom: #465060,
-  ai-popover-caret-bottom-background: #2d3f5c,
-  ai-popover-caret-bottom-background-actions: #253042,
-  ai-popover-caret-center: #456fb5,
-  ai-popover-shadow-outer-01: rgba(0, 45, 156, 0.25),
-  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.65),
-  ai-skeleton-background: #a6c8ff,
-  ai-skeleton-element-background: #002d9c,
+  ai-drop-shadow: rgba(0, 0, 0, 0.28),
+  ai-inner-shadow: rgba(69, 137, 255, 0.16),
+  ai-overlay: rgba(0, 0, 0, 0.5),
+  ai-popover-background: #161616,
+  ai-popover-caret-bottom: #4589ff,
+  ai-popover-caret-bottom-background: #202d45,
+  ai-popover-caret-bottom-background-actions: #1e283a,
+  ai-popover-caret-center: #4870b5,
+  ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12),
+  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08),
+  ai-skeleton-background: rgba(120, 169, 255, 0.5),
+  ai-skeleton-element-background: rgba(120, 169, 255, 0.3),
   background: #262626,
   background-active: rgba(141, 141, 141, 0.4),
   background-brand: #0f62fe,
@@ -366,7 +355,7 @@ $g90: (
   chat-avatar-bot: #8d8d8d,
   chat-avatar-user: #4589ff,
   chat-bubble-agent: #262626,
-  chat-bubble-agent-border: #525252,
+  chat-bubble-border: #525252,
   chat-bubble-user: #393939,
   chat-button: #78a9ff,
   chat-button-active: rgba(141, 141, 141, 0.4),
@@ -434,13 +423,6 @@ $g90: (
   shadow: rgba(0, 0, 0, 0.8),
   skeleton-background: #333333,
   skeleton-element: #525252,
-  slug-background: #c6c6c6,
-  slug-background-hover: #e0e0e0,
-  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,
@@ -476,21 +458,22 @@ $g100: (
   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-aura-start-table: rgba(69, 137, 255, 0.15),
-  ai-border-end: rgba(166, 200, 255, 0.24),
-  ai-border-start: #4589ff,
+  ai-aura-start-sm: rgba(69, 137, 255, 0.16),
+  ai-border-end: #4589ff,
+  ai-border-start: rgba(166, 200, 255, 0.36),
   ai-border-strong: #78a9ff,
-  ai-drop-shadow: rgba(15, 98, 254, 0.32),
-  ai-inner-shadow: rgba(69, 137, 255, 0.2),
-  ai-overlay: rgba(0, 17, 65, 0.5),
-  ai-popover-caret-bottom: #3d4655,
-  ai-popover-caret-bottom-background: #213250,
-  ai-popover-caret-bottom-background-actions: #192436,
-  ai-popover-caret-center: #3f68af,
-  ai-popover-shadow-outer-01: rgba(0, 45, 156, 0.25),
-  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.65),
-  ai-skeleton-background: #a6c8ff,
-  ai-skeleton-element-background: #002d9c,
+  ai-drop-shadow: rgba(0, 0, 0, 0.28),
+  ai-inner-shadow: rgba(69, 137, 255, 0.16),
+  ai-overlay: rgba(0, 0, 0, 0.5),
+  ai-popover-background: #161616,
+  ai-popover-caret-bottom: #4589ff,
+  ai-popover-caret-bottom-background: #202d45,
+  ai-popover-caret-bottom-background-actions: #1e283a,
+  ai-popover-caret-center: #4870b5,
+  ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12),
+  ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08),
+  ai-skeleton-background: rgba(120, 169, 255, 0.5),
+  ai-skeleton-element-background: rgba(120, 169, 255, 0.3),
   background: #161616,
   background-active: rgba(141, 141, 141, 0.4),
   background-brand: #0f62fe,
@@ -519,7 +502,7 @@ $g100: (
   chat-avatar-bot: #8d8d8d,
   chat-avatar-user: #4589ff,
   chat-bubble-agent: #262626,
-  chat-bubble-agent-border: #525252,
+  chat-bubble-border: #525252,
   chat-bubble-user: #393939,
   chat-button: #78a9ff,
   chat-button-active: rgba(141, 141, 141, 0.4),
@@ -587,13 +570,6 @@ $g100: (
   shadow: rgba(0, 0, 0, 0.8),
   skeleton-background: #292929,
   skeleton-element: #393939,
-  slug-background: #c6c6c6,
-  slug-background-hover: #e0e0e0,
-  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,20 +292,8 @@ $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 `ai-popover-background` token
+$ai-popover-background: _get('ai-popover-background') !default;
 
 /// The CSS Custom Property for the `ai-popover-shadow-outer-01` token
 $ai-popover-shadow-outer-01: _get('ai-popover-shadow-outer-01') !default;
@@ -316,12 +304,12 @@ $ai-popover-shadow-outer-02: _get('ai-popover-shadow-outer-02') !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-sm` token
+$ai-aura-start-sm: _get('ai-aura-start-sm') !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-start-table` token
-$ai-aura-start-table: _get('ai-aura-start-table') !default;
-
 /// The CSS Custom Property for the `ai-aura-end` token
 $ai-aura-end: _get('ai-aura-end') !default;
 
@@ -388,8 +376,8 @@ $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-bubble-border` token
+$chat-bubble-border: _get('chat-bubble-border') !default;
 
 /// The CSS Custom Property for the `chat-avatar-bot` token
 $chat-avatar-bot: _get('chat-avatar-bot') !default;

package/src/g10.js

@@ -205,30 +205,24 @@ export const toggleOff = gray50;
 export const shadow = 'rgba(0, 0, 0, 0.3)';
 
 //// AI - Experimental (Use at your own risk)
-// Slug tokens
-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;
-
 //// Phase 2 - new \\\\
 // Shared
-export const aiInnerShadow = rgba(blue50, 0.2);
-export const aiAuraStartTable = rgba(blue50, 0.15);
+export const aiInnerShadow = rgba(blue50, 0.1);
+export const aiAuraStartSm = rgba(blue50, 0.16);
 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 aiBorderStart = rgba(blue30, 0.64);
+export const aiBorderEnd = blue40;
+export const aiDropShadow = rgba(blue60, 0.1);
 export const aiAuraHoverBackground = blue10;
-export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverStart = rgba(blue50, 0.32);
 export const aiAuraHoverEnd = rgba(white, 0);
 
 // AI Popover
-export const aiPopoverShadowOuter01 = rgba(blue70, 0.25);
-export const aiPopoverShadowOuter02 = rgba(black, 0.1);
+export const aiPopoverBackground = white;
+export const aiPopoverShadowOuter01 = rgba(blue70, 0.06);
+export const aiPopoverShadowOuter02 = rgba(black, 0.04);
 
 // AI skeleton
 export const aiSkeletonBackground = blue20;
@@ -238,10 +232,10 @@ export const aiSkeletonElementBackground = blue50;
 export const aiOverlay = rgba(blue100, 0.5);
 
 // One off tokens for caret
-export const aiPopoverCaretCenter = '#A7C7FF';
-export const aiPopoverCaretBottom = blue20;
-export const aiPopoverCaretBottomBackgroundActions = '#D2DCEE';
-export const aiPopoverCaretBottomBackground = '#CCDBF8';
+export const aiPopoverCaretCenter = '#A0C3FF';
+export const aiPopoverCaretBottom = blue40;
+export const aiPopoverCaretBottomBackgroundActions = '#E9EFFA';
+export const aiPopoverCaretBottomBackground = '#EAF1FF';
 
 // Chat tokens
 export const chatPromptBackground = white;
@@ -249,7 +243,7 @@ export const chatPromptBorderStart = gray10;
 export const chatPromptBorderEnd = rgba(gray10, 0);
 export const chatBubbleUser = gray20;
 export const chatBubbleAgent = white;
-export const chatBubbleAgentBorder = gray20;
+export const chatBubbleBorder = gray20;
 export const chatAvatarBot = gray60;
 export const chatAvatarAgent = gray80;
 export const chatAvatarUser = blue60;

package/src/g100.js

@@ -11,14 +11,11 @@ import {
   blue60,
   blue70,
   blue80,
-  blue100,
 
   // Gray
   gray10,
   gray10Hover,
-  gray20,
   gray30,
-  gray30Hover,
   gray40,
   gray50,
   gray60,
@@ -211,43 +208,37 @@ export const toggleOff = gray60;
 export const shadow = rgba(black, 0.8);
 
 //// AI - Experimental (Use at your own risk)
-// Slug tokens
-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;
-
 //// Phase 2 - new \\\\
 // Shared
-export const aiInnerShadow = rgba(blue50, 0.2);
-export const aiAuraStartTable = rgba(blue50, 0.15);
+export const aiInnerShadow = rgba(blue50, 0.16);
+export const aiAuraStartSm = rgba(blue50, 0.16);
 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 aiBorderStart = rgba(blue30, 0.36);
+export const aiBorderEnd = blue50;
+export const aiDropShadow = rgba(black, 0.28);
 export const aiAuraHoverBackground = layerHover01;
 export const aiAuraHoverStart = rgba(blue50, 0.4);
 export const aiAuraHoverEnd = rgba(black, 0);
 
 // AI Popover
-export const aiPopoverShadowOuter01 = rgba(blue80, 0.25);
-export const aiPopoverShadowOuter02 = rgba(black, 0.65);
+export const aiPopoverBackground = gray100;
+export const aiPopoverShadowOuter01 = rgba(black, 0.12);
+export const aiPopoverShadowOuter02 = rgba(black, 0.08);
 
 // AI skeleton
-export const aiSkeletonBackground = blue30;
-export const aiSkeletonElementBackground = blue80;
+export const aiSkeletonBackground = rgba(blue40, 0.5);
+export const aiSkeletonElementBackground = rgba(blue40, 0.3);
 
 // AI Modal tokens
-export const aiOverlay = rgba(blue100, 0.5);
+export const aiOverlay = rgba(black, 0.5);
 
 // One off tokens for caret
-export const aiPopoverCaretCenter = '#3F68AF';
-export const aiPopoverCaretBottom = '#3D4655';
-export const aiPopoverCaretBottomBackgroundActions = '#192436';
-export const aiPopoverCaretBottomBackground = '#213250';
+export const aiPopoverCaretCenter = '#4870B5';
+export const aiPopoverCaretBottom = blue50;
+export const aiPopoverCaretBottomBackgroundActions = '#1E283A';
+export const aiPopoverCaretBottomBackground = '#202D45';
 
 // Chat tokens
 export const chatPromptBackground = gray100;
@@ -255,7 +246,7 @@ export const chatPromptBorderStart = gray90;
 export const chatPromptBorderEnd = rgba(gray90, 0);
 export const chatBubbleUser = gray80;
 export const chatBubbleAgent = gray90;
-export const chatBubbleAgentBorder = gray70;
+export const chatBubbleBorder = gray70;
 export const chatAvatarBot = gray50;
 export const chatAvatarAgent = gray30;
 export const chatAvatarUser = blue50;

package/src/g90.js

@@ -10,15 +10,11 @@ import {
   blue40,
   blue60,
   blue70,
-  blue80,
-  blue100,
 
   // Gray
   gray10,
   gray10Hover,
-  gray20,
   gray30,
-  gray30Hover,
   gray40,
   gray50,
   gray50Hover,
@@ -212,43 +208,37 @@ export const toggleOff = gray50;
 export const shadow = rgba(black, 0.8);
 
 //// AI - Experimental (Use at your own risk)
-// Slug tokens
-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;
-
 //// Phase 2 - new \\\\
 // Shared
-export const aiInnerShadow = rgba(blue50, 0.2);
-export const aiAuraStartTable = rgba(blue50, 0.15);
+export const aiInnerShadow = rgba(blue50, 0.16);
+export const aiAuraStartSm = rgba(blue50, 0.16);
 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 aiBorderStart = rgba(blue30, 0.36);
+export const aiBorderEnd = blue50;
+export const aiDropShadow = rgba(black, 0.28);
 export const aiAuraHoverBackground = layerHover01;
 export const aiAuraHoverStart = rgba(blue50, 0.4);
 export const aiAuraHoverEnd = rgba(black, 0);
 
 // AI Popover
-export const aiPopoverShadowOuter01 = rgba(blue80, 0.25);
-export const aiPopoverShadowOuter02 = rgba(black, 0.65);
+export const aiPopoverBackground = gray100;
+export const aiPopoverShadowOuter01 = rgba(black, 0.12);
+export const aiPopoverShadowOuter02 = rgba(black, 0.08);
 
 // AI skeleton
-export const aiSkeletonBackground = blue30;
-export const aiSkeletonElementBackground = blue80;
+export const aiSkeletonBackground = rgba(blue40, 0.5);
+export const aiSkeletonElementBackground = rgba(blue40, 0.3);
 
 // AI Modal tokens
-export const aiOverlay = rgba(blue100, 0.5);
+export const aiOverlay = rgba(black, 0.5);
 
 // One off tokens for caret
-export const aiPopoverCaretCenter = '#456FB5';
-export const aiPopoverCaretBottom = '#465060';
-export const aiPopoverCaretBottomBackgroundActions = '#253042';
-export const aiPopoverCaretBottomBackground = '#2D3F5C';
+export const aiPopoverCaretCenter = '#4870B5';
+export const aiPopoverCaretBottom = blue50;
+export const aiPopoverCaretBottomBackgroundActions = '#1E283A';
+export const aiPopoverCaretBottomBackground = '#202D45';
 
 // Chat tokens
 export const chatPromptBackground = gray100;
@@ -256,7 +246,7 @@ export const chatPromptBorderStart = gray90;
 export const chatPromptBorderEnd = rgba(gray90, 0);
 export const chatBubbleUser = gray80;
 export const chatBubbleAgent = gray90;
-export const chatBubbleAgentBorder = gray70;
+export const chatBubbleBorder = gray70;
 export const chatAvatarBot = gray50;
 export const chatAvatarAgent = gray30;
 export const chatAvatarUser = blue50;

package/src/tokens/v11TokenGroup.js

@@ -345,18 +345,14 @@ export const ai = TokenGroup.create({
   name: 'AI',
   properties: ['background'],
   tokens: [
-    'slug-background',
-    'slug-gradient',
-    'slug-background-hover',
-    'slug-gradient-hover',
-    'slug-hollow-hover',
     // Phase 2
+    'ai-popover-background',
     'ai-popover-shadow-outer-01',
     'ai-popover-shadow-outer-02',
     // Linear gradient refactor
     'ai-inner-shadow',
+    'ai-aura-start-sm',
     'ai-aura-start',
-    'ai-aura-start-table',
     'ai-aura-end',
     'ai-aura-hover-background',
     'ai-aura-hover-start',
@@ -379,7 +375,7 @@ export const ai = TokenGroup.create({
     'chat-prompt-border-end',
     'chat-bubble-user',
     'chat-bubble-agent',
-    'chat-bubble-agent-border',
+    'chat-bubble-border',
     'chat-avatar-bot',
     'chat-avatar-agent',
     'chat-avatar-user',

package/src/white.js

@@ -205,30 +205,24 @@ export const toggleOff = gray50;
 export const shadow = 'rgba(0, 0, 0, 0.3)';
 
 //// AI - Experimental (Use at your own risk)
-// Slug tokens
-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;
-
 //// Phase 2 - new \\\\
 // Shared
-export const aiInnerShadow = rgba(blue50, 0.2);
-export const aiAuraStartTable = rgba(blue50, 0.15);
+export const aiInnerShadow = rgba(blue50, 0.1);
+export const aiAuraStartSm = rgba(blue50, 0.16);
 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 aiBorderStart = rgba(blue30, 0.64);
+export const aiBorderEnd = blue40;
+export const aiDropShadow = rgba(blue60, 0.1);
 export const aiAuraHoverBackground = blue10;
-export const aiAuraHoverStart = rgba(blue50, 0.4);
+export const aiAuraHoverStart = rgba(blue50, 0.32);
 export const aiAuraHoverEnd = rgba(white, 0);
 
 // AI Popover
-export const aiPopoverShadowOuter01 = rgba(blue70, 0.25);
-export const aiPopoverShadowOuter02 = rgba(black, 0.1);
+export const aiPopoverBackground = white;
+export const aiPopoverShadowOuter01 = rgba(blue70, 0.06);
+export const aiPopoverShadowOuter02 = rgba(black, 0.04);
 
 // AI skeleton
 export const aiSkeletonBackground = blue20;
@@ -238,10 +232,10 @@ export const aiSkeletonElementBackground = blue50;
 export const aiOverlay = rgba(blue100, 0.5);
 
 // One off tokens for caret
-export const aiPopoverCaretCenter = '#A7C7FF';
-export const aiPopoverCaretBottom = blue20;
-export const aiPopoverCaretBottomBackgroundActions = '#DAE5F8';
-export const aiPopoverCaretBottomBackground = '#D5E5FF';
+export const aiPopoverCaretCenter = '#A0C3FF';
+export const aiPopoverCaretBottom = blue40;
+export const aiPopoverCaretBottomBackgroundActions = '#E9EFFA';
+export const aiPopoverCaretBottomBackground = '#EAF1FF';
 
 // Chat tokens
 export const chatPromptBackground = white;
@@ -249,7 +243,7 @@ export const chatPromptBorderStart = gray10;
 export const chatPromptBorderEnd = rgba(gray10, 0);
 export const chatBubbleUser = gray20;
 export const chatBubbleAgent = white;
-export const chatBubbleAgentBorder = gray20;
+export const chatBubbleBorder = gray20;
 export const chatAvatarBot = gray60;
 export const chatAvatarAgent = gray80;
 export const chatAvatarUser = blue60;