@kolkrabbi/kol-styleguide 0.18.0 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "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-print": "^0.1.1",
+    "@kolkrabbi/kol-theme": "^0.200.2",
     "@kolkrabbi/kol-framework": "^0.65.0",
-    "@kolkrabbi/kol-icons": "^0.53.0",
-    "@kolkrabbi/kol-theme": "^0.200.0",
-    "@kolkrabbi/kol-component": "^0.317.0",
-    "@kolkrabbi/kol-print": "^0.1.1"
+    "@kolkrabbi/kol-component": "^0.317.2",
+    "@kolkrabbi/kol-icons": "^0.53.2"
   },
   "files": [
     "src",

package/src/ColorLab.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Button, ColorPickerPopover, Dropdown, Icon, IconFrame, PaletteHarmonyWheel, SettingsSections, Slider, Tooltip, hexToHsl, hslToHex } from '@kolkrabbi/kol-component'
+import { Button, ColorPickerPopover, Dropdown, Icon, IconFrame, PaletteHarmonyWheel, Slider, Tooltip, hexToHsl, hslToHex } from '@kolkrabbi/kol-component'
 import { COLOR_RELATIONS, CVD_TYPES, DEFAULT_COLOR_LAB, colorLab, colorLabCss, contrastGrade, contrastRatio, hexToOklch, inkOn, midColor, oklchToHex, paletteFromPixels, rollColorLab, simulateCvd, tintLadder } from './colorLab.js'
 import LabWindow, { CopyAction, LabHistory, useLabValue } from './lab/LabWindow.jsx'
 
@@ -260,9 +260,11 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
   const harmony = (
     /* 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?"*) */
-    <SettingsSections divided sections={[{ label: `Harmony: ${harmonyLabel(c.relation)}`, rows: [{ id: 'tiles', align: 'fill', render: () => (
-      /* 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)}>
@@ -274,7 +276,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
           </Tooltip>
         ))}
       </div>
-    ) }] }]} />
+    </>
   )
   const sources = [
     { id: 'base', label: 'Base', icon: 'eyedrop', content: (
@@ -298,11 +300,11 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
           {image
             ? <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
             : (
-              <>
-                <Button size="md" iconLeft="upload" onClick={(e) => { e.stopPropagation(); fileInput.current?.click() }}>Upload your image</Button>
+              <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-03 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 = '' }} />
         </div>
@@ -312,7 +314,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
           <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>
-              {library && <a href={library.href} target="_blank" rel="noreferrer" className="group inline-flex shrink-0 items-center gap-1 kol-mono-12 text-meta hover:text-emphasis">{library.label}<Icon name="external-link" size={12} className="text-oq-48 group-hover:text-oq-96" /></a>}
+              {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">
               {samples.slice(0, 4).map((x) => <SampleTile key={x.src} src={x.src} label={x.label ?? x.src} onPick={() => takeImage(x.src)} />)}
@@ -408,7 +410,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-helper-10 tracking-widest text-meta">{label.toUpperCase()}</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`} />
@@ -419,28 +421,28 @@ 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">
-        {pairCol('Foreground color', fgI, 'fg')}
+        {pairCol('Foreground', fgI, 'fg')}
         <Button variant="nav" size="sm" iconOnly="swap" aria-label="Swap foreground and background" className="mt-6" onClick={() => setPair({ fg: bgI, bg: fgI })} />
-        {pairCol('Background color', bgI, 'bg')}
+        {pairCol('Background', bgI, 'bg')}
       </div>
     </div>
   )
   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-helper-12 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-03 text-emphasis"><span>{r.label}</span><Verdict ok={r.aa} /><Verdict ok={r.aaa} na={r.aaa === null} /></div>
+        <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>
       ))}
     </div>
   )
   /* 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-helper-12 text-meta">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)
@@ -461,8 +463,8 @@ 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-helper-12 text-meta">Foreground colors that pass AA</span>
-          {suggestions.length === 0 && <span className="py-3 kol-sans-body-03 text-meta">None at this hue. Move the background’s lightness.</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">
               <span className="size-4 rounded-full" style={{ background: x.hex }} /><span>{x.hex}</span><span className="text-meta">{ratioText(x.r)} : 1 {contrastGrade(x.r)}</span>
@@ -475,23 +477,27 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
       <>
         {pairHead}
         <div className="flex flex-col gap-2">
-          <span className="kol-helper-12 text-meta">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-03 text-meta">The foreground’s lightness moves until the pair reaches it.</span>
+          <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}
@@ -508,7 +514,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 tabs={tabs.map(({ id, label, icon }) => ({ id, label, icon }))} value={open?.id} onChange={setTab} ariaLabel={`${title} sections`} />}
+            {tabs.length > 0 && <TabsRow size="md" 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>