@welcome-back/brand 0.4.0 → 0.6.0

package/README.md

@@ -320,6 +320,18 @@ POS_TOKENS['--wb-accent']; // '#171717'
 
 `posTokensCss(selector)` returns the same rule for another selector.
 
+### Category colours
+
+`CATEGORY_PALETTE` (`src/categoryPalette.ts`) is the 8-colour set of the POS
+(set F2, owner 2026-10-21). Each colour has a swatch, a tile `tint`, a photo
+`slot` and an `ink` for the initials; they are also in `POS_TOKENS` as
+`--wb-cat-1` … `--wb-cat-8` (+ `-tint`, `-slot`, `-ink`).
+
+A category stores its **slot number** (1–8), never a hex. `categorySlotForIndex(i)`
+gives the automatic slot in tree order (1…8, 1…), so neighbours never share a
+colour; `DEFAULT_CATEGORY_SLOT` (8, Piedra) is the neutral one. The test checks the
+contrast rules for every colour. Design: Paper 01M5FB9SPXPPK51CYD7VT2GP6F, F2.
+
 ## Product image frames
 
 The frames a product photo is shown in: `1:1`, `4:3`, `3:2`, `16:9`. The

package/dist/cjs/categoryPalette.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CATEGORY_PALETTE_TOKENS = exports.DEFAULT_CATEGORY_SLOT = exports.CATEGORY_PALETTE = void 0;
+exports.categorySlotForIndex = categorySlotForIndex;
+exports.CATEGORY_PALETTE = [
+    { name: "Dorado", swatch: "#a07c2b", tint: "#f3ecdd", slot: "#eae2d0", ink: "#785d20" },
+    { name: "Azul mar", swatch: "#1f81a6", tint: "#e2eff4", slot: "#cee3eb", ink: "#17617c" },
+    { name: "Terracota", swatch: "#b55a3c", tint: "#f5eae6", slot: "#efdbd4", ink: "#88442d" },
+    { name: "Verde", swatch: "#458d5c", tint: "#e7f0ea", slot: "#d6e6db", ink: "#346a45" },
+    { name: "Ciruela", swatch: "#9c5389", tint: "#f2e9f0", slot: "#e9d9e5", ink: "#753e67" },
+    { name: "Azul", swatch: "#3f6fb5", tint: "#e6ecf5", slot: "#d5dfef", ink: "#2f5388" },
+    { name: "Pizarra", swatch: "#5e7a80", tint: "#eaeeee", slot: "#dce2e3", ink: "#465c60" },
+    { name: "Piedra", swatch: "#8a7f6e", tint: "#f0eeec", slot: "#e5e3df", ink: "#685f52" },
+];
+/** The neutral slot a category gets when nothing else applies. */
+exports.DEFAULT_CATEGORY_SLOT = 8;
+/** Slot for the n-th category in tree order (0-based): 1…8, then 1… again. */
+function categorySlotForIndex(index) {
+    return ((((index % 8) + 8) % 8) + 1);
+}
+/** CSS variables of the palette: --wb-cat-N (swatch), -tint, -slot, -ink. */
+exports.CATEGORY_PALETTE_TOKENS = Object.fromEntries(exports.CATEGORY_PALETTE.flatMap((c, i) => [
+    [`--wb-cat-${i + 1}`, c.swatch],
+    [`--wb-cat-${i + 1}-tint`, c.tint],
+    [`--wb-cat-${i + 1}-slot`, c.slot],
+    [`--wb-cat-${i + 1}-ink`, c.ink],
+]));

package/dist/cjs/index.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.productImageKeptArea = exports.productImageAspectRatio = exports.PRODUCT_IMAGE_FRAMES = exports.posTokensCss = exports.POS_TOKENS = exports.RunnerLoader = void 0;
+exports.productImageKeptArea = exports.productImageAspectRatio = exports.PRODUCT_IMAGE_FRAMES = exports.categorySlotForIndex = exports.DEFAULT_CATEGORY_SLOT = exports.CATEGORY_PALETTE_TOKENS = exports.CATEGORY_PALETTE = exports.posTokensCss = exports.POS_TOKENS = exports.RunnerLoader = void 0;
 var RunnerLoader_js_1 = require("./RunnerLoader.js");
 Object.defineProperty(exports, "RunnerLoader", { enumerable: true, get: function () { return RunnerLoader_js_1.RunnerLoader; } });
 var posTokens_js_1 = require("./posTokens.js");
 Object.defineProperty(exports, "POS_TOKENS", { enumerable: true, get: function () { return posTokens_js_1.POS_TOKENS; } });
 Object.defineProperty(exports, "posTokensCss", { enumerable: true, get: function () { return posTokens_js_1.posTokensCss; } });
+var categoryPalette_js_1 = require("./categoryPalette.js");
+Object.defineProperty(exports, "CATEGORY_PALETTE", { enumerable: true, get: function () { return categoryPalette_js_1.CATEGORY_PALETTE; } });
+Object.defineProperty(exports, "CATEGORY_PALETTE_TOKENS", { enumerable: true, get: function () { return categoryPalette_js_1.CATEGORY_PALETTE_TOKENS; } });
+Object.defineProperty(exports, "DEFAULT_CATEGORY_SLOT", { enumerable: true, get: function () { return categoryPalette_js_1.DEFAULT_CATEGORY_SLOT; } });
+Object.defineProperty(exports, "categorySlotForIndex", { enumerable: true, get: function () { return categoryPalette_js_1.categorySlotForIndex; } });
 var productImageFrames_js_1 = require("./productImageFrames.js");
 Object.defineProperty(exports, "PRODUCT_IMAGE_FRAMES", { enumerable: true, get: function () { return productImageFrames_js_1.PRODUCT_IMAGE_FRAMES; } });
 Object.defineProperty(exports, "productImageAspectRatio", { enumerable: true, get: function () { return productImageFrames_js_1.productImageAspectRatio; } });

package/dist/cjs/posTokens.js

@@ -13,6 +13,7 @@ exports.posTokensCss = posTokensCss;
  * pos-ui imports the generated `@welcome-back/brand/pos-tokens.css`; React code
  * reads `POS_TOKENS`.
  */
+const categoryPalette_js_1 = require("./categoryPalette.js");
 exports.POS_TOKENS = {
     // Monochrome chrome on a warm ivory canvas (pos-ui DESIGN.md §3).
     "--wb-primary": "#171717",
@@ -24,11 +25,12 @@ exports.POS_TOKENS = {
     // tokens are complete colors — Tailwind's `/NN` alpha modifier on them
     // compiles to an invalid rgb() and renders transparent.
     "--wb-accent-soft": "rgba(23, 23, 23, 0.06)",
-    // Warm ivory neutrals — the identity. Never cool gray.
-    "--wb-bg": "#f6f4e9",
+    // White page like the dashboard (owner, 2026-10-21); warm neutrals for
+    // surfaces and borders. Ivory stays on the ticket, like paper.
+    "--wb-bg": "#ffffff",
     "--wb-surface": "#ffffff",
     "--wb-surface2": "#f2f1ec",
-    "--wb-ticket-bg": "#f2f1ec",
+    "--wb-ticket-bg": "#f6f4e9",
     "--wb-border": "#e5e2d6",
     // Translucent ivory veil for overlays (e.g. "Agotado").
     "--wb-veil": "rgba(246, 244, 233, 0.72)",
@@ -43,12 +45,44 @@ exports.POS_TOKENS = {
     "--wb-amber-soft": "rgba(245, 158, 11, 0.15)",
     "--wb-error": "#ef4444",
     "--wb-error-soft": "rgba(239, 68, 68, 0.15)",
+    // Text on a status tint (the plain status colour is too light to read there).
+    "--wb-amber-strong": "#92400e",
+    "--wb-error-strong": "#b91c1c",
+    // The «Agotado · vuelve mañana» badge.
+    "--wb-soldout": "#fef3c7",
+    "--wb-soldout-ink": "#713f12",
+    // Placeholder and hint text.
+    "--wb-faint": "#6e6a5e",
     "--wb-primary-soft": "rgba(23, 23, 23, 0.15)",
     // The brand tone. Same as the primary: the POS is monochrome.
     "--wb-brand": "#171717",
+    // 12 px everywhere like the dashboard, 6 px for items inside a control
+    // (segmented options). Owner, 2026-10-21.
     "--wb-radius": "12px",
-    "--wb-radius-lg": "16px",
-    "--wb-font": "'Montserrat'",
+    "--wb-radius-lg": "12px",
+    "--wb-radius-sm": "6px",
+    // Touch sizes: the POS differs from the dashboard (36 px) on purpose.
+    // 48 px controls, 56 px for money actions (Cobrar, keypad), 44 px floor.
+    "--wb-control-height": "48px",
+    "--wb-control-height-lg": "56px",
+    "--wb-touch-min": "44px",
+    // The money keypad: 64 on tablet and phone, 56 on a payment terminal.
+    "--wb-keypad-key": "64px",
+    "--wb-keypad-key-compact": "56px",
+    // Type scale (owner, 2026-10-21). Body is 15 px: the POS is read at arm's
+    // length. Money is tabular; below 600 px wide the -narrow sizes apply.
+    "--wb-text-money-xl": "48px",
+    "--wb-text-money-xl-narrow": "32px",
+    "--wb-text-money-lg": "40px",
+    "--wb-text-money-lg-narrow": "28px",
+    "--wb-text-title": "22px",
+    "--wb-text-heading": "18px",
+    "--wb-text-body": "15px",
+    "--wb-text-small": "13px",
+    "--wb-text-caption": "12px",
+    "--wb-font": "'Inter'",
+    // Category colours: --wb-cat-1 … --wb-cat-8 (+ -tint, -slot, -ink).
+    ...categoryPalette_js_1.CATEGORY_PALETTE_TOKENS,
 };
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */
 function posTokensCss(selector = ":root") {

package/dist/esm/categoryPalette.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The category colours of the POS (owner, 2026-10-21: set F2 is the default).
+ * A category stores its slot number (1–8), never a hex, so a later
+ * «choose your palette» swaps every category at once. Slot 8 is the neutral
+ * default in every set. Catálogo assigns slots in tree order (1…8, 1…) so two
+ * neighbours never share a colour; the owner may override.
+ *
+ * Each colour has four values: swatch (the dot), tint (tile background),
+ * slot (photo slot without a photo) and ink (the initials on the slot).
+ * Text on a tint is always the foreground (#000) and muted (#404040).
+ */
+export interface CategoryColour {
+    readonly name: string;
+    readonly swatch: string;
+    readonly tint: string;
+    readonly slot: string;
+    readonly ink: string;
+}
+export declare const CATEGORY_PALETTE: readonly [{
+    readonly name: "Dorado";
+    readonly swatch: "#a07c2b";
+    readonly tint: "#f3ecdd";
+    readonly slot: "#eae2d0";
+    readonly ink: "#785d20";
+}, {
+    readonly name: "Azul mar";
+    readonly swatch: "#1f81a6";
+    readonly tint: "#e2eff4";
+    readonly slot: "#cee3eb";
+    readonly ink: "#17617c";
+}, {
+    readonly name: "Terracota";
+    readonly swatch: "#b55a3c";
+    readonly tint: "#f5eae6";
+    readonly slot: "#efdbd4";
+    readonly ink: "#88442d";
+}, {
+    readonly name: "Verde";
+    readonly swatch: "#458d5c";
+    readonly tint: "#e7f0ea";
+    readonly slot: "#d6e6db";
+    readonly ink: "#346a45";
+}, {
+    readonly name: "Ciruela";
+    readonly swatch: "#9c5389";
+    readonly tint: "#f2e9f0";
+    readonly slot: "#e9d9e5";
+    readonly ink: "#753e67";
+}, {
+    readonly name: "Azul";
+    readonly swatch: "#3f6fb5";
+    readonly tint: "#e6ecf5";
+    readonly slot: "#d5dfef";
+    readonly ink: "#2f5388";
+}, {
+    readonly name: "Pizarra";
+    readonly swatch: "#5e7a80";
+    readonly tint: "#eaeeee";
+    readonly slot: "#dce2e3";
+    readonly ink: "#465c60";
+}, {
+    readonly name: "Piedra";
+    readonly swatch: "#8a7f6e";
+    readonly tint: "#f0eeec";
+    readonly slot: "#e5e3df";
+    readonly ink: "#685f52";
+}];
+export type CategorySlot = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+/** The neutral slot a category gets when nothing else applies. */
+export declare const DEFAULT_CATEGORY_SLOT: CategorySlot;
+/** Slot for the n-th category in tree order (0-based): 1…8, then 1… again. */
+export declare function categorySlotForIndex(index: number): CategorySlot;
+type CategoryVar = `--wb-cat-${CategorySlot}${"" | "-tint" | "-slot" | "-ink"}`;
+/** CSS variables of the palette: --wb-cat-N (swatch), -tint, -slot, -ink. */
+export declare const CATEGORY_PALETTE_TOKENS: Record<CategoryVar, string>;
+export {};

package/dist/esm/categoryPalette.js

@@ -0,0 +1,23 @@
+export const CATEGORY_PALETTE = [
+    { name: "Dorado", swatch: "#a07c2b", tint: "#f3ecdd", slot: "#eae2d0", ink: "#785d20" },
+    { name: "Azul mar", swatch: "#1f81a6", tint: "#e2eff4", slot: "#cee3eb", ink: "#17617c" },
+    { name: "Terracota", swatch: "#b55a3c", tint: "#f5eae6", slot: "#efdbd4", ink: "#88442d" },
+    { name: "Verde", swatch: "#458d5c", tint: "#e7f0ea", slot: "#d6e6db", ink: "#346a45" },
+    { name: "Ciruela", swatch: "#9c5389", tint: "#f2e9f0", slot: "#e9d9e5", ink: "#753e67" },
+    { name: "Azul", swatch: "#3f6fb5", tint: "#e6ecf5", slot: "#d5dfef", ink: "#2f5388" },
+    { name: "Pizarra", swatch: "#5e7a80", tint: "#eaeeee", slot: "#dce2e3", ink: "#465c60" },
+    { name: "Piedra", swatch: "#8a7f6e", tint: "#f0eeec", slot: "#e5e3df", ink: "#685f52" },
+];
+/** The neutral slot a category gets when nothing else applies. */
+export const DEFAULT_CATEGORY_SLOT = 8;
+/** Slot for the n-th category in tree order (0-based): 1…8, then 1… again. */
+export function categorySlotForIndex(index) {
+    return ((((index % 8) + 8) % 8) + 1);
+}
+/** CSS variables of the palette: --wb-cat-N (swatch), -tint, -slot, -ink. */
+export const CATEGORY_PALETTE_TOKENS = Object.fromEntries(CATEGORY_PALETTE.flatMap((c, i) => [
+    [`--wb-cat-${i + 1}`, c.swatch],
+    [`--wb-cat-${i + 1}-tint`, c.tint],
+    [`--wb-cat-${i + 1}-slot`, c.slot],
+    [`--wb-cat-${i + 1}-ink`, c.ink],
+]));

package/dist/esm/index.d.ts

@@ -2,5 +2,7 @@ export { RunnerLoader } from "./RunnerLoader.js";
 export type { RunnerLoaderProps } from "./RunnerLoader.js";
 export { POS_TOKENS, posTokensCss } from "./posTokens.js";
 export type { PosToken } from "./posTokens.js";
+export { CATEGORY_PALETTE, CATEGORY_PALETTE_TOKENS, DEFAULT_CATEGORY_SLOT, categorySlotForIndex, } from "./categoryPalette.js";
+export type { CategoryColour, CategorySlot } from "./categoryPalette.js";
 export { PRODUCT_IMAGE_FRAMES, productImageAspectRatio, productImageKeptArea, } from "./productImageFrames.js";
 export type { ProductImageFrame } from "./productImageFrames.js";

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export { RunnerLoader } from "./RunnerLoader.js";
 export { POS_TOKENS, posTokensCss } from "./posTokens.js";
+export { CATEGORY_PALETTE, CATEGORY_PALETTE_TOKENS, DEFAULT_CATEGORY_SLOT, categorySlotForIndex, } from "./categoryPalette.js";
 export { PRODUCT_IMAGE_FRAMES, productImageAspectRatio, productImageKeptArea, } from "./productImageFrames.js";

package/dist/esm/posTokens.d.ts

@@ -1,24 +1,45 @@
-/**
- * The WelcomeBack POS look: the CSS custom properties pos-ui paints with, and
- * the ones the dashboard's POS / KDS previews copy. One source, so a preview
- * can never drift from the register.
- *
- * The POS is not themable (owner decision, 2026-09-28): every business gets
- * this same look. Nothing overrides these per tenant.
- *
- * pos-ui imports the generated `@welcome-back/brand/pos-tokens.css`; React code
- * reads `POS_TOKENS`.
- */
 export declare const POS_TOKENS: {
+    readonly "--wb-cat-1": string;
+    readonly "--wb-cat-1-tint": string;
+    readonly "--wb-cat-1-slot": string;
+    readonly "--wb-cat-1-ink": string;
+    readonly "--wb-cat-8": string;
+    readonly "--wb-cat-8-tint": string;
+    readonly "--wb-cat-8-slot": string;
+    readonly "--wb-cat-8-ink": string;
+    readonly "--wb-cat-2": string;
+    readonly "--wb-cat-2-tint": string;
+    readonly "--wb-cat-2-slot": string;
+    readonly "--wb-cat-2-ink": string;
+    readonly "--wb-cat-3": string;
+    readonly "--wb-cat-3-tint": string;
+    readonly "--wb-cat-3-slot": string;
+    readonly "--wb-cat-3-ink": string;
+    readonly "--wb-cat-4": string;
+    readonly "--wb-cat-4-tint": string;
+    readonly "--wb-cat-4-slot": string;
+    readonly "--wb-cat-4-ink": string;
+    readonly "--wb-cat-5": string;
+    readonly "--wb-cat-5-tint": string;
+    readonly "--wb-cat-5-slot": string;
+    readonly "--wb-cat-5-ink": string;
+    readonly "--wb-cat-6": string;
+    readonly "--wb-cat-6-tint": string;
+    readonly "--wb-cat-6-slot": string;
+    readonly "--wb-cat-6-ink": string;
+    readonly "--wb-cat-7": string;
+    readonly "--wb-cat-7-tint": string;
+    readonly "--wb-cat-7-slot": string;
+    readonly "--wb-cat-7-ink": string;
     readonly "--wb-primary": "#171717";
     readonly "--wb-accent": "#171717";
     readonly "--wb-on-accent": "#ffffff";
     readonly "--wb-on-accent-soft": "rgba(255, 255, 255, 0.2)";
     readonly "--wb-accent-soft": "rgba(23, 23, 23, 0.06)";
-    readonly "--wb-bg": "#f6f4e9";
+    readonly "--wb-bg": "#ffffff";
     readonly "--wb-surface": "#ffffff";
     readonly "--wb-surface2": "#f2f1ec";
-    readonly "--wb-ticket-bg": "#f2f1ec";
+    readonly "--wb-ticket-bg": "#f6f4e9";
     readonly "--wb-border": "#e5e2d6";
     readonly "--wb-veil": "rgba(246, 244, 233, 0.72)";
     readonly "--wb-text": "#000000";
@@ -30,11 +51,31 @@ export declare const POS_TOKENS: {
     readonly "--wb-amber-soft": "rgba(245, 158, 11, 0.15)";
     readonly "--wb-error": "#ef4444";
     readonly "--wb-error-soft": "rgba(239, 68, 68, 0.15)";
+    readonly "--wb-amber-strong": "#92400e";
+    readonly "--wb-error-strong": "#b91c1c";
+    readonly "--wb-soldout": "#fef3c7";
+    readonly "--wb-soldout-ink": "#713f12";
+    readonly "--wb-faint": "#6e6a5e";
     readonly "--wb-primary-soft": "rgba(23, 23, 23, 0.15)";
     readonly "--wb-brand": "#171717";
     readonly "--wb-radius": "12px";
-    readonly "--wb-radius-lg": "16px";
-    readonly "--wb-font": "'Montserrat'";
+    readonly "--wb-radius-lg": "12px";
+    readonly "--wb-radius-sm": "6px";
+    readonly "--wb-control-height": "48px";
+    readonly "--wb-control-height-lg": "56px";
+    readonly "--wb-touch-min": "44px";
+    readonly "--wb-keypad-key": "64px";
+    readonly "--wb-keypad-key-compact": "56px";
+    readonly "--wb-text-money-xl": "48px";
+    readonly "--wb-text-money-xl-narrow": "32px";
+    readonly "--wb-text-money-lg": "40px";
+    readonly "--wb-text-money-lg-narrow": "28px";
+    readonly "--wb-text-title": "22px";
+    readonly "--wb-text-heading": "18px";
+    readonly "--wb-text-body": "15px";
+    readonly "--wb-text-small": "13px";
+    readonly "--wb-text-caption": "12px";
+    readonly "--wb-font": "'Inter'";
 };
 export type PosToken = keyof typeof POS_TOKENS;
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */

package/dist/esm/posTokens.js

@@ -9,6 +9,7 @@
  * pos-ui imports the generated `@welcome-back/brand/pos-tokens.css`; React code
  * reads `POS_TOKENS`.
  */
+import { CATEGORY_PALETTE_TOKENS } from "./categoryPalette.js";
 export const POS_TOKENS = {
     // Monochrome chrome on a warm ivory canvas (pos-ui DESIGN.md §3).
     "--wb-primary": "#171717",
@@ -20,11 +21,12 @@ export const POS_TOKENS = {
     // tokens are complete colors — Tailwind's `/NN` alpha modifier on them
     // compiles to an invalid rgb() and renders transparent.
     "--wb-accent-soft": "rgba(23, 23, 23, 0.06)",
-    // Warm ivory neutrals — the identity. Never cool gray.
-    "--wb-bg": "#f6f4e9",
+    // White page like the dashboard (owner, 2026-10-21); warm neutrals for
+    // surfaces and borders. Ivory stays on the ticket, like paper.
+    "--wb-bg": "#ffffff",
     "--wb-surface": "#ffffff",
     "--wb-surface2": "#f2f1ec",
-    "--wb-ticket-bg": "#f2f1ec",
+    "--wb-ticket-bg": "#f6f4e9",
     "--wb-border": "#e5e2d6",
     // Translucent ivory veil for overlays (e.g. "Agotado").
     "--wb-veil": "rgba(246, 244, 233, 0.72)",
@@ -39,12 +41,44 @@ export const POS_TOKENS = {
     "--wb-amber-soft": "rgba(245, 158, 11, 0.15)",
     "--wb-error": "#ef4444",
     "--wb-error-soft": "rgba(239, 68, 68, 0.15)",
+    // Text on a status tint (the plain status colour is too light to read there).
+    "--wb-amber-strong": "#92400e",
+    "--wb-error-strong": "#b91c1c",
+    // The «Agotado · vuelve mañana» badge.
+    "--wb-soldout": "#fef3c7",
+    "--wb-soldout-ink": "#713f12",
+    // Placeholder and hint text.
+    "--wb-faint": "#6e6a5e",
     "--wb-primary-soft": "rgba(23, 23, 23, 0.15)",
     // The brand tone. Same as the primary: the POS is monochrome.
     "--wb-brand": "#171717",
+    // 12 px everywhere like the dashboard, 6 px for items inside a control
+    // (segmented options). Owner, 2026-10-21.
     "--wb-radius": "12px",
-    "--wb-radius-lg": "16px",
-    "--wb-font": "'Montserrat'",
+    "--wb-radius-lg": "12px",
+    "--wb-radius-sm": "6px",
+    // Touch sizes: the POS differs from the dashboard (36 px) on purpose.
+    // 48 px controls, 56 px for money actions (Cobrar, keypad), 44 px floor.
+    "--wb-control-height": "48px",
+    "--wb-control-height-lg": "56px",
+    "--wb-touch-min": "44px",
+    // The money keypad: 64 on tablet and phone, 56 on a payment terminal.
+    "--wb-keypad-key": "64px",
+    "--wb-keypad-key-compact": "56px",
+    // Type scale (owner, 2026-10-21). Body is 15 px: the POS is read at arm's
+    // length. Money is tabular; below 600 px wide the -narrow sizes apply.
+    "--wb-text-money-xl": "48px",
+    "--wb-text-money-xl-narrow": "32px",
+    "--wb-text-money-lg": "40px",
+    "--wb-text-money-lg-narrow": "28px",
+    "--wb-text-title": "22px",
+    "--wb-text-heading": "18px",
+    "--wb-text-body": "15px",
+    "--wb-text-small": "13px",
+    "--wb-text-caption": "12px",
+    "--wb-font": "'Inter'",
+    // Category colours: --wb-cat-1 … --wb-cat-8 (+ -tint, -slot, -ink).
+    ...CATEGORY_PALETTE_TOKENS,
 };
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */
 export function posTokensCss(selector = ":root") {

package/dist/pos-tokens.css

@@ -5,10 +5,10 @@
   --wb-on-accent: #ffffff;
   --wb-on-accent-soft: rgba(255, 255, 255, 0.2);
   --wb-accent-soft: rgba(23, 23, 23, 0.06);
-  --wb-bg: #f6f4e9;
+  --wb-bg: #ffffff;
   --wb-surface: #ffffff;
   --wb-surface2: #f2f1ec;
-  --wb-ticket-bg: #f2f1ec;
+  --wb-ticket-bg: #f6f4e9;
   --wb-border: #e5e2d6;
   --wb-veil: rgba(246, 244, 233, 0.72);
   --wb-text: #000000;
@@ -20,9 +20,61 @@
   --wb-amber-soft: rgba(245, 158, 11, 0.15);
   --wb-error: #ef4444;
   --wb-error-soft: rgba(239, 68, 68, 0.15);
+  --wb-amber-strong: #92400e;
+  --wb-error-strong: #b91c1c;
+  --wb-soldout: #fef3c7;
+  --wb-soldout-ink: #713f12;
+  --wb-faint: #6e6a5e;
   --wb-primary-soft: rgba(23, 23, 23, 0.15);
   --wb-brand: #171717;
   --wb-radius: 12px;
-  --wb-radius-lg: 16px;
-  --wb-font: 'Montserrat';
+  --wb-radius-lg: 12px;
+  --wb-radius-sm: 6px;
+  --wb-control-height: 48px;
+  --wb-control-height-lg: 56px;
+  --wb-touch-min: 44px;
+  --wb-keypad-key: 64px;
+  --wb-keypad-key-compact: 56px;
+  --wb-text-money-xl: 48px;
+  --wb-text-money-xl-narrow: 32px;
+  --wb-text-money-lg: 40px;
+  --wb-text-money-lg-narrow: 28px;
+  --wb-text-title: 22px;
+  --wb-text-heading: 18px;
+  --wb-text-body: 15px;
+  --wb-text-small: 13px;
+  --wb-text-caption: 12px;
+  --wb-font: 'Inter';
+  --wb-cat-1: #a07c2b;
+  --wb-cat-1-tint: #f3ecdd;
+  --wb-cat-1-slot: #eae2d0;
+  --wb-cat-1-ink: #785d20;
+  --wb-cat-2: #1f81a6;
+  --wb-cat-2-tint: #e2eff4;
+  --wb-cat-2-slot: #cee3eb;
+  --wb-cat-2-ink: #17617c;
+  --wb-cat-3: #b55a3c;
+  --wb-cat-3-tint: #f5eae6;
+  --wb-cat-3-slot: #efdbd4;
+  --wb-cat-3-ink: #88442d;
+  --wb-cat-4: #458d5c;
+  --wb-cat-4-tint: #e7f0ea;
+  --wb-cat-4-slot: #d6e6db;
+  --wb-cat-4-ink: #346a45;
+  --wb-cat-5: #9c5389;
+  --wb-cat-5-tint: #f2e9f0;
+  --wb-cat-5-slot: #e9d9e5;
+  --wb-cat-5-ink: #753e67;
+  --wb-cat-6: #3f6fb5;
+  --wb-cat-6-tint: #e6ecf5;
+  --wb-cat-6-slot: #d5dfef;
+  --wb-cat-6-ink: #2f5388;
+  --wb-cat-7: #5e7a80;
+  --wb-cat-7-tint: #eaeeee;
+  --wb-cat-7-slot: #dce2e3;
+  --wb-cat-7-ink: #465c60;
+  --wb-cat-8: #8a7f6e;
+  --wb-cat-8-tint: #f0eeec;
+  --wb-cat-8-slot: #e5e3df;
+  --wb-cat-8-ink: #685f52;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-back/brand",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "WelcomeBack brand assets for React apps: the running-W loader and the POS design tokens.",
   "license": "UNLICENSED",
   "repository": {