/* ============================================================================ The variable bridge — TDM3 tokens onto the CSS variables of the two vendor stylesheets this application loads. ONE BRIDGE, TWO FAMILIES. Both Kendo 2026 and Bootstrap 5.3 put their entire palette, typography and sizing into `:root` as custom properties and read them back in their own rules. That turns brand color into a matter of remapping variables instead of overriding rules, and this file is the only place where that happens: --kendo-* the swatch Telerik ships (lib/kendo-ui//styles/bootstrap-main.css) --bs-* Bootstrap 5.3.8 THIS FILE CONTAINS ONLY :root, AND EVERY DECLARATION IS `--kendo-*` OR `--bs-*` with a value of exactly `var(--tdm3-*)`. No selectors, no literals, no fallbacks. Guarded by DesignSystemGuardTests.Every_declaration_in_the_bridge_maps_a_token. WHY ONE FILE AND NOT TWO (P7, the architecture choice). A `bootstrap-bridge.css` right after Bootstrap and a `kendo-bridge.css` right after the swatch looks symmetric, but the symmetry is false: a custom property works throughout the document regardless of where it's read, so only the order between the two DECLARATIONS matters. Measured: the swatch declares zero `--bs-*` (`grep -c -- "--bs-[a-z-]*:" bootstrap-main.css` -> 0), so there is nothing a Bootstrap bridge between Bootstrap and the swatch would need to intercept. That second file's position would therefore do nothing - and a file whose place in the chain doesn't matter, in a chain where place is the entire mechanism, reads as a lie. One file at one position, after both vendor files, where the place does carry weight. WHY NO FALLBACK IN THE var() CALL. `var(--tdm3-x, #156082)` would protect the bridge against a missing token, but doing so brings that hex back as a second source of truth - exactly what tokens.css abolishes. There is also nothing to protect against: tokens.css is the first link in the chain (conventions.md, load order), so a token read here exists. If it does drop out anyway, the declaration invalidates and falls back to whatever fallback the VENDOR itself carries in its own rule - the theme therefore stays intact, it just turns Bootstrap-blue again. What CANNOT be captured in a variable sits as a .k-*-rule in portal.css under "Kendo overrides". The full disposition of every tweak the old SASS theme carried - bridge variable, portal.css rule, or dropped - lives in docs/design-system/kendo-theming.md. ========================================================================= */ :root { /* ====================================================================== */ /* == KENDO — Telerik's swatch =========================================== */ /* ====================================================================== */ /* == Surfaces and text ================================================== */ /* Was $body-bg / $body-text. --kendo-color-on-app-surface is in 2026 the theme's heaviest-used variable (259 read sites): besides text, the theme also derives its row striping (4%) and its row hover (8%) from it with color-mix. See the grid rules in portal.css: those two washes are grey and carry no brand, which is why they sit there. */ --kendo-color-app-surface: var(--tdm3-surface); --kendo-color-on-app-surface: var(--tdm3-text); /* Was $subtle-text. Carries, among other things, an input field's prefix and suffix and the captions in widget chrome. */ --kendo-color-subtle: var(--tdm3-text-muted); /* Was $base-bg. In 2026 the "surface" plane: grid header, field affix, picker hover. The grid header gets its own brand tint in portal.css; this is the plane underneath it for all other chrome. */ --kendo-color-surface: var(--tdm3-surface-muted); /* Was $component-bg: the surface of a field, a popup, a card. */ --kendo-color-surface-alt: var(--tdm3-surface); /* The border of an OPERABLE component. This is the variable that in 2026 does what $input-border, $checkbox-border and $radio-border in the old theme had to do separately: measured across the swatch, exactly the field family reads it - .k-input (rest AND hover), .k-picker (hover), .k-checkbox and .k-radio - plus four widgets this application does not render (pivotgrid, taskboard, gantt, colorgradient). Why not --kendo-color-border (the other, lighter neutral): that one carries the grid's gridlines, a popup's border, the calendar and the pager - 181 read sites. Lifting it to #6C757D would darken every table line in the application. The same trade-off the old theme made between $input-border and $component-border, with the same outcome; --kendo-color-border therefore stays at the theme value. The standard behind it: WCAG 1.4.11 asks for 3:1 for the boundary of an operable component. The theme default rgba(33,37,41,.2) comes out on white at ~#d3d5d6, reaching 1.42:1. --tdm3-border-field reaches 4.69:1 on white and 4.30:1 on --tdm3-surface-muted. See the derivation next to that token. */ --kendo-color-border-alt: var(--tdm3-border-field); /* Text of a disabled control. In the old theme this was $disabled-text and was there the ONLY value without a token - a documented exception to the guard test. Since this step, --tdm3-text-disabled is a real token and that exception is gone. The theme default here is `unset`, so without this rule disabled text simply inherits its surroundings. */ --kendo-disabled-text: var(--tdm3-text-disabled); /* == Primary — the brand color ========================================== */ /* Was $primary + $selected-bg/$selected-text. In 2026 this one family colors the selected list items, the active button, the highlighted calendar day and every primary action. */ --kendo-color-primary: var(--tdm3-color-primary); --kendo-color-on-primary: var(--tdm3-color-primary-contrast); --kendo-color-primary-hover: var(--tdm3-color-primary-hover); /* The pressed step. The brand palette has two (accent blue and its hover), so the third is navy: darker than the hover, from the same blue, and full white on it reaches 15.02:1. Without this rule this would be #0a58ca - Bootstrap 5 blue on a brand surface. */ --kendo-color-primary-active: var(--tdm3-navy); /* The focus border of EVERY field in 2026 (.k-input, .k-picker, .k-checkbox, .k-radio all four read it). The theme sets it to the brand color at 40% opacity; on white that's ~#a1c0cd and 1.98:1, while the REST border above reaches 4.69:1 - so focus would make the field LIGHTER and invert the signal. The same measurement and the same outcome as in the old theme, where $input-focused-border was raised for exactly this reason. */ --kendo-color-primary-emphasis: var(--tdm3-color-focus); /* The pale brand surface (badge-subtle, messagebox, chip) and the text on it. There is one brand tint for "blue surface", so the three steps carry the same value: the alternative isn't a finer gradation but #cfe2ff, and that's Bootstrap blue. */ --kendo-color-primary-subtle: var(--tdm3-color-info-bg); --kendo-color-primary-subtle-hover: var(--tdm3-color-info-bg); --kendo-color-primary-subtle-active: var(--tdm3-color-info-bg); --kendo-color-primary-on-subtle: var(--tdm3-navy); --kendo-color-primary-on-surface: var(--tdm3-color-primary); /* == Secondary ========================================================= */ /* Was $secondary. */ --kendo-color-secondary: var(--tdm3-text-subtle); --kendo-color-on-secondary: var(--tdm3-color-primary-contrast); --kendo-color-secondary-hover: var(--tdm3-text); --kendo-color-secondary-active: var(--tdm3-text); --kendo-color-secondary-subtle: var(--tdm3-color-neutral-bg); --kendo-color-secondary-subtle-hover: var(--tdm3-color-neutral-bg); --kendo-color-secondary-subtle-active: var(--tdm3-color-neutral-bg); --kendo-color-secondary-on-subtle: var(--tdm3-text); --kendo-color-secondary-on-surface: var(--tdm3-text-subtle); --kendo-color-secondary-emphasis: var(--tdm3-text-subtle); /* == Base — a button's chrome =========================================== */ /* Was $button-bg / $button-text. */ --kendo-color-base: var(--tdm3-color-neutral-bg); --kendo-color-on-base: var(--tdm3-text); --kendo-color-base-on-surface: var(--tdm3-text); /* The pale base surface. --kendo-color-base-subtle-hover is in 2026 what $hovered-bg was in the old theme: the surface under the mouse in a SUBMENU, a filter list, the column menu and the page-size picker. That makes that chrome hover in the brand tint again instead of in grey - the same value the grid row carries in portal.css. */ --kendo-color-base-subtle: var(--tdm3-surface-muted); --kendo-color-base-subtle-hover: var(--tdm3-surface-hover); --kendo-color-base-subtle-active: var(--tdm3-color-info-bg); --kendo-color-base-on-subtle: var(--tdm3-text); /* == Semantic colors ===================================================== */ /* Was $info/$success/$warning/$error. The -hover and -active steps each carry the base value: the brand palette has one color per semantic, and the swatch value underneath is each time a member of the Bootstrap 5 family (#0dcaf0, #198754, #ffc107, #dc3545). No step is better than a wrong one. The -subtle pairs are the measured pairs from accessibility.md, the same ones the badges and the callouts carry. -emphasis is the accent border of a notification, a messagebox, a card and a chip. The theme sets it to the semantic color at 40% opacity; that translucency cannot be captured in a token, so it gets the full color. Without these four, the Bootstrap 5 family would sit there - measured on an info notification in the running app: rgba(13, 202, 240, .4). */ --kendo-color-info: var(--tdm3-sky); /* --tdm3-sky reaches 2.25:1 on white and therefore never carries text; navy on it reaches 6.68:1. Hence navy and not black or white. */ --kendo-color-on-info: var(--tdm3-navy); --kendo-color-info-hover: var(--tdm3-sky); --kendo-color-info-active: var(--tdm3-sky); --kendo-color-info-subtle: var(--tdm3-color-info-bg); --kendo-color-info-subtle-hover: var(--tdm3-color-info-bg); --kendo-color-info-subtle-active: var(--tdm3-color-info-bg); --kendo-color-info-on-subtle: var(--tdm3-navy); --kendo-color-info-on-surface: var(--tdm3-sky); --kendo-color-info-emphasis: var(--tdm3-sky); --kendo-color-success: var(--tdm3-color-success); --kendo-color-on-success: var(--tdm3-color-primary-contrast); --kendo-color-success-hover: var(--tdm3-color-success); --kendo-color-success-active: var(--tdm3-color-success); --kendo-color-success-subtle: var(--tdm3-color-success-bg); --kendo-color-success-subtle-hover: var(--tdm3-color-success-bg); --kendo-color-success-subtle-active: var(--tdm3-color-success-bg); --kendo-color-success-on-subtle: var(--tdm3-color-success); --kendo-color-success-on-surface: var(--tdm3-color-success); --kendo-color-success-emphasis: var(--tdm3-color-success); /* The accent carries the surface and the border; the TEXT on a warning is --tdm3-color-warning (the darkened orange-brown), because the accent itself only reaches 2.63:1 on its own tint. See accessibility.md, rule 3. */ --kendo-color-warning: var(--tdm3-color-warning-accent); --kendo-color-on-warning: var(--tdm3-text); --kendo-color-warning-hover: var(--tdm3-color-warning-accent); --kendo-color-warning-active: var(--tdm3-color-warning-accent); --kendo-color-warning-subtle: var(--tdm3-color-warning-bg); --kendo-color-warning-subtle-hover: var(--tdm3-color-warning-bg); --kendo-color-warning-subtle-active: var(--tdm3-color-warning-bg); --kendo-color-warning-on-subtle: var(--tdm3-color-warning); --kendo-color-warning-on-surface: var(--tdm3-color-warning); --kendo-color-warning-emphasis: var(--tdm3-color-warning-accent); --kendo-color-error: var(--tdm3-color-danger); --kendo-color-on-error: var(--tdm3-color-primary-contrast); --kendo-color-error-hover: var(--tdm3-color-danger); --kendo-color-error-active: var(--tdm3-color-danger); --kendo-color-error-subtle: var(--tdm3-color-danger-bg); --kendo-color-error-subtle-hover: var(--tdm3-color-danger-bg); --kendo-color-error-subtle-active: var(--tdm3-color-danger-bg); --kendo-color-error-on-subtle: var(--tdm3-color-danger); --kendo-color-error-on-surface: var(--tdm3-color-danger); --kendo-color-error-emphasis: var(--tdm3-color-danger); /* == Typography ========================================================== */ /* Was $font-family / $font-size. --kendo-font-size is in 2026 `1rem`, and the document's rem base has been --tdm3-font-size-root (14px, portal.css) since migration step 4 - so the widget chrome already matched. This rule says so too: it ties the size to the token instead of to a coincidental match. */ --kendo-font-family: var(--tdm3-font-family); --kendo-font-size: var(--tdm3-font-size-base); --kendo-font-size-sm: var(--tdm3-font-size-sm); --kendo-font-size-lg: var(--tdm3-font-size-lg); --kendo-line-height: var(--tdm3-line-height); /* 600, not the theme default 700: 700 looks heavy in Segoe UI (typography.md, "Scale"). */ --kendo-font-weight-bold: var(--tdm3-font-weight-bold); --kendo-font-weight-medium: var(--tdm3-font-weight-medium); --kendo-font-weight-normal: var(--tdm3-font-weight-normal); /* == Sizing =============================================================== */ /* Was $border-radius. --kendo-border-radius-md is the radius the theme gives to buttons, fields, popups and a window's title bar. */ --kendo-border-radius-md: var(--tdm3-radius); --kendo-border-radius-lg: var(--tdm3-radius-lg); /* ====================================================================== */ /* == BOOTSTRAP 5.3.8 =================================================== */ /* ====================================================================== */ /* The Kendo half above arrived in P4 and covers the widget chrome. This half arrived in P7 and covers what Bootstrap itself colors on elements that are NOT a widget: a , a caption, a `.text-muted`. This was P6's open item. Bootstrap 4 hard-coded those colors in its rules and the design system had stripped them out one by one; Bootstrap 5 sets them via `var(--bs-…)`, so on the jump they ALL CAME BACK - not as a regression in our CSS, but because the vendor suddenly supplied a value again where there no longer was one. Measured on the P5->P6 prints: 32 elements with `.text-muted` and 280 ``. Why through the VARIABLE and not through a rule of our own: `.text-muted` sets its color in Bootstrap 5 with `!important` (`color: var(--bs-secondary-color) !important`). Nothing beats that by load order or by specificity - an override would need a second `!important`, and the score is zero and stays zero. The variable sits UNDER that `!important`: remapping it changes what gets forced, not whether something gets forced. Order: Bootstrap declares these two in `:root, [data-bs-theme=light]` - one class heavy, just like the `:root` below - and this file loads later, so source order decides. There is no `data-bs-theme` on , so 5.3's dark branch does nothing here. */ /* Bootstrap's grey for secondary text. Was #6C757D in 4.1.3 and became `rgba(33, 37, 41, .75)` in 5.3.8 - that's the same text color at 75% opacity, which comes out on white to ~#565B5F and is therefore not a color that sits anywhere in tokens.css. --tdm3-text-muted IS #6C757D: this rule restores the value the application carried before P6, now from the token instead of from the vendor. Everything that hangs off it (15 read sites in bootstrap.css, all fifteen with the same role - "text that matters less"): `.text-muted`, `.text-body-secondary`, `caption`, `.figure-caption`, the disabled `.nav-link`, the `.breadcrumb` separator, the disabled pager button, `.list-group-item-action`, a `.toast` heading and the thumb of a disabled `.form-range`. The contrast standard behind it lives in accessibility.md and doesn't change: --tdm3-text-muted reaches 4.69:1 and may therefore only be used on white and never smaller than --tdm3-font-size-sm. */ --bs-secondary-color: var(--tdm3-text-muted); /* The color of a . Bootstrap colors it pink - #E83E8C in 4.1.3, #D63384 in 5.3.8 - and neither sits in the palette. That's not a new decision but the same one portal.css already carries: the `` element was removed from the views there "because it colors #E83E8C" (see .tdm3-mono), and what remained marks a reference with the FONT FAMILY and not with a color. The styleguide still does use , 280 times, and those were therefore the only ones left in vendor pink. Hence --tdm3-text: a code fragment reads as ordinary text, with tabular-nums and the mono family from .tdm3-mono as its only distinction. */ --bs-code-color: var(--tdm3-text); }