@planningcenter/chat-react-native 3.44.3 → 3.44.5-qa-900.0

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'
@@ -194,6 +194,7 @@ export function Message({
 
   return (
     <Pressable
+      testID={`message-${message.id}`}
       onLongPress={isDeleting ? undefined : handleMessageLongPress}
       onPress={isDeleting ? undefined : handleMessagePress}
       onPressIn={isDeleting ? undefined : handleMessagePressIn}
@@ -341,7 +342,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'
@@ -465,6 +465,7 @@ function MessageFormInput() {
         ) : null}
 
         <TextInput
+          testID="message-composer-input"
           style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}
           multiline={true}
           placeholder={placeholder}
@@ -783,7 +784,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'
@@ -43,6 +43,7 @@ export function MessageReaction({
   return (
     <PlatformPressable
       key={reaction.value}
+      testID={`reaction-${message.id}-${reaction.value}`}
       style={styles.reaction}
       onLongPress={() => onLongPress(reaction)}
       onPress={handlePress}
@@ -57,12 +58,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/conversations/conversation_actions.tsx

@@ -146,6 +146,7 @@ export function ConversationActions({
       )}
     >
       <Pressable
+        testID={`conversation-${conversation.id}`}
         onPress={handlePress}
         style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}
         android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}

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/components/primitive/form_sheet.tsx

@@ -247,6 +247,7 @@ interface FormSheetActionProps {
   appearance?: FormSheetActionAppearanceUnion
   disabled?: boolean
   disabledReason?: string
+  testID?: string
 }
 
 function FormSheetAction({
@@ -259,11 +260,13 @@ function FormSheetAction({
   appearance = 'neutral',
   disabled = false,
   disabledReason,
+  testID,
 }: FormSheetActionProps) {
   const styles = useStyles({ appearance, disabled })
 
   return (
     <PlatformPressable
+      testID={testID}
       onPress={onPress}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={

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,16 @@
+import colorFunction from 'color'
+import { useMemo } from 'react'
+import { useTheme } from './use_theme'
+
+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_selected_chip_background_color.ts

@@ -0,0 +1,16 @@
+import colorFunction from 'color'
+import { useMemo } from 'react'
+import { useTheme } from './use_theme'
+
+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

@@ -355,6 +355,7 @@ export const ConversationScreenTitle = ({
 
   return (
     <PlatformPressable
+      testID="conversation-details-button"
       accessibilityHint="Opens details about members and settings"
       style={styles.container}
       onPress={() => {

package/src/screens/conversation_select_type_screen.tsx

@@ -95,6 +95,7 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
       )}
       {canCreateGroupsConversations && (
         <FormSheet.Action
+          testID="conversation-select-type-group"
           title="Group"
           onPress={handleGroupPress}
           accessibilityHint="Opens group selection screen"
@@ -102,6 +103,7 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
       )}
       {canCreateServicesConversations && (
         <FormSheet.Action
+          testID="conversation-select-type-team"
           title="Team"
           onPress={handleTeamPress}
           accessibilityHint="Opens team selection screen"
@@ -109,6 +111,7 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
       )}
       {showDirectMessageOption && (
         <FormSheet.Action
+          testID="conversation-select-type-direct-message"
           title="Direct message"
           onPress={handleDirectMessagePress}
           disabled={directMessagesDisabled}

package/src/screens/conversations/components/list_header_component.tsx

@@ -162,6 +162,7 @@ export const ListHeaderComponent = () => {
             name="general.cog"
             onPress={handleChatSettings}
             accessibilityLabel="Chat settings"
+            testID="conversations-chat-settings-button"
             maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
           />
           {canCreateConversations && (

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,19 @@ interface ChatColors {
   statusNeutralComposedIcon: string
   statusNeutralComposedText: string
   statusNeutralComposedBackground: string
+  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 +157,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 +205,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

package/build/hooks/use_interaction_ghost_color.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_ghost_color.js","sourceRoot":"","sources":["../../src/hooks/use_interaction_ghost_color.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,UAAU,kCAAkC;IAChD,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC;aACrC,GAAG,EAAE;aACL,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAC3C,MAAM,EAAE,CAAA;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAErC,OAAO,qBAAqB,CAAA;AAC9B,CAAC","sourcesContent":["import colorFunction from 'color'\nimport { useMemo } from 'react'\nimport { useTheme } from './use_theme'\n\nexport function useInteractionGhostBackgroundColor() {\n  const { colors } = useTheme()\n  const interactionGhostColor = useMemo(() => {\n    return colorFunction(colors.interaction)\n      .hsl()\n      .lightness(colors.name === 'dark' ? 12 : 92)\n      .string()\n  }, [colors.interaction, colors.name])\n\n  return interactionGhostColor\n}\n"]}

package/src/hooks/use_interaction_ghost_color.ts

@@ -1,15 +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
-}