webmail-client/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: ["./index.html", "./admin.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      // The interface-size setting zooms <html>, and zoom scales viewport units
      // too: divide them back so a full-height layout still fits (lib/uiScale.ts).
      height: { screen: "calc(100vh / var(--ui-zoom, 1))" },
      minHeight: { screen: "calc(100vh / var(--ui-zoom, 1))" },
      fontFamily: {
        sans: ['"Lato"', "system-ui", "-apple-system", '"Segoe UI"', "Roboto", "sans-serif"],
      },
      // Every named text size bumped +2px over Tailwind's defaults (line-heights too).
      fontSize: {
        xs: ["14px", "18px"],
        sm: ["16px", "22px"],
        base: ["18px", "26px"],
        lg: ["20px", "30px"],
        xl: ["22px", "30px"],
        "2xl": ["26px", "34px"],
        "3xl": ["32px", "38px"],
        "4xl": ["38px", "42px"],
      },
      // Semantic tokens backed by CSS variables (see index.css). Using these
      // instead of raw grays lets every surface switch with the theme.
      // Make every `border`/`divide` utility theme-aware by default, so a bare
      // `border` never falls back to Tailwind's light gray-200 in dark mode.
      borderColor: {
        DEFAULT: "rgb(var(--app-border) / <alpha-value>)",
      },
      divideColor: {
        DEFAULT: "rgb(var(--app-border) / <alpha-value>)",
      },
      colors: {
        app: {
          bg: "rgb(var(--app-bg) / <alpha-value>)",
          surface: "rgb(var(--app-surface) / <alpha-value>)",
          elevated: "rgb(var(--app-elevated) / <alpha-value>)",
          border: "rgb(var(--app-border) / <alpha-value>)",
          fg: "rgb(var(--app-fg) / <alpha-value>)",
          muted: "rgb(var(--app-muted) / <alpha-value>)",
          faint: "rgb(var(--app-faint) / <alpha-value>)",
          accent: "rgb(var(--app-accent) / <alpha-value>)",
          "accent-fg": "rgb(var(--app-accent-fg) / <alpha-value>)",
          hover: "rgb(var(--app-hover) / <alpha-value>)",
          active: "rgb(var(--app-active) / <alpha-value>)",
        },
      },
    },
  },
  plugins: [],
};