@carbon/themes 11.32.0 → 11.33.0-rc.0

package/src/component-tokens/tag/tokens.js

@@ -1,52 +1,75 @@
 import {
   red20,
+  red40,
+  red50,
   red70,
   red80,
   red20Hover,
   red70Hover,
   magenta20,
+  magenta40,
+  magenta50,
   magenta70,
   magenta80,
   magenta20Hover,
   magenta70Hover,
   purple20,
+  purple40,
+  purple50,
   purple70,
   purple80,
   purple20Hover,
   purple70Hover,
   blue20,
+  blue40,
+  blue50,
   blue70,
   blue80,
   blue20Hover,
   blue70Hover,
   cyan20,
+  cyan40,
+  cyan50,
   cyan70,
   cyan80,
   cyan20Hover,
   cyan70Hover,
   teal20,
+  teal40,
+  teal50,
   teal70,
   teal80,
   teal20Hover,
   teal70Hover,
   green20,
+  green40,
+  green50,
   green70,
   green80,
   green20Hover,
   green70Hover,
+  gray10,
   gray20,
+  gray40,
+  gray50,
   gray70,
-  gray80,
+  gray100,
   gray20Hover,
   gray70Hover,
+  warmGray10,
   warmGray20,
+  warmGray40,
+  warmGray50,
   warmGray70,
-  warmGray80,
+  warmGray100,
   warmGray20Hover,
   warmGray70Hover,
+  coolGray10,
   coolGray20,
+  coolGray40,
+  coolGray50,
   coolGray70,
-  coolGray80,
+  coolGray100,
   coolGray20Hover,
   coolGray70Hover,
 } from '@carbon/colors';
@@ -204,10 +227,10 @@ export const tagBackgroundGray = {
 };
 
 export const tagColorGray = {
-  whiteTheme: gray80,
-  g10: gray80,
-  g90: gray20,
-  g100: gray20,
+  whiteTheme: gray100,
+  g10: gray100,
+  g90: gray10,
+  g100: gray10,
 };
 
 export const tagHoverGray = {
@@ -225,10 +248,10 @@ export const tagBackgroundCoolGray = {
 };
 
 export const tagColorCoolGray = {
-  whiteTheme: coolGray80,
-  g10: coolGray80,
-  g90: coolGray20,
-  g100: coolGray20,
+  whiteTheme: coolGray100,
+  g10: coolGray100,
+  g90: coolGray10,
+  g100: coolGray10,
 };
 
 export const tagHoverCoolGray = {
@@ -246,10 +269,10 @@ export const tagBackgroundWarmGray = {
 };
 
 export const tagColorWarmGray = {
-  whiteTheme: warmGray80,
-  g10: warmGray80,
-  g90: warmGray20,
-  g100: warmGray20,
+  whiteTheme: warmGray100,
+  g10: warmGray100,
+  g90: warmGray10,
+  g100: warmGray10,
 };
 
 export const tagHoverWarmGray = {
@@ -258,3 +281,73 @@ export const tagHoverWarmGray = {
   g90: warmGray70Hover,
   g100: warmGray70Hover,
 };
+
+export const tagBorderRed = {
+  whiteTheme: red40,
+  g10: red40,
+  g90: red50,
+  g100: red50,
+};
+
+export const tagBorderBlue = {
+  whiteTheme: blue40,
+  g10: blue40,
+  g90: blue50,
+  g100: blue50,
+};
+
+export const tagBorderCyan = {
+  whiteTheme: cyan40,
+  g10: cyan40,
+  g90: cyan50,
+  g100: cyan50,
+};
+
+export const tagBorderTeal = {
+  whiteTheme: teal40,
+  g10: teal40,
+  g90: teal50,
+  g100: teal50,
+};
+
+export const tagBorderGreen = {
+  whiteTheme: green40,
+  g10: green40,
+  g90: green50,
+  g100: green50,
+};
+
+export const tagBorderMagenta = {
+  whiteTheme: magenta40,
+  g10: magenta40,
+  g90: magenta50,
+  g100: magenta50,
+};
+
+export const tagBorderPurple = {
+  whiteTheme: purple40,
+  g10: purple40,
+  g90: purple50,
+  g100: purple50,
+};
+
+export const tagBorderGray = {
+  whiteTheme: gray40,
+  g10: gray40,
+  g90: gray50,
+  g100: gray50,
+};
+
+export const tagBorderCoolGray = {
+  whiteTheme: coolGray40,
+  g10: coolGray40,
+  g90: coolGray50,
+  g100: coolGray50,
+};
+
+export const tagBorderWarmGray = {
+  whiteTheme: warmGray40,
+  g10: warmGray40,
+  g90: warmGray50,
+  g100: warmGray50,
+};

package/src/g10.js

@@ -9,16 +9,12 @@ import {
   // Blue
   blue10,
   blue20,
-  blue20Hover,
   blue30,
   blue40,
   blue60,
   blue70,
   blue100,
 
-  // CoolGray
-  coolGray10,
-
   // Gray
   gray10,
   gray10Hover,
@@ -230,41 +226,22 @@ 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);
+// AI Popover
+export const aiPopoverShadowOuter01 = rgba(blue70, 0.25);
+export const aiPopoverShadowOuter02 = rgba(black, 0.1);
 
 // AI skeleton
-export const aiSkeletonBackground = blue20Hover;
-export const aiSkeletonElementBackground = blue100;
+export const aiSkeletonBackground = blue20;
+export const aiSkeletonElementBackground = blue50;
 
 // AI Modal tokens
 export const aiOverlay = rgba(blue100, 0.5);
 
-//// 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';
-export const slugCalloutCaretBottom = blue20;
-export const slugCalloutCaretBottomBackgroundActions = '#D2DCEE';
-export const slugCalloutCaretBottomBackground = '#CCDBF8';
+export const aiPopoverCaretCenter = '#A7C7FF';
+export const aiPopoverCaretBottom = blue20;
+export const aiPopoverCaretBottomBackgroundActions = '#D2DCEE';
+export const aiPopoverCaretBottomBackground = '#CCDBF8';
 
 // Chat tokens
 export const chatPromptBackground = white;
@@ -276,6 +253,8 @@ export const chatBubbleAgentBorder = gray20;
 export const chatAvatarBot = gray60;
 export const chatAvatarAgent = gray80;
 export const chatAvatarUser = blue60;
+export const chatShellBackground = white;
+export const chatHeaderBackground = white;
 
 export {
   // Type

package/src/g100.js

@@ -7,12 +7,9 @@
 
 import {
   // Blue
-  blue20,
-  blue20Hover,
   blue40,
   blue60,
   blue70,
-  blue70Hover,
   blue80,
   blue100,
 
@@ -235,41 +232,22 @@ 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);
+// AI Popover
+export const aiPopoverShadowOuter01 = rgba(blue80, 0.25);
+export const aiPopoverShadowOuter02 = rgba(black, 0.65);
 
 // AI skeleton
-export const aiSkeletonBackground = blue70Hover;
-export const aiSkeletonElementBackground = blue100;
+export const aiSkeletonBackground = blue30;
+export const aiSkeletonElementBackground = blue80;
 
 // AI Modal tokens
 export const aiOverlay = rgba(blue100, 0.5);
 
-//// 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';
-export const slugCalloutCaretBottom = '#3D4655';
-export const slugCalloutCaretBottomBackgroundActions = '#192436';
-export const slugCalloutCaretBottomBackground = '#213250';
+export const aiPopoverCaretCenter = '#3F68AF';
+export const aiPopoverCaretBottom = '#3D4655';
+export const aiPopoverCaretBottomBackgroundActions = '#192436';
+export const aiPopoverCaretBottomBackground = '#213250';
 
 // Chat tokens
 export const chatPromptBackground = gray100;
@@ -281,6 +259,8 @@ export const chatBubbleAgentBorder = gray70;
 export const chatAvatarBot = gray50;
 export const chatAvatarAgent = gray30;
 export const chatAvatarUser = blue50;
+export const chatShellBackground = gray90;
+export const chatHeaderBackground = gray90;
 
 export {
   // Type

package/src/g90.js

@@ -7,12 +7,9 @@
 
 import {
   // Blue
-  blue20,
-  blue20Hover,
   blue40,
   blue60,
   blue70,
-  blue70Hover,
   blue80,
   blue100,
 
@@ -236,41 +233,22 @@ 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);
+// AI Popover
+export const aiPopoverShadowOuter01 = rgba(blue80, 0.25);
+export const aiPopoverShadowOuter02 = rgba(black, 0.65);
 
 // AI skeleton
-export const aiSkeletonBackground = blue70Hover;
-export const aiSkeletonElementBackground = blue100;
+export const aiSkeletonBackground = blue30;
+export const aiSkeletonElementBackground = blue80;
 
 // AI Modal tokens
 export const aiOverlay = rgba(blue100, 0.5);
 
-//// 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';
-export const slugCalloutCaretBottom = '#465060';
-export const slugCalloutCaretBottomBackgroundActions = '#253042';
-export const slugCalloutCaretBottomBackground = '#2D3F5C';
+export const aiPopoverCaretCenter = '#456FB5';
+export const aiPopoverCaretBottom = '#465060';
+export const aiPopoverCaretBottomBackgroundActions = '#253042';
+export const aiPopoverCaretBottomBackground = '#2D3F5C';
 
 // Chat tokens
 export const chatPromptBackground = gray100;
@@ -282,6 +260,8 @@ export const chatBubbleAgentBorder = gray70;
 export const chatAvatarBot = gray50;
 export const chatAvatarAgent = gray30;
 export const chatAvatarUser = blue50;
+export const chatShellBackground = gray90;
+export const chatHeaderBackground = gray90;
 
 export {
   // Type

package/src/tokens/components.js

@@ -74,6 +74,16 @@ export const tag = TokenGroup.create({
     'tag-background-gray',
     'tag-color-gray',
     'tag-hover-gray',
+    'tag-border-red',
+    'tag-border-blue',
+    'tag-border-cyan',
+    'tag-border-teal',
+    'tag-border-green',
+    'tag-border-magenta',
+    'tag-border-purple',
+    'tag-border-gray',
+    'tag-border-cool-gray',
+    'tag-border-warm-gray',
     'tag-background-cool-gray',
     'tag-color-cool-gray',
     'tag-hover-cool-gray',

package/src/tokens/v11TokenGroup.js

@@ -350,26 +350,9 @@ export const ai = TokenGroup.create({
     'slug-background-hover',
     'slug-gradient-hover',
     'slug-hollow-hover',
-    'slug-callout-gradient-top',
-    'slug-callout-gradient-bottom',
-    'slug-callout-aura-start',
-    'slug-callout-aura-end',
-    'slug-callout-gradient-top-hover',
-    'slug-callout-gradient-bottom-hover',
-    'slug-callout-aura-start-hover-01',
-    'slug-callout-aura-start-hover-02',
-    'slug-callout-aura-end-hover-01',
-    'slug-callout-aura-end-hover-02',
-    'slug-callout-gradient-top-selected',
-    'slug-callout-gradient-bottom-selected',
-    'slug-callout-aura-start-selected',
-    'slug-callout-aura-end-selected',
-    'ai-gradient-start-01',
-    'ai-gradient-start-02',
-    'ai-gradient-end',
     // Phase 2
-    'slug-callout-shadow-outer-01',
-    'slug-callout-shadow-outer-02',
+    'ai-popover-shadow-outer-01',
+    'ai-popover-shadow-outer-02',
     // Linear gradient refactor
     'ai-inner-shadow',
     'ai-aura-start',
@@ -386,10 +369,10 @@ export const ai = TokenGroup.create({
     'ai-skeleton-element-background',
     'ai-overlay',
     // Caret tokens
-    'slug-callout-caret-center',
-    'slug-callout-caret-bottom',
-    'slug-callout-caret-bottom-background',
-    'slug-callout-caret-bottom-background-actions',
+    'ai-popover-caret-center',
+    'ai-popover-caret-bottom',
+    'ai-popover-caret-bottom-background',
+    'ai-popover-caret-bottom-background-actions',
     // Chat tokens
     'chat-prompt-background',
     'chat-prompt-border-start',
@@ -400,6 +383,8 @@ export const ai = TokenGroup.create({
     'chat-avatar-bot',
     'chat-avatar-agent',
     'chat-avatar-user',
+    'chat-shell-background',
+    'chat-header-background',
   ],
 });
 

package/src/white.js

@@ -9,16 +9,12 @@ import {
   // Blue
   blue10,
   blue20,
-  blue20Hover,
   blue30,
   blue40,
   blue60,
   blue70,
   blue100,
 
-  // CoolGray
-  coolGray10,
-
   // Gray
   gray10,
   gray10Hover,
@@ -230,41 +226,22 @@ 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);
+// AI Popover
+export const aiPopoverShadowOuter01 = rgba(blue70, 0.25);
+export const aiPopoverShadowOuter02 = rgba(black, 0.1);
 
 // AI skeleton
-export const aiSkeletonBackground = blue20Hover;
-export const aiSkeletonElementBackground = blue100;
+export const aiSkeletonBackground = blue20;
+export const aiSkeletonElementBackground = blue50;
 
 // AI Modal tokens
 export const aiOverlay = rgba(blue100, 0.5);
 
-//// 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';
-export const slugCalloutCaretBottom = blue20;
-export const slugCalloutCaretBottomBackgroundActions = '#DAE5F8';
-export const slugCalloutCaretBottomBackground = '#D5E5FF';
+export const aiPopoverCaretCenter = '#A7C7FF';
+export const aiPopoverCaretBottom = blue20;
+export const aiPopoverCaretBottomBackgroundActions = '#DAE5F8';
+export const aiPopoverCaretBottomBackground = '#D5E5FF';
 
 // Chat tokens
 export const chatPromptBackground = white;
@@ -276,6 +253,8 @@ export const chatBubbleAgentBorder = gray20;
 export const chatAvatarBot = gray60;
 export const chatAvatarAgent = gray80;
 export const chatAvatarUser = blue60;
+export const chatShellBackground = white;
+export const chatHeaderBackground = white;
 
 // Type
 export {

package/telemetry.yml

@@ -0,0 +1,7 @@
+# yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+version: 1
+projectId: a56e8642-350a-4ee1-8e04-711cf16f3508
+endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+collect:
+  npm:
+    dependencies: null