@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