@commercetools-frontend/ui-kit 15.13.2 → 15.14.1

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 (10) 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 +192 -18
  7. package/materials/internals/story/samplers.js +82 -0
  8. package/materials/internals/story/shared-components.js +270 -0
  9. package/materials/internals/tokens.story.js +163 -660
  10. package/package.json +36 -36
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.1";
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.1";
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.1";
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",