@commercetools-frontend/ui-kit 15.9.0 → 15.11.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.
@@ -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.11.0";
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.9.0";
83
+ var version = "15.11.0";
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.9.0";
36
+ var version = "15.11.0";
37
37
 
38
38
  export { version };
@@ -24,9 +24,10 @@
24
24
  --color-neutral-10: hsl(0deg 0% 80% / 10%);
25
25
  --color-neutral-40: hsl(0, 0%, 40%);
26
26
  --color-neutral-60: hsl(0, 0%, 60%);
27
+ --color-neutral-85: hsl(0, 0%, 85%);
27
28
  --color-neutral-90: hsl(0, 0%, 90%);
28
29
  --color-neutral-95: hsl(0, 0%, 95%);
29
- --color-neutral-85: hsl(0, 0%, 85%);
30
+ --color-neutral-98: hsl(0, 0%, 98%);
30
31
  --color-info: #078cdf;
31
32
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
32
33
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
@@ -37,6 +38,7 @@
37
38
  --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
38
39
  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
39
40
  --color-error: #e60050;
41
+ --color-error-25: hsl(339.1304347826087, 100%, 25%);
40
42
  --color-error-40: hsl(339.1304347826087, 100%, 40%);
41
43
  --color-error-85: hsl(339.1304347826087, 100%, 85%);
42
44
  --color-error-95: hsl(339.1304347826087, 100%, 95%);
@@ -159,8 +161,10 @@
159
161
  --background-color-for-input: #fff;
160
162
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
161
163
  --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;
164
+ --background-color-for-input-when-hovered: #fff;
165
+ --background-color-for-input-when-focused: #fff;
166
+ --background-color-for-input-when-readonly: #fff;
167
+ --background-color-for-input-when-active: hsl(195, 35.2941176471%, 95%);
164
168
  --background-color-for-table-cell-when-hovered: hsl(0, 0%, 90%);
165
169
  --background-color-for-table-header: #213c45;
166
170
  --background-color-for-tag: hsl(0, 0%, 95%);
@@ -188,12 +192,30 @@
188
192
  35.2941176471%,
189
193
  98%
190
194
  );
195
+ --background-color-for-tooltip: #213c45;
196
+ --background-color-for-view-switcher: #fff;
197
+ --background-color-for-view-switcher-when-disabled: hsl(
198
+ 195,
199
+ 35.2941176471%,
200
+ 98%
201
+ );
202
+ --background-color-for-view-switcher-when-selected: hsl(0, 0%, 95%);
203
+ --background-color-for-view-switcher-when-hovered: hsl(0, 0%, 90%);
204
+ --background-color-for-content-notification-when-error: #fff;
205
+ --background-color-for-content-notification-when-info: #fff;
206
+ --background-color-for-content-notification-when-warning: #fff;
207
+ --background-color-for-content-notification-when-success: #fff;
208
+ --background-color-for-content-notification-icon-when-error: #e60050;
209
+ --background-color-for-content-notification-icon-when-info: #078cdf;
210
+ --background-color-for-content-notification-icon-when-warning: #f16d0e;
211
+ --background-color-for-content-notification-icon-when-success: #00b39e;
191
212
  --border-for-button-as-secondary: none;
192
213
  --border-for-button-as-secondary-when-hovered: none;
193
214
  --border-for-button-as-secondary-when-active: none;
194
215
  --border-for-card-when-raised: none;
195
216
  --border-for-collapsible-panel-header-icon-when-disabled: 1px solid
196
217
  var(--color-neutral);
218
+ --border-for-view-switcher: none;
197
219
  --border-color-for-input: hsl(0, 0%, 60%);
198
220
  --border-color-for-input-when-focused: #00b39e;
199
221
  --border-color-for-input-when-disabled: #ccc;
@@ -204,6 +226,7 @@
204
226
  --border-color-for-tag: hsl(0, 0%, 60%);
205
227
  --border-color-for-tag-warning: #f16d0e;
206
228
  --border-color-for-tag-when-focused: #00b39e;
229
+ --border-color-for-tag-when-hovered: #f16d0e;
207
230
  --border-color-for-button-as-icon: #fff;
208
231
  --border-color-for-button-as-icon-as-info: #078cdf;
209
232
  --border-color-for-button-as-icon-as-primary: #00b39e;
@@ -220,6 +243,15 @@
220
243
  --border-color-for-stamp-as-secondary: hsl(0, 0%, 60%);
221
244
  --border-color-for-localized-multiline-text-input-label: #ccc;
222
245
  --border-color-for-localized-multiline-text-input-label-when-readonly: #ccc;
246
+ --border-color-for-content-notification-when-error: #e60050;
247
+ --border-color-for-content-notification-when-info: #078cdf;
248
+ --border-color-for-content-notification-when-warning: #f16d0e;
249
+ --border-color-for-content-notification-when-success: #00b39e;
250
+ --border-color-for-group-heading-select-input-options: #ccc;
251
+ --border-color-for-select-input-menu: #00b39e;
252
+ --border-color-for-select-input-when-readonly: #ccc;
253
+ --border-color-for-select-input-menu-when-warning: #f16d0e;
254
+ --border-color-for-select-input-menu-when-error: #e60050;
223
255
  --border-radius-for-button-as-big: 6px;
224
256
  --border-radius-for-button-as-small: 4px;
225
257
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -230,11 +262,26 @@
230
262
  --border-radius-for-card: 6px;
231
263
  --border-radius-for-table-manager-droppable-list: 6px;
232
264
  --border-radius-for-stamp: 2px;
265
+ --border-radius-for-view-switcher: 6px;
266
+ --border-radius-for-content-notification: 0 var(--border-radius-6)
267
+ var(--border-radius-6) 0;
268
+ --border-radius-for-content-notification-icon: var(--border-radius-6) 0 0
269
+ var(--border-radius-6);
233
270
  --border-width-for-input: 1px;
234
271
  --border-width-for-input-when-warning: 1px;
235
272
  --border-width-for-input-when-error: 1px;
236
273
  --border-width-for-input-when-focused: 1px;
274
+ --border-width-for-tag: 1px;
275
+ --border-width-for-select-input: 1px;
276
+ --border-width-for-content-notification-icon: 0px;
277
+ --border-left-width-for-content-notification: 1px;
237
278
  --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
279
+ --box-shadow-for-view-switcher: 0 1px 1px 0 rgba(0, 0, 0, 0.24),
280
+ 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
281
+ --box-shadow-for-view-switcher-when-selected: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
282
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
283
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
284
+ --box-shadow-for-select-input-when-focused: inset 0 0 0 2px;
238
285
  --font-color-for-text: #1a1a1a;
239
286
  --font-color-for-input: #1a1a1a;
240
287
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -242,16 +289,38 @@
242
289
  --font-color-for-input-when-readonly: hsl(0, 0%, 60%);
243
290
  --font-color-for-input-when-warning: #f16d0e;
244
291
  --font-color-for-tag: #1a1a1a;
292
+ --font-color-for-tag-remove-icon: #1a1a1a;
293
+ --font-color-for-tag-drag-icon: #1a1a1a;
294
+ --font-color-for-tag-remove-icon-when-hovered: #f16d0e;
245
295
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
246
296
  --font-color-for-text-when-inverted: #fff;
247
297
  --font-color-for-table-header: #fff;
248
298
  --font-color-for-localized-multiline-text-input-label: hsl(0, 0%, 60%);
299
+ --font-color-for-view-switcher: #1a1a1a;
300
+ --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%);
301
+ --font-color-for-view-switcher-when-selected: #1a1a1a;
302
+ --font-color-for-clear-input-icon: #1a1a1a;
303
+ --font-color-for-clear-input-icon-when-hovered: #f16d0e;
304
+ --font-color-for-content-notification: #1a1a1a;
305
+ --font-color-for-content-notification-icon-when-error: #fff;
306
+ --font-color-for-content-notification-icon-when-warning: #fff;
307
+ --font-color-for-content-notification-icon-when-success: #fff;
308
+ --font-color-for-content-notification-icon-when-info: #fff;
309
+ --font-color-for-search-input-icon: #1a1a1a;
310
+ --font-color-for-search-input-icon-when-hovered: #1a1a1a;
311
+ --font-color-for-select-input-icon: #1a1a1a;
312
+ --font-color-for-select-input-when-error: #1a1a1a;
313
+ --font-color-for-select-input-when-warning: #1a1a1a;
314
+ --font-color-for-select-input-icon-when-error: #1a1a1a;
315
+ --font-color-for-select-input-icon-when-warning: #1a1a1a;
249
316
  --height-for-button-as-big: 32px;
250
317
  --height-for-button-as-small: 24px;
251
318
  --height-for-button-as-icon-as-big: 32px;
252
319
  --height-for-button-as-icon-as-medium: 24px;
253
320
  --height-for-button-as-icon-as-small: 16px;
254
321
  --height-for-input: 32px;
322
+ --height-for-view-switcher: 32px;
323
+ --height-for-view-switcher-when-condensed: 24px;
255
324
  --width-for-avatar-as-medium: 48px;
256
325
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
257
326
  --font-size-for-button: 1rem;
@@ -266,11 +335,13 @@
266
335
  --font-size-for-body: 13px;
267
336
  --font-size-for-link: 1rem;
268
337
  --font-size-for-stamp: 1rem;
338
+ --font-size-for-view-switcher: 1rem;
269
339
  --font-size-for-table: 1rem;
270
340
  --font-size-for-avatar-as-small: 1rem;
271
341
  --font-size-for-avatar-as-medium: 1.5rem;
272
342
  --font-size-for-avatar-as-big: 3rem;
273
343
  --font-size-for-localized-multiline-text-input-label: 0.9231rem;
344
+ --font-size-for-content-notification: 1rem;
274
345
  --icon-color-for-datetime-input-icon: #1a1a1a;
275
346
  --icon-color-for-datetime-input-icon-when-hovered: #f16d0e;
276
347
  --line-height-for-text-as-h1: inherit;
@@ -291,6 +362,10 @@
291
362
  --font-weight-for-table-header: 400;
292
363
  --margin-for-table-header: 8px;
293
364
  --margin-for-table-as-condensed: 8px;
365
+ --margin-for-view-switcher-icon: 0 var(--spacing-10) 0 0;
366
+ --margin-for-group-heading-select-input-options: 4px;
367
+ --margin-for-select-input-icon: 4px;
368
+ --margin-left-for-select-input-icon: inherit;
294
369
  --padding-for-stamp: var(--spacing-10) var(--spacing-20);
295
370
  --padding-for-stamp-as-condensed: 1px var(--spacing-10);
296
371
  --padding-for-tag: 5px var(--spacing-20);
@@ -312,6 +387,19 @@
312
387
  --padding-for-multiline-input: var(--spacing-10) var(--spacing-20);
313
388
  --padding-for-localized-rich-text-input-label: 0 var(--spacing-20);
314
389
  --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20);
390
+ --padding-for-tag-remove-icon: 0 var(--spacing-10);
391
+ --padding-for-tooltip: var(--spacing-10) var(--spacing-20);
392
+ --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
393
+ --padding-for-view-switcher-when-condensed: 0 var(--spacing-20) 0
394
+ var(--spacing-20);
395
+ --padding-for-content-notification: var(--spacing-20);
396
+ --padding-for-content-notification-icon: var(--spacing-20) var(--spacing-30);
397
+ --padding-left-for-select-input-options: 8px;
398
+ --padding-right-for-select-input-options: 8px;
399
+ --padding-top-for-select-input-options: 4px;
400
+ --padding-bottom-for-select-input-options: 4px;
401
+ --padding-for-group-heading-select-input-options: 8px;
402
+ --padding-for-select-input-menu: inherit;
315
403
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
316
404
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
317
405
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -330,6 +418,10 @@
330
418
  --shadow-for-input-when-focused: inset 0 0 0 2px var(--color-primary);
331
419
  --shadow-for-input-when-error: none;
332
420
  --shadow-for-input-when-warning: none;
421
+ --shadow-for-tooltip: 0 2px 2px rgba(0, 0, 0, 0.24),
422
+ 0 1px 4.75px rgba(0, 0, 0, 0.12);
423
+ --shadow-for-select-input-menu: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
424
+ 0 1px 1px 0 rgba(0, 0, 0, 0.24);
333
425
  --font-size-m: 1rem;
334
426
  --big-button-height: 32px;
335
427
  --small-button-height: 24px;
@@ -17,9 +17,10 @@
17
17
  "--color-neutral-10": "hsl(0deg 0% 80% / 10%)",
18
18
  "--color-neutral-40": "hsl(0, 0%, 40%)",
19
19
  "--color-neutral-60": "hsl(0, 0%, 60%)",
20
+ "--color-neutral-85": "hsl(0, 0%, 85%)",
20
21
  "--color-neutral-90": "hsl(0, 0%, 90%)",
21
22
  "--color-neutral-95": "hsl(0, 0%, 95%)",
22
- "--color-neutral-85": "hsl(0, 0%, 85%)",
23
+ "--color-neutral-98": "hsl(0, 0%, 98%)",
23
24
  "--color-info": "#078cdf",
24
25
  "--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
25
26
  "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
@@ -30,6 +31,7 @@
30
31
  "--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
31
32
  "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
32
33
  "--color-error": "#e60050",
34
+ "--color-error-25": "hsl(339.1304347826087, 100%, 25%)",
33
35
  "--color-error-40": "hsl(339.1304347826087, 100%, 40%)",
34
36
  "--color-error-85": "hsl(339.1304347826087, 100%, 85%)",
35
37
  "--color-error-95": "hsl(339.1304347826087, 100%, 95%)",
@@ -139,8 +141,10 @@
139
141
  "--background-color-for-input": "#fff",
140
142
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
141
143
  "--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",
144
+ "--background-color-for-input-when-hovered": "#fff",
145
+ "--background-color-for-input-when-focused": "#fff",
146
+ "--background-color-for-input-when-readonly": "#fff",
147
+ "--background-color-for-input-when-active": "hsl(195, 35.2941176471%, 95%)",
144
148
  "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 90%)",
145
149
  "--background-color-for-table-header": "#213c45",
146
150
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
@@ -152,11 +156,25 @@
152
156
  "--background-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 85%)",
153
157
  "--background-color-for-localized-multiline-text-input-label": "hsl(195, 35.2941176471%, 98%)",
154
158
  "--background-color-for-localized-multiline-text-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)",
159
+ "--background-color-for-tooltip": "#213c45",
160
+ "--background-color-for-view-switcher": "#fff",
161
+ "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)",
162
+ "--background-color-for-view-switcher-when-selected": "hsl(0, 0%, 95%)",
163
+ "--background-color-for-view-switcher-when-hovered": "hsl(0, 0%, 90%)",
164
+ "--background-color-for-content-notification-when-error": "#fff",
165
+ "--background-color-for-content-notification-when-info": "#fff",
166
+ "--background-color-for-content-notification-when-warning": "#fff",
167
+ "--background-color-for-content-notification-when-success": "#fff",
168
+ "--background-color-for-content-notification-icon-when-error": "#e60050",
169
+ "--background-color-for-content-notification-icon-when-info": "#078cdf",
170
+ "--background-color-for-content-notification-icon-when-warning": "#f16d0e",
171
+ "--background-color-for-content-notification-icon-when-success": "#00b39e",
155
172
  "--border-for-button-as-secondary": "none",
156
173
  "--border-for-button-as-secondary-when-hovered": "none",
157
174
  "--border-for-button-as-secondary-when-active": "none",
158
175
  "--border-for-card-when-raised": "none",
159
176
  "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
177
+ "--border-for-view-switcher": "none",
160
178
  "--border-color-for-input": "hsl(0, 0%, 60%)",
161
179
  "--border-color-for-input-when-focused": "#00b39e",
162
180
  "--border-color-for-input-when-disabled": "#ccc",
@@ -167,6 +185,7 @@
167
185
  "--border-color-for-tag": "hsl(0, 0%, 60%)",
168
186
  "--border-color-for-tag-warning": "#f16d0e",
169
187
  "--border-color-for-tag-when-focused": "#00b39e",
188
+ "--border-color-for-tag-when-hovered": "#f16d0e",
170
189
  "--border-color-for-button-as-icon": "#fff",
171
190
  "--border-color-for-button-as-icon-as-info": "#078cdf",
172
191
  "--border-color-for-button-as-icon-as-primary": "#00b39e",
@@ -183,6 +202,15 @@
183
202
  "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 60%)",
184
203
  "--border-color-for-localized-multiline-text-input-label": "#ccc",
185
204
  "--border-color-for-localized-multiline-text-input-label-when-readonly": "#ccc",
205
+ "--border-color-for-content-notification-when-error": "#e60050",
206
+ "--border-color-for-content-notification-when-info": "#078cdf",
207
+ "--border-color-for-content-notification-when-warning": "#f16d0e",
208
+ "--border-color-for-content-notification-when-success": "#00b39e",
209
+ "--border-color-for-group-heading-select-input-options": "#ccc",
210
+ "--border-color-for-select-input-menu": "#00b39e",
211
+ "--border-color-for-select-input-when-readonly": "#ccc",
212
+ "--border-color-for-select-input-menu-when-warning": "#f16d0e",
213
+ "--border-color-for-select-input-menu-when-error": "#e60050",
186
214
  "--border-radius-for-button-as-big": "6px",
187
215
  "--border-radius-for-button-as-small": "4px",
188
216
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -193,11 +221,21 @@
193
221
  "--border-radius-for-card": "6px",
194
222
  "--border-radius-for-table-manager-droppable-list": "6px",
195
223
  "--border-radius-for-stamp": "2px",
224
+ "--border-radius-for-view-switcher": "6px",
225
+ "--border-radius-for-content-notification": "0 var(--border-radius-6) var(--border-radius-6) 0",
226
+ "--border-radius-for-content-notification-icon": "var(--border-radius-6) 0 0 var(--border-radius-6)",
196
227
  "--border-width-for-input": "1px",
197
228
  "--border-width-for-input-when-warning": "1px",
198
229
  "--border-width-for-input-when-error": "1px",
199
230
  "--border-width-for-input-when-focused": "1px",
231
+ "--border-width-for-tag": "1px",
232
+ "--border-width-for-select-input": "1px",
233
+ "--border-width-for-content-notification-icon": "0px",
234
+ "--border-left-width-for-content-notification": "1px",
200
235
  "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
236
+ "--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)",
237
+ "--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)",
238
+ "--box-shadow-for-select-input-when-focused": "inset 0 0 0 2px",
201
239
  "--font-color-for-text": "#1a1a1a",
202
240
  "--font-color-for-input": "#1a1a1a",
203
241
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -205,16 +243,38 @@
205
243
  "--font-color-for-input-when-readonly": "hsl(0, 0%, 60%)",
206
244
  "--font-color-for-input-when-warning": "#f16d0e",
207
245
  "--font-color-for-tag": "#1a1a1a",
246
+ "--font-color-for-tag-remove-icon": "#1a1a1a",
247
+ "--font-color-for-tag-drag-icon": "#1a1a1a",
248
+ "--font-color-for-tag-remove-icon-when-hovered": "#f16d0e",
208
249
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
209
250
  "--font-color-for-text-when-inverted": "#fff",
210
251
  "--font-color-for-table-header": "#fff",
211
252
  "--font-color-for-localized-multiline-text-input-label": "hsl(0, 0%, 60%)",
253
+ "--font-color-for-view-switcher": "#1a1a1a",
254
+ "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)",
255
+ "--font-color-for-view-switcher-when-selected": "#1a1a1a",
256
+ "--font-color-for-clear-input-icon": "#1a1a1a",
257
+ "--font-color-for-clear-input-icon-when-hovered": "#f16d0e",
258
+ "--font-color-for-content-notification": "#1a1a1a",
259
+ "--font-color-for-content-notification-icon-when-error": "#fff",
260
+ "--font-color-for-content-notification-icon-when-warning": "#fff",
261
+ "--font-color-for-content-notification-icon-when-success": "#fff",
262
+ "--font-color-for-content-notification-icon-when-info": "#fff",
263
+ "--font-color-for-search-input-icon": "#1a1a1a",
264
+ "--font-color-for-search-input-icon-when-hovered": "#1a1a1a",
265
+ "--font-color-for-select-input-icon": "#1a1a1a",
266
+ "--font-color-for-select-input-when-error": "#1a1a1a",
267
+ "--font-color-for-select-input-when-warning": "#1a1a1a",
268
+ "--font-color-for-select-input-icon-when-error": "#1a1a1a",
269
+ "--font-color-for-select-input-icon-when-warning": "#1a1a1a",
212
270
  "--height-for-button-as-big": "32px",
213
271
  "--height-for-button-as-small": "24px",
214
272
  "--height-for-button-as-icon-as-big": "32px",
215
273
  "--height-for-button-as-icon-as-medium": "24px",
216
274
  "--height-for-button-as-icon-as-small": "16px",
217
275
  "--height-for-input": "32px",
276
+ "--height-for-view-switcher": "32px",
277
+ "--height-for-view-switcher-when-condensed": "24px",
218
278
  "--width-for-avatar-as-medium": "48px",
219
279
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
220
280
  "--font-size-for-button": "1rem",
@@ -229,11 +289,13 @@
229
289
  "--font-size-for-body": "13px",
230
290
  "--font-size-for-link": "1rem",
231
291
  "--font-size-for-stamp": "1rem",
292
+ "--font-size-for-view-switcher": "1rem",
232
293
  "--font-size-for-table": "1rem",
233
294
  "--font-size-for-avatar-as-small": "1rem",
234
295
  "--font-size-for-avatar-as-medium": "1.5rem",
235
296
  "--font-size-for-avatar-as-big": "3rem",
236
297
  "--font-size-for-localized-multiline-text-input-label": "0.9231rem",
298
+ "--font-size-for-content-notification": "1rem",
237
299
  "--icon-color-for-datetime-input-icon": "#1a1a1a",
238
300
  "--icon-color-for-datetime-input-icon-when-hovered": "#f16d0e",
239
301
  "--line-height-for-text-as-h1": "inherit",
@@ -254,6 +316,10 @@
254
316
  "--font-weight-for-table-header": "400",
255
317
  "--margin-for-table-header": "8px",
256
318
  "--margin-for-table-as-condensed": "8px",
319
+ "--margin-for-view-switcher-icon": "0 var(--spacing-10) 0 0",
320
+ "--margin-for-group-heading-select-input-options": "4px",
321
+ "--margin-for-select-input-icon": "4px",
322
+ "--margin-left-for-select-input-icon": "inherit",
257
323
  "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
258
324
  "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
259
325
  "--padding-for-tag": "5px var(--spacing-20)",
@@ -274,6 +340,18 @@
274
340
  "--padding-for-multiline-input": "var(--spacing-10) var(--spacing-20)",
275
341
  "--padding-for-localized-rich-text-input-label": "0 var(--spacing-20)",
276
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 var(--spacing-20)",
347
+ "--padding-for-content-notification": "var(--spacing-20)",
348
+ "--padding-for-content-notification-icon": "var(--spacing-20) var(--spacing-30)",
349
+ "--padding-left-for-select-input-options": "8px",
350
+ "--padding-right-for-select-input-options": "8px",
351
+ "--padding-top-for-select-input-options": "4px",
352
+ "--padding-bottom-for-select-input-options": "4px",
353
+ "--padding-for-group-heading-select-input-options": "8px",
354
+ "--padding-for-select-input-menu": "inherit",
277
355
  "--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
356
  "--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
357
  "--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 +363,8 @@
285
363
  "--shadow-for-input-when-focused": "inset 0 0 0 2px var(--color-primary)",
286
364
  "--shadow-for-input-when-error": "none",
287
365
  "--shadow-for-input-when-warning": "none",
366
+ "--shadow-for-tooltip": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)",
367
+ "--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)",
288
368
  "--font-size-m": "1rem",
289
369
  "--big-button-height": "32px",
290
370
  "--small-button-height": "24px",
@@ -54,9 +54,10 @@ choiceGroupsByTheme:
54
54
  color-neutral-10: 'hsl(0deg 0% 80% / 10%)'
55
55
  color-neutral-40: 'hsl(0, 0%, 40%)'
56
56
  color-neutral-60: 'hsl(0, 0%, 60%)'
57
+ color-neutral-85: 'hsl(0, 0%, 85%)'
57
58
  color-neutral-90: 'hsl(0, 0%, 90%)'
58
59
  color-neutral-95: 'hsl(0, 0%, 95%)'
59
- color-neutral-85: 'hsl(0, 0%, 85%)'
60
+ color-neutral-98: 'hsl(0, 0%, 98%)'
60
61
  color-info: '#078cdf'
61
62
  color-info-40: 'hsl(203.05555555555554, 93.9130434783%, 40%)'
62
63
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
@@ -67,6 +68,7 @@ choiceGroupsByTheme:
67
68
  color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
68
69
  color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
69
70
  color-error: '#e60050'
71
+ color-error-25: 'hsl(339.1304347826087, 100%, 25%)'
70
72
  color-error-40: 'hsl(339.1304347826087, 100%, 40%)'
71
73
  color-error-85: 'hsl(339.1304347826087, 100%, 85%)'
72
74
  color-error-95: 'hsl(339.1304347826087, 100%, 95%)'
@@ -239,8 +241,12 @@ states:
239
241
  description: 'When the element is currently selected to receive input'
240
242
  readonly:
241
243
  description: 'When the element can not be modified'
244
+ info:
245
+ description: 'When the element has an info state'
242
246
  warning:
243
- description: 'When the element has slightly wrong input'
247
+ description: 'When the element shows a warning state'
248
+ success:
249
+ description: 'When the element has a successful state'
244
250
  error:
245
251
  description: 'When the element has invalid input'
246
252
  selected:
@@ -251,6 +257,8 @@ states:
251
257
  description: 'When the element is raised'
252
258
  highlighted:
253
259
  description: 'When the element is highlighted'
260
+ condensed:
261
+ description: 'When the element is condensed'
254
262
 
255
263
  variants:
256
264
  h1:
@@ -299,6 +307,10 @@ componentGroups:
299
307
  description: 'Input elements'
300
308
  tag:
301
309
  description: 'Tag elements'
310
+ tag-remove-icon:
311
+ description: 'Tag remove icon elements'
312
+ tag-drag-icon:
313
+ description: 'Tag drag icon elements'
302
314
  tag-warning:
303
315
  description: 'Tag elements with type warning'
304
316
  text:
@@ -347,6 +359,28 @@ componentGroups:
347
359
  description: 'Localized rich text input label elements'
348
360
  localized-multiline-text-input-label:
349
361
  description: 'Localized multiline text input label elements'
362
+ tooltip:
363
+ description: 'Tooltip elements'
364
+ view-switcher:
365
+ description: 'View switcher elements'
366
+ view-switcher-icon:
367
+ description: 'View switcher icon elements'
368
+ content-notification:
369
+ description: 'Content notification elements'
370
+ content-notification-icon:
371
+ description: 'Content notification icon elements'
372
+ select-input-icon:
373
+ description: 'Select input icon elements'
374
+ clear-input-icon:
375
+ description: 'clear input icon elements'
376
+ search-input-icon:
377
+ description: 'search input icon elements'
378
+ select-input-menu:
379
+ description: 'select input menu elements'
380
+ select-input-options:
381
+ description: 'select input options element'
382
+ group-heading-select-input-options:
383
+ description: 'group heading select input options element'
350
384
 
351
385
  decisionGroupsByTheme:
352
386
  default:
@@ -387,10 +421,14 @@ decisionGroupsByTheme:
387
421
  choice: color-accent-98
388
422
  background-color-for-input-when-hovered:
389
423
  description: ''
390
- choice: 'unset'
424
+ choice: color-surface
391
425
  background-color-for-input-when-focused:
392
426
  description: ''
393
- choice: 'unset'
427
+ choice: color-surface
428
+ background-color-for-input-when-readonly:
429
+ choice: color-surface
430
+ background-color-for-input-when-active:
431
+ choice: color-accent-95
394
432
  background-color-for-table-cell-when-hovered:
395
433
  choice: color-neutral-90
396
434
  background-color-for-table-header:
@@ -421,6 +459,32 @@ decisionGroupsByTheme:
421
459
  background-color-for-localized-multiline-text-input-label-when-disabled:
422
460
  description: ''
423
461
  choice: color-accent-98
462
+ background-color-for-tooltip:
463
+ choice: color-accent
464
+ background-color-for-view-switcher:
465
+ choice: color-surface
466
+ background-color-for-view-switcher-when-disabled:
467
+ choice: color-accent-98
468
+ background-color-for-view-switcher-when-selected:
469
+ choice: color-neutral-95
470
+ background-color-for-view-switcher-when-hovered:
471
+ choice: color-neutral-90
472
+ background-color-for-content-notification-when-error:
473
+ choice: color-surface
474
+ background-color-for-content-notification-when-info:
475
+ choice: color-surface
476
+ background-color-for-content-notification-when-warning:
477
+ choice: color-surface
478
+ background-color-for-content-notification-when-success:
479
+ choice: color-surface
480
+ background-color-for-content-notification-icon-when-error:
481
+ choice: color-error
482
+ background-color-for-content-notification-icon-when-info:
483
+ choice: color-info
484
+ background-color-for-content-notification-icon-when-warning:
485
+ choice: color-warning
486
+ background-color-for-content-notification-icon-when-success:
487
+ choice: color-primary
424
488
 
425
489
  borders:
426
490
  label: Borders
@@ -436,6 +500,8 @@ decisionGroupsByTheme:
436
500
  choice: 'none'
437
501
  border-for-collapsible-panel-header-icon-when-disabled:
438
502
  choice: '1px solid var(--color-neutral)'
503
+ border-for-view-switcher:
504
+ choice: 'none'
439
505
 
440
506
  borderColors:
441
507
  label: Border Colors
@@ -471,6 +537,8 @@ decisionGroupsByTheme:
471
537
  border-color-for-tag-when-focused:
472
538
  description: ''
473
539
  choice: color-primary
540
+ border-color-for-tag-when-hovered:
541
+ choice: color-warning
474
542
  border-color-for-button-as-icon:
475
543
  choice: color-surface
476
544
  border-color-for-button-as-icon-as-info:
@@ -503,6 +571,24 @@ decisionGroupsByTheme:
503
571
  choice: color-neutral
504
572
  border-color-for-localized-multiline-text-input-label-when-readonly:
505
573
  choice: color-neutral
574
+ border-color-for-content-notification-when-error:
575
+ choice: color-error
576
+ border-color-for-content-notification-when-info:
577
+ choice: color-info
578
+ border-color-for-content-notification-when-warning:
579
+ choice: color-warning
580
+ border-color-for-content-notification-when-success:
581
+ choice: color-primary
582
+ border-color-for-group-heading-select-input-options:
583
+ choice: color-neutral
584
+ border-color-for-select-input-menu:
585
+ choice: color-primary
586
+ border-color-for-select-input-when-readonly:
587
+ choice: color-neutral
588
+ border-color-for-select-input-menu-when-warning:
589
+ choice: color-warning
590
+ border-color-for-select-input-menu-when-error:
591
+ choice: color-error
506
592
 
507
593
  borderRadiuses:
508
594
  label: Border Radius
@@ -530,6 +616,12 @@ decisionGroupsByTheme:
530
616
  choice: border-radius-6
531
617
  border-radius-for-stamp:
532
618
  choice: border-radius-2
619
+ border-radius-for-view-switcher:
620
+ choice: border-radius-6
621
+ border-radius-for-content-notification:
622
+ choice: '0 var(--border-radius-6) var(--border-radius-6) 0'
623
+ border-radius-for-content-notification-icon:
624
+ choice: 'var(--border-radius-6) 0 0 var(--border-radius-6)'
533
625
 
534
626
  borderWidths:
535
627
  label: Border width
@@ -543,6 +635,14 @@ decisionGroupsByTheme:
543
635
  choice: border-width-1
544
636
  border-width-for-input-when-focused:
545
637
  choice: border-width-1
638
+ border-width-for-tag:
639
+ choice: border-width-1
640
+ border-width-for-select-input:
641
+ choice: border-width-1
642
+ border-width-for-content-notification-icon:
643
+ choice: '0px'
644
+ border-left-width-for-content-notification:
645
+ choice: border-width-1
546
646
 
547
647
  boxShadows:
548
648
  label: Box shadows
@@ -550,6 +650,12 @@ decisionGroupsByTheme:
550
650
  decisions:
551
651
  box-shadow-for-datetime-input-when-hovered:
552
652
  choice: 'inset 0 0 0 2px'
653
+ box-shadow-for-view-switcher:
654
+ choice: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)
655
+ box-shadow-for-view-switcher-when-selected:
656
+ choice: shadow-9
657
+ box-shadow-for-select-input-when-focused:
658
+ choice: 'inset 0 0 0 2px'
553
659
 
554
660
  fontColors:
555
661
  label: Font Colors
@@ -576,6 +682,12 @@ decisionGroupsByTheme:
576
682
  font-color-for-tag:
577
683
  description: ''
578
684
  choice: color-solid
685
+ font-color-for-tag-remove-icon:
686
+ choice: color-solid
687
+ font-color-for-tag-drag-icon:
688
+ choice: color-solid
689
+ font-color-for-tag-remove-icon-when-hovered:
690
+ choice: color-warning
579
691
  font-color-for-tag-when-disabled:
580
692
  description: ''
581
693
  choice: color-neutral-60
@@ -586,6 +698,40 @@ decisionGroupsByTheme:
586
698
  choice: color-surface
587
699
  font-color-for-localized-multiline-text-input-label:
588
700
  choice: color-neutral-60
701
+ font-color-for-view-switcher:
702
+ choice: color-solid
703
+ font-color-for-view-switcher-when-disabled:
704
+ choice: color-neutral-60
705
+ font-color-for-view-switcher-when-selected:
706
+ choice: color-solid
707
+ font-color-for-clear-input-icon:
708
+ choice: color-solid
709
+ font-color-for-clear-input-icon-when-hovered:
710
+ choice: color-warning
711
+ font-color-for-content-notification:
712
+ choice: color-solid
713
+ font-color-for-content-notification-icon-when-error:
714
+ choice: color-surface
715
+ font-color-for-content-notification-icon-when-warning:
716
+ choice: color-surface
717
+ font-color-for-content-notification-icon-when-success:
718
+ choice: color-surface
719
+ font-color-for-content-notification-icon-when-info:
720
+ choice: color-surface
721
+ font-color-for-search-input-icon:
722
+ choice: color-solid
723
+ font-color-for-search-input-icon-when-hovered:
724
+ choice: color-solid
725
+ font-color-for-select-input-icon:
726
+ choice: color-solid
727
+ font-color-for-select-input-when-error:
728
+ choice: color-solid
729
+ font-color-for-select-input-when-warning:
730
+ choice: color-solid
731
+ font-color-for-select-input-icon-when-error:
732
+ choice: color-solid
733
+ font-color-for-select-input-icon-when-warning:
734
+ choice: color-solid
589
735
 
590
736
  heights:
591
737
  label: Height
@@ -603,6 +749,10 @@ decisionGroupsByTheme:
603
749
  choice: '16px'
604
750
  height-for-input:
605
751
  choice: '32px'
752
+ height-for-view-switcher:
753
+ choice: '32px'
754
+ height-for-view-switcher-when-condensed:
755
+ choice: '24px'
606
756
 
607
757
  widths:
608
758
  label: Width
@@ -658,6 +808,8 @@ decisionGroupsByTheme:
658
808
  choice: font-size-30
659
809
  font-size-for-stamp:
660
810
  choice: font-size-30
811
+ font-size-for-view-switcher:
812
+ choice: font-size-30
661
813
  font-size-for-table:
662
814
  choice: font-size-30
663
815
  font-size-for-avatar-as-small:
@@ -668,6 +820,8 @@ decisionGroupsByTheme:
668
820
  choice: font-size-78
669
821
  font-size-for-localized-multiline-text-input-label:
670
822
  choice: font-size-15
823
+ font-size-for-content-notification:
824
+ choice: font-size-30
671
825
 
672
826
  iconColors:
673
827
  label: Icon colors
@@ -742,6 +896,14 @@ decisionGroupsByTheme:
742
896
  choice: spacing-20
743
897
  margin-for-table-as-condensed:
744
898
  choice: spacing-20
899
+ margin-for-view-switcher-icon:
900
+ choice: '0 var(--spacing-10) 0 0'
901
+ margin-for-group-heading-select-input-options:
902
+ choice: spacing-10
903
+ margin-for-select-input-icon:
904
+ choice: spacing-10
905
+ margin-left-for-select-input-icon:
906
+ choice: 'inherit'
745
907
 
746
908
  paddings:
747
909
  label: Paddings
@@ -787,6 +949,30 @@ decisionGroupsByTheme:
787
949
  choice: '0 var(--spacing-20)'
788
950
  padding-for-localized-multiline-text-input-label:
789
951
  choice: '0 var(--spacing-20)'
952
+ padding-for-tag-remove-icon:
953
+ choice: '0 var(--spacing-10)'
954
+ padding-for-tooltip:
955
+ choice: 'var(--spacing-10) var(--spacing-20)'
956
+ padding-for-view-switcher:
957
+ choice: '0 var(--spacing-30) 0 var(--spacing-30)'
958
+ padding-for-view-switcher-when-condensed:
959
+ choice: '0 var(--spacing-20) 0 var(--spacing-20)'
960
+ padding-for-content-notification:
961
+ choice: 'var(--spacing-20)'
962
+ padding-for-content-notification-icon:
963
+ choice: 'var(--spacing-20) var(--spacing-30)'
964
+ padding-left-for-select-input-options:
965
+ choice: spacing-20
966
+ padding-right-for-select-input-options:
967
+ choice: spacing-20
968
+ padding-top-for-select-input-options:
969
+ choice: spacing-10
970
+ padding-bottom-for-select-input-options:
971
+ choice: spacing-10
972
+ padding-for-group-heading-select-input-options:
973
+ choice: spacing-20
974
+ padding-for-select-input-menu:
975
+ choice: 'inherit'
790
976
 
791
977
  shadows:
792
978
  label: Shadows
@@ -816,6 +1002,10 @@ decisionGroupsByTheme:
816
1002
  choice: shadow-0
817
1003
  shadow-for-input-when-warning:
818
1004
  choice: shadow-0
1005
+ shadow-for-tooltip:
1006
+ choice: shadow-15
1007
+ shadow-for-select-input-menu:
1008
+ choice: shadow-7
819
1009
 
820
1010
  test:
821
1011
  backgroundColors:
@@ -851,9 +1041,13 @@ decisionGroupsByTheme:
851
1041
  background-color-for-collapsible-panel-header-icon-when-disabled:
852
1042
  choice: color-surface
853
1043
  background-color-for-input-when-hovered:
854
- choice: color-neutral-95
1044
+ choice: color-neutral-98
855
1045
  background-color-for-input-when-disabled:
856
1046
  choice: color-neutral-95
1047
+ background-color-for-input-when-active:
1048
+ choice: color-info-95
1049
+ background-color-for-input-when-readonly:
1050
+ choice: color-neutral-95
857
1051
  background-color-for-avatar:
858
1052
  description: ''
859
1053
  choice: color-accent
@@ -867,6 +1061,32 @@ decisionGroupsByTheme:
867
1061
  choice: color-surface
868
1062
  background-color-for-localized-multiline-text-input-label-when-disabled:
869
1063
  choice: color-neutral-95
1064
+ background-color-for-tooltip:
1065
+ choice: color-accent-10
1066
+ background-color-for-view-switcher-when-disabled:
1067
+ choice: color-surface
1068
+ background-color-for-view-switcher-when-selected:
1069
+ choice: color-neutral-95
1070
+ background-color-for-view-switcher-when-hovered:
1071
+ choice: color-neutral-95
1072
+ background-color-for-content-notification-when-error:
1073
+ choice: color-error-95
1074
+ background-color-for-content-notification-when-info:
1075
+ choice: color-info-95
1076
+ background-color-for-content-notification-when-warning:
1077
+ choice: color-warning-95
1078
+ background-color-for-content-notification-when-success:
1079
+ choice: color-primary-95
1080
+ background-color-for-content-notification-icon-when-error:
1081
+ choice: color-error-95
1082
+ background-color-for-content-notification-icon-when-info:
1083
+ choice: color-info-95
1084
+ background-color-for-content-notification-icon-when-warning:
1085
+ choice: color-warning-95
1086
+ background-color-for-content-notification-icon-when-success:
1087
+ choice: color-primary-95
1088
+ background-color-for-select-input-option-when-hovered:
1089
+ choice: color-neutral-98
870
1090
 
871
1091
  borders:
872
1092
  label: Borders
@@ -882,6 +1102,8 @@ decisionGroupsByTheme:
882
1102
  choice: '1px solid var(--color-neutral-90)'
883
1103
  border-for-collapsible-panel-header-icon-when-disabled:
884
1104
  choice: 'none'
1105
+ border-for-view-switcher:
1106
+ choice: '1px solid var(--color-neutral)'
885
1107
 
886
1108
  borderColors:
887
1109
  label: Border Colors
@@ -929,6 +1151,28 @@ decisionGroupsByTheme:
929
1151
  choice: color-neutral-85
930
1152
  border-color-for-localized-multiline-text-input-label-when-readonly:
931
1153
  choice: color-neutral-90
1154
+ border-color-for-tag:
1155
+ choice: color-neutral
1156
+ border-color-for-tag-when-hovered:
1157
+ choice: color-neutral
1158
+ border-color-for-content-notification-when-error:
1159
+ choice: color-error-85
1160
+ border-color-for-content-notification-when-info:
1161
+ choice: color-info-85
1162
+ border-color-for-content-notification-when-warning:
1163
+ choice: color-warning-85
1164
+ border-color-for-content-notification-when-success:
1165
+ choice: color-primary-85
1166
+ border-color-for-group-heading-select-input-options:
1167
+ choice: color-neutral-90
1168
+ border-color-for-select-input-menu:
1169
+ choice: color-surface
1170
+ border-color-for-select-input-when-readonly:
1171
+ choice: color-neutral-95
1172
+ border-color-for-select-input-menu-when-warning:
1173
+ choice: color-surface
1174
+ border-color-for-select-input-menu-when-error:
1175
+ choice: color-surface
932
1176
 
933
1177
  borderRadiuses:
934
1178
  label: Border radiuses
@@ -952,6 +1196,25 @@ decisionGroupsByTheme:
952
1196
  choice: border-radius-4
953
1197
  border-radius-for-stamp:
954
1198
  choice: border-radius-20
1199
+ border-radius-for-view-switcher:
1200
+ choice: border-radius-4
1201
+ border-radius-for-content-notification:
1202
+ choice: '0 var(--border-radius-4) var(--border-radius-4) 0'
1203
+ border-radius-for-content-notification-icon:
1204
+ choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
1205
+
1206
+ borderWidths:
1207
+ label: Border width
1208
+ prefix: border-width
1209
+ decisions:
1210
+ border-width-for-tag:
1211
+ choice: '1px 1px 1px 0'
1212
+ border-width-for-content-notification-icon:
1213
+ choice: border-width-1
1214
+ border-left-width-for-content-notification:
1215
+ choice: '0px'
1216
+ border-width-for-select-input:
1217
+ choice: border-width-2
955
1218
 
956
1219
  boxShadows:
957
1220
  label: Box shadows
@@ -959,6 +1222,12 @@ decisionGroupsByTheme:
959
1222
  decisions:
960
1223
  box-shadow-for-datetime-input-when-hovered:
961
1224
  choice: 'inset 0 0 0 1px'
1225
+ box-shadow-for-view-switcher:
1226
+ choice: shadow-0
1227
+ box-shadow-for-view-switcher-when-selected:
1228
+ choice: shadow-0
1229
+ box-shadow-for-select-input-when-focused:
1230
+ choice: 'inset 0 0 0 1px'
962
1231
 
963
1232
  fontColors:
964
1233
  label: Font Colors
@@ -968,6 +1237,40 @@ decisionGroupsByTheme:
968
1237
  choice: color-neutral-40
969
1238
  font-color-for-input-when-readonly:
970
1239
  choice: color-neutral-40
1240
+ font-color-for-tag-remove-icon:
1241
+ choice: color-neutral-40
1242
+ font-color-for-tag-drag-icon:
1243
+ choice: color-neutral-40
1244
+ font-color-for-tag-remove-icon-when-hovered:
1245
+ choice: color-error
1246
+ font-color-for-view-switcher:
1247
+ choice: color-neutral-40
1248
+ font-color-for-content-notification-icon-when-error:
1249
+ choice: color-error
1250
+ font-color-for-content-notification-icon-when-warning:
1251
+ choice: color-warning
1252
+ font-color-for-content-notification-icon-when-success:
1253
+ choice: color-primary
1254
+ font-color-for-content-notification-icon-when-info:
1255
+ choice: color-info
1256
+ font-color-for-clear-input-icon-when-hovered:
1257
+ choice: color-error
1258
+ font-color-for-clear-input-icon:
1259
+ choice: color-neutral-40
1260
+ font-color-for-search-input-icon:
1261
+ choice: color-neutral-60
1262
+ font-color-for-search-input-icon-when-hovered:
1263
+ choice: color-primary
1264
+ font-color-for-select-input-icon:
1265
+ choice: color-neutral-60
1266
+ font-color-for-select-input-when-error:
1267
+ choice: color-error
1268
+ font-color-for-select-input-when-warning:
1269
+ choice: color-warning
1270
+ font-color-for-select-input-icon-when-error:
1271
+ choice: color-error
1272
+ font-color-for-select-input-icon-when-warning:
1273
+ choice: color-warning
971
1274
 
972
1275
  fontSizes:
973
1276
  label: Font Sizes
@@ -1008,6 +1311,8 @@ decisionGroupsByTheme:
1008
1311
  choice: 'inherit'
1009
1312
  font-size-for-stamp:
1010
1313
  choice: font-size-20
1314
+ font-size-for-view-switcher:
1315
+ choice: font-size-20
1011
1316
  font-size-for-table:
1012
1317
  choice: font-size-20
1013
1318
  font-size-for-avatar-as-small:
@@ -1091,6 +1396,10 @@ decisionGroupsByTheme:
1091
1396
  choice: '16px'
1092
1397
  height-for-input:
1093
1398
  choice: '40px'
1399
+ height-for-view-switcher:
1400
+ choice: '40px'
1401
+ height-for-view-switcher-when-condensed:
1402
+ choice: '32px'
1094
1403
 
1095
1404
  iconColors:
1096
1405
  label: Icon colors
@@ -1116,6 +1425,14 @@ decisionGroupsByTheme:
1116
1425
  choice: spacing-30
1117
1426
  margin-for-table-cell-as-condensed:
1118
1427
  choice: spacing-20
1428
+ margin-for-view-switcher-icon:
1429
+ choice: '0 var(--spacing-20) 0 0'
1430
+ margin-for-group-heading-select-input-options:
1431
+ choice: spacing-20
1432
+ margin-for-select-input-icon:
1433
+ choice: spacing-20
1434
+ margin-left-for-select-input-icon:
1435
+ choice: spacing-20
1119
1436
 
1120
1437
  paddings:
1121
1438
  label: Paddings
@@ -1161,6 +1478,31 @@ decisionGroupsByTheme:
1161
1478
  choice: spacing-20
1162
1479
  padding-for-localized-multiline-text-input-label:
1163
1480
  choice: '0 12px'
1481
+ padding-for-tag-remove-icon:
1482
+ choice: '0 12px'
1483
+ padding-for-tooltip:
1484
+ choice: 'var(--spacing-20) 12px'
1485
+ padding-for-view-switcher:
1486
+ choice: '0 var(--spacing-30) 0 var(--spacing-30)'
1487
+ padding-for-view-switcher-when-condensed:
1488
+ choice: '0 12px 0 12px'
1489
+ padding-for-content-notification:
1490
+ choice: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)'
1491
+ padding-for-content-notification-icon:
1492
+ choice: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)'
1493
+ padding-left-for-select-input-options:
1494
+ choice: spacing-30
1495
+ padding-right-for-select-input-options:
1496
+ choice: spacing-30
1497
+ padding-top-for-select-input-options:
1498
+ choice: spacing-20
1499
+ padding-bottom-for-select-input-options:
1500
+ choice: spacing-20
1501
+ padding-for-group-heading-select-input-options:
1502
+ choice: spacing-30
1503
+ padding-for-select-input-menu:
1504
+ choice: 'var(--spacing-10) 0'
1505
+
1164
1506
  shadows:
1165
1507
  label: Shadows
1166
1508
  prefix: shadow
@@ -1185,6 +1527,10 @@ decisionGroupsByTheme:
1185
1527
  choice: 'inset 0 0 0 1px var(--color-error)'
1186
1528
  shadow-for-input-when-warning:
1187
1529
  choice: 'inset 0 0 0 1px var(--color-warning)'
1530
+ shadow-for-tooltip:
1531
+ choice: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)'
1532
+ shadow-for-select-input-menu:
1533
+ choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
1188
1534
 
1189
1535
  # These tokens are deprecated as they don't follow our naming patterns.
1190
1536
  # 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.11.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.11.0",
28
+ "@commercetools-uikit/avatar": "15.11.0",
29
+ "@commercetools-uikit/buttons": "15.11.0",
30
+ "@commercetools-uikit/card": "15.11.0",
31
+ "@commercetools-uikit/collapsible": "15.11.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.11.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.11.0",
34
+ "@commercetools-uikit/constraints": "15.11.0",
35
+ "@commercetools-uikit/data-table": "15.11.0",
36
+ "@commercetools-uikit/data-table-manager": "15.11.0",
37
+ "@commercetools-uikit/design-system": "15.11.0",
38
+ "@commercetools-uikit/field-errors": "15.11.0",
39
+ "@commercetools-uikit/field-label": "15.11.0",
40
+ "@commercetools-uikit/fields": "15.11.0",
41
+ "@commercetools-uikit/grid": "15.11.0",
42
+ "@commercetools-uikit/hooks": "15.11.0",
43
+ "@commercetools-uikit/i18n": "15.11.0",
44
+ "@commercetools-uikit/icons": "15.11.0",
45
+ "@commercetools-uikit/inputs": "15.11.0",
46
+ "@commercetools-uikit/label": "15.11.0",
47
+ "@commercetools-uikit/link": "15.11.0",
48
+ "@commercetools-uikit/loading-spinner": "15.11.0",
49
+ "@commercetools-uikit/messages": "15.11.0",
50
+ "@commercetools-uikit/notifications": "15.11.0",
51
+ "@commercetools-uikit/pagination": "15.11.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.11.0",
53
+ "@commercetools-uikit/spacings": "15.11.0",
54
+ "@commercetools-uikit/stamp": "15.11.0",
55
+ "@commercetools-uikit/tag": "15.11.0",
56
+ "@commercetools-uikit/text": "15.11.0",
57
+ "@commercetools-uikit/tooltip": "15.11.0",
58
+ "@commercetools-uikit/utils": "15.11.0",
59
+ "@commercetools-uikit/view-switcher": "15.11.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"