@ebay/skin/tokens

DS v1.0

Contains all custom properties necessary to correctly render the Evo Design System, in accordance with the token system .

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 it's parent module; it must be explicitly included by any page that is itself dark-mode compatible.

Semantic Color Tokens

color-background-primary
color-background-secondary
color-background-disabled
color-background-inverse
color-background-attention
color-background-confirmation
color-background-information
color-background-accent
color-background-invalid
color-foreground-primary
color-foreground-secondary
color-foreground-disabled
color-foreground-attention
color-foreground-confirmation
color-foreground-information
color-foreground-accent
color-foreground-visited
color-foreground-on-primary
color-foreground-on-secondary
color-foreground-on-disabled
color-foreground-on-inverse
color-foreground-on-accent
color-foreground-on-attention
color-foreground-on-confirmation
color-foreground-on-information
color-stroke-default
color-stroke-accent
color-stroke-attention
color-stroke-confirmation
color-stroke-information
color-stroke-disabled
color-stroke-strong
color-stroke-subtle
color-state-visited
color-state-primary-hover
color-state-primary-active
color-state-secondary-hover
color-state-secondary-active
color-state-inverse-hover
color-state-inverse-active
color-state-accent-hover
color-state-accent-active
color-state-attention-hover
color-state-attention-active
color-scrim-image
color-scrim-background
color-ai-gradient-full-spectrum
color-ai-gradient-green-strong
color-ai-gradient-blue-strong
color-ai-gradient-purple-strong
color-ai-gradient-green-subtle
color-ai-gradient-blue-subtle
color-ai-gradient-purple-subtle

Primitive Color Tokens

NOTE: Primitive tokens are not intended to be used by the application; instead, they are utilized by the semantic tokens.

color-avocado-100
color-avocado-200
color-avocado-300
color-avocado-400
color-avocado-500
color-avocado-600
color-avocado-700
color-marigold-100
color-marigold-200
color-marigold-300
color-marigold-400
color-marigold-500
color-marigold-600
color-marigold-700
color-blue-100
color-blue-200
color-blue-300
color-blue-400
color-blue-500
color-blue-600
color-blue-700
color-coral-100
color-coral-200
color-coral-300
color-coral-400
color-coral-500
color-coral-600
color-coral-700
color-orange-100
color-orange-200
color-orange-300
color-orange-400
color-orange-500
color-orange-600
color-orange-700
color-dijon-100
color-dijon-200
color-dijon-300
color-dijon-400
color-dijon-500
color-dijon-600
color-dijon-700
color-pink-100
color-pink-200
color-pink-300
color-pink-400
color-pink-500
color-pink-600
color-pink-700
color-green-100
color-green-200
color-green-300
color-green-400
color-green-500
color-green-600
color-green-700
color-red-100
color-red-200
color-red-300
color-red-400
color-red-500
color-red-600
color-red-700
color-indigo-100
color-indigo-200
color-indigo-300
color-indigo-400
color-indigo-500
color-indigo-600
color-indigo-700
color-teal-100
color-teal-200
color-teal-300
color-teal-400
color-teal-500
color-teal-600
color-teal-700
color-jade-100
color-jade-200
color-jade-300
color-jade-400
color-jade-500
color-jade-600
color-jade-700
color-yellow-100
color-yellow-200
color-yellow-300
color-yellow-400
color-yellow-500
color-yellow-600
color-yellow-700
color-kiwi-100
color-kiwi-200
color-kiwi-300
color-kiwi-400
color-kiwi-500
color-kiwi-600
color-kiwi-700
color-violet-100
color-violet-200
color-violet-300
color-violet-400
color-violet-500
color-violet-600
color-violet-700
color-lilac-100
color-lilac-200
color-lilac-300
color-lilac-400
color-lilac-500
color-lilac-600
color-lilac-700
color-neutral-100
color-neutral-200
color-neutral-300
color-neutral-400
color-neutral-500
color-neutral-600
color-neutral-700
color-neutral-900