/*
The brand layer: colour and type.
Linked after the Radzen theme, so these declarations win on source order. That is all it takes to
re-brand the whole component library: every Radzen theme declares its colours once, in a single
:root block, and derives ~1,600 component tokens from about twenty brand tokens through var().
Nothing outside that :root hard-codes the brand hue.
Layout still belongs in app.css, which owns neither colour nor type.
Structure: :root defines the app's own --rps-* tokens as aliases of whatever the chosen Radzen
theme ships - that is the "stock" palette, and it needs no block of its own. Each real palette is
one html[data-rps-palette="..."] block that overrides both the --rz-* brand tokens and the --rps-*
aliases; App.razor stamps the attribute from the RpsPalette cookie. Adding a palette means adding
a block here, not a new file and not a new .
A word on the lime ramp, because it is not free choice. #00DD00 is only 1.85:1 against white, so
it can never carry text or draw a line - it is a *fill*, and it needs near-black on top (10.7:1).
Radzen spends --rz-primary as both fill and ink (focus rings, floating labels, the active menu
item), so every ink use is redirected to --rz-primary-dark, a lime dark enough to read: 5.5:1 on
white and 4.7:1 on the selection tint. Keep that split if you edit these values.
*/
/* --- Type ----------------------------------------------------------------
One typeface for the whole app, under every theme. Switching theme in the picker should change
colour and component styling, not the words' shape.
Roboto rather than a downloaded font because Radzen already ships it: RobotoFlex.woff2 is inside
the package, a variable face carrying weights 100-1000, so this costs no new binary, no CDN and
no network. It is served from our own origin like any other static asset.
*/
/*
Radzen declares this face in its two material themes only. The other eight ask for
"Source Sans Pro" and would fall through to Segoe UI, so without this declaration the typeface
would change every time someone switched theme. Same file the package's own rule points at.
Root-absolute: url() resolves against the stylesheet's location, not .
*/
@font-face {
font-family: "Roboto";
src: url("/_content/Radzen.Blazor/fonts/RobotoFlex.woff2") format("woff2 supports variations"),
url("/_content/Radzen.Blazor/fonts/RobotoFlex.woff2") format("woff2-variations");
font-weight: 100 1000;
font-display: swap;
}
:root {
--rz-text-font-family: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
sans-serif;
}
/*
Radzen gates its body typography on `:root:has(.rz-layout) body`, so a page rendered through
EmptyLayout - the sign-in screen - gets no font-family at all and falls back to the browser's
serif. Its `body{margin:0}` is unconditional, which is why only the type looked wrong.
font-size stays out of this on purpose: Radzen's own rule supplies 14px on layout pages, and
leaving the sign-in screen at the browser's 16px keeps its inputs above the size that makes iOS
zoom on focus.
*/
body {
font-family: var(--rz-text-font-family);
color: var(--rz-text-color);
}
/* --- Colour --------------------------------------------------------------- */
:root {
--rps-brand: var(--rz-primary);
--rps-brand-ink: var(--rz-primary-dark);
--rps-brand-ink-strong: var(--rz-primary-darker);
--rps-on-brand: var(--rz-on-primary);
--rps-surface: var(--rz-base-background-color);
--rps-surface-muted: var(--rz-base-100);
--rps-ink: var(--rz-text-color);
--rps-ink-muted: var(--rz-text-secondary-color);
/* Semantic, not brand, so these are the same under every palette. Radzen's own
--rz-danger-darker is the same dark red in its light and dark themes, which is unreadable on
a dark surface, so the failure banner on the sign-in screen states both ends itself. */
--rps-danger-ink: #A62E25;
--rps-danger-surface: rgba(244, 67, 54, 0.12);
--rps-danger-edge: #F44336;
}
html[data-rps-theme$="-dark"] {
--rps-danger-ink: #FFB4AB;
--rps-danger-surface: rgba(244, 67, 54, 0.20);
}
/* --- White and lime green ----------------------------------------------- */
html[data-rps-palette="lime"] {
--rps-brand: #00DD00; /* fill only - 1.85:1 on white */
--rps-brand-ink: #0A7A0A; /* the same hue, dark enough for text: 5.5:1 on white */
--rps-brand-ink-strong: #055F05; /* 7.9:1 on white */
--rps-on-brand: #0A0A0A; /* 10.7:1 on the fill */
--rps-surface: #FFFFFF;
--rps-surface-muted: #F5F6F5;
--rps-ink: #1A1D1A;
--rps-ink-muted: #5C635C;
/* Radzen primary */
--rz-primary: var(--rps-brand);
--rz-primary-light: #33E633;
--rz-primary-lighter: rgba(0, 221, 0, 0.22); /* not 0.12: a 12% lime tint is 1.10:1 on white
and the selected grid row disappears */
--rz-primary-dark: var(--rps-brand-ink);
--rz-primary-darker: var(--rps-brand-ink-strong);
--rz-on-primary: var(--rps-on-brand);
--rz-on-primary-light: var(--rps-on-brand);
--rz-on-primary-lighter: var(--rps-brand-ink-strong); /* ink on the 22% tint: 6.7:1 */
--rz-on-primary-dark: #FFFFFF;
--rz-on-primary-darker: #FFFFFF;
/* Radzen secondary. One brand, so this is the dark lime rather than a second hue - it also
drives --rz-link-color, which has to be readable as text. */
--rz-secondary: var(--rps-brand-ink);
--rz-secondary-light: #0E8F0E;
--rz-secondary-lighter: rgba(10, 122, 10, 0.14);
--rz-secondary-dark: var(--rps-brand-ink-strong);
--rz-secondary-darker: #044504;
--rz-on-secondary: #FFFFFF;
--rz-on-secondary-light: #FFFFFF;
--rz-on-secondary-lighter: var(--rps-brand-ink-strong);
--rz-on-secondary-dark: #FFFFFF;
--rz-on-secondary-darker: #FFFFFF;
/* Ink uses of the primary, redirected off the fill */
--rz-outline-color: var(--rps-brand-ink);
--rz-border-focus: var(--rz-border-width) solid var(--rps-brand-ink);
--rz-input-focus-shadow: inset 0 0 0 1px var(--rps-brand-ink);
--rz-form-field-label-focus-color: var(--rps-brand-ink);
/* Header: white with a lime rule under it, matching the sign-in screen's top bar */
--rz-header-background-color: var(--rps-surface);
--rz-header-color: var(--rps-ink);
--rz-header-border: 3px solid var(--rps-brand);
}
/*
Dark themes reuse the same fill, but the ink limes above are tuned for white and vanish on a dark
surface, so they invert: light lime for text, near-black still on the fill. App.razor stamps
data-rps-theme with the resolved theme name, and every dark theme Radzen ships ends in "-dark".
*/
html[data-rps-palette="lime"][data-rps-theme$="-dark"] {
--rps-brand-ink: #4FE64F;
--rps-brand-ink-strong: #7CEE7C;
--rps-surface: #1E1E1E;
--rps-surface-muted: #262626;
--rps-ink: #ECECEC;
--rps-ink-muted: #A8AEA8;
--rz-primary-dark: #00B800;
--rz-primary-darker: #009400;
--rz-primary-lighter: rgba(0, 221, 0, 0.24);
--rz-on-primary-lighter: var(--rps-brand-ink);
--rz-on-primary-dark: var(--rps-on-brand);
--rz-on-primary-darker: var(--rps-on-brand);
--rz-secondary: var(--rps-brand-ink);
--rz-secondary-light: #7CEE7C;
--rz-secondary-dark: #33E633;
--rz-secondary-darker: #00DD00;
--rz-on-secondary: var(--rps-on-brand);
--rz-on-secondary-light: var(--rps-on-brand);
--rz-on-secondary-dark: var(--rps-on-brand);
--rz-on-secondary-darker: var(--rps-on-brand);
--rz-header-background-color: var(--rz-base-background-color);
--rz-header-color: var(--rz-text-color);
}
/*
Radzen ties the primary button's focus ring to --rz-primary itself rather than to
--rz-outline-color, which paints a lime ring on a lime button. This is the one place a variable
cannot reach.
*/
html[data-rps-palette="lime"] .rz-button.rz-primary:focus-visible,
html[data-rps-palette="lime"] .rz-button.rz-primary.rz-variant-flat:focus-visible,
html[data-rps-palette="lime"] .rz-chip-primary:focus-visible:not(.rz-state-disabled) {
outline-color: var(--rps-brand-ink);
}