/* ========================================================================== * afx-tokens.css - the shared design-token layer for BOTH storefronts * (spares.net / spares_child and sparesusa.net / spares_usa). * * WHY THIS FILE EXISTS * -------------------- * The two stores are separate Magento websites on separate themes, but they are * one product and must look like one product. Before this file, the values that * make up the visual language lived in four different places: * * - brand colours -> Spares//web/css/afx-store.css (per store) * - neutrals + stock green -> Sm/autostore/web/tailwind/tailwind.config.js * (hardcoded hex in the `afx` colour group) * - error / success reds -> hardcoded hex scattered through custom.css * - spacing + type scale -> implicit in whatever Tailwind utility a template * happened to use * * so "what colour is a border?" had no single answer, and a change had to be * made twice to reach both stores. This file is the single answer. It lives in * Spares/autostore_child, the theme BOTH stores inherit from, so one edit here * reaches both. * * WHAT IS SHARED AND WHAT IS NOT * ------------------------------ * Everything here is deliberately store-agnostic: neutrals, semantic status * colours, spacing, radii, type scale, focus treatment. The only things that * legitimately differ between the two stores are the brand hues, and those stay * where they already are - Spares//web/css/afx-store.css, which sets * --color-primary and friends (NET green #137C4E, USA red #DA0000) and loads * body-end, i.e. after this file. So a store's own brand always wins. * * This file therefore never declares --color-primary itself. It only declares * tokens *derived* from it, via var() indirection. Custom properties resolve * lazily at use time, not at declaration time, so these derived tokens pick up * whichever brand value the store set later in the cascade. The fallbacks are * the NET green, matching the fallbacks already used in tailwind.config.js. * * NO VISUAL CHANGE ON ITS OWN * --------------------------- * Declaring a custom property paints nothing. Adding this file cannot move a * pixel until something reads a token. That is intentional: it makes adopting * the system incremental and safe. New and refactored components should read * these tokens instead of restating hex values; the "SOURCE" note on each token * records where its value came from, so nothing here is a new invention. * ========================================================================== */ :root { /* --------------------------------------------------------------------- BRAND Per-store values come from Spares//web/css/afx-store.css. Fallbacks below are the NET green, as in tailwind.config.js. --------------------------------------------------------------------- */ --afx-primary: var(--color-primary, #137C4E); /* Hover/pressed state for primary actions. The stores already ship a -darker ramp; reuse it rather than inventing a second dark brand tone. */ --afx-primary-hover: var(--color-primary-darker, #0f5d3a); --afx-primary-light: var(--color-primary-lighter, #19915c); /* On-brand foreground. Both brand hues are dark enough for white text: #137C4E vs #fff = 5.22:1, #DA0000 vs #fff = 5.27:1 (both pass AA). */ --afx-on-primary: #ffffff; /* --------------------------------------------------------------------- SECONDARY SOURCE: afx.btn / afx.btn-hover in tailwind.config.js - the near-black already used for "Add to Cart" on the product cards. Deliberately NOT the old Tailwind `secondary` (#ff3333), which was a red: on the USA store that read as a slightly-off duplicate of the brand red, and on the NET store it clashed with the green. A neutral dark reads as "secondary action" on both brands. --------------------------------------------------------------------- */ --afx-secondary: #282828; /* Mid grey for a de-emphasised secondary (disabled-looking but still legible). */ --afx-secondary-light: #4a4a4a; --afx-secondary-hover: #000000; --afx-on-secondary: #ffffff; /* --------------------------------------------------------------------- ACCENT Used for highlights that must not be mistaken for a primary action (badges, "new" flags, active filter chips). Defaults to the lighter brand ramp so it stays on-brand per store; a store may override it in its own afx-store.css. --------------------------------------------------------------------- */ --afx-accent: var(--color-primary-lighter, #19915c); --afx-on-accent: #ffffff; /* --------------------------------------------------------------------- TEXT SOURCE: afx.heading (#404040) and afx.body (#686868) in tailwind.config.js, sampled from the reference storefronts. Contrast on white: #282828 = 14.7:1, #404040 = 10.4:1, #686868 = 5.6:1 - all pass WCAG AA for body text. --------------------------------------------------------------------- */ --afx-text-heading: #282828; --afx-text: #404040; --afx-text-muted: #686868; /* Lightest text that still passes AA (4.61:1) on --afx-surface. Anything lighter than this must not be used for text a customer has to read. */ --afx-text-subtle: #757575; --afx-text-inverse: #ffffff; /* --------------------------------------------------------------------- SURFACES SOURCE: afx.toolbar (#f8f8f8) and afx.media (#f5f5f5). --------------------------------------------------------------------- */ --afx-bg: #ffffff; /* page canvas */ --afx-surface: #ffffff; /* cards, panels, drawers */ --afx-surface-alt: #f8f8f8; /* toolbars, table stripes, filter bar */ --afx-surface-media: #f5f5f5; /* product image box */ --afx-surface-inverse: #282828; /* footer, sticky bars */ /* --------------------------------------------------------------------- BORDERS SOURCE: afx.border (#e5e5e5). --------------------------------------------------------------------- */ --afx-border: #e5e5e5; /* default hairline */ --afx-border-strong: #cccccc; /* inputs, emphasised dividers */ --afx-border-subtle: #f0f0f0; /* inside-card dividers */ /* --------------------------------------------------------------------- STATUS SOURCE: the values the storefront already uses - success #01a85b = afx.stock ("In stock" / "Available to order") error #e02b27 = the red already in custom.css for .message-error warning #ffc107 = --yellow / --warning from the bundled bootstrap.css The -bg tints are likewise the ones already in the CSS (#e5efe5, #fae5e5). Text-on-tint pairings use the darkened variants so status messages keep AA contrast instead of relying on the mid-tone hue. --------------------------------------------------------------------- */ --afx-success: #01a85b; --afx-success-text: #016c3a; /* 5.6:1 on --afx-success-bg */ --afx-success-bg: #e5efe5; --afx-warning: #ffc107; --afx-warning-text: #7a5600; /* 6.2:1 on --afx-warning-bg */ --afx-warning-bg: #fdf6e3; --afx-error: #e02b27; --afx-error-text: #a81b18; /* 6.1:1 on --afx-error-bg */ --afx-error-bg: #fae5e5; --afx-info: #17a2b8; /* --info from bootstrap.css */ --afx-info-text: #0b5d6b; --afx-info-bg: #e7f6f8; /* Stock states, named for what they mean on an automotive parts catalogue rather than by colour, so a template does not have to know the hue. */ --afx-stock-in: var(--afx-success); --afx-stock-order: var(--afx-warning-text); --afx-stock-out: var(--afx-text-muted); /* --------------------------------------------------------------------- TYPOGRAPHY SOURCE: Rubik is the family already configured in Magento (design/font/body_google_font) and loaded by html/config.phtml. The scale mirrors Tailwind's defaults, which the templates already use, so naming it here documents the system rather than changing it. --------------------------------------------------------------------- */ /* The storefront renders in grandis_extended, the same family the live reference storefronts use, and the woff2 files ship with the theme (autostore_child/web/fonts/). This token used to name Rubik, which was additionally pulled from Google Fonts on every page and then used by NOTHING - measured: 0 of ~280 text elements computed to Rubik. Naming the real family keeps the token layer honest and the request count down. The faces are registered as separate families each at weight 400, so bold text is synthesised by the browser. That is how the reference does it too - see ยง26 of afx-components.css. */ --afx-font-sans: 'grandis_extendedregular', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* The heading face. grandis registers each weight as its own family at weight 400, so a heading gets its weight from the FAMILY, not from font-weight - which is how the reference renders its page titles (33px, font-weight 400, grandis_extendedbold). Setting font-weight:700 on the regular face instead produces a synthesised bold that does not match, and that is why h1 looked different on every other page. */ --afx-font-heading: 'grandis_extendedbold', 'grandis_extendedregular', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --afx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --afx-text-xs: 0.75rem; /* 12px - legal text, table meta */ --afx-text-sm: 0.875rem; /* 14px - secondary UI, card meta, SKU */ --afx-text-base: 1rem; /* 16px - body copy; never smaller on mobile */ --afx-text-lg: 1.125rem; /* 18px - lead paragraphs, price on card */ --afx-text-xl: 1.25rem; /* 20px - h4 / card titles */ --afx-text-2xl: 1.5rem; /* 24px - h3 / section headings */ --afx-text-3xl: 1.875rem; /* 30px - h2 */ --afx-text-4xl: 2.25rem; /* 36px - h1 on inner pages */ /* Heading sizes taken from the live reference storefronts (spares.net / sparesusa.net), measured with getComputedStyle rather than eyeballed: page heading 33px/42px, section heading 33px/42px at weight 900. They sit outside the -xl ramp above because that ramp is a geometric scale and these are two fixed values the design actually uses. */ --afx-heading-page: 2.0625rem; /* 33px - category/search/CMS page title */ --afx-heading-section: 2.0625rem; /* 33px - FEATURED PRODUCTS and friends */ --afx-heading-hero: 2.5rem; /* 40px - homepage hero only */ --afx-heading-lh: 1.27; /* 42px at 33px */ --afx-leading-tight: 1.2; /* headings */ --afx-leading-snug: 1.4; /* card titles, table cells */ --afx-leading-normal: 1.6; /* body copy */ --afx-weight-normal: 400; --afx-weight-medium: 500; --afx-weight-bold: 700; /* --------------------------------------------------------------------- SPACING A 4px base scale, matching Tailwind's, so tokens and utilities agree. --afx-gutter is the 30px sidebar/card gap already recorded as spacing '7.5' in tailwind.config.js and sampled from the reference storefronts. --------------------------------------------------------------------- */ --afx-space-1: 0.25rem; /* 4px */ --afx-space-2: 0.5rem; /* 8px */ --afx-space-3: 0.75rem; /* 12px */ --afx-space-4: 1rem; /* 16px */ --afx-space-5: 1.25rem; /* 20px */ --afx-space-6: 1.5rem; /* 24px */ --afx-space-8: 2rem; /* 32px */ --afx-space-10: 2.5rem; /* 40px */ --afx-space-12: 3rem; /* 48px */ --afx-space-16: 4rem; /* 64px */ --afx-gutter: 1.875rem; /* 30px - grid gap / sidebar gutter */ /* --------------------------------------------------------------------- RADII / ELEVATION / MOTION --------------------------------------------------------------------- */ --afx-radius-sm: 2px; --afx-radius: 4px; /* buttons, inputs, cards */ --afx-radius-lg: 8px; /* modals, drawers */ --afx-radius-full: 9999px; /* pills, badges, counter bubbles */ --afx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --afx-shadow: 0 2px 6px rgba(0, 0, 0, 0.10); --afx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14); --afx-duration: 200ms; --afx-ease: cubic-bezier(0.4, 0, 0.2, 1); /* --------------------------------------------------------------------- FOCUS One focus treatment for the whole storefront. --focus-ring is already set per store in afx-store.css (a 25%-alpha brand tint); reuse it so the ring is on-brand, and keep a solid outline as well so focus is visible against brand-coloured backgrounds where the tint would vanish. Never remove these - keyboard users rely on them. --------------------------------------------------------------------- */ --afx-focus-ring: var(--focus-ring, rgba(19, 124, 78, 0.25)); --afx-focus-color: var(--color-primary, #137C4E); --afx-focus-width: 3px; /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --afx-container-max: 1280px; --afx-sidebar-width: 305px; /* matches gridTemplateColumns.sidebar-* */ /* Minimum hit area for any interactive control. WCAG 2.5.8 asks for 24px; 44px is the comfortable touch target used on the mobile header. */ --afx-touch-min: 44px; }