@kolkrabbi/kol-styleguide 0.5.1 → 0.5.3

package/README.md

@@ -2,7 +2,7 @@
 
 The KOL **style-guide / brand-guide** component set — the visual specimens a brand manual is built from. Raided from the monorepo `apps/brand` styleguide and assembled here because a brand guide is a shared capability with its own cadence, distinct from the core UI atoms.
 
-Colour anatomy + the **combination lab** (60/30/10 palette × layout × logo, incl. applied-brand mockups), **logo** construction / clearspace / scaling, **mood tiles**, **type blocks**, and **asset spec tables** — plus the colour/type specimen primitives (`ColorRamp`, `ColorSwatch`, `SpectrumGrid`, `TypeSample`, `TypeSpecCard`, `ProsePreview`, `AssetGrid`, `FeatureSplit`) gathered from the core packages.
+Color anatomy + the **combination lab** (60/30/10 palette × layout × logo, incl. applied-brand mockups), **logo** construction / clearspace / scaling, **mood tiles**, **type blocks**, and **asset spec tables** — plus the color/type specimen primitives (`ColorRamp`, `ColorSwatch`, `SpectrumGrid`, `TypeSample`, `TypeSpecCard`, `ProsePreview`, `AssetGrid`, `FeatureSplit`) gathered from the core packages.
 
 ```js
 import { ComboLab, MoodTile, LogoCard, TypeBlock } from '@kolkrabbi/kol-styleguide'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "private": false,
   "description": "KOL style-guide / brand-guide component set — the visual specimens a brand manual is built from: color anatomy + combination lab, logo construction / clearspace / scaling, mood tiles, type blocks, and asset spec tables. Raided from the apps/brand styleguide. Also the brand tool itself — `Brand` (BrandBook ⇄ BrandAssets) renders a whole brand book from one brand manifest. Sits above @kolkrabbi/kol-{theme,icons,component,framework}.",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-framework": "^0.44.0",
-    "@kolkrabbi/kol-component": "^0.225.0",
-    "@kolkrabbi/kol-icons": "^0.27.1",
-    "@kolkrabbi/kol-theme": "^0.151.0"
+    "@kolkrabbi/kol-component": "^0.230.0",
+    "@kolkrabbi/kol-framework": "^0.46.0",
+    "@kolkrabbi/kol-theme": "^0.157.0",
+    "@kolkrabbi/kol-icons": "^0.29.1"
   },
   "files": [
     "src",

package/src/AssetCard.jsx

@@ -23,7 +23,7 @@
  * no text-transform beyond the `uppercase` the original carried.
  *
  * @param {ReactNode} caption - Label above the frame; omitted, no figcaption renders
- * @param {string} backdrop - CSS colour for the frame ground (default: the fg-04 wash)
+ * @param {string} backdrop - CSS color for the frame ground (default: the fg-04 wash)
  * @param {string} className - Extra classes on the <figure>
  * @param {ReactNode} children - The mock
  */

package/src/AssetTable.jsx

@@ -3,7 +3,7 @@ import { Table } from '@kolkrabbi/kol-component'
 import { Icon } from '@kolkrabbi/kol-icons'
 
 /* Resolve a CSS custom property off the document root. The download seam is
- * handed a COLOUR, not a token — a consumer swapping `currentColor` in raw SVG
+ * handed a COLOR, not a token — a consumer swapping `currentColor` in raw SVG
  * cannot use `var(--x)`, and resolving it at the call site is how two brand
  * apps ended up with the same four-line helper. SSR-safe: '' when no document. */
 function resolveToken(token) {
@@ -34,7 +34,7 @@ function resolveToken(token) {
  *   button. The consumer opens its own overlay (`FullscreenOverlay` in both
  *   brand apps) at the ink it is handed.
  * - **`row.onDownload(row, resolvedInk)`** — the second argument is the
- *   COMPUTED colour, not the token, so a consumer can swap `currentColor` for
+ *   COMPUTED color, not the token, so a consumer can swap `currentColor` for
  *   it and hand back a white mark that downloads white.
  *
  * Columns adapt to the data: Preview appears only when a row carries a
@@ -188,7 +188,7 @@ function DownloadControl({ row, token, onToggleInk }) {
     <button
       type="button"
       onClick={() => row.onDownload(row, resolveToken(token))}
-      className="inline-flex items-center text-fg-64"
+      className="inline-flex items-center text-oq-64"
       aria-label={label}
       title="Download"
     >
@@ -198,7 +198,7 @@ function DownloadControl({ row, token, onToggleInk }) {
     <a
       href={row.href}
       download={row.filename ?? true}
-      className="inline-flex items-center text-fg-64"
+      className="inline-flex items-center text-oq-64"
       aria-label={label}
       title="Download"
     >

package/src/Brand.jsx

@@ -10,7 +10,7 @@ import { BRAND_VIEWS, brandToc, scrollToAnchor } from './brandBook.js'
  * Brand — the whole brand tool: the brand book's two pages over one manifest, BRAND (the identity)
  * and ASSETS (what you download or reproduce), a switch between them, and the page's sections on a
  * rail. ONE component so every app that carries a brand renders the same tool (apps/brand alone,
- * media-shell's Brand tab) — kol-notes' `Notes` shape.
+ * media-hub's Brand tab) — kol-notes' `Notes` shape.
  *
  * The manifest is `@kolkrabbi/kol-brand-template`'s schema; its `book` field carries the copy. The
  * marks come from `Logo` (a component taking `variant`) or `logoSources` (id → raw SVG, which the

package/src/BrandBook.jsx

@@ -114,7 +114,7 @@ export function SectionIndex({ sections }) {
   )
 }
 
-/* Colour — the copy, then one swatch row per ramp under its label and note. The first ramp's
+/* Color — the copy, then one swatch row per ramp under its label and note. The first ramp's
  * heading sits in the copy's own prose block (olina's Concept + Greyscale were one block); each
  * further ramp opens its own, as kol-website's hue ramps did. */
 function ColorSection({ s, ramps }) {

package/src/SocialMocks.jsx

@@ -11,7 +11,7 @@
  * - `KolLogo` imported from the app → the `mark` node.
  * - A seven-stop client palette (champagne / sand / burgundy / maroon / wine)
  *   → `palette`, defaulting to the theme's own ink and paper. A brand supplies
- *   its own; the DS ships no colour.
+ *   its own; the DS ships no color.
  * - `'Bricolage Grotesque'` and `'JetBrains Mono'` by name → `fonts`,
  *   defaulting to `--kol-font-family-sans-narrow` / `--kol-font-family-mono`.
  *   A foreign family by name in a package is how a consumer's type silently
@@ -248,7 +248,7 @@ export function StoryType({ mark, palette, fonts, quote = 'Your line here.', cla
  *
  * @param {ReactNode} mark - The brand mark
  * @param {Object} palette - Partial override of DEFAULT_MOCK_PALETTE
- * @param {string} bg - Ground colour; unset, the `paper` stop
+ * @param {string} bg - Ground color; unset, the `paper` stop
  * @param {'dark'|'light'} polarity - Which way the mark inks against that ground (default: 'dark')
  * @param {string} className - Extra classes on the frame
  */

package/src/Swatch.jsx

@@ -5,7 +5,7 @@ import { ColorSwatch } from '@kolkrabbi/kol-component'
  * with an optional canonical-anchor dot.
  *
  * `ColorSwatch` (kol-component) is the chip alone — a fixed-size pressable atom
- * for paint bars and inspectors. A colour PAGE needs the specimen plus its label
+ * for paint bars and inspectors. A color PAGE needs the specimen plus its label
  * and value, which is the form both brand apps had built locally
  * (`brand-book-mocks-two-consumers`, 2026-09-03: 23 lines, byte-identical in
  * kol-client-olina and kol-website). This composes the atom rather than
@@ -31,7 +31,7 @@ import { ColorSwatch } from '@kolkrabbi/kol-component'
  * The hex is uppercased — that is value formatting, not a text-transform on
  * copy; `name` renders exactly as authored.
  *
- * @param {string} hex - The colour, e.g. '#131316' (required — it is both the paint and the printed value)
+ * @param {string} hex - The color, e.g. '#131316' (required — it is both the paint and the printed value)
  * @param {ReactNode} name - Label beside the value; omitted, only the hex renders
  * @param {boolean} anchor - Mark this stop as the palette's canonical anchor — a difference-blended dot centred on the chip (default: false)
  * @param {number|string} height - Specimen depth, the forks' `.kol-swatch-chip` height (default: 96)

package/src/TypeBlock.jsx

@@ -5,12 +5,12 @@ import { familyFor } from './typographyCuts'
  *
  * Renders one sample string with a fully consumer-controlled type treatment:
  * cut (Right Grotesk width / mono), weight, italic, size, tracking,
- * line-height, case, alignment, colour, and an optional stroke. A pure,
+ * line-height, case, alignment, color, and an optional stroke. A pure,
  * stateless render — feed it props, it draws the specimen. Defaults land on
  * Right Grotesk regular so a bare `<TypeBlock />` shows a legible baseline.
  *
- * **Position + colour are the consumer's job.** TypeBlock owns no positioned
- * container, outline, or drag chrome, and inherits colour by default
+ * **Position + color are the consumer's job.** TypeBlock owns no positioned
+ * container, outline, or drag chrome, and inherits color by default
  * (`currentColor`) so the surrounding surface / theme drives ink. Wrap it in
  * whatever tile, row, or frame the specimen page needs.
  *
@@ -38,7 +38,7 @@ import { familyFor } from './typographyCuts'
  *   align        text-align
  *   color        ink (default 'currentColor' — inherit from surface / theme)
  *   strokeWidth  outline width in px (0 = none)
- *   strokeColor  outline colour (required for stroke to render)
+ *   strokeColor  outline color (required for stroke to render)
  *   className    extra classes on the sample element
  *   style        inline-style overrides merged last
  */

package/src/brandBook.js

@@ -6,7 +6,7 @@
  * or reproduce — each a stack of sections. The section ids, eyebrows, titles and ledes below are
  * that app's, verbatim — except the Logos and Branded ledes, which named files in that repo and are
  * left for its manifest to set; anything that was the CLIENT's copy (About, Tone, Look, the logo concept,
- * the colour concept) is not here — it comes from the manifest's `book` field, section by section
+ * the color concept) is not here — it comes from the manifest's `book` field, section by section
  * (`@kolkrabbi/kol-brand-template` schema). A manifest key overrides the default of the same name.
  */
 
@@ -100,7 +100,7 @@ export const BRANDED_ASSET_ROWS = [
 ]
 
 /** An in-page anchor click that scrolls instead of setting the hash — the host may route on the hash
- *  (media-shell does; apps/brand keeps its page there), so an anchor must not replace it. */
+ *  (media-hub does; apps/brand keeps its page there), so an anchor must not replace it. */
 export function scrollToAnchor(e) {
   e.preventDefault()
   const id = e.currentTarget.getAttribute('href')?.slice(1)

package/src/index.js

@@ -1,6 +1,6 @@
 // @kolkrabbi/kol-styleguide — the brand style-guide component set.
 //
-// Visual specimens a brand manual is built from — colour anatomy + the
+// Visual specimens a brand manual is built from — color anatomy + the
 // combination lab, logo construction / clearspace / scaling, mood tiles,
 // type blocks, asset spec tables. Raided from the monorepo apps/brand
 // styleguide (2026-07). Styling ships in @kolkrabbi/kol-theme