@ebay/skin/tokens
DS v1.0Evo Tokens
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 its parent module; it must be explicitly included by any page that is itself dark-mode compatible.
Evo Live Theme
Evo live is a theme built on top of evo-core. To import evo-live theme
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-live-light
- eBay semantic aliases for light mode
- @ebay/skin/tokens/ evo-live-dark *
- eBay semantic aliases for dark mode
There is also a bundled module @ebay/skin/evo-live Which imports all live tokens
Subthemes
To swap themes within a page, use the token class themes. These are exported as @ebay/skin/evo-live-class and @ebay/skin/evo-class Then, within your page, add a class of .evo-theme-live and all components within that element will use the partial theme.
Note, this example only works on default evo theme
Semantic Color Tokens
Note: To see the different theme colors, use the theme switcher
- --color-ai-solid-blue-strong
- --color-ai-solid-blue-subtle
- --color-ai-solid-green-strong
- --color-ai-solid-green-subtle
- --color-ai-solid-purple-strong
- --color-ai-solid-purple-subtle
- --color-ai-solid-red-strong
- --color-ai-solid-red-subtle
- --color-ai-solid-yellow-strong
- --color-background-accent
- --color-background-attention
- --color-background-disabled
- --color-background-education
- --color-background-elevated
- --color-background-inverse
- --color-background-on-image
- --color-background-on-secondary
- --color-background-primary
- --color-background-secondary-on-elevated
- --color-background-secondary
- --color-background-strong
- --color-background-success
- --color-background-tertiary
- --color-background-transparent
- --color-border-accent
- --color-border-attention
- --color-border-disabled
- --color-border-medium
- --color-border-on-accent
- --color-border-on-attention
- --color-border-on-disabled
- --color-border-on-inverse
- --color-border-on-success
- --color-border-strong
- --color-border-subtle
- --color-border-success
- --color-brand-1
- --color-brand-2
- --color-brand-3
- --color-brand-4
- --color-foreground-accent
- --color-foreground-attention
- --color-foreground-disabled
- --color-foreground-link-legal
- --color-foreground-link-primary
- --color-foreground-link-visited
- --color-foreground-on-accent
- --color-foreground-on-attention
- --color-foreground-on-disabled
- --color-foreground-on-inverse
- --color-foreground-on-strong
- --color-foreground-on-success
- --color-foreground-primary
- --color-foreground-secondary
- --color-foreground-success
- --color-gradient-ai-blue-strong
- --color-gradient-ai-blue-subtle
- --color-gradient-ai-full-color-diagonal
- --color-gradient-ai-green-strong
- --color-gradient-ai-green-subtle
- --color-gradient-ai-purple-strong
- --color-gradient-ai-purple-subtle
- --color-gradient-image-scrim
- --color-gradient-loading-shimmer-on-secondary
- --color-gradient-loading-shimmer
- --color-loading-fill-on-secondary
- --color-loading-fill
- --color-scrim-background
- --color-state-layer-focus
- --color-state-layer-hover
- --color-state-layer-pressed
- --color-state-layer-selected
Core Expressive tokens
Core expressive tokens are a subset of core tokens which can be used in marketing or other related categories
- --expressive-theme-avocado-light-background
- --expressive-theme-avocado-light-foreground
- --expressive-theme-avocado-medium-background
- --expressive-theme-avocado-medium-foreground
- --expressive-theme-avocado-dark-background
- --expressive-theme-avocado-dark-foreground
- --expressive-theme-blue-light-background
- --expressive-theme-blue-light-foreground
- --expressive-theme-blue-medium-background
- --expressive-theme-blue-medium-foreground
- --expressive-theme-blue-dark-background
- --expressive-theme-blue-dark-foreground
- --expressive-theme-coral-light-background
- --expressive-theme-coral-light-foreground
- --expressive-theme-coral-medium-background
- --expressive-theme-coral-medium-foreground
- --expressive-theme-coral-dark-background
- --expressive-theme-coral-dark-foreground
- --expressive-theme-dijon-light-background
- --expressive-theme-dijon-light-foreground
- --expressive-theme-dijon-medium-background
- --expressive-theme-dijon-medium-foreground
- --expressive-theme-dijon-dark-background
- --expressive-theme-dijon-dark-foreground
- --expressive-theme-green-light-background
- --expressive-theme-green-light-foreground
- --expressive-theme-green-medium-background
- --expressive-theme-green-medium-foreground
- --expressive-theme-green-dark-background
- --expressive-theme-green-dark-foreground
- --expressive-theme-indigo-light-background
- --expressive-theme-indigo-light-foreground
- --expressive-theme-indigo-medium-background
- --expressive-theme-indigo-medium-foreground
- --expressive-theme-indigo-dark-background
- --expressive-theme-indigo-dark-foreground
- --expressive-theme-jade-light-background
- --expressive-theme-jade-light-foreground
- --expressive-theme-jade-medium-background
- --expressive-theme-jade-medium-foreground
- --expressive-theme-jade-dark-background
- --expressive-theme-jade-dark-foreground
- --expressive-theme-kiwi-light-background
- --expressive-theme-kiwi-light-foreground
- --expressive-theme-kiwi-medium-background
- --expressive-theme-kiwi-medium-foreground
- --expressive-theme-kiwi-dark-background
- --expressive-theme-kiwi-dark-foreground
- --expressive-theme-lilac-light-background
- --expressive-theme-lilac-light-foreground
- --expressive-theme-lilac-medium-background
- --expressive-theme-lilac-medium-foreground
- --expressive-theme-lilac-dark-background
- --expressive-theme-lilac-dark-foreground
- --expressive-theme-marigold-light-background
- --expressive-theme-marigold-light-foreground
- --expressive-theme-marigold-medium-background
- --expressive-theme-marigold-medium-foreground
- --expressive-theme-marigold-dark-background
- --expressive-theme-marigold-dark-foreground
- --expressive-theme-neutral-light-background
- --expressive-theme-neutral-light-foreground
- --expressive-theme-neutral-medium-background
- --expressive-theme-neutral-medium-foreground
- --expressive-theme-neutral-dark-background
- --expressive-theme-neutral-dark-foreground
- --expressive-theme-orange-light-background
- --expressive-theme-orange-light-foreground
- --expressive-theme-orange-medium-background
- --expressive-theme-orange-medium-foreground
- --expressive-theme-orange-dark-background
- --expressive-theme-orange-dark-foreground
- --expressive-theme-pink-light-background
- --expressive-theme-pink-light-foreground
- --expressive-theme-pink-medium-background
- --expressive-theme-pink-medium-foreground
- --expressive-theme-pink-dark-background
- --expressive-theme-pink-dark-foreground
- --expressive-theme-red-light-background
- --expressive-theme-red-light-foreground
- --expressive-theme-red-medium-background
- --expressive-theme-red-medium-foreground
- --expressive-theme-red-dark-background
- --expressive-theme-red-dark-foreground
- --expressive-theme-teal-light-background
- --expressive-theme-teal-light-foreground
- --expressive-theme-teal-medium-background
- --expressive-theme-teal-medium-foreground
- --expressive-theme-teal-dark-background
- --expressive-theme-teal-dark-foreground
- --expressive-theme-violet-light-background
- --expressive-theme-violet-light-foreground
- --expressive-theme-violet-medium-background
- --expressive-theme-violet-medium-foreground
- --expressive-theme-violet-dark-background
- --expressive-theme-violet-dark-foreground
- --expressive-theme-yellow-light-background
- --expressive-theme-yellow-light-foreground
- --expressive-theme-yellow-medium-background
- --expressive-theme-yellow-medium-foreground
- --expressive-theme-yellow-dark-background
- --expressive-theme-yellow-dark-foreground
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-avocado-800
- --color-blue-100
- --color-blue-200
- --color-blue-300
- --color-blue-400
- --color-blue-500
- --color-blue-600
- --color-blue-650
- --color-blue-700
- --color-blue-800
- --color-coral-100
- --color-coral-200
- --color-coral-300
- --color-coral-400
- --color-coral-500
- --color-coral-600
- --color-coral-700
- --color-coral-800
- --color-dijon-100
- --color-dijon-200
- --color-dijon-300
- --color-dijon-400
- --color-dijon-500
- --color-dijon-600
- --color-dijon-700
- --color-dijon-800
- --color-green-100
- --color-green-200
- --color-green-300
- --color-green-400
- --color-green-500
- --color-green-600
- --color-green-700
- --color-green-800
- --color-indigo-100
- --color-indigo-200
- --color-indigo-300
- --color-indigo-400
- --color-indigo-500
- --color-indigo-600
- --color-indigo-700
- --color-indigo-800
- --color-jade-100
- --color-jade-200
- --color-jade-300
- --color-jade-400
- --color-jade-500
- --color-jade-600
- --color-jade-700
- --color-jade-800
- --color-kiwi-100
- --color-kiwi-200
- --color-kiwi-300
- --color-kiwi-400
- --color-kiwi-500
- --color-kiwi-600
- --color-kiwi-700
- --color-kiwi-800
- --color-lilac-100
- --color-lilac-200
- --color-lilac-300
- --color-lilac-400
- --color-lilac-500
- --color-lilac-600
- --color-lilac-700
- --color-lilac-800
- --color-marigold-100
- --color-marigold-200
- --color-marigold-300
- --color-marigold-400
- --color-marigold-500
- --color-marigold-600
- --color-marigold-700
- --color-marigold-800
- --color-neutral-100
- --color-neutral-200
- --color-neutral-300
- --color-neutral-400
- --color-neutral-500
- --color-neutral-600
- --color-neutral-700
- --color-neutral-800
- --color-neutral-900
- --color-orange-100
- --color-orange-200
- --color-orange-300
- --color-orange-400
- --color-orange-500
- --color-orange-600
- --color-orange-700
- --color-orange-800
- --color-pink-100
- --color-pink-200
- --color-pink-300
- --color-pink-400
- --color-pink-500
- --color-pink-600
- --color-pink-700
- --color-pink-800
- --color-red-100
- --color-red-200
- --color-red-300
- --color-red-400
- --color-red-500
- --color-red-600
- --color-red-700
- --color-red-800
- --color-teal-100
- --color-teal-200
- --color-teal-300
- --color-teal-400
- --color-teal-500
- --color-teal-600
- --color-teal-700
- --color-teal-800
- --color-violet-100
- --color-violet-200
- --color-violet-300
- --color-violet-400
- --color-violet-500
- --color-violet-600
- --color-violet-700
- --color-violet-800
- --color-yellow-100
- --color-yellow-200
- --color-yellow-300
- --color-yellow-400
- --color-yellow-500
- --color-yellow-600
- --color-yellow-700
- --color-yellow-800