/** * kol-opacity.css — Foreground opacity system (KOL tier) * * Single source of truth for the fg opacity scale. Consolidates what used to be * scattered across kol-color-simple.css and framework/app.css. * * Scale: 01, 02, 04, 08, 12, 16, 24, 32, 40, 48, 64, 80, 88, 96 (14 stops) * + 72 in the STANDARD tier only (2026-08-01) — 15 stops there, 14 * everywhere else. The exception is stated at the token itself. * * Tier pairs: * - Standard (foreground on primary surface — var(--kol-surface-on-primary)) * - Inverse (foreground on inverse surface — var(--kol-surface-on-inverse)) * * Layers: * - Tokens (--kol-fg-*, --kol-fg-inverse-*) for use in CSS rules * (pseudo-elements, animations, gradients, descendant selectors) * - Classes (.bg-fg-*, .text-fg-*, .border-fg-* + inverse + hover) for JSX * * Every color-mix expression uses `var(, currentColor)` — fallback is * load-bearing for SVG theming where the element's `color:` is the active paint. * * Semantic text roles live here too — EIGHT of them since 2026-08-01 * (subtle · meta · body · lede · strong · shout · scream · emphasis), each an * alias over one fg-* stop. `default` is a deprecated alias of `body`. */ /* Declared on the THEME selectors, not `:root` alone (0.52.0, nested-theme- * scope). A custom property resolves its var() where it is DECLARED and * descendants inherit the frozen result — a ramp declared only on :root bakes * the root's ink, so a subtree that flips --kol-surface-on-primary * (data-theme / .light / .dark on a div) kept the root's --kol-fg-*. * Re-declaring on the theme selectors re-resolves the ramp on the themed * element itself — the mechanism .bg-surface-inverse already uses. */ :root, :is([data-theme="light"], .light), :is([data-theme="dark"], .dark) { /* ============================================================================ * TOKENS — Standard tier (foreground on primary surface) * ============================================================================ */ --kol-fg-01: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); --kol-fg-02: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); --kol-fg-04: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); --kol-fg-08: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); --kol-fg-12: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); --kol-fg-16: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); --kol-fg-24: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); --kol-fg-32: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); --kol-fg-40: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); --kol-fg-48: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); --kol-fg-64: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); --kol-fg-72: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); /* 72 — THE ONE OFF-RAMP STOP (user ruling 2026-08-01). The scale is a * 14-stop signature and this makes it 15, deliberately and in ONE tier only: * the eight TEXT roles below needed a step between body (64) and strong (80) * for `lede`, and text chains exclusively through --kol-fg-*. The absolute * and inverse tiers below, and the whole --kol-oq-* family, do NOT get a 72: * they exist for fills and for theme-independent chrome, and neither has a * role asking for this step. If a FILL ever needs 72, that is the signal to * add it across all five families rather than widen this exception. */ --kol-fg-72: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); --kol-fg-80: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); --kol-fg-88: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); --kol-fg-96: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); /* ============================================================================ * TOKENS — Absolute tier (theme-independent black, fixed opacity stops) * ============================================================================ */ /* LIGHT ground — `ab` starts from white (see kol-opaque.css for the axis) */ --kol-fg-ab-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, transparent); --kol-fg-ab-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, transparent); --kol-fg-ab-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, transparent); --kol-fg-ab-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent); --kol-fg-ab-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, transparent); --kol-fg-ab-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, transparent); --kol-fg-ab-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, transparent); --kol-fg-ab-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, transparent); --kol-fg-ab-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); --kol-fg-ab-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, transparent); --kol-fg-ab-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, transparent); --kol-fg-ab-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, transparent); --kol-fg-ab-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, transparent); --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent); --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent); /* fg-ab-inverse — the CONTRASTING pure pole. Declared in this shared scope * as the light-ground value (black over a light well); the dark scopes below * override it to white. Its `fg-ab` twin above works the same way. */ --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent); --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent); --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent); --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent); --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent); --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent); --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent); --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent); --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent); --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent); --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent); --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent); --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent); --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent); --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent); /* ============================================================================ * TOKENS — Inverse tier (foreground on inverse surface) * ============================================================================ */ --kol-fg-inverse-01: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); --kol-fg-inverse-02: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); --kol-fg-inverse-04: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); --kol-fg-inverse-08: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); --kol-fg-inverse-12: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); --kol-fg-inverse-16: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); --kol-fg-inverse-24: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); --kol-fg-inverse-32: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); --kol-fg-inverse-40: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); --kol-fg-inverse-48: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); --kol-fg-inverse-64: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); --kol-fg-inverse-72: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 72%, transparent); --kol-fg-inverse-80: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); --kol-fg-inverse-88: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); --kol-fg-inverse-96: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); /* Semantic text roles map directly to fg-* primitives via the .text-* role * classes below — no intermediate alias tokens. */ } /* `ab` FLIPS TOWARD THE GROUND (user ruling 2026-08-30) — the same axis as * kol-opaque.css's `oq-ab-*`. In dark the ground is black, so a translucent * `ab` wash is black; in light it is white. `ab-inverse-*` is the opposite pole * in each theme, so it is the half that contrasts. */ :is([data-theme="dark"], .dark) { --kol-fg-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent); --kol-fg-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent); --kol-fg-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent); --kol-fg-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent); --kol-fg-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent); --kol-fg-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent); --kol-fg-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent); --kol-fg-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent); --kol-fg-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent); --kol-fg-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent); --kol-fg-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent); --kol-fg-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent); --kol-fg-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent); --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent); --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent); --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, transparent); --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, transparent); --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, transparent); --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent); --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, transparent); --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, transparent); --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, transparent); --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, transparent); --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, transparent); --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, transparent); --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, transparent); --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, transparent); --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent); --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { --kol-fg-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent); --kol-fg-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent); --kol-fg-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent); --kol-fg-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent); --kol-fg-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent); --kol-fg-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent); --kol-fg-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent); --kol-fg-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent); --kol-fg-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent); --kol-fg-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent); --kol-fg-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent); --kol-fg-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent); --kol-fg-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent); --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent); --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent); --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, transparent); --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, transparent); --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, transparent); --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent); --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, transparent); --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, transparent); --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, transparent); --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, transparent); --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, transparent); --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, transparent); --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, transparent); --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, transparent); --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent); --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent); } } /* ============================================================================== * CLASSES — Base (no stop, 100% opacity) * ============================================================================== */ .bg-fg { background-color: var(--kol-surface-on-primary, currentColor); } .bg-fg-inverse { background-color: var(--kol-surface-on-inverse, currentColor); } .text-fg { color: var(--kol-surface-on-primary, currentColor); } .text-fg-inverse { color: var(--kol-surface-on-inverse, currentColor); } .border-fg { border-color: var(--kol-surface-on-primary, currentColor); } .border-fg-inverse { border-color: var(--kol-surface-on-inverse, currentColor); } /* ============================================================================== * CLASSES — Background opacity (standard tier) * ============================================================================== */ .bg-fg-01 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); } .bg-fg-02 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); } .bg-fg-04 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); } .bg-fg-08 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); } .bg-fg-12 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); } .bg-fg-16 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); } .bg-fg-24 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); } .bg-fg-32 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); } .bg-fg-40 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); } .bg-fg-48 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); } .bg-fg-64 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); } .bg-fg-72 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .bg-fg-72 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .bg-fg-80 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); } .bg-fg-88 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); } .bg-fg-96 { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); } /* ============================================================================== * CLASSES — Background opacity (inverse tier) * ============================================================================== */ .bg-fg-inverse-01 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); } .bg-fg-inverse-02 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); } .bg-fg-inverse-04 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); } .bg-fg-inverse-08 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); } .bg-fg-inverse-12 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); } .bg-fg-inverse-16 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); } .bg-fg-inverse-24 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); } .bg-fg-inverse-32 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); } .bg-fg-inverse-40 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); } .bg-fg-inverse-48 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); } .bg-fg-inverse-64 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); } .bg-fg-inverse-72 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 72%, transparent); } .bg-fg-inverse-80 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); } .bg-fg-inverse-88 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); } .bg-fg-inverse-96 { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); } /* ============================================================================== * CLASSES — Background opacity (absolute tier — fixed black, theme-independent) * ============================================================================== */ .bg-fg-ab-01 { background-color: var(--kol-fg-ab-01); } .bg-fg-ab-02 { background-color: var(--kol-fg-ab-02); } .bg-fg-ab-04 { background-color: var(--kol-fg-ab-04); } .bg-fg-ab-08 { background-color: var(--kol-fg-ab-08); } .bg-fg-ab-12 { background-color: var(--kol-fg-ab-12); } .bg-fg-ab-16 { background-color: var(--kol-fg-ab-16); } .bg-fg-ab-24 { background-color: var(--kol-fg-ab-24); } .bg-fg-ab-32 { background-color: var(--kol-fg-ab-32); } .bg-fg-ab-40 { background-color: var(--kol-fg-ab-40); } .bg-fg-ab-48 { background-color: var(--kol-fg-ab-48); } .bg-fg-ab-64 { background-color: var(--kol-fg-ab-64); } .bg-fg-ab-72 { background-color: var(--kol-fg-ab-72); } .bg-fg-ab-80 { background-color: var(--kol-fg-ab-80); } .bg-fg-ab-88 { background-color: var(--kol-fg-ab-88); } .bg-fg-ab-96 { background-color: var(--kol-fg-ab-96); } /* ============================================================================== * CLASSES — Background hover (standard + inverse) * ============================================================================== */ .hover\:bg-fg-01:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); } .hover\:bg-fg-02:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); } .hover\:bg-fg-04:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); } .hover\:bg-fg-08:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); } .hover\:bg-fg-12:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); } .hover\:bg-fg-16:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); } .hover\:bg-fg-24:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); } .hover\:bg-fg-32:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); } .hover\:bg-fg-40:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); } .hover\:bg-fg-48:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); } .hover\:bg-fg-64:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); } .hover\:bg-fg-72:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .hover\:bg-fg-72:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .hover\:bg-fg-80:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); } .hover\:bg-fg-88:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); } .hover\:bg-fg-96:hover { background-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); } .hover\:bg-fg-inverse-01:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); } .hover\:bg-fg-inverse-02:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); } .hover\:bg-fg-inverse-04:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); } .hover\:bg-fg-inverse-08:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); } .hover\:bg-fg-inverse-12:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); } .hover\:bg-fg-inverse-16:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); } .hover\:bg-fg-inverse-24:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); } .hover\:bg-fg-inverse-32:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); } .hover\:bg-fg-inverse-40:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); } .hover\:bg-fg-inverse-48:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); } .hover\:bg-fg-inverse-64:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); } .hover\:bg-fg-inverse-72:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 72%, transparent); } .hover\:bg-fg-inverse-80:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); } .hover\:bg-fg-inverse-88:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); } .hover\:bg-fg-inverse-96:hover { background-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); } /* ============================================================================== * CLASSES — Text opacity (standard + inverse) * ============================================================================== */ .text-fg-01 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); } .text-fg-02 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); } .text-fg-04 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); } .text-fg-08 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); } .text-fg-12 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); } .text-fg-16 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); } .text-fg-24 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); } .text-fg-32 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); } .text-fg-40 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); } .text-fg-48 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); } .text-fg-64 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); } .text-fg-72 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .text-fg-72 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .text-fg-80 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); } .text-fg-88 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); } .text-fg-96 { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); } .text-fg-inverse-01 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); } .text-fg-inverse-02 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); } .text-fg-inverse-04 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); } .text-fg-inverse-08 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); } .text-fg-inverse-12 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); } .text-fg-inverse-16 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); } .text-fg-inverse-24 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); } .text-fg-inverse-32 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); } .text-fg-inverse-40 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); } .text-fg-inverse-48 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); } .text-fg-inverse-64 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); } .text-fg-inverse-72 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 72%, transparent); } .text-fg-inverse-80 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); } .text-fg-inverse-88 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); } .text-fg-inverse-96 { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); } /* ============================================================================== * CLASSES — Text hover (standard + inverse) * ============================================================================== */ .hover\:text-fg-01:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); } .hover\:text-fg-02:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); } .hover\:text-fg-04:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); } .hover\:text-fg-08:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); } .hover\:text-fg-12:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); } .hover\:text-fg-16:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); } .hover\:text-fg-24:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); } .hover\:text-fg-32:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); } .hover\:text-fg-40:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); } .hover\:text-fg-48:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); } .hover\:text-fg-64:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); } .hover\:text-fg-72:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .hover\:text-fg-72:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .hover\:text-fg-80:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); } .hover\:text-fg-88:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); } .hover\:text-fg-96:hover { color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); } .hover\:text-fg-inverse-01:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); } .hover\:text-fg-inverse-02:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); } .hover\:text-fg-inverse-04:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); } .hover\:text-fg-inverse-08:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); } .hover\:text-fg-inverse-12:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); } .hover\:text-fg-inverse-16:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); } .hover\:text-fg-inverse-24:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); } .hover\:text-fg-inverse-32:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); } .hover\:text-fg-inverse-40:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); } .hover\:text-fg-inverse-48:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); } .hover\:text-fg-inverse-64:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); } .hover\:text-fg-inverse-72:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 72%, transparent); } .hover\:text-fg-inverse-80:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); } .hover\:text-fg-inverse-88:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); } .hover\:text-fg-inverse-96:hover { color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); } /* ============================================================================== * CLASSES — Border opacity (standard + inverse) * ============================================================================== */ .border-fg-01 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); } .border-fg-02 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); } .border-fg-04 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); } .border-fg-08 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); } .border-fg-12 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); } .border-fg-16 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); } .border-fg-24 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); } .border-fg-32 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); } .border-fg-40 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); } .border-fg-48 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); } .border-fg-64 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); } .border-fg-72 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .border-fg-72 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .border-fg-80 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); } .border-fg-88 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); } .border-fg-96 { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); } .border-fg-inverse-01 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); } .border-fg-inverse-02 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); } .border-fg-inverse-04 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); } .border-fg-inverse-08 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); } .border-fg-inverse-12 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); } .border-fg-inverse-16 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); } .border-fg-inverse-24 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); } .border-fg-inverse-32 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); } .border-fg-inverse-40 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); } .border-fg-inverse-48 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); } .border-fg-inverse-64 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); } .border-fg-inverse-72 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 72%, transparent); } .border-fg-inverse-80 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); } .border-fg-inverse-88 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); } .border-fg-inverse-96 { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); } /* ============================================================================== * CLASSES — Border hover (standard + inverse) * ============================================================================== */ .hover\:border-fg-01:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 1%, transparent); } .hover\:border-fg-02:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 2%, transparent); } .hover\:border-fg-04:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 4%, transparent); } .hover\:border-fg-08:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 8%, transparent); } .hover\:border-fg-12:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 12%, transparent); } .hover\:border-fg-16:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 16%, transparent); } .hover\:border-fg-24:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 24%, transparent); } .hover\:border-fg-32:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 32%, transparent); } .hover\:border-fg-40:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 40%, transparent); } .hover\:border-fg-48:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 48%, transparent); } .hover\:border-fg-64:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 64%, transparent); } .hover\:border-fg-72:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .hover\:border-fg-72:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 72%, transparent); } .hover\:border-fg-80:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 80%, transparent); } .hover\:border-fg-88:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 88%, transparent); } .hover\:border-fg-96:hover { border-color: color-mix(in srgb, var(--kol-surface-on-primary, currentColor) 96%, transparent); } .hover\:border-fg-inverse-01:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 1%, transparent); } .hover\:border-fg-inverse-02:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 2%, transparent); } .hover\:border-fg-inverse-04:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 4%, transparent); } .hover\:border-fg-inverse-08:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 8%, transparent); } .hover\:border-fg-inverse-12:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 12%, transparent); } .hover\:border-fg-inverse-16:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 16%, transparent); } .hover\:border-fg-inverse-24:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 24%, transparent); } .hover\:border-fg-inverse-32:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 32%, transparent); } .hover\:border-fg-inverse-40:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 40%, transparent); } .hover\:border-fg-inverse-48:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 48%, transparent); } .hover\:border-fg-inverse-64:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 64%, transparent); } .hover\:border-fg-inverse-72:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 72%, transparent); } .hover\:border-fg-inverse-80:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 80%, transparent); } .hover\:border-fg-inverse-88:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 88%, transparent); } .hover\:border-fg-inverse-96:hover { border-color: color-mix(in srgb, var(--kol-surface-on-inverse, currentColor) 96%, transparent); } /* ============================================================================== * SEMANTIC OPACITY DESCRIPTORS — EIGHT ROLES (user ruling 2026-08-01) * * Each role is a token (--kol-fg-*) and a text class, so the same name works * wherever ink is set. * * subtle 24% — dividers, disabled hints, faintest visible * meta 48% — labels, captions * body 64% — running copy, links (the resting ink) * lede 72% — the step that did not exist; see --kol-fg-72 above * strong 80% — emphasized body, , eyebrows * shout 88% — chrome that has to cut through * scream 96% — the loudest thing that is not full ink * emphasis 100% — headings, max ink * * WHAT CHANGED, AND WHAT DELIBERATELY DID NOT. `default` became `body` — * the name 25 files spelled as the resting ink while four others already wrote * `text-body` into a class that did not exist. `emphasis` STAYS at 100%: 83 * files reach for it as max ink, and moving it would have dimmed every heading * in the estate silently, with nothing failing. Three roles are new over stops * that already existed; only `lede` needed a new stop. * * The naming shifts register at 88 — subtle…strong are document roles, shout * and scream are volume. That is deliberate: the top two are for chrome, not * for text. * * `mute` (32%) was retired 2026-04-30 with zero consumers and does not return. * * Tokens chain through the fg ramp — single source of truth is preserved; * descriptors are aliases, never their own colour values. * ============================================================================== */ /* Theme selectors, same reason as the ramp above — the roles chain through * fg-* and freeze the same way. */ :root, :is([data-theme="light"], .light), :is([data-theme="dark"], .dark) { --kol-fg-subtle: var(--kol-fg-24); --kol-fg-meta: var(--kol-fg-48); --kol-fg-body: var(--kol-fg-64); --kol-fg-lede: var(--kol-fg-72); --kol-fg-strong: var(--kol-fg-80); --kol-fg-shout: var(--kol-fg-88); --kol-fg-scream: var(--kol-fg-96); --kol-fg-emphasis: var(--kol-surface-on-primary); /* DEPRECATED ALIAS — `default` is the old name for `body`, kept pointing at * the same stop so a consumer mid-sweep cannot render colourless. Remove once * no source references it. */ --kol-fg-default: var(--kol-fg-body); } /* ─── Text descriptors (5 stops — `mute` retired 2026-04-30, 0 consumers). * bg-* / border-* / ring-* descriptor families dropped same date — * consumers reach for numeric --kol-fg-NN stops instead. ─── */ .text-subtle { color: var(--kol-fg-subtle); } .text-meta { color: var(--kol-fg-meta); } .text-body { color: var(--kol-fg-body); } .text-lede { color: var(--kol-fg-lede); } .text-strong { color: var(--kol-fg-strong); } .text-shout { color: var(--kol-fg-shout); } .text-scream { color: var(--kol-fg-scream); } .text-emphasis { color: var(--kol-fg-emphasis); } /* Deprecated alias — see the token block. */ .text-default { color: var(--kol-fg-body); } .hover\:text-subtle:hover { color: var(--kol-fg-subtle); } .hover\:text-meta:hover { color: var(--kol-fg-meta); } .hover\:text-body:hover { color: var(--kol-fg-body); } .hover\:text-lede:hover { color: var(--kol-fg-lede); } .hover\:text-strong:hover { color: var(--kol-fg-strong); } .hover\:text-shout:hover { color: var(--kol-fg-shout); } .hover\:text-scream:hover { color: var(--kol-fg-scream); } .hover\:text-emphasis:hover { color: var(--kol-fg-emphasis); } .hover\:text-default:hover { color: var(--kol-fg-body); } /* ============================================================================ * `absolute` — THE THEME'S OWN POLES, FROZEN (user ruling 2026-08-30) * * From 2026-08-28 to 2026-08-30 this name was a deprecated ALIAS of `ab`, kept * through the rename. It is a family again, and a different one: * * fg-ab-NN pure #000000 at NN%% — the absolute end of the range * fg-absolute-NN the theme's #0e0e11 at NN%% — its own near-black, frozen * * Both are theme-invariant; they differ in which pole they mix from. The * `-inverse` twin of each is the light pole, and it is the half that was * missing — `fg-ab-inverse-*` never existed, so "a white wash that does not * flip" had no token and got hand-written as a color-mix at the call site. * * ⚠️ THE MEANING OF `fg-absolute-*` CHANGED HERE. It was #000000 and is now * #0e0e11 — a delta of 3/255 at full alpha, invisible at the stops anyone uses, * but a real change. Live consumers when this shipped: kol-website's * HomeSignup, PrintDetailOverlay, and the brand app's color.js / components.js. * ============================================================================ */ :root { /* fg-absolute */ --kol-fg-absolute-01: color-mix(in srgb, var(--kol-color-black) 1%, transparent); --kol-fg-absolute-02: color-mix(in srgb, var(--kol-color-black) 2%, transparent); --kol-fg-absolute-04: color-mix(in srgb, var(--kol-color-black) 4%, transparent); --kol-fg-absolute-08: color-mix(in srgb, var(--kol-color-black) 8%, transparent); --kol-fg-absolute-12: color-mix(in srgb, var(--kol-color-black) 12%, transparent); --kol-fg-absolute-16: color-mix(in srgb, var(--kol-color-black) 16%, transparent); --kol-fg-absolute-24: color-mix(in srgb, var(--kol-color-black) 24%, transparent); --kol-fg-absolute-32: color-mix(in srgb, var(--kol-color-black) 32%, transparent); --kol-fg-absolute-40: color-mix(in srgb, var(--kol-color-black) 40%, transparent); --kol-fg-absolute-48: color-mix(in srgb, var(--kol-color-black) 48%, transparent); --kol-fg-absolute-64: color-mix(in srgb, var(--kol-color-black) 64%, transparent); --kol-fg-absolute-72: color-mix(in srgb, var(--kol-color-black) 72%, transparent); --kol-fg-absolute-80: color-mix(in srgb, var(--kol-color-black) 80%, transparent); --kol-fg-absolute-88: color-mix(in srgb, var(--kol-color-black) 88%, transparent); --kol-fg-absolute-96: color-mix(in srgb, var(--kol-color-black) 96%, transparent); /* fg-absolute-inverse */ --kol-fg-absolute-inverse-01: color-mix(in srgb, var(--kol-color-white) 1%, transparent); --kol-fg-absolute-inverse-02: color-mix(in srgb, var(--kol-color-white) 2%, transparent); --kol-fg-absolute-inverse-04: color-mix(in srgb, var(--kol-color-white) 4%, transparent); --kol-fg-absolute-inverse-08: color-mix(in srgb, var(--kol-color-white) 8%, transparent); --kol-fg-absolute-inverse-12: color-mix(in srgb, var(--kol-color-white) 12%, transparent); --kol-fg-absolute-inverse-16: color-mix(in srgb, var(--kol-color-white) 16%, transparent); --kol-fg-absolute-inverse-24: color-mix(in srgb, var(--kol-color-white) 24%, transparent); --kol-fg-absolute-inverse-32: color-mix(in srgb, var(--kol-color-white) 32%, transparent); --kol-fg-absolute-inverse-40: color-mix(in srgb, var(--kol-color-white) 40%, transparent); --kol-fg-absolute-inverse-48: color-mix(in srgb, var(--kol-color-white) 48%, transparent); --kol-fg-absolute-inverse-64: color-mix(in srgb, var(--kol-color-white) 64%, transparent); --kol-fg-absolute-inverse-72: color-mix(in srgb, var(--kol-color-white) 72%, transparent); --kol-fg-absolute-inverse-80: color-mix(in srgb, var(--kol-color-white) 80%, transparent); --kol-fg-absolute-inverse-88: color-mix(in srgb, var(--kol-color-white) 88%, transparent); --kol-fg-absolute-inverse-96: color-mix(in srgb, var(--kol-color-white) 96%, transparent); --kol-color-absolute-black: var(--kol-color-black); --kol-color-absolute-white: var(--kol-color-white); } .bg-fg-absolute-01 { background-color: var(--kol-fg-absolute-01); } .bg-fg-absolute-02 { background-color: var(--kol-fg-absolute-02); } .bg-fg-absolute-04 { background-color: var(--kol-fg-absolute-04); } .bg-fg-absolute-08 { background-color: var(--kol-fg-absolute-08); } .bg-fg-absolute-12 { background-color: var(--kol-fg-absolute-12); } .bg-fg-absolute-16 { background-color: var(--kol-fg-absolute-16); } .bg-fg-absolute-24 { background-color: var(--kol-fg-absolute-24); } .bg-fg-absolute-32 { background-color: var(--kol-fg-absolute-32); } .bg-fg-absolute-40 { background-color: var(--kol-fg-absolute-40); } .bg-fg-absolute-48 { background-color: var(--kol-fg-absolute-48); } .bg-fg-absolute-64 { background-color: var(--kol-fg-absolute-64); } .bg-fg-absolute-72 { background-color: var(--kol-fg-absolute-72); } .bg-fg-absolute-80 { background-color: var(--kol-fg-absolute-80); } .bg-fg-absolute-88 { background-color: var(--kol-fg-absolute-88); } .bg-fg-absolute-96 { background-color: var(--kol-fg-absolute-96); } .text-fg-absolute-01 { color: var(--kol-fg-absolute-01); } .text-fg-absolute-02 { color: var(--kol-fg-absolute-02); } .text-fg-absolute-04 { color: var(--kol-fg-absolute-04); } .text-fg-absolute-08 { color: var(--kol-fg-absolute-08); } .text-fg-absolute-12 { color: var(--kol-fg-absolute-12); } .text-fg-absolute-16 { color: var(--kol-fg-absolute-16); } .text-fg-absolute-24 { color: var(--kol-fg-absolute-24); } .text-fg-absolute-32 { color: var(--kol-fg-absolute-32); } .text-fg-absolute-40 { color: var(--kol-fg-absolute-40); } .text-fg-absolute-48 { color: var(--kol-fg-absolute-48); } .text-fg-absolute-64 { color: var(--kol-fg-absolute-64); } .text-fg-absolute-72 { color: var(--kol-fg-absolute-72); } .text-fg-absolute-80 { color: var(--kol-fg-absolute-80); } .text-fg-absolute-88 { color: var(--kol-fg-absolute-88); } .text-fg-absolute-96 { color: var(--kol-fg-absolute-96); } .border-fg-absolute-01 { border-color: var(--kol-fg-absolute-01); } .border-fg-absolute-02 { border-color: var(--kol-fg-absolute-02); } .border-fg-absolute-04 { border-color: var(--kol-fg-absolute-04); } .border-fg-absolute-08 { border-color: var(--kol-fg-absolute-08); } .border-fg-absolute-12 { border-color: var(--kol-fg-absolute-12); } .border-fg-absolute-16 { border-color: var(--kol-fg-absolute-16); } .border-fg-absolute-24 { border-color: var(--kol-fg-absolute-24); } .border-fg-absolute-32 { border-color: var(--kol-fg-absolute-32); } .border-fg-absolute-40 { border-color: var(--kol-fg-absolute-40); } .border-fg-absolute-48 { border-color: var(--kol-fg-absolute-48); } .border-fg-absolute-64 { border-color: var(--kol-fg-absolute-64); } .border-fg-absolute-72 { border-color: var(--kol-fg-absolute-72); } .border-fg-absolute-80 { border-color: var(--kol-fg-absolute-80); } .border-fg-absolute-88 { border-color: var(--kol-fg-absolute-88); } .border-fg-absolute-96 { border-color: var(--kol-fg-absolute-96); } .bg-fg-absolute-inverse-01 { background-color: var(--kol-fg-absolute-inverse-01); } .bg-fg-absolute-inverse-02 { background-color: var(--kol-fg-absolute-inverse-02); } .bg-fg-absolute-inverse-04 { background-color: var(--kol-fg-absolute-inverse-04); } .bg-fg-absolute-inverse-08 { background-color: var(--kol-fg-absolute-inverse-08); } .bg-fg-absolute-inverse-12 { background-color: var(--kol-fg-absolute-inverse-12); } .bg-fg-absolute-inverse-16 { background-color: var(--kol-fg-absolute-inverse-16); } .bg-fg-absolute-inverse-24 { background-color: var(--kol-fg-absolute-inverse-24); } .bg-fg-absolute-inverse-32 { background-color: var(--kol-fg-absolute-inverse-32); } .bg-fg-absolute-inverse-40 { background-color: var(--kol-fg-absolute-inverse-40); } .bg-fg-absolute-inverse-48 { background-color: var(--kol-fg-absolute-inverse-48); } .bg-fg-absolute-inverse-64 { background-color: var(--kol-fg-absolute-inverse-64); } .bg-fg-absolute-inverse-72 { background-color: var(--kol-fg-absolute-inverse-72); } .bg-fg-absolute-inverse-80 { background-color: var(--kol-fg-absolute-inverse-80); } .bg-fg-absolute-inverse-88 { background-color: var(--kol-fg-absolute-inverse-88); } .bg-fg-absolute-inverse-96 { background-color: var(--kol-fg-absolute-inverse-96); } .text-fg-absolute-inverse-01 { color: var(--kol-fg-absolute-inverse-01); } .text-fg-absolute-inverse-02 { color: var(--kol-fg-absolute-inverse-02); } .text-fg-absolute-inverse-04 { color: var(--kol-fg-absolute-inverse-04); } .text-fg-absolute-inverse-08 { color: var(--kol-fg-absolute-inverse-08); } .text-fg-absolute-inverse-12 { color: var(--kol-fg-absolute-inverse-12); } .text-fg-absolute-inverse-16 { color: var(--kol-fg-absolute-inverse-16); } .text-fg-absolute-inverse-24 { color: var(--kol-fg-absolute-inverse-24); } .text-fg-absolute-inverse-32 { color: var(--kol-fg-absolute-inverse-32); } .text-fg-absolute-inverse-40 { color: var(--kol-fg-absolute-inverse-40); } .text-fg-absolute-inverse-48 { color: var(--kol-fg-absolute-inverse-48); } .text-fg-absolute-inverse-64 { color: var(--kol-fg-absolute-inverse-64); } .text-fg-absolute-inverse-72 { color: var(--kol-fg-absolute-inverse-72); } .text-fg-absolute-inverse-80 { color: var(--kol-fg-absolute-inverse-80); } .text-fg-absolute-inverse-88 { color: var(--kol-fg-absolute-inverse-88); } .text-fg-absolute-inverse-96 { color: var(--kol-fg-absolute-inverse-96); } .border-fg-absolute-inverse-01 { border-color: var(--kol-fg-absolute-inverse-01); } .border-fg-absolute-inverse-02 { border-color: var(--kol-fg-absolute-inverse-02); } .border-fg-absolute-inverse-04 { border-color: var(--kol-fg-absolute-inverse-04); } .border-fg-absolute-inverse-08 { border-color: var(--kol-fg-absolute-inverse-08); } .border-fg-absolute-inverse-12 { border-color: var(--kol-fg-absolute-inverse-12); } .border-fg-absolute-inverse-16 { border-color: var(--kol-fg-absolute-inverse-16); } .border-fg-absolute-inverse-24 { border-color: var(--kol-fg-absolute-inverse-24); } .border-fg-absolute-inverse-32 { border-color: var(--kol-fg-absolute-inverse-32); } .border-fg-absolute-inverse-40 { border-color: var(--kol-fg-absolute-inverse-40); } .border-fg-absolute-inverse-48 { border-color: var(--kol-fg-absolute-inverse-48); } .border-fg-absolute-inverse-64 { border-color: var(--kol-fg-absolute-inverse-64); } .border-fg-absolute-inverse-72 { border-color: var(--kol-fg-absolute-inverse-72); } .border-fg-absolute-inverse-80 { border-color: var(--kol-fg-absolute-inverse-80); } .border-fg-absolute-inverse-88 { border-color: var(--kol-fg-absolute-inverse-88); } .border-fg-absolute-inverse-96 { border-color: var(--kol-fg-absolute-inverse-96); } .bg-fg-ab-inverse-01 { background-color: var(--kol-fg-ab-inverse-01); } .bg-fg-ab-inverse-02 { background-color: var(--kol-fg-ab-inverse-02); } .bg-fg-ab-inverse-04 { background-color: var(--kol-fg-ab-inverse-04); } .bg-fg-ab-inverse-08 { background-color: var(--kol-fg-ab-inverse-08); } .bg-fg-ab-inverse-12 { background-color: var(--kol-fg-ab-inverse-12); } .bg-fg-ab-inverse-16 { background-color: var(--kol-fg-ab-inverse-16); } .bg-fg-ab-inverse-24 { background-color: var(--kol-fg-ab-inverse-24); } .bg-fg-ab-inverse-32 { background-color: var(--kol-fg-ab-inverse-32); } .bg-fg-ab-inverse-40 { background-color: var(--kol-fg-ab-inverse-40); } .bg-fg-ab-inverse-48 { background-color: var(--kol-fg-ab-inverse-48); } .bg-fg-ab-inverse-64 { background-color: var(--kol-fg-ab-inverse-64); } .bg-fg-ab-inverse-72 { background-color: var(--kol-fg-ab-inverse-72); } .bg-fg-ab-inverse-80 { background-color: var(--kol-fg-ab-inverse-80); } .bg-fg-ab-inverse-88 { background-color: var(--kol-fg-ab-inverse-88); } .bg-fg-ab-inverse-96 { background-color: var(--kol-fg-ab-inverse-96); } .text-fg-ab-inverse-01 { color: var(--kol-fg-ab-inverse-01); } .text-fg-ab-inverse-02 { color: var(--kol-fg-ab-inverse-02); } .text-fg-ab-inverse-04 { color: var(--kol-fg-ab-inverse-04); } .text-fg-ab-inverse-08 { color: var(--kol-fg-ab-inverse-08); } .text-fg-ab-inverse-12 { color: var(--kol-fg-ab-inverse-12); } .text-fg-ab-inverse-16 { color: var(--kol-fg-ab-inverse-16); } .text-fg-ab-inverse-24 { color: var(--kol-fg-ab-inverse-24); } .text-fg-ab-inverse-32 { color: var(--kol-fg-ab-inverse-32); } .text-fg-ab-inverse-40 { color: var(--kol-fg-ab-inverse-40); } .text-fg-ab-inverse-48 { color: var(--kol-fg-ab-inverse-48); } .text-fg-ab-inverse-64 { color: var(--kol-fg-ab-inverse-64); } .text-fg-ab-inverse-72 { color: var(--kol-fg-ab-inverse-72); } .text-fg-ab-inverse-80 { color: var(--kol-fg-ab-inverse-80); } .text-fg-ab-inverse-88 { color: var(--kol-fg-ab-inverse-88); } .text-fg-ab-inverse-96 { color: var(--kol-fg-ab-inverse-96); } .border-fg-ab-inverse-01 { border-color: var(--kol-fg-ab-inverse-01); } .border-fg-ab-inverse-02 { border-color: var(--kol-fg-ab-inverse-02); } .border-fg-ab-inverse-04 { border-color: var(--kol-fg-ab-inverse-04); } .border-fg-ab-inverse-08 { border-color: var(--kol-fg-ab-inverse-08); } .border-fg-ab-inverse-12 { border-color: var(--kol-fg-ab-inverse-12); } .border-fg-ab-inverse-16 { border-color: var(--kol-fg-ab-inverse-16); } .border-fg-ab-inverse-24 { border-color: var(--kol-fg-ab-inverse-24); } .border-fg-ab-inverse-32 { border-color: var(--kol-fg-ab-inverse-32); } .border-fg-ab-inverse-40 { border-color: var(--kol-fg-ab-inverse-40); } .border-fg-ab-inverse-48 { border-color: var(--kol-fg-ab-inverse-48); } .border-fg-ab-inverse-64 { border-color: var(--kol-fg-ab-inverse-64); } .border-fg-ab-inverse-72 { border-color: var(--kol-fg-ab-inverse-72); } .border-fg-ab-inverse-80 { border-color: var(--kol-fg-ab-inverse-80); } .border-fg-ab-inverse-88 { border-color: var(--kol-fg-ab-inverse-88); } .border-fg-ab-inverse-96 { border-color: var(--kol-fg-ab-inverse-96); }