forked from commercetools/ui-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
custom-properties.js
118 lines (116 loc) · 4.71 KB
/
custom-properties.js
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*
THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
This file is created by the 'scripts/generate-custom-properties.js' script.
The variables should be updated in 'materials/internals/definition.yaml'.
*/
export default {
colorPrimary: '#00b39e',
colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)',
colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
colorAccent: '#213c45',
colorAccent30: 'hsl(195, 35.2941176471%, 30%)',
colorAccent40: 'hsl(195, 35.2941176471%, 40%)',
colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
colorNeutral: '#ccc',
colorNeutral60: 'hsl(0, 0%, 60%)',
colorNeutral90: 'hsl(0, 0%, 90%)',
colorNeutral95: 'hsl(0, 0%, 95%)',
colorInfo: '#078cdf',
colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
colorWarning: '#f16d0e',
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
colorError: '#e60050',
colorError95: 'hsl(339.1304347826087, 100%, 95%)',
colorSolid: '#1a1a1a',
colorSurface: '#fff',
borderRadius1: '1px',
borderRadius2: '2px',
borderRadius4: '4px',
borderRadius6: '6px',
borderRadius20: '20px',
fontFamilyBody: "'Open Sans', sans-serif",
fontSizeM: '1rem',
shadow1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
shadow2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
shadow3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
shadow4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)',
shadow5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)',
shadow6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)',
shadow7:
'0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
shadow8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
shadow9:
'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)',
shadow10: '0 0 0 1px rgba(224, 230, 237, 0.5)',
shadow11:
'0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)',
shadow12: '0 0 1px rgba(0, 0, 0, 0.25)',
shadow13: '0 0 1px rgba(0, 0, 0, 0.25)',
shadow14: '0 0 0.5px rgba(0, 0, 0, 0.1)',
shadow15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
shadow16:
'0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)',
constraintScale: '100%',
constraintXs: '50px',
constraintS: '132px',
constraintM: '355px',
constraintL: '496px',
constraintXl: '768px',
spacingXs: '4px',
spacingS: '8px',
spacingM: '16px',
spacingL: '24px',
spacingXl: '32px',
transitionLinear80Ms: '80ms linear',
transitionEaseinout150Ms: '150ms ease-in-out',
transitionStandard: '200ms ease',
breakPointMobile: '768px',
breakPointDesktop: '1024px',
breakPointBiggerdesktop: '1280px',
breakPointGiantdesktop: '1680px',
breakPointJumbodesktop: '1920px',
backgroundColorForInput: '#fff',
backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
backgroundColorForInputWhenHovered: 'hsl(0, 0%, 90%)',
backgroundColorForTag: 'hsl(0, 0%, 95%)',
backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
borderColorForInput: 'hsl(0, 0%, 60%)',
borderColorForInputWhenFocused: '#00b39e',
borderColorForInputWhenDisabled: '#ccc',
borderColorForInputWhenReadonly: '#ccc',
borderColorForInputWhenError: '#e60050',
borderColorForInputWhenWarning: '#f16d0e',
borderColorForTag: 'hsl(0, 0%, 60%)',
borderColorForTagWarning: '#f16d0e',
borderColorForTagWhenFocused: '#00b39e',
borderRadiusForInput: '6px',
borderRadiusForTag: '2px',
fontColorForInput: '#1a1a1a',
fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
fontColorForInputWhenError: '#e60050',
fontColorForInputWhenReadonly: 'hsl(0, 0%, 60%)',
fontColorForInputWhenWarning: '#f16d0e',
fontColorForTag: '#1a1a1a',
fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
fontColorForTextWhenInverted: '#fff',
fontFamily: "'Open Sans', sans-serif",
placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
fontSizeForInput: '1rem',
shadowBoxTagWhenHovered:
'0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
bigButtonHeight: '32px',
smallButtonHeight: '24px',
sizeHeightInput: '32px',
fontFamilyDefault: "'Open Sans', sans-serif",
fontSizeDefault: '1rem',
fontSizeSmall: '0.9231rem',
shadowBoxTagHover:
'0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
sizeHeightTag: '26px',
standardInputHeight: '32px',
};