@kolkrabbi/kol-theme 0.84.0 → 0.85.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.
- package/kol-components-molecules.css +16 -12
- package/package.json +1 -1
|
@@ -1219,23 +1219,27 @@
|
|
|
1219
1219
|
* so a consumer never restates them (brand hand-wrote the fill and GUESSED
|
|
1220
1220
|
* the ink for its two icon buttons — that fork is what widening the set ends).
|
|
1221
1221
|
*
|
|
1222
|
-
* THE SET: well `fg-
|
|
1223
|
-
*
|
|
1224
|
-
*
|
|
1225
|
-
*
|
|
1222
|
+
* THE SET: well `fg-inverse-96` (user ruling 2026-08-28, swapped from
|
|
1223
|
+
* `fg-absolute-24` — measured on the dark theme, where the inverse tier is the
|
|
1224
|
+
* one that DARKENS: on the #121215 page inverse-96 lands ~14.2 against
|
|
1225
|
+
* absolute-24's 13.7, half a level apart. Unlike absolute it follows the
|
|
1226
|
+
* theme, so the light-theme well flips to the near-white inverse anchor) ·
|
|
1227
|
+
* active chip `fg-08` (user ruling 2026-08-28, down from the 0.78.1 fg-16) ·
|
|
1228
|
+
* inactive hover absolute-white @ 8% (a dark well wants a LIGHTER hover) ·
|
|
1229
|
+
* ink `fg-96`. `.kol-tone-inverse` stays selected for any class
|
|
1226
1230
|
* hand-stamped on the old name.
|
|
1227
1231
|
* ───────────────────────────────────────────────────────────────────── */
|
|
1228
|
-
.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-fg-
|
|
1232
|
+
.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
|
|
1229
1233
|
.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); }
|
|
1230
1234
|
.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); }
|
|
1231
|
-
.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-fg-
|
|
1232
|
-
.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-fg-
|
|
1235
|
+
.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
|
|
1236
|
+
.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
|
|
1233
1237
|
/* the trigger: rest and open are its only states — the pin-back rules above
|
|
1234
1238
|
* paint surface-secondary on hover/active, so the tone pins its own chip */
|
|
1235
1239
|
.kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.kol-tone-inverse,
|
|
1236
1240
|
.kol-dd-trigger.kol-tone-sunken:not(:disabled):hover, .kol-dd-trigger.kol-tone-inverse:not(:disabled):hover,
|
|
1237
|
-
.kol-dd-trigger.kol-tone-sunken:not(:disabled):active, .kol-dd-trigger.kol-tone-inverse:not(:disabled):active { background-color: var(--kol-fg-
|
|
1238
|
-
.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-fg-
|
|
1241
|
+
.kol-dd-trigger.kol-tone-sunken:not(:disabled):active, .kol-dd-trigger.kol-tone-inverse:not(:disabled):active { background-color: var(--kol-fg-inverse-96); }
|
|
1242
|
+
.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
|
|
1239
1243
|
/* the rest of the set — Button (icon-only especially), IconFrame, ThemeToggle:
|
|
1240
1244
|
* the well, transparent edge, fg-96 ink; hover the white wash, pressed the
|
|
1241
1245
|
* fg-08 chip — both LAYERED over the well (a gradient image over the fill),
|
|
@@ -1243,20 +1247,20 @@
|
|
|
1243
1247
|
.kol-btn.kol-tone-sunken,
|
|
1244
1248
|
.kol-icon-frame.kol-tone-sunken,
|
|
1245
1249
|
.kol-theme-toggle.kol-tone-sunken {
|
|
1246
|
-
background-color: var(--kol-fg-
|
|
1250
|
+
background-color: var(--kol-fg-inverse-96);
|
|
1247
1251
|
border-color: transparent;
|
|
1248
1252
|
color: var(--kol-fg-96);
|
|
1249
1253
|
}
|
|
1250
1254
|
@media (hover: hover) {
|
|
1251
1255
|
.kol-btn.kol-tone-sunken:not(.kol-btn-animate):not(:disabled):hover {
|
|
1252
|
-
background-color: var(--kol-fg-
|
|
1256
|
+
background-color: var(--kol-fg-inverse-96);
|
|
1253
1257
|
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));
|
|
1254
1258
|
color: var(--kol-fg-96);
|
|
1255
1259
|
}
|
|
1256
1260
|
}
|
|
1257
1261
|
.kol-btn.kol-tone-sunken.kol-btn-pressed,
|
|
1258
1262
|
.kol-btn.kol-tone-sunken:not(:disabled):active {
|
|
1259
|
-
background-color: var(--kol-fg-
|
|
1263
|
+
background-color: var(--kol-fg-inverse-96);
|
|
1260
1264
|
background-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
|
|
1261
1265
|
color: var(--kol-fg-96);
|
|
1262
1266
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.85.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",
|