Gå til hovedinnhold
KOMPONENTER

Tokens

npmv3.8.1

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

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

NavnVerdiEksempel
#181c56
#aeb7e2
#ffffff
#ff5959
#ffbf9e
#292b6a
#393d79
#54568c
#656782
#8285a8
#babbcf
#d1d4e3
#ebebf1
#f5f5f8
#121212
#2a2a2a
#353535
#4d4d4d
#646464
#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
#181c56
#181c56
#181c56
#00367f
#0c6693
#0c6693
#388f76
#f08901
#ff6392
#fbafea
#e258c3
#b482fb
#a476e5
#a476e5
#ffffff
#ffffff
#ffffff
#42a5f5
#6fdfff
#6fdfff
#00db9b
#181c56
#ff5959
#0ea2a8
#2f98fa
#8692ca
#ca825b
#57a257
#8e57e3
#6466aa
#ff5959
#0fc2b3
#64b2fb
#aeb7e2
#ffbf9e
#7bc00b
#ea8bea

Avstander

NavnVerdiEksempel
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

NavnVerdiEksempel
500
ABC abc
600
ABC abc

Tekststørrelser

NavnVerdiEksempel
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

NavnVerdi
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

NavnVerdi
800px (50rem)
1200px (75rem)

Border-bredde

NavnVerdiEksempel
2px (0.125rem)
1px (0.0625rem)
2px (0.125rem)
4px (0.25rem)

Border-radius

NavnVerdiEksempel
1px (0.0625rem)
1px (0.0625rem)
4px (0.25rem)
8px (0.5rem)

Z-indexer

NavnVerdi
-1
0
10
20
30
40
50

Timings

NavnVerdiEksempel
0.1s
Hover for transisjonstid
0.2s
Hover for transisjonstid
0.5s
Hover for transisjonstid

Shadows

NavnVerdiEksempel
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)
Rediger denne siden på Bitbucket