@commercetools-uikit/design-system 15.3.0 → 15.5.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 +332 -35
- package/dist/commercetools-uikit-design-system.cjs.prod.js +332 -35
- package/dist/commercetools-uikit-design-system.esm.js +326 -32
- package/dist/declarations/src/design-tokens.d.ts +253 -9
- package/dist/declarations/src/index.d.ts +1 -0
- package/dist/declarations/src/theme-provider.d.ts +2 -1
- package/dist/declarations/src/utils.d.ts +5 -0
- package/materials/custom-properties.css +108 -3
- package/materials/custom-properties.json +94 -3
- package/materials/internals/TOKENS.md +26 -13
- package/materials/internals/definition.yaml +457 -12
- package/materials/internals/tokens.story.js +63 -2
- package/materials/resets.css +41 -0
- package/package.json +4 -1
|
@@ -5,30 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
6
6
|
var _pt = require('prop-types');
|
|
7
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
8
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
12
9
|
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
|
|
10
|
+
var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
|
|
13
11
|
var react = require('react');
|
|
14
|
-
var kebabCase = require('lodash/kebabCase');
|
|
15
12
|
var isObject = require('lodash/isObject');
|
|
16
13
|
var merge = require('lodash/merge');
|
|
17
14
|
var isEqual = require('lodash/isEqual');
|
|
15
|
+
var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
|
|
16
|
+
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
17
|
+
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
18
|
+
var kebabCase = require('lodash/kebabCase');
|
|
18
19
|
|
|
19
20
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
20
21
|
|
|
21
22
|
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
22
23
|
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
24
|
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
|
|
27
25
|
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
|
|
28
|
-
var
|
|
26
|
+
var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
|
|
29
27
|
var isObject__default = /*#__PURE__*/_interopDefault(isObject);
|
|
30
28
|
var merge__default = /*#__PURE__*/_interopDefault(merge);
|
|
31
29
|
var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
|
|
30
|
+
var _Object$fromEntries__default = /*#__PURE__*/_interopDefault(_Object$fromEntries);
|
|
31
|
+
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
32
|
+
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
33
|
+
var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
|
|
32
34
|
|
|
33
35
|
/*
|
|
34
36
|
THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
|
@@ -48,6 +50,9 @@ var themes = {
|
|
|
48
50
|
colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
|
|
49
51
|
colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
|
|
50
52
|
colorNeutral: '#ccc',
|
|
53
|
+
colorNeutral05: 'hsl(0deg 0% 80% / 5%)',
|
|
54
|
+
colorNeutral10: 'hsl(0deg 0% 80% / 10%)',
|
|
55
|
+
colorNeutral40: 'hsl(0, 0%, 40%)',
|
|
51
56
|
colorNeutral60: 'hsl(0, 0%, 60%)',
|
|
52
57
|
colorNeutral90: 'hsl(0, 0%, 90%)',
|
|
53
58
|
colorNeutral95: 'hsl(0, 0%, 95%)',
|
|
@@ -55,18 +60,44 @@ var themes = {
|
|
|
55
60
|
colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
|
|
56
61
|
colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
|
|
57
62
|
colorWarning: '#f16d0e',
|
|
63
|
+
colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
|
|
58
64
|
colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
59
65
|
colorError: '#e60050',
|
|
60
66
|
colorError95: 'hsl(339.1304347826087, 100%, 95%)',
|
|
61
67
|
colorSolid: '#1a1a1a',
|
|
68
|
+
colorSolid05: 'hsl(0deg 0% 10% / 5%)',
|
|
69
|
+
colorSolid10: 'hsl(0deg 0% 10% / 10%)',
|
|
62
70
|
colorSurface: '#fff',
|
|
63
71
|
borderRadius1: '1px',
|
|
64
72
|
borderRadius2: '2px',
|
|
65
73
|
borderRadius4: '4px',
|
|
66
74
|
borderRadius6: '6px',
|
|
67
75
|
borderRadius20: '20px',
|
|
68
|
-
|
|
69
|
-
|
|
76
|
+
fontFamily: "'Open Sans', sans-serif",
|
|
77
|
+
fontSize10: '0.75rem',
|
|
78
|
+
fontSize20: '0.875rem',
|
|
79
|
+
fontSize30: '1rem',
|
|
80
|
+
fontSize40: '1.125rem',
|
|
81
|
+
fontSize50: '1.25rem',
|
|
82
|
+
fontSize60: '1.5rem',
|
|
83
|
+
fontSize15: '0.9231rem',
|
|
84
|
+
fontSize35: '1.0769rem',
|
|
85
|
+
fontSize45: '1.2308rem',
|
|
86
|
+
fontSize63: '1.5385rem',
|
|
87
|
+
fontSize66: '1.8462rem',
|
|
88
|
+
fontSize70: '2.4615rem',
|
|
89
|
+
fontWeight300: '300',
|
|
90
|
+
fontWeight400: '400',
|
|
91
|
+
fontWeight500: '500',
|
|
92
|
+
fontWeight600: '600',
|
|
93
|
+
fontWeight700: '700',
|
|
94
|
+
lineHeight10: '1.25rem',
|
|
95
|
+
lineHeight20: '1.375rem',
|
|
96
|
+
lineHeight30: '1.5rem',
|
|
97
|
+
lineHeight40: '1.625rem',
|
|
98
|
+
lineHeight50: '1.75rem',
|
|
99
|
+
lineHeight60: '2.125rem',
|
|
100
|
+
shadow0: 'none',
|
|
70
101
|
shadow1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
71
102
|
shadow2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
|
|
72
103
|
shadow3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
|
|
@@ -113,12 +144,27 @@ var themes = {
|
|
|
113
144
|
breakPointBiggerdesktop: '1280px',
|
|
114
145
|
breakPointGiantdesktop: '1680px',
|
|
115
146
|
breakPointJumbodesktop: '1920px',
|
|
147
|
+
backgroundColorForButtonWhenActive: '#fff',
|
|
148
|
+
backgroundColorForButtonWhenHovered: '#fff',
|
|
149
|
+
backgroundColorForButtonAsPrimaryWhenActive: '#00b39e',
|
|
150
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(172.9608938547486, 100%, 25%)',
|
|
151
|
+
backgroundColorForButtonAsIconAsPrimaryWhenActive: '#00b39e',
|
|
152
|
+
backgroundColorForButtonAsIconAsPrimaryWhenHovered: '#00b39e',
|
|
153
|
+
backgroundColorForButtonAsIconAsInfoWhenActive: '#078cdf',
|
|
154
|
+
backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf',
|
|
155
|
+
backgroundColorForButtonAsUrgentWhenActive: '#f16d0e',
|
|
156
|
+
backgroundColorForButtonAsUrgentWhenHovered: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
|
|
157
|
+
backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
116
158
|
backgroundColorForInput: '#fff',
|
|
117
159
|
backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
|
|
118
160
|
backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
|
|
119
161
|
backgroundColorForInputWhenHovered: 'hsl(0, 0%, 90%)',
|
|
120
162
|
backgroundColorForTag: 'hsl(0, 0%, 95%)',
|
|
121
163
|
backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
164
|
+
borderForButtonAsSecondary: 'none',
|
|
165
|
+
borderForButtonAsSecondaryWhenHovered: 'none',
|
|
166
|
+
borderForButtonAsSecondaryWhenActive: 'none',
|
|
167
|
+
borderForCardWhenRaised: 'none',
|
|
122
168
|
borderColorForInput: 'hsl(0, 0%, 60%)',
|
|
123
169
|
borderColorForInputWhenFocused: '#00b39e',
|
|
124
170
|
borderColorForInputWhenDisabled: '#ccc',
|
|
@@ -128,8 +174,19 @@ var themes = {
|
|
|
128
174
|
borderColorForTag: 'hsl(0, 0%, 60%)',
|
|
129
175
|
borderColorForTagWarning: '#f16d0e',
|
|
130
176
|
borderColorForTagWhenFocused: '#00b39e',
|
|
177
|
+
borderColorForButtonAsIcon: '#fff',
|
|
178
|
+
borderColorForButtonAsIconAsInfo: '#078cdf',
|
|
179
|
+
borderColorForButtonAsIconAsPrimary: '#00b39e',
|
|
180
|
+
borderColorForButtonAsIconWhenDisabled: '#ccc',
|
|
181
|
+
borderRadiusForButtonAsBig: '6px',
|
|
182
|
+
borderRadiusForButtonAsSmall: '4px',
|
|
183
|
+
borderRadiusForButtonAsIconAsBig: '6px',
|
|
184
|
+
borderRadiusForButtonAsIconAsMedium: '4px',
|
|
185
|
+
borderRadiusForButtonAsIconAsSmall: '2px',
|
|
131
186
|
borderRadiusForInput: '6px',
|
|
132
187
|
borderRadiusForTag: '2px',
|
|
188
|
+
borderRadiusForCard: '6px',
|
|
189
|
+
fontColorForText: '#1a1a1a',
|
|
133
190
|
fontColorForInput: '#1a1a1a',
|
|
134
191
|
fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
135
192
|
fontColorForInputWhenError: '#e60050',
|
|
@@ -138,10 +195,46 @@ var themes = {
|
|
|
138
195
|
fontColorForTag: '#1a1a1a',
|
|
139
196
|
fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
|
|
140
197
|
fontColorForTextWhenInverted: '#fff',
|
|
141
|
-
|
|
198
|
+
heightForButtonAsBig: '32px',
|
|
199
|
+
heightForButtonAsSmall: '24px',
|
|
200
|
+
heightForButtonAsIconAsBig: '32px',
|
|
201
|
+
heightForButtonAsIconAsMedium: '24px',
|
|
202
|
+
heightForButtonAsIconAsSmall: '16px',
|
|
142
203
|
placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
|
|
204
|
+
fontSizeForButton: '1rem',
|
|
143
205
|
fontSizeForInput: '1rem',
|
|
206
|
+
fontSizeForTextAsH1: '2.4615rem',
|
|
207
|
+
fontSizeForTextAsH2: '1.8462rem',
|
|
208
|
+
fontSizeForTextAsH3: '1.5385rem',
|
|
209
|
+
fontSizeForTextAsH4: '1.2308rem',
|
|
210
|
+
fontSizeForTextAsH5: '1.0769rem',
|
|
211
|
+
fontSizeForTextAsBody: '1rem',
|
|
212
|
+
fontSizeForTextAsDetail: '0.9231rem',
|
|
213
|
+
fontSizeForBody: '13px',
|
|
214
|
+
fontSizeForLink: '1rem',
|
|
215
|
+
lineHeightForTextAsH1: 'inherit',
|
|
216
|
+
lineHeightForTextAsH2: 'inherit',
|
|
217
|
+
lineHeightForTextAsH3: 'inherit',
|
|
218
|
+
lineHeightForTextAsH4: 'inherit',
|
|
219
|
+
lineHeightForTextAsH5: 'inherit',
|
|
220
|
+
lineHeightForTextAsBody: 'inherit',
|
|
221
|
+
lineHeightForTextAsDetail: 'inherit',
|
|
222
|
+
fontWeightForTextAsH1: '300',
|
|
223
|
+
fontWeightForTextAsH2: '300',
|
|
224
|
+
fontWeightForTextAsH3: '300',
|
|
225
|
+
fontWeightForTextAsH4: '400',
|
|
226
|
+
fontWeightForTextAsH5: '400',
|
|
227
|
+
fontWeightForTextAsBody: '400',
|
|
228
|
+
fontWeightForTextAsDetail: '400',
|
|
229
|
+
fontWeightForButton: '400',
|
|
230
|
+
shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
|
|
231
|
+
shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
232
|
+
shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
|
|
233
|
+
shadowForButtonWhenActive: '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)',
|
|
234
|
+
shadowForButtonWhenDisabled: '0 0 0 1px var(--color-neutral) inset',
|
|
144
235
|
shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
236
|
+
shadowForCardWhenRaised: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
|
|
237
|
+
fontSizeM: '1rem',
|
|
145
238
|
bigButtonHeight: '32px',
|
|
146
239
|
smallButtonHeight: '24px',
|
|
147
240
|
sizeHeightInput: '32px',
|
|
@@ -153,11 +246,73 @@ var themes = {
|
|
|
153
246
|
standardInputHeight: '32px'
|
|
154
247
|
},
|
|
155
248
|
test: {
|
|
156
|
-
colorPrimary: '#
|
|
157
|
-
|
|
158
|
-
|
|
249
|
+
colorPrimary: '#00b39e',
|
|
250
|
+
fontFamily: "'Inter', system-ui",
|
|
251
|
+
backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
|
|
252
|
+
backgroundColorForButtonWhenHovered: 'hsl(0deg 0% 10% / 5%)',
|
|
253
|
+
backgroundColorForButtonAsPrimaryWhenActive: '#15A390',
|
|
254
|
+
backgroundColorForButtonAsPrimaryWhenHovered: '#17AB97',
|
|
255
|
+
backgroundColorForButtonAsIconAsPrimaryWhenActive: '#15A390',
|
|
256
|
+
backgroundColorForButtonAsIconAsPrimaryWhenHovered: '#00b39e',
|
|
257
|
+
backgroundColorForButtonAsIconAsInfoWhenActive: '#057FCC',
|
|
258
|
+
backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf',
|
|
259
|
+
backgroundColorForButtonAsUrgentWhenActive: '#DC630A',
|
|
260
|
+
backgroundColorForButtonAsUrgentWhenHovered: '#E7680D',
|
|
261
|
+
backgroundColorForButtonWhenDisabled: 'hsl(0, 0%, 95%)',
|
|
159
262
|
backgroundColorForTag: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
|
|
160
|
-
backgroundColorForTagWarning: 'hsl(0, 0%, 95%)'
|
|
263
|
+
backgroundColorForTagWarning: 'hsl(0, 0%, 95%)',
|
|
264
|
+
borderForButtonAsSecondary: '1px solid var(--color-neutral)',
|
|
265
|
+
borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
|
|
266
|
+
borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
|
|
267
|
+
borderForCardWhenRaised: '1px solid var(--color-neutral-90)',
|
|
268
|
+
borderColorForButtonAsIcon: '#ccc',
|
|
269
|
+
borderColorForButtonAsIconAsInfo: '#ccc',
|
|
270
|
+
borderColorForButtonAsIconAsPrimary: '#ccc',
|
|
271
|
+
borderColorForButtonAsIconWhenDisabled: '#fff',
|
|
272
|
+
borderColorForCardWhenRaised: 'hsl(0, 0%, 90%)',
|
|
273
|
+
borderRadiusForButtonAsBig: '4px',
|
|
274
|
+
borderRadiusForButtonAsSmall: '4px',
|
|
275
|
+
borderRadiusForButtonAsIconAsBig: '4px',
|
|
276
|
+
borderRadiusForButtonAsIconAsMedium: '4px',
|
|
277
|
+
borderRadiusForButtonAsIconAsSmall: '2px',
|
|
278
|
+
borderRadiusForCard: '4px',
|
|
279
|
+
fontSizeForInput: '1rem',
|
|
280
|
+
fontSizeForTextAsH1: '1.5rem',
|
|
281
|
+
fontSizeForTextAsH2: '1.5rem',
|
|
282
|
+
fontSizeForTextAsH3: '1.125rem',
|
|
283
|
+
fontSizeForTextAsH4: '1rem',
|
|
284
|
+
fontSizeForTextAsH5: '1rem',
|
|
285
|
+
fontSizeForTextAsBody: '1rem',
|
|
286
|
+
fontSizeForTextAsDetail: '0.875rem',
|
|
287
|
+
fontSizeForBody: '16px',
|
|
288
|
+
fontSizeForButton: '0.875rem',
|
|
289
|
+
fontSizeForLink: 'inherit',
|
|
290
|
+
lineHeightForTextAsH1: '1.75rem',
|
|
291
|
+
lineHeightForTextAsH2: '1.75rem',
|
|
292
|
+
lineHeightForTextAsH3: '1.5rem',
|
|
293
|
+
lineHeightForTextAsH4: '1.375rem',
|
|
294
|
+
lineHeightForTextAsH5: '1.375rem',
|
|
295
|
+
lineHeightForTextAsBody: '1.625rem',
|
|
296
|
+
lineHeightForTextAsDetail: '1.375rem',
|
|
297
|
+
fontWeightForTextAsH1: '500',
|
|
298
|
+
fontWeightForTextAsH2: '500',
|
|
299
|
+
fontWeightForTextAsH3: '500',
|
|
300
|
+
fontWeightForTextAsH4: '500',
|
|
301
|
+
fontWeightForTextAsH5: '500',
|
|
302
|
+
fontWeightForTextAsBody: '400',
|
|
303
|
+
fontWeightForTextAsDetail: '400',
|
|
304
|
+
fontWeightForButton: '500',
|
|
305
|
+
heightForButtonAsBig: '40px',
|
|
306
|
+
heightForButtonAsSmall: '32px',
|
|
307
|
+
heightForButtonAsIconAsBig: '40px',
|
|
308
|
+
heightForButtonAsIconAsMedium: '32px',
|
|
309
|
+
heightForButtonAsIconAsSmall: '16px',
|
|
310
|
+
shadowForButton: 'none',
|
|
311
|
+
shadowForButtonWhenFocused: 'none',
|
|
312
|
+
shadowForButtonWhenHovered: 'none',
|
|
313
|
+
shadowForButtonWhenActive: 'none',
|
|
314
|
+
shadowForButtonWhenDisabled: 'none',
|
|
315
|
+
shadowForCardWhenRaised: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
|
|
161
316
|
}
|
|
162
317
|
};
|
|
163
318
|
var designTokens = {
|
|
@@ -172,6 +327,9 @@ var designTokens = {
|
|
|
172
327
|
colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))',
|
|
173
328
|
colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))',
|
|
174
329
|
colorNeutral: 'var(--color-neutral, #ccc)',
|
|
330
|
+
colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))',
|
|
331
|
+
colorNeutral10: 'var(--color-neutral-10, hsl(0deg 0% 80% / 10%))',
|
|
332
|
+
colorNeutral40: 'var(--color-neutral-40, hsl(0, 0%, 40%))',
|
|
175
333
|
colorNeutral60: 'var(--color-neutral-60, hsl(0, 0%, 60%))',
|
|
176
334
|
colorNeutral90: 'var(--color-neutral-90, hsl(0, 0%, 90%))',
|
|
177
335
|
colorNeutral95: 'var(--color-neutral-95, hsl(0, 0%, 95%))',
|
|
@@ -179,18 +337,44 @@ var designTokens = {
|
|
|
179
337
|
colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
|
|
180
338
|
colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
|
|
181
339
|
colorWarning: 'var(--color-warning, #f16d0e)',
|
|
340
|
+
colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
|
|
182
341
|
colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
183
342
|
colorError: 'var(--color-error, #e60050)',
|
|
184
343
|
colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))',
|
|
185
344
|
colorSolid: 'var(--color-solid, #1a1a1a)',
|
|
345
|
+
colorSolid05: 'var(--color-solid-05, hsl(0deg 0% 10% / 5%))',
|
|
346
|
+
colorSolid10: 'var(--color-solid-10, hsl(0deg 0% 10% / 10%))',
|
|
186
347
|
colorSurface: 'var(--color-surface, #fff)',
|
|
187
348
|
borderRadius1: 'var(--border-radius-1, 1px)',
|
|
188
349
|
borderRadius2: 'var(--border-radius-2, 2px)',
|
|
189
350
|
borderRadius4: 'var(--border-radius-4, 4px)',
|
|
190
351
|
borderRadius6: 'var(--border-radius-6, 6px)',
|
|
191
352
|
borderRadius20: 'var(--border-radius-20, 20px)',
|
|
192
|
-
|
|
193
|
-
|
|
353
|
+
fontFamily: "var(--font-family, 'Open Sans', sans-serif)",
|
|
354
|
+
fontSize10: 'var(--font-size-10, 0.75rem)',
|
|
355
|
+
fontSize20: 'var(--font-size-20, 0.875rem)',
|
|
356
|
+
fontSize30: 'var(--font-size-30, 1rem)',
|
|
357
|
+
fontSize40: 'var(--font-size-40, 1.125rem)',
|
|
358
|
+
fontSize50: 'var(--font-size-50, 1.25rem)',
|
|
359
|
+
fontSize60: 'var(--font-size-60, 1.5rem)',
|
|
360
|
+
fontSize15: 'var(--font-size-15, 0.9231rem)',
|
|
361
|
+
fontSize35: 'var(--font-size-35, 1.0769rem)',
|
|
362
|
+
fontSize45: 'var(--font-size-45, 1.2308rem)',
|
|
363
|
+
fontSize63: 'var(--font-size-63, 1.5385rem)',
|
|
364
|
+
fontSize66: 'var(--font-size-66, 1.8462rem)',
|
|
365
|
+
fontSize70: 'var(--font-size-70, 2.4615rem)',
|
|
366
|
+
fontWeight300: 'var(--font-weight-300, 300)',
|
|
367
|
+
fontWeight400: 'var(--font-weight-400, 400)',
|
|
368
|
+
fontWeight500: 'var(--font-weight-500, 500)',
|
|
369
|
+
fontWeight600: 'var(--font-weight-600, 600)',
|
|
370
|
+
fontWeight700: 'var(--font-weight-700, 700)',
|
|
371
|
+
lineHeight10: 'var(--line-height-10, 1.25rem)',
|
|
372
|
+
lineHeight20: 'var(--line-height-20, 1.375rem)',
|
|
373
|
+
lineHeight30: 'var(--line-height-30, 1.5rem)',
|
|
374
|
+
lineHeight40: 'var(--line-height-40, 1.625rem)',
|
|
375
|
+
lineHeight50: 'var(--line-height-50, 1.75rem)',
|
|
376
|
+
lineHeight60: 'var(--line-height-60, 2.125rem)',
|
|
377
|
+
shadow0: 'var(--shadow-0, none)',
|
|
194
378
|
shadow1: 'var(--shadow-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
195
379
|
shadow2: 'var(--shadow-2, 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23))',
|
|
196
380
|
shadow3: 'var(--shadow-3, 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23))',
|
|
@@ -237,12 +421,27 @@ var designTokens = {
|
|
|
237
421
|
breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
|
|
238
422
|
breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
|
|
239
423
|
breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)',
|
|
424
|
+
backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, #fff)',
|
|
425
|
+
backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, #fff)',
|
|
426
|
+
backgroundColorForButtonAsPrimaryWhenActive: 'var(--background-color-for-button-as-primary-when-active, #00b39e)',
|
|
427
|
+
backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))',
|
|
428
|
+
backgroundColorForButtonAsIconAsPrimaryWhenActive: 'var(--background-color-for-button-as-icon-as-primary-when-active, #00b39e)',
|
|
429
|
+
backgroundColorForButtonAsIconAsPrimaryWhenHovered: 'var(--background-color-for-button-as-icon-as-primary-when-hovered, #00b39e)',
|
|
430
|
+
backgroundColorForButtonAsIconAsInfoWhenActive: 'var(--background-color-for-button-as-icon-as-info-when-active, #078cdf)',
|
|
431
|
+
backgroundColorForButtonAsIconAsInfoWhenHovered: 'var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)',
|
|
432
|
+
backgroundColorForButtonAsUrgentWhenActive: 'var(--background-color-for-button-as-urgent-when-active, #f16d0e)',
|
|
433
|
+
backgroundColorForButtonAsUrgentWhenHovered: 'var(--background-color-for-button-as-urgent-when-hovered, hsl(25.110132158590307, 89.0196078431%, 25%))',
|
|
434
|
+
backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
240
435
|
backgroundColorForInput: 'var(--background-color-for-input, #fff)',
|
|
241
436
|
backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
|
|
242
437
|
backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))',
|
|
243
438
|
backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(0, 0%, 90%))',
|
|
244
439
|
backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
|
|
245
440
|
backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
|
|
441
|
+
borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
|
|
442
|
+
borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
|
|
443
|
+
borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
|
|
444
|
+
borderForCardWhenRaised: 'var(--border-for-card-when-raised, none)',
|
|
246
445
|
borderColorForInput: 'var(--border-color-for-input, hsl(0, 0%, 60%))',
|
|
247
446
|
borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)',
|
|
248
447
|
borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)',
|
|
@@ -252,8 +451,19 @@ var designTokens = {
|
|
|
252
451
|
borderColorForTag: 'var(--border-color-for-tag, hsl(0, 0%, 60%))',
|
|
253
452
|
borderColorForTagWarning: 'var(--border-color-for-tag-warning, #f16d0e)',
|
|
254
453
|
borderColorForTagWhenFocused: 'var(--border-color-for-tag-when-focused, #00b39e)',
|
|
454
|
+
borderColorForButtonAsIcon: 'var(--border-color-for-button-as-icon, #fff)',
|
|
455
|
+
borderColorForButtonAsIconAsInfo: 'var(--border-color-for-button-as-icon-as-info, #078cdf)',
|
|
456
|
+
borderColorForButtonAsIconAsPrimary: 'var(--border-color-for-button-as-icon-as-primary, #00b39e)',
|
|
457
|
+
borderColorForButtonAsIconWhenDisabled: 'var(--border-color-for-button-as-icon-when-disabled, #ccc)',
|
|
458
|
+
borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
|
|
459
|
+
borderRadiusForButtonAsSmall: 'var(--border-radius-for-button-as-small, 4px)',
|
|
460
|
+
borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 6px)',
|
|
461
|
+
borderRadiusForButtonAsIconAsMedium: 'var(--border-radius-for-button-as-icon-as-medium, 4px)',
|
|
462
|
+
borderRadiusForButtonAsIconAsSmall: 'var(--border-radius-for-button-as-icon-as-small, 2px)',
|
|
255
463
|
borderRadiusForInput: 'var(--border-radius-for-input, 6px)',
|
|
256
464
|
borderRadiusForTag: 'var(--border-radius-for-tag, 2px)',
|
|
465
|
+
borderRadiusForCard: 'var(--border-radius-for-card, 6px)',
|
|
466
|
+
fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
|
|
257
467
|
fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
|
|
258
468
|
fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
|
|
259
469
|
fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
|
|
@@ -262,10 +472,46 @@ var designTokens = {
|
|
|
262
472
|
fontColorForTag: 'var(--font-color-for-tag, #1a1a1a)',
|
|
263
473
|
fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))',
|
|
264
474
|
fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)',
|
|
265
|
-
|
|
475
|
+
heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)',
|
|
476
|
+
heightForButtonAsSmall: 'var(--height-for-button-as-small, 24px)',
|
|
477
|
+
heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
|
|
478
|
+
heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 24px)',
|
|
479
|
+
heightForButtonAsIconAsSmall: 'var(--height-for-button-as-icon-as-small, 16px)',
|
|
266
480
|
placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
|
|
481
|
+
fontSizeForButton: 'var(--font-size-for-button, 1rem)',
|
|
267
482
|
fontSizeForInput: 'var(--font-size-for-input, 1rem)',
|
|
483
|
+
fontSizeForTextAsH1: 'var(--font-size-for-text-as-h-1, 2.4615rem)',
|
|
484
|
+
fontSizeForTextAsH2: 'var(--font-size-for-text-as-h-2, 1.8462rem)',
|
|
485
|
+
fontSizeForTextAsH3: 'var(--font-size-for-text-as-h-3, 1.5385rem)',
|
|
486
|
+
fontSizeForTextAsH4: 'var(--font-size-for-text-as-h-4, 1.2308rem)',
|
|
487
|
+
fontSizeForTextAsH5: 'var(--font-size-for-text-as-h-5, 1.0769rem)',
|
|
488
|
+
fontSizeForTextAsBody: 'var(--font-size-for-text-as-body, 1rem)',
|
|
489
|
+
fontSizeForTextAsDetail: 'var(--font-size-for-text-as-detail, 0.9231rem)',
|
|
490
|
+
fontSizeForBody: 'var(--font-size-for-body, 13px)',
|
|
491
|
+
fontSizeForLink: 'var(--font-size-for-link, 1rem)',
|
|
492
|
+
lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, inherit)',
|
|
493
|
+
lineHeightForTextAsH2: 'var(--line-height-for-text-as-h-2, inherit)',
|
|
494
|
+
lineHeightForTextAsH3: 'var(--line-height-for-text-as-h-3, inherit)',
|
|
495
|
+
lineHeightForTextAsH4: 'var(--line-height-for-text-as-h-4, inherit)',
|
|
496
|
+
lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, inherit)',
|
|
497
|
+
lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, inherit)',
|
|
498
|
+
lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, inherit)',
|
|
499
|
+
fontWeightForTextAsH1: 'var(--font-weight-for-text-as-h-1, 300)',
|
|
500
|
+
fontWeightForTextAsH2: 'var(--font-weight-for-text-as-h-2, 300)',
|
|
501
|
+
fontWeightForTextAsH3: 'var(--font-weight-for-text-as-h-3, 300)',
|
|
502
|
+
fontWeightForTextAsH4: 'var(--font-weight-for-text-as-h-4, 400)',
|
|
503
|
+
fontWeightForTextAsH5: 'var(--font-weight-for-text-as-h-5, 400)',
|
|
504
|
+
fontWeightForTextAsBody: 'var(--font-weight-for-text-as-body, 400)',
|
|
505
|
+
fontWeightForTextAsDetail: 'var(--font-weight-for-text-as-detail, 400)',
|
|
506
|
+
fontWeightForButton: 'var(--font-weight-for-button, 400)',
|
|
507
|
+
shadowForButton: 'var(--shadow-for-button, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
|
|
508
|
+
shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
|
|
509
|
+
shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
|
|
510
|
+
shadowForButtonWhenActive: 'var(--shadow-for-button-when-active, 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))',
|
|
511
|
+
shadowForButtonWhenDisabled: 'var(--shadow-for-button-when-disabled, 0 0 0 1px var(--color-neutral) inset)',
|
|
268
512
|
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))',
|
|
513
|
+
shadowForCardWhenRaised: 'var(--shadow-for-card-when-raised, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
|
|
514
|
+
fontSizeM: 'var(--font-size-m, 1rem)',
|
|
269
515
|
bigButtonHeight: 'var(--big-button-height, 32px)',
|
|
270
516
|
smallButtonHeight: 'var(--small-button-height, 24px)',
|
|
271
517
|
sizeHeightInput: 'var(--size-height-input, 32px)',
|
|
@@ -278,34 +524,82 @@ var designTokens = {
|
|
|
278
524
|
};
|
|
279
525
|
var designTokens$1 = designTokens;
|
|
280
526
|
|
|
281
|
-
|
|
527
|
+
/*
|
|
528
|
+
This will transform a map of tokens names/values to
|
|
529
|
+
a map of css var names/values
|
|
282
530
|
|
|
283
|
-
|
|
531
|
+
Example input:
|
|
532
|
+
{
|
|
533
|
+
borderRadius4: '4px',
|
|
534
|
+
}
|
|
535
|
+
Example output:
|
|
536
|
+
{
|
|
537
|
+
'--border-radius-4': '4px',
|
|
538
|
+
}
|
|
539
|
+
*/
|
|
540
|
+
|
|
541
|
+
function transformTokensToCssVarsValues(tokens) {
|
|
284
542
|
var _context;
|
|
285
543
|
|
|
286
|
-
return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](
|
|
544
|
+
return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](tokens)).call(_context, function (_ref) {
|
|
287
545
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
288
546
|
key = _ref2[0],
|
|
289
547
|
value = _ref2[1];
|
|
290
548
|
|
|
291
549
|
return ["--".concat(kebabCase__default["default"](key)), value];
|
|
292
550
|
}));
|
|
293
|
-
}
|
|
551
|
+
}
|
|
552
|
+
/*
|
|
553
|
+
This will transform a map of tokens names/values to
|
|
554
|
+
a map of token names/css var definitions.
|
|
555
|
+
Including default css value in the definition is optional (true by default)
|
|
556
|
+
|
|
557
|
+
Example input:
|
|
558
|
+
{
|
|
559
|
+
borderRadius4: '4px',
|
|
560
|
+
}
|
|
561
|
+
Example output:
|
|
562
|
+
{
|
|
563
|
+
borderRadius4: 'var(--border-radius-4, 4px)',
|
|
564
|
+
}
|
|
565
|
+
*/
|
|
566
|
+
|
|
567
|
+
|
|
568
|
+
function transformTokensToCssVarsReferences(tokens) {
|
|
569
|
+
var _context2;
|
|
570
|
+
|
|
571
|
+
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
572
|
+
includeDefaultValue: true
|
|
573
|
+
},
|
|
574
|
+
includeDefaultValue = _ref3.includeDefaultValue;
|
|
575
|
+
|
|
576
|
+
return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, function (_ref4) {
|
|
577
|
+
var _context3;
|
|
578
|
+
|
|
579
|
+
var _ref5 = _slicedToArray(_ref4, 2),
|
|
580
|
+
key = _ref5[0],
|
|
581
|
+
value = _ref5[1];
|
|
582
|
+
|
|
583
|
+
return [key, _concatInstanceProperty__default["default"](_context3 = "var(--".concat(kebabCase__default["default"](key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
|
|
584
|
+
}));
|
|
585
|
+
}
|
|
294
586
|
|
|
587
|
+
var allThemesNames = _Object$keys__default["default"](themes);
|
|
295
588
|
|
|
589
|
+
// used to cover SSR builds (for instance in Gatsby)
|
|
296
590
|
var isBrowser = typeof window !== 'undefined';
|
|
297
591
|
|
|
298
592
|
var defaultParentSelector = function defaultParentSelector() {
|
|
299
593
|
return document.querySelector(':root');
|
|
300
594
|
};
|
|
301
595
|
|
|
302
|
-
var applyTheme = function applyTheme(
|
|
303
|
-
var
|
|
596
|
+
var applyTheme = function applyTheme(_ref) {
|
|
597
|
+
var _context;
|
|
304
598
|
|
|
305
|
-
var newTheme =
|
|
306
|
-
|
|
307
|
-
parentSelector =
|
|
308
|
-
themeOverrides =
|
|
599
|
+
var newTheme = _ref.newTheme,
|
|
600
|
+
_ref$parentSelector = _ref.parentSelector,
|
|
601
|
+
parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
|
|
602
|
+
themeOverrides = _ref.themeOverrides;
|
|
309
603
|
var target = isBrowser ? parentSelector() : null; // With no target we can't change themes
|
|
310
604
|
|
|
311
605
|
if (!target) return;
|
|
@@ -315,12 +609,12 @@ var applyTheme = function applyTheme(_ref3) {
|
|
|
315
609
|
console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
|
|
316
610
|
}
|
|
317
611
|
|
|
318
|
-
var vars =
|
|
612
|
+
var vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
|
|
319
613
|
|
|
320
|
-
_forEachInstanceProperty__default["default"](
|
|
321
|
-
var
|
|
322
|
-
key =
|
|
323
|
-
value =
|
|
614
|
+
_forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, function (_ref2) {
|
|
615
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
|
616
|
+
key = _ref3[0],
|
|
617
|
+
value = _ref3[1];
|
|
324
618
|
|
|
325
619
|
target.style.setProperty(key, value);
|
|
326
620
|
});
|
|
@@ -355,7 +649,8 @@ ThemeProvider.propTypes = {
|
|
|
355
649
|
themeOverrides: _pt__default["default"].objectOf(_pt__default["default"].string)
|
|
356
650
|
};
|
|
357
651
|
ThemeProvider.defaultProps = {
|
|
358
|
-
parentSelector: defaultParentSelector
|
|
652
|
+
parentSelector: defaultParentSelector,
|
|
653
|
+
theme: 'default'
|
|
359
654
|
};
|
|
360
655
|
|
|
361
656
|
var useTheme = function useTheme() {
|
|
@@ -378,11 +673,13 @@ var useTheme = function useTheme() {
|
|
|
378
673
|
};
|
|
379
674
|
|
|
380
675
|
// NOTE: This string will be replaced on build time with the package version.
|
|
381
|
-
var version = "15.
|
|
676
|
+
var version = "15.5.0";
|
|
382
677
|
|
|
383
678
|
exports.ThemeProvider = ThemeProvider;
|
|
384
679
|
exports.customProperties = designTokens$1;
|
|
385
680
|
exports.designTokens = designTokens$1;
|
|
386
681
|
exports.themes = themes;
|
|
682
|
+
exports.transformTokensToCssVarsReferences = transformTokensToCssVarsReferences;
|
|
683
|
+
exports.transformTokensToCssVarsValues = transformTokensToCssVarsValues;
|
|
387
684
|
exports.useTheme = useTheme;
|
|
388
685
|
exports.version = version;
|