@commercetools-frontend/ui-kit 18.4.0 → 18.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.
Files changed (9) 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/materials/custom-properties.css +43 -4
  5. package/materials/custom-properties.json +23 -4
  6. package/materials/custom-properties_default.css +43 -4
  7. package/materials/custom-properties_recolouring.css +67 -44
  8. package/materials/internals/definition.yaml +150 -9
  9. package/package.json +36 -36
package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED
@@ -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.4.0";
84
+ var version = "18.5.0";
85
85
 
86
86
  exports.i18n = i18n__namespace;
87
87
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED
@@ -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.4.0";
84
+ var version = "18.5.0";
85
85
 
86
86
  exports.i18n = i18n__namespace;
87
87
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.esm.js CHANGED
@@ -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.4.0";
37
+ var version = "18.5.0";
38
38
 
39
39
  export { version };
package/materials/custom-properties.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%);
@@ -70,7 +71,7 @@
70
71
  --color-warning: #f16d0e;
71
72
  --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
72
73
  --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
73
- --color-warning-60: hsl(35, 90%, 55%);
74
+ --color-warning-60: hsl(25.110132158590307, 90%, 60%);
74
75
  --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
75
76
  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
76
77
  --color-error: #e60050;
@@ -227,11 +228,42 @@
227
228
  --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
228
229
  --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
229
230
  --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%);
231
+ --background-color-for-toggle-thumb-when-disabled: hsl(
232
+ 195,
233
+ 35.2941176471%,
234
+ 60%
235
+ );
236
+ --background-color-for-toggle-track-when-disabled: hsl(
237
+ 195,
238
+ 35.2941176471%,
239
+ 90%
240
+ );
241
+ --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
242
+ 232,
243
+ 18%,
244
+ 60%
245
+ );
246
+ --background-color-for-toggle-track-when-active-when-disabled: hsl(
247
+ 232,
248
+ 18%,
249
+ 90%
250
+ );
251
+ --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1);
232
252
  --background-color-for-loading-spinner-track: #213c45;
233
253
  --background-color-for-loading-spinner-dot: #213c45;
234
254
  --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
255
+ --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%);
256
+ --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%);
257
+ --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%);
258
+ --background-color-for-tag: hsl(232, 18%, 95%);
259
+ --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
260
+ --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%);
261
+ --background-color-for-dropdown-when-active: hsl(232, 18%, 90%);
262
+ --background-color-for-dropdown-option-when-active: hsl(
263
+ 203.05555555555554,
264
+ 93.9130434783%,
265
+ 95%
266
+ );
235
267
  --border-color-for-input: hsl(232, 18%, 80%);
236
268
  --border-color-for-input-when-focused: hsl(175, 55%, 45%);
237
269
  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
@@ -241,7 +273,11 @@
241
273
  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
242
274
  --border-color-for-input-as-quiet: transparent;
243
275
  --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
276
+ --border-color-for-dropdown: hsl(232, 18%, 80%);
244
277
  --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
278
+ --border-color-for-checkbox-input: hsl(175, 55%, 45%);
279
+ --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%);
280
+ --border-color-for-tag: hsl(232, 18%, 85%);
245
281
  --border-radius-for-button-as-big: 4px;
246
282
  --border-radius-for-button-as-medium: 4px;
247
283
  --border-radius-for-input: 4px;
@@ -265,6 +301,9 @@
265
301
  --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
266
302
  --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
267
303
  --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
304
+ --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%);
305
+ --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%);
306
+ --font-color-for-text-as-positive: hsl(175, 55%, 25%);
268
307
  --height-for-button-as-big: 40px;
269
308
  --height-for-button-as-medium: 32px;
270
309
  --height-for-button-as-small: 16px;
package/materials/custom-properties.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "--color-primary": "hsl(175, 55%, 45%)",
3
- "--color-primary-10": "hsl(240, 66%, 19%)",
3
+ "--color-primary-10": "hsl(175, 55%, 10%)",
4
4
  "--color-primary-20": "hsl(175, 55%, 20%)",
5
5
  "--color-primary-25": "hsl(175, 55%, 25%)",
6
6
  "--color-primary-30": "hsl(175, 55%, 30%)",
@@ -8,6 +8,7 @@
8
8
  "--color-primary-85": "hsl(175, 70%, 85%)",
9
9
  "--color-primary-90": "hsl(175, 70%, 90%)",
10
10
  "--color-primary-95": "hsl(175, 90%, 95%)",
11
+ "--color-primary-98": "hsl(175, 100%, 99%)",
11
12
  "--color-accent": "#213c45",
12
13
  "--color-accent-10": "hsl(195, 35.2941176471%, 10%)",
13
14
  "--color-accent-20": "hsl(195, 35.2941176471%, 20%)",
@@ -63,7 +64,7 @@
63
64
  "--color-warning": "#f16d0e",
64
65
  "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
65
66
  "--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)",
66
- "--color-warning-60": "hsl(35, 90%, 55%)",
67
+ "--color-warning-60": "hsl(25.110132158590307, 90%, 60%)",
67
68
  "--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
68
69
  "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
69
70
  "--color-error": "#e60050",
@@ -203,11 +204,22 @@
203
204
  "--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)",
204
205
  "--background-color-for-toggle-thumb-when-active": "hsl(175, 55%, 25%)",
205
206
  "--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%)",
207
+ "--background-color-for-toggle-thumb-when-disabled": "hsl(195, 35.2941176471%, 60%)",
208
+ "--background-color-for-toggle-track-when-disabled": "hsl(195, 35.2941176471%, 90%)",
209
+ "--background-color-for-toggle-thumb-when-active-when-disabled": "hsl(232, 18%, 60%)",
210
+ "--background-color-for-toggle-track-when-active-when-disabled": "hsl(232, 18%, 90%)",
211
+ "--background-color-for-toggle-thumb-when-hovered": "rgba(0, 0, 0, 0.1)",
208
212
  "--background-color-for-loading-spinner-track": "#213c45",
209
213
  "--background-color-for-loading-spinner-dot": "#213c45",
210
214
  "--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)",
215
+ "--background-color-for-view-switcher-button-when-active": "hsl(232, 18%, 95%)",
216
+ "--background-color-for-checkbox-input-when-hovered": "hsl(232, 18%, 90%)",
217
+ "--background-color-for-radio-option-when-hovered": "hsl(232, 18%, 90%)",
218
+ "--background-color-for-tag": "hsl(232, 18%, 95%)",
219
+ "--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)",
220
+ "--background-color-for-dropdown-when-hovered": "hsl(232, 18%, 95%)",
221
+ "--background-color-for-dropdown-when-active": "hsl(232, 18%, 90%)",
222
+ "--background-color-for-dropdown-option-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)",
211
223
  "--border-color-for-input": "hsl(232, 18%, 80%)",
212
224
  "--border-color-for-input-when-focused": "hsl(175, 55%, 45%)",
213
225
  "--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)",
@@ -217,7 +229,11 @@
217
229
  "--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)",
218
230
  "--border-color-for-input-as-quiet": "transparent",
219
231
  "--border-color-for-button-as-secondary": "hsl(232, 18%, 80%)",
232
+ "--border-color-for-dropdown": "hsl(232, 18%, 80%)",
220
233
  "--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)",
234
+ "--border-color-for-checkbox-input": "hsl(175, 55%, 45%)",
235
+ "--border-color-for-checkbox-input-when-active": "hsl(175, 55%, 45%)",
236
+ "--border-color-for-tag": "hsl(232, 18%, 85%)",
221
237
  "--border-radius-for-button-as-big": "4px",
222
238
  "--border-radius-for-button-as-medium": "4px",
223
239
  "--border-radius-for-input": "4px",
@@ -237,6 +253,9 @@
237
253
  "--font-color-for-view-switcher-button": "hsl(232, 18%, 40%)",
238
254
  "--font-color-for-stamp-as-positive": "hsl(175, 55%, 25%)",
239
255
  "--font-color-for-content-notification-when-success": "hsl(175, 55%, 45%)",
256
+ "--font-color-for-avatar-as-turquoise": "hsl(180, 30%, 45%)",
257
+ "--font-color-for-leading-icon-as-turquoise": "hsl(180, 30%, 45%)",
258
+ "--font-color-for-text-as-positive": "hsl(175, 55%, 25%)",
240
259
  "--height-for-button-as-big": "40px",
241
260
  "--height-for-button-as-medium": "32px",
242
261
  "--height-for-button-as-small": "16px",
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%);
@@ -70,7 +71,7 @@
70
71
  --color-warning: #f16d0e;
71
72
  --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
72
73
  --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
73
- --color-warning-60: hsl(35, 90%, 55%);
74
+ --color-warning-60: hsl(25.110132158590307, 90%, 60%);
74
75
  --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
75
76
  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
76
77
  --color-error: #e60050;
@@ -227,11 +228,42 @@
227
228
  --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
228
229
  --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
229
230
  --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%);
231
+ --background-color-for-toggle-thumb-when-disabled: hsl(
232
+ 195,
233
+ 35.2941176471%,
234
+ 60%
235
+ );
236
+ --background-color-for-toggle-track-when-disabled: hsl(
237
+ 195,
238
+ 35.2941176471%,
239
+ 90%
240
+ );
241
+ --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
242
+ 232,
243
+ 18%,
244
+ 60%
245
+ );
246
+ --background-color-for-toggle-track-when-active-when-disabled: hsl(
247
+ 232,
248
+ 18%,
249
+ 90%
250
+ );
251
+ --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1);
232
252
  --background-color-for-loading-spinner-track: #213c45;
233
253
  --background-color-for-loading-spinner-dot: #213c45;
234
254
  --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
255
+ --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%);
256
+ --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%);
257
+ --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%);
258
+ --background-color-for-tag: hsl(232, 18%, 95%);
259
+ --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
260
+ --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%);
261
+ --background-color-for-dropdown-when-active: hsl(232, 18%, 90%);
262
+ --background-color-for-dropdown-option-when-active: hsl(
263
+ 203.05555555555554,
264
+ 93.9130434783%,
265
+ 95%
266
+ );
235
267
  --border-color-for-input: hsl(232, 18%, 80%);
236
268
  --border-color-for-input-when-focused: hsl(175, 55%, 45%);
237
269
  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
@@ -241,7 +273,11 @@
241
273
  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
242
274
  --border-color-for-input-as-quiet: transparent;
243
275
  --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
276
+ --border-color-for-dropdown: hsl(232, 18%, 80%);
244
277
  --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
278
+ --border-color-for-checkbox-input: hsl(175, 55%, 45%);
279
+ --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%);
280
+ --border-color-for-tag: hsl(232, 18%, 85%);
245
281
  --border-radius-for-button-as-big: 4px;
246
282
  --border-radius-for-button-as-medium: 4px;
247
283
  --border-radius-for-input: 4px;
@@ -265,6 +301,9 @@
265
301
  --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
266
302
  --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
267
303
  --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
304
+ --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%);
305
+ --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%);
306
+ --font-color-for-text-as-positive: hsl(175, 55%, 25%);
268
307
  --height-for-button-as-big: 40px;
269
308
  --height-for-button-as-medium: 32px;
270
309
  --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%);
@@ -197,16 +198,12 @@
197
198
  --background-color-for-input: #fff;
198
199
  --background-color-for-input-when-selected: hsl(244, 100%, 97%);
199
200
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
200
- --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
201
+ --background-color-for-input-when-hovered: hsl(244, 100%, 99%);
201
202
  --background-color-for-input-when-focused: #fff;
202
203
  --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
- );
204
+ --background-color-for-input-when-active: hsl(244, 100%, 97%);
208
205
  --background-color-for-input-as-quiet: transparent;
209
- --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
206
+ --background-color-for-input-as-quiet-when-hovered: hsla(240, 64%, 58%, 4%);
210
207
  --background-color-for-localized-input-label: #fff;
211
208
  --background-color-for-localized-input-label-when-readonly: hsl(
212
209
  232,
@@ -235,11 +232,30 @@
235
232
  --background-color-for-stamp-as-positive: hsl(141, 76%, 92%);
236
233
  --background-color-for-toggle-thumb-when-active: hsl(240, 100%, 67%);
237
234
  --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%);
235
+ --background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
236
+ --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
237
+ --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
238
+ 244,
239
+ 100%,
240
+ 84%
241
+ );
242
+ --background-color-for-toggle-track-when-active-when-disabled: hsl(
243
+ 243,
244
+ 100%,
245
+ 93%
246
+ );
247
+ --background-color-for-toggle-thumb-when-hovered: hsla(240, 64%, 58%, 4%);
240
248
  --background-color-for-loading-spinner-track: hsl(243, 100%, 93%);
241
249
  --background-color-for-loading-spinner-dot: hsl(240, 64%, 58%);
242
250
  --background-color-for-content-notification-when-success: hsl(141, 76%, 92%);
251
+ --background-color-for-view-switcher-button-when-active: hsl(244, 100%, 97%);
252
+ --background-color-for-checkbox-input-when-hovered: hsl(244, 100%, 97%);
253
+ --background-color-for-radio-option-when-hovered: hsl(244, 100%, 97%);
254
+ --background-color-for-tag: hsl(244, 100%, 97%);
255
+ --background-color-for-tag-when-hovered: hsl(243, 100%, 93%);
256
+ --background-color-for-dropdown-when-hovered: hsl(244, 100%, 97%);
257
+ --background-color-for-dropdown-when-active: hsl(243, 100%, 93%);
258
+ --background-color-for-dropdown-option-when-active: hsl(244, 100%, 97%);
243
259
  --border-color-for-input: hsl(232, 18%, 80%);
244
260
  --border-color-for-input-when-focused: hsl(240, 100%, 67%);
245
261
  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
@@ -249,7 +265,11 @@
249
265
  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
250
266
  --border-color-for-input-as-quiet: transparent;
251
267
  --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
268
+ --border-color-for-dropdown: hsl(244, 100%, 84%);
252
269
  --border-color-for-content-notification-when-success: hsl(144, 69%, 80%);
270
+ --border-color-for-checkbox-input: hsl(232, 18%, 60%);
271
+ --border-color-for-checkbox-input-when-active: hsl(240, 64%, 58%);
272
+ --border-color-for-tag: hsl(243, 100%, 93%);
253
273
  --border-radius-for-button-as-big: 4px;
254
274
  --border-radius-for-button-as-medium: 4px;
255
275
  --border-radius-for-input: 4px;
@@ -269,6 +289,9 @@
269
289
  --font-color-for-view-switcher-button: hsl(240, 64%, 58%);
270
290
  --font-color-for-stamp-as-positive: hsl(155, 90%, 24%);
271
291
  --font-color-for-content-notification-when-success: hsl(152, 77%, 39%);
292
+ --font-color-for-avatar-as-turquoise: hsl(178, 88%, 35%);
293
+ --font-color-for-leading-icon-as-turquoise: hsl(178, 88%, 35%);
294
+ --font-color-for-text-as-positive: hsl(155, 90%, 24%);
272
295
  --height-for-button-as-big: 40px;
273
296
  --height-for-button-as-medium: 32px;
274
297
  --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%)'
@@ -100,7 +101,7 @@ choiceGroupsByTheme:
100
101
  color-warning: '#f16d0e'
101
102
  color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
102
103
  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
104
+ 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
105
  color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
105
106
  color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
106
107
  color-error: '#e60050'
@@ -114,11 +115,11 @@ choiceGroupsByTheme:
114
115
  color-solid-10: 'hsl(0deg 0% 10% / 10%)'
115
116
  color-surface: '#fff'
116
117
  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
118
+ color-success: 'hsl(152, 77%, 39%)' # Design token copied from recolouring theme
119
+ color-success-25: 'hsl(155, 84%, 20%)' # Design token copied from recolouring theme
120
+ color-success-40: 'hsl(155, 90%, 24%)' # Design token copied from recolouring theme
121
+ color-success-85: 'hsl(144, 69%, 80%)' # Design token copied from recolouring theme
122
+ color-success-95: 'hsl(141, 76%, 92%)' # Design token copied from recolouring theme
122
123
 
123
124
  borderRadiuses:
124
125
  label: Border Radiuses
@@ -286,6 +287,44 @@ choiceGroupsByTheme:
286
287
  color-primary-85: 'hsl(244, 100%, 84%)'
287
288
  color-primary-90: 'hsl(243, 100%, 93%)'
288
289
  color-primary-95: 'hsl(244, 100%, 97%)'
290
+ color-primary-98: 'hsl(244, 100%, 99%)'
291
+ color-accent-10: 'hsl(195, 100%, 10%)'
292
+ color-accent-20: 'hsl(195, 80%, 20%)'
293
+ color-accent-30: 'hsl(195, 70%, 30%)'
294
+ color-accent-40: 'hsl(195, 70%, 40%)'
295
+ color-accent-50: 'hsl(195, 70%, 50%)'
296
+ color-accent-60: 'hsl(195, 70%, 60%)'
297
+ color-accent-85: 'hsl(195, 85%, 85%)'
298
+ color-accent-90: 'hsl(195, 90%, 90%)'
299
+ color-accent-95: 'hsl(195, 95%, 95%)'
300
+ color-accent-98: 'hsl(195, 100%, 98%)'
301
+ color-brown-10: 'hsl(41, 100%, 10%)'
302
+ color-brown-20: 'hsl(41, 100%, 20%)'
303
+ color-brown-35: 'hsl(41, 96%, 35%)'
304
+ color-brown-50: 'hsl(41, 95%, 44%)'
305
+ color-brown-70: 'hsl(47, 95%, 70%)'
306
+ color-brown-85: 'hsl(47, 100%, 85%)'
307
+ color-brown-90: 'hsl(47, 100%, 90%)'
308
+ color-brown-95: 'hsl(47, 100%, 95%)'
309
+ color-brown-98: 'hsl(48, 100%, 97%)'
310
+ color-purple-10: 'hsl(248, 88%, 10%)'
311
+ color-purple-20: 'hsl(248, 50%, 20%)'
312
+ color-purple-35: 'hsl(248, 25%, 35%)'
313
+ color-purple-50: 'hsl(248, 64%, 58%)'
314
+ color-purple-70: 'hsl(248, 80%, 70%)'
315
+ color-purple-85: 'hsl(249, 100%, 85%)'
316
+ color-purple-90: 'hsl(248, 100%, 90%)'
317
+ color-purple-95: 'hsl(248, 100%, 95%)'
318
+ color-purple-98: 'hsl(246, 100%, 98%)'
319
+ color-turquoise-10: 'hsl(180, 88%, 10%)'
320
+ color-turquoise-20: 'hsl(180, 90%, 20%)'
321
+ color-turquoise-35: 'hsl(178, 88%, 35%)'
322
+ color-turquoise-50: 'hsl(178, 67%, 50%)'
323
+ color-turquoise-70: 'hsl(180, 75%, 70%)'
324
+ color-turquoise-85: 'hsl(180, 90%, 85%)'
325
+ color-turquoise-90: 'hsl(180, 88%, 90%)'
326
+ color-turquoise-95: 'hsl(180, 88%, 95%)'
327
+ color-turquoise-98: 'hsl(180, 100%, 98%)'
289
328
  color-success: 'hsl(152, 77%, 39%)'
290
329
  color-success-25: 'hsl(155, 84%, 20%)'
291
330
  color-success-40: 'hsl(155, 90%, 24%)'
@@ -310,6 +349,8 @@ states:
310
349
  description: 'When the mouse is over the element'
311
350
  disabled:
312
351
  description: 'When the element can not be interacted with'
352
+ active-disabled:
353
+ description: 'When the element is active but can not be interacted with'
313
354
  focused:
314
355
  description: 'When the element is currently selected to receive input'
315
356
  readonly:
@@ -349,6 +390,8 @@ variants:
349
390
  description: 'To differentiate component urgent type'
350
391
  positive:
351
392
  description: 'To differentiate component positive type'
393
+ turquoise:
394
+ description: 'To differentiate component turquoise type'
352
395
 
353
396
  componentGroups:
354
397
  button:
@@ -372,6 +415,22 @@ componentGroups:
372
415
  description: 'Loading spinner dot elements'
373
416
  content-notification:
374
417
  description: 'Content notification elements'
418
+ avatar:
419
+ description: 'Avatar elements'
420
+ leading-icon:
421
+ description: 'Leading icon elements'
422
+ checkbox-input:
423
+ description: 'Checkbox input elements'
424
+ radio-option:
425
+ description: 'Radio option elements'
426
+ tag:
427
+ description: 'Tag elements'
428
+ dropdown:
429
+ description: 'Dropdown elements'
430
+ dropdown-option:
431
+ description: 'Dropdown option elements'
432
+ text:
433
+ description: 'Text elements'
375
434
 
376
435
  decisionGroupsByTheme:
377
436
  default:
@@ -429,15 +488,39 @@ decisionGroupsByTheme:
429
488
  background-color-for-toggle-track-when-active:
430
489
  choice: color-primary-40
431
490
  background-color-for-toggle-thumb-when-disabled:
432
- choice: color-neutral-60
491
+ choice: color-accent-60
433
492
  background-color-for-toggle-track-when-disabled:
493
+ choice: color-accent-90
494
+ background-color-for-toggle-thumb-when-active-when-disabled:
495
+ choice: color-neutral-60
496
+ deprecated: true
497
+ background-color-for-toggle-track-when-active-when-disabled:
434
498
  choice: color-neutral-90
499
+ deprecated: true
500
+ background-color-for-toggle-thumb-when-hovered:
501
+ choice: 'rgba(0, 0, 0, 0.1)'
435
502
  background-color-for-loading-spinner-track:
436
503
  choice: color-accent
437
504
  background-color-for-loading-spinner-dot:
438
505
  choice: color-accent
439
506
  background-color-for-content-notification-when-success:
440
507
  choice: color-primary-95
508
+ background-color-for-view-switcher-button-when-active:
509
+ choice: color-neutral-95
510
+ background-color-for-checkbox-input-when-hovered:
511
+ choice: color-neutral-90
512
+ background-color-for-radio-option-when-hovered:
513
+ choice: color-neutral-90
514
+ background-color-for-tag:
515
+ choice: color-neutral-95
516
+ background-color-for-tag-when-hovered:
517
+ choice: color-neutral-90
518
+ background-color-for-dropdown-when-hovered:
519
+ choice: color-neutral-95
520
+ background-color-for-dropdown-when-active:
521
+ choice: color-neutral-90
522
+ background-color-for-dropdown-option-when-active:
523
+ choice: color-info-95
441
524
 
442
525
  borderColors:
443
526
  label: Border Colors
@@ -462,8 +545,16 @@ decisionGroupsByTheme:
462
545
  # recolouring rollout
463
546
  border-color-for-button-as-secondary:
464
547
  choice: color-neutral
548
+ border-color-for-dropdown:
549
+ choice: color-neutral
465
550
  border-color-for-content-notification-when-success:
466
551
  choice: color-primary-85
552
+ border-color-for-checkbox-input:
553
+ choice: color-primary
554
+ border-color-for-checkbox-input-when-active:
555
+ choice: color-primary
556
+ border-color-for-tag:
557
+ choice: color-neutral-85
467
558
 
468
559
  borderRadiuses:
469
560
  label: Border Radius
@@ -518,6 +609,12 @@ decisionGroupsByTheme:
518
609
  choice: color-primary-25
519
610
  font-color-for-content-notification-when-success:
520
611
  choice: color-primary
612
+ font-color-for-avatar-as-turquoise:
613
+ choice: color-turquoise-50
614
+ font-color-for-leading-icon-as-turquoise:
615
+ choice: color-turquoise-50
616
+ font-color-for-text-as-positive:
617
+ choice: color-primary-25
521
618
 
522
619
  heights:
523
620
  label: Height
@@ -584,10 +681,18 @@ decisionGroupsByTheme:
584
681
  decisions:
585
682
  border-color-for-button-as-secondary:
586
683
  choice: color-primary-85
684
+ border-color-for-dropdown:
685
+ choice: color-primary-85
587
686
  border-color-for-input-when-focused:
588
687
  choice: color-primary-40
589
688
  border-color-for-content-notification-when-success:
590
689
  choice: color-success-85
690
+ border-color-for-checkbox-input:
691
+ choice: color-neutral-60
692
+ border-color-for-checkbox-input-when-active:
693
+ choice: color-primary
694
+ border-color-for-tag:
695
+ choice: color-primary-90
591
696
 
592
697
  backgroundColors:
593
698
  label: Background Colors
@@ -618,15 +723,45 @@ decisionGroupsByTheme:
618
723
  background-color-for-toggle-track-when-active:
619
724
  choice: color-primary-85
620
725
  background-color-for-toggle-thumb-when-disabled:
621
- choice: color-primary-85
726
+ choice: color-neutral-60
622
727
  background-color-for-toggle-track-when-disabled:
728
+ choice: color-neutral-90
729
+ background-color-for-toggle-thumb-when-active-when-disabled:
730
+ choice: color-primary-85
731
+ deprecated: true
732
+ background-color-for-toggle-track-when-active-when-disabled:
623
733
  choice: color-primary-90
734
+ deprecated: true
735
+ background-color-for-toggle-thumb-when-hovered:
736
+ choice: 'hsla(240, 64%, 58%, 4%)'
624
737
  background-color-for-loading-spinner-track:
625
738
  choice: color-primary-90
626
739
  background-color-for-loading-spinner-dot:
627
740
  choice: color-primary
628
741
  background-color-for-content-notification-when-success:
629
742
  choice: color-success-95
743
+ background-color-for-view-switcher-button-when-active:
744
+ choice: color-primary-95
745
+ background-color-for-checkbox-input-when-hovered:
746
+ choice: color-primary-95
747
+ background-color-for-radio-option-when-hovered:
748
+ choice: color-primary-95
749
+ background-color-for-tag:
750
+ choice: color-primary-95
751
+ background-color-for-tag-when-hovered:
752
+ choice: color-primary-90
753
+ background-color-for-dropdown-when-hovered:
754
+ choice: color-primary-95
755
+ background-color-for-dropdown-when-active:
756
+ choice: color-primary-90
757
+ background-color-for-dropdown-option-when-active:
758
+ choice: color-primary-95
759
+ background-color-for-input-as-quiet-when-hovered:
760
+ choice: 'hsla(240, 64%, 58%, 4%)'
761
+ background-color-for-input-when-active:
762
+ choice: color-primary-95
763
+ background-color-for-input-when-hovered:
764
+ choice: color-primary-98
630
765
 
631
766
  fontColors:
632
767
  label: Font Colors
@@ -648,3 +783,9 @@ decisionGroupsByTheme:
648
783
  choice: color-success-40
649
784
  font-color-for-content-notification-when-success:
650
785
  choice: color-success
786
+ font-color-for-avatar-as-turquoise:
787
+ choice: color-turquoise-35
788
+ font-color-for-leading-icon-as-turquoise:
789
+ choice: color-turquoise-35
790
+ font-color-for-text-as-positive:
791
+ 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": "18.5.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": "18.5.0",
28
+ "@commercetools-uikit/avatar": "18.5.0",
29
+ "@commercetools-uikit/buttons": "18.5.0",
30
+ "@commercetools-uikit/card": "18.5.0",
31
+ "@commercetools-uikit/collapsible": "18.5.0",
32
+ "@commercetools-uikit/collapsible-motion": "18.5.0",
33
+ "@commercetools-uikit/collapsible-panel": "18.5.0",
34
+ "@commercetools-uikit/constraints": "18.5.0",
35
+ "@commercetools-uikit/data-table": "18.5.0",
36
+ "@commercetools-uikit/data-table-manager": "18.5.0",
37
+ "@commercetools-uikit/design-system": "18.5.0",
38
+ "@commercetools-uikit/field-errors": "18.5.0",
39
+ "@commercetools-uikit/field-label": "18.5.0",
40
+ "@commercetools-uikit/fields": "18.5.0",
41
+ "@commercetools-uikit/grid": "18.5.0",
42
+ "@commercetools-uikit/hooks": "18.5.0",
43
+ "@commercetools-uikit/i18n": "18.5.0",
44
+ "@commercetools-uikit/icons": "18.5.0",
45
+ "@commercetools-uikit/inputs": "18.5.0",
46
+ "@commercetools-uikit/label": "18.5.0",
47
+ "@commercetools-uikit/link": "18.5.0",
48
+ "@commercetools-uikit/loading-spinner": "18.5.0",
49
+ "@commercetools-uikit/messages": "18.5.0",
50
+ "@commercetools-uikit/notifications": "18.5.0",
51
+ "@commercetools-uikit/pagination": "18.5.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "18.5.0",
53
+ "@commercetools-uikit/progress-bar": "18.5.0",
54
+ "@commercetools-uikit/selectable-search-input": "18.5.0",
55
+ "@commercetools-uikit/spacings": "18.5.0",
56
+ "@commercetools-uikit/stamp": "18.5.0",
57
+ "@commercetools-uikit/tag": "18.5.0",
58
+ "@commercetools-uikit/text": "18.5.0",
59
+ "@commercetools-uikit/tooltip": "18.5.0",
60
+ "@commercetools-uikit/utils": "18.5.0",
61
+ "@commercetools-uikit/view-switcher": "18.5.0"
62
62
  },
63
63
  "devDependencies": {
64
64
  "moment": "2.30.1",