@commercetools-frontend/ui-kit 15.6.0 → 15.8.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 +36 -2
  5. package/materials/custom-properties.json +30 -2
  6. package/materials/internals/definition.yaml +147 -7
  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.6.0";
83
+ var version = "15.8.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.6.0";
83
+ var version = "15.8.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.6.0";
36
+ var version = "15.8.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -40,6 +40,8 @@
40
40
  --border-radius-4: 4px;
41
41
  --border-radius-6: 6px;
42
42
  --border-radius-20: 20px;
43
+ --border-width-1: 1px;
44
+ --border-width-2: 2px;
43
45
  --font-family: 'Open Sans', sans-serif;
44
46
  --font-size-10: 0.75rem;
45
47
  --font-size-20: 0.875rem;
@@ -145,7 +147,8 @@
145
147
  --background-color-for-input: #fff;
146
148
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
147
149
  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
148
- --background-color-for-input-when-hovered: hsl(0, 0%, 90%);
150
+ --background-color-for-input-when-hovered: unset;
151
+ --background-color-for-input-when-focused: unset;
149
152
  --background-color-for-table-cell-when-hovered: hsl(0, 0%, 90%);
150
153
  --background-color-for-table-header: #213c45;
151
154
  --background-color-for-tag: hsl(0, 0%, 95%);
@@ -154,16 +157,25 @@
154
157
  89.0196078431%,
155
158
  95%
156
159
  );
160
+ --background-color-for-collapsible-panel-header-icon-when-disabled: hsl(
161
+ 195,
162
+ 35.2941176471%,
163
+ 98%
164
+ );
165
+ --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 90%);
157
166
  --border-for-button-as-secondary: none;
158
167
  --border-for-button-as-secondary-when-hovered: none;
159
168
  --border-for-button-as-secondary-when-active: none;
160
169
  --border-for-card-when-raised: none;
170
+ --border-for-collapsible-panel-header-icon-when-disabled: 1px solid
171
+ var(--color-neutral);
161
172
  --border-color-for-input: hsl(0, 0%, 60%);
162
173
  --border-color-for-input-when-focused: #00b39e;
163
174
  --border-color-for-input-when-disabled: #ccc;
164
175
  --border-color-for-input-when-readonly: #ccc;
165
176
  --border-color-for-input-when-error: #e60050;
166
177
  --border-color-for-input-when-warning: #f16d0e;
178
+ --border-color-for-input-when-hovered: #00b39e;
167
179
  --border-color-for-tag: hsl(0, 0%, 60%);
168
180
  --border-color-for-tag-warning: #f16d0e;
169
181
  --border-color-for-tag-when-focused: #00b39e;
@@ -172,8 +184,9 @@
172
184
  --border-color-for-button-as-icon-as-primary: #00b39e;
173
185
  --border-color-for-button-as-icon-when-disabled: #ccc;
174
186
  --border-color-for-table-header: #ccc;
175
- --border-color-for-table-header-when-hovered: #ccc;
176
187
  --border-color-for-table-header-as-bottom: #213c45;
188
+ --border-color-for-table-manager-droppable-list: hsl(0, 0%, 60%);
189
+ --border-color-for-collapsible-panel-header: hsl(0, 0%, 60%);
177
190
  --border-radius-for-button-as-big: 6px;
178
191
  --border-radius-for-button-as-small: 4px;
179
192
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -182,6 +195,11 @@
182
195
  --border-radius-for-input: 6px;
183
196
  --border-radius-for-tag: 2px;
184
197
  --border-radius-for-card: 6px;
198
+ --border-radius-for-table-manager-droppable-list: 6px;
199
+ --border-width-for-input: 1px;
200
+ --border-width-for-input-when-warning: 1px;
201
+ --border-width-for-input-when-error: 1px;
202
+ --border-width-for-input-when-focused: 1px;
185
203
  --font-color-for-text: #1a1a1a;
186
204
  --font-color-for-input: #1a1a1a;
187
205
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -197,6 +215,7 @@
197
215
  --height-for-button-as-icon-as-big: 32px;
198
216
  --height-for-button-as-icon-as-medium: 24px;
199
217
  --height-for-button-as-icon-as-small: 16px;
218
+ --height-for-input: 32px;
200
219
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
201
220
  --font-size-for-button: 1rem;
202
221
  --font-size-for-input: 1rem;
@@ -236,6 +255,17 @@
236
255
  --padding-for-table-header-as-condensed: 8px;
237
256
  --padding-for-table-cell: 16px;
238
257
  --padding-for-table-cell-as-condensed: 8px;
258
+ --padding-for-table-manager-droppable-list: 8px;
259
+ --padding-for-table-manager-settings-panel: 16px;
260
+ --padding-for-table-manager-draggable-tag: 4px;
261
+ --padding-for-collapsible-panel-header: var(--spacing-20) var(--spacing-30);
262
+ --padding-for-collapsible-panel-header-as-condensed: 8px;
263
+ --padding-for-collapsible-panel-section-wrapper: 16px;
264
+ --padding-for-collapsible-panel-section-wrapper-as-condensed: 8px;
265
+ --padding-for-collapsible-panel-section-description: 0 0 var(--spacing-50);
266
+ --padding-for-collapsible-panel-section-description-as-condensed: 0 0
267
+ var(--spacing-30);
268
+ --padding-for-input: 8px;
239
269
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
240
270
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
241
271
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -250,6 +280,10 @@
250
280
  0 1px 2px rgba(0, 0, 0, 0.24);
251
281
  --shadow-for-card-when-raised: 0 1px 3px rgba(0, 0, 0, 0.12),
252
282
  0 1px 2px rgba(0, 0, 0, 0.24);
283
+ --shadow-for-input: none;
284
+ --shadow-for-input-when-focused: inset 0 0 0 2px var(--color-primary);
285
+ --shadow-for-input-when-error: none;
286
+ --shadow-for-input-when-warning: none;
253
287
  --font-size-m: 1rem;
254
288
  --big-button-height: 32px;
255
289
  --small-button-height: 24px;
package/materials/custom-properties.json CHANGED
@@ -33,6 +33,8 @@
33
33
  "--border-radius-4": "4px",
34
34
  "--border-radius-6": "6px",
35
35
  "--border-radius-20": "20px",
36
+ "--border-width-1": "1px",
37
+ "--border-width-2": "2px",
36
38
  "--font-family": "'Open Sans', sans-serif",
37
39
  "--font-size-10": "0.75rem",
38
40
  "--font-size-20": "0.875rem",
@@ -125,21 +127,26 @@
125
127
  "--background-color-for-input": "#fff",
126
128
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
127
129
  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
128
- "--background-color-for-input-when-hovered": "hsl(0, 0%, 90%)",
130
+ "--background-color-for-input-when-hovered": "unset",
131
+ "--background-color-for-input-when-focused": "unset",
129
132
  "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 90%)",
130
133
  "--background-color-for-table-header": "#213c45",
131
134
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
132
135
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
136
+ "--background-color-for-collapsible-panel-header-icon-when-disabled": "hsl(195, 35.2941176471%, 98%)",
137
+ "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 90%)",
133
138
  "--border-for-button-as-secondary": "none",
134
139
  "--border-for-button-as-secondary-when-hovered": "none",
135
140
  "--border-for-button-as-secondary-when-active": "none",
136
141
  "--border-for-card-when-raised": "none",
142
+ "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
137
143
  "--border-color-for-input": "hsl(0, 0%, 60%)",
138
144
  "--border-color-for-input-when-focused": "#00b39e",
139
145
  "--border-color-for-input-when-disabled": "#ccc",
140
146
  "--border-color-for-input-when-readonly": "#ccc",
141
147
  "--border-color-for-input-when-error": "#e60050",
142
148
  "--border-color-for-input-when-warning": "#f16d0e",
149
+ "--border-color-for-input-when-hovered": "#00b39e",
143
150
  "--border-color-for-tag": "hsl(0, 0%, 60%)",
144
151
  "--border-color-for-tag-warning": "#f16d0e",
145
152
  "--border-color-for-tag-when-focused": "#00b39e",
@@ -148,8 +155,9 @@
148
155
  "--border-color-for-button-as-icon-as-primary": "#00b39e",
149
156
  "--border-color-for-button-as-icon-when-disabled": "#ccc",
150
157
  "--border-color-for-table-header": "#ccc",
151
- "--border-color-for-table-header-when-hovered": "#ccc",
152
158
  "--border-color-for-table-header-as-bottom": "#213c45",
159
+ "--border-color-for-table-manager-droppable-list": "hsl(0, 0%, 60%)",
160
+ "--border-color-for-collapsible-panel-header": "hsl(0, 0%, 60%)",
153
161
  "--border-radius-for-button-as-big": "6px",
154
162
  "--border-radius-for-button-as-small": "4px",
155
163
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -158,6 +166,11 @@
158
166
  "--border-radius-for-input": "6px",
159
167
  "--border-radius-for-tag": "2px",
160
168
  "--border-radius-for-card": "6px",
169
+ "--border-radius-for-table-manager-droppable-list": "6px",
170
+ "--border-width-for-input": "1px",
171
+ "--border-width-for-input-when-warning": "1px",
172
+ "--border-width-for-input-when-error": "1px",
173
+ "--border-width-for-input-when-focused": "1px",
161
174
  "--font-color-for-text": "#1a1a1a",
162
175
  "--font-color-for-input": "#1a1a1a",
163
176
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -173,6 +186,7 @@
173
186
  "--height-for-button-as-icon-as-big": "32px",
174
187
  "--height-for-button-as-icon-as-medium": "24px",
175
188
  "--height-for-button-as-icon-as-small": "16px",
189
+ "--height-for-input": "32px",
176
190
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
177
191
  "--font-size-for-button": "1rem",
178
192
  "--font-size-for-input": "1rem",
@@ -212,6 +226,16 @@
212
226
  "--padding-for-table-header-as-condensed": "8px",
213
227
  "--padding-for-table-cell": "16px",
214
228
  "--padding-for-table-cell-as-condensed": "8px",
229
+ "--padding-for-table-manager-droppable-list": "8px",
230
+ "--padding-for-table-manager-settings-panel": "16px",
231
+ "--padding-for-table-manager-draggable-tag": "4px",
232
+ "--padding-for-collapsible-panel-header": "var(--spacing-20) var(--spacing-30)",
233
+ "--padding-for-collapsible-panel-header-as-condensed": "8px",
234
+ "--padding-for-collapsible-panel-section-wrapper": "16px",
235
+ "--padding-for-collapsible-panel-section-wrapper-as-condensed": "8px",
236
+ "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-50)",
237
+ "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-30)",
238
+ "--padding-for-input": "8px",
215
239
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
216
240
  "--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)",
217
241
  "--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)",
@@ -219,6 +243,10 @@
219
243
  "--shadow-for-button-when-disabled": "0 0 0 1px var(--color-neutral) inset",
220
244
  "--shadow-box-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
221
245
  "--shadow-for-card-when-raised": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
246
+ "--shadow-for-input": "none",
247
+ "--shadow-for-input-when-focused": "inset 0 0 0 2px var(--color-primary)",
248
+ "--shadow-for-input-when-error": "none",
249
+ "--shadow-for-input-when-warning": "none",
222
250
  "--font-size-m": "1rem",
223
251
  "--big-button-height": "32px",
224
252
  "--small-button-height": "24px",
package/materials/internals/definition.yaml CHANGED
@@ -75,6 +75,14 @@ choiceGroupsByTheme:
75
75
  border-radius-4: 4px
76
76
  border-radius-6: 6px
77
77
  border-radius-20: 20px
78
+
79
+ borderWidths:
80
+ label: Border Widths
81
+ prefix: border-width
82
+ choices:
83
+ border-width-1: 1px
84
+ border-width-2: 2px
85
+
78
86
  fontFamilies:
79
87
  label: Font families
80
88
  prefix: font-family
@@ -291,6 +299,24 @@ componentGroups:
291
299
  description: 'Table header elements'
292
300
  table-cell:
293
301
  description: 'Table cell elements'
302
+ table-manager-droppable-list:
303
+ description: 'Table manager droppable list elements'
304
+ table-manager-settings-panel:
305
+ description: 'Table manager settings panel elements'
306
+ table-manager-draggable-tag:
307
+ description: 'Table manager settings draggable tag elements'
308
+ collapsible-panel-header:
309
+ description: 'collapsible panel header elements'
310
+ collapsible-panel-section-wrapper:
311
+ description: 'collapsible panel section wrapper elements'
312
+ collapsible-panel-section-description:
313
+ description: 'collapsible panel section description elements'
314
+ collapsible-panel-header-icon:
315
+ description: 'collapsible panel header icon elements'
316
+ select-input:
317
+ description: 'Select input elements'
318
+ select-input-option:
319
+ description: 'Select input option elements'
294
320
 
295
321
  decisionGroupsByTheme:
296
322
  default:
@@ -331,7 +357,10 @@ decisionGroupsByTheme:
331
357
  choice: color-accent-98
332
358
  background-color-for-input-when-hovered:
333
359
  description: ''
334
- choice: color-neutral-90
360
+ choice: 'unset'
361
+ background-color-for-input-when-focused:
362
+ description: ''
363
+ choice: 'unset'
335
364
  background-color-for-table-cell-when-hovered:
336
365
  choice: color-neutral-90
337
366
  background-color-for-table-header:
@@ -342,6 +371,11 @@ decisionGroupsByTheme:
342
371
  background-color-for-tag-warning:
343
372
  description: ''
344
373
  choice: color-warning-95
374
+ background-color-for-collapsible-panel-header-icon-when-disabled:
375
+ choice: color-accent-98
376
+ background-color-for-select-input-option-when-hovered:
377
+ description: ''
378
+ choice: color-neutral-90
345
379
 
346
380
  borders:
347
381
  label: Borders
@@ -355,6 +389,8 @@ decisionGroupsByTheme:
355
389
  choice: 'none'
356
390
  border-for-card-when-raised:
357
391
  choice: 'none'
392
+ border-for-collapsible-panel-header-icon-when-disabled:
393
+ choice: '1px solid var(--color-neutral)'
358
394
 
359
395
  borderColors:
360
396
  label: Border Colors
@@ -378,6 +414,9 @@ decisionGroupsByTheme:
378
414
  border-color-for-input-when-warning:
379
415
  description: ''
380
416
  choice: color-warning
417
+ border-color-for-input-when-hovered:
418
+ description: ''
419
+ choice: color-primary
381
420
  border-color-for-tag:
382
421
  description: ''
383
422
  choice: color-neutral-60
@@ -397,10 +436,12 @@ decisionGroupsByTheme:
397
436
  choice: color-neutral
398
437
  border-color-for-table-header:
399
438
  choice: color-neutral
400
- border-color-for-table-header-when-hovered:
401
- choice: color-neutral
402
439
  border-color-for-table-header-as-bottom:
403
440
  choice: color-accent
441
+ border-color-for-table-manager-droppable-list:
442
+ choice: color-neutral-60
443
+ border-color-for-collapsible-panel-header:
444
+ choice: color-neutral-60
404
445
 
405
446
  borderRadiuses:
406
447
  label: Border Radius
@@ -424,8 +465,21 @@ decisionGroupsByTheme:
424
465
  choice: border-radius-2
425
466
  border-radius-for-card:
426
467
  choice: border-radius-6
427
- # We don't have font families in choices yet, so we can't have decisions for
428
- # them
468
+ border-radius-for-table-manager-droppable-list:
469
+ choice: border-radius-6
470
+
471
+ borderWidths:
472
+ label: Border width
473
+ prefix: border-width
474
+ decisions:
475
+ border-width-for-input:
476
+ choice: border-width-1
477
+ border-width-for-input-when-warning:
478
+ choice: border-width-1
479
+ border-width-for-input-when-error:
480
+ choice: border-width-1
481
+ border-width-for-input-when-focused:
482
+ choice: border-width-1
429
483
 
430
484
  fontColors:
431
485
  label: Font Colors
@@ -475,6 +529,8 @@ decisionGroupsByTheme:
475
529
  choice: '24px'
476
530
  height-for-button-as-icon-as-small:
477
531
  choice: '16px'
532
+ height-for-input:
533
+ choice: '32px'
478
534
 
479
535
  placeholderFontColors:
480
536
  label: Placeholder font colors
@@ -609,6 +665,26 @@ decisionGroupsByTheme:
609
665
  choice: spacing-30
610
666
  padding-for-table-cell-as-condensed:
611
667
  choice: spacing-20
668
+ padding-for-table-manager-droppable-list:
669
+ choice: spacing-20
670
+ padding-for-table-manager-settings-panel:
671
+ choice: spacing-30
672
+ padding-for-table-manager-draggable-tag:
673
+ choice: spacing-10
674
+ padding-for-collapsible-panel-header:
675
+ choice: 'var(--spacing-20) var(--spacing-30)'
676
+ padding-for-collapsible-panel-header-as-condensed:
677
+ choice: spacing-20
678
+ padding-for-collapsible-panel-section-wrapper:
679
+ choice: spacing-30
680
+ padding-for-collapsible-panel-section-wrapper-as-condensed:
681
+ choice: spacing-20
682
+ padding-for-collapsible-panel-section-description:
683
+ choice: '0 0 var(--spacing-50)'
684
+ padding-for-collapsible-panel-section-description-as-condensed:
685
+ choice: '0 0 var(--spacing-30)'
686
+ padding-for-input:
687
+ choice: spacing-20
612
688
 
613
689
  shadows:
614
690
  label: Shadows
@@ -630,6 +706,14 @@ decisionGroupsByTheme:
630
706
  choice: shadow-1
631
707
  shadow-for-card-when-raised:
632
708
  choice: shadow-1
709
+ shadow-for-input:
710
+ choice: shadow-0
711
+ shadow-for-input-when-focused:
712
+ choice: 'inset 0 0 0 2px var(--color-primary)'
713
+ shadow-for-input-when-error:
714
+ choice: shadow-0
715
+ shadow-for-input-when-warning:
716
+ choice: shadow-0
633
717
 
634
718
  test:
635
719
  backgroundColors:
@@ -662,6 +746,12 @@ decisionGroupsByTheme:
662
746
  choice: color-neutral-95
663
747
  background-color-for-table-header:
664
748
  choice: color-surface
749
+ background-color-for-collapsible-panel-header-icon-when-disabled:
750
+ choice: color-surface
751
+ background-color-for-input-when-hovered:
752
+ choice: color-neutral-95
753
+ background-color-for-input-when-disabled:
754
+ choice: color-neutral-95
665
755
 
666
756
  borders:
667
757
  label: Borders
@@ -675,11 +765,23 @@ decisionGroupsByTheme:
675
765
  choice: '1px solid var(--color-neutral)'
676
766
  border-for-card-when-raised:
677
767
  choice: '1px solid var(--color-neutral-90)'
768
+ border-for-collapsible-panel-header-icon-when-disabled:
769
+ choice: 'none'
678
770
 
679
771
  borderColors:
680
772
  label: Border Colors
681
773
  prefix: border-color
682
774
  decisions:
775
+ border-color-for-input:
776
+ choice: color-neutral
777
+ border-color-for-input-when-disabled:
778
+ choice: color-neutral
779
+ border-color-for-input-when-hovered:
780
+ choice: color-neutral
781
+ border-color-for-input-when-readonly:
782
+ choice: color-neutral-90
783
+ border-color-for-input-when-focused:
784
+ choice: color-primary
683
785
  border-color-for-button-as-icon:
684
786
  choice: color-neutral
685
787
  border-color-for-button-as-icon-as-info:
@@ -692,10 +794,12 @@ decisionGroupsByTheme:
692
794
  choice: color-neutral-90
693
795
  border-color-for-table-header:
694
796
  choice: color-surface
695
- border-color-for-table-header-when-hovered:
696
- choice: color-neutral-90
697
797
  border-color-for-table-header-as-bottom:
698
798
  choice: color-neutral-90
799
+ border-color-for-table-manager-droppable-list:
800
+ choice: color-neutral
801
+ border-color-for-collapsible-panel-header:
802
+ choice: color-neutral-90
699
803
 
700
804
  borderRadiuses:
701
805
  label: Border radiuses
@@ -713,6 +817,10 @@ decisionGroupsByTheme:
713
817
  choice: border-radius-2
714
818
  border-radius-for-card:
715
819
  choice: border-radius-4
820
+ border-radius-for-table-manager-droppable-list:
821
+ choice: border-radius-4
822
+ border-radius-for-input:
823
+ choice: border-radius-4
716
824
 
717
825
  fontColors:
718
826
  label: Font Colors
@@ -720,6 +828,8 @@ decisionGroupsByTheme:
720
828
  decisions:
721
829
  font-color-for-table-header:
722
830
  choice: color-neutral-40
831
+ font-color-for-input-when-readonly:
832
+ choice: color-neutral-40
723
833
 
724
834
  fontSizes:
725
835
  label: Font Sizes
@@ -833,6 +943,8 @@ decisionGroupsByTheme:
833
943
  choice: '32px'
834
944
  height-for-button-as-icon-as-small:
835
945
  choice: '16px'
946
+ height-for-input:
947
+ choice: '40px'
836
948
 
837
949
  margins:
838
950
  label: Margins
@@ -861,6 +973,26 @@ decisionGroupsByTheme:
861
973
  choice: 'var(--spacing-30) var(--spacing-40)'
862
974
  padding-for-table-cell-as-condensed:
863
975
  choice: 'var(--spacing-20) var(--spacing-40)'
976
+ padding-for-table-manager-droppable-list:
977
+ choice: spacing-30
978
+ padding-for-table-manager-settings-panel:
979
+ choice: 'var(--spacing-40) var(--spacing-50)'
980
+ padding-for-table-manager-draggable-tag:
981
+ choice: 'var(--spacing-10) 0'
982
+ padding-for-collapsible-panel-header:
983
+ choice: 'var(--spacing-30) 0'
984
+ padding-for-collapsible-panel-header-as-condensed:
985
+ choice: 'var(--spacing-20) 0'
986
+ padding-for-collapsible-panel-section-wrapper:
987
+ choice: 'var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
988
+ padding-for-collapsible-panel-section-wrapper-as-condensed:
989
+ choice: 'var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
990
+ padding-for-collapsible-panel-section-description:
991
+ choice: '0 0 var(--spacing-40)'
992
+ padding-for-collapsible-panel-section-description-as-condensed:
993
+ choice: '0 0 var(--spacing-40)'
994
+ padding-for-input:
995
+ choice: spacing-30
864
996
 
865
997
  shadows:
866
998
  label: Shadows
@@ -878,6 +1010,14 @@ decisionGroupsByTheme:
878
1010
  choice: shadow-0
879
1011
  shadow-for-card-when-raised:
880
1012
  choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
1013
+ shadow-for-input:
1014
+ choice: shadow-0
1015
+ shadow-for-input-when-focused:
1016
+ choice: 'inset 0 0 0 1px var(--color-primary)'
1017
+ shadow-for-input-when-error:
1018
+ choice: 'inset 0 0 0 1px var(--color-error)'
1019
+ shadow-for-input-when-warning:
1020
+ choice: 'inset 0 0 0 1px var(--color-warning)'
881
1021
 
882
1022
  # These tokens are deprecated as they don't follow our naming patterns.
883
1023
  # 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.6.0",
4
+ "version": "15.8.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.6.0",
28
- "@commercetools-uikit/avatar": "15.6.0",
29
- "@commercetools-uikit/buttons": "15.6.0",
30
- "@commercetools-uikit/card": "15.6.0",
31
- "@commercetools-uikit/collapsible": "15.6.0",
32
- "@commercetools-uikit/collapsible-motion": "15.6.0",
33
- "@commercetools-uikit/collapsible-panel": "15.6.0",
34
- "@commercetools-uikit/constraints": "15.6.0",
35
- "@commercetools-uikit/data-table": "15.6.0",
36
- "@commercetools-uikit/data-table-manager": "15.6.0",
37
- "@commercetools-uikit/design-system": "15.6.0",
38
- "@commercetools-uikit/field-errors": "15.6.0",
39
- "@commercetools-uikit/field-label": "15.6.0",
40
- "@commercetools-uikit/fields": "15.6.0",
41
- "@commercetools-uikit/grid": "15.6.0",
42
- "@commercetools-uikit/hooks": "15.6.0",
43
- "@commercetools-uikit/i18n": "15.6.0",
44
- "@commercetools-uikit/icons": "15.6.0",
45
- "@commercetools-uikit/inputs": "15.6.0",
46
- "@commercetools-uikit/label": "15.6.0",
47
- "@commercetools-uikit/link": "15.6.0",
48
- "@commercetools-uikit/loading-spinner": "15.6.0",
49
- "@commercetools-uikit/messages": "15.6.0",
50
- "@commercetools-uikit/notifications": "15.6.0",
51
- "@commercetools-uikit/pagination": "15.6.0",
52
- "@commercetools-uikit/primary-action-dropdown": "15.6.0",
53
- "@commercetools-uikit/spacings": "15.6.0",
54
- "@commercetools-uikit/stamp": "15.6.0",
55
- "@commercetools-uikit/tag": "15.6.0",
56
- "@commercetools-uikit/text": "15.6.0",
57
- "@commercetools-uikit/tooltip": "15.6.0",
58
- "@commercetools-uikit/utils": "15.6.0",
59
- "@commercetools-uikit/view-switcher": "15.6.0"
27
+ "@commercetools-uikit/accessible-hidden": "15.8.0",
28
+ "@commercetools-uikit/avatar": "15.8.0",
29
+ "@commercetools-uikit/buttons": "15.8.0",
30
+ "@commercetools-uikit/card": "15.8.0",
31
+ "@commercetools-uikit/collapsible": "15.8.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.8.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.8.0",
34
+ "@commercetools-uikit/constraints": "15.8.0",
35
+ "@commercetools-uikit/data-table": "15.8.0",
36
+ "@commercetools-uikit/data-table-manager": "15.8.0",
37
+ "@commercetools-uikit/design-system": "15.8.0",
38
+ "@commercetools-uikit/field-errors": "15.8.0",
39
+ "@commercetools-uikit/field-label": "15.8.0",
40
+ "@commercetools-uikit/fields": "15.8.0",
41
+ "@commercetools-uikit/grid": "15.8.0",
42
+ "@commercetools-uikit/hooks": "15.8.0",
43
+ "@commercetools-uikit/i18n": "15.8.0",
44
+ "@commercetools-uikit/icons": "15.8.0",
45
+ "@commercetools-uikit/inputs": "15.8.0",
46
+ "@commercetools-uikit/label": "15.8.0",
47
+ "@commercetools-uikit/link": "15.8.0",
48
+ "@commercetools-uikit/loading-spinner": "15.8.0",
49
+ "@commercetools-uikit/messages": "15.8.0",
50
+ "@commercetools-uikit/notifications": "15.8.0",
51
+ "@commercetools-uikit/pagination": "15.8.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.8.0",
53
+ "@commercetools-uikit/spacings": "15.8.0",
54
+ "@commercetools-uikit/stamp": "15.8.0",
55
+ "@commercetools-uikit/tag": "15.8.0",
56
+ "@commercetools-uikit/text": "15.8.0",
57
+ "@commercetools-uikit/tooltip": "15.8.0",
58
+ "@commercetools-uikit/utils": "15.8.0",
59
+ "@commercetools-uikit/view-switcher": "15.8.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",