Skip to main content

Colors

WebJET Elements uses semantic colors such as primary, complete, success, warning, danger and info. Components use them via CSS tokens defined in light.css and dark.css.

In most components, you can select the color with the color attribute:

<wje-button>Default</wje-button>
<wje-button color="primary">Primary</wje-button>
<wje-button color="complete">Complete</wje-button>
<wje-button color="success">Success</wje-button>
<wje-button color="warning">Warning</wje-button>
<wje-button color="danger">Danger</wje-button>
<wje-button color="info">Info</wje-button>

How colours are defined​

Each semantic color has multiple tones. For example, the primary palette uses tokens --wje-color-primary-1 to --wje-color-primary-11. Components choose the appropriate shade from this range according to variant or condition.

That's why it's best to change the entire tonal range when adjusting colors, not just one isolated value.

Adjustment of existing paint​

To change the primary color, overwrite the relevant tokens in the custom theme. For example, the buttons use the 1, 9, and 11 tones in particular for the various fill modes.

:root {
  --wje-color-primary-1: #fff7db;
  --wje-color-primary-9: #ffd945;
  --wje-color-primary-11: #7a5a00;
}

This gives a more consistent result than overwriting a single random variable.

When to use the color attribute and when to use CSS variables​

  • Use the color attribute when you want to use the built-in semantic colors of a component.
  • Use CSS variables when you want to change your corporate identity, color contrast, or create a custom theme.
  1. Choose the semantic color you want to map to your brand.
  2. Override its tonal range in :root or in the theme container.
  3. Check the contrast in both light and dark mode.
  4. Test major components such as wje-button, wje-badge, wje-card and form elements.

Content