@planningcenter/chat-react-native 3.42.2 → 3.42.3-qa-staging.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/utils/theme.d.ts.map +1 -1
- package/build/utils/theme.js +6 -3
- package/build/utils/theme.js.map +1 -1
- package/package.json +3 -3
- package/src/utils/theme.ts +13 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,UAAU,EACV,gBAAgB,EAGjB,MAAM,cAAc,CAAA;AACrB,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,KAAG,SAe3D,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"}
|
package/build/utils/theme.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PlatformColor } from 'react-native';
|
|
1
|
+
import { Platform, PlatformColor, } from 'react-native';
|
|
2
2
|
import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map';
|
|
3
3
|
import { tokens } from '../vendor/tapestry/tokens';
|
|
4
4
|
export const defaultTheme = (colorScheme) => {
|
|
@@ -15,10 +15,13 @@ export const defaultTheme = (colorScheme) => {
|
|
|
15
15
|
showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
|
+
// 'link' is an iOS-only semantic color name — constructing it on Android is
|
|
19
|
+
// undefined behavior, so only build it when the code is actually running on iOS
|
|
20
|
+
const iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined;
|
|
18
21
|
const colorsChatLight = {
|
|
19
22
|
name: 'light',
|
|
20
23
|
androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,
|
|
21
|
-
iOSModalHeaderButtonTextColor:
|
|
24
|
+
iOSModalHeaderButtonTextColor: iOSLinkColor,
|
|
22
25
|
buttonStart: undefined,
|
|
23
26
|
buttonEnd: undefined,
|
|
24
27
|
interaction: tokens.fillColorInteractionDefault,
|
|
@@ -60,7 +63,7 @@ const colorsChatLight = {
|
|
|
60
63
|
const colorsChatDark = {
|
|
61
64
|
name: 'dark',
|
|
62
65
|
androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,
|
|
63
|
-
iOSModalHeaderButtonTextColor:
|
|
66
|
+
iOSModalHeaderButtonTextColor: iOSLinkColor,
|
|
64
67
|
buttonStart: undefined,
|
|
65
68
|
buttonEnd: undefined,
|
|
66
69
|
interaction: tokens.fillColorInteractionDefaultDark,
|
package/build/utils/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColorSchemeName, ColorValue, OpaqueColorValue, PlatformColor } 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): 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\nconst colorsChatLight: ChatColors = {\n name: 'light',\n androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,\n iOSModalHeaderButtonTextColor: PlatformColor('link'),\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: PlatformColor('link'),\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"]}
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,QAAQ,EACR,aAAa,GACd,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AA8BlD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAa,EAAE;IACtE,MAAM,MAAM,GAAqB,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;IAE1E,MAAM,aAAa,GAAG;QACpB,GAAG,iBAAiB,CAAC,MAAM,CAAC;QAC5B,GAAG,mBAAmB,CAAC,MAAM,CAAC;KAC/B,CAAA;IAED,OAAO;QACL,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE;YACN,YAAY,EAAE,EAAE;SACjB;QACD,oBAAoB,EAAE,IAAI,EAAE,sEAAsE;KACnG,CAAA;AACH,CAAC,CAAA;AA+CD,4EAA4E;AAC5E,gFAAgF;AAChF,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAE9E,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,iCAAiC,EAAE,MAAM,CAAC,2BAA2B;IACrE,6BAA6B,EAAE,YAAY;IAC3C,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,2BAA2B;IAC/C,uBAAuB,EAAE,SAAS;IAClC,6BAA6B,EAAE,MAAM,CAAC,oBAAoB;IAC1D,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,MAAM,CAAC,0BAA0B;IACjD,cAAc,EAAE,MAAM,CAAC,mBAAmB;IAC1C,gBAAgB,EAAE,MAAM,CAAC,qBAAqB;IAC9C,cAAc,EAAE,MAAM,CAAC,wBAAwB;IAC/C,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,mBAAmB,EAAE,MAAM,CAAC,wBAAwB;IACpD,iBAAiB,EAAE,MAAM,CAAC,2BAA2B;IACrD,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,mBAAmB,EAAE,MAAM,CAAC,wBAAwB;IACpD,iBAAiB,EAAE,MAAM,CAAC,2BAA2B;IACrD,eAAe,EAAE,MAAM,CAAC,2BAA2B;IACnD,eAAe,EAAE,MAAM,CAAC,oBAAoB;IAC5C,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,eAAe,EAAE,MAAM,CAAC,yBAAyB;IACjD,sBAAsB,EAAE,MAAM,CAAC,0BAA0B;IACzD,sBAAsB,EAAE,MAAM,CAAC,mBAAmB;IAClD,4BAA4B,EAAE,MAAM,CAAC,wBAAwB;IAC7D,yBAAyB,EAAE,MAAM,CAAC,6BAA6B;IAC/D,yBAAyB,EAAE,MAAM,CAAC,sBAAsB;IACxD,+BAA+B,EAAE,MAAM,CAAC,2BAA2B;IACnE,yBAAyB,EAAE,MAAM,CAAC,6BAA6B;IAC/D,yBAAyB,EAAE,MAAM,CAAC,sBAAsB;IACxD,+BAA+B,EAAE,MAAM,CAAC,2BAA2B;IACnE,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;IAC3D,uBAAuB,EAAE,MAAM,CAAC,oBAAoB;IACpD,6BAA6B,EAAE,MAAM,CAAC,yBAAyB;IAC/D,yBAAyB,EAAE,MAAM,CAAC,6BAA6B;IAC/D,yBAAyB,EAAE,MAAM,CAAC,sBAAsB;IACxD,+BAA+B,EAAE,MAAM,CAAC,2BAA2B;CACpE,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,iCAAiC,EAAE,MAAM,CAAC,+BAA+B;IACzE,6BAA6B,EAAE,YAAY;IAC3C,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,+BAA+B;IACnD,uBAAuB,EAAE,SAAS;IAClC,6BAA6B,EAAE,MAAM,CAAC,aAAa;IACnD,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,MAAM,CAAC,8BAA8B;IACrD,cAAc,EAAE,MAAM,CAAC,uBAAuB;IAC9C,gBAAgB,EAAE,MAAM,CAAC,yBAAyB;IAClD,cAAc,EAAE,MAAM,CAAC,4BAA4B;IACnD,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,mBAAmB,EAAE,MAAM,CAAC,4BAA4B;IACxD,iBAAiB,EAAE,MAAM,CAAC,+BAA+B;IACzD,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,mBAAmB,EAAE,MAAM,CAAC,4BAA4B;IACxD,iBAAiB,EAAE,MAAM,CAAC,+BAA+B;IACzD,eAAe,EAAE,MAAM,CAAC,+BAA+B;IACvD,eAAe,EAAE,MAAM,CAAC,wBAAwB;IAChD,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,eAAe,EAAE,MAAM,CAAC,6BAA6B;IAErD,wDAAwD;IACxD,sBAAsB,EAAE,MAAM,CAAC,8BAA8B;IAC7D,sBAAsB,EAAE,MAAM,CAAC,uBAAuB;IACtD,4BAA4B,EAAE,MAAM,CAAC,4BAA4B;IACjE,yBAAyB,EAAE,MAAM,CAAC,iCAAiC;IACnE,yBAAyB,EAAE,MAAM,CAAC,0BAA0B;IAC5D,+BAA+B,EAAE,MAAM,CAAC,+BAA+B;IACvE,yBAAyB,EAAE,MAAM,CAAC,iCAAiC;IACnE,yBAAyB,EAAE,MAAM,CAAC,0BAA0B;IAC5D,+BAA+B,EAAE,MAAM,CAAC,+BAA+B;IACvE,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;IAC/D,uBAAuB,EAAE,MAAM,CAAC,wBAAwB;IACxD,6BAA6B,EAAE,MAAM,CAAC,6BAA6B;IACnE,yBAAyB,EAAE,MAAM,CAAC,iCAAiC;IACnE,yBAAyB,EAAE,MAAM,CAAC,0BAA0B;IAC5D,+BAA+B,EAAE,MAAM,CAAC,+BAA+B;CACxE,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import {\n ColorSchemeName,\n ColorValue,\n OpaqueColorValue,\n Platform,\n PlatformColor,\n} 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): 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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.42.
|
|
3
|
+
"version": "3.42.3-qa-staging.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"react-native": "./src/index.tsx",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@fortawesome/fontawesome-svg-core": "^7.2.0",
|
|
28
28
|
"@fortawesome/react-native-fontawesome": "^0.3.2",
|
|
29
|
-
"@planningcenter/emoji-keyboard": "3.42.
|
|
29
|
+
"@planningcenter/emoji-keyboard": "3.42.3-qa-staging.0",
|
|
30
30
|
"lodash-inflection": "^1.5.0",
|
|
31
31
|
"react-compiler-runtime": "^1.0.0"
|
|
32
32
|
},
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"react-native-url-polyfill": "^2.0.0",
|
|
73
73
|
"typescript": "~5.9.2"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "bb27334b7c17b98399439e496f7c1ad28de518ab"
|
|
76
76
|
}
|
package/src/utils/theme.ts
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
ColorSchemeName,
|
|
3
|
+
ColorValue,
|
|
4
|
+
OpaqueColorValue,
|
|
5
|
+
Platform,
|
|
6
|
+
PlatformColor,
|
|
7
|
+
} from 'react-native'
|
|
2
8
|
import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
|
|
3
9
|
import { tokens } from '../vendor/tapestry/tokens'
|
|
4
10
|
|
|
@@ -92,10 +98,14 @@ interface ChatColors {
|
|
|
92
98
|
statusNeutralComposedBackground: string
|
|
93
99
|
}
|
|
94
100
|
|
|
101
|
+
// 'link' is an iOS-only semantic color name — constructing it on Android is
|
|
102
|
+
// undefined behavior, so only build it when the code is actually running on iOS
|
|
103
|
+
const iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined
|
|
104
|
+
|
|
95
105
|
const colorsChatLight: ChatColors = {
|
|
96
106
|
name: 'light',
|
|
97
107
|
androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,
|
|
98
|
-
iOSModalHeaderButtonTextColor:
|
|
108
|
+
iOSModalHeaderButtonTextColor: iOSLinkColor,
|
|
99
109
|
buttonStart: undefined,
|
|
100
110
|
buttonEnd: undefined,
|
|
101
111
|
interaction: tokens.fillColorInteractionDefault,
|
|
@@ -138,7 +148,7 @@ const colorsChatLight: ChatColors = {
|
|
|
138
148
|
const colorsChatDark: ChatColors = {
|
|
139
149
|
name: 'dark',
|
|
140
150
|
androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,
|
|
141
|
-
iOSModalHeaderButtonTextColor:
|
|
151
|
+
iOSModalHeaderButtonTextColor: iOSLinkColor,
|
|
142
152
|
buttonStart: undefined,
|
|
143
153
|
buttonEnd: undefined,
|
|
144
154
|
interaction: tokens.fillColorInteractionDefaultDark,
|