@kolkrabbi/kol-styleguide 0.18.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "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-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-icons": "^0.53.1",
+    "@kolkrabbi/kol-print": "^0.1.1",
+    "@kolkrabbi/kol-component": "^0.317.1",
+    "@kolkrabbi/kol-theme": "^0.200.1",
+    "@kolkrabbi/kol-framework": "^0.65.0"
   },
   "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,7 +260,9 @@ 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: () => (
+    <>
+      {/* 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 */
       <div className="grid w-full grid-cols-9">
@@ -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="kol-sans-body-02 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-sans-body-02 text-meta">{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`} />
@@ -423,24 +425,24 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
         <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-sans-body-02 text-meta"><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-sans-body-02 text-emphasis">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-sans-body-02 text-meta">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,9 +477,9 @@ 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-sans-body-02 text-emphasis">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>
       </>
     ) },

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>