Files
webmail-client/frontend/tailwind.config.js
T
lukasandClaude Opus 4.8 b4e07f11aa collapse cross-account dupes, Lato UI font, mail-list selection & density tuning
Backend:
- Collapse identical cross-account deliveries in a thread: new messages.delivery_id
  (migration 0011) preserves the real Message-ID even when message_id_hdr is
  synthesized (§7.1); get_thread groups by it and reports also_in_account_ids; the
  list count counts distinct deliveries. Backfill script for existing rows.

Frontend:
- Bundle Lato (SIL OFL) as the UI font; unread mail-list rows use Black weight.
- Mail-list selection: hover-avatar checkbox, tri-state "select all", bulk
  Archive/Pin/Delete (Restore/Delete in Archive/Trash/Spam) with a count in the
  reading pane; unread blue dot; "also delivered to" note in the thread.
- Spacing/size tuning: sender-column width, icon gaps, avatar size, bar heights,
  and a round of -1px font sizes across the sidebar, mail list, and reading pane.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U72FZiF1W1pb8XxyWBTREA
2026-07-22 21:49:48 +02:00

50 lines
1.8 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
content: ["./index.html", "./src/**/*.{ts,tsx}"],
theme: {
extend: {
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: [],
};