/** * ALLYNOR Design Tokens — THE SINGLE SOURCE OF TRUTH. * =================================================== * * AUTHORITY: docs/design-system/styleguide/storefront.html + vendor.html — the finalized * styleguides. Build every component from THOSE. They differ from each other by exactly one * variable (`--form-bg`, Lever 1) and agree on everything else. * docs/design-system/reports/DESIGN-SYSTEM.md (v1.1) is the prose behind them: read it for * WHY, never for WHAT. Naming it as the spec here once cost a slice — see * docs/design-system/_superseded/README.md. * * This file is loaded on EVERY theme (Hyva storefront, Luma checkout, Luma * vendor dashboard) from view/base/web/. Edit a value here and all three * surfaces move together. * * The Tailwind `@theme{}` block is GENERATED from this file by * web/tailwind/build-tokens.mjs — never hand-edit the generated block, and * never add a token to Tailwind that does not exist here. * * GUARDRAILS (from the locked design system): * G1 No new hexes. Every colour a surface uses is in this file. * G2 Shapes never diverge — radii, heights and the type scale are shared * by the storefront, checkout and the seller workspace. * G3 Green is earned. On BUYER surfaces it is the one GO action. On the * SELLER surface green is never a button — it means money-in/verified. * G4 Every claim is verifiable or it does not ship. * * Contrast ratios in comments are WCAG 2.1, computed — not estimated. * `N` = passes normal text (4.5:1). `L` = passes large/UI (3:1). */ :root { /* --------------------------------------------------------------- * Brand * --------------------------------------------------------------- */ --al-primary: #1A4FCB; /* blue — links, primary buttons, active. white on it: 6.94 N */ --al-primary-pressed: #1640A6; /* v1.1: the PRESSED cut, NOT the hover cut. 9.06 N */ --al-primary-50: #EAF1FF; /* tints, chips, outline-button wash */ --al-primary-100: #D4E3FF; /* The ink for secondary text ON the navy chrome (the seller header's descriptor and its Help link). Additive: the scale simply had no 200 step, and the vendor mockup's own palette defines one — so this is the design system catching up with the design, not a new hex invented at a call site. */ --al-primary-200: #AAC6FF; --al-navy: #002167; /* ink, dark sections, seller/affiliate chrome. white on it: 14.86 N */ /* Green is EARNED (G3). #06A77D fails AA on white (3.07) — it is not a token. */ --al-cta: #03805F; /* the AA-safe green. white on it: 4.93 N */ --al-cta-pressed: #02684A; /* 6.81 */ /* --------------------------------------------------------------- * Neutrals * --------------------------------------------------------------- */ /* Ratios below are stated for BOTH surfaces these neutrals actually land on, * because three of them previously carried their --al-surface-2 ratio under an * "on white" label. All three were understatements so nothing shipped under AA, * but --al-gray was the costly one: it read "4.31, never normal text" when on * white it is 4.59 and clears AA for normal text, so it was being avoided for a * failure it does not have. Re-measured 2026-07-29 from the WCAG 2.1 sRGB * formula. If you change a hex here, re-measure — do not carry the old number * down. */ --al-ink: #16203A; /* headings / strong ink. white 16.13 · surface-2 15.17 */ --al-body: #3A4763; /* body copy. white 9.29 · surface-2 8.73 */ --al-gray-medium: #5B6776; /* AA-safe secondary text. white 5.76 · surface-2 5.42 */ --al-gray: #6B7689; /* mid grey. Normal text OK on WHITE (4.59); on surface-2 it is 4.31 — large text / UI only there. */ --al-gray-light: #9AA4B8; /* white 2.51 — DISABLED/decorative ONLY. Never text. */ --al-border: #E7ECF3; --al-hair: #EFF2F7; /* hairline dividers */ --al-surface-2: #F6F8FC; /* light band; the SELLER canvas */ --al-surface-3: #F0F4FA; --al-white: #FFFFFF; /* --------------------------------------------------------------- * Semantic — AA-proven bg/text PAIRS. * Magento's stock message boxes still use raw Tailwind palette classes * (text-green-700, text-red-500, …). These replace them. * --------------------------------------------------------------- */ --al-success-bg: #E6F4EE; /* Was #03805F, annotated "6.15 on its bg". That figure was wrong: measured in a * browser AND by hand, #03805F on #E6F4EE is 4.35 — under the 4.5 AA floor for * body text. Three consumers inherited the failure while the block above them * claimed "AA-proven pairs" (components.css .al-message--success, the customer * account page, and the PDP form-result message). * #02684A is not a new colour — it is --al-cta-pressed, already in this file. * It only ever renders as text on light ground, so darkening is strictly safer: * 5.93 on --al-success-bg, 6.72 on white. Verified 2026-07-29. */ --al-success-text: #02684A; /* white 6.81 · on --al-success-bg 6.02 */ --al-error-bg: #FDECEC; --al-error-text: #B42318; /* white 6.57 · on --al-error-bg 5.76 */ /* The PRESSED cut of the error family. It exists because the "press darkens" law (v1.1) had a * hole: --al-primary and --al-cta each had a pressed step, error did not — so a destructive * button was the one control on the system that could not answer "am I pressing this?" in * colour. Not a new family, just the missing step in one that already ships. * Measured 2026-07-30, WCAG 2.1 sRGB: white on it 8.92 · as text on white 8.92 · * on --al-error-bg 7.81. Darker than --al-error-text on every ground it can land on, so it * cannot introduce a contrast regression wherever the resting cut already passes. */ --al-error-pressed: #8F1D14; --al-warning-bg: #FDF4E3; --al-warning-text: #9A6200; /* 4.63 */ --al-info-bg: #EEF3FF; --al-info-text: #1A4FCB; /* 6.12 */ /* Rating stars: amber is 2.15 on white — decorative ONLY, and only ever * beside an ink numeric value. Suppressed entirely below n=1. */ --al-amber: #E8A317; /* --------------------------------------------------------------- * Seller-surface allocation (G3). Divergence is ALLOCATION, not palette: * the ground inverts and the chrome darkens. No new hexes. * --------------------------------------------------------------- */ --al-canvas: var(--al-surface-2); /* seller page ground */ --al-card: var(--al-white); /* cards sit ON the canvas */ --al-chrome: var(--al-navy); --al-on-chrome: var(--al-white); /* 14.86 */ --al-money-in: #02684A; /* settled/paid — NEVER a button. 6.15 */ --al-money-pending: #9A6200; /* awaiting. 4.63 */ --al-money-payable: var(--al-primary); /* --------------------------------------------------------------- * Form ground — LEVER 1. The ONE sanctioned divergence between the * two locked styleguides, and the reason they are otherwise * identical: storefront.html:134 sets --form-bg to surface-2, * vendor.html:60 sets it to white — "inverse of the page ground. * ALWAYS." * * SHOP room (storefront, auth, registration, CHECKOUT) * white page -> TINTED field * WORK room (the seller / marketplace dashboard) * tinted page -> WHITE field * * Same two hexes, swapped. Divergence is ALLOCATION, not palette * (G1) — exactly like the seller block above it. * * The DEFAULT is the shop room, which is what makes checkout come * out right: checkout is rendered by Luma, the same framework as * the seller dashboard, but it is a BUYER surface. Defaulting to * tinted and flipping only the seller scope means checkout needs no * special case at all — it simply never opts out. * * The var(--form-bg, …) indirection is deliberate, not defensive * padding. The Hyva theme already declares --form-bg * (tailwind-source.css:167 -> --color-input-bg -> --color-surface-2) * and Hyva's own form utilities read it. Sourcing from it means the * storefront has ONE form ground rather than two that merely agree * today — the same drift build-tokens.mjs was written to kill. Luma * loads no Tailwind and never declares it, hence the fallback. * --------------------------------------------------------------- */ --al-form-bg: var(--form-bg, var(--al-surface-2)); /* --------------------------------------------------------------- * Shape — G2: these NEVER diverge between surfaces. * --------------------------------------------------------------- */ --al-radius-input: 14px; --al-radius-card: 16px; --al-radius-lg: 14px; --al-radius-xl: 18px; --al-radius-2xl: 26px; --al-radius-pill: 999px; --al-radius-badge: 8px; /* a badge is a small rounded RECT, not a pill — see the locked styleguide */ --al-control-height: 48px; --al-control-height-compact: 40px; /* dense tables */ /* --------------------------------------------------------------- * Elevation — navy-tinted, cast DOWN. Elevation, never glow. * --------------------------------------------------------------- */ --al-shadow-soft: 0 1px 2px rgba(16, 32, 80, .04); --al-shadow-card: 0 12px 34px -14px rgba(16, 32, 80, .22); --al-shadow-elev: 0 10px 30px rgba(16, 24, 40, .12); /* v1.1 — "HOVER RISES; PRESS DARKENS." * On hover the fill HOLDS at full chroma and the control rises onto a tight * downward shadow with a lit top edge. Because nothing is repainted, every * contrast ratio is unchanged from default and AA holds by construction. * Darkening means exactly one thing: you are pressing this. */ --al-shadow-btn-hover: 0 6px 14px -6px rgba(16, 32, 80, .35), 0 2px 4px -3px rgba(16, 32, 80, .28), inset 0 1px 0 rgba(255, 255, 255, .20); --al-shadow-btn-hover-dark: 0 6px 16px -6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .14); --al-hover-lift: -1px; --al-press-scale: .985; /* --------------------------------------------------------------- * Motion — ONE ease-out curve. No bounce anywhere, on any surface. * --------------------------------------------------------------- */ --al-ease: cubic-bezier(.16, 1, .3, 1); --al-t-press: 90ms; --al-t-state: 180ms; --al-t-move: 260ms; --al-t-draw: 420ms; /* --------------------------------------------------------------- * Focus — an outline is NEVER removed without a replacement ring. * --------------------------------------------------------------- */ --al-focus-width: 2px; --al-focus-offset: 2px; --al-focus-color: var(--al-primary); --al-focus-color-on-dark: var(--al-white); --al-focus-halo: rgba(26, 79, 203, .20); /* Disabled */ --al-disabled-opacity: .45; /* --------------------------------------------------------------- * Type * --------------------------------------------------------------- */ --al-font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --al-font-body: 'Lato', ui-sans-serif, system-ui, sans-serif; /* The SCALE. It did not exist until 2026-07-14, and its absence is why the vendor dashboard * drifted: with no shared sizes to inherit, every component picked its own. Measured against * the mockup, six components had six different answers — the page h1 was 40px/400 where the * mockup says 30px/700, KPI numerals 26px/800 against 30px/700, card titles 700 against 600, * and a body string (the queue row title) was rendering in the HEADING face. One root cause, * seven visible defects. A scale is the fix; patching each component just resets the clock. * * ⚠️ PX, NOT REM — and this is not a style preference. Luma sets `html { font-size: 62.5% }`, * so 1rem = 10px on every marketplace/checkout page, while Hyvä's root is 16px. A rem scale * would render at 62.5% of intent on the seller surface and correctly on the storefront — * i.e. it would look right exactly where you tested it and be wrong where you did not. Px is * the only unit that means the same thing on both. (Verified: html font-size computes to 10px * on /marketplace/account/dashboard/.) * * Values are the mockup's, resolved at a 16px root: * h2 = clamp(1.5rem, 2.6vw, 1.875rem) -> 30px at the 1280 container. */ --al-text-h1: 36px; --al-text-h2: 30px; --al-text-h3: 22px; --al-text-h4: 18px; --al-text-h5: 16px; --al-text-body-lg: 17px; --al-text-body: 16px; --al-text-body-sm: 14px; --al-text-caption: 13px; --al-text-micro: 12px; /* Line heights. Body copy is 1.6; numerals are tight so a big figure does not float in its * card. The KPI value carries its own 1.1 for exactly that reason. */ --al-leading-body: 1.6; --al-leading-tight: 1.2; --al-leading-num: 1.1; /* --------------------------------------------------------------- * Layout * --------------------------------------------------------------- */ --al-container: 1320px; --al-sidebar: 288px; /* seller grouped sidebar */ /* --------------------------------------------------------------- * Z-index — a scale, so nobody invents 9999 again. * --------------------------------------------------------------- */ --al-z-base: 1; --al-z-dropdown: 100; --al-z-sticky: 200; --al-z-drawer: 300; --al-z-modal: 400; --al-z-toast: 500; } /** * LEVER 1 — THE WORK ROOM FLIPS THE GROUND. * * `.al-luma.al-seller` is the marketplace scope that already exists: `.al-luma` is set by * Fab/Luma/Magento_Theme/layout/default.xml, `.al-seller` by the Webkul `marketplace_styles` * handle, which loads on seller pages and NOWHERE else. Checkout and the seller dashboard are both * Luma, so `.al-luma` alone cannot tell them apart — the pair can, and that boundary is exactly the * shop-room / work-room line Lever 1 draws. * * This is the ONLY place --al-form-bg is ever reassigned. Every other surface takes the :root * default, so a new page cannot land on the wrong ground by omission. */ .al-luma.al-seller { --al-form-bg: var(--al-white); } /** * The OTHER work rooms, and they are on Hyva, not Luma. * * §4.3 of the spec rules four surfaces, not two: the customer dashboard and the affiliate * dashboard are ALSO work rooms ("white on the surface-2 canvas"), and both render on the Hyva * storefront under Magento's `account` body class — so `.al-luma.al-seller` above never reaches * them and they would silently take the :root SHOP default. That is a tinted field on a white * card inside a tinted canvas: the one combination the lever exists to prevent. * * `account` is Magento's own body class for /customer/account/* and it also covers the Webkul * affiliate pages, which are customer-account pages. One selector, both dashboards. */ .account { --al-form-bg: var(--al-white); } @media (prefers-reduced-motion: reduce) { :root { --al-t-press: 1ms; --al-t-state: 1ms; --al-t-move: 1ms; --al-t-draw: 1ms; } }