tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      "colors": {
        "surface-tint": "#5f5e5e",
        "error-container": "#ffdad6",
        "surface-dim": "#ddd9d8",
        "error": "#ba1a1a",
        "on-secondary": "#ffffff",
        "tertiary-fixed-dim": "#78dc77",
        "secondary-fixed-dim": "#d5ca00",
        "on-primary-fixed": "#1b1c1c",
        "on-tertiary-fixed-variant": "#005313",
        "on-secondary-fixed-variant": "#4d4800",
        "on-error": "#ffffff",
        "on-background": "#1c1b1b",
        "on-secondary-fixed": "#1e1c00",
        "tertiary": "#001e03",
        "on-tertiary-fixed": "#002204",
        "primary": "#181919",
        "surface-container": "#f1edec",
        "primary-container": "#2d2d2d",
        "on-surface-variant": "#444748",
        "surface-variant": "#e5e2e1",
        "on-secondary-container": "#6a6500",
        "on-primary": "#ffffff",
        "primary-fixed": "#e4e2e1",
        "surface-bright": "#fdf8f8",
        "inverse-primary": "#c8c6c6",
        "secondary-fixed": "#f3e700",
        "on-surface": "#1c1b1b",
        "surface": "#fdf8f8",
        "on-tertiary-container": "#45a84a",
        "background": "#fdf8f8",
        "surface-container-lowest": "#ffffff",
        "tertiary-fixed": "#94f990",
        "secondary": "#666000",
        "on-primary-container": "#959494",
        "outline-variant": "#c4c7c7",
        "secondary-container": "#f0e400",
        "on-error-container": "#93000a",
        "primary-fixed-dim": "#c8c6c6",
        "tertiary-container": "#003609",
        "outline": "#747878",
        "on-tertiary": "#ffffff",
        "surface-container-low": "#f7f3f2",
        "inverse-surface": "#313030",
        "surface-container-high": "#ebe7e7",
        "on-primary-fixed-variant": "#474747",
        "surface-container-highest": "#e5e2e1",
        "inverse-on-surface": "#f4f0ef"
      },
      "borderRadius": {
        "DEFAULT": "0.125rem",
        "lg": "0.25rem",
        "xl": "0.5rem",
        "full": "0.75rem"
      },
      "spacing": {
        "base_grid": "8px",
        "grid_pattern": "24px",
        "gutter": "24px",
        "margin_edge": "32px"
      },
      "fontFamily": {
        "headline-md": ["Caveat"],
        "label-sm": ["Inter"],
        "accent-note": ["Caveat"],
        "body-md": ["Inter"],
        "body-lg": ["Inter"],
        "display-lg": ["Caveat"]
      },
      "fontSize": {
        "headline-md": ["32px", { "lineHeight": "1.2", "fontWeight": "600" }],
        "label-sm": ["13px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600" }],
        "accent-note": ["20px", { "lineHeight": "1.2", "fontWeight": "400" }],
        "body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
        "body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
        "display-lg": ["48px", { "lineHeight": "1.1", "fontWeight": "700" }]
      }
    },
  },
  plugins: [],
}