🎨 eBay Design System Tokens

Tokens are representations of design decisions. They abstract raw values into scalable, meaningful, and readable labels spanning across teams and platforms.

Overview

Design tokens represent repeated decisions throughout a system and provide an avenue to apply them consistently. They replace raw values with meaningful labels that convey intention.

Tokens progress in specificity from raw values to core tokens, semantic tokens, and component tokens.

Tokens apply to a variety of value types, including:

• color
• border
• breakpoints
• composition
• dimension
• font
• gradients
• illustration
• motion
• opacity
• radius
• shadow
• spacing
• typography

🌎 Web

We currently generate SCSS mixins which represent css variables into dist/mixins.

Currently these files are:

| File | Description | | --------------------------------------- | -------------------------------- | | dist/mixins/evo-core.scss | @mixin evo-core | | dist/mixins/evo-light.scss | @mixin evo-light | | dist/mixins/evo-dark.scss | @mixin evo-dark | | dist/mixins/live-light.scss | 🆕 @mixin live-light | | dist/mixins/live-dark.scss | 🆕 @mixin live-dark | | dist/mixins/live-marketing-light.scss | 🆕 @mixin live-marketing-light | | dist/mixins/live-marketing-dark.scss | 🆕 @mixin live-marketing-dark |