@commercetools-frontend/ui-kit 15.5.1 → 15.7.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 +40 -1
  5. package/materials/custom-properties.json +40 -1
  6. package/materials/internals/definition.yaml +190 -6
  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.5.1";
83
+ var version = "15.7.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.5.1";
83
+ var version = "15.7.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.5.1";
36
+ var version = "15.7.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;
@@ -108,6 +110,13 @@
108
110
  --spacing-m: 16px;
109
111
  --spacing-l: 24px;
110
112
  --spacing-xl: 32px;
113
+ --spacing-10: 4px;
114
+ --spacing-20: 8px;
115
+ --spacing-30: 16px;
116
+ --spacing-40: 24px;
117
+ --spacing-50: 32px;
118
+ --spacing-60: 48px;
119
+ --spacing-70: 64px;
111
120
  --transition-linear-80ms: 80ms linear;
112
121
  --transition-easeinout-150ms: 150ms ease-in-out;
113
122
  --transition-standard: 200ms ease;
@@ -138,13 +147,17 @@
138
147
  --background-color-for-input: #fff;
139
148
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
140
149
  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
141
- --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;
152
+ --background-color-for-table-cell-when-hovered: hsl(0, 0%, 90%);
153
+ --background-color-for-table-header: #213c45;
142
154
  --background-color-for-tag: hsl(0, 0%, 95%);
143
155
  --background-color-for-tag-warning: hsl(
144
156
  25.110132158590307,
145
157
  89.0196078431%,
146
158
  95%
147
159
  );
160
+ --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 90%);
148
161
  --border-for-button-as-secondary: none;
149
162
  --border-for-button-as-secondary-when-hovered: none;
150
163
  --border-for-button-as-secondary-when-active: none;
@@ -155,6 +168,7 @@
155
168
  --border-color-for-input-when-readonly: #ccc;
156
169
  --border-color-for-input-when-error: #e60050;
157
170
  --border-color-for-input-when-warning: #f16d0e;
171
+ --border-color-for-input-when-hovered: #00b39e;
158
172
  --border-color-for-tag: hsl(0, 0%, 60%);
159
173
  --border-color-for-tag-warning: #f16d0e;
160
174
  --border-color-for-tag-when-focused: #00b39e;
@@ -162,6 +176,8 @@
162
176
  --border-color-for-button-as-icon-as-info: #078cdf;
163
177
  --border-color-for-button-as-icon-as-primary: #00b39e;
164
178
  --border-color-for-button-as-icon-when-disabled: #ccc;
179
+ --border-color-for-table-header: #ccc;
180
+ --border-color-for-table-header-as-bottom: #213c45;
165
181
  --border-radius-for-button-as-big: 6px;
166
182
  --border-radius-for-button-as-small: 4px;
167
183
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -170,6 +186,10 @@
170
186
  --border-radius-for-input: 6px;
171
187
  --border-radius-for-tag: 2px;
172
188
  --border-radius-for-card: 6px;
189
+ --border-width-for-input: 1px;
190
+ --border-width-for-input-when-warning: 1px;
191
+ --border-width-for-input-when-error: 1px;
192
+ --border-width-for-input-when-focused: 1px;
173
193
  --font-color-for-text: #1a1a1a;
174
194
  --font-color-for-input: #1a1a1a;
175
195
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -179,11 +199,13 @@
179
199
  --font-color-for-tag: #1a1a1a;
180
200
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
181
201
  --font-color-for-text-when-inverted: #fff;
202
+ --font-color-for-table-header: #fff;
182
203
  --height-for-button-as-big: 32px;
183
204
  --height-for-button-as-small: 24px;
184
205
  --height-for-button-as-icon-as-big: 32px;
185
206
  --height-for-button-as-icon-as-medium: 24px;
186
207
  --height-for-button-as-icon-as-small: 16px;
208
+ --height-for-input: 32px;
187
209
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
188
210
  --font-size-for-button: 1rem;
189
211
  --font-size-for-input: 1rem;
@@ -196,6 +218,8 @@
196
218
  --font-size-for-text-as-detail: 0.9231rem;
197
219
  --font-size-for-body: 13px;
198
220
  --font-size-for-link: 1rem;
221
+ --font-size-for-stamp: 1rem;
222
+ --font-size-for-table: 1rem;
199
223
  --line-height-for-text-as-h1: inherit;
200
224
  --line-height-for-text-as-h2: inherit;
201
225
  --line-height-for-text-as-h3: inherit;
@@ -211,6 +235,17 @@
211
235
  --font-weight-for-text-as-body: 400;
212
236
  --font-weight-for-text-as-detail: 400;
213
237
  --font-weight-for-button: 400;
238
+ --font-weight-for-table-header: 400;
239
+ --margin-for-table-header: 8px;
240
+ --margin-for-table-as-condensed: 8px;
241
+ --padding-for-stamp: var(--spacing-10) var(--spacing-20);
242
+ --padding-for-stamp-as-condensed: 1px var(--spacing-10);
243
+ --padding-for-tag: 5px var(--spacing-20);
244
+ --padding-for-table-header: 16px;
245
+ --padding-for-table-header-as-condensed: 8px;
246
+ --padding-for-table-cell: 16px;
247
+ --padding-for-table-cell-as-condensed: 8px;
248
+ --padding-for-input: 8px;
214
249
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
215
250
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
216
251
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -225,6 +260,10 @@
225
260
  0 1px 2px rgba(0, 0, 0, 0.24);
226
261
  --shadow-for-card-when-raised: 0 1px 3px rgba(0, 0, 0, 0.12),
227
262
  0 1px 2px rgba(0, 0, 0, 0.24);
263
+ --shadow-for-input: none;
264
+ --shadow-for-input-when-focused: inset 0 0 0 2px var(--color-primary);
265
+ --shadow-for-input-when-error: none;
266
+ --shadow-for-input-when-warning: none;
228
267
  --font-size-m: 1rem;
229
268
  --big-button-height: 32px;
230
269
  --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",
@@ -96,6 +98,13 @@
96
98
  "--spacing-m": "16px",
97
99
  "--spacing-l": "24px",
98
100
  "--spacing-xl": "32px",
101
+ "--spacing-10": "4px",
102
+ "--spacing-20": "8px",
103
+ "--spacing-30": "16px",
104
+ "--spacing-40": "24px",
105
+ "--spacing-50": "32px",
106
+ "--spacing-60": "48px",
107
+ "--spacing-70": "64px",
99
108
  "--transition-linear-80ms": "80ms linear",
100
109
  "--transition-easeinout-150ms": "150ms ease-in-out",
101
110
  "--transition-standard": "200ms ease",
@@ -118,9 +127,13 @@
118
127
  "--background-color-for-input": "#fff",
119
128
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
120
129
  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
121
- "--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",
132
+ "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 90%)",
133
+ "--background-color-for-table-header": "#213c45",
122
134
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
123
135
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
136
+ "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 90%)",
124
137
  "--border-for-button-as-secondary": "none",
125
138
  "--border-for-button-as-secondary-when-hovered": "none",
126
139
  "--border-for-button-as-secondary-when-active": "none",
@@ -131,6 +144,7 @@
131
144
  "--border-color-for-input-when-readonly": "#ccc",
132
145
  "--border-color-for-input-when-error": "#e60050",
133
146
  "--border-color-for-input-when-warning": "#f16d0e",
147
+ "--border-color-for-input-when-hovered": "#00b39e",
134
148
  "--border-color-for-tag": "hsl(0, 0%, 60%)",
135
149
  "--border-color-for-tag-warning": "#f16d0e",
136
150
  "--border-color-for-tag-when-focused": "#00b39e",
@@ -138,6 +152,8 @@
138
152
  "--border-color-for-button-as-icon-as-info": "#078cdf",
139
153
  "--border-color-for-button-as-icon-as-primary": "#00b39e",
140
154
  "--border-color-for-button-as-icon-when-disabled": "#ccc",
155
+ "--border-color-for-table-header": "#ccc",
156
+ "--border-color-for-table-header-as-bottom": "#213c45",
141
157
  "--border-radius-for-button-as-big": "6px",
142
158
  "--border-radius-for-button-as-small": "4px",
143
159
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -146,6 +162,10 @@
146
162
  "--border-radius-for-input": "6px",
147
163
  "--border-radius-for-tag": "2px",
148
164
  "--border-radius-for-card": "6px",
165
+ "--border-width-for-input": "1px",
166
+ "--border-width-for-input-when-warning": "1px",
167
+ "--border-width-for-input-when-error": "1px",
168
+ "--border-width-for-input-when-focused": "1px",
149
169
  "--font-color-for-text": "#1a1a1a",
150
170
  "--font-color-for-input": "#1a1a1a",
151
171
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -155,11 +175,13 @@
155
175
  "--font-color-for-tag": "#1a1a1a",
156
176
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
157
177
  "--font-color-for-text-when-inverted": "#fff",
178
+ "--font-color-for-table-header": "#fff",
158
179
  "--height-for-button-as-big": "32px",
159
180
  "--height-for-button-as-small": "24px",
160
181
  "--height-for-button-as-icon-as-big": "32px",
161
182
  "--height-for-button-as-icon-as-medium": "24px",
162
183
  "--height-for-button-as-icon-as-small": "16px",
184
+ "--height-for-input": "32px",
163
185
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
164
186
  "--font-size-for-button": "1rem",
165
187
  "--font-size-for-input": "1rem",
@@ -172,6 +194,8 @@
172
194
  "--font-size-for-text-as-detail": "0.9231rem",
173
195
  "--font-size-for-body": "13px",
174
196
  "--font-size-for-link": "1rem",
197
+ "--font-size-for-stamp": "1rem",
198
+ "--font-size-for-table": "1rem",
175
199
  "--line-height-for-text-as-h1": "inherit",
176
200
  "--line-height-for-text-as-h2": "inherit",
177
201
  "--line-height-for-text-as-h3": "inherit",
@@ -187,6 +211,17 @@
187
211
  "--font-weight-for-text-as-body": "400",
188
212
  "--font-weight-for-text-as-detail": "400",
189
213
  "--font-weight-for-button": "400",
214
+ "--font-weight-for-table-header": "400",
215
+ "--margin-for-table-header": "8px",
216
+ "--margin-for-table-as-condensed": "8px",
217
+ "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
218
+ "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
219
+ "--padding-for-tag": "5px var(--spacing-20)",
220
+ "--padding-for-table-header": "16px",
221
+ "--padding-for-table-header-as-condensed": "8px",
222
+ "--padding-for-table-cell": "16px",
223
+ "--padding-for-table-cell-as-condensed": "8px",
224
+ "--padding-for-input": "8px",
190
225
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
191
226
  "--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)",
192
227
  "--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)",
@@ -194,6 +229,10 @@
194
229
  "--shadow-for-button-when-disabled": "0 0 0 1px var(--color-neutral) inset",
195
230
  "--shadow-box-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
196
231
  "--shadow-for-card-when-raised": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
232
+ "--shadow-for-input": "none",
233
+ "--shadow-for-input-when-focused": "inset 0 0 0 2px var(--color-primary)",
234
+ "--shadow-for-input-when-error": "none",
235
+ "--shadow-for-input-when-warning": "none",
197
236
  "--font-size-m": "1rem",
198
237
  "--big-button-height": "32px",
199
238
  "--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
@@ -165,11 +173,20 @@ choiceGroupsByTheme:
165
173
  label: Spacings
166
174
  prefix: spacing
167
175
  choices:
176
+ # Legacy deprecated tokens
168
177
  spacing-xs: 4px
169
178
  spacing-s: 8px
170
179
  spacing-m: 16px
171
180
  spacing-l: 24px
172
181
  spacing-xl: 32px
182
+ # New tokens
183
+ spacing-10: 4px
184
+ spacing-20: 8px
185
+ spacing-30: 16px
186
+ spacing-40: 24px
187
+ spacing-50: 32px
188
+ spacing-60: 48px
189
+ spacing-70: 64px
173
190
  transitions:
174
191
  label: Transitions
175
192
  prefix: transition
@@ -252,6 +269,10 @@ variants:
252
269
  description: 'To differentiate component urgent type'
253
270
  info:
254
271
  description: 'To differentiate component info type'
272
+ condensed:
273
+ description: 'Elements with a compact style'
274
+ bottom:
275
+ description: 'To differentiate component bottom style'
255
276
 
256
277
  componentGroups:
257
278
  button:
@@ -270,6 +291,18 @@ componentGroups:
270
291
  description: 'Card element'
271
292
  link:
272
293
  description: 'Link elements'
294
+ stamp:
295
+ description: 'Stamp elements'
296
+ table:
297
+ description: 'Table elements'
298
+ table-header:
299
+ description: 'Table header elements'
300
+ table-cell:
301
+ description: 'Table cell elements'
302
+ select-input:
303
+ description: 'Select input elements'
304
+ select-input-option:
305
+ description: 'Select input option elements'
273
306
 
274
307
  decisionGroupsByTheme:
275
308
  default:
@@ -310,13 +343,23 @@ decisionGroupsByTheme:
310
343
  choice: color-accent-98
311
344
  background-color-for-input-when-hovered:
312
345
  description: ''
346
+ choice: 'unset'
347
+ background-color-for-input-when-focused:
348
+ description: ''
349
+ choice: 'unset'
350
+ background-color-for-table-cell-when-hovered:
313
351
  choice: color-neutral-90
352
+ background-color-for-table-header:
353
+ choice: color-accent
314
354
  background-color-for-tag:
315
355
  description: ''
316
356
  choice: color-neutral-95
317
357
  background-color-for-tag-warning:
318
358
  description: ''
319
359
  choice: color-warning-95
360
+ background-color-for-select-input-option-when-hovered:
361
+ description: ''
362
+ choice: color-neutral-90
320
363
 
321
364
  borders:
322
365
  label: Borders
@@ -353,6 +396,9 @@ decisionGroupsByTheme:
353
396
  border-color-for-input-when-warning:
354
397
  description: ''
355
398
  choice: color-warning
399
+ border-color-for-input-when-hovered:
400
+ description: ''
401
+ choice: color-primary
356
402
  border-color-for-tag:
357
403
  description: ''
358
404
  choice: color-neutral-60
@@ -370,6 +416,10 @@ decisionGroupsByTheme:
370
416
  choice: color-primary
371
417
  border-color-for-button-as-icon-when-disabled:
372
418
  choice: color-neutral
419
+ border-color-for-table-header:
420
+ choice: color-neutral
421
+ border-color-for-table-header-as-bottom:
422
+ choice: color-accent
373
423
 
374
424
  borderRadiuses:
375
425
  label: Border Radius
@@ -396,6 +446,19 @@ decisionGroupsByTheme:
396
446
  # We don't have font families in choices yet, so we can't have decisions for
397
447
  # them
398
448
 
449
+ borderWidths:
450
+ label: Border width
451
+ prefix: border-width
452
+ decisions:
453
+ border-width-for-input:
454
+ choice: border-width-1
455
+ border-width-for-input-when-warning:
456
+ choice: border-width-1
457
+ border-width-for-input-when-error:
458
+ choice: border-width-1
459
+ border-width-for-input-when-focused:
460
+ choice: border-width-1
461
+
399
462
  fontColors:
400
463
  label: Font Colors
401
464
  prefix: font-color
@@ -427,6 +490,8 @@ decisionGroupsByTheme:
427
490
  font-color-for-text-when-inverted:
428
491
  description: ''
429
492
  choice: color-surface
493
+ font-color-for-table-header:
494
+ choice: color-surface
430
495
 
431
496
  heights:
432
497
  label: Height
@@ -442,6 +507,8 @@ decisionGroupsByTheme:
442
507
  choice: '24px'
443
508
  height-for-button-as-icon-as-small:
444
509
  choice: '16px'
510
+ height-for-input:
511
+ choice: '32px'
445
512
 
446
513
  placeholderFontColors:
447
514
  label: Placeholder font colors
@@ -488,6 +555,10 @@ decisionGroupsByTheme:
488
555
  font-size-for-link:
489
556
  description: ''
490
557
  choice: font-size-30
558
+ font-size-for-stamp:
559
+ choice: font-size-30
560
+ font-size-for-table:
561
+ choice: font-size-30
491
562
 
492
563
  lineHeights:
493
564
  label: Line Heights
@@ -542,6 +613,38 @@ decisionGroupsByTheme:
542
613
  choice: font-weight-400
543
614
  font-weight-for-button:
544
615
  choice: font-weight-400
616
+ font-weight-for-table-header:
617
+ choice: font-weight-400
618
+
619
+ margins:
620
+ label: Margins
621
+ prefix: margin
622
+ decisions:
623
+ margin-for-table-header:
624
+ choice: spacing-20
625
+ margin-for-table-as-condensed:
626
+ choice: spacing-20
627
+
628
+ paddings:
629
+ label: Paddings
630
+ prefix: padding
631
+ decisions:
632
+ padding-for-stamp:
633
+ choice: 'var(--spacing-10) var(--spacing-20)'
634
+ padding-for-stamp-as-condensed:
635
+ choice: '1px var(--spacing-10)'
636
+ padding-for-tag:
637
+ choice: '5px var(--spacing-20)'
638
+ padding-for-table-header:
639
+ choice: spacing-30
640
+ padding-for-table-header-as-condensed:
641
+ choice: spacing-20
642
+ padding-for-table-cell:
643
+ choice: spacing-30
644
+ padding-for-table-cell-as-condensed:
645
+ choice: spacing-20
646
+ padding-for-input:
647
+ choice: 'spacing-20'
545
648
 
546
649
  shadows:
547
650
  label: Shadows
@@ -563,6 +666,14 @@ decisionGroupsByTheme:
563
666
  choice: shadow-1
564
667
  shadow-for-card-when-raised:
565
668
  choice: shadow-1
669
+ shadow-for-input:
670
+ choice: shadow-0
671
+ shadow-for-input-when-focused:
672
+ choice: 'inset 0 0 0 2px var(--color-primary)'
673
+ shadow-for-input-when-error:
674
+ choice: shadow-0
675
+ shadow-for-input-when-warning:
676
+ choice: shadow-0
566
677
 
567
678
  test:
568
679
  backgroundColors:
@@ -591,11 +702,13 @@ decisionGroupsByTheme:
591
702
  choice: '#E7680D' # color-warning with 5% black opacity
592
703
  background-color-for-button-when-disabled:
593
704
  choice: color-neutral-95
594
- background-color-for-tag:
595
- description: ''
596
- choice: color-warning-95
597
- background-color-for-tag-warning:
598
- description: ''
705
+ background-color-for-table-cell-when-hovered:
706
+ choice: color-neutral-95
707
+ background-color-for-table-header:
708
+ choice: color-surface
709
+ background-color-for-input-when-hovered:
710
+ choice: color-neutral-95
711
+ background-color-for-input-when-disabled:
599
712
  choice: color-neutral-95
600
713
 
601
714
  borders:
@@ -615,6 +728,16 @@ decisionGroupsByTheme:
615
728
  label: Border Colors
616
729
  prefix: border-color
617
730
  decisions:
731
+ border-color-for-input:
732
+ choice: color-neutral
733
+ border-color-for-input-when-disabled:
734
+ choice: color-neutral
735
+ border-color-for-input-when-hovered:
736
+ choice: color-neutral
737
+ border-color-for-input-when-readonly:
738
+ choice: color-neutral-90
739
+ border-color-for-input-when-focused:
740
+ choice: color-primary
618
741
  border-color-for-button-as-icon:
619
742
  choice: color-neutral
620
743
  border-color-for-button-as-icon-as-info:
@@ -625,6 +748,10 @@ decisionGroupsByTheme:
625
748
  choice: color-surface
626
749
  border-color-for-card-when-raised:
627
750
  choice: color-neutral-90
751
+ border-color-for-table-header:
752
+ choice: color-surface
753
+ border-color-for-table-header-as-bottom:
754
+ choice: color-neutral-90
628
755
 
629
756
  borderRadiuses:
630
757
  label: Border radiuses
@@ -642,6 +769,17 @@ decisionGroupsByTheme:
642
769
  choice: border-radius-2
643
770
  border-radius-for-card:
644
771
  choice: border-radius-4
772
+ border-radius-for-input:
773
+ choice: border-radius-4
774
+
775
+ fontColors:
776
+ label: Font Colors
777
+ prefix: font-color
778
+ decisions:
779
+ font-color-for-table-header:
780
+ choice: color-neutral-40
781
+ font-color-for-input-when-readonly:
782
+ choice: color-neutral-40
645
783
 
646
784
  fontSizes:
647
785
  label: Font Sizes
@@ -680,6 +818,10 @@ decisionGroupsByTheme:
680
818
  font-size-for-link:
681
819
  description: ''
682
820
  choice: 'inherit'
821
+ font-size-for-stamp:
822
+ choice: font-size-20
823
+ font-size-for-table:
824
+ choice: font-size-20
683
825
 
684
826
  lineHeights:
685
827
  label: Line Heights
@@ -734,6 +876,8 @@ decisionGroupsByTheme:
734
876
  choice: font-weight-400
735
877
  font-weight-for-button:
736
878
  choice: font-weight-500
879
+ font-weight-for-table-header:
880
+ choice: font-weight-600
737
881
 
738
882
  heights:
739
883
  label: Heights
@@ -749,6 +893,38 @@ decisionGroupsByTheme:
749
893
  choice: '32px'
750
894
  height-for-button-as-icon-as-small:
751
895
  choice: '16px'
896
+ height-for-input:
897
+ choice: '40px'
898
+
899
+ margins:
900
+ label: Margins
901
+ prefix: margin
902
+ decisions:
903
+ margin-for-table-header:
904
+ choice: spacing-30
905
+ margin-for-table-cell-as-condensed:
906
+ choice: spacing-20
907
+
908
+ paddings:
909
+ label: Paddings
910
+ prefix: padding
911
+ decisions:
912
+ padding-for-stamp:
913
+ choice: '4px 12px'
914
+ padding-for-stamp-as-condensed:
915
+ choice: '0 var(--spacing-20)'
916
+ padding-for-tag:
917
+ choice: '2px 12px'
918
+ padding-for-table-header:
919
+ choice: spacing-40
920
+ padding-for-table-header-as-condensed:
921
+ choice: spacing-40
922
+ padding-for-table-cell:
923
+ choice: 'var(--spacing-30) var(--spacing-40)'
924
+ padding-for-table-cell-as-condensed:
925
+ choice: 'var(--spacing-20) var(--spacing-40)'
926
+ padding-for-input:
927
+ choice: 'spacing-30'
752
928
 
753
929
  shadows:
754
930
  label: Shadows
@@ -765,7 +941,15 @@ decisionGroupsByTheme:
765
941
  shadow-for-button-when-disabled:
766
942
  choice: shadow-0
767
943
  shadow-for-card-when-raised:
768
- choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
944
+ choice: shadow-0
945
+ shadow-for-input:
946
+ choice: shadow-0
947
+ shadow-for-input-when-focused:
948
+ choice: 'inset 0 0 0 1px var(--color-primary)'
949
+ shadow-for-input-when-error:
950
+ choice: 'inset 0 0 0 1px var(--color-error)'
951
+ shadow-for-input-when-warning:
952
+ choice: 'inset 0 0 0 1px var(--color-warning)'
769
953
 
770
954
  # These tokens are deprecated as they don't follow our naming patterns.
771
955
  # 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.5.1",
4
+ "version": "15.7.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.5.1",
28
- "@commercetools-uikit/avatar": "15.5.1",
29
- "@commercetools-uikit/buttons": "15.5.1",
30
- "@commercetools-uikit/card": "15.5.1",
31
- "@commercetools-uikit/collapsible": "15.5.1",
32
- "@commercetools-uikit/collapsible-motion": "15.5.1",
33
- "@commercetools-uikit/collapsible-panel": "15.5.1",
34
- "@commercetools-uikit/constraints": "15.5.1",
35
- "@commercetools-uikit/data-table": "15.5.1",
36
- "@commercetools-uikit/data-table-manager": "15.5.1",
37
- "@commercetools-uikit/design-system": "15.5.1",
38
- "@commercetools-uikit/field-errors": "15.5.1",
39
- "@commercetools-uikit/field-label": "15.5.1",
40
- "@commercetools-uikit/fields": "15.5.1",
41
- "@commercetools-uikit/grid": "15.5.1",
42
- "@commercetools-uikit/hooks": "15.5.1",
43
- "@commercetools-uikit/i18n": "15.5.1",
44
- "@commercetools-uikit/icons": "15.5.1",
45
- "@commercetools-uikit/inputs": "15.5.1",
46
- "@commercetools-uikit/label": "15.5.1",
47
- "@commercetools-uikit/link": "15.5.1",
48
- "@commercetools-uikit/loading-spinner": "15.5.1",
49
- "@commercetools-uikit/messages": "15.5.1",
50
- "@commercetools-uikit/notifications": "15.5.1",
51
- "@commercetools-uikit/pagination": "15.5.1",
52
- "@commercetools-uikit/primary-action-dropdown": "15.5.1",
53
- "@commercetools-uikit/spacings": "15.5.1",
54
- "@commercetools-uikit/stamp": "15.5.1",
55
- "@commercetools-uikit/tag": "15.5.1",
56
- "@commercetools-uikit/text": "15.5.1",
57
- "@commercetools-uikit/tooltip": "15.5.1",
58
- "@commercetools-uikit/utils": "15.5.1",
59
- "@commercetools-uikit/view-switcher": "15.5.1"
27
+ "@commercetools-uikit/accessible-hidden": "15.7.0",
28
+ "@commercetools-uikit/avatar": "15.7.0",
29
+ "@commercetools-uikit/buttons": "15.7.0",
30
+ "@commercetools-uikit/card": "15.7.0",
31
+ "@commercetools-uikit/collapsible": "15.7.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.7.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.7.0",
34
+ "@commercetools-uikit/constraints": "15.7.0",
35
+ "@commercetools-uikit/data-table": "15.7.0",
36
+ "@commercetools-uikit/data-table-manager": "15.7.0",
37
+ "@commercetools-uikit/design-system": "15.7.0",
38
+ "@commercetools-uikit/field-errors": "15.7.0",
39
+ "@commercetools-uikit/field-label": "15.7.0",
40
+ "@commercetools-uikit/fields": "15.7.0",
41
+ "@commercetools-uikit/grid": "15.7.0",
42
+ "@commercetools-uikit/hooks": "15.7.0",
43
+ "@commercetools-uikit/i18n": "15.7.0",
44
+ "@commercetools-uikit/icons": "15.7.0",
45
+ "@commercetools-uikit/inputs": "15.7.0",
46
+ "@commercetools-uikit/label": "15.7.0",
47
+ "@commercetools-uikit/link": "15.7.0",
48
+ "@commercetools-uikit/loading-spinner": "15.7.0",
49
+ "@commercetools-uikit/messages": "15.7.0",
50
+ "@commercetools-uikit/notifications": "15.7.0",
51
+ "@commercetools-uikit/pagination": "15.7.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.7.0",
53
+ "@commercetools-uikit/spacings": "15.7.0",
54
+ "@commercetools-uikit/stamp": "15.7.0",
55
+ "@commercetools-uikit/tag": "15.7.0",
56
+ "@commercetools-uikit/text": "15.7.0",
57
+ "@commercetools-uikit/tooltip": "15.7.0",
58
+ "@commercetools-uikit/utils": "15.7.0",
59
+ "@commercetools-uikit/view-switcher": "15.7.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",