Semantic tokens
Role aliases that components reference. Override these to retheme without touching primitives.
Light theme
| Token | Value |
|---|---|
--ep-color-background | {primitive.color.light} |
--ep-color-background-faded | {primitive.color.light-faded} |
--ep-color-contrast | {primitive.color.dark} |
--ep-color-contrast-faded | {primitive.color.dark-faded} |
--ep-color-primary | {primitive.color.blue.700} |
--ep-color-primary-contrast | #fefefe |
--ep-color-primary-variant | {primitive.color.cyan.300} |
--ep-color-primary-variant-contrast | {primitive.color.cyan.700} |
--ep-color-secondary | {primitive.color.purple.500} |
--ep-color-secondary-contrast | {primitive.color.purple.900} |
--ep-color-secondary-variant | {primitive.color.purple.300} |
--ep-color-secondary-variant-contrast | {primitive.color.purple.700} |
--ep-color-transparent | transparent |
--ep-color-hyperlink | {primitive.color.blue.500} |
--ep-color-divider | {primitive.color.grey.300} |
--ep-color-disabled | {primitive.color.grey.500} |
--ep-color-offline | {primitive.color.grey.100} |
--ep-color-error | {primitive.color.red.500} |
--ep-color-error-variant | {primitive.color.red.300} |
--ep-color-success | {primitive.color.green.500} |
--ep-color-success-variant | {primitive.color.green.300} |
--ep-color-warning | {primitive.color.yellow.500} |
--ep-color-warning-variant | {primitive.color.yellow.300} |
--ep-color-information | {primitive.color.blue.300} |
--ep-color-information-variant | #a6ccf1 |
--ep-font-family-base | {primitive.font.family.inter} |
--ep-font-family-serif | {primitive.font.family.serif} |
--ep-font-family-mono | {primitive.font.family.mono} |
--ep-radius-base | {primitive.radius.md} |
--ep-shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.05) |
--ep-shadow-md | rgba(149, 157, 165, 0.2) 0px 2px 8px |
--ep-shadow-lg | rgba(149, 157, 165, 0.2) 0px 8px 24px |
--ep-transition-base | all {primitive.duration.normal} {primitive.easing.standard} |
--ep-outline-focus | 1px solid {color.hyperlink} |
Dark theme overrides
| Token | Value |
|---|---|
--ep-color-background | {primitive.color.dark} |
--ep-color-background-faded | {primitive.color.dark-faded} |
--ep-color-contrast | {primitive.color.light} |
--ep-color-contrast-faded | {primitive.color.light-faded} |
--ep-color-divider | #3a4350 |
--ep-color-disabled | #6b7280 |
--ep-color-offline | #2c3440 |