@kolkrabbi/kol-theme 0.79.1 → 0.80.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-shell.css +20 -39
- package/package.json +1 -1
package/kol-components-shell.css
CHANGED
|
@@ -4,54 +4,35 @@
|
|
|
4
4
|
* Chrome for @kolkrabbi/kol-shell — the app shell set (NavRail + AppShell +
|
|
5
5
|
* page scaffolds) lifted from kol-monitor/kol-mirror 2026-08-14. App chrome,
|
|
6
6
|
* not site chrome: kol-framework owns the site shell (SideNav, footer,
|
|
7
|
-
* heroes); this file owns the
|
|
7
|
+
* heroes); this file owns the rail's live width token and the page gutter.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
:root {
|
|
11
|
-
/*
|
|
12
|
-
*
|
|
13
|
-
|
|
11
|
+
/* THE RAIL WIDTH IS LIVE (RailSideNavPixelParity, kol-fxr 2026-08-28 — user:
|
|
12
|
+
* "same component both states super nice"): AppShell's rail is kol-framework's
|
|
13
|
+
* SideNav since kol-shell 0.13.0, so the token that was a fixed 48 now reads
|
|
14
|
+
* the sidenav's width in whichever state it is in — 16rem open, 56px
|
|
15
|
+
* collapsed, 0 in the ≤767 drawer — and every consumer that offsets a fixed
|
|
16
|
+
* element by it (`--monitor-rail`, `--fxr-rail`) follows the drag. AppShell
|
|
17
|
+
* writes `0px` inline while the rail is hidden (useNavHidden). One rail, one
|
|
18
|
+
* width, one name: 48 and 56 were two components never measured against
|
|
19
|
+
* each other. */
|
|
20
|
+
--kol-shell-rail-width: var(--kol-sidenav-w, 16rem);
|
|
14
21
|
/* Page gutter — PageShell's padding and PageBleed's negative margin. */
|
|
15
22
|
--kol-shell-page-pad: 48px;
|
|
16
23
|
}
|
|
24
|
+
:root[data-sidenav="collapsed"] { --kol-shell-rail-width: var(--kol-sidenav-w-collapsed, 56px); }
|
|
25
|
+
@media (max-width: 1024px) { :root { --kol-shell-rail-width: var(--kol-sidenav-w-collapsed, 56px); } }
|
|
26
|
+
@media (max-width: 767px) { :root { --kol-shell-rail-width: 0px; } }
|
|
17
27
|
|
|
18
28
|
/* ── NavRail ────────────────────────────────────────────────────────────── */
|
|
19
29
|
|
|
20
|
-
/*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
.kol-shell-rail {
|
|
27
|
-
position: fixed;
|
|
28
|
-
top: 0;
|
|
29
|
-
bottom: 0;
|
|
30
|
-
left: 0;
|
|
31
|
-
width: var(--kol-shell-rail-width);
|
|
32
|
-
z-index: var(--kol-z-sticky);
|
|
33
|
-
display: flex;
|
|
34
|
-
flex-direction: column;
|
|
35
|
-
align-items: center;
|
|
36
|
-
padding-top: 16px;
|
|
37
|
-
gap: 8px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/* Rail nav items — the active-state ruling (user, 2026-08-12, monitor
|
|
41
|
-
* session), carried natively so consumers delete their overrides: ink
|
|
42
|
-
* full-strength in EVERY state (the nav variant's oq-64 rest is site-nav
|
|
43
|
-
* quiet, wrong on a 48px icon rail); hover = the oq-04 wash (from the
|
|
44
|
-
* variant); active route = that wash HELD ON. Never `selected`/`pressed` —
|
|
45
|
-
* navigation is location, not a toggled tool. Scoped to the rail: the global
|
|
46
|
-
* .kol-btn-nav[aria-current="page"] brightness-only rule (0.11.7 ruling)
|
|
47
|
-
* stays the site-nav law. */
|
|
48
|
-
.kol-shell-rail .kol-btn-nav {
|
|
49
|
-
color: var(--kol-oq-96);
|
|
50
|
-
}
|
|
51
|
-
.kol-shell-rail .kol-btn-nav[aria-current="page"] {
|
|
52
|
-
background-color: var(--kol-oq-04);
|
|
53
|
-
color: var(--kol-oq-96);
|
|
54
|
-
}
|
|
30
|
+
/* RETIRED 0.80.0 (RailSideNavPixelParity): `.kol-shell-rail` — the fixed
|
|
31
|
+
* 48px rail's geometry, stacking and its 2026-08-12 active-state rules (ink
|
|
32
|
+
* oq-96, the oq-04 wash held on via aria-current). The shell rail is a
|
|
33
|
+
* SideNav now and wears the sidenav's hop, collapse and active rules
|
|
34
|
+
* (kol-framework.css + the `.kol-sidenav-hop` atoms). Nothing selects the
|
|
35
|
+
* class; it is kept out of the sheet so no consumer copies a dead geometry. */
|
|
55
36
|
|
|
56
37
|
/* ── GridCard preview fits ──────────────────────────────────────────────── */
|
|
57
38
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.80.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",
|