/* ========================================================================== kroener.digital - design tokens -------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH. Do not edit the copies under /resources/css/tokens.css - they are written by ./sync-tokens.sh. Every value below was lifted from the custom properties published by https://www.oliver-kroener.de/ and converted from oklch()/lab() to sRGB, so the login screen and the site render the same orange rather than two oranges that merely look related. The second half re-points PatternFly v5's global tokens at these values. That is the whole trick of this theme: Keycloak's login theme (keycloak.v2), the account console (keycloak.v3) and the admin console (keycloak.v2) are all built on PatternFly v5, and PatternFly declares its globals under ":where(:root)" - a zero-specificity selector. A plain ":root" block therefore outranks it without a single !important, and every component on every page follows along, including the React screens that have no FreeMarker template to override. ========================================================================== */ :root { /* --- brand ------------------------------------------------------------ */ /* oklch(.655 .2 40.23) on the site. Kept as channels so the alpha ramp below can be derived instead of hand-tuned. */ --kd-primary-rgb: 240 88 14; --kd-primary: #f0580e; --kd-primary-hover: #ff6f36; /* oklch(.71 .19 40.23) */ --kd-primary-active: #d73f00; /* oklch(.585 .2 40.23) */ --kd-primary-interactive: #ce3600; /* oklch(.56 .2 40.23) */ --kd-emphasis: #fb794a; /* oklch(.72 .17 40.23) */ --kd-primary-fg: #ffffff; --kd-primary-90: rgb(var(--kd-primary-rgb) / .90); --kd-primary-60: rgb(var(--kd-primary-rgb) / .60); --kd-primary-40: rgb(var(--kd-primary-rgb) / .40); --kd-primary-20: rgb(var(--kd-primary-rgb) / .20); --kd-primary-15: rgb(var(--kd-primary-rgb) / .15); --kd-primary-10: rgb(var(--kd-primary-rgb) / .10); --kd-primary-08: rgb(var(--kd-primary-rgb) / .08); --kd-primary-05: rgb(var(--kd-primary-rgb) / .05); /* --- neutrals --------------------------------------------------------- */ --kd-bg: #000000; --kd-surface: #111111; --kd-surface-light: #1a1a1a; --kd-surface-raised: #202020; --kd-fg: #ededed; --kd-muted: #bdc5cc; --kd-muted-dim: #787e83; --kd-on-light: #0a0a0a; --kd-border: rgb(255 255 255 / .10); --kd-border-strong: rgb(255 255 255 / .22); /* --- status ----------------------------------------------------------- */ /* Hue-matched to the brand ramp so an error state does not look like it came from a different product. */ --kd-danger: #ff5f52; --kd-danger-bg: rgb(255 95 82 / .12); --kd-success: #3fcf8e; --kd-success-bg: rgb(63 207 142 / .12); --kd-warning: #f5b545; --kd-warning-bg: rgb(245 181 69 / .12); --kd-info: #6ba8ff; --kd-info-bg: rgb(107 168 255 / .12); /* --- typography ------------------------------------------------------- */ /* Graphik is the site's licensed display face and is deliberately NOT shipped here. The stack degrades to Inter and then to the platform UI font. To make the login screen typographically identical to the site, drop the woff2 files into login/resources/fonts/ and uncomment the @font-face block in kroener.css - nothing else needs to change. */ --kd-font: "Graphik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kd-font-mono: "RedHatMono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --kd-tracking-tight: -.02em; --kd-tracking-wide: .04em; /* --- shape ------------------------------------------------------------ */ --kd-radius-sm: .25rem; --kd-radius-control: .75rem; --kd-radius-control-sm: .5rem; --kd-radius-input: .75rem; --kd-radius-card: 1.5rem; --kd-radius-surface: 2rem; --kd-radius-pill: 9999px; /* --- depth ------------------------------------------------------------ */ --kd-shadow-card: 0 10px 30px -18px rgb(0 0 0 / .85); --kd-shadow-panel: 0 12px 40px -14px rgb(0 0 0 / .70); --kd-shadow-button-hover: 0 6px 18px -4px rgb(var(--kd-primary-rgb) / .35); --kd-shadow-button-active: 0 2px 10px -2px rgb(var(--kd-primary-rgb) / .50); /* --- motion ----------------------------------------------------------- */ --kd-transition: 150ms cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== PatternFly v5 global remap -------------------------------------------------------------------------- Token names below were read out of the shipped common/resources/vendor/patternfly-v5/patternfly.min.css of Keycloak 26.7.2, not guessed - a misspelt custom property is a dead rule that fails silently and looks like "the theme did not load". Both :root and .pf-v5-theme-dark are targeted. This theme is dark-only (as the site is), and theme.properties sets darkMode=false so Keycloak never toggles the class; the .pf-v5-theme-dark block is belt-and-braces for the case where someone turns darkMode back on. ========================================================================== */ :root, .pf-v5-theme-dark { /* surfaces -------------------------------------------------------------- PF's "light-*" tokens are its light-mode surfaces and its "dark-*" tokens are the inverted ones it uses for masthead/sidebar. Both families are pointed at this palette so nothing stays white. */ --pf-v5-global--BackgroundColor--100: var(--kd-surface); --pf-v5-global--BackgroundColor--150: var(--kd-surface-light); --pf-v5-global--BackgroundColor--200: var(--kd-bg); --pf-v5-global--BackgroundColor--300: var(--kd-surface-light); --pf-v5-global--BackgroundColor--400: var(--kd-surface-raised); --pf-v5-global--BackgroundColor--light-100: var(--kd-surface); --pf-v5-global--BackgroundColor--light-200: var(--kd-bg); --pf-v5-global--BackgroundColor--light-300: var(--kd-surface-light); --pf-v5-global--BackgroundColor--dark-100: var(--kd-bg); --pf-v5-global--BackgroundColor--dark-200: var(--kd-surface); --pf-v5-global--BackgroundColor--dark-300: var(--kd-surface-light); --pf-v5-global--BackgroundColor--dark-400: var(--kd-surface-raised); --pf-v5-global--BackgroundColor--dark-transparent-100: rgb(0 0 0 / .62); --pf-v5-global--BackgroundColor--dark-transparent-200: rgb(0 0 0 / .40); /* text ------------------------------------------------------------------ */ --pf-v5-global--Color--100: var(--kd-fg); --pf-v5-global--Color--200: var(--kd-muted); --pf-v5-global--Color--300: var(--kd-muted); --pf-v5-global--Color--400: var(--kd-muted-dim); --pf-v5-global--Color--light-100: var(--kd-fg); --pf-v5-global--Color--light-200: var(--kd-muted); --pf-v5-global--Color--light-300: var(--kd-muted-dim); --pf-v5-global--Color--dark-100: var(--kd-fg); --pf-v5-global--Color--dark-200: var(--kd-muted); /* brand ----------------------------------------------------------------- */ --pf-v5-global--primary-color--100: var(--kd-primary); --pf-v5-global--primary-color--200: var(--kd-primary-active); --pf-v5-global--primary-color--300: var(--kd-primary-hover); --pf-v5-global--primary-color--400: var(--kd-emphasis); --pf-v5-global--primary-color--light-100: var(--kd-primary-hover); --pf-v5-global--primary-color--dark-100: var(--kd-primary); --pf-v5-global--active-color--100: var(--kd-primary); --pf-v5-global--active-color--200: var(--kd-primary-active); --pf-v5-global--active-color--300: var(--kd-primary-hover); --pf-v5-global--active-color--400: var(--kd-emphasis); --pf-v5-global--link--Color: var(--kd-primary-hover); --pf-v5-global--link--Color--hover: var(--kd-emphasis); --pf-v5-global--link--Color--visited: var(--kd-primary-hover); --pf-v5-global--link--Color--light: var(--kd-primary-hover); --pf-v5-global--link--Color--light--hover: var(--kd-emphasis); --pf-v5-global--link--Color--dark: var(--kd-primary); --pf-v5-global--link--Color--dark--hover: var(--kd-primary-hover); /* borders ---------------------------------------------------------------- */ --pf-v5-global--BorderColor--100: var(--kd-border); --pf-v5-global--BorderColor--200: var(--kd-border-strong); --pf-v5-global--BorderColor--300: var(--kd-border); --pf-v5-global--BorderColor--400: var(--kd-border-strong); --pf-v5-global--BorderColor--light-100: var(--kd-border); --pf-v5-global--BorderColor--dark-100: var(--kd-border-strong); /* Only --sm is remapped. It is the radius PF puts on buttons, inputs, cards and alerts (3px by default), so lifting it to 10px is what makes the whole UI read as soft-cornered like the site. --lg (30px) is PF's pill radius for chips and labels and is deliberately left alone: overriding it makes chips lose their pill shape. */ --pf-v5-global--BorderRadius--sm: 10px; /* status ---------------------------------------------------------------- */ --pf-v5-global--danger-color--100: var(--kd-danger); --pf-v5-global--danger-color--200: var(--kd-danger); --pf-v5-global--success-color--100: var(--kd-success); --pf-v5-global--success-color--200: var(--kd-success); --pf-v5-global--warning-color--100: var(--kd-warning); --pf-v5-global--info-color--100: var(--kd-info); --pf-v5-global--info-color--200: var(--kd-info); --pf-v5-global--disabled-color--100: var(--kd-muted-dim); --pf-v5-global--disabled-color--200: rgb(255 255 255 / .28); --pf-v5-global--disabled-color--300: rgb(255 255 255 / .08); --pf-v5-global--icon--Color--light: var(--kd-muted); --pf-v5-global--icon--Color--dark: var(--kd-fg); --pf-v5-global--icon--Color--light--light: var(--kd-muted); --pf-v5-global--icon--Color--light--dark: var(--kd-muted); --pf-v5-global--icon--Color--dark--light: var(--kd-fg); --pf-v5-global--icon--Color--dark--dark: var(--kd-fg); /* type ------------------------------------------------------------------ */ --pf-v5-global--FontFamily--text: var(--kd-font); --pf-v5-global--FontFamily--text--vf: var(--kd-font); --pf-v5-global--FontFamily--heading: var(--kd-font); --pf-v5-global--FontFamily--heading--vf: var(--kd-font); --pf-v5-global--FontFamily--monospace: var(--kd-font-mono); --pf-v5-global--FontFamily--monospace--vf: var(--kd-font-mono); /* depth ------------------------------------------------------------------ */ --pf-v5-global--BoxShadow--sm: 0 1px 2px 0 rgb(0 0 0 / .40); --pf-v5-global--BoxShadow--md: 0 4px 6px -1px rgb(0 0 0 / .50); --pf-v5-global--BoxShadow--lg: var(--kd-shadow-panel); --pf-v5-global--BoxShadow--xl: 0 20px 25px -5px rgb(0 0 0 / .70); --pf-v5-global--BackgroundColor--dark-transparent-100: rgb(0 0 0 / .62); color-scheme: dark; }