@commercetools-frontend/ui-kit 15.13.2 → 15.14.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 (7) 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 +69 -2
  5. package/materials/custom-properties.json +42 -2
  6. package/materials/internals/definition.yaml +190 -10
  7. package/package.json +35 -35
package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.13.2";
83
+ var version = "15.14.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.13.2";
83
+ var version = "15.14.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.esm.js CHANGED
@@ -33,6 +33,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
33
33
  export { customProperties, designTokens } from '@commercetools-uikit/design-system';
34
34
 
35
35
  // NOTE: This string will be replaced on build time with the package version.
36
- var version = "15.13.2";
36
+ var version = "15.14.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -175,6 +175,7 @@
175
175
  89.0196078431%,
176
176
  95%
177
177
  );
178
+ --background-color-for-tag-when-hovered: hsl(0, 0%, 95%);
178
179
  --background-color-for-collapsible-panel-header-icon-when-disabled: hsl(
179
180
  195,
180
181
  35.2941176471%,
@@ -195,6 +196,19 @@
195
196
  35.2941176471%,
196
197
  98%
197
198
  );
199
+ --background-color-for-localized-rich-text-body-button-when-active: hsl(
200
+ 195,
201
+ 35.2941176471%,
202
+ 30%
203
+ );
204
+ --background-color-for-localized-rich-text-body-button: hsl(0, 0%, 90%);
205
+ --background-color-for-rich-text-dropdown-when-hovered: hsl(0, 0%, 90%);
206
+ --background-color-for-rich-text-more-styles-dropdown-when-hovered: hsl(
207
+ 0,
208
+ 0%,
209
+ 90%
210
+ );
211
+ --background-color-for-rich-text-button: hsl(195, 35.2941176471%, 30%);
198
212
  --background-color-for-tooltip: #213c45;
199
213
  --background-color-for-view-switcher: #fff;
200
214
  --background-color-for-view-switcher-when-disabled: hsl(
@@ -247,6 +261,7 @@
247
261
  --border-for-view-switcher: none;
248
262
  --border-for-select-input-tag: none;
249
263
  --border-for-radio-input-option: 1px;
264
+ --border-for-calendar-menu-when-focused: 1px solid var(--color-primary);
250
265
  --border-color-for-input: hsl(0, 0%, 60%);
251
266
  --border-color-for-input-when-focused: #00b39e;
252
267
  --border-color-for-input-when-disabled: #ccc;
@@ -294,7 +309,7 @@
294
309
  --border-color-for-radio-input-when-focused: #00b39e;
295
310
  --border-color-for-primary-action-dropdown-menu: #ccc;
296
311
  --border-radius-for-button-as-big: 6px;
297
- --border-radius-for-button-as-small: 4px;
312
+ --border-radius-for-button-as-medium: 4px;
298
313
  --border-radius-for-button-as-icon-as-big: 6px;
299
314
  --border-radius-for-button-as-icon-as-medium: 4px;
300
315
  --border-radius-for-button-as-icon-as-small: 2px;
@@ -330,7 +345,9 @@
330
345
  inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
331
346
  inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
332
347
  --box-shadow-for-select-input-when-focused: inset 0 0 0 2px;
348
+ --box-shadow-for-calendar-menu-when-focused: none;
333
349
  --font-color-for-text: #1a1a1a;
350
+ --font-color-for-text-when-disabled: #ccc;
334
351
  --font-color-for-input: #1a1a1a;
335
352
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
336
353
  --font-color-for-input-when-error: #e60050;
@@ -342,6 +359,15 @@
342
359
  --font-color-for-tag-remove-icon-when-hovered: #f16d0e;
343
360
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
344
361
  --font-color-for-text-when-inverted: #fff;
362
+ --font-color-for-link-as-inverted: #fff;
363
+ --font-color-for-link-as-primary: #00b39e;
364
+ --font-color-for-link-as-secondary: #1a1a1a;
365
+ --font-color-for-link-as-primary-when-active: hsl(
366
+ 172.9608938547486,
367
+ 100%,
368
+ 25%
369
+ );
370
+ --font-color-for-link-as-secondary-when-active: #00b39e;
345
371
  --font-color-for-table-header: #fff;
346
372
  --font-color-for-localized-input-label: hsl(0, 0%, 60%);
347
373
  --font-color-for-view-switcher: #1a1a1a;
@@ -371,8 +397,29 @@
371
397
  --font-color-for-radio-input-when-error: #e60050;
372
398
  --font-color-for-radio-input-when-readonly: hsl(0, 0%, 60%);
373
399
  --font-color-for-radio-input-when-warning: #f16d0e;
400
+ --font-color-for-flat-button-as-primary: #00b39e;
401
+ --font-color-for-flat-button-as-primary-when-hovered: hsl(
402
+ 172.9608938547486,
403
+ 100%,
404
+ 25%
405
+ );
406
+ --font-color-for-flat-button-as-critical: #e60050;
407
+ --font-color-for-flat-button-as-critical-when-hovered: hsl(
408
+ 339.1304347826087,
409
+ 100%,
410
+ 25%
411
+ );
412
+ --font-color-for-flat-button-as-secondary: #1a1a1a;
413
+ --font-color-for-flat-button-as-inverted: #fff;
414
+ --font-color-for-flat-button-icon-when-disabled: hsl(0, 0%, 60%);
415
+ --font-color-for-secondary-icon-button-as-primary: #00b39e;
416
+ --font-color-for-secondary-icon-button-as-primary-when-hovered: hsl(
417
+ 172.9608938547486,
418
+ 100%,
419
+ 25%
420
+ );
374
421
  --height-for-button-as-big: 32px;
375
- --height-for-button-as-small: 24px;
422
+ --height-for-button-as-medium: 24px;
376
423
  --height-for-button-as-icon-as-big: 32px;
377
424
  --height-for-button-as-icon-as-medium: 24px;
378
425
  --height-for-button-as-icon-as-small: 16px;
@@ -415,6 +462,8 @@
415
462
  --line-height-for-text-as-h5: inherit;
416
463
  --line-height-for-text-as-body: inherit;
417
464
  --line-height-for-text-as-detail: inherit;
465
+ --line-height-for-select-input-options: inherit;
466
+ --line-height-for-table-header: inherit;
418
467
  --font-weight-for-text-as-h1: 300;
419
468
  --font-weight-for-text-as-h2: 300;
420
469
  --font-weight-for-text-as-h3: 300;
@@ -424,6 +473,7 @@
424
473
  --font-weight-for-text-as-detail: 400;
425
474
  --font-weight-for-button: 400;
426
475
  --font-weight-for-table-header: 400;
476
+ --font-weight-for-text-as-bold: 700;
427
477
  --margin-for-table-header: 8px;
428
478
  --margin-for-table-as-condensed: 8px;
429
479
  --margin-for-view-switcher-icon: 0 var(--spacing-10) 0 0;
@@ -436,6 +486,9 @@
436
486
  --margin-left-for-radio-input-label: 8px;
437
487
  --margin-right-for-primary-action-dropdown: 4px;
438
488
  --margin-top-for-primary-action-dropdown: none;
489
+ --margin-for-localized-rich-text-body-button: none;
490
+ --margin-for-rich-text-divider: 0 var(--spacing-10);
491
+ --margin-for-rich-text-dropdown-item-label: 0 0 0 var(--spacing-10);
439
492
  --padding-for-stamp: var(--spacing-10) var(--spacing-20);
440
493
  --padding-for-stamp-as-condensed: 1px var(--spacing-10);
441
494
  --padding-for-tag: 5px var(--spacing-20);
@@ -456,7 +509,17 @@
456
509
  --padding-for-input: 8px;
457
510
  --padding-for-multiline-input: var(--spacing-10) var(--spacing-20);
458
511
  --padding-for-localized-rich-text-input-label: 0 var(--spacing-20);
512
+ --padding-for-localized-rich-text-dropdown-button: 3px var(--spacing-20);
513
+ --padding-for-localized-rich-text-dropdown-item: var(--spacing-10)
514
+ var(--spacing-20);
515
+ --padding-for-localized-rich-text-body-button: var(--spacing-10);
459
516
  --padding-for-localized-input-label: 0 var(--spacing-20);
517
+ --padding-for-rich-text-input: none;
518
+ --padding-for-rich-text-toolbar: var(--spacing-10) 7px;
519
+ --padding-left-for-rich-text-toolbar: 3px;
520
+ --padding-for-rich-text-editor-container: 6px var(--spacing-20)
521
+ var(--spacing-10);
522
+ --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20);
460
523
  --padding-for-tag-remove-icon: 0 var(--spacing-10);
461
524
  --padding-for-tooltip: var(--spacing-10) var(--spacing-20);
462
525
  --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
@@ -474,6 +537,8 @@
474
537
  --padding-for-selectable-search-input-dropdown: 0 var(--spacing-20);
475
538
  --padding-for-primary-action-dropdown: 0 var(--spacing-20);
476
539
  --padding-for-primary-action-dropdown-icon: 0 var(--spacing-10);
540
+ --padding-for-button-as-medium: 0 var(--spacing-20);
541
+ --padding-for-button-as-big: 0 var(--spacing-30);
477
542
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
478
543
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
479
544
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -508,6 +573,8 @@
508
573
  0 1px 2px rgba(0, 0, 0, 0.24);
509
574
  --shadow-for-toggle-input-thumb: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
510
575
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
576
+ --shadow-for-tag-when-hovered: 0 1px 3px rgba(0, 0, 0, 0.12),
577
+ 0 1px 2px rgba(0, 0, 0, 0.24);
511
578
  --font-size-m: 1rem;
512
579
  --big-button-height: 32px;
513
580
  --small-button-height: 24px;
package/materials/custom-properties.json CHANGED
@@ -151,6 +151,7 @@
151
151
  "--background-color-for-table-header": "#213c45",
152
152
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
153
153
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
154
+ "--background-color-for-tag-when-hovered": "hsl(0, 0%, 95%)",
154
155
  "--background-color-for-collapsible-panel-header-icon-when-disabled": "hsl(195, 35.2941176471%, 98%)",
155
156
  "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 90%)",
156
157
  "--background-color-for-avatar": "hsl(0, 0%, 60%)",
@@ -159,6 +160,11 @@
159
160
  "--background-color-for-localized-input-label": "hsl(195, 35.2941176471%, 98%)",
160
161
  "--background-color-for-localized-input-label-when-readonly": "hsl(195, 35.2941176471%, 95%)",
161
162
  "--background-color-for-localized-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)",
163
+ "--background-color-for-localized-rich-text-body-button-when-active": "hsl(195, 35.2941176471%, 30%)",
164
+ "--background-color-for-localized-rich-text-body-button": "hsl(0, 0%, 90%)",
165
+ "--background-color-for-rich-text-dropdown-when-hovered": "hsl(0, 0%, 90%)",
166
+ "--background-color-for-rich-text-more-styles-dropdown-when-hovered": "hsl(0, 0%, 90%)",
167
+ "--background-color-for-rich-text-button": "hsl(195, 35.2941176471%, 30%)",
162
168
  "--background-color-for-tooltip": "#213c45",
163
169
  "--background-color-for-view-switcher": "#fff",
164
170
  "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)",
@@ -194,6 +200,7 @@
194
200
  "--border-for-view-switcher": "none",
195
201
  "--border-for-select-input-tag": "none",
196
202
  "--border-for-radio-input-option": "1px",
203
+ "--border-for-calendar-menu-when-focused": "1px solid var(--color-primary)",
197
204
  "--border-color-for-input": "hsl(0, 0%, 60%)",
198
205
  "--border-color-for-input-when-focused": "#00b39e",
199
206
  "--border-color-for-input-when-disabled": "#ccc",
@@ -241,7 +248,7 @@
241
248
  "--border-color-for-radio-input-when-focused": "#00b39e",
242
249
  "--border-color-for-primary-action-dropdown-menu": "#ccc",
243
250
  "--border-radius-for-button-as-big": "6px",
244
- "--border-radius-for-button-as-small": "4px",
251
+ "--border-radius-for-button-as-medium": "4px",
245
252
  "--border-radius-for-button-as-icon-as-big": "6px",
246
253
  "--border-radius-for-button-as-icon-as-medium": "4px",
247
254
  "--border-radius-for-button-as-icon-as-small": "2px",
@@ -270,7 +277,9 @@
270
277
  "--box-shadow-for-view-switcher": "0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)",
271
278
  "--box-shadow-for-view-switcher-when-selected": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)",
272
279
  "--box-shadow-for-select-input-when-focused": "inset 0 0 0 2px",
280
+ "--box-shadow-for-calendar-menu-when-focused": "none",
273
281
  "--font-color-for-text": "#1a1a1a",
282
+ "--font-color-for-text-when-disabled": "#ccc",
274
283
  "--font-color-for-input": "#1a1a1a",
275
284
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
276
285
  "--font-color-for-input-when-error": "#e60050",
@@ -282,6 +291,11 @@
282
291
  "--font-color-for-tag-remove-icon-when-hovered": "#f16d0e",
283
292
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
284
293
  "--font-color-for-text-when-inverted": "#fff",
294
+ "--font-color-for-link-as-inverted": "#fff",
295
+ "--font-color-for-link-as-primary": "#00b39e",
296
+ "--font-color-for-link-as-secondary": "#1a1a1a",
297
+ "--font-color-for-link-as-primary-when-active": "hsl(172.9608938547486, 100%, 25%)",
298
+ "--font-color-for-link-as-secondary-when-active": "#00b39e",
285
299
  "--font-color-for-table-header": "#fff",
286
300
  "--font-color-for-localized-input-label": "hsl(0, 0%, 60%)",
287
301
  "--font-color-for-view-switcher": "#1a1a1a",
@@ -311,8 +325,17 @@
311
325
  "--font-color-for-radio-input-when-error": "#e60050",
312
326
  "--font-color-for-radio-input-when-readonly": "hsl(0, 0%, 60%)",
313
327
  "--font-color-for-radio-input-when-warning": "#f16d0e",
328
+ "--font-color-for-flat-button-as-primary": "#00b39e",
329
+ "--font-color-for-flat-button-as-primary-when-hovered": "hsl(172.9608938547486, 100%, 25%)",
330
+ "--font-color-for-flat-button-as-critical": "#e60050",
331
+ "--font-color-for-flat-button-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)",
332
+ "--font-color-for-flat-button-as-secondary": "#1a1a1a",
333
+ "--font-color-for-flat-button-as-inverted": "#fff",
334
+ "--font-color-for-flat-button-icon-when-disabled": "hsl(0, 0%, 60%)",
335
+ "--font-color-for-secondary-icon-button-as-primary": "#00b39e",
336
+ "--font-color-for-secondary-icon-button-as-primary-when-hovered": "hsl(172.9608938547486, 100%, 25%)",
314
337
  "--height-for-button-as-big": "32px",
315
- "--height-for-button-as-small": "24px",
338
+ "--height-for-button-as-medium": "24px",
316
339
  "--height-for-button-as-icon-as-big": "32px",
317
340
  "--height-for-button-as-icon-as-medium": "24px",
318
341
  "--height-for-button-as-icon-as-small": "16px",
@@ -355,6 +378,8 @@
355
378
  "--line-height-for-text-as-h5": "inherit",
356
379
  "--line-height-for-text-as-body": "inherit",
357
380
  "--line-height-for-text-as-detail": "inherit",
381
+ "--line-height-for-select-input-options": "inherit",
382
+ "--line-height-for-table-header": "inherit",
358
383
  "--font-weight-for-text-as-h1": "300",
359
384
  "--font-weight-for-text-as-h2": "300",
360
385
  "--font-weight-for-text-as-h3": "300",
@@ -364,6 +389,7 @@
364
389
  "--font-weight-for-text-as-detail": "400",
365
390
  "--font-weight-for-button": "400",
366
391
  "--font-weight-for-table-header": "400",
392
+ "--font-weight-for-text-as-bold": "700",
367
393
  "--margin-for-table-header": "8px",
368
394
  "--margin-for-table-as-condensed": "8px",
369
395
  "--margin-for-view-switcher-icon": "0 var(--spacing-10) 0 0",
@@ -376,6 +402,9 @@
376
402
  "--margin-left-for-radio-input-label": "8px",
377
403
  "--margin-right-for-primary-action-dropdown": "4px",
378
404
  "--margin-top-for-primary-action-dropdown": "none",
405
+ "--margin-for-localized-rich-text-body-button": "none",
406
+ "--margin-for-rich-text-divider": "0 var(--spacing-10)",
407
+ "--margin-for-rich-text-dropdown-item-label": "0 0 0 var(--spacing-10)",
379
408
  "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
380
409
  "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
381
410
  "--padding-for-tag": "5px var(--spacing-20)",
@@ -395,7 +424,15 @@
395
424
  "--padding-for-input": "8px",
396
425
  "--padding-for-multiline-input": "var(--spacing-10) var(--spacing-20)",
397
426
  "--padding-for-localized-rich-text-input-label": "0 var(--spacing-20)",
427
+ "--padding-for-localized-rich-text-dropdown-button": "3px var(--spacing-20)",
428
+ "--padding-for-localized-rich-text-dropdown-item": "var(--spacing-10) var(--spacing-20)",
429
+ "--padding-for-localized-rich-text-body-button": "var(--spacing-10)",
398
430
  "--padding-for-localized-input-label": "0 var(--spacing-20)",
431
+ "--padding-for-rich-text-input": "none",
432
+ "--padding-for-rich-text-toolbar": "var(--spacing-10) 7px",
433
+ "--padding-left-for-rich-text-toolbar": "3px",
434
+ "--padding-for-rich-text-editor-container": "6px var(--spacing-20) var(--spacing-10)",
435
+ "--padding-for-localized-multiline-text-input-label": "0 var(--spacing-20)",
399
436
  "--padding-for-tag-remove-icon": "0 var(--spacing-10)",
400
437
  "--padding-for-tooltip": "var(--spacing-10) var(--spacing-20)",
401
438
  "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)",
@@ -412,6 +449,8 @@
412
449
  "--padding-for-selectable-search-input-dropdown": "0 var(--spacing-20)",
413
450
  "--padding-for-primary-action-dropdown": "0 var(--spacing-20)",
414
451
  "--padding-for-primary-action-dropdown-icon": "0 var(--spacing-10)",
452
+ "--padding-for-button-as-medium": "0 var(--spacing-20)",
453
+ "--padding-for-button-as-big": "0 var(--spacing-30)",
415
454
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
416
455
  "--shadow-for-button-when-focused": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
417
456
  "--shadow-for-button-when-hovered": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
@@ -430,6 +469,7 @@
430
469
  "--shadow-for-primary-action-dropdown-when-active": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)",
431
470
  "--shadow-for-primary-action-dropdown-menu": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
432
471
  "--shadow-for-toggle-input-thumb": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
472
+ "--shadow-for-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
433
473
  "--font-size-m": "1rem",
434
474
  "--big-button-height": "32px",
435
475
  "--small-button-height": "24px",
package/materials/internals/definition.yaml CHANGED
@@ -292,6 +292,8 @@ variants:
292
292
  description: 'To differentiate component primary type'
293
293
  secondary:
294
294
  description: 'To differentiate component secondary type'
295
+ inverted:
296
+ description: 'To differentiate component inverted type'
295
297
  urgent:
296
298
  description: 'To differentiate component urgent type'
297
299
  info:
@@ -304,6 +306,10 @@ variants:
304
306
  description: 'To differentiate component positive style'
305
307
  information:
306
308
  description: 'To differentiate component information style'
309
+ critical:
310
+ description: 'To differentiate component critical style'
311
+ bold:
312
+ description: 'When the element is bold'
307
313
 
308
314
  componentGroups:
309
315
  button:
@@ -364,6 +370,26 @@ componentGroups:
364
370
  description: 'Localized multiline text input label elements'
365
371
  localized-rich-text-input-label:
366
372
  description: 'Localized rich text input label elements'
373
+ localized-multiline-text-input-label:
374
+ description: 'Localized multiline text input label elements'
375
+ localized-rich-text-body-button:
376
+ description: 'Localized rich text input button elements'
377
+ localized-rich-text-dropdown-button:
378
+ description: 'Localized rich text input dropdown elements'
379
+ localized-rich-text-dropdown-item:
380
+ description: 'Localized rich text input dropdown item elements'
381
+ rich-text-input:
382
+ description: 'rich text input elements'
383
+ rich-text-editor-container:
384
+ description: 'Rich text editor container elements'
385
+ rich-text-divider:
386
+ description: 'Rich text divider elements'
387
+ rich-text-dropdown:
388
+ description: 'Rich text dropdown elements'
389
+ rich-text-dropdown-item-label:
390
+ description: 'Rich text dropdown item label elements'
391
+ rich-text-more-styles-dropdown:
392
+ description: 'Rich text more styles dropdown elements'
367
393
  tooltip:
368
394
  description: 'Tooltip elements'
369
395
  view-switcher:
@@ -418,6 +444,18 @@ componentGroups:
418
444
  description: 'Toggle input track pseudo-elements'
419
445
  toggle-input-thumb:
420
446
  description: 'Toggle input thumb pseudo-elements'
447
+ rich-text-toolbar:
448
+ description: 'Rich text tool bar element'
449
+ rich-text-button:
450
+ description: 'Rich text button element'
451
+ calendar-menu:
452
+ description: 'Calendar menu element'
453
+ flat-button:
454
+ description: 'Flat button elements'
455
+ flat-button-icon:
456
+ description: 'Flat button icon elements'
457
+ secondary-icon-button:
458
+ description: 'Secondary icon button elements'
421
459
 
422
460
  decisionGroupsByTheme:
423
461
  default:
@@ -483,6 +521,8 @@ decisionGroupsByTheme:
483
521
  background-color-for-tag-warning:
484
522
  description: ''
485
523
  choice: color-warning-95
524
+ background-color-for-tag-when-hovered:
525
+ choice: color-neutral-95
486
526
  background-color-for-collapsible-panel-header-icon-when-disabled:
487
527
  choice: color-accent-98
488
528
  background-color-for-select-input-option-when-hovered:
@@ -503,6 +543,16 @@ decisionGroupsByTheme:
503
543
  choice: color-accent-95
504
544
  background-color-for-localized-input-label-when-disabled:
505
545
  choice: color-accent-98
546
+ background-color-for-localized-rich-text-body-button-when-active:
547
+ choice: color-accent-30
548
+ background-color-for-localized-rich-text-body-button:
549
+ choice: color-neutral-90
550
+ background-color-for-rich-text-dropdown-when-hovered:
551
+ choice: color-neutral-90
552
+ background-color-for-rich-text-more-styles-dropdown-when-hovered:
553
+ choice: color-neutral-90
554
+ background-color-for-rich-text-button:
555
+ choice: color-accent-30
506
556
  background-color-for-tooltip:
507
557
  choice: color-accent
508
558
  background-color-for-view-switcher:
@@ -578,6 +628,8 @@ decisionGroupsByTheme:
578
628
  choice: 'none'
579
629
  border-for-radio-input-option:
580
630
  choice: border-width-1
631
+ border-for-calendar-menu-when-focused:
632
+ choice: '1px solid var(--color-primary)'
581
633
 
582
634
  borderColors:
583
635
  label: Border Colors
@@ -692,7 +744,7 @@ decisionGroupsByTheme:
692
744
  decisions:
693
745
  border-radius-for-button-as-big:
694
746
  choice: border-radius-6
695
- border-radius-for-button-as-small:
747
+ border-radius-for-button-as-medium:
696
748
  choice: border-radius-4
697
749
  border-radius-for-button-as-icon-as-big:
698
750
  choice: border-radius-6
@@ -762,6 +814,8 @@ decisionGroupsByTheme:
762
814
  choice: shadow-9
763
815
  box-shadow-for-select-input-when-focused:
764
816
  choice: 'inset 0 0 0 2px'
817
+ box-shadow-for-calendar-menu-when-focused:
818
+ choice: 'none'
765
819
 
766
820
  fontColors:
767
821
  label: Font Colors
@@ -770,6 +824,8 @@ decisionGroupsByTheme:
770
824
  font-color-for-text:
771
825
  description: ''
772
826
  choice: color-solid
827
+ font-color-for-text-when-disabled:
828
+ choice: color-neutral
773
829
  font-color-for-input:
774
830
  description: ''
775
831
  choice: color-solid
@@ -800,6 +856,16 @@ decisionGroupsByTheme:
800
856
  font-color-for-text-when-inverted:
801
857
  description: ''
802
858
  choice: color-surface
859
+ font-color-for-link-as-inverted:
860
+ choice: color-surface
861
+ font-color-for-link-as-primary:
862
+ choice: color-primary
863
+ font-color-for-link-as-secondary:
864
+ choice: color-solid
865
+ font-color-for-link-as-primary-when-active:
866
+ choice: color-primary-25
867
+ font-color-for-link-as-secondary-when-active:
868
+ choice: color-primary
803
869
  font-color-for-table-header:
804
870
  choice: color-surface
805
871
  font-color-for-localized-input-label:
@@ -858,6 +924,24 @@ decisionGroupsByTheme:
858
924
  choice: color-neutral-60
859
925
  font-color-for-radio-input-when-warning:
860
926
  choice: color-warning
927
+ font-color-for-flat-button-as-primary:
928
+ choice: color-primary
929
+ font-color-for-flat-button-as-primary-when-hovered:
930
+ choice: color-primary-25
931
+ font-color-for-flat-button-as-critical:
932
+ choice: color-error
933
+ font-color-for-flat-button-as-critical-when-hovered:
934
+ choice: color-error-25
935
+ font-color-for-flat-button-as-secondary:
936
+ choice: color-solid
937
+ font-color-for-flat-button-as-inverted:
938
+ choice: color-surface
939
+ font-color-for-flat-button-icon-when-disabled:
940
+ choice: color-neutral-60
941
+ font-color-for-secondary-icon-button-as-primary:
942
+ choice: color-primary
943
+ font-color-for-secondary-icon-button-as-primary-when-hovered:
944
+ choice: color-primary-25
861
945
 
862
946
  heights:
863
947
  label: Height
@@ -865,7 +949,7 @@ decisionGroupsByTheme:
865
949
  decisions:
866
950
  height-for-button-as-big:
867
951
  choice: '32px'
868
- height-for-button-as-small:
952
+ height-for-button-as-medium:
869
953
  choice: '24px'
870
954
  height-for-button-as-icon-as-big:
871
955
  choice: '32px'
@@ -1000,6 +1084,10 @@ decisionGroupsByTheme:
1000
1084
  line-height-for-text-as-detail:
1001
1085
  description: ''
1002
1086
  choice: 'inherit'
1087
+ line-height-for-select-input-options:
1088
+ choice: 'inherit'
1089
+ line-height-for-table-header:
1090
+ choice: 'inherit'
1003
1091
 
1004
1092
  fontWeights:
1005
1093
  label: Font Weights
@@ -1030,6 +1118,8 @@ decisionGroupsByTheme:
1030
1118
  choice: font-weight-400
1031
1119
  font-weight-for-table-header:
1032
1120
  choice: font-weight-400
1121
+ font-weight-for-text-as-bold:
1122
+ choice: font-weight-700
1033
1123
 
1034
1124
  margins:
1035
1125
  label: Margins
@@ -1059,7 +1149,12 @@ decisionGroupsByTheme:
1059
1149
  choice: spacing-10
1060
1150
  margin-top-for-primary-action-dropdown:
1061
1151
  choice: 'none'
1062
-
1152
+ margin-for-localized-rich-text-body-button:
1153
+ choice: 'none'
1154
+ margin-for-rich-text-divider:
1155
+ choice: '0 var(--spacing-10)'
1156
+ margin-for-rich-text-dropdown-item-label:
1157
+ choice: '0 0 0 var(--spacing-10)'
1063
1158
  paddings:
1064
1159
  label: Paddings
1065
1160
  prefix: padding
@@ -1102,8 +1197,24 @@ decisionGroupsByTheme:
1102
1197
  choice: 'var(--spacing-10) var(--spacing-20)'
1103
1198
  padding-for-localized-rich-text-input-label:
1104
1199
  choice: '0 var(--spacing-20)'
1200
+ padding-for-localized-rich-text-dropdown-button:
1201
+ choice: '3px var(--spacing-20)'
1202
+ padding-for-localized-rich-text-dropdown-item:
1203
+ choice: 'var(--spacing-10) var(--spacing-20)'
1204
+ padding-for-localized-rich-text-body-button:
1205
+ choice: 'var(--spacing-10)'
1105
1206
  padding-for-localized-input-label:
1106
1207
  choice: '0 var(--spacing-20)'
1208
+ padding-for-rich-text-input:
1209
+ choice: 'none'
1210
+ padding-for-rich-text-toolbar:
1211
+ choice: 'var(--spacing-10) 7px'
1212
+ padding-left-for-rich-text-toolbar:
1213
+ choice: '3px'
1214
+ padding-for-rich-text-editor-container:
1215
+ choice: '6px var(--spacing-20) var(--spacing-10)'
1216
+ padding-for-localized-multiline-text-input-label:
1217
+ choice: '0 var(--spacing-20)'
1107
1218
  padding-for-tag-remove-icon:
1108
1219
  choice: '0 var(--spacing-10)'
1109
1220
  padding-for-tooltip:
@@ -1136,6 +1247,10 @@ decisionGroupsByTheme:
1136
1247
  choice: '0 var(--spacing-20)'
1137
1248
  padding-for-primary-action-dropdown-icon:
1138
1249
  choice: '0 var(--spacing-10)'
1250
+ padding-for-button-as-medium:
1251
+ choice: '0 var(--spacing-20)'
1252
+ padding-for-button-as-big:
1253
+ choice: '0 var(--spacing-30)'
1139
1254
 
1140
1255
  shadows:
1141
1256
  label: Shadows
@@ -1179,6 +1294,8 @@ decisionGroupsByTheme:
1179
1294
  choice: shadow-1
1180
1295
  shadow-for-toggle-input-thumb:
1181
1296
  choice: shadow-7
1297
+ shadow-for-tag-when-hovered:
1298
+ choice: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
1182
1299
 
1183
1300
  test:
1184
1301
  alignItems:
@@ -1215,9 +1332,9 @@ decisionGroupsByTheme:
1215
1332
  background-color-for-button-when-disabled:
1216
1333
  choice: color-neutral-95
1217
1334
  background-color-for-table-cell-when-hovered:
1218
- choice: color-neutral-95
1335
+ choice: color-neutral-98
1219
1336
  background-color-for-table-header:
1220
- choice: color-surface
1337
+ choice: color-neutral-95
1221
1338
  background-color-for-collapsible-panel-header-icon-when-disabled:
1222
1339
  choice: color-surface
1223
1340
  background-color-for-input-when-hovered:
@@ -1243,6 +1360,16 @@ decisionGroupsByTheme:
1243
1360
  choice: color-neutral-95
1244
1361
  background-color-for-localized-input-label-when-disabled:
1245
1362
  choice: color-neutral-95
1363
+ background-color-for-localized-rich-text-body-button-when-active:
1364
+ choice: color-accent-20
1365
+ background-color-for-localized-rich-text-body-button:
1366
+ choice: color-neutral-95
1367
+ background-color-for-rich-text-dropdown-when-hovered:
1368
+ choice: color-neutral-95
1369
+ background-color-for-rich-text-more-styles-dropdown-when-hovered:
1370
+ choice: color-info-95
1371
+ background-color-for-rich-text-button:
1372
+ choice: color-accent-20
1246
1373
  background-color-for-tooltip:
1247
1374
  choice: color-accent-10
1248
1375
  background-color-for-view-switcher-when-disabled:
@@ -1297,6 +1424,8 @@ decisionGroupsByTheme:
1297
1424
  choice: color-accent-90
1298
1425
  background-color-for-toggle-input-thumb-when-checked-and-disabled:
1299
1426
  choice: color-accent-60
1427
+ background-color-for-tag-when-hovered:
1428
+ choice: color-neutral-90
1300
1429
 
1301
1430
  borders:
1302
1431
  label: Borders
@@ -1318,6 +1447,8 @@ decisionGroupsByTheme:
1318
1447
  choice: '1px solid var(--color-neutral-85)'
1319
1448
  border-for-radio-input-option:
1320
1449
  choice: border-width-2
1450
+ border-for-calendar-menu-when-focused:
1451
+ choice: 'none'
1321
1452
 
1322
1453
  borderColors:
1323
1454
  label: Border Colors
@@ -1367,6 +1498,8 @@ decisionGroupsByTheme:
1367
1498
  choice: color-surface
1368
1499
  border-color-for-tag:
1369
1500
  choice: color-neutral
1501
+ border-color-for-tag-when-focused:
1502
+ choice: color-neutral
1370
1503
  border-color-for-tag-when-hovered:
1371
1504
  choice: color-neutral
1372
1505
  border-color-for-content-notification-when-error:
@@ -1414,7 +1547,7 @@ decisionGroupsByTheme:
1414
1547
  decisions:
1415
1548
  border-radius-for-button-as-big:
1416
1549
  choice: border-radius-4
1417
- border-radius-for-button-as-small:
1550
+ border-radius-for-button-as-medium:
1418
1551
  choice: border-radius-4
1419
1552
  border-radius-for-button-as-icon-as-big:
1420
1553
  choice: border-radius-4
@@ -1472,13 +1605,17 @@ decisionGroupsByTheme:
1472
1605
  choice: shadow-0
1473
1606
  box-shadow-for-select-input-when-focused:
1474
1607
  choice: 'inset 0 0 0 1px'
1608
+ box-shadow-for-calendar-menu-when-focused:
1609
+ choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
1475
1610
 
1476
1611
  fontColors:
1477
1612
  label: Font Colors
1478
1613
  prefix: font-color
1479
1614
  decisions:
1615
+ font-color-for-text-when-disabled:
1616
+ choice: color-neutral-60
1480
1617
  font-color-for-table-header:
1481
- choice: color-neutral-40
1618
+ choice: color-solid
1482
1619
  font-color-for-input-when-readonly:
1483
1620
  choice: color-neutral-40
1484
1621
  font-color-for-tag-remove-icon:
@@ -1523,6 +1660,18 @@ decisionGroupsByTheme:
1523
1660
  choice: color-neutral-60
1524
1661
  font-color-for-checkbox-input-label-when-readonly:
1525
1662
  choice: color-neutral-40
1663
+ font-color-for-flat-button-as-primary:
1664
+ choice: color-primary-25
1665
+ font-color-for-flat-button-as-primary-when-hovered:
1666
+ choice: color-primary
1667
+ font-color-for-link-as-primary:
1668
+ choice: color-primary-25
1669
+ font-color-for-link-as-primary-when-active:
1670
+ choice: color-primary
1671
+ font-color-for-secondary-icon-button-as-primary:
1672
+ choice: color-primary-25
1673
+ font-color-for-secondary-icon-button-as-primary-when-hovered:
1674
+ choice: color-primary
1526
1675
 
1527
1676
  fontSizes:
1528
1677
  label: Font Sizes
@@ -1590,6 +1739,10 @@ decisionGroupsByTheme:
1590
1739
  line-height-for-text-as-detail:
1591
1740
  description: ''
1592
1741
  choice: line-height-20
1742
+ line-height-for-select-input-options:
1743
+ choice: line-height-40
1744
+ line-height-for-table-header:
1745
+ choice: '26px'
1593
1746
 
1594
1747
  fontWeights:
1595
1748
  label: Font Weights
@@ -1620,6 +1773,8 @@ decisionGroupsByTheme:
1620
1773
  choice: font-weight-500
1621
1774
  font-weight-for-table-header:
1622
1775
  choice: font-weight-600
1776
+ font-weight-for-text-as-bold:
1777
+ choice: font-weight-600
1623
1778
 
1624
1779
  heights:
1625
1780
  label: Heights
@@ -1627,7 +1782,7 @@ decisionGroupsByTheme:
1627
1782
  decisions:
1628
1783
  height-for-button-as-big:
1629
1784
  choice: '40px'
1630
- height-for-button-as-small:
1785
+ height-for-button-as-medium:
1631
1786
  choice: '32px'
1632
1787
  height-for-button-as-icon-as-big:
1633
1788
  choice: '40px'
@@ -1701,7 +1856,12 @@ decisionGroupsByTheme:
1701
1856
  choice: spacing-20
1702
1857
  margin-top-for-primary-action-dropdown:
1703
1858
  choice: spacing-20
1704
-
1859
+ margin-for-localized-rich-text-body-button:
1860
+ choice: '0 2px var(--spacing-20) 2px'
1861
+ margin-for-rich-text-divider:
1862
+ choice: 'var(--spacing-10) 2px'
1863
+ margin-for-rich-text-dropdown-item-label:
1864
+ choice: '0 0 0 var(--spacing-20)'
1705
1865
  paddings:
1706
1866
  label: Paddings
1707
1867
  prefix: padding
@@ -1743,7 +1903,21 @@ decisionGroupsByTheme:
1743
1903
  padding-for-multiline-input:
1744
1904
  choice: spacing-20
1745
1905
  padding-for-localized-rich-text-input-label:
1746
- choice: spacing-20
1906
+ choice: 'var(--spacing-20) 12px'
1907
+ padding-for-localized-rich-text-dropdown-button:
1908
+ choice: '5px var(--spacing-20)'
1909
+ padding-for-localized-rich-text-dropdown-item:
1910
+ choice: 'var(--spacing-20) var(--spacing-30)'
1911
+ padding-for-localized-rich-text-body-button:
1912
+ choice: 'var(--spacing-20)'
1913
+ padding-for-rich-text-input:
1914
+ choice: 'var(--spacing-20) var(--spacing-30)'
1915
+ padding-for-rich-text-toolbar:
1916
+ choice: 'none'
1917
+ padding-left-for-rich-text-toolbar:
1918
+ choice: 'none'
1919
+ padding-for-rich-text-editor-container:
1920
+ choice: 'var(--spacing-20) 0 0'
1747
1921
  padding-for-localized-input-label:
1748
1922
  choice: '0 12px'
1749
1923
  padding-for-tag-remove-icon:
@@ -1778,6 +1952,10 @@ decisionGroupsByTheme:
1778
1952
  choice: '0 var(--spacing-30)'
1779
1953
  padding-for-primary-action-dropdown-icon:
1780
1954
  choice: '0 var(--spacing-20)'
1955
+ padding-for-button-as-medium:
1956
+ choice: '0 var(--spacing-30)'
1957
+ padding-for-button-as-big:
1958
+ choice: '0 var(--spacing-30)'
1781
1959
 
1782
1960
  shadows:
1783
1961
  label: Shadows
@@ -1817,6 +1995,8 @@ decisionGroupsByTheme:
1817
1995
  choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
1818
1996
  shadow-for-toggle-input-thumb:
1819
1997
  choice: '0px 1px 5px rgba(0, 0, 0, 0.2)'
1998
+ shadow-for-tag-when-hovered:
1999
+ choice: shadow-0
1820
2000
 
1821
2001
  # These tokens are deprecated as they don't follow our naming patterns.
1822
2002
  # Ideally they should be replaced with new tokens and not be used anymore.
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": "15.13.2",
4
+ "version": "15.14.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,40 +24,40 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.20.13",
26
26
  "@babel/runtime-corejs3": "^7.20.13",
27
- "@commercetools-uikit/accessible-hidden": "15.13.2",
28
- "@commercetools-uikit/avatar": "15.13.2",
29
- "@commercetools-uikit/buttons": "15.13.2",
30
- "@commercetools-uikit/card": "15.13.2",
31
- "@commercetools-uikit/collapsible": "15.13.2",
32
- "@commercetools-uikit/collapsible-motion": "15.13.2",
33
- "@commercetools-uikit/collapsible-panel": "15.13.2",
34
- "@commercetools-uikit/constraints": "15.13.2",
35
- "@commercetools-uikit/data-table": "15.13.2",
36
- "@commercetools-uikit/data-table-manager": "15.13.2",
37
- "@commercetools-uikit/design-system": "15.13.2",
38
- "@commercetools-uikit/field-errors": "15.13.2",
39
- "@commercetools-uikit/field-label": "15.13.2",
40
- "@commercetools-uikit/fields": "15.13.2",
41
- "@commercetools-uikit/grid": "15.13.2",
42
- "@commercetools-uikit/hooks": "15.13.2",
43
- "@commercetools-uikit/i18n": "15.13.2",
44
- "@commercetools-uikit/icons": "15.13.2",
45
- "@commercetools-uikit/inputs": "15.13.2",
46
- "@commercetools-uikit/label": "15.13.2",
47
- "@commercetools-uikit/link": "15.13.2",
48
- "@commercetools-uikit/loading-spinner": "15.13.2",
49
- "@commercetools-uikit/messages": "15.13.2",
50
- "@commercetools-uikit/notifications": "15.13.2",
51
- "@commercetools-uikit/pagination": "15.13.2",
52
- "@commercetools-uikit/primary-action-dropdown": "15.13.2",
53
- "@commercetools-uikit/selectable-search-input": "15.13.2",
54
- "@commercetools-uikit/spacings": "15.13.2",
55
- "@commercetools-uikit/stamp": "15.13.2",
56
- "@commercetools-uikit/tag": "15.13.2",
57
- "@commercetools-uikit/text": "15.13.2",
58
- "@commercetools-uikit/tooltip": "15.13.2",
59
- "@commercetools-uikit/utils": "15.13.2",
60
- "@commercetools-uikit/view-switcher": "15.13.2"
27
+ "@commercetools-uikit/accessible-hidden": "15.14.0",
28
+ "@commercetools-uikit/avatar": "15.14.0",
29
+ "@commercetools-uikit/buttons": "15.14.0",
30
+ "@commercetools-uikit/card": "15.14.0",
31
+ "@commercetools-uikit/collapsible": "15.14.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.14.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.14.0",
34
+ "@commercetools-uikit/constraints": "15.14.0",
35
+ "@commercetools-uikit/data-table": "15.14.0",
36
+ "@commercetools-uikit/data-table-manager": "15.14.0",
37
+ "@commercetools-uikit/design-system": "15.14.0",
38
+ "@commercetools-uikit/field-errors": "15.14.0",
39
+ "@commercetools-uikit/field-label": "15.14.0",
40
+ "@commercetools-uikit/fields": "15.14.0",
41
+ "@commercetools-uikit/grid": "15.14.0",
42
+ "@commercetools-uikit/hooks": "15.14.0",
43
+ "@commercetools-uikit/i18n": "15.14.0",
44
+ "@commercetools-uikit/icons": "15.14.0",
45
+ "@commercetools-uikit/inputs": "15.14.0",
46
+ "@commercetools-uikit/label": "15.14.0",
47
+ "@commercetools-uikit/link": "15.14.0",
48
+ "@commercetools-uikit/loading-spinner": "15.14.0",
49
+ "@commercetools-uikit/messages": "15.14.0",
50
+ "@commercetools-uikit/notifications": "15.14.0",
51
+ "@commercetools-uikit/pagination": "15.14.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.14.0",
53
+ "@commercetools-uikit/selectable-search-input": "15.14.0",
54
+ "@commercetools-uikit/spacings": "15.14.0",
55
+ "@commercetools-uikit/stamp": "15.14.0",
56
+ "@commercetools-uikit/tag": "15.14.0",
57
+ "@commercetools-uikit/text": "15.14.0",
58
+ "@commercetools-uikit/tooltip": "15.14.0",
59
+ "@commercetools-uikit/utils": "15.14.0",
60
+ "@commercetools-uikit/view-switcher": "15.14.0"
61
61
  },
62
62
  "devDependencies": {
63
63
  "moment": "2.29.4",