@welcome-back/brand 0.4.0 → 0.5.0

package/dist/cjs/posTokens.js

@@ -24,11 +24,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)",
@@ -46,9 +47,17 @@ exports.POS_TOKENS = {
     "--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",
+    "--wb-font": "'Inter'",
 };
 /** The tokens as one CSS rule, for apps that load them as a stylesheet. */
 function posTokensCss(selector = ":root") {

package/dist/esm/posTokens.d.ts

@@ -15,10 +15,10 @@ export declare const POS_TOKENS: {
     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";
@@ -33,8 +33,12 @@ export declare const POS_TOKENS: {
     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-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

@@ -20,11 +20,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)",
@@ -42,9 +43,17 @@ export const POS_TOKENS = {
     "--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",
+    "--wb-font": "'Inter'",
 };
 /** 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;
@@ -23,6 +23,10 @@
   --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-font: 'Inter';
 }

package/package.json

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