@kolkrabbi/kol-theme 0.103.0 → 0.105.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/kol-base-tokens.css +6 -7
  2. package/kol-components-molecules.css +10 -4
  3. package/kol-opacity.css +110 -31
  4. package/kol-opaque.css +92 -12
  5. package/package.json +1 -1
package/kol-base-tokens.css CHANGED
@@ -69,7 +69,12 @@
69
69
  * which one the well points at, and that is this token's entire job.
70
70
  * Light: `oq-ab-inverse-96` (245, under the 250 page)
71
71
  * Dark: `oq-ab-96` (10, under the 18 page) */
72
- --kol-surface-sunken: var(--kol-oq-ab-inverse-96);
72
+ /* ONE LINE, BOTH THEMES (user, 2026-08-30: *"isnt ab what we want to use for
73
+ * sunken? how can we use ab- and ab-inverse if they dont flip"*). Once `ab`
74
+ * flips toward the ground, `oq-ab-96` IS the well everywhere — 245 under a
75
+ * 250 page in light, 10 under an 18 page in dark. The per-theme alias this
76
+ * replaced was the tell that the ladder underneath was wrong. */
77
+ --kol-surface-sunken: var(--kol-oq-ab-96);
73
78
 
74
79
  --kol-surface-inverse: #0e0e11;
75
80
  --kol-surface-on-inverse: #fcfbf8;
@@ -99,8 +104,6 @@
99
104
  --kol-surface-tertiary: #0e0e11;
100
105
  --kol-surface-on-tertiary: #ffffff;
101
106
 
102
- /* the sunken well, dark side — `oq-ab-96` (10) under the #121215 page (18) */
103
- --kol-surface-sunken: var(--kol-oq-ab-96);
104
107
 
105
108
  --kol-surface-inverse: #fcfbf8;
106
109
  --kol-surface-on-inverse: #0e0e11;
@@ -147,10 +150,6 @@
147
150
  --kol-surface-tertiary: #0e0e11;
148
151
  --kol-surface-on-tertiary: #ffffff;
149
152
 
150
- /* the sunken well, system-dark — this block is the one a user who never
151
- * touched the toggle gets, and it is the one the first pass of this fix
152
- * forgot: the `:root` light value would have leaked into system dark. */
153
- --kol-surface-sunken: var(--kol-oq-ab-96);
154
153
 
155
154
  --kol-surface-inverse: #fcfbf8;
156
155
  --kol-surface-on-inverse: #0e0e11;
package/kol-components-molecules.css CHANGED
@@ -1343,7 +1343,7 @@
1343
1343
  * a fixed near-white could only ever be right on one. */
1344
1344
  .kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
1345
1345
  .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); }
1346
- .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); }
1346
+ .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: var(--kol-fg-ab-inverse-08); }
1347
1347
  .kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
1348
1348
  .kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
1349
1349
  /* the tone's fill, one selector — nothing left to cancel (2026-08-28) */
@@ -1357,9 +1357,15 @@
1357
1357
  * #0e0e11 (14.0) in dark against the trigger's 14.2, #ffffff in light. */
1358
1358
  .kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
1359
1359
  /* the rest of the set — Button (icon-only especially), IconFrame, ThemeToggle:
1360
- * the well, transparent edge, fg-96 ink; hover the white wash, pressed the
1360
+ * the well, transparent edge, fg-96 ink; hover the CONTRAST wash, pressed the
1361
1361
  * fg-08 chip — both LAYERED over the well (a gradient image over the fill),
1362
- * since one background cannot stack two translucent colours */
1362
+ * since one background cannot stack two translucent colours.
1363
+ *
1364
+ * The wash is `fg-ab-inverse-08`, not a hardcoded white (2026-08-30). A frozen
1365
+ * white wash lightens the well in dark and is INVISIBLE in light — white on a
1366
+ * 245 ground. `fg-ab-inverse-*` flips toward the ink, so it is white over the
1367
+ * dark well and black over the light one: a visible step on both. Same class of
1368
+ * bug as the tone itself, one layer down. */
1363
1369
  .kol-btn.kol-tone-sunken,
1364
1370
  .kol-icon-frame.kol-tone-sunken,
1365
1371
  .kol-theme-toggle.kol-tone-sunken {
@@ -1370,7 +1376,7 @@
1370
1376
  @media (hover: hover) {
1371
1377
  .kol-btn.kol-tone-sunken:not(.kol-btn-animate):not(:disabled):hover {
1372
1378
  background-color: var(--kol-surface-sunken);
1373
- 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));
1379
+ background-image: linear-gradient(var(--kol-fg-ab-inverse-08), var(--kol-fg-ab-inverse-08));
1374
1380
  color: var(--kol-fg-96);
1375
1381
  }
1376
1382
  }
package/kol-opacity.css CHANGED
@@ -68,21 +68,41 @@
68
68
  * TOKENS — Absolute tier (theme-independent black, fixed opacity stops)
69
69
  * ============================================================================ */
70
70
 
71
- --kol-fg-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent);
72
- --kol-fg-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent);
73
- --kol-fg-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent);
74
- --kol-fg-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent);
75
- --kol-fg-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent);
76
- --kol-fg-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent);
77
- --kol-fg-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent);
78
- --kol-fg-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent);
79
- --kol-fg-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent);
80
- --kol-fg-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
81
- --kol-fg-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent);
82
- --kol-fg-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent);
83
- --kol-fg-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent);
84
- --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent);
85
- --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent);
71
+ /* LIGHT ground — `ab` starts from white (see kol-opaque.css for the axis) */
72
+ --kol-fg-ab-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, transparent);
73
+ --kol-fg-ab-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, transparent);
74
+ --kol-fg-ab-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, transparent);
75
+ --kol-fg-ab-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent);
76
+ --kol-fg-ab-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, transparent);
77
+ --kol-fg-ab-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, transparent);
78
+ --kol-fg-ab-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, transparent);
79
+ --kol-fg-ab-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, transparent);
80
+ --kol-fg-ab-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent);
81
+ --kol-fg-ab-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, transparent);
82
+ --kol-fg-ab-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, transparent);
83
+ --kol-fg-ab-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, transparent);
84
+ --kol-fg-ab-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, transparent);
85
+ --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent);
86
+ --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent);
87
+
88
+ /* fg-ab-inverse — the CONTRASTING pure pole. Declared in this shared scope
89
+ * as the light-ground value (black over a light well); the dark scopes below
90
+ * override it to white. Its `fg-ab` twin above works the same way. */
91
+ --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent);
92
+ --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent);
93
+ --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent);
94
+ --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent);
95
+ --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent);
96
+ --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent);
97
+ --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent);
98
+ --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent);
99
+ --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent);
100
+ --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
101
+ --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent);
102
+ --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent);
103
+ --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent);
104
+ --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent);
105
+ --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent);
86
106
 
87
107
  /* ============================================================================
88
108
  * TOKENS — Inverse tier (foreground on inverse surface)
@@ -108,6 +128,81 @@
108
128
  * classes below — no intermediate alias tokens. */
109
129
  }
110
130
 
131
+ /* `ab` FLIPS TOWARD THE GROUND (user ruling 2026-08-30) — the same axis as
132
+ * kol-opaque.css's `oq-ab-*`. In dark the ground is black, so a translucent
133
+ * `ab` wash is black; in light it is white. `ab-inverse-*` is the opposite pole
134
+ * in each theme, so it is the half that contrasts. */
135
+ :is([data-theme="dark"], .dark) {
136
+ --kol-fg-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent);
137
+ --kol-fg-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent);
138
+ --kol-fg-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent);
139
+ --kol-fg-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent);
140
+ --kol-fg-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent);
141
+ --kol-fg-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent);
142
+ --kol-fg-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent);
143
+ --kol-fg-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent);
144
+ --kol-fg-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent);
145
+ --kol-fg-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
146
+ --kol-fg-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent);
147
+ --kol-fg-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent);
148
+ --kol-fg-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent);
149
+ --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent);
150
+ --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent);
151
+
152
+ --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, transparent);
153
+ --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, transparent);
154
+ --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, transparent);
155
+ --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent);
156
+ --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, transparent);
157
+ --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, transparent);
158
+ --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, transparent);
159
+ --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, transparent);
160
+ --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent);
161
+ --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, transparent);
162
+ --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, transparent);
163
+ --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, transparent);
164
+ --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, transparent);
165
+ --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent);
166
+ --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent);
167
+ }
168
+
169
+ @media (prefers-color-scheme: dark) {
170
+ :root:not([data-theme="light"]):not(.light) {
171
+ --kol-fg-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent);
172
+ --kol-fg-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent);
173
+ --kol-fg-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent);
174
+ --kol-fg-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent);
175
+ --kol-fg-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent);
176
+ --kol-fg-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent);
177
+ --kol-fg-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent);
178
+ --kol-fg-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent);
179
+ --kol-fg-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent);
180
+ --kol-fg-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
181
+ --kol-fg-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent);
182
+ --kol-fg-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent);
183
+ --kol-fg-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent);
184
+ --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent);
185
+ --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent);
186
+
187
+ --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, transparent);
188
+ --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, transparent);
189
+ --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, transparent);
190
+ --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent);
191
+ --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, transparent);
192
+ --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, transparent);
193
+ --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, transparent);
194
+ --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, transparent);
195
+ --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent);
196
+ --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, transparent);
197
+ --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, transparent);
198
+ --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, transparent);
199
+ --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, transparent);
200
+ --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent);
201
+ --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent);
202
+ }
203
+ }
204
+
205
+
111
206
  /* ==============================================================================
112
207
  * CLASSES — Base (no stop, 100% opacity)
113
208
  * ============================================================================== */
@@ -498,22 +593,6 @@
498
593
  --kol-fg-absolute-inverse-80: color-mix(in srgb, var(--kol-color-white) 80%, transparent);
499
594
  --kol-fg-absolute-inverse-88: color-mix(in srgb, var(--kol-color-white) 88%, transparent);
500
595
  --kol-fg-absolute-inverse-96: color-mix(in srgb, var(--kol-color-white) 96%, transparent);
501
- /* fg-ab-inverse */
502
- --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, transparent);
503
- --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, transparent);
504
- --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, transparent);
505
- --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent);
506
- --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, transparent);
507
- --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, transparent);
508
- --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, transparent);
509
- --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, transparent);
510
- --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, transparent);
511
- --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, transparent);
512
- --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, transparent);
513
- --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, transparent);
514
- --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, transparent);
515
- --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent);
516
- --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent);
517
596
  --kol-color-absolute-black: var(--kol-color-black);
518
597
  --kol-color-absolute-white: var(--kol-color-white);
519
598
  }
package/kol-opaque.css CHANGED
@@ -219,22 +219,66 @@
219
219
  .border-oq-inverse-96 { border-color: var(--kol-oq-inverse-96); }
220
220
 
221
221
  /* ============================================================================
222
- * TOKENS — ABSOLUTE tiers (user ruling 2026-08-28: "you can make bg-oq-ab-*
223
- * and bg-oq-ab-inverse-*")
222
+ * TOKENS — the `ab` tiers: PURE poles, and they FLIP (user ruling 2026-08-30)
224
223
  *
225
- * The gap they close: the estate had opaque greys that FOLLOW the theme
226
- * (`oq-*`, `oq-inverse-*` — baked onto a surface token) and absolute inks that
227
- * are theme-invariant but TRANSLUCENT (`fg-ab-*`). "Opaque and theme-invariant"
228
- * was not expressible, which is exactly what a sunken control wants: a plate
229
- * that is darker than its plane, on both themes, that nothing bleeds through.
224
+ * `ab` mixes the absolute ends of the range — #000000 / #ffffff — and which end
225
+ * it starts from follows the THEME'S OWN SIDE, not the ink's:
230
226
  *
231
- * Same construction as the tiers above, with the absolutes standing in for the
232
- * surface pair — so these are flat greys that never move:
233
- * oq-ab-NN black NN% into WHITE — a light ground darkening
234
- * oq-ab-inverse-NN white NN% into BLACK — a dark ground lightening
227
+ * light theme ab-NN = white NN% into black → ab-96 is 245, under a 250 page
228
+ * dark theme ab-NN = black NN% into white → ab-96 is 10, under an 18 page
229
+ *
230
+ * So `oq-ab-96` IS the well, in both themes, with no per-theme alias. That is
231
+ * the whole reason this family exists: a percentage of the page mixed into the
232
+ * page cannot darken it, so a well needs a pole outside the theme's range.
233
+ *
234
+ * NOTE THE DIRECTION. `fg-*` / `oq-*` flip toward the INK (light ink on dark).
235
+ * `ab-*` flips toward the GROUND. `ab-inverse-*` is the opposite pole in each
236
+ * theme, so it is the one that contrasts.
237
+ *
238
+ * These were frozen from 2026-08-28 until now — both ladders read the same
239
+ * number in either theme, which is why `sunken` could not be expressed with
240
+ * them and got patched with `oq-inverse-96` instead. `absolute-*` stays frozen;
241
+ * that is its job, and it is a different family.
235
242
  * ============================================================================ */
236
243
 
237
- :root {
244
+ /* LIGHT — the ground is white, so `ab` starts from white */
245
+ :root,
246
+ :is([data-theme="light"], .light) {
247
+ --kol-oq-ab-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
248
+ --kol-oq-ab-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
249
+ --kol-oq-ab-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, var(--kol-color-ab-black));
250
+ --kol-oq-ab-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, var(--kol-color-ab-black));
251
+ --kol-oq-ab-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, var(--kol-color-ab-black));
252
+ --kol-oq-ab-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, var(--kol-color-ab-black));
253
+ --kol-oq-ab-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, var(--kol-color-ab-black));
254
+ --kol-oq-ab-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, var(--kol-color-ab-black));
255
+ --kol-oq-ab-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, var(--kol-color-ab-black));
256
+ --kol-oq-ab-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, var(--kol-color-ab-black));
257
+ --kol-oq-ab-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, var(--kol-color-ab-black));
258
+ --kol-oq-ab-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, var(--kol-color-ab-black));
259
+ --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
260
+ --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
261
+ --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
262
+
263
+ --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
264
+ --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
265
+ --kol-oq-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-color-ab-white));
266
+ --kol-oq-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, var(--kol-color-ab-white));
267
+ --kol-oq-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, var(--kol-color-ab-white));
268
+ --kol-oq-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, var(--kol-color-ab-white));
269
+ --kol-oq-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, var(--kol-color-ab-white));
270
+ --kol-oq-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, var(--kol-color-ab-white));
271
+ --kol-oq-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, var(--kol-color-ab-white));
272
+ --kol-oq-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, var(--kol-color-ab-white));
273
+ --kol-oq-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, var(--kol-color-ab-white));
274
+ --kol-oq-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, var(--kol-color-ab-white));
275
+ --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
276
+ --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
277
+ --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
278
+ }
279
+
280
+ /* DARK — the ground is black, so `ab` starts from black */
281
+ :is([data-theme="dark"], .dark) {
238
282
  --kol-oq-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
239
283
  --kol-oq-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
240
284
  --kol-oq-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-color-ab-white));
@@ -268,6 +312,42 @@
268
312
  --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
269
313
  }
270
314
 
315
+ /* system-follow: the block a user who never touched the toggle gets */
316
+ @media (prefers-color-scheme: dark) {
317
+ :root:not([data-theme="light"]):not(.light) {
318
+ --kol-oq-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
319
+ --kol-oq-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
320
+ --kol-oq-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-color-ab-white));
321
+ --kol-oq-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, var(--kol-color-ab-white));
322
+ --kol-oq-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, var(--kol-color-ab-white));
323
+ --kol-oq-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, var(--kol-color-ab-white));
324
+ --kol-oq-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, var(--kol-color-ab-white));
325
+ --kol-oq-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, var(--kol-color-ab-white));
326
+ --kol-oq-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, var(--kol-color-ab-white));
327
+ --kol-oq-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, var(--kol-color-ab-white));
328
+ --kol-oq-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, var(--kol-color-ab-white));
329
+ --kol-oq-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, var(--kol-color-ab-white));
330
+ --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
331
+ --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
332
+ --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
333
+
334
+ --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
335
+ --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
336
+ --kol-oq-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, var(--kol-color-ab-black));
337
+ --kol-oq-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, var(--kol-color-ab-black));
338
+ --kol-oq-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, var(--kol-color-ab-black));
339
+ --kol-oq-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, var(--kol-color-ab-black));
340
+ --kol-oq-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, var(--kol-color-ab-black));
341
+ --kol-oq-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, var(--kol-color-ab-black));
342
+ --kol-oq-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, var(--kol-color-ab-black));
343
+ --kol-oq-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, var(--kol-color-ab-black));
344
+ --kol-oq-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, var(--kol-color-ab-black));
345
+ --kol-oq-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, var(--kol-color-ab-black));
346
+ --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
347
+ --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
348
+ --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
349
+ }
350
+ }
271
351
  /* CLASSES — absolute tiers */
272
352
  .bg-oq-ab-01 { background-color: var(--kol-oq-ab-01); }
273
353
  .bg-oq-ab-02 { background-color: var(--kol-oq-ab-02); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-theme",
3
- "version": "0.103.0",
3
+ "version": "0.105.0",
4
4
  "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
5
5
  "license": "MIT",
6
6
  "type": "module",