@ebay/skin/dist/tokens/evo-light.css

Skin - CSS modules that represent the brand eBay

:root {
    --color-background-primary: var(--color-neutral-100);
    --color-background-secondary: var(--color-neutral-200);
    --color-background-tertiary: var(--color-neutral-300);
    --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);
    --color-background-disabled: var(--color-neutral-400);
    --color-background-inverse: var(--color-neutral-700);
    --color-background-attention: var(--color-red-600);
    --color-background-confirmation: var(--color-kiwi-600);
    --color-background-information: var(--color-blue-500);
    --color-background-education: var(--color-blue-100);
    --color-background-accent: var(--color-blue-500);
    --color-background-invalid: var(--color-red-200);
    --color-background-elevated: var(--color-neutral-100);
    --color-background-strong: var(--color-neutral-800);
    --color-background-strong-rgb: var(--color-neutral-800-rgb);
    --color-foreground-primary: var(--color-neutral-800);
    --color-foreground-secondary: var(--color-neutral-600);
    --color-foreground-disabled: var(--color-neutral-400);
    --color-foreground-attention: var(--color-red-600);
    --color-foreground-confirmation: var(--color-kiwi-600);
    --color-foreground-information: var(--color-blue-500);
    --color-foreground-accent: var(--color-blue-500);
    --color-foreground-visited: var(--color-pink-600);
    --color-foreground-on-primary: var(--color-neutral-800);
    --color-foreground-on-secondary: var(--color-neutral-800);
    --color-foreground-on-disabled: var(--color-neutral-300);
    --color-foreground-on-inverse: var(--color-neutral-100);
    --color-foreground-on-accent: var(--color-neutral-100);
    --color-foreground-on-attention: var(--color-neutral-100);
    --color-foreground-on-confirmation: var(--color-neutral-100);
    --color-foreground-on-information: var(--color-neutral-100);
    --color-foreground-on-strong: var(--color-neutral-100);
    --color-foreground-link-visited: var(--color-pink-600);
    --color-foreground-link-legal: var(--color-blue-650);
    --color-foreground-link-primary: var(--color-foreground-primary);
    --color-stroke-default: var(--color-neutral-500);
    --color-stroke-accent: var(--color-blue-500);
    --color-stroke-on-accent: var(--color-neutral-100);
    --color-stroke-attention: var(--color-red-600);
    --color-stroke-on-attention: var(--color-neutral-100);
    --color-stroke-confirmation: var(--color-kiwi-600);
    --color-stroke-on-confirmation: var(--color-neutral-100);
    --color-stroke-information: var(--color-blue-500);
    --color-stroke-disabled: var(--color-neutral-400);
    --color-stroke-on-disabled: var(--color-neutral-100);
    --color-stroke-strong: var(--color-neutral-800);
    --color-stroke-inverse: var(--color-neutral-100);
    --color-stroke-subtle: var(--color-neutral-300);
    --color-state-visited: var(--color-pink-600);
    --color-state-focus-stroke: #005fcc;
    --color-state-primary-hover: #f5f5f5;
    --color-state-primary-active: #ebebeb;
    --color-state-secondary-hover: #ededed;
    --color-state-secondary-hover-rgb: 237, 237, 237;
    --color-state-secondary-active: #e3e3e3;
    --color-state-secondary-active-rgb: 227, 227, 227;
    --color-state-inverse-hover: #343434;
    --color-state-inverse-active: #323232;
    --color-state-accent-hover: #2854d9;
    --color-state-hover-foreground-on-secondary: #3461e9;
    --color-state-accent-active: #254fd2;
    --color-state-active-foreground-on-secondary: #3461e9;
    --color-state-attention-hover: #d70f38;
    --color-state-attention-active: #d70f38;
    --color-state-hover-foreground-on-secondary-desctructive: #d70f38;
    --color-state-active-foreground-on-secondary-desctructive: #d70f38;
    --color-data-viz-grid: var(--color-neutral-300);
    --color-data-viz-labels: var(--color-neutral-800);
    --color-data-viz-legend: var(--color-neutral-600);
    --color-data-viz-legend-inactive: var(--color-neutral-400);
    --color-data-viz-legend-hover: var(--color-neutral-800);
    --color-data-viz-line-chart-primary: var(--color-blue-500);
    --color-data-viz-line-chart-secondary: var(--color-violet-700);
    --color-data-viz-line-chart-tertiary: var(--color-teal-600);
    --color-data-viz-line-chart-queternary: var(--color-pink-500);
    --color-data-viz-line-chart-quinary: var(--color-pink-600);
    --color-data-viz-trend-positive: var(--color-kiwi-600);
    --color-data-viz-trend-negative: var(--color-red-600);
    --color-data-viz-chart-primary: var(--color-blue-500);
    --color-data-viz-chart-secondary: var(--color-blue-700);
    --color-data-viz-chart-tertiary-background: var(--color-indigo-200);
    --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);
    --color-data-viz-chart-quaternary-background: var(--color-teal-300);
    --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);
    --color-data-viz-chart-quinary-background: var(--color-teal-200);
    --color-data-viz-chart-quinary-stroke: var(--color-teal-600);
    --color-data-viz-tooltip-shadow-primary: #00000026;
    --color-data-viz-tooltip-shadow-secondary: #0000002b;
    --color-scrim-image: rgba(0, 0, 0, 0.04);
    --color-scrim-background: rgba(0, 0, 0, 0.32);
    --color-marketing-lime-foreground-4: var(--color-green-700);
    --color-marketing-lime-background-4: var(--color-avocado-500);
    --color-marketing-green-foreground-3: var(--color-kiwi-700);
    --color-marketing-green-background-3: var(--color-kiwi-400);
    --color-marketing-teal-foreground-3: var(--color-teal-7);
    --color-marketing-teal-background-3: var(--color-teal-400);
    --color-marketing-teal-foreground-5: var(--color-neutral-100);
    --color-marketing-teal-background-5: var(--color-teal-600);
    --color-marketing-yellow-foreground-3: var(--color-marigold-700);
    --color-marketing-yellow-background-3: var(--color-yellow-400);
    --color-marketing-orange-foreground-3: var(--color-coral-700);
    --color-marketing-orange-background-3: var(--color-coral-400);
    --color-marketing-magenta-foreground-4: var(--color-neutral-100);
    --color-marketing-magenta-background-4: var(--color-pink-400);
    --state-layer-focus: rgba(var(--color-neutral-900-rgb), var(--opacity-50));
    --state-layer-hover: rgba(var(--color-neutral-900-rgb), var(--opacity-50));
    --state-layer-pressed: rgba(
        var(--color-neutral-900-rgb),
        var(--opacity-100)
    );
    --state-layer-drag: rgba(var(--color-neutral-900-rgb), var(--opacity-150));
    --color-ai-gradient-full-spectrum: linear-gradient(
        223deg,
        var(--color-ai-solid-yellow-strong) 9.79%,
        var(--color-ai-solid-red-strong) 26.69%,
        var(--color-ai-solid-purple-strong) 41.82%,
        var(--color-ai-solid-blue-strong) 56.17%,
        var(--color-ai-solid-green-strong) 78.48%
    );
    --color-ai-gradient-green-strong: linear-gradient(
        270deg,
        var(--color-ai-solid-green-strong) 0%,
        #44cf63 25%,
        var(--color-ai-solid-blue-strong) 100%
    );
    --color-ai-gradient-blue-strong: linear-gradient(
        270deg,
        var(--color-ai-solid-green-strong) 0%,
        var(--color-ai-solid-blue-strong) 55.62%,
        #5751ea 75.7%,
        var(--color-ai-solid-purple-strong) 100%
    );
    --color-ai-gradient-purple-strong: linear-gradient(
        270deg,
        var(--color-ai-solid-purple-strong) 0%,
        var(--color-ai-solid-red-strong) 100%
    );
    --color-ai-gradient-purple-subtle: linear-gradient(
        270deg,
        var(--color-ai-solid-purple-subtle) 0%,
        var(--color-ai-solid-red-subtle) 100%
    );
    --color-ai-gradient-blue-subtle: linear-gradient(
        270deg,
        var(--color-ai-solid-green-subtle) -36%,
        var(--color-ai-solid-blue-subtle) -46.87%,
        var(--color-ai-solid-purple-subtle) 113%
    );
    --color-ai-gradient-green-subtle: linear-gradient(
        270deg,
        var(--color-ai-solid-green-subtle) 0%,
        var(--color-ai-solid-blue-subtle) 154.5%
    );
    --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
    --shadow-strong:
        0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
    --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;
    --color-loading-fill: #ededed;
    --color-loading-shimmer: linear-gradient(
        270deg,
        var(--color-loading-fill) 0%,
        var(--color-loading-fill) 34%,
        #f8f8f8 50%,
        var(--color-loading-fill) 66%,
        var(--color-loading-fill) 100%
    );
    --color-loading-fill-on-secondary: #e4e4e4;
    --color-loading-shimmer-on-secondary: linear-gradient(
        270deg,
        var(--color-loading-fill-on-secondary) 0%,
        var(--color-loading-fill-on-secondary) 34%,
        #ededed 50%,
        var(--color-loading-fill-on-secondary) 66%,
        var(--color-loading-fill-on-secondary) 100%
    );
    --color-loading-ai-gradient-purple-subtle: linear-gradient(
        270deg,
        var(--color-ai-solid-red-subtle) 0%,
        var(--color-ai-solid-red-subtle) 34%,
        var(--color-ai-solid-purple-subtle) 50%,
        var(--color-ai-solid-red-subtle) 66%,
        var(--color-ai-solid-red-subtle) 100%
    );
    --color-loading-ai-gradient-blue-subtle: linear-gradient(
        270deg,
        var(--color-ai-solid-blue-subtle) 0%,
        var(--color-ai-solid-blue-subtle) 34%,
        var(--color-ai-solid-purple-subtle) 50%,
        var(--color-ai-solid-blue-subtle) 66%,
        var(--color-ai-solid-blue-subtle) 100%
    );
    --color-loading-ai-gradient-green-subtle: linear-gradient(
        270deg,
        var(--color-ai-solid-green-subtle) 0%,
        var(--color-ai-solid-green-subtle) 34%,
        var(--color-ai-solid-blue-subtle) 50%,
        var(--color-ai-solid-green-subtle) 66%,
        var(--color-ai-solid-green-subtle) 100%
    );
    --color-media-disabled-filter: grayscale(1) opacity(0.25);
    /* Motion Functions */
    --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);
    --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);
    --motion-easing-quick-exit: cubic-bezier(1, 0, 0, 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-continuous: cubic-bezier(0.3, 0, 0.7, 1);
    --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.5);
    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
    /* Motion Timings */
    --motion-duration-instant: 17ms;
    --motion-duration-short-1: 50ms;
    --motion-duration-short-2: 83ms;
    --motion-duration-short-3: 167ms;
    --motion-duration-medium-1: 250ms;
    --motion-duration-medium-2: 333ms;
    --motion-duration-medium-3: 500ms;
    --motion-duration-long-1: 667ms;
    --motion-duration-long-2: 883ms;
    --motion-duration-long-3: 1000ms;
    /* Typography */
    --font-line-height-default: var(--font-line-height-250);
}