@commercetools-frontend/ui-kit 18.4.0 → 19.0.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.
Files changed (16) hide show
  1. package/dist/commercetools-frontend-ui-kit.cjs.dev.js +1 -1
  2. package/dist/commercetools-frontend-ui-kit.cjs.prod.js +1 -1
  3. package/dist/commercetools-frontend-ui-kit.esm.js +1 -1
  4. package/i18n/data/core.json +292 -73
  5. package/i18n/data/de.json +292 -73
  6. package/i18n/data/en.json +292 -73
  7. package/i18n/data/es.json +292 -73
  8. package/i18n/data/fr-FR.json +292 -73
  9. package/i18n/data/pt-BR.json +292 -73
  10. package/i18n/data/zh-CN.json +292 -73
  11. package/materials/custom-properties.css +49 -4
  12. package/materials/custom-properties.json +25 -4
  13. package/materials/custom-properties_default.css +49 -4
  14. package/materials/custom-properties_recolouring.css +69 -44
  15. package/materials/internals/definition.yaml +157 -9
  16. package/package.json +36 -36
package/materials/custom-properties_default.css CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  :root {
9
9
  --color-primary: hsl(175, 55%, 45%);
10
- --color-primary-10: hsl(240, 66%, 19%);
10
+ --color-primary-10: hsl(175, 55%, 10%);
11
11
  --color-primary-20: hsl(175, 55%, 20%);
12
12
  --color-primary-25: hsl(175, 55%, 25%);
13
13
  --color-primary-30: hsl(175, 55%, 30%);
@@ -15,6 +15,7 @@
15
15
  --color-primary-85: hsl(175, 70%, 85%);
16
16
  --color-primary-90: hsl(175, 70%, 90%);
17
17
  --color-primary-95: hsl(175, 90%, 95%);
18
+ --color-primary-98: hsl(175, 100%, 99%);
18
19
  --color-accent: #213c45;
19
20
  --color-accent-10: hsl(195, 35.2941176471%, 10%);
20
21
  --color-accent-20: hsl(195, 35.2941176471%, 20%);
@@ -64,13 +65,14 @@
64
65
  --color-neutral-98: hsl(232, 18%, 98%);
65
66
  --color-info: #078cdf;
66
67
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
68
+ --color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
67
69
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
68
70
  --color-info-90: #ceebfd;
69
71
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
70
72
  --color-warning: #f16d0e;
71
73
  --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
72
74
  --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
73
- --color-warning-60: hsl(35, 90%, 55%);
75
+ --color-warning-60: hsl(25.110132158590307, 90%, 60%);
74
76
  --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
75
77
  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
76
78
  --color-error: #e60050;
@@ -194,6 +196,11 @@
194
196
  --background-color-for-button-when-active: hsl(232, 18%, 95%);
195
197
  --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
196
198
  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
199
+ --background-color-for-icon-button-when-disabled: hsl(
200
+ 195,
201
+ 35.2941176471%,
202
+ 95%
203
+ );
197
204
  --background-color-for-input: #fff;
198
205
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
199
206
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
@@ -227,11 +234,42 @@
227
234
  --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
228
235
  --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
229
236
  --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%);
237
+ --background-color-for-toggle-thumb-when-disabled: hsl(
238
+ 195,
239
+ 35.2941176471%,
240
+ 60%
241
+ );
242
+ --background-color-for-toggle-track-when-disabled: hsl(
243
+ 195,
244
+ 35.2941176471%,
245
+ 90%
246
+ );
247
+ --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
248
+ 232,
249
+ 18%,
250
+ 60%
251
+ );
252
+ --background-color-for-toggle-track-when-active-when-disabled: hsl(
253
+ 232,
254
+ 18%,
255
+ 90%
256
+ );
257
+ --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1);
232
258
  --background-color-for-loading-spinner-track: #213c45;
233
259
  --background-color-for-loading-spinner-dot: #213c45;
234
260
  --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
261
+ --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%);
262
+ --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%);
263
+ --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%);
264
+ --background-color-for-tag: hsl(232, 18%, 95%);
265
+ --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
266
+ --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%);
267
+ --background-color-for-dropdown-when-active: hsl(232, 18%, 90%);
268
+ --background-color-for-dropdown-option-when-active: hsl(
269
+ 203.05555555555554,
270
+ 93.9130434783%,
271
+ 95%
272
+ );
235
273
  --border-color-for-input: hsl(232, 18%, 80%);
236
274
  --border-color-for-input-when-focused: hsl(175, 55%, 45%);
237
275
  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
@@ -241,7 +279,11 @@
241
279
  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
242
280
  --border-color-for-input-as-quiet: transparent;
243
281
  --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
282
+ --border-color-for-dropdown: hsl(232, 18%, 80%);
244
283
  --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
284
+ --border-color-for-checkbox-input: hsl(175, 55%, 45%);
285
+ --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%);
286
+ --border-color-for-tag: hsl(232, 18%, 85%);
245
287
  --border-radius-for-button-as-big: 4px;
246
288
  --border-radius-for-button-as-medium: 4px;
247
289
  --border-radius-for-input: 4px;
@@ -265,6 +307,9 @@
265
307
  --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
266
308
  --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
267
309
  --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
310
+ --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%);
311
+ --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%);
312
+ --font-color-for-text-as-positive: hsl(175, 55%, 25%);
268
313
  --height-for-button-as-big: 40px;
269
314
  --height-for-button-as-medium: 32px;
270
315
  --height-for-button-as-small: 16px;
package/materials/custom-properties_recolouring.css CHANGED
@@ -15,44 +15,45 @@
15
15
  --color-primary-85: hsl(244, 100%, 84%);
16
16
  --color-primary-90: hsl(243, 100%, 93%);
17
17
  --color-primary-95: hsl(244, 100%, 97%);
18
+ --color-primary-98: hsl(244, 100%, 99%);
18
19
  --color-accent: #213c45;
19
- --color-accent-10: hsl(195, 35.2941176471%, 10%);
20
- --color-accent-20: hsl(195, 35.2941176471%, 20%);
21
- --color-accent-30: hsl(195, 35.2941176471%, 30%);
22
- --color-accent-40: hsl(195, 35.2941176471%, 40%);
23
- --color-accent-50: hsl(195, 35%, 50%);
24
- --color-accent-60: hsl(195, 35.2941176471%, 60%);
25
- --color-accent-85: hsl(195, 35%, 85%);
26
- --color-accent-90: hsl(195, 35.2941176471%, 90%);
27
- --color-accent-95: hsl(195, 35.2941176471%, 95%);
28
- --color-accent-98: hsl(195, 35.2941176471%, 98%);
29
- --color-brown-10: hsl(35, 90%, 10%);
30
- --color-brown-20: hsl(35, 50%, 20%);
31
- --color-brown-35: hsl(35, 25%, 35%);
32
- --color-brown-50: hsl(35, 30%, 50%);
33
- --color-brown-70: hsl(35, 40%, 70%);
34
- --color-brown-85: hsl(35, 60%, 85%);
35
- --color-brown-90: hsl(35, 90%, 90%);
36
- --color-brown-95: hsl(35, 80%, 95%);
37
- --color-brown-98: hsl(35, 90%, 98%);
38
- --color-purple-10: hsl(248, 90%, 10%);
20
+ --color-accent-10: hsl(195, 100%, 10%);
21
+ --color-accent-20: hsl(195, 80%, 20%);
22
+ --color-accent-30: hsl(195, 70%, 30%);
23
+ --color-accent-40: hsl(195, 70%, 40%);
24
+ --color-accent-50: hsl(195, 70%, 50%);
25
+ --color-accent-60: hsl(195, 70%, 60%);
26
+ --color-accent-85: hsl(195, 85%, 85%);
27
+ --color-accent-90: hsl(195, 90%, 90%);
28
+ --color-accent-95: hsl(195, 95%, 95%);
29
+ --color-accent-98: hsl(195, 100%, 98%);
30
+ --color-brown-10: hsl(41, 100%, 10%);
31
+ --color-brown-20: hsl(41, 100%, 20%);
32
+ --color-brown-35: hsl(41, 96%, 35%);
33
+ --color-brown-50: hsl(41, 95%, 44%);
34
+ --color-brown-70: hsl(47, 95%, 70%);
35
+ --color-brown-85: hsl(47, 100%, 85%);
36
+ --color-brown-90: hsl(47, 100%, 90%);
37
+ --color-brown-95: hsl(47, 100%, 95%);
38
+ --color-brown-98: hsl(48, 100%, 97%);
39
+ --color-purple-10: hsl(248, 88%, 10%);
39
40
  --color-purple-20: hsl(248, 50%, 20%);
40
41
  --color-purple-35: hsl(248, 25%, 35%);
41
- --color-purple-50: hsl(248, 30%, 50%);
42
- --color-purple-70: hsl(248, 40%, 70%);
43
- --color-purple-85: hsl(248, 60%, 85%);
44
- --color-purple-90: hsl(248, 50%, 90%);
45
- --color-purple-95: hsl(248, 80%, 95%);
46
- --color-purple-98: hsl(248, 90%, 98%);
47
- --color-turquoise-10: hsl(180, 90%, 10%);
48
- --color-turquoise-20: hsl(180, 50%, 20%);
49
- --color-turquoise-35: hsl(180, 25%, 35%);
50
- --color-turquoise-50: hsl(180, 30%, 45%);
51
- --color-turquoise-70: hsl(180, 40%, 70%);
52
- --color-turquoise-85: hsl(180, 60%, 85%);
53
- --color-turquoise-90: hsl(180, 40%, 90%);
54
- --color-turquoise-95: hsl(180, 80%, 95%);
55
- --color-turquoise-98: hsl(180, 90%, 98%);
42
+ --color-purple-50: hsl(248, 64%, 58%);
43
+ --color-purple-70: hsl(248, 80%, 70%);
44
+ --color-purple-85: hsl(249, 100%, 85%);
45
+ --color-purple-90: hsl(248, 100%, 90%);
46
+ --color-purple-95: hsl(248, 100%, 95%);
47
+ --color-purple-98: hsl(246, 100%, 98%);
48
+ --color-turquoise-10: hsl(180, 88%, 10%);
49
+ --color-turquoise-20: hsl(180, 90%, 20%);
50
+ --color-turquoise-35: hsl(178, 88%, 35%);
51
+ --color-turquoise-50: hsl(178, 67%, 50%);
52
+ --color-turquoise-70: hsl(180, 75%, 70%);
53
+ --color-turquoise-85: hsl(180, 90%, 85%);
54
+ --color-turquoise-90: hsl(180, 88%, 90%);
55
+ --color-turquoise-95: hsl(180, 88%, 95%);
56
+ --color-turquoise-98: hsl(180, 100%, 98%);
56
57
  --color-neutral: hsl(232, 18%, 80%);
57
58
  --color-neutral-05: hsl(0deg 0% 80% / 5%);
58
59
  --color-neutral-10: hsl(0deg 0% 80% / 10%);
@@ -64,6 +65,7 @@
64
65
  --color-neutral-98: hsl(232, 18%, 98%);
65
66
  --color-info: #078cdf;
66
67
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
68
+ --color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
67
69
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
68
70
  --color-info-90: #ceebfd;
69
71
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
@@ -194,19 +196,16 @@
194
196
  --background-color-for-button-when-active: hsl(243, 100%, 93%);
195
197
  --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
196
198
  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
199
+ --background-color-for-icon-button-when-disabled: transparent;
197
200
  --background-color-for-input: #fff;
198
201
  --background-color-for-input-when-selected: hsl(244, 100%, 97%);
199
202
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
200
- --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
203
+ --background-color-for-input-when-hovered: hsl(244, 100%, 99%);
201
204
  --background-color-for-input-when-focused: #fff;
202
205
  --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
203
- --background-color-for-input-when-active: hsl(
204
- 203.05555555555554,
205
- 93.9130434783%,
206
- 95%
207
- );
206
+ --background-color-for-input-when-active: hsl(244, 100%, 97%);
208
207
  --background-color-for-input-as-quiet: transparent;
209
- --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
208
+ --background-color-for-input-as-quiet-when-hovered: hsla(240, 64%, 58%, 4%);
210
209
  --background-color-for-localized-input-label: #fff;
211
210
  --background-color-for-localized-input-label-when-readonly: hsl(
212
211
  232,
@@ -235,11 +234,30 @@
235
234
  --background-color-for-stamp-as-positive: hsl(141, 76%, 92%);
236
235
  --background-color-for-toggle-thumb-when-active: hsl(240, 100%, 67%);
237
236
  --background-color-for-toggle-track-when-active: hsl(244, 100%, 84%);
238
- --background-color-for-toggle-thumb-when-disabled: hsl(244, 100%, 84%);
239
- --background-color-for-toggle-track-when-disabled: hsl(243, 100%, 93%);
237
+ --background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
238
+ --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
239
+ --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
240
+ 244,
241
+ 100%,
242
+ 84%
243
+ );
244
+ --background-color-for-toggle-track-when-active-when-disabled: hsl(
245
+ 243,
246
+ 100%,
247
+ 93%
248
+ );
249
+ --background-color-for-toggle-thumb-when-hovered: hsla(240, 64%, 58%, 4%);
240
250
  --background-color-for-loading-spinner-track: hsl(243, 100%, 93%);
241
251
  --background-color-for-loading-spinner-dot: hsl(240, 64%, 58%);
242
252
  --background-color-for-content-notification-when-success: hsl(141, 76%, 92%);
253
+ --background-color-for-view-switcher-button-when-active: hsl(244, 100%, 97%);
254
+ --background-color-for-checkbox-input-when-hovered: hsl(244, 100%, 97%);
255
+ --background-color-for-radio-option-when-hovered: hsl(244, 100%, 97%);
256
+ --background-color-for-tag: hsl(244, 100%, 97%);
257
+ --background-color-for-tag-when-hovered: hsl(243, 100%, 93%);
258
+ --background-color-for-dropdown-when-hovered: hsl(244, 100%, 97%);
259
+ --background-color-for-dropdown-when-active: hsl(243, 100%, 93%);
260
+ --background-color-for-dropdown-option-when-active: hsl(244, 100%, 97%);
243
261
  --border-color-for-input: hsl(232, 18%, 80%);
244
262
  --border-color-for-input-when-focused: hsl(240, 100%, 67%);
245
263
  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
@@ -249,7 +267,11 @@
249
267
  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
250
268
  --border-color-for-input-as-quiet: transparent;
251
269
  --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
270
+ --border-color-for-dropdown: hsl(244, 100%, 84%);
252
271
  --border-color-for-content-notification-when-success: hsl(144, 69%, 80%);
272
+ --border-color-for-checkbox-input: hsl(232, 18%, 60%);
273
+ --border-color-for-checkbox-input-when-active: hsl(240, 64%, 58%);
274
+ --border-color-for-tag: hsl(243, 100%, 93%);
253
275
  --border-radius-for-button-as-big: 4px;
254
276
  --border-radius-for-button-as-medium: 4px;
255
277
  --border-radius-for-input: 4px;
@@ -269,6 +291,9 @@
269
291
  --font-color-for-view-switcher-button: hsl(240, 64%, 58%);
270
292
  --font-color-for-stamp-as-positive: hsl(155, 90%, 24%);
271
293
  --font-color-for-content-notification-when-success: hsl(152, 77%, 39%);
294
+ --font-color-for-avatar-as-turquoise: hsl(178, 88%, 35%);
295
+ --font-color-for-leading-icon-as-turquoise: hsl(178, 88%, 35%);
296
+ --font-color-for-text-as-positive: hsl(155, 90%, 24%);
272
297
  --height-for-button-as-big: 40px;
273
298
  --height-for-button-as-medium: 32px;
274
299
  --height-for-button-as-small: 16px;
package/materials/internals/definition.yaml CHANGED
@@ -37,7 +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
+ color-primary-10: 'hsl(175, 55%, 10%)' # This design token is not used in the default theme; it's included only for export purposes
41
41
  color-primary-20: 'hsl(175, 55%, 20%)'
42
42
  color-primary-25: 'hsl(175, 55%, 25%)'
43
43
  color-primary-30: 'hsl(175, 55%, 30%)'
@@ -45,6 +45,7 @@ choiceGroupsByTheme:
45
45
  color-primary-85: 'hsl(175, 70%, 85%)'
46
46
  color-primary-90: 'hsl(175, 70%, 90%)'
47
47
  color-primary-95: 'hsl(175, 90%, 95%)'
48
+ color-primary-98: 'hsl(175, 100%, 99%)' # This design token is not used in the default theme; it's included only for export purposes
48
49
  color-accent: '#213c45'
49
50
  color-accent-10: 'hsl(195, 35.2941176471%, 10%)'
50
51
  color-accent-20: 'hsl(195, 35.2941176471%, 20%)'
@@ -94,13 +95,14 @@ choiceGroupsByTheme:
94
95
  color-neutral-98: 'hsl(232, 18%, 98%)'
95
96
  color-info: '#078cdf'
96
97
  color-info-40: 'hsl(203.05555555555554, 93.9130434783%, 40%)'
98
+ color-info-60: 'hsl(203.05555555555554, 93.9130434783%, 60%)'
97
99
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
98
100
  color-info-90: '#CEEBFD'
99
101
  color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
100
102
  color-warning: '#f16d0e'
101
103
  color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
102
104
  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
105
+ color-warning-60: 'hsl(25.110132158590307, 90%, 60%)' # This design token is not used in the default theme; it's included only for export purposes
104
106
  color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
105
107
  color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
106
108
  color-error: '#e60050'
@@ -114,11 +116,11 @@ choiceGroupsByTheme:
114
116
  color-solid-10: 'hsl(0deg 0% 10% / 10%)'
115
117
  color-surface: '#fff'
116
118
  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
119
+ color-success: 'hsl(152, 77%, 39%)' # Design token copied from recolouring theme
120
+ color-success-25: 'hsl(155, 84%, 20%)' # Design token copied from recolouring theme
121
+ color-success-40: 'hsl(155, 90%, 24%)' # Design token copied from recolouring theme
122
+ color-success-85: 'hsl(144, 69%, 80%)' # Design token copied from recolouring theme
123
+ color-success-95: 'hsl(141, 76%, 92%)' # Design token copied from recolouring theme
122
124
 
123
125
  borderRadiuses:
124
126
  label: Border Radiuses
@@ -286,6 +288,44 @@ choiceGroupsByTheme:
286
288
  color-primary-85: 'hsl(244, 100%, 84%)'
287
289
  color-primary-90: 'hsl(243, 100%, 93%)'
288
290
  color-primary-95: 'hsl(244, 100%, 97%)'
291
+ color-primary-98: 'hsl(244, 100%, 99%)'
292
+ color-accent-10: 'hsl(195, 100%, 10%)'
293
+ color-accent-20: 'hsl(195, 80%, 20%)'
294
+ color-accent-30: 'hsl(195, 70%, 30%)'
295
+ color-accent-40: 'hsl(195, 70%, 40%)'
296
+ color-accent-50: 'hsl(195, 70%, 50%)'
297
+ color-accent-60: 'hsl(195, 70%, 60%)'
298
+ color-accent-85: 'hsl(195, 85%, 85%)'
299
+ color-accent-90: 'hsl(195, 90%, 90%)'
300
+ color-accent-95: 'hsl(195, 95%, 95%)'
301
+ color-accent-98: 'hsl(195, 100%, 98%)'
302
+ color-brown-10: 'hsl(41, 100%, 10%)'
303
+ color-brown-20: 'hsl(41, 100%, 20%)'
304
+ color-brown-35: 'hsl(41, 96%, 35%)'
305
+ color-brown-50: 'hsl(41, 95%, 44%)'
306
+ color-brown-70: 'hsl(47, 95%, 70%)'
307
+ color-brown-85: 'hsl(47, 100%, 85%)'
308
+ color-brown-90: 'hsl(47, 100%, 90%)'
309
+ color-brown-95: 'hsl(47, 100%, 95%)'
310
+ color-brown-98: 'hsl(48, 100%, 97%)'
311
+ color-purple-10: 'hsl(248, 88%, 10%)'
312
+ color-purple-20: 'hsl(248, 50%, 20%)'
313
+ color-purple-35: 'hsl(248, 25%, 35%)'
314
+ color-purple-50: 'hsl(248, 64%, 58%)'
315
+ color-purple-70: 'hsl(248, 80%, 70%)'
316
+ color-purple-85: 'hsl(249, 100%, 85%)'
317
+ color-purple-90: 'hsl(248, 100%, 90%)'
318
+ color-purple-95: 'hsl(248, 100%, 95%)'
319
+ color-purple-98: 'hsl(246, 100%, 98%)'
320
+ color-turquoise-10: 'hsl(180, 88%, 10%)'
321
+ color-turquoise-20: 'hsl(180, 90%, 20%)'
322
+ color-turquoise-35: 'hsl(178, 88%, 35%)'
323
+ color-turquoise-50: 'hsl(178, 67%, 50%)'
324
+ color-turquoise-70: 'hsl(180, 75%, 70%)'
325
+ color-turquoise-85: 'hsl(180, 90%, 85%)'
326
+ color-turquoise-90: 'hsl(180, 88%, 90%)'
327
+ color-turquoise-95: 'hsl(180, 88%, 95%)'
328
+ color-turquoise-98: 'hsl(180, 100%, 98%)'
289
329
  color-success: 'hsl(152, 77%, 39%)'
290
330
  color-success-25: 'hsl(155, 84%, 20%)'
291
331
  color-success-40: 'hsl(155, 90%, 24%)'
@@ -310,6 +350,8 @@ states:
310
350
  description: 'When the mouse is over the element'
311
351
  disabled:
312
352
  description: 'When the element can not be interacted with'
353
+ active-disabled:
354
+ description: 'When the element is active but can not be interacted with'
313
355
  focused:
314
356
  description: 'When the element is currently selected to receive input'
315
357
  readonly:
@@ -349,10 +391,14 @@ variants:
349
391
  description: 'To differentiate component urgent type'
350
392
  positive:
351
393
  description: 'To differentiate component positive type'
394
+ turquoise:
395
+ description: 'To differentiate component turquoise type'
352
396
 
353
397
  componentGroups:
354
398
  button:
355
399
  description: 'Button elements'
400
+ icon-button:
401
+ description: 'Icon button elements'
356
402
  input:
357
403
  description: 'Input elements'
358
404
  localized-input-label:
@@ -372,6 +418,22 @@ componentGroups:
372
418
  description: 'Loading spinner dot elements'
373
419
  content-notification:
374
420
  description: 'Content notification elements'
421
+ avatar:
422
+ description: 'Avatar elements'
423
+ leading-icon:
424
+ description: 'Leading icon elements'
425
+ checkbox-input:
426
+ description: 'Checkbox input elements'
427
+ radio-option:
428
+ description: 'Radio option elements'
429
+ tag:
430
+ description: 'Tag elements'
431
+ dropdown:
432
+ description: 'Dropdown elements'
433
+ dropdown-option:
434
+ description: 'Dropdown option elements'
435
+ text:
436
+ description: 'Text elements'
375
437
 
376
438
  decisionGroupsByTheme:
377
439
  default:
@@ -385,6 +447,8 @@ decisionGroupsByTheme:
385
447
  choice: color-neutral-98
386
448
  background-color-for-button-when-disabled:
387
449
  choice: color-accent-95
450
+ background-color-for-icon-button-when-disabled:
451
+ choice: color-accent-95
388
452
  background-color-for-input:
389
453
  choice: color-surface
390
454
  background-color-for-input-when-selected:
@@ -429,15 +493,39 @@ decisionGroupsByTheme:
429
493
  background-color-for-toggle-track-when-active:
430
494
  choice: color-primary-40
431
495
  background-color-for-toggle-thumb-when-disabled:
432
- choice: color-neutral-60
496
+ choice: color-accent-60
433
497
  background-color-for-toggle-track-when-disabled:
498
+ choice: color-accent-90
499
+ background-color-for-toggle-thumb-when-active-when-disabled:
500
+ choice: color-neutral-60
501
+ deprecated: true
502
+ background-color-for-toggle-track-when-active-when-disabled:
434
503
  choice: color-neutral-90
504
+ deprecated: true
505
+ background-color-for-toggle-thumb-when-hovered:
506
+ choice: 'rgba(0, 0, 0, 0.1)'
435
507
  background-color-for-loading-spinner-track:
436
508
  choice: color-accent
437
509
  background-color-for-loading-spinner-dot:
438
510
  choice: color-accent
439
511
  background-color-for-content-notification-when-success:
440
512
  choice: color-primary-95
513
+ background-color-for-view-switcher-button-when-active:
514
+ choice: color-neutral-95
515
+ background-color-for-checkbox-input-when-hovered:
516
+ choice: color-neutral-90
517
+ background-color-for-radio-option-when-hovered:
518
+ choice: color-neutral-90
519
+ background-color-for-tag:
520
+ choice: color-neutral-95
521
+ background-color-for-tag-when-hovered:
522
+ choice: color-neutral-90
523
+ background-color-for-dropdown-when-hovered:
524
+ choice: color-neutral-95
525
+ background-color-for-dropdown-when-active:
526
+ choice: color-neutral-90
527
+ background-color-for-dropdown-option-when-active:
528
+ choice: color-info-95
441
529
 
442
530
  borderColors:
443
531
  label: Border Colors
@@ -462,8 +550,16 @@ decisionGroupsByTheme:
462
550
  # recolouring rollout
463
551
  border-color-for-button-as-secondary:
464
552
  choice: color-neutral
553
+ border-color-for-dropdown:
554
+ choice: color-neutral
465
555
  border-color-for-content-notification-when-success:
466
556
  choice: color-primary-85
557
+ border-color-for-checkbox-input:
558
+ choice: color-primary
559
+ border-color-for-checkbox-input-when-active:
560
+ choice: color-primary
561
+ border-color-for-tag:
562
+ choice: color-neutral-85
467
563
 
468
564
  borderRadiuses:
469
565
  label: Border Radius
@@ -518,6 +614,12 @@ decisionGroupsByTheme:
518
614
  choice: color-primary-25
519
615
  font-color-for-content-notification-when-success:
520
616
  choice: color-primary
617
+ font-color-for-avatar-as-turquoise:
618
+ choice: color-turquoise-50
619
+ font-color-for-leading-icon-as-turquoise:
620
+ choice: color-turquoise-50
621
+ font-color-for-text-as-positive:
622
+ choice: color-primary-25
521
623
 
522
624
  heights:
523
625
  label: Height
@@ -584,10 +686,18 @@ decisionGroupsByTheme:
584
686
  decisions:
585
687
  border-color-for-button-as-secondary:
586
688
  choice: color-primary-85
689
+ border-color-for-dropdown:
690
+ choice: color-primary-85
587
691
  border-color-for-input-when-focused:
588
692
  choice: color-primary-40
589
693
  border-color-for-content-notification-when-success:
590
694
  choice: color-success-85
695
+ border-color-for-checkbox-input:
696
+ choice: color-neutral-60
697
+ border-color-for-checkbox-input-when-active:
698
+ choice: color-primary
699
+ border-color-for-tag:
700
+ choice: color-primary-90
591
701
 
592
702
  backgroundColors:
593
703
  label: Background Colors
@@ -597,6 +707,8 @@ decisionGroupsByTheme:
597
707
  choice: color-primary-90
598
708
  background-color-for-button-when-hovered:
599
709
  choice: color-primary-95
710
+ background-color-for-icon-button-when-disabled:
711
+ choice: 'color-transparent'
600
712
  background-color-for-button-as-primary:
601
713
  choice: color-primary
602
714
  background-color-for-button-as-primary-when-hovered:
@@ -618,15 +730,45 @@ decisionGroupsByTheme:
618
730
  background-color-for-toggle-track-when-active:
619
731
  choice: color-primary-85
620
732
  background-color-for-toggle-thumb-when-disabled:
621
- choice: color-primary-85
733
+ choice: color-neutral-60
622
734
  background-color-for-toggle-track-when-disabled:
735
+ choice: color-neutral-90
736
+ background-color-for-toggle-thumb-when-active-when-disabled:
737
+ choice: color-primary-85
738
+ deprecated: true
739
+ background-color-for-toggle-track-when-active-when-disabled:
623
740
  choice: color-primary-90
741
+ deprecated: true
742
+ background-color-for-toggle-thumb-when-hovered:
743
+ choice: 'hsla(240, 64%, 58%, 4%)'
624
744
  background-color-for-loading-spinner-track:
625
745
  choice: color-primary-90
626
746
  background-color-for-loading-spinner-dot:
627
747
  choice: color-primary
628
748
  background-color-for-content-notification-when-success:
629
749
  choice: color-success-95
750
+ background-color-for-view-switcher-button-when-active:
751
+ choice: color-primary-95
752
+ background-color-for-checkbox-input-when-hovered:
753
+ choice: color-primary-95
754
+ background-color-for-radio-option-when-hovered:
755
+ choice: color-primary-95
756
+ background-color-for-tag:
757
+ choice: color-primary-95
758
+ background-color-for-tag-when-hovered:
759
+ choice: color-primary-90
760
+ background-color-for-dropdown-when-hovered:
761
+ choice: color-primary-95
762
+ background-color-for-dropdown-when-active:
763
+ choice: color-primary-90
764
+ background-color-for-dropdown-option-when-active:
765
+ choice: color-primary-95
766
+ background-color-for-input-as-quiet-when-hovered:
767
+ choice: 'hsla(240, 64%, 58%, 4%)'
768
+ background-color-for-input-when-active:
769
+ choice: color-primary-95
770
+ background-color-for-input-when-hovered:
771
+ choice: color-primary-98
630
772
 
631
773
  fontColors:
632
774
  label: Font Colors
@@ -648,3 +790,9 @@ decisionGroupsByTheme:
648
790
  choice: color-success-40
649
791
  font-color-for-content-notification-when-success:
650
792
  choice: color-success
793
+ font-color-for-avatar-as-turquoise:
794
+ choice: color-turquoise-35
795
+ font-color-for-leading-icon-as-turquoise:
796
+ choice: color-turquoise-35
797
+ font-color-for-text-as-positive:
798
+ choice: color-success-40
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.0",
4
+ "version": "19.0.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.4.0",
28
- "@commercetools-uikit/avatar": "18.4.0",
29
- "@commercetools-uikit/buttons": "18.4.0",
30
- "@commercetools-uikit/card": "18.4.0",
31
- "@commercetools-uikit/collapsible": "18.4.0",
32
- "@commercetools-uikit/collapsible-motion": "18.4.0",
33
- "@commercetools-uikit/collapsible-panel": "18.4.0",
34
- "@commercetools-uikit/constraints": "18.4.0",
35
- "@commercetools-uikit/data-table": "18.4.0",
36
- "@commercetools-uikit/data-table-manager": "18.4.0",
37
- "@commercetools-uikit/design-system": "18.4.0",
38
- "@commercetools-uikit/field-errors": "18.4.0",
39
- "@commercetools-uikit/field-label": "18.4.0",
40
- "@commercetools-uikit/fields": "18.4.0",
41
- "@commercetools-uikit/grid": "18.4.0",
42
- "@commercetools-uikit/hooks": "18.4.0",
43
- "@commercetools-uikit/i18n": "18.4.0",
44
- "@commercetools-uikit/icons": "18.4.0",
45
- "@commercetools-uikit/inputs": "18.4.0",
46
- "@commercetools-uikit/label": "18.4.0",
47
- "@commercetools-uikit/link": "18.4.0",
48
- "@commercetools-uikit/loading-spinner": "18.4.0",
49
- "@commercetools-uikit/messages": "18.4.0",
50
- "@commercetools-uikit/notifications": "18.4.0",
51
- "@commercetools-uikit/pagination": "18.4.0",
52
- "@commercetools-uikit/primary-action-dropdown": "18.4.0",
53
- "@commercetools-uikit/progress-bar": "18.4.0",
54
- "@commercetools-uikit/selectable-search-input": "18.4.0",
55
- "@commercetools-uikit/spacings": "18.4.0",
56
- "@commercetools-uikit/stamp": "18.4.0",
57
- "@commercetools-uikit/tag": "18.4.0",
58
- "@commercetools-uikit/text": "18.4.0",
59
- "@commercetools-uikit/tooltip": "18.4.0",
60
- "@commercetools-uikit/utils": "18.4.0",
61
- "@commercetools-uikit/view-switcher": "18.4.0"
27
+ "@commercetools-uikit/accessible-hidden": "19.0.0",
28
+ "@commercetools-uikit/avatar": "19.0.0",
29
+ "@commercetools-uikit/buttons": "19.0.0",
30
+ "@commercetools-uikit/card": "19.0.0",
31
+ "@commercetools-uikit/collapsible": "19.0.0",
32
+ "@commercetools-uikit/collapsible-motion": "19.0.0",
33
+ "@commercetools-uikit/collapsible-panel": "19.0.0",
34
+ "@commercetools-uikit/constraints": "19.0.0",
35
+ "@commercetools-uikit/data-table": "19.0.0",
36
+ "@commercetools-uikit/data-table-manager": "19.0.0",
37
+ "@commercetools-uikit/design-system": "19.0.0",
38
+ "@commercetools-uikit/field-errors": "19.0.0",
39
+ "@commercetools-uikit/field-label": "19.0.0",
40
+ "@commercetools-uikit/fields": "19.0.0",
41
+ "@commercetools-uikit/grid": "19.0.0",
42
+ "@commercetools-uikit/hooks": "19.0.0",
43
+ "@commercetools-uikit/i18n": "19.0.0",
44
+ "@commercetools-uikit/icons": "19.0.0",
45
+ "@commercetools-uikit/inputs": "19.0.0",
46
+ "@commercetools-uikit/label": "19.0.0",
47
+ "@commercetools-uikit/link": "19.0.0",
48
+ "@commercetools-uikit/loading-spinner": "19.0.0",
49
+ "@commercetools-uikit/messages": "19.0.0",
50
+ "@commercetools-uikit/notifications": "19.0.0",
51
+ "@commercetools-uikit/pagination": "19.0.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "19.0.0",
53
+ "@commercetools-uikit/progress-bar": "19.0.0",
54
+ "@commercetools-uikit/selectable-search-input": "19.0.0",
55
+ "@commercetools-uikit/spacings": "19.0.0",
56
+ "@commercetools-uikit/stamp": "19.0.0",
57
+ "@commercetools-uikit/tag": "19.0.0",
58
+ "@commercetools-uikit/text": "19.0.0",
59
+ "@commercetools-uikit/tooltip": "19.0.0",
60
+ "@commercetools-uikit/utils": "19.0.0",
61
+ "@commercetools-uikit/view-switcher": "19.0.0"
62
62
  },
63
63
  "devDependencies": {
64
64
  "moment": "2.30.1",