/* * GENERATED FILE - do not hand-edit. * Source of truth: design/tokens.json * Regenerate: run the generator, see design/README.md * A test in tests/CTT.Domain.Tests/Design fails if this file and tokens.json disagree, so a * hand-edit here is not a shortcut - it is a broken build. * Command: dotnet run --project design/CTT.DesignTokens * Skin: CountryTimeTracker skin v1.0.0 */ /* * Sizes: font sizes and spacing are emitted in rem so they follow the reader's own font * size. Radii are emitted in px, because a corner is physical geometry and does not want * to grow with the text. */ :root { color-scheme: light; /* ---- colour, light theme ---- */ --ink: #12191c; /* Body text. Near-black with a slight blue-green bias in light theme; near-white in dark. */ --ground: #f2f5f6; /* The page behind everything. Cool grey with a faint cyan bias. */ --surface: #ffffff; /* A card, a tile, a popover - anything that sits on top of the ground. */ --sunken: #e7ecee; /* A well inside a surface: a progress track, a table head, a code block. */ --rule: #dbe3e5; /* Borders and dividers. Never used for text. */ --muted: #5c6f76; /* Secondary text: captions, units, window dates. Still readable - 5:1 or better on surface. */ --accent: #12566b; /* Deep teal. Structure, nav, primary actions, links. NEVER means good, safe or done. */ --accent-ink: #ffffff; /* Text and icons drawn on top of accent. */ --accent-soft: #88aab5; /* A tint of accent for a large fill that must stay visible without competing with it. The app mark's second half is this colour. Never text: it does not reach 4.5:1 on surface. */ --ok: #2c7a52; /* SEMANTIC ONLY. Safe: comfortably below a limit, over a complete record. Never decorative. */ --warn: #8f5a0e; /* SEMANTIC ONLY. Watch: close to a limit, or a number resting on an incomplete record. Never decorative. */ --crit: #9e3228; /* SEMANTIC ONLY. Breach: a limit is passed on the record as it stands. Never decorative. */ --ok-wash: #e8f2ec; /* A very faint ok background, for a chip. Text on it is always ink, never ok. */ --warn-wash: #f7efdf; /* A very faint warn background, for a chip. Text on it is always ink, never warn. */ --crit-wash: #f7e8e6; /* A very faint crit background, for a chip. Text on it is always ink, never crit. */ --focus: #1a7f9c; /* The keyboard focus ring. Drawn with outline-offset, so it sits on the surface beside a control rather than on top of it, and reaches 4.6:1 there. */ /* ---- font stacks ---- */ /* Interface text. Deliberately NO web font: this is an offline-first PWA, and a font that fails to load is a page that looks broken exactly when the user cannot fix it. */ --font-ui: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Country codes, raw sample values, imported text shown back to the user. */ --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* ---- font size ---- */ --text-xs: 0.75rem; /* 12px - Chip text, footnote. */ --text-sm: 0.8125rem; /* 13px - Caption, unit, window dates. */ --text-base: 0.9375rem; /* 15px - Body. */ --text-md: 1.0625rem; /* 17px - Card title, lead sentence. */ --text-lg: 1.25rem; /* 20px - Section heading. */ --text-xl: 1.5rem; /* 24px - Page heading. */ --text-figure-sm: 1.75rem; /* 28px - A number in a small tile. */ --text-figure: 2.5rem; /* 40px - The headline number on a stat tile. The thing the user came for. */ /* ---- line height ---- */ --leading-tight: 1.1; /* A big number. No room to breathe wanted. */ --leading-snug: 1.3; /* Headings, chips. */ --leading-normal: 1.5; /* Prose. */ /* ---- font weight ---- */ --weight-regular: 400; /* Body. */ --weight-medium: 500; /* Caption emphasis, chip. */ --weight-semibold: 600; /* Headings, the headline number. */ --weight-bold: 700; /* Rare. Only where a heading must outrank another heading. */ /* ---- spacing ---- */ --space-0: 0; /* 0px - None. */ --space-1: 0.25rem; /* 4px - Icon to its label. */ --space-2: 0.5rem; /* 8px - Inside a chip; between chips. */ --space-3: 0.75rem; /* 12px - Between lines of a tile. */ --space-4: 1rem; /* 16px - Card padding; between cards. */ --space-5: 1.5rem; /* 24px - Between groups inside a card. */ --space-6: 2rem; /* 32px - Between sections of a page. */ --space-7: 3rem; /* 48px - Above a new major block. */ /* ---- radius ---- */ --radius-sm: 4px; /* Input, small button. */ --radius-md: 8px; /* Card, tile, popover. */ --radius-lg: 12px; /* Modal, the outer panel of a page section. */ --radius-pill: 999px; /* Status chip. */ } /* * Dark theme, from the system setting. Guarded with :not([data-theme="light"]) so a reader * who has explicitly chosen light keeps light on a dark machine. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #e6edef; --ground: #0d1316; --surface: #151d21; --sunken: #1e282d; --rule: #2c383d; --muted: #9aacb3; --accent: #57b6cd; --accent-ink: #08181d; --accent-soft: #356d7b; --ok: #5cc48c; --warn: #d99a2b; --crit: #e8695c; --ok-wash: #16291f; --warn-wash: #2b2214; --crit-wash: #2e1a18; --focus: #8fd3e4; } } /* * Dark theme, chosen explicitly. Declared after the media query so it wins at equal * specificity: this is the half that makes a toggle work from a light machine. */ :root[data-theme="dark"] { color-scheme: dark; --ink: #e6edef; --ground: #0d1316; --surface: #151d21; --sunken: #1e282d; --rule: #2c383d; --muted: #9aacb3; --accent: #57b6cd; --accent-ink: #08181d; --accent-soft: #356d7b; --ok: #5cc48c; --warn: #d99a2b; --crit: #e8695c; --ok-wash: #16291f; --warn-wash: #2b2214; --crit-wash: #2e1a18; --focus: #8fd3e4; } /* * The icon-per-concept map, for reference only. It is not CSS: the icon a concept uses is * a class name, and C# code reads it from IconNames (also generated from tokens.json). * * gap bi-dash-circle-dotted * unverified bi-patch-question * verified bi-patch-check * ruleIncompletebi-patch-exclamation * notWholeTest bi-exclamation-diamond * rebuttable bi-plus-slash-minus * noNumber bi-slash-circle * askAdviser bi-person-raised-hand * info bi-info-circle * ok bi-check-circle * watch bi-exclamation-triangle * breach bi-exclamation-octagon * schengen bi-passport * residency bi-bank * feie bi-cash-stack * presenceFloor bi-hourglass-split * country bi-geo-alt * crossing bi-arrow-left-right * arrival bi-box-arrow-in-right * departure bi-box-arrow-right * dayTrip bi-arrow-repeat * transit bi-airplane * unknownPlace bi-question-circle * window bi-calendar-range * recordStopped bi-calendar-x * ruleData bi-journal-text * dayCounts bi-bar-chart-steps * ledger bi-list-nested * import bi-box-arrow-in-down * export bi-box-arrow-up * settings bi-gear * storage bi-hdd * add bi-plus-lg * edit bi-pencil-square * delete bi-trash * close bi-x-lg * expand bi-chevron-right * collapse bi-chevron-down * menu bi-list * empty bi-inbox */