@commercetools-uikit/design-system 15.2.3 → 15.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commercetools-uikit-design-system.cjs.dev.js +372 -155
- package/dist/commercetools-uikit-design-system.cjs.prod.js +372 -155
- package/dist/commercetools-uikit-design-system.esm.js +354 -154
- package/dist/declarations/src/design-tokens.d.ts +241 -31
- package/dist/declarations/src/index.d.ts +2 -2
- package/dist/declarations/src/theme-provider.d.ts +14 -0
- package/materials/custom-properties.css +1 -1
- package/materials/internals/definition.yaml +264 -238
- package/materials/internals/tokens.story.js +111 -36
- package/package.json +6 -3
- package/dist/declarations/src/custom-properties.d.ts +0 -117
|
@@ -2,170 +2,387 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
6
|
+
var _pt = require('prop-types');
|
|
7
|
+
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
8
|
+
var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
|
|
9
|
+
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
10
|
+
var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
|
|
11
|
+
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
12
|
+
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
|
|
13
|
+
var react = require('react');
|
|
14
|
+
var kebabCase = require('lodash/kebabCase');
|
|
15
|
+
var isObject = require('lodash/isObject');
|
|
16
|
+
var merge = require('lodash/merge');
|
|
17
|
+
var isEqual = require('lodash/isEqual');
|
|
7
18
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
*/
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
|
|
22
|
-
colorNeutral: '#ccc',
|
|
23
|
-
colorNeutral60: 'hsl(0, 0%, 60%)',
|
|
24
|
-
colorNeutral90: 'hsl(0, 0%, 90%)',
|
|
25
|
-
colorNeutral95: 'hsl(0, 0%, 95%)',
|
|
26
|
-
colorInfo: '#078cdf',
|
|
27
|
-
colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
|
|
28
|
-
colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
|
|
29
|
-
colorWarning: '#f16d0e',
|
|
30
|
-
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
31
|
-
colorError: '#e60050',
|
|
32
|
-
colorError95: 'hsl(339.1304347826087, 100%, 95%)',
|
|
33
|
-
colorSolid: '#1a1a1a',
|
|
34
|
-
colorSurface: '#fff',
|
|
35
|
-
borderRadius1: '1px',
|
|
36
|
-
borderRadius2: '2px',
|
|
37
|
-
borderRadius4: '4px',
|
|
38
|
-
borderRadius6: '6px',
|
|
39
|
-
borderRadius20: '20px',
|
|
40
|
-
fontFamilyBody: "'Open Sans', sans-serif",
|
|
41
|
-
fontSizeM: '1rem',
|
|
42
|
-
shadow1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
43
|
-
shadow2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
|
|
44
|
-
shadow3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
|
|
45
|
-
shadow4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)',
|
|
46
|
-
shadow5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)',
|
|
47
|
-
shadow6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)',
|
|
48
|
-
shadow7: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
49
|
-
shadow8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
50
|
-
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)',
|
|
51
|
-
shadow10: '0 0 0 1px rgba(224, 230, 237, 0.5)',
|
|
52
|
-
shadow11: '0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)',
|
|
53
|
-
shadow12: '0 0 1px rgba(0, 0, 0, 0.25)',
|
|
54
|
-
shadow13: '0 0 1px rgba(0, 0, 0, 0.25)',
|
|
55
|
-
shadow14: '0 0 0.5px rgba(0, 0, 0, 0.1)',
|
|
56
|
-
shadow15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
|
|
57
|
-
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)',
|
|
58
|
-
constraintScale: '100%',
|
|
59
|
-
constraint1: '42px',
|
|
60
|
-
constraint2: '84px',
|
|
61
|
-
constraint3: '142px',
|
|
62
|
-
constraint4: '184px',
|
|
63
|
-
constraint5: '242px',
|
|
64
|
-
constraint6: '284px',
|
|
65
|
-
constraint7: '342px',
|
|
66
|
-
constraint8: '384px',
|
|
67
|
-
constraint9: '442px',
|
|
68
|
-
constraint10: '484px',
|
|
69
|
-
constraint11: '542px',
|
|
70
|
-
constraint12: '584px',
|
|
71
|
-
constraint13: '642px',
|
|
72
|
-
constraint14: '684px',
|
|
73
|
-
constraint15: '742px',
|
|
74
|
-
constraint16: '784px',
|
|
75
|
-
spacingXs: '4px',
|
|
76
|
-
spacingS: '8px',
|
|
77
|
-
spacingM: '16px',
|
|
78
|
-
spacingL: '24px',
|
|
79
|
-
spacingXl: '32px',
|
|
80
|
-
transitionLinear80Ms: '80ms linear',
|
|
81
|
-
transitionEaseinout150Ms: '150ms ease-in-out',
|
|
82
|
-
transitionStandard: '200ms ease',
|
|
83
|
-
breakPointMobile: '768px',
|
|
84
|
-
breakPointDesktop: '1024px',
|
|
85
|
-
breakPointBiggerdesktop: '1280px',
|
|
86
|
-
breakPointGiantdesktop: '1680px',
|
|
87
|
-
breakPointJumbodesktop: '1920px',
|
|
88
|
-
backgroundColorForInput: '#fff',
|
|
89
|
-
backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
|
|
90
|
-
backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
91
|
-
backgroundColorForInputWhenHovered: 'hsl(0, 0%, 90%)',
|
|
92
|
-
backgroundColorForTag: 'hsl(0, 0%, 95%)',
|
|
93
|
-
backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
94
|
-
borderColorForInput: 'hsl(0, 0%, 60%)',
|
|
95
|
-
borderColorForInputWhenFocused: '#00b39e',
|
|
96
|
-
borderColorForInputWhenDisabled: '#ccc',
|
|
97
|
-
borderColorForInputWhenReadonly: '#ccc',
|
|
98
|
-
borderColorForInputWhenError: '#e60050',
|
|
99
|
-
borderColorForInputWhenWarning: '#f16d0e',
|
|
100
|
-
borderColorForTag: 'hsl(0, 0%, 60%)',
|
|
101
|
-
borderColorForTagWarning: '#f16d0e',
|
|
102
|
-
borderColorForTagWhenFocused: '#00b39e',
|
|
103
|
-
borderRadiusForInput: '6px',
|
|
104
|
-
borderRadiusForTag: '2px',
|
|
105
|
-
fontColorForInput: '#1a1a1a',
|
|
106
|
-
fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
107
|
-
fontColorForInputWhenError: '#e60050',
|
|
108
|
-
fontColorForInputWhenReadonly: 'hsl(0, 0%, 60%)',
|
|
109
|
-
fontColorForInputWhenWarning: '#f16d0e',
|
|
110
|
-
fontColorForTag: '#1a1a1a',
|
|
111
|
-
fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
112
|
-
fontColorForTextWhenInverted: '#fff',
|
|
113
|
-
fontFamily: "'Open Sans', sans-serif",
|
|
114
|
-
placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
|
|
115
|
-
fontSizeForInput: '1rem',
|
|
116
|
-
shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
117
|
-
bigButtonHeight: '32px',
|
|
118
|
-
smallButtonHeight: '24px',
|
|
119
|
-
sizeHeightInput: '32px',
|
|
120
|
-
fontFamilyDefault: "'Open Sans', sans-serif",
|
|
121
|
-
fontSizeDefault: '1rem',
|
|
122
|
-
fontSizeSmall: '0.9231rem',
|
|
123
|
-
shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
124
|
-
sizeHeightTag: '26px',
|
|
125
|
-
standardInputHeight: '32px'
|
|
126
|
-
};
|
|
19
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
20
|
+
|
|
21
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
22
|
+
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
23
|
+
var _Object$fromEntries__default = /*#__PURE__*/_interopDefault(_Object$fromEntries);
|
|
24
|
+
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
25
|
+
var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
|
|
26
|
+
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
|
|
27
|
+
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
|
|
28
|
+
var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
|
|
29
|
+
var isObject__default = /*#__PURE__*/_interopDefault(isObject);
|
|
30
|
+
var merge__default = /*#__PURE__*/_interopDefault(merge);
|
|
31
|
+
var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
|
|
127
32
|
|
|
128
33
|
/*
|
|
129
34
|
THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
|
130
|
-
|
|
131
|
-
This file is created by the 'scripts/generate-custom-properties.js' script.
|
|
35
|
+
This file is created by the 'scripts/generate-design-tokens.js' script.
|
|
132
36
|
The variables should be updated in 'materials/internals/definition.yaml'.
|
|
133
37
|
*/
|
|
38
|
+
var themes = {
|
|
39
|
+
default: {
|
|
40
|
+
colorPrimary: '#00b39e',
|
|
41
|
+
colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
|
|
42
|
+
colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)',
|
|
43
|
+
colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
|
|
44
|
+
colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
|
|
45
|
+
colorAccent: '#213c45',
|
|
46
|
+
colorAccent30: 'hsl(195, 35.2941176471%, 30%)',
|
|
47
|
+
colorAccent40: 'hsl(195, 35.2941176471%, 40%)',
|
|
48
|
+
colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
|
|
49
|
+
colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
|
|
50
|
+
colorNeutral: '#ccc',
|
|
51
|
+
colorNeutral60: 'hsl(0, 0%, 60%)',
|
|
52
|
+
colorNeutral90: 'hsl(0, 0%, 90%)',
|
|
53
|
+
colorNeutral95: 'hsl(0, 0%, 95%)',
|
|
54
|
+
colorInfo: '#078cdf',
|
|
55
|
+
colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
|
|
56
|
+
colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
|
|
57
|
+
colorWarning: '#f16d0e',
|
|
58
|
+
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
59
|
+
colorError: '#e60050',
|
|
60
|
+
colorError95: 'hsl(339.1304347826087, 100%, 95%)',
|
|
61
|
+
colorSolid: '#1a1a1a',
|
|
62
|
+
colorSurface: '#fff',
|
|
63
|
+
borderRadius1: '1px',
|
|
64
|
+
borderRadius2: '2px',
|
|
65
|
+
borderRadius4: '4px',
|
|
66
|
+
borderRadius6: '6px',
|
|
67
|
+
borderRadius20: '20px',
|
|
68
|
+
fontFamilyBody: "'Open Sans', sans-serif",
|
|
69
|
+
fontSizeM: '1rem',
|
|
70
|
+
shadow1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
71
|
+
shadow2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
|
|
72
|
+
shadow3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
|
|
73
|
+
shadow4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)',
|
|
74
|
+
shadow5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)',
|
|
75
|
+
shadow6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)',
|
|
76
|
+
shadow7: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
77
|
+
shadow8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
78
|
+
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)',
|
|
79
|
+
shadow10: '0 0 0 1px rgba(224, 230, 237, 0.5)',
|
|
80
|
+
shadow11: '0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)',
|
|
81
|
+
shadow12: '0 0 1px rgba(0, 0, 0, 0.25)',
|
|
82
|
+
shadow13: '0 0 1px rgba(0, 0, 0, 0.25)',
|
|
83
|
+
shadow14: '0 0 0.5px rgba(0, 0, 0, 0.1)',
|
|
84
|
+
shadow15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
|
|
85
|
+
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)',
|
|
86
|
+
constraintScale: '100%',
|
|
87
|
+
constraint1: '42px',
|
|
88
|
+
constraint2: '84px',
|
|
89
|
+
constraint3: '142px',
|
|
90
|
+
constraint4: '184px',
|
|
91
|
+
constraint5: '242px',
|
|
92
|
+
constraint6: '284px',
|
|
93
|
+
constraint7: '342px',
|
|
94
|
+
constraint8: '384px',
|
|
95
|
+
constraint9: '442px',
|
|
96
|
+
constraint10: '484px',
|
|
97
|
+
constraint11: '542px',
|
|
98
|
+
constraint12: '584px',
|
|
99
|
+
constraint13: '642px',
|
|
100
|
+
constraint14: '684px',
|
|
101
|
+
constraint15: '742px',
|
|
102
|
+
constraint16: '784px',
|
|
103
|
+
spacingXs: '4px',
|
|
104
|
+
spacingS: '8px',
|
|
105
|
+
spacingM: '16px',
|
|
106
|
+
spacingL: '24px',
|
|
107
|
+
spacingXl: '32px',
|
|
108
|
+
transitionLinear80Ms: '80ms linear',
|
|
109
|
+
transitionEaseinout150Ms: '150ms ease-in-out',
|
|
110
|
+
transitionStandard: '200ms ease',
|
|
111
|
+
breakPointMobile: '768px',
|
|
112
|
+
breakPointDesktop: '1024px',
|
|
113
|
+
breakPointBiggerdesktop: '1280px',
|
|
114
|
+
breakPointGiantdesktop: '1680px',
|
|
115
|
+
breakPointJumbodesktop: '1920px',
|
|
116
|
+
backgroundColorForInput: '#fff',
|
|
117
|
+
backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
|
|
118
|
+
backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
119
|
+
backgroundColorForInputWhenHovered: 'hsl(0, 0%, 90%)',
|
|
120
|
+
backgroundColorForTag: 'hsl(0, 0%, 95%)',
|
|
121
|
+
backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
122
|
+
borderColorForInput: 'hsl(0, 0%, 60%)',
|
|
123
|
+
borderColorForInputWhenFocused: '#00b39e',
|
|
124
|
+
borderColorForInputWhenDisabled: '#ccc',
|
|
125
|
+
borderColorForInputWhenReadonly: '#ccc',
|
|
126
|
+
borderColorForInputWhenError: '#e60050',
|
|
127
|
+
borderColorForInputWhenWarning: '#f16d0e',
|
|
128
|
+
borderColorForTag: 'hsl(0, 0%, 60%)',
|
|
129
|
+
borderColorForTagWarning: '#f16d0e',
|
|
130
|
+
borderColorForTagWhenFocused: '#00b39e',
|
|
131
|
+
borderRadiusForInput: '6px',
|
|
132
|
+
borderRadiusForTag: '2px',
|
|
133
|
+
fontColorForInput: '#1a1a1a',
|
|
134
|
+
fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
135
|
+
fontColorForInputWhenError: '#e60050',
|
|
136
|
+
fontColorForInputWhenReadonly: 'hsl(0, 0%, 60%)',
|
|
137
|
+
fontColorForInputWhenWarning: '#f16d0e',
|
|
138
|
+
fontColorForTag: '#1a1a1a',
|
|
139
|
+
fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
140
|
+
fontColorForTextWhenInverted: '#fff',
|
|
141
|
+
fontFamily: "'Open Sans', sans-serif",
|
|
142
|
+
placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
|
|
143
|
+
fontSizeForInput: '1rem',
|
|
144
|
+
shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
145
|
+
bigButtonHeight: '32px',
|
|
146
|
+
smallButtonHeight: '24px',
|
|
147
|
+
sizeHeightInput: '32px',
|
|
148
|
+
fontFamilyDefault: "'Open Sans', sans-serif",
|
|
149
|
+
fontSizeDefault: '1rem',
|
|
150
|
+
fontSizeSmall: '0.9231rem',
|
|
151
|
+
shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
152
|
+
sizeHeightTag: '26px',
|
|
153
|
+
standardInputHeight: '32px'
|
|
154
|
+
},
|
|
155
|
+
test: {
|
|
156
|
+
colorPrimary: '#f78d26',
|
|
157
|
+
colorSolid: '#fff',
|
|
158
|
+
colorSurface: '#1a1a1a',
|
|
159
|
+
backgroundColorForTag: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
160
|
+
backgroundColorForTagWarning: 'hsl(0, 0%, 95%)'
|
|
161
|
+
}
|
|
162
|
+
};
|
|
134
163
|
var designTokens = {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
+
colorPrimary: 'var(--color-primary, #00b39e)',
|
|
165
|
+
colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
|
|
166
|
+
colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
|
|
167
|
+
colorPrimary85: 'var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))',
|
|
168
|
+
colorPrimary95: 'var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))',
|
|
169
|
+
colorAccent: 'var(--color-accent, #213c45)',
|
|
170
|
+
colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))',
|
|
171
|
+
colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))',
|
|
172
|
+
colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))',
|
|
173
|
+
colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))',
|
|
174
|
+
colorNeutral: 'var(--color-neutral, #ccc)',
|
|
175
|
+
colorNeutral60: 'var(--color-neutral-60, hsl(0, 0%, 60%))',
|
|
176
|
+
colorNeutral90: 'var(--color-neutral-90, hsl(0, 0%, 90%))',
|
|
177
|
+
colorNeutral95: 'var(--color-neutral-95, hsl(0, 0%, 95%))',
|
|
178
|
+
colorInfo: 'var(--color-info, #078cdf)',
|
|
179
|
+
colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
|
|
180
|
+
colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
|
|
181
|
+
colorWarning: 'var(--color-warning, #f16d0e)',
|
|
182
|
+
colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
183
|
+
colorError: 'var(--color-error, #e60050)',
|
|
184
|
+
colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))',
|
|
185
|
+
colorSolid: 'var(--color-solid, #1a1a1a)',
|
|
186
|
+
colorSurface: 'var(--color-surface, #fff)',
|
|
187
|
+
borderRadius1: 'var(--border-radius-1, 1px)',
|
|
188
|
+
borderRadius2: 'var(--border-radius-2, 2px)',
|
|
189
|
+
borderRadius4: 'var(--border-radius-4, 4px)',
|
|
190
|
+
borderRadius6: 'var(--border-radius-6, 6px)',
|
|
191
|
+
borderRadius20: 'var(--border-radius-20, 20px)',
|
|
192
|
+
fontFamilyBody: "var(--font-family-body, 'Open Sans', sans-serif)",
|
|
193
|
+
fontSizeM: 'var(--font-size-m, 1rem)',
|
|
194
|
+
shadow1: 'var(--shadow-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
195
|
+
shadow2: 'var(--shadow-2, 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23))',
|
|
196
|
+
shadow3: 'var(--shadow-3, 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23))',
|
|
197
|
+
shadow4: 'var(--shadow-4, 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22))',
|
|
198
|
+
shadow5: 'var(--shadow-5, 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22))',
|
|
199
|
+
shadow6: 'var(--shadow-6, 0 -1px 2px 0 rgba(0, 0, 0, 0.2))',
|
|
200
|
+
shadow7: 'var(--shadow-7, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
|
|
201
|
+
shadow8: 'var(--shadow-8, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
|
|
202
|
+
shadow9: 'var(--shadow-9, 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))',
|
|
203
|
+
shadow10: 'var(--shadow-10, 0 0 0 1px rgba(224, 230, 237, 0.5))',
|
|
204
|
+
shadow11: 'var(--shadow-11, 0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12))',
|
|
205
|
+
shadow12: 'var(--shadow-12, 0 0 1px rgba(0, 0, 0, 0.25))',
|
|
206
|
+
shadow13: 'var(--shadow-13, 0 0 1px rgba(0, 0, 0, 0.25))',
|
|
207
|
+
shadow14: 'var(--shadow-14, 0 0 0.5px rgba(0, 0, 0, 0.1))',
|
|
208
|
+
shadow15: 'var(--shadow-15, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))',
|
|
209
|
+
shadow16: 'var(--shadow-16, 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25))',
|
|
210
|
+
constraintScale: 'var(--constraint-scale, 100%)',
|
|
211
|
+
constraint1: 'var(--constraint-1, 42px)',
|
|
212
|
+
constraint2: 'var(--constraint-2, 84px)',
|
|
213
|
+
constraint3: 'var(--constraint-3, 142px)',
|
|
214
|
+
constraint4: 'var(--constraint-4, 184px)',
|
|
215
|
+
constraint5: 'var(--constraint-5, 242px)',
|
|
216
|
+
constraint6: 'var(--constraint-6, 284px)',
|
|
217
|
+
constraint7: 'var(--constraint-7, 342px)',
|
|
218
|
+
constraint8: 'var(--constraint-8, 384px)',
|
|
219
|
+
constraint9: 'var(--constraint-9, 442px)',
|
|
220
|
+
constraint10: 'var(--constraint-10, 484px)',
|
|
221
|
+
constraint11: 'var(--constraint-11, 542px)',
|
|
222
|
+
constraint12: 'var(--constraint-12, 584px)',
|
|
223
|
+
constraint13: 'var(--constraint-13, 642px)',
|
|
224
|
+
constraint14: 'var(--constraint-14, 684px)',
|
|
225
|
+
constraint15: 'var(--constraint-15, 742px)',
|
|
226
|
+
constraint16: 'var(--constraint-16, 784px)',
|
|
227
|
+
spacingXs: 'var(--spacing-xs, 4px)',
|
|
228
|
+
spacingS: 'var(--spacing-s, 8px)',
|
|
229
|
+
spacingM: 'var(--spacing-m, 16px)',
|
|
230
|
+
spacingL: 'var(--spacing-l, 24px)',
|
|
231
|
+
spacingXl: 'var(--spacing-xl, 32px)',
|
|
232
|
+
transitionLinear80Ms: 'var(--transition-linear-80-ms, 80ms linear)',
|
|
233
|
+
transitionEaseinout150Ms: 'var(--transition-easeinout-150-ms, 150ms ease-in-out)',
|
|
234
|
+
transitionStandard: 'var(--transition-standard, 200ms ease)',
|
|
235
|
+
breakPointMobile: 'var(--break-point-mobile, 768px)',
|
|
236
|
+
breakPointDesktop: 'var(--break-point-desktop, 1024px)',
|
|
237
|
+
breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
|
|
238
|
+
breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
|
|
239
|
+
breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)',
|
|
240
|
+
backgroundColorForInput: 'var(--background-color-for-input, #fff)',
|
|
241
|
+
backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
|
|
242
|
+
backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
243
|
+
backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(0, 0%, 90%))',
|
|
244
|
+
backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
|
|
245
|
+
backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
246
|
+
borderColorForInput: 'var(--border-color-for-input, hsl(0, 0%, 60%))',
|
|
247
|
+
borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)',
|
|
248
|
+
borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)',
|
|
249
|
+
borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #ccc)',
|
|
250
|
+
borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)',
|
|
251
|
+
borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
|
|
252
|
+
borderColorForTag: 'var(--border-color-for-tag, hsl(0, 0%, 60%))',
|
|
253
|
+
borderColorForTagWarning: 'var(--border-color-for-tag-warning, #f16d0e)',
|
|
254
|
+
borderColorForTagWhenFocused: 'var(--border-color-for-tag-when-focused, #00b39e)',
|
|
255
|
+
borderRadiusForInput: 'var(--border-radius-for-input, 6px)',
|
|
256
|
+
borderRadiusForTag: 'var(--border-radius-for-tag, 2px)',
|
|
257
|
+
fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
|
|
258
|
+
fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
|
|
259
|
+
fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
|
|
260
|
+
fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))',
|
|
261
|
+
fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)',
|
|
262
|
+
fontColorForTag: 'var(--font-color-for-tag, #1a1a1a)',
|
|
263
|
+
fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))',
|
|
264
|
+
fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)',
|
|
265
|
+
fontFamily: "var(--font-family, 'Open Sans', sans-serif)",
|
|
266
|
+
placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
|
|
267
|
+
fontSizeForInput: 'var(--font-size-for-input, 1rem)',
|
|
268
|
+
shadowBoxTagWhenHovered: 'var(--shadow-box-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
269
|
+
bigButtonHeight: 'var(--big-button-height, 32px)',
|
|
270
|
+
smallButtonHeight: 'var(--small-button-height, 24px)',
|
|
271
|
+
sizeHeightInput: 'var(--size-height-input, 32px)',
|
|
272
|
+
fontFamilyDefault: "var(--font-family-default, 'Open Sans', sans-serif)",
|
|
273
|
+
fontSizeDefault: 'var(--font-size-default, 1rem)',
|
|
274
|
+
fontSizeSmall: 'var(--font-size-small, 0.9231rem)',
|
|
275
|
+
shadowBoxTagHover: 'var(--shadow-box-tag-hover, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
276
|
+
sizeHeightTag: 'var(--size-height-tag, 26px)',
|
|
277
|
+
standardInputHeight: 'var(--standard-input-height, 32px)'
|
|
278
|
+
};
|
|
279
|
+
var designTokens$1 = designTokens;
|
|
280
|
+
|
|
281
|
+
var allThemesNames = _Object$keys__default["default"](themes);
|
|
282
|
+
|
|
283
|
+
var toVars = function toVars(obj) {
|
|
284
|
+
var _context;
|
|
285
|
+
|
|
286
|
+
return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](obj)).call(_context, function (_ref) {
|
|
287
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
288
|
+
key = _ref2[0],
|
|
289
|
+
value = _ref2[1];
|
|
290
|
+
|
|
291
|
+
return ["--".concat(kebabCase__default["default"](key)), value];
|
|
292
|
+
}));
|
|
293
|
+
}; // used to cover SSR builds (for instance in Gatsby)
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
var isBrowser = typeof window !== 'undefined';
|
|
297
|
+
|
|
298
|
+
var defaultParentSelector = function defaultParentSelector() {
|
|
299
|
+
return document.querySelector(':root');
|
|
300
|
+
};
|
|
301
|
+
|
|
302
|
+
var applyTheme = function applyTheme(_ref3) {
|
|
303
|
+
var _context2;
|
|
304
|
+
|
|
305
|
+
var newTheme = _ref3.newTheme,
|
|
306
|
+
_ref3$parentSelector = _ref3.parentSelector,
|
|
307
|
+
parentSelector = _ref3$parentSelector === void 0 ? defaultParentSelector : _ref3$parentSelector,
|
|
308
|
+
themeOverrides = _ref3.themeOverrides;
|
|
309
|
+
var target = isBrowser ? parentSelector() : null; // With no target we can't change themes
|
|
310
|
+
|
|
311
|
+
if (!target) return;
|
|
312
|
+
var validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
|
|
313
|
+
|
|
314
|
+
if (newTheme && newTheme !== validTheme) {
|
|
315
|
+
console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
var vars = toVars(themeOverrides && isObject__default["default"](themeOverrides) ? merge__default["default"]({}, themes.default, themes[validTheme], themeOverrides) : themes[validTheme]);
|
|
319
|
+
|
|
320
|
+
_forEachInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](vars)).call(_context2, function (_ref4) {
|
|
321
|
+
var _ref5 = _slicedToArray(_ref4, 2),
|
|
322
|
+
key = _ref5[0],
|
|
323
|
+
value = _ref5[1];
|
|
324
|
+
|
|
325
|
+
target.style.setProperty(key, value);
|
|
326
|
+
});
|
|
327
|
+
|
|
328
|
+
target.setAttribute('data-theme', validTheme);
|
|
329
|
+
};
|
|
330
|
+
|
|
331
|
+
var ThemeProvider = function ThemeProvider(props) {
|
|
332
|
+
var parentSelectorRef = react.useRef(props.parentSelector);
|
|
333
|
+
var themeNameRef = react.useRef();
|
|
334
|
+
var themeOverridesRef = react.useRef();
|
|
335
|
+
react.useLayoutEffect(function () {
|
|
336
|
+
// We want to make sure we don't really apply the change when the props
|
|
337
|
+
// provided include a new object with the same theme overrides
|
|
338
|
+
// (eg: users providing an inline object as prop to the ThemeProvider)
|
|
339
|
+
if (themeNameRef.current !== props.theme || !isEqual__default["default"](themeOverridesRef.current, props.themeOverrides)) {
|
|
340
|
+
themeNameRef.current = props.theme;
|
|
341
|
+
themeOverridesRef.current = props.themeOverrides;
|
|
342
|
+
applyTheme({
|
|
343
|
+
newTheme: props.theme,
|
|
344
|
+
parentSelector: parentSelectorRef.current,
|
|
345
|
+
themeOverrides: props.themeOverrides
|
|
346
|
+
});
|
|
347
|
+
}
|
|
348
|
+
}, [props.theme, props.themeOverrides]);
|
|
349
|
+
return null;
|
|
350
|
+
};
|
|
351
|
+
|
|
352
|
+
ThemeProvider.propTypes = {
|
|
353
|
+
parentSelector: _pt__default["default"].any,
|
|
354
|
+
theme: _pt__default["default"].string,
|
|
355
|
+
themeOverrides: _pt__default["default"].objectOf(_pt__default["default"].string)
|
|
356
|
+
};
|
|
357
|
+
ThemeProvider.defaultProps = {
|
|
358
|
+
parentSelector: defaultParentSelector
|
|
359
|
+
};
|
|
360
|
+
|
|
361
|
+
var useTheme = function useTheme() {
|
|
362
|
+
var parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
|
|
363
|
+
|
|
364
|
+
var _useState = react.useState('default'),
|
|
365
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
366
|
+
theme = _useState2[0],
|
|
367
|
+
setTheme = _useState2[1];
|
|
368
|
+
|
|
369
|
+
var parentSelectorRef = react.useRef(parentSelector); // If we use 'useLayoutEffect' here, we would be trying to read the
|
|
370
|
+
// data attribute before it gets set from the effect in the ThemeProvider
|
|
371
|
+
|
|
372
|
+
react.useEffect(function () {
|
|
373
|
+
var _parentSelectorRef$cu;
|
|
374
|
+
|
|
375
|
+
setTheme(((_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme) || 'default');
|
|
376
|
+
}, []);
|
|
377
|
+
return theme;
|
|
164
378
|
};
|
|
165
379
|
|
|
166
380
|
// NOTE: This string will be replaced on build time with the package version.
|
|
167
|
-
var version = "15.
|
|
381
|
+
var version = "15.3.0";
|
|
168
382
|
|
|
169
|
-
exports.
|
|
170
|
-
exports.
|
|
383
|
+
exports.ThemeProvider = ThemeProvider;
|
|
384
|
+
exports.customProperties = designTokens$1;
|
|
385
|
+
exports.designTokens = designTokens$1;
|
|
386
|
+
exports.themes = themes;
|
|
387
|
+
exports.useTheme = useTheme;
|
|
171
388
|
exports.version = version;
|