@kolkrabbi/kol-component 0.137.0 → 0.138.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/package.json +1 -1
- package/src/molecules/ContentRow.jsx +17 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-component",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.138.0",
|
|
4
4
|
"description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -37,6 +37,10 @@ import ContentText from './ContentText.jsx'
|
|
|
37
37
|
/* ruled row boxes per variant (the §2 review) — paddings/gaps spell the
|
|
38
38
|
* --kol-spacing-* tokens (2=8 · 3=12 · 4=16 · 6=24), never a literal */
|
|
39
39
|
const S2 = 'var(--kol-spacing-2)', S3 = 'var(--kol-spacing-3)', S4 = 'var(--kol-spacing-4)', S6 = 'var(--kol-spacing-6)'
|
|
40
|
+
/* the showcase SKIN — fill, frame, hover, pad, rung. Named so the column
|
|
41
|
+
* arrangement can derive from it instead of restating it (TypefaceRowSkin). */
|
|
42
|
+
const BOX_SHOWCASE = { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false }
|
|
43
|
+
|
|
40
44
|
const BOX = {
|
|
41
45
|
/* NO hover wash (user 2026-08-29, on the variant-reference page: "makes a
|
|
42
46
|
* grey background, remove it"). The default row is a bare ruled line — a
|
|
@@ -60,12 +64,23 @@ const BOX = {
|
|
|
60
64
|
* the content height (136 in a 168 row) with no hairline, the frame steps
|
|
61
65
|
* transparent → fg-08 on hover ("0 → 16 is a big jump"). No md step: the rows
|
|
62
66
|
* were approved at their base values. */
|
|
63
|
-
showcase:
|
|
67
|
+
showcase: BOX_SHOWCASE,
|
|
64
68
|
/* typeface's row is a COLUMN, not a line: a header (name/styles left,
|
|
65
69
|
* classification/year right) with a full-width specimen band under it. The
|
|
66
70
|
* shipped item is `flex-col gap-6`, and forcing it into the horizontal
|
|
67
71
|
* thumb-beside-text shape is what turned its alphabet into a 160px thumb. */
|
|
68
|
-
|
|
72
|
+
/* ONE SKIN, TWO ARRANGEMENTS (TypefaceRowSkin, kol-website 2026-08-30 — user:
|
|
73
|
+
* *"I want it to visually have the same look as those pages"*). This box was
|
|
74
|
+
* hand-written and had drifted into the opposite of its sibling: transparent
|
|
75
|
+
* fill with an fg-08 outline, against showcase's filled surface with no
|
|
76
|
+
* outline. Side by side they read as two systems.
|
|
77
|
+
*
|
|
78
|
+
* It is DERIVED from `showcase` now, so fill, frame, hover, pad and rung
|
|
79
|
+
* cannot drift again — there is one set of values. Only the arrangement
|
|
80
|
+
* differs: no thumb, and `column` stacks the band under the text instead of
|
|
81
|
+
* laying a thumb beside it. That arrangement is the only reason this key
|
|
82
|
+
* exists; `variant="typeface"` and `layout="column"` both resolve here. */
|
|
83
|
+
showcaseCanvas: { ...BOX_SHOWCASE, thumb: 0, column: true, align: 'items-start' },
|
|
69
84
|
}
|
|
70
85
|
|
|
71
86
|
/* `default` → `file` (user 2026-08-29). The variant was named after being the
|