@commercetools-frontend/ui-kit 15.9.0 → 15.10.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 +37 -2
  5. package/materials/custom-properties.json +28 -2
  6. package/materials/internals/definition.yaml +120 -2
  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.9.0";
83
+ var version = "15.10.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.9.0";
83
+ var version = "15.10.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.9.0";
36
+ var version = "15.10.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -159,8 +159,8 @@
159
159
  --background-color-for-input: #fff;
160
160
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
161
161
  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
162
- --background-color-for-input-when-hovered: unset;
163
- --background-color-for-input-when-focused: unset;
162
+ --background-color-for-input-when-hovered: #fff;
163
+ --background-color-for-input-when-focused: #fff;
164
164
  --background-color-for-table-cell-when-hovered: hsl(0, 0%, 90%);
165
165
  --background-color-for-table-header: #213c45;
166
166
  --background-color-for-tag: hsl(0, 0%, 95%);
@@ -188,12 +188,22 @@
188
188
  35.2941176471%,
189
189
  98%
190
190
  );
191
+ --background-color-for-tooltip: #213c45;
192
+ --background-color-for-view-switcher: #fff;
193
+ --background-color-for-view-switcher-when-disabled: hsl(
194
+ 195,
195
+ 35.2941176471%,
196
+ 98%
197
+ );
198
+ --background-color-for-view-switcher-when-selected: hsl(0, 0%, 95%);
199
+ --background-color-for-view-switcher-when-hovered: hsl(0, 0%, 90%);
191
200
  --border-for-button-as-secondary: none;
192
201
  --border-for-button-as-secondary-when-hovered: none;
193
202
  --border-for-button-as-secondary-when-active: none;
194
203
  --border-for-card-when-raised: none;
195
204
  --border-for-collapsible-panel-header-icon-when-disabled: 1px solid
196
205
  var(--color-neutral);
206
+ --border-for-view-switcher: none;
197
207
  --border-color-for-input: hsl(0, 0%, 60%);
198
208
  --border-color-for-input-when-focused: #00b39e;
199
209
  --border-color-for-input-when-disabled: #ccc;
@@ -204,6 +214,7 @@
204
214
  --border-color-for-tag: hsl(0, 0%, 60%);
205
215
  --border-color-for-tag-warning: #f16d0e;
206
216
  --border-color-for-tag-when-focused: #00b39e;
217
+ --border-color-for-tag-when-hovered: #f16d0e;
207
218
  --border-color-for-button-as-icon: #fff;
208
219
  --border-color-for-button-as-icon-as-info: #078cdf;
209
220
  --border-color-for-button-as-icon-as-primary: #00b39e;
@@ -230,11 +241,18 @@
230
241
  --border-radius-for-card: 6px;
231
242
  --border-radius-for-table-manager-droppable-list: 6px;
232
243
  --border-radius-for-stamp: 2px;
244
+ --border-radius-for-view-switcher: 6px;
233
245
  --border-width-for-input: 1px;
234
246
  --border-width-for-input-when-warning: 1px;
235
247
  --border-width-for-input-when-error: 1px;
236
248
  --border-width-for-input-when-focused: 1px;
249
+ --border-width-for-tag: 1px;
237
250
  --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
251
+ --box-shadow-for-view-switcher: 0 1px 1px 0 rgba(0, 0, 0, 0.24),
252
+ 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
253
+ --box-shadow-for-view-switcher-when-selected: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
254
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
255
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
238
256
  --font-color-for-text: #1a1a1a;
239
257
  --font-color-for-input: #1a1a1a;
240
258
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -242,16 +260,24 @@
242
260
  --font-color-for-input-when-readonly: hsl(0, 0%, 60%);
243
261
  --font-color-for-input-when-warning: #f16d0e;
244
262
  --font-color-for-tag: #1a1a1a;
263
+ --font-color-for-tag-remove-icon: #1a1a1a;
264
+ --font-color-for-tag-drag-icon: #1a1a1a;
265
+ --font-color-for-tag-remove-icon-when-hovered: #f16d0e;
245
266
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
246
267
  --font-color-for-text-when-inverted: #fff;
247
268
  --font-color-for-table-header: #fff;
248
269
  --font-color-for-localized-multiline-text-input-label: hsl(0, 0%, 60%);
270
+ --font-color-for-view-switcher: #1a1a1a;
271
+ --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%);
272
+ --font-color-for-view-switcher-when-selected: #1a1a1a;
249
273
  --height-for-button-as-big: 32px;
250
274
  --height-for-button-as-small: 24px;
251
275
  --height-for-button-as-icon-as-big: 32px;
252
276
  --height-for-button-as-icon-as-medium: 24px;
253
277
  --height-for-button-as-icon-as-small: 16px;
254
278
  --height-for-input: 32px;
279
+ --height-for-view-switcher: 32px;
280
+ --height-for-view-switcher-when-condensed: 24px;
255
281
  --width-for-avatar-as-medium: 48px;
256
282
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
257
283
  --font-size-for-button: 1rem;
@@ -266,6 +292,7 @@
266
292
  --font-size-for-body: 13px;
267
293
  --font-size-for-link: 1rem;
268
294
  --font-size-for-stamp: 1rem;
295
+ --font-size-for-view-switcher: 1rem;
269
296
  --font-size-for-table: 1rem;
270
297
  --font-size-for-avatar-as-small: 1rem;
271
298
  --font-size-for-avatar-as-medium: 1.5rem;
@@ -291,6 +318,7 @@
291
318
  --font-weight-for-table-header: 400;
292
319
  --margin-for-table-header: 8px;
293
320
  --margin-for-table-as-condensed: 8px;
321
+ --margin-for-view-switcher-icon: 0 var(--spacing-10) 0 0;
294
322
  --padding-for-stamp: var(--spacing-10) var(--spacing-20);
295
323
  --padding-for-stamp-as-condensed: 1px var(--spacing-10);
296
324
  --padding-for-tag: 5px var(--spacing-20);
@@ -312,6 +340,11 @@
312
340
  --padding-for-multiline-input: var(--spacing-10) var(--spacing-20);
313
341
  --padding-for-localized-rich-text-input-label: 0 var(--spacing-20);
314
342
  --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20);
343
+ --padding-for-tag-remove-icon: 0 var(--spacing-10);
344
+ --padding-for-tooltip: var(--spacing-10) var(--spacing-20);
345
+ --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
346
+ --padding-for-view-switcher-when-condensed: 0 var(--spacing-20) 0
347
+ var(--spacing-20);
315
348
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
316
349
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
317
350
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -330,6 +363,8 @@
330
363
  --shadow-for-input-when-focused: inset 0 0 0 2px var(--color-primary);
331
364
  --shadow-for-input-when-error: none;
332
365
  --shadow-for-input-when-warning: none;
366
+ --shadow-for-tooltip: 0 2px 2px rgba(0, 0, 0, 0.24),
367
+ 0 1px 4.75px rgba(0, 0, 0, 0.12);
333
368
  --font-size-m: 1rem;
334
369
  --big-button-height: 32px;
335
370
  --small-button-height: 24px;
package/materials/custom-properties.json CHANGED
@@ -139,8 +139,8 @@
139
139
  "--background-color-for-input": "#fff",
140
140
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
141
141
  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
142
- "--background-color-for-input-when-hovered": "unset",
143
- "--background-color-for-input-when-focused": "unset",
142
+ "--background-color-for-input-when-hovered": "#fff",
143
+ "--background-color-for-input-when-focused": "#fff",
144
144
  "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 90%)",
145
145
  "--background-color-for-table-header": "#213c45",
146
146
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
@@ -152,11 +152,17 @@
152
152
  "--background-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 85%)",
153
153
  "--background-color-for-localized-multiline-text-input-label": "hsl(195, 35.2941176471%, 98%)",
154
154
  "--background-color-for-localized-multiline-text-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)",
155
+ "--background-color-for-tooltip": "#213c45",
156
+ "--background-color-for-view-switcher": "#fff",
157
+ "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)",
158
+ "--background-color-for-view-switcher-when-selected": "hsl(0, 0%, 95%)",
159
+ "--background-color-for-view-switcher-when-hovered": "hsl(0, 0%, 90%)",
155
160
  "--border-for-button-as-secondary": "none",
156
161
  "--border-for-button-as-secondary-when-hovered": "none",
157
162
  "--border-for-button-as-secondary-when-active": "none",
158
163
  "--border-for-card-when-raised": "none",
159
164
  "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
165
+ "--border-for-view-switcher": "none",
160
166
  "--border-color-for-input": "hsl(0, 0%, 60%)",
161
167
  "--border-color-for-input-when-focused": "#00b39e",
162
168
  "--border-color-for-input-when-disabled": "#ccc",
@@ -167,6 +173,7 @@
167
173
  "--border-color-for-tag": "hsl(0, 0%, 60%)",
168
174
  "--border-color-for-tag-warning": "#f16d0e",
169
175
  "--border-color-for-tag-when-focused": "#00b39e",
176
+ "--border-color-for-tag-when-hovered": "#f16d0e",
170
177
  "--border-color-for-button-as-icon": "#fff",
171
178
  "--border-color-for-button-as-icon-as-info": "#078cdf",
172
179
  "--border-color-for-button-as-icon-as-primary": "#00b39e",
@@ -193,11 +200,15 @@
193
200
  "--border-radius-for-card": "6px",
194
201
  "--border-radius-for-table-manager-droppable-list": "6px",
195
202
  "--border-radius-for-stamp": "2px",
203
+ "--border-radius-for-view-switcher": "6px",
196
204
  "--border-width-for-input": "1px",
197
205
  "--border-width-for-input-when-warning": "1px",
198
206
  "--border-width-for-input-when-error": "1px",
199
207
  "--border-width-for-input-when-focused": "1px",
208
+ "--border-width-for-tag": "1px",
200
209
  "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
210
+ "--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)",
211
+ "--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)",
201
212
  "--font-color-for-text": "#1a1a1a",
202
213
  "--font-color-for-input": "#1a1a1a",
203
214
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -205,16 +216,24 @@
205
216
  "--font-color-for-input-when-readonly": "hsl(0, 0%, 60%)",
206
217
  "--font-color-for-input-when-warning": "#f16d0e",
207
218
  "--font-color-for-tag": "#1a1a1a",
219
+ "--font-color-for-tag-remove-icon": "#1a1a1a",
220
+ "--font-color-for-tag-drag-icon": "#1a1a1a",
221
+ "--font-color-for-tag-remove-icon-when-hovered": "#f16d0e",
208
222
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
209
223
  "--font-color-for-text-when-inverted": "#fff",
210
224
  "--font-color-for-table-header": "#fff",
211
225
  "--font-color-for-localized-multiline-text-input-label": "hsl(0, 0%, 60%)",
226
+ "--font-color-for-view-switcher": "#1a1a1a",
227
+ "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)",
228
+ "--font-color-for-view-switcher-when-selected": "#1a1a1a",
212
229
  "--height-for-button-as-big": "32px",
213
230
  "--height-for-button-as-small": "24px",
214
231
  "--height-for-button-as-icon-as-big": "32px",
215
232
  "--height-for-button-as-icon-as-medium": "24px",
216
233
  "--height-for-button-as-icon-as-small": "16px",
217
234
  "--height-for-input": "32px",
235
+ "--height-for-view-switcher": "32px",
236
+ "--height-for-view-switcher-when-condensed": "24px",
218
237
  "--width-for-avatar-as-medium": "48px",
219
238
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
220
239
  "--font-size-for-button": "1rem",
@@ -229,6 +248,7 @@
229
248
  "--font-size-for-body": "13px",
230
249
  "--font-size-for-link": "1rem",
231
250
  "--font-size-for-stamp": "1rem",
251
+ "--font-size-for-view-switcher": "1rem",
232
252
  "--font-size-for-table": "1rem",
233
253
  "--font-size-for-avatar-as-small": "1rem",
234
254
  "--font-size-for-avatar-as-medium": "1.5rem",
@@ -254,6 +274,7 @@
254
274
  "--font-weight-for-table-header": "400",
255
275
  "--margin-for-table-header": "8px",
256
276
  "--margin-for-table-as-condensed": "8px",
277
+ "--margin-for-view-switcher-icon": "0 var(--spacing-10) 0 0",
257
278
  "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
258
279
  "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
259
280
  "--padding-for-tag": "5px var(--spacing-20)",
@@ -274,6 +295,10 @@
274
295
  "--padding-for-multiline-input": "var(--spacing-10) var(--spacing-20)",
275
296
  "--padding-for-localized-rich-text-input-label": "0 var(--spacing-20)",
276
297
  "--padding-for-localized-multiline-text-input-label": "0 var(--spacing-20)",
298
+ "--padding-for-tag-remove-icon": "0 var(--spacing-10)",
299
+ "--padding-for-tooltip": "var(--spacing-10) var(--spacing-20)",
300
+ "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)",
301
+ "--padding-for-view-switcher-when-condensed": "0 var(--spacing-20) 0 var(--spacing-20)",
277
302
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
278
303
  "--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)",
279
304
  "--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)",
@@ -285,6 +310,7 @@
285
310
  "--shadow-for-input-when-focused": "inset 0 0 0 2px var(--color-primary)",
286
311
  "--shadow-for-input-when-error": "none",
287
312
  "--shadow-for-input-when-warning": "none",
313
+ "--shadow-for-tooltip": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)",
288
314
  "--font-size-m": "1rem",
289
315
  "--big-button-height": "32px",
290
316
  "--small-button-height": "24px",
package/materials/internals/definition.yaml CHANGED
@@ -251,6 +251,8 @@ states:
251
251
  description: 'When the element is raised'
252
252
  highlighted:
253
253
  description: 'When the element is highlighted'
254
+ condensed:
255
+ description: 'When the element is condensed'
254
256
 
255
257
  variants:
256
258
  h1:
@@ -299,6 +301,10 @@ componentGroups:
299
301
  description: 'Input elements'
300
302
  tag:
301
303
  description: 'Tag elements'
304
+ tag-remove-icon:
305
+ description: 'Tag remove icon elements'
306
+ tag-drag-icon:
307
+ description: 'Tag drag icon elements'
302
308
  tag-warning:
303
309
  description: 'Tag elements with type warning'
304
310
  text:
@@ -347,6 +353,12 @@ componentGroups:
347
353
  description: 'Localized rich text input label elements'
348
354
  localized-multiline-text-input-label:
349
355
  description: 'Localized multiline text input label elements'
356
+ tooltip:
357
+ description: 'Tooltip elements'
358
+ view-switcher:
359
+ description: 'View switcher elements'
360
+ view-switcher-icon:
361
+ description: 'View switcher icon elements'
350
362
 
351
363
  decisionGroupsByTheme:
352
364
  default:
@@ -387,10 +399,10 @@ decisionGroupsByTheme:
387
399
  choice: color-accent-98
388
400
  background-color-for-input-when-hovered:
389
401
  description: ''
390
- choice: 'unset'
402
+ choice: color-surface
391
403
  background-color-for-input-when-focused:
392
404
  description: ''
393
- choice: 'unset'
405
+ choice: color-surface
394
406
  background-color-for-table-cell-when-hovered:
395
407
  choice: color-neutral-90
396
408
  background-color-for-table-header:
@@ -421,6 +433,16 @@ decisionGroupsByTheme:
421
433
  background-color-for-localized-multiline-text-input-label-when-disabled:
422
434
  description: ''
423
435
  choice: color-accent-98
436
+ background-color-for-tooltip:
437
+ choice: color-accent
438
+ background-color-for-view-switcher:
439
+ choice: color-surface
440
+ background-color-for-view-switcher-when-disabled:
441
+ choice: color-accent-98
442
+ background-color-for-view-switcher-when-selected:
443
+ choice: color-neutral-95
444
+ background-color-for-view-switcher-when-hovered:
445
+ choice: color-neutral-90
424
446
 
425
447
  borders:
426
448
  label: Borders
@@ -436,6 +458,8 @@ decisionGroupsByTheme:
436
458
  choice: 'none'
437
459
  border-for-collapsible-panel-header-icon-when-disabled:
438
460
  choice: '1px solid var(--color-neutral)'
461
+ border-for-view-switcher:
462
+ choice: 'none'
439
463
 
440
464
  borderColors:
441
465
  label: Border Colors
@@ -471,6 +495,8 @@ decisionGroupsByTheme:
471
495
  border-color-for-tag-when-focused:
472
496
  description: ''
473
497
  choice: color-primary
498
+ border-color-for-tag-when-hovered:
499
+ choice: color-warning
474
500
  border-color-for-button-as-icon:
475
501
  choice: color-surface
476
502
  border-color-for-button-as-icon-as-info:
@@ -530,6 +556,8 @@ decisionGroupsByTheme:
530
556
  choice: border-radius-6
531
557
  border-radius-for-stamp:
532
558
  choice: border-radius-2
559
+ border-radius-for-view-switcher:
560
+ choice: border-radius-6
533
561
 
534
562
  borderWidths:
535
563
  label: Border width
@@ -543,6 +571,8 @@ decisionGroupsByTheme:
543
571
  choice: border-width-1
544
572
  border-width-for-input-when-focused:
545
573
  choice: border-width-1
574
+ border-width-for-tag:
575
+ choice: border-width-1
546
576
 
547
577
  boxShadows:
548
578
  label: Box shadows
@@ -550,6 +580,10 @@ decisionGroupsByTheme:
550
580
  decisions:
551
581
  box-shadow-for-datetime-input-when-hovered:
552
582
  choice: 'inset 0 0 0 2px'
583
+ box-shadow-for-view-switcher:
584
+ choice: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)
585
+ box-shadow-for-view-switcher-when-selected:
586
+ choice: shadow-9
553
587
 
554
588
  fontColors:
555
589
  label: Font Colors
@@ -576,6 +610,12 @@ decisionGroupsByTheme:
576
610
  font-color-for-tag:
577
611
  description: ''
578
612
  choice: color-solid
613
+ font-color-for-tag-remove-icon:
614
+ choice: color-solid
615
+ font-color-for-tag-drag-icon:
616
+ choice: color-solid
617
+ font-color-for-tag-remove-icon-when-hovered:
618
+ choice: color-warning
579
619
  font-color-for-tag-when-disabled:
580
620
  description: ''
581
621
  choice: color-neutral-60
@@ -586,6 +626,12 @@ decisionGroupsByTheme:
586
626
  choice: color-surface
587
627
  font-color-for-localized-multiline-text-input-label:
588
628
  choice: color-neutral-60
629
+ font-color-for-view-switcher:
630
+ choice: color-solid
631
+ font-color-for-view-switcher-when-disabled:
632
+ choice: color-neutral-60
633
+ font-color-for-view-switcher-when-selected:
634
+ choice: color-solid
589
635
 
590
636
  heights:
591
637
  label: Height
@@ -603,6 +649,10 @@ decisionGroupsByTheme:
603
649
  choice: '16px'
604
650
  height-for-input:
605
651
  choice: '32px'
652
+ height-for-view-switcher:
653
+ choice: '32px'
654
+ height-for-view-switcher-when-condensed:
655
+ choice: '24px'
606
656
 
607
657
  widths:
608
658
  label: Width
@@ -658,6 +708,8 @@ decisionGroupsByTheme:
658
708
  choice: font-size-30
659
709
  font-size-for-stamp:
660
710
  choice: font-size-30
711
+ font-size-for-view-switcher:
712
+ choice: font-size-30
661
713
  font-size-for-table:
662
714
  choice: font-size-30
663
715
  font-size-for-avatar-as-small:
@@ -742,6 +794,8 @@ decisionGroupsByTheme:
742
794
  choice: spacing-20
743
795
  margin-for-table-as-condensed:
744
796
  choice: spacing-20
797
+ margin-for-view-switcher-icon:
798
+ choice: '0 var(--spacing-10) 0 0'
745
799
 
746
800
  paddings:
747
801
  label: Paddings
@@ -787,6 +841,14 @@ decisionGroupsByTheme:
787
841
  choice: '0 var(--spacing-20)'
788
842
  padding-for-localized-multiline-text-input-label:
789
843
  choice: '0 var(--spacing-20)'
844
+ padding-for-tag-remove-icon:
845
+ choice: '0 var(--spacing-10)'
846
+ padding-for-tooltip:
847
+ choice: 'var(--spacing-10) var(--spacing-20)'
848
+ padding-for-view-switcher:
849
+ choice: '0 var(--spacing-30) 0 var(--spacing-30)'
850
+ padding-for-view-switcher-when-condensed:
851
+ choice: '0 var(--spacing-20) 0 var(--spacing-20)'
790
852
 
791
853
  shadows:
792
854
  label: Shadows
@@ -816,6 +878,8 @@ decisionGroupsByTheme:
816
878
  choice: shadow-0
817
879
  shadow-for-input-when-warning:
818
880
  choice: shadow-0
881
+ shadow-for-tooltip:
882
+ choice: shadow-15
819
883
 
820
884
  test:
821
885
  backgroundColors:
@@ -867,6 +931,14 @@ decisionGroupsByTheme:
867
931
  choice: color-surface
868
932
  background-color-for-localized-multiline-text-input-label-when-disabled:
869
933
  choice: color-neutral-95
934
+ background-color-for-tooltip:
935
+ choice: color-accent-10
936
+ background-color-for-view-switcher-when-disabled:
937
+ choice: color-surface
938
+ background-color-for-view-switcher-when-selected:
939
+ choice: color-neutral-95
940
+ background-color-for-view-switcher-when-hovered:
941
+ choice: color-neutral-95
870
942
 
871
943
  borders:
872
944
  label: Borders
@@ -882,6 +954,8 @@ decisionGroupsByTheme:
882
954
  choice: '1px solid var(--color-neutral-90)'
883
955
  border-for-collapsible-panel-header-icon-when-disabled:
884
956
  choice: 'none'
957
+ border-for-view-switcher:
958
+ choice: '1px solid var(--color-neutral)'
885
959
 
886
960
  borderColors:
887
961
  label: Border Colors
@@ -929,6 +1003,10 @@ decisionGroupsByTheme:
929
1003
  choice: color-neutral-85
930
1004
  border-color-for-localized-multiline-text-input-label-when-readonly:
931
1005
  choice: color-neutral-90
1006
+ border-color-for-tag:
1007
+ choice: color-neutral
1008
+ border-color-for-tag-when-hovered:
1009
+ choice: color-neutral
932
1010
 
933
1011
  borderRadiuses:
934
1012
  label: Border radiuses
@@ -952,6 +1030,15 @@ decisionGroupsByTheme:
952
1030
  choice: border-radius-4
953
1031
  border-radius-for-stamp:
954
1032
  choice: border-radius-20
1033
+ border-radius-for-view-switcher:
1034
+ choice: border-radius-4
1035
+
1036
+ borderWidths:
1037
+ label: Border width
1038
+ prefix: border-width
1039
+ decisions:
1040
+ border-width-for-tag:
1041
+ choice: '1px 1px 1px 0'
955
1042
 
956
1043
  boxShadows:
957
1044
  label: Box shadows
@@ -959,6 +1046,10 @@ decisionGroupsByTheme:
959
1046
  decisions:
960
1047
  box-shadow-for-datetime-input-when-hovered:
961
1048
  choice: 'inset 0 0 0 1px'
1049
+ box-shadow-for-view-switcher:
1050
+ choice: shadow-0
1051
+ box-shadow-for-view-switcher-when-selected:
1052
+ choice: shadow-0
962
1053
 
963
1054
  fontColors:
964
1055
  label: Font Colors
@@ -968,6 +1059,14 @@ decisionGroupsByTheme:
968
1059
  choice: color-neutral-40
969
1060
  font-color-for-input-when-readonly:
970
1061
  choice: color-neutral-40
1062
+ font-color-for-tag-remove-icon:
1063
+ choice: color-neutral-40
1064
+ font-color-for-tag-drag-icon:
1065
+ choice: color-neutral-40
1066
+ font-color-for-tag-remove-icon-when-hovered:
1067
+ choice: color-error
1068
+ font-color-for-view-switcher:
1069
+ choice: color-neutral-40
971
1070
 
972
1071
  fontSizes:
973
1072
  label: Font Sizes
@@ -1008,6 +1107,8 @@ decisionGroupsByTheme:
1008
1107
  choice: 'inherit'
1009
1108
  font-size-for-stamp:
1010
1109
  choice: font-size-20
1110
+ font-size-for-view-switcher:
1111
+ choice: font-size-20
1011
1112
  font-size-for-table:
1012
1113
  choice: font-size-20
1013
1114
  font-size-for-avatar-as-small:
@@ -1091,6 +1192,10 @@ decisionGroupsByTheme:
1091
1192
  choice: '16px'
1092
1193
  height-for-input:
1093
1194
  choice: '40px'
1195
+ height-for-view-switcher:
1196
+ choice: '40px'
1197
+ height-for-view-switcher-when-condensed:
1198
+ choice: '32px'
1094
1199
 
1095
1200
  iconColors:
1096
1201
  label: Icon colors
@@ -1116,6 +1221,8 @@ decisionGroupsByTheme:
1116
1221
  choice: spacing-30
1117
1222
  margin-for-table-cell-as-condensed:
1118
1223
  choice: spacing-20
1224
+ margin-for-view-switcher-icon:
1225
+ choice: '0 var(--spacing-20) 0 0'
1119
1226
 
1120
1227
  paddings:
1121
1228
  label: Paddings
@@ -1161,6 +1268,15 @@ decisionGroupsByTheme:
1161
1268
  choice: spacing-20
1162
1269
  padding-for-localized-multiline-text-input-label:
1163
1270
  choice: '0 12px'
1271
+ padding-for-tag-remove-icon:
1272
+ choice: '0 12px'
1273
+ padding-for-tooltip:
1274
+ choice: 'var(--spacing-20) 12px'
1275
+ padding-for-view-switcher:
1276
+ choice: '0 var(--spacing-30) 0 var(--spacing-30)'
1277
+ padding-for-view-switcher-when-condensed:
1278
+ choice: '0 12px 0 12px'
1279
+
1164
1280
  shadows:
1165
1281
  label: Shadows
1166
1282
  prefix: shadow
@@ -1185,6 +1301,8 @@ decisionGroupsByTheme:
1185
1301
  choice: 'inset 0 0 0 1px var(--color-error)'
1186
1302
  shadow-for-input-when-warning:
1187
1303
  choice: 'inset 0 0 0 1px var(--color-warning)'
1304
+ shadow-for-tooltip:
1305
+ choice: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)'
1188
1306
 
1189
1307
  # These tokens are deprecated as they don't follow our naming patterns.
1190
1308
  # 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.9.0",
4
+ "version": "15.10.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,43 +24,43 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.19.0",
26
26
  "@babel/runtime-corejs3": "^7.19.1",
27
- "@commercetools-uikit/accessible-hidden": "15.9.0",
28
- "@commercetools-uikit/avatar": "15.9.0",
29
- "@commercetools-uikit/buttons": "15.9.0",
30
- "@commercetools-uikit/card": "15.9.0",
31
- "@commercetools-uikit/collapsible": "15.9.0",
32
- "@commercetools-uikit/collapsible-motion": "15.9.0",
33
- "@commercetools-uikit/collapsible-panel": "15.9.0",
34
- "@commercetools-uikit/constraints": "15.9.0",
35
- "@commercetools-uikit/data-table": "15.9.0",
36
- "@commercetools-uikit/data-table-manager": "15.9.0",
37
- "@commercetools-uikit/design-system": "15.9.0",
38
- "@commercetools-uikit/field-errors": "15.9.0",
39
- "@commercetools-uikit/field-label": "15.9.0",
40
- "@commercetools-uikit/fields": "15.9.0",
41
- "@commercetools-uikit/grid": "15.9.0",
42
- "@commercetools-uikit/hooks": "15.9.0",
43
- "@commercetools-uikit/i18n": "15.9.0",
44
- "@commercetools-uikit/icons": "15.9.0",
45
- "@commercetools-uikit/inputs": "15.9.0",
46
- "@commercetools-uikit/label": "15.9.0",
47
- "@commercetools-uikit/link": "15.9.0",
48
- "@commercetools-uikit/loading-spinner": "15.9.0",
49
- "@commercetools-uikit/messages": "15.9.0",
50
- "@commercetools-uikit/notifications": "15.9.0",
51
- "@commercetools-uikit/pagination": "15.9.0",
52
- "@commercetools-uikit/primary-action-dropdown": "15.9.0",
53
- "@commercetools-uikit/spacings": "15.9.0",
54
- "@commercetools-uikit/stamp": "15.9.0",
55
- "@commercetools-uikit/tag": "15.9.0",
56
- "@commercetools-uikit/text": "15.9.0",
57
- "@commercetools-uikit/tooltip": "15.9.0",
58
- "@commercetools-uikit/utils": "15.9.0",
59
- "@commercetools-uikit/view-switcher": "15.9.0"
27
+ "@commercetools-uikit/accessible-hidden": "15.10.0",
28
+ "@commercetools-uikit/avatar": "15.10.0",
29
+ "@commercetools-uikit/buttons": "15.10.0",
30
+ "@commercetools-uikit/card": "15.10.0",
31
+ "@commercetools-uikit/collapsible": "15.10.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.10.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.10.0",
34
+ "@commercetools-uikit/constraints": "15.10.0",
35
+ "@commercetools-uikit/data-table": "15.10.0",
36
+ "@commercetools-uikit/data-table-manager": "15.10.0",
37
+ "@commercetools-uikit/design-system": "15.10.0",
38
+ "@commercetools-uikit/field-errors": "15.10.0",
39
+ "@commercetools-uikit/field-label": "15.10.0",
40
+ "@commercetools-uikit/fields": "15.10.0",
41
+ "@commercetools-uikit/grid": "15.10.0",
42
+ "@commercetools-uikit/hooks": "15.10.0",
43
+ "@commercetools-uikit/i18n": "15.10.0",
44
+ "@commercetools-uikit/icons": "15.10.0",
45
+ "@commercetools-uikit/inputs": "15.10.0",
46
+ "@commercetools-uikit/label": "15.10.0",
47
+ "@commercetools-uikit/link": "15.10.0",
48
+ "@commercetools-uikit/loading-spinner": "15.10.0",
49
+ "@commercetools-uikit/messages": "15.10.0",
50
+ "@commercetools-uikit/notifications": "15.10.0",
51
+ "@commercetools-uikit/pagination": "15.10.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.10.0",
53
+ "@commercetools-uikit/spacings": "15.10.0",
54
+ "@commercetools-uikit/stamp": "15.10.0",
55
+ "@commercetools-uikit/tag": "15.10.0",
56
+ "@commercetools-uikit/text": "15.10.0",
57
+ "@commercetools-uikit/tooltip": "15.10.0",
58
+ "@commercetools-uikit/utils": "15.10.0",
59
+ "@commercetools-uikit/view-switcher": "15.10.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",
63
- "moment-timezone": "0.5.38",
63
+ "moment-timezone": "0.5.40",
64
64
  "react": "17.0.2",
65
65
  "react-intl": "^5.25.1",
66
66
  "react-router-dom": "5.3.4"