@commercetools-frontend/ui-kit 15.11.2 → 15.13.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.
- package/dist/commercetools-frontend-ui-kit.cjs.dev.js +1 -1
- package/dist/commercetools-frontend-ui-kit.cjs.prod.js +1 -1
- package/dist/commercetools-frontend-ui-kit.esm.js +1 -1
- package/materials/custom-properties.css +40 -1
- package/materials/custom-properties.json +40 -1
- package/materials/internals/definition.yaml +192 -4
- package/package.json +37 -36
|
@@ -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.
|
|
83
|
+
var version = "15.13.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.
|
|
83
|
+
var version = "15.13.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.
|
|
36
|
+
var version = "15.13.0";
|
|
37
37
|
|
|
38
38
|
export { version };
|
|
@@ -139,6 +139,7 @@
|
|
|
139
139
|
--break-point-biggerdesktop: 1280px;
|
|
140
140
|
--break-point-giantdesktop: 1680px;
|
|
141
141
|
--break-point-jumbodesktop: 1920px;
|
|
142
|
+
--align-items-for-select-input-tag: unset;
|
|
142
143
|
--background-color-for-button-when-active: #fff;
|
|
143
144
|
--background-color-for-button-when-hovered: #fff;
|
|
144
145
|
--background-color-for-button-as-primary-when-active: #00b39e;
|
|
@@ -209,6 +210,11 @@
|
|
|
209
210
|
--background-color-for-content-notification-icon-when-info: #078cdf;
|
|
210
211
|
--background-color-for-content-notification-icon-when-warning: #f16d0e;
|
|
211
212
|
--background-color-for-content-notification-icon-when-success: #00b39e;
|
|
213
|
+
--background-color-for-checkbox-input-icon: #fff;
|
|
214
|
+
--background-color-for-checkbox-input-icon-when-disabled: #fff;
|
|
215
|
+
--background-color-for-checkbox-input-icon-when-readonly: #fff;
|
|
216
|
+
--background-color-for-checkbox-input-icon-when-error: #fff;
|
|
217
|
+
--background-color-for-checkbox-input-icon-when-hovered: #fff;
|
|
212
218
|
--border-for-button-as-secondary: none;
|
|
213
219
|
--border-for-button-as-secondary-when-hovered: none;
|
|
214
220
|
--border-for-button-as-secondary-when-active: none;
|
|
@@ -216,6 +222,8 @@
|
|
|
216
222
|
--border-for-collapsible-panel-header-icon-when-disabled: 1px solid
|
|
217
223
|
var(--color-neutral);
|
|
218
224
|
--border-for-view-switcher: none;
|
|
225
|
+
--border-for-select-input-tag: none;
|
|
226
|
+
--border-for-radio-input-option: 1px;
|
|
219
227
|
--border-color-for-input: hsl(0, 0%, 60%);
|
|
220
228
|
--border-color-for-input-when-focused: #00b39e;
|
|
221
229
|
--border-color-for-input-when-disabled: #ccc;
|
|
@@ -252,6 +260,15 @@
|
|
|
252
260
|
--border-color-for-select-input-when-readonly: #ccc;
|
|
253
261
|
--border-color-for-select-input-menu-when-warning: #f16d0e;
|
|
254
262
|
--border-color-for-select-input-menu-when-error: #e60050;
|
|
263
|
+
--border-color-for-checkbox-input-icon: hsl(0, 0%, 60%);
|
|
264
|
+
--border-color-for-checkbox-input-icon-when-disabled: #ccc;
|
|
265
|
+
--border-color-for-checkbox-input-icon-when-readonly: #ccc;
|
|
266
|
+
--border-color-for-checkbox-input-icon-when-error: #e60050;
|
|
267
|
+
--border-color-for-radio-input: #ccc;
|
|
268
|
+
--border-color-for-radio-input-when-disabled: hsl(0, 0%, 60%);
|
|
269
|
+
--border-color-for-radio-input-when-readonly: #ccc;
|
|
270
|
+
--border-color-for-radio-input-when-checked: #ccc;
|
|
271
|
+
--border-color-for-radio-input-when-focused: #00b39e;
|
|
255
272
|
--border-radius-for-button-as-big: 6px;
|
|
256
273
|
--border-radius-for-button-as-small: 4px;
|
|
257
274
|
--border-radius-for-button-as-icon-as-big: 6px;
|
|
@@ -275,6 +292,7 @@
|
|
|
275
292
|
--border-width-for-select-input: 1px;
|
|
276
293
|
--border-width-for-content-notification-icon: 0px;
|
|
277
294
|
--border-left-width-for-content-notification: 1px;
|
|
295
|
+
--border-width-for-checkbox-input-icon: 1px;
|
|
278
296
|
--box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
|
|
279
297
|
--box-shadow-for-view-switcher: 0 1px 1px 0 rgba(0, 0, 0, 0.24),
|
|
280
298
|
0 -1px 1px 0 rgba(0, 0, 0, 0.12);
|
|
@@ -307,12 +325,22 @@
|
|
|
307
325
|
--font-color-for-content-notification-icon-when-success: #fff;
|
|
308
326
|
--font-color-for-content-notification-icon-when-info: #fff;
|
|
309
327
|
--font-color-for-search-input-icon: #1a1a1a;
|
|
310
|
-
--font-color-for-search-input-icon-when-hovered: #
|
|
328
|
+
--font-color-for-search-input-icon-when-hovered: #00b39e;
|
|
311
329
|
--font-color-for-select-input-icon: #1a1a1a;
|
|
312
330
|
--font-color-for-select-input-when-error: #1a1a1a;
|
|
313
331
|
--font-color-for-select-input-when-warning: #1a1a1a;
|
|
314
332
|
--font-color-for-select-input-icon-when-error: #1a1a1a;
|
|
315
333
|
--font-color-for-select-input-icon-when-warning: #1a1a1a;
|
|
334
|
+
--font-color-for-money-input-currency-dropdown-indicator: #1a1a1a;
|
|
335
|
+
--font-color-for-search-input-icon-when-readonly: hsl(0, 0%, 60%);
|
|
336
|
+
--font-color-for-checkbox-input-label: #1a1a1a;
|
|
337
|
+
--font-color-for-checkbox-input-label-when-error: #e60050;
|
|
338
|
+
--font-color-for-checkbox-input-label-when-disabled: hsl(0, 0%, 40%);
|
|
339
|
+
--font-color-for-checkbox-input-label-when-readonly: hsl(0, 0%, 40%);
|
|
340
|
+
--font-color-for-radio-input-when-disabled: hsl(0, 0%, 60%);
|
|
341
|
+
--font-color-for-radio-input-when-error: #e60050;
|
|
342
|
+
--font-color-for-radio-input-when-readonly: hsl(0, 0%, 60%);
|
|
343
|
+
--font-color-for-radio-input-when-warning: #f16d0e;
|
|
316
344
|
--height-for-button-as-big: 32px;
|
|
317
345
|
--height-for-button-as-small: 24px;
|
|
318
346
|
--height-for-button-as-icon-as-big: 32px;
|
|
@@ -321,7 +349,11 @@
|
|
|
321
349
|
--height-for-input: 32px;
|
|
322
350
|
--height-for-view-switcher: 32px;
|
|
323
351
|
--height-for-view-switcher-when-condensed: 24px;
|
|
352
|
+
--height-for-select-input-tag: 26px;
|
|
353
|
+
--height-for-radio-input-option: 16px;
|
|
354
|
+
--height-for-radio-input-option-when-checked: 8px;
|
|
324
355
|
--width-for-avatar-as-medium: 48px;
|
|
356
|
+
--min-width-for-money-input-currency-dropdown: 72px;
|
|
325
357
|
--placeholder-font-color-for-input: hsl(0, 0%, 60%);
|
|
326
358
|
--font-size-for-button: 1rem;
|
|
327
359
|
--font-size-for-input: 1rem;
|
|
@@ -342,6 +374,7 @@
|
|
|
342
374
|
--font-size-for-avatar-as-big: 3rem;
|
|
343
375
|
--font-size-for-localized-multiline-text-input-label: 0.9231rem;
|
|
344
376
|
--font-size-for-content-notification: 1rem;
|
|
377
|
+
--font-size-for-select-input-tag: 0.9231rem;
|
|
345
378
|
--icon-color-for-datetime-input-icon: #1a1a1a;
|
|
346
379
|
--icon-color-for-datetime-input-icon-when-hovered: #f16d0e;
|
|
347
380
|
--line-height-for-text-as-h1: inherit;
|
|
@@ -366,6 +399,10 @@
|
|
|
366
399
|
--margin-for-group-heading-select-input-options: 4px;
|
|
367
400
|
--margin-for-select-input-icon: 4px;
|
|
368
401
|
--margin-left-for-select-input-icon: inherit;
|
|
402
|
+
--margin-right-for-money-input-precision-badge: 4px;
|
|
403
|
+
--margin-right-for-search-input-icon: 8px;
|
|
404
|
+
--margin-right-for-clear-input-icon: 4px;
|
|
405
|
+
--margin-left-for-radio-input-label: 8px;
|
|
369
406
|
--padding-for-stamp: var(--spacing-10) var(--spacing-20);
|
|
370
407
|
--padding-for-stamp-as-condensed: 1px var(--spacing-10);
|
|
371
408
|
--padding-for-tag: 5px var(--spacing-20);
|
|
@@ -400,6 +437,8 @@
|
|
|
400
437
|
--padding-bottom-for-select-input-options: 4px;
|
|
401
438
|
--padding-for-group-heading-select-input-options: 8px;
|
|
402
439
|
--padding-for-select-input-menu: inherit;
|
|
440
|
+
--padding-for-money-input-currency-dropdown: 0 var(--spacing-20);
|
|
441
|
+
--padding-for-selectable-search-input-dropdown: 0 var(--spacing-20);
|
|
403
442
|
--shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
|
|
404
443
|
0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
|
405
444
|
--shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
|
|
@@ -127,6 +127,7 @@
|
|
|
127
127
|
"--break-point-biggerdesktop": "1280px",
|
|
128
128
|
"--break-point-giantdesktop": "1680px",
|
|
129
129
|
"--break-point-jumbodesktop": "1920px",
|
|
130
|
+
"--align-items-for-select-input-tag": "unset",
|
|
130
131
|
"--background-color-for-button-when-active": "#fff",
|
|
131
132
|
"--background-color-for-button-when-hovered": "#fff",
|
|
132
133
|
"--background-color-for-button-as-primary-when-active": "#00b39e",
|
|
@@ -169,12 +170,19 @@
|
|
|
169
170
|
"--background-color-for-content-notification-icon-when-info": "#078cdf",
|
|
170
171
|
"--background-color-for-content-notification-icon-when-warning": "#f16d0e",
|
|
171
172
|
"--background-color-for-content-notification-icon-when-success": "#00b39e",
|
|
173
|
+
"--background-color-for-checkbox-input-icon": "#fff",
|
|
174
|
+
"--background-color-for-checkbox-input-icon-when-disabled": "#fff",
|
|
175
|
+
"--background-color-for-checkbox-input-icon-when-readonly": "#fff",
|
|
176
|
+
"--background-color-for-checkbox-input-icon-when-error": "#fff",
|
|
177
|
+
"--background-color-for-checkbox-input-icon-when-hovered": "#fff",
|
|
172
178
|
"--border-for-button-as-secondary": "none",
|
|
173
179
|
"--border-for-button-as-secondary-when-hovered": "none",
|
|
174
180
|
"--border-for-button-as-secondary-when-active": "none",
|
|
175
181
|
"--border-for-card-when-raised": "none",
|
|
176
182
|
"--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
|
|
177
183
|
"--border-for-view-switcher": "none",
|
|
184
|
+
"--border-for-select-input-tag": "none",
|
|
185
|
+
"--border-for-radio-input-option": "1px",
|
|
178
186
|
"--border-color-for-input": "hsl(0, 0%, 60%)",
|
|
179
187
|
"--border-color-for-input-when-focused": "#00b39e",
|
|
180
188
|
"--border-color-for-input-when-disabled": "#ccc",
|
|
@@ -211,6 +219,15 @@
|
|
|
211
219
|
"--border-color-for-select-input-when-readonly": "#ccc",
|
|
212
220
|
"--border-color-for-select-input-menu-when-warning": "#f16d0e",
|
|
213
221
|
"--border-color-for-select-input-menu-when-error": "#e60050",
|
|
222
|
+
"--border-color-for-checkbox-input-icon": "hsl(0, 0%, 60%)",
|
|
223
|
+
"--border-color-for-checkbox-input-icon-when-disabled": "#ccc",
|
|
224
|
+
"--border-color-for-checkbox-input-icon-when-readonly": "#ccc",
|
|
225
|
+
"--border-color-for-checkbox-input-icon-when-error": "#e60050",
|
|
226
|
+
"--border-color-for-radio-input": "#ccc",
|
|
227
|
+
"--border-color-for-radio-input-when-disabled": "hsl(0, 0%, 60%)",
|
|
228
|
+
"--border-color-for-radio-input-when-readonly": "#ccc",
|
|
229
|
+
"--border-color-for-radio-input-when-checked": "#ccc",
|
|
230
|
+
"--border-color-for-radio-input-when-focused": "#00b39e",
|
|
214
231
|
"--border-radius-for-button-as-big": "6px",
|
|
215
232
|
"--border-radius-for-button-as-small": "4px",
|
|
216
233
|
"--border-radius-for-button-as-icon-as-big": "6px",
|
|
@@ -232,6 +249,7 @@
|
|
|
232
249
|
"--border-width-for-select-input": "1px",
|
|
233
250
|
"--border-width-for-content-notification-icon": "0px",
|
|
234
251
|
"--border-left-width-for-content-notification": "1px",
|
|
252
|
+
"--border-width-for-checkbox-input-icon": "1px",
|
|
235
253
|
"--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
|
|
236
254
|
"--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
255
|
"--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)",
|
|
@@ -261,12 +279,22 @@
|
|
|
261
279
|
"--font-color-for-content-notification-icon-when-success": "#fff",
|
|
262
280
|
"--font-color-for-content-notification-icon-when-info": "#fff",
|
|
263
281
|
"--font-color-for-search-input-icon": "#1a1a1a",
|
|
264
|
-
"--font-color-for-search-input-icon-when-hovered": "#
|
|
282
|
+
"--font-color-for-search-input-icon-when-hovered": "#00b39e",
|
|
265
283
|
"--font-color-for-select-input-icon": "#1a1a1a",
|
|
266
284
|
"--font-color-for-select-input-when-error": "#1a1a1a",
|
|
267
285
|
"--font-color-for-select-input-when-warning": "#1a1a1a",
|
|
268
286
|
"--font-color-for-select-input-icon-when-error": "#1a1a1a",
|
|
269
287
|
"--font-color-for-select-input-icon-when-warning": "#1a1a1a",
|
|
288
|
+
"--font-color-for-money-input-currency-dropdown-indicator": "#1a1a1a",
|
|
289
|
+
"--font-color-for-search-input-icon-when-readonly": "hsl(0, 0%, 60%)",
|
|
290
|
+
"--font-color-for-checkbox-input-label": "#1a1a1a",
|
|
291
|
+
"--font-color-for-checkbox-input-label-when-error": "#e60050",
|
|
292
|
+
"--font-color-for-checkbox-input-label-when-disabled": "hsl(0, 0%, 40%)",
|
|
293
|
+
"--font-color-for-checkbox-input-label-when-readonly": "hsl(0, 0%, 40%)",
|
|
294
|
+
"--font-color-for-radio-input-when-disabled": "hsl(0, 0%, 60%)",
|
|
295
|
+
"--font-color-for-radio-input-when-error": "#e60050",
|
|
296
|
+
"--font-color-for-radio-input-when-readonly": "hsl(0, 0%, 60%)",
|
|
297
|
+
"--font-color-for-radio-input-when-warning": "#f16d0e",
|
|
270
298
|
"--height-for-button-as-big": "32px",
|
|
271
299
|
"--height-for-button-as-small": "24px",
|
|
272
300
|
"--height-for-button-as-icon-as-big": "32px",
|
|
@@ -275,7 +303,11 @@
|
|
|
275
303
|
"--height-for-input": "32px",
|
|
276
304
|
"--height-for-view-switcher": "32px",
|
|
277
305
|
"--height-for-view-switcher-when-condensed": "24px",
|
|
306
|
+
"--height-for-select-input-tag": "26px",
|
|
307
|
+
"--height-for-radio-input-option": "16px",
|
|
308
|
+
"--height-for-radio-input-option-when-checked": "8px",
|
|
278
309
|
"--width-for-avatar-as-medium": "48px",
|
|
310
|
+
"--min-width-for-money-input-currency-dropdown": "72px",
|
|
279
311
|
"--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
|
|
280
312
|
"--font-size-for-button": "1rem",
|
|
281
313
|
"--font-size-for-input": "1rem",
|
|
@@ -296,6 +328,7 @@
|
|
|
296
328
|
"--font-size-for-avatar-as-big": "3rem",
|
|
297
329
|
"--font-size-for-localized-multiline-text-input-label": "0.9231rem",
|
|
298
330
|
"--font-size-for-content-notification": "1rem",
|
|
331
|
+
"--font-size-for-select-input-tag": "0.9231rem",
|
|
299
332
|
"--icon-color-for-datetime-input-icon": "#1a1a1a",
|
|
300
333
|
"--icon-color-for-datetime-input-icon-when-hovered": "#f16d0e",
|
|
301
334
|
"--line-height-for-text-as-h1": "inherit",
|
|
@@ -320,6 +353,10 @@
|
|
|
320
353
|
"--margin-for-group-heading-select-input-options": "4px",
|
|
321
354
|
"--margin-for-select-input-icon": "4px",
|
|
322
355
|
"--margin-left-for-select-input-icon": "inherit",
|
|
356
|
+
"--margin-right-for-money-input-precision-badge": "4px",
|
|
357
|
+
"--margin-right-for-search-input-icon": "8px",
|
|
358
|
+
"--margin-right-for-clear-input-icon": "4px",
|
|
359
|
+
"--margin-left-for-radio-input-label": "8px",
|
|
323
360
|
"--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
|
|
324
361
|
"--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
|
|
325
362
|
"--padding-for-tag": "5px var(--spacing-20)",
|
|
@@ -352,6 +389,8 @@
|
|
|
352
389
|
"--padding-bottom-for-select-input-options": "4px",
|
|
353
390
|
"--padding-for-group-heading-select-input-options": "8px",
|
|
354
391
|
"--padding-for-select-input-menu": "inherit",
|
|
392
|
+
"--padding-for-money-input-currency-dropdown": "0 var(--spacing-20)",
|
|
393
|
+
"--padding-for-selectable-search-input-dropdown": "0 var(--spacing-20)",
|
|
355
394
|
"--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
|
|
356
395
|
"--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)",
|
|
357
396
|
"--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)",
|
|
@@ -259,6 +259,8 @@ states:
|
|
|
259
259
|
description: 'When the element is highlighted'
|
|
260
260
|
condensed:
|
|
261
261
|
description: 'When the element is condensed'
|
|
262
|
+
checked:
|
|
263
|
+
description: 'When the element is checked'
|
|
262
264
|
|
|
263
265
|
variants:
|
|
264
266
|
h1:
|
|
@@ -369,8 +371,14 @@ componentGroups:
|
|
|
369
371
|
description: 'Content notification elements'
|
|
370
372
|
content-notification-icon:
|
|
371
373
|
description: 'Content notification icon elements'
|
|
374
|
+
checkbox-input-icon:
|
|
375
|
+
description: 'Checkbox icon elements'
|
|
376
|
+
checkbox-input-label:
|
|
377
|
+
description: 'Checkbox icon elements'
|
|
372
378
|
select-input-icon:
|
|
373
379
|
description: 'Select input icon elements'
|
|
380
|
+
select-input-tag:
|
|
381
|
+
description: 'Select input inner tag elements'
|
|
374
382
|
clear-input-icon:
|
|
375
383
|
description: 'clear input icon elements'
|
|
376
384
|
search-input-icon:
|
|
@@ -381,9 +389,32 @@ componentGroups:
|
|
|
381
389
|
description: 'select input options element'
|
|
382
390
|
group-heading-select-input-options:
|
|
383
391
|
description: 'group heading select input options element'
|
|
392
|
+
money-input-currency-dropdown:
|
|
393
|
+
description: 'Money input currency dropdown elements'
|
|
394
|
+
money-input-currency-dropdown-indicator:
|
|
395
|
+
description: 'Money Input Dropdown indicator elements'
|
|
396
|
+
money-input-precision-badge:
|
|
397
|
+
description: 'Money input precision badge elements'
|
|
398
|
+
radio-input:
|
|
399
|
+
description: 'Radio input elements'
|
|
400
|
+
radio-input-label:
|
|
401
|
+
description: 'Radio input label elements'
|
|
402
|
+
radio-input-option:
|
|
403
|
+
description: 'Radio input option elements'
|
|
404
|
+
selectable-select-input-dropdown:
|
|
405
|
+
description: 'Selectable select input dropdown elements'
|
|
406
|
+
selectable-search-input-dropdown:
|
|
407
|
+
description: 'Selectable search input dropdown elements'
|
|
384
408
|
|
|
385
409
|
decisionGroupsByTheme:
|
|
386
410
|
default:
|
|
411
|
+
alignItems:
|
|
412
|
+
label: Flex align items
|
|
413
|
+
prefix: align-items
|
|
414
|
+
decisions:
|
|
415
|
+
align-items-for-select-input-tag:
|
|
416
|
+
choice: 'unset'
|
|
417
|
+
|
|
387
418
|
backgroundColors:
|
|
388
419
|
label: Background Colors
|
|
389
420
|
prefix: background-color
|
|
@@ -485,6 +516,16 @@ decisionGroupsByTheme:
|
|
|
485
516
|
choice: color-warning
|
|
486
517
|
background-color-for-content-notification-icon-when-success:
|
|
487
518
|
choice: color-primary
|
|
519
|
+
background-color-for-checkbox-input-icon:
|
|
520
|
+
choice: color-surface
|
|
521
|
+
background-color-for-checkbox-input-icon-when-disabled:
|
|
522
|
+
choice: color-surface
|
|
523
|
+
background-color-for-checkbox-input-icon-when-readonly:
|
|
524
|
+
choice: color-surface
|
|
525
|
+
background-color-for-checkbox-input-icon-when-error:
|
|
526
|
+
choice: color-surface
|
|
527
|
+
background-color-for-checkbox-input-icon-when-hovered:
|
|
528
|
+
choice: color-surface
|
|
488
529
|
|
|
489
530
|
borders:
|
|
490
531
|
label: Borders
|
|
@@ -502,6 +543,10 @@ decisionGroupsByTheme:
|
|
|
502
543
|
choice: '1px solid var(--color-neutral)'
|
|
503
544
|
border-for-view-switcher:
|
|
504
545
|
choice: 'none'
|
|
546
|
+
border-for-select-input-tag:
|
|
547
|
+
choice: 'none'
|
|
548
|
+
border-for-radio-input-option:
|
|
549
|
+
choice: border-width-1
|
|
505
550
|
|
|
506
551
|
borderColors:
|
|
507
552
|
label: Border Colors
|
|
@@ -589,6 +634,24 @@ decisionGroupsByTheme:
|
|
|
589
634
|
choice: color-warning
|
|
590
635
|
border-color-for-select-input-menu-when-error:
|
|
591
636
|
choice: color-error
|
|
637
|
+
border-color-for-checkbox-input-icon:
|
|
638
|
+
choice: color-neutral-60
|
|
639
|
+
border-color-for-checkbox-input-icon-when-disabled:
|
|
640
|
+
choice: color-neutral
|
|
641
|
+
border-color-for-checkbox-input-icon-when-readonly:
|
|
642
|
+
choice: color-neutral
|
|
643
|
+
border-color-for-checkbox-input-icon-when-error:
|
|
644
|
+
choice: color-error
|
|
645
|
+
border-color-for-radio-input:
|
|
646
|
+
choice: color-neutral
|
|
647
|
+
border-color-for-radio-input-when-disabled:
|
|
648
|
+
choice: color-neutral-60
|
|
649
|
+
border-color-for-radio-input-when-readonly:
|
|
650
|
+
choice: color-neutral
|
|
651
|
+
border-color-for-radio-input-when-checked:
|
|
652
|
+
choice: color-neutral
|
|
653
|
+
border-color-for-radio-input-when-focused:
|
|
654
|
+
choice: color-primary
|
|
592
655
|
|
|
593
656
|
borderRadiuses:
|
|
594
657
|
label: Border Radius
|
|
@@ -643,6 +706,8 @@ decisionGroupsByTheme:
|
|
|
643
706
|
choice: '0px'
|
|
644
707
|
border-left-width-for-content-notification:
|
|
645
708
|
choice: border-width-1
|
|
709
|
+
border-width-for-checkbox-input-icon:
|
|
710
|
+
choice: border-width-1
|
|
646
711
|
|
|
647
712
|
boxShadows:
|
|
648
713
|
label: Box shadows
|
|
@@ -721,7 +786,7 @@ decisionGroupsByTheme:
|
|
|
721
786
|
font-color-for-search-input-icon:
|
|
722
787
|
choice: color-solid
|
|
723
788
|
font-color-for-search-input-icon-when-hovered:
|
|
724
|
-
choice: color-
|
|
789
|
+
choice: color-primary
|
|
725
790
|
font-color-for-select-input-icon:
|
|
726
791
|
choice: color-solid
|
|
727
792
|
font-color-for-select-input-when-error:
|
|
@@ -732,6 +797,26 @@ decisionGroupsByTheme:
|
|
|
732
797
|
choice: color-solid
|
|
733
798
|
font-color-for-select-input-icon-when-warning:
|
|
734
799
|
choice: color-solid
|
|
800
|
+
font-color-for-money-input-currency-dropdown-indicator:
|
|
801
|
+
choice: color-solid
|
|
802
|
+
font-color-for-search-input-icon-when-readonly:
|
|
803
|
+
choice: color-neutral-60
|
|
804
|
+
font-color-for-checkbox-input-label:
|
|
805
|
+
choice: color-solid
|
|
806
|
+
font-color-for-checkbox-input-label-when-error:
|
|
807
|
+
choice: color-error
|
|
808
|
+
font-color-for-checkbox-input-label-when-disabled:
|
|
809
|
+
choice: color-neutral-40
|
|
810
|
+
font-color-for-checkbox-input-label-when-readonly:
|
|
811
|
+
choice: color-neutral-40
|
|
812
|
+
font-color-for-radio-input-when-disabled:
|
|
813
|
+
choice: color-neutral-60
|
|
814
|
+
font-color-for-radio-input-when-error:
|
|
815
|
+
choice: color-error
|
|
816
|
+
font-color-for-radio-input-when-readonly:
|
|
817
|
+
choice: color-neutral-60
|
|
818
|
+
font-color-for-radio-input-when-warning:
|
|
819
|
+
choice: color-warning
|
|
735
820
|
|
|
736
821
|
heights:
|
|
737
822
|
label: Height
|
|
@@ -753,6 +838,12 @@ decisionGroupsByTheme:
|
|
|
753
838
|
choice: '32px'
|
|
754
839
|
height-for-view-switcher-when-condensed:
|
|
755
840
|
choice: '24px'
|
|
841
|
+
height-for-select-input-tag:
|
|
842
|
+
choice: '26px'
|
|
843
|
+
height-for-radio-input-option:
|
|
844
|
+
choice: '16px'
|
|
845
|
+
height-for-radio-input-option-when-checked:
|
|
846
|
+
choice: '8px'
|
|
756
847
|
|
|
757
848
|
widths:
|
|
758
849
|
label: Width
|
|
@@ -761,6 +852,13 @@ decisionGroupsByTheme:
|
|
|
761
852
|
width-for-avatar-as-medium:
|
|
762
853
|
choice: '48px'
|
|
763
854
|
|
|
855
|
+
minWidths:
|
|
856
|
+
label: Min width
|
|
857
|
+
prefix: min-width
|
|
858
|
+
decisions:
|
|
859
|
+
min-width-for-money-input-currency-dropdown:
|
|
860
|
+
choice: '72px'
|
|
861
|
+
|
|
764
862
|
placeholderFontColors:
|
|
765
863
|
label: Placeholder font colors
|
|
766
864
|
prefix: placeholder-font-color
|
|
@@ -822,6 +920,8 @@ decisionGroupsByTheme:
|
|
|
822
920
|
choice: font-size-15
|
|
823
921
|
font-size-for-content-notification:
|
|
824
922
|
choice: font-size-30
|
|
923
|
+
font-size-for-select-input-tag:
|
|
924
|
+
choice: font-size-15
|
|
825
925
|
|
|
826
926
|
iconColors:
|
|
827
927
|
label: Icon colors
|
|
@@ -904,6 +1004,14 @@ decisionGroupsByTheme:
|
|
|
904
1004
|
choice: spacing-10
|
|
905
1005
|
margin-left-for-select-input-icon:
|
|
906
1006
|
choice: 'inherit'
|
|
1007
|
+
margin-right-for-money-input-precision-badge:
|
|
1008
|
+
choice: spacing-10
|
|
1009
|
+
margin-right-for-search-input-icon:
|
|
1010
|
+
choice: spacing-20
|
|
1011
|
+
margin-right-for-clear-input-icon:
|
|
1012
|
+
choice: spacing-10
|
|
1013
|
+
margin-left-for-radio-input-label:
|
|
1014
|
+
choice: spacing-20
|
|
907
1015
|
|
|
908
1016
|
paddings:
|
|
909
1017
|
label: Paddings
|
|
@@ -973,6 +1081,10 @@ decisionGroupsByTheme:
|
|
|
973
1081
|
choice: spacing-20
|
|
974
1082
|
padding-for-select-input-menu:
|
|
975
1083
|
choice: 'inherit'
|
|
1084
|
+
padding-for-money-input-currency-dropdown:
|
|
1085
|
+
choice: '0 var(--spacing-20)'
|
|
1086
|
+
padding-for-selectable-search-input-dropdown:
|
|
1087
|
+
choice: '0 var(--spacing-20)'
|
|
976
1088
|
|
|
977
1089
|
shadows:
|
|
978
1090
|
label: Shadows
|
|
@@ -1008,6 +1120,13 @@ decisionGroupsByTheme:
|
|
|
1008
1120
|
choice: shadow-7
|
|
1009
1121
|
|
|
1010
1122
|
test:
|
|
1123
|
+
alignItems:
|
|
1124
|
+
label: Flex align items
|
|
1125
|
+
prefix: align-items
|
|
1126
|
+
decisions:
|
|
1127
|
+
align-items-for-select-input-tag:
|
|
1128
|
+
choice: 'center'
|
|
1129
|
+
|
|
1011
1130
|
backgroundColors:
|
|
1012
1131
|
label: Background Colors
|
|
1013
1132
|
prefix: background-color
|
|
@@ -1087,6 +1206,16 @@ decisionGroupsByTheme:
|
|
|
1087
1206
|
choice: color-primary-95
|
|
1088
1207
|
background-color-for-select-input-option-when-hovered:
|
|
1089
1208
|
choice: color-neutral-98
|
|
1209
|
+
background-color-for-checkbox-input-icon:
|
|
1210
|
+
choice: color-primary
|
|
1211
|
+
background-color-for-checkbox-input-icon-when-disabled:
|
|
1212
|
+
choice: color-neutral
|
|
1213
|
+
background-color-for-checkbox-input-icon-when-readonly:
|
|
1214
|
+
choice: color-neutral-60
|
|
1215
|
+
background-color-for-checkbox-input-icon-when-error:
|
|
1216
|
+
choice: color-error
|
|
1217
|
+
background-color-for-checkbox-input-icon-when-hovered:
|
|
1218
|
+
choice: color-neutral-90
|
|
1090
1219
|
|
|
1091
1220
|
borders:
|
|
1092
1221
|
label: Borders
|
|
@@ -1104,6 +1233,10 @@ decisionGroupsByTheme:
|
|
|
1104
1233
|
choice: 'none'
|
|
1105
1234
|
border-for-view-switcher:
|
|
1106
1235
|
choice: '1px solid var(--color-neutral)'
|
|
1236
|
+
border-for-select-input-tag:
|
|
1237
|
+
choice: '1px solid var(--color-neutral-85)'
|
|
1238
|
+
border-for-radio-input-option:
|
|
1239
|
+
choice: border-width-2
|
|
1107
1240
|
|
|
1108
1241
|
borderColors:
|
|
1109
1242
|
label: Border Colors
|
|
@@ -1116,7 +1249,7 @@ decisionGroupsByTheme:
|
|
|
1116
1249
|
border-color-for-input-when-hovered:
|
|
1117
1250
|
choice: color-neutral
|
|
1118
1251
|
border-color-for-input-when-readonly:
|
|
1119
|
-
choice: color-
|
|
1252
|
+
choice: color-surface
|
|
1120
1253
|
border-color-for-input-when-focused:
|
|
1121
1254
|
choice: color-primary
|
|
1122
1255
|
border-color-for-button-as-icon:
|
|
@@ -1173,6 +1306,24 @@ decisionGroupsByTheme:
|
|
|
1173
1306
|
choice: color-surface
|
|
1174
1307
|
border-color-for-select-input-menu-when-error:
|
|
1175
1308
|
choice: color-surface
|
|
1309
|
+
border-color-for-checkbox-input-icon:
|
|
1310
|
+
choice: color-primary
|
|
1311
|
+
border-color-for-checkbox-input-icon-when-disabled:
|
|
1312
|
+
choice: color-neutral
|
|
1313
|
+
border-color-for-checkbox-input-icon-when-readonly:
|
|
1314
|
+
choice: color-neutral-60
|
|
1315
|
+
border-color-for-checkbox-input-icon-when-error:
|
|
1316
|
+
choice: color-error
|
|
1317
|
+
border-color-for-radio-input:
|
|
1318
|
+
choice: color-neutral-60
|
|
1319
|
+
border-color-for-radio-input-when-disabled:
|
|
1320
|
+
choice: color-neutral
|
|
1321
|
+
border-color-for-radio-input-when-readonly:
|
|
1322
|
+
choice: color-neutral-60
|
|
1323
|
+
border-color-for-radio-input-when-checked:
|
|
1324
|
+
choice: color-primary
|
|
1325
|
+
border-color-for-radio-input-when-focused:
|
|
1326
|
+
choice: color-neutral-60
|
|
1176
1327
|
|
|
1177
1328
|
borderRadiuses:
|
|
1178
1329
|
label: Border radiuses
|
|
@@ -1215,6 +1366,8 @@ decisionGroupsByTheme:
|
|
|
1215
1366
|
choice: '0px'
|
|
1216
1367
|
border-width-for-select-input:
|
|
1217
1368
|
choice: border-width-2
|
|
1369
|
+
border-width-for-checkbox-input-icon:
|
|
1370
|
+
choice: border-width-2
|
|
1218
1371
|
|
|
1219
1372
|
boxShadows:
|
|
1220
1373
|
label: Box shadows
|
|
@@ -1259,8 +1412,6 @@ decisionGroupsByTheme:
|
|
|
1259
1412
|
choice: color-neutral-40
|
|
1260
1413
|
font-color-for-search-input-icon:
|
|
1261
1414
|
choice: color-neutral-60
|
|
1262
|
-
font-color-for-search-input-icon-when-hovered:
|
|
1263
|
-
choice: color-primary
|
|
1264
1415
|
font-color-for-select-input-icon:
|
|
1265
1416
|
choice: color-neutral-60
|
|
1266
1417
|
font-color-for-select-input-when-error:
|
|
@@ -1271,6 +1422,16 @@ decisionGroupsByTheme:
|
|
|
1271
1422
|
choice: color-error
|
|
1272
1423
|
font-color-for-select-input-icon-when-warning:
|
|
1273
1424
|
choice: color-warning
|
|
1425
|
+
font-color-for-money-input-currency-dropdown-indicator:
|
|
1426
|
+
choice: color-neutral-40
|
|
1427
|
+
font-color-for-checkbox-input-label:
|
|
1428
|
+
choice: color-solid
|
|
1429
|
+
font-color-for-checkbox-input-label-when-error:
|
|
1430
|
+
choice: color-error
|
|
1431
|
+
font-color-for-checkbox-input-label-when-disabled:
|
|
1432
|
+
choice: color-neutral-60
|
|
1433
|
+
font-color-for-checkbox-input-label-when-readonly:
|
|
1434
|
+
choice: color-neutral-40
|
|
1274
1435
|
|
|
1275
1436
|
fontSizes:
|
|
1276
1437
|
label: Font Sizes
|
|
@@ -1323,6 +1484,8 @@ decisionGroupsByTheme:
|
|
|
1323
1484
|
choice: font-size-80
|
|
1324
1485
|
font-size-for-localized-multiline-text-input-label:
|
|
1325
1486
|
choice: font-size-30
|
|
1487
|
+
font-size-for-select-input-tag:
|
|
1488
|
+
choice: font-size-30
|
|
1326
1489
|
|
|
1327
1490
|
lineHeights:
|
|
1328
1491
|
label: Line Heights
|
|
@@ -1400,6 +1563,12 @@ decisionGroupsByTheme:
|
|
|
1400
1563
|
choice: '40px'
|
|
1401
1564
|
height-for-view-switcher-when-condensed:
|
|
1402
1565
|
choice: '32px'
|
|
1566
|
+
height-for-select-input-tag:
|
|
1567
|
+
choice: '32px'
|
|
1568
|
+
height-for-radio-input-option:
|
|
1569
|
+
choice: '18px'
|
|
1570
|
+
height-for-radio-input-option-when-checked:
|
|
1571
|
+
choice: '10px'
|
|
1403
1572
|
|
|
1404
1573
|
iconColors:
|
|
1405
1574
|
label: Icon colors
|
|
@@ -1417,6 +1586,13 @@ decisionGroupsByTheme:
|
|
|
1417
1586
|
width-for-avatar-as-medium:
|
|
1418
1587
|
choice: '40px'
|
|
1419
1588
|
|
|
1589
|
+
minWidths:
|
|
1590
|
+
label: Min width
|
|
1591
|
+
prefix: min-width
|
|
1592
|
+
decisions:
|
|
1593
|
+
min-width-for-money-input-currency-dropdown:
|
|
1594
|
+
choice: '80px'
|
|
1595
|
+
|
|
1420
1596
|
margins:
|
|
1421
1597
|
label: Margins
|
|
1422
1598
|
prefix: margin
|
|
@@ -1433,6 +1609,14 @@ decisionGroupsByTheme:
|
|
|
1433
1609
|
choice: spacing-20
|
|
1434
1610
|
margin-left-for-select-input-icon:
|
|
1435
1611
|
choice: spacing-20
|
|
1612
|
+
margin-right-for-money-input-precision-badge:
|
|
1613
|
+
choice: '12px'
|
|
1614
|
+
margin-right-for-search-input-icon:
|
|
1615
|
+
choice: '12px'
|
|
1616
|
+
margin-right-for-clear-input-icon:
|
|
1617
|
+
choice: spacing-20
|
|
1618
|
+
margin-left-for-radio-input-label:
|
|
1619
|
+
choice: spacing-10
|
|
1436
1620
|
|
|
1437
1621
|
paddings:
|
|
1438
1622
|
label: Paddings
|
|
@@ -1502,6 +1686,10 @@ decisionGroupsByTheme:
|
|
|
1502
1686
|
choice: spacing-30
|
|
1503
1687
|
padding-for-select-input-menu:
|
|
1504
1688
|
choice: 'var(--spacing-10) 0'
|
|
1689
|
+
padding-for-money-input-currency-dropdown:
|
|
1690
|
+
choice: '0 12px'
|
|
1691
|
+
padding-for-selectable-search-input-dropdown:
|
|
1692
|
+
choice: '0 12px'
|
|
1505
1693
|
|
|
1506
1694
|
shadows:
|
|
1507
1695
|
label: Shadows
|
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.
|
|
4
|
+
"version": "15.13.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -22,41 +22,42 @@
|
|
|
22
22
|
"copy-assets": "rm -rf i18n materials && mkdir -p i18n/data && cp -R ../../design-system/materials materials && cp -R ../../packages/i18n/data i18n/"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@babel/runtime": "^7.
|
|
26
|
-
"@babel/runtime-corejs3": "^7.
|
|
27
|
-
"@commercetools-uikit/accessible-hidden": "15.
|
|
28
|
-
"@commercetools-uikit/avatar": "15.
|
|
29
|
-
"@commercetools-uikit/buttons": "15.
|
|
30
|
-
"@commercetools-uikit/card": "15.
|
|
31
|
-
"@commercetools-uikit/collapsible": "15.
|
|
32
|
-
"@commercetools-uikit/collapsible-motion": "15.
|
|
33
|
-
"@commercetools-uikit/collapsible-panel": "15.
|
|
34
|
-
"@commercetools-uikit/constraints": "15.
|
|
35
|
-
"@commercetools-uikit/data-table": "15.
|
|
36
|
-
"@commercetools-uikit/data-table-manager": "15.
|
|
37
|
-
"@commercetools-uikit/design-system": "15.
|
|
38
|
-
"@commercetools-uikit/field-errors": "15.
|
|
39
|
-
"@commercetools-uikit/field-label": "15.
|
|
40
|
-
"@commercetools-uikit/fields": "15.
|
|
41
|
-
"@commercetools-uikit/grid": "15.
|
|
42
|
-
"@commercetools-uikit/hooks": "15.
|
|
43
|
-
"@commercetools-uikit/i18n": "15.
|
|
44
|
-
"@commercetools-uikit/icons": "15.
|
|
45
|
-
"@commercetools-uikit/inputs": "15.
|
|
46
|
-
"@commercetools-uikit/label": "15.
|
|
47
|
-
"@commercetools-uikit/link": "15.
|
|
48
|
-
"@commercetools-uikit/loading-spinner": "15.
|
|
49
|
-
"@commercetools-uikit/messages": "15.
|
|
50
|
-
"@commercetools-uikit/notifications": "15.
|
|
51
|
-
"@commercetools-uikit/pagination": "15.
|
|
52
|
-
"@commercetools-uikit/primary-action-dropdown": "15.
|
|
53
|
-
"@commercetools-uikit/
|
|
54
|
-
"@commercetools-uikit/
|
|
55
|
-
"@commercetools-uikit/
|
|
56
|
-
"@commercetools-uikit/
|
|
57
|
-
"@commercetools-uikit/
|
|
58
|
-
"@commercetools-uikit/
|
|
59
|
-
"@commercetools-uikit/
|
|
25
|
+
"@babel/runtime": "^7.20.13",
|
|
26
|
+
"@babel/runtime-corejs3": "^7.20.13",
|
|
27
|
+
"@commercetools-uikit/accessible-hidden": "15.13.0",
|
|
28
|
+
"@commercetools-uikit/avatar": "15.13.0",
|
|
29
|
+
"@commercetools-uikit/buttons": "15.13.0",
|
|
30
|
+
"@commercetools-uikit/card": "15.13.0",
|
|
31
|
+
"@commercetools-uikit/collapsible": "15.13.0",
|
|
32
|
+
"@commercetools-uikit/collapsible-motion": "15.13.0",
|
|
33
|
+
"@commercetools-uikit/collapsible-panel": "15.13.0",
|
|
34
|
+
"@commercetools-uikit/constraints": "15.13.0",
|
|
35
|
+
"@commercetools-uikit/data-table": "15.13.0",
|
|
36
|
+
"@commercetools-uikit/data-table-manager": "15.13.0",
|
|
37
|
+
"@commercetools-uikit/design-system": "15.13.0",
|
|
38
|
+
"@commercetools-uikit/field-errors": "15.13.0",
|
|
39
|
+
"@commercetools-uikit/field-label": "15.13.0",
|
|
40
|
+
"@commercetools-uikit/fields": "15.13.0",
|
|
41
|
+
"@commercetools-uikit/grid": "15.13.0",
|
|
42
|
+
"@commercetools-uikit/hooks": "15.13.0",
|
|
43
|
+
"@commercetools-uikit/i18n": "15.13.0",
|
|
44
|
+
"@commercetools-uikit/icons": "15.13.0",
|
|
45
|
+
"@commercetools-uikit/inputs": "15.13.0",
|
|
46
|
+
"@commercetools-uikit/label": "15.13.0",
|
|
47
|
+
"@commercetools-uikit/link": "15.13.0",
|
|
48
|
+
"@commercetools-uikit/loading-spinner": "15.13.0",
|
|
49
|
+
"@commercetools-uikit/messages": "15.13.0",
|
|
50
|
+
"@commercetools-uikit/notifications": "15.13.0",
|
|
51
|
+
"@commercetools-uikit/pagination": "15.13.0",
|
|
52
|
+
"@commercetools-uikit/primary-action-dropdown": "15.13.0",
|
|
53
|
+
"@commercetools-uikit/selectable-search-input": "15.13.0",
|
|
54
|
+
"@commercetools-uikit/spacings": "15.13.0",
|
|
55
|
+
"@commercetools-uikit/stamp": "15.13.0",
|
|
56
|
+
"@commercetools-uikit/tag": "15.13.0",
|
|
57
|
+
"@commercetools-uikit/text": "15.13.0",
|
|
58
|
+
"@commercetools-uikit/tooltip": "15.13.0",
|
|
59
|
+
"@commercetools-uikit/utils": "15.13.0",
|
|
60
|
+
"@commercetools-uikit/view-switcher": "15.13.0"
|
|
60
61
|
},
|
|
61
62
|
"devDependencies": {
|
|
62
63
|
"moment": "2.29.4",
|