turbodesk-livechat-react-native 0.1.0-alpha.0

package/src/ui/theme.ts

@@ -0,0 +1,237 @@
+import { useColorScheme } from "react-native";
+
+export type AppearanceMode = "light" | "dark" | "system";
+
+export type ThemeColors = {
+  brand: string;
+  background: string;
+  surface: string;
+  text: string;
+  textMuted: string;
+  bubbleIn: string;
+  bubbleOut: string;
+  bubbleTextIn: string;
+  bubbleTextOut: string;
+  border: string;
+  unreadBadge: string;
+  unreadBadgeText: string;
+  headerBackground: string;
+  headerText: string;
+  composerBackground: string;
+  composerBorder: string;
+  inputText: string;
+  sendButtonBackground: string;
+  sendButtonIcon: string;
+  error: string;
+  homeBackground: string;
+  homeHeaderText: string;
+  presenceActive: string;
+  presenceAway: string;
+};
+
+export type ThemeFontSizes = {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+};
+
+export type ThemeSpacing = {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+};
+
+export type ThemeBorderRadius = {
+  sm: number;
+  md: number;
+  lg: number;
+  bubble: number;
+  avatar: number;
+};
+
+export type ThemeConfig = {
+  colors: ThemeColors;
+  fontSizes: ThemeFontSizes;
+  spacing: ThemeSpacing;
+  borderRadius: ThemeBorderRadius;
+  appearance: AppearanceMode;
+  useBrandThemingForChat: boolean;
+};
+
+// ─── Defaults ─────────────────────────────────────────────────────────────────
+
+const DEFAULT_BRAND = "#6366f1";
+const DEFAULT_NOTIFICATION = "#ef4444";
+
+const lightColors: ThemeColors = {
+  brand: DEFAULT_BRAND,
+  background: "#f9fafb",
+  surface: "#ffffff",
+  text: "#18181b",
+  textMuted: "#71717a",
+  bubbleIn: "#f3f4f6",
+  bubbleOut: DEFAULT_BRAND,
+  bubbleTextIn: "#18181b",
+  bubbleTextOut: "#ffffff",
+  border: "rgba(0,0,0,0.08)",
+  unreadBadge: DEFAULT_NOTIFICATION,
+  unreadBadgeText: "#ffffff",
+  headerBackground: "#ffffff",
+  headerText: "#18181b",
+  composerBackground: "#ffffff",
+  composerBorder: "rgba(0,0,0,0.12)",
+  inputText: "#18181b",
+  sendButtonBackground: DEFAULT_BRAND,
+  sendButtonIcon: "#ffffff",
+  error: DEFAULT_NOTIFICATION,
+  homeBackground: DEFAULT_BRAND,
+  homeHeaderText: "#ffffff",
+  presenceActive: "#10b981",
+  presenceAway: "#f59e0b",
+};
+
+const darkColors: ThemeColors = {
+  brand: DEFAULT_BRAND,
+  background: "#09090b",
+  surface: "#18181b",
+  text: "#fafafa",
+  textMuted: "#a1a1aa",
+  bubbleIn: "#27272a",
+  bubbleOut: DEFAULT_BRAND,
+  bubbleTextIn: "#fafafa",
+  bubbleTextOut: "#ffffff",
+  border: "rgba(255,255,255,0.08)",
+  unreadBadge: DEFAULT_NOTIFICATION,
+  unreadBadgeText: "#ffffff",
+  headerBackground: "#18181b",
+  headerText: "#fafafa",
+  composerBackground: "#18181b",
+  composerBorder: "rgba(255,255,255,0.12)",
+  inputText: "#fafafa",
+  sendButtonBackground: DEFAULT_BRAND,
+  sendButtonIcon: "#ffffff",
+  error: DEFAULT_NOTIFICATION,
+  homeBackground: "#18181b",
+  homeHeaderText: "#fafafa",
+  presenceActive: "#10b981",
+  presenceAway: "#f59e0b",
+};
+
+export const defaultTheme: ThemeConfig = {
+  appearance: "light",
+  useBrandThemingForChat: false,
+  colors: lightColors,
+  fontSizes: { xs: 11, sm: 13, md: 15, lg: 17, xl: 20 },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  borderRadius: { sm: 4, md: 8, lg: 16, bubble: 18, avatar: 999 },
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+export function getBrandColor(settings: any): string {
+  return settings?.brandColor?.trim() || DEFAULT_BRAND;
+}
+
+export function getNotificationIconColor(settings: any): string {
+  return settings?.notificationIconColor?.trim() || DEFAULT_NOTIFICATION;
+}
+
+/** Readable text on top of a hex brand color. */
+export function contrastingTextOnBrand(hex: string): string {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return "#ffffff";
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255;
+  const g = (n >> 8) & 255;
+  const b = n & 255;
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.55 ? "#111827" : "#ffffff";
+}
+
+export function getWidgetName(config: any): string {
+  return config?.widgetName?.trim() || "Chat with us";
+}
+
+export function getWidgetGreeting(settings: any): string {
+  const g = (settings?.greetings ?? settings?.greeting ?? "").toString().trim();
+  return g || "Hi! How can we help you today?";
+}
+
+export function getWidgetTitle(config: any): string {
+  return config?.widgetSettings?.title?.trim() || "Chat with us";
+}
+
+export function getWidgetDescription(settings: any): string {
+  return settings?.description?.trim() || "We usually reply within a few minutes.";
+}
+
+export function getBrandLogoUrl(settings: any): string | undefined {
+  return settings?.brandLogoUrl?.trim() || undefined;
+}
+
+export const POWERED_BY_TEXT = "Powered by Turbodesk";
+
+// ─── Theme resolution ─────────────────────────────────────────────────────────
+
+/** Resolve appearance from widget settings + system color scheme. */
+export function useEffectiveAppearance(settings: any): "light" | "dark" {
+  const systemScheme = useColorScheme();
+  const mode = settings?.theme as string | undefined;
+  if (mode === "dark" || mode === "custom") return "dark";
+  if (mode === "light") return "light";
+  if (mode === "system") return systemScheme === "dark" ? "dark" : "light";
+  return "light";
+}
+
+export function buildThemeFromBrand(
+  brandColor: string,
+  appearance: AppearanceMode,
+  useBrandThemingForChat: boolean,
+  override?: Partial<ThemeConfig>
+): ThemeConfig {
+  const isDark = appearance === "dark";
+  const base = isDark ? darkColors : lightColors;
+  const contrastText = contrastingTextOnBrand(brandColor);
+
+  const colors: ThemeColors = {
+    ...base,
+    brand: brandColor,
+    bubbleOut: brandColor,
+    sendButtonBackground: brandColor,
+    homeBackground: isDark ? base.homeBackground : brandColor,
+    homeHeaderText: isDark ? base.homeHeaderText : contrastText,
+    ...(useBrandThemingForChat
+      ? { bubbleOut: brandColor, bubbleTextOut: contrastText }
+      : {}),
+  };
+
+  return mergeTheme(
+    {
+      ...defaultTheme,
+      appearance,
+      useBrandThemingForChat,
+      colors,
+    },
+    override
+  );
+}
+
+export function mergeTheme(
+  base: ThemeConfig,
+  override?: Partial<ThemeConfig>
+): ThemeConfig {
+  if (!override) return base;
+  return {
+    colors: { ...base.colors, ...override.colors },
+    fontSizes: { ...base.fontSizes, ...override.fontSizes },
+    spacing: { ...base.spacing, ...override.spacing },
+    borderRadius: { ...base.borderRadius, ...override.borderRadius },
+    appearance: override.appearance ?? base.appearance,
+    useBrandThemingForChat:
+      override.useBrandThemingForChat ?? base.useBrandThemingForChat,
+  };
+}