Skip to main content

Templates

WebJET Elements defines its default theme through global CSS tokens. You will find them primarily in light.css and dark.css. When creating a custom theme, it is best to start from those tokens instead of overriding individual internal component styles.

What makes up a theme​

In practice, a theme is built from several layers:

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

The most important global tokens​

TokenPurpose
--wje-backgroundBase application or section background
--wje-colorDefault text color
--wje-border-colorDefault border color
--wje-font-familyPrimary font family
--wje-shadow-mediumMedium-strength shadow
--wje-color-primary-1..11Primary color tone scale
--wje-color-success-1..11Success color tone scale
--wje-color-danger-1..11Danger color tone scale

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 adapt the semantic color scales to your brand.
  3. Adjust component tokens only where global values are not enough.
  4. Test both light and dark mode and verify contrast on interactive states.

Tone scale generator​

If you want to experiment with surface and text tones, use the generator below as a helper while building 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