UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

78 lines • 3.5 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
export function getTokens(color) { let variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light'; const sharedTokens = { buttonPaddingVertical: 12, buttonPaddingHorizontal: 32, inputPaddingVertical: 12, inputPaddingHorizontal: 16, buttonPrimaryOutlineColor: color.primitive.accentBlue, buttonSecondaryForeground: color.foreground.inverted, buttonDestructiveColor: color.foreground.alert, linkDestructiveForeground: color.foreground.alert, inputForeground: color.foreground.primary, inputDisabledBorder: color.primitive.grey300, inputBorder: color.ornament.border, inputPlaceholder: color.foreground.secondary, inputControlBackground: color.primitive.accentBlue, inputControlForeground: color.primitive.white, // to be updated when new designs tokens from Figma is applied toggleControlForeground: color.primitive.white, toggleControlBackground: color.ornament.border, toggleControlCheckedBackGround: color.foreground.action, card: { background: color.background.primary, shadow: 'rgba(0, 0, 0, 0.2) 0px 4px 12px' } }; if (variant === 'dark') { return { ...sharedTokens, buttonPrimaryColor: color.primitive.accentBlue, buttonPrimaryHoverBackground: color.primitive.blue, buttonPrimaryForeground: color.primitive.white, buttonSecondaryColor: color.foreground.primary, buttonSecondaryHoverBackground: color.primitive.grey500, buttonSecondaryHoverColor: color.primitive.grey400, buttonDestructiveForeground: color.foreground.primary, linkForeground: color.foreground.primary, linkHoverForeground: color.foreground.secondary, linkActiveForeground: color.foreground.primary, inputDisabledForeground: color.primitive.grey400, // unused inputDisabledControl: color.primitive.grey400, inputDisabledBackground: color.primitive.grey200, inputBackground: color.background.secondary, inputBorderFocus: color.ornament.highlight, inputControl: color.foreground.primary, inputControlBorder: color.primitive.grey400, // to be updated when new designs tokens from Figma is applied toggleControlForeground: color.primitive.white, toggleControlBackground: '#1F1F1F', toggleControlCheckedBackGround: color.brand.primary }; } return { ...sharedTokens, buttonPrimaryColor: color.primitive.blue, buttonPrimaryForeground: color.foreground.inverted, buttonPrimaryHoverBackground: color.primitive.black, buttonSecondaryColor: color.primitive.black, buttonSecondaryHoverBackground: color.primitive.blue, buttonDestructiveForeground: color.foreground.inverted, buttonDestructiveHoverBackground: color.primitive.black, linkForeground: color.foreground.action, linkHoverForeground: color.foreground.primary, // TODO: Remove in next breaking change update, different token name between light and dark themes linkPressForeground: color.foreground.secondary, linkActiveForeground: color.foreground.secondary, inputDisabledForeground: color.primitive.grey300, // unused inputDisabledControl: color.primitive.grey200, // should be decision? inputDisabledBackground: color.primitive.grey500, inputBackground: color.background.primary, inputBorderFocus: color.primitive.accentBlue, inputControl: color.primitive.accentBlue, inputControlBorder: color.primitive.grey200 }; }