@welcome-back/brand 0.6.2 → 0.7.1

package/README.md

@@ -324,6 +324,23 @@ POS_TOKENS['--wb-accent']; // '#171717'
 payment terminal, from it on is tablet. It is a number because media queries
 cannot read a CSS variable; pos-ui uses it as the `wide` screen in Tailwind.
 
+### Dark
+
+`POS_DARK_TOKENS` holds a dark value for every colour token (Paper F4, direction A
+«Warm night», owner 2026-10-21); sizes, radius and type do not change. The
+generated `pos-tokens.css` also carries the rule `.theme-dark { … }`, so an app
+turns dark by putting `POS_DARK_CLASS` (`theme-dark`) on `<body>`. Dark is a
+per-device setting, never automatic. `CATEGORY_PALETTE_DARK` has the same 8
+colours, slot for slot, and passes the same contrast test on the dark card.
+
+### On media
+
+Square tiles show white text on a photo or on a category colour.
+`--wb-on-media` / `--wb-on-media-muted` (text), `--wb-media-ink` (badge fill),
+`--wb-media-veil` (sold-out wash) and `--wb-media-scrim` (the bottom gradient)
+are the same in light and dark. The scrim keeps white text at 4.5:1 or more on
+a pure white photo up to half the tile height.
+
 ### Category colours
 
 `CATEGORY_PALETTE` (`src/categoryPalette.ts`) is the 8-colour set of the POS

package/dist/cjs/categoryPalette.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CATEGORY_PALETTE_TOKENS = exports.DEFAULT_CATEGORY_SLOT = exports.CATEGORY_PALETTE = void 0;
+exports.CATEGORY_PALETTE_DARK_TOKENS = exports.CATEGORY_PALETTE_TOKENS = exports.DEFAULT_CATEGORY_SLOT = exports.CATEGORY_PALETTE_DARK = exports.CATEGORY_PALETTE = void 0;
 exports.categorySlotForIndex = categorySlotForIndex;
 exports.CATEGORY_PALETTE = [
     { name: "Dorado", swatch: "#a07c2b", tint: "#f3ecdd", slot: "#eae2d0", ink: "#785d20" },
@@ -12,16 +12,35 @@ exports.CATEGORY_PALETTE = [
     { name: "Pizarra", swatch: "#5e7a80", tint: "#eaeeee", slot: "#dce2e3", ink: "#465c60" },
     { name: "Piedra", swatch: "#8a7f6e", tint: "#f0eeec", slot: "#e5e3df", ink: "#685f52" },
 ];
+/**
+ * The same 8 colours for the dark look (F4 A «Warm night», owner 2026-10-21),
+ * slot for slot. Tint and slot are the swatch mixed into the dark card
+ * (#1a1917) at 20 % and 32 %; ink is the swatch mixed with white at 55 %;
+ * the swatch is 18 % lighter. Text on a dark tint is #f2f0ea and #b8b3a7.
+ */
+exports.CATEGORY_PALETTE_DARK = [
+    { name: "Dorado", swatch: "#b19451", tint: "#352d1b", slot: "#45391d", ink: "#d4c4a0" },
+    { name: "Azul mar", swatch: "#4798b6", tint: "#1b2e34", slot: "#1c3a45", ink: "#9ac6d7" },
+    { name: "Terracota", swatch: "#c2785f", tint: "#39261e", slot: "#4c2e23", ink: "#deb5a7" },
+    { name: "Verde", swatch: "#66a279", tint: "#233025", slot: "#283e2d", ink: "#abccb6" },
+    { name: "Ciruela", swatch: "#ae729e", tint: "#34252e", slot: "#442c3b", ink: "#d2b2ca" },
+    { name: "Azul", swatch: "#6289c2", tint: "#212a37", slot: "#26354a", ink: "#a9bede" },
+    { name: "Pizarra", swatch: "#7b9297", tint: "#282c2c", slot: "#303839", ink: "#b7c3c6" },
+    { name: "Piedra", swatch: "#9f9688", tint: "#302d28", slot: "#3e3a33", ink: "#cac5be" },
+];
 /** 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) => [
+const paletteTokens = (palette) => Object.fromEntries(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],
 ]));
+/** CSS variables of the palette: --wb-cat-N (swatch), -tint, -slot, -ink. */
+exports.CATEGORY_PALETTE_TOKENS = paletteTokens(exports.CATEGORY_PALETTE);
+/** The same variables with the dark values. */
+exports.CATEGORY_PALETTE_DARK_TOKENS = paletteTokens(exports.CATEGORY_PALETTE_DARK);

package/dist/cjs/index.js

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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_WIDE_MIN_WIDTH = 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_DARK_TOKENS = exports.CATEGORY_PALETTE_DARK = exports.CATEGORY_PALETTE = exports.posTokensCss = exports.posDarkTokensCss = exports.POS_WIDE_MIN_WIDTH = exports.POS_TOKENS = exports.POS_DARK_TOKENS = exports.POS_DARK_CLASS = 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_DARK_CLASS", { enumerable: true, get: function () { return posTokens_js_1.POS_DARK_CLASS; } });
+Object.defineProperty(exports, "POS_DARK_TOKENS", { enumerable: true, get: function () { return posTokens_js_1.POS_DARK_TOKENS; } });
 Object.defineProperty(exports, "POS_TOKENS", { enumerable: true, get: function () { return posTokens_js_1.POS_TOKENS; } });
 Object.defineProperty(exports, "POS_WIDE_MIN_WIDTH", { enumerable: true, get: function () { return posTokens_js_1.POS_WIDE_MIN_WIDTH; } });
+Object.defineProperty(exports, "posDarkTokensCss", { enumerable: true, get: function () { return posTokens_js_1.posDarkTokensCss; } });
 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_DARK", { enumerable: true, get: function () { return categoryPalette_js_1.CATEGORY_PALETTE_DARK; } });
+Object.defineProperty(exports, "CATEGORY_PALETTE_DARK_TOKENS", { enumerable: true, get: function () { return categoryPalette_js_1.CATEGORY_PALETTE_DARK_TOKENS; } });
 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; } });

package/dist/cjs/posTokens.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.POS_WIDE_MIN_WIDTH = exports.POS_TOKENS = void 0;
+exports.POS_DARK_CLASS = exports.POS_DARK_TOKENS = exports.POS_WIDE_MIN_WIDTH = exports.POS_TOKENS = void 0;
 exports.posTokensCss = posTokensCss;
+exports.posDarkTokensCss = posDarkTokensCss;
 /**
  * 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
@@ -56,6 +57,15 @@ exports.POS_TOKENS = {
     "--wb-primary-soft": "rgba(23, 23, 23, 0.15)",
     // The keyboard focus ring (3 px), pos-ui `.focus-ring`. Paper C1.
     "--wb-ring-soft": "rgba(23, 23, 23, 0.5)",
+    // Text and marks on a photo or a category colour (square tiles, owner
+    // 2026-10-21). The same in light and dark: a photo does not change. The
+    // scrim keeps white text >= 4.5:1 even on a pure white photo, up to half
+    // the tile height (two-line name).
+    "--wb-on-media": "#ffffff",
+    "--wb-on-media-muted": "rgba(255, 255, 255, 0.85)",
+    "--wb-media-ink": "#000000",
+    "--wb-media-veil": "rgba(255, 255, 255, 0.35)",
+    "--wb-media-scrim": "linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0) 85%)",
     // 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
@@ -94,8 +104,57 @@ exports.POS_TOKENS = {
  * read a CSS variable, so it is a number for the app's breakpoint config.
  */
 exports.POS_WIDE_MIN_WIDTH = 600;
+/**
+ * The dark look (Paper F4, direction A «Warm night», owner 2026-10-21): a
+ * value for every colour token; sizes, radius and type do not change. Dark
+ * is a per-device setting, never automatic. pos-ui puts `.theme-dark` on
+ * <body>; the generated stylesheet carries that rule.
+ */
+exports.POS_DARK_TOKENS = {
+    "--wb-primary": "#f2f0ea",
+    "--wb-accent": "#f2f0ea",
+    "--wb-on-accent": "#121110",
+    "--wb-on-accent-soft": "rgba(18, 17, 16, 0.12)",
+    "--wb-accent-soft": "rgba(242, 240, 234, 0.08)",
+    "--wb-bg": "#121110",
+    "--wb-surface": "#1a1917",
+    "--wb-surface2": "#24221f",
+    "--wb-ticket-bg": "#1f1d1a",
+    "--wb-border": "#3b3832",
+    "--wb-veil": "rgba(18, 17, 16, 0.72)",
+    "--wb-text": "#f2f0ea",
+    "--wb-muted": "#b8b3a7",
+    "--wb-success": "#22c55e",
+    "--wb-success-soft": "rgba(34, 197, 94, 0.15)",
+    "--wb-success-strong": "#4ade80",
+    "--wb-amber": "#f59e0b",
+    "--wb-amber-soft": "rgba(245, 158, 11, 0.15)",
+    "--wb-error": "#ef4444",
+    "--wb-error-soft": "rgba(239, 68, 68, 0.15)",
+    "--wb-amber-strong": "#fbbf24",
+    "--wb-error-strong": "#f87171",
+    "--wb-soldout": "#413115",
+    "--wb-soldout-ink": "#fcd34d",
+    "--wb-faint": "#8f8a7e",
+    "--wb-primary-soft": "rgba(242, 240, 234, 0.15)",
+    "--wb-ring-soft": "rgba(242, 240, 234, 0.5)",
+    "--wb-brand": "#f2f0ea",
+    // A photo looks the same in both looks, so the marks on it do too.
+    "--wb-on-media": "#ffffff",
+    "--wb-on-media-muted": "rgba(255, 255, 255, 0.85)",
+    "--wb-media-ink": "#000000",
+    "--wb-media-veil": "rgba(255, 255, 255, 0.35)",
+    ...categoryPalette_js_1.CATEGORY_PALETTE_DARK_TOKENS,
+};
+/** The class pos-ui puts on <body> for the dark look. */
+exports.POS_DARK_CLASS = "theme-dark";
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */
 function posTokensCss(selector = ":root") {
     const lines = Object.entries(exports.POS_TOKENS).map(([name, value]) => `  ${name}: ${value};`);
     return `${selector} {\n${lines.join("\n")}\n}\n`;
 }
+/** The dark values as one CSS rule (default selector `.theme-dark`). */
+function posDarkTokensCss(selector = `.${exports.POS_DARK_CLASS}`) {
+    const lines = Object.entries(exports.POS_DARK_TOKENS).map(([name, value]) => `  ${name}: ${value};`);
+    return `${selector} {\n${lines.join("\n")}\n}\n`;
+}

package/dist/esm/categoryPalette.d.ts

@@ -65,12 +65,67 @@ export declare const CATEGORY_PALETTE: readonly [{
     readonly slot: "#e5e3df";
     readonly ink: "#685f52";
 }];
+/**
+ * The same 8 colours for the dark look (F4 A «Warm night», owner 2026-10-21),
+ * slot for slot. Tint and slot are the swatch mixed into the dark card
+ * (#1a1917) at 20 % and 32 %; ink is the swatch mixed with white at 55 %;
+ * the swatch is 18 % lighter. Text on a dark tint is #f2f0ea and #b8b3a7.
+ */
+export declare const CATEGORY_PALETTE_DARK: readonly [{
+    readonly name: "Dorado";
+    readonly swatch: "#b19451";
+    readonly tint: "#352d1b";
+    readonly slot: "#45391d";
+    readonly ink: "#d4c4a0";
+}, {
+    readonly name: "Azul mar";
+    readonly swatch: "#4798b6";
+    readonly tint: "#1b2e34";
+    readonly slot: "#1c3a45";
+    readonly ink: "#9ac6d7";
+}, {
+    readonly name: "Terracota";
+    readonly swatch: "#c2785f";
+    readonly tint: "#39261e";
+    readonly slot: "#4c2e23";
+    readonly ink: "#deb5a7";
+}, {
+    readonly name: "Verde";
+    readonly swatch: "#66a279";
+    readonly tint: "#233025";
+    readonly slot: "#283e2d";
+    readonly ink: "#abccb6";
+}, {
+    readonly name: "Ciruela";
+    readonly swatch: "#ae729e";
+    readonly tint: "#34252e";
+    readonly slot: "#442c3b";
+    readonly ink: "#d2b2ca";
+}, {
+    readonly name: "Azul";
+    readonly swatch: "#6289c2";
+    readonly tint: "#212a37";
+    readonly slot: "#26354a";
+    readonly ink: "#a9bede";
+}, {
+    readonly name: "Pizarra";
+    readonly swatch: "#7b9297";
+    readonly tint: "#282c2c";
+    readonly slot: "#303839";
+    readonly ink: "#b7c3c6";
+}, {
+    readonly name: "Piedra";
+    readonly swatch: "#9f9688";
+    readonly tint: "#302d28";
+    readonly slot: "#3e3a33";
+    readonly ink: "#cac5be";
+}];
 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 {};
+export declare const CATEGORY_PALETTE_TOKENS: Record<"--wb-cat-1" | "--wb-cat-1-tint" | "--wb-cat-1-slot" | "--wb-cat-1-ink" | "--wb-cat-8" | "--wb-cat-8-tint" | "--wb-cat-8-slot" | "--wb-cat-8-ink" | "--wb-cat-2" | "--wb-cat-2-tint" | "--wb-cat-2-slot" | "--wb-cat-2-ink" | "--wb-cat-3" | "--wb-cat-3-tint" | "--wb-cat-3-slot" | "--wb-cat-3-ink" | "--wb-cat-4" | "--wb-cat-4-tint" | "--wb-cat-4-slot" | "--wb-cat-4-ink" | "--wb-cat-5" | "--wb-cat-5-tint" | "--wb-cat-5-slot" | "--wb-cat-5-ink" | "--wb-cat-6" | "--wb-cat-6-tint" | "--wb-cat-6-slot" | "--wb-cat-6-ink" | "--wb-cat-7" | "--wb-cat-7-tint" | "--wb-cat-7-slot" | "--wb-cat-7-ink", string>;
+/** The same variables with the dark values. */
+export declare const CATEGORY_PALETTE_DARK_TOKENS: Record<"--wb-cat-1" | "--wb-cat-1-tint" | "--wb-cat-1-slot" | "--wb-cat-1-ink" | "--wb-cat-8" | "--wb-cat-8-tint" | "--wb-cat-8-slot" | "--wb-cat-8-ink" | "--wb-cat-2" | "--wb-cat-2-tint" | "--wb-cat-2-slot" | "--wb-cat-2-ink" | "--wb-cat-3" | "--wb-cat-3-tint" | "--wb-cat-3-slot" | "--wb-cat-3-ink" | "--wb-cat-4" | "--wb-cat-4-tint" | "--wb-cat-4-slot" | "--wb-cat-4-ink" | "--wb-cat-5" | "--wb-cat-5-tint" | "--wb-cat-5-slot" | "--wb-cat-5-ink" | "--wb-cat-6" | "--wb-cat-6-tint" | "--wb-cat-6-slot" | "--wb-cat-6-ink" | "--wb-cat-7" | "--wb-cat-7-tint" | "--wb-cat-7-slot" | "--wb-cat-7-ink", string>;

package/dist/esm/categoryPalette.js

@@ -8,16 +8,35 @@ export const CATEGORY_PALETTE = [
     { name: "Pizarra", swatch: "#5e7a80", tint: "#eaeeee", slot: "#dce2e3", ink: "#465c60" },
     { name: "Piedra", swatch: "#8a7f6e", tint: "#f0eeec", slot: "#e5e3df", ink: "#685f52" },
 ];
+/**
+ * The same 8 colours for the dark look (F4 A «Warm night», owner 2026-10-21),
+ * slot for slot. Tint and slot are the swatch mixed into the dark card
+ * (#1a1917) at 20 % and 32 %; ink is the swatch mixed with white at 55 %;
+ * the swatch is 18 % lighter. Text on a dark tint is #f2f0ea and #b8b3a7.
+ */
+export const CATEGORY_PALETTE_DARK = [
+    { name: "Dorado", swatch: "#b19451", tint: "#352d1b", slot: "#45391d", ink: "#d4c4a0" },
+    { name: "Azul mar", swatch: "#4798b6", tint: "#1b2e34", slot: "#1c3a45", ink: "#9ac6d7" },
+    { name: "Terracota", swatch: "#c2785f", tint: "#39261e", slot: "#4c2e23", ink: "#deb5a7" },
+    { name: "Verde", swatch: "#66a279", tint: "#233025", slot: "#283e2d", ink: "#abccb6" },
+    { name: "Ciruela", swatch: "#ae729e", tint: "#34252e", slot: "#442c3b", ink: "#d2b2ca" },
+    { name: "Azul", swatch: "#6289c2", tint: "#212a37", slot: "#26354a", ink: "#a9bede" },
+    { name: "Pizarra", swatch: "#7b9297", tint: "#282c2c", slot: "#303839", ink: "#b7c3c6" },
+    { name: "Piedra", swatch: "#9f9688", tint: "#302d28", slot: "#3e3a33", ink: "#cac5be" },
+];
 /** 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) => [
+const paletteTokens = (palette) => Object.fromEntries(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],
 ]));
+/** CSS variables of the palette: --wb-cat-N (swatch), -tint, -slot, -ink. */
+export const CATEGORY_PALETTE_TOKENS = paletteTokens(CATEGORY_PALETTE);
+/** The same variables with the dark values. */
+export const CATEGORY_PALETTE_DARK_TOKENS = paletteTokens(CATEGORY_PALETTE_DARK);

package/dist/esm/index.d.ts

@@ -1,8 +1,8 @@
 export { RunnerLoader } from "./RunnerLoader.js";
 export type { RunnerLoaderProps } from "./RunnerLoader.js";
-export { POS_TOKENS, POS_WIDE_MIN_WIDTH, posTokensCss } from "./posTokens.js";
+export { POS_DARK_CLASS, POS_DARK_TOKENS, POS_TOKENS, POS_WIDE_MIN_WIDTH, posDarkTokensCss, posTokensCss, } from "./posTokens.js";
 export type { PosToken } from "./posTokens.js";
-export { CATEGORY_PALETTE, CATEGORY_PALETTE_TOKENS, DEFAULT_CATEGORY_SLOT, categorySlotForIndex, } from "./categoryPalette.js";
+export { CATEGORY_PALETTE, CATEGORY_PALETTE_DARK, CATEGORY_PALETTE_DARK_TOKENS, 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,4 +1,4 @@
 export { RunnerLoader } from "./RunnerLoader.js";
-export { POS_TOKENS, POS_WIDE_MIN_WIDTH, posTokensCss } from "./posTokens.js";
-export { CATEGORY_PALETTE, CATEGORY_PALETTE_TOKENS, DEFAULT_CATEGORY_SLOT, categorySlotForIndex, } from "./categoryPalette.js";
+export { POS_DARK_CLASS, POS_DARK_TOKENS, POS_TOKENS, POS_WIDE_MIN_WIDTH, posDarkTokensCss, posTokensCss, } from "./posTokens.js";
+export { CATEGORY_PALETTE, CATEGORY_PALETTE_DARK, CATEGORY_PALETTE_DARK_TOKENS, 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

@@ -58,6 +58,11 @@ export declare const POS_TOKENS: {
     readonly "--wb-faint": "#6e6a5e";
     readonly "--wb-primary-soft": "rgba(23, 23, 23, 0.15)";
     readonly "--wb-ring-soft": "rgba(23, 23, 23, 0.5)";
+    readonly "--wb-on-media": "#ffffff";
+    readonly "--wb-on-media-muted": "rgba(255, 255, 255, 0.85)";
+    readonly "--wb-media-ink": "#000000";
+    readonly "--wb-media-veil": "rgba(255, 255, 255, 0.35)";
+    readonly "--wb-media-scrim": "linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0) 85%)";
     readonly "--wb-brand": "#171717";
     readonly "--wb-radius": "12px";
     readonly "--wb-radius-lg": "12px";
@@ -86,5 +91,81 @@ export type PosToken = keyof typeof POS_TOKENS;
  * read a CSS variable, so it is a number for the app's breakpoint config.
  */
 export declare const POS_WIDE_MIN_WIDTH = 600;
+/**
+ * The dark look (Paper F4, direction A «Warm night», owner 2026-10-21): a
+ * value for every colour token; sizes, radius and type do not change. Dark
+ * is a per-device setting, never automatic. pos-ui puts `.theme-dark` on
+ * <body>; the generated stylesheet carries that rule.
+ */
+export declare const POS_DARK_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": "#f2f0ea";
+    readonly "--wb-accent": "#f2f0ea";
+    readonly "--wb-on-accent": "#121110";
+    readonly "--wb-on-accent-soft": "rgba(18, 17, 16, 0.12)";
+    readonly "--wb-accent-soft": "rgba(242, 240, 234, 0.08)";
+    readonly "--wb-bg": "#121110";
+    readonly "--wb-surface": "#1a1917";
+    readonly "--wb-surface2": "#24221f";
+    readonly "--wb-ticket-bg": "#1f1d1a";
+    readonly "--wb-border": "#3b3832";
+    readonly "--wb-veil": "rgba(18, 17, 16, 0.72)";
+    readonly "--wb-text": "#f2f0ea";
+    readonly "--wb-muted": "#b8b3a7";
+    readonly "--wb-success": "#22c55e";
+    readonly "--wb-success-soft": "rgba(34, 197, 94, 0.15)";
+    readonly "--wb-success-strong": "#4ade80";
+    readonly "--wb-amber": "#f59e0b";
+    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": "#fbbf24";
+    readonly "--wb-error-strong": "#f87171";
+    readonly "--wb-soldout": "#413115";
+    readonly "--wb-soldout-ink": "#fcd34d";
+    readonly "--wb-faint": "#8f8a7e";
+    readonly "--wb-primary-soft": "rgba(242, 240, 234, 0.15)";
+    readonly "--wb-ring-soft": "rgba(242, 240, 234, 0.5)";
+    readonly "--wb-brand": "#f2f0ea";
+    readonly "--wb-on-media": "#ffffff";
+    readonly "--wb-on-media-muted": "rgba(255, 255, 255, 0.85)";
+    readonly "--wb-media-ink": "#000000";
+    readonly "--wb-media-veil": "rgba(255, 255, 255, 0.35)";
+};
+/** The class pos-ui puts on <body> for the dark look. */
+export declare const POS_DARK_CLASS = "theme-dark";
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */
 export declare function posTokensCss(selector?: string): string;
+/** The dark values as one CSS rule (default selector `.theme-dark`). */
+export declare function posDarkTokensCss(selector?: string): string;

package/dist/esm/posTokens.js

@@ -9,7 +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";
+import { CATEGORY_PALETTE_DARK_TOKENS, 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",
@@ -52,6 +52,15 @@ export const POS_TOKENS = {
     "--wb-primary-soft": "rgba(23, 23, 23, 0.15)",
     // The keyboard focus ring (3 px), pos-ui `.focus-ring`. Paper C1.
     "--wb-ring-soft": "rgba(23, 23, 23, 0.5)",
+    // Text and marks on a photo or a category colour (square tiles, owner
+    // 2026-10-21). The same in light and dark: a photo does not change. The
+    // scrim keeps white text >= 4.5:1 even on a pure white photo, up to half
+    // the tile height (two-line name).
+    "--wb-on-media": "#ffffff",
+    "--wb-on-media-muted": "rgba(255, 255, 255, 0.85)",
+    "--wb-media-ink": "#000000",
+    "--wb-media-veil": "rgba(255, 255, 255, 0.35)",
+    "--wb-media-scrim": "linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0) 85%)",
     // 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
@@ -90,8 +99,57 @@ export const POS_TOKENS = {
  * read a CSS variable, so it is a number for the app's breakpoint config.
  */
 export const POS_WIDE_MIN_WIDTH = 600;
+/**
+ * The dark look (Paper F4, direction A «Warm night», owner 2026-10-21): a
+ * value for every colour token; sizes, radius and type do not change. Dark
+ * is a per-device setting, never automatic. pos-ui puts `.theme-dark` on
+ * <body>; the generated stylesheet carries that rule.
+ */
+export const POS_DARK_TOKENS = {
+    "--wb-primary": "#f2f0ea",
+    "--wb-accent": "#f2f0ea",
+    "--wb-on-accent": "#121110",
+    "--wb-on-accent-soft": "rgba(18, 17, 16, 0.12)",
+    "--wb-accent-soft": "rgba(242, 240, 234, 0.08)",
+    "--wb-bg": "#121110",
+    "--wb-surface": "#1a1917",
+    "--wb-surface2": "#24221f",
+    "--wb-ticket-bg": "#1f1d1a",
+    "--wb-border": "#3b3832",
+    "--wb-veil": "rgba(18, 17, 16, 0.72)",
+    "--wb-text": "#f2f0ea",
+    "--wb-muted": "#b8b3a7",
+    "--wb-success": "#22c55e",
+    "--wb-success-soft": "rgba(34, 197, 94, 0.15)",
+    "--wb-success-strong": "#4ade80",
+    "--wb-amber": "#f59e0b",
+    "--wb-amber-soft": "rgba(245, 158, 11, 0.15)",
+    "--wb-error": "#ef4444",
+    "--wb-error-soft": "rgba(239, 68, 68, 0.15)",
+    "--wb-amber-strong": "#fbbf24",
+    "--wb-error-strong": "#f87171",
+    "--wb-soldout": "#413115",
+    "--wb-soldout-ink": "#fcd34d",
+    "--wb-faint": "#8f8a7e",
+    "--wb-primary-soft": "rgba(242, 240, 234, 0.15)",
+    "--wb-ring-soft": "rgba(242, 240, 234, 0.5)",
+    "--wb-brand": "#f2f0ea",
+    // A photo looks the same in both looks, so the marks on it do too.
+    "--wb-on-media": "#ffffff",
+    "--wb-on-media-muted": "rgba(255, 255, 255, 0.85)",
+    "--wb-media-ink": "#000000",
+    "--wb-media-veil": "rgba(255, 255, 255, 0.35)",
+    ...CATEGORY_PALETTE_DARK_TOKENS,
+};
+/** The class pos-ui puts on <body> for the dark look. */
+export const POS_DARK_CLASS = "theme-dark";
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */
 export function posTokensCss(selector = ":root") {
     const lines = Object.entries(POS_TOKENS).map(([name, value]) => `  ${name}: ${value};`);
     return `${selector} {\n${lines.join("\n")}\n}\n`;
 }
+/** The dark values as one CSS rule (default selector `.theme-dark`). */
+export function posDarkTokensCss(selector = `.${POS_DARK_CLASS}`) {
+    const lines = Object.entries(POS_DARK_TOKENS).map(([name, value]) => `  ${name}: ${value};`);
+    return `${selector} {\n${lines.join("\n")}\n}\n`;
+}

package/dist/pos-tokens.css

@@ -27,6 +27,11 @@
   --wb-faint: #6e6a5e;
   --wb-primary-soft: rgba(23, 23, 23, 0.15);
   --wb-ring-soft: rgba(23, 23, 23, 0.5);
+  --wb-on-media: #ffffff;
+  --wb-on-media-muted: rgba(255, 255, 255, 0.85);
+  --wb-media-ink: #000000;
+  --wb-media-veil: rgba(255, 255, 255, 0.35);
+  --wb-media-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0) 85%);
   --wb-brand: #171717;
   --wb-radius: 12px;
   --wb-radius-lg: 12px;
@@ -80,3 +85,69 @@
   --wb-cat-8-slot: #e5e3df;
   --wb-cat-8-ink: #685f52;
 }
+.theme-dark {
+  --wb-primary: #f2f0ea;
+  --wb-accent: #f2f0ea;
+  --wb-on-accent: #121110;
+  --wb-on-accent-soft: rgba(18, 17, 16, 0.12);
+  --wb-accent-soft: rgba(242, 240, 234, 0.08);
+  --wb-bg: #121110;
+  --wb-surface: #1a1917;
+  --wb-surface2: #24221f;
+  --wb-ticket-bg: #1f1d1a;
+  --wb-border: #3b3832;
+  --wb-veil: rgba(18, 17, 16, 0.72);
+  --wb-text: #f2f0ea;
+  --wb-muted: #b8b3a7;
+  --wb-success: #22c55e;
+  --wb-success-soft: rgba(34, 197, 94, 0.15);
+  --wb-success-strong: #4ade80;
+  --wb-amber: #f59e0b;
+  --wb-amber-soft: rgba(245, 158, 11, 0.15);
+  --wb-error: #ef4444;
+  --wb-error-soft: rgba(239, 68, 68, 0.15);
+  --wb-amber-strong: #fbbf24;
+  --wb-error-strong: #f87171;
+  --wb-soldout: #413115;
+  --wb-soldout-ink: #fcd34d;
+  --wb-faint: #8f8a7e;
+  --wb-primary-soft: rgba(242, 240, 234, 0.15);
+  --wb-ring-soft: rgba(242, 240, 234, 0.5);
+  --wb-brand: #f2f0ea;
+  --wb-on-media: #ffffff;
+  --wb-on-media-muted: rgba(255, 255, 255, 0.85);
+  --wb-media-ink: #000000;
+  --wb-media-veil: rgba(255, 255, 255, 0.35);
+  --wb-cat-1: #b19451;
+  --wb-cat-1-tint: #352d1b;
+  --wb-cat-1-slot: #45391d;
+  --wb-cat-1-ink: #d4c4a0;
+  --wb-cat-2: #4798b6;
+  --wb-cat-2-tint: #1b2e34;
+  --wb-cat-2-slot: #1c3a45;
+  --wb-cat-2-ink: #9ac6d7;
+  --wb-cat-3: #c2785f;
+  --wb-cat-3-tint: #39261e;
+  --wb-cat-3-slot: #4c2e23;
+  --wb-cat-3-ink: #deb5a7;
+  --wb-cat-4: #66a279;
+  --wb-cat-4-tint: #233025;
+  --wb-cat-4-slot: #283e2d;
+  --wb-cat-4-ink: #abccb6;
+  --wb-cat-5: #ae729e;
+  --wb-cat-5-tint: #34252e;
+  --wb-cat-5-slot: #442c3b;
+  --wb-cat-5-ink: #d2b2ca;
+  --wb-cat-6: #6289c2;
+  --wb-cat-6-tint: #212a37;
+  --wb-cat-6-slot: #26354a;
+  --wb-cat-6-ink: #a9bede;
+  --wb-cat-7: #7b9297;
+  --wb-cat-7-tint: #282c2c;
+  --wb-cat-7-slot: #303839;
+  --wb-cat-7-ink: #b7c3c6;
+  --wb-cat-8: #9f9688;
+  --wb-cat-8-tint: #302d28;
+  --wb-cat-8-slot: #3e3a33;
+  --wb-cat-8-ink: #cac5be;
+}

package/package.json

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