lukasandClaude Opus 5.5
a4581ab199
Mailbox display and Settings → Appearance get an interface-size picker, stored per device in localStorage and applied as CSS zoom on <html>. Viewport-height layouts divide by --ui-zoom, and code that turns mouse coordinates or bounding rects into CSS lengths (resizers, compose dock, emoji picker, editor popups and image handles, swipe-to-delete) divides by the zoom factor. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
54 lines
2.1 KiB
JavaScript
54 lines
2.1 KiB
JavaScript
/** @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: [],
|
|
};
|