@enclavemoney/enclave-wallet-sdk/src/types/theme.ts

A simple enclave wallet SDK for React applications

export interface Theme {
  background: string;
  surface: string;
  surfaceHover: string;
  surfaceActive: string;
  border: string;
  text: string;
  textSecondary: string;
  primary: string;
  primaryHover: string;
  accent: string;
  successBg: string;
  successText: string;
  errorBg: string;
  errorText: string;
  warningBg: string;
  warningText: string;
}

// Helper function to darken a hex color for hover states
const darkenColor = (color: string, percent: number = 20): string => {
  const num = parseInt(color.replace("#", ""), 16);
  const amt = Math.round(2.55 * percent);
  const R = (num >> 16) - amt;
  const G = ((num >> 8) & 0x00ff) - amt;
  const B = (num & 0x0000ff) - amt;
  return (
    "#" +
    (
      0x1000000 +
      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
      (B < 255 ? (B < 1 ? 0 : B) : 255)
    )
      .toString(16)
      .slice(1)
  );
};

// Function to generate theme styles with custom primary color
export const getThemeStyles = (primaryColor: string = "#1657FF") => ({
  dark: {
    background: "#0d0d0d",
    surface: "#1a1a1a",
    surfaceHover: "#222",
    surfaceActive: "#2a2a2a",
    border: "#333",
    text: "#fff",
    textSecondary: "rgb(255 255 255 / 50%)",
    primary: primaryColor,
    primaryHover: darkenColor(primaryColor),
    accent: "#5AC8FA",
    successBg: "#1E2D24",
    successText: "#12B76A",
    errorBg: "#382726",
    errorText: "#EA4335",
    warningBg: "#312D22",
    warningText: "#F7931A",
  } as Theme,
  light: {
    background: "#f5f5f5",
    surface: "#ffffff",
    surfaceHover: "#f0f0f0",
    surfaceActive: "#F4F6FF",
    border: "#e0e0e0",
    text: "#1a1a1a",
    textSecondary: "#666666",
    primary: primaryColor,
    primaryHover: darkenColor(primaryColor),
    accent: "#5AC8FA",
    successBg: "#ECFDF3",
    successText: "#12B76A",
    errorBg: "#FEF3F2",
    errorText: "#EA4335",
    warningBg: "#FFFAEB",
    warningText: "#F7931A",
  } as Theme,
});

// Default theme styles (for backward compatibility)
export const themeStyles = getThemeStyles();

export type ThemeMode = "light" | "dark";

export type CornerRadius = "small" | "medium" | "large";

export interface BorderRadiusConfig {
  innerRadius: number;
  outerRadius: number;
  level3Radius: number;
}

export const borderRadiusStyles = {
  small: {
    innerRadius: 12,
    outerRadius: 16,
    level3Radius: 8,
  } as BorderRadiusConfig,
  medium: {
    innerRadius: 20,
    outerRadius: 28,
    level3Radius: 12,
  } as BorderRadiusConfig,
  large: {
    innerRadius: 32,
    outerRadius: 40,
    level3Radius: 24,
  } as BorderRadiusConfig,
};

export interface WalletSDKConfig {
  theme?: ThemeMode;
  cornerRadius?: CornerRadius;
}

// New comprehensive config interface
export interface WalletConfig {
  sdkKey: string;
  appearance?: "light" | "dark";
  primaryColor?: string;
  cornerRadius?: "S" | "M" | "L";
  brandLogo?: string;
  authentication?: {
    social?: string[];
    passkey?: boolean;
  };
  fontFamily?: string;
  showEnclave?: boolean;
}

// Helper function to map corner radius values
export const mapCornerRadius = (
  cornerRadius?: "S" | "M" | "L"
): CornerRadius => {
  switch (cornerRadius) {
    case "S":
      return "small";
    case "M":
      return "medium";
    case "L":
      return "large";
    default:
      return "medium";
  }
};

// Helper function to map appearance to theme
export const mapAppearanceToTheme = (
  appearance?: "light" | "dark"
): ThemeMode => {
  return appearance === "dark" ? "dark" : "light";
};