/* * Kendo Theme Bridge (TOK-28 rewrite, 2026-07-08) * Maps STM design-system tokens to the Telerik/Kendo CSS custom properties * that ACTUALLY EXIST in kendo-theme-default as shipped with * Telerik.UI.for.Blazor 14.x (320 vars in dist/all.css — source-audited). * Load AFTER the base Kendo theme CSS and AFTER stm-light.css (or brand variant). * * Every `--kendo-*` name set here is asserted to exist in the vendor dist by * scripts/check-kendo-bridge-targets.mjs (npm run check:kendobridge, wired * into validate) — a vendor upgrade that renames variables fails the check * instead of silently going inert. That is exactly how the pre-rewrite bridge * rotted: `--kendo-box-shadow-depth-*`, `--kendo-series-a..f`, plain * `--kendo-color-on-surface`, focus hooks, and EVERY per-component block * (`--kendo-grid-*`, `--kendo-scheduler-*`, …) bound to nothing — per-component * knobs are compile-time SCSS variables, never emitted as custom properties. * * Deliberately NOT mapped (vendor defaults kept): * - --kendo-spacing-0..24: both scales are 4px-based, so mapping would be * an identity transform; leaving them also avoids re-layout risk. * - --kendo-duration-* (18 fuzzy names) and --kendo-transition-* presets: * no faithful correspondence to our 6 durations; wrong speed mappings * read as jank. Easings map 1:1 below. * - ramp micro-steps (X-subtle-hover/active for status hues, series * bold/subtle variants): v14 derives them from the bases we set via CSS * relative colors, so overriding the base re-derives the family. */ :root { /* ── Primary ramp ── */ --kendo-color-primary: var(--stm-color-primary); --kendo-color-primary-hover: var(--stm-color-primaryHover); --kendo-color-primary-active: var(--stm-color-primaryActive); --kendo-color-primary-emphasis: var(--stm-color-primaryEmphasis); --kendo-color-on-primary: var(--stm-color-onPrimary); --kendo-color-primary-subtle: var(--stm-color-primarySubtle); --kendo-color-primary-subtle-hover: var(--stm-color-primarySubtleHover); --kendo-color-primary-subtle-active: var(--stm-color-primarySubtleActive); --kendo-color-primary-on-subtle: var(--stm-color-primary); --kendo-color-primary-on-surface: var(--stm-color-primary); /* ── Secondary ramp (tertiary aliases to it below — STM has no third accent role; branded-neutral beats vendor-default purple) ── */ --kendo-color-secondary: var(--stm-color-neutral); --kendo-color-secondary-hover: var(--stm-color-neutralHover); --kendo-color-secondary-active: var(--stm-color-neutralActive); --kendo-color-tertiary: var(--stm-color-neutral); --kendo-color-tertiary-hover: var(--stm-color-neutralHover); --kendo-color-tertiary-active: var(--stm-color-neutralActive); /* ── Status ramps — bases + the steps STM tokenizes ── */ --kendo-color-error: var(--stm-color-error); --kendo-color-error-hover: var(--stm-color-errorHover); --kendo-color-error-active: var(--stm-color-errorActive); --kendo-color-error-emphasis: var(--stm-color-errorStrong); --kendo-color-error-subtle: var(--stm-color-errorSubtle); --kendo-color-success: var(--stm-color-success); --kendo-color-success-hover: var(--stm-color-successHover); --kendo-color-success-active: var(--stm-color-successActive); --kendo-color-success-emphasis: var(--stm-color-successStrong); --kendo-color-success-subtle: var(--stm-color-successSubtle); --kendo-color-warning: var(--stm-color-warning); --kendo-color-warning-hover: var(--stm-color-warningHover); --kendo-color-warning-active: var(--stm-color-warningActive); --kendo-color-warning-emphasis: var(--stm-color-warningStrong); --kendo-color-warning-subtle: var(--stm-color-warningSubtle); --kendo-color-info: var(--stm-color-info); --kendo-color-info-hover: var(--stm-color-infoHover); --kendo-color-info-active: var(--stm-color-infoActive); --kendo-color-info-emphasis: var(--stm-color-infoStrong); --kendo-color-info-subtle: var(--stm-color-infoSubtle); /* ── Surfaces / neutrals ── */ --kendo-color-app-surface: var(--stm-color-pageBackground); --kendo-color-on-app-surface: var(--stm-color-onSurface); --kendo-color-surface: var(--stm-color-surface); --kendo-color-surface-alt: var(--stm-color-surfaceVariant); --kendo-color-subtle: var(--stm-color-surfaceVariant); --kendo-color-border: var(--stm-color-outline); --kendo-color-border-alt: var(--stm-color-outlineVariant); /* base = the neutral control ramp (buttons at rest, chips, headers) */ --kendo-color-base: var(--stm-color-surfaceContainer); --kendo-color-base-hover: var(--stm-color-surfaceContainerHover); --kendo-color-base-active: var(--stm-color-surfaceContainerActive); --kendo-color-base-subtle: var(--stm-color-surfaceVariant); --kendo-color-on-base: var(--stm-color-onSurface); --kendo-color-base-on-surface: var(--stm-color-onSurface); --kendo-color-base-on-subtle: var(--stm-color-onSurface); /* inverse = dark chrome on light mode (tooltips, dark pills). STM has no dedicated inverse ramp; onSurface (near-black) is the faithful anchor. */ --kendo-color-inverse: var(--stm-color-onSurface); --kendo-color-on-inverse: var(--stm-color-surface); /* ── Typography ── */ --kendo-font-family: var(--stm-typography-body-font-family); --kendo-font-family-monospace: var(--stm-typography-code-font-family); --kendo-font-size: var(--stm-typography-body-font-size); --kendo-font-size-sm: var(--stm-typography-bodySmall-font-size); --kendo-font-size-lg: var(--stm-typography-bodyLarge-font-size); --kendo-font-weight: var(--stm-typography-weight-regular); --kendo-font-weight-normal: var(--stm-typography-weight-regular); --kendo-font-weight-medium: var(--stm-typography-weight-medium); /* semibold + bold both ride the brand bold — retur's Geist has no 700 face */ --kendo-font-weight-semibold: var(--stm-typography-weight-bold); --kendo-font-weight-bold: var(--stm-typography-weight-bold); --kendo-line-height: var(--stm-typography-body-line-height); /* ── Letter spacing (TOK-10 scale; only exact steps mapped) ── */ --kendo-letter-spacing: var(--stm-typography-letterSpacing-normal); --kendo-letter-spacing-normal: var(--stm-typography-letterSpacing-normal); --kendo-letter-spacing-tight: var(--stm-typography-letterSpacing-tight); --kendo-letter-spacing-wide: var(--stm-typography-letterSpacing-wide); --kendo-letter-spacing-wider: var(--stm-typography-letterSpacing-wider); /* ── Border radius ── */ --kendo-border-radius-base: var(--stm-radius-md); --kendo-border-radius-sm: var(--stm-radius-sm); --kendo-border-radius-md: var(--stm-radius-md); --kendo-border-radius-lg: var(--stm-radius-lg); /* ── Elevation (v14 names; 5 maps to our ceiling so nothing floats above the STM scale) ── */ --kendo-elevation-1: var(--stm-elevation-level-001); --kendo-elevation-2: var(--stm-elevation-level-002); --kendo-elevation-3: var(--stm-elevation-level-003); --kendo-elevation-4: var(--stm-elevation-level-004); --kendo-elevation-5: var(--stm-elevation-level-004); /* ── Motion easings (TOK-15; durations deliberately unmapped) ── */ --kendo-easing-standard: var(--stm-motion-easing-standard); --kendo-easing-decelerate: var(--stm-motion-easing-decelerate); --kendo-easing-accelerate: var(--stm-motion-easing-accelerate); --kendo-easing-sharp: var(--stm-motion-easing-sharp); /* ── Disabled (TOK-13 core trio + the numeric opacity) ── */ --kendo-disabled-bg: var(--stm-color-disabledBackground); --kendo-disabled-text: var(--stm-color-disabledText); --kendo-disabled-border: var(--stm-color-disabledBorder); --kendo-disabled-opacity: var(--stm-opacity-disabled); /* ── Dataviz series (TOK-19) — REAL v14 names. color-series-a..f drive the modern palette (bold/subtle variants derive from these bases); chart-series-1..8 cover the classic chart engine. 9..30 stay vendor. ── */ --kendo-color-series-a: var(--stm-chart-series1); --kendo-color-series-b: var(--stm-chart-series2); --kendo-color-series-c: var(--stm-chart-series3); --kendo-color-series-d: var(--stm-chart-series4); --kendo-color-series-e: var(--stm-chart-series5); --kendo-color-series-f: var(--stm-chart-series6); --kendo-chart-series-1: var(--stm-chart-series1); --kendo-chart-series-2: var(--stm-chart-series2); --kendo-chart-series-3: var(--stm-chart-series3); --kendo-chart-series-4: var(--stm-chart-series4); --kendo-chart-series-5: var(--stm-chart-series5); --kendo-chart-series-6: var(--stm-chart-series6); --kendo-chart-series-7: var(--stm-chart-series7); --kendo-chart-series-8: var(--stm-chart-series8); /* ── Chart chrome (real names: -lines, not -gridlines) ── */ --kendo-chart-bg: var(--stm-color-surface); --kendo-chart-text: var(--stm-color-onSurface); --kendo-chart-major-lines: var(--stm-color-outlineVariant); --kendo-chart-minor-lines: var(--stm-color-surfaceVariant); } /* Per-component variable blocks (grid/scheduler/gantt/pivotgrid/filemanager/ * treeview) were DELETED in the TOK-28 rewrite: those knobs are compile-time * SCSS variables in kendo-themes — the dist ships zero --kendo-grid-* etc., so * setting them bound to nothing. Component-level theming happens through the * global ramps above, wrapper scoped CSS, or (if ever needed) a custom SCSS * theme build. See spec/library-scan-2026-07.md §TOK-28. */ /* Reduced motion (A11Y-17, ADR-016) — Telerik's modal/popup reveal animations * (Window/Dialog open, dropdown/menu/calendar slide-in) live in vendor CSS that * STM wrapper components cannot reach with a per-component guard. Neutralize the * spatial motion here, at the Telerik integration layer, for users who request * reduced motion. Durations go near-zero rather than `none` so any vendor * transitionend handler still fires. */ @media (prefers-reduced-motion: reduce) { .k-animation-container, .k-window, .k-dialog, .k-popup, .k-child-animation-container { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Opt-in subtle grid — `stm-grid--subtle` on a TelerikGrid's Class ───────── * Mirrors the React StmDataGrid gridLines="subtle" default (spec/data-grid.md §5): * no outer border, no vertical cell borders, no zebra striping, faint row * dividers only. Owned HERE (the vendor seam) so screens stop re-copying the * ::deep block — kendo-themes has already renamed the alt-row class once * (.k-alt → .k-table-alt-row); when it renames again, patch this one place. */ .k-grid.stm-grid--subtle { border-color: transparent; } .k-grid.stm-grid--subtle .k-grid-header, .k-grid.stm-grid--subtle .k-grid-header-wrap { background-color: transparent; } .k-grid.stm-grid--subtle th, .k-grid.stm-grid--subtle td { border-right-color: transparent; border-left-color: transparent; } .k-grid.stm-grid--subtle td { border-bottom-color: var(--stm-dataGrid-cellBorderSubtle); } /* No zebra striping — opaque surface (not `transparent`): kendo paints the alt * row via its own background var. Covers both the legacy and current class. */ .k-grid.stm-grid--subtle .k-table-row.k-alt, .k-grid.stm-grid--subtle .k-table-row.k-alt > td, .k-grid.stm-grid--subtle .k-table-alt-row, .k-grid.stm-grid--subtle .k-table-alt-row > td { background-color: var(--stm-color-surface); } /* ── GDK-51: no internal grid scroll by default ─────────────────────────────── * Telerik hard-codes overflow-y: scroll on .k-grid-content (a permanently * reserved scrollbar gutter) and pads .k-grid-header to stay column-aligned — * on short grids that renders a phantom scrollbar plus a lone vertical line * above it in the header. STM policy (spec/data-grid.md §5): the page/modal * scroller owns scrolling; a grid only scrolls internally when the developer * sets an explicit height AND opts in with `stm-grid--scrollable` (which * keeps the vendor defaults, incl. the gutter, for stable column alignment). */ .k-grid:not(.stm-grid--scrollable) .k-grid-content { overflow-y: auto; } .k-grid:not(.stm-grid--scrollable) .k-grid-header { padding-inline-end: 0; }