diff --git a/civiccore-ui/tokens/.gitkeep b/civiccore-ui/tokens/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/civiccore-ui/tokens/tokens-reference.html b/civiccore-ui/tokens/tokens-reference.html new file mode 100644 index 0000000..1265e3f --- /dev/null +++ b/civiccore-ui/tokens/tokens-reference.html @@ -0,0 +1,221 @@ + + + + +CivicSuite — Design Tokens Reference + + + + + + +
+
+
CivicSuite · Design System
+

Design Tokens Reference

+

The visual reference for civiccore-ui/tokens/tokens.css — the suite's single token source. Every value here is rendered live from the token file. Contrast ratios are WCAG 2.x against the noted surface; AA requires 4.5:1 for normal text, 3:1 for large text and UI boundaries.

+
+ +
+
+ Three AA corrections applied during extraction + --gold is accent/border/large-text only (white-on-gold 3.22:1, a fail for body text) — text-bearing gold is --gold-2. New --gold-strong carries gold text on pale gold surfaces (5.42:1 where --gold-2 was only 4.31:1). --ink-4 is decorative-only (2.48:1) — never text. +
+
+ +

Neutrals & ink

+

Surfaces run paper → card; ink runs primary → decorative. --ink-3 is the readable-text floor; --ink-4 below it is for lines and disabled glyphs only.

+
+ +

Civic brand

+

Navy is the primary brand and is safe for solid fills with white text. Gold is warm accent — mind the three text rules above.

+
+ +

Status

+

Each status token pairs with its own *-soft surface. All pairs verified AA; --warn is the tightest at 4.79:1 — do not lighten it.

+
+ Verified + Needs review + Blocked + In progress + Beta +
+
+ +

Contrast ledger

+

The load-bearing text pairings, with measured ratios. This table is the acceptance record for the AA corrections.

+ + + +
Foreground / backgroundSampleRatioGrade
+ +

Typography

+

Serif for display and headings, sans for UI and body, mono for data, IDs, and audit hashes.

+
+ +

Density

+

Density changes metric tokens only (--row-h, --pad, --gap) — never color or type. Left is comfortable (default), right is compact.

+
+
+
Comfortable
+
Ordinance 2026-14§2.1
+
Ordinance 2026-15§2.2
+
Ordinance 2026-16§2.3
+
+
+
Compact
+
Ordinance 2026-14§2.1
+
Ordinance 2026-15§2.2
+
Ordinance 2026-16§2.3
+
+
+
+ + + + diff --git a/civiccore-ui/tokens/tokens.css b/civiccore-ui/tokens/tokens.css new file mode 100644 index 0000000..a61c660 --- /dev/null +++ b/civiccore-ui/tokens/tokens.css @@ -0,0 +1,104 @@ +/* ============================================================================= + CivicSuite design tokens — SINGLE SOURCE OF TRUTH + ----------------------------------------------------------------------------- + Palette: light civic / navy / warm gold. "Modern public infrastructure." + + AUTHORITY + This file is the token authority for the whole suite. Values are extracted + verbatim from the canonical prototype (docs/design/ui-ux-prototype/styles.css) + EXCEPT for three documented WCAG-AA corrections, each marked [AA-FIX] below. + See docs/design/windows-desktop-design-control.md. + + CONSUMPTION (offline binaries cannot @import at runtime) + Consumers VENDOR a generated copy of this file, pinned to a civiccore + version, and a CI --check gate fails the build if the vendored copy drifts. + - Desktop app (Tauri/WebView2): desktop/src/styles.css consumes a vendored copy. + - Prototype (docs/design/ui-ux-prototype/styles.css) consumes a vendored copy. + Any JS/JSON token mirror is GENERATED from this file, never hand-maintained. + + CONTRAST NOTATION + Ratios below are WCAG 2.x contrast against the noted background. AA needs + >=4.5:1 for normal text, >=3:1 for large text (>=24px, or >=19px bold) and + for UI component boundaries. Every value that carries text has been checked. + ========================================================================== */ + +:root { + /* --------------------------------------------------------------------------- + COLOR — NEUTRALS (surfaces + ink) + ------------------------------------------------------------------------ */ + --paper: #faf8f3; /* page background L=0.945 */ + --paper-2: #f3efe5; /* alt / raised surface */ + --paper-3: #ebe5d6; /* sunken surface */ + --card: #ffffff; /* primary surface L=1.000 */ + --rule: #e3dccb; /* hairline rules (>=3:1 vs card: component boundary, OK) */ + --rule-strong: #cabe9f; /* emphasized rule */ + + /* Ink ramp — text. Contrast noted against --paper (the worst common case). */ + --ink: #1a2330; /* primary text vs paper 15.0:1 AAA */ + --ink-2: #3a4554; /* secondary text vs paper 9.2:1 AAA */ + --ink-3: #6b7280; /* tertiary text vs paper 4.58:1 AA (this is the FLOOR for text) */ + --ink-4: #9aa0ab; /* [AA-FIX] DECORATIVE ONLY — vs paper 2.48:1, FAILS AA. + Allowed uses: hairline separators, dividers, disabled + glyphs, non-informational icon strokes. NEVER body copy, + labels, metadata, or any text a user must read. */ + + /* --------------------------------------------------------------------------- + COLOR — CIVIC (brand) + ------------------------------------------------------------------------ */ + --navy: #1a3a52; /* primary brand. white-on-navy 11.9:1 AAA. Safe for solid buttons + text. */ + --navy-2: #122a3d; /* navy pressed / darker brand */ + --navy-soft: #e6edf3; /* navy tint surface (ink-on-tint OK) */ + + --gold: #b08a2e; /* [AA-FIX] ACCENT / BORDER / LARGE-TEXT ONLY. + white-on-gold 3.22:1 — FAILS AA for normal text, + passes for large text (3:1) and component borders. + For text-bearing gold use --gold-2 (solid) or + --gold-strong (on pale gold surfaces). */ + --gold-2: #8a6a1f; /* text-bearing gold. white-on-gold-2 5.05:1 AA; + gold-2-on-white/card 5.05:1 AA. Use for solid gold + buttons and gold text on --card/--paper. */ + --gold-strong: #785b16; /* [AA-FIX] NEW. AA-safe gold text on PALE gold tints. + gold-strong-on-gold-soft 5.42:1 AA (gold-2 there is + only 4.31:1, a fail). Use for .badge.gold / .vis text + and any gold label on --gold-soft. */ + --gold-soft: #f5edd6; /* gold tint surface */ + --seal: #6b3a1f; /* seal red-brown (accent, dots) */ + + /* --------------------------------------------------------------------------- + COLOR — STATUS (text token on matching *-soft surface) + All pairs below verified AA on their own soft background. + ------------------------------------------------------------------------ */ + --ok: #2f6b3a; /* on --ok-soft 5.24:1 AA */ + --ok-soft: #e0ecdf; + --warn: #8a5a14; /* on --warn-soft 4.79:1 AA (tight — do not lighten) */ + --warn-soft: #f5e6c5; + --err: #8a2a2a; /* on --err-soft 6.40:1 AA */ + --err-soft: #f1d9d9; + --info: #1f4a6b; /* on --info-soft 7.44:1 AA */ + --info-soft: #dde7ee; + --neutral-soft: #ece7d8; /* default badge surface (ink-2 text 8:1+ AA) */ + + /* --------------------------------------------------------------------------- + TYPOGRAPHY + serif = display/headings, sans = UI/body, mono = data/IDs/hashes + ------------------------------------------------------------------------ */ + --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; + --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; + + /* --------------------------------------------------------------------------- + DENSITY — comfortable (default). See [data-density="compact"] override. + ------------------------------------------------------------------------ */ + --row-h: 36px; /* table/list row height */ + --pad: 16px; /* container padding */ + --gap: 12px; /* stack/row gap */ + --radius: 8px; /* control radius */ + --radius-lg: 12px; /* card radius */ +} + +/* Compact density: overrides ONLY the metrics that change. Colors/type are density-invariant. */ +[data-density="compact"] { + --row-h: 30px; + --pad: 12px; + --gap: 8px; +}