@kolkrabbi/kol-component 0.90.1 → 0.90.2
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-component",
|
|
3
|
-
"version": "0.90.
|
|
3
|
+
"version": "0.90.2",
|
|
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",
|
|
@@ -53,7 +53,10 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
|
|
|
53
53
|
* @param {string} bg tint only, no border — a raw token value
|
|
54
54
|
* @param {string} borderHover border colour on hover (article's fg-16 step)
|
|
55
55
|
* @param {boolean} ring hairline border OVER the media, inset
|
|
56
|
-
* @param {boolean}
|
|
56
|
+
* @param {boolean|'hero'} zoom the artwork creeps up inside its frame on the
|
|
57
|
+
* card's hover — 1.06; `'hero'` = the hero rung, 1.02
|
|
58
|
+
* (StackCardHover, 2026-08-27) — same pixel travel on a
|
|
59
|
+
* ~1500px thumb as 1.06 on a 500px one. Was:
|
|
57
60
|
* CARD's hover — image-led variants only
|
|
58
61
|
* @param {boolean} fillHeight size from the HEIGHT instead of the width: the
|
|
59
62
|
* media fills its parent's height and its width
|
|
@@ -89,7 +92,7 @@ export default function ContentMedia({
|
|
|
89
92
|
const round = radius ? 'rounded-[var(--kol-radius-sm)]' : ''
|
|
90
93
|
return (
|
|
91
94
|
<div
|
|
92
|
-
className={`relative ${fillHeight ? 'h-full w-auto' : 'w-full'} overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ?
|
|
95
|
+
className={`relative ${fillHeight ? 'h-full w-auto' : 'w-full'} overflow-hidden ${round} ${FIT[fit] ?? FIT.cover} ${frame ? 'bg-fg-04 border border-fg-08' : ''} ${border ? 'border border-fg-08' : ''} ${zoom ? `kol-media-zoom${zoom === 'hero' ? ' is-hero' : ''}` : ''} ${borderHover ? 'transition-colors hover:border-fg-16' : ''} ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
|
|
93
96
|
style={{ ...(ratio != null ? { aspectRatio: ratio } : null), background: bg }}
|
|
94
97
|
>
|
|
95
98
|
{children}
|
|
@@ -61,8 +61,9 @@ const RAMP = {
|
|
|
61
61
|
row: { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
|
|
62
62
|
},
|
|
63
63
|
article: {
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
/* kol-content-title-dim: the title dims to 70% on card hover (StackCardHover, 2026-08-27 — ListingCard's move, kol-theme) */
|
|
65
|
+
card: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-03 text-emphasis kol-content-title-dim', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
|
|
66
|
+
row: { kicker: 'kol-mono-12 text-meta', title: 'kol-sans-heading-04 text-emphasis kol-content-title-dim', body: 'kol-mono-12 text-body', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', tags: 'flex flex-wrap gap-2' },
|
|
66
67
|
},
|
|
67
68
|
work: {
|
|
68
69
|
/* INVERSE ink — the card's plate is the drawer, `surface-inverse`. Leaving
|