/** * The shop's design tokens: every colour, space, size, radius, shadow and * duration a customer screen uses. The rules for using them are in * `docs/design-standards.md`; this file is the numbers. * * Loaded on every front-end page by `Storefront\DesignSystem`, before any * screen's own stylesheet, together with `components.css`. A stylesheet other * than this one names no colour, radius or shadow of its own * (`tests/Content/DesignTokensTest.php` holds it to that). * * On `:root`. Every name is `--pod-` prefixed, so nothing else can read or clash * with them, and a variable that exists on a page that does not use it costs * nothing. */ :root { /* * Ink rather than black. Pure black against white is a contrast the eye has * to work at over a long page; this is the near-black most printed matter * actually uses. */ --pod-ink: #0b1220; --pod-ink-soft: #57637a; /* * The brand blue. It replaced the theme palette's original #0084d6, which the * theme's own colours now follow too. White on that * measures 3.98:1, short of the 4.5:1 a button label needs; white on this is * 4.51:1 and the two are hard to tell apart. Every button styled from this * token (landing, shop, cart, drawer, checkout, product page) passes. * * Not for small text on `--pod-accent-wash`, where it is 4.07:1. */ --pod-accent: #007bc7; --pod-accent-deep: #005e9c; --pod-accent-wash: #eaf5fd; /* Borrowed from the crop marks in the product photography. */ --pod-mark: #e8503c; /* * State: something went wrong or cannot be undone, and something is done. * Text colours, each measured against white and against its own wash: * danger 6.45:1 and 5.72:1, success 6.27:1 and 5.58:1. The mark above is a * decoration colour and too light for text (3.72:1). */ --pod-danger: #b3282d; --pod-danger-wash: #fdeeee; --pod-success: #1b6e3f; --pod-success-wash: #e7f5ec; --pod-surface: #ffffff; --pod-surface-2: #f4f7fb; --pod-line: #e3e9f1; /* * Spacing, as a scale rather than as whatever looked right at the time. * * Everything vertical on this page is one of these. Before it there were 44, * 56, 64, 72, 24, 20, 18, 10 and 6 in use, and the eyebrow sat exactly as far * from its heading as the product grid sat from the paragraph — which is a page * with no hierarchy in its spacing, however carefully the type is set. */ --pod-hair: 0.25rem; /* 4 — a field label and its input */ --pod-tight: 0.5rem; /* 8 — a label and the thing it labels */ --pod-near: 1rem; /* 16 — a heading and its paragraph */ --pod-apart: 1.5rem; /* 24 — between cards in a row */ --pod-break: 2.5rem; /* 40 — an introduction and the content under it */ --pod-split: 72px; /* between the two halves of a split section; pixels, like -sm */ --pod-split-sm: 48px; /* the same, under 768px; pixels, as the theme shrinks rem there */ /* * The page gutter, and the only place it is stated. * * It has to be a `clamp()` rather than a fixed value, which is why it lives * here and not in the builder: Elementor's padding control takes one number, * and 20px is cramped on a phone while 32px is wasted on a desktop that already * centres a 1200px column. * * **Pixels, not rem.** The footer is a separate Elementor template whose padding * control only speaks pixels, and the two meet — so a rem here put the page's * gutter at 18px against the footer's 20px on a phone, because this theme's root * font is not 16px at that width. A gutter is a layout measurement rather than a * typographic one; it has no business tracking the font size. */ --pod-gutter: clamp( 20px, 4vw, 32px ); /* * Button padding, which is a touch target rather than page rhythm — but the * theme's button and our own price-card button sit on the same screen, and two * buttons of visibly different heights beside each other is the kind of thing * that reads as unfinished. One value, both of them. */ /* * A touch target, and the height of every field beside it. Pixels, not rem: * the theme shrinks the root size on phones, which took a `3rem` button to * 44px, and a target must not shrink with the type. */ --pod-btn-h: 48px; --pod-btn-x: 1.5rem; /* 24 */ --pod-radius: 12px; --pod-radius-lg: 18px; --pod-radius-xl: 28px; --pod-shadow-sm: 0 1px 2px rgba( 11, 18, 32, 0.04 ), 0 2px 8px rgba( 11, 18, 32, 0.04 ); --pod-shadow: 0 2px 4px rgba( 11, 18, 32, 0.04 ), 0 12px 28px rgba( 11, 18, 32, 0.08 ); --pod-shadow-lift: 0 18px 50px rgba( 11, 18, 32, 0.16 ); /* * The section heading's size, read by the landing page's `h2` and the cart's * title, so a heading of that rank is one size wherever it appears. */ --pod-h2-size: clamp( 30px, 3.4vw, 48px ); /* One duration and one curve, so nothing on the page moves at its own pace. */ --pod-fast: 160ms; --pod-ease: cubic-bezier( 0.2, 0.7, 0.3, 1 ); /* ------------------------------------------------------------------ * Added with the design standard (docs/design-standards.md). Each one * settles a value that screens had each chosen for themselves. * ------------------------------------------------------------------ */ /* * Text on the ink band (the dark sections): the full white, the quieter * white for body copy, and the lighter blue that stays legible on ink where * the accent does not. */ --pod-on-ink: #ffffff; --pod-on-ink-soft: rgba( 255, 255, 255, 0.82 ); --pod-on-ink-accent: #6fc4ff; /* The dialog backdrop: ink, not black, at 55%. */ --pod-scrim: rgba( 11, 18, 32, 0.55 ); /* * A field's outline. Decorative lines use `--pod-line`, which is too faint * to find a field by: WCAG 1.4.11 asks 3:1 of the edge of a control, and * this is ink at 45% over white, 3.1:1. */ --pod-field-border: #919499; /* Radii: these five and no others. */ --pod-radius-sm: 8px; /* swatches, thumbnails inside a control */ --pod-radius-pill: 999px; /* buttons, chips, status chips */ /* * Type. Three title tiers and one card-heading size. * * Display tops out at 48px, not higher: the home hero was set to 48 by hand * in Elementor, and the cart and account titles were asked for at the same * larger size. Display differs from the Title tier on smaller screens (40 * against 30), where a hero needs to stay a hero. * Display: the home hero and the About / Contact heroes. * Title: every other page's H1 (shop, cart, account, help pages, 404, * search, order confirmation). * Item title: the product's name beside its gallery. * * **Pixels, not rem**, for the same reason as the button height: the theme * sets the root font to 91.2% under 922px, which took a 30px floor to 27.4px * on a phone. Headings hold their sizes; body copy still follows the theme. */ --pod-display-size: clamp( 40px, 4.6vw, 48px ); --pod-title-size: clamp( 30px, 3.4vw, 48px ); --pod-item-title-size: clamp( 30px, 3.2vw, 40px ); --pod-h3-size: 20px; /* * A section heading inside a page that already has a Title-tier H1 (help * pages, policies, the 404). At the full `--pod-h2-size` it matched the H1 * and the page lost its top; this sits clearly between the title and the * card heading. */ --pod-h2-prose-size: clamp( 24px, 2.4vw, 30px ); --pod-title-tracking: -0.024em; /* The longest comfortable line of body copy, and of a lead paragraph. */ --pod-measure: 70ch; --pod-measure-lead: 62ch; /* * Controls. A compact control (40px) is for dense rows and toolbars only; * everything else is `--pod-btn-h`. */ --pod-btn-compact-h: 40px; --pod-btn-size: 15px; /* px: the theme's 91.2% root took 0.9375rem to 13.7px on phones */ --pod-btn-compact-size: 14px; /* * Text typed into a field: never under 16px. The theme's root is 91.2% on * smaller screens, which put 1rem at 14.6px, and iOS zooms the whole page * into any field whose text is under 16px. */ --pod-field-size: max( 1rem, 16px ); /* The one focus ring, for everything that is not a text field. */ --pod-focus-width: 2px; --pod-focus-offset: 2px; /* * The page frame: the content column and the space above and below it. * Under 768px the bottom drops to `--pod-frame-bottom-sm`. */ --pod-container: 1200px; --pod-frame-top: 56px; --pod-frame-bottom: 72px; --pod-frame-bottom-sm: 48px; }