feat(themes): add ai-chat tokens (#15574)

carbon-design-system · Jan 25, 2024 · c9c91d4 · c9c91d4
1 parent 6a49fff
commit c9c91d4
Show file tree

Hide file tree

Showing 9 changed files with 117 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
@@ -61,6 +61,15 @@ Array [
   "buttonTokens",
   "caption01",
   "caption02",
+  "chatAvatarAgent",
+  "chatAvatarBot",
+  "chatAvatarUser",
+  "chatBubbleAgent",
+  "chatBubbleAgentBorder",
+  "chatBubbleUser",
+  "chatPromptBackground",
+  "chatPromptBorderEnd",
+  "chatPromptBorderStart",
   "code01",
   "code02",
   "colors",

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -162,6 +162,15 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-caret-bottom",
         "slug-callout-caret-bottom-background",
         "slug-callout-caret-bottom-background-actions",
+        "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",
         "highlight",
         "overlay",
         "toggle-off",

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

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

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

diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -273,6 +273,15 @@ Array [
   "slug-callout-caret-bottom",
   "slug-callout-caret-bottom-background",
   "slug-callout-caret-bottom-background-actions",
+  "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",
   "highlight",
   "overlay",
   "toggle-off",

diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -1065,6 +1065,42 @@ test('metadata', () => {
           "name": "slug-callout-caret-bottom-background-actions",
           "type": "color",
         },
+        Object {
+          "name": "chat-prompt-background",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-prompt-border-start",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-prompt-border-end",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-bubble-user",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-bubble-agent",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-bubble-agent-border",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-avatar-bot",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-avatar-agent",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-avatar-user",
+          "type": "color",
+        },
         Object {
           "name": "highlight",
           "type": "color",

diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
@@ -383,6 +383,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',
   ],
 });
 

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