Skip to main content

The basics of customisation

WebJET Elements is designed to be customizable without interfering with the source code of the components. In practice, three layers are most commonly used:

  1. global design tokens - for example --wje-background, --wje-color, --wje-font-family,
  2. component-specific variables - for example --wje-button-border-color,
  3. CSS Shadow Parts - if the component renders internal content in the Shadow DOM and exposes part attributes.

The package also includes ready-made light.css, dark.css and styles.css files, so you can choose whether to use the default themes or build on them with your own overrides.

Paints​

Components use a set of semantic colors, such as primary, complete, success, warning, danger, and info. These colors are defined via global CSS tokens and their tonal ranges.

CSS Variables​

WebJET Elements uses CSS variables for most styles. This allows you to centrally change the visual appearance of the entire application and individual components. For more, see CSS Variables.

CSS Shadow Parts​

If a component uses Shadow DOM, internal nodes cannot be styled externally by default. However, if the component exposes a part, you can use the ::part() pseudo-element to modify specific internal parts. See CSS Shadow Parts for details.

Content