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

package/build/utils/theme.d.ts

@@ -22,6 +22,9 @@ export interface DefaultTheme {
     button: {
         borderRadius: number;
     };
+    chip: {
+        hslLightnessChipSelected: number;
+    };
     showBadgeProductLogo: boolean;
 }
 export declare const defaultTheme: (colorScheme: ColorSchemeName | null) => ChatTheme;
@@ -67,6 +70,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;
 }
 export {};
 //# sourceMappingURL=theme.d.ts.map

package/build/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAG/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,oBAAoB,EAAE,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,GAAI,aAAa,eAAe,GAAG,IAAI,KAAG,SAelE,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,iCAAiC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAA;IAClE,6BAA6B,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAA;IACpE,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3C,6BAA6B,EAAE,MAAM,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,gBAAgB,EAAE,MAAM,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,sBAAsB,EAAE,MAAM,CAAA;IAC9B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,4BAA4B,EAAE,MAAM,CAAA;IACpC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,6BAA6B,EAAE,MAAM,CAAA;IACrC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;CACxC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAG/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,IAAI,EAAE;QACJ,wBAAwB,EAAE,MAAM,CAAA;KACjC,CAAA;IACD,oBAAoB,EAAE,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,GAAI,aAAa,eAAe,GAAG,IAAI,KAAG,SAkBlE,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,iCAAiC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAA;IAClE,6BAA6B,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAA;IACpE,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3C,6BAA6B,EAAE,MAAM,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,gBAAgB,EAAE,MAAM,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,sBAAsB,EAAE,MAAM,CAAA;IAC9B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,4BAA4B,EAAE,MAAM,CAAA;IACpC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IACvC,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,6BAA6B,EAAE,MAAM,CAAA;IACrC,yBAAyB,EAAE,MAAM,CAAA;IACjC,yBAAyB,EAAE,MAAM,CAAA;IACjC,+BAA+B,EAAE,MAAM,CAAA;IAIvC,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B"}

package/build/utils/theme.js

@@ -12,6 +12,9 @@ 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`
     };
 };
@@ -59,6 +62,9 @@ const colorsChatLight = {
     statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,
     statusNeutralComposedText: tokens.textColorStatusNeutral,
     statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,
+    borderColorChip: tokens.colorNeutral88,
+    fillColorChip: 'transparent',
+    textColorChip: tokens.colorNeutral45,
 };
 const colorsChatDark = {
     name: 'dark',
@@ -102,6 +108,9 @@ 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  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"]}
+{"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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.44.2",
+  "version": "3.44.3-qa-staging.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.1",
+    "@planningcenter/emoji-keyboard": "3.44.3-qa-staging.0",
     "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": "706a3a93624eb117fdb18eec191c6e91dc59edbd"
+  "gitHead": "48633b0c777d9121c0fb0aa77582a0e5235a0bb1"
 }

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

@@ -9,6 +9,10 @@ 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/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/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,