/* * WP Bulk Replace — the design tokens, as the only place a value is spelled. * * THE SOURCE OF TRUTH IS THE MARKETING THEME, `theme/wpbulkreplace/style.css` in * `bsmaha/wpbulkreplace-site`, audited at `cc8b866` (theme 0.2.1). Every value * below that the theme states is copied from it unchanged, down to the odd * numbers: 650 really is its semibold, 17px really is the gap under the mark, and * rounding them to something tidier is how two runtimes stop looking like one * product. * * THE THEME IS A ONE-PAGE LAUNCH SITE, so there are things it does not state: it * has no navigation, no cards, no buttons, no form controls and no tables. Those * are derived here from the primitives it does state, and each derivation says so * in a comment. `docs/WPBR-UI-REUSE-AUDIT.md` §0.6 lists them together. * * NOTHING BELOW IS A COLOUR SOMEBODY PICKED HERE. A hex literal in a component or * a template is a colour nobody can find when the palette changes, and the reason * this file exists is that the marketing site (WordPress), the Help Centre and the * account portal all have to look like one product while being two runtimes. * `core/tests/test_design_system.py` fails if a literal appears outside `:root`. */ :root { /* --- palette: the theme's `:root`, names and values unchanged ------------ * Renamed from this file's earlier `--wpbr-electric-blue` / `--wpbr-ink-navy` * / `--wpbr-ice-blue` / `--wpbr-accent` to match. Two names for one colour * across two runtimes is exactly the drift these tokens exist to prevent. */ --wpbr-blue: #006DF5; --wpbr-azure: #309FFD; --wpbr-ice: #8DC9FD; --wpbr-navy: #122746; --wpbr-mist: #EAF4FF; /* accent only: never a heading, never a primary action, never a surface */ --wpbr-violet: #6D7CFF; --wpbr-white: #FFFFFF; --wpbr-muted: #62728A; /* --- the theme's six unnamed literals, given names ---------------------- * `style.css` uses these outside its own `:root`. The values are its; only the * names are new, so that nothing here has to repeat a hex. */ --wpbr-blue-dark: #0057C7; /* .contact-link:hover */ --wpbr-wordmark-wp: #61718A; /* .brand-wp — the recessive half of the name */ --wpbr-text-chip: #4C6280; /* .launch-status */ --wpbr-text-faint: #8794A7; /* .launch-footer */ --wpbr-ground-mid: #F7FBFF; /* body gradient, 54% */ --wpbr-ground-end: #EDF6FF; /* body gradient, 100% */ /* --- functional colours, which the brand does not have ------------------- * DERIVED. The palette is blue, navy and one violet accent: there is no green, * no amber and no red in it, and an error rendered in brand blue is not an * error. These three are functional rather than brand colours, are used only * to carry a state, and each clears 4.5:1 on a white surface. */ --wpbr-ok: #1F7A4D; --wpbr-warn: #8A5A00; --wpbr-error: #B3261E; /* --- roles, so a component names what it is for ------------------------- */ --wpbr-text: var(--wpbr-navy); --wpbr-text-soft: var(--wpbr-muted); --wpbr-link: var(--wpbr-blue); --wpbr-link-hover: var(--wpbr-blue-dark); --wpbr-surface: var(--wpbr-white); --wpbr-surface-tint: var(--wpbr-mist); /* The card ground. `.launch-status` is translucent white over the page * gradient, and a card is that recipe at a larger scale. */ --wpbr-surface-raised: rgba(255, 255, 255, .76); --wpbr-rule: rgba(0, 109, 245, .14); /* .launch-status border */ --wpbr-rule-soft: rgba(18, 39, 70, .10); /* DERIVED: the same hairline, neutral */ --wpbr-on-navy: var(--wpbr-mist); --wpbr-on-navy-soft: var(--wpbr-ice); /* --- the page ground ---------------------------------------------------- * The theme's `body` verbatim: ice top-left, violet bottom-right, over a 145° * ramp. The launch page's decorative glow rings and grid overlay are hero * furniture and are not brought to a page carrying an article. */ --wpbr-ground: radial-gradient(circle at 15% 10%, rgba(141, 201, 253, .26), transparent 34rem), radial-gradient(circle at 88% 85%, rgba(109, 124, 255, .11), transparent 31rem), linear-gradient(145deg, var(--wpbr-white) 0%, var(--wpbr-ground-mid) 54%, var(--wpbr-ground-end) 100%); /* --- type --------------------------------------------------------------- * The theme's stack, unchanged. It does NOT use Inter: `banner.svg` asks for * Inter because it is a static raster rendered once for a WordPress.org * listing, and the rendered site is the product people look at. No webfont is * fetched and no binary is committed. */ --wpbr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Monospace ONLY where the content is literally a machine string: a support * reference, a `WPBR-D-` diagnostics code, a path. Not a label treatment. */ --wpbr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --wpbr-text-xs: 12px; /* .launch-footer */ --wpbr-text-sm: 13px; /* .launch-status */ --wpbr-text-base: 15px; /* .launch-note, .contact-link */ --wpbr-text-md: 17px; /* the lede's narrow size */ --wpbr-text-lede: clamp(17px, 2.1vw, 20px); /* .launch-copy */ --wpbr-text-wordmark: 25px; /* .brand-name */ --wpbr-text-hero: clamp(42px, 7vw, 72px); /* h1 */ /* DERIVED: the hero treatment stepped down for interior pages. A Help article * is not a launch hero, and 72px above a paragraph of troubleshooting is not * the same design used consistently. */ --wpbr-text-h1: clamp(28px, 3.4vw, 40px); --wpbr-text-h2: 22px; --wpbr-text-h3: 18px; /* The theme's weights, taken as found. 650 is its semibold and 750/760 its * bold; 600 and 700 do not appear in it. */ --wpbr-weight-light: 500; --wpbr-weight-semi: 650; --wpbr-weight-bold: 750; --wpbr-weight-display: 760; --wpbr-leading-hero: .99; --wpbr-leading-body: 1.65; /* .launch-copy */ --wpbr-leading-tight: 1.58; /* .launch-copy, narrow */ --wpbr-tracking-hero: -.055em; --wpbr-tracking-wordmark: -.035em; --wpbr-tracking-chip: .02em; --wpbr-tracking-fine: .01em; /* One measure, so prose does not run to the width of the window. 68 characters * is the readable ceiling, and a Help article is the surface that needs it * most. */ --wpbr-measure: 68ch; /* --- space -------------------------------------------------------------- * The steps are the theme's own spacing values rather than a tidy 8px ramp: * 13 is the chip's horizontal padding, 17 the gap under the mark, 24 the page * gutter, 48 its top padding. */ --wpbr-space-1: 4px; --wpbr-space-2: 8px; --wpbr-space-3: 13px; --wpbr-space-4: 17px; --wpbr-space-5: 24px; --wpbr-space-6: 28px; --wpbr-space-7: 34px; --wpbr-space-8: 48px; --wpbr-space-9: 70px; /* --- shape -------------------------------------------------------------- * The theme's vocabulary: 999px on the chip, the glows and the dot ring; 50% * on the dot; 4px on the focus outline. There is not a square corner in it. */ --wpbr-radius-pill: 999px; --wpbr-radius-xs: 4px; /* DERIVED, and the one value with no precedent between 4px and 999px: the * theme has no card because a launch page has none. It is a token precisely so * the theme can settle it later with one edit rather than a rewrite. */ --wpbr-radius-md: 12px; /* --- elevation ---------------------------------------------------------- * Two shadows, both the theme's, and the split is deliberate: navy at 4% lifts * a surface, blue at 12% lifts a brand object. */ --wpbr-shadow-raised: 0 4px 20px rgba(18, 39, 70, .04); --wpbr-shadow-mark: 0 14px 28px rgba(0, 109, 245, .12); /* --- motion ------------------------------------------------------------- * `.contact-link`'s transition. Everything that moves uses this, so nothing * moves at its own speed. */ --wpbr-dur: .16s; --wpbr-ease: ease; /* --- focus -------------------------------------------------------------- * THE SHAPE IS THE THEME'S AND THE COLOUR IS NOT, which is the one value this * platform overrides. `style.css` draws the ring as * `rgba(0, 109, 245, .22)`, which composites to #C7DFFD — 1.36:1 against * white, where WCAG 2.2 §2.4.13 wants 3:1. No alpha clears it: .50 gives * 2.10, .70 gives 2.91, and only the solid blue reaches 4.66. So the width, * the offset and the radius are taken exactly and the ring is opaque. * * The launch page has one focusable element. A help centre and an account * portal have hundreds, which is why this is worth overriding rather than * inheriting. */ --wpbr-focus-width: 3px; --wpbr-focus-offset: 5px; --wpbr-focus-color: var(--wpbr-blue); /* The 44px touch floor. The theme has no opinion — one link on one page — so * this comes from the Help/Account side unopposed. */ --wpbr-target: 44px; /* The floor for navigation that is a list of links rather than a control - * the footer's columns. WCAG 2.2 2.5.8 sets 24px; 44px there would turn each * column into a ladder. */ --wpbr-target-secondary: 24px; /* --- layout ------------------------------------------------------------- * ONE BRAND TIER, at the theme's 600px. A second, wider tier exists for the * article rail only: a 260px rail cannot sit beside a 68ch measure at 600px, * which is a layout constraint rather than a second brand decision. Media * queries cannot read custom properties, so these are recorded here and * written literally at each `@media` — the comment is the link between them. */ --wpbr-tier-narrow: 600px; --wpbr-tier-rail: 900px; --wpbr-page-max: 1100px; --wpbr-gutter: var(--wpbr-space-5); --wpbr-rail-width: 260px; }