UNPKG

@atlaskit/tokens

Version:

Design tokens are the single source of truth to name and store design decisions.

atlassian.design/components/tokens

42 lines • 1.89 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
export var additionalChecks = [{ foreground: 'color.text.brand', backgroundLight: 'elevation.surface.sunken', backgroundDark: 'elevation.surface.overlay', desiredContrast: 4.5, updatedTokens: [ // In light mode: darken the following tokens by one base token // In dark mode: lighten the following tokens by one base token 'color.text.brand', 'color.text.selected', 'color.link', 'color.link.pressed', 'color.icon.brand', 'color.icon.selected'] }, { foreground: 'color.text.brand', backgroundLight: 'color.background.selected', backgroundDark: 'color.background.selected', desiredContrast: 4.5, // In light mode: darken the following tokens by one base token // In dark mode: lighten the following tokens by one base toke updatedTokens: ['color.text.brand', 'color.link', 'color.link.pressed'] }, { foreground: 'color.text.selected', backgroundLight: 'color.background.selected', backgroundDark: 'color.background.selected', desiredContrast: 4.5, // In light mode: darken the following tokens by one base token // In dark mode: lighten the following tokens by one base token updatedTokens: ['color.text.selected', 'color.icon.selected'] }, { foreground: 'color.border.brand', backgroundLight: 'elevation.surface.sunken', backgroundDark: 'elevation.surface.overlay', desiredContrast: 3, // In light mode: darken the following tokens by one base token // In dark mode: lighten the following tokens by one base toke updatedTokens: ['color.border.brand', 'color.border.selected'] }, { foreground: 'color.chart.brand', backgroundLight: 'elevation.surface.sunken', backgroundDark: 'elevation.surface.overlay', desiredContrast: 3, // In light mode: darken the following tokens by one base token // In dark mode: lighten the following tokens by one base token updatedTokens: ['color.chart.brand', 'color.chart.brand.hovered'] }];