@kolkrabbi/kol-component 0.15.3 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.15.3",
+  "version": "0.19.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/atoms/AssetPlaceholder.jsx

@@ -16,7 +16,7 @@ export default function AssetPlaceholder({
   const label = [category, name].filter(Boolean).join(' · ')
   return (
     <div
-      className={`kol-asset-placeholder flex flex-col items-center justify-center gap-[6px] w-full p-6 border border-dashed border-[var(--kol-fg-24)] rounded-[4px] bg-[var(--kol-fg-02)] text-fg-48 font-mono text-center box-border ${className}`.trim()}
+      className={`kol-asset-placeholder flex flex-col items-center justify-center gap-[6px] w-full p-6 border border-dashed border-[var(--kol-fg-24)] rounded-[var(--kol-radius-sm)] bg-[var(--kol-fg-02)] text-fg-48 font-mono text-center box-border ${className}`.trim()}
       style={{ aspectRatio }}
       role="img"
       aria-label={`${label || 'asset'} — ${note}`}

package/src/atoms/DocsToc.jsx

@@ -23,12 +23,12 @@ import useScrollSpy from '../hooks/useScrollSpy.js'
  *                               top band (useScrollSpy's own default is
  *                               '-30% 0px -60% 0px')
  */
-export default function DocsToc({ toc, onNavigate, rootMargin = '-80px 0px -80% 0px' }) {
-  const activeId = useScrollSpy(toc.map((item) => item.id), { rootMargin })
+export default function DocsToc({ toc, onNavigate, rootMargin = '-80px 0px -80% 0px', root = null }) {
+  const activeId = useScrollSpy(toc.map((item) => item.id), { rootMargin, root })
 
   return (
     <nav>
-      <ul className="space-y-0">
+      <ul className="shell-nav-items">
         {toc.map((item) => (
           <li key={item.id}>
             <a
@@ -39,9 +39,14 @@ export default function DocsToc({ toc, onNavigate, rootMargin = '-80px 0px -80%
                * `kol-mono-12 … py-1` with no left padding, so on-this-page rows
                * sat at a smaller size and a different left edge than the
                * Related rows directly beneath them in the same rail. */
-              className={`shell-nav-item block kol-mono-14 transition-colors focus-visible:ring-focus hover:text-emphasis ${
-                activeId === item.id ? 'text-emphasis' : 'text-body'
-              }`}
+              /* THE one row string (user ruling 2026-08-01). This carried
+               * `block transition-colors focus-visible:ring-focus
+               * hover:text-emphasis text-body` as utilities, so the same rung
+               * rendered a different className here than in the left tree.
+               * Layout, colour, hover and focus live in `.shell-nav-item` now;
+               * active is the shared `is-active` marker, not `text-emphasis`
+               * typed at one call site. Matches RailRow exactly. */
+              className={`shell-nav-item kol-mono-14${activeId === item.id ? ' is-active' : ''}`}
             >
               {item.label}
             </a>

package/src/atoms/FullscreenOverlay.jsx

@@ -1,5 +1,17 @@
 import { useEffect, useRef } from 'react'
+import Button from './Button.jsx'
 
+/**
+ * FullscreenOverlay — the scrim + centred sheet every overlay in the repo
+ * wears. Owns dismissal (Escape, backdrop, close button), scroll lock and
+ * stacking; the consumer supplies the panel.
+ *
+ * The close control is the DS `Button` (quiet, icon-only, the `x` glyph) —
+ * the same idiom as ShellLayout's. It was a hand-rolled <button> printing a
+ * literal `×` TEXT CHARACTER until 2026-08-01: no icon, no states, and a
+ * typographic multiplication sign standing in for a glyph the icon set has
+ * always shipped.
+ */
 export default function FullscreenOverlay({ open, onClose, closeButton = true, children }) {
   const sheetRef = useRef(null)
 
@@ -30,14 +42,15 @@ export default function FullscreenOverlay({ open, onClose, closeButton = true, c
     <div className="kol-overlay" role="dialog" aria-modal="true" onMouseDown={onBackdropClick}>
       <div ref={sheetRef} className="kol-overlay-sheet">
         {closeButton && (
-          <button
-            type="button"
+          <Button
+            variant="outline"
+            quiet
+            size="sm"
+            iconOnly="x"
             className="kol-overlay-close"
             onClick={onClose}
             aria-label="Close"
-          >
-            ×
-          </button>
+          />
         )}
         {children}
       </div>

package/src/atoms/InteractiveImage.jsx

@@ -0,0 +1,152 @@
+import { useId, useLayoutEffect, useRef, useState } from 'react'
+import { motion } from 'framer-motion'
+import useTilt from '../hooks/useTilt.js'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+import useCoarsePointer from '../hooks/useCoarsePointer.js'
+
+/* The default mask: one closed blob authored in unit-square coordinates, so
+ * it scales to any element size. Swap it via the `shape` prop — any path in
+ * a 0..1 box works. */
+const BLOB =
+  'M.96.217L.855.834a.09.09 0 01-.07.072L.166.994A.09.09 0 01.06.9L.04.166A.09.09 0 01.15.073L.89.13a.09.09 0 01.07.087z'
+
+/**
+ * InteractiveImage — an image seen through an organic blob mask that
+ * re-centres on the cursor, floating over a blurred, scaled copy of
+ * itself. The whole stage tilts in 3D toward the pointer.
+ *
+ * Composed, not forked: the tilt is the shared `useTilt` hook (springs,
+ * not tweens — the DS has one tilt and this is it), so the motion here
+ * matches TiltCard and BentoCard rather than introducing a second feel.
+ * The source's gsap tweens are gone with it; nothing else needed gsap.
+ *
+ * Motion is gated twice — on coarse-pointer devices and under
+ * prefers-reduced-motion the mask sits centred, the tilt never mounts,
+ * and no listeners are attached.
+ *
+ * The two SVG ids are per-instance (`useId`). The monorepo source hard-coded
+ * them at module scope, so a second instance on the same page silently
+ * clobbered the first one's clip path and pattern — the reason this was
+ * lobbied as a fresh effect rather than a migration.
+ *
+ * Purely image-driven: no tokens, no colors, nothing to theme. Size comes
+ * from the consumer via `className` — the stage fills its box.
+ *
+ * @param {string} src         image source, used by both the mask and the backdrop. Required
+ * @param {string} alt         accessible name for the masked image
+ * @param {string} className   classes on the root — supplies the size
+ * @param {string} shape       SVG path `d` in unit-square coords; the mask outline
+ * @param {number} magnitude   max tilt in degrees (±)
+ * @param {number} perspective CSS transform perspective, in px
+ * @param {number} blur        backdrop blur radius, in px
+ * @param {number} backdropScale backdrop zoom, as a multiplier — hides the blur's soft edge
+ */
+export default function InteractiveImage({
+  src,
+  alt = '',
+  className = '',
+  shape = BLOB,
+  magnitude = 10,
+  perspective = 500,
+  blur = 10,
+  backdropScale = 1.1,
+}) {
+  const uid = useId()
+  const clipId = `kol-ii-clip-${uid}`
+  const patternId = `kol-ii-pattern-${uid}`
+
+  const reducedMotion = usePrefersReducedMotion()
+  const coarse = useCoarsePointer()
+  const still = reducedMotion || coarse
+
+  const tilt = useTilt({ magnitude, perspective })
+  const boxRef = useRef(null)
+  const [size, setSize] = useState({ width: 0, height: 0 })
+  /* Mask centre in element coordinates; null until the pointer arrives, which
+   * is also the resting state — `centre` below reads it as dead centre. */
+  const [point, setPoint] = useState(null)
+
+  useLayoutEffect(() => {
+    const el = boxRef.current
+    if (!el) return undefined
+    const ro = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect
+      setSize({ width, height })
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+
+  const centre = point ?? { x: size.width / 2, y: size.height / 2 }
+
+  /* The unit blob is scaled up to the element box, then offset so its centre
+   * lands under the pointer rather than at the origin. */
+  const maskTransform = `translate(${centre.x - size.width / 2} ${centre.y - size.height / 2}) scale(${size.width} ${size.height})`
+
+  const handleMove = (e) => {
+    if (still) return
+    tilt.onMouseMove(e)
+    const rect = boxRef.current?.getBoundingClientRect()
+    if (!rect) return
+    setPoint({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+  }
+
+  const handleLeave = () => {
+    if (still) return
+    tilt.onMouseLeave()
+    setPoint(null)
+  }
+
+  return (
+    <div
+      ref={boxRef}
+      className={`relative ${className}`}
+      onMouseMove={still ? undefined : handleMove}
+      onMouseLeave={still ? undefined : handleLeave}
+    >
+      <div
+        className="absolute inset-0 bg-cover bg-center"
+        style={{
+          backgroundImage: `url(${src})`,
+          filter: `blur(${blur}px)`,
+          transform: `scale(${backdropScale})`,
+        }}
+      />
+
+      <motion.svg
+        ref={tilt.ref}
+        role="img"
+        aria-label={alt || undefined}
+        aria-hidden={alt ? undefined : true}
+        className="relative w-full h-full"
+        viewBox={`0 0 ${size.width} ${size.height}`}
+        style={still ? undefined : tilt.style}
+      >
+        <defs>
+          <clipPath id={clipId}>
+            <path d={shape} transform={maskTransform} />
+          </clipPath>
+          <pattern
+            id={patternId}
+            patternUnits="userSpaceOnUse"
+            width={size.width}
+            height={size.height}
+          >
+            <image
+              href={src}
+              width="100%"
+              height="100%"
+              preserveAspectRatio="xMidYMid slice"
+            />
+          </pattern>
+        </defs>
+        <rect
+          width="100%"
+          height="100%"
+          fill={`url(#${patternId})`}
+          clipPath={`url(#${clipId})`}
+        />
+      </motion.svg>
+    </div>
+  )
+}

package/src/atoms/OverlayGlassPanel.jsx

@@ -28,7 +28,7 @@ export default function OverlayGlassPanel({
 
   return (
     <div
-      className={`flex flex-col ${alignCls} ${gap} rounded-[2px] px-6 py-8 ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
+      className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)] px-6 py-8 ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
       style={{
         backgroundColor: `color-mix(in srgb, var(--kol-surface-primary) ${surfaceOpacity}%, transparent)`,
         backdropFilter: `blur(${blur})`,

package/src/atoms/Pill.jsx

@@ -38,8 +38,17 @@ const Pill = ({ children, variant = 'primary', size = 'sm', className = '' }) =>
     lg: 'pill-lg'
   }
 
+  /* Type from the helper ramp — same ruling as Tag (2026-08-01). The pill-*
+   * classes hardcoded size + weight and no line-height; kol-helper-* is the
+   * single-line ramp (`line-height: 1`) and matches 10/12/14 exactly. */
+  const typeClasses = {
+    sm: 'kol-helper-10',
+    md: 'kol-helper-12',
+    lg: 'kol-helper-14'
+  }
+
   return (
-    <span className={`${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()}>
+    <span className={`${variantClasses[variant]} ${sizeClasses[size]} ${typeClasses[size]} ${className}`.trim()}>
       {children}
     </span>
   )

package/src/atoms/SearchInput.jsx

@@ -163,7 +163,7 @@ export default function SearchInput({
         /* aria-hidden — affordance, not a label (same stance as Input's prefix/suffix) */
         <kbd
           aria-hidden="true"
-          className="inline-flex items-center justify-center shrink-0 h-4 min-w-4 px-1 rounded-[3px] bg-fg-08 kol-helper-10 text-fg-48"
+          className="inline-flex items-center justify-center shrink-0 h-4 min-w-4 px-1 rounded-[var(--kol-radius-xs)] bg-fg-08 kol-helper-10 text-fg-48"
         >
           {shortcutHint}
         </kbd>

package/src/atoms/Tag.jsx

@@ -12,22 +12,42 @@ const ICON_SIZES = { sm: 10, md: 12, lg: 14 }
  *           <span> and is a Pill wearing the wrong name.
  *   Badge — system status or a count.
  *
- * Canonical (merged web rich + brand compat). Web's rich API: variant
- * (default/naked/inverse/solid), size, color, solid, active, icon, onRemove,
- * onClick. Plus:
- *  - `hash` (default true) — prepend `#` (web's tag style). Pass hash={false}
- *    for plain labels (brand usage).
- *  - `text` — content fallback when no children (brand SwatchControls passes text=).
+ * REBUILT ON PILL'S MODEL (user ruling 2026-08-01). What it was:
  *
- * `size` defaults to `sm` per the chip law (2026-07-30, same pass as Pill).
+ *   - FOUR declared variants (default/naked/inverse/solid) and exactly ONE
+ *     `:hover` rule between them, on `.tag-control`. Every other path rendered
+ *     dead.
+ *   - `color` was a SECOND axis that silently swapped the base class from
+ *     `tag-control` to `tag tag--{color}` — so passing a colour cost you the
+ *     interaction state, invisibly. That is what shipped a solid blue pill you
+ *     could not hover.
+ *   - `variant="solid"` and a `solid` boolean did the same job.
+ *   - FOUR class schemes for one component: `tag-control`, `tag`, `tag-naked`,
+ *     `tag-control-inverse` — not a base plus modifiers, four unrelated bases
+ *     picked by which prop you happened to pass.
+ *
+ * Now it is Pill's vocabulary — `primary` (filled) · `secondary` (outlined) ·
+ * `inverse` — one size scale, ONE class scheme (`kol-tag--*`), and every
+ * variant carries hover + active. Colour is not a prop: a chip's look is its
+ * variant, exactly as it is on Pill and Button. Tag colour BY TAXONOMY returns
+ * later as its own decision, on top of the variants rather than instead of them.
+ *
+ * @param {ReactNode} children   label content
+ * @param {string}    text       content fallback when no children (brand SwatchControls)
+ * @param {string}    variant    'primary' | 'secondary' | 'inverse'
+ * @param {string}    size       'sm' | 'md' | 'lg' — `sm` is the default and
+ *                               should stay the answer; `lg` needs a reason
+ * @param {boolean}   active     selected state (filter chips)
+ * @param {boolean}   hash       prepend `#` (default true); false for plain labels
+ * @param {string}    icon       leading icon name
+ * @param {Function}  onRemove   renders the dismiss affordance
+ * @param {Function}  onClick    makes it a <button>
  */
 export default function Tag({
   children,
   text,
-  variant = 'default',
+  variant = 'primary',
   size = 'sm',
-  color,
-  solid = false,
   active = false,
   hash = true,
   icon,
@@ -40,24 +60,28 @@ export default function Tag({
   const iconSize = ICON_SIZES[size] || 12
   const content = children ?? text
 
-  let baseClass
-  if (variant === 'naked') {
-    baseClass = color ? `tag-naked tag--${color}` : 'tag-naked'
-  } else if (color) {
-    baseClass = `tag tag--${color}`
-  } else {
-    baseClass = variant === 'inverse' ? 'tag-control-inverse' : 'tag-control'
+  /* ONE scheme. `variant` is the only thing that picks a look — there is no
+   * second axis that can swap the base out from under it. */
+  const VARIANTS = {
+    primary: 'kol-tag--primary',
+    secondary: 'kol-tag--secondary',
+    inverse: 'kol-tag--inverse',
   }
 
-  const isSolid = solid || variant === 'solid'
-  const activeClass = active ? (color ? 'tag--active' : 'is-active') : ''
+  /* TYPE COMES FROM THE HELPER RAMP (user ruling 2026-08-01). The size classes
+   * hardcoded font-size + font-weight and set no line-height, so a 10px chip
+   * inherited the body's ~1.5 and stood 22px tall next to 14px rows. A chip is
+   * SINGLE-LINE chrome — that is exactly the kol-helper-* ramp, whose defining
+   * property is `line-height: 1`. The sizes match the scale 1:1 (10/12/14), so
+   * this is adopting the existing system, not restating it. */
+  const TYPE = { sm: 'kol-helper-10', md: 'kol-helper-12', lg: 'kol-helper-14' }
 
   const classes = [
-    baseClass,
-    `tag-${size}`,
-    isSolid && variant !== 'naked' ? 'tag--solid' : '',
-    activeClass,
-    isInteractive ? 'cursor-pointer' : '',
+    'kol-tag',
+    VARIANTS[variant] ?? VARIANTS.primary,
+    `kol-tag--${size}`,
+    TYPE[size] ?? TYPE.sm,
+    active ? 'is-active' : '',
     className
   ].filter(Boolean).join(' ')
 
@@ -78,7 +102,7 @@ export default function Tag({
         <span
           role="button"
           tabIndex={-1}
-          className="tag-dismiss"
+          className="kol-tag-dismiss"
           onClick={handleRemove}
         >
           <Icon name="x" size={iconSize} />

package/src/atoms/TiltCard.jsx

@@ -1,27 +1,7 @@
-import { useEffect, useState } from 'react'
 import { motion, useSpring, useTransform } from 'framer-motion'
 import useTilt from '../hooks/useTilt.js'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-/**
- * True on coarse-pointer (touch) devices. Local to TiltCard; re-evaluates on
- * device/orientation change via the media-query change event (the monorepo
- * source froze this in a module-load const — fixed on recreate).
- */
-function useCoarsePointer() {
-  const [coarse, setCoarse] = useState(
-    () => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,
-  )
-
-  useEffect(() => {
-    const mq = window.matchMedia('(pointer: coarse)')
-    const onChange = () => setCoarse(mq.matches)
-    mq.addEventListener('change', onChange)
-    return () => mq.removeEventListener('change', onChange)
-  }, [])
-
-  return coarse
-}
+import useCoarsePointer from '../hooks/useCoarsePointer.js'
 
 /**
  * TiltCard — self-contained image card with a spring-based 3D tilt that

package/src/hooks/useCoarsePointer.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * True on coarse-pointer (touch) devices — the DS-wide pointer gate, the
+ * sibling of `usePrefersReducedMotion`. Pointer-driven effects check this
+ * and render their static form when true: a tilt that follows a cursor is
+ * dead weight on a device that has none.
+ *
+ * Re-evaluates on device/orientation change via the media-query change
+ * event (the monorepo source froze this in a module-load const — fixed on
+ * recreate). Promoted out of TiltCard 2026-08-01 when InteractiveImage
+ * became the second consumer.
+ */
+export default function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,
+  )
+
+  useEffect(() => {
+    const mq = window.matchMedia('(pointer: coarse)')
+    const onChange = () => setCoarse(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
+  return coarse
+}

package/src/hooks/useScrollSpy.js

@@ -5,7 +5,12 @@ import { useEffect, useRef, useState } from 'react'
  * IntersectionObserver with an edge-lock so first/last sections stay active
  * when the user reaches the top/bottom of the page.
  */
-export default function useScrollSpy(ids, { rootMargin = '-30% 0px -60% 0px', edgeOffset = 100 } = {}) {
+/* `root` (2026-08-01) — the SCROLL CONTAINER, not always the viewport. The
+ * workshop shell scrolls `#main` internally (it is `fixed inset-0` with its own
+ * scroll regions), so an observer rooted at the viewport never fired and the
+ * right rail could not highlight anything. The edge-lock reads the same
+ * element for the same reason: `window.scrollY` is 0 forever in that shell. */
+export default function useScrollSpy(ids, { rootMargin = '-30% 0px -60% 0px', edgeOffset = 100, root = null } = {}) {
   const [activeId, setActiveId] = useState(null)
   const edgeLockRef = useRef(null)
   const key = ids.join(',')
@@ -15,11 +20,14 @@ export default function useScrollSpy(ids, { rootMargin = '-30% 0px -60% 0px', ed
     const elements = ids.map((id) => document.getElementById(id)).filter(Boolean)
     if (!elements.length) return
 
+    const scroller = typeof root === 'string' ? document.querySelector(root) : root
+
     const checkEdges = () => {
-      const atTop = window.scrollY < edgeOffset
-      const atBottom =
-        window.scrollY + window.innerHeight >=
-        document.documentElement.scrollHeight - edgeOffset * 0.8
+      const top = scroller ? scroller.scrollTop : window.scrollY
+      const viewH = scroller ? scroller.clientHeight : window.innerHeight
+      const fullH = scroller ? scroller.scrollHeight : document.documentElement.scrollHeight
+      const atTop = top < edgeOffset
+      const atBottom = top + viewH >= fullH - edgeOffset * 0.8
       if (atTop) {
         edgeLockRef.current = 'top'
         setActiveId(null)
@@ -39,18 +47,19 @@ export default function useScrollSpy(ids, { rootMargin = '-30% 0px -60% 0px', ed
           .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
         if (visible[0]) setActiveId(visible[0].target.id)
       },
-      { rootMargin, threshold: 0 },
+      { root: scroller ?? null, rootMargin, threshold: 0 },
     )
 
     elements.forEach((el) => observer.observe(el))
-    window.addEventListener('scroll', checkEdges, { passive: true })
+    const target = scroller ?? window
+    target.addEventListener('scroll', checkEdges, { passive: true })
     checkEdges()
 
     return () => {
       observer.disconnect()
-      window.removeEventListener('scroll', checkEdges)
+      target.removeEventListener('scroll', checkEdges)
     }
-  }, [key, rootMargin, edgeOffset])
+  }, [key, rootMargin, edgeOffset, root])
 
   return activeId
 }

package/src/index.js

@@ -62,6 +62,7 @@ export { default as ButtonGroup } from './molecules/ButtonGroup.jsx'
 /* monorepo sets (P6–P10) — molecule members */
 export { default as AlignmentGrid } from './molecules/AlignmentGrid.jsx'
 export { default as ImageBlock } from './molecules/ImageBlock.jsx'
+export { default as InteractiveImage } from './atoms/InteractiveImage.jsx'
 export { default as SelectionOverlay } from './molecules/SelectionOverlay.jsx'
 export { default as VideoBlock, getEmbedUrl } from './molecules/VideoBlock.jsx'
 export { default as CardFeatureItem } from './molecules/CardFeatureItem.jsx'
@@ -108,6 +109,7 @@ export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.
 export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
 export { default as LoaderOverlay } from './organisms/LoaderOverlay.jsx'
+export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
@@ -126,6 +128,7 @@ export { default as usePrefersReducedMotion } from './hooks/usePrefersReducedMot
 export { default as useReveal } from './hooks/useReveal.js'
 export { default as useScrollSpy } from './hooks/useScrollSpy.js'
 export { default as useTilt } from './hooks/useTilt.js'
+export { default as useCoarsePointer } from './hooks/useCoarsePointer.js'
 export { default as useAxisAnimation } from './hooks/useAxisAnimation.js'
 export { useEyedropper, pickFromCanvasElement } from './hooks/useEyedropper.js'
 export { resolveCssVar, resolveCssColor, isLight } from './hooks/cssVar.js'

package/src/molecules/ColorInputRow.jsx

@@ -116,7 +116,7 @@ export default function ColorInputRow({
       {chip('stretch')}
       <span
         aria-hidden="true"
-        className={`absolute inset-0 inline-flex items-center justify-center rounded-[2px] transition-opacity bg-fg-absolute-48 text-white pointer-events-none ${
+        className={`absolute inset-0 inline-flex items-center justify-center rounded-[var(--kol-radius-xs)] transition-opacity bg-fg-absolute-48 text-white pointer-events-none ${
           locked ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
         }`}
       >

package/src/molecules/ColorSwatch.jsx

@@ -43,7 +43,7 @@ const SIZE_CLASSES = {
 
 const RADIUS_CLASSES = {
   none:  'rounded-none',
-  tight: 'rounded-[2px]',
+  tight: 'rounded-[var(--kol-radius-xs)]',
   sm:    'rounded',
   full:  'rounded-full',
 }

package/src/molecules/FramedMediaBand.jsx

@@ -5,7 +5,7 @@ import Image from './Image'
  * frame (bordered surface-secondary panel, rounded) holding one object-cover
  * image. Extracted from the foundry TypefacePage, where it sat inlined 5x
  * verbatim between content sections. The double radius (`rounded` panel,
- * `rounded-[4px]` image) is intentional — the image nests inside the border.
+ * `rounded-[var(--kol-radius-sm)]` image) is intentional — the image nests inside the border.
  *
  * Presentational — the caller passes finished `src`/`srcSet` strings; any
  * CDN size-ladder generation stays at the call site. `media` swaps an
@@ -44,7 +44,7 @@ export default function FramedMediaBand({
                 srcSet={srcSet}
                 sizes={sizes}
                 alt={alt}
-                className="w-full h-full object-cover rounded-[4px]"
+                className="w-full h-full object-cover rounded-[var(--kol-radius-sm)]"
               />
             )}
           </div>

package/src/molecules/ShellDrawer.jsx

@@ -134,7 +134,7 @@ export default function ShellDrawer({
   return createPortal(
     <>
       <div
-        className={`fixed inset-0 z-[100] bg-black/50 ${motionBackdrop}`}
+        className={`fixed inset-0 z-[100] kol-overlay-scrim ${motionBackdrop}`}
         onClick={onClose}
         aria-hidden="true"
       />