@planningcenter/chat-react-native 1.6.2-rc.1 → 1.6.2-rc.3

package/src/utils/theme.ts

@@ -27,6 +27,7 @@ export interface DefaultTheme {
   button: {
     borderRadius: number
   }
+  showBadgeLogo: boolean
 }
 
 export const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {
@@ -42,6 +43,7 @@ export const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {
     button: {
       borderRadius: 40,
     },
+    showBadgeLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
   }
 }
 
@@ -52,7 +54,25 @@ interface ChatColors {
   buttonStart: string | undefined
   buttonEnd: string | undefined
   interaction: string
+  switchTrackTrue: string | undefined
+  switchTrackFalse: string | undefined
+  switchThumbColor: string | undefined
   testColor: string
+  statusInfoIcon: string
+  statusInfoText: string
+  statusInfoBackground: string
+  statusSuccessIcon: string
+  statusSuccessText: string
+  statusSuccessBackground: string
+  statusWarningIcon: string
+  statusWarningText: string
+  statusWarningBackground: string
+  statusErrorIcon: string
+  statusErrorText: string
+  statusErrorBackground: string
+  statusNeutralIcon: string
+  statusNeutralText: string
+  statusNeutralBackground: string
 }
 
 const colorsChatLight: ChatColors = {
@@ -60,7 +80,25 @@ const colorsChatLight: ChatColors = {
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefault,
+  switchTrackTrue: undefined,
+  switchTrackFalse: undefined,
+  switchThumbColor: undefined,
   testColor: 'hotpink',
+  statusInfoIcon: tokens.iconColorStatusInfoPrimary,
+  statusInfoText: tokens.textColorStatusInfo,
+  statusInfoBackground: tokens.fillColorStatusInfoGhost,
+  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,
+  statusSuccessText: tokens.textColorStatusSuccess,
+  statusSuccessBackground: tokens.fillColorStatusSuccessGhost,
+  statusWarningIcon: tokens.iconColorStatusWarningPrimary,
+  statusWarningText: tokens.textColorStatusWarning,
+  statusWarningBackground: tokens.fillColorStatusWarningGhost,
+  statusErrorIcon: tokens.iconColorStatusErrorPrimary,
+  statusErrorText: tokens.textColorStatusError,
+  statusErrorBackground: tokens.fillColorStatusErrorGhost,
+  statusNeutralIcon: tokens.iconColorStatusNeutralPrimary,
+  statusNeutralText: tokens.textColorStatusNeutral,
+  statusNeutralBackground: tokens.fillColorStatusNeutralGhost,
 }
 
 const colorsChatDark: ChatColors = {
@@ -68,7 +106,25 @@ const colorsChatDark: ChatColors = {
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefaultDark,
+  switchTrackTrue: undefined,
+  switchTrackFalse: undefined,
+  switchThumbColor: undefined,
   testColor: 'pink',
+  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,
+  statusInfoText: tokens.textColorStatusInfoDark,
+  statusInfoBackground: tokens.fillColorStatusInfoGhostDark,
+  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,
+  statusSuccessText: tokens.textColorStatusSuccessDark,
+  statusSuccessBackground: tokens.fillColorStatusSuccessGhostDark,
+  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,
+  statusWarningText: tokens.textColorStatusWarningDark,
+  statusWarningBackground: tokens.fillColorStatusWarningGhostDark,
+  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,
+  statusErrorText: tokens.textColorStatusErrorDark,
+  statusErrorBackground: tokens.fillColorStatusErrorGhostDark,
+  statusNeutralIcon: tokens.iconColorStatusNeutralPrimaryDark,
+  statusNeutralText: tokens.textColorStatusNeutralDark,
+  statusNeutralBackground: tokens.fillColorStatusNeutralGhostDark,
 }
 
 const chatThemeColorMap = {

package/src/vendor/tapestry/tokens.ts

@@ -22,6 +22,36 @@ const colorPrimitives = {
   colorNeutral98: 'hsl(0, 0%, 98%)',
   colorNeutral100White: 'hsl(0, 0%, 100%)',
   fillColorInteractionDefault: 'hsl(204, 100%, 40%)',
+  fillColorStatusNeutralGhost: 'hsl(0, 0%, 93%)',
+  fillColorStatusNeutralGhostDark: 'hsl(0, 0%, 18%)',
+  textColorStatusNeutral: 'hsl(0, 0%, 24%)',
+  textColorStatusNeutralDark: 'hsl(0, 0%, 80%)',
+  iconColorStatusNeutralPrimary: 'hsl(0, 0%, 45%)',
+  iconColorStatusNeutralPrimaryDark: 'hsl(0, 0%, 54%)',
+  fillColorStatusErrorGhost: 'hsl(9, 59%, 93%)',
+  fillColorStatusErrorGhostDark: 'hsl(8, 20%, 16%)',
+  textColorStatusError: 'hsl(8, 60%, 45%)',
+  textColorStatusErrorDark: 'hsl(8, 61%, 61%)',
+  iconColorStatusErrorPrimary: 'hsl(8, 60%, 47%)',
+  iconColorStatusErrorPrimaryDark: 'hsl(8, 60%, 55%)',
+  fillColorStatusWarningGhost: 'hsl(42, 87%, 94%)',
+  fillColorStatusWarningGhostDark: 'hsl(41, 18%, 17%)',
+  textColorStatusWarning: 'hsl(42, 100%, 29%)',
+  textColorStatusWarningDark: 'hsl(42, 84%, 55%)',
+  iconColorStatusWarningPrimary: 'hsl(42, 84%, 49%)',
+  iconColorStatusWarningPrimaryDark: 'hsl(42, 84%, 49%)',
+  fillColorStatusSuccessGhost: 'hsl(97, 57%, 90%)',
+  fillColorStatusSuccessGhostDark: 'hsl(125, 17%, 15%)',
+  textColorStatusSuccess: 'hsl(97, 57%, 28%)',
+  textColorStatusSuccessDark: 'hsl(97, 57%, 41%)',
+  iconColorStatusSuccessPrimary: 'hsl(96, 57%, 33%)',
+  iconColorStatusSuccessPrimaryDark: 'hsl(96, 57%, 41%)',
+  fillColorStatusInfoGhost: 'hsl(203, 94%, 94%)',
+  fillColorStatusInfoGhostDark: 'hsl(204, 32%, 15%)',
+  textColorStatusInfo: 'hsl(204, 100%, 35%)',
+  textColorStatusInfoDark: 'hsl(204, 68%, 55%)',
+  iconColorStatusInfoPrimary: 'hsl(204, 100%, 40%)',
+  iconColorStatusInfoPrimaryDark: 'hsl(204, 78%, 38%)',
   fillColorTransparencyLight010: 'hsla(0, 0%, 100%, 0.1)',
   fillColorTransparencyLight020: 'hsla(0, 0%, 100%, 0.2)',
   fillColorTransparencyLight030: 'hsla(0, 0%, 100%, 0.3)',