chore: Chat bubble visual context

Author: jperals

style-dictionary/utils/contexts.ts

@@ -75,3 +75,11 @@ export const createAppLayoutToolbarContext = (tokens: TokenCategory<string, Glob
     tokens,
   };
 };
+
+export const createChatBubbleContext = (tokens: TokenCategory<string, GlobalValue | ModeValue>) => {
+  return {
+    id: 'chat-bubble',
+    selector: '.awsui-context-chat-bubble',
+    tokens,
+  };
+};

style-dictionary/visual-refresh/contexts/chat-bubble.ts

@@ -0,0 +1,26 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandDensityDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../spacing.js';
+
+const spacingTokens: StyleDictionary.SpacingDictionary = {
+  spaceContainerHorizontal: '{spaceScaledS}',
+  spaceCardVertical: '{spaceScaledS}',
+};
+
+const borderTokens: StyleDictionary.BordersDictionary = {
+  borderRadiusContainer: '{borderRadiusChatBubble}',
+};
+
+const expandedSpacingTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(
+  merge({}, parentTokens, spacingTokens)
+);
+
+const expandedTokens = {
+  ...expandedSpacingTokens,
+  ...borderTokens,
+};
+export { expandedTokens as tokens };

style-dictionary/visual-refresh/index.ts

@@ -5,6 +5,7 @@ import { ThemeBuilder } from '@cloudscape-design/theming-build';
 import {
   createAlertContext,
   createAppLayoutToolbarContext,
+  createChatBubbleContext,
   createCompactTableContext,
   createFlashbarContext,
   createFlashbarWarningContext,
@@ -52,6 +53,7 @@ export async function buildVisualRefresh(builder: ThemeBuilder) {
   builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
   builder.addContext(createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens));
   builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens));
+  builder.addContext(createChatBubbleContext((await import('./contexts/chat-bubble.js')).tokens));
 
   return builder.build();
 }