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

package/src/utils/theme.ts

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

package/build/hooks/use_interaction_ghost_color.d.ts

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

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

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

package/build/hooks/use_interaction_ghost_color.js

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

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
-}