client/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        // — Primary —
        primary: {
          DEFAULT: "#004ac6",
          container: "#2563eb",
          fixed: "#dbe1ff",
          "fixed-dim": "#b4c5ff",
        },
        "on-primary": {
          DEFAULT: "#ffffff",
          container: "#eeefff",
          fixed: "#00174b",
          "fixed-variant": "#003ea8",
        },
        // — Secondary —
        secondary: {
          DEFAULT: "#495c95",
          container: "#acbfff",
          fixed: "#dbe1ff",
          "fixed-dim": "#b4c5ff",
        },
        "on-secondary": {
          DEFAULT: "#ffffff",
          container: "#394c84",
          fixed: "#00174b",
          "fixed-variant": "#31447b",
        },
        // — Tertiary —
        tertiary: {
          DEFAULT: "#943700",
          container: "#bc4800",
          fixed: "#ffdbcd",
          "fixed-dim": "#ffb596",
        },
        "on-tertiary": {
          DEFAULT: "#ffffff",
          container: "#ffede6",
          fixed: "#360f00",
          "fixed-variant": "#7d2d00",
        },
        // — Error —
        error: {
          DEFAULT: "#ba1a1a",
          container: "#ffdad6",
        },
        "on-error": {
          DEFAULT: "#ffffff",
          container: "#93000a",
        },
        // — Surface (Tonal Architecture) —
        surface: {
          DEFAULT: "#f9f9fe",
          dim: "#d9dade",
          bright: "#f9f9fe",
          variant: "#e2e2e7",
          tint: "#0053db",
          container: {
            DEFAULT: "#ededf2",
            lowest: "#ffffff",
            low: "#f3f3f8",
            high: "#e8e8ed",
            highest: "#e2e2e7",
          },
        },
        "on-surface": {
          DEFAULT: "#1a1c1f",
          variant: "#434655",
        },
        // — Outline —
        outline: {
          DEFAULT: "#737686",
          variant: "#c3c6d7",
        },
        // — Background —
        background: "#f9f9fe",
        "on-background": "#1a1c1f",
        // — Inverse —
        "inverse-surface": "#2e3034",
        "inverse-on-surface": "#f0f0f5",
        "inverse-primary": "#b4c5ff",
      },
      borderRadius: {
        DEFAULT: "0.25rem",
        lg: "1rem",
        xl: "1.5rem",
        "2xl": "2rem",
        full: "9999px",
      },
      fontFamily: {
        headline: ["System", "PingFang SC", "sans-serif"],
        body: ["System", "PingFang SC", "sans-serif"],
        label: ["System", "PingFang SC", "sans-serif"],
      },
    },
  },
  plugins: [],
};