@planningcenter/chat-react-native 3.44.3-qa-staging.1 → 3.44.3-rc.0

package/build/utils/theme.js

@@ -12,9 +12,6 @@ export const defaultTheme = (colorScheme) => {
         button: {
             borderRadius: 40,
         },
-        chip: {
-            hslLightnessChipSelected: scheme === 'dark' ? 12 : 92,
-        },
         showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
     };
 };
@@ -62,9 +59,6 @@ const colorsChatLight = {
     statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,
     statusNeutralComposedText: tokens.textColorStatusNeutral,
     statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,
-    borderColorChip: tokens.colorNeutral88,
-    fillColorChip: 'transparent',
-    textColorChip: tokens.colorNeutral45,
 };
 const colorsChatDark = {
     name: 'dark',
@@ -108,9 +102,6 @@ const colorsChatDark = {
     statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,
     statusNeutralComposedText: tokens.textColorStatusNeutralDark,
     statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,
-    borderColorChip: tokens.colorNeutral24,
-    fillColorChip: 'transparent',
-    textColorChip: tokens.colorNeutral68,
 };
 const chatThemeColorMap = {
     light: colorsChatLight,

package/build/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { Platform, PlatformColor } from 'react-native'\nimport type { ColorSchemeName, ColorValue, OpaqueColorValue } from 'react-native'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        borderRadius: number\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  button: {\n    borderRadius: number\n  }\n  chip: {\n    hslLightnessChipSelected: number\n  }\n  showBadgeProductLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme => {\n  const scheme: 'light' | 'dark' = colorScheme === 'dark' ? 'dark' : 'light'\n\n  const defaultColors = {\n    ...chatThemeColorMap[scheme],\n    ...aliasTokensColorMap[scheme],\n  }\n\n  return {\n    colors: defaultColors,\n    button: {\n      borderRadius: 40,\n    },\n    chip: {\n      hslLightnessChipSelected: scheme === 'dark' ? 12 : 92,\n    },\n    showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  buttonStart: string | undefined\n  buttonEnd: string | undefined\n  interaction: string\n  androidModalHeaderButtonTextColor: ColorValue | string | undefined\n  iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined\n  androidSwitchThumbColor: string | undefined\n  conversationActionsBackground: string\n  testColor: string\n  statusSuccessIcon: string\n  statusSuccessText: string\n  statusSuccessBorder: string\n  statusSuccessFill: string\n  statusInfoIcon: string\n  statusInfoText: string\n  statusInfoBorder: string\n  statusInfoFill: string\n  statusWarningIcon: string\n  statusWarningText: string\n  statusWarningBorder: string\n  statusWarningFill: string\n  statusErrorIcon: string\n  statusErrorText: string\n  statusErrorBorder: string\n  statusErrorFill: string\n  statusSuccessComposedIcon: string\n  statusSuccessComposedText: string\n  statusSuccessComposedBackground: string\n  statusInfoComposedIcon: string\n  statusInfoComposedText: string\n  statusInfoComposedBackground: string\n  statusWarningComposedIcon: string\n  statusWarningComposedText: string\n  statusWarningComposedBackground: string\n  statusErrorComposedIcon: string\n  statusErrorComposedText: string\n  statusErrorComposedBackground: string\n  statusNeutralComposedIcon: string\n  statusNeutralComposedText: string\n  statusNeutralComposedBackground: string\n  // borderColorChip / textColorChip match the alias tokens\n  // `borderColorDefaultBase` / `textColorDefaultSecondary` the unselected\n  // `ToggleButton` state used before dedicated chip tokens existed.\n  borderColorChip: string\n  fillColorChip: string\n  textColorChip: string\n  /**\n   * Selected-chip colors (border/fill/text). Never assign a static default\n   * directly — these stay optional so they always fall back to\n   * `colors.interaction` via `??` at the read site. Every current consumer\n   * overrides `interaction` at runtime, and a seeded default here could win\n   * over that override depending on merge order.\n   */\n  borderColorChipSelected?: string\n  fillColorChipSelected?: string\n  textColorChipSelected?: string\n}\n\n// 'link' is an iOS-only semantic color name — constructing it on Android is\n// undefined behavior, so only build it when the code is actually running on iOS\nconst iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral100White,\n  testColor: 'hotpink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoText: tokens.textColorStatusInfo,\n  statusInfoBorder: tokens.borderColorStatusInfo,\n  statusInfoFill: tokens.fillColorStatusInfoSolid,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessText: tokens.textColorStatusSuccess,\n  statusSuccessBorder: tokens.borderColorStatusSuccess,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolid,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningText: tokens.textColorStatusWarning,\n  statusWarningBorder: tokens.borderColorStatusWarning,\n  statusWarningFill: tokens.fillColorStatusWarningSolid,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorText: tokens.textColorStatusError,\n  statusErrorBorder: tokens.borderColorStatusError,\n  statusErrorFill: tokens.fillColorStatusErrorSolid,\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoComposedText: tokens.textColorStatusInfo,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhost,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessComposedText: tokens.textColorStatusSuccess,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhost,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningComposedText: tokens.textColorStatusWarning,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhost,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorComposedText: tokens.textColorStatusError,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhost,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,\n  statusNeutralComposedText: tokens.textColorStatusNeutral,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,\n  borderColorChip: tokens.colorNeutral88,\n  fillColorChip: 'transparent',\n  textColorChip: tokens.colorNeutral45,\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral7,\n  testColor: 'pink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoText: tokens.textColorStatusInfoDark,\n  statusInfoBorder: tokens.borderColorStatusInfoDark,\n  statusInfoFill: tokens.fillColorStatusInfoSolidDark,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessText: tokens.textColorStatusSuccessDark,\n  statusSuccessBorder: tokens.borderColorStatusSuccessDark,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolidDark,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningText: tokens.textColorStatusWarningDark,\n  statusWarningBorder: tokens.borderColorStatusWarningDark,\n  statusWarningFill: tokens.fillColorStatusWarningSolidDark,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorText: tokens.textColorStatusErrorDark,\n  statusErrorBorder: tokens.borderColorStatusErrorDark,\n  statusErrorFill: tokens.fillColorStatusErrorSolidDark,\n\n  // Note: CCA inverts composed status colors in dark mode\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoComposedText: tokens.textColorStatusInfoDark,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhostDark,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessComposedText: tokens.textColorStatusSuccessDark,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhostDark,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningComposedText: tokens.textColorStatusWarningDark,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhostDark,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorComposedText: tokens.textColorStatusErrorDark,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhostDark,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,\n  statusNeutralComposedText: tokens.textColorStatusNeutralDark,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,\n  borderColorChip: tokens.colorNeutral24,\n  fillColorChip: 'transparent',\n  textColorChip: tokens.colorNeutral68,\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { Platform, PlatformColor } from 'react-native'\nimport type { ColorSchemeName, ColorValue, OpaqueColorValue } from 'react-native'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        borderRadius: number\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  button: {\n    borderRadius: number\n  }\n  showBadgeProductLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme => {\n  const scheme: 'light' | 'dark' = colorScheme === 'dark' ? 'dark' : 'light'\n\n  const defaultColors = {\n    ...chatThemeColorMap[scheme],\n    ...aliasTokensColorMap[scheme],\n  }\n\n  return {\n    colors: defaultColors,\n    button: {\n      borderRadius: 40,\n    },\n    showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  buttonStart: string | undefined\n  buttonEnd: string | undefined\n  interaction: string\n  androidModalHeaderButtonTextColor: ColorValue | string | undefined\n  iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined\n  androidSwitchThumbColor: string | undefined\n  conversationActionsBackground: string\n  testColor: string\n  statusSuccessIcon: string\n  statusSuccessText: string\n  statusSuccessBorder: string\n  statusSuccessFill: string\n  statusInfoIcon: string\n  statusInfoText: string\n  statusInfoBorder: string\n  statusInfoFill: string\n  statusWarningIcon: string\n  statusWarningText: string\n  statusWarningBorder: string\n  statusWarningFill: string\n  statusErrorIcon: string\n  statusErrorText: string\n  statusErrorBorder: string\n  statusErrorFill: string\n  statusSuccessComposedIcon: string\n  statusSuccessComposedText: string\n  statusSuccessComposedBackground: string\n  statusInfoComposedIcon: string\n  statusInfoComposedText: string\n  statusInfoComposedBackground: string\n  statusWarningComposedIcon: string\n  statusWarningComposedText: string\n  statusWarningComposedBackground: string\n  statusErrorComposedIcon: string\n  statusErrorComposedText: string\n  statusErrorComposedBackground: string\n  statusNeutralComposedIcon: string\n  statusNeutralComposedText: string\n  statusNeutralComposedBackground: string\n}\n\n// 'link' is an iOS-only semantic color name — constructing it on Android is\n// undefined behavior, so only build it when the code is actually running on iOS\nconst iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral100White,\n  testColor: 'hotpink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoText: tokens.textColorStatusInfo,\n  statusInfoBorder: tokens.borderColorStatusInfo,\n  statusInfoFill: tokens.fillColorStatusInfoSolid,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessText: tokens.textColorStatusSuccess,\n  statusSuccessBorder: tokens.borderColorStatusSuccess,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolid,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningText: tokens.textColorStatusWarning,\n  statusWarningBorder: tokens.borderColorStatusWarning,\n  statusWarningFill: tokens.fillColorStatusWarningSolid,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorText: tokens.textColorStatusError,\n  statusErrorBorder: tokens.borderColorStatusError,\n  statusErrorFill: tokens.fillColorStatusErrorSolid,\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoComposedText: tokens.textColorStatusInfo,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhost,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessComposedText: tokens.textColorStatusSuccess,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhost,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningComposedText: tokens.textColorStatusWarning,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhost,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorComposedText: tokens.textColorStatusError,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhost,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,\n  statusNeutralComposedText: tokens.textColorStatusNeutral,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral7,\n  testColor: 'pink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoText: tokens.textColorStatusInfoDark,\n  statusInfoBorder: tokens.borderColorStatusInfoDark,\n  statusInfoFill: tokens.fillColorStatusInfoSolidDark,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessText: tokens.textColorStatusSuccessDark,\n  statusSuccessBorder: tokens.borderColorStatusSuccessDark,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolidDark,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningText: tokens.textColorStatusWarningDark,\n  statusWarningBorder: tokens.borderColorStatusWarningDark,\n  statusWarningFill: tokens.fillColorStatusWarningSolidDark,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorText: tokens.textColorStatusErrorDark,\n  statusErrorBorder: tokens.borderColorStatusErrorDark,\n  statusErrorFill: tokens.fillColorStatusErrorSolidDark,\n\n  // Note: CCA inverts composed status colors in dark mode\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoComposedText: tokens.textColorStatusInfoDark,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhostDark,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessComposedText: tokens.textColorStatusSuccessDark,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhostDark,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningComposedText: tokens.textColorStatusWarningDark,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhostDark,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorComposedText: tokens.textColorStatusErrorDark,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhostDark,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,\n  statusNeutralComposedText: tokens.textColorStatusNeutralDark,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.44.3-qa-staging.1",
+  "version": "3.44.3-rc.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "3.44.3-qa-staging.1",
+    "@planningcenter/emoji-keyboard": "3.44.1",
     "lodash-inflection": "^1.5.0",
     "react-compiler-runtime": "^1.0.0"
   },
@@ -78,5 +78,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "898af4cb2b72d9aa4e34746f9594a5b510092a9a"
+  "gitHead": "8ccc0ee22e98248dc3dd9808fef258c6a410af39"
 }

package/src/__tests__/utils/theme.ts

@@ -20,27 +20,4 @@ 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,
-  useInteractionTintedBackgroundColor,
+  useInteractionGhostBackgroundColor,
   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 = useInteractionTintedBackgroundColor()
+  const myMessageBackgroundColor = useInteractionGhostBackgroundColor()
   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,
-  useInteractionTintedBackgroundColor,
+  useInteractionGhostBackgroundColor,
   useScalableNumberOfLines,
   useFontScale,
 } from '../../hooks'
@@ -783,7 +783,7 @@ const useMessageFormStyles = () => {
   const navigationTheme = useNavigationTheme()
   const buttonSize = 38
 
-  const giphyBadgeBackgroundColor = useInteractionTintedBackgroundColor()
+  const giphyBadgeBackgroundColor = useInteractionGhostBackgroundColor()
 
   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 { useSelectedChipBackgroundColor, useTheme } from '../../hooks'
+import { useInteractionGhostBackgroundColor, 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.borderColorChipSelected ?? colors.interaction)
+    return colorFunction(colors.interaction)
       .hsl()
       .lightness(colors.name === 'dark' ? 20 : 80)
       .string()
-  }, [colors.borderColorChipSelected, colors.interaction, colors.name])
-  const activeBackgroundColor = useSelectedChipBackgroundColor()
+  }, [colors.interaction, colors.name])
+  const activeBackgroundColor = useInteractionGhostBackgroundColor()
 
   return StyleSheet.create({
     reaction: {

package/src/components/display/toggle_button.tsx

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

package/src/hooks/index.ts

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

package/src/hooks/use_interaction_ghost_color.ts

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

package/src/hooks/use_rest_away_from_dismiss_edge.ts

@@ -9,10 +9,6 @@ const REST_OFFSET = 1
  * 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,

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 { useSelectedChipBackgroundColor, useTheme } from '../hooks'
+import { useInteractionGhostBackgroundColor, 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 selectedChipBackgroundColor = useSelectedChipBackgroundColor()
+  const interactionGhostBackgroundColor = useInteractionGhostBackgroundColor()
 
   return StyleSheet.create({
     hapticButton: {
@@ -1334,7 +1334,7 @@ const useStyles = () => {
       padding: 16,
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: selectedChipBackgroundColor,
+      backgroundColor: interactionGhostBackgroundColor,
       borderWidth: 1,
       borderColor: colors.interaction,
       borderRadius: 8,

package/src/utils/theme.ts

@@ -28,9 +28,6 @@ export interface DefaultTheme {
   button: {
     borderRadius: number
   }
-  chip: {
-    hslLightnessChipSelected: number
-  }
   showBadgeProductLogo: boolean
 }
 
@@ -47,9 +44,6 @@ 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`
   }
 }
@@ -97,22 +91,6 @@ 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
@@ -160,9 +138,6 @@ const colorsChatLight: ChatColors = {
   statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,
   statusNeutralComposedText: tokens.textColorStatusNeutral,
   statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,
-  borderColorChip: tokens.colorNeutral88,
-  fillColorChip: 'transparent',
-  textColorChip: tokens.colorNeutral45,
 }
 
 const colorsChatDark: ChatColors = {
@@ -208,9 +183,6 @@ 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_tinted_background_color.d.ts

@@ -1,6 +0,0 @@
-/**
- * Background color for non-chip surfaces (message bubbles, the Giphy badge)
- * that are tinted from `colors.interaction`. Unaffected by chip tokens.
- */
-export declare function useInteractionTintedBackgroundColor(): string;
-//# sourceMappingURL=use_interaction_tinted_background_color.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_tinted_background_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_interaction_tinted_background_color.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,mCAAmC,WAWlD"}

package/build/hooks/use_interaction_tinted_background_color.js

@@ -1,15 +0,0 @@
-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]);
-}
-//# sourceMappingURL=use_interaction_tinted_background_color.js.map

package/build/hooks/use_interaction_tinted_background_color.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_tinted_background_color.js","sourceRoot":"","sources":["../../src/hooks/use_interaction_tinted_background_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;;;GAGG;AACH,MAAM,UAAU,mCAAmC;IACjD,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,OAAO,CACZ,GAAG,EAAE,CACH,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC;SAC9B,GAAG,EAAE;SACL,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC3C,MAAM,EAAE,EACb,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,CAClC,CAAA;AACH,CAAC","sourcesContent":["import colorFunction from 'color'\nimport { useMemo } from 'react'\nimport { useTheme } from './use_theme'\n\n/**\n * Background color for non-chip surfaces (message bubbles, the Giphy badge)\n * that are tinted from `colors.interaction`. Unaffected by chip tokens.\n */\nexport function useInteractionTintedBackgroundColor() {\n  const { colors } = useTheme()\n\n  return useMemo(\n    () =>\n      colorFunction(colors.interaction)\n        .hsl()\n        .lightness(colors.name === 'dark' ? 12 : 92)\n        .string(),\n    [colors.interaction, colors.name]\n  )\n}\n"]}

package/build/hooks/use_selected_chip_background_color.d.ts

@@ -1,7 +0,0 @@
-/**
- * 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 declare function useSelectedChipBackgroundColor(): string;
-//# sourceMappingURL=use_selected_chip_background_color.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use_selected_chip_background_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_selected_chip_background_color.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,8BAA8B,WAW7C"}

package/build/hooks/use_selected_chip_background_color.js

@@ -1,16 +0,0 @@
-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]);
-}
-//# sourceMappingURL=use_selected_chip_background_color.js.map

package/build/hooks/use_selected_chip_background_color.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_selected_chip_background_color.js","sourceRoot":"","sources":["../../src/hooks/use_selected_chip_background_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;;;;GAIG;AACH,MAAM,UAAU,8BAA8B;IAC5C,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,CAAA;IAEnC,OAAO,OAAO,CACZ,GAAG,EAAE,CACH,aAAa,CAAC,MAAM,CAAC,qBAAqB,IAAI,MAAM,CAAC,WAAW,CAAC;SAC9D,GAAG,EAAE;SACL,SAAS,CAAC,IAAI,CAAC,wBAAwB,CAAC;SACxC,MAAM,EAAE,EACb,CAAC,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAClF,CAAA;AACH,CAAC","sourcesContent":["import colorFunction from 'color'\nimport { useMemo } from 'react'\nimport { useTheme } from './use_theme'\n\n/**\n * Background color for a chip surface (filter button, reaction pill) in its\n * selected state. Falls back to `colors.interaction` when a consumer hasn't\n * supplied `colors.fillColorChipSelected`.\n */\nexport function useSelectedChipBackgroundColor() {\n  const { colors, chip } = useTheme()\n\n  return useMemo(\n    () =>\n      colorFunction(colors.fillColorChipSelected ?? colors.interaction)\n        .hsl()\n        .lightness(chip.hslLightnessChipSelected)\n        .string(),\n    [colors.fillColorChipSelected, colors.interaction, chip.hslLightnessChipSelected]\n  )\n}\n"]}

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

@@ -1,67 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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%)')
-  })
-})