@planningcenter/chat-react-native 3.44.1 → 3.44.2-qa-staging.0

package/src/__tests__/hooks/use_interaction_tinted_background_color.test.tsx

@@ -0,0 +1,67 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ChatProvider, CreateChatThemeProps } from '../../contexts/chat_context'
+import { useInteractionTintedBackgroundColor } from '../../hooks'
+
+let themeProps: CreateChatThemeProps
+let queryClient: QueryClient
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient({
+    defaultOptions: {
+      queries: {
+        refetchInterval: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    },
+  })
+})
+
+afterEach(() => {
+  queryClient.clear()
+  queryClient.cancelQueries()
+  queryClient.removeQueries()
+})
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ChatProvider value={{ onUnauthorizedResponse: () => {}, theme: themeProps }}>
+        {children}
+      </ChatProvider>
+    </QueryClientProvider>
+  )
+}
+
+describe('useInteractionTintedBackgroundColor (non-chip surfaces)', () => {
+  test('ignores fillColorChipSelected', () => {
+    themeProps = {
+      theme: {
+        colors: {
+          interaction: 'rgb(0, 255, 0)',
+          fillColorChipSelected: 'rgb(9, 9, 9)',
+        },
+      },
+    }
+
+    const { result: withChipToken } = renderHook(() => useInteractionTintedBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    themeProps = {
+      theme: {
+        colors: { interaction: 'rgb(0, 255, 0)' },
+      },
+    }
+
+    const { result: withoutChipToken } = renderHook(() => useInteractionTintedBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    expect(withChipToken.current).toBe(withoutChipToken.current)
+    expect(withoutChipToken.current).toBe('hsl(120, 100%, 92%)')
+  })
+})

package/src/__tests__/hooks/use_selected_chip_background_color.test.tsx

@@ -0,0 +1,78 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ChatProvider, CreateChatThemeProps } from '../../contexts/chat_context'
+import { useSelectedChipBackgroundColor } from '../../hooks'
+
+let themeProps: CreateChatThemeProps
+let queryClient: QueryClient
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient({
+    defaultOptions: {
+      queries: {
+        refetchInterval: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    },
+  })
+})
+
+afterEach(() => {
+  queryClient.clear()
+  queryClient.cancelQueries()
+  queryClient.removeQueries()
+})
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ChatProvider value={{ onUnauthorizedResponse: () => {}, theme: themeProps }}>
+        {children}
+      </ChatProvider>
+    </QueryClientProvider>
+  )
+}
+
+describe('useSelectedChipBackgroundColor', () => {
+  test('falls back to colors.interaction when fillColorChipSelected is absent', () => {
+    themeProps = { theme: { colors: { interaction: 'rgb(0, 255, 0)' } } }
+
+    const { result } = renderHook(() => useSelectedChipBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    expect(result.current).toBe('hsl(120, 100%, 92%)')
+  })
+
+  test('prefers fillColorChipSelected over colors.interaction when supplied', () => {
+    themeProps = {
+      theme: {
+        colors: { interaction: 'rgb(0, 255, 0)', fillColorChipSelected: 'rgb(255, 0, 0)' },
+      },
+    }
+
+    const { result } = renderHook(() => useSelectedChipBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    expect(result.current).toBe('hsl(0, 100%, 92%)')
+  })
+
+  test('respects a custom hslLightnessChipSelected', () => {
+    themeProps = {
+      theme: {
+        colors: { interaction: 'rgb(0, 255, 0)' },
+        chip: { hslLightnessChipSelected: 50 },
+      },
+    }
+
+    const { result } = renderHook(() => useSelectedChipBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    expect(result.current).toBe('hsl(120, 100%, 50%)')
+  })
+})

package/src/__tests__/utils/theme.ts

@@ -20,4 +20,27 @@ describe('defaultTheme', () => {
     // render an unstyled or misthemed UI.
     expect(defaultTheme('unspecified').colors).toMatchObject(aliasTokensColorMap.light)
   })
+
+  describe('chip tokens', () => {
+    test('seeds static defaults for the non-selected chip trio in both schemes', () => {
+      const light = defaultTheme('light').colors
+      const dark = defaultTheme('dark').colors
+
+      expect(light.borderColorChip).toBe('hsl(0, 0%, 88%)')
+      expect(light.fillColorChip).toBe('transparent')
+      expect(light.textColorChip).toBe('hsl(0, 0%, 45%)')
+
+      expect(dark.borderColorChip).toBe('hsl(0, 0%, 24%)')
+      expect(dark.fillColorChip).toBe('transparent')
+      expect(dark.textColorChip).toBe('hsl(0, 0%, 68%)')
+    })
+
+    test('never seeds a static default for the selected chip trio', () => {
+      const { colors } = defaultTheme('light')
+
+      expect(colors.borderColorChipSelected).toBeUndefined()
+      expect(colors.fillColorChipSelected).toBeUndefined()
+      expect(colors.textColorChipSelected).toBeUndefined()
+    })
+  })
 })

package/src/components/conversation/message.tsx

@@ -13,7 +13,7 @@ import { MessageReaction } from '../../components/conversation/message_reaction'
 import { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'
 import {
   useAnimatedMessageBackgroundColor,
-  useInteractionGhostBackgroundColor,
+  useInteractionTintedBackgroundColor,
   useTheme,
 } from '../../hooks'
 import { useDeletingIds } from '../../hooks'
@@ -341,7 +341,7 @@ export function Message({
 
 const useMessageStyles = (mine: boolean, isDeleting: boolean) => {
   const { colors } = useTheme()
-  const myMessageBackgroundColor = useInteractionGhostBackgroundColor()
+  const myMessageBackgroundColor = useInteractionTintedBackgroundColor()
   const { width } = useWindowDimensions()
   const tabletWidth = width >= 744 // Smallest iPad Mini's width
 

package/src/components/conversation/message_form.tsx

@@ -17,7 +17,7 @@ import { ChatContext } from '../../contexts/chat_context'
 import {
   useCreateAndroidRippleColor,
   useTheme,
-  useInteractionGhostBackgroundColor,
+  useInteractionTintedBackgroundColor,
   useScalableNumberOfLines,
   useFontScale,
 } from '../../hooks'
@@ -783,7 +783,7 @@ const useMessageFormStyles = () => {
   const navigationTheme = useNavigationTheme()
   const buttonSize = 38
 
-  const giphyBadgeBackgroundColor = useInteractionGhostBackgroundColor()
+  const giphyBadgeBackgroundColor = useInteractionTintedBackgroundColor()
 
   return StyleSheet.create({
     container: {

package/src/components/conversation/message_reaction.tsx

@@ -3,7 +3,7 @@ import colorFunction from 'color'
 import React, { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { Text } from '../../components/display'
-import { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'
+import { useSelectedChipBackgroundColor, useTheme } from '../../hooks'
 import { useCreateAndroidRippleColor } from '../../hooks/use_create_android_ripple_color'
 import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'
 import { MessageResource } from '../../types'
@@ -57,12 +57,12 @@ export function MessageReaction({
 export const useReactionStyles = ({ mine }: { mine: number }) => {
   const { colors } = useTheme()
   const activeBorderColor = useMemo(() => {
-    return colorFunction(colors.interaction)
+    return colorFunction(colors.borderColorChipSelected ?? colors.interaction)
       .hsl()
       .lightness(colors.name === 'dark' ? 20 : 80)
       .string()
-  }, [colors.interaction, colors.name])
-  const activeBackgroundColor = useInteractionGhostBackgroundColor()
+  }, [colors.borderColorChipSelected, colors.interaction, colors.name])
+  const activeBackgroundColor = useSelectedChipBackgroundColor()
 
   return StyleSheet.create({
     reaction: {

package/src/components/display/__tests__/toggle_button.test.tsx

@@ -0,0 +1,135 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { ChatProvider, CreateChatThemeProps } from '../../../contexts/chat_context'
+import { ToggleButton } from '../toggle_button'
+
+let themeProps: CreateChatThemeProps
+let queryClient: QueryClient
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient({
+    defaultOptions: {
+      queries: {
+        refetchInterval: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    },
+  })
+})
+
+afterEach(() => {
+  queryClient.clear()
+  queryClient.cancelQueries()
+  queryClient.removeQueries()
+})
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ChatProvider
+        value={{
+          token: {
+            access_token: '',
+            created_at: 0,
+            expires_in: 0,
+            scope: '',
+            refresh_token: '',
+            token_type: '',
+          },
+          onUnauthorizedResponse: () => {},
+          theme: themeProps,
+        }}
+      >
+        {children}
+      </ChatProvider>
+    </QueryClientProvider>
+  )
+}
+
+const renderToggleButton = (active: boolean) => {
+  const view = render(<ToggleButton active={active} accessibilityLabel="Filter" title="Filter" />, {
+    wrapper: Wrapper,
+  })
+
+  return {
+    button: view.getByLabelText('Filter'),
+    text: view.getByText('Filter'),
+  }
+}
+
+describe('ToggleButton chip colors', () => {
+  describe('backward compatibility (Services / sandbox pass only colors.interaction)', () => {
+    const distinctiveGreen = 'rgb(0, 255, 0)'
+
+    beforeEach(() => {
+      themeProps = {
+        theme: {
+          colors: {
+            interaction: distinctiveGreen,
+          },
+        },
+      }
+    })
+
+    test('active state derives border, fill, and text color from colors.interaction', () => {
+      const { button, text } = renderToggleButton(true)
+
+      expect(button).toHaveStyle({ borderColor: distinctiveGreen })
+      // The active fill is the green interaction color lightened via the
+      // chip-background hook (hsl lightness 92 in the light scheme), not
+      // the raw interaction color — pins the hook's transform in place.
+      expect(button).toHaveStyle({ backgroundColor: 'hsl(120, 100%, 92%)' })
+      expect(text).toHaveStyle({ color: distinctiveGreen })
+    })
+
+    test.each([
+      ['light', undefined, 'hsl(0, 0%, 88%)', 'hsl(0, 0%, 45%)'],
+      ['dark', 'dark' as const, 'hsl(0, 0%, 24%)', 'hsl(0, 0%, 68%)'],
+    ])(
+      'inactive state uses the static chip defaults in the %s scheme',
+      (_label, colorScheme, borderColor, color) => {
+        themeProps = {
+          theme: { colors: { interaction: distinctiveGreen } },
+          colorScheme,
+        }
+
+        const { button, text } = renderToggleButton(false)
+
+        expect(button).toHaveStyle({ borderColor })
+        expect(text).toHaveStyle({ color })
+      }
+    )
+  })
+
+  describe('explicit chip token overrides', () => {
+    const explicitBorder = 'rgb(1, 2, 3)'
+    const explicitFill = 'rgb(4, 5, 6)'
+    const explicitText = 'rgb(7, 8, 9)'
+
+    beforeEach(() => {
+      themeProps = {
+        theme: {
+          colors: {
+            interaction: 'rgb(0, 255, 0)',
+            borderColorChipSelected: explicitBorder,
+            fillColorChipSelected: explicitFill,
+            textColorChipSelected: explicitText,
+          },
+        },
+      }
+    })
+
+    test('active state prefers explicit chip tokens over colors.interaction', () => {
+      const { button, text } = renderToggleButton(true)
+
+      expect(button).toHaveStyle({ borderColor: explicitBorder })
+      // fillColorChipSelected still passes through the chip-background hook's
+      // lightness transform, so the rendered fill isn't the raw override.
+      expect(button).toHaveStyle({ backgroundColor: 'hsl(210, 20%, 92%)' })
+      expect(text).toHaveStyle({ color: explicitText })
+    })
+  })
+})

package/src/components/display/toggle_button.tsx

@@ -5,7 +5,7 @@ import {
   useTheme,
   useFontScale,
   useCreateAndroidRippleColor,
-  useInteractionGhostBackgroundColor,
+  useSelectedChipBackgroundColor,
 } from '../../hooks'
 import {
   MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
@@ -164,16 +164,20 @@ const useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>
   const { colors, button } = useTheme()
   const fontScale = useFontScale({ maxFontSizeMultiplier })
 
-  const activeBackgroundColor = useInteractionGhostBackgroundColor()
+  const activeBackgroundColor = useSelectedChipBackgroundColor()
 
-  const color = active ? colors.interaction : colors.textColorDefaultSecondary
+  const borderColor = active
+    ? (colors.borderColorChipSelected ?? colors.interaction)
+    : colors.borderColorChip
+  const fillColor = active ? activeBackgroundColor : colors.fillColorChip
+  const color = active ? (colors.textColorChipSelected ?? colors.interaction) : colors.textColorChip
 
   return StyleSheet.create({
     pressable: {
       borderRadius: button.borderRadius * fontScale,
       borderWidth: 1,
-      borderColor: active ? colors.interaction : colors.borderColorDefaultBase,
-      backgroundColor: active ? activeBackgroundColor : 'transparent',
+      borderColor,
+      backgroundColor: fillColor,
       paddingHorizontal: 16 * fontScale,
       flexDirection: 'row',
       alignItems: 'center',

package/src/hooks/index.ts

@@ -13,7 +13,8 @@ export * from './use_font_scale'
 export * from './use_has_direct_messages'
 export * from './use_groups_groups'
 export * from './use_groups'
-export * from './use_interaction_ghost_color'
+export * from './use_selected_chip_background_color'
+export * from './use_interaction_tinted_background_color'
 export * from './use_message_reaction_toggle'
 export * from './use_new_conversation_entry'
 export * from './use_organization'

package/src/hooks/use_interaction_tinted_background_color.ts

@@ -0,0 +1,20 @@
+import colorFunction from 'color'
+import { useMemo } from 'react'
+import { useTheme } from './use_theme'
+
+/**
+ * Background color for non-chip surfaces (message bubbles, the Giphy badge)
+ * that are tinted from `colors.interaction`. Unaffected by chip tokens.
+ */
+export function useInteractionTintedBackgroundColor() {
+  const { colors } = useTheme()
+
+  return useMemo(
+    () =>
+      colorFunction(colors.interaction)
+        .hsl()
+        .lightness(colors.name === 'dark' ? 12 : 92)
+        .string(),
+    [colors.interaction, colors.name]
+  )
+}

package/src/hooks/use_rest_away_from_dismiss_edge.ts

@@ -0,0 +1,63 @@
+import { noop } from 'lodash'
+import { RefObject, useCallback, useRef } from 'react'
+import { FlatList, NativeScrollEvent, NativeSyntheticEvent, Platform } from 'react-native'
+
+const REST_OFFSET = 1
+
+/**
+ * iOS starts a sheet's interactive dismissal once the content scroll view sits at its
+ * top content edge — for an inverted list, wherever the newest message rests. Resting
+ * the list 1pt in from that edge keeps a drag at the bottom of a conversation scrolling
+ * history instead of swiping the modal away.
+ *
+ * Returns the offset the list rests at plus the scroll listeners that nudge it back
+ * there: once on first layout, then after each gesture settles. On Android there is no
+ * sheet gesture to avoid, so the offset is 0 and the listeners are undefined.
+ */
+export const useRestAwayFromDismissEdge = ({
+  listRef,
+  enabled = Platform.OS === 'ios',
+}: {
+  listRef: RefObject<FlatList | null>
+  enabled?: boolean
+}) => {
+  const restAwayFromDismissEdge = useCallback(() => {
+    listRef.current?.scrollToOffset({ animated: false, offset: REST_OFFSET })
+  }, [listRef])
+
+  const didSetInitialOffset = useRef(false)
+  const handleInitialOffset = useCallback(() => {
+    if (!didSetInitialOffset.current) {
+      didSetInitialOffset.current = true
+      restAwayFromDismissEdge()
+    }
+  }, [restAwayFromDismissEdge])
+
+  // A negative offset means the bounce is still animating; let it settle first.
+  const handleScrollSettled = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetY = event.nativeEvent.contentOffset.y
+
+      if (offsetY >= 0 && offsetY < REST_OFFSET) {
+        restAwayFromDismissEdge()
+      }
+    },
+    [restAwayFromDismissEdge]
+  )
+
+  if (!enabled) {
+    return {
+      restOffset: 0,
+      onContentSizeChange: noop,
+      onScrollEndDrag: noop,
+      onMomentumScrollEnd: noop,
+    }
+  }
+
+  return {
+    restOffset: REST_OFFSET,
+    onContentSizeChange: handleInitialOffset,
+    onScrollEndDrag: handleScrollSettled,
+    onMomentumScrollEnd: handleScrollSettled,
+  }
+}

package/src/hooks/use_selected_chip_background_color.ts

@@ -0,0 +1,21 @@
+import colorFunction from 'color'
+import { useMemo } from 'react'
+import { useTheme } from './use_theme'
+
+/**
+ * Background color for a chip surface (filter button, reaction pill) in its
+ * selected state. Falls back to `colors.interaction` when a consumer hasn't
+ * supplied `colors.fillColorChipSelected`.
+ */
+export function useSelectedChipBackgroundColor() {
+  const { colors, chip } = useTheme()
+
+  return useMemo(
+    () =>
+      colorFunction(colors.fillColorChipSelected ?? colors.interaction)
+        .hsl()
+        .lightness(chip.hslLightnessChipSelected)
+        .string(),
+    [colors.fillColorChipSelected, colors.interaction, chip.hslLightnessChipSelected]
+  )
+}

package/src/screens/conversation_screen.tsx

@@ -40,6 +40,7 @@ import {
   normalizeAnalyticsMetadata,
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
+import { useRestAwayFromDismissEdge } from '../hooks/use_rest_away_from_dismiss_edge'
 import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt_events'
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
@@ -126,11 +127,17 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
     setShowJumpToBottomButton(offsetY > 200)
   }
 
+  const { restOffset, onContentSizeChange, onMomentumScrollEnd, onScrollEndDrag } =
+    useRestAwayFromDismissEdge({
+      listRef,
+      enabled: Platform.OS === 'ios',
+    })
+
   const handleReturnToBottom = useCallback(() => {
     listRef.current?.scrollToOffset({
-      offset: 0,
+      offset: restOffset,
     })
-  }, [])
+  }, [restOffset])
 
   useEffect(() => {
     if (reply_root_id) {
@@ -181,6 +188,9 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             data={messagesWithSeparators}
             keyExtractor={item => item.id}
             onScroll={trackScroll}
+            onContentSizeChange={onContentSizeChange}
+            onScrollEndDrag={onScrollEndDrag}
+            onMomentumScrollEnd={onMomentumScrollEnd}
             scrollEventThrottle={10}
             ListFooterComponent={
               hasNextPage ? null : (

package/src/screens/design_system_screen.tsx

@@ -29,7 +29,7 @@ import {
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import BannerPrimitive from '../components/primitive/banner_primitive'
 import BlankState from '../components/primitive/blank_state_primitive'
-import { useInteractionGhostBackgroundColor, useTheme } from '../hooks'
+import { useSelectedChipBackgroundColor, useTheme } from '../hooks'
 import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
@@ -1325,7 +1325,7 @@ function HapticButton({ title, onPress }: { title: string; onPress: () => void }
 
 const useStyles = () => {
   const { colors } = useTheme()
-  const interactionGhostBackgroundColor = useInteractionGhostBackgroundColor()
+  const selectedChipBackgroundColor = useSelectedChipBackgroundColor()
 
   return StyleSheet.create({
     hapticButton: {
@@ -1334,7 +1334,7 @@ const useStyles = () => {
       padding: 16,
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: interactionGhostBackgroundColor,
+      backgroundColor: selectedChipBackgroundColor,
       borderWidth: 1,
       borderColor: colors.interaction,
       borderRadius: 8,

package/src/utils/theme.ts

@@ -28,6 +28,9 @@ export interface DefaultTheme {
   button: {
     borderRadius: number
   }
+  chip: {
+    hslLightnessChipSelected: number
+  }
   showBadgeProductLogo: boolean
 }
 
@@ -44,6 +47,9 @@ export const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme =>
     button: {
       borderRadius: 40,
     },
+    chip: {
+      hslLightnessChipSelected: scheme === 'dark' ? 12 : 92,
+    },
     showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
   }
 }
@@ -91,6 +97,22 @@ interface ChatColors {
   statusNeutralComposedIcon: string
   statusNeutralComposedText: string
   statusNeutralComposedBackground: string
+  // borderColorChip / textColorChip match the alias tokens
+  // `borderColorDefaultBase` / `textColorDefaultSecondary` the unselected
+  // `ToggleButton` state used before dedicated chip tokens existed.
+  borderColorChip: string
+  fillColorChip: string
+  textColorChip: string
+  /**
+   * Selected-chip colors (border/fill/text). Never assign a static default
+   * directly — these stay optional so they always fall back to
+   * `colors.interaction` via `??` at the read site. Every current consumer
+   * overrides `interaction` at runtime, and a seeded default here could win
+   * over that override depending on merge order.
+   */
+  borderColorChipSelected?: string
+  fillColorChipSelected?: string
+  textColorChipSelected?: string
 }
 
 // 'link' is an iOS-only semantic color name — constructing it on Android is
@@ -138,6 +160,9 @@ const colorsChatLight: ChatColors = {
   statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,
   statusNeutralComposedText: tokens.textColorStatusNeutral,
   statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,
+  borderColorChip: tokens.colorNeutral88,
+  fillColorChip: 'transparent',
+  textColorChip: tokens.colorNeutral45,
 }
 
 const colorsChatDark: ChatColors = {
@@ -183,6 +208,9 @@ const colorsChatDark: ChatColors = {
   statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,
   statusNeutralComposedText: tokens.textColorStatusNeutralDark,
   statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,
+  borderColorChip: tokens.colorNeutral24,
+  fillColorChip: 'transparent',
+  textColorChip: tokens.colorNeutral68,
 }
 
 const chatThemeColorMap = {

package/build/hooks/use_interaction_ghost_color.d.ts

@@ -1,2 +0,0 @@
-export declare function useInteractionGhostBackgroundColor(): string;
-//# sourceMappingURL=use_interaction_ghost_color.d.ts.map

package/build/hooks/use_interaction_ghost_color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_ghost_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_interaction_ghost_color.ts"],"names":[],"mappings":"AAIA,wBAAgB,kCAAkC,WAUjD"}

package/build/hooks/use_interaction_ghost_color.js

@@ -1,14 +0,0 @@
-import colorFunction from 'color';
-import { useMemo } from 'react';
-import { useTheme } from './use_theme';
-export function useInteractionGhostBackgroundColor() {
-    const { colors } = useTheme();
-    const interactionGhostColor = useMemo(() => {
-        return colorFunction(colors.interaction)
-            .hsl()
-            .lightness(colors.name === 'dark' ? 12 : 92)
-            .string();
-    }, [colors.interaction, colors.name]);
-    return interactionGhostColor;
-}
-//# sourceMappingURL=use_interaction_ghost_color.js.map