/* * ciraApps Platform — Kendo Theme Manager DROP-IN * ================================================================== * This file is the single, replaceable swatch layer that sits ON TOP * of the Kendo default theme (kendo-theme-default/all.css) shipped by * the Telerik.UI.for.Blazor NuGet package. * * ── HOW TO SWAP IN A REAL THEME ────────────────────────────────── * When a branded theme is exported from the Telerik **Kendo Theme * Manager** (a.k.a. Sass Theme Builder), that export is a single CSS * file that re-declares the `--kendo-*` custom properties (and, for a * full build, the compiled component rules). To adopt it: * * 1. Drop the exported CSS here, replacing the contents of THIS file * (keep the same file name/path so App.razor needs no change), OR * 2. Add the export as `_content/.../css/.css` and update the * single in ciraApps.Platform.Web/Components/App.razor. * * No component markup and no other CSS file needs to change — every * component styles itself from the semantic tokens in theme-tokens.css, * and those tokens are bridged to the `--kendo-*` variables below. * * The block below is a lightweight, hand-authored swatch that tunes the * stock Kendo default theme toward the CiraSync brand (blue primary, * neutral slate surfaces). Replace it wholesale with a Theme Manager * export at any time. */ :root { /* --- Primary / brand -------------------------------------------- Base #1b75bb taken from the Figma Dashboard mockup (Platform-Mockups, node 109:2). The mockup only showed the base color, so hover/active/ emphasis/subtle below are derived (same lightness offsets as the previous indigo ramp) — swap for exact values if Lip provides them. */ --kendo-color-primary: #1b75bb; --kendo-color-primary-hover: #165f98; --kendo-color-primary-active: #10466f; --kendo-color-primary-emphasis: #8bc3ee; --kendo-color-primary-subtle: #e9f3fc; --kendo-color-on-primary: #ffffff; /* FillMode="Flat" reads *-on-surface for text color — a different variable than the ones above, which is why Ghost/Danger/Success/Outline-Base render Kendo's stock demo colors unless this is bridged too. See kendo-theme-custom.css history: fixed once (2026-08-17), reverted with an unrelated session rollback the same day. Bridging all four on-surface variables, not just Primary, so this exact class of bug can't resurface one variant at a time again. */ --kendo-color-primary-on-surface: var(--kendo-color-primary); /* --- Tertiary / accent (teal) ------------------------------------- Kendo's third semantic color role — unused elsewhere in the app, so claimed for the accent teal from the Figma Dashboard mockup (node 109:2). Base/subtle are exact mockup values (the "Enterprise trial" badge and quick-link chip bg); hover/active/emphasis derived the same way as the primary ramp above. */ --kendo-color-tertiary: #27b898; --kendo-color-tertiary-hover: #20967f; --kendo-color-tertiary-active: #18705f; --kendo-color-tertiary-emphasis: #5fd6c8; --kendo-color-tertiary-subtle: #edfaf8; --kendo-color-on-tertiary: #ffffff; /* --- Secondary (dark CTA) ------------------------------------------ Repurposed for the "dark CTA" concept (near-black, high-contrast, full-width wizard CTAs) that previously lived only in a bespoke .platform-cta--dark CSS class. Values match --p-neutral-900/800 (theme-tokens.css) exactly, so PlatformButton Variant="Dark" renders identically to the retired hand-authored class. */ --kendo-color-secondary: #0f1d2a; --kendo-color-secondary-hover: #1e2d3b; --kendo-color-secondary-active: #1e2d3b; --kendo-color-on-secondary: #ffffff; /* --- Error / Success ------------------------------------------------ Bridged ahead of a real call site (Danger/Success button variants are predefined per Lip's request). Values match the --p-red and --p-green steps (theme-tokens.css) exactly. */ --kendo-color-error: #b91c1c; --kendo-color-error-hover: #ef4444; --kendo-color-error-subtle: #fef2f2; --kendo-color-error-on-surface: var(--kendo-color-error); --kendo-color-success: #047857; --kendo-color-success-hover: #10b981; --kendo-color-success-subtle: #ecfdf5; --kendo-color-success-on-surface: var(--kendo-color-success); /* --- Base surfaces & text --------------------------------------- on-app-surface and on-base repointed 2026-08-04 from the neutral-800-equivalent to the re-anchored neutral-900 (#0f1d2a in theme-tokens.css) — that's the step whose richness actually matches the Figma mockup's heading/body text (#122130), not just a hue tweak on the old 800 value. Both were updated together (they used to coincidentally share the same literal value) so native Kendo component text (e.g. the wizard's TelerikStepper labels) stays visually consistent with app-layer text. --kendo-color-border's rgba base also updated to the re-anchored neutral-900 RGB, keeping the translucent-neutral approach rather than switching to the mockup's solid blue-tinted border colors. */ --kendo-color-surface: #F5F8FD; --kendo-color-surface-alt: #ffffff; --kendo-color-base: #ffffff; --kendo-color-base-subtle: #e2e9f0; --kendo-color-on-base: #0f1d2a; --kendo-color-base-on-surface: var(--kendo-color-on-base); --kendo-color-on-app-surface: #0f1d2a; --kendo-color-border: rgba(15, 29, 42, 0.12); /* FillMode="Solid" ThemeColor="Base" (the default secondary/"Cancel" button): resting stays white/near-black/gray-outline via --kendo-color-base/-on-base/-border above — these two are the ones Kendo leaves unbridged by default, so hover/press fell back to its own stock grays instead of a deliberate one. */ --kendo-color-base-hover: #e2e9f0; --kendo-color-base-active: #cbd6e1; /* --- Typography ----------------------------------------------- */ --kendo-font-family: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --kendo-font-size: var(--font-size-base); /* --- Shape ---------------------------------------------------- */ --kendo-border-radius-md: 0.5rem; /* --- Icons ------------------------------------------------------ Kendo's default 1.5 is relative to each icon's 24x24 viewBox, so its physical thickness shrinks with the icon: 0.75px at xs (12px), 0.875px at sm (14px), 1.0px at md (16px) — all sub-1px, which anti-aliases into a washed-out line. Bumped uniformly to 2 (a flat 1.33x every step, so relative proportions between sizes are unchanged) per design review 2026-09-10 — a deliberate app-wide bolder icon style, not just a small-size-only patch. */ --kendo-icon-stroke-width: 2; }