/* * Per-brand global design tokens. * * Each theme overrides the dropin design tokens and site-level custom * properties to match the corresponding Adobe Commerce storefront branding. * The active theme is set via data-theme on at runtime (see * scripts/scripts.js), based on the "theme" value in the store's config.json. * * Per docs/rules/styles.md, this file contains ONLY document-wide tokens * scoped to body[data-theme="..."]. Block-specific brand selectors were * relocated to their blocks under AGPO-865 (header → blocks/header/header.css, * footer → blocks/footer/footer.css, drop-in button/card → styles/lazy-styles.css); * do not add block-level selectors here — put them in the block's own CSS. * * Token sources: * TractorPartsASAP -> Figma "All-States-Ag" (file W8NQYhuTSwqjm49Ql88f7a), * cross-checked against * app/design/frontend/ClassyLlama/asap/web/css/source/_variables.less * HR Parts -> Figma "HRParts.com" (file zij2KPLNiFfyQk4Cqt3WyK), * cross-checked against * app/design/frontend/ClassyLlama/hrparts/web/css/source/_variables.less */ /* ── TractorPartsASAP ────────────────────────────────────────────────────── * * * Pure red brand. Primary actions, links, and accents all use the red family. * Dark header panel, pure black footer. */ body[data-theme="tractorpartsasap"], body[data-theme="tractorpartsasap"] .dropin-design { /* Color palette — red brand scale. Adobe drop-ins consume --color-brand-* directly. */ --color-brand-50: #ffe5e5; --color-brand-100: #ffb8b8; --color-brand-300: #d21f17; --color-brand-500: #cd0000; --color-brand-600: #9c0000; --color-brand-700: #bc0000; --color-brand-800: #7a0000; /* Brand semantic aliases — readable names over the scale, for use in component-level tokens. */ --color-brand-primary: var(--color-brand-500); --color-brand-dark: var(--color-surface-dark); /* Color palette — interactive */ --color-button-hover: #d50d00; --color-button-active: #bc0000; --color-link-default: var(--color-brand-primary); --color-link-hover: #d21f17; /* Category tile "Shop »" hover accent. The base link is red, so hover shifts to the informational accent (global #6978d9) to read as a distinct accent rather than another red. */ --color-category-shop--foreground-hover: var(--color-informational-500); /* Keyboard-focus ring (see unified :focus-visible rule in styles.css). Red brand reads clearly as a ring on the white page surface. */ --color-focus-ring: var(--color-brand-primary); /* Promotional banner — the strip above the nav bar (AGPO-866). Bar color #222 per the production .panel.wrapper computed snapshot (Figma node 2-3 says #333 — production wins per Janusz 2026-06-04); red accent on the phone icon (Figma 90-224: #CD0000 circle = brand-500) and strip. */ --color-promo-banner-background: #222; --color-promo-banner-foreground: var(--color-neutral-50); --color-promo-banner-accent: var(--color-brand-primary); /* mobile phone strip number — production renders it Roboto Black */ --phone-strip-font-weight: 900; /* Header search field — production .block-search input computed styles (#f9f9f9 field, 1px #ccc border, 2px corner, bold #4a4a4a text, #8d8d8d placeholder; mobile field rounds at 6px). Consumed by blocks/header/header.css; HR defines its own set below. */ --header-search-background: #f9f9f9; --header-search-border: #ccc; --header-search-border-width: 1px; --header-search-radius: 2px; --header-search-radius-mobile: 6px; --header-search-text: #4a4a4a; --header-search-placeholder: #8d8d8d; /* Autocomplete (AGPO-881). TP frame: red 3px top accent, neutral-gray sides; footer links are the same brand red. */ --header-autocomplete-link: #cd0000; /* footer links */ --header-autocomplete-border-top: #cd0000; /* panel top accent */ --header-autocomplete-border: #bbb; /* panel side/bottom frame */ /* Hit name/SKU/category render Roboto Medium on production (its theme maps Roboto 400 to the Medium file); EDS ships a real 500 face, so match with 500. */ --header-autocomplete-hit-name-weight: 500; --header-autocomplete-hit-sku-weight: 500; --header-autocomplete-hit-category-weight: 500; /* Name clamps to a single line + ellipsis, matching production's nowrap .info. */ --header-autocomplete-hit-name-lines: 1; /* Footer renders Roboto Medium throughout (text + 16px links → 500). */ --header-autocomplete-footer-weight: 500; --header-autocomplete-footer-link-weight: 500; /* "PRODUCTS" header lines up with the 10px left padding of the hit rows. */ --header-autocomplete-source-header-pad-x: 10px; /* Drop-in password show/hide toggle — static top offset that centres it on the input row (styles/lazy-styles.css). All-rem so it tracks the user's browser font size. Per-brand because the input is taller here (body-2 line 2.34rem): label block 2.8rem (2rem line + 0.8rem margin) + half of (input 4.34rem − eye 2.4rem); visually tuned to 3.65rem. */ --dropin-eye-top: 3.65rem; /* ASAP-only accent colors (from Figma node 1523-8613) */ --color-alto-30: rgb(215 215 215 / 30%); --color-tuna: #31333d; --color-kournikova: #ffe07d; --color-bright-red: #b40000; /* Background / surface */ --background-color: var(--color-neutral-50); --color-surface-dark: #000; /* Typography — Roboto family per Figma. Values for tokens Figma didn't explicitly spec are interpolated to stay coherent with the H1/H3 scale. */ --type-base-font-family: roboto, "Roboto Fallback", system-ui, sans-serif; --type-heading-color: #333; --type-display-1-font: 700 2.8rem/3.36rem var(--type-base-font-family); --type-display-1-letter-spacing: 0; --type-display-2-font: 700 2.4rem/2.88rem var(--type-base-font-family); --type-display-2-letter-spacing: 0; --type-display-3-font: 700 1.6rem/1.9rem var(--type-base-font-family); --type-display-3-letter-spacing: 0; --type-headline-1-font: 700 2rem/2.4rem var(--type-base-font-family); --type-headline-1-letter-spacing: 0; --type-headline-2-strong-font: 700 1.8rem/2.16rem var(--type-base-font-family); --type-headline-2-strong-letter-spacing: 0; --type-headline-2-default-font: 400 1.8rem/2.16rem var(--type-base-font-family); --type-headline-2-default-letter-spacing: 0; --type-body-1-default-font: 400 1.4rem/2.52rem var(--type-base-font-family); --type-body-1-default-letter-spacing: 0; --type-body-1-strong-font: 400 1.3rem/2.6rem var(--type-base-font-family); --type-body-1-strong-letter-spacing: 0; --type-body-1-emphasized-font: 700 1.4rem/2.52rem var(--type-base-font-family); --type-body-1-emphasized-letter-spacing: 0; --type-body-2-default-font: 400 1.3rem/2.34rem var(--type-base-font-family); --type-body-2-default-letter-spacing: 0; --type-body-2-strong-font: 700 1.3rem/2rem var(--type-base-font-family); --type-body-2-strong-letter-spacing: 0; --type-body-2-emphasized-font: 700 1.3rem/2rem var(--type-base-font-family); --type-body-2-emphasized-letter-spacing: 0; --type-button-1-font: 700 1.4rem/1.75rem var(--type-base-font-family); --type-button-1-letter-spacing: 0; --type-button-2-font: 600 1.4rem/1.75rem var(--type-base-font-family); --type-button-2-letter-spacing: 0; --type-details-caption-1-font: 400 1.3rem/2.8rem var(--type-base-font-family); --type-details-caption-1-letter-spacing: 0; --type-details-caption-2-font: 400 1.2rem/1.6rem var(--type-base-font-family); --type-details-caption-2-letter-spacing: 0; --type-details-overline-font: 700 1.2rem/2rem var(--type-base-font-family); --type-details-overline-letter-spacing: 0; /* Buttons — default variant (filled primary). */ --color-button__default--background: var(--color-brand-primary); --color-button__default--background-hover: var(--color-button-hover); --color-button__default--background-active: var(--color-button-active); --color-button__default--foreground: var(--color-neutral-50); /* Buttons — secondary variant (white surface, dark outline + text). No hover state specified in Figma; states track the default value. */ --color-button__secondary--background: var(--color-neutral-50); --color-button__secondary--background-hover: var(--color-neutral-50); --color-button__secondary--background-active: var(--color-neutral-50); --color-button__secondary--foreground: var(--color-brand-dark); --color-button__secondary--foreground-hover: var(--color-brand-dark); --color-button__secondary--border: var(--color-brand-dark); --color-button__secondary--border-hover: var(--color-brand-dark); /* Buttons — tertiary variant (text only). */ --color-button__tertiary--background: transparent; --color-button__tertiary--background-hover: transparent; --color-button__tertiary--background-active: transparent; --color-button__tertiary--foreground: var(--color-brand-primary); --color-button__tertiary--foreground-hover: var(--color-brand-600); --color-button__tertiary--border: transparent; --color-button__tertiary--border-hover: transparent; /* Buttons — dark variant (filled charcoal). Used for nav "Shop All"; #222 per production .shop-all-button (Figma 1523-1161 says #333 — production wins for 1:1 parity per Janusz 2026-06-04). */ --color-button__dark--background: #222; /* neutral-800 (#3d3d3d) ≈ production hover #3c3c3c (Δ1, token reuse) */ --color-button__dark--background-hover: var(--color-neutral-800); --color-button__dark--background-active: var(--color-neutral-900); --color-button__dark--foreground: var(--color-neutral-50); /* Buttons — accent variant (filled blue). */ --color-button__accent--background: #1e64b7; --color-button__accent--background-hover: #1a5599; --color-button__accent--background-active: #1a5599; --color-button__accent--foreground: var(--color-neutral-50); --button-padding-block: 17px; --button-padding-inline: 25px; --button-font-weight: 700; --button-border-radius: var(--shape-border-radius-1); /* Brand default — tighter than Adobe's 3px scale. Used by any component that doesn't override its own radius token. */ --border-radius-default: 2px; /* Card — drop-in cards inherit the brand default. */ --card-border-radius: var(--border-radius-default); /* Header — mobile hamburger bars (same grey as the input border) */ --nav-hamburger-color: #686868; /* Header — mobile drawer menu rows (production .nav-sections computed: 16px Roboto 400 #222 links; hover/focus keep the same ink — production has no color shift on menu rows). Bold (700) is reserved for the "Shop All" header and the trailing View All rows. */ --nav-drawer-link-color: #222; --nav-drawer-link-color-hover: #222; --nav-drawer-link-color-focus: #222; --nav-drawer-link-font-size: 1.6rem; --nav-drawer-link-font-weight: 500; --nav-drawer-row-padding: 2rem; /* hairline between drawer rows (production rail-item border / Figma 84-156 Line strokes); sublist rows use production's lighter #ccc */ --nav-drawer-row-border: 1px solid var(--color-neutral-300); --nav-drawer-subrow-border: 1px solid #ccc; /* Forms — default field metrics follow production Magento (40px tall; 16px text set in styles.css), border #686868 / 2px corner per the LESS theme. Larger contextual forms set their own height at the component level (parts-finder pins 60px; qty stepper 50px per Figma). */ --input-height: 40px; --input-border-color: #686868; --input-border-color-focus: var(--color-brand-primary); --input-border-radius: var(--border-radius-default); } /* ── HR Parts ────────────────────────────────────────────────────────────── * * * Inter-based design system with a distinctive gold (#f5a603) primary, blue * secondary, and dark-charcoal surface. Headings are heavy (800/900) and * uppercase. Technical text is set in Roboto Mono Medium. */ body[data-theme="hrparts"], body[data-theme="hrparts"] .dropin-design { /* Color palette — gold brand scale. Adobe drop-ins consume --color-brand-* directly; these are the brand's primary actionable colors at 4 intensity steps. */ --color-brand-50: #fff8e0; /* lightest gold tint */ --color-brand-100: #ffeaa8; --color-brand-300: #ffd96a; /* light gold — tints */ --color-brand-500: #f5a603; /* primary gold — default actions */ --color-brand-600: #da8504; /* hover */ --color-brand-700: #c47900; /* active / darkest */ --color-brand-800: #8a5503; /* Secondary — blue (informational/highlight). */ --color-informational-500: #1b71f5; /* Brand semantic aliases — readable names over the scale, for use in component-level tokens. */ --color-brand-primary: var(--color-brand-500); --color-brand-secondary: var(--color-informational-500); --color-brand-dark: var(--color-surface-dark); /* Color palette — interactive */ --color-button-hover: var(--color-brand-600); --color-button-active: var(--color-brand-700); --color-link-default: var(--color-brand-primary); --color-link-hover: var(--color-brand-600); /* Category tile "Shop »" hover accent — the requested blue (#1b71f5), which is this brand's --color-informational-500 / --color-brand-secondary. */ --color-category-shop--foreground-hover: var(--color-informational-500); /* Keyboard-focus ring (see unified :focus-visible rule in styles.css). The primary gold (#f5a603) is too light to pass focus-contrast on white (~1.7:1), so the ring uses the darker brand-700 gold (~3:1) — still on-brand, but visible. */ --color-focus-ring: var(--color-brand-700); /* Promotional banner — same structure as TP (unified header, per Janusz 2026-06-06; the HR-specific top-bar variant from Figma 15-84 was dropped): promo copy + clickable phone on the dark strip, gold accent on the phone icon/mobile strip where TP uses red. Black text on the gold strip (the TP white fails contrast on #f5a603). */ --color-promo-banner-background: var(--color-surface-dark); --color-promo-banner-foreground: #d9d9d9; --color-promo-banner-accent: var(--color-brand-primary); --color-promo-banner-accent-foreground: #000; /* mobile phone strip number — Inter's 900 reads far heavier than Roboto's (TP), so HR uses a medium weight */ --phone-strip-font-weight: 500; /* Header search field — same look as TractorPartsASAP (per Janusz 2026-06-07; supersedes the Figma 20-305 gray field). Kept as hrparts-scoped tokens so the brand can re-skin the field here later without touching blocks/header/header.css — e.g. HR's own design system rounds at 5px (--border-radius-default) if the brand look ever returns. */ --header-search-background: #f9f9f9; --header-search-border: #ccc; --header-search-border-width: 1px; --header-search-radius: 2px; --header-search-radius-mobile: 6px; --header-search-text: #4a4a4a; --header-search-placeholder: #8d8d8d; /* Autocomplete (AGPO-881). HR frames the whole panel gold (production Algolia_CustomAlgolia override: div.aa-Panel { border-color: #f5a602 }), but the footer links are the shared brand red — same as TP. */ --header-autocomplete-link: #cd0000; /* footer links (red, like prod) */ --header-autocomplete-border-top: #f5a602; /* gold top accent */ --header-autocomplete-border: #f5a602; /* gold side/bottom frame */ /* HR sets the hits in Inter and matches production's regular 400 weight. */ --header-autocomplete-hit-name-weight: 400; --header-autocomplete-hit-sku-weight: 400; --header-autocomplete-hit-category-weight: 400; /* Production HR also clamps the name to one line (its .info is nowrap). */ --header-autocomplete-hit-name-lines: 1; /* HR footer text is regular 400; the 16px links are SemiBold 600 (Open Sans on production → Inter SemiBold here). */ --header-autocomplete-footer-weight: 400; --header-autocomplete-footer-link-weight: 600; /* HR keeps the vendor 4px "PRODUCTS" header padding. */ --header-autocomplete-source-header-pad-x: 4px; /* Drop-in password show/hide toggle — static top offset that centres it on the input row (styles/lazy-styles.css). All-rem so it tracks the user's browser font size. Per-brand because the input is shorter here (body-2 line 1.4rem): label block 2.8rem (2rem line + 0.8rem margin) + half of (input 3.4rem − eye 2.4rem); visually tuned to 3.65rem. */ --dropin-eye-top: 3.65rem; /* Background / surface */ --background-color: var(--color-neutral-50); --color-surface-dark: #0f172a; /* Typography — Inter family per Figma. Tokens beyond the explicit Figma spec are interpolated to stay coherent with the H1/H2/H3 scale. */ --type-base-font-family: inter, "Inter Fallback", system-ui, sans-serif; --type-fixed-font-family: "Roboto Mono", ui-monospace, "Liberation Mono", monospace, system-ui, sans-serif; --type-heading-color: #000; --type-display-1-font: 900 5.5rem/5.5rem var(--type-base-font-family); --type-display-1-letter-spacing: 0; --type-display-2-font: 800 4.4rem/4.4rem var(--type-base-font-family); --type-display-2-letter-spacing: -0.02em; --type-display-3-font: 800 3.5rem/3.5rem var(--type-base-font-family); --type-display-3-letter-spacing: 0; --type-headline-1-font: 600 2.8rem/2.8rem var(--type-base-font-family); --type-headline-1-letter-spacing: 0; --type-headline-2-strong-font: 500 2.3rem/2.3rem var(--type-base-font-family); --type-headline-2-strong-letter-spacing: 0; --type-headline-2-default-font: 400 2rem/2rem var(--type-base-font-family); --type-headline-2-default-letter-spacing: 0; --type-body-1-default-font: 400 1.6rem/1.6rem var(--type-base-font-family); --type-body-1-default-letter-spacing: 0; --type-body-1-strong-font: 700 1.6rem/2.4rem var(--type-base-font-family); --type-body-1-strong-letter-spacing: 0; --type-body-1-emphasized-font: 700 1.6rem/2.4rem var(--type-base-font-family); --type-body-1-emphasized-letter-spacing: 0; --type-body-2-default-font: 500 1.4rem/1.4rem var(--type-base-font-family); --type-body-2-default-letter-spacing: 0; --type-body-2-strong-font: 700 1.4rem/2rem var(--type-base-font-family); --type-body-2-strong-letter-spacing: 0; --type-body-2-emphasized-font: 700 1.4rem/2rem var(--type-base-font-family); --type-body-2-emphasized-letter-spacing: 0; --type-button-1-font: 700 1.6rem/1.6rem var(--type-base-font-family); --type-button-1-letter-spacing: 0; --type-button-2-font: 700 1.6rem/1.6rem var(--type-base-font-family); --type-button-2-letter-spacing: 0; --type-details-caption-1-font: 400 1.2rem/1.6rem var(--type-base-font-family); --type-details-caption-1-letter-spacing: 0; --type-details-caption-2-font: 400 1.2rem/1.6rem var(--type-base-font-family); --type-details-caption-2-letter-spacing: 0; --type-details-overline-font: 700 1.2rem/2rem var(--type-base-font-family); --type-details-overline-letter-spacing: 0.08em; /* Buttons — default variant (filled gold), per Figma "Button/Primary". */ --color-button__default--background: var(--color-brand-primary); --color-button__default--background-hover: var(--color-button-hover); --color-button__default--background-active: var(--color-button-active); --color-button__default--foreground: var(--color-brand-dark); /* Buttons — secondary variant per Figma "Button/White". No hover state specified in Figma; states track the default value. */ --color-button__secondary--background: var(--color-neutral-50); --color-button__secondary--background-hover: var(--color-neutral-50); --color-button__secondary--background-active: var(--color-neutral-50); --color-button__secondary--foreground: var(--color-brand-dark); --color-button__secondary--foreground-hover: var(--color-brand-dark); --color-button__secondary--border: var(--color-brand-dark); --color-button__secondary--border-hover: var(--color-brand-dark); /* Buttons — tertiary variant (text only, gold). */ --color-button__tertiary--background: transparent; --color-button__tertiary--background-hover: transparent; --color-button__tertiary--background-active: transparent; --color-button__tertiary--foreground: var(--color-brand-primary); --color-button__tertiary--foreground-hover: var(--color-brand-600); --color-button__tertiary--border: transparent; --color-button__tertiary--border-hover: transparent; /* Buttons — dark variant (filled charcoal). Per Figma "Button/Dark". */ --color-button__dark--background: var(--color-brand-dark); --color-button__dark--background-hover: var(--color-neutral-900); --color-button__dark--background-active: var(--color-neutral-900); --color-button__dark--foreground: var(--color-neutral-50); /* Buttons — accent variant (filled blue). Per Figma "Button/Blue". */ --color-button__accent--background: var(--color-brand-secondary); --color-button__accent--background-hover: #1559c4; --color-button__accent--background-active: #1559c4; --color-button__accent--foreground: var(--color-neutral-50); --button-padding-block: 10px; --button-padding-inline: 21px; --button-font-weight: 700; --button-border-radius: 5px; --button-gap: 10px; --button-border-width: 2px; /* Brand default — matches the button family. */ --border-radius-default: 5px; /* Card inherits the brand default. */ --card-border-radius: var(--border-radius-default); /* Header — mobile hamburger bars (shared with TP: the unified header's drawer/hamburger inks are neutral grays, not brand colors; consumed by blocks/header/header.css) */ --nav-hamburger-color: #686868; /* Header — drawer menu rows (TP production parity, see the TP block above for the value rationale) */ --nav-drawer-link-color: #222; --nav-drawer-link-color-hover: #222; --nav-drawer-link-color-focus: #222; --nav-drawer-link-font-size: 1.6rem; --nav-drawer-link-font-weight: 500; --nav-drawer-row-padding: 2rem; --nav-drawer-row-border: 1px solid var(--color-neutral-300); --nav-drawer-subrow-border: 1px solid #ccc; /* Forms — generic fields use the 40px default (consistent with the other brand) on a light-gray surface fill, lighter border, 5px corner. The "Machine Finder" uses the taller contextual height via the parts-finder block, not this generic default. */ --input-height: 40px; --input-background: #ededed; --input-border-color: #acacac; --input-border-color-focus: var(--color-brand-primary); --input-border-radius: var(--border-radius-default); } /* H1–H3 and buttons are UPPERCASE on HR Parts per Figma. */ body[data-theme="hrparts"] h1, body[data-theme="hrparts"] h2, body[data-theme="hrparts"] h3, body[data-theme="hrparts"] main a.button, body[data-theme="hrparts"] button.button { text-transform: uppercase; } /* Brand-specific block overrides have been relocated to their blocks (AGPO-865): * header → blocks/header/header.css, footer → blocks/footer/footer.css, * drop-in button/card → styles/lazy-styles.css. This file is now tokens-only. */