client/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        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"],
      },
    },
  },
  plugins: [],
};