/* * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. * * This file has been auto-generated. Any modifications * you make will be overwritten when the file is regenerated. * * For more information or questions, please go to #design-eng * */ /* * Base 2.0 Color Token Naming Convention * ======================================= * * Canonical form: [family]-[role]-[context]-[hierarchy]-[variant]-[state] * Components are omitted when implicit (neutral family, default context, etc.) * * Family: accent, error, warning, success, info (neutral is implicit) * Role: background, content, border * Context: inverse (default is implicit) * Hierarchy: primary, secondary, tertiary * Variant: bold, subtle, disabled, onbold, onsubtle, oninverse, * statelayer, decorative, accessible * State: hover, pressed * * Theming attributes (all composable, can be on same or ancestor element): * data-base-version-color="2" — opt in to v2 color tokens * data-theme="dark" — switch to dark mode (light is implicit) * data-elevated="true" — dark-elevated surface (scoped under dark) * data-product="" — product branding overrides (ai, eats, etc.) * * All custom properties are namespaced with --base- to avoid collisions. * * Examples: * --base-background-primary neutral bg, primary hierarchy * --base-accent-content-primary accent family, content role, primary * --base-error-border-accessible error family, border role, accessible variant * --base-background-inverse-primary neutral bg, inverse context, primary */ /* v2 primitives — always present, new names with no v1 conflict */ :root { --base-amber-0: #000000; --base-amber-15: #120800; --base-amber-18: #1d1001; --base-amber-23: #2a1800; --base-amber-27: #372000; --base-amber-31: #442a02; --base-amber-35: #523303; --base-amber-40: #603c02; --base-amber-44: #6f4603; --base-amber-48: #7f5001; --base-amber-53: #8d5c0c; --base-amber-57: #9e6605; --base-amber-61: #af7212; --base-amber-66: #c27e04; --base-amber-70: #d18b07; --base-amber-74: #df9906; --base-amber-79: #eda803; --base-amber-83: #f6b924; --base-amber-87: #fec95d; --base-amber-91: #feda94; --base-amber-96: #fee9c0; --base-amber-98: #fff5e3; --base-amber-99: #fffcf7; --base-amber-100: #ffffff; --base-blue-0: #000000; --base-blue-15: #000a1d; --base-blue-18: #00112a; --base-blue-23: #011c3d; --base-blue-27: #02264f; --base-blue-31: #003062; --base-blue-35: #033a74; --base-blue-40: #074688; --base-blue-44: #08519c; --base-blue-48: #0a5db3; --base-blue-53: #0669c9; --base-blue-57: #1175dd; --base-blue-61: #1185e8; --base-blue-66: #1195f2; --base-blue-70: #33a3fc; --base-blue-74: #59b0fd; --base-blue-79: #79bdfc; --base-blue-83: #93cafe; --base-blue-87: #afd7fd; --base-blue-91: #c8e4fe; --base-blue-96: #dfeffe; --base-blue-98: #f0f7ff; --base-blue-99: #fbfdff; --base-blue-100: #ffffff; --base-gradient-blue-0: #01233f; --base-gradient-blue-15: #012849; --base-gradient-blue-18: #022d52; --base-gradient-blue-23: #03325d; --base-gradient-blue-27: #043768; --base-gradient-blue-31: #043c74; --base-gradient-blue-35: #054181; --base-gradient-blue-40: #06458f; --base-gradient-blue-44: #074a9e; --base-gradient-blue-48: #094ead; --base-gradient-blue-53: #044fc4; --base-gradient-blue-57: #014fdd; --base-gradient-blue-61: #0e4ff2; --base-gradient-blue-66: #2355fa; --base-gradient-blue-70: #355efb; --base-gradient-blue-74: #4466fc; --base-gradient-blue-79: #526efd; --base-gradient-blue-83: #5e75fe; --base-gradient-blue-87: #6c7efa; --base-gradient-blue-91: #7785fc; --base-gradient-blue-96: #828cfe; --base-gradient-blue-98: #8e94fb; --base-gradient-blue-99: #989bfe; --base-gradient-blue-100: #a2a3fd; --base-gradient-indigo-0: #0c088c; --base-gradient-indigo-15: #140696; --base-gradient-indigo-18: #1b02a1; --base-gradient-indigo-23: #220ba5; --base-gradient-indigo-27: #2905b0; --base-gradient-indigo-31: #2f0fb5; --base-gradient-indigo-35: #3608bf; --base-gradient-indigo-40: #3d11c4; --base-gradient-indigo-44: #4509cf; --base-gradient-indigo-48: #4c13d4; --base-gradient-indigo-53: #541bd8; --base-gradient-indigo-57: #5c21dc; --base-gradient-indigo-61: #6427e1; --base-gradient-indigo-66: #6e2ce5; --base-gradient-indigo-70: #7732e9; --base-gradient-indigo-74: #8137ed; --base-gradient-indigo-79: #8c3cf1; --base-gradient-indigo-83: #9740f4; --base-gradient-indigo-87: #a245f7; --base-gradient-indigo-91: #ad4afa; --base-gradient-indigo-96: #b84efc; --base-gradient-indigo-98: #c453fe; --base-gradient-indigo-99: #cc5dfb; --base-gradient-indigo-100: #d761fd; --base-gradient-red-0: #46021a; --base-gradient-red-15: #53031f; --base-gradient-red-18: #600424; --base-gradient-red-23: #6e0428; --base-gradient-red-27: #7d012d; --base-gradient-red-31: #8a0831; --base-gradient-red-35: #9a0134; --base-gradient-red-40: #a80737; --base-gradient-red-44: #b70e37; --base-gradient-red-48: #c61432; --base-gradient-red-53: #d90220; --base-gradient-red-57: #e32112; --base-gradient-red-61: #e83c13; --base-gradient-red-66: #ed4f17; --base-gradient-red-70: #f65b07; --base-gradient-red-74: #fa6b16; --base-gradient-red-79: #fd7924; --base-gradient-red-83: #fd893d; --base-gradient-red-87: #fe9752; --base-gradient-red-91: #fca569; --base-gradient-red-96: #ffb179; --base-gradient-red-98: #ffbd8c; --base-gradient-red-99: #fecaa0; --base-gradient-red-100: #ffd5b2; --base-green-0: #000000; --base-green-15: #000f01; --base-green-18: #001702; --base-green-23: #012406; --base-green-27: #01300c; --base-green-31: #013c14; --base-green-35: #00491c; --base-green-40: #095627; --base-green-44: #05632f; --base-green-48: #10723a; --base-green-53: #098042; --base-green-57: #17904e; --base-green-61: #11a156; --base-green-66: #1db061; --base-green-70: #06c167; --base-green-74: #32ce73; --base-green-79: #55d981; --base-green-83: #75e190; --base-green-87: #94e9a2; --base-green-91: #b3f3b7; --base-green-96: #ccfbcb; --base-green-98: #e6ffe3; --base-green-99: #f8fff7; --base-green-100: #ffffff; --base-indigo-0: #000000; --base-indigo-15: #0a0421; --base-indigo-18: #11082f; --base-indigo-23: #1c1044; --base-indigo-27: #261858; --base-indigo-31: #301f6b; --base-indigo-35: #3b277f; --base-indigo-40: #462f97; --base-indigo-44: #5137ac; --base-indigo-48: #5d44bd; --base-indigo-53: #6852cb; --base-indigo-57: #745fda; --base-indigo-61: #7f6ce8; --base-indigo-66: #8b79f7; --base-indigo-70: #988afc; --base-indigo-74: #a59bfd; --base-indigo-79: #b2acfc; --base-indigo-83: #bfbbfe; --base-indigo-87: #ceccfd; --base-indigo-91: #dddcfe; --base-indigo-96: #ebeafe; --base-indigo-98: #f6f5ff; --base-indigo-99: #fcfcff; --base-indigo-100: #ffffff; --base-lime-0: #000000; --base-lime-15: #040e00; --base-lime-18: #081601; --base-lime-23: #102201; --base-lime-27: #182e02; --base-lime-31: #203900; --base-lime-35: #294502; --base-lime-40: #335203; --base-lime-44: #3d5e00; --base-lime-48: #496b0a; --base-lime-53: #547803; --base-lime-57: #60850b; --base-lime-61: #6b9313; --base-lime-66: #77a019; --base-lime-70: #84b008; --base-lime-74: #91c012; --base-lime-79: #9dcf18; --base-lime-83: #aadd32; --base-lime-87: #b9ea53; --base-lime-91: #ccf484; --base-lime-96: #defbb0; --base-lime-98: #ecffd1; --base-lime-99: #fafff2; --base-lime-100: #ffffff; --base-magenta-0: #000000; --base-magenta-15: #1b000c; --base-magenta-18: #270114; --base-magenta-23: #38021f; --base-magenta-27: #4b012b; --base-magenta-31: #5b0336; --base-magenta-35: #6e0141; --base-magenta-40: #81044e; --base-magenta-44: #940359; --base-magenta-48: #a90267; --base-magenta-53: #ba1073; --base-magenta-57: #c9277f; --base-magenta-61: #d8388c; --base-magenta-66: #e84899; --base-magenta-70: #f757a6; --base-magenta-74: #fc74b3; --base-magenta-79: #fd8dbe; --base-magenta-83: #fda5ca; --base-magenta-87: #febcd6; --base-magenta-91: #fed2e3; --base-magenta-96: #fee4ee; --base-magenta-98: #fff3f7; --base-magenta-99: #fffbfd; --base-magenta-100: #ffffff; --base-neutral-0: #000000; --base-neutral-15: #0a0a0a; --base-neutral-18: #111111; --base-neutral-23: #1c1c1c; --base-neutral-27: #272727; --base-neutral-31: #313131; --base-neutral-35: #3b3b3b; --base-neutral-40: #474747; --base-neutral-44: #525252; --base-neutral-48: #5f5f5f; --base-neutral-53: #6b6b6b; --base-neutral-57: #777777; --base-neutral-61: #838383; --base-neutral-66: #909090; --base-neutral-70: #9d9d9d; --base-neutral-74: #aaaaaa; --base-neutral-79: #b7b7b7; --base-neutral-83: #c4c4c4; --base-neutral-87: #d2d2d2; --base-neutral-91: #e0e0e0; --base-neutral-96: #ececec; --base-neutral-98: #f6f6f6; --base-neutral-99: #fcfcfc; --base-neutral-100: #ffffff; --base-orange-0: #000000; --base-orange-15: #180400; --base-orange-18: #260800; --base-orange-23: #340f00; --base-orange-27: #421701; --base-orange-31: #502002; --base-orange-35: #602800; --base-orange-40: #6e3202; --base-orange-44: #7c3c08; --base-orange-48: #8d4603; --base-orange-53: #9c5109; --base-orange-57: #ac5c10; --base-orange-61: #c16808; --base-orange-66: #d47614; --base-orange-70: #ec8102; --base-orange-74: #fc9026; --base-orange-79: #fea65d; --base-orange-83: #ffb984; --base-orange-87: #fecaa4; --base-orange-91: #fed9be; --base-orange-96: #ffe8d6; --base-orange-98: #fff4ec; --base-orange-99: #fffcf9; --base-orange-100: #ffffff; --base-purple-0: #000000; --base-purple-15: #120022; --base-purple-18: #1b0031; --base-purple-23: #290245; --base-purple-27: #370459; --base-purple-31: #45026f; --base-purple-35: #520782; --base-purple-40: #63009c; --base-purple-44: #7010ae; --base-purple-48: #8112c7; --base-purple-53: #8e29d5; --base-purple-57: #9b3ae3; --base-purple-61: #a84af2; --base-purple-66: #b45dfb; --base-purple-70: #bc76fb; --base-purple-74: #c58afc; --base-purple-79: #cd9ffc; --base-purple-83: #d7b1fd; --base-purple-87: #e0c4fd; --base-purple-91: #ead7fe; --base-purple-96: #f2e7fe; --base-purple-98: #f9f4ff; --base-purple-99: #fdfcff; --base-purple-100: #ffffff; --base-red-0: #000000; --base-red-15: #1b0100; --base-red-18: #280200; --base-red-23: #3a0501; --base-red-27: #4e0600; --base-red-31: #5e0c02; --base-red-35: #720d00; --base-red-40: #851402; --base-red-44: #9b1b06; --base-red-48: #b4230b; --base-red-53: #cc2609; --base-red-57: #e42500; --base-red-61: #f3381b; --base-red-66: #fc4f34; --base-red-70: #fc6a52; --base-red-74: #fd8069; --base-red-79: #fe9783; --base-red-83: #feac9c; --base-red-87: #fec1b5; --base-red-91: #fed5cd; --base-red-96: #fee6e1; --base-red-98: #fff4f1; --base-red-99: #fffcfb; --base-red-100: #ffffff; --base-taupe-0: #000000; --base-taupe-15: #0d0905; --base-taupe-18: #15110b; --base-taupe-23: #211b14; --base-taupe-27: #2c261e; --base-taupe-31: #363027; --base-taupe-35: #413a32; --base-taupe-40: #4d463d; --base-taupe-44: #585148; --base-taupe-48: #655e54; --base-taupe-53: #716a60; --base-taupe-57: #7d766c; --base-taupe-61: #8a8278; --base-taupe-66: #978f85; --base-taupe-70: #a49c92; --base-taupe-74: #b2aaa0; --base-taupe-79: #c0b8ae; --base-taupe-83: #cec5bb; --base-taupe-87: #dbd3c8; --base-taupe-91: #e9e0d7; --base-taupe-96: #f3ece4; --base-taupe-98: #fbf6ef; --base-taupe-99: #fffcf9; --base-taupe-100: #ffffff; --base-teal-0: #000000; --base-teal-15: #000d11; --base-teal-18: #00151a; --base-teal-23: #012127; --base-teal-27: #012d33; --base-teal-31: #03383e; --base-teal-35: #00444b; --base-teal-40: #035157; --base-teal-44: #025e63; --base-teal-48: #016c71; --base-teal-53: #0f7a7e; --base-teal-57: #06888c; --base-teal-61: #13959a; --base-teal-66: #1ca3a8; --base-teal-70: #06b2b8; --base-teal-74: #2ac0c5; --base-teal-79: #3fced3; --base-teal-83: #54dbe0; --base-teal-87: #7ae6ea; --base-teal-91: #a5f0f2; --base-teal-96: #c9f7f8; --base-teal-98: #e3fdfd; --base-teal-99: #f6ffff; --base-teal-100: #ffffff; --base-yellow-0: #000000; --base-yellow-15: #0f0900; --base-yellow-18: #1a1200; --base-yellow-23: #251b00; --base-yellow-27: #302502; --base-yellow-31: #3c2e01; --base-yellow-35: #483902; --base-yellow-40: #554301; --base-yellow-44: #614e01; --base-yellow-48: #6e5a0b; --base-yellow-53: #7b6609; --base-yellow-57: #897202; --base-yellow-61: #977f0f; --base-yellow-66: #a78d02; --base-yellow-70: #b79b10; --base-yellow-74: #c6aa1a; --base-yellow-79: #d4b71f; --base-yellow-83: #e3c522; --base-yellow-87: #f1d223; --base-yellow-91: #ffde21; --base-yellow-96: #feeb90; --base-yellow-98: #fff5c6; --base-yellow-99: #fffced; --base-yellow-100: #ffffff; } /* v2 light semantics */ [data-base-version-color="2"] { --base-background-base: var(--base-neutral-99); --base-background-primary: var(--base-neutral-100); --base-background-secondary: var(--base-neutral-98); --base-background-tertiary: var(--base-neutral-96); --base-background-disabled: rgba(224, 224, 224, 0.75); --base-error-background-bold: var(--base-red-53); --base-error-background-subtle: var(--base-red-96); --base-error-background-disabled: rgba(254, 230, 225, 0.75); --base-error-background-statelayer-hover: rgba(254, 230, 225, 0.25); --base-error-background-statelayer-pressed: rgba(254, 230, 225, 0.5); --base-warning-background-bold: var(--base-orange-74); --base-warning-background-subtle: var(--base-orange-96); --base-warning-background-disabled: rgba(255, 232, 214, 0.75); --base-success-background-bold: var(--base-green-53); --base-success-background-subtle: var(--base-green-98); --base-success-background-disabled: rgba(204, 251, 203, 0.75); --base-info-background-bold: var(--base-neutral-18); --base-info-background-subtle: var(--base-neutral-96); --base-info-background-disabled: rgba(224, 224, 224, 0.75); --base-accent-background-primary-bold: var(--base-blue-57); --base-accent-background-primary-subtle: var(--base-blue-98); --base-accent-background-primary-disabled: rgba(223, 239, 254, 0.75); --base-background-inverse-primary: var(--base-neutral-18); --base-background-inverse-secondary: var(--base-neutral-27); --base-background-inverse-statelayer-hover: rgba(236, 236, 236, 0.15); --base-background-inverse-statelayer-pressed: rgba(236, 236, 236, 0.2); --base-background-material-primary: rgba(255, 255, 255, 0.82); --base-background-material-secondary: rgba(255, 255, 255, 0.96); --base-background-material-tertiary: rgba(252, 252, 252, 0.98); --base-background-overlay-art: rgba(255, 255, 255, 0); --base-background-statelayer-hover: rgba(17, 17, 17, 0.06); --base-background-statelayer-pressed: rgba(17, 17, 17, 0.1); --base-content-primary: var(--base-neutral-18); --base-background-always-dark: var(--base-neutral-0); --base-background-always-light: var(--base-neutral-100); --base-content-secondary: var(--base-neutral-44); --base-content-tertiary: var(--base-neutral-53); --base-content-disabled: var(--base-neutral-79); --base-error-content-primary: var(--base-red-53); --base-error-content-onbold: var(--base-red-99); --base-error-content-onsubtle: var(--base-red-48); --base-error-content-disabled: var(--base-red-79); --base-error-content-oninverse: var(--base-red-83); --base-warning-content-primary: var(--base-orange-53); --base-warning-content-onbold: var(--base-orange-15); --base-warning-content-onsubtle: var(--base-orange-48); --base-warning-content-disabled: var(--base-orange-79); --base-warning-content-oninverse: var(--base-orange-83); --base-success-content-primary: var(--base-green-48); --base-success-content-onbold: var(--base-green-99); --base-success-content-onsubtle: var(--base-green-40); --base-success-content-disabled: var(--base-green-79); --base-success-content-oninverse: var(--base-green-83); --base-info-content-primary: var(--base-neutral-53); --base-info-content-onbold: var(--base-neutral-96); --base-info-content-onsubtle: var(--base-neutral-40); --base-info-content-disabled: var(--base-neutral-79); --base-info-content-oninverse: var(--base-neutral-83); --base-accent-content-primary: var(--base-blue-57); --base-accent-content-primary-onbold: var(--base-blue-100); --base-accent-content-primary-onsubtle: var(--base-blue-40); --base-accent-content-primary-disabled: var(--base-blue-79); --base-content-inverse-primary: var(--base-neutral-99); --base-content-inverse-secondary: var(--base-neutral-87); --base-content-inverse-tertiary: var(--base-neutral-74); --base-content-legal: var(--base-blue-53); --base-border-accessible: var(--base-neutral-61); --base-content-ongradient: var(--base-neutral-100); --base-border-bold: var(--base-neutral-18); --base-border-subtle: rgba(224, 224, 224, 0.6); --base-accent-border-primary-bold: var(--base-blue-57); --base-accent-border-primary-subtle: rgba(175, 215, 253, 0.7); --base-accent-border-primary-accessible: var(--base-blue-57); --base-error-border-bold: var(--base-red-57); --base-error-border-subtle: rgba(254, 172, 156, 0.7); --base-error-border-accessible: var(--base-red-61); --base-warning-border-bold: var(--base-orange-74); --base-warning-border-subtle: rgba(255, 185, 132, 0.7); --base-warning-border-accessible: var(--base-orange-61); --base-success-border-bold: var(--base-green-70); --base-success-border-subtle: rgba(117, 225, 144, 0.7); --base-success-border-accessible: var(--base-green-57); --base-info-border-bold: var(--base-neutral-18); --base-info-border-subtle: rgba(196, 196, 196, 0.7); --base-info-border-accessible: var(--base-neutral-61); --base-content-green-material-onbold: var(--base-neutral-100); --base-border-inverse-bold: var(--base-neutral-96); --base-border-inverse-subtle: rgba(71, 71, 71, 0.7); --base-content-red-material-onbold: var(--base-neutral-100); --base-border-inverse-accessible: var(--base-neutral-57); --base-content-orange-material-onbold: var(--base-neutral-0); --base-content-yellow-material-onbold: var(--base-neutral-0); --base-border-material-primary: rgba(255, 255, 255, 0.4); --base-border-material-secondary: var(--base-neutral-100); --base-content-blue-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-1: var(--base-gradient-blue-35); --base-border-material-tertiary: var(--base-neutral-100); --base-content-crimson-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-2: var(--base-gradient-blue-48); --base-accent-gradient-stop-3: var(--base-gradient-blue-66); --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.06); --base-gradient-scrim-stop-2: rgba(17, 17, 17, 0.16); --base-gradient-scrim-stop-3: rgba(0, 0, 0, 0.54); color-scheme: light; } /* ai overrides (light) */ [data-base-version-color="2"] [data-product="ai"], [data-base-version-color="2"][data-product="ai"] { --base-accent-background-primary-bold: var(--base-indigo-53); --base-accent-content-primary: var(--base-indigo-48); --base-accent-background-primary-disabled: rgba(235, 234, 254, 0.75); --base-accent-gradient-stop-2: var(--base-indigo-48); --base-accent-gradient-stop-1: var(--base-indigo-35); --base-accent-content-primary-disabled: var(--base-indigo-74); --base-accent-gradient-stop-3: var(--base-indigo-66); --base-accent-border-primary-accessible: var(--base-indigo-53); --base-accent-border-primary-subtle: rgba(191, 187, 254, 0.7); --base-accent-background-primary-subtle: var(--base-indigo-96); --base-accent-content-primary-onsubtle: var(--base-indigo-40); --base-accent-content-primary-onbold: var(--base-indigo-100); --base-accent-border-primary-bold: var(--base-indigo-57); } /* eats overrides (light) */ [data-base-version-color="2"] [data-product="eats"], [data-base-version-color="2"][data-product="eats"] { --base-accent-gradient-stop-2: var(--base-green-48); --base-accent-content-primary-onsubtle: var(--base-green-40); --base-accent-background-primary-subtle: var(--base-green-98); --base-accent-content-primary: var(--base-green-48); --base-accent-background-primary-disabled: var(--base-green-98); --base-accent-border-primary-subtle: rgba(117, 225, 144, 0.7); --base-accent-gradient-stop-3: var(--base-green-66); --base-accent-content-primary-disabled: var(--base-green-74); --base-accent-border-primary-bold: var(--base-green-57); --base-accent-content-primary-onbold: var(--base-green-100); --base-accent-gradient-stop-1: var(--base-green-35); --base-accent-background-primary-bold: var(--base-green-53); --base-accent-border-primary-accessible: var(--base-green-53); } /* offers overrides (light) */ [data-base-version-color="2"] [data-product="offers"], [data-base-version-color="2"][data-product="offers"] { --base-accent-background-primary-bold: var(--base-red-57); --base-accent-content-primary-onsubtle: var(--base-red-40); --base-accent-background-primary-subtle: var(--base-red-91); --base-accent-background-primary-disabled: rgba(254, 230, 225, 0.75); --base-accent-content-primary: var(--base-red-57); --base-accent-content-primary-disabled: var(--base-red-79); --base-accent-gradient-stop-3: var(--base-red-66); --base-accent-border-primary-accessible: var(--base-red-57); --base-accent-border-primary-subtle: rgba(254, 172, 156, 0.7); --base-accent-gradient-stop-2: var(--base-red-48); --base-accent-gradient-stop-1: var(--base-red-35); --base-accent-content-primary-onbold: var(--base-red-100); --base-accent-border-primary-bold: var(--base-red-57); } /* v2 dark semantics */ [data-base-version-color="2"][data-theme="dark"], [data-theme="dark"] [data-base-version-color="2"] { --base-background-base: var(--base-neutral-18); --base-background-primary: var(--base-neutral-23); --base-background-secondary: var(--base-neutral-27); --base-background-tertiary: var(--base-neutral-35); --base-background-disabled: rgba(71, 71, 71, 0.75); --base-error-background-bold: var(--base-red-53); --base-error-background-subtle: var(--base-red-23); --base-error-background-disabled: rgba(78, 6, 0, 0.75); --base-error-background-statelayer-hover: rgba(58, 5, 1, 0.2); --base-error-background-statelayer-pressed: rgba(58, 5, 1, 0.35); --base-warning-background-bold: var(--base-orange-70); --base-warning-background-subtle: var(--base-orange-27); --base-warning-background-disabled: rgba(80, 32, 2, 0.8); --base-success-background-bold: var(--base-green-66); --base-success-background-subtle: var(--base-green-27); --base-success-background-disabled: rgba(1, 60, 20, 0.75); --base-info-background-bold: var(--base-neutral-91); --base-info-background-subtle: var(--base-neutral-35); --base-info-background-disabled: rgba(71, 71, 71, 0.75); --base-accent-background-primary-bold: var(--base-blue-66); --base-accent-background-primary-subtle: var(--base-blue-23); --base-accent-background-primary-disabled: rgba(2, 38, 79, 0.75); --base-background-inverse-primary: var(--base-neutral-91); --base-background-inverse-secondary: var(--base-neutral-87); --base-background-inverse-statelayer-hover: rgba(17, 17, 17, 0.15); --base-background-inverse-statelayer-pressed: rgba(17, 17, 17, 0.2); --base-background-material-primary: rgba(39, 39, 39, 0.9); --base-background-material-secondary: rgba(39, 39, 39, 0.96); --base-background-material-tertiary: rgba(39, 39, 39, 0.98); --base-background-overlay-art: rgba(0, 0, 0, 0.16); --base-background-statelayer-hover: rgba(236, 236, 236, 0.1); --base-background-statelayer-pressed: rgba(236, 236, 236, 0.15); --base-content-primary: var(--base-neutral-96); --base-background-always-dark: var(--base-neutral-27); --base-background-always-light: var(--base-neutral-91); --base-content-secondary: var(--base-neutral-87); --base-content-tertiary: var(--base-neutral-74); --base-content-disabled: var(--base-neutral-53); --base-error-content-primary: var(--base-red-79); --base-error-content-onbold: var(--base-red-99); --base-error-content-onsubtle: var(--base-red-87); --base-error-content-disabled: var(--base-red-44); --base-error-content-oninverse: var(--base-red-35); --base-warning-content-primary: var(--base-orange-74); --base-warning-content-onbold: var(--base-orange-15); --base-warning-content-onsubtle: var(--base-orange-91); --base-warning-content-disabled: var(--base-orange-53); --base-warning-content-oninverse: var(--base-orange-35); --base-success-content-primary: var(--base-green-74); --base-success-content-onbold: var(--base-green-15); --base-success-content-onsubtle: var(--base-green-91); --base-success-content-disabled: var(--base-green-48); --base-success-content-oninverse: var(--base-green-35); --base-info-content-primary: var(--base-neutral-74); --base-info-content-onbold: var(--base-neutral-18); --base-info-content-onsubtle: var(--base-neutral-91); --base-info-content-disabled: var(--base-neutral-53); --base-info-content-oninverse: var(--base-neutral-35); --base-accent-content-primary: var(--base-blue-74); --base-accent-content-primary-onbold: var(--base-blue-0); --base-accent-content-primary-onsubtle: var(--base-blue-91); --base-accent-content-primary-disabled: var(--base-blue-48); --base-content-inverse-primary: var(--base-neutral-18); --base-content-inverse-secondary: var(--base-neutral-27); --base-content-inverse-tertiary: var(--base-neutral-40); --base-content-legal: var(--base-blue-74); --base-border-accessible: var(--base-neutral-66); --base-content-ongradient: var(--base-neutral-100); --base-border-bold: var(--base-neutral-96); --base-border-subtle: rgba(71, 71, 71, 0.6); --base-accent-border-primary-bold: var(--base-blue-74); --base-accent-border-primary-subtle: rgba(17, 117, 221, 0.3); --base-accent-border-primary-accessible: var(--base-blue-74); --base-error-border-bold: var(--base-red-70); --base-error-border-subtle: rgba(243, 56, 27, 0.3); --base-error-border-accessible: var(--base-red-66); --base-warning-border-bold: var(--base-orange-74); --base-warning-border-subtle: rgba(172, 92, 16, 0.3); --base-warning-border-accessible: var(--base-orange-66); --base-success-border-bold: var(--base-green-70); --base-success-border-subtle: rgba(23, 144, 78, 0.3); --base-success-border-accessible: var(--base-green-66); --base-info-border-bold: var(--base-neutral-96); --base-info-border-subtle: rgba(119, 119, 119, 0.7); --base-info-border-accessible: var(--base-neutral-66); --base-content-green-material-onbold: var(--base-neutral-100); --base-border-inverse-bold: var(--base-neutral-18); --base-border-inverse-subtle: rgba(224, 224, 224, 0.7); --base-content-red-material-onbold: var(--base-neutral-100); --base-border-inverse-accessible: var(--base-neutral-53); --base-content-orange-material-onbold: var(--base-neutral-0); --base-content-yellow-material-onbold: var(--base-neutral-0); --base-border-material-primary: rgba(236, 236, 236, 0); --base-border-material-secondary: rgba(255, 255, 255, 0); --base-content-blue-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-1: var(--base-gradient-blue-35); --base-border-material-tertiary: rgba(236, 236, 236, 0); --base-content-crimson-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-2: var(--base-gradient-blue-48); --base-accent-gradient-stop-3: var(--base-gradient-blue-66); --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.72); --base-gradient-scrim-stop-2: rgba(10, 10, 10, 0.54); --base-gradient-scrim-stop-3: rgba(10, 10, 10, 0.54); color-scheme: dark; } /* ai overrides (dark) */ [data-base-version-color="2"][data-theme="dark"] [data-product="ai"], [data-base-version-color="2"][data-theme="dark"][data-product="ai"], [data-theme="dark"] [data-base-version-color="2"] [data-product="ai"], [data-theme="dark"] [data-base-version-color="2"][data-product="ai"] { --base-accent-background-primary-bold: var(--base-indigo-74); --base-accent-content-primary: var(--base-indigo-74); --base-accent-background-primary-disabled: rgba(70, 47, 151, 0.75); --base-accent-gradient-stop-2: var(--base-indigo-48); --base-accent-gradient-stop-1: var(--base-indigo-35); --base-accent-content-primary-disabled: var(--base-indigo-57); --base-accent-gradient-stop-3: var(--base-indigo-66); --base-accent-border-primary-accessible: var(--base-indigo-74); --base-accent-border-primary-subtle: rgba(116, 95, 218, 0.7); --base-accent-background-primary-subtle: var(--base-indigo-31); --base-accent-content-primary-onsubtle: var(--base-indigo-91); --base-accent-content-primary-onbold: var(--base-indigo-0); --base-accent-border-primary-bold: var(--base-indigo-57); } /* eats overrides (dark) */ [data-base-version-color="2"][data-theme="dark"] [data-product="eats"], [data-base-version-color="2"][data-theme="dark"][data-product="eats"], [data-theme="dark"] [data-base-version-color="2"] [data-product="eats"], [data-theme="dark"] [data-base-version-color="2"][data-product="eats"] { --base-accent-gradient-stop-2: var(--base-green-48); --base-accent-content-primary-onsubtle: var(--base-green-91); --base-accent-background-primary-subtle: var(--base-green-31); --base-accent-content-primary: var(--base-green-74); --base-accent-background-primary-disabled: var(--base-green-35); --base-accent-border-primary-subtle: rgba(23, 144, 78, 0.7); --base-accent-gradient-stop-3: var(--base-green-66); --base-accent-content-primary-disabled: var(--base-green-57); --base-accent-border-primary-bold: var(--base-green-74); --base-accent-content-primary-onbold: var(--base-green-0); --base-accent-gradient-stop-1: var(--base-green-35); --base-accent-background-primary-bold: var(--base-green-70); --base-accent-border-primary-accessible: var(--base-green-74); } /* offers overrides (dark) */ [data-base-version-color="2"][data-theme="dark"] [data-product="offers"], [data-base-version-color="2"][data-theme="dark"][data-product="offers"], [data-theme="dark"] [data-base-version-color="2"] [data-product="offers"], [data-theme="dark"] [data-base-version-color="2"][data-product="offers"] { --base-accent-background-primary-bold: var(--base-red-57); --base-accent-content-primary-onsubtle: var(--base-red-91); --base-accent-background-primary-subtle: var(--base-red-40); --base-accent-background-primary-disabled: rgba(78, 6, 0, 0.75); --base-accent-content-primary: var(--base-red-79); --base-accent-content-primary-disabled: var(--base-red-44); --base-accent-gradient-stop-3: var(--base-red-66); --base-accent-border-primary-accessible: var(--base-red-79); --base-accent-border-primary-subtle: rgba(228, 37, 0, 0.7); --base-accent-gradient-stop-2: var(--base-red-48); --base-accent-gradient-stop-1: var(--base-red-35); --base-accent-content-primary-onbold: var(--base-red-100); --base-accent-border-primary-bold: var(--base-red-74); } /* v2 dark elevated semantics */ [data-base-version-color="2"][data-theme="dark"] [data-elevated="true"], [data-base-version-color="2"][data-theme="dark"][data-elevated="true"], [data-theme="dark"] [data-base-version-color="2"] [data-elevated="true"], [data-theme="dark"] [data-base-version-color="2"][data-elevated="true"] { --base-background-base: var(--base-neutral-27); --base-background-primary: var(--base-neutral-31); --base-background-secondary: var(--base-neutral-35); --base-background-tertiary: var(--base-neutral-44); --base-background-disabled: rgba(95, 95, 95, 0.75); --base-error-background-bold: var(--base-red-57); --base-error-background-subtle: var(--base-red-27); --base-error-background-disabled: rgba(114, 13, 0, 0.75); --base-error-background-statelayer-hover: rgba(58, 5, 1, 0.2); --base-error-background-statelayer-pressed: rgba(58, 5, 1, 0.35); --base-warning-background-bold: var(--base-orange-79); --base-warning-background-subtle: var(--base-orange-35); --base-warning-background-disabled: rgba(110, 50, 2, 0.8); --base-success-background-bold: var(--base-green-74); --base-success-background-subtle: var(--base-green-35); --base-success-background-disabled: rgba(9, 86, 39, 0.75); --base-info-background-bold: var(--base-neutral-98); --base-info-background-subtle: var(--base-neutral-44); --base-info-background-disabled: rgba(95, 95, 95, 0.75); --base-accent-background-primary-bold: var(--base-blue-74); --base-accent-background-primary-subtle: var(--base-blue-31); --base-accent-background-primary-disabled: rgba(3, 58, 116, 0.75); --base-background-inverse-primary: var(--base-neutral-98); --base-background-inverse-secondary: var(--base-neutral-96); --base-background-inverse-statelayer-hover: rgba(17, 17, 17, 0.15); --base-background-inverse-statelayer-pressed: rgba(17, 17, 17, 0.2); --base-background-material-primary: rgba(39, 39, 39, 0.9); --base-background-material-secondary: rgba(39, 39, 39, 0.96); --base-background-material-tertiary: rgba(39, 39, 39, 0.98); --base-background-overlay-art: rgba(0, 0, 0, 0.16); --base-background-statelayer-hover: rgba(236, 236, 236, 0.1); --base-background-statelayer-pressed: rgba(236, 236, 236, 0.15); --base-content-primary: var(--base-neutral-99); --base-background-always-dark: var(--base-neutral-35); --base-background-always-light: var(--base-neutral-98); --base-content-secondary: var(--base-neutral-96); --base-content-tertiary: var(--base-neutral-83); --base-content-disabled: var(--base-neutral-61); --base-error-content-primary: var(--base-red-87); --base-error-content-onbold: var(--base-red-99); --base-error-content-onsubtle: var(--base-red-96); --base-error-content-disabled: var(--base-red-53); --base-error-content-oninverse: var(--base-red-44); --base-warning-content-primary: var(--base-orange-83); --base-warning-content-onbold: var(--base-orange-23); --base-warning-content-onsubtle: var(--base-orange-98); --base-warning-content-disabled: var(--base-orange-61); --base-warning-content-oninverse: var(--base-orange-44); --base-success-content-primary: var(--base-green-83); --base-success-content-onbold: var(--base-green-23); --base-success-content-onsubtle: var(--base-green-98); --base-success-content-disabled: var(--base-green-57); --base-success-content-oninverse: var(--base-green-44); --base-info-content-primary: var(--base-neutral-83); --base-info-content-onbold: var(--base-neutral-27); --base-info-content-onsubtle: var(--base-neutral-98); --base-info-content-disabled: var(--base-neutral-61); --base-info-content-oninverse: var(--base-neutral-44); --base-accent-content-primary: var(--base-blue-83); --base-accent-content-primary-onbold: var(--base-blue-18); --base-accent-content-primary-onsubtle: var(--base-blue-98); --base-accent-content-primary-disabled: var(--base-blue-57); --base-content-inverse-primary: var(--base-neutral-27); --base-content-inverse-secondary: var(--base-neutral-35); --base-content-inverse-tertiary: var(--base-neutral-48); --base-content-legal: var(--base-blue-83); --base-border-accessible: var(--base-neutral-74); --base-content-ongradient: var(--base-neutral-100); --base-border-bold: var(--base-neutral-99); --base-border-subtle: rgba(95, 95, 95, 0.6); --base-accent-border-primary-bold: var(--base-blue-83); --base-accent-border-primary-subtle: rgba(51, 163, 252, 0.3); --base-accent-border-primary-accessible: var(--base-blue-83); --base-error-border-bold: var(--base-red-79); --base-error-border-subtle: rgba(252, 79, 52, 0.3); --base-error-border-accessible: var(--base-red-74); --base-warning-border-bold: var(--base-orange-83); --base-warning-border-subtle: rgba(212, 118, 20, 0.3); --base-warning-border-accessible: var(--base-orange-74); --base-success-border-bold: var(--base-green-79); --base-success-border-subtle: rgba(29, 176, 97, 0.3); --base-success-border-accessible: var(--base-green-74); --base-info-border-bold: var(--base-neutral-99); --base-info-border-subtle: rgba(144, 144, 144, 0.7); --base-info-border-accessible: var(--base-neutral-74); --base-content-green-material-onbold: var(--base-neutral-100); --base-border-inverse-bold: var(--base-neutral-27); --base-border-inverse-subtle: rgba(252, 252, 252, 0.7); --base-content-red-material-onbold: var(--base-neutral-100); --base-border-inverse-accessible: var(--base-neutral-61); --base-content-orange-material-onbold: var(--base-neutral-0); --base-content-yellow-material-onbold: var(--base-neutral-0); --base-border-material-primary: rgba(236, 236, 236, 0); --base-border-material-secondary: rgba(255, 255, 255, 0); --base-content-blue-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-1: var(--base-gradient-blue-35); --base-border-material-tertiary: rgba(236, 236, 236, 0); --base-content-crimson-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-2: var(--base-gradient-blue-48); --base-accent-gradient-stop-3: var(--base-gradient-blue-66); --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.72); --base-gradient-scrim-stop-2: rgba(10, 10, 10, 0.54); --base-gradient-scrim-stop-3: rgba(10, 10, 10, 0.54); color-scheme: dark; }