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

A simple playground for enclave wallet SDK

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;
}

export const themeStyles = {
  dark: {
    background: "#0d0d0d",
    surface: "#1a1a1a",
    surfaceHover: "#222",
    surfaceActive: "#2a2a2a",
    border: "#333",
    text: "#fff",
    textSecondary: "rgb(255 255 255 / 50%)",
    primary: "#1657FF",
    primaryHover: "#0056CC",
    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: "#1657FF",
    primaryHover: "#0056CC",
    accent: "#5AC8FA",
    successBg: "#ECFDF3",
    successText: "#12B76A",
    errorBg: "#FEF3F2",
    errorText: "#EA4335",
    warningBg: "#FFFAEB",
    warningText: "#F7931A",
  } as Theme,
};

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;
}