@commercetools-frontend/ui-kit 15.13.0 → 15.13.2

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.
@@ -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.0";
83
+ var version = "15.13.2";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -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.0";
83
+ var version = "15.13.2";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -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.0";
36
+ var version = "15.13.2";
37
37
 
38
38
  export { version };
@@ -16,6 +16,7 @@
16
16
  --color-accent-20: hsl(195, 35.2941176471%, 20%);
17
17
  --color-accent-30: hsl(195, 35.2941176471%, 30%);
18
18
  --color-accent-40: hsl(195, 35.2941176471%, 40%);
19
+ --color-accent-60: hsl(195, 35.2941176471%, 60%);
19
20
  --color-accent-90: hsl(195, 35.2941176471%, 90%);
20
21
  --color-accent-95: hsl(195, 35.2941176471%, 95%);
21
22
  --color-accent-98: hsl(195, 35.2941176471%, 98%);
@@ -183,12 +184,13 @@
183
184
  --background-color-for-avatar: hsl(0, 0%, 60%);
184
185
  --background-color-for-avatar-when-highlighted: #ccc;
185
186
  --background-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 85%);
186
- --background-color-for-localized-multiline-text-input-label: hsl(
187
+ --background-color-for-localized-input-label: hsl(195, 35.2941176471%, 98%);
188
+ --background-color-for-localized-input-label-when-readonly: hsl(
187
189
  195,
188
190
  35.2941176471%,
189
- 98%
191
+ 95%
190
192
  );
191
- --background-color-for-localized-multiline-text-input-label-when-disabled: hsl(
193
+ --background-color-for-localized-input-label-when-disabled: hsl(
192
194
  195,
193
195
  35.2941176471%,
194
196
  98%
@@ -215,6 +217,27 @@
215
217
  --background-color-for-checkbox-input-icon-when-readonly: #fff;
216
218
  --background-color-for-checkbox-input-icon-when-error: #fff;
217
219
  --background-color-for-checkbox-input-icon-when-hovered: #fff;
220
+ --background-color-for-primary-action-dropdown-when-active: hsl(0, 0%, 95%);
221
+ --background-color-for-primary-action-dropdown-when-disabled: hsl(
222
+ 195,
223
+ 35.2941176471%,
224
+ 98%
225
+ );
226
+ --background-color-for-toggle-input-track: hsl(0, 0%, 60%);
227
+ --background-color-for-toggle-input-track-when-disabled: #ccc;
228
+ --background-color-for-toggle-input-thumb-when-disabled: hsl(
229
+ 195,
230
+ 35.2941176471%,
231
+ 95%
232
+ );
233
+ --background-color-for-toggle-input-track-when-checked: #00b39e;
234
+ --background-color-for-toggle-input-thumb-when-checked: #fff;
235
+ --background-color-for-toggle-input-track-when-checked-and-disabled: hsl(
236
+ 172.9608938547486,
237
+ 100%,
238
+ 25%
239
+ );
240
+ --background-color-for-toggle-input-thumb-when-checked-and-disabled: #ccc;
218
241
  --border-for-button-as-secondary: none;
219
242
  --border-for-button-as-secondary-when-hovered: none;
220
243
  --border-for-button-as-secondary-when-active: none;
@@ -249,8 +272,8 @@
249
272
  --border-color-for-stamp-as-information: #078cdf;
250
273
  --border-color-for-stamp-as-primary: hsl(172.9608938547486, 100%, 25%);
251
274
  --border-color-for-stamp-as-secondary: hsl(0, 0%, 60%);
252
- --border-color-for-localized-multiline-text-input-label: #ccc;
253
- --border-color-for-localized-multiline-text-input-label-when-readonly: #ccc;
275
+ --border-color-for-localized-input-label: #ccc;
276
+ --border-color-for-localized-input-label-when-readonly: #ccc;
254
277
  --border-color-for-content-notification-when-error: #e60050;
255
278
  --border-color-for-content-notification-when-info: #078cdf;
256
279
  --border-color-for-content-notification-when-warning: #f16d0e;
@@ -269,6 +292,7 @@
269
292
  --border-color-for-radio-input-when-readonly: #ccc;
270
293
  --border-color-for-radio-input-when-checked: #ccc;
271
294
  --border-color-for-radio-input-when-focused: #00b39e;
295
+ --border-color-for-primary-action-dropdown-menu: #ccc;
272
296
  --border-radius-for-button-as-big: 6px;
273
297
  --border-radius-for-button-as-small: 4px;
274
298
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -284,6 +308,11 @@
284
308
  var(--border-radius-6) 0;
285
309
  --border-radius-for-content-notification-icon: var(--border-radius-6) 0 0
286
310
  var(--border-radius-6);
311
+ --border-radius-for-primary-action-dropdown: var(--border-radius-6) 0 0
312
+ var(--border-radius-6);
313
+ --border-radius-for-primary-action-dropdown-icon: 0 var(--border-radius-6)
314
+ var(--border-radius-6) 0;
315
+ --border-radius-for-primary-action-dropdown-menu: 6px;
287
316
  --border-width-for-input: 1px;
288
317
  --border-width-for-input-when-warning: 1px;
289
318
  --border-width-for-input-when-error: 1px;
@@ -293,6 +322,7 @@
293
322
  --border-width-for-content-notification-icon: 0px;
294
323
  --border-left-width-for-content-notification: 1px;
295
324
  --border-width-for-checkbox-input-icon: 1px;
325
+ --border-for-primary-action-dropdown-icon: 0px 0px 0px 1px;
296
326
  --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
297
327
  --box-shadow-for-view-switcher: 0 1px 1px 0 rgba(0, 0, 0, 0.24),
298
328
  0 -1px 1px 0 rgba(0, 0, 0, 0.12);
@@ -313,7 +343,7 @@
313
343
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
314
344
  --font-color-for-text-when-inverted: #fff;
315
345
  --font-color-for-table-header: #fff;
316
- --font-color-for-localized-multiline-text-input-label: hsl(0, 0%, 60%);
346
+ --font-color-for-localized-input-label: hsl(0, 0%, 60%);
317
347
  --font-color-for-view-switcher: #1a1a1a;
318
348
  --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%);
319
349
  --font-color-for-view-switcher-when-selected: #1a1a1a;
@@ -352,6 +382,7 @@
352
382
  --height-for-select-input-tag: 26px;
353
383
  --height-for-radio-input-option: 16px;
354
384
  --height-for-radio-input-option-when-checked: 8px;
385
+ --height-for-primary-action-dropdown: 32px;
355
386
  --width-for-avatar-as-medium: 48px;
356
387
  --min-width-for-money-input-currency-dropdown: 72px;
357
388
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
@@ -372,7 +403,7 @@
372
403
  --font-size-for-avatar-as-small: 1rem;
373
404
  --font-size-for-avatar-as-medium: 1.5rem;
374
405
  --font-size-for-avatar-as-big: 3rem;
375
- --font-size-for-localized-multiline-text-input-label: 0.9231rem;
406
+ --font-size-for-localized-input-label: 1rem;
376
407
  --font-size-for-content-notification: 1rem;
377
408
  --font-size-for-select-input-tag: 0.9231rem;
378
409
  --icon-color-for-datetime-input-icon: #1a1a1a;
@@ -403,6 +434,8 @@
403
434
  --margin-right-for-search-input-icon: 8px;
404
435
  --margin-right-for-clear-input-icon: 4px;
405
436
  --margin-left-for-radio-input-label: 8px;
437
+ --margin-right-for-primary-action-dropdown: 4px;
438
+ --margin-top-for-primary-action-dropdown: none;
406
439
  --padding-for-stamp: var(--spacing-10) var(--spacing-20);
407
440
  --padding-for-stamp-as-condensed: 1px var(--spacing-10);
408
441
  --padding-for-tag: 5px var(--spacing-20);
@@ -423,7 +456,7 @@
423
456
  --padding-for-input: 8px;
424
457
  --padding-for-multiline-input: var(--spacing-10) var(--spacing-20);
425
458
  --padding-for-localized-rich-text-input-label: 0 var(--spacing-20);
426
- --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20);
459
+ --padding-for-localized-input-label: 0 var(--spacing-20);
427
460
  --padding-for-tag-remove-icon: 0 var(--spacing-10);
428
461
  --padding-for-tooltip: var(--spacing-10) var(--spacing-20);
429
462
  --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
@@ -439,6 +472,8 @@
439
472
  --padding-for-select-input-menu: inherit;
440
473
  --padding-for-money-input-currency-dropdown: 0 var(--spacing-20);
441
474
  --padding-for-selectable-search-input-dropdown: 0 var(--spacing-20);
475
+ --padding-for-primary-action-dropdown: 0 var(--spacing-20);
476
+ --padding-for-primary-action-dropdown-icon: 0 var(--spacing-10);
442
477
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
443
478
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
444
479
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -461,6 +496,18 @@
461
496
  0 1px 4.75px rgba(0, 0, 0, 0.12);
462
497
  --shadow-for-select-input-menu: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
463
498
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
499
+ --shadow-for-primary-action-dropdown: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
500
+ 0 1px 1px 0 rgba(0, 0, 0, 0.24);
501
+ --shadow-for-primary-action-dropdown-when-hovered: 0 1px 9.5px 0
502
+ rgba(0, 0, 0, 0.12),
503
+ 0 2px 4px 0 rgba(0, 0, 0, 0.24);
504
+ --shadow-for-primary-action-dropdown-when-active: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
505
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
506
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
507
+ --shadow-for-primary-action-dropdown-menu: 0 1px 3px rgba(0, 0, 0, 0.12),
508
+ 0 1px 2px rgba(0, 0, 0, 0.24);
509
+ --shadow-for-toggle-input-thumb: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
510
+ 0 1px 1px 0 rgba(0, 0, 0, 0.24);
464
511
  --font-size-m: 1rem;
465
512
  --big-button-height: 32px;
466
513
  --small-button-height: 24px;
@@ -471,5 +518,4 @@
471
518
  --shadow-box-tag-hover: 0 1px 3px rgba(0, 0, 0, 0.12),
472
519
  0 1px 2px rgba(0, 0, 0, 0.24);
473
520
  --size-height-tag: 26px;
474
- --standard-input-height: 32px;
475
521
  }
@@ -9,6 +9,7 @@
9
9
  "--color-accent-20": "hsl(195, 35.2941176471%, 20%)",
10
10
  "--color-accent-30": "hsl(195, 35.2941176471%, 30%)",
11
11
  "--color-accent-40": "hsl(195, 35.2941176471%, 40%)",
12
+ "--color-accent-60": "hsl(195, 35.2941176471%, 60%)",
12
13
  "--color-accent-90": "hsl(195, 35.2941176471%, 90%)",
13
14
  "--color-accent-95": "hsl(195, 35.2941176471%, 95%)",
14
15
  "--color-accent-98": "hsl(195, 35.2941176471%, 98%)",
@@ -155,8 +156,9 @@
155
156
  "--background-color-for-avatar": "hsl(0, 0%, 60%)",
156
157
  "--background-color-for-avatar-when-highlighted": "#ccc",
157
158
  "--background-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 85%)",
158
- "--background-color-for-localized-multiline-text-input-label": "hsl(195, 35.2941176471%, 98%)",
159
- "--background-color-for-localized-multiline-text-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)",
159
+ "--background-color-for-localized-input-label": "hsl(195, 35.2941176471%, 98%)",
160
+ "--background-color-for-localized-input-label-when-readonly": "hsl(195, 35.2941176471%, 95%)",
161
+ "--background-color-for-localized-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)",
160
162
  "--background-color-for-tooltip": "#213c45",
161
163
  "--background-color-for-view-switcher": "#fff",
162
164
  "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)",
@@ -175,6 +177,15 @@
175
177
  "--background-color-for-checkbox-input-icon-when-readonly": "#fff",
176
178
  "--background-color-for-checkbox-input-icon-when-error": "#fff",
177
179
  "--background-color-for-checkbox-input-icon-when-hovered": "#fff",
180
+ "--background-color-for-primary-action-dropdown-when-active": "hsl(0, 0%, 95%)",
181
+ "--background-color-for-primary-action-dropdown-when-disabled": "hsl(195, 35.2941176471%, 98%)",
182
+ "--background-color-for-toggle-input-track": "hsl(0, 0%, 60%)",
183
+ "--background-color-for-toggle-input-track-when-disabled": "#ccc",
184
+ "--background-color-for-toggle-input-thumb-when-disabled": "hsl(195, 35.2941176471%, 95%)",
185
+ "--background-color-for-toggle-input-track-when-checked": "#00b39e",
186
+ "--background-color-for-toggle-input-thumb-when-checked": "#fff",
187
+ "--background-color-for-toggle-input-track-when-checked-and-disabled": "hsl(172.9608938547486, 100%, 25%)",
188
+ "--background-color-for-toggle-input-thumb-when-checked-and-disabled": "#ccc",
178
189
  "--border-for-button-as-secondary": "none",
179
190
  "--border-for-button-as-secondary-when-hovered": "none",
180
191
  "--border-for-button-as-secondary-when-active": "none",
@@ -208,8 +219,8 @@
208
219
  "--border-color-for-stamp-as-information": "#078cdf",
209
220
  "--border-color-for-stamp-as-primary": "hsl(172.9608938547486, 100%, 25%)",
210
221
  "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 60%)",
211
- "--border-color-for-localized-multiline-text-input-label": "#ccc",
212
- "--border-color-for-localized-multiline-text-input-label-when-readonly": "#ccc",
222
+ "--border-color-for-localized-input-label": "#ccc",
223
+ "--border-color-for-localized-input-label-when-readonly": "#ccc",
213
224
  "--border-color-for-content-notification-when-error": "#e60050",
214
225
  "--border-color-for-content-notification-when-info": "#078cdf",
215
226
  "--border-color-for-content-notification-when-warning": "#f16d0e",
@@ -228,6 +239,7 @@
228
239
  "--border-color-for-radio-input-when-readonly": "#ccc",
229
240
  "--border-color-for-radio-input-when-checked": "#ccc",
230
241
  "--border-color-for-radio-input-when-focused": "#00b39e",
242
+ "--border-color-for-primary-action-dropdown-menu": "#ccc",
231
243
  "--border-radius-for-button-as-big": "6px",
232
244
  "--border-radius-for-button-as-small": "4px",
233
245
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -241,6 +253,9 @@
241
253
  "--border-radius-for-view-switcher": "6px",
242
254
  "--border-radius-for-content-notification": "0 var(--border-radius-6) var(--border-radius-6) 0",
243
255
  "--border-radius-for-content-notification-icon": "var(--border-radius-6) 0 0 var(--border-radius-6)",
256
+ "--border-radius-for-primary-action-dropdown": "var(--border-radius-6) 0 0 var(--border-radius-6)",
257
+ "--border-radius-for-primary-action-dropdown-icon": "0 var(--border-radius-6) var(--border-radius-6) 0",
258
+ "--border-radius-for-primary-action-dropdown-menu": "6px",
244
259
  "--border-width-for-input": "1px",
245
260
  "--border-width-for-input-when-warning": "1px",
246
261
  "--border-width-for-input-when-error": "1px",
@@ -250,6 +265,7 @@
250
265
  "--border-width-for-content-notification-icon": "0px",
251
266
  "--border-left-width-for-content-notification": "1px",
252
267
  "--border-width-for-checkbox-input-icon": "1px",
268
+ "--border-for-primary-action-dropdown-icon": "0px 0px 0px 1px",
253
269
  "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
254
270
  "--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)",
255
271
  "--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)",
@@ -267,7 +283,7 @@
267
283
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
268
284
  "--font-color-for-text-when-inverted": "#fff",
269
285
  "--font-color-for-table-header": "#fff",
270
- "--font-color-for-localized-multiline-text-input-label": "hsl(0, 0%, 60%)",
286
+ "--font-color-for-localized-input-label": "hsl(0, 0%, 60%)",
271
287
  "--font-color-for-view-switcher": "#1a1a1a",
272
288
  "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)",
273
289
  "--font-color-for-view-switcher-when-selected": "#1a1a1a",
@@ -306,6 +322,7 @@
306
322
  "--height-for-select-input-tag": "26px",
307
323
  "--height-for-radio-input-option": "16px",
308
324
  "--height-for-radio-input-option-when-checked": "8px",
325
+ "--height-for-primary-action-dropdown": "32px",
309
326
  "--width-for-avatar-as-medium": "48px",
310
327
  "--min-width-for-money-input-currency-dropdown": "72px",
311
328
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
@@ -326,7 +343,7 @@
326
343
  "--font-size-for-avatar-as-small": "1rem",
327
344
  "--font-size-for-avatar-as-medium": "1.5rem",
328
345
  "--font-size-for-avatar-as-big": "3rem",
329
- "--font-size-for-localized-multiline-text-input-label": "0.9231rem",
346
+ "--font-size-for-localized-input-label": "1rem",
330
347
  "--font-size-for-content-notification": "1rem",
331
348
  "--font-size-for-select-input-tag": "0.9231rem",
332
349
  "--icon-color-for-datetime-input-icon": "#1a1a1a",
@@ -357,6 +374,8 @@
357
374
  "--margin-right-for-search-input-icon": "8px",
358
375
  "--margin-right-for-clear-input-icon": "4px",
359
376
  "--margin-left-for-radio-input-label": "8px",
377
+ "--margin-right-for-primary-action-dropdown": "4px",
378
+ "--margin-top-for-primary-action-dropdown": "none",
360
379
  "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
361
380
  "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
362
381
  "--padding-for-tag": "5px var(--spacing-20)",
@@ -376,7 +395,7 @@
376
395
  "--padding-for-input": "8px",
377
396
  "--padding-for-multiline-input": "var(--spacing-10) var(--spacing-20)",
378
397
  "--padding-for-localized-rich-text-input-label": "0 var(--spacing-20)",
379
- "--padding-for-localized-multiline-text-input-label": "0 var(--spacing-20)",
398
+ "--padding-for-localized-input-label": "0 var(--spacing-20)",
380
399
  "--padding-for-tag-remove-icon": "0 var(--spacing-10)",
381
400
  "--padding-for-tooltip": "var(--spacing-10) var(--spacing-20)",
382
401
  "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)",
@@ -391,6 +410,8 @@
391
410
  "--padding-for-select-input-menu": "inherit",
392
411
  "--padding-for-money-input-currency-dropdown": "0 var(--spacing-20)",
393
412
  "--padding-for-selectable-search-input-dropdown": "0 var(--spacing-20)",
413
+ "--padding-for-primary-action-dropdown": "0 var(--spacing-20)",
414
+ "--padding-for-primary-action-dropdown-icon": "0 var(--spacing-10)",
394
415
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
395
416
  "--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)",
396
417
  "--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)",
@@ -404,6 +425,11 @@
404
425
  "--shadow-for-input-when-warning": "none",
405
426
  "--shadow-for-tooltip": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)",
406
427
  "--shadow-for-select-input-menu": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
428
+ "--shadow-for-primary-action-dropdown": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
429
+ "--shadow-for-primary-action-dropdown-when-hovered": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
430
+ "--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
+ "--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
+ "--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)",
407
433
  "--font-size-m": "1rem",
408
434
  "--big-button-height": "32px",
409
435
  "--small-button-height": "24px",
@@ -412,6 +438,5 @@
412
438
  "--font-size-default": "1rem",
413
439
  "--font-size-small": "0.9231rem",
414
440
  "--shadow-box-tag-hover": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
415
- "--size-height-tag": "26px",
416
- "--standard-input-height": "32px"
441
+ "--size-height-tag": "26px"
417
442
  }
@@ -46,6 +46,7 @@ choiceGroupsByTheme:
46
46
  color-accent-20: 'hsl(195, 35.2941176471%, 20%)'
47
47
  color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
48
48
  color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
49
+ color-accent-60: 'hsl(195, 35.2941176471%, 60%)'
49
50
  color-accent-90: 'hsl(195, 35.2941176471%, 90%)'
50
51
  color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
51
52
  color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
@@ -261,6 +262,8 @@ states:
261
262
  description: 'When the element is condensed'
262
263
  checked:
263
264
  description: 'When the element is checked'
265
+ checked-and-disabled:
266
+ description: 'When the element is checked and disabled'
264
267
 
265
268
  variants:
266
269
  h1:
@@ -357,10 +360,10 @@ componentGroups:
357
360
  description: 'Avatar elements'
358
361
  multiline-input:
359
362
  description: 'Multiline input elements'
363
+ localized-input-label:
364
+ description: 'Localized multiline text input label elements'
360
365
  localized-rich-text-input-label:
361
366
  description: 'Localized rich text input label elements'
362
- localized-multiline-text-input-label:
363
- description: 'Localized multiline text input label elements'
364
367
  tooltip:
365
368
  description: 'Tooltip elements'
366
369
  view-switcher:
@@ -405,6 +408,16 @@ componentGroups:
405
408
  description: 'Selectable select input dropdown elements'
406
409
  selectable-search-input-dropdown:
407
410
  description: 'Selectable search input dropdown elements'
411
+ primary-action-dropdown:
412
+ description: 'Primary action dropdown elements'
413
+ primary-action-dropdown-icon:
414
+ description: 'Primary action dropdown icon elements'
415
+ primary-action-dropdown-menu:
416
+ description: 'Primary action dropdown menu elements'
417
+ toggle-input-track:
418
+ description: 'Toggle input track pseudo-elements'
419
+ toggle-input-thumb:
420
+ description: 'Toggle input thumb pseudo-elements'
408
421
 
409
422
  decisionGroupsByTheme:
410
423
  default:
@@ -484,11 +497,11 @@ decisionGroupsByTheme:
484
497
  background-color-for-stamp-as-positive:
485
498
  description: ''
486
499
  choice: color-primary-85
487
- background-color-for-localized-multiline-text-input-label:
488
- description: ''
500
+ background-color-for-localized-input-label:
489
501
  choice: color-accent-98
490
- background-color-for-localized-multiline-text-input-label-when-disabled:
491
- description: ''
502
+ background-color-for-localized-input-label-when-readonly:
503
+ choice: color-accent-95
504
+ background-color-for-localized-input-label-when-disabled:
492
505
  choice: color-accent-98
493
506
  background-color-for-tooltip:
494
507
  choice: color-accent
@@ -526,6 +539,24 @@ decisionGroupsByTheme:
526
539
  choice: color-surface
527
540
  background-color-for-checkbox-input-icon-when-hovered:
528
541
  choice: color-surface
542
+ background-color-for-primary-action-dropdown-when-active:
543
+ choice: color-neutral-95
544
+ background-color-for-primary-action-dropdown-when-disabled:
545
+ choice: color-accent-98
546
+ background-color-for-toggle-input-track:
547
+ choice: color-neutral-60
548
+ background-color-for-toggle-input-track-when-disabled:
549
+ choice: color-neutral
550
+ background-color-for-toggle-input-thumb-when-disabled:
551
+ choice: color-accent-95
552
+ background-color-for-toggle-input-track-when-checked:
553
+ choice: color-primary
554
+ background-color-for-toggle-input-thumb-when-checked:
555
+ choice: color-surface
556
+ background-color-for-toggle-input-track-when-checked-and-disabled:
557
+ choice: color-primary-25
558
+ background-color-for-toggle-input-thumb-when-checked-and-disabled:
559
+ choice: color-neutral
529
560
 
530
561
  borders:
531
562
  label: Borders
@@ -612,9 +643,9 @@ decisionGroupsByTheme:
612
643
  choice: color-primary-25
613
644
  border-color-for-stamp-as-secondary:
614
645
  choice: color-neutral-60
615
- border-color-for-localized-multiline-text-input-label:
646
+ border-color-for-localized-input-label:
616
647
  choice: color-neutral
617
- border-color-for-localized-multiline-text-input-label-when-readonly:
648
+ border-color-for-localized-input-label-when-readonly:
618
649
  choice: color-neutral
619
650
  border-color-for-content-notification-when-error:
620
651
  choice: color-error
@@ -652,6 +683,8 @@ decisionGroupsByTheme:
652
683
  choice: color-neutral
653
684
  border-color-for-radio-input-when-focused:
654
685
  choice: color-primary
686
+ border-color-for-primary-action-dropdown-menu:
687
+ choice: color-neutral
655
688
 
656
689
  borderRadiuses:
657
690
  label: Border Radius
@@ -685,6 +718,12 @@ decisionGroupsByTheme:
685
718
  choice: '0 var(--border-radius-6) var(--border-radius-6) 0'
686
719
  border-radius-for-content-notification-icon:
687
720
  choice: 'var(--border-radius-6) 0 0 var(--border-radius-6)'
721
+ border-radius-for-primary-action-dropdown:
722
+ choice: 'var(--border-radius-6) 0 0 var(--border-radius-6)'
723
+ border-radius-for-primary-action-dropdown-icon:
724
+ choice: '0 var(--border-radius-6) var(--border-radius-6) 0'
725
+ border-radius-for-primary-action-dropdown-menu:
726
+ choice: border-radius-6
688
727
 
689
728
  borderWidths:
690
729
  label: Border width
@@ -708,6 +747,8 @@ decisionGroupsByTheme:
708
747
  choice: border-width-1
709
748
  border-width-for-checkbox-input-icon:
710
749
  choice: border-width-1
750
+ border-for-primary-action-dropdown-icon:
751
+ choice: '0px 0px 0px 1px'
711
752
 
712
753
  boxShadows:
713
754
  label: Box shadows
@@ -761,7 +802,7 @@ decisionGroupsByTheme:
761
802
  choice: color-surface
762
803
  font-color-for-table-header:
763
804
  choice: color-surface
764
- font-color-for-localized-multiline-text-input-label:
805
+ font-color-for-localized-input-label:
765
806
  choice: color-neutral-60
766
807
  font-color-for-view-switcher:
767
808
  choice: color-solid
@@ -844,6 +885,8 @@ decisionGroupsByTheme:
844
885
  choice: '16px'
845
886
  height-for-radio-input-option-when-checked:
846
887
  choice: '8px'
888
+ height-for-primary-action-dropdown:
889
+ choice: '32px'
847
890
 
848
891
  widths:
849
892
  label: Width
@@ -916,8 +959,8 @@ decisionGroupsByTheme:
916
959
  choice: font-size-60
917
960
  font-size-for-avatar-as-big:
918
961
  choice: font-size-78
919
- font-size-for-localized-multiline-text-input-label:
920
- choice: font-size-15
962
+ font-size-for-localized-input-label:
963
+ choice: font-size-30
921
964
  font-size-for-content-notification:
922
965
  choice: font-size-30
923
966
  font-size-for-select-input-tag:
@@ -1012,6 +1055,10 @@ decisionGroupsByTheme:
1012
1055
  choice: spacing-10
1013
1056
  margin-left-for-radio-input-label:
1014
1057
  choice: spacing-20
1058
+ margin-right-for-primary-action-dropdown:
1059
+ choice: spacing-10
1060
+ margin-top-for-primary-action-dropdown:
1061
+ choice: 'none'
1015
1062
 
1016
1063
  paddings:
1017
1064
  label: Paddings
@@ -1055,7 +1102,7 @@ decisionGroupsByTheme:
1055
1102
  choice: 'var(--spacing-10) var(--spacing-20)'
1056
1103
  padding-for-localized-rich-text-input-label:
1057
1104
  choice: '0 var(--spacing-20)'
1058
- padding-for-localized-multiline-text-input-label:
1105
+ padding-for-localized-input-label:
1059
1106
  choice: '0 var(--spacing-20)'
1060
1107
  padding-for-tag-remove-icon:
1061
1108
  choice: '0 var(--spacing-10)'
@@ -1085,6 +1132,10 @@ decisionGroupsByTheme:
1085
1132
  choice: '0 var(--spacing-20)'
1086
1133
  padding-for-selectable-search-input-dropdown:
1087
1134
  choice: '0 var(--spacing-20)'
1135
+ padding-for-primary-action-dropdown:
1136
+ choice: '0 var(--spacing-20)'
1137
+ padding-for-primary-action-dropdown-icon:
1138
+ choice: '0 var(--spacing-10)'
1088
1139
 
1089
1140
  shadows:
1090
1141
  label: Shadows
@@ -1118,6 +1169,16 @@ decisionGroupsByTheme:
1118
1169
  choice: shadow-15
1119
1170
  shadow-for-select-input-menu:
1120
1171
  choice: shadow-7
1172
+ shadow-for-primary-action-dropdown:
1173
+ choice: shadow-7
1174
+ shadow-for-primary-action-dropdown-when-hovered:
1175
+ choice: shadow-8
1176
+ shadow-for-primary-action-dropdown-when-active:
1177
+ choice: shadow-9
1178
+ shadow-for-primary-action-dropdown-menu:
1179
+ choice: shadow-1
1180
+ shadow-for-toggle-input-thumb:
1181
+ choice: shadow-7
1121
1182
 
1122
1183
  test:
1123
1184
  alignItems:
@@ -1176,9 +1237,11 @@ decisionGroupsByTheme:
1176
1237
  background-color-for-stamp-as-positive:
1177
1238
  description: ''
1178
1239
  choice: color-primary-95
1179
- background-color-for-localized-multiline-text-input-label:
1240
+ background-color-for-localized-input-label:
1180
1241
  choice: color-surface
1181
- background-color-for-localized-multiline-text-input-label-when-disabled:
1242
+ background-color-for-localized-input-label-when-readonly:
1243
+ choice: color-neutral-95
1244
+ background-color-for-localized-input-label-when-disabled:
1182
1245
  choice: color-neutral-95
1183
1246
  background-color-for-tooltip:
1184
1247
  choice: color-accent-10
@@ -1216,6 +1279,24 @@ decisionGroupsByTheme:
1216
1279
  choice: color-error
1217
1280
  background-color-for-checkbox-input-icon-when-hovered:
1218
1281
  choice: color-neutral-90
1282
+ background-color-for-primary-action-dropdown-when-active:
1283
+ choice: color-neutral-90
1284
+ background-color-for-primary-action-dropdown-when-disabled:
1285
+ choice: color-neutral-95
1286
+ background-color-for-toggle-input-track:
1287
+ choice: color-neutral
1288
+ background-color-for-toggle-input-track-when-disabled:
1289
+ choice: color-neutral-90
1290
+ background-color-for-toggle-input-thumb-when-disabled:
1291
+ choice: color-neutral-60
1292
+ background-color-for-toggle-input-track-when-checked:
1293
+ choice: color-primary-40
1294
+ background-color-for-toggle-input-thumb-when-checked:
1295
+ choice: color-primary-25
1296
+ background-color-for-toggle-input-track-when-checked-and-disabled:
1297
+ choice: color-accent-90
1298
+ background-color-for-toggle-input-thumb-when-checked-and-disabled:
1299
+ choice: color-accent-60
1219
1300
 
1220
1301
  borders:
1221
1302
  label: Borders
@@ -1282,8 +1363,8 @@ decisionGroupsByTheme:
1282
1363
  choice: color-primary-85
1283
1364
  border-color-for-stamp-as-secondary:
1284
1365
  choice: color-neutral-85
1285
- border-color-for-localized-multiline-text-input-label-when-readonly:
1286
- choice: color-neutral-90
1366
+ border-color-for-localized-input-label-when-readonly:
1367
+ choice: color-surface
1287
1368
  border-color-for-tag:
1288
1369
  choice: color-neutral
1289
1370
  border-color-for-tag-when-hovered:
@@ -1324,6 +1405,8 @@ decisionGroupsByTheme:
1324
1405
  choice: color-primary
1325
1406
  border-color-for-radio-input-when-focused:
1326
1407
  choice: color-neutral-60
1408
+ border-color-for-primary-action-dropdown-menu:
1409
+ choice: color-surface
1327
1410
 
1328
1411
  borderRadiuses:
1329
1412
  label: Border radiuses
@@ -1353,6 +1436,12 @@ decisionGroupsByTheme:
1353
1436
  choice: '0 var(--border-radius-4) var(--border-radius-4) 0'
1354
1437
  border-radius-for-content-notification-icon:
1355
1438
  choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
1439
+ border-radius-for-primary-action-dropdown:
1440
+ choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
1441
+ border-radius-for-primary-action-dropdown-icon:
1442
+ choice: '0 var(--border-radius-4) var(--border-radius-4) 0'
1443
+ border-radius-for-primary-action-dropdown-menu:
1444
+ choice: border-radius-4
1356
1445
 
1357
1446
  borderWidths:
1358
1447
  label: Border width
@@ -1368,6 +1457,8 @@ decisionGroupsByTheme:
1368
1457
  choice: border-width-2
1369
1458
  border-width-for-checkbox-input-icon:
1370
1459
  choice: border-width-2
1460
+ border-for-primary-action-dropdown-icon:
1461
+ choice: '1px 1px 1px 0px'
1371
1462
 
1372
1463
  boxShadows:
1373
1464
  label: Box shadows
@@ -1438,38 +1529,25 @@ decisionGroupsByTheme:
1438
1529
  prefix: font-size
1439
1530
  decisions:
1440
1531
  font-size-for-input:
1441
- description: ''
1442
1532
  choice: font-size-30
1443
1533
  font-size-for-text-as-h1:
1444
- description: ''
1445
1534
  choice: font-size-60
1446
1535
  font-size-for-text-as-h2:
1447
- description: ''
1448
1536
  choice: font-size-50
1449
1537
  font-size-for-text-as-h3:
1450
- description: ''
1451
1538
  choice: font-size-40
1452
1539
  font-size-for-text-as-h4:
1453
- description: ''
1454
1540
  choice: font-size-30
1455
1541
  font-size-for-text-as-h5:
1456
- description: ''
1457
1542
  choice: font-size-30
1458
1543
  font-size-for-text-as-body:
1459
- description: ''
1460
1544
  choice: font-size-30
1461
1545
  font-size-for-text-as-detail:
1462
- description: ''
1463
1546
  choice: font-size-20
1464
1547
  font-size-for-body:
1465
- description: ''
1466
1548
  choice: '16px'
1467
1549
  font-size-for-button:
1468
- description: ''
1469
1550
  choice: font-size-20
1470
- font-size-for-link:
1471
- description: ''
1472
- choice: 'inherit'
1473
1551
  font-size-for-stamp:
1474
1552
  choice: font-size-20
1475
1553
  font-size-for-view-switcher:
@@ -1482,7 +1560,7 @@ decisionGroupsByTheme:
1482
1560
  choice: font-size-30
1483
1561
  font-size-for-avatar-as-big:
1484
1562
  choice: font-size-80
1485
- font-size-for-localized-multiline-text-input-label:
1563
+ font-size-for-localized-input-label:
1486
1564
  choice: font-size-30
1487
1565
  font-size-for-select-input-tag:
1488
1566
  choice: font-size-30
@@ -1569,6 +1647,8 @@ decisionGroupsByTheme:
1569
1647
  choice: '18px'
1570
1648
  height-for-radio-input-option-when-checked:
1571
1649
  choice: '10px'
1650
+ height-for-primary-action-dropdown:
1651
+ choice: '40px'
1572
1652
 
1573
1653
  iconColors:
1574
1654
  label: Icon colors
@@ -1617,6 +1697,10 @@ decisionGroupsByTheme:
1617
1697
  choice: spacing-20
1618
1698
  margin-left-for-radio-input-label:
1619
1699
  choice: spacing-10
1700
+ margin-right-for-primary-action-dropdown:
1701
+ choice: spacing-20
1702
+ margin-top-for-primary-action-dropdown:
1703
+ choice: spacing-20
1620
1704
 
1621
1705
  paddings:
1622
1706
  label: Paddings
@@ -1660,7 +1744,7 @@ decisionGroupsByTheme:
1660
1744
  choice: spacing-20
1661
1745
  padding-for-localized-rich-text-input-label:
1662
1746
  choice: spacing-20
1663
- padding-for-localized-multiline-text-input-label:
1747
+ padding-for-localized-input-label:
1664
1748
  choice: '0 12px'
1665
1749
  padding-for-tag-remove-icon:
1666
1750
  choice: '0 12px'
@@ -1690,6 +1774,10 @@ decisionGroupsByTheme:
1690
1774
  choice: '0 12px'
1691
1775
  padding-for-selectable-search-input-dropdown:
1692
1776
  choice: '0 12px'
1777
+ padding-for-primary-action-dropdown:
1778
+ choice: '0 var(--spacing-30)'
1779
+ padding-for-primary-action-dropdown-icon:
1780
+ choice: '0 var(--spacing-20)'
1693
1781
 
1694
1782
  shadows:
1695
1783
  label: Shadows
@@ -1719,6 +1807,16 @@ decisionGroupsByTheme:
1719
1807
  choice: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)'
1720
1808
  shadow-for-select-input-menu:
1721
1809
  choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
1810
+ shadow-for-primary-action-dropdown:
1811
+ choice: shadow-0
1812
+ shadow-for-primary-action-dropdown-when-hovered:
1813
+ choice: shadow-0
1814
+ shadow-for-primary-action-dropdown-when-active:
1815
+ choice: shadow-0
1816
+ shadow-for-primary-action-dropdown-menu:
1817
+ choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
1818
+ shadow-for-toggle-input-thumb:
1819
+ choice: '0px 1px 5px rgba(0, 0, 0, 0.2)'
1722
1820
 
1723
1821
  # These tokens are deprecated as they don't follow our naming patterns.
1724
1822
  # Ideally they should be replaced with new tokens and not be used anymore.
@@ -1741,4 +1839,3 @@ plainTokens:
1741
1839
  font-size-small: 0.9231rem
1742
1840
  shadow-box-tag-hover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
1743
1841
  size-height-tag: 26px
1744
- standard-input-height: 32px
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.0",
4
+ "version": "15.13.2",
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.0",
28
- "@commercetools-uikit/avatar": "15.13.0",
29
- "@commercetools-uikit/buttons": "15.13.0",
30
- "@commercetools-uikit/card": "15.13.0",
31
- "@commercetools-uikit/collapsible": "15.13.0",
32
- "@commercetools-uikit/collapsible-motion": "15.13.0",
33
- "@commercetools-uikit/collapsible-panel": "15.13.0",
34
- "@commercetools-uikit/constraints": "15.13.0",
35
- "@commercetools-uikit/data-table": "15.13.0",
36
- "@commercetools-uikit/data-table-manager": "15.13.0",
37
- "@commercetools-uikit/design-system": "15.13.0",
38
- "@commercetools-uikit/field-errors": "15.13.0",
39
- "@commercetools-uikit/field-label": "15.13.0",
40
- "@commercetools-uikit/fields": "15.13.0",
41
- "@commercetools-uikit/grid": "15.13.0",
42
- "@commercetools-uikit/hooks": "15.13.0",
43
- "@commercetools-uikit/i18n": "15.13.0",
44
- "@commercetools-uikit/icons": "15.13.0",
45
- "@commercetools-uikit/inputs": "15.13.0",
46
- "@commercetools-uikit/label": "15.13.0",
47
- "@commercetools-uikit/link": "15.13.0",
48
- "@commercetools-uikit/loading-spinner": "15.13.0",
49
- "@commercetools-uikit/messages": "15.13.0",
50
- "@commercetools-uikit/notifications": "15.13.0",
51
- "@commercetools-uikit/pagination": "15.13.0",
52
- "@commercetools-uikit/primary-action-dropdown": "15.13.0",
53
- "@commercetools-uikit/selectable-search-input": "15.13.0",
54
- "@commercetools-uikit/spacings": "15.13.0",
55
- "@commercetools-uikit/stamp": "15.13.0",
56
- "@commercetools-uikit/tag": "15.13.0",
57
- "@commercetools-uikit/text": "15.13.0",
58
- "@commercetools-uikit/tooltip": "15.13.0",
59
- "@commercetools-uikit/utils": "15.13.0",
60
- "@commercetools-uikit/view-switcher": "15.13.0"
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"
61
61
  },
62
62
  "devDependencies": {
63
63
  "moment": "2.29.4",