@kolkrabbi/kol-theme 0.79.0 → 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-molecules.css +8 -1
- package/kol-components-shell.css +20 -39
- package/package.json +1 -1
|
@@ -1029,9 +1029,16 @@
|
|
|
1029
1029
|
|
|
1030
1030
|
/* The card's rest colours, for the same reason as .kol-row — an inline
|
|
1031
1031
|
* background/borderColor outranks .kol-content-hover:hover, so the step
|
|
1032
|
-
* silently never rendered.
|
|
1032
|
+
* silently never rendered.
|
|
1033
|
+
* `background-clip: padding-box` (CardCornerLeak, kol-monitor 2026-08-28,
|
|
1034
|
+
* verified on a pixel crop): the fill and the border are both translucent
|
|
1035
|
+
* ink, and with the default border-box the fill runs UNDER the 1px border —
|
|
1036
|
+
* an opaque media child clips to the inner radius, the browser antialiases
|
|
1037
|
+
* the clip path and the border path separately, and a hairline of the
|
|
1038
|
+
* lighter fill bleeds through on the arc, bright only on the curve. */
|
|
1033
1039
|
.kol-card {
|
|
1034
1040
|
background: var(--kol-card-bg);
|
|
1041
|
+
background-clip: padding-box;
|
|
1035
1042
|
border-color: var(--kol-card-border);
|
|
1036
1043
|
transition: background-color 300ms var(--kol-ease-house),
|
|
1037
1044
|
border-color 300ms var(--kol-ease-house);
|
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",
|