@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
419 lines (418 loc) • 17.1 kB
CSS
:root {
--border-width-medium: 1px;
--border-width-thick: 2px;
--border-width-thin: 0.5px;
--breakpoint-android-compact: 320px;
--breakpoint-android-expanded: 800px;
--breakpoint-android-medium: 600px;
--breakpoint-extra-large-2: 1400px;
--breakpoint-extra-large-3: 1920px;
--breakpoint-extra-large: 1100px;
--breakpoint-extra-small: 320px;
--breakpoint-ios-compact: 320px;
--breakpoint-ios-expanded: 800px;
--breakpoint-ios-regular: 600px;
--breakpoint-large: 800px;
--breakpoint-medium: 600px;
--breakpoint-small: 512px;
--color-avocado-100: #fdfef6;
--color-avocado-200: #f8fcde;
--color-avocado-300: #e9f5a0;
--color-avocado-400: #e3f13c;
--color-avocado-500: #c1d737;
--color-avocado-600: #68770d;
--color-avocado-700: #4e4e0c;
--color-avocado-800: #282306;
--color-blue-100: #f5f9ff;
--color-blue-200: #d4e5fe;
--color-blue-300: #84b4fb;
--color-blue-400: #4d93fc;
--color-blue-500: #0968f6;
--color-blue-600: #0049b8;
--color-blue-650: #003aa5;
--color-blue-700: #002a69;
--color-blue-800: #19133a;
--color-clear: rgba(255, 255, 255, 0);
--color-coral-100: #fff7f5;
--color-coral-200: #ffe1d7;
--color-coral-300: #ffa78a;
--color-coral-400: #ff6a38;
--color-coral-500: #f3511b;
--color-coral-600: #d03706;
--color-coral-700: #5e1d08;
--color-coral-800: #2f0e04;
--color-dijon-100: #fffdf5;
--color-dijon-200: #fcf9de;
--color-dijon-300: #faef8a;
--color-dijon-400: #f6e016;
--color-dijon-500: #e8d20c;
--color-dijon-600: #766f28;
--color-dijon-700: #524500;
--color-dijon-800: #2e2400;
--color-green-100: #fbfef6;
--color-green-200: #f0fce1;
--color-green-300: #d5f6aa;
--color-green-400: #aaed56;
--color-green-500: #92c821;
--color-green-600: #507d17;
--color-green-700: #345110;
--color-green-800: #1c2d06;
--color-indigo-100: #f5fbff;
--color-indigo-200: #d3effe;
--color-indigo-300: #80d0fd;
--color-indigo-400: #0aa7ff;
--color-indigo-500: #0099f0;
--color-indigo-600: #0364ab;
--color-indigo-700: #003c66;
--color-indigo-800: #01193d;
--color-jade-100: #f7fdfb;
--color-jade-200: #d8f8ee;
--color-jade-300: #8feace;
--color-jade-400: #1ed49e;
--color-jade-500: #17c28f;
--color-jade-600: #0f805e;
--color-jade-700: #055743;
--color-jade-800: #002b20;
--color-kiwi-100: #f6fef6;
--color-kiwi-200: #e0fae0;
--color-kiwi-300: #a6f0a5;
--color-kiwi-400: #4ce160;
--color-kiwi-500: #3cc14e;
--color-kiwi-600: #288034;
--color-kiwi-700: #1b561a;
--color-kiwi-800: #0c310d;
--color-lilac-100: #faf5fe;
--color-lilac-200: #efddfd;
--color-lilac-300: #cc9ef0;
--color-lilac-400: #b56bf0;
--color-lilac-500: #8935cb;
--color-lilac-600: #631f99;
--color-lilac-700: #3e135f;
--color-lilac-800: #2f041e;
--color-marigold-100: #fffbf5;
--color-marigold-200: #fff0d3;
--color-marigold-300: #ffd480;
--color-marigold-400: #ffa800;
--color-marigold-500: #e99a02;
--color-marigold-600: #a36302;
--color-marigold-700: #562f01;
--color-marigold-800: #2f1b04;
--color-neutral-100: #ffffff;
--color-neutral-200: #f7f7f7;
--color-neutral-300: #e5e5e5;
--color-neutral-400: #c7c7c7;
--color-neutral-500: #8f8f8f;
--color-neutral-600: #707070;
--color-neutral-700: #363636;
--color-neutral-800: #191919;
--color-neutral-900: #000000;
--color-orange-100: #fffaf5;
--color-orange-200: #ffead3;
--color-orange-300: #ffc382;
--color-orange-400: #ff8806;
--color-orange-500: #ec7303;
--color-orange-600: #c15100;
--color-orange-700: #562501;
--color-orange-800: #2f1604;
--color-pink-100: #fef6fa;
--color-pink-200: #fcdcec;
--color-pink-300: #f79cc8;
--color-pink-400: #f155a0;
--color-pink-500: #de458e;
--color-pink-600: #a51359;
--color-pink-700: #4b112d;
--color-pink-800: #360606;
--color-red-100: #fff5f5;
--color-red-200: #ffdede;
--color-red-300: #ffa0a0;
--color-red-400: #ff5c5c;
--color-red-500: #f02d2d;
--color-red-600: #d50b0b;
--color-red-700: #570303;
--color-red-800: #2a0303;
--color-teal-100: #f7fdfd;
--color-teal-200: #d7f4f6;
--color-teal-300: #8edfe5;
--color-teal-400: #44ccd5;
--color-teal-500: #1bbfca;
--color-teal-600: #006f93;
--color-teal-700: #07465a;
--color-teal-800: #04252f;
--color-violet-100: #f6f5fe;
--color-violet-200: #e2ddfd;
--color-violet-300: #ad9efa;
--color-violet-400: #836bff;
--color-violet-500: #583aee;
--color-violet-600: #3b1fc6;
--color-violet-700: #271a68;
--color-violet-800: #20092b;
--color-yellow-100: #fffcf5;
--color-yellow-200: #fff8d5;
--color-yellow-300: #ffe58a;
--color-yellow-400: #ffbd14;
--color-yellow-500: #eebb04;
--color-yellow-600: #855f00;
--color-yellow-700: #553b06;
--color-yellow-800: #312102;
--dimension-0: 0px;
--dimension-1000: 80px;
--dimension-100: 8px;
--dimension-150: 12px;
--dimension-200: 16px;
--dimension-250: 20px;
--dimension-25: 2px;
--dimension-300: 24px;
--dimension-400: 32px;
--dimension-500: 40px;
--dimension-50: 4px;
--dimension-600: 48px;
--dimension-75: 6px;
--dimension-800: 64px;
--dimension-action-height-large: 48px;
--dimension-action-height-medium: 40px;
--dimension-action-height-small: 32px;
--dimension-icon-extra-large: 64px;
--dimension-icon-extra-small: 12px;
--dimension-icon-large: 32px;
--dimension-icon-medium: 24px;
--dimension-icon-small: 16px;
--dimension-tap-target-minimum: 48px;
--expressive-theme-avocado-dark-background: #4e4e0c;
--expressive-theme-avocado-dark-foreground: #f8fcde;
--expressive-theme-avocado-light-background: #e3f13c;
--expressive-theme-avocado-light-foreground: #4e4e0c;
--expressive-theme-avocado-medium-background: #c1d737;
--expressive-theme-avocado-medium-foreground: #4e4e0c;
--expressive-theme-blue-dark-background: #002a69;
--expressive-theme-blue-dark-foreground: #d4e5fe;
--expressive-theme-blue-light-background: #4d93fc;
--expressive-theme-blue-light-foreground: #19133a;
--expressive-theme-blue-medium-background: #0968f6;
--expressive-theme-blue-medium-foreground: #f5f9ff;
--expressive-theme-coral-dark-background: #5e1d08;
--expressive-theme-coral-dark-foreground: #ffe1d7;
--expressive-theme-coral-light-background: #ff6a38;
--expressive-theme-coral-light-foreground: #2f0e04;
--expressive-theme-coral-medium-background: #f3511b;
--expressive-theme-coral-medium-foreground: #2f0e04;
--expressive-theme-dijon-dark-background: #524500;
--expressive-theme-dijon-dark-foreground: #fcf9de;
--expressive-theme-dijon-light-background: #f6e016;
--expressive-theme-dijon-light-foreground: #524500;
--expressive-theme-dijon-medium-background: #e8d20c;
--expressive-theme-dijon-medium-foreground: #524500;
--expressive-theme-green-dark-background: #345110;
--expressive-theme-green-dark-foreground: #f0fce1;
--expressive-theme-green-light-background: #aaed56;
--expressive-theme-green-light-foreground: #345110;
--expressive-theme-green-medium-background: #92c821;
--expressive-theme-green-medium-foreground: #345110;
--expressive-theme-indigo-dark-background: #003c66;
--expressive-theme-indigo-dark-foreground: #d3effe;
--expressive-theme-indigo-light-background: #0aa7ff;
--expressive-theme-indigo-light-foreground: #01193d;
--expressive-theme-indigo-medium-background: #0099f0;
--expressive-theme-indigo-medium-foreground: #01193d;
--expressive-theme-jade-dark-background: #055743;
--expressive-theme-jade-dark-foreground: #d8f8ee;
--expressive-theme-jade-light-background: #1ed49e;
--expressive-theme-jade-light-foreground: #002b20;
--expressive-theme-jade-medium-background: #17c28f;
--expressive-theme-jade-medium-foreground: #002b20;
--expressive-theme-kiwi-dark-background: #1b561a;
--expressive-theme-kiwi-dark-foreground: #e0fae0;
--expressive-theme-kiwi-light-background: #4ce160;
--expressive-theme-kiwi-light-foreground: #0c310d;
--expressive-theme-kiwi-medium-background: #3cc14e;
--expressive-theme-kiwi-medium-foreground: #0c310d;
--expressive-theme-lilac-dark-background: #3e135f;
--expressive-theme-lilac-dark-foreground: #efddfd;
--expressive-theme-lilac-light-background: #b56bf0;
--expressive-theme-lilac-light-foreground: #2f041e;
--expressive-theme-lilac-medium-background: #8935cb;
--expressive-theme-lilac-medium-foreground: #faf5fe;
--expressive-theme-live-dark-background: #3b1fc6;
--expressive-theme-live-dark-foreground: #f6f5fe;
--expressive-theme-live-light-background: #3b1fc6;
--expressive-theme-live-light-foreground: #f6f5fe;
--expressive-theme-live-medium-background: #3b1fc6;
--expressive-theme-live-medium-foreground: #f6f5fe;
--expressive-theme-marigold-dark-background: #562f01;
--expressive-theme-marigold-dark-foreground: #fff0d3;
--expressive-theme-marigold-light-background: #ffa800;
--expressive-theme-marigold-light-foreground: #562f01;
--expressive-theme-marigold-medium-background: #e99a02;
--expressive-theme-marigold-medium-foreground: #562f01;
--expressive-theme-neutral-dark-background: #191919;
--expressive-theme-neutral-dark-foreground: #ffffff;
--expressive-theme-neutral-light-background: #f7f7f7;
--expressive-theme-neutral-light-foreground: #191919;
--expressive-theme-neutral-medium-background: #f7f7f7;
--expressive-theme-neutral-medium-foreground: #191919;
--expressive-theme-orange-dark-background: #562501;
--expressive-theme-orange-dark-foreground: #ffead3;
--expressive-theme-orange-light-background: #ff8806;
--expressive-theme-orange-light-foreground: #562501;
--expressive-theme-orange-medium-background: #ec7303;
--expressive-theme-orange-medium-foreground: #2f1604;
--expressive-theme-pink-dark-background: #4b112d;
--expressive-theme-pink-dark-foreground: #fcdcec;
--expressive-theme-pink-light-background: #f155a0;
--expressive-theme-pink-light-foreground: #360606;
--expressive-theme-pink-medium-background: #de458e;
--expressive-theme-pink-medium-foreground: #360606;
--expressive-theme-red-dark-background: #570303;
--expressive-theme-red-dark-foreground: #ffdede;
--expressive-theme-red-light-background: #ff5c5c;
--expressive-theme-red-light-foreground: #570303;
--expressive-theme-red-medium-background: #f02d2d;
--expressive-theme-red-medium-foreground: #2a0303;
--expressive-theme-teal-dark-background: #07465a;
--expressive-theme-teal-dark-foreground: #d7f4f6;
--expressive-theme-teal-light-background: #44ccd5;
--expressive-theme-teal-light-foreground: #07465a;
--expressive-theme-teal-medium-background: #1bbfca;
--expressive-theme-teal-medium-foreground: #07465a;
--expressive-theme-violet-dark-background: #271a68;
--expressive-theme-violet-dark-foreground: #e2ddfd;
--expressive-theme-violet-light-background: #836bff;
--expressive-theme-violet-light-foreground: #20092b;
--expressive-theme-violet-medium-background: #583aee;
--expressive-theme-violet-medium-foreground: #e2ddfd;
--expressive-theme-yellow-dark-background: #553b06;
--expressive-theme-yellow-dark-foreground: #fff8d5;
--expressive-theme-yellow-light-background: #ffbd14;
--expressive-theme-yellow-light-foreground: #553b06;
--expressive-theme-yellow-medium-background: #eebb04;
--expressive-theme-yellow-medium-foreground: #553b06;
--font-family-market-sans: "Market Sans";
--font-letter-spacing-display-1: -0.92px;
--font-letter-spacing-display-2: -0.72px;
--font-letter-spacing-display-3: -0.6px;
--font-letter-spacing-none: 0px;
--font-letter-spacing-signal-1: 0.7px;
--font-letter-spacing-signal-2: 0.5px;
--font-line-height-150: 12px;
--font-line-height-200: 16px;
--font-line-height-250: 20px;
--font-line-height-300: 24px;
--font-line-height-350: 28px;
--font-line-height-400: 32px;
--font-line-height-500: 40px;
--font-line-height-575: 46px;
--font-line-height-600: 56px;
--font-paragraph-spacing-none: 0px;
--font-size-body: 0.875rem;
--font-size-giant-1: 1.875rem;
--font-size-giant-2: 2.25rem;
--font-size-giant-3: 2.875rem;
--font-size-large-1: 1.25rem;
--font-size-large-2: 1.5rem;
--font-size-medium: 1rem;
--font-size-small: 0.75rem;
--font-size-smallest: 0.625rem;
--font-text-case-none: none;
--font-text-case-uppercase: uppercase;
--font-text-decoration-none: none;
--font-text-decoration-underline: underline;
--font-weight-400: 400;
--font-weight-600: 600;
--motion-duration-instant: 17ms;
--motion-duration-long-1: 667ms;
--motion-duration-long-2: 833ms;
--motion-duration-long-3: 1000ms;
--motion-duration-medium-1: 250ms;
--motion-duration-medium-2: 333ms;
--motion-duration-medium-3: 500ms;
--motion-duration-short-1: 50ms;
--motion-duration-short-2: 83ms;
--motion-duration-short-3: 167ms;
--motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);
--motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);
--motion-easing-linear: cubic-bezier(0, 0, 1, 1);
--motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);
--motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);
--motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);
--motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);
--motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);
--opacity-state-active: 0.12;
--opacity-state-focus: 0.04;
--opacity-state-hover: 0.04;
--opacity-state-press: 0.08;
--radius-extra-large: 24px;
--radius-form-input: 8px;
--radius-large: 16px;
--radius-medium: 8px;
--radius-none: 0px;
--radius-photo-large: 16px;
--radius-photo-small: 8px;
--radius-popover-container: 16px;
--radius-small: 4px;
--shadow-strong:
0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
--shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
--spacing-0: 0px;
--spacing-100: 8px;
--spacing-150: 12px;
--spacing-200: 16px;
--spacing-250: 20px;
--spacing-25: 2px;
--spacing-300: 24px;
--spacing-400: 32px;
--spacing-500: 40px;
--spacing-50: 4px;
--spacing-600: 48px;
--spacing-75: 6px;
--spacing-page-grid-gutter: 8px;
--spacing-page-grid-margin: 16px;
--typography-body-bold: 600 0.875rem/20px "Market Sans";
--typography-body: 400 0.875rem/20px "Market Sans";
--typography-caption-bold: 600 0.75rem/16px "Market Sans";
--typography-caption: 400 0.75rem/16px "Market Sans";
--typography-display-1: 600 2.875rem/56px "Market Sans";
--typography-display-2: 600 2.25rem/46px "Market Sans";
--typography-display-3: 600 1.875rem/40px "Market Sans";
--typography-signal-1: 400 0.875rem/20px "Market Sans";
--typography-signal-2: 600 0.625rem/12px "Market Sans";
--typography-subtitle-1: 400 1.25rem/28px "Market Sans";
--typography-subtitle-2: 400 1rem/24px "Market Sans";
--typography-title-1: 600 1.5rem/32px "Market Sans";
--typography-title-2: 600 1.25rem/28px "Market Sans";
--typography-title-3: 600 1rem/24px "Market Sans";
--border-radius-50: 8px;
--border-radius-100: 16px;
--border-radius-150: 24px;
--color-neutral-100-rgb: 255, 255, 255;
--color-neutral-200-rgb: 247, 247, 247;
--color-neutral-800-rgb: 25, 25, 25;
--color-neutral-900-rgb: 0, 0, 0;
--color-ai-solid-green-subtle-dark: #112611;
--color-ai-solid-blue-subtle-dark: #112c31;
--color-ai-solid-purple-subtle-dark: #20172f;
--color-ai-solid-red-subtle-dark: #321919;
--opacity-50: 0.04;
--opacity-100: 0.08;
--opacity-150: 0.12;
--opacity-200: 0.16;
--font-size-10: var(--font-size-smallest);
--font-size-12: var(--font-size-small);
--font-size-14: var(--font-size-body);
--font-size-16: var(--font-size-medium);
--font-size-18: 1.125rem;
--font-size-20: var(--font-size-large-1);
--font-size-24: var(--font-size-large-2);
--font-size-30: var(--font-size-giant-1);
--font-size-36: var(--font-size-giant-2);
--font-size-46: var(--font-size-giant-3);
--font-size-64: 4rem;
--font-size-default: var(--font-size-body);
--font-size-giant-4: var(--font-size-64);
--font-weight-regular: var(--font-weight-400);
--font-weight-bold: var(--font-weight-600);
--spacing-125: 10px;
--spacing-450: 36px;
--spacing-700: 56px;
--spacing-800: 64px;
--color-media-disabled-filter: grayscale(1) opacity(0.25);
--font-line-height-default: 1.4286;
}