@kolkrabbi/kol-theme 0.7.1 → 0.7.3

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.
@@ -813,11 +813,6 @@ a:hover .icon-hover,
813
813
  }
814
814
 
815
815
  /* ─────────────────────────────────────────────────────────────────────
816
- * Type-specimen kit — TARGET: packages/theme/kol-components-atoms.css
817
- * (the two .kol-prose-* rules may alternatively land in the prose
818
- * section of packages/theme/kol-typography.css per the ProsePreview
819
- * lobby spec — pick one home, not both.)
820
- *
821
816
  * Ported from kol-monorepo apps/brand/src/components/framework/
822
817
  * kol-framework.css. NOT ported (already in kol-typography.css, richer
823
818
  * DS versions win): .kol-prose pre, .kol-prose code, .kol-prose pre code.
@@ -826,21 +821,11 @@ a:hover .icon-hover,
826
821
  * No text-transform rules existed in the source CSS; the components'
827
822
  * Tailwind `uppercase` classes were dropped per the KOL no-auto-casing
828
823
  * rule — author labels/pullouts in their final case.
824
+ * The type-specimen kit rules (TypeSample / TypeSpecCard / TextPressure)
825
+ * moved to kol-components-foundry.css 2026-07-09 with the components'
826
+ * move to @kolkrabbi/kol-foundry.
829
827
  * ───────────────────────────────────────────────────────────────────── */
830
828
 
831
- /* ─── TypeSample — atoms/TypeSample.jsx ───
832
- Wrapper padding inlined in the component; adjacent-sibling hairline
833
- separates stacked samples. */
834
- .kol-type-sample + .kol-type-sample {
835
- border-top: 1px solid var(--kol-fg-08);
836
- }
837
-
838
- /* ─── TypeSpecCard — atoms/TypeSpecCard.jsx ───
839
- Layout inlined in the component; descendant <p> overrides give sample
840
- prose 16px rhythm (Preflight zeroes <p> margin). */
841
- .kol-type-spec-sample p { margin: 0 0 16px; }
842
- .kol-type-spec-sample p:last-child { margin-bottom: 0; }
843
-
844
829
  /* ─── ProsePreview — atoms/ProsePreview.jsx ───
845
830
  Prose chrome beyond the base .kol-prose contract. */
846
831
  .kol-prose-indented {
@@ -854,29 +839,3 @@ a:hover .icon-hover,
854
839
  border-top: 1px solid var(--kol-fg-08);
855
840
  border-bottom: 1px solid var(--kol-fg-08);
856
841
  }
857
-
858
- /* =============================================================================
859
- * TextPressure (atom)
860
- * append to packages/theme/kol-components-atoms.css
861
- *
862
- * Only the outlined-ghost layer lives here — it needs a ::after pseudo-element
863
- * and -webkit-text-stroke, neither expressible in Tailwind or inline style.
864
- * Everything else (layout, sizing, weight) is Tailwind utilities / inline vars
865
- * on the JSX. Stroke color comes in through the inline `--kol-text-pressure-
866
- * stroke` custom property (defaulted here so the rule is standalone-safe).
867
- * ============================================================================= */
868
-
869
- .kol-text-pressure--stroke .kol-text-pressure-char {
870
- position: relative;
871
- }
872
-
873
- .kol-text-pressure--stroke .kol-text-pressure-char::after {
874
- content: attr(data-char);
875
- position: absolute;
876
- left: 0;
877
- top: 0;
878
- color: transparent;
879
- z-index: -1;
880
- -webkit-text-stroke-width: 3px;
881
- -webkit-text-stroke-color: var(--kol-text-pressure-stroke, var(--kol-accent-primary));
882
- }
@@ -0,0 +1,49 @@
1
+ /* =============================================================================
2
+ * KOL components — foundry (@kolkrabbi/kol-foundry)
3
+ * =============================================================================
4
+ * Component CSS for the type-specimen apparatus. Recreated 2026-07-09 when the
5
+ * type-specimen kit + live-font effects (TypeSample, TypeSpecCard, TextPressure,
6
+ * ColorLoader) moved from @kolkrabbi/kol-component into @kolkrabbi/kol-foundry;
7
+ * their rules moved here from kol-components-atoms.css with them. CSS always
8
+ * lives in kol-theme — the foundry package ships JS only.
9
+ *
10
+ * Layer: this file ships unlayered; kol-theme.css assigns the layer at import —
11
+ * @import "./kol-components-foundry.css" layer(components);
12
+ * placing it in the `components` cascade layer alongside the rest of KOL chrome,
13
+ * so consumer utilities (a later Tailwind layer) still override it.
14
+ * ============================================================================= */
15
+
16
+ /* ─── TypeSample — TypeSample.jsx ───
17
+ Wrapper padding inlined in the component; adjacent-sibling hairline
18
+ separates stacked samples. */
19
+ .kol-type-sample + .kol-type-sample {
20
+ border-top: 1px solid var(--kol-fg-08);
21
+ }
22
+
23
+ /* ─── TypeSpecCard — TypeSpecCard.jsx ───
24
+ Layout inlined in the component; descendant <p> overrides give sample
25
+ prose 16px rhythm (Preflight zeroes <p> margin). */
26
+ .kol-type-spec-sample p { margin: 0 0 16px; }
27
+ .kol-type-spec-sample p:last-child { margin-bottom: 0; }
28
+
29
+ /* ─── TextPressure — TextPressure.jsx ───
30
+ Only the outlined-ghost layer lives here — it needs a ::after pseudo-element
31
+ and -webkit-text-stroke, neither expressible in Tailwind or inline style.
32
+ Everything else (layout, sizing, weight) is Tailwind utilities / inline vars
33
+ on the JSX. Stroke color comes in through the inline `--kol-text-pressure-
34
+ stroke` custom property (defaulted here so the rule is standalone-safe).
35
+ ColorLoader composes TextPressure and needs no rules of its own. */
36
+ .kol-text-pressure--stroke .kol-text-pressure-char {
37
+ position: relative;
38
+ }
39
+
40
+ .kol-text-pressure--stroke .kol-text-pressure-char::after {
41
+ content: attr(data-char);
42
+ position: absolute;
43
+ left: 0;
44
+ top: 0;
45
+ color: transparent;
46
+ z-index: -1;
47
+ -webkit-text-stroke-width: 3px;
48
+ -webkit-text-stroke-color: var(--kol-text-pressure-stroke, var(--kol-accent-primary));
49
+ }
@@ -7,24 +7,33 @@
7
7
  * packages/ui/css/docs.css → the .docs-* content classes
8
8
  * (+ docs-only .inline-tag-pill, .tag-graph-*)
9
9
  *
10
- * Class hooks are preserved verbatim so the JSX bindings keep resolving.
10
+ * Class hooks are preserved so the JSX bindings keep resolving.
11
11
  *
12
12
  * Layer: this file ships unlayered; kol-theme.css assigns the layer at import —
13
13
  * @import "./kol-components-workshop.css" layer(components);
14
14
  * placing it in the `components` cascade layer alongside the rest of KOL chrome,
15
15
  * so consumer utilities (a later Tailwind layer) still override it.
16
16
  *
17
- * KOL conformance on relocation:
18
- * - text-transform: uppercase | capitalize stripped (casing is a content
19
- * concern in KOL) 5 declarations removed.
20
- * - font-family / color / spacing kept as var(--kol-*) token refs.
17
+ * KOL conformance (type/color de-drift):
18
+ * - Resting type + text color moved OUT to `kol-*` type classes + kol color
19
+ * utilities carried DIRECTLY on the JSX className (visible in dev tools).
20
+ * font-family / font-size / font-weight / line-height / letter-spacing /
21
+ * color were stripped from these rules; rules that were type/color only
22
+ * were deleted. Active color is a conditional kol color class in the JSX;
23
+ * the rendered markdown body is wrapped in `.kol-prose`.
24
+ * - Only structural props Tailwind/kol utilities can't express are kept here
25
+ * (sticky, scrollbar hiding, grid/flex layout, container-query, absolute
26
+ * positioning). `:hover` COLOR rules are kept — hover is a pure pointer
27
+ * state with no JSX hook and the kol color utilities have no hover variant.
28
+ * - `.shell-tab`, `.shell-nav-header`, `.shell-toc-expand-button`,
29
+ * `.toggle-switch-label` are rendered by out-of-package / currently-unused
30
+ * JSX, so their type is left in place (nothing in this repo's scope carries
31
+ * a replacement class for them yet).
21
32
  * ============================================================================= */
22
33
 
23
34
  /* =============================================================================
24
35
  * SHELL NAVIGATION CLASSES
25
- * =============================================================================
26
- * Shell layout classes shared across Workshop, Docs, and future apps.
27
- */
36
+ * ============================================================================= */
28
37
 
29
38
  /* Shell Page Header */
30
39
  .shell-page-header {
@@ -47,15 +56,13 @@
47
56
  display: none;
48
57
  }
49
58
 
59
+ /* .shell-tab — structure only. Type + color live inline on the tab element
60
+ * (kol-helper-14 + text-meta / active text-emphasis). The active underline
61
+ * stays here as structure, fired by the `active` marker class. */
50
62
  .shell-tab {
51
63
  display: inline-flex;
52
64
  align-items: center;
53
65
  gap: 6px;
54
- font-family: var(--kol-font-family-mono);
55
- font-size: 13px;
56
- font-weight: 500;
57
- letter-spacing: 0.02em;
58
- color: color-mix(in srgb, var(--kol-surface-on-primary) 60%, transparent);
59
66
  white-space: nowrap;
60
67
  flex-shrink: 0;
61
68
  padding-top: 8px;
@@ -65,14 +72,9 @@
65
72
  text-decoration: none;
66
73
  }
67
74
 
68
- .shell-tab:hover {
69
- color: color-mix(in srgb, var(--kol-surface-on-primary) 90%, transparent);
70
- }
71
-
72
75
  .shell-tab.active,
73
76
  .shell-tab:active {
74
- color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
75
- border-bottom-color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
77
+ border-bottom-color: var(--kol-surface-on-primary);
76
78
  }
77
79
 
78
80
  /* Sidebar sticky wrappers — hidden scrollbar, still scrollable */
@@ -84,7 +86,8 @@
84
86
  display: none;
85
87
  }
86
88
 
87
- /* Sidebar toggle buttons (collapsible section headers) */
89
+ /* Sidebar toggle buttons (collapsible section headers) — layout only.
90
+ * Type/color carried in JSX (kol-helper-10 text-meta). */
88
91
  .shell-sidebar-toggle {
89
92
  display: flex;
90
93
  align-items: center;
@@ -94,8 +97,6 @@
94
97
  border: none;
95
98
  background: transparent;
96
99
  padding: 0;
97
- letter-spacing: 0.08em;
98
- color: color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent);
99
100
  transition: color 0.15s ease;
100
101
  }
101
102
 
@@ -103,27 +104,15 @@
103
104
  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
104
105
  }
105
106
 
106
- .shell-sidebar-toggle.primary {
107
- color: var(--kol-palette-blue);
108
- }
109
-
110
- /* Sidebar section labels */
107
+ /* Sidebar section labels — margin only; type/color in JSX. */
111
108
  .shell-sidebar-label {
112
- font-family: var(--kol-font-family-mono);
113
- font-size: 11px;
114
- letter-spacing: 0.08em;
115
- color: color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent);
116
109
  margin-bottom: 8px;
117
- font-weight: 500;
118
110
  }
119
111
 
120
- /* Sidebar links */
112
+ /* Sidebar links — layout only; type/color (+ active) in JSX. */
121
113
  .shell-sidebar-link {
122
- font-family: var(--kol-font-family-mono);
123
- font-size: 13px;
124
114
  padding: 4px 0;
125
115
  border-radius: 4px;
126
- color: color-mix(in srgb, var(--kol-surface-on-primary) 64%, transparent);
127
116
  text-decoration: none;
128
117
  transition: all 0.15s ease;
129
118
  display: block;
@@ -133,17 +122,10 @@
133
122
  color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
134
123
  }
135
124
 
136
- .shell-sidebar-link.active {
137
- color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
138
- }
139
-
140
- /* Sidebar action buttons */
125
+ /* Sidebar action buttons — layout only; type/color in JSX. */
141
126
  .shell-sidebar-action {
142
- font-family: var(--kol-font-family-mono);
143
- font-size: 13px;
144
127
  padding: 4px 0;
145
128
  border-radius: 4px;
146
- color: color-mix(in srgb, var(--kol-surface-on-primary) 64%, transparent);
147
129
  transition: all 0.15s ease;
148
130
  display: flex;
149
131
  align-items: center;
@@ -160,7 +142,7 @@
160
142
  color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
161
143
  }
162
144
 
163
- /* TOC expand button */
145
+ /* TOC expand button — no in-package JSX consumer; kept as-is (icon button). */
164
146
  .shell-toc-expand-button {
165
147
  padding: 2px;
166
148
  border: none;
@@ -178,22 +160,13 @@
178
160
  color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
179
161
  }
180
162
 
181
- /* Navigation header label */
163
+ /* Navigation header label — structure only; type/color inline (kol-helper-10 text-meta). */
182
164
  .shell-nav-header {
183
- font-family: var(--kol-font-family-mono);
184
- font-size: 11px;
185
- letter-spacing: 0.08em;
186
- color: color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent);
187
165
  margin-bottom: 12px;
188
- font-weight: 500;
189
166
  }
190
167
 
191
- /* Navigation group */
168
+ /* Navigation group header — layout only; type/color in JSX. */
192
169
  .shell-nav-group-header {
193
- font-family: var(--kol-font-family-mono);
194
- font-size: 13px;
195
- font-weight: 500;
196
- color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
197
170
  padding: 6px 0 6px 0;
198
171
  cursor: pointer;
199
172
  display: flex;
@@ -206,11 +179,6 @@
206
179
  color: color-mix(in srgb, var(--kol-surface-on-primary) 90%, transparent);
207
180
  }
208
181
 
209
- .shell-nav-group-count {
210
- font-size: 11px;
211
- opacity: 0.6;
212
- }
213
-
214
182
  .shell-nav-items {
215
183
  display: flex;
216
184
  flex-direction: column;
@@ -218,15 +186,10 @@
218
186
  margin-top: 4px;
219
187
  }
220
188
 
221
- /* Navigation items */
189
+ /* Navigation items — layout only; type/color (+ active) in JSX. */
222
190
  .shell-nav-item {
223
- font-family: var(--kol-font-family-mono);
224
- font-size: 14px;
225
- font-weight: 500;
226
- letter-spacing: 0.08em;
227
191
  padding: 4px 12px 4px 20px;
228
192
  border-radius: 0px;
229
- color: color-mix(in srgb, var(--kol-surface-on-primary) 64%, transparent);
230
193
  text-decoration: none;
231
194
  transition: all 0.15s ease;
232
195
  display: block;
@@ -236,10 +199,6 @@
236
199
  color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
237
200
  }
238
201
 
239
- .shell-nav-item.active {
240
- color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
241
- }
242
-
243
202
  .shell-nav-item-doc {
244
203
  display: flex;
245
204
  align-items: baseline;
@@ -248,24 +207,20 @@
248
207
  }
249
208
 
250
209
  .shell-nav-item-id {
251
- font-size: 11px;
252
- opacity: 0.4;
253
210
  flex-shrink: 0;
254
211
  }
255
212
 
256
213
  .shell-nav-item-title {
257
- font-size: 13px;
258
- letter-spacing: 0.05em;
214
+ min-width: 0;
259
215
  }
260
216
 
261
- /* Wide viewport nav font bumps */
217
+ /* Wide viewport nav layout bumps */
262
218
  @media (min-width: 1600px) {
263
219
  .shell-tabrow-items {
264
220
  gap: 32px;
265
221
  }
266
222
 
267
223
  .shell-tab {
268
- font-size: 16px;
269
224
  gap: 8px;
270
225
  padding-top: 10px;
271
226
  padding-bottom: 14px;
@@ -276,27 +231,15 @@
276
231
  height: 18px;
277
232
  }
278
233
 
279
- .shell-sidebar-link,
280
- .shell-sidebar-action,
281
- .shell-nav-group-header,
282
- .shell-nav-item-title {
283
- font-size: 16px;
284
- }
285
-
286
234
  .shell-sidebar-action svg {
287
235
  width: 18px;
288
236
  height: 18px;
289
237
  }
290
238
 
291
239
  .shell-nav-item {
292
- font-size: 16px;
293
240
  padding: 5px 14px 5px 24px;
294
241
  }
295
242
 
296
- .shell-sidebar-label,
297
- .shell-nav-header,
298
- .shell-nav-group-count,
299
- .shell-nav-item-id,
300
243
  .toggle-switch-label {
301
244
  font-size: 13px;
302
245
  }
@@ -310,8 +253,11 @@
310
253
  /* =============================================================================
311
254
  * DOCS CONTENT CLASSES
312
255
  * =============================================================================
313
- * Content-rendering styles for documentation pages: cards, article, prose,
314
- * frontmatter, callouts, code, tags, and the tag-graph sidebar.
256
+ * Content-rendering styles for documentation pages. The rendered markdown body
257
+ * is wrapped in `.kol-prose` (headings / p / code / lists / blockquote / links),
258
+ * so the per-element `.docs-article *` type rules that used to live here are
259
+ * gone. Only structural doc chrome (cards, frontmatter layout, callout rule,
260
+ * media, tag graph) remains.
315
261
  */
316
262
 
317
263
  /* Documentation Card (used in inventory listing) */
@@ -342,17 +288,6 @@
342
288
  border-radius: 6px;
343
289
  }
344
290
 
345
- .docs-title {
346
- font-family: var(--kol-font-family-sans);
347
- font-size: 32px; /* 32px → 40px */
348
- line-height: 1.1;
349
- font-weight: 500;
350
- color: color-mix(in srgb, var(--kol-surface-on-primary) 88%, transparent);
351
- }
352
- @media (min-width: 768px) {
353
- .docs-title { font-size: 40px; }
354
- }
355
-
356
291
  .docs-title-link {
357
292
  color: inherit;
358
293
  text-decoration: none;
@@ -361,40 +296,21 @@
361
296
  gap: 8px;
362
297
  }
363
298
 
364
- .docs-subtitle {
365
- font-family: var(--kol-font-family-mono);
366
- font-size: 14px;
367
- line-height: 1.6;
368
- color: color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent);
369
- }
370
-
299
+ /* Doc meta row — layout only; type/color in JSX (kol-helper-10 text-body). */
371
300
  .docs-meta {
372
- font-family: var(--kol-font-family-mono);
373
- font-size: 11px;
374
- letter-spacing: 0.18em;
375
- color: color-mix(in srgb, var(--kol-surface-on-primary) 64%, transparent);
376
301
  display: flex;
377
302
  flex-wrap: wrap;
378
303
  gap: 12px;
379
304
  }
380
305
 
381
- .docs-meta strong {
382
- font-weight: 600;
383
- color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
384
- }
385
-
306
+ /* Article shell — structural only; body type owned by `.kol-prose`. */
386
307
  .docs-article {
387
308
  width: 100%;
388
309
  margin-inline: 0;
389
310
  container-type: inline-size;
390
- font-family: var(--kol-font-family-sans);
391
- font-size: 15px; /* 15px → 16px */
392
- line-height: 1.75;
393
- color: color-mix(in srgb, var(--kol-surface-on-primary) 64%, transparent);
394
311
  }
395
312
 
396
313
  @media (min-width: 768px) {
397
- .docs-article { font-size: 16px; }
398
314
  .docs-article .kol-codeblock { padding: 24px; }
399
315
  }
400
316
 
@@ -402,62 +318,6 @@
402
318
  .docs-article .kol-codeblock { padding: 32px; }
403
319
  }
404
320
 
405
- .docs-article h2 {
406
- font-family: var(--kol-font-family-sans-narrow);
407
- font-size: 24px; /* 24px → 32px */
408
- line-height: 1.2;
409
- margin-block-start: 2rem;
410
- margin-block-end: 1rem;
411
- color: color-mix(in srgb, var(--kol-surface-on-primary) 88%, transparent);
412
- }
413
- @media (min-width: 768px) {
414
- .docs-article h2 { font-size: 32px; }
415
- }
416
-
417
- .docs-article h2:first-child,
418
- .docs-article section:first-child h2:first-child {
419
- margin-block-start: 0;
420
- }
421
-
422
- .docs-article h3 {
423
- font-family: var(--kol-font-family-sans-compact);
424
- font-size: 20px; /* 20px → 28px */
425
- line-height: 1.25;
426
- margin-block-start: 1.5rem;
427
- margin-block-end: 0.75rem;
428
- color: color-mix(in srgb, var(--kol-surface-on-primary) 80%, transparent);
429
- }
430
- @media (min-width: 768px) {
431
- .docs-article h3 { font-size: 28px; }
432
- }
433
-
434
- .docs-article h4 {
435
- font-family: var(--kol-font-family-sans-compact);
436
- font-size: 20px;
437
- line-height: 1.3;
438
- margin-block-start: 1.25rem;
439
- margin-block-end: 0.5rem;
440
- color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
441
- }
442
-
443
- .docs-article p {
444
- margin-block-end: 1.5rem;
445
- }
446
-
447
- .docs-article a:not(.tag),
448
- .docs-link {
449
- color: color-mix(in srgb, var(--kol-surface-on-primary) 88%, transparent);
450
- text-decoration: underline;
451
- text-decoration-thickness: 1px;
452
- text-underline-offset: 2px;
453
- transition: color 0.15s ease;
454
- }
455
-
456
- .docs-article a:not(.tag):hover,
457
- .docs-link:hover {
458
- color: var(--kol-accent-primary);
459
- }
460
-
461
321
  /* Frontmatter properties block */
462
322
  .docs-frontmatter {
463
323
  border-bottom: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
@@ -476,35 +336,18 @@
476
336
  padding: 4px 0;
477
337
  }
478
338
 
339
+ /* Frontmatter key — layout only; type/color in JSX (kol-helper-12 text-meta). */
479
340
  .docs-frontmatter-key {
480
341
  display: flex;
481
342
  align-items: center;
482
343
  gap: 8px;
483
344
  min-width: 120px;
484
- font-family: var(--kol-font-family-mono);
485
- font-size: 12px;
486
- color: color-mix(in srgb, var(--kol-surface-on-primary) 40%, transparent);
487
- }
488
-
489
- .docs-frontmatter-value {
490
- font-family: var(--kol-font-family-mono);
491
- font-size: 13px;
492
- color: color-mix(in srgb, var(--kol-surface-on-primary) 80%, transparent);
493
345
  }
494
346
 
495
347
  .docs-frontmatter-row:has(.tag) {
496
348
  align-items: center;
497
349
  }
498
350
 
499
- .docs-article code {
500
- font-family: var(--kol-font-family-mono);
501
- font-size: 13px;
502
- padding: 2px 6px;
503
- background-color: color-mix(in srgb, var(--kol-surface-on-primary) 6%, transparent);
504
- border-radius: 4px;
505
- color: color-mix(in srgb, var(--kol-surface-on-primary) 88%, transparent);
506
- }
507
-
508
351
  .docs-color-swatch {
509
352
  display: inline-flex;
510
353
  align-items: center;
@@ -519,15 +362,6 @@
519
362
  flex-shrink: 0;
520
363
  }
521
364
 
522
- .docs-article strong {
523
- font-weight: 600;
524
- color: color-mix(in srgb, var(--kol-surface-on-primary) 88%, transparent);
525
- }
526
-
527
- .docs-article em {
528
- font-style: italic;
529
- }
530
-
531
365
  .docs-image {
532
366
  max-width: 100%;
533
367
  height: auto;
@@ -536,39 +370,9 @@
536
370
  }
537
371
 
538
372
  .docs-meta-inline {
539
- font-family: var(--kol-font-family-sans);
540
- font-size: 14px;
541
- line-height: 1.6;
542
- color: color-mix(in srgb, var(--kol-surface-on-primary) 64%, transparent);
543
373
  margin-block-end: 1rem;
544
374
  }
545
375
 
546
- .docs-meta-inline strong {
547
- color: color-mix(in srgb, var(--kol-surface-on-primary) 80%, transparent);
548
- font-weight: 600;
549
- }
550
-
551
- .docs-article ul,
552
- .docs-article ol {
553
- margin-block: 1.25rem;
554
- padding-inline-start: 1.5rem;
555
- font-size: inherit;
556
- line-height: 1.6;
557
- }
558
-
559
- .docs-list {
560
- list-style: disc;
561
- line-height: 1.6;
562
- }
563
-
564
- .docs-list.docs-list--ordered {
565
- list-style: decimal;
566
- }
567
-
568
- .docs-list.tight li {
569
- margin-block-end: 6px;
570
- }
571
-
572
376
  .docs-article hr {
573
377
  margin-block: 2rem;
574
378
  border: none;
@@ -584,24 +388,21 @@
584
388
  background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent) !important;
585
389
  }
586
390
 
391
+ /* Callout / blockquote rule — structural; only the broken palette token fixed. */
587
392
  .docs-callout {
588
393
  padding: 0;
589
394
  padding-left: 16px;
590
395
  margin-block-end: 1.5rem;
591
396
  background: none;
592
397
  border: none;
593
- border-left: 1px solid var(--kol-palette-red);
398
+ border-left: 1px solid var(--kol-color-red-200);
594
399
  }
595
400
 
596
- /* Inline hashtag pills */
401
+ /* Inline hashtag pills — layout only; type + resting bg/color in JSX
402
+ * (kol-helper-12 bg-fg-08 text-strong). Hover state kept. */
597
403
  .inline-tag-pill {
598
- font-family: var(--kol-font-family-mono);
599
- font-size: 12px;
600
- font-weight: 470;
601
404
  padding: 2px 8px;
602
405
  border-radius: 9999px;
603
- background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
604
- color: color-mix(in srgb, var(--kol-surface-on-primary) 80%, transparent);
605
406
  text-decoration: none;
606
407
  transition: all 0.15s ease;
607
408
  white-space: nowrap;
@@ -612,7 +413,7 @@
612
413
  color: var(--kol-surface-primary);
613
414
  }
614
415
 
615
- /* View toggle buttons */
416
+ /* View toggle buttons — no in-package JSX consumer; layout kept, type stripped. */
616
417
  .docs-view-toggle {
617
418
  display: inline-flex;
618
419
  align-items: center;
@@ -621,9 +422,6 @@
621
422
  border: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 16%, transparent);
622
423
  border-radius: 6px;
623
424
  background: transparent;
624
- color: color-mix(in srgb, var(--kol-surface-on-primary) 56%, transparent);
625
- font-family: var(--kol-font-family-mono);
626
- font-size: 12px;
627
425
  cursor: pointer;
628
426
  transition: all 0.15s ease;
629
427
  }
@@ -656,10 +454,8 @@
656
454
  margin: 0 auto;
657
455
  }
658
456
 
457
+ /* Tag graph tooltip — layout only; type/color in JSX (kol-helper-10 text-emphasis). */
659
458
  .tag-graph-tooltip {
660
- font-family: var(--kol-font-family-mono);
661
- font-size: 11px;
662
- color: color-mix(in srgb, var(--kol-surface-on-primary) 88%, transparent);
663
459
  background: color-mix(in srgb, var(--kol-surface-primary) 92%, transparent);
664
460
  padding: 4px 8px;
665
461
  border-radius: 4px;
package/kol-theme.css CHANGED
@@ -44,6 +44,7 @@
44
44
  @import "./kol-components-dashboards.css" layer(components);
45
45
  @import "./kol-components-chess.css" layer(components);
46
46
  @import "./kol-components-workshop.css" layer(components);
47
+ @import "./kol-components-foundry.css" layer(components);
47
48
 
48
49
  /* Theme-level design tokens */
49
50
  @layer components {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-theme",
3
- "version": "0.7.1",
3
+ "version": "0.7.3",
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",