@commercetools-frontend/ui-kit 15.10.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.
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 +58 -1
  5. package/materials/custom-properties.json +55 -1
  6. package/materials/internals/definition.yaml +231 -3
  7. package/package.json +34 -34
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.10.0";
83
+ var version = "15.11.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.10.0";
83
+ var version = "15.11.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.10.0";
36
+ var version = "15.11.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -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%);
@@ -161,6 +163,8 @@
161
163
  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
162
164
  --background-color-for-input-when-hovered: #fff;
163
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%);
@@ -197,6 +201,14 @@
197
201
  );
198
202
  --background-color-for-view-switcher-when-selected: hsl(0, 0%, 95%);
199
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;
200
212
  --border-for-button-as-secondary: none;
201
213
  --border-for-button-as-secondary-when-hovered: none;
202
214
  --border-for-button-as-secondary-when-active: none;
@@ -231,6 +243,15 @@
231
243
  --border-color-for-stamp-as-secondary: hsl(0, 0%, 60%);
232
244
  --border-color-for-localized-multiline-text-input-label: #ccc;
233
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;
234
255
  --border-radius-for-button-as-big: 6px;
235
256
  --border-radius-for-button-as-small: 4px;
236
257
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -242,17 +263,25 @@
242
263
  --border-radius-for-table-manager-droppable-list: 6px;
243
264
  --border-radius-for-stamp: 2px;
244
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);
245
270
  --border-width-for-input: 1px;
246
271
  --border-width-for-input-when-warning: 1px;
247
272
  --border-width-for-input-when-error: 1px;
248
273
  --border-width-for-input-when-focused: 1px;
249
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;
250
278
  --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
251
279
  --box-shadow-for-view-switcher: 0 1px 1px 0 rgba(0, 0, 0, 0.24),
252
280
  0 -1px 1px 0 rgba(0, 0, 0, 0.12);
253
281
  --box-shadow-for-view-switcher-when-selected: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
254
282
  inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
255
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;
256
285
  --font-color-for-text: #1a1a1a;
257
286
  --font-color-for-input: #1a1a1a;
258
287
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -270,6 +299,20 @@
270
299
  --font-color-for-view-switcher: #1a1a1a;
271
300
  --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%);
272
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;
273
316
  --height-for-button-as-big: 32px;
274
317
  --height-for-button-as-small: 24px;
275
318
  --height-for-button-as-icon-as-big: 32px;
@@ -298,6 +341,7 @@
298
341
  --font-size-for-avatar-as-medium: 1.5rem;
299
342
  --font-size-for-avatar-as-big: 3rem;
300
343
  --font-size-for-localized-multiline-text-input-label: 0.9231rem;
344
+ --font-size-for-content-notification: 1rem;
301
345
  --icon-color-for-datetime-input-icon: #1a1a1a;
302
346
  --icon-color-for-datetime-input-icon-when-hovered: #f16d0e;
303
347
  --line-height-for-text-as-h1: inherit;
@@ -319,6 +363,9 @@
319
363
  --margin-for-table-header: 8px;
320
364
  --margin-for-table-as-condensed: 8px;
321
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;
322
369
  --padding-for-stamp: var(--spacing-10) var(--spacing-20);
323
370
  --padding-for-stamp-as-condensed: 1px var(--spacing-10);
324
371
  --padding-for-tag: 5px var(--spacing-20);
@@ -345,6 +392,14 @@
345
392
  --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
346
393
  --padding-for-view-switcher-when-condensed: 0 var(--spacing-20) 0
347
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;
348
403
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
349
404
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
350
405
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -365,6 +420,8 @@
365
420
  --shadow-for-input-when-warning: none;
366
421
  --shadow-for-tooltip: 0 2px 2px rgba(0, 0, 0, 0.24),
367
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);
368
425
  --font-size-m: 1rem;
369
426
  --big-button-height: 32px;
370
427
  --small-button-height: 24px;
package/materials/custom-properties.json CHANGED
@@ -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%)",
@@ -141,6 +143,8 @@
141
143
  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
142
144
  "--background-color-for-input-when-hovered": "#fff",
143
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%)",
@@ -157,6 +161,14 @@
157
161
  "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)",
158
162
  "--background-color-for-view-switcher-when-selected": "hsl(0, 0%, 95%)",
159
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",
160
172
  "--border-for-button-as-secondary": "none",
161
173
  "--border-for-button-as-secondary-when-hovered": "none",
162
174
  "--border-for-button-as-secondary-when-active": "none",
@@ -190,6 +202,15 @@
190
202
  "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 60%)",
191
203
  "--border-color-for-localized-multiline-text-input-label": "#ccc",
192
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",
193
214
  "--border-radius-for-button-as-big": "6px",
194
215
  "--border-radius-for-button-as-small": "4px",
195
216
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -201,14 +222,20 @@
201
222
  "--border-radius-for-table-manager-droppable-list": "6px",
202
223
  "--border-radius-for-stamp": "2px",
203
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)",
204
227
  "--border-width-for-input": "1px",
205
228
  "--border-width-for-input-when-warning": "1px",
206
229
  "--border-width-for-input-when-error": "1px",
207
230
  "--border-width-for-input-when-focused": "1px",
208
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",
209
235
  "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
210
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)",
211
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",
212
239
  "--font-color-for-text": "#1a1a1a",
213
240
  "--font-color-for-input": "#1a1a1a",
214
241
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -226,6 +253,20 @@
226
253
  "--font-color-for-view-switcher": "#1a1a1a",
227
254
  "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)",
228
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",
229
270
  "--height-for-button-as-big": "32px",
230
271
  "--height-for-button-as-small": "24px",
231
272
  "--height-for-button-as-icon-as-big": "32px",
@@ -254,6 +295,7 @@
254
295
  "--font-size-for-avatar-as-medium": "1.5rem",
255
296
  "--font-size-for-avatar-as-big": "3rem",
256
297
  "--font-size-for-localized-multiline-text-input-label": "0.9231rem",
298
+ "--font-size-for-content-notification": "1rem",
257
299
  "--icon-color-for-datetime-input-icon": "#1a1a1a",
258
300
  "--icon-color-for-datetime-input-icon-when-hovered": "#f16d0e",
259
301
  "--line-height-for-text-as-h1": "inherit",
@@ -275,6 +317,9 @@
275
317
  "--margin-for-table-header": "8px",
276
318
  "--margin-for-table-as-condensed": "8px",
277
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",
278
323
  "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
279
324
  "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
280
325
  "--padding-for-tag": "5px var(--spacing-20)",
@@ -299,6 +344,14 @@
299
344
  "--padding-for-tooltip": "var(--spacing-10) var(--spacing-20)",
300
345
  "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)",
301
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",
302
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)",
303
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)",
304
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)",
@@ -311,6 +364,7 @@
311
364
  "--shadow-for-input-when-error": "none",
312
365
  "--shadow-for-input-when-warning": "none",
313
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)",
314
368
  "--font-size-m": "1rem",
315
369
  "--big-button-height": "32px",
316
370
  "--small-button-height": "24px",
package/materials/internals/definition.yaml CHANGED
@@ -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:
@@ -359,6 +365,22 @@ componentGroups:
359
365
  description: 'View switcher elements'
360
366
  view-switcher-icon:
361
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'
362
384
 
363
385
  decisionGroupsByTheme:
364
386
  default:
@@ -403,6 +425,10 @@ decisionGroupsByTheme:
403
425
  background-color-for-input-when-focused:
404
426
  description: ''
405
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
406
432
  background-color-for-table-cell-when-hovered:
407
433
  choice: color-neutral-90
408
434
  background-color-for-table-header:
@@ -443,6 +469,22 @@ decisionGroupsByTheme:
443
469
  choice: color-neutral-95
444
470
  background-color-for-view-switcher-when-hovered:
445
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
446
488
 
447
489
  borders:
448
490
  label: Borders
@@ -529,6 +571,24 @@ decisionGroupsByTheme:
529
571
  choice: color-neutral
530
572
  border-color-for-localized-multiline-text-input-label-when-readonly:
531
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
532
592
 
533
593
  borderRadiuses:
534
594
  label: Border Radius
@@ -558,6 +618,10 @@ decisionGroupsByTheme:
558
618
  choice: border-radius-2
559
619
  border-radius-for-view-switcher:
560
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)'
561
625
 
562
626
  borderWidths:
563
627
  label: Border width
@@ -573,6 +637,12 @@ decisionGroupsByTheme:
573
637
  choice: border-width-1
574
638
  border-width-for-tag:
575
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
576
646
 
577
647
  boxShadows:
578
648
  label: Box shadows
@@ -584,6 +654,8 @@ decisionGroupsByTheme:
584
654
  choice: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)
585
655
  box-shadow-for-view-switcher-when-selected:
586
656
  choice: shadow-9
657
+ box-shadow-for-select-input-when-focused:
658
+ choice: 'inset 0 0 0 2px'
587
659
 
588
660
  fontColors:
589
661
  label: Font Colors
@@ -632,6 +704,34 @@ decisionGroupsByTheme:
632
704
  choice: color-neutral-60
633
705
  font-color-for-view-switcher-when-selected:
634
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
635
735
 
636
736
  heights:
637
737
  label: Height
@@ -720,6 +820,8 @@ decisionGroupsByTheme:
720
820
  choice: font-size-78
721
821
  font-size-for-localized-multiline-text-input-label:
722
822
  choice: font-size-15
823
+ font-size-for-content-notification:
824
+ choice: font-size-30
723
825
 
724
826
  iconColors:
725
827
  label: Icon colors
@@ -796,6 +898,12 @@ decisionGroupsByTheme:
796
898
  choice: spacing-20
797
899
  margin-for-view-switcher-icon:
798
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'
799
907
 
800
908
  paddings:
801
909
  label: Paddings
@@ -849,6 +957,22 @@ decisionGroupsByTheme:
849
957
  choice: '0 var(--spacing-30) 0 var(--spacing-30)'
850
958
  padding-for-view-switcher-when-condensed:
851
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'
852
976
 
853
977
  shadows:
854
978
  label: Shadows
@@ -880,6 +1004,8 @@ decisionGroupsByTheme:
880
1004
  choice: shadow-0
881
1005
  shadow-for-tooltip:
882
1006
  choice: shadow-15
1007
+ shadow-for-select-input-menu:
1008
+ choice: shadow-7
883
1009
 
884
1010
  test:
885
1011
  backgroundColors:
@@ -915,9 +1041,13 @@ decisionGroupsByTheme:
915
1041
  background-color-for-collapsible-panel-header-icon-when-disabled:
916
1042
  choice: color-surface
917
1043
  background-color-for-input-when-hovered:
918
- choice: color-neutral-95
1044
+ choice: color-neutral-98
919
1045
  background-color-for-input-when-disabled:
920
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
921
1051
  background-color-for-avatar:
922
1052
  description: ''
923
1053
  choice: color-accent
@@ -939,6 +1069,24 @@ decisionGroupsByTheme:
939
1069
  choice: color-neutral-95
940
1070
  background-color-for-view-switcher-when-hovered:
941
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
942
1090
 
943
1091
  borders:
944
1092
  label: Borders
@@ -1007,6 +1155,24 @@ decisionGroupsByTheme:
1007
1155
  choice: color-neutral
1008
1156
  border-color-for-tag-when-hovered:
1009
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
1010
1176
 
1011
1177
  borderRadiuses:
1012
1178
  label: Border radiuses
@@ -1032,6 +1198,10 @@ decisionGroupsByTheme:
1032
1198
  choice: border-radius-20
1033
1199
  border-radius-for-view-switcher:
1034
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)'
1035
1205
 
1036
1206
  borderWidths:
1037
1207
  label: Border width
@@ -1039,6 +1209,12 @@ decisionGroupsByTheme:
1039
1209
  decisions:
1040
1210
  border-width-for-tag:
1041
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
1042
1218
 
1043
1219
  boxShadows:
1044
1220
  label: Box shadows
@@ -1050,6 +1226,8 @@ decisionGroupsByTheme:
1050
1226
  choice: shadow-0
1051
1227
  box-shadow-for-view-switcher-when-selected:
1052
1228
  choice: shadow-0
1229
+ box-shadow-for-select-input-when-focused:
1230
+ choice: 'inset 0 0 0 1px'
1053
1231
 
1054
1232
  fontColors:
1055
1233
  label: Font Colors
@@ -1067,6 +1245,32 @@ decisionGroupsByTheme:
1067
1245
  choice: color-error
1068
1246
  font-color-for-view-switcher:
1069
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
1070
1274
 
1071
1275
  fontSizes:
1072
1276
  label: Font Sizes
@@ -1223,6 +1427,12 @@ decisionGroupsByTheme:
1223
1427
  choice: spacing-20
1224
1428
  margin-for-view-switcher-icon:
1225
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
1226
1436
 
1227
1437
  paddings:
1228
1438
  label: Paddings
@@ -1276,6 +1486,22 @@ decisionGroupsByTheme:
1276
1486
  choice: '0 var(--spacing-30) 0 var(--spacing-30)'
1277
1487
  padding-for-view-switcher-when-condensed:
1278
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'
1279
1505
 
1280
1506
  shadows:
1281
1507
  label: Shadows
@@ -1303,6 +1529,8 @@ decisionGroupsByTheme:
1303
1529
  choice: 'inset 0 0 0 1px var(--color-warning)'
1304
1530
  shadow-for-tooltip:
1305
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)'
1306
1534
 
1307
1535
  # These tokens are deprecated as they don't follow our naming patterns.
1308
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.10.0",
4
+ "version": "15.11.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,39 +24,39 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.19.0",
26
26
  "@babel/runtime-corejs3": "^7.19.1",
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"
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",