@commercetools-frontend/ui-kit 18.0.0 → 18.2.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-frontend-ui-kit.cjs.dev.js +1 -1
- package/dist/commercetools-frontend-ui-kit.cjs.prod.js +1 -1
- package/dist/commercetools-frontend-ui-kit.esm.js +1 -1
- package/materials/custom-properties.css +34 -0
- package/materials/custom-properties.json +30 -0
- package/materials/internals/definition.yaml +158 -0
- package/materials/resets.css +2 -2
- package/package.json +36 -36
|
@@ -81,7 +81,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
|
|
|
81
81
|
var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
|
|
82
82
|
|
|
83
83
|
// NOTE: This string will be replaced on build time with the package version.
|
|
84
|
-
var version = "18.
|
|
84
|
+
var version = "18.2.0";
|
|
85
85
|
|
|
86
86
|
exports.i18n = i18n__namespace;
|
|
87
87
|
Object.defineProperty(exports, 'AccessibleHidden', {
|
|
@@ -81,7 +81,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
|
|
|
81
81
|
var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
|
|
82
82
|
|
|
83
83
|
// NOTE: This string will be replaced on build time with the package version.
|
|
84
|
-
var version = "18.
|
|
84
|
+
var version = "18.2.0";
|
|
85
85
|
|
|
86
86
|
exports.i18n = i18n__namespace;
|
|
87
87
|
Object.defineProperty(exports, 'AccessibleHidden', {
|
|
@@ -34,6 +34,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
|
|
|
34
34
|
export { customProperties, designTokens } from '@commercetools-uikit/design-system';
|
|
35
35
|
|
|
36
36
|
// NOTE: This string will be replaced on build time with the package version.
|
|
37
|
-
var version = "18.
|
|
37
|
+
var version = "18.2.0";
|
|
38
38
|
|
|
39
39
|
export { version };
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
:root {
|
|
9
9
|
--color-primary: hsl(175, 55%, 45%);
|
|
10
|
+
--color-primary-10: hsl(240, 66%, 19%);
|
|
10
11
|
--color-primary-20: hsl(175, 55%, 20%);
|
|
11
12
|
--color-primary-25: hsl(175, 55%, 25%);
|
|
12
13
|
--color-primary-30: hsl(175, 55%, 30%);
|
|
@@ -69,6 +70,7 @@
|
|
|
69
70
|
--color-warning: #f16d0e;
|
|
70
71
|
--color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
|
|
71
72
|
--color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
|
|
73
|
+
--color-warning-60: hsl(35, 90%, 55%);
|
|
72
74
|
--color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
|
|
73
75
|
--color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
|
|
74
76
|
--color-error: #e60050;
|
|
@@ -82,6 +84,11 @@
|
|
|
82
84
|
--color-solid-10: hsl(0deg 0% 10% / 10%);
|
|
83
85
|
--color-surface: #fff;
|
|
84
86
|
--color-transparent: transparent;
|
|
87
|
+
--color-success: hsl(152, 77%, 39%);
|
|
88
|
+
--color-success-25: hsl(155, 84%, 20%);
|
|
89
|
+
--color-success-40: hsl(155, 90%, 24%);
|
|
90
|
+
--color-success-85: hsl(144, 69%, 80%);
|
|
91
|
+
--color-success-95: hsl(141, 76%, 92%);
|
|
85
92
|
--border-radius-1: 1px;
|
|
86
93
|
--border-radius-2: 2px;
|
|
87
94
|
--border-radius-4: 4px;
|
|
@@ -211,6 +218,20 @@
|
|
|
211
218
|
18%,
|
|
212
219
|
95%
|
|
213
220
|
);
|
|
221
|
+
--background-color-for-button-as-primary: #15a390;
|
|
222
|
+
--background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%);
|
|
223
|
+
--background-color-for-button-as-primary-as-default-when-hovered: #17ab97;
|
|
224
|
+
--background-color-for-button-as-primary-as-default-when-active: #15a390;
|
|
225
|
+
--background-color-for-button-as-primary-as-urgent: #f16d0e;
|
|
226
|
+
--background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
|
|
227
|
+
--background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
|
|
228
|
+
--background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
|
|
229
|
+
--background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
|
|
230
|
+
--background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
|
|
231
|
+
--background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
|
|
232
|
+
--background-color-for-loading-spinner-track: #213c45;
|
|
233
|
+
--background-color-for-loading-spinner-dot: #213c45;
|
|
234
|
+
--background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
|
|
214
235
|
--border-color-for-input: hsl(232, 18%, 80%);
|
|
215
236
|
--border-color-for-input-when-focused: hsl(175, 55%, 45%);
|
|
216
237
|
--border-color-for-input-when-disabled: hsl(232, 18%, 80%);
|
|
@@ -219,6 +240,8 @@
|
|
|
219
240
|
--border-color-for-input-when-warning: #f16d0e;
|
|
220
241
|
--border-color-for-input-when-hovered: hsl(232, 18%, 80%);
|
|
221
242
|
--border-color-for-input-as-quiet: transparent;
|
|
243
|
+
--border-color-for-button-as-secondary: hsl(232, 18%, 80%);
|
|
244
|
+
--border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
|
|
222
245
|
--border-radius-for-button-as-big: 4px;
|
|
223
246
|
--border-radius-for-button-as-medium: 4px;
|
|
224
247
|
--border-radius-for-input: 4px;
|
|
@@ -231,6 +254,17 @@
|
|
|
231
254
|
--font-color-for-input-when-error: #e60050;
|
|
232
255
|
--font-color-for-input-when-readonly: hsl(232, 18%, 40%);
|
|
233
256
|
--font-color-for-input-when-warning: #f16d0e;
|
|
257
|
+
--font-color-for-button-as-secondary: #1a1a1a;
|
|
258
|
+
--font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%);
|
|
259
|
+
--font-color-for-button-as-flat-as-critical: #e60050;
|
|
260
|
+
--font-color-for-button-as-flat-as-critical-when-hovered: hsl(
|
|
261
|
+
339.1304347826087,
|
|
262
|
+
100%,
|
|
263
|
+
25%
|
|
264
|
+
);
|
|
265
|
+
--font-color-for-view-switcher-button: hsl(232, 18%, 40%);
|
|
266
|
+
--font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
|
|
267
|
+
--font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
|
|
234
268
|
--height-for-button-as-big: 40px;
|
|
235
269
|
--height-for-button-as-medium: 32px;
|
|
236
270
|
--height-for-button-as-small: 16px;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"--color-primary": "hsl(175, 55%, 45%)",
|
|
3
|
+
"--color-primary-10": "hsl(240, 66%, 19%)",
|
|
3
4
|
"--color-primary-20": "hsl(175, 55%, 20%)",
|
|
4
5
|
"--color-primary-25": "hsl(175, 55%, 25%)",
|
|
5
6
|
"--color-primary-30": "hsl(175, 55%, 30%)",
|
|
@@ -62,6 +63,7 @@
|
|
|
62
63
|
"--color-warning": "#f16d0e",
|
|
63
64
|
"--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
|
|
64
65
|
"--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)",
|
|
66
|
+
"--color-warning-60": "hsl(35, 90%, 55%)",
|
|
65
67
|
"--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
|
|
66
68
|
"--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
|
|
67
69
|
"--color-error": "#e60050",
|
|
@@ -75,6 +77,11 @@
|
|
|
75
77
|
"--color-solid-10": "hsl(0deg 0% 10% / 10%)",
|
|
76
78
|
"--color-surface": "#fff",
|
|
77
79
|
"--color-transparent": "transparent",
|
|
80
|
+
"--color-success": "hsl(152, 77%, 39%)",
|
|
81
|
+
"--color-success-25": "hsl(155, 84%, 20%)",
|
|
82
|
+
"--color-success-40": "hsl(155, 90%, 24%)",
|
|
83
|
+
"--color-success-85": "hsl(144, 69%, 80%)",
|
|
84
|
+
"--color-success-95": "hsl(141, 76%, 92%)",
|
|
78
85
|
"--border-radius-1": "1px",
|
|
79
86
|
"--border-radius-2": "2px",
|
|
80
87
|
"--border-radius-4": "4px",
|
|
@@ -187,6 +194,20 @@
|
|
|
187
194
|
"--background-color-for-localized-input-label": "#fff",
|
|
188
195
|
"--background-color-for-localized-input-label-when-readonly": "hsl(232, 18%, 95%)",
|
|
189
196
|
"--background-color-for-localized-input-label-when-disabled": "hsl(232, 18%, 95%)",
|
|
197
|
+
"--background-color-for-button-as-primary": "#15a390",
|
|
198
|
+
"--background-color-for-button-as-primary-when-hovered": "hsl(175, 55%, 45%)",
|
|
199
|
+
"--background-color-for-button-as-primary-as-default-when-hovered": "#17ab97",
|
|
200
|
+
"--background-color-for-button-as-primary-as-default-when-active": "#15a390",
|
|
201
|
+
"--background-color-for-button-as-primary-as-urgent": "#f16d0e",
|
|
202
|
+
"--background-color-for-stamp-as-primary": "hsl(175, 70%, 90%)",
|
|
203
|
+
"--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)",
|
|
204
|
+
"--background-color-for-toggle-thumb-when-active": "hsl(175, 55%, 25%)",
|
|
205
|
+
"--background-color-for-toggle-track-when-active": "hsl(175, 55%, 40%)",
|
|
206
|
+
"--background-color-for-toggle-thumb-when-disabled": "hsl(232, 18%, 60%)",
|
|
207
|
+
"--background-color-for-toggle-track-when-disabled": "hsl(232, 18%, 90%)",
|
|
208
|
+
"--background-color-for-loading-spinner-track": "#213c45",
|
|
209
|
+
"--background-color-for-loading-spinner-dot": "#213c45",
|
|
210
|
+
"--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)",
|
|
190
211
|
"--border-color-for-input": "hsl(232, 18%, 80%)",
|
|
191
212
|
"--border-color-for-input-when-focused": "hsl(175, 55%, 45%)",
|
|
192
213
|
"--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)",
|
|
@@ -195,6 +216,8 @@
|
|
|
195
216
|
"--border-color-for-input-when-warning": "#f16d0e",
|
|
196
217
|
"--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)",
|
|
197
218
|
"--border-color-for-input-as-quiet": "transparent",
|
|
219
|
+
"--border-color-for-button-as-secondary": "hsl(232, 18%, 80%)",
|
|
220
|
+
"--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)",
|
|
198
221
|
"--border-radius-for-button-as-big": "4px",
|
|
199
222
|
"--border-radius-for-button-as-medium": "4px",
|
|
200
223
|
"--border-radius-for-input": "4px",
|
|
@@ -207,6 +230,13 @@
|
|
|
207
230
|
"--font-color-for-input-when-error": "#e60050",
|
|
208
231
|
"--font-color-for-input-when-readonly": "hsl(232, 18%, 40%)",
|
|
209
232
|
"--font-color-for-input-when-warning": "#f16d0e",
|
|
233
|
+
"--font-color-for-button-as-secondary": "#1a1a1a",
|
|
234
|
+
"--font-color-for-button-as-flat-when-hovered": "hsl(175, 55%, 45%)",
|
|
235
|
+
"--font-color-for-button-as-flat-as-critical": "#e60050",
|
|
236
|
+
"--font-color-for-button-as-flat-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)",
|
|
237
|
+
"--font-color-for-view-switcher-button": "hsl(232, 18%, 40%)",
|
|
238
|
+
"--font-color-for-stamp-as-positive": "hsl(175, 55%, 25%)",
|
|
239
|
+
"--font-color-for-content-notification-when-success": "hsl(175, 55%, 45%)",
|
|
210
240
|
"--height-for-button-as-big": "40px",
|
|
211
241
|
"--height-for-button-as-medium": "32px",
|
|
212
242
|
"--height-for-button-as-small": "16px",
|
|
@@ -37,6 +37,7 @@ choiceGroupsByTheme:
|
|
|
37
37
|
description: All colors in the system
|
|
38
38
|
choices:
|
|
39
39
|
color-primary: 'hsl(175, 55%, 45%)'
|
|
40
|
+
color-primary-10: 'hsl(240, 66%, 19%)' # design token copied from recolouring theme for export
|
|
40
41
|
color-primary-20: 'hsl(175, 55%, 20%)'
|
|
41
42
|
color-primary-25: 'hsl(175, 55%, 25%)'
|
|
42
43
|
color-primary-30: 'hsl(175, 55%, 30%)'
|
|
@@ -99,6 +100,7 @@ choiceGroupsByTheme:
|
|
|
99
100
|
color-warning: '#f16d0e'
|
|
100
101
|
color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
|
|
101
102
|
color-warning-40: 'hsl(25.110132158590307, 89.0196078431%, 40%)'
|
|
103
|
+
color-warning-60: 'hsl(35, 90%, 55%)' # design token copied from recolouring theme for export
|
|
102
104
|
color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
|
|
103
105
|
color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
|
|
104
106
|
color-error: '#e60050'
|
|
@@ -112,6 +114,11 @@ choiceGroupsByTheme:
|
|
|
112
114
|
color-solid-10: 'hsl(0deg 0% 10% / 10%)'
|
|
113
115
|
color-surface: '#fff'
|
|
114
116
|
color-transparent: 'transparent'
|
|
117
|
+
color-success: 'hsl(152, 77%, 39%)' # design token copied from recolouring theme for export
|
|
118
|
+
color-success-25: 'hsl(155, 84%, 20%)' # design token copied from recolouring theme for export
|
|
119
|
+
color-success-40: 'hsl(155, 90%, 24%)' # design token copied from recolouring theme for export
|
|
120
|
+
color-success-85: 'hsl(144, 69%, 80%)' # design token copied from recolouring theme for export
|
|
121
|
+
color-success-95: 'hsl(141, 76%, 92%)' # design token copied from recolouring theme for export
|
|
115
122
|
|
|
116
123
|
borderRadiuses:
|
|
117
124
|
label: Border Radiuses
|
|
@@ -327,6 +334,21 @@ variants:
|
|
|
327
334
|
description: 'To differentiate component big size'
|
|
328
335
|
quiet:
|
|
329
336
|
description: 'When the element is quiet style'
|
|
337
|
+
# recolouring rollout
|
|
338
|
+
secondary:
|
|
339
|
+
description: 'To differentiate component secondary type'
|
|
340
|
+
primary:
|
|
341
|
+
description: 'To differentiate component primary type'
|
|
342
|
+
flat:
|
|
343
|
+
description: 'To differentiate component flat type'
|
|
344
|
+
default:
|
|
345
|
+
description: 'To differentiate component default type'
|
|
346
|
+
critical:
|
|
347
|
+
description: 'To differentiate component critical type'
|
|
348
|
+
urgent:
|
|
349
|
+
description: 'To differentiate component urgent type'
|
|
350
|
+
positive:
|
|
351
|
+
description: 'To differentiate component positive type'
|
|
330
352
|
|
|
331
353
|
componentGroups:
|
|
332
354
|
button:
|
|
@@ -335,6 +357,21 @@ componentGroups:
|
|
|
335
357
|
description: 'Input elements'
|
|
336
358
|
localized-input-label:
|
|
337
359
|
description: 'Localized multiline text input label elements'
|
|
360
|
+
# recolouring rollout
|
|
361
|
+
view-switcher-button:
|
|
362
|
+
description: 'Viewswitcher Button elements'
|
|
363
|
+
stamp:
|
|
364
|
+
description: 'Stamp elements'
|
|
365
|
+
toggle-track:
|
|
366
|
+
description: 'Toggle track elements'
|
|
367
|
+
toggle-thumb:
|
|
368
|
+
description: 'Toggle thumb elements'
|
|
369
|
+
loading-spinner-track:
|
|
370
|
+
description: 'Loading spinner track elements'
|
|
371
|
+
loading-spinner-dot:
|
|
372
|
+
description: 'Loading spinner dot elements'
|
|
373
|
+
content-notification:
|
|
374
|
+
description: 'Content notification elements'
|
|
338
375
|
|
|
339
376
|
decisionGroupsByTheme:
|
|
340
377
|
default:
|
|
@@ -372,6 +409,35 @@ decisionGroupsByTheme:
|
|
|
372
409
|
choice: color-neutral-95
|
|
373
410
|
background-color-for-localized-input-label-when-disabled:
|
|
374
411
|
choice: color-neutral-95
|
|
412
|
+
# recolouring rollout
|
|
413
|
+
background-color-for-button-as-primary:
|
|
414
|
+
choice: '#15a390'
|
|
415
|
+
background-color-for-button-as-primary-when-hovered:
|
|
416
|
+
choice: color-primary
|
|
417
|
+
background-color-for-button-as-primary-as-default-when-hovered:
|
|
418
|
+
choice: '#17ab97'
|
|
419
|
+
background-color-for-button-as-primary-as-default-when-active:
|
|
420
|
+
choice: '#15a390'
|
|
421
|
+
background-color-for-button-as-primary-as-urgent:
|
|
422
|
+
choice: color-warning
|
|
423
|
+
background-color-for-stamp-as-primary:
|
|
424
|
+
choice: color-primary-90
|
|
425
|
+
background-color-for-stamp-as-positive:
|
|
426
|
+
choice: color-primary-90
|
|
427
|
+
background-color-for-toggle-thumb-when-active:
|
|
428
|
+
choice: color-primary-25
|
|
429
|
+
background-color-for-toggle-track-when-active:
|
|
430
|
+
choice: color-primary-40
|
|
431
|
+
background-color-for-toggle-thumb-when-disabled:
|
|
432
|
+
choice: color-neutral-60
|
|
433
|
+
background-color-for-toggle-track-when-disabled:
|
|
434
|
+
choice: color-neutral-90
|
|
435
|
+
background-color-for-loading-spinner-track:
|
|
436
|
+
choice: color-accent
|
|
437
|
+
background-color-for-loading-spinner-dot:
|
|
438
|
+
choice: color-accent
|
|
439
|
+
background-color-for-content-notification-when-success:
|
|
440
|
+
choice: color-primary-95
|
|
375
441
|
|
|
376
442
|
borderColors:
|
|
377
443
|
label: Border Colors
|
|
@@ -393,6 +459,11 @@ decisionGroupsByTheme:
|
|
|
393
459
|
choice: color-neutral
|
|
394
460
|
border-color-for-input-as-quiet:
|
|
395
461
|
choice: color-transparent
|
|
462
|
+
# recolouring rollout
|
|
463
|
+
border-color-for-button-as-secondary:
|
|
464
|
+
choice: color-neutral
|
|
465
|
+
border-color-for-content-notification-when-success:
|
|
466
|
+
choice: color-primary-85
|
|
396
467
|
|
|
397
468
|
borderRadiuses:
|
|
398
469
|
label: Border Radius
|
|
@@ -432,6 +503,21 @@ decisionGroupsByTheme:
|
|
|
432
503
|
choice: color-neutral-40
|
|
433
504
|
font-color-for-input-when-warning:
|
|
434
505
|
choice: color-warning
|
|
506
|
+
# recolouring rollout
|
|
507
|
+
font-color-for-button-as-secondary:
|
|
508
|
+
choice: color-solid
|
|
509
|
+
font-color-for-button-as-flat-when-hovered:
|
|
510
|
+
choice: color-primary
|
|
511
|
+
font-color-for-button-as-flat-as-critical:
|
|
512
|
+
choice: color-error
|
|
513
|
+
font-color-for-button-as-flat-as-critical-when-hovered:
|
|
514
|
+
choice: color-error-25
|
|
515
|
+
font-color-for-view-switcher-button:
|
|
516
|
+
choice: color-neutral-40
|
|
517
|
+
font-color-for-stamp-as-positive:
|
|
518
|
+
choice: color-primary-25
|
|
519
|
+
font-color-for-content-notification-when-success:
|
|
520
|
+
choice: color-primary
|
|
435
521
|
|
|
436
522
|
heights:
|
|
437
523
|
label: Height
|
|
@@ -490,3 +576,75 @@ decisionGroupsByTheme:
|
|
|
490
576
|
choice: 'inset 0 0 0 1px var(--color-error)'
|
|
491
577
|
shadow-for-input-when-warning:
|
|
492
578
|
choice: 'inset 0 0 0 1px var(--color-warning)'
|
|
579
|
+
|
|
580
|
+
recolouring:
|
|
581
|
+
borderColors:
|
|
582
|
+
label: Border Colors
|
|
583
|
+
prefix: border-color
|
|
584
|
+
decisions:
|
|
585
|
+
border-color-for-button-as-secondary:
|
|
586
|
+
choice: color-primary-85
|
|
587
|
+
border-color-for-input-when-focused:
|
|
588
|
+
choice: color-primary-40
|
|
589
|
+
border-color-for-content-notification-when-success:
|
|
590
|
+
choice: color-success-85
|
|
591
|
+
|
|
592
|
+
backgroundColors:
|
|
593
|
+
label: Background Colors
|
|
594
|
+
prefix: background-color
|
|
595
|
+
decisions:
|
|
596
|
+
background-color-for-button-when-active:
|
|
597
|
+
choice: color-primary-90
|
|
598
|
+
background-color-for-button-when-hovered:
|
|
599
|
+
choice: color-primary-95
|
|
600
|
+
background-color-for-button-as-primary:
|
|
601
|
+
choice: color-primary
|
|
602
|
+
background-color-for-button-as-primary-when-hovered:
|
|
603
|
+
choice: color-primary-40
|
|
604
|
+
background-color-for-button-as-primary-as-default-when-hovered:
|
|
605
|
+
choice: color-primary-40
|
|
606
|
+
background-color-for-button-as-primary-as-default-when-active:
|
|
607
|
+
choice: color-primary-25
|
|
608
|
+
background-color-for-button-as-primary-as-urgent:
|
|
609
|
+
choice: color-warning-60
|
|
610
|
+
background-color-for-input-when-selected:
|
|
611
|
+
choice: color-primary-95
|
|
612
|
+
background-color-for-stamp-as-primary:
|
|
613
|
+
choice: color-primary-95
|
|
614
|
+
background-color-for-stamp-as-positive:
|
|
615
|
+
choice: color-success-95
|
|
616
|
+
background-color-for-toggle-thumb-when-active:
|
|
617
|
+
choice: color-primary-40
|
|
618
|
+
background-color-for-toggle-track-when-active:
|
|
619
|
+
choice: color-primary-85
|
|
620
|
+
background-color-for-toggle-thumb-when-disabled:
|
|
621
|
+
choice: color-primary-85
|
|
622
|
+
background-color-for-toggle-track-when-disabled:
|
|
623
|
+
choice: color-primary-90
|
|
624
|
+
background-color-for-loading-spinner-track:
|
|
625
|
+
choice: color-primary-90
|
|
626
|
+
background-color-for-loading-spinner-dot:
|
|
627
|
+
choice: color-primary
|
|
628
|
+
background-color-for-content-notification-when-success:
|
|
629
|
+
choice: color-success-95
|
|
630
|
+
|
|
631
|
+
fontColors:
|
|
632
|
+
label: Font Colors
|
|
633
|
+
prefix: font-color
|
|
634
|
+
decisions:
|
|
635
|
+
font-color-for-button-as-secondary:
|
|
636
|
+
choice: color-primary
|
|
637
|
+
font-color-for-button-as-flat-when-hovered:
|
|
638
|
+
choice: color-primary-40
|
|
639
|
+
font-color-for-button-as-flat-as-critical:
|
|
640
|
+
choice: color-error-40
|
|
641
|
+
font-color-for-button-as-flat-as-critical-when-hovered:
|
|
642
|
+
choice: color-error
|
|
643
|
+
font-color-for-view-switcher-button:
|
|
644
|
+
choice: color-primary
|
|
645
|
+
font-color-for-input-when-error:
|
|
646
|
+
choice: color-error-40
|
|
647
|
+
font-color-for-stamp-as-positive:
|
|
648
|
+
choice: color-success-40
|
|
649
|
+
font-color-for-content-notification-when-success:
|
|
650
|
+
choice: color-success
|
package/materials/resets.css
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-frontend/ui-kit",
|
|
3
3
|
"description": "A preset of all the UI-Kit components.",
|
|
4
|
-
"version": "18.
|
|
4
|
+
"version": "18.2.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -24,41 +24,41 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@babel/runtime": "^7.20.13",
|
|
26
26
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
27
|
-
"@commercetools-uikit/accessible-hidden": "18.
|
|
28
|
-
"@commercetools-uikit/avatar": "18.
|
|
29
|
-
"@commercetools-uikit/buttons": "18.
|
|
30
|
-
"@commercetools-uikit/card": "18.
|
|
31
|
-
"@commercetools-uikit/collapsible": "18.
|
|
32
|
-
"@commercetools-uikit/collapsible-motion": "18.
|
|
33
|
-
"@commercetools-uikit/collapsible-panel": "18.
|
|
34
|
-
"@commercetools-uikit/constraints": "18.
|
|
35
|
-
"@commercetools-uikit/data-table": "18.
|
|
36
|
-
"@commercetools-uikit/data-table-manager": "18.
|
|
37
|
-
"@commercetools-uikit/design-system": "18.
|
|
38
|
-
"@commercetools-uikit/field-errors": "18.
|
|
39
|
-
"@commercetools-uikit/field-label": "18.
|
|
40
|
-
"@commercetools-uikit/fields": "18.
|
|
41
|
-
"@commercetools-uikit/grid": "18.
|
|
42
|
-
"@commercetools-uikit/hooks": "18.
|
|
43
|
-
"@commercetools-uikit/i18n": "18.
|
|
44
|
-
"@commercetools-uikit/icons": "18.
|
|
45
|
-
"@commercetools-uikit/inputs": "18.
|
|
46
|
-
"@commercetools-uikit/label": "18.
|
|
47
|
-
"@commercetools-uikit/link": "18.
|
|
48
|
-
"@commercetools-uikit/loading-spinner": "18.
|
|
49
|
-
"@commercetools-uikit/messages": "18.
|
|
50
|
-
"@commercetools-uikit/notifications": "18.
|
|
51
|
-
"@commercetools-uikit/pagination": "18.
|
|
52
|
-
"@commercetools-uikit/primary-action-dropdown": "18.
|
|
53
|
-
"@commercetools-uikit/progress-bar": "18.
|
|
54
|
-
"@commercetools-uikit/selectable-search-input": "18.
|
|
55
|
-
"@commercetools-uikit/spacings": "18.
|
|
56
|
-
"@commercetools-uikit/stamp": "18.
|
|
57
|
-
"@commercetools-uikit/tag": "18.
|
|
58
|
-
"@commercetools-uikit/text": "18.
|
|
59
|
-
"@commercetools-uikit/tooltip": "18.
|
|
60
|
-
"@commercetools-uikit/utils": "18.
|
|
61
|
-
"@commercetools-uikit/view-switcher": "18.
|
|
27
|
+
"@commercetools-uikit/accessible-hidden": "18.2.0",
|
|
28
|
+
"@commercetools-uikit/avatar": "18.2.0",
|
|
29
|
+
"@commercetools-uikit/buttons": "18.2.0",
|
|
30
|
+
"@commercetools-uikit/card": "18.2.0",
|
|
31
|
+
"@commercetools-uikit/collapsible": "18.2.0",
|
|
32
|
+
"@commercetools-uikit/collapsible-motion": "18.2.0",
|
|
33
|
+
"@commercetools-uikit/collapsible-panel": "18.2.0",
|
|
34
|
+
"@commercetools-uikit/constraints": "18.2.0",
|
|
35
|
+
"@commercetools-uikit/data-table": "18.2.0",
|
|
36
|
+
"@commercetools-uikit/data-table-manager": "18.2.0",
|
|
37
|
+
"@commercetools-uikit/design-system": "18.2.0",
|
|
38
|
+
"@commercetools-uikit/field-errors": "18.2.0",
|
|
39
|
+
"@commercetools-uikit/field-label": "18.2.0",
|
|
40
|
+
"@commercetools-uikit/fields": "18.2.0",
|
|
41
|
+
"@commercetools-uikit/grid": "18.2.0",
|
|
42
|
+
"@commercetools-uikit/hooks": "18.2.0",
|
|
43
|
+
"@commercetools-uikit/i18n": "18.2.0",
|
|
44
|
+
"@commercetools-uikit/icons": "18.2.0",
|
|
45
|
+
"@commercetools-uikit/inputs": "18.2.0",
|
|
46
|
+
"@commercetools-uikit/label": "18.2.0",
|
|
47
|
+
"@commercetools-uikit/link": "18.2.0",
|
|
48
|
+
"@commercetools-uikit/loading-spinner": "18.2.0",
|
|
49
|
+
"@commercetools-uikit/messages": "18.2.0",
|
|
50
|
+
"@commercetools-uikit/notifications": "18.2.0",
|
|
51
|
+
"@commercetools-uikit/pagination": "18.2.0",
|
|
52
|
+
"@commercetools-uikit/primary-action-dropdown": "18.2.0",
|
|
53
|
+
"@commercetools-uikit/progress-bar": "18.2.0",
|
|
54
|
+
"@commercetools-uikit/selectable-search-input": "18.2.0",
|
|
55
|
+
"@commercetools-uikit/spacings": "18.2.0",
|
|
56
|
+
"@commercetools-uikit/stamp": "18.2.0",
|
|
57
|
+
"@commercetools-uikit/tag": "18.2.0",
|
|
58
|
+
"@commercetools-uikit/text": "18.2.0",
|
|
59
|
+
"@commercetools-uikit/tooltip": "18.2.0",
|
|
60
|
+
"@commercetools-uikit/utils": "18.2.0",
|
|
61
|
+
"@commercetools-uikit/view-switcher": "18.2.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"moment": "2.30.1",
|