Something went wrong. Try again.
Cooperative email for PDS operators
Something went wrong. Try again.
4.4 kB · 93 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394/* tailwind.css — Tailwind v4 entry point + @theme design tokens. * * This is the source of truth for Tailwind utility class generation. * Compiled by `scripts/build-tailwind.sh` into web/static/app.css and * served at /ui/static/app.css via the StaticFiles embed (see * web/embed.go). * * Why @theme (and not tailwind.config.js)? Tailwind v4 moved the * config model out of JS and into the CSS file. Tokens declared * inside @theme become both: * - utility class generators — `--color-paper` → `bg-paper`, * `text-paper`, `border-paper`, etc. * - CSS variables on `:root` (Tailwind v4 emits them automatically). * * The same brand palette is mirrored in tokens.css under the legacy * variable names (`--bg`, `--ink`, `--accent`, …) so existing * `var(--bg)` references in public.css and admin.css keep working * without rename churn. PR4/PR5 (#361/#362) handle the conversion; * this PR (#360) only lays the pipeline. * * Source: web/styles/tailwind.css * Output: web/static/app.css (committed; CI verifies it's in sync). */
@import "tailwindcss";
/* Scan inputs — Tailwind v4 detects utility class names from these * sources at build time. PR4/PR5 (#361/#362) will start populating * the *.templ files with utility classes; for now both are listed so * the pipeline is wired correctly the moment a class is added. * * Paths are relative to this file (web/styles/). The build runs from * the repo root via scripts/build-tailwind.sh, but Tailwind resolves * @source relative to the CSS file's location. */@source "../templates/**/*.templ";@source "../templates/**/*.go";
@theme { /* ---------------------------------------------------------------- * Color palette — canonical comail brand. Mirrors * web-frontend/src/assets/brand-colors.json and the Astro chrome * tokens in web-frontend/src/styles/globals.css. Tailwind v4 * generates utilities from each `--color-*` key: `--color-paper` → * bg-paper, text-paper, border-paper, divide-paper, ring-paper. * The earlier oklch warm-paper palette + stamp-red accent are * retired (locked by Scott 2026-05-17). * ---------------------------------------------------------------- */ --color-paper: #dfe0c0; /* sage paper background */ --color-ink: #012102; /* primary ink (darkest blue) */ --color-muted: #5b6660; /* mid-tone for sage bg */ --color-line: #b9bd9a; /* hairline for sage bg */ --color-accent: #3fa1c0; /* cammie body — cyan-blue */ --color-accent-ink: #02413c; /* cammie outline — dark teal */ --color-surface: #f5f5e0; /* off-white surface */
/* ---------------------------------------------------------------- * Typography — Young Serif for the masthead/section headings * (newspaper-display feel) and Atkinson Hyperlegible for body * (high readability + serif companion to Young Serif). * Tailwind v4 generates `font-display`, `font-body`, `font-mono` * from these. * ---------------------------------------------------------------- */ --font-display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Palatino, serif; --font-body: "Atkinson Hyperlegible", "Charter", "Georgia", serif; --font-mono: "JetBrains Mono", "Menlo", "Consolas", monospace;
/* ---------------------------------------------------------------- * Type scale — fixed rem, 1.25 ratio. Tuned so the masthead fits * above the fold on a 720-line laptop. Generates `text-t-xs` * through `text-t-3xl` utility classes. * * Naming intentionally mirrors public.css's `--t-*` scale so the * tokens.css → public.css alias mapping stays one-to-one. * ---------------------------------------------------------------- */ --text-t-xs: 0.8125rem; --text-t-s: 0.9375rem; --text-t-m: 1.0625rem; --text-t-l: 1.1875rem; --text-t-xl: 1.375rem; --text-t-2xl: 2rem; --text-t-3xl: 3rem;
/* ---------------------------------------------------------------- * Radii — 2px is the project default ("data chit on stationery" * vs. the rounded webform aesthetic). Generates `rounded-stamp`. * ---------------------------------------------------------------- */ --radius-stamp: 2px;}
/* tokens.css carries the same palette under legacy variable names * (`--bg`, `--ink`, …) so existing var() references in public.css * and admin.css don't need rename churn before PR4/PR5. */@import "./tokens.css";