@kolkrabbi/kol-theme 0.76.0 → 0.77.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/README.md +5 -1
- package/kol-core.css +34 -0
- package/kol-design-tokens.css +175 -0
- package/kol-theme.css +3 -169
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -14,7 +14,11 @@ In a Vite + Tailwind v4 app, import the barrel after Tailwind:
|
|
|
14
14
|
|
|
15
15
|
```css
|
|
16
16
|
@import "tailwindcss";
|
|
17
|
-
@import "@kolkrabbi/kol-theme";
|
|
17
|
+
@import "@kolkrabbi/kol-theme"; /* everything, domain packs included */
|
|
18
|
+
/* or the app tier only — chess · workshop · foundry · dashboards · styleguide
|
|
19
|
+
* are 23 % of the theme, and an app that renders none of them need not ship them:
|
|
20
|
+
* @import "@kolkrabbi/kol-theme/core";
|
|
21
|
+
* @import "@kolkrabbi/kol-theme/kol-components-dashboards.css" layer(components); ← a pack you do render, after it */
|
|
18
22
|
```
|
|
19
23
|
|
|
20
24
|
Cascade order is load-bearing — `kol-theme` must come after Tailwind so its component classes and tokens resolve correctly. Individual files are also reachable (`@kolkrabbi/kol-theme/kol-color.css`, etc.) if you need finer control.
|
package/kol-core.css
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* kol-core.css — THE APP TIER of the theme, without the domain packs
|
|
3
|
+
* (FullConsumptionContract, kol-monitor 2026-08-27 — user: "how are you fully
|
|
4
|
+
* consuming without stuff that's irrelevant to development (specific packages
|
|
5
|
+
* like chess and foundry)"). The umbrella `kol-theme.css` imports every pack —
|
|
6
|
+
* chess · workshop · foundry · dashboards · styleguide were 81,134 bytes, 23 % of
|
|
7
|
+
* the theme, in a rack app's bundle that renders none of them; plain CSS
|
|
8
|
+
* @imports do not tree-shake. A consumer could hand-assemble the tier file by
|
|
9
|
+
* file, but then owns the cascade order by hand — the one thing the umbrella
|
|
10
|
+
* exists to guarantee. This entry guarantees it for the core.
|
|
11
|
+
*
|
|
12
|
+
* @import "tailwindcss";
|
|
13
|
+
* @import "@kolkrabbi/kol-theme/core";
|
|
14
|
+
* @import "@kolkrabbi/kol-theme/kol-components-dashboards.css" layer(components); ← a domain pack, if you render it
|
|
15
|
+
*
|
|
16
|
+
* Same files, same order as the umbrella, minus the five domain packs; the
|
|
17
|
+
* design tokens last, as in the umbrella. Domain packs import AFTER this entry
|
|
18
|
+
* (they only ever add their own classes). The umbrella `"."` is unchanged — no
|
|
19
|
+
* consumer moves unless it chooses to.
|
|
20
|
+
*/
|
|
21
|
+
@import "./kol-base-tokens.css" layer(components);
|
|
22
|
+
@import "./kol-color.css" layer(components);
|
|
23
|
+
@import "./kol-opacity.css" layer(components);
|
|
24
|
+
@import "./kol-opaque.css" layer(components);
|
|
25
|
+
@import "./kol-typography.css" layer(components);
|
|
26
|
+
@import "./kol-typography-mono.css" layer(components);
|
|
27
|
+
@import "./kol-type-mono-classes.css" layer(components);
|
|
28
|
+
@import "./kol-type-roles.css" layer(components);
|
|
29
|
+
@import "./kol-utilities.css" layer(components);
|
|
30
|
+
@import "./kol-components-atoms.css" layer(components);
|
|
31
|
+
@import "./kol-components-molecules.css" layer(components);
|
|
32
|
+
@import "./kol-components-organisms.css" layer(components);
|
|
33
|
+
@import "./kol-components-shell.css" layer(components);
|
|
34
|
+
@import "./kol-design-tokens.css" layer(components);
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* kol-design-tokens.css — the theme-level design tokens (spacing, card pads,
|
|
3
|
+
* wall gaps, the house curve, content widths, radius, shadows, transitions, the
|
|
4
|
+
* z ladder, opacity values) + the dark-mode shadow mirror. Lifted OUT of
|
|
5
|
+
* kol-theme.css 2026-08-27 (FullConsumptionContract, kol-monitor) so the CORE
|
|
6
|
+
* entry (kol-core.css) carries them too; the umbrella imports this file at the
|
|
7
|
+
* same position it held inline, so its emitted CSS is unchanged. Layered at
|
|
8
|
+
* import — `@import "./kol-design-tokens.css" layer(components);`.
|
|
9
|
+
*/
|
|
10
|
+
:root {
|
|
11
|
+
/* Spacing scale (4px base) */
|
|
12
|
+
--kol-spacing-1: 0.25rem; /* 4px */
|
|
13
|
+
--kol-spacing-2: 0.5rem; /* 8px */
|
|
14
|
+
--kol-spacing-3: 0.75rem; /* 12px */
|
|
15
|
+
--kol-spacing-4: 1rem; /* 16px */
|
|
16
|
+
--kol-spacing-5: 1.25rem; /* 20px */
|
|
17
|
+
--kol-spacing-6: 1.5rem; /* 24px */
|
|
18
|
+
--kol-spacing-8: 2rem; /* 32px */
|
|
19
|
+
--kol-spacing-10: 2.5rem; /* 40px */
|
|
20
|
+
--kol-spacing-12: 3rem; /* 48px */
|
|
21
|
+
--kol-spacing-16: 4rem; /* 64px */
|
|
22
|
+
--kol-spacing-20: 5rem; /* 80px */
|
|
23
|
+
--kol-spacing-24: 6rem; /* 96px */
|
|
24
|
+
|
|
25
|
+
/* Semantic spacing aliases */
|
|
26
|
+
--kol-spacing-section: var(--kol-spacing-20);
|
|
27
|
+
--kol-spacing-container: var(--kol-spacing-10);
|
|
28
|
+
--kol-spacing-gap-sm: var(--kol-spacing-2);
|
|
29
|
+
--kol-spacing-gap-md: var(--kol-spacing-4);
|
|
30
|
+
--kol-spacing-gap-lg: var(--kol-spacing-6);
|
|
31
|
+
|
|
32
|
+
/* RAIL ROW rhythm (2026-08-01) — the y-padding every sidebar row shares:
|
|
33
|
+
* the eyebrow (.shell-sidebar-toggle) and the nav group header
|
|
34
|
+
* (.shell-nav-group-header). Deliberately OFF the spacing scale — a tighter
|
|
35
|
+
* chrome rhythm than --kol-spacing-1, and both rules already carried the
|
|
36
|
+
* same literal in two places. Named here so the left and right rails cannot
|
|
37
|
+
* disagree about it again; the row's bottom separation is --kol-spacing-2
|
|
38
|
+
* and needs no alias of its own. */
|
|
39
|
+
--kol-pad-rail-row-y: 0.375rem;
|
|
40
|
+
|
|
41
|
+
/* The row's TEXT INDENT — `.shell-nav-item`'s left padding, named 2026-08-01
|
|
42
|
+
* so anything else that has to line up with a row (the tag shelf) reads the
|
|
43
|
+
* indent instead of retyping it. */
|
|
44
|
+
--kol-pad-rail-row-x: 1.25rem;
|
|
45
|
+
|
|
46
|
+
/* CARD padding (2026-08-15, content-card ruling) — flat, stepped by the
|
|
47
|
+
* card's `size` prop, never by breakpoint. 12/16/24. */
|
|
48
|
+
--kol-pad-card-sm: 0.75rem;
|
|
49
|
+
--kol-pad-card-md: 1rem;
|
|
50
|
+
--kol-pad-card-lg: 1.5rem;
|
|
51
|
+
|
|
52
|
+
/* WALL gaps (2026-08-15) — the same treatment `--kol-pad-card-*` got, for
|
|
53
|
+
* the same reason: these two numbers were re-typed as a ternary at every
|
|
54
|
+
* call site (kol-monitor HomePage ×2, LibraryPage ×2, MediaLibrary,
|
|
55
|
+
* kol-website Work, both foundry grids, StackLatest) and a value repeated
|
|
56
|
+
* nine times is a value that has already drifted somewhere.
|
|
57
|
+
*
|
|
58
|
+
* PX, not rem — a gap is a layout measure, not type (user ruling
|
|
59
|
+
* 2026-08-15), so a reader bumping their browser text size must not re-space
|
|
60
|
+
* every wall in the estate.
|
|
61
|
+
*
|
|
62
|
+
* Two rungs because a wall of CARDS and a stack of ROWS want different air:
|
|
63
|
+
* cards are objects with their own edges and need separating; rows are lines
|
|
64
|
+
* in a table and 24px between them reads as a broken list. */
|
|
65
|
+
--kol-gap-wall-grid: 24px;
|
|
66
|
+
--kol-gap-wall-list: 8px;
|
|
67
|
+
|
|
68
|
+
/* The house curve (2026-08-15) — the easing the cards actually use; was
|
|
69
|
+
* hardcoded in 5 files before this token existed. Curve only, no duration:
|
|
70
|
+
* it pairs with whatever duration the motion needs.
|
|
71
|
+
*
|
|
72
|
+
* BALANCED, not expo (user ruling 2026-08-15). This was easeOutExpo
|
|
73
|
+
* `cubic-bezier(0.16, 1, 0.3, 1)`, which spends ~90% of its distance in the
|
|
74
|
+
* first fifth of the duration and the rest on a settle you cannot see — so
|
|
75
|
+
* every motion read as instant no matter what duration it was given, and a
|
|
76
|
+
* small hover affordance never showed its move at all. */
|
|
77
|
+
--kol-ease-house: cubic-bezier(0.4, 0, 0.2, 1);
|
|
78
|
+
/* the bounce — overshoots past its target and settles back (y > 1 is what
|
|
79
|
+
* makes it bounce; house only decelerates). For a press that should feel
|
|
80
|
+
* springy rather than merely smooth. */
|
|
81
|
+
--kol-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
82
|
+
|
|
83
|
+
/* Content widths (2026-07-28; panel added 2026-07-30) — ONE frame, three
|
|
84
|
+
* inner caps (chess law). Every page: mx-auto max-w-shell + the one padding
|
|
85
|
+
* rhythm, content LEFT-ANCHORED inside. Width is a content decision, never a
|
|
86
|
+
* page identity: column caps reading blocks, panel caps tables / code /
|
|
87
|
+
* framed panels (the ~900–1200 band every consumer was improvising —
|
|
88
|
+
* kol-website audit, lobby/WidthSystemContradictions), measure caps running
|
|
89
|
+
* text. Nothing else — a hardcoded max-w-[Npx] at a call site means this
|
|
90
|
+
* scale failed; file it, don't improvise it.
|
|
91
|
+
* kol-framework's --kol-container-max is the responsive RESOLUTION of the
|
|
92
|
+
* shell (100% → 1400 → 1600 → shell), not a rival family.
|
|
93
|
+
*
|
|
94
|
+
* canvas (2026-07-31, user ruling) — the rung between shell and panel: the
|
|
95
|
+
* BODY of a page inside the shell's main column, i.e. item fields (swatch
|
|
96
|
+
* grids, the icon wall, card galleries) that panel would squeeze and the
|
|
97
|
+
* frame does not bind. Authored in rem because it is a max-width, not a
|
|
98
|
+
* device measure: 87.5rem = 1400 at the default root size. Flat at every
|
|
99
|
+
* breakpoint — a max-width only bites once there is room for it, and it
|
|
100
|
+
* nests: a table inside it still stops at panel, a paragraph at measure. */
|
|
101
|
+
--kol-content-canvas: 87.5rem;
|
|
102
|
+
--kol-content-shell: 1800px;
|
|
103
|
+
--kol-content-panel: 960px;
|
|
104
|
+
--kol-content-column: 768px;
|
|
105
|
+
--kol-content-measure: 65ch;
|
|
106
|
+
|
|
107
|
+
/* Border radius (4px increments) */
|
|
108
|
+
--kol-radius-none: 0;
|
|
109
|
+
/* xs (2026-08-01) — the hairline rung. Claimed out loud: 2px had SIX
|
|
110
|
+
hand-written `rounded-[2px]` call sites (swatches, colour rows, the
|
|
111
|
+
glass panel) and no token, so the scale's 4px floor was simply being
|
|
112
|
+
ignored rather than followed. A value used six times is a rung. */
|
|
113
|
+
--kol-radius-xs: 2px;
|
|
114
|
+
--kol-radius-sm: 4px;
|
|
115
|
+
/* CONTAINERS ARE 4px (user ruling 2026-08-09, "change 8px radius to 4px in
|
|
116
|
+
containers. everywhere."). The repo ships 4px or full, nothing between —
|
|
117
|
+
md/lg/xl/2xl stay resolvable so no consumer's var() breaks, but they all
|
|
118
|
+
collapse to the 4px value. Do not re-widen a rung without a ruling. */
|
|
119
|
+
--kol-radius-md: 4px;
|
|
120
|
+
--kol-radius-lg: 4px;
|
|
121
|
+
--kol-radius-xl: 4px;
|
|
122
|
+
--kol-radius-2xl: 4px;
|
|
123
|
+
--kol-radius-full: 9999px;
|
|
124
|
+
|
|
125
|
+
/* Shadows (subtle elevation) */
|
|
126
|
+
--kol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
127
|
+
--kol-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
|
|
128
|
+
--kol-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
129
|
+
--kol-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
|
|
130
|
+
--kol-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
131
|
+
|
|
132
|
+
/* Transitions (consistent timing) */
|
|
133
|
+
--kol-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
134
|
+
--kol-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
135
|
+
--kol-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
136
|
+
--kol-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
137
|
+
|
|
138
|
+
/* Z-index scale */
|
|
139
|
+
--kol-z-base: 1;
|
|
140
|
+
--kol-z-dropdown: 10;
|
|
141
|
+
--kol-z-sticky: 20;
|
|
142
|
+
--kol-z-overlay: 50;
|
|
143
|
+
--kol-z-modal: 100;
|
|
144
|
+
--kol-z-toast: 200;
|
|
145
|
+
--kol-z-tooltip: 300;
|
|
146
|
+
--kol-z-nav: 1000;
|
|
147
|
+
|
|
148
|
+
/* Opacity values */
|
|
149
|
+
--kol-opacity-hover: 0.8;
|
|
150
|
+
--kol-opacity-disabled: 0.5;
|
|
151
|
+
--kol-opacity-subtle: 0.6;
|
|
152
|
+
--kol-opacity-loading: 0.7;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Dark mode shadow adjustments */
|
|
156
|
+
[data-theme="dark"],
|
|
157
|
+
.dark {
|
|
158
|
+
--kol-shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03);
|
|
159
|
+
--kol-shadow-md: 0 4px 6px rgba(255, 255, 255, 0.05);
|
|
160
|
+
--kol-shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.08);
|
|
161
|
+
--kol-shadow-xl: 0 20px 25px rgba(255, 255, 255, 0.1);
|
|
162
|
+
--kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* System-follow dark (0.11.6) — only when no explicit theme is stamped.
|
|
166
|
+
* MIRROR of the block above — edit both. */
|
|
167
|
+
@media (prefers-color-scheme: dark) {
|
|
168
|
+
:root:not([data-theme]) {
|
|
169
|
+
--kol-shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03);
|
|
170
|
+
--kol-shadow-md: 0 4px 6px rgba(255, 255, 255, 0.05);
|
|
171
|
+
--kol-shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.08);
|
|
172
|
+
--kol-shadow-xl: 0 20px 25px rgba(255, 255, 255, 0.1);
|
|
173
|
+
--kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
|
|
174
|
+
}
|
|
175
|
+
}
|
package/kol-theme.css
CHANGED
|
@@ -49,172 +49,6 @@
|
|
|
49
49
|
@import "./kol-components-styleguide.css" layer(components);
|
|
50
50
|
@import "./kol-components-shell.css" layer(components);
|
|
51
51
|
|
|
52
|
-
/* Theme-level design tokens
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
/* Spacing scale (4px base) */
|
|
56
|
-
--kol-spacing-1: 0.25rem; /* 4px */
|
|
57
|
-
--kol-spacing-2: 0.5rem; /* 8px */
|
|
58
|
-
--kol-spacing-3: 0.75rem; /* 12px */
|
|
59
|
-
--kol-spacing-4: 1rem; /* 16px */
|
|
60
|
-
--kol-spacing-5: 1.25rem; /* 20px */
|
|
61
|
-
--kol-spacing-6: 1.5rem; /* 24px */
|
|
62
|
-
--kol-spacing-8: 2rem; /* 32px */
|
|
63
|
-
--kol-spacing-10: 2.5rem; /* 40px */
|
|
64
|
-
--kol-spacing-12: 3rem; /* 48px */
|
|
65
|
-
--kol-spacing-16: 4rem; /* 64px */
|
|
66
|
-
--kol-spacing-20: 5rem; /* 80px */
|
|
67
|
-
--kol-spacing-24: 6rem; /* 96px */
|
|
68
|
-
|
|
69
|
-
/* Semantic spacing aliases */
|
|
70
|
-
--kol-spacing-section: var(--kol-spacing-20);
|
|
71
|
-
--kol-spacing-container: var(--kol-spacing-10);
|
|
72
|
-
--kol-spacing-gap-sm: var(--kol-spacing-2);
|
|
73
|
-
--kol-spacing-gap-md: var(--kol-spacing-4);
|
|
74
|
-
--kol-spacing-gap-lg: var(--kol-spacing-6);
|
|
75
|
-
|
|
76
|
-
/* RAIL ROW rhythm (2026-08-01) — the y-padding every sidebar row shares:
|
|
77
|
-
* the eyebrow (.shell-sidebar-toggle) and the nav group header
|
|
78
|
-
* (.shell-nav-group-header). Deliberately OFF the spacing scale — a tighter
|
|
79
|
-
* chrome rhythm than --kol-spacing-1, and both rules already carried the
|
|
80
|
-
* same literal in two places. Named here so the left and right rails cannot
|
|
81
|
-
* disagree about it again; the row's bottom separation is --kol-spacing-2
|
|
82
|
-
* and needs no alias of its own. */
|
|
83
|
-
--kol-pad-rail-row-y: 0.375rem;
|
|
84
|
-
|
|
85
|
-
/* The row's TEXT INDENT — `.shell-nav-item`'s left padding, named 2026-08-01
|
|
86
|
-
* so anything else that has to line up with a row (the tag shelf) reads the
|
|
87
|
-
* indent instead of retyping it. */
|
|
88
|
-
--kol-pad-rail-row-x: 1.25rem;
|
|
89
|
-
|
|
90
|
-
/* CARD padding (2026-08-15, content-card ruling) — flat, stepped by the
|
|
91
|
-
* card's `size` prop, never by breakpoint. 12/16/24. */
|
|
92
|
-
--kol-pad-card-sm: 0.75rem;
|
|
93
|
-
--kol-pad-card-md: 1rem;
|
|
94
|
-
--kol-pad-card-lg: 1.5rem;
|
|
95
|
-
|
|
96
|
-
/* WALL gaps (2026-08-15) — the same treatment `--kol-pad-card-*` got, for
|
|
97
|
-
* the same reason: these two numbers were re-typed as a ternary at every
|
|
98
|
-
* call site (kol-monitor HomePage ×2, LibraryPage ×2, MediaLibrary,
|
|
99
|
-
* kol-website Work, both foundry grids, StackLatest) and a value repeated
|
|
100
|
-
* nine times is a value that has already drifted somewhere.
|
|
101
|
-
*
|
|
102
|
-
* PX, not rem — a gap is a layout measure, not type (user ruling
|
|
103
|
-
* 2026-08-15), so a reader bumping their browser text size must not re-space
|
|
104
|
-
* every wall in the estate.
|
|
105
|
-
*
|
|
106
|
-
* Two rungs because a wall of CARDS and a stack of ROWS want different air:
|
|
107
|
-
* cards are objects with their own edges and need separating; rows are lines
|
|
108
|
-
* in a table and 24px between them reads as a broken list. */
|
|
109
|
-
--kol-gap-wall-grid: 24px;
|
|
110
|
-
--kol-gap-wall-list: 8px;
|
|
111
|
-
|
|
112
|
-
/* The house curve (2026-08-15) — the easing the cards actually use; was
|
|
113
|
-
* hardcoded in 5 files before this token existed. Curve only, no duration:
|
|
114
|
-
* it pairs with whatever duration the motion needs.
|
|
115
|
-
*
|
|
116
|
-
* BALANCED, not expo (user ruling 2026-08-15). This was easeOutExpo
|
|
117
|
-
* `cubic-bezier(0.16, 1, 0.3, 1)`, which spends ~90% of its distance in the
|
|
118
|
-
* first fifth of the duration and the rest on a settle you cannot see — so
|
|
119
|
-
* every motion read as instant no matter what duration it was given, and a
|
|
120
|
-
* small hover affordance never showed its move at all. */
|
|
121
|
-
--kol-ease-house: cubic-bezier(0.4, 0, 0.2, 1);
|
|
122
|
-
/* the bounce — overshoots past its target and settles back (y > 1 is what
|
|
123
|
-
* makes it bounce; house only decelerates). For a press that should feel
|
|
124
|
-
* springy rather than merely smooth. */
|
|
125
|
-
--kol-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
126
|
-
|
|
127
|
-
/* Content widths (2026-07-28; panel added 2026-07-30) — ONE frame, three
|
|
128
|
-
* inner caps (chess law). Every page: mx-auto max-w-shell + the one padding
|
|
129
|
-
* rhythm, content LEFT-ANCHORED inside. Width is a content decision, never a
|
|
130
|
-
* page identity: column caps reading blocks, panel caps tables / code /
|
|
131
|
-
* framed panels (the ~900–1200 band every consumer was improvising —
|
|
132
|
-
* kol-website audit, lobby/WidthSystemContradictions), measure caps running
|
|
133
|
-
* text. Nothing else — a hardcoded max-w-[Npx] at a call site means this
|
|
134
|
-
* scale failed; file it, don't improvise it.
|
|
135
|
-
* kol-framework's --kol-container-max is the responsive RESOLUTION of the
|
|
136
|
-
* shell (100% → 1400 → 1600 → shell), not a rival family.
|
|
137
|
-
*
|
|
138
|
-
* canvas (2026-07-31, user ruling) — the rung between shell and panel: the
|
|
139
|
-
* BODY of a page inside the shell's main column, i.e. item fields (swatch
|
|
140
|
-
* grids, the icon wall, card galleries) that panel would squeeze and the
|
|
141
|
-
* frame does not bind. Authored in rem because it is a max-width, not a
|
|
142
|
-
* device measure: 87.5rem = 1400 at the default root size. Flat at every
|
|
143
|
-
* breakpoint — a max-width only bites once there is room for it, and it
|
|
144
|
-
* nests: a table inside it still stops at panel, a paragraph at measure. */
|
|
145
|
-
--kol-content-canvas: 87.5rem;
|
|
146
|
-
--kol-content-shell: 1800px;
|
|
147
|
-
--kol-content-panel: 960px;
|
|
148
|
-
--kol-content-column: 768px;
|
|
149
|
-
--kol-content-measure: 65ch;
|
|
150
|
-
|
|
151
|
-
/* Border radius (4px increments) */
|
|
152
|
-
--kol-radius-none: 0;
|
|
153
|
-
/* xs (2026-08-01) — the hairline rung. Claimed out loud: 2px had SIX
|
|
154
|
-
hand-written `rounded-[2px]` call sites (swatches, colour rows, the
|
|
155
|
-
glass panel) and no token, so the scale's 4px floor was simply being
|
|
156
|
-
ignored rather than followed. A value used six times is a rung. */
|
|
157
|
-
--kol-radius-xs: 2px;
|
|
158
|
-
--kol-radius-sm: 4px;
|
|
159
|
-
/* CONTAINERS ARE 4px (user ruling 2026-08-09, "change 8px radius to 4px in
|
|
160
|
-
containers. everywhere."). The repo ships 4px or full, nothing between —
|
|
161
|
-
md/lg/xl/2xl stay resolvable so no consumer's var() breaks, but they all
|
|
162
|
-
collapse to the 4px value. Do not re-widen a rung without a ruling. */
|
|
163
|
-
--kol-radius-md: 4px;
|
|
164
|
-
--kol-radius-lg: 4px;
|
|
165
|
-
--kol-radius-xl: 4px;
|
|
166
|
-
--kol-radius-2xl: 4px;
|
|
167
|
-
--kol-radius-full: 9999px;
|
|
168
|
-
|
|
169
|
-
/* Shadows (subtle elevation) */
|
|
170
|
-
--kol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
171
|
-
--kol-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
|
|
172
|
-
--kol-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
173
|
-
--kol-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
|
|
174
|
-
--kol-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
175
|
-
|
|
176
|
-
/* Transitions (consistent timing) */
|
|
177
|
-
--kol-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
178
|
-
--kol-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
179
|
-
--kol-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
180
|
-
--kol-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
181
|
-
|
|
182
|
-
/* Z-index scale */
|
|
183
|
-
--kol-z-base: 1;
|
|
184
|
-
--kol-z-dropdown: 10;
|
|
185
|
-
--kol-z-sticky: 20;
|
|
186
|
-
--kol-z-overlay: 50;
|
|
187
|
-
--kol-z-modal: 100;
|
|
188
|
-
--kol-z-toast: 200;
|
|
189
|
-
--kol-z-tooltip: 300;
|
|
190
|
-
--kol-z-nav: 1000;
|
|
191
|
-
|
|
192
|
-
/* Opacity values */
|
|
193
|
-
--kol-opacity-hover: 0.8;
|
|
194
|
-
--kol-opacity-disabled: 0.5;
|
|
195
|
-
--kol-opacity-subtle: 0.6;
|
|
196
|
-
--kol-opacity-loading: 0.7;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
/* Dark mode shadow adjustments */
|
|
200
|
-
[data-theme="dark"],
|
|
201
|
-
.dark {
|
|
202
|
-
--kol-shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03);
|
|
203
|
-
--kol-shadow-md: 0 4px 6px rgba(255, 255, 255, 0.05);
|
|
204
|
-
--kol-shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.08);
|
|
205
|
-
--kol-shadow-xl: 0 20px 25px rgba(255, 255, 255, 0.1);
|
|
206
|
-
--kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
/* System-follow dark (0.11.6) — only when no explicit theme is stamped.
|
|
210
|
-
* MIRROR of the block above — edit both. */
|
|
211
|
-
@media (prefers-color-scheme: dark) {
|
|
212
|
-
:root:not([data-theme]) {
|
|
213
|
-
--kol-shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03);
|
|
214
|
-
--kol-shadow-md: 0 4px 6px rgba(255, 255, 255, 0.05);
|
|
215
|
-
--kol-shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.08);
|
|
216
|
-
--kol-shadow-xl: 0 20px 25px rgba(255, 255, 255, 0.1);
|
|
217
|
-
--kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
}
|
|
52
|
+
/* Theme-level design tokens — LAST, as they always were (lifted into their own
|
|
53
|
+
* file 2026-08-27 so kol-core.css shares them; emitted CSS unchanged). */
|
|
54
|
+
@import "./kol-design-tokens.css" layer(components);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.77.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",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"style": "./kol-theme.css",
|
|
11
11
|
"exports": {
|
|
12
12
|
".": "./kol-theme.css",
|
|
13
|
+
"./core": "./kol-core.css",
|
|
13
14
|
"./*": "./*"
|
|
14
15
|
},
|
|
15
16
|
"files": [
|