KoliBri - ECL-Themes (Draft)

Motivation

The ECL themes provide styling according to the Styleguides of the European Commission and European Union for KoliBri-Components.

Installation

You can install the KoliBri themes with npm, pnpm or yarn:

npm i @public-ui/theme-ecl
pnpm i @public-ui/theme-ecl
yarn add @public-ui/theme-ecl

Usage

Register the theme like this:

import { register } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/loader';
import {
	ECL_EC, // or ECL_EU
} from '@public-ui/theme-ecl';

register(
	ECL_EC, // or ECL_EU
	defineCustomElements,
)
	.then(() => {
		/* KoliBri ready */
	})
	.catch((error) => {
		/* Handle errors */
	});

Design Tokens

The token values are read from src/ecl-ec/global.scss and src/ecl-eu/global.scss and control the colors, fonts and spacing of the components.

ECL EC Theme

| Token | Default value | Meaning | | ----------------------- | --------------------- | ----------------------- | | --color-blue | #004494 | Primary blue tone | | --color-yellow | #ffd617 | Primary yellow tone | | --color-grey | #404040 | Base gray | | --color-blue-130 | #002f67 | Darker blue shade | | --color-blue-120 | #003776 | Darker blue shade | | --color-blue-110 | #003d84 | Darker blue shade | | --color-blue-100 | var(--color-blue) | Base blue | | --color-blue-75 | #4073af | Lighter blue shade | | --color-blue-50 | #bfd0e4 | Very light blue shade | | --color-blue-25 | #bfd0e4 | Very light blue shade | | --color-blue-5 | #f2f5f9 | Almost white | | --color-yellow-120 | #f8ae21 | Darker yellow shade | | --color-yellow-110 | #fbc11d | Darker yellow shade | | --color-yellow-100 | var(--color-yellow) | Base yellow | | --color-yellow-75 | #ffde39 | Lighter yellow shade | | --color-yellow-50 | #ffe879 | Lighter yellow shade | | --color-yellow-25 | #fff4bb | Very light yellow shade | | --color-grey-100 | var(--color-grey) | Base gray | | --color-grey-75 | #707070 | Medium gray | | --color-grey-50 | #9f9f9f | Light gray | | --color-grey-25 | #cfcfcf | Light gray | | --color-grey-20 | #d9d9d9 | Very light gray | | --color-grey-15 | #e3e3e3 | Very light gray | | --color-grey-10 | #ebebeb | Very light gray | | --color-grey-5 | #f5f5f5 | Almost white | | --color-grey-3 | #f9f9f9 | Almost white | | --color-blue-n | #006fb4 | Additional blue tone | | --color-orange | #f29527 | Orange for notices | | --color-green | #467a39 | Green for success | | --color-red | #da2131 | Red for errors | | --color-red-1xx | #981722 | Dark red tone | | --color-black | #000 | Black | | --color-white | #fff | White | | --font-family | Arial, sans-serif | Default font | | --font-size | #{to-rem(16)} | Base font size | | --font-weight | 400 | Regular font weight | | --font-weight-bold | 600 | Bold font | | --line-height-regular | 1.5 | Line height text | | --line-height-heading | 1.2 | Line height headings | | --spacing-4xl | #{to-rem(64)} | Largest spacing | | --spacing-3xl | #{to-rem(48)} | Very large spacing | | --spacing-2xl | #{to-rem(40)} | Very large spacing | | --spacing-xl | #{to-rem(32)} | Large spacing | | --spacing-l | #{to-rem(24)} | Large spacing | | --spacing-m | #{to-rem(16)} | Standard spacing | | --spacing-s | #{to-rem(12)} | Small spacing | | --spacing-xs | #{to-rem(8)} | Very small spacing | | --spacing-2xs | #{to-rem(4)} | Tiny spacing |

ECL EU Theme

| Token | Default value | Meaning | | ------------------------- | ------------------- | ----------------------- | | --color-blue | #0e47cb | Primary blue tone | | --color-blue-140 | #082b7a | Very dark blue shade | | --color-blue-130 | #082b7a | Very dark blue shade | | --color-blue-120 | #0b39a2 | Darker blue shade | | --color-blue-110 | #0d40b7 | Darker blue shade | | --color-blue-100 | #0e47cb | Base blue | | --color-blue-80 | #3e6cd5 | Lighter blue shade | | --color-blue-60 | #6e91e0 | Lighter blue shade | | --color-blue-40 | #9fb5ea | Very light blue shade | | --color-blue-20 | #cfdaf5 | Very light blue shade | | --color-blue-10 | #e7edfa | Very light blue shade | | --color-blue-5 | #f3f6fc | Almost white | | --color-yellow | #ffcc00 | Primary yellow tone | | --color-yellow-140 | #997a00 | Very dark yellow shade | | --color-yellow-130 | #b38f00 | Very dark yellow shade | | --color-yellow-120 | #cca300 | Darker yellow shade | | --color-yellow-110 | #e6b800 | Darker yellow shade | | --color-yellow-100 | #ffcc00 | Base yellow | | --color-yellow-80 | #ffd633 | Lighter yellow shade | | --color-yellow-60 | #ffe066 | Lighter yellow shade | | --color-yellow-40 | #ffeb99 | Very light yellow shade | | --color-yellow-20 | #fff5cc | Very light yellow shade | | --color-yellow-10 | #fffae6 | Very light yellow shade | | --color-yellow-5 | #fffcf2 | Almost white | | --color-grey | #262b38 | Dark gray | | --color-grey-140 | #171a22 | Very dark gray | | --color-grey-130 | #1b1e27 | Very dark gray | | --color-grey-120 | #1e222d | Darker gray | | --color-grey-110 | #222732 | Darker gray | | --color-grey-100 | #262b38 | Base gray | | --color-grey-80 | #515560 | Medium gray | | --color-grey-75 | #515560 | Medium gray | | --color-grey-60 | #7d8088 | Light gray | | --color-grey-40 | #a8aaaf | Light gray | | --color-grey-20 | #d4d5d7 | Very light gray | | --color-grey-10 | #e9eaeb | Very light gray | | --color-grey-5 | #f4f5f5 | Almost white | | --color-grey-3 | #f9f9f9 | Almost white | | --color-orange | #ff6200 | Orange tone | | --color-orange-140 | #993b00 | Very dark orange | | --color-orange-130 | #b34500 | Very dark orange | | --color-orange-120 | #cc4e00 | Darker orange | | --color-orange-110 | #e65800 | Darker orange | | --color-orange-100 | #e65800 | Base orange | | --color-orange-80 | #ff8133 | Light orange | | --color-orange-60 | #ff914d | Light orange | | --color-orange-40 | #ffb180 | Very light orange | | --color-orange-20 | #ffd0b3 | Very light orange | | --color-orange-10 | #ffefe6 | Very light orange | | --color-orange-5 | #fff7f2 | Almost white | | --color-green | #00c991 | Green for success | | --color-green-140 | #007957 | Very dark green | | --color-green-130 | #008d66 | Very dark green | | --color-green-120 | #008d66 | Darker green | | --color-green-110 | #00b583 | Darker green | | --color-green-100 | #00c991 | Base green | | --color-green-80 | #00c991 | Light green | | --color-green-60 | #66dfbd | Light green | | --color-green-40 | #99e9d3 | Very light green | | --color-green-20 | #ccf4e9 | Very light green | | --color-green-10 | #e6faf4 | Very light green | | --color-green-5 | #f2fcf9 | Almost white | | --color-red | #ef0044 | Red for errors | | --color-red-140 | #8f0029 | Very dark red | | --color-red-130 | #a70030 | Very dark red | | --color-red-120 | #bf0036 | Darker red | | --color-red-110 | #d7003d | Darker red | | --color-red-100 | #ef0044 | Base red | | --color-red-80 | #f23369 | Helles Rot | | --color-red-60 | #f5668f | Helles Rot | | --color-red-40 | #f999b4 | Very light red | | --color-red-20 | #fcccda | Very light red | | --color-red-10 | #fde6ec | Very light red | | --color-red-5 | #fef2f5 | Almost white | | --color-accent-blue-100 | #00e9ff | Blue accent color | | --color-accent-blue-30 | #b3f8ff | Very light accent color | | --color-purple | #510dcd | Purple accent | | --color-purple-140 | #31087b | Very dark purple | | --color-purple-130 | #390990 | Very dark purple | | --color-purple-120 | #410aa4 | Darker purple | | --color-purple-110 | #490cb9 | Darker purple | | --color-purple-100 | #510dcd | Base purple | | --color-purple-80 | #743dd7 | Lighter purple | | --color-purple-60 | #976ee1 | Lighter purple | | --color-purple-40 | #bf9af1 | Very light purple | | --color-purple-20 | #dccff5 | Very light purple | | --color-purple-10 | #eee7fa | Very light purple | | --color-purple-5 | #eee7fa | Very light purple | | --color-white | #fff | White | | --color-black | #000 | Black | | --font-family | Arial, sans-serif | Default font | | --font-size | #{to-rem(16)} | Base font size | | --font-weight-regular | 400 | Regular font weight | | --font-weight-bold | 700 | Bold font | | --line-height-regular | 1.5 | Line height text | | --line-height-heading | 1.2 | Line height headings | | --spacing-4xl | #{to-rem(64)} | Largest spacing | | --spacing-3xl | #{to-rem(48)} | Very large spacing | | --spacing-2xl | #{to-rem(40)} | Very large spacing | | --spacing-xl | #{to-rem(32)} | Large spacing | | --spacing-l | #{to-rem(24)} | Large spacing | | --spacing-m | #{to-rem(16)} | Standard spacing | | --spacing-s | #{to-rem(12)} | Small spacing | | --spacing-xs | #{to-rem(8)} | Very small spacing | | --spacing-2xs | #{to-rem(4)} | Tiny spacing |