@kolkrabbi/kol-styleguide 0.18.2 → 0.18.3

package/package.json

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

package/src/ColorLab.jsx

@@ -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 = (

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>