:root { /* Layer 1 — Color primitives */ /* Branding owns --dxp-*; do not redefine DXP seeds here. */ --waw-primitives-white-0: #FFFFFF; /* Rocket */ --waw-primitives-waw-rocket-10: #E6EDE9; --waw-primitives-waw-rocket-20: #CCDBD2; --waw-primitives-waw-rocket-30: #B3C9BC; --waw-primitives-waw-rocket-40: #9AB7A5; --waw-primitives-waw-rocket-50: #81A58F; --waw-primitives-waw-rocket-60: #679279; --waw-primitives-waw-rocket-70: #4E8062; --waw-primitives-waw-rocket-80: #356E4C; --waw-primitives-waw-rocket-90: #1B5C35; --waw-primitives-waw-rocket-100: #024A1F; --waw-primitives-waw-rocket-100-20: #024A1F33; /* Apple */ --waw-primitives-waw-apple-10: #EEFCED; --waw-primitives-waw-apple-20: #D3F3DB; --waw-primitives-waw-apple-30: #B6ECC6; --waw-primitives-waw-apple-40: #84D5A4; --waw-primitives-waw-apple-50: #46B97E; --waw-primitives-waw-apple-60: #119859; --waw-primitives-waw-apple-70: #008446; --waw-primitives-waw-apple-80: #00723D; --waw-primitives-waw-apple-90: #004F2A; --waw-primitives-waw-apple-100: #003D20; /* Technicado */ --waw-primitives-waw-technicado-10: #F8FDF9; --waw-primitives-waw-technicado-20: #F1FCF4; --waw-primitives-waw-technicado-30: #EAFBEF; --waw-primitives-waw-technicado-40: #E7FFEE; --waw-primitives-waw-technicado-50: #DEFFE8; --waw-primitives-waw-technicado-60: #D9FCE2; --waw-primitives-waw-technicado-70: #C5FBD4; --waw-primitives-waw-technicado-80: #B8F1C8; --waw-primitives-waw-technicado-90: #C2F3D0; --waw-primitives-waw-technicado-100: #BCF2CB; --waw-primitives-waw-technicado-110: #A2E6B5; /* Charcoal */ --waw-primitives-waw-charcoal-0: #FFFFFF; --waw-primitives-waw-charcoal-10: #F9F9F9; --waw-primitives-waw-charcoal-20: #F4F4F4; --waw-primitives-waw-charcoal-30: #E8E8E8; --waw-primitives-waw-charcoal-40: #D2D2D2; --waw-primitives-waw-charcoal-50: #BDBDBD; /* WBST-7100 | Figma store-locator list scrollbar thumb (#A2A2A2). */ --waw-primitives-waw-charcoal-55: #A2A2A2; --waw-primitives-waw-charcoal-60: #9C9C9C; --waw-primitives-waw-charcoal-70: #7B7B7B; --waw-primitives-waw-charcoal-80: #666666; --waw-primitives-waw-charcoal-90: #50504F; --waw-primitives-waw-charcoal-100: #3B3B37; --waw-primitives-waw-charcoal-110: #25251F; --waw-primitives-waw-charcoal-120: #13130C; --waw-primitives-waw-charcoal-130: #111103; --waw-primitives-waw-charcoal-140: #000000; --waw-primitives-waw-grey-100: #323232; /* WBST-7100 | Google Maps default canvas before tiles (#E5E3DF) — matches woolworths.com.au/shop/storelocator reload fill. */ --waw-primitives-waw-maps-canvas: #E5E3DF; /* Kiwi */ --waw-primitives-waw-kiwi-10: #F4FFDB; --waw-primitives-waw-kiwi-20: #EEFFC3; --waw-primitives-waw-kiwi-30: #DAF997; --waw-primitives-waw-kiwi-40: #C8F170; --waw-primitives-waw-kiwi-50: #ACD94D; --waw-primitives-waw-kiwi-60: #94C132; --waw-primitives-waw-kiwi-70: #7DA91F; --waw-primitives-waw-kiwi-80: #699112; --waw-primitives-waw-kiwi-90: #446104; --waw-primitives-waw-kiwi-100: #334901; /* Pink */ --waw-primitives-waw-pink-10: #FFEBF6; --waw-primitives-waw-pink-20: #FFD9EF; --waw-primitives-waw-pink-30: #FFBAE2; --waw-primitives-waw-pink-40: #FF79C8; --waw-primitives-waw-pink-50: #F550AA; --waw-primitives-waw-pink-60: #E6007E; --waw-primitives-waw-pink-70: #C9006E; --waw-primitives-waw-pink-80: #AC005E; --waw-primitives-waw-pink-90: #71003E; --waw-primitives-waw-pink-100: #54002E; /* Red */ --waw-primitives-waw-red-10: #FFEBEB; --waw-primitives-waw-red-20: #FFD4D4; --waw-primitives-waw-red-30: #FFA3A3; --waw-primitives-waw-red-40: #F97B7B; --waw-primitives-waw-red-50: #F14D4D; --waw-primitives-waw-red-60: #E10000; --waw-primitives-waw-red-70: #C50000; --waw-primitives-waw-red-80: #A80000; --waw-primitives-waw-red-90: #6F0000; --waw-primitives-waw-red-100: #520000; /* Blue */ --waw-primitives-waw-blue-10: #EBF7FF; --waw-primitives-waw-blue-20: #CFEAFA; --waw-primitives-waw-blue-30: #ACD9F5; --waw-primitives-waw-blue-40: #75BBE7; --waw-primitives-waw-blue-50: #45A0D9; --waw-primitives-waw-blue-60: #0074BC; --waw-primitives-waw-blue-70: #0066A5; --waw-primitives-waw-blue-80: #00578E; --waw-primitives-waw-blue-90: #003B5F; --waw-primitives-waw-blue-100: #002C48; /* Yellow */ --waw-primitives-waw-yellow-10: #FFFAE0; --waw-primitives-waw-yellow-20: #FFFDD0; --waw-primitives-waw-yellow-30: #FFFCAB; --waw-primitives-waw-yellow-40: #FFF06D; --waw-primitives-waw-yellow-50: #FFDA00; --waw-primitives-waw-yellow-60: #E2C100; --waw-primitives-waw-yellow-70: #C6A900; --waw-primitives-waw-yellow-80: #A99000; --waw-primitives-waw-yellow-90: #705F00; --waw-primitives-waw-yellow-100: #534700; /* Supporting */ --waw-primitives-waw-cart-border: #53A36A; --waw-primitives-waw-pill-hover: #DEDEDE; --waw-primitives-waw-focus-ring: #9DC9AD; --waw-primitives-waw-toast-warning-surface: #FDF6E9; --waw-primitives-waw-warning-dark: #8A6D00; --waw-colors-blue-blue-50: #0176D3; --waw-global-colors-blue-20: #032D60; --waw-global-colors-neutral-20: #2E2E2E; --waw-global-colors-red-90: #FEDED8; /* Salesforce */ --waw-primitives-sf-white-0: #FFFFFF; --waw-primitives-sf-color-blue-blue-500: #177EAB; --waw-primitives-sf-color-blue-blue-900: #116386; --waw-primitives-sf-color-gray-gray-100: #F7F9FA; --waw-primitives-sf-color-gray-gray-200: #EBEBEB; --waw-primitives-sf-color-gray-gray-300: #D9DFE7; --waw-primitives-sf-color-gray-grey-400: #C9C7C5; --waw-primitives-sf-color-gray-gray-500: #707275; --waw-primitives-sf-color-gray-gray-900: #1C1C1C; --waw-primitives-sf-color-gray-gray-1000: #080808; --waw-primitives-sf-error-700: #DA0000; --waw-primitives-sf-success-500: #0D825D; --waw-primitives-sf-warning-700: #EAB24B; /* Layer 1 — Typography primitives */ --waw-typography-family-brand: Glider, Roboto, Arial, sans-serif; --waw-typography-family-body: Roboto, Arial, sans-serif; --waw-typography-family-small-label: "DM Sans"; --waw-typography-style-normal: normal; --waw-typography-letter-spacing-none: 0px; /* Size */ --waw-typography-size-badge: 8px; --waw-typography-size-75: 9px; --waw-typography-size-neg-2: 10px; --waw-typography-size-help-icon: 11px; --waw-typography-size-100: 12px; --waw-typography-size-base: 13px; --waw-typography-size-200: 14px; --waw-typography-size-300: 16px; --waw-typography-size-18px: 18px; --waw-typography-size-400: 20px; --waw-typography-size-500: 24px; --waw-typography-size-600: 28px; --waw-typography-size-700: 32px; --waw-typography-size-logo-fallback: 34px; --waw-typography-size-800: 40px; --waw-typography-size-900: 48px; /* Line height */ --waw-typography-line-height-75: 12px; --waw-typography-line-height-base: 13px; --waw-typography-line-height-14px: 14px; --waw-typography-line-height-18px: 18px; --waw-typography-line-height-100: 16px; --waw-typography-line-height-200: 20px; --waw-typography-line-height-300: 24px; --waw-typography-line-height-400: 28px; --waw-typography-line-height-500: 32px; --waw-typography-line-height-600: 36px; --waw-typography-line-height-700: 40px; --waw-typography-line-height-800: 48px; --waw-typography-line-height-badge: 10px; /* Weight / tracking */ --waw-typography-weight-regular: 400; --waw-typography-weight-medium: 500; --waw-typography-weight-semibold: 600; --waw-typography-weight-bold: 700; --waw-typography-tracking-tight: -0.01em; --waw-typography-tracking-default: 0; --waw-typography-tracking-wide: 0.01em; /* Hierarchy */ --waw-typography-hierarchy-body-sm-size: var(--waw-typography-size-100); --waw-typography-hierarchy-body-sm-line-height: var(--waw-typography-line-height-100); --waw-typography-hierarchy-body-sm-weight: var(--waw-typography-weight-regular); --waw-typography-hierarchy-body-md-size: var(--waw-typography-size-200); --waw-typography-hierarchy-body-md-line-height: var(--waw-typography-line-height-200); --waw-typography-hierarchy-body-md-weight: var(--waw-typography-weight-regular); --waw-typography-hierarchy-body-lg-size: var(--waw-typography-size-300); --waw-typography-hierarchy-body-lg-line-height: var(--waw-typography-line-height-300); --waw-typography-hierarchy-body-lg-weight: var(--waw-typography-weight-regular); --waw-typography-hierarchy-heading-h1-size: var(--waw-typography-size-900); --waw-typography-hierarchy-heading-h1-line-height: var(--waw-typography-line-height-800); --waw-typography-hierarchy-heading-h1-weight: var(--waw-typography-weight-bold); --waw-typography-hierarchy-heading-h2-size: var(--waw-typography-size-800); --waw-typography-hierarchy-heading-h2-line-height: var(--waw-typography-line-height-700); --waw-typography-hierarchy-heading-h2-weight: var(--waw-typography-weight-bold); --waw-typography-hierarchy-heading-h3-size: var(--waw-typography-size-300); --waw-typography-hierarchy-heading-h3-line-height: var(--waw-typography-line-height-300); --waw-typography-hierarchy-heading-h3-weight: var(--waw-typography-weight-medium); --waw-typography-hierarchy-heading-h4-size: var(--waw-typography-size-500); --waw-typography-hierarchy-heading-h4-line-height: var(--waw-typography-line-height-400); --waw-typography-hierarchy-heading-h4-weight: var(--waw-typography-weight-semibold); --waw-typography-hierarchy-heading-h5-size: var(--waw-typography-size-400); --waw-typography-hierarchy-heading-h5-line-height: var(--waw-typography-line-height-300); --waw-typography-hierarchy-heading-h5-weight: var(--waw-typography-weight-semibold); --waw-typography-hierarchy-heading-h6-size: var(--waw-typography-size-300); --waw-typography-hierarchy-heading-h6-line-height: var(--waw-typography-line-height-200); --waw-typography-hierarchy-heading-h6-weight: var(--waw-typography-weight-medium); --waw-typography-hierarchy-label-sm-size: var(--waw-typography-size-100); --waw-typography-hierarchy-label-sm-line-height: var(--waw-typography-line-height-100); --waw-typography-hierarchy-label-sm-weight: var(--waw-typography-weight-medium); --waw-typography-hierarchy-label-md-size: var(--waw-typography-size-200); --waw-typography-hierarchy-label-md-line-height: var(--waw-typography-line-height-200); --waw-typography-hierarchy-label-md-weight: var(--waw-typography-weight-medium); --waw-typography-hierarchy-caption-size: var(--waw-typography-size-100); --waw-typography-hierarchy-caption-line-height: var(--waw-typography-line-height-100); --waw-typography-hierarchy-caption-weight: var(--waw-typography-weight-regular); /* Tokens added from develop (union with 6277) */ --waw-collection-1-searchbar: ; --waw-collection-1-viaproducts: false; --waw-colors-blue-blue-20: #032D60; --waw-colors-blue-blue-40: #0B5CAB; --waw-colors-blue-cloud-blue-60: #0D9DDA; --waw-colors-blue-cloud-blue-80: #90D0FE; --waw-colors-color-families-teal-teal-60: #06A59A; --waw-colors-neutral-neutral-10: #181818; --waw-colors-neutral-neutral-100-white: #FFFFFF; --waw-colors-neutral-neutral-30: #444444; --waw-colors-neutral-neutral-50: #747474; --waw-colors-neutral-neutral-60: #939393; --waw-colors-neutral-neutral-90: #E5E5E5; --waw-colors-neutral-neutral-95: #F3F3F3; --waw-font-android-family-brand: Roboto; --waw-font-android-letter-spacing-md: 0px; --waw-font-android-line-height-body-lg: 24px; --waw-font-android-size-body-lg: 16px; --waw-font-android-weight-medium: 500px; --waw-font-android-weight-regular: 400px; --waw-help-section-band-height: 404px; --waw-help-section-card-max-width: 676px; --waw-help-section-card-text-width: 298px; --waw-size-communication-preferences-card-height: 827px; --waw-size-communication-preferences-card-width: 512px; --waw-size-communication-preferences-notification-mobile-min-width: var( --waw-spacing-sizing-sizing-auth-content-mobile-232px ); --waw-size-communication-preferences-notification-mobile-width: var( --waw-spacing-sizing-sizing-311px ); --waw-size-communication-preferences-page-height: 1067px; --waw-size-communication-preferences-page-title-height: 176px; --waw-size-communication-preferences-page-width: var( --waw-spacing-sizing-sizing-22-1024px ); --waw-size-communication-preferences-save-button-height: 44px; --waw-size-communication-preferences-save-button-width: 179px; --waw-size-my-orders-date-filter-width: 142px; --waw-size-my-orders-search-width: 300px; --waw-size-people-account-popover-height: 296px; --waw-size-people-account-popover-offset: 80px; --waw-size-people-actions-menu-height: var( --waw-spacing-sizing-sizing-136px ); --waw-size-people-actions-menu-width: var( --waw-spacing-sizing-sizing-176px ); --waw-size-people-mobile-detail-row-width: 264px; --waw-size-people-search-field-height: 40px; --waw-size-people-table-column-trading: var( --waw-spacing-sizing-sizing-114px ); --waw-size-people-table-column-wide: var( --waw-spacing-sizing-sizing-140px ); --waw-specials-tile-aspect-ratio: 326 / 187; --waw-specials-tile-height: 187px; --waw-specials-tile-mobile-peek-width: 85vw; --waw-specials-tile-width: 326px; --waw-typography-font-weight-3: Light; /* Scale aliases */ --waw-typography-font-family-base: var(--waw-typography-family-brand); --waw-typography-font-family-body: var(--waw-typography-family-body); --waw-typography-font-family-mobile: var(--waw-typography-family-brand); --waw-typography-font-family-monospace: var(--waw-typography-family-brand); --waw-typography-font-scale-neg-2: var(--waw-typography-size-neg-2); --waw-typography-font-scale-neg-1: var(--waw-typography-size-100); --waw-typography-font-scale-base: var(--waw-typography-size-base); --waw-typography-font-scale-1: var(--waw-typography-size-200); --waw-typography-font-scale-2: var(--waw-typography-size-300); --waw-typography-font-scale-3: var(--waw-typography-size-400); --waw-typography-font-scale-4: var(--waw-typography-size-500); --waw-typography-font-scale-5: var(--waw-typography-size-600); --waw-typography-font-scale-6: var(--waw-typography-size-700); --waw-typography-font-scale-7: var(--waw-typography-size-800); --waw-typography-font-scale-8: var(--waw-typography-size-900); --waw-typography-font-weight-4: var(--waw-typography-weight-regular); --waw-typography-font-weight-6: var(--waw-typography-weight-medium); --waw-typography-font-weight-7: var(--waw-typography-weight-bold); /* Layer 1 — Space, size, radius */ /* Spacing scale */ --waw-spacing-sizing-spacing-0-0px: 0px; --waw-spacing-sizing-spacing-1-4px: 4px; --waw-spacing-sizing-spacing-2-8px: 8px; --waw-spacing-sizing-spacing-3-12px: 12px; --waw-spacing-sizing-spacing-4-16px: 16px; --waw-spacing-sizing-spacing-5-24px: 24px; --waw-spacing-sizing-spacing-6-32px: 32px; --waw-spacing-sizing-spacing-7-40px: 40px; --waw-spacing-sizing-spacing-8-48px: 48px; --waw-spacing-sizing-spacing-9-56px: 56px; --waw-spacing-sizing-spacing-10-64px: 64px; --waw-spacing-sizing-spacing-11-72px: 72px; --waw-spacing-sizing-spacing-12-80px: 80px; --waw-spacing-sizing-spacing-13-120px: 120px; --waw-spacing-sizing-spacing-6px: 6px; --waw-spacing-sizing-spacing-7px: 7px; --waw-spacing-sizing-spacing-9px: 9px; --waw-spacing-sizing-spacing-10px: 10px; --waw-spacing-sizing-spacing-11px: 11px; --waw-spacing-sizing-spacing-14px: 14px; --waw-spacing-sizing-spacing-18px: 18px; --waw-spacing-sizing-spacing-22px: 22px; --waw-spacing-sizing-spacing-34px: 34px; --waw-spacing-sizing-spacing-42px: 42px; --waw-spacing-sizing-spacing-43px: 43px; /* Spacing extras added for leftover layout px */ --waw-spacing-sizing-spacing-2px: 2px; --waw-spacing-sizing-spacing-3px: 3px; --waw-spacing-sizing-spacing-5px: 5px; --waw-spacing-sizing-spacing-20px: 20px; --waw-spacing-sizing-spacing-28px: 28px; --waw-spacing-sizing-spacing-30px: 30px; --waw-spacing-sizing-spacing-36px: 36px; --waw-spacing-sizing-spacing-44px: 44px; --waw-spacing-sizing-spacing-50px: 50px; --waw-spacing-sizing-spacing-76px: 76px; --waw-spacing-sizing-spacing-108px: 108px; /* Sizing scale */ --waw-spacing-sizing-sizing-1-2px: 2px; --waw-spacing-sizing-sizing-2-4px: 4px; --waw-spacing-sizing-sizing-3-8px: 8px; --waw-spacing-sizing-sizing-4-12px: 12px; /* WBST-7100 | clear-search glyph (Figma ~14). */ --waw-spacing-sizing-sizing-14px: 14px; /* WBST-7100 | Status 3 location-disabled glyph (15x15). */ --waw-spacing-sizing-sizing-15px: 15px; --waw-spacing-sizing-sizing-5-16px: 16px; --waw-spacing-sizing-sizing-6-20px: 20px; /* WBST-7100 | list store-pin width (Store Icons 23×32). */ --waw-spacing-sizing-sizing-23px: 23px; --waw-spacing-sizing-sizing-7-24px: 24px; --waw-spacing-sizing-sizing-8-28px: 28px; --waw-spacing-sizing-sizing-9-32px: 32px; --waw-spacing-sizing-sizing-10-48px: 48px; --waw-spacing-sizing-sizing-11-64px: 64px; --waw-spacing-sizing-sizing-12-80px: 80px; --waw-spacing-sizing-sizing-13-160px: 160px; --waw-spacing-sizing-sizing-14-240px: 240px; --waw-spacing-sizing-sizing-15-320px: 320px; --waw-spacing-sizing-sizing-16-480px: 480px; --waw-spacing-sizing-sizing-17-640px: 640px; --waw-spacing-sizing-sizing-18-1440px: 1440px; --waw-spacing-sizing-sizing-21-586px: 586px; --waw-spacing-sizing-sizing-22-1024px: 1024px; --waw-spacing-sizing-sizing-22-1026px: 1026px; --waw-spacing-sizing-sizing-23-382px: 382px; --waw-spacing-sizing-sizing-24-392px: 392px; --waw-spacing-sizing-sizing-25-610px: 610px; /* Sizing extras */ --waw-spacing-sizing-sizing-29px: 29px; --waw-spacing-sizing-sizing-36px: 36px; --waw-spacing-sizing-sizing-38px: 38px; --waw-spacing-sizing-sizing-44px: 44px; /* WBST-7100 | map W-pin height (standard 32×45). */ --waw-spacing-sizing-sizing-45px: 45px; --waw-spacing-sizing-sizing-46px: 46px; --waw-spacing-sizing-sizing-52px: 52px; --waw-spacing-sizing-sizing-56px: 56px; --waw-spacing-sizing-sizing-58px: 58px; --waw-spacing-sizing-sizing-60px: 60px; --waw-spacing-sizing-sizing-62px: 62px; --waw-spacing-sizing-sizing-73px: 73px; --waw-spacing-sizing-sizing-74px: 74px; --waw-spacing-sizing-sizing-82px: 82px; --waw-spacing-sizing-sizing-84px: 84px; --waw-spacing-sizing-sizing-88px: 88px; --waw-spacing-sizing-sizing-90px: 90px; --waw-spacing-sizing-sizing-92px: 92px; --waw-spacing-sizing-sizing-96px: 96px; --waw-spacing-sizing-sizing-100px: 100px; --waw-spacing-sizing-sizing-104px: 104px; --waw-spacing-sizing-sizing-114px: 114px; --waw-spacing-sizing-sizing-116px: 116px; --waw-spacing-sizing-sizing-120px: 120px; --waw-spacing-sizing-sizing-124px: 124px; --waw-spacing-sizing-sizing-128px: 128px; --waw-spacing-sizing-sizing-130px: 130px; --waw-spacing-sizing-sizing-134px: 134px; --waw-spacing-sizing-sizing-136px: 136px; --waw-spacing-sizing-sizing-140px: 140px; --waw-spacing-sizing-sizing-146px: 146px; --waw-spacing-sizing-sizing-150px: 150px; --waw-spacing-sizing-sizing-152px: 152px; --waw-spacing-sizing-sizing-160px: 160px; --waw-spacing-sizing-sizing-167px: 167px; --waw-spacing-sizing-sizing-168px: 168px; --waw-spacing-sizing-sizing-170px: 170px; --waw-spacing-sizing-sizing-172px: 172px; --waw-spacing-sizing-sizing-176px: 176px; --waw-spacing-sizing-sizing-184px: 184px; --waw-spacing-sizing-sizing-185px: 185px; --waw-spacing-sizing-sizing-190px: 190px; --waw-spacing-sizing-sizing-200px: 200px; --waw-spacing-sizing-sizing-208px: 208px; --waw-spacing-sizing-sizing-220px: 220px; --waw-spacing-sizing-sizing-222px: 222px; --waw-spacing-sizing-sizing-auth-content-mobile-232px: 232px; /* WBST-7100 | S14 map pin card width (Figma Hug ~243). */ --waw-spacing-sizing-sizing-243px: 243px; /* WBST-7114 | Rajavardhan Reddy: Figma 118257:46276 tablet Why-buy image slot is 274px wide, two pixels under the 276 store-locator token. */ --waw-spacing-sizing-sizing-274px: 274px; --waw-spacing-sizing-sizing-276px: 276px; --waw-spacing-sizing-sizing-280px: 280px; --waw-spacing-sizing-sizing-296px: 296px; --waw-spacing-sizing-sizing-auth-content-300px: 300px; --waw-spacing-sizing-sizing-311px: 311px; --waw-spacing-sizing-sizing-328px: 328px; /* WBST-7100 | Store Locator finder column outer width (Desktop 1440). */ --waw-spacing-sizing-sizing-332px: 332px; --waw-spacing-sizing-sizing-338px: 338px; --waw-spacing-sizing-sizing-340px: 340px; --waw-spacing-sizing-sizing-343px: 343px; /* WBST-7134: Create-list mobile Figma dialog is 344 wide. */ --waw-spacing-sizing-sizing-344px: 344px; --waw-spacing-sizing-sizing-352px: 352px; --waw-spacing-sizing-sizing-360px: 360px; --waw-spacing-sizing-sizing-375px: 375px; --waw-spacing-sizing-sizing-384px: 384px; --waw-spacing-sizing-sizing-396px: 396px; --waw-spacing-sizing-sizing-400px: 400px; --waw-spacing-sizing-sizing-412px: 412px; --waw-spacing-sizing-sizing-420px: 420px; --waw-spacing-sizing-sizing-500px: 500px; --waw-spacing-sizing-sizing-512px: 512px; --waw-spacing-sizing-sizing-544px: 544px; --waw-spacing-sizing-sizing-599px: 599px; --waw-spacing-sizing-sizing-608px: 608px; --waw-spacing-sizing-sizing-704px: 704px; --waw-spacing-sizing-sizing-725px: 725px; --waw-spacing-sizing-sizing-754px: 754px; --waw-spacing-sizing-sizing-768px: 768px; --waw-spacing-sizing-sizing-826px: 826px; --waw-spacing-sizing-sizing-874px: 874px; --waw-spacing-sizing-sizing-960px: 960px; --waw-spacing-sizing-spacing-19px: 19px; --waw-spacing-sizing-sizing-4-367px: 4.367px; --waw-spacing-sizing-sizing-7-433px: 7.433px; --waw-spacing-sizing-radius-border-2px: 2px; /* Sizing extras added for leftover layout px */ --waw-spacing-sizing-sizing-5px: 5px; --waw-spacing-sizing-sizing-8-25px: 8.25px; --waw-spacing-sizing-sizing-9-75px: 9.75px; --waw-spacing-sizing-sizing-18px: 18px; --waw-spacing-sizing-sizing-26px: 26px; --waw-spacing-sizing-sizing-27px: 27px; --waw-spacing-sizing-sizing-30px: 30px; --waw-spacing-sizing-sizing-31px: 31px; --waw-spacing-sizing-sizing-37-5px: 37.5px; --waw-spacing-sizing-sizing-50px: 50px; --waw-spacing-sizing-sizing-68px: 68px; --waw-spacing-sizing-sizing-72px: 72px; --waw-spacing-sizing-sizing-76px: 76px; --waw-spacing-sizing-sizing-78px: 78px; --waw-spacing-sizing-sizing-94px: 94px; --waw-spacing-sizing-sizing-99px: 99px; --waw-spacing-sizing-sizing-108px: 108px; --waw-spacing-sizing-sizing-112px: 112px; --waw-spacing-sizing-sizing-144px: 144px; --waw-spacing-sizing-sizing-156px: 156px; --waw-spacing-sizing-sizing-158px: 158px; --waw-spacing-sizing-sizing-171px: 171px; --waw-spacing-sizing-sizing-179px: 179px; --waw-spacing-sizing-sizing-180px: 180px; --waw-spacing-sizing-sizing-188px: 188px; --waw-spacing-sizing-sizing-196px: 196px; --waw-spacing-sizing-sizing-206px: 206px; --waw-spacing-sizing-sizing-254px: 254px; --waw-spacing-sizing-sizing-297px: 297px; --waw-spacing-sizing-sizing-304px: 304px; --waw-spacing-sizing-sizing-312px: 312px; --waw-spacing-sizing-sizing-336px: 336px; --waw-spacing-sizing-sizing-350px: 350px; --waw-spacing-sizing-sizing-380px: 380px; --waw-spacing-sizing-sizing-440px: 440px; --waw-spacing-sizing-sizing-516px: 516px; --waw-spacing-sizing-sizing-558px: 558px; --waw-spacing-sizing-sizing-559px: 559px; --waw-spacing-sizing-sizing-560px: 560px; --waw-spacing-sizing-sizing-580px: 580px; --waw-spacing-sizing-sizing-600px: 600px; --waw-spacing-sizing-sizing-676px: 676px; --waw-spacing-sizing-sizing-736px: 736px; --waw-spacing-sizing-sizing-743px: 743px; --waw-spacing-sizing-sizing-827px: 827px; --waw-spacing-sizing-sizing-860px: 860px; /* WBST-7100 | Store Locator desktop map height (Figma 1052×983). */ --waw-spacing-sizing-sizing-983px: 983px; /* WBST-7100 | Figma Store Finder content frame is 276×1020. */ --waw-spacing-sizing-sizing-1020px: 1020px; /* WBST-7100 | Figma map frame width at Desktop 1440. */ --waw-spacing-sizing-sizing-1052px: 1052px; --waw-spacing-sizing-sizing-1067px: 1067px; --waw-spacing-sizing-sizing-1080px: 1080px; /* WBST-7100 | Figma PLP Container is Hug 1116 (padding 48 + finder 1020 + padding 48). */ --waw-spacing-sizing-sizing-1116px: 1116px; --waw-spacing-sizing-sizing-1142px: 1142px; --waw-spacing-sizing-sizing-1148px: 1148px; --waw-spacing-sizing-sizing-1376px: 1376px; --waw-spacing-sizing-sizing-1600px: 1600px; /* Border width */ --waw-spacing-sizing-sizing-border-1-1px: 1px; --waw-spacing-sizing-sizing-border-1-5px: 1.5px; --waw-spacing-sizing-sizing-border-2-2px: 2px; --waw-spacing-sizing-sizing-border-3-3px: 3px; --waw-spacing-sizing-sizing-border-4-4px: 4px; /* Radius / layout */ --waw-spacing-sizing-radius-border-0-3px: 3px; --waw-spacing-sizing-radius-border-1-4px: 4px; --waw-spacing-sizing-radius-border-2-8px: 8px; --waw-spacing-sizing-radius-border-10px: 10px; --waw-spacing-sizing-radius-border-3-12px: 12px; --waw-spacing-sizing-radius-border-4-20px: 20px; --waw-spacing-sizing-radius-border-circle-9999px: 9999px; --waw-brand-type-and-size-border-radius-default: var(--waw-spacing-sizing-radius-border-2-8px); --waw-radius-button: 100px; --waw-radius-delivery-details-button: var(--waw-radius-button); --waw-radius-sm: 6px; --waw-radius-md: var(--waw-spacing-sizing-radius-border-2-8px); --waw-radius-input-field: var(--waw-spacing-sizing-radius-border-1-4px); --waw-radius-card: var(--waw-spacing-sizing-radius-border-1-4px); --waw-radius-pill: 9999px; --waw-size-lists-illustration: var(--waw-spacing-sizing-sizing-112px); --waw-size-lists-card-min-height: var(--waw-spacing-sizing-sizing-112px); /* WBST-7134: Figma Frame 37162 3stack items are 326 wide; title box is 64. */ --waw-size-lists-feature-column: var(--waw-specials-tile-width); --waw-size-lists-feature-title: var(--waw-spacing-sizing-sizing-11-64px); --waw-sizing-full: 100%; /* WBST-7776 | Rajavardhan Marikanti: hug content instead of filling the row (theme h2 width 100% would wrap Spend Reports headings). */ --waw-sizing-hug: auto; --waw-space-sm: var(--waw-spacing-sizing-spacing-2-8px); --waw-space-md: var(--waw-spacing-sizing-spacing-4-16px); /* WBST-8311 | Sanjana K.R: Figma Account Card --slds-g-spacing-5 / -4 around the Buy again and My lists overlay (header card nested inside). */ --waw-space-my-account-card: var(--waw-spacing-sizing-spacing-20px); --waw-space-my-account-card-stack: var(--waw-spacing-sizing-spacing-4-16px); --waw-size-my-account-buy-again-thumb: var(--waw-spacing-sizing-sizing-12-80px); --waw-space-checkout-panel-heading-gap: var(--waw-spacing-sizing-spacing-10px); --waw-styling-hooks-spacing-1-4px: var(--waw-spacing-sizing-spacing-1-4px); --waw-styling-hooks-spacing-3-12px: var(--waw-spacing-sizing-spacing-3-12px); --waw-styling-hooks-spacing-9-40px: var(--waw-spacing-sizing-spacing-7-40px); --waw-size-main-header-search-icon-mobile: var(--waw-spacing-sizing-sizing-26px); --waw-size-delivery-account-max-width: var(--waw-spacing-sizing-sizing-297px); --waw-size-delivery-content-width: var(--waw-spacing-sizing-sizing-350px); --waw-size-delivery-help-icon: var(--waw-spacing-sizing-sizing-5-16px); --waw-size-delivery-note-height: var(--waw-spacing-sizing-sizing-60px); --waw-size-delivery-note-edit-width: var(--waw-spacing-sizing-sizing-27px); --waw-size-card-scheme: var(--waw-spacing-sizing-sizing-27px); --waw-size-delivery-note-textarea-height: var(--waw-spacing-sizing-sizing-112px); --waw-size-delivery-map-height: var(--waw-spacing-sizing-sizing-206px); --waw-size-delivery-map-label-width: var(--waw-spacing-sizing-sizing-171px); --waw-size-delivery-map-label-stem-height: var(--waw-spacing-sizing-sizing-46px); /* WBST-7100 | Store Locator chrome sizes from Desktop 1440 Figma. Primitives above; aliases here so component CSS stays token-only. */ --waw-size-store-locator-page-width: var( --waw-spacing-sizing-sizing-18-1440px ); --waw-size-store-locator-heading-height: var( --waw-spacing-sizing-sizing-144px ); --waw-size-store-locator-section-height: var( --waw-spacing-sizing-sizing-1116px ); /* WBST-7100 | Figma PLP Container (Desktop 1440) is Fill × Hug 1116; padding spacing/8 (48) top/bottom, spacing/6 (32) left/right; finder–map gap spacing/8 (48). */ --waw-space-store-locator-page: var(--waw-spacing-sizing-spacing-6-32px); --waw-space-store-locator-section-top: var( --waw-spacing-sizing-spacing-8-48px ); --waw-space-store-locator-section-bottom: var( --waw-spacing-sizing-spacing-8-48px ); --waw-space-store-locator-columns: var(--waw-spacing-sizing-spacing-8-48px); /* WBST-7100 | no mobile/tablet Figma yet — small screens use spacing/4 (16) rather than copying 1440 padding onto a phone. */ --waw-space-store-locator-page-mobile: var( --waw-spacing-sizing-spacing-4-16px ); --waw-size-store-locator-title-height: var( --waw-spacing-sizing-sizing-11-64px ); --waw-size-store-locator-finder-width: var(--waw-spacing-sizing-sizing-276px); --waw-size-store-locator-finder-inner-width: var( --waw-spacing-sizing-sizing-276px ); --waw-size-store-locator-finder-height: var( --waw-spacing-sizing-sizing-1020px ); --waw-size-store-locator-input-height: var(--waw-spacing-sizing-sizing-56px); --waw-size-store-locator-list-max-height: var(--waw-spacing-sizing-sizing-512px); /* WBST-7100 | Figma typeahead panel is max 276×336 Hug — width matches the finder column; height grows with results then scrolls. */ --waw-size-store-locator-search-dropdown-max-width: var( --waw-spacing-sizing-sizing-276px ); --waw-size-store-locator-search-dropdown-max-height: var( --waw-spacing-sizing-sizing-336px ); --waw-space-store-locator-search-dropdown-padding: var( --waw-spacing-sizing-spacing-2-8px ); --waw-space-store-locator-search-dropdown-gap: var( --waw-spacing-sizing-spacing-1-4px ); --waw-radius-store-locator-search-dropdown: var( --waw-spacing-sizing-radius-border-2-8px ); --waw-shadow-store-locator-search-dropdown: var( --waw-tokens-elevation-softest ); --waw-size-store-locator-search-nav-item-height: var( --waw-spacing-sizing-spacing-7-40px ); --waw-space-store-locator-search-nav-item-padding-y: var( --waw-spacing-sizing-spacing-6px ); --waw-space-store-locator-search-nav-item-padding-x: var( --waw-spacing-sizing-spacing-4-16px ); --waw-space-store-locator-search-nav-item-gap: var( --waw-spacing-sizing-spacing-2-8px ); --waw-radius-store-locator-search-nav-item: var( --waw-spacing-sizing-radius-border-2-8px ); --waw-size-store-locator-card-width: var(--waw-spacing-sizing-sizing-243px); /* WBST-7100 | Figma map is 1052×983; finder is independently 276×1020. Do not equalise the two frames. */ --waw-size-store-locator-map-width: var(--waw-spacing-sizing-sizing-1052px); --waw-size-store-locator-map-min-height: var( --waw-spacing-sizing-sizing-983px ); /* WBST-7100 | mobile map is a fluid square (width 100% + aspect-ratio); height follows width. */ --waw-size-store-locator-map-min-height-mobile: var( --waw-spacing-sizing-sizing-600px ); --waw-size-store-locator-map-aspect-ratio-mobile: 1 / 1; --waw-size-store-locator-card-inset: var(--waw-spacing-sizing-sizing-9-32px); --waw-size-store-locator-icon-search: var(--waw-spacing-sizing-sizing-18px); --waw-spacing-sizing-sizing-14-6px: 14.6px; --waw-size-store-locator-icon-location: var(--waw-spacing-sizing-sizing-5-16px); --waw-size-store-locator-icon-location-glyph: var( --waw-spacing-sizing-sizing-14-6px ); --waw-size-store-locator-icon-location-denied: var( --waw-spacing-sizing-sizing-15px ); --waw-space-store-locator-location-gap: var( --waw-spacing-sizing-spacing-1-4px ); --waw-size-store-locator-icon-clear: var(--waw-spacing-sizing-sizing-7-24px); --waw-size-store-locator-icon-hit: var(--waw-spacing-sizing-sizing-7-24px); --waw-size-store-locator-list-pin-width: var(--waw-spacing-sizing-sizing-23px); --waw-size-store-locator-list-pin-height: var(--waw-spacing-sizing-sizing-9-32px); --waw-size-store-locator-spinner-width: var(--waw-spacing-sizing-sizing-58px); --waw-size-store-locator-spinner-height: var(--waw-spacing-sizing-sizing-62px); --waw-space-store-locator-loading-padding-top: var( --waw-spacing-sizing-spacing-8-48px ); --waw-size-store-locator-loading-min-height: var( --waw-spacing-sizing-sizing-112px ); /* WBST-7100 | rotate the static Figma dots into a spinner. */ --waw-duration-store-locator-spinner: 900ms; --waw-size-store-locator-map-pin-width: var(--waw-spacing-sizing-sizing-9-32px); --waw-size-store-locator-map-pin-height: var(--waw-spacing-sizing-sizing-45px); --waw-size-store-locator-hours-day: var(--waw-spacing-sizing-sizing-73px); --waw-size-store-locator-map-hours-day: var( --waw-spacing-sizing-sizing-73px ); /* WBST-7100 | Figma Store Finder auto-layout gap is spacing/5 (24). Location + View all rows are Hug-20. */ --waw-space-store-locator-finder-gap: var( --waw-spacing-sizing-spacing-5-24px ); --waw-size-store-locator-hug-20: var(--waw-typography-line-height-200); /* WBST-7100 | Figma View all row is 35.2 tall (pad 8+8 + label line 20). Chevron sits in a 16×16 box; glyph is 12×7. */ --waw-size-store-locator-view-all-row-height: 35.2px; --waw-size-store-locator-view-all-chevron-box: var( --waw-spacing-sizing-sizing-5-16px ); --waw-size-store-locator-view-all-chevron-width: var( --waw-spacing-sizing-sizing-4-12px ); --waw-size-store-locator-view-all-chevron-height: var( --waw-spacing-sizing-spacing-7px ); --waw-space-store-locator-heading-to-location: var( --waw-space-store-locator-finder-gap ); --waw-space-store-locator-location-to-search: var( --waw-space-store-locator-finder-gap ); --waw-space-store-locator-refine-to-list: var( --waw-space-store-locator-finder-gap ); --waw-space-store-locator-hours-to-view-all: var( --waw-spacing-sizing-spacing-3-12px ); /* WBST-7100 | Figma list scrollbar thumb (#A2A2A2). */ --waw-color-store-locator-scrollbar-thumb: var( --waw-primitives-waw-charcoal-55 ); --waw-size-store-locator-scrollbar-width: var( --waw-spacing-sizing-spacing-6px ); --waw-radius-store-locator-scrollbar: var(--waw-radius-sm); /* WBST-7100 | pin-to-details gap so address sits under the pin (Figma Woolloomooloo), not in the name column. */ --waw-space-store-locator-pin-to-details: var(--waw-space-sm); /* WBST-7100 | Figma type rows are Hug-20; lightning-input's default block margin was stacking on spacing/2 and doubling the gap. */ --waw-space-store-locator-filter-row: var( --waw-spacing-sizing-spacing-1-4px ); --waw-space-store-locator-icon-to-label: var(--waw-space-sm); --waw-space-store-locator-search-to-rule: var( --waw-space-store-locator-finder-gap ); --waw-space-store-locator-rule-to-filters: var( --waw-space-store-locator-finder-gap ); --waw-space-store-locator-refine-to-facilities: var( --waw-space-store-locator-finder-gap ); /* WBST-7100 | Figma body text (font/family/body, weight 400, font/scale/1, line-height sizing/6 = 20px). Content only — filter labels, store address / facility items, counts — never store-name headings. */ --waw-font-store-locator-body-family: var(--waw-typography-font-family-body); --waw-font-store-locator-body-size: var(--waw-typography-font-scale-1); --waw-font-store-locator-body-weight: var(--waw-typography-weight-regular); --waw-font-store-locator-body-line-height: var( --waw-spacing-sizing-sizing-6-20px ); /* Body bold scale/1 / sizing/6 — Open today + weekday day labels. */ --waw-font-store-locator-body-bold-family: var( --waw-typography-font-family-body ); --waw-font-store-locator-body-bold-size: var(--waw-typography-font-scale-1); --waw-font-store-locator-body-bold-weight: var(--waw-typography-weight-bold); --waw-font-store-locator-body-bold-line-height: var( --waw-spacing-sizing-sizing-6-20px ); /* Store name — font/family/base Bold font/scale/2 / sizing/7 (24). */ --waw-font-store-locator-store-name-family: var( --waw-typography-font-family-base ); --waw-font-store-locator-store-name-size: var(--waw-typography-font-scale-2); --waw-font-store-locator-store-name-weight: var(--waw-typography-weight-bold); --waw-font-store-locator-store-name-line-height: var( --waw-spacing-sizing-sizing-7-24px ); /* List Facilities heading — body Bold font/scale/2 / sizing/7 (24). */ --waw-font-store-locator-facilities-heading-family: var( --waw-typography-font-family-body ); --waw-font-store-locator-facilities-heading-size: var( --waw-typography-font-scale-2 ); --waw-font-store-locator-facilities-heading-weight: var( --waw-typography-weight-bold ); --waw-font-store-locator-facilities-heading-line-height: var( --waw-spacing-sizing-sizing-7-24px ); /* WBST-7100 | S14 map card body (address/phone/hours/ facility items) — font/family/body Regular font/scale/neg-1 / sizing/5. */ --waw-font-store-locator-map-card-body-family: var( --waw-typography-font-family-body ); --waw-font-store-locator-map-card-body-size: var( --waw-typography-font-scale-neg-1 ); --waw-font-store-locator-map-card-body-weight: var( --waw-typography-weight-regular ); --waw-font-store-locator-map-card-body-line-height: var( --waw-spacing-sizing-sizing-5-16px ); /* S14 map Facilities heading — font/family/base Bold scale/neg-1 / sizing/5. */ --waw-font-store-locator-map-facilities-heading-family: var( --waw-typography-font-family-base ); --waw-font-store-locator-map-facilities-heading-size: var( --waw-typography-font-scale-neg-1 ); --waw-font-store-locator-map-facilities-heading-weight: var( --waw-typography-weight-bold ); --waw-font-store-locator-map-facilities-heading-line-height: var( --waw-spacing-sizing-sizing-5-16px ); /* Figma Icon/icon-subtle for the S14 card close glyph. */ --waw-tokens-icon-icon-subtle: var(--waw-primitives-waw-charcoal-80); --waw-color-icon-subtle: var(--waw-tokens-icon-icon-subtle); --waw-space-store-locator-map-card-close-inset: var( --waw-spacing-sizing-sizing-border-1-1px ); /* Division count shares the same body text recipe as filter labels. */ --waw-font-store-locator-count-family: var( --waw-font-store-locator-body-family ); --waw-font-store-locator-count-size: var(--waw-font-store-locator-body-size); --waw-font-store-locator-count-weight: var( --waw-font-store-locator-body-weight ); --waw-font-store-locator-count-line-height: var( --waw-font-store-locator-body-line-height ); /* WBST-7100 | Figma "Refine your search" is Medium (500), not Regular body. */ --waw-font-store-locator-refine-weight: var( --waw-typography-weight-medium ); /* WBST-7100 | address → phone gap (list tile + S14 card). spacing/2 — was lost when component margin:0 overrode slds-m-top_*. */ --waw-space-store-locator-address-to-phone: var( --waw-spacing-sizing-spacing-2-8px ); /* WBST-7100 | S14 W-pin overlaps the card bottom (Figma): the pin's round head (a circle the width of the pin) sits ON the card and only the teardrop tip protrudes below the card edge. Tip length = pin height − pin width (45 − 32 = 13px), so the card bottom sits exactly a tip-length above the pin tip and the whole head lands on the card. */ --waw-space-store-locator-card-to-pin: calc( var(--waw-size-store-locator-map-pin-height) - var(--waw-size-store-locator-map-pin-width) ); /* WBST-7100 | S14 Sunday hours → Facilities section gap. */ --waw-space-store-locator-hours-to-facilities: var( --waw-spacing-sizing-spacing-5-24px ); /* WBST-7100 | S14 card padding + block gap (Figma auto-layout: 24 top / 16 sides / 32 bottom, 8px gap between blocks). */ --waw-space-store-locator-card-padding-block-start: var( --waw-spacing-sizing-spacing-5-24px ); --waw-space-store-locator-card-padding-inline: var( --waw-spacing-sizing-spacing-4-16px ); --waw-space-store-locator-card-padding-block-end: var( --waw-spacing-sizing-spacing-6-32px ); --waw-space-store-locator-card-gap: var(--waw-spacing-sizing-spacing-2-8px); --waw-z-index-store-locator-map-overlay: 2; --waw-shadow-store-locator-card: var(--waw-tokens-elevation-elevation-4); --waw-outline-offset-inset: -1px; --waw-aspect-ratio-square: 1 / 1; --waw-aspect-ratio-delivery-map: 175 / 103; --waw-position-delivery-map-marker-center: 50%; --waw-position-delivery-map-label-top: var(--waw-spacing-sizing-sizing-29px); --waw-flex-shrink-none: 0; /* WBST-7134: Figma 97596:51919 page title hugs content; DXP h1 otherwise grows to 100%. */ --waw-flex-grow-none: 0; /* WBST-7134: Figma Frame 37163 Header,Body fills the row beside the 112 illustration. */ --waw-flex-grow-fill: 1; /* WBST-7776 | Rajavardhan Marikanti: shared 50% origin for tooltip caret centering. */ --waw-position-center: 50%; --waw-translate-center-x: translateX(calc(-1 * var(--waw-position-center))); /* WBST-7776 | Rajavardhan Marikanti: chart baseline sits above dashed gridlines. */ --waw-z-index-baseline: 1; /* WBST-9533 | Rajavardhan Reddy Marikanti: one step above baseline, for a trigger or list that must sit over its own click-away layer. */ --waw-z-index-raised: 2; --waw-z-index-local: 6; --waw-z-index-dropdown: 9000; --waw-z-index-notification: 10000; /* WBST-7776 | Rajavardhan Marikanti: above back-to-top (99999) so the Spend Reports mobile filter sheet stays tappable while scrolling. */ --waw-z-index-overlay: 100000; --waw-duration-notification: 7000ms; --waw-size-screen-height: 100vh; /* WBST-7776 | Rajavardhan Marikanti: viewport width for the mobile chart ease. */ --waw-size-screen-width: 100vw; --waw-opacity-disabled: 0.6; --waw-opacity-unavailable: 0.4; /* WBST-9533 | Rajavardhan Reddy Marikanti: disabled panel CTA in Figma is half opacity, lighter than the 0.6 general disabled state. */ --waw-opacity-cta-disabled: 0.5; /* WBST-9533 | Rajavardhan Reddy Marikanti: a grid column that fills its share but can shrink below its content, so long text cannot overflow. */ --waw-grid-track-fill: minmax(0, 1fr); /* Layer 2 — Semantic tokens (custom LWC CSS) */ /* Text */ --waw-tokens-text-text-brand-dark: var(--waw-primitives-waw-apple-100); --waw-tokens-text-text-default: var(--waw-primitives-waw-charcoal-100); --waw-tokens-text-text-error: var(--waw-primitives-waw-red-70); --waw-tokens-text-text-error-strong: var(--waw-primitives-waw-red-80); --waw-tokens-text-text-link: var(--waw-primitives-waw-rocket-100); /* Figma Text/text-heading is rocket-100; alias so carousel copy can bind without a raw hex. */ --waw-tokens-text-text-heading: var(--waw-primitives-waw-rocket-100); --waw-tokens-text-text-link-hover: var(--waw-primitives-waw-charcoal-100); --waw-tokens-text-text-muted-dark: var(--waw-primitives-waw-grey-100); --waw-tokens-text-text-promotion: var(--waw-primitives-waw-apple-70); --waw-tokens-text-text-strong: var(--waw-primitives-sf-color-gray-gray-900); --waw-tokens-text-text-subtle: var(--waw-primitives-waw-charcoal-80); --waw-tokens-text-text-weak: var(--waw-primitives-sf-color-gray-gray-500); --waw-tokens-text-text-white: var(--waw-primitives-white-0); /* Border */ --waw-tokens-border-border-brand-dark: var(--waw-primitives-waw-rocket-100); --waw-tokens-border-border-dark: var(--waw-primitives-waw-charcoal-100); /* WBST-7161 | Rajavardhan Marikanti: disabled preference controls use the dedicated Figma charcoal-40 border instead of the enabled input border. */ --waw-tokens-border-border-disabled: var(--waw-primitives-waw-charcoal-40); --waw-tokens-border-border-error: var(--waw-primitives-waw-red-70); --waw-tokens-border-border-error-light: var(--waw-primitives-waw-red-20); --waw-tokens-border-border-error-mid: var(--waw-primitives-waw-red-30); --waw-tokens-border-border-focus: var(--waw-colors-blue-blue-50); --waw-tokens-border-border-focus-ring: var(--waw-primitives-waw-focus-ring); --waw-tokens-border-border-info: var(--waw-primitives-waw-blue-30); --waw-tokens-border-border-input: var(--waw-primitives-waw-charcoal-60); --waw-tokens-border-border-light: var(--waw-primitives-waw-charcoal-30); --waw-tokens-border-border-medium: var(--waw-primitives-waw-charcoal-70); --waw-tokens-border-border-muted: var(--waw-primitives-waw-charcoal-50); --waw-tokens-border-border-success: var(--waw-primitives-waw-apple-50); /* Layer 2 — Semantic tokens (custom LWC CSS) */ /* WBST-7114 | Rajavardhan Reddy: Why-buy collage 118257:47690 — rings plus the three WhyBuy CMS cards, using unrotated card size and Figma rotation so CMS fills land in the published AABBs. */ --waw-gift-card-collage-frame-width: 470px; --waw-gift-card-collage-outer-top: 33px; --waw-gift-card-collage-outer-left: 87.49px; --waw-gift-card-collage-outer-size: 314px; --waw-gift-card-collage-inner-top: 56.29px; --waw-gift-card-collage-inner-left: 110.78px; --waw-gift-card-collage-inner-size: 267.42px; --waw-gift-card-collage-back-top: 168.94px; --waw-gift-card-collage-back-left: 144.8px; --waw-gift-card-collage-back-width: 234.93px; --waw-gift-card-collage-back-height: 145.7px; --waw-gift-card-collage-back-rotate: -15deg; --waw-gift-card-collage-middle-top: 131.34px; --waw-gift-card-collage-middle-left: 119.13px; --waw-gift-card-collage-middle-width: 250.84px; --waw-gift-card-collage-middle-height: 155.57px; --waw-gift-card-collage-middle-rotate: -30deg; --waw-gift-card-collage-front-top: 100.91px; --waw-gift-card-collage-front-left: 86.02px; --waw-gift-card-collage-front-width: 238.93px; --waw-gift-card-collage-front-height: 148.48px; --waw-gift-card-collage-front-rotate: -45deg; --waw-gift-card-collage-card-radius: 6.90109920501709px; --waw-gift-card-collage-card-shadow: 2.587912082672119px 3.450549602508545px 10.006593704223633px 0px rgba(0, 0, 0, 0.25); /* WBST-7114 | Rajavardhan Reddy: Figma 118257:46276 tablet Two Column Image slot is 274x200, so the collage frame must not keep the 470 desktop width. */ --waw-gift-card-collage-tablet-frame-width: var( --waw-spacing-sizing-sizing-274px ); /* WBST-7114 | Rajavardhan Reddy: exact 200px tablet collage geometry from Figma 118257:47811. Card dimensions are converted from Figma's rotated bounds to their unrotated 560:348 image boxes before CSS rotate. */ --waw-gift-card-collage-tablet-outer-top: 8.24px; --waw-gift-card-collage-tablet-outer-left: 51px; --waw-gift-card-collage-tablet-outer-size: 183.055px; --waw-gift-card-collage-tablet-inner-top: 21.82px; --waw-gift-card-collage-tablet-inner-left: 64.58px; --waw-gift-card-collage-tablet-inner-size: 155.899px; --waw-gift-card-collage-tablet-back-top: 87.485858px; --waw-gift-card-collage-tablet-back-left: 84.419024px; --waw-gift-card-collage-tablet-back-width: 136.953px; --waw-gift-card-collage-tablet-back-height: 84.942px; --waw-gift-card-collage-tablet-middle-top: 65.561404px; --waw-gift-card-collage-tablet-middle-left: 69.448148px; --waw-gift-card-collage-tablet-middle-width: 146.227px; --waw-gift-card-collage-tablet-middle-height: 90.694px; --waw-gift-card-collage-tablet-front-top: 47.882801px; --waw-gift-card-collage-tablet-front-left: 50.093301px; --waw-gift-card-collage-tablet-front-width: 139.397px; --waw-gift-card-collage-tablet-front-height: 86.458px; --waw-gift-card-collage-tablet-card-radius: 4.023px; --waw-gift-card-collage-tablet-card-shadow: 1.509px 2.012px 5.834px 0px rgba(0, 0, 0, 0.25); /* WBST-7114 | Rajavardhan Reddy: exact 185px mobile collage geometry from Figma 118257:47877. Card dimensions are converted from Figma's rotated bounds to their unrotated 560:348 image boxes before CSS rotate. */ --waw-gift-card-collage-mobile-outer-top: -0.41px; --waw-gift-card-collage-mobile-outer-left: 51.94px; --waw-gift-card-collage-mobile-outer-size: 186.4px; --waw-gift-card-collage-mobile-inner-top: 13.42px; --waw-gift-card-collage-mobile-inner-left: 65.76px; --waw-gift-card-collage-mobile-inner-size: 158.74px; --waw-gift-card-collage-mobile-back-top: 80.22834235098671px; --waw-gift-card-collage-mobile-back-left: 86.00417159928897px; --waw-gift-card-collage-mobile-back-width: 139.36165680142207px; --waw-gift-card-collage-mobile-back-height: 86.60331529802657px; --waw-gift-card-collage-mobile-middle-top: 57.90045323945048px; --waw-gift-card-collage-mobile-middle-left: 70.76762590256401px; --waw-gift-card-collage-mobile-middle-width: 148.78474819487198px; --waw-gift-card-collage-mobile-middle-height: 92.45909352109902px; --waw-gift-card-collage-mobile-front-top: 39.89905588625374px; --waw-gift-card-collage-mobile-front-left: 51.06123935718992px; --waw-gift-card-collage-mobile-front-width: 141.83752128562017px; --waw-gift-card-collage-mobile-front-height: 88.14188822749253px; --waw-gift-card-collage-mobile-card-radius: 4.096611976623535px; --waw-gift-card-collage-mobile-card-shadow: 1.5362293720245361px 2.0483059883117676px 5.94008731842041px 0px rgba(0, 0, 0, 0.25); /* WBST-7114 | Rajavardhan Reddy: Gift Card two-column hero media is 624x380. */ --waw-aspect-ratio-two-column-media: 624 / 380; /* WBST-7114 | Rajavardhan Reddy: alias the fill unit so Gift Card CSS never inlines 1 for flex-shrink or overlapping carousel grid lines. */ --waw-flex-shrink-fill: var(--waw-flex-grow-fill); --waw-grid-line-start: var(--waw-flex-grow-fill); /* Surface */ --waw-tokens-surface-surface-accent: var(--waw-primitives-waw-technicado-100); --waw-tokens-surface-surface-accent-light: var(--waw-primitives-waw-technicado-40); --waw-tokens-surface-surface-accent-lightest: var(--waw-primitives-waw-technicado-20); --waw-tokens-surface-surface-background-grey: var(--waw-primitives-waw-charcoal-10); --waw-tokens-surface-surface-background-subtle: var(--waw-primitives-waw-charcoal-20); --waw-tokens-surface-surface-background-white: var(--waw-primitives-white-0); --waw-tokens-surface-surface-brand: var(--waw-primitives-waw-rocket-100); --waw-tokens-surface-surface-brand-light: var(--waw-primitives-waw-technicado-30); --waw-tokens-surface-surface-background-brand-dark: var(--waw-tokens-surface-surface-brand); --waw-tokens-surface-surface-background-brand-subtle: var(--waw-primitives-waw-technicado-40); --waw-tokens-surface-surface-error-light: var(--waw-primitives-waw-red-10); --waw-tokens-surface-surface-info-light: var(--waw-primitives-waw-blue-10); --waw-tokens-surface-surface-special: var(--waw-primitives-waw-pink-60); --waw-tokens-surface-surface-success-mid: var(--waw-primitives-waw-apple-30); --waw-tokens-surface-surface-warning-light: var(--waw-primitives-waw-yellow-10); --waw-tokens-surface-surface-warning-mid: var(--waw-primitives-waw-yellow-40); --waw-tokens-surface-surface-white: var(--waw-tokens-surface-surface-background-white); /* Buttons */ --waw-tokens-buttons-button-cart: var(--waw-primitives-waw-technicado-100); --waw-tokens-buttons-button-cart-border: var(--waw-primitives-waw-cart-border); --waw-tokens-buttons-button-cart-hover: var(--waw-primitives-waw-technicado-110); --waw-tokens-buttons-button-disabled: var(--waw-primitives-waw-charcoal-40); --waw-tokens-buttons-button-primary: var(--waw-primitives-waw-rocket-100); --waw-tokens-buttons-button-primary-hover: var(--waw-primitives-waw-rocket-80); --waw-tokens-buttons-button-secondary-hover: var(--waw-primitives-waw-technicado-100); --waw-tokens-buttons-button-tertiary-hover: var(--waw-primitives-waw-apple-70); /* Icon, pills, status */ --waw-tokens-icon-brand: var(--waw-primitives-waw-apple-70); --waw-tokens-icon-brand-dark: var(--waw-primitives-waw-rocket-100); --waw-tokens-icon-on-dark: var(--waw-primitives-white-0); --waw-tokens-icon-warning: var(--waw-primitives-waw-yellow-90); --waw-tokens-pills-pill-dark: var(--waw-primitives-waw-charcoal-80); --waw-tokens-pills-pill-light: var(--waw-primitives-waw-charcoal-30); --waw-tokens-pills-pill-light-hover: var(--waw-primitives-waw-pill-hover); --waw-tokens-pills-pill-saving: var(--waw-tokens-surface-surface-special); --waw-tokens-status-info: var(--waw-primitives-waw-blue-60); --waw-tokens-status-previously-toasts-error: var(--waw-primitives-waw-red-60); --waw-tokens-status-previously-toasts-success: var(--waw-primitives-waw-apple-70); --waw-tokens-status-previously-toasts-warning: var(--waw-primitives-waw-yellow-50); --waw-tokens-stepper: 1px; /* Elevation / overlay */ --waw-tokens-elevation-account-menu: 0 10px 20px #0000001F; --waw-tokens-elevation-drawer: 8px 0 24px #00000024; --waw-tokens-elevation-dropdown: 0 10px 26px #00000024; --waw-tokens-elevation-elevation-1: 0 0 2px 0 #18181814, 0 4px 4px 0 #0000000D; --waw-tokens-elevation-elevation-2: 0px 8px 16px -2px #1818180F, 0px 2px 8px -2px #1818180F; --waw-tokens-elevation-elevation-4: 0px 24px 48px -4px #18181833; --waw-tokens-elevation-filter-drawer: 11px 0 32px -4px #1818180A; --waw-tokens-elevation-footer: 0px -7px 14px -2px #1818180A; --waw-tokens-elevation-header-sticky: 0 4px 12px #00000014; --waw-tokens-elevation-mobile-nav-drawer: 12px 0 24px #00000029; --waw-tokens-elevation-popover: 0 4px 16px #0000001F; --waw-tokens-elevation-card-hover: 0 2px 6px #0000000F; --waw-tokens-elevation-back-to-top: 0 2px 4px #1818180F, 0 8px 8px #1818180F; --waw-tokens-elevation-qty-control: 0 2px 8px -2px #1818180F, 0 0 16px -2px #1818180F; --waw-tokens-elevation-sort-menu: 0 8px 24px #00000024; --waw-tokens-elevation-minicart-summary: 0 -8px 3.5px #1818180A; --waw-tokens-elevation-mobile-atc-bar: 0 -7px 7px #1818180A; --waw-tokens-elevation-softest: 0px 16px 32px -4px #1818180A, 0px -11px 12px -4px #1818180A; /* WBST-7134: Create-list Figma modal has no elevation. */ --waw-shadow-none: none; --waw-tokens-scrim-backdrop: #00000059; --waw-tokens-system-black-transparent-16: #1C1C1C29; --waw-tokens-system-black-transparent-20: #1C1C1C33; --waw-tokens-system-black-transparent-50: #1C1C1C80; /* Figma Core scrim is system/black-transparent-60. scrim-backdrop and black-transparent-50 are different alphas. */ --waw-tokens-system-black-transparent-60: #1C1C1C99; /* Toast */ --waw-tokens-toast-button-hover: var(--waw-primitives-waw-apple-90); --waw-tokens-toast-button-text-color: var(--waw-tokens-text-text-white); --waw-tokens-toast-close-color: var(--waw-tokens-text-text-default); --waw-tokens-toast-description-color: var(--waw-tokens-text-text-subtle); --waw-tokens-toast-error-accent: var(--waw-primitives-sf-error-700); --waw-tokens-toast-error-icon: var(--waw-primitives-sf-error-700); --waw-tokens-toast-error-link: var(--waw-primitives-sf-error-700); --waw-tokens-toast-error-surface: var(--waw-global-colors-red-90); --waw-tokens-toast-info-accent: var(--waw-primitives-waw-blue-70); --waw-tokens-toast-info-icon: var(--waw-primitives-waw-blue-70); --waw-tokens-toast-info-link: var(--waw-primitives-waw-blue-80); --waw-tokens-toast-info-surface: var(--waw-primitives-waw-blue-10); --waw-tokens-toast-link-color: var(--waw-tokens-text-text-link); --waw-tokens-toast-plain-accent: var(--waw-primitives-waw-charcoal-100); --waw-tokens-toast-plain-surface: var(--waw-primitives-waw-charcoal-20); --waw-tokens-toast-radius: var(--waw-spacing-sizing-radius-border-2-8px); --waw-tokens-toast-shadow: var(--waw-tokens-elevation-elevation-1); --waw-tokens-toast-success-accent: var(--waw-primitives-waw-apple-80); --waw-tokens-toast-success-icon: var(--waw-primitives-waw-apple-70); --waw-tokens-toast-success-surface: var(--waw-primitives-waw-technicado-30); --waw-tokens-toast-title-color: var(--waw-tokens-text-text-default); --waw-tokens-toast-warning-accent: var(--waw-primitives-sf-warning-700); --waw-tokens-toast-warning-button-text: var(--waw-tokens-text-text-default); --waw-tokens-toast-warning-icon: var(--waw-primitives-sf-warning-700); --waw-tokens-toast-warning-surface: var(--waw-primitives-waw-toast-warning-surface); --waw-toast-inline-min-height: auto; /* Layer 2 — Short aliases */ --waw-color-border: var(--waw-tokens-border-border-light); --waw-color-border-divider: var(--waw-primitives-waw-charcoal-60); --waw-color-border-input: var(--waw-tokens-border-border-input); --waw-color-brand-primary: var(--waw-tokens-buttons-button-primary); --waw-color-brand-primary-hover: var(--waw-tokens-buttons-button-primary-hover); --waw-color-brand-primary-light: var(--waw-primitives-waw-rocket-10); --waw-color-error: var(--waw-tokens-status-previously-toasts-error); --waw-color-focus-ring: var(--waw-tokens-border-border-focus-ring); --waw-color-focus-ring-brand: var(--waw-primitives-waw-rocket-100-20); --waw-color-link: var(--waw-tokens-text-text-link); --waw-color-link-spend-reports-about: var(--waw-tokens-text-text-link); --waw-color-notification-success-background: var(--waw-tokens-toast-success-surface); --waw-color-notification-success-timer: var(--waw-tokens-toast-success-accent); --waw-color-success: var(--waw-tokens-text-text-promotion); --waw-color-surface-alt: var(--waw-tokens-surface-surface-background-grey); --waw-color-surface-base: var(--waw-tokens-surface-surface-background-white); /* WBST-7100 | Store Locator map reload / pre-tile fill. */ --waw-color-store-locator-map-canvas: var(--waw-primitives-waw-maps-canvas); --waw-color-text-inverse: var(--waw-tokens-text-text-white); --waw-color-text-primary: var(--waw-tokens-text-text-default); --waw-color-text-subtle: var(--waw-tokens-text-text-subtle); /* WBST-7134: Favourite chip on List of Lists (Figma #BCF2CB / #024A1F). */ --waw-color-tag-subtle-background: var(--waw-tokens-surface-surface-accent); --waw-color-tag-subtle-text: var(--waw-color-brand-primary); --waw-color-warning: var(--waw-tokens-status-previously-toasts-warning); --waw-color-warning-dark: var(--waw-primitives-waw-warning-dark); --waw-color-warning-light: var(--waw-tokens-surface-surface-warning-light); --waw-color-refund-selected-bg: var(--waw-primitives-waw-blue-20); --waw-color-refund-selected-border: var(--waw-primitives-waw-blue-60); --waw-color-refund-existing-bg: var(--waw-primitives-waw-blue-10); --waw-color-refund-existing-border: var(--waw-primitives-waw-blue-50); /* WBST-6544 | avashistha-alt: caps the refund line Name column - a long product name otherwise stretches the table past the viewport instead of truncating. */ --waw-size-refund-line-name-max: 220px; /* Layer 3 — SLDS */ --slds-g-color-border-base-1: var(--waw-color-border); --slds-g-color-brand-base-50: var(--waw-color-brand-primary); --slds-g-color-brand-base-60: var(--waw-color-brand-primary-hover); --slds-g-color-error-base-40: var(--waw-color-error); --slds-g-color-neutral-base-10: var(--waw-color-surface-base); --slds-g-color-neutral-base-20: var(--waw-color-surface-alt); --slds-g-color-neutral-base-95: var(--waw-color-text-primary); --slds-g-color-neutral-base-100: var(--waw-color-text-primary); --slds-g-color-success-base-50: var(--waw-color-success); --slds-g-color-warning-base-50: var(--waw-color-warning); --slds-g-font-family: var(--waw-typography-font-family-body); --slds-g-font-scale-neg-1: var(--waw-typography-font-scale-neg-1); --slds-g-font-scale-1: var(--waw-typography-font-scale-1); --slds-g-font-scale-2: var(--waw-typography-font-scale-2); --slds-g-font-scale-3: var(--waw-typography-font-scale-3); --slds-g-font-scale-4: var(--waw-typography-font-scale-4); --slds-g-font-scale-5: var(--waw-typography-font-scale-5); --slds-g-font-scale-6: var(--waw-typography-font-scale-6); --slds-g-font-scale-7: var(--waw-typography-font-scale-7); --slds-g-font-scale-8: var(--waw-typography-font-scale-8); --slds-g-font-weight-4: var(--waw-typography-font-weight-4); --slds-g-font-weight-6: var(--waw-typography-font-weight-6); --slds-g-font-weight-7: var(--waw-typography-font-weight-7); --slds-c-badge-radius-border: var(--waw-radius-md); --slds-c-button-brand-color-background: var(--waw-color-brand-primary); --slds-c-button-brand-color-background-hover: var(--waw-color-brand-primary-hover); --slds-c-button-brand-color-border: var(--waw-color-brand-primary); --slds-c-button-brand-color-border-hover: var(--waw-color-brand-primary-hover); --slds-c-button-brand-text-color: var(--waw-color-text-inverse); --slds-c-card-color-background: var(--waw-color-surface-base); --slds-c-card-radius-border: var(--waw-radius-md); --slds-c-input-radius-border: var(--waw-radius-md); --slds-c-link-text-color: var(--waw-color-link); --slds-c-textarea-color-background: var(--waw-color-surface-base); --slds-c-textarea-color-border: var(--waw-color-border-input); --slds-c-textarea-radius-border: var(--waw-radius-input-field); --slds-c-textarea-sizing-min-height: var(--waw-size-delivery-note-textarea-height); /* Monthly spend chart geometry from the desktop Figma specification */ --waw-spend-chart-grid-dash-length: 2.1px; --waw-spend-chart-grid-dash-cycle: 4.2px; --waw-spend-chart-columns-height: 307px; --waw-spend-chart-columns-width: 669px; --waw-spend-chart-columns-offset-y: -267px; --waw-spend-chart-mobile-columns-offset-y: -153px; --waw-spend-chart-bar-plot-height: 201px; --waw-spend-chart-tablet-columns-width: 509px; --waw-spend-chart-mobile-bar-plot-height: 160px; --waw-spend-chart-mobile-columns-height: 185px; /* WBST-7776 | Rajavardhan Marikanti: axis inset is Figma 43 + 8; mobile eases from 375 to 350 so the last bar stays inside the card. */ --waw-spend-chart-axis-inset: calc( var(--waw-spacing-sizing-spacing-43px) + var(--waw-spacing-sizing-spacing-2-8px) ); --waw-spend-chart-mobile-columns-min-inset: var( --waw-spacing-sizing-spacing-30px ); --waw-spend-chart-mobile-ease-min-width: var( --waw-spacing-sizing-sizing-350px ); --waw-spend-chart-mobile-ease-max-width: var( --waw-spacing-sizing-sizing-375px ); --waw-spend-tooltip-caret-clip: polygon( var(--waw-spacing-sizing-spacing-0-0px) var(--waw-spacing-sizing-spacing-0-0px), var(--waw-sizing-full) var(--waw-spacing-sizing-spacing-0-0px), var(--waw-position-center) var(--waw-sizing-full) ); /* WBST-7237 | Aneesh Singh: Menu Plan & Order (recipe) palette + geometry. Every value below was hardcoded in the six recipe LWC stylesheets and is lifted verbatim, so moving those files onto tokens is visually a no-op. The greens are deliberately NOT aliased to --waw-color-brand-primary (#024A1F): the recipe Figma specifies #1A5336, and aliasing would silently reskin the feature. Values that already had a token (#FFFFFF, #E8E8E8, #444444, #747474, #0B5CAB, #F4F4F4, z-index 9000) are reused, not redefined here. */ --waw-color-meal-plan-brand: #1a5336; --waw-color-meal-plan-brand-hover: #14472e; --waw-color-meal-plan-stepper-surface: #d7f0d2; --waw-color-meal-plan-stepper-surface-hover: #c3e7bb; --waw-color-meal-plan-button-surface-hover: #eaf5e7; --waw-color-meal-plan-surface-pantry: #eef6ee; --waw-color-meal-plan-surface-out-of-stock: #fdf7e7; --waw-color-meal-plan-surface-warning: #fef8e7; --waw-color-meal-plan-surface-info: #eef4fb; --waw-color-meal-plan-surface-header: #f2f2f2; --waw-color-meal-plan-surface-subtle: #f0f0f0; --waw-color-meal-plan-surface-busy: rgba(255, 255, 255, 0.7); --waw-color-meal-plan-icon-warning: #b26a00; --waw-color-meal-plan-text-warning: #6b4e00; --waw-color-meal-plan-icon-neutral: #2b2b2b; --waw-color-meal-plan-text-muted: #6b6b6b; --waw-color-meal-plan-border-close: #d5d5d5; --waw-color-meal-plan-border-popover: #e0e0e0; --waw-color-meal-plan-border-divider: #eeeeee; --waw-color-meal-plan-border-input: #c9c9c9; --waw-color-meal-plan-error: #b3261e; --waw-color-meal-plan-error-surface: #fdecea; --waw-color-meal-plan-error-text: #611a15; --waw-color-meal-plan-badge-save-surface: #f2c94c; --waw-color-meal-plan-badge-save-text: #3a3a3a; --waw-color-meal-plan-badge-edlp-surface: #e01a22; --waw-color-meal-plan-disabled-surface: #eaeaea; --waw-color-meal-plan-disabled-text: #9a9a9a; /* WBST-2818: G8 account logo fill. No existing red token is #f05449. */ --waw-color-g8-logo: #f05449; /* 15px body copy has no entry in the shared typography scale. */ --waw-typography-size-meal-plan-body: 15px; /* Product names wrap to two lines; a ratio keeps them tight at any size. */ --waw-typography-line-height-meal-plan-tile: 1.3; --waw-radius-circle: 50%; --waw-size-meal-plan-modal-content-max-height: 570px; --waw-size-meal-plan-popover-max-width: 90vw; /* Distinct from --waw-opacity-disabled (0.6) per the recipe Figma. */ --waw-opacity-meal-plan-disabled: 0.5; --waw-duration-meal-plan-hover: 120ms; --waw-duration-meal-plan-press: 80ms; --waw-duration-meal-plan-panel-in: 360ms; --waw-duration-meal-plan-panel-out: 280ms; --waw-duration-meal-plan-shimmer: 1.4s; /* Stacking within the modal: swap panel < allergen overlay < save-to-list. The busy overlay reuses --waw-z-index-dropdown (9000). */ --waw-z-index-meal-plan-swap-panel: 5; --waw-z-index-meal-plan-allergen: 6000; --waw-z-index-meal-plan-save-to-list: 9500; --waw-shadow-meal-plan-popover: 0 8px 28px rgba(0, 0, 0, 0.18); --waw-shadow-meal-plan-swap-panel: 6px 0 24px rgba(0, 0, 0, 0.14); } c-waw-lists-summary-card { --slds-c-icon-color-foreground: var(--waw-color-brand-primary); } c-waw-lists-landing { --slds-c-button-brand-font-family: var(--waw-typography-family-brand); --slds-c-button-brand-font-size: var(--waw-typography-size-300); --slds-c-button-brand-font-weight: var(--waw-typography-weight-medium); --slds-c-button-brand-line-height: var(--waw-typography-line-height-300); --slds-c-button-brand-spacing-block-start: var(--waw-spacing-sizing-spacing-10px); --slds-c-button-brand-spacing-block-end: var(--waw-spacing-sizing-spacing-10px); --slds-c-button-brand-spacing-inline-start: var(--waw-spacing-sizing-spacing-5-24px); --slds-c-button-brand-spacing-inline-end: var(--waw-spacing-sizing-spacing-5-24px); } /* WBST-7142 | Leelaksh Chadha: View List SLDS hooks on the host so list-detail CSS does not set --slds-c-*. Compact outline-brand is Figma 97596:52752 Edit. Destructive / text-destructive cover Close, Delete, and the delete modal. */ c-waw-list-detail { --slds-c-button-outline-brand-font-family: var(--waw-typography-family-brand); --slds-c-button-outline-brand-font-size: var(--waw-typography-size-200); --slds-c-button-outline-brand-font-weight: var(--waw-typography-weight-medium); --slds-c-button-outline-brand-line-height: var(--waw-typography-line-height-200); --slds-c-button-outline-brand-spacing-inline-start: var( --waw-spacing-sizing-spacing-4-16px ); --slds-c-button-outline-brand-spacing-inline-end: var( --waw-spacing-sizing-spacing-4-16px ); --slds-c-button-outline-brand-spacing-block-start: var( --waw-spacing-sizing-spacing-2-8px ); --slds-c-button-outline-brand-spacing-block-end: var( --waw-spacing-sizing-spacing-2-8px ); --slds-c-button-outline-brand-min-height: var(--waw-spacing-sizing-sizing-36px); --slds-c-button-outline-brand-radius-border: var(--waw-radius-button); --slds-c-button-radius-border: var(--waw-radius-button); --slds-c-button-line-height: var(--waw-typography-line-height-200); --slds-c-button-text-destructive-text-color: var(--waw-tokens-text-text-error); --slds-c-button-destructive-color-background: var(--waw-tokens-text-text-error); --slds-c-button-destructive-color-border: var(--waw-tokens-text-text-error); --slds-c-button-destructive-text-color: var(--waw-color-text-inverse); --slds-c-button-destructive-font-family: var(--waw-typography-family-brand); --slds-c-button-destructive-font-size: var(--waw-typography-size-200); --slds-c-button-destructive-font-weight: var(--waw-typography-weight-medium); --slds-c-button-destructive-line-height: var(--waw-typography-line-height-200); --slds-c-button-destructive-min-height: var(--waw-spacing-sizing-sizing-36px); --slds-c-button-destructive-radius-border: var(--waw-radius-button); --slds-c-input-radius-border: var(--waw-radius-input-field); --slds-c-input-color-border: var(--waw-color-border-input); --slds-c-input-spacing-block-start: var(--waw-spacing-sizing-spacing-2-8px); --slds-c-input-spacing-block-end: var(--waw-spacing-sizing-spacing-2-8px); --slds-c-input-spacing-inline-start: var(--waw-spacing-sizing-spacing-3-12px); --slds-c-input-spacing-inline-end: var(--waw-spacing-sizing-spacing-3-12px); --slds-c-input-font-size: var(--waw-typography-size-200); --slds-c-input-line-height: var(--waw-typography-line-height-200); } /* Footer scoped branding (B2B_Footer charcoal) does not wrap this LWC. SLDS link colour stays charcoal; OOTB DXP a:link follows APP branding. */ c-waw-main-footer-parent, c-waw-main-footer-navigation { --slds-c-link-text-color: var(--waw-tokens-text-text-default); } c-waw-store-locator-filters { --slds-c-checkbox-color-background: var(--waw-color-surface-base); --slds-c-checkbox-color-border: var(--waw-color-brand-primary); --slds-c-checkbox-color-background-checked: var( --waw-tokens-surface-surface-accent-light ); --slds-c-checkbox-color-border-checked: var(--waw-color-brand-primary); --slds-c-checkbox-mark-color-foreground: var(--waw-color-brand-primary); --slds-c-form-label-font-size: var(--waw-font-store-locator-body-size); --slds-c-form-label-line-height: var( --waw-font-store-locator-body-line-height ); --slds-c-form-label-font-weight: var(--waw-font-store-locator-body-weight); --slds-c-form-label-color: var(--waw-color-text-primary); } /* WBST-7225 | Gangotry Vishwakarma: LOC start CMS RTE stamps Salesforce blue inline on . DXP a rules already pierce this tree but lose to inline color; !important is required so the WAW link token wins on this host only. */ c-waw-line-of-credit-start-page a, c-waw-line-of-credit-start-page a:link, c-waw-line-of-credit-start-page a:visited { color: var(--waw-tokens-text-text-link) !important; } c-waw-line-of-credit-start-page a:hover { color: var(--waw-tokens-text-text-link-hover) !important; } body { font-family: var(--waw-typography-family-body); } body.waw-minicart--no-scroll { overflow: hidden; }