/* Cascade layer order, declared before anything else in the file. This line is
* load-bearing, not decorative: an UNLAYERED declaration outranks every
* layered one, regardless of order or specificity. If the tokens below sat at
* the top level instead of inside @layer tokens, they would beat whatever
* @layer tenant declares no matter what a tenant stylesheet says — the
* per-tenant theming feature would load, parse, and silently do nothing.
* Naming the order here, with tenant last, is what lets a tenant override win.
*
* @layer tenant itself is never declared as a block anywhere in this
* repository — this order statement alone is what reserves its place. It is
* filled at runtime by GET /{handle}/theme.css (tenant_theme.render_theme_css),
* never by a shipped stylesheet, per the contract below.
*
* Contract for @layer tenant, wherever it is filled (moved here from the
* tenant.css this repository shipped as an empty, comment-only placeholder
* for that same layer, deleted once this file carried its documentation):
* - Exactly five custom properties may be overridden, no others:
* --brand-primary
* --brand-on-primary
* --brand-primary-hover
* --brand-primary-subtle
* --brand-focus
* - Their values arrive only from GET /{handle}/theme.css.
* - Nothing else in this repository writes into this layer. A second
* writer would race the tenant route for the same five properties, with
* no defined winner beyond source order.
*
* LOAD ORDER IS LOAD-BEARING. Cascade layer precedence is fixed by each
* layer's FIRST APPEARANCE, not by which stylesheet loads last or which rule
* is more specific. This file declares the order once, up front, right
* above: tenant named last on purpose, so it wins. That only holds if
* ``ing GET /{handle}/theme.css comes AFTER ``ing this file in
* the document. Load it first, or omit this order declaration, and
* @layer tenant gets registered before @layer tokens instead — its lower
* precedence then makes every tenant override lose to the platform default
* it was supposed to replace, with no error, no warning, just the wrong
* colour on screen. Whoever wires that `` must put it after this file's.
*/
@layer tokens, base, components, tenant;
/* src/kliper/adapters/web/static/css/tokens.css
*
* Layers 1 and 2. Nothing else in the repository declares a design token —
* there were four competing systems before this file existed, and a gate now
* asserts there is one.
*
* The theme dimension is declared from the start even where dark simply copies
* light. It is not a feature: the per-tenant override lands in @layer tenant,
* and if the theme lived only at :root the two would collide at equal
* specificity the day a dark palette arrives.
*/
@layer tokens {
/* ---- Layer 1: primitives. Raw values, no meaning attached. ---- */
:root {
--kliper-navy-900: #00223d; --kliper-navy-700: #004479; --kliper-navy-100: #eef6fc;
/* Colours are GitHub's (settled 2026-10-01): every value below mirrors
@primer/primitives 11.10.0 (functional/themes/light.css and dark.css, from
https://cdn.jsdelivr.net/npm/@primer/primitives/dist/css/functional/themes/).
tests/contract/test_primer_colour_tokens.py pins the table, so a drift
is visible. Names are the app's own; each carries the Primer token it
mirrors. */
--primer-gray-0: #ffffff; /* bgColor-default */
--primer-gray-100: #f6f8fa; /* bgColor-muted, bgColor-inset, control-bgColor-rest */
--primer-gray-150: #e6eaef; /* control-bgColor-active */
--primer-gray-200: #d1d9e0; /* borderColor-default */
--primer-gray-400: #818b98; /* borderColor-emphasis (3.45:1 on white) */
--primer-gray-600: #59636e; /* fgColor-muted */
--primer-gray-800: #25292e; /* bgColor-emphasis */
--primer-gray-900: #1f2328; /* fgColor-default */
--primer-blue-100: #ddf4ff; /* bgColor-accent-muted */
--primer-blue-300: #54aeff; /* base of borderColor-accent-muted */
--primer-blue-500: #0969da; /* fgColor-accent, bgColor-accent-emphasis, focus-outlineColor */
--primer-green-100: #dafbe1; /* bgColor-success-muted */
--primer-green-400: #4ac26b; /* base of borderColor-success-muted */
--primer-green-500: #1f883d; /* bgColor-success-emphasis */
--primer-green-600: #1a7f37; /* fgColor-success */
--primer-red-300: #ff8182; /* base of borderColor-danger-muted */
--primer-red-600: #d1242f; /* fgColor-danger */
/* Primer's red scale, no functional token: .gh-btn-danger-primary's solid fill. */
--primer-red-700: #a40e26;
--primer-yellow-100: #fff8c5; /* bgColor-attention-muted */
--primer-yellow-400: #d4a72c; /* base of borderColor-attention-muted */
--primer-yellow-700: #9a6700; /* fgColor-attention, bgColor-attention-emphasis */
--primer-purple-100: #fbefff; /* bgColor-done-muted */
--primer-purple-300: #c297ff; /* base of borderColor-done-muted */
--primer-purple-500: #8250df; /* fgColor-done */
/* A DEVIATION from Primer, for accessibility. underlineNav-borderColor-active
is #fd8c73 in light, 2.15:1 on --color-canvas-subtle, under the 3:1 that
WCAG 1.4.11 asks of a non-text indicator, and Primer ships no accessible
counterpart. Darkened at constant hue; 3.23:1 on --color-canvas-subtle,
the .gh-tabs-bar background this indicator sits on. Dark takes Primer's
own #f78166 (below). */
--primer-coral-700: #fc4922;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-full: 9999px;
/* Primer's control heights (Button, ActionMenu trigger), measured against
github.com 2026-09-25: small 28px, medium 32px, large 40px. */
--control-small-size: 28px; --control-medium-size: 32px; --control-large-size: 40px;
/* Primer's select indicator: github.com `.form-select` background-image,
read 2026-09-27 (github.com fill #586069; here Primer's fgColor-muted, #59636e light, #9198a1 dark). */
--control-select-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2359636e'%3E%3Cpath d='M4.427 9.427l3.396 3.396a.251.251 0 00.354 0l3.396-3.396A.25.25 0 0011.396 9H4.604a.25.25 0 00-.177.427zM4.423 6.47L7.82 3.072a.25.25 0 01.354 0L11.57 6.47a.25.25 0 01-.177.427H4.6a.25.25 0 01-.177-.427z'/%3E%3C/svg%3E");
--text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px;
--text-16: 16px; --text-20: 20px; --text-38: 38px;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--bp-sm: 480px; --bp-md: 768px; --bp-lg: 900px;
--z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500;
--duration-fast: 100ms; --duration-base: 150ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* Used only by legal_base.html's sticky header. Named like --radius-sm
rather than promoted to a semantic token, because nothing else needs
a shadow. */
--shadow-sm: 0 1px 2px 0 oklch(0.20 0.02 250 / 0.05);
}
/* ---- Layer 2: semantics. What a value MEANS. ---- */
:root {
/* The browser's own controls and pickers (a native select's list, a date
picker, scrollbars) follow the theme too; the data-theme blocks below
pin it when the reader chose one. */
color-scheme: light dark;
/* bgColor-default, bgColor-muted */
--color-canvas-default: var(--primer-gray-0);
--color-canvas-subtle: var(--primer-gray-100);
--color-canvas-overlay: var(--primer-gray-0); /* overlay-bgColor */
/* Split Primer-style (owner decision 2026-09-30): a CONTROL's boundary
(input, select, checkbox, toggle) is --color-control-border; every
decorative border (a list, a card, a divider, a box) is
--color-border-default, Primer's borderColor-default. One grey for both
made every list and card as heavy as an input.
A DEVIATION from Primer, for accessibility: Primer's own
control-borderColor-rest is borderColor-default (#d1d9e0 light, #3d444d
dark), 1.43:1 on white and 1.92:1 on #0d1117, under the 3:1 WCAG 1.4.11
sets for a component boundary. Primer's accessible counterpart is
borderColor-emphasis (#818b98 light, 3.45:1; #656c76 dark, 3.57:1), which
is what a control takes in both themes. */
--color-border-default: var(--primer-gray-200); /* borderColor-default */
--color-control-border: var(--primer-gray-400); /* borderColor-emphasis */
--color-fg-default: var(--primer-gray-900); /* fgColor-default */
--color-fg-muted: var(--primer-gray-600); /* fgColor-muted */
--color-fg-on-emphasis: var(--primer-gray-0); /* fgColor-onEmphasis: text and icons on an emphasis fill */
/* Deliberately NOT --color-fg-subtle, and not Primer's fgColor-disabled
either (#818b98 light, #656c76 dark: 3.45:1 and 3.57:1, under the 4.5:1
PRODUCT.md promises body text), because this role is set as text (an
optional-field label, a footer note, a disabled button). It takes
fgColor-muted, Primer's lightest text grey that passes. */
--color-fg-decorative: var(--primer-gray-600);
/* FIXED. Never themeable: a red-branded tenant would otherwise paint positive
sentiment red and the dashboard would lie in the client's own colours. */
--color-success-fg: var(--primer-green-600); /* fgColor-success */
--color-danger-fg: var(--primer-red-600); /* fgColor-danger */
/* Primer's semantic label roles (fg / subtle fill / muted border), so a
status or channel chip themes as one unit: bgColor-*-muted for the
subtle fill, borderColor-*-muted for the muted border, fgColor-* for
the text. */
--color-danger-subtle: #ffebe9; /* bgColor-danger-muted */
--color-success-subtle: var(--primer-green-100); /* bgColor-success-muted */
--color-attention-fg: var(--primer-yellow-700); /* fgColor-attention */
--color-accent-fg: var(--primer-blue-500); /* fgColor-accent */
--color-accent-subtle: var(--primer-blue-100); /* bgColor-accent-muted */
--color-accent-muted: #54aeff66; /* borderColor-accent-muted */
/* R-29 PR 3b: the description meter's three filled bands (Primer `*-emphasis`), each at least 3:1 on the
canvas in both themes (WCAG 1.4.11): light 4.9, 5.2, 4.2; dark 4.1, 4.1, 4.1. */
--color-attention-emphasis: var(--primer-yellow-700); /* bgColor-attention-emphasis */
--color-accent-emphasis: var(--primer-blue-500); /* bgColor-accent-emphasis */
--color-success-emphasis: var(--primer-green-500); /* bgColor-success-emphasis */
--color-done-fg: var(--primer-purple-500); /* fgColor-done */
--color-done-subtle: var(--primer-purple-100); /* bgColor-done-muted */
--color-done-muted: #c297ff66; /* borderColor-done-muted */
--color-attention-text: var(--primer-yellow-700); /* fgColor-attention */
--color-attention-subtle: var(--primer-yellow-100); /* bgColor-attention-muted */
--color-attention-muted: #d4a72c66; /* borderColor-attention-muted */
--color-success-muted: #4ac26b66; /* borderColor-success-muted */
--color-danger-muted: #ff818266; /* borderColor-danger-muted */
--color-link-fg: var(--primer-blue-500); /* fgColor-accent */
/* Primer's borderColor-muted: the translucent, LIGHTER pair of
borderColor-default (the wiremocks used it for table-row separators and
card meta boxes). */
--color-border-muted: #d1d9e0b3;
/* Non-text "this one is current" signal shared by the active-tab
underline and the active-dropdown-item bar: Primer's
underlineNav-borderColor-active, except for the accessible coral
deviation on --primer-coral-700 above. */
--color-indicator-active: var(--primer-coral-700);
/* THEMEABLE. Two stored, three derived server-side — see tenant_theme.py. */
--brand-primary: var(--kliper-navy-700);
--brand-on-primary: var(--primer-gray-0);
--brand-primary-hover: color-mix(in oklab, var(--brand-primary) 88%, black);
--brand-primary-subtle: var(--kliper-navy-100);
/* FIXED despite the name: Primer's focus-outlineColor (#0969da light,
#1f6feb dark) on every page, whatever the tenant's brand (owner decision
2026-09-30). A navy ring read as a selected state, and a tenant colour
made the ring a different thing on every tenant. tenant_theme.py no
longer sets it. */
--brand-focus: var(--primer-blue-500); /* focus-outlineColor */
/* GitHub's interaction fills: Primer's control-transparent-bgColor-hover,
bgColor-neutral-muted, control-transparent-bgColor-selected,
control-bgColor-hover and control-bgColor-active. The selected one is the
current item of a NavList (the configuration side nav). */
--color-action-hover: #818b981a;
--color-action-counter: #818b981f;
--color-action-selected: #818b9826;
--color-btn-hover: #eff2f5;
--color-btn-active: var(--primer-gray-150);
/* The header's initials disc and the brand drawn inline (partials/brand.html):
each has a dark value below, so neither vanishes on the dark header. */
--color-avatar-bg: var(--primer-gray-800); /* bgColor-emphasis */
--color-avatar-fg: var(--primer-gray-0); /* fgColor-onEmphasis */
--color-tooltip-bg: var(--primer-gray-800); /* bgColor-emphasis: the tooltip (TooltipV2) */
--color-avatar-ring: #1f232826; /* avatar-borderColor */
--color-brand-mark: var(--kliper-navy-700);
--color-brand-mark-fg: var(--primer-gray-0);
/* Primer's shadow-floating-small */
--shadow-overlay: 0 0 0 1px #d1d9e040,
0 6px 12px -3px #25292e0a,
0 6px 18px 0 #25292e1f;
--radius-overlay: 12px;
--ease-overlay: cubic-bezier(0.33, 1, 0.68, 1);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* @primer/primitives 11.10.0 functional/themes/dark.css. Same names as the
light block; the Primer token each mirrors is named in light's comments. */
--color-canvas-default: #0d1117; /* bgColor-default */
--color-canvas-subtle: #151b23; /* bgColor-muted */
--color-canvas-overlay: #151b23; /* overlay-bgColor */
--color-border-default: #3d444d; /* borderColor-default */
/* A deviation, for accessibility: borderColor-emphasis, not Primer's
control-borderColor-rest (#3d444d, 1.92:1); see light's note. */
--color-control-border: #656c76; /* borderColor-emphasis */
--color-border-muted: #3d444db3; /* borderColor-muted */
--color-fg-default: #f0f6fc; /* fgColor-default */
--color-fg-muted: #9198a1; /* fgColor-muted */
--color-fg-on-emphasis: #ffffff; /* fgColor-onEmphasis */
--color-fg-decorative: #9198a1; /* fgColor-muted, not fgColor-disabled (3.57:1) */
--color-action-hover: #656c7633; /* control-transparent-bgColor-hover */
--color-action-counter: #656c7633; /* bgColor-neutral-muted */
--color-action-selected: #656c7633; /* control-transparent-bgColor-selected */
--color-btn-hover: #262c36; /* control-bgColor-hover */
--color-btn-active: #2a313c; /* control-bgColor-active */
/* fgColor-accent (#4493f8, 5.59:1 on #151b23): navy is 1.73:1 there, so
the brand turns light. The focus ring is Primer's focus-outlineColor. */
--color-link-fg: #4493f8; /* fgColor-accent */
--brand-focus: #1f6feb; /* focus-outlineColor */
--color-indicator-active: #f78166; /* underlineNav-borderColor-active */
--control-select-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%239198a1'%3E%3Cpath d='M4.427 9.427l3.396 3.396a.251.251 0 00.354 0l3.396-3.396A.25.25 0 0011.396 9H4.604a.25.25 0 00-.177.427zM4.423 6.47L7.82 3.072a.25.25 0 01.354 0L11.57 6.47a.25.25 0 01-.177.427H4.6a.25.25 0 01-.177-.427z'/%3E%3C/svg%3E");
--color-avatar-bg: #9198a1; /* fgColor-muted: a light disc on the dark header */
--color-avatar-fg: #0d1117; /* bgColor-default */
--color-avatar-ring: #ffffff26; /* avatar-borderColor */
--color-tooltip-bg: #3d444d; /* bgColor-emphasis */
--color-brand-mark: #f0f6fc; /* fgColor-default */
--color-brand-mark-fg: #151b23; /* bgColor-muted */
/* Without the dark status and label roles the light fills (pale pink,
pale green) sat under near-white text at 1.05:1. */
--color-success-fg: #3fb950;
--color-success-subtle: #2ea04326;
--color-success-muted: #2ea04366;
--color-danger-fg: #f85149;
--color-danger-subtle: #f851491a;
--color-danger-muted: #f8514966;
--color-attention-fg: #d29922;
--color-attention-text: #d29922;
--color-attention-subtle: #bb800926;
--color-attention-muted: #bb800966;
--color-accent-fg: #4493f8;
--color-accent-subtle: #388bfd1a;
--color-accent-muted: #388bfd66;
--color-attention-emphasis: #9e6a03; --color-accent-emphasis: #1f6feb; --color-success-emphasis: #238636;
--color-done-fg: #ab7df8;
--color-done-subtle: #ab7df826;
--color-done-muted: #ab7df866;
/* Primer's shadow-floating-small, dark */
--shadow-overlay: 0 0 0 1px #3d444d,
0 6px 12px -3px #01040966,
0 6px 18px 0 #01040966;
}
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
color-scheme: dark;
/* @primer/primitives 11.10.0 functional/themes/dark.css. Same names as the
light block; the Primer token each mirrors is named in light's comments. */
--color-canvas-default: #0d1117; /* bgColor-default */
--color-canvas-subtle: #151b23; /* bgColor-muted */
--color-canvas-overlay: #151b23; /* overlay-bgColor */
--color-border-default: #3d444d; /* borderColor-default */
/* A deviation, for accessibility: borderColor-emphasis, not Primer's
control-borderColor-rest (#3d444d, 1.92:1); see light's note. */
--color-control-border: #656c76; /* borderColor-emphasis */
--color-border-muted: #3d444db3; /* borderColor-muted */
--color-fg-default: #f0f6fc; /* fgColor-default */
--color-fg-muted: #9198a1; /* fgColor-muted */
--color-fg-on-emphasis: #ffffff; /* fgColor-onEmphasis */
--color-fg-decorative: #9198a1; /* fgColor-muted, not fgColor-disabled (3.57:1) */
--color-action-hover: #656c7633; /* control-transparent-bgColor-hover */
--color-action-counter: #656c7633; /* bgColor-neutral-muted */
--color-action-selected: #656c7633; /* control-transparent-bgColor-selected */
--color-btn-hover: #262c36; /* control-bgColor-hover */
--color-btn-active: #2a313c; /* control-bgColor-active */
/* fgColor-accent (#4493f8, 5.59:1 on #151b23): navy is 1.73:1 there, so
the brand turns light. The focus ring is Primer's focus-outlineColor. */
--color-link-fg: #4493f8; /* fgColor-accent */
--brand-focus: #1f6feb; /* focus-outlineColor */
--color-indicator-active: #f78166; /* underlineNav-borderColor-active */
--control-select-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%239198a1'%3E%3Cpath d='M4.427 9.427l3.396 3.396a.251.251 0 00.354 0l3.396-3.396A.25.25 0 0011.396 9H4.604a.25.25 0 00-.177.427zM4.423 6.47L7.82 3.072a.25.25 0 01.354 0L11.57 6.47a.25.25 0 01-.177.427H4.6a.25.25 0 01-.177-.427z'/%3E%3C/svg%3E");
--color-avatar-bg: #9198a1; /* fgColor-muted: a light disc on the dark header */
--color-avatar-fg: #0d1117; /* bgColor-default */
--color-avatar-ring: #ffffff26; /* avatar-borderColor */
--color-tooltip-bg: #3d444d; /* bgColor-emphasis */
--color-brand-mark: #f0f6fc; /* fgColor-default */
--color-brand-mark-fg: #151b23; /* bgColor-muted */
/* Without the dark status and label roles the light fills (pale pink,
pale green) sat under near-white text at 1.05:1. */
--color-success-fg: #3fb950;
--color-success-subtle: #2ea04326;
--color-success-muted: #2ea04366;
--color-danger-fg: #f85149;
--color-danger-subtle: #f851491a;
--color-danger-muted: #f8514966;
--color-attention-fg: #d29922;
--color-attention-text: #d29922;
--color-attention-subtle: #bb800926;
--color-attention-muted: #bb800966;
--color-accent-fg: #4493f8;
--color-accent-subtle: #388bfd1a;
--color-accent-muted: #388bfd66;
--color-attention-emphasis: #9e6a03; --color-accent-emphasis: #1f6feb; --color-success-emphasis: #238636;
--color-done-fg: #ab7df8;
--color-done-subtle: #ab7df826;
--color-done-muted: #ab7df866;
/* Primer's shadow-floating-small, dark */
--shadow-overlay: 0 0 0 1px #3d444d,
0 6px 12px -3px #01040966,
0 6px 18px 0 #01040966;
}
}