@kolkrabbi/kol-theme 0.92.0 → 0.94.0

package/kol-base-tokens.css

@@ -25,8 +25,8 @@
 :root,
 :is([data-theme="light"], .light) {
   /* Absolutes (theme-invariant) */
-  --kol-color-absolute-white: #ffffff;
-  --kol-color-absolute-black: #000000;
+  --kol-color-ab-white: #ffffff;
+  --kol-color-ab-black: #000000;
 
   /* Surface tiers (page-level) — Light Mode (default) */
   --kol-surface-primary: #fafafa;

package/kol-color.css

@@ -310,20 +310,20 @@
  * Absolute Colors
  * --------------------------------------------------------------------------- */
 
-.bg-absolute-white {
-  background-color: var(--kol-color-absolute-white);
+.bg-ab-white {
+  background-color: var(--kol-color-ab-white);
 }
 
-.bg-absolute-black {
-  background-color: var(--kol-color-absolute-black);
+.bg-ab-black {
+  background-color: var(--kol-color-ab-black);
 }
 
-.text-absolute-white {
-  color: var(--kol-color-absolute-white);
+.text-ab-white {
+  color: var(--kol-color-ab-white);
 }
 
-.text-absolute-black {
-  color: var(--kol-color-absolute-black);
+.text-ab-black {
+  color: var(--kol-color-ab-black);
 }
 
 /* =============================================================================

package/kol-components-atoms.css

@@ -71,7 +71,7 @@
   /* DEPRECATED (2026-07-08 chrome law) — ghost folded into outline; Input
    * aliases variant="ghost" → outline. Rule kept only for stray direct
    * class consumers; do not use in new code. Opaque 4% black on surface. */
-  background-color: color-mix(in srgb, var(--kol-color-absolute-black) 4%, var(--kol-surface-primary));
+  background-color: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-surface-primary));
   color: var(--kol-fg-meta);
 }
 .kol-control--ghost:hover,
@@ -355,14 +355,14 @@
  * (error red carries it in both themes). */
 .kol-btn-danger {
   background: var(--ui-error);
-  color: var(--kol-color-absolute-white);
+  color: var(--kol-color-ab-white);
   border: 1px solid transparent;
   font-weight: 500;
 }
 @media (hover: hover) {
   .kol-btn-danger:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: color-mix(in srgb, var(--ui-error) 80%, var(--kol-surface-primary));
-    color: var(--kol-color-absolute-white);
+    color: var(--kol-color-ab-white);
   }
 }
 
@@ -465,7 +465,7 @@
  *
  * Custom-shape control (not shell-based — slidey indicator geometry).
  * Default + plain variants. ON state inverts: pill bg
- * absolute-white, indicator absolute-black (theme-invariant).
+ * ab-white, indicator ab-black (theme-invariant).
  * ═══════════════════════════════════════════════════════════════ */
 
 /* Toggle Switch — atoms/ToggleSwitch.jsx (2026-07-08 chrome law rewrite).
@@ -575,8 +575,8 @@
 /* ═══════════════════════════════════════════════════════════════
  * Toggle Checkbox — atoms/ToggleCheckbox.jsx
  *
- * Custom-shape control. Active state inverts: box bg absolute-white,
- * no border, check stroke absolute-black (theme-invariant).
+ * Custom-shape control. Active state inverts: box bg ab-white,
+ * no border, check stroke ab-black (theme-invariant).
  * ═══════════════════════════════════════════════════════════════ */
 
 .toggle-checkbox {
@@ -606,13 +606,13 @@
 .toggle-checkbox-indicator svg {
   width: 10px;
   height: 8px;
-  stroke: var(--kol-color-absolute-black);
+  stroke: var(--kol-color-ab-black);
   opacity: 0;
   transition: opacity var(--kol-transition-base);
 }
 
 .toggle-checkbox.is-active .toggle-checkbox-indicator {
-  background-color: var(--kol-color-absolute-white);
+  background-color: var(--kol-color-ab-white);
   border-color: transparent;
 }
 
@@ -629,7 +629,7 @@
   border-color: transparent;
 }
 .toggle-checkbox--media.is-active .toggle-checkbox-indicator {
-  background-color: var(--kol-color-absolute-white);
+  background-color: var(--kol-color-ab-white);
 }
 
 
@@ -1135,7 +1135,7 @@ a.kol-icon-frame {
  * legible over arbitrary pixels, and no Button variant covers it. Values are
  * MediaCard's, which is the instance the doc names. */
 .kol-icon-frame-plate {
-  background: var(--kol-fg-absolute-12, rgba(0, 0, 0, 0.4));
+  background: var(--kol-fg-ab-12, rgba(0, 0, 0, 0.4));
   backdrop-filter: blur(4px);
   color: var(--kol-surface-on-primary);
 }
@@ -1147,7 +1147,7 @@ a.kol-icon-frame {
 }
 .kol-icon-frame-danger {
   background: var(--ui-error);
-  color: var(--kol-color-absolute-white);
+  color: var(--kol-color-ab-white);
   border: 1px solid transparent;
 }
 
@@ -1161,7 +1161,7 @@ a.kol-icon-frame {
  * artwork's saturation jumps (Chrome). */
 .kol-play-disc {
   background-color: color-mix(in srgb, var(--kol-surface-on-inverse) 64%, transparent);
-  color: var(--kol-color-absolute-white);
+  color: var(--kol-color-ab-white);
   border: 2px solid color-mix(in srgb, var(--kol-surface-on-primary) 96%, transparent);
   box-shadow: 0 0 4px 3.5px rgba(0, 0, 0, 0.4);
   opacity: 0;

package/kol-components-molecules.css

@@ -1148,7 +1148,7 @@
  * the ghost IconFrame paints --kol-oq-48, a theme colour, and the bar sits on
  * media, not on the theme. The scrubber is a native range — a 2px track at 40 %
  * white, a tall 4 × 28 white pill for the knob — pseudo-elements, so CSS. */
-.kol-playback-bar .kol-icon-frame { color: var(--kol-color-absolute-white); opacity: 0.8; }
+.kol-playback-bar .kol-icon-frame { color: var(--kol-color-ab-white); opacity: 0.8; }
 .kol-playback-bar .kol-icon-frame:hover,
 .kol-playback-bar .kol-icon-frame:focus-visible { opacity: 1; }
 .kol-playback-scrub {
@@ -1159,10 +1159,10 @@
   outline: none;
   cursor: pointer;
 }
-.kol-playback-scrub::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-absolute-white) 40%, transparent); }
-.kol-playback-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 28px; margin-top: -13px; border-radius: 2px; background: var(--kol-color-absolute-white); }
-.kol-playback-scrub::-moz-range-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-absolute-white) 40%, transparent); }
-.kol-playback-scrub::-moz-range-thumb { width: 4px; height: 28px; border: 0; border-radius: 2px; background: var(--kol-color-absolute-white); }
+.kol-playback-scrub::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); }
+.kol-playback-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 28px; margin-top: -13px; border-radius: 2px; background: var(--kol-color-ab-white); }
+.kol-playback-scrub::-moz-range-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent); }
+.kol-playback-scrub::-moz-range-thumb { width: 4px; height: 28px; border: 0; border-radius: 2px; background: var(--kol-color-ab-white); }
 
 /* ColumnBrowser rows — ONE SELECTED STATE (ColumnBrowserSeams, kol-r2b2
  * 2026-08-28; user: "ONLY one selected state can exist, not TWO"). The row's
@@ -1253,22 +1253,22 @@
  * the ink for its two icon buttons — that fork is what widening the set ends).
  *
  * THE SET: well `fg-inverse-96` (user ruling 2026-08-28, swapped from
- * `fg-absolute-24` — measured on the dark theme, where the inverse tier is the
+ * `fg-ab-24` — measured on the dark theme, where the inverse tier is the
  * one that DARKENS: on the #121215 page inverse-96 lands ~14.2 against
  * absolute-24's 13.7, half a level apart. Unlike absolute it follows the
  * theme, so the light-theme well flips to the near-white inverse anchor) ·
  * active chip `fg-08` (user ruling 2026-08-28, down from the 0.78.1 fg-16) ·
- * inactive hover absolute-white @ 8% (a dark well wants a LIGHTER hover) ·
+ * inactive hover ab-white @ 8% (a dark well wants a LIGHTER hover) ·
  * ink `fg-96`. `.kol-tone-inverse` stays selected for any class
  * hand-stamped on the old name.
  * ───────────────────────────────────────────────────────────────────── */
-.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
+.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-oq-inverse-96); }
 .kol-view-toggle.kol-tone-sunken > button[aria-pressed="true"], .kol-view-toggle.kol-tone-inverse > button[aria-pressed="true"] { background-color: var(--kol-fg-08); }
-.kol-view-toggle.kol-tone-sunken > button:not([aria-pressed="true"]):hover, .kol-view-toggle.kol-tone-inverse > button:not([aria-pressed="true"]):hover { background-color: color-mix(in srgb, var(--kol-color-absolute-white) 8%, transparent); }
-.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
-.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
+.kol-view-toggle.kol-tone-sunken > button:not([aria-pressed="true"]):hover, .kol-view-toggle.kol-tone-inverse > button:not([aria-pressed="true"]):hover { background-color: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent); }
+.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-oq-inverse-96); }
+.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-oq-inverse-96); }
 /* the tone's fill, one selector — nothing left to cancel (2026-08-28) */
-.kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
+.kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.kol-tone-inverse { background-color: var(--kol-oq-inverse-96); }
 /* THE PANEL IS OPAQUE (user 2026-08-28: "transparent doesn't work for
  * dropdown") — it floats over page content, and every `fg-*` stop is an alpha
  * wash that the content reads through. `oq-inverse-*`, the opaque tier, bakes
@@ -1276,7 +1276,7 @@
  * lands ~23.5 against the #121215 page's 18: lighter than the page, the wrong
  * side of it. `surface-tertiary` is the flat twin of what the trigger renders:
  * #0e0e11 (14.0) in dark against the trigger's 14.2, #ffffff in light. */
-.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
+.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-oq-inverse-96); }
 /* the rest of the set — Button (icon-only especially), IconFrame, ThemeToggle:
  * the well, transparent edge, fg-96 ink; hover the white wash, pressed the
  * fg-08 chip — both LAYERED over the well (a gradient image over the fill),
@@ -1284,20 +1284,20 @@
 .kol-btn.kol-tone-sunken,
 .kol-icon-frame.kol-tone-sunken,
 .kol-theme-toggle.kol-tone-sunken {
-  background-color: var(--kol-tone-sunken-bg);
+  background-color: var(--kol-oq-inverse-96);
   border-color: transparent;
   color: var(--kol-fg-96);
 }
 @media (hover: hover) {
   .kol-btn.kol-tone-sunken:not(.kol-btn-animate):not(:disabled):hover {
-    background-color: var(--kol-tone-sunken-bg);
-    background-image: linear-gradient(color-mix(in srgb, var(--kol-color-absolute-white) 8%, transparent), color-mix(in srgb, var(--kol-color-absolute-white) 8%, transparent));
+    background-color: var(--kol-oq-inverse-96);
+    background-image: linear-gradient(color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent), color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent));
     color: var(--kol-fg-96);
   }
 }
 .kol-btn.kol-tone-sunken.kol-btn-pressed,
 .kol-btn.kol-tone-sunken:not(:disabled):active {
-  background-color: var(--kol-tone-sunken-bg);
+  background-color: var(--kol-oq-inverse-96);
   background-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
   color: var(--kol-fg-96);
 }

package/kol-design-tokens.css

@@ -74,19 +74,6 @@
    * first fifth of the duration and the rest on a settle you cannot see — so
    * every motion read as instant no matter what duration it was given, and a
    * small hover affordance never showed its move at all. */
-  /* THE SUNKEN PLATE (ControlToneSunken, user ruling 2026-08-28) — the one fill
-   * every `tone="sunken"` control paints: ViewToggle's well, Input, SearchInput,
-   * the Dropdown trigger AND its panel, Button, IconFrame, ThemeToggle.
-   *
-   * OPAQUE and theme-invariant, and both halves are the ruling: "opaque so it
-   * doesn't bleed". A translucent well renders whatever is under it, which is
-   * how this went wrong twice in a day — `fg-absolute-24` and `fg-inverse-96`
-   * are washes, and the second one also follows the theme stamp, so an app
-   * painting a dark page without stamping `data-theme` got a near-white control
-   * row. Sunken means BELOW the plane; a plate that changes with the plane
-   * cannot say that. Ship one colour and let it be the same everywhere. */
-  --kol-tone-sunken-bg: color-mix(in srgb, var(--kol-color-absolute-white) 11%, var(--kol-color-absolute-black));
-
   --kol-ease-house: cubic-bezier(0.4, 0, 0.2, 1);
   /* the bounce — overshoots past its target and settles back (y > 1 is what
    * makes it bounce; house only decelerates). For a press that should feel

package/kol-opacity.css

@@ -50,6 +50,7 @@
   --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)
@@ -67,20 +68,21 @@
    * TOKENS — Absolute tier (theme-independent black, fixed opacity stops)
    * ============================================================================ */
 
-  --kol-fg-absolute-01: color-mix(in srgb, var(--kol-color-absolute-black) 1%, transparent);
-  --kol-fg-absolute-02: color-mix(in srgb, var(--kol-color-absolute-black) 2%, transparent);
-  --kol-fg-absolute-04: color-mix(in srgb, var(--kol-color-absolute-black) 4%, transparent);
-  --kol-fg-absolute-08: color-mix(in srgb, var(--kol-color-absolute-black) 8%, transparent);
-  --kol-fg-absolute-12: color-mix(in srgb, var(--kol-color-absolute-black) 12%, transparent);
-  --kol-fg-absolute-16: color-mix(in srgb, var(--kol-color-absolute-black) 16%, transparent);
-  --kol-fg-absolute-24: color-mix(in srgb, var(--kol-color-absolute-black) 24%, transparent);
-  --kol-fg-absolute-32: color-mix(in srgb, var(--kol-color-absolute-black) 32%, transparent);
-  --kol-fg-absolute-40: color-mix(in srgb, var(--kol-color-absolute-black) 40%, transparent);
-  --kol-fg-absolute-48: color-mix(in srgb, var(--kol-color-absolute-black) 48%, transparent);
-  --kol-fg-absolute-64: color-mix(in srgb, var(--kol-color-absolute-black) 64%, transparent);
-  --kol-fg-absolute-80: color-mix(in srgb, var(--kol-color-absolute-black) 80%, transparent);
-  --kol-fg-absolute-88: color-mix(in srgb, var(--kol-color-absolute-black) 88%, transparent);
-  --kol-fg-absolute-96: color-mix(in srgb, var(--kol-color-absolute-black) 96%, transparent);
+  --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);
 
   /* ============================================================================
    * TOKENS — Inverse tier (foreground on inverse surface)
@@ -97,6 +99,7 @@
   --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);
@@ -134,6 +137,7 @@
 .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); }
@@ -153,6 +157,7 @@
 .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); }
@@ -161,20 +166,21 @@
  * CLASSES — Background opacity (absolute tier — fixed black, theme-independent)
  * ============================================================================== */
 
-.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-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); }
+.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)
@@ -192,6 +198,7 @@
 .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); }
@@ -207,6 +214,7 @@
 .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); }
@@ -227,6 +235,7 @@
 .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); }
@@ -242,6 +251,7 @@
 .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); }
@@ -262,6 +272,7 @@
 .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); }
@@ -277,6 +288,7 @@
 .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); }
@@ -297,6 +309,7 @@
 .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); }
@@ -312,6 +325,7 @@
 .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); }
@@ -332,6 +346,7 @@
 .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); }
@@ -347,6 +362,7 @@
 .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); }
@@ -391,6 +407,7 @@
   --kol-fg-subtle:    var(--kol-fg-24);
   --kol-fg-meta:      var(--kol-fg-48);
   --kol-fg-body:      var(--kol-fg-64);
+  --kol-fg-body:      var(--kol-fg-72);
   --kol-fg-lede:      var(--kol-fg-72);
   --kol-fg-strong:    var(--kol-fg-80);
   --kol-fg-shout:     var(--kol-fg-88);
@@ -428,3 +445,45 @@
 .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); }
+
+/* ============================================================================
+ * ALIASES — the old `absolute` spelling (renamed to `ab`, user ruling 2026-08-28)
+ *
+ * Kept so no consumer breaks silently on a name change: `--kol-fg-absolute-NN`
+ * and `.bg-fg-absolute-NN` still resolve, to the same value as before. New code
+ * writes `ab`. Drop these once the estate has moved.
+ * ============================================================================ */
+:root {
+  --kol-fg-absolute-01: var(--kol-fg-ab-01);
+  --kol-fg-absolute-02: var(--kol-fg-ab-02);
+  --kol-fg-absolute-04: var(--kol-fg-ab-04);
+  --kol-fg-absolute-08: var(--kol-fg-ab-08);
+  --kol-fg-absolute-12: var(--kol-fg-ab-12);
+  --kol-fg-absolute-16: var(--kol-fg-ab-16);
+  --kol-fg-absolute-24: var(--kol-fg-ab-24);
+  --kol-fg-absolute-32: var(--kol-fg-ab-32);
+  --kol-fg-absolute-40: var(--kol-fg-ab-40);
+  --kol-fg-absolute-48: var(--kol-fg-ab-48);
+  --kol-fg-absolute-64: var(--kol-fg-ab-64);
+  --kol-fg-absolute-72: var(--kol-fg-ab-72);
+  --kol-fg-absolute-80: var(--kol-fg-ab-80);
+  --kol-fg-absolute-88: var(--kol-fg-ab-88);
+  --kol-fg-absolute-96: var(--kol-fg-ab-96);
+  --kol-color-absolute-black: var(--kol-color-ab-black);
+  --kol-color-absolute-white: var(--kol-color-ab-white);
+}
+.bg-fg-absolute-01 { background-color: var(--kol-fg-ab-01); }
+.bg-fg-absolute-02 { background-color: var(--kol-fg-ab-02); }
+.bg-fg-absolute-04 { background-color: var(--kol-fg-ab-04); }
+.bg-fg-absolute-08 { background-color: var(--kol-fg-ab-08); }
+.bg-fg-absolute-12 { background-color: var(--kol-fg-ab-12); }
+.bg-fg-absolute-16 { background-color: var(--kol-fg-ab-16); }
+.bg-fg-absolute-24 { background-color: var(--kol-fg-ab-24); }
+.bg-fg-absolute-32 { background-color: var(--kol-fg-ab-32); }
+.bg-fg-absolute-40 { background-color: var(--kol-fg-ab-40); }
+.bg-fg-absolute-48 { background-color: var(--kol-fg-ab-48); }
+.bg-fg-absolute-64 { background-color: var(--kol-fg-ab-64); }
+.bg-fg-absolute-72 { background-color: var(--kol-fg-ab-72); }
+.bg-fg-absolute-80 { background-color: var(--kol-fg-ab-80); }
+.bg-fg-absolute-88 { background-color: var(--kol-fg-ab-88); }
+.bg-fg-absolute-96 { background-color: var(--kol-fg-ab-96); }

package/kol-opaque.css

@@ -22,6 +22,8 @@
  * Tier pairs:
  * - Standard (ink-on-primary flattened onto --kol-surface-primary)
  * - Inverse  (ink-on-inverse flattened onto --kol-surface-inverse)
+ * - Absolute (ab / ab-inverse — black and white against each other, so the
+ *   grey is opaque AND theme-invariant; 2026-08-28)
  *
  * Layers:
  * - Tokens (--kol-oq-*, --kol-oq-inverse-*) for use in CSS rules
@@ -46,6 +48,7 @@
   --kol-oq-40: color-mix(in srgb, var(--kol-surface-on-primary) 40%, var(--kol-surface-primary));
   --kol-oq-48: color-mix(in srgb, var(--kol-surface-on-primary) 48%, var(--kol-surface-primary));
   --kol-oq-64: color-mix(in srgb, var(--kol-surface-on-primary) 64%, var(--kol-surface-primary));
+  --kol-oq-72: color-mix(in srgb, var(--kol-surface-on-primary) 72%, var(--kol-surface-primary));
   --kol-oq-80: color-mix(in srgb, var(--kol-surface-on-primary) 80%, var(--kol-surface-primary));
   --kol-oq-88: color-mix(in srgb, var(--kol-surface-on-primary) 88%, var(--kol-surface-primary));
   --kol-oq-96: color-mix(in srgb, var(--kol-surface-on-primary) 96%, var(--kol-surface-primary));
@@ -65,6 +68,7 @@
   --kol-oq-inverse-40: color-mix(in srgb, var(--kol-surface-on-inverse) 40%, var(--kol-surface-inverse));
   --kol-oq-inverse-48: color-mix(in srgb, var(--kol-surface-on-inverse) 48%, var(--kol-surface-inverse));
   --kol-oq-inverse-64: color-mix(in srgb, var(--kol-surface-on-inverse) 64%, var(--kol-surface-inverse));
+  --kol-oq-inverse-72: color-mix(in srgb, var(--kol-surface-on-inverse) 72%, var(--kol-surface-inverse));
   --kol-oq-inverse-80: color-mix(in srgb, var(--kol-surface-on-inverse) 80%, var(--kol-surface-inverse));
   --kol-oq-inverse-88: color-mix(in srgb, var(--kol-surface-on-inverse) 88%, var(--kol-surface-inverse));
   --kol-oq-inverse-96: color-mix(in srgb, var(--kol-surface-on-inverse) 96%, var(--kol-surface-inverse));
@@ -85,6 +89,7 @@
 .bg-oq-40 { background-color: var(--kol-oq-40); }
 .bg-oq-48 { background-color: var(--kol-oq-48); }
 .bg-oq-64 { background-color: var(--kol-oq-64); }
+.bg-oq-72 { background-color: var(--kol-oq-72); }
 .bg-oq-80 { background-color: var(--kol-oq-80); }
 .bg-oq-88 { background-color: var(--kol-oq-88); }
 .bg-oq-96 { background-color: var(--kol-oq-96); }
@@ -100,6 +105,7 @@
 .bg-oq-inverse-40 { background-color: var(--kol-oq-inverse-40); }
 .bg-oq-inverse-48 { background-color: var(--kol-oq-inverse-48); }
 .bg-oq-inverse-64 { background-color: var(--kol-oq-inverse-64); }
+.bg-oq-inverse-72 { background-color: var(--kol-oq-inverse-72); }
 .bg-oq-inverse-80 { background-color: var(--kol-oq-inverse-80); }
 .bg-oq-inverse-88 { background-color: var(--kol-oq-inverse-88); }
 .bg-oq-inverse-96 { background-color: var(--kol-oq-inverse-96); }
@@ -119,6 +125,7 @@
 .hover\:bg-oq-40:hover { background-color: var(--kol-oq-40); }
 .hover\:bg-oq-48:hover { background-color: var(--kol-oq-48); }
 .hover\:bg-oq-64:hover { background-color: var(--kol-oq-64); }
+.hover\:bg-oq-72:hover { background-color: var(--kol-oq-72); }
 .hover\:bg-oq-80:hover { background-color: var(--kol-oq-80); }
 .hover\:bg-oq-88:hover { background-color: var(--kol-oq-88); }
 .hover\:bg-oq-96:hover { background-color: var(--kol-oq-96); }
@@ -134,6 +141,7 @@
 .hover\:bg-oq-inverse-40:hover { background-color: var(--kol-oq-inverse-40); }
 .hover\:bg-oq-inverse-48:hover { background-color: var(--kol-oq-inverse-48); }
 .hover\:bg-oq-inverse-64:hover { background-color: var(--kol-oq-inverse-64); }
+.hover\:bg-oq-inverse-72:hover { background-color: var(--kol-oq-inverse-72); }
 .hover\:bg-oq-inverse-80:hover { background-color: var(--kol-oq-inverse-80); }
 .hover\:bg-oq-inverse-88:hover { background-color: var(--kol-oq-inverse-88); }
 .hover\:bg-oq-inverse-96:hover { background-color: var(--kol-oq-inverse-96); }
@@ -153,6 +161,7 @@
 .text-oq-40 { color: var(--kol-oq-40); }
 .text-oq-48 { color: var(--kol-oq-48); }
 .text-oq-64 { color: var(--kol-oq-64); }
+.text-oq-72 { color: var(--kol-oq-72); }
 .text-oq-80 { color: var(--kol-oq-80); }
 .text-oq-88 { color: var(--kol-oq-88); }
 .text-oq-96 { color: var(--kol-oq-96); }
@@ -168,6 +177,7 @@
 .text-oq-inverse-40 { color: var(--kol-oq-inverse-40); }
 .text-oq-inverse-48 { color: var(--kol-oq-inverse-48); }
 .text-oq-inverse-64 { color: var(--kol-oq-inverse-64); }
+.text-oq-inverse-72 { color: var(--kol-oq-inverse-72); }
 .text-oq-inverse-80 { color: var(--kol-oq-inverse-80); }
 .text-oq-inverse-88 { color: var(--kol-oq-inverse-88); }
 .text-oq-inverse-96 { color: var(--kol-oq-inverse-96); }
@@ -187,6 +197,7 @@
 .border-oq-40 { border-color: var(--kol-oq-40); }
 .border-oq-48 { border-color: var(--kol-oq-48); }
 .border-oq-64 { border-color: var(--kol-oq-64); }
+.border-oq-72 { border-color: var(--kol-oq-72); }
 .border-oq-80 { border-color: var(--kol-oq-80); }
 .border-oq-88 { border-color: var(--kol-oq-88); }
 .border-oq-96 { border-color: var(--kol-oq-96); }
@@ -202,6 +213,186 @@
 .border-oq-inverse-40 { border-color: var(--kol-oq-inverse-40); }
 .border-oq-inverse-48 { border-color: var(--kol-oq-inverse-48); }
 .border-oq-inverse-64 { border-color: var(--kol-oq-inverse-64); }
+.border-oq-inverse-72 { border-color: var(--kol-oq-inverse-72); }
 .border-oq-inverse-80 { border-color: var(--kol-oq-inverse-80); }
 .border-oq-inverse-88 { border-color: var(--kol-oq-inverse-88); }
 .border-oq-inverse-96 { border-color: var(--kol-oq-inverse-96); }
+
+/* ============================================================================
+ * TOKENS — ABSOLUTE tiers (user ruling 2026-08-28: "you can make bg-oq-ab-*
+ * and bg-oq-ab-inverse-*")
+ *
+ * The gap they close: the estate had opaque greys that FOLLOW the theme
+ * (`oq-*`, `oq-inverse-*` — baked onto a surface token) and absolute inks that
+ * are theme-invariant but TRANSLUCENT (`fg-ab-*`). "Opaque and theme-invariant"
+ * was not expressible, which is exactly what a sunken control wants: a plate
+ * that is darker than its plane, on both themes, that nothing bleeds through.
+ *
+ * Same construction as the tiers above, with the absolutes standing in for the
+ * surface pair — so these are flat greys that never move:
+ *   oq-ab-NN          black NN% into WHITE — a light ground darkening
+ *   oq-ab-inverse-NN  white NN% into BLACK — a dark ground lightening
+ * ============================================================================ */
+
+:root {
+  --kol-oq-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
+  --kol-oq-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
+  --kol-oq-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-color-ab-white));
+  --kol-oq-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, var(--kol-color-ab-white));
+  --kol-oq-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, var(--kol-color-ab-white));
+  --kol-oq-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, var(--kol-color-ab-white));
+  --kol-oq-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, var(--kol-color-ab-white));
+  --kol-oq-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, var(--kol-color-ab-white));
+  --kol-oq-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, var(--kol-color-ab-white));
+  --kol-oq-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, var(--kol-color-ab-white));
+  --kol-oq-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, var(--kol-color-ab-white));
+  --kol-oq-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, var(--kol-color-ab-white));
+  --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
+  --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
+  --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
+
+  --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
+}
+
+/* CLASSES — absolute tiers */
+.bg-oq-ab-01 { background-color: var(--kol-oq-ab-01); }
+.bg-oq-ab-02 { background-color: var(--kol-oq-ab-02); }
+.bg-oq-ab-04 { background-color: var(--kol-oq-ab-04); }
+.bg-oq-ab-08 { background-color: var(--kol-oq-ab-08); }
+.bg-oq-ab-12 { background-color: var(--kol-oq-ab-12); }
+.bg-oq-ab-16 { background-color: var(--kol-oq-ab-16); }
+.bg-oq-ab-24 { background-color: var(--kol-oq-ab-24); }
+.bg-oq-ab-32 { background-color: var(--kol-oq-ab-32); }
+.bg-oq-ab-40 { background-color: var(--kol-oq-ab-40); }
+.bg-oq-ab-48 { background-color: var(--kol-oq-ab-48); }
+.bg-oq-ab-64 { background-color: var(--kol-oq-ab-64); }
+.bg-oq-ab-72 { background-color: var(--kol-oq-ab-72); }
+.bg-oq-ab-80 { background-color: var(--kol-oq-ab-80); }
+.bg-oq-ab-88 { background-color: var(--kol-oq-ab-88); }
+.bg-oq-ab-96 { background-color: var(--kol-oq-ab-96); }
+
+.bg-oq-ab-inverse-01 { background-color: var(--kol-oq-ab-inverse-01); }
+.bg-oq-ab-inverse-02 { background-color: var(--kol-oq-ab-inverse-02); }
+.bg-oq-ab-inverse-04 { background-color: var(--kol-oq-ab-inverse-04); }
+.bg-oq-ab-inverse-08 { background-color: var(--kol-oq-ab-inverse-08); }
+.bg-oq-ab-inverse-12 { background-color: var(--kol-oq-ab-inverse-12); }
+.bg-oq-ab-inverse-16 { background-color: var(--kol-oq-ab-inverse-16); }
+.bg-oq-ab-inverse-24 { background-color: var(--kol-oq-ab-inverse-24); }
+.bg-oq-ab-inverse-32 { background-color: var(--kol-oq-ab-inverse-32); }
+.bg-oq-ab-inverse-40 { background-color: var(--kol-oq-ab-inverse-40); }
+.bg-oq-ab-inverse-48 { background-color: var(--kol-oq-ab-inverse-48); }
+.bg-oq-ab-inverse-64 { background-color: var(--kol-oq-ab-inverse-64); }
+.bg-oq-ab-inverse-72 { background-color: var(--kol-oq-ab-inverse-72); }
+.bg-oq-ab-inverse-80 { background-color: var(--kol-oq-ab-inverse-80); }
+.bg-oq-ab-inverse-88 { background-color: var(--kol-oq-ab-inverse-88); }
+.bg-oq-ab-inverse-96 { background-color: var(--kol-oq-ab-inverse-96); }
+
+.hover\:bg-oq-ab-01:hover { background-color: var(--kol-oq-ab-01); }
+.hover\:bg-oq-ab-02:hover { background-color: var(--kol-oq-ab-02); }
+.hover\:bg-oq-ab-04:hover { background-color: var(--kol-oq-ab-04); }
+.hover\:bg-oq-ab-08:hover { background-color: var(--kol-oq-ab-08); }
+.hover\:bg-oq-ab-12:hover { background-color: var(--kol-oq-ab-12); }
+.hover\:bg-oq-ab-16:hover { background-color: var(--kol-oq-ab-16); }
+.hover\:bg-oq-ab-24:hover { background-color: var(--kol-oq-ab-24); }
+.hover\:bg-oq-ab-32:hover { background-color: var(--kol-oq-ab-32); }
+.hover\:bg-oq-ab-40:hover { background-color: var(--kol-oq-ab-40); }
+.hover\:bg-oq-ab-48:hover { background-color: var(--kol-oq-ab-48); }
+.hover\:bg-oq-ab-64:hover { background-color: var(--kol-oq-ab-64); }
+.hover\:bg-oq-ab-72:hover { background-color: var(--kol-oq-ab-72); }
+.hover\:bg-oq-ab-80:hover { background-color: var(--kol-oq-ab-80); }
+.hover\:bg-oq-ab-88:hover { background-color: var(--kol-oq-ab-88); }
+.hover\:bg-oq-ab-96:hover { background-color: var(--kol-oq-ab-96); }
+
+.hover\:bg-oq-ab-inverse-01:hover { background-color: var(--kol-oq-ab-inverse-01); }
+.hover\:bg-oq-ab-inverse-02:hover { background-color: var(--kol-oq-ab-inverse-02); }
+.hover\:bg-oq-ab-inverse-04:hover { background-color: var(--kol-oq-ab-inverse-04); }
+.hover\:bg-oq-ab-inverse-08:hover { background-color: var(--kol-oq-ab-inverse-08); }
+.hover\:bg-oq-ab-inverse-12:hover { background-color: var(--kol-oq-ab-inverse-12); }
+.hover\:bg-oq-ab-inverse-16:hover { background-color: var(--kol-oq-ab-inverse-16); }
+.hover\:bg-oq-ab-inverse-24:hover { background-color: var(--kol-oq-ab-inverse-24); }
+.hover\:bg-oq-ab-inverse-32:hover { background-color: var(--kol-oq-ab-inverse-32); }
+.hover\:bg-oq-ab-inverse-40:hover { background-color: var(--kol-oq-ab-inverse-40); }
+.hover\:bg-oq-ab-inverse-48:hover { background-color: var(--kol-oq-ab-inverse-48); }
+.hover\:bg-oq-ab-inverse-64:hover { background-color: var(--kol-oq-ab-inverse-64); }
+.hover\:bg-oq-ab-inverse-72:hover { background-color: var(--kol-oq-ab-inverse-72); }
+.hover\:bg-oq-ab-inverse-80:hover { background-color: var(--kol-oq-ab-inverse-80); }
+.hover\:bg-oq-ab-inverse-88:hover { background-color: var(--kol-oq-ab-inverse-88); }
+.hover\:bg-oq-ab-inverse-96:hover { background-color: var(--kol-oq-ab-inverse-96); }
+
+.text-oq-ab-01 { color: var(--kol-oq-ab-01); }
+.text-oq-ab-02 { color: var(--kol-oq-ab-02); }
+.text-oq-ab-04 { color: var(--kol-oq-ab-04); }
+.text-oq-ab-08 { color: var(--kol-oq-ab-08); }
+.text-oq-ab-12 { color: var(--kol-oq-ab-12); }
+.text-oq-ab-16 { color: var(--kol-oq-ab-16); }
+.text-oq-ab-24 { color: var(--kol-oq-ab-24); }
+.text-oq-ab-32 { color: var(--kol-oq-ab-32); }
+.text-oq-ab-40 { color: var(--kol-oq-ab-40); }
+.text-oq-ab-48 { color: var(--kol-oq-ab-48); }
+.text-oq-ab-64 { color: var(--kol-oq-ab-64); }
+.text-oq-ab-72 { color: var(--kol-oq-ab-72); }
+.text-oq-ab-80 { color: var(--kol-oq-ab-80); }
+.text-oq-ab-88 { color: var(--kol-oq-ab-88); }
+.text-oq-ab-96 { color: var(--kol-oq-ab-96); }
+
+.text-oq-ab-inverse-01 { color: var(--kol-oq-ab-inverse-01); }
+.text-oq-ab-inverse-02 { color: var(--kol-oq-ab-inverse-02); }
+.text-oq-ab-inverse-04 { color: var(--kol-oq-ab-inverse-04); }
+.text-oq-ab-inverse-08 { color: var(--kol-oq-ab-inverse-08); }
+.text-oq-ab-inverse-12 { color: var(--kol-oq-ab-inverse-12); }
+.text-oq-ab-inverse-16 { color: var(--kol-oq-ab-inverse-16); }
+.text-oq-ab-inverse-24 { color: var(--kol-oq-ab-inverse-24); }
+.text-oq-ab-inverse-32 { color: var(--kol-oq-ab-inverse-32); }
+.text-oq-ab-inverse-40 { color: var(--kol-oq-ab-inverse-40); }
+.text-oq-ab-inverse-48 { color: var(--kol-oq-ab-inverse-48); }
+.text-oq-ab-inverse-64 { color: var(--kol-oq-ab-inverse-64); }
+.text-oq-ab-inverse-72 { color: var(--kol-oq-ab-inverse-72); }
+.text-oq-ab-inverse-80 { color: var(--kol-oq-ab-inverse-80); }
+.text-oq-ab-inverse-88 { color: var(--kol-oq-ab-inverse-88); }
+.text-oq-ab-inverse-96 { color: var(--kol-oq-ab-inverse-96); }
+
+.border-oq-ab-01 { border-color: var(--kol-oq-ab-01); }
+.border-oq-ab-02 { border-color: var(--kol-oq-ab-02); }
+.border-oq-ab-04 { border-color: var(--kol-oq-ab-04); }
+.border-oq-ab-08 { border-color: var(--kol-oq-ab-08); }
+.border-oq-ab-12 { border-color: var(--kol-oq-ab-12); }
+.border-oq-ab-16 { border-color: var(--kol-oq-ab-16); }
+.border-oq-ab-24 { border-color: var(--kol-oq-ab-24); }
+.border-oq-ab-32 { border-color: var(--kol-oq-ab-32); }
+.border-oq-ab-40 { border-color: var(--kol-oq-ab-40); }
+.border-oq-ab-48 { border-color: var(--kol-oq-ab-48); }
+.border-oq-ab-64 { border-color: var(--kol-oq-ab-64); }
+.border-oq-ab-72 { border-color: var(--kol-oq-ab-72); }
+.border-oq-ab-80 { border-color: var(--kol-oq-ab-80); }
+.border-oq-ab-88 { border-color: var(--kol-oq-ab-88); }
+.border-oq-ab-96 { border-color: var(--kol-oq-ab-96); }
+
+.border-oq-ab-inverse-01 { border-color: var(--kol-oq-ab-inverse-01); }
+.border-oq-ab-inverse-02 { border-color: var(--kol-oq-ab-inverse-02); }
+.border-oq-ab-inverse-04 { border-color: var(--kol-oq-ab-inverse-04); }
+.border-oq-ab-inverse-08 { border-color: var(--kol-oq-ab-inverse-08); }
+.border-oq-ab-inverse-12 { border-color: var(--kol-oq-ab-inverse-12); }
+.border-oq-ab-inverse-16 { border-color: var(--kol-oq-ab-inverse-16); }
+.border-oq-ab-inverse-24 { border-color: var(--kol-oq-ab-inverse-24); }
+.border-oq-ab-inverse-32 { border-color: var(--kol-oq-ab-inverse-32); }
+.border-oq-ab-inverse-40 { border-color: var(--kol-oq-ab-inverse-40); }
+.border-oq-ab-inverse-48 { border-color: var(--kol-oq-ab-inverse-48); }
+.border-oq-ab-inverse-64 { border-color: var(--kol-oq-ab-inverse-64); }
+.border-oq-ab-inverse-72 { border-color: var(--kol-oq-ab-inverse-72); }
+.border-oq-ab-inverse-80 { border-color: var(--kol-oq-ab-inverse-80); }
+.border-oq-ab-inverse-88 { border-color: var(--kol-oq-ab-inverse-88); }
+.border-oq-ab-inverse-96 { border-color: var(--kol-oq-ab-inverse-96); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.92.0",
+  "version": "0.94.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",