KOMPONENTER

Tokens

npmv3.13.5

Designtokens er vårt felles designspråk satt i system - bindeleddet mellom alle flater.

npm install @entur/tokens

@import '@entur/tokens/dist/styles.css';

Ved bruk av pakken @entur/tokens så har man tilgang til alle gjenbrukbare verdier

som kan brukes for å designe sider og komponenter for å følge Entur sin visuelle identitet.

Disse kan aksesseres enten ved CSS, SASS, LESS eller Javscript-variabler. Eksempelvis, importering av SASS-variablene og bruk av dem.

@import '~@entur/tokens/dist/styles.scss';
.grey-text {
  color: \$colors-greys-grey90;
}

SASS og LESS variablene aksesseres med henholdsvis \$ og @, og er semantisk delt opp ved - (bindestrek).

CSS-variablene prefikses med to bindestrek. Javascript-variablene aksesseres som nestede objekter.

Px vs rem

For CSS, SASS og LESS gis alle relevante variabler i rem-enheten. For Javascript finnes tokens både i px- og rem-enheter. De kan hentes ut slik:

import { fontSizes } from '@entur/tokens';

fontSizes.small; // gir tallet 12 (i px)
fontSizes.rem.small; // gir tallet 0.75 (i rem)

En .rem etter token-navnet vil altså la deg velge mellom rem-størrelser i stedet for px-størrelser.

Tokens

Du kan lese mer om fargene våre i visuell identitet-seksjonen.

Farger

Navn	Verdi	Eksempel
	`#181c56`
	`#aeb7e2`
	`#ffffff`
	`#ff5959`
	`#ffbf9e`
	`#292b6a`
	`#393d79`
	`#54568c`
	`#656782`
	`#7C7F9F`
	`#8285a8`
	`#babbcf`
	`#d1d4e3`
	`#ebebf1`
	`#f5f5f8`
	`#121212`
	`#2a2a2a`
	`#353535`
	`#4d4d4d`
	`#646464`
	`#808080`
	`#949494`
	`#d1d3d3`
	`#e9e9e9`
	`#f3f3f3`
	`#f8f8f8`
	`#0082b9`
	`#64b3e7`
	`#e1eff8`
	`#d31b1b`
	`#ff9494`
	`#ffcece`
	`#1a8e60`
	`#5ac39a`
	`#d0f1e3`
	`#ffca28`
	`#ffe082`
	`#fff4cd`
	`rgba(68, 192, 255, 0.5)`
	`#000000`
	`#bf5826`
	`#c5044e`
	`#800664`
	`#800664`
	`#642e88`
	`#642e88`
	`#642e88`
	`#3d3e40`
	`#181c56`
	`#8d8e9c`
	`#00367f`
	`#0c6693`
	`#0c6693`
	`#388f76`
	`#f08901`
	`#ff6392`
	`#fbafea`
	`#e258c3`
	`#b482fb`
	`#a476e5`
	`#a476e5`
	`#ffe082`
	`#ffffff`
	`#8284ab`
	`#42a5f5`
	`#6fdfff`
	`#6fdfff`
	`#00db9b`
	`#181c56`
	`#ff5959`
	`#0ea2a8`
	`#2f98fa`
	`#8692ca`
	`#ca825b`
	`#57a257`
	`#8e57e3`
	`#6C6EB7`
	`#ff5959`
	`#0fc2b3`
	`#64b2fb`
	`#aeb7e2`
	`#ffbf9e`
	`#7bc00b`
	`#ea8bea`

Avstander

Navn	Verdi	Eksempel
	`0px (0rem)`
	`16px (1rem)`
	`4px (0.25rem)`
	`8px (0.5rem)`
	`12px (0.75rem)`
	`16px (1rem)`
	`24px (1.5rem)`
	`32px (2rem)`
	`40px (2.5rem)`
	`48px (3rem)`
	`56px (3.5rem)`
	`64px (4rem)`
	`72px (4.5rem)`
	`80px (5rem)`
	`88px (5.5rem)`
	`96px (6rem)`

Tekstvekting

Navn	Verdi	Eksempel
	`500`	ABC abc
	`600`	ABC abc

Tekststørrelser

Navn	Verdi	Eksempel
	`10px (0.625rem)`	ABC abc
	`12px (0.75rem)`	ABC abc
	`14px (0.875rem)`	ABC abc
	`16px (1rem)`	ABC abc
	`20px (1.25rem)`	ABC abc
	`24px (1.5rem)`	ABC abc
	`28px (1.75rem)`	ABC abc
	`32px (2rem)`	ABC abc
	`40px (2.5rem)`	ABC abc

Linjehøyder

Navn	Verdi
	`14px (0.875rem)`
	`16px (1rem)`
	`20px (1.25rem)`
	`22px (1.375rem)`
	`24px (1.5rem)`
	`28px (1.75rem)`
	`30px (1.875rem)`
	`36px (2.25rem)`
	`42px (2.625rem)`
	`48px (3rem)`
	`60px (3.75rem)`

Breakpoints

Navn	Verdi
	`800px (50rem)`
	`1200px (75rem)`

Border-bredde

Navn	Verdi	Eksempel
	`2px (0.125rem)`
	`1px (0.0625rem)`
	`2px (0.125rem)`
	`4px (0.25rem)`

Border-radius

Navn	Verdi	Eksempel
	`1px (0.0625rem)`
	`1px (0.0625rem)`
	`4px (0.25rem)`
	`8px (0.5rem)`

Z-indexer

Navn	Verdi
	`-1`
	`0`
	`10`
	`20`
	`30`
	`40`
	`50`

Timings

Navn	Verdi	Eksempel
	`0.1s`	Hover for transisjonstid
	`0.2s`	Hover for transisjonstid
	`0.5s`	Hover for transisjonstid

Shadows

Navn	Verdi	Eksempel
	`0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56`
	`0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff`
	`0 0.0625rem 0.1875rem 0 rgba(0,0,0, 0.12)`
	`0 0.125rem 1rem 0 rgba(0,0,0, 0.1)`
	`0 0.0625rem 0.1875rem 0 rgba(57,61,121, 1)`
	`0 0.125rem 1rem 0 rgba(57,61,121, 1)`
	`0 0.0625rem 0.1875rem rgba(0,0,0, 0.25)`
	`0 0.0625rem 0.1875rem rgba(57,61,121, 1)`