/* ============================================================================ TDM3 design tokens — source of truth for all color, size and spacing. Derived from the tdm3-branding skill (references/branding.md, document palette), because the web variant (references/tailwind-web.md) does not exist in the installed skill (1.0.22). Every value carries its provenance: [branding] means literally from branding.md; [derivation] means a deliberate web translation documented here. Contrast ratios are measured (WCAG 2.1); see docs/design-system/accessibility.md for the full table. THIS IS THE ONLY FILE IN WHICH A LITERAL COLOR VALUE MAY APPEAR. Everywhere else: var(--tdm3-...). Guarded by stylelint and a guard test (see conventions.md). Exception: vendor files, including the Kendo swatch the product ships (lib/kendo-ui//styles/). Since P4 there is no compiled theme and therefore no second file with color copies either. Whatever brand color the swatch carries comes from bridge.css, and THERE not a single value sits: every declaration there is a --kendo-* variable pointing at a token here. Guarded by DesignSystemGuardTests.Every_declaration_in_the_kendo_bridge_maps_a_token. This file has been the living copy since migration step 1; before that it sat in docs/design-system/, and only tokens.css.md still points here from there now. Never two living copies. ========================================================================= */ :root { /* == Brand palette — [branding], literal ================================ */ --tdm3-navy: #0E2841; /* dark blue: headings, primary chrome. 15.02:1 on white */ --tdm3-blue: #156082; /* accent blue: links, primary actions. 6.94:1 on white */ --tdm3-sky: #4DB8E8; /* logo blue. 2.25:1 — NEVER text and NEVER a focus ring on light; only decoration and large surfaces with --tdm3-navy-text on it (6.68:1) */ --tdm3-green: #196B24; /* green: success. 6.62:1 on white */ --tdm3-lime: #9DD866; /* logo green. 1.69:1 — decoration only, never text */ --tdm3-orange: #E97132; /* orange: warning. 3.06:1 — large text, borders and icons only; never body text */ --tdm3-gray-100: #F5F5F5; /* [branding] alternating table rows */ --tdm3-gray-200: #E8E8E8; /* [branding] backgrounds, separators */ --tdm3-sky-tint: #D5E8F0; /* [branding] table headers */ --tdm3-border: #CCCCCC; /* [branding] subtle borders */ /* == Web derivations — [derivation], not in branding.md ================= */ /* The brand palette has no red; error is a functional color, not a brand color. #C00000 is the value the portal already carries for "error" today — recognition stays, and it reaches 6.48:1 on white. */ --tdm3-red: #C00000; /* #E97132 only reaches 2.63:1 as text on its own tint. Warning TEXT therefore uses this darkened orange-brown (5.38:1 on the tint); #E97132 itself stays for the border and the icon. */ --tdm3-orange-text: #9A4A0F; /* Tints for badge/callout backgrounds: brand color mixed with white (~12%), measured with their dark text color on top. */ --tdm3-green-tint: #E7F2E8; /* with --tdm3-green on it: 5.76:1 */ --tdm3-orange-tint: #FCEBDE; /* with --tdm3-orange-text on it: 5.38:1 */ --tdm3-red-tint: #FBEAEA; /* with --tdm3-red on it: 5.57:1 */ /* Hover of --tdm3-blue: ~15% darkened. White on it: 9.05:1. */ --tdm3-blue-hover: #114E6A; /* A row's hover surface. Derivation: --tdm3-sky-tint mixed HALF WITH WHITE ((213+255)/2, (232+255)/2, (240+255)/2 -> #EAF4F8). Post-processing C, and it was a bug: --tdm3-table-row-hover pointed at --tdm3-sky-tint and was thereby LITERALLY the header bar, so a row under the mouse became a second header. This value has to differ from three things at once - white, the alternating row (#F5F5F5) and the header bar (#D5E8F0) - and the 50% mix is the step that maximizes the SMALLEST of those three distances. Measured in CIEDE2000 (the usable metric for near-neutral pale colors; WCAG contrast only says 1.02 to 1.13 here and distinguishes nothing): t=0.40 (#E6F1F6): 5.84 / 5.02 / 3.63 -> smallest 3.63 t=0.50 (#EAF4F8): 5.12 / 4.46 / 4.39 -> smallest 4.39 <-- this one t=0.60 (#EEF6F9): 4.17 / 3.60 / 5.33 -> smallest 3.60 Reference for what counts as "enough": the alternating row differs from white by 2.01, and the application already carries that distinction today. All three distances above are more than double that. */ --tdm3-sky-tint-light: #EAF4F8; /* Text neutrals. branding.md says black (#000); softened to the black Bootstrap 4 already gives the app today, so the migration doesn't shift every paragraph's color. Deliberate deviation. */ --tdm3-text: #212529; /* 15.43:1 on white */ --tdm3-text-subtle: #495057; /* 8.18:1 — secondary text */ --tdm3-text-muted: #6C757D; /* 4.69:1 — AA floor: white only and captions only, never smaller than --tdm3-font-size-sm */ /* Text of a DISABLED control. 3.05:1 on white, and that is deliberately below the AA threshold: disabled components are explicitly exempted in WCAG 1.4.3, and "greyer than ordinary text" is exactly what it has to say. Where it comes from: until P4 this was the only hex value in the theme source kendo-tdm3.scss that was NOT a token copy ($disabled-text) and therefore a named exception in the guard test. The value is the Kendo swatch's own and stays because it is DARKER than the theme default $gray-500 (#adb5bd, 2.32:1) and therefore reads better. Now that it's a token, the exception is gone. */ --tdm3-text-disabled: #8F8F8F; /* == Semantic aliases — use THESE in component CSS ====================== */ --tdm3-color-heading: var(--tdm3-navy); --tdm3-color-link: var(--tdm3-blue); --tdm3-color-link-hover: var(--tdm3-blue-hover); --tdm3-color-primary: var(--tdm3-blue); --tdm3-color-primary-hover: var(--tdm3-blue-hover); --tdm3-color-primary-contrast: #FFFFFF; /* 6.94:1 on primary */ /* Focus indicator: --tdm3-blue, because --tdm3-sky does not reach the 3:1 for non-text contrast (2.25:1). */ --tdm3-color-focus: var(--tdm3-blue); --tdm3-color-success: var(--tdm3-green); --tdm3-color-success-bg: var(--tdm3-green-tint); --tdm3-color-warning: var(--tdm3-orange-text); --tdm3-color-warning-accent: var(--tdm3-orange); --tdm3-color-warning-bg: var(--tdm3-orange-tint); --tdm3-color-danger: var(--tdm3-red); --tdm3-color-danger-bg: var(--tdm3-red-tint); --tdm3-color-info: var(--tdm3-blue); --tdm3-color-info-bg: var(--tdm3-sky-tint); --tdm3-color-neutral: var(--tdm3-text-subtle); --tdm3-color-neutral-bg: var(--tdm3-gray-200); --tdm3-surface: #FFFFFF; --tdm3-surface-muted: var(--tdm3-gray-100); --tdm3-surface-section: var(--tdm3-gray-200); /* The surface of "here's the mouse" — a grid row, a submenu item, an item in the vnav side nav. One name for all three, so pointing says the same thing everywhere; --tdm3-table-row-hover below is the same value under the name the table language uses. */ --tdm3-surface-hover: var(--tdm3-sky-tint-light); --tdm3-divider: var(--tdm3-gray-200); /* The border of an operable component, as opposed to --tdm3-border for a separation between two surfaces. Not a new color: the same value as --tdm3-text-muted, here under a second name because the role is a different one. Needed since post-processing A: --tdm3-border (#CCC) reaches 1.61:1 against white and 1.47:1 against --tdm3-surface-muted, both well under the 3:1 that WCAG 1.4.11 asks for the boundary of an operable component - a button with that border read as text. This one reaches 4.69:1 on white, 4.30:1 on --tdm3-surface-muted and 3.83:1 on --tdm3-surface-section. As a border only: as TEXT, 4.30:1 on a tinted surface stays under the AA threshold (see components.md). */ --tdm3-border-strong: var(--tdm3-text-muted); /* The border of an INPUT FIELD. Third name for the same value, and for the same reason as --tdm3-border-strong above: the role is a different one, and a role that carries its own name is a role that can later be moved separately. Post-processing D thereby resolves the issue post-processing B measured and the owner parked at the time. What a field carried until then, all three well under the 3:1 that WCAG 1.4.11 asks for the boundary of an operable component: .tdm3-input --tdm3-border #CCCCCC 1.61:1 on white .k-textbox theme default #CED4DA 1.49:1 on white select.k-dropdown button palette #E8E8E8 1.23:1 on white This value reaches, on the four surfaces a field in this application actually sits on: 4.69:1 on white, 4.30:1 on --tdm3-surface-muted, 3.83:1 on --tdm3-surface-section and 4.20:1 on --tdm3-surface-hover. WHY NO LIGHTER INTERMEDIATE VALUE, because that was the fair question: a form full of fields carries this border dozens of times and 4.69 is a lot. It was worked out and it doesn't exist. The lightest value that still reaches 3:1 on white is ~#888F94 (3.28), and that drops to 2.68 on --tdm3-surface-section and to 2.94 on the hover tint - below the standard on exactly the tinted surfaces a field also sits on. Only around #7A8288 does it work everywhere (3.91 / 3.58 / 3.19 / 3.50), and even then with 0.19 margin on the tightest surface. A new hex with that margin meets the standard on paper; #6C757D meets it with room to spare. And it's not an invented color. The theme computes its own field border as `contrast-wcag($input-bg, $gray-400, $gray-600)`: on a light field $gray-400 wins (#CED4DA, the 1.49 above), on a dark field $gray-600 - and $gray-600 IS #6C757D. This is the theme formula's other branch, not a value alongside it. Equal to the button border, so field and button share one boundary (components.md, Forms). */ --tdm3-border-field: var(--tdm3-border-strong); /* == Navy scale — the steps above the bar ================================ */ /* [derivation] The top bar is the only dark surface in the application, and it needs the same steps the light side already has in --tdm3-gray-100/200: a surface for "here's the mouse", a line, a border. These values ARE white over navy, but they sit here as hex and not as rgba, and that is a deliberate choice. An rgba is not a color until you know what it sits on; the contrast figure next to it always applies to the composited value, and that would then sit nowhere. The bar is moreover always --tdm3-navy, so the composition is a constant. Worked out and measured instead of left to the browser - after which every step has a name, just like the rest of the palette. The opacity each step comes from sits next to it, so the series stays traceable if a step ever needs to be added. Contrast is measured against --tdm3-navy itself. */ --tdm3-navy-100: #263E54; /* white 10% — the surface under the mouse. 1.36:1 */ --tdm3-navy-200: #394F63; /* white 18% — separator, and the surface behind the user's initials. 1.77:1 */ --tdm3-navy-300: #43576B; /* white 22% — the rail under the items. 2.01:1; decoration, see --tdm3-topbar-rail */ --tdm3-navy-400: #627384; /* white 35% — the border of an operable component on the bar. 3.08:1, above the 3:1 WCAG 1.4.11 asks for it */ --tdm3-navy-text: #DDE1E4; /* white 86% — text that carries no emphasis. 11.42:1, well above the AA threshold of 4.5. Not full white: the difference with the screen you're on has to read from the color and not from the bold alone */ --tdm3-sky-muted: #31779D; /* logo blue 55% — 3.04:1, the chip's border */ --tdm3-sky-wash: #163955; /* logo blue 12% — 1.25:1, the surface underneath */ /* == Top bar — the only place logo blue may carry ======================= */ /* Rule 1 of accessibility.md keeps --tdm3-sky (2.25:1 on white) and --tdm3-lime (1.69:1) out of every carrying role. That measurement is AGAINST WHITE. The top bar sits on navy, and there those same two colors measure 6.68:1 and 8.90:1 — well above the 4.5 for text and the 3 for non-text. This block exists to write down that exception once instead of justifying it line by line, and to bound it: these tokens apply ONLY within .tdm3-topbar. Outside the bar, rule 1 still stands. */ --tdm3-topbar-bg: var(--tdm3-navy); --tdm3-topbar-height: 40px; /* was 35px, the height Kendo's own padding gave it */ --tdm3-topbar-text: var(--tdm3-navy-text); --tdm3-topbar-text-strong: var(--tdm3-color-primary-contrast); /* 15.02:1 */ /* The rail under the items. Decoration, not state: what says "you are here" is the dot, which sits below. Hence 2.01:1 is allowed here — the same role and the same paleness as the line in .tdm3-vnav, which is --tdm3-border on --tdm3-surface-muted (1.10:1). */ --tdm3-topbar-rail: var(--tdm3-navy-300); /* A stop you're not on: open, so just a ring. */ --tdm3-topbar-station: var(--tdm3-navy-400); /* The stop you ARE on: filled logo blue, 6.68:1 against the bar. The current hover surface (--tdm3-color-primary on navy) reaches 2.16:1 and can't carry that role; that was the measurement that started this block. */ --tdm3-topbar-current: var(--tdm3-sky); /* The shadow under the bar. A value of its own and not --tdm3-shadow-sm, because that scale is tuned for LIGHT surfaces: under a navy bar on white, 8% opacity over 2px is invisible - rendered and placed next to a bar without a shadow, and there was no visible difference. Conversely the bar also can't get --tdm3-shadow either: that's a submenu's step, and the bar would then outweigh what it opens. This value sits between the two (18% over 6px) and is the lowest that still reads on this surface. */ --tdm3-topbar-shadow: 0 2px 6px rgba(14, 40, 65, 0.18); --tdm3-topbar-divider: var(--tdm3-navy-200); --tdm3-topbar-hover: var(--tdm3-navy-100); --tdm3-topbar-avatar-bg: var(--tdm3-navy-200); /* The tenant chip's border: a chip is a boundary and falls under the same 3:1. The text in it is full logo blue. */ --tdm3-topbar-chip-border: var(--tdm3-sky-muted); --tdm3-topbar-chip-hover: var(--tdm3-sky-wash); --tdm3-table-header-bg: var(--tdm3-sky-tint); /* [branding] */ --tdm3-table-header-text: var(--tdm3-navy); /* 11.89:1 on the tint */ --tdm3-table-row-alt: var(--tdm3-gray-100); /* A tint of its own since post-processing C, no longer --tdm3-sky-tint: that is the header bar above, and a row that takes on the header's color under the mouse reads as a second header. See --tdm3-sky-tint-light for the derivation and the three measured distances. --tdm3-text on it: 13.81:1. */ --tdm3-table-row-hover: var(--tdm3-surface-hover); --tdm3-table-border: var(--tdm3-border); /* == Typography ========================================================= */ /* Aptos is not a web font; no embed license has been established. Aptos where it's installed (Windows 11 / M365), then Segoe UI — what Kendo Metro already gives the app today. No @font-face. [derivation, decided in phase 0] "Aptos Display" is unreachable per weight/size without a web font; headings distinguish themselves with weight and color. */ --tdm3-font-family: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif; --tdm3-font-family-mono: ui-monospace, Consolas, "Courier New", monospace; /* The document scale (28/18/14/12/11 pt) is too large for a data-dense screen; the web scale compresses but keeps the ordering and the color hierarchy (H1/H2 navy/accent blue). H3 is green in branding.md; on the web, green = success semantics, so H3 follows navy. [derivation] A 14px base unifies the conflict that used to exist (site.css - now screens.css - set html to 14→16px, _Layout's body inline to 12px). */ --tdm3-font-size-root: 14px; --tdm3-font-size-sm: 0.857rem; /* 12px — captions, badges */ --tdm3-font-size-base: 1rem; /* 14px — body */ --tdm3-font-size-lg: 1.143rem; /* 16px — lead, H3 */ --tdm3-font-size-h2: 1.286rem; /* 18px */ --tdm3-font-size-h1: 1.571rem; /* 22px */ --tdm3-font-size-title: 1.714rem; /* 24px — page title */ --tdm3-font-weight-normal: 400; --tdm3-font-weight-medium: 500; --tdm3-font-weight-bold: 600; /* headings; 700 looks heavy in Segoe UI */ --tdm3-line-height: 1.5; --tdm3-line-height-tight: 1.35; /* == Spacing — 4px scale ================================================= */ --tdm3-space-1: 4px; --tdm3-space-2: 8px; --tdm3-space-3: 12px; --tdm3-space-4: 16px; --tdm3-space-5: 24px; --tdm3-space-6: 32px; --tdm3-space-7: 48px; /* == Radii ============================================================ */ --tdm3-radius: 4px; /* buttons, fields, badges */ --tdm3-radius-lg: 8px; /* cards, dialogs */ --tdm3-radius-pill: 999px; /* pill badges */ /* == Reading width ===================================================== */ /* The longest line of running text, for the help articles (.help-article in screens.css). In ch, so it follows the font size. Measured at the 14px body size: 543px, and a French help paragraph of 156 characters runs over two lines of it, about 78 characters a line. A ch is the width of "0", wider than the average letter, which is why 72ch holds more than 72 characters. */ --tdm3-prose-measure: 72ch; /* == Stations ========================================================= */ /* The dot with which this application draws a step in a life cycle. It sits in three places - an invoice's Verloop (.feedback-history), the bundle overview's filters (.tdm3-vnav .nav-step) and the top bar's sections - and used to sit there three times as a stray 7px and 1px. One size, because it's one figure: open means "a step" everywhere, filled means "here" everywhere. The COLOR still differs per spot, because each of the three sits on a different surface. */ --tdm3-station-size: 7px; --tdm3-station-ring: 1px; /* == Shadows — navy base instead of black, looks less dirty on white ==== */ --tdm3-shadow-sm: 0 1px 2px rgba(14, 40, 65, 0.08); --tdm3-shadow: 0 4px 12px rgba(14, 40, 65, 0.12); --tdm3-shadow-lg: 0 8px 24px rgba(14, 40, 65, 0.16); /* == Z-index — everything under Kendo's popup layer (~10000+) ========== */ --tdm3-z-sidebar: 100; --tdm3-z-sticky: 200; --tdm3-z-overlay: 900; }