@welcome-back/brand 0.7.0 → 0.7.1

package/README.md

@@ -333,6 +333,14 @@ 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/posTokens.js

@@ -57,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
@@ -130,6 +139,11 @@ exports.POS_DARK_TOKENS = {
     "--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. */

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";
@@ -153,6 +158,10 @@ export declare const POS_DARK_TOKENS: {
     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";

package/dist/esm/posTokens.js

@@ -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
@@ -125,6 +134,11 @@ export const POS_DARK_TOKENS = {
     "--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. */

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;
@@ -109,6 +114,10 @@
   --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;

package/package.json

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