client/theme.js

export default {
  colors: {
    tint: "#2563eb",
    primary: {
      DEFAULT: "#2563eb",
      container: "#2563eb",
      fixed: "#dbeafe",
      "fixed-dim": "#bfdbfe",
    },
    "on-primary": {
      DEFAULT: "#ffffff",
      container: "#ffffff",
      fixed: "#1e3a8a",
      "fixed-variant": "#1d4ed8",
    },
    secondary: {
      DEFAULT: "#475569",
      container: "#eff6ff",
      fixed: "#f8fafc",
      "fixed-dim": "#e2e8f0",
    },
    "on-secondary": {
      DEFAULT: "#ffffff",
      container: "#2158e8",
      fixed: "#334155",
      "fixed-variant": "#64748b",
    },
    tertiary: {
      DEFAULT: "#f59e0b",
      container: "#fef3c7",
      fixed: "#fef3c7",
      "fixed-dim": "#fde68a",
    },
    "on-tertiary": {
      DEFAULT: "#ffffff",
      container: "#92400e",
      fixed: "#92400e",
      "fixed-variant": "#b45309",
    },
    error: {
      DEFAULT: "#dc2626",
      container: "#fee2e2",
    },
    "on-error": {
      DEFAULT: "#ffffff",
      container: "#991b1b",
    },
    success: {
      DEFAULT: "#16a34a",
      container: "#dcfce7",
    },
    "on-success": {
      DEFAULT: "#ffffff",
      container: "#166534",
    },
    surface: {
      DEFAULT: "#f8fafc",
      dim: "#eef2f7",
      bright: "#ffffff",
      variant: "#f1f5f9",
      tint: "#2158e8",
      container: {
        DEFAULT: "#f1f5f9",
        lowest: "#ffffff",
        low: "#f8fafc",
        high: "#eef2f7",
        highest: "#e2e8f0",
      },
    },
    "on-surface": {
      DEFAULT: "#0f172a",
      variant: "#64748b",
    },
    outline: {
      DEFAULT: "#94a3b8",
      variant: "#e2e8f0",
    },
    line: "#e2e8f0",
    background: "#eef2ff",
    "on-background": "#0f172a",
    card: "#ffffff",
    ok: "#16a34a",
    warn: "#f59e0b",
    danger: "#dc2626",
    "inverse-surface": "#0f172a",
    "inverse-on-surface": "#f8fafc",
    "inverse-primary": "#bfdbfe",
  },
  borderRadius: {
    DEFAULT: "0.5rem",
    lg: "0.625rem",
    xl: "0.75rem",
    "2xl": "0.75rem",
    full: "9999px",
  },
  fontFamily: {
    headline: ["System", "PingFang SC", "sans-serif"],
    body: ["System", "PingFang SC", "sans-serif"],
    label: ["System", "PingFang SC", "sans-serif"],
  },
};