/* * 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 v2.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. Also the cut in the app mark, so it is held still: changing it redraws every icon and the Play listing. */ --surface: #ffffff; /* A card, a tile, a popover - anything that sits on top of the ground. */ --sunken: #e2e9eb; /* A well inside a surface: a progress track, a table head, a code block. */ --rule: #d2dcdf; /* Borders and dividers. Never used for text. */ --muted: #4b5f66; /* Secondary text: labels, units, window dates. 5.4:1 or better on every background it sits on, including sunken and accent-wash. */ --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. */ --accent-wash: #dcebee; /* A very faint accent background: the card for where you are today, the hover on a quiet control, the badge behind a section icon. Structure, never a verdict. Ink, muted and accent text all reach 4.5:1 on it. */ --ok: #256e48; /* SEMANTIC ONLY. Safe: comfortably below a limit, over a complete record. Never decorative. */ --warn: #8a560c; /* 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. */ --shade: #0e3a47; /* The colour of the shadow under a card, always mixed down to a few percent. A deep teal in light theme so the shadow belongs to the page; black in dark, where a light shadow would read as a glow. Never text, never a fill. */ /* ---- font stacks ---- */ /* Interface text. Atkinson Hyperlegible Next (SIL OFL 1.1, Braille Institute), drawn so that characters that look alike - 0 and O, 1 and l and I - stay apart at a glance. Self-hosted from wwwroot/fonts and precached by the service worker. font-display swap means the system faces after it show the text at once if the file is ever missing. */ --font-ui: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Raw sample values and imported text shown back to the user, exactly as they were. */ --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* ---- font size ---- */ --text-xs: 0.8125rem; /* 13px - The smallest text in the app: month labels on the 180-day strip, footnotes. Never a chip. */ --text-sm: 0.9375rem; /* 15px - Chips, labels, captions, units, window dates. */ --text-base: 1.0625rem; /* 17px - Body. */ --text-md: 1.1875rem; /* 19px - Card title, lead sentence. */ --text-lg: 1.4375rem; /* 23px - Section heading. */ --text-xl: 1.875rem; /* 30px - Page heading, a country name on its card. */ --text-figure-sm: 2.25rem; /* 36px - A number in a small tile. */ --text-figure: 3.25rem; /* 52px - The headline number on a card. The thing the user came for. */ --text-figure-lg: 5rem; /* 80px - The Schengen hero number, read at a glance from across the room. */ /* ---- line height ---- */ --leading-tight: 1.05; /* A big number. No room to breathe wanted. */ --leading-snug: 1.3; /* Headings, chips. */ --leading-normal: 1.55; /* Prose. */ /* ---- font weight ---- */ --weight-regular: 400; /* Body. */ --weight-medium: 500; /* Labels, captions. */ --weight-semibold: 650; /* Headings, chips, a figure in a table row. */ --weight-bold: 800; /* The hero numbers and the page title. The variable font reaches 800 and the figures use all of it. */ /* ---- 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 on a phone; between cards. */ --space-5: 1.5rem; /* 24px - Card padding on a wide screen; 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: 8px; /* Input, button. */ --radius-md: 14px; /* Card, tile, popover. */ --radius-lg: 22px; /* The Schengen hero card, a modal. */ --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: #e8eef0; --ground: #0d1316; --surface: #162024; --sunken: #1f2b30; --rule: #2d3b41; --muted: #a0b2b9; --accent: #57b6cd; --accent-ink: #08181d; --accent-soft: #356d7b; --accent-wash: #14313a; --ok: #5cc48c; --warn: #d99a2b; --crit: #ec7366; --ok-wash: #16291f; --warn-wash: #2b2214; --crit-wash: #2e1a18; --focus: #8fd3e4; --shade: #000000; } } /* * 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: #e8eef0; --ground: #0d1316; --surface: #162024; --sunken: #1f2b30; --rule: #2d3b41; --muted: #a0b2b9; --accent: #57b6cd; --accent-ink: #08181d; --accent-soft: #356d7b; --accent-wash: #14313a; --ok: #5cc48c; --warn: #d99a2b; --crit: #ec7366; --ok-wash: #16291f; --warn-wash: #2b2214; --crit-wash: #2e1a18; --focus: #8fd3e4; --shade: #000000; } /* * 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 * ruleIncomplete bi-patch-exclamation * 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 * over bi-x-circle * 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-upload * export bi-download * 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 * sync bi-cloud-arrow-up * weatherClear bi-sun * weatherClearNight bi-moon-stars * weatherPartlyCloudy bi-cloud-sun * weatherPartlyCloudyNight bi-cloud-moon * weatherCloudy bi-clouds * weatherFog bi-cloud-fog2 * weatherDrizzle bi-cloud-drizzle * weatherRain bi-cloud-rain * weatherHeavyRain bi-cloud-rain-heavy * weatherFreezingRain bi-cloud-sleet * weatherSnow bi-cloud-snow * weatherThunder bi-cloud-lightning-rain * weatherHail bi-cloud-hail * weatherUnknown bi-thermometer-half * speedTest bi-speedometer2 */