feat(Tokens): add in new chat tokens (#15880)

carbon-design-system · Mar 5, 2024 · 70d64b6 · 70d64b6
1 parent 5e191bb
commit 70d64b6
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 0 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -74,9 +74,11 @@ Array [
   "chatBubbleAgent",
   "chatBubbleAgentBorder",
   "chatBubbleUser",
+  "chatHeaderBackground",
   "chatPromptBackground",
   "chatPromptBorderEnd",
   "chatPromptBorderStart",
+  "chatShellBackground",
   "code01",
   "code02",
   "colors",

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -178,6 +178,8 @@ describe('@carbon/styles/scss/theme', () => {
         "chat-avatar-bot",
         "chat-avatar-agent",
         "chat-avatar-user",
+        "chat-shell-background",
+        "chat-header-background",
         "highlight",
         "overlay",
         "toggle-off",

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -276,6 +276,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

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -281,6 +281,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

diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -282,6 +282,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

diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -289,6 +289,8 @@ Array [
   "chat-avatar-bot",
   "chat-avatar-agent",
   "chat-avatar-user",
+  "chat-shell-background",
+  "chat-header-background",
   "highlight",
   "overlay",
   "toggle-off",

diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -1129,6 +1129,14 @@ test('metadata', () => {
           "name": "chat-avatar-user",
           "type": "color",
         },
+        Object {
+          "name": "chat-shell-background",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-header-background",
+          "type": "color",
+        },
         Object {
           "name": "highlight",
           "type": "color",

diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
@@ -400,6 +400,8 @@ export const ai = TokenGroup.create({
     'chat-avatar-bot',
     'chat-avatar-agent',
     'chat-avatar-user',
+    'chat-shell-background',
+    'chat-header-background',
   ],
 });
 

diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
@@ -276,6 +276,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 {