Skip to content

Badger brand tokens

One file holds the values for Badger's own look, the surfaces staff see rather than shoppers: common/src/main/resources/design/badger-brand-tokens.json.

It has the groups color, space, radius, shadow and font (the admin --bx-* tokens, keyed by token name without the prefix: space.4 is --bx-space-4, font.sans is --bx-font, font.mono is --bx-mono, shadow.focus-ring is --bx-focus-ring) and an email group with the warm palette of the back-office emails.

What reads it

Consumer How it stays in step
Admin UI (admin-ui.css, the :root block) BadgerBrandTokensTest compares each token's value with the JSON
Back-office email layout (templates/platform/email/layout.html) The same test checks every hex colour in the layout is an email value in the JSON, and that each email value is still used
Docs The tables in Admin UI components and Back-office emails describe these values; change them with the JSON

The test lives in commerce-core (BadgerBrandTokensTest) and reads the files from the repository tree. It fails when a value differs, when the JSON names a token the CSS lacks, and when the CSS has a token the JSON doesn't list, so new tokens always get registered.

Adding or changing a token

  1. Add or edit it in badger-brand-tokens.json.
  2. Make the same change in the consumer (for an admin token, the :root block of admin-ui.css; for an email colour, layout.html).
  3. Run BadgerBrandTokensTest. Hex case doesn't matter.
  4. Update the tokens table in Admin UI components if it is a new kind of token.

Open decision: the operator app's amber

The operator app (separate repository) defines its own palette in src/ui/theme.ts, and its brand amber differs from the admin's:

Where Brand value Text on it
Admin and the JSON (color.brand, color.brand-ink) #FF8A00 #2B1700
Operator app (primary, primaryText) #f59e0b #1a1200

The app also uses a dark theme (text: #eef2f7), so the two aren't expected to match everywhere. Still open: whether the app should move to #FF8A00 or the admin to #f59e0b. Nothing reads the JSON from the app yet, so the difference is not guarded.