@kolkrabbi/kol-styleguide 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
   "description": "KOL style-guide / brand-guide component set — the visual specimens a brand manual is built from: color anatomy + combination lab, logo construction / clearspace / scaling, mood tiles, type blocks, and asset spec tables. Raided from the apps/brand styleguide. Sits above @kolkrabbi/kol-{theme,icons,component}.",
   "license": "MIT",

package/src/Swatch.jsx

@@ -1,25 +1,30 @@
 import { ColorSwatch } from '@kolkrabbi/kol-component'
 
 /**
- * Swatch — the DOCUMENTED swatch: chip + meta row (name, hex), with an
- * optional canonical-anchor dot.
+ * Swatch — the DOCUMENTED swatch: a specimen bar over its meta row (name, hex),
+ * with an optional canonical-anchor dot.
  *
- * `ColorSwatch` (kol-component) is the chip alone — a fixed-size pressable
- * atom for paint bars and inspectors. A colour PAGE needs the chip plus its
- * label and value, which is the form both brand apps had built locally
+ * `ColorSwatch` (kol-component) is the chip alone — a fixed-size pressable atom
+ * for paint bars and inspectors. A colour PAGE needs the specimen plus its label
+ * and value, which is the form both brand apps had built locally
  * (`brand-book-mocks-two-consumers`, 2026-09-03: 23 lines, byte-identical in
  * kol-client-olina and kol-website). This composes the atom rather than
  * redrawing it, per the ticket.
  *
- * ⚠ The forks were rendering `.kol-swatch` / `.kol-swatch-chip` /
- * `.kol-swatch-meta` — classes that exist in NO stylesheet in the estate
- * (checked kol-theme, both apps, the showcase; only `.kol-swatch-none-marker`
- * is real). The chip was a bare div with a background and no dimensions, so it
- * collapsed to zero height and the swatch has been showing its meta row over
- * nothing. The ticket reported the CSS as already shipping in
- * `kol-components-molecules.css`; it does not. So there is no verbatim
- * rendering to carry through here — the chip gets a real box from
- * `ColorSwatch`, and the dead hooks are dropped.
+ * GEOMETRY IS CARRIED THROUGH. The forks wore `.kol-swatch` /
+ * `.kol-swatch-chip` / `.kol-swatch-meta`, and those rules are real — they ship
+ * in **`@kolkrabbi/kol-framework`** (`kol-framework.css`, the "Swatch / Ramp
+ * (color specimens)" block), not in kol-theme: a 6px-gap column, a **96px-tall**
+ * chip at radius 4, and a row-wrapped meta line on the baseline. They are
+ * stragglers — `.kol-mood-tile-*` left that same block for
+ * `kol-theme/kol-components-styleguide.css` on 2026-07-10 and these did not.
+ *
+ * So this component draws that geometry ITSELF rather than wearing the classes.
+ * kol-framework is not a peer of kol-styleguide and must not become one — a
+ * component whose look depends on another package's stylesheet being imported
+ * is the defect `styleguide-barrel-is-unimportable` was filed about. A
+ * consumer swapping its fork onto this gets the same render with no new
+ * install, and `height` is the seam if a page wants a different specimen depth.
  *
  *   <Swatch hex="#131316" name="Ink" anchor />
  *
@@ -27,16 +32,20 @@ import { ColorSwatch } from '@kolkrabbi/kol-component'
  * copy; `name` renders exactly as authored.
  *
  * @param {string} hex - The colour, e.g. '#131316' (required — it is both the paint and the printed value)
- * @param {ReactNode} name - Label above the value; omitted, only the hex renders
+ * @param {ReactNode} name - Label beside the value; omitted, only the hex renders
  * @param {boolean} anchor - Mark this stop as the palette's canonical anchor — a difference-blended dot centred on the chip (default: false)
- * @param {number|'fill'|'stretch'} size - Forwarded to ColorSwatch; 'fill' (default) squares the chip to the column
+ * @param {number|string} height - Specimen depth, the forks' `.kol-swatch-chip` height (default: 96)
  * @param {string} className - Extra classes on the wrapper
  */
-export default function Swatch({ hex, name, anchor = false, size = 'fill', className = '' }) {
+export default function Swatch({ hex, name, anchor = false, height = 96, className = '' }) {
   return (
-    <div className={`flex flex-col gap-2 ${className}`.trim()}>
-      <div className="relative">
-        <ColorSwatch hex={hex} size={size} />
+    /* gap 6 — .kol-swatch */
+    <div className={`flex flex-col ${className}`.trim()} style={{ gap: 6 }}>
+      {/* .kol-swatch-chip: full column width, 96 tall, radius 4. ColorSwatch's
+          'stretch' size fills this box, so the atom owns the paint and the
+          frame while the specimen depth stays the page's decision. */}
+      <div className="relative w-full" style={{ height }}>
+        <ColorSwatch hex={hex} size="stretch" radius="sm" />
         {anchor && (
           <span
             aria-label="Canonical anchor"
@@ -51,7 +60,11 @@ export default function Swatch({ hex, name, anchor = false, size = 'fill', class
           </span>
         )}
       </div>
-      <div className="kol-helper-10 flex flex-col">
+      {/* .kol-swatch-meta: row, space-between, baseline, wrapping */}
+      <div
+        className="kol-helper-10 flex flex-row flex-wrap items-baseline justify-between"
+        style={{ gap: '4px 12px' }}
+      >
         {name && <span className="text-meta">{name}</span>}
         <span className="text-strong font-semibold">{hex.toUpperCase()}</span>
       </div>