/* * Base styles. * * Deliberately small and dependency-free. This product is used on a phone, in a stairwell, * once or twice a year: the thing that matters is that the text is legible and the buttons are * reachable with a thumb, not that a design system is installed. * * Two designs, each in a light and a dark scheme, chosen by the reader in the header and applied * as two attributes on `` before the first paint (`public/appearance.js`): * * data-design absent = "podstawowy" (stamp ink) "mono" = "czarno-biały" * data-theme absent = follow the system "light" / "dark" = fixed * * `prefers-color-scheme` stays the default because the flow happens outdoors as often as indoors; * the fixed schemes are for the person whose system setting is wrong for this particular screen. */ /* * ── The palettes ──────────────────────────────────────────────────────────── * * Both come from the design-system package of 24 September 2026 (`docs/design-system/`) and share * everything but colour: type, spacing, radii and the mark's geometry are the same, and so are * the custom-property NAMES, which is what lets the second design be a block of overrides. * * PODSTAWOWY - "Tusz pieczątki" by day, "Grafit i fiolet" by night. The violet is the ink of an * official rubber stamp, the colour that says a document has been confirmed, and it is used only * for STRUCTURE: headings, the wordmark, the mark, links. The button is deliberately NOT violet - * near-black by day, off-white by night - which inverts the usual pattern: colour organises the * page and the one thing to press stays neutral. A violet button would read as one more heading. * * CZARNO-BIAŁY - "Czerń i biel" by day, "Grafit" by night. Monochrome: heading, ink and button are * one black, and hierarchy comes from type rather than colour. The only hues on screen are the * three states. Links are told from text by their underline alone, so nothing may remove it. * * What holds in both, and is the reason each token exists: * * `--accent` is the primary button fill, once per region (rule 16b), with `--accent-ink` on it. * `--mark` is what has to be visible ON that fill: the rule down a `commit` button's leading * edge and the ground of the current stage numeral. * `--line` divides content and is meant to disappear; `--edge` bounds a control and is held at * 3:1 on every ground. Merging them is what once made every outlined control fail 1.4.11. * `--tint` is "it is your turn" - once a screen, always with the words. `--tint-soft` is barely * a colour: which column is about the state of the record rather than its content. * `--danger`, `--ok`, `--warn` are WORD colours or a 2px border, never a fill, never alone. * * Ratios, lowest across bg, surface, raised and the tints (WCAG 2.2): * * podstawowy czarno-biały * light dark light dark * ink 14.3 12.9 16.6 9.1 * muted 6.1 6.3 6.9 5.7 * heading / link 9.7 7.4 18.9 13.5 * edge 3.9 3.7 4.0 3.3 * accent-ink on accent 17.2 15.6 18.9 13.6 * mark on accent 9.6 7.3 12.7 5.1 * danger / ok / warn >= 5.3 >= 7.6 >= 5.6 >= 5.7 * * Before changing any value, change it in `docs/design-system//palette.json` as well and * run `node docs/design-system/check-contrast.mjs b-tusz-pieczatki` (and `a-czern-i-biel`). * * The selectors are arranged so specificity does the choosing: the base design's dark scheme is * `:root:not([data-theme="light"])` inside the media query and `:root[data-theme="dark"]` outside * it, and the mono design repeats both with one attribute more - so a fixed scheme beats the * system's, and a chosen design beats the default, with no `!important` anywhere. Each dark * scheme is written twice because a custom property cannot be declared once under two conditions. */ /* Podstawowy, light: "Tusz pieczątki". */ :root { --bg: #fbfbfc; --surface: #ffffff; /* An inset INSIDE a card - the hash block, the suggestion under a question. */ --raised: #f3f1f6; --tint: #efe7fa; --tint-soft: #f6f4f9; --ink: #1d1a22; --muted: #595466; /* Stamp violet: STRUCTURE, never an action. A heading in the button's colour gets clicked. */ --heading: #4a2574; --link: var(--heading); --line: #e5e2ea; --edge: #77727f; /* Near-black, and the strongest thing on the screen for exactly that reason. */ --accent: #1d1a22; --accent-ink: #ffffff; --mark: #cdb9ea; --mark-ink: #1d1a22; --danger: #b42318; --ok: #1c6b3a; --warn: #8a5300; /* Two widths, because there are two kinds of screen here. `--measure` is a column of prose and form fields, which is what a step, a sign-in and a legal text are. `--page` is the record: three header cards, a snapshot beside its state, a trail. One number for both meant the record was read through a 34rem straw on a monitor. */ --measure: 34rem; --page: 72rem; --gutter: 1.25rem; color-scheme: light dark; } /* * Podstawowy, dark: "Grafit i fiolet". A neutral graphite ground rather than a violet-tinted one; * the violet lightens to lilac and stays only in headings and links, and the button turns * off-white. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141416; --surface: #1c1c1f; --raised: #252528; --tint: #2a2236; --tint-soft: #19181d; --ink: #ececee; --muted: #a6a6ad; --heading: #c4a9ee; --line: #303035; --edge: #7d7d85; --accent: #ececee; --accent-ink: #141416; --mark: #5b3a8c; --mark-ink: #ececee; --danger: #f4a59b; --ok: #7cc79a; --warn: #e0b35f; } } :root[data-theme="dark"] { --bg: #141416; --surface: #1c1c1f; --raised: #252528; --tint: #2a2236; --tint-soft: #19181d; --ink: #ececee; --muted: #a6a6ad; --heading: #c4a9ee; --line: #303035; --edge: #7d7d85; --accent: #ececee; --accent-ink: #141416; --mark: #5b3a8c; --mark-ink: #ececee; --danger: #f4a59b; --ok: #7cc79a; --warn: #e0b35f; } /* * Czarno-biały, light: "Czerń i biel". The page and a card are the same white, so the card's * `--line` border is the whole of what separates them - a card that announced itself with a * shadow would read as software, and this product makes a document. Links are `--ink`. */ :root[data-design="mono"] { --bg: #ffffff; --surface: #ffffff; --raised: #f4f4f4; --tint: #f0f0f0; --tint-soft: #f7f7f7; --ink: #111111; --muted: #525252; --heading: #111111; --link: var(--ink); --line: #e4e4e4; --edge: #767676; --accent: #111111; --accent-ink: #ffffff; --mark: #d4d4d4; --mark-ink: #111111; --danger: #b42318; --ok: #1c6b3a; --warn: #8a5300; } /* Czarno-biały, dark: "Grafit". A soft graphite rather than black, to cut glare in the dark. */ @media (prefers-color-scheme: dark) { :root[data-design="mono"]:not([data-theme="light"]) { --bg: #1c1c1e; --surface: #262628; --raised: #2f2f32; --tint: #3a3a3d; --tint-soft: #222224; --ink: #e6e6e6; --muted: #b8b8bd; --heading: #f2f2f2; --line: #3a3a3d; --edge: #8a8a90; --accent: #e6e6e6; --accent-ink: #1c1c1e; --mark: #5f5f64; --mark-ink: #f2f2f2; --danger: #f4a59b; --ok: #7cc79a; --warn: #e0b35f; } } :root[data-design="mono"][data-theme="dark"] { --bg: #1c1c1e; --surface: #262628; --raised: #2f2f32; --tint: #3a3a3d; --tint-soft: #222224; --ink: #e6e6e6; --muted: #b8b8bd; --heading: #f2f2f2; --line: #3a3a3d; --edge: #8a8a90; --accent: #e6e6e6; --accent-ink: #1c1c1e; --mark: #5f5f64; --mark-ink: #f2f2f2; --danger: #f4a59b; --ok: #7cc79a; --warn: #e0b35f; } /* A fixed scheme fixes the browser's own parts too - form controls, scrollbars, the date picker - which `color-scheme: light dark` would otherwise still draw from the system setting. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; } /* The page is a column: header, content, footer, with the footer pushed to the bottom on short pages rather than floating halfway up. */ body { display: flex; flex-direction: column; min-height: 100vh; } /* Two column widths, and no screen has to ask for the one it already had. `main` is as wide as the page now, and every direct child is pulled back to the reading column unless it says `.wide`. So the dozen screens that are a column of prose and form fields are untouched, and the two that show a whole record opt in. Block layout, not grid, deliberately: grid items do not collapse their margins, and switching would have loosened the vertical rhythm of every paragraph and heading in the app as a side effect of changing a width. */ main { max-width: var(--page); margin: 0 auto; padding: 2rem var(--gutter) 4rem; width: 100%; box-sizing: border-box; flex: 1; } main > *:not(.wide) { max-width: var(--measure); margin-inline: auto; } /* The column rule works on BLOCKS, and silently does nothing for anything else. `margin-inline: auto` has nothing to centre when the child is inline or inline-block, so a bare