@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
207 lines (206 loc) • 6.73 kB
CSS
:root {
--border-radius-50: 8px;
--border-radius-100: 16px;
--border-radius-150: 24px;
--color-neutral-100: #fff;
--color-neutral-100-rgb: 255, 255, 255;
--color-neutral-200: #f7f7f7;
--color-neutral-200-rgb: 247, 247, 247;
--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-800-rgb: 25, 25, 25;
--color-neutral-900: #000;
--color-neutral-900-rgb: 0, 0, 0;
--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-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-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-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-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-blue-100: #f5f9ff;
--color-blue-200: #d4e5fe;
--color-blue-300: #93c9ff;
--color-blue-400: #659eff;
--color-blue-500: #3665f3;
--color-blue-600: #382aef;
--color-blue-650: #003aa5;
--color-blue-700: #002a69;
--color-blue-800: #19133a;
--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-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-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-jade-100: #f7fdfd;
--color-jade-200: #d8f8ee;
--color-jade-300: #8feace;
--color-jade-400: #1ed49e;
--color-jade-500: #1ed49e;
--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-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-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;
--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-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-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-ai-solid-green-strong: #4ee04b;
--color-ai-solid-green-subtle: #f1fdf1;
--color-ai-solid-green-subtle-dark: #112611;
--color-ai-solid-blue-strong: #0968f6;
--color-ai-solid-blue-subtle: #f0f6fe;
--color-ai-solid-blue-subtle-dark: #112c31;
--color-ai-solid-purple-strong: #993ee0;
--color-ai-solid-purple-subtle: #f9f3fd;
--color-ai-solid-purple-subtle-dark: #20172f;
--color-ai-solid-red-strong: #ff4242;
--color-ai-solid-red-subtle: #fff4f4;
--color-ai-solid-red-subtle-dark: #321919;
--color-ai-solid-yellow-strong: #ffd80e;
--opacity-50: 0.04;
--opacity-100: 0.08;
--opacity-150: 0.12;
--opacity-200: 0.16;
--font-size-10: 0.625rem;
--font-size-12: 0.75rem;
--font-size-14: 0.875rem;
--font-size-16: 1rem;
--font-size-18: 1.125rem;
--font-size-20: 1.25rem;
--font-size-24: 1.5rem;
--font-size-30: 1.875rem;
--font-size-36: 2.25rem;
--font-size-46: 2.875rem;
--font-size-64: 4rem;
--font-size-smallest: var(--font-size-10);
--font-size-small: var(--font-size-12);
--font-size-default: var(--font-size-14);
--font-size-medium: var(--font-size-16);
--font-size-large-1: var(--font-size-20);
--font-size-large-2: var(--font-size-24);
--font-size-giant-1: var(--font-size-30);
--font-size-giant-2: var(--font-size-36);
--font-size-giant-3: var(--font-size-46);
--font-size-giant-4: var(--font-size-64);
/*
Ratio of 20px (base line height) / 14px (body font)
This needs to be unitless for optimal scaling
*/
--font-line-height-250: 1.4286;
--font-weight-regular: 500;
--font-weight-bold: 700;
--spacing-25: 2px;
--spacing-50: 4px;
--spacing-75: 6px;
--spacing-100: 8px;
--spacing-125: 10px;
--spacing-150: 12px;
--spacing-200: 16px;
--spacing-250: 20px;
--spacing-300: 24px;
--spacing-400: 32px;
--spacing-450: 36px;
--spacing-600: 48px;
--spacing-700: 56px;
--spacing-800: 64px;
}