83 lines
4.2 KiB
CSS
83 lines
4.2 KiB
CSS
/* Tofu — design tokens.
|
|
Single source of raw values: base.css, sheet.css and print.css use var(--token) only.
|
|
Model: a sheet of paper on a desk. No dark mode, no shadow, no gradient, no motion.
|
|
|
|
Contrast ratios below are computed (WCAG 2.x relative luminance), not estimated.
|
|
AA needs 4.5:1 for body text, 3:1 for large text and for UI component boundaries. */
|
|
|
|
:root {
|
|
/* --- Surfaces --------------------------------------------------------- */
|
|
--paper: #ffffff; /* the sheet */
|
|
--desk: #f3f1ec; /* around the sheet — 1.13:1 vs paper, a tint, not a border */
|
|
--focus-wash: #f4efe3; /* focused control background — 1.15:1 vs paper.
|
|
Deliberately faint: it is the SECOND focus signal.
|
|
The required contrast change is carried by --rule-focus. */
|
|
|
|
/* --- Ink -------------------------------------------------------------- */
|
|
--ink: #1b1a17; /* body text — 17.4:1 on paper, 15.2:1 on focus-wash (AAA) */
|
|
--ink-soft: #4a463e; /* ingredient line — 9.4:1 on paper, 8.2:1 on focus-wash (AAA) */
|
|
--ink-label: #5f5a50; /* field labels, status, placeholder —
|
|
6.9:1 on paper, 6.0:1 on focus-wash, 6.1:1 on desk (AA) */
|
|
|
|
/* --- Rules ------------------------------------------------------------ */
|
|
--rule: #d9d5cc; /* decorative hairline only (day separators, sheet edge).
|
|
1.5:1 — carries no information, so 1.4.11 does not apply. */
|
|
--rule-strong: #98948b; /* writing line under an input, suggestion box edge.
|
|
3.0:1 on paper — this IS the visible boundary of a control,
|
|
so it must meet the 3:1 non-text minimum. */
|
|
--rule-focus: #1b1a17; /* focused writing line — 17.4:1 on paper */
|
|
--rule-width: 1px;
|
|
--rule-width-focus: 2px;
|
|
--rule-grow: 1px; /* --rule-width-focus minus --rule-width; padding compensation */
|
|
|
|
/* --- Type ------------------------------------------------------------- */
|
|
/* System stacks only — no remote font, nothing to break in ten years. */
|
|
--font-document: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
|
--font-label: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
|
|
--size-title: 1.5rem; /* 24px — week title */
|
|
--size-body: 1.0625rem; /* 17px — document text and every input.
|
|
Kept above 16px so iOS Safari does not zoom on focus. */
|
|
--size-day: 0.9375rem; /* 15px — day heading */
|
|
--size-label: 0.8125rem; /* 13px — field labels, buttons, status */
|
|
|
|
--line-body: 1.5;
|
|
--line-tight: 1.2;
|
|
--tracking-label: 0.08em;
|
|
--weight-normal: 400;
|
|
--weight-strong: 600;
|
|
|
|
/* --- Space ------------------------------------------------------------ */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1.25rem;
|
|
--space-5: 2rem;
|
|
--space-6: 3rem;
|
|
|
|
/* --- Geometry --------------------------------------------------------- */
|
|
--sheet-width: 44rem;
|
|
--label-column: 8.5rem;
|
|
--measure: 62ch; /* comfortable reading length for prose paragraphs */
|
|
--control-height: 2.75rem; /* 44px — minimum touch target, on every viewport */
|
|
--field-pad-block: var(--space-2);
|
|
--field-pad-inline: var(--space-2);
|
|
--suggestions-max-height: 16rem;
|
|
--icon-size: 1.25rem;
|
|
--icon-stroke: 1.5;
|
|
--radius: 0; /* a form printed on paper has no rounded corners */
|
|
--layer-suggestions: 10;
|
|
|
|
/* --- Print ------------------------------------------------------------ */
|
|
/* print.css remaps the tokens above onto these; it never states a raw value. */
|
|
--print-page-margin: 14mm;
|
|
--print-rule: #c4beb2; /* 1.85:1 — day separators survive a cheap printer
|
|
while staying lighter than the writing lines */
|
|
--print-size-title: 1.25rem;
|
|
--print-size-body: 1rem;
|
|
--print-space-3: 0.375rem;
|
|
--print-space-4: 0.75rem;
|
|
--print-control-height: 1.75rem; /* ~7 mm — room to write a dish by hand.
|
|
With the values above a whole week fits on
|
|
one A4 page: 7 x ~127px + header < 1016px. */
|
|
}
|