✨ (theme) Add container theme options: border, shadow, filter (#1436)

Closes #1332

packages/schemas/features/typebot/theme/constants.ts

@@ -1,5 +1,3 @@
-import { Theme } from './schema'
-
 export enum BackgroundType {
   COLOR = 'Color',
   IMAGE = 'Image',
@@ -11,37 +9,63 @@ export const fontTypes = ['Google', 'Custom'] as const
 export const progressBarPlacements = ['Top', 'Bottom'] as const
 export const progressBarPositions = ['fixed', 'absolute'] as const
 
-export const defaultTheme = {
-  chat: {
-    roundness: 'medium',
-    hostBubbles: { backgroundColor: '#F7F8FF', color: '#303235' },
-    guestBubbles: { backgroundColor: '#FF8E21', color: '#FFFFFF' },
-    buttons: { backgroundColor: '#0042DA', color: '#FFFFFF' },
-    inputs: {
-      backgroundColor: '#FFFFFF',
-      color: '#303235',
-      placeholderColor: '#9095A0',
-    },
-    hostAvatar: {
-      isEnabled: true,
-    },
-    guestAvatar: {
-      isEnabled: false,
-    },
-  },
-  general: {
-    font: {
-      type: 'Google',
-      family: 'Open Sans',
-    },
-    background: { type: BackgroundType.COLOR, content: '#ffffff' },
-    progressBar: {
-      isEnabled: false,
-      color: '#0042DA',
-      backgroundColor: '#e0edff',
-      thickness: 4,
-      position: 'absolute',
-      placement: 'Top',
-    },
-  },
-} as const satisfies Theme
+export const shadows = ['none', 'sm', 'md', 'lg', 'xl', '2xl'] as const
+export const borderRoundness = ['none', 'medium', 'large', 'custom'] as const
+
+export const defaultLightTextColor = '#303235'
+export const defaultDarkTextColor = '#FFFFFF'
+
+/*---- General ----*/
+
+// Font
+export const defaultFontType = 'Google'
+export const defaultFontFamily = 'Open Sans'
+
+// Background
+export const defaultBackgroundType = BackgroundType.COLOR
+export const defaultBackgroundColor = '#ffffff'
+
+// Progress bar
+export const defaultProgressBarIsEnabled = false
+export const defaultProgressBarColor = '#0042DA'
+export const defaultProgressBarBackgroundColor = '#e0edff'
+export const defaultProgressBarThickness = 4
+export const defaultProgressBarPosition = 'absolute'
+export const defaultProgressBarPlacement = 'Top'
+
+export const defaultRoundness = 'medium'
+export const defaultOpacity = 1
+export const defaultBlur = 0
+
+/*---- Chat ----*/
+
+// Container
+export const defaultContainerMaxWidth = '800px'
+export const defaultContainerMaxHeight = '100%'
+export const defaultContainerBackgroundColor = 'transparent'
+export const defaultContainerColor = '#27272A'
+
+// Host bubbles
+export const defaultHostBubblesBackgroundColor = '#F7F8FF'
+export const defaultHostBubblesColor = defaultLightTextColor
+
+// Guest bubbles
+export const defaultGuestBubblesBackgroundColor = '#FF8E21'
+export const defaultGuestBubblesColor = defaultDarkTextColor
+
+// Buttons
+export const defaultButtonsBackgroundColor = '#0042DA'
+export const defaultButtonsColor = defaultDarkTextColor
+export const defaultButtonsBorderThickness = 1
+
+// Inputs
+export const defaultInputsBackgroundColor = '#FFFFFF'
+export const defaultInputsColor = defaultLightTextColor
+export const defaultInputsPlaceholderColor = '#9095A0'
+export const defaultInputsShadow = 'md'
+
+// Host avatar
+export const defaultHostAvatarIsEnabled = true
+
+// Guest avatar
+export const defaultGuestAvatarIsEnabled = false

packages/schemas/features/typebot/theme/schema.ts

@@ -2,9 +2,11 @@ import { ThemeTemplate as ThemeTemplatePrisma } from '@typebot.io/prisma'
 import { z } from '../../../zod'
 import {
   BackgroundType,
+  borderRoundness,
   fontTypes,
   progressBarPlacements,
   progressBarPositions,
+  shadows,
 } from './constants'
 
 const avatarPropsSchema = z.object({
@@ -12,25 +14,48 @@ const avatarPropsSchema = z.object({
   url: z.string().optional(),
 })
 
-const containerColorsSchema = z.object({
-  backgroundColor: z.string().optional(),
+const containerBorderThemeSchema = z.object({
+  thickness: z.number().optional(),
   color: z.string().optional(),
+  roundeness: z.enum(borderRoundness).optional(),
+  customRoundeness: z.number().optional(),
+  opacity: z.number().min(0).max(1).optional(),
 })
 
-const inputColorsSchema = containerColorsSchema.merge(
-  z.object({
-    placeholderColor: z.string().optional(),
+export type ContainerBorderTheme = z.infer<typeof containerBorderThemeSchema>
+
+const containerThemeSchema = z.object({
+  backgroundColor: z.string().optional(),
+  color: z.string().optional(),
+  blur: z.number().optional(),
+  opacity: z.number().min(0).max(1).optional(),
+  shadow: z.enum(shadows).optional(),
+  border: containerBorderThemeSchema.optional(),
+})
+
+const inputThemeSchema = containerThemeSchema.extend({
+  placeholderColor: z.string().optional(),
+})
+
+const chatContainerSchema = z
+  .object({
+    maxWidth: z.string().optional(),
+    maxHeight: z.string().optional(),
   })
-)
+  .merge(containerThemeSchema)
 
 export const chatThemeSchema = z.object({
+  container: chatContainerSchema.optional(),
   hostAvatar: avatarPropsSchema.optional(),
   guestAvatar: avatarPropsSchema.optional(),
-  hostBubbles: containerColorsSchema.optional(),
-  guestBubbles: containerColorsSchema.optional(),
-  buttons: containerColorsSchema.optional(),
-  inputs: inputColorsSchema.optional(),
-  roundness: z.enum(['none', 'medium', 'large']).optional(),
+  hostBubbles: containerThemeSchema.optional(),
+  guestBubbles: containerThemeSchema.optional(),
+  buttons: containerThemeSchema.optional(),
+  inputs: inputThemeSchema.optional(),
+  roundness: z
+    .enum(['none', 'medium', 'large'])
+    .optional()
+    .describe('Deprecated, use `container.border.roundeness` instead'),
 })
 
 const backgroundSchema = z.object({
@@ -98,6 +123,6 @@ export type ChatTheme = z.infer<typeof chatThemeSchema>
 export type AvatarProps = z.infer<typeof avatarPropsSchema>
 export type GeneralTheme = z.infer<typeof generalThemeSchema>
 export type Background = z.infer<typeof backgroundSchema>
-export type ContainerColors = z.infer<typeof containerColorsSchema>
-export type InputColors = z.infer<typeof inputColorsSchema>
+export type ContainerTheme = z.infer<typeof containerThemeSchema>
+export type InputTheme = z.infer<typeof inputThemeSchema>
 export type ThemeTemplate = z.infer<typeof themeTemplateSchema>