@welcome-back/brand 0.6.0 → 0.6.2

package/README.md

@@ -320,6 +320,10 @@ POS_TOKENS['--wb-accent']; // '#171717'
 
 `posTokensCss(selector)` returns the same rule for another selector.
 
+`POS_WIDE_MIN_WIDTH` (600) is the one layout switch: below it is phone /
+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.
+
 ### Category colours
 
 `CATEGORY_PALETTE` (`src/categoryPalette.ts`) is the 8-colour set of the POS

package/dist/cjs/index.js

@@ -1,10 +1,11 @@
 "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_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_WIDE_MIN_WIDTH = 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, "POS_WIDE_MIN_WIDTH", { enumerable: true, get: function () { return posTokens_js_1.POS_WIDE_MIN_WIDTH; } });
 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; } });

package/dist/cjs/posTokens.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.POS_TOKENS = void 0;
+exports.POS_WIDE_MIN_WIDTH = exports.POS_TOKENS = void 0;
 exports.posTokensCss = posTokensCss;
 /**
  * The WelcomeBack POS look: the CSS custom properties pos-ui paints with, and
@@ -54,6 +54,8 @@ exports.POS_TOKENS = {
     // Placeholder and hint text.
     "--wb-faint": "#6e6a5e",
     "--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)",
     // 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
@@ -80,10 +82,18 @@ exports.POS_TOKENS = {
     "--wb-text-body": "15px",
     "--wb-text-small": "13px",
     "--wb-text-caption": "12px",
+    // Keypad digits and product initials (weight 600). Owner, 2026-10-21.
+    "--wb-text-key": "26px",
     "--wb-font": "'Inter'",
     // Category colours: --wb-cat-1 … --wb-cat-8 (+ -tint, -slot, -ink).
     ...categoryPalette_js_1.CATEGORY_PALETTE_TOKENS,
 };
+/**
+ * The one layout switch of the POS: below this width is phone / payment
+ * terminal (sheets, narrow money), from it on is tablet. Media queries cannot
+ * read a CSS variable, so it is a number for the app's breakpoint config.
+ */
+exports.POS_WIDE_MIN_WIDTH = 600;
 /** 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};`);

package/dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 export { RunnerLoader } from "./RunnerLoader.js";
 export type { RunnerLoaderProps } from "./RunnerLoader.js";
-export { POS_TOKENS, posTokensCss } from "./posTokens.js";
+export { POS_TOKENS, POS_WIDE_MIN_WIDTH, 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";

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 export { RunnerLoader } from "./RunnerLoader.js";
-export { POS_TOKENS, posTokensCss } from "./posTokens.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 { PRODUCT_IMAGE_FRAMES, productImageAspectRatio, productImageKeptArea, } from "./productImageFrames.js";

package/dist/esm/posTokens.d.ts

@@ -57,6 +57,7 @@ export declare const POS_TOKENS: {
     readonly "--wb-soldout-ink": "#713f12";
     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-brand": "#171717";
     readonly "--wb-radius": "12px";
     readonly "--wb-radius-lg": "12px";
@@ -75,8 +76,15 @@ export declare const POS_TOKENS: {
     readonly "--wb-text-body": "15px";
     readonly "--wb-text-small": "13px";
     readonly "--wb-text-caption": "12px";
+    readonly "--wb-text-key": "26px";
     readonly "--wb-font": "'Inter'";
 };
 export type PosToken = keyof typeof POS_TOKENS;
+/**
+ * The one layout switch of the POS: below this width is phone / payment
+ * terminal (sheets, narrow money), from it on is tablet. Media queries cannot
+ * read a CSS variable, so it is a number for the app's breakpoint config.
+ */
+export declare const POS_WIDE_MIN_WIDTH = 600;
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */
 export declare function posTokensCss(selector?: string): string;

package/dist/esm/posTokens.js

@@ -50,6 +50,8 @@ export const POS_TOKENS = {
     // Placeholder and hint text.
     "--wb-faint": "#6e6a5e",
     "--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)",
     // 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
@@ -76,10 +78,18 @@ export const POS_TOKENS = {
     "--wb-text-body": "15px",
     "--wb-text-small": "13px",
     "--wb-text-caption": "12px",
+    // Keypad digits and product initials (weight 600). Owner, 2026-10-21.
+    "--wb-text-key": "26px",
     "--wb-font": "'Inter'",
     // Category colours: --wb-cat-1 … --wb-cat-8 (+ -tint, -slot, -ink).
     ...CATEGORY_PALETTE_TOKENS,
 };
+/**
+ * The one layout switch of the POS: below this width is phone / payment
+ * terminal (sheets, narrow money), from it on is tablet. Media queries cannot
+ * read a CSS variable, so it is a number for the app's breakpoint config.
+ */
+export const POS_WIDE_MIN_WIDTH = 600;
 /** 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};`);

package/dist/pos-tokens.css

@@ -26,6 +26,7 @@
   --wb-soldout-ink: #713f12;
   --wb-faint: #6e6a5e;
   --wb-primary-soft: rgba(23, 23, 23, 0.15);
+  --wb-ring-soft: rgba(23, 23, 23, 0.5);
   --wb-brand: #171717;
   --wb-radius: 12px;
   --wb-radius-lg: 12px;
@@ -44,6 +45,7 @@
   --wb-text-body: 15px;
   --wb-text-small: 13px;
   --wb-text-caption: 12px;
+  --wb-text-key: 26px;
   --wb-font: 'Inter';
   --wb-cat-1: #a07c2b;
   --wb-cat-1-tint: #f3ecdd;

package/package.json

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