Skip to main content

Templates

WebJET Elements defines a default theme using global CSS tokens. You can find them mainly in the light.css and dark.css files. When creating your own theme, we recommend starting with these tokens rather than manually overwriting each component's internal stylesheet.

What constitutes a theme​

In practice, the topic consists of several layers:

  1. Global surfaces and text - for example --wje-background, --wje-color, --wje-border-color.
  2. Typography and rhythm - for example --wje-font-family, --wje-font-size, --wje-line-height-normal.
  3. Rohy, spacing and shadows - for example --wje-border-radius-medium, --wje-spacing-medium, --wje-shadow-medium.
  4. Semantic color ranges - for example --wje-color-primary-1 to --wje-color-primary-11.
  5. Component tokens - for example --wje-card-background, --wje-input-border-color, --wje-button-border-radius.

The most important global tokens​

TokenMeaning of
--wje-backgroundBasic background of the application or section
--wje-colorDefault text colour
--wje-border-colorDefault border colour
--wje-font-familyPrimary font
--its-shadow-mediumMedium shade
--wje-color-primary-1..11Tonal range of the primary colour
--wje-color-success-1..11Tonal range of success colours
--wje-color-danger-1..11Tonal range of danger colours

Example of a custom theme​

:root {
  --wje-background: #ffffff;
  --wje-color: #111827;
  --wje-border-color: #d1d5db;

  --wje-font-family: Inter, system-ui, sans-serif;

  --wje-color-primary-1: #eef2ff;
  --wje-color-primary-9: #4f46e5;
  --wje-color-primary-11: #312e81;

  --wje-card-background: #ffffff;
  --wje-card-color: #111827;
}
  1. Start with the global tokens (--wje-background, --wje-color, --wje-border-color).
  2. Then adjust the semantic color palettes according to the brand manual.
  3. Then fine-tune the component tokens only where the global values are not sufficient.
  4. Test both light and dark modes and the contrast of interactive elements.

Graduated color generator​

If you want to experiment with background tones and text, use the generator below as a tool to help you create your own theme.

Pozadie

Text

:root {
	--wj-background-color: #ffffff;
	--wj-background-color-rgb: 255,255,255;

	--wj-text-color: #000000;
	--wj-text-color-rgb: 0,0,0;

	--wj-color-step-1: #f2f2f2;
	--wj-color-step-2: #e6e6e6;
	--wj-color-step-3: #d9d9d9;
	--wj-color-step-4: #cccccc;
	--wj-color-step-5: #bfbfbf;
	--wj-color-step-6: #b3b3b3;
	--wj-color-step-7: #a6a6a6;
	--wj-color-step-8: #999999;
	--wj-color-step-9: #8c8c8c;
	--wj-color-step-10: #808080;
	--wj-color-step-11: #737373;
}

Content