Tokens Component

Design tokens are the CSS custom properties that carry every color, spacing, and other design values used across Evo Web's components, for example --color-background-accent or --color-foreground-accent. A theme is built by overriding this same set of tokens, so every component picks up the new values without any component code changing. The tables below are the full set of tokens available today.

Evo Tokens

Core, light and dark token sets are individually exposed via the following submodules:

@ebay/skin/tokens/ evo-core

eBay default primitives

@ebay/skin/tokens/ evo-light

eBay semantic aliases for light mode

@ebay/skin/tokens/ evo-dark ^*

eBay semantic aliases for dark mode

^* This sub-module will not be included automatically by its parent module; it must be explicitly included by any page that is itself dark-mode compatible.

Semantic Color Tokens

Note: To see the different theme colors, use the theme switcher

Core Expressive tokens

Core expressive tokens are a subset of core tokens which can be used in marketing or other related categories