@kolkrabbi/kol-styleguide 0.18.1 → 0.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "private": false,
   "description": "Brand guide components and the brand tool",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.53.1",
+    "@kolkrabbi/kol-component": "^0.317.3",
+    "@kolkrabbi/kol-icons": "^0.53.3",
     "@kolkrabbi/kol-print": "^0.1.1",
-    "@kolkrabbi/kol-component": "^0.317.1",
-    "@kolkrabbi/kol-theme": "^0.200.1",
-    "@kolkrabbi/kol-framework": "^0.65.0"
+    "@kolkrabbi/kol-framework": "^0.65.0",
+    "@kolkrabbi/kol-theme": "^0.200.3"
   },
   "files": [
     "src",

package/src/ColorLab.jsx

@@ -261,10 +261,10 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
     /* HARMONIES (review 3): the DS's glyphs, each named on hover, the mode named in the label — on the Wheel tab only
      * (review 6 — *"you know there is a tab for wheel. why do you put it on every page?"*) */
     <>
-      {/* the label in the rail's one text style (review 7 — *"why does wheel page have this text style"*): the word, the mode in meta */}
-      <div className="flex items-baseline gap-2 kol-sans-body-02"><span className="text-emphasis">Harmony</span><span className="text-meta">{harmonyLabel(c.relation)}</span></div>
-      /* review 5 — *"use bigger icons, and dont use background color"*, the row across the rail's width: no chip, the
-       * glyph in OPAQUE ink (oq, never fg — a translucent stroke shows where the ring crosses a dot), full when chosen */
+      {/* THE EYEBROW IS THE RAIL'S LABEL (review 8 — *"IT WAS PERFECT!!! I was saying why is it only used here"*): the
+        * settings rail's section label, now on every label in the rail */}
+      <p className="kol-eyebrow text-fg-80">Harmony: {harmonyLabel(c.relation)}</p>
+      {/* review 5 — bigger glyphs across the rail's width, no chip, OPAQUE ink (oq, never fg), full when chosen */}
       <div className="grid w-full grid-cols-9">
         {HARMONY_TILES.map((id) => (
           <Tooltip key={id} label={harmonyLabel(id)}>
@@ -303,7 +303,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
               <span className="relative flex flex-col items-center gap-2">
                 <Button size="md" tone="inverted" iconLeft="upload" onClick={(e) => { e.stopPropagation(); fileInput.current?.click() }}>Upload your image</Button>
                 <span className="kol-sans-body-02 text-emphasis">Or drag and drop here</span>
-                <span className="kol-sans-body-02 text-meta">File must be JPEG, JPG, PNG or WebP and up to 40MB</span>
+                <span className="whitespace-nowrap kol-sans-body-03 text-meta">File must be JPEG, JPG, PNG or WebP and up to 40MB</span>
               </span>
             )}
           <input ref={fileInput} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(e) => { fromFile(e.target.files?.[0]); e.target.value = '' }} />
@@ -313,7 +313,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
            * and linked beside them */
           <div className="flex flex-col gap-3">
             <div className="flex items-baseline justify-between gap-3">
-              <span className="kol-sans-body-02 text-emphasis">Don’t have an image? Try one of ours:</span>
+              <span className="min-w-0 truncate kol-sans-body-02 text-emphasis">Don’t have an image? Try one of ours:</span>
               {library && <a href={library.href} target="_blank" rel="noreferrer" className="group inline-flex shrink-0 items-center gap-1 kol-sans-body-02 text-meta hover:text-emphasis">{library.label}<Icon name="external-link" size={12} className="text-oq-48 group-hover:text-oq-96" /></a>}
             </div>
             <div className="grid grid-cols-4 gap-2">
@@ -338,9 +338,10 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
       <div className="flex h-8 w-60 overflow-hidden rounded" aria-label="Palette">
         {c.swatches.map((s) => <span key={s.index} className="flex-1" style={{ background: s.hex }} title={s.hex} />)}
       </div>
-      {/* RANDOMISE (review 6, Adobe's shuffle): the nav rung, like the header's controls; Copy CSS is in the header, where
-        * every lab keeps it */}
-      {view === 'palette' && <Button variant="nav" size="sm" iconLeft="shuffle" className="ml-auto" onClick={roll}>Randomise</Button>}
+      {/* RANDOMISE (review 6, Adobe's shuffle; review 8 — *"WRONG FUCKING BUTTON TONE"*): an explicit tone, so no wrapper's
+        * ground repaints it — the inverted button this window already wears on Upload your image. Copy CSS is in the header,
+        * where every lab keeps it. His review decides the rung. */}
+      {view === 'palette' && <Button tone="inverted" size="sm" iconLeft="shuffle" className="ml-auto" onClick={roll}>Randomise</Button>}
     </div>
   )
   const paletteStage = (
@@ -410,7 +411,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
   /* the pair, Adobe's: Foreground and Background side by side, swap between them, each colour's lightness under it */
   const pairCol = (label, i, key) => (
     <div className="flex min-w-0 flex-col gap-2">
-      <span className="kol-sans-body-02 text-meta">{label}</span>
+      <span className="kol-eyebrow text-fg-80">{label}</span>
       <div className="flex items-center gap-2">
         <span className="size-4 shrink-0 rounded-full" style={{ background: c.colors[i] }} />
         <Dropdown size="sm" value={String(i)} onChange={(v) => setPair({ fg: fgI, bg: bgI, [key]: Number(v) })} options={colourOptions} className="min-w-0 flex-1" ariaLabel={`${label} colour`} />
@@ -421,7 +422,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
   const pairHead = (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between gap-3">
-        <span className="kol-sans-body-02 text-emphasis">Contrast ratio</span>
+        <span className="kol-eyebrow text-fg-80">Contrast ratio</span>
         <span className={`inline-flex items-center gap-1 rounded px-2 py-0.5 kol-mono-12 ${ratio >= 4.5 ? 'bg-oq-08 text-emphasis' : 'bg-oq-04 text-meta'}`}><Icon name={ratio >= 4.5 ? 'check' : 'alert-triangle'} size={12} className={ratio >= 4.5 ? 'text-oq-96' : 'text-oq-48'} />{ratioText(ratio)} : 1</span>
       </div>
       <div className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-start gap-2">
@@ -433,7 +434,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
   )
   const summaryTable = (
     <div className="flex flex-col">
-      <div className="grid grid-cols-[minmax(0,1fr)_64px_64px] border-b border-oq-16 pb-2 kol-sans-body-02 text-meta"><span>Category</span><span>AA</span><span>AAA</span></div>
+      <div className="grid grid-cols-[minmax(0,1fr)_64px_64px] border-b border-oq-16 pb-2 kol-eyebrow text-fg-80"><span>Category</span><span>AA</span><span>AAA</span></div>
       {SUMMARY.map((r) => (
         <div key={r.id} className="grid grid-cols-[minmax(0,1fr)_64px_64px] items-center border-b border-oq-08 py-3 kol-sans-body-02 text-emphasis"><span>{r.label}</span><Verdict ok={r.aa} /><Verdict ok={r.aaa} na={r.aaa === null} /></div>
       ))}
@@ -442,7 +443,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
   /* KOL's text levels: the foreground at every ink stop over the background, each measured */
   const ladder = (
     <div className="flex flex-col gap-2">
-      <span className="kol-sans-body-02 text-emphasis">Text levels</span>
+      <span className="kol-eyebrow text-fg-80">Text levels</span>
       <div className="flex w-full flex-col rounded p-3" style={{ background: bg }}>
         {c.text.map((x) => {
           const r = contrastRatio(over(fg, bg, x.stop / 100), bg)
@@ -463,7 +464,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
       <>
         {pairHead}
         <div className="flex flex-col">
-          <span className="border-b border-oq-16 pb-2 kol-sans-body-02 text-meta">Foreground colors that pass AA</span>
+          <span className="border-b border-oq-16 pb-2 kol-eyebrow text-fg-80">Foreground colors that pass AA</span>
           {suggestions.length === 0 && <span className="py-3 kol-sans-body-02 text-meta">None at this hue. Move the background’s lightness.</span>}
           {suggestions.map((x) => (
             <button key={x.hex} type="button" onClick={() => editAt(fgI, x.hex)} className="grid cursor-pointer grid-cols-[16px_minmax(0,1fr)_auto] items-center gap-3 border-b border-oq-08 py-2 text-left kol-mono-12 text-emphasis hover:bg-oq-04">
@@ -477,23 +478,27 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
       <>
         {pairHead}
         <div className="flex flex-col gap-2">
-          <span className="kol-sans-body-02 text-emphasis">Target ratio</span>
+          <span className="kol-eyebrow text-fg-80">Target ratio</span>
           <Slider className="w-full" min={1} max={21} step={0.5} value={target ?? Math.round(ratio * 2) / 2} onChange={(t) => { setTarget(t); editAt(fgI, solveFor(t)) }} readout="input" displayWidth={4} readoutPreset="rail" aria-label="Target contrast ratio" />
           <span className="kol-sans-body-02 text-meta">The foreground’s lightness moves until the pair reaches it.</span>
         </div>
       </>
     ) },
   ]
-  const previewImage = image ?? samples[0]?.src
+  /* THE PREVIEW IN THE PALETTE'S OWN FORMS (review 8 — *"how is this using ANYTHING but the colors?? … show some
+   * forms that use the pallette"*): the page in bg and fg, the other colours as forms beside the text; the DS Button */
+  const FORMS = ['left-[8%] top-[10%] w-[52%] aspect-square rounded-full', 'right-[8%] bottom-[8%] w-[38%] aspect-square rounded-[12%]', 'left-[6%] bottom-[12%] h-[14%] w-[48%] rounded-full', 'right-[10%] top-[8%] h-[9%] w-[32%] rounded']
+  const forms = c.colors.filter((_, i) => i !== fgI && i !== bgI)
   const contrastStage = (
-    /* ADOBE'S PREVIEW: the image beside the pair as a page would use it — a headline, body text and a button */
     <div className="flex h-full min-h-[240px] flex-col gap-3">
-      <div className={`grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)] overflow-hidden rounded ${previewImage ? 'grid-cols-2' : ''}`} style={{ background: bg, color: fg }}>
-        {previewImage && <img src={previewImage} alt="" className="h-full min-h-0 w-full object-cover" />}
+      <div className="grid min-h-0 flex-1 grid-cols-2 grid-rows-[minmax(0,1fr)] overflow-hidden rounded" style={{ background: bg, color: fg }}>
+        <div className="relative min-h-0 overflow-hidden">
+          {(forms.length ? forms : [fg]).slice(0, 4).map((hex, i) => <span key={`${hex}${i}`} className={`absolute ${FORMS[i]}`} style={{ background: hex }} />)}
+        </div>
         <div className="flex min-h-0 flex-col justify-center gap-6 p-10">
           <span className="kol-sans-heading-01 leading-none">The quick brown fox</span>
           <span className="max-w-[48ch] kol-sans-body-02">Body text in the foreground on the background, the size most of a page is read at. If this line is hard to read, so is the page.</span>
-          <span className="inline-flex self-start rounded px-6 py-3 kol-mono-12" style={{ background: fg, color: bg }}>Button</span>
+          <Button size="md" className="self-start" style={{ '--kol-tone-bg': fg, '--kol-tone-hover-bg': fg, '--kol-tone-fg': bg, '--kol-tone-hover-fg': bg, '--kol-tone-image': 'none', '--kol-tone-hover-image': 'none' }}>Button</Button>
         </div>
       </div>
       {paletteFoot}
@@ -510,7 +515,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
   const visionRail = [{ id: 'conflicts', label: 'Conflicts', content: (
     <>
       <div className="flex items-center justify-between gap-3 rounded bg-oq-04 p-3">
-        <span className="kol-sans-body-02 text-emphasis">Potential color blind conflicts</span>
+        <span className="kol-eyebrow text-fg-80">Potential color blind conflicts</span>
         <span className={`inline-flex shrink-0 items-center gap-1 rounded px-2 py-0.5 kol-mono-12 ${conflicts ? 'bg-oq-08 text-emphasis' : 'text-meta'}`}>{conflicts && <Icon name="alert-triangle" size={12} className="text-oq-96" />}{conflicts ? 'Conflicts found' : 'None'}</span>
       </div>
       <PaletteDots colors={c.colors} />

package/src/lab/LabWindow.jsx

@@ -65,7 +65,7 @@ export default function LabWindow({ title, actions, tabs = [], tab: tabProp, onT
             <div {...grabProps} className="kol-rail-grab kol-rail-grab--left hidden md:block" />
             {/* THE TABSROW AT THE TOP OF EVERY WINDOW (review 6 — *"why dont we make it a rule at top of each window?"*):
               * one section or many, the rail opens on its tabs */}
-            {tabs.length > 0 && <TabsRow size="md" tabs={tabs.map(({ id, label, icon }) => ({ id, label, icon }))} value={open?.id} onChange={setTab} ariaLabel={`${title} sections`} />}
+            {tabs.length > 0 && <TabsRow type="sans" tabs={tabs.map(({ id, label, icon }) => ({ id, label, icon }))} value={open?.id} onChange={setTab} ariaLabel={`${title} sections`} />}
             <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto">{open?.content}</div>
             {foot && <div className="flex flex-wrap items-center gap-1">{foot}</div>}
           </aside>