@commercetools-frontend/ui-kit 15.6.0 → 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.
@@ -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.7.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.6.0";
83
+ var version = "15.7.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.6.0";
36
+ var version = "15.7.0";
37
37
 
38
38
  export { version };
@@ -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,6 +157,7 @@
154
157
  89.0196078431%,
155
158
  95%
156
159
  );
160
+ --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 90%);
157
161
  --border-for-button-as-secondary: none;
158
162
  --border-for-button-as-secondary-when-hovered: none;
159
163
  --border-for-button-as-secondary-when-active: none;
@@ -164,6 +168,7 @@
164
168
  --border-color-for-input-when-readonly: #ccc;
165
169
  --border-color-for-input-when-error: #e60050;
166
170
  --border-color-for-input-when-warning: #f16d0e;
171
+ --border-color-for-input-when-hovered: #00b39e;
167
172
  --border-color-for-tag: hsl(0, 0%, 60%);
168
173
  --border-color-for-tag-warning: #f16d0e;
169
174
  --border-color-for-tag-when-focused: #00b39e;
@@ -172,7 +177,6 @@
172
177
  --border-color-for-button-as-icon-as-primary: #00b39e;
173
178
  --border-color-for-button-as-icon-when-disabled: #ccc;
174
179
  --border-color-for-table-header: #ccc;
175
- --border-color-for-table-header-when-hovered: #ccc;
176
180
  --border-color-for-table-header-as-bottom: #213c45;
177
181
  --border-radius-for-button-as-big: 6px;
178
182
  --border-radius-for-button-as-small: 4px;
@@ -182,6 +186,10 @@
182
186
  --border-radius-for-input: 6px;
183
187
  --border-radius-for-tag: 2px;
184
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;
185
193
  --font-color-for-text: #1a1a1a;
186
194
  --font-color-for-input: #1a1a1a;
187
195
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -197,6 +205,7 @@
197
205
  --height-for-button-as-icon-as-big: 32px;
198
206
  --height-for-button-as-icon-as-medium: 24px;
199
207
  --height-for-button-as-icon-as-small: 16px;
208
+ --height-for-input: 32px;
200
209
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
201
210
  --font-size-for-button: 1rem;
202
211
  --font-size-for-input: 1rem;
@@ -236,6 +245,7 @@
236
245
  --padding-for-table-header-as-condensed: 8px;
237
246
  --padding-for-table-cell: 16px;
238
247
  --padding-for-table-cell-as-condensed: 8px;
248
+ --padding-for-input: 8px;
239
249
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
240
250
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
241
251
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -250,6 +260,10 @@
250
260
  0 1px 2px rgba(0, 0, 0, 0.24);
251
261
  --shadow-for-card-when-raised: 0 1px 3px rgba(0, 0, 0, 0.12),
252
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;
253
267
  --font-size-m: 1rem;
254
268
  --big-button-height: 32px;
255
269
  --small-button-height: 24px;
@@ -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,11 +127,13 @@
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-select-input-option-when-hovered": "hsl(0, 0%, 90%)",
133
137
  "--border-for-button-as-secondary": "none",
134
138
  "--border-for-button-as-secondary-when-hovered": "none",
135
139
  "--border-for-button-as-secondary-when-active": "none",
@@ -140,6 +144,7 @@
140
144
  "--border-color-for-input-when-readonly": "#ccc",
141
145
  "--border-color-for-input-when-error": "#e60050",
142
146
  "--border-color-for-input-when-warning": "#f16d0e",
147
+ "--border-color-for-input-when-hovered": "#00b39e",
143
148
  "--border-color-for-tag": "hsl(0, 0%, 60%)",
144
149
  "--border-color-for-tag-warning": "#f16d0e",
145
150
  "--border-color-for-tag-when-focused": "#00b39e",
@@ -148,7 +153,6 @@
148
153
  "--border-color-for-button-as-icon-as-primary": "#00b39e",
149
154
  "--border-color-for-button-as-icon-when-disabled": "#ccc",
150
155
  "--border-color-for-table-header": "#ccc",
151
- "--border-color-for-table-header-when-hovered": "#ccc",
152
156
  "--border-color-for-table-header-as-bottom": "#213c45",
153
157
  "--border-radius-for-button-as-big": "6px",
154
158
  "--border-radius-for-button-as-small": "4px",
@@ -158,6 +162,10 @@
158
162
  "--border-radius-for-input": "6px",
159
163
  "--border-radius-for-tag": "2px",
160
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",
161
169
  "--font-color-for-text": "#1a1a1a",
162
170
  "--font-color-for-input": "#1a1a1a",
163
171
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -173,6 +181,7 @@
173
181
  "--height-for-button-as-icon-as-big": "32px",
174
182
  "--height-for-button-as-icon-as-medium": "24px",
175
183
  "--height-for-button-as-icon-as-small": "16px",
184
+ "--height-for-input": "32px",
176
185
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
177
186
  "--font-size-for-button": "1rem",
178
187
  "--font-size-for-input": "1rem",
@@ -212,6 +221,7 @@
212
221
  "--padding-for-table-header-as-condensed": "8px",
213
222
  "--padding-for-table-cell": "16px",
214
223
  "--padding-for-table-cell-as-condensed": "8px",
224
+ "--padding-for-input": "8px",
215
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)",
216
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)",
217
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)",
@@ -219,6 +229,10 @@
219
229
  "--shadow-for-button-when-disabled": "0 0 0 1px var(--color-neutral) inset",
220
230
  "--shadow-box-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
221
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",
222
236
  "--font-size-m": "1rem",
223
237
  "--big-button-height": "32px",
224
238
  "--small-button-height": "24px",
@@ -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,10 @@ componentGroups:
291
299
  description: 'Table header elements'
292
300
  table-cell:
293
301
  description: 'Table cell elements'
302
+ select-input:
303
+ description: 'Select input elements'
304
+ select-input-option:
305
+ description: 'Select input option elements'
294
306
 
295
307
  decisionGroupsByTheme:
296
308
  default:
@@ -331,7 +343,10 @@ decisionGroupsByTheme:
331
343
  choice: color-accent-98
332
344
  background-color-for-input-when-hovered:
333
345
  description: ''
334
- choice: color-neutral-90
346
+ choice: 'unset'
347
+ background-color-for-input-when-focused:
348
+ description: ''
349
+ choice: 'unset'
335
350
  background-color-for-table-cell-when-hovered:
336
351
  choice: color-neutral-90
337
352
  background-color-for-table-header:
@@ -342,6 +357,9 @@ decisionGroupsByTheme:
342
357
  background-color-for-tag-warning:
343
358
  description: ''
344
359
  choice: color-warning-95
360
+ background-color-for-select-input-option-when-hovered:
361
+ description: ''
362
+ choice: color-neutral-90
345
363
 
346
364
  borders:
347
365
  label: Borders
@@ -378,6 +396,9 @@ decisionGroupsByTheme:
378
396
  border-color-for-input-when-warning:
379
397
  description: ''
380
398
  choice: color-warning
399
+ border-color-for-input-when-hovered:
400
+ description: ''
401
+ choice: color-primary
381
402
  border-color-for-tag:
382
403
  description: ''
383
404
  choice: color-neutral-60
@@ -397,8 +418,6 @@ decisionGroupsByTheme:
397
418
  choice: color-neutral
398
419
  border-color-for-table-header:
399
420
  choice: color-neutral
400
- border-color-for-table-header-when-hovered:
401
- choice: color-neutral
402
421
  border-color-for-table-header-as-bottom:
403
422
  choice: color-accent
404
423
 
@@ -427,6 +446,19 @@ decisionGroupsByTheme:
427
446
  # We don't have font families in choices yet, so we can't have decisions for
428
447
  # them
429
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
+
430
462
  fontColors:
431
463
  label: Font Colors
432
464
  prefix: font-color
@@ -475,6 +507,8 @@ decisionGroupsByTheme:
475
507
  choice: '24px'
476
508
  height-for-button-as-icon-as-small:
477
509
  choice: '16px'
510
+ height-for-input:
511
+ choice: '32px'
478
512
 
479
513
  placeholderFontColors:
480
514
  label: Placeholder font colors
@@ -609,6 +643,8 @@ decisionGroupsByTheme:
609
643
  choice: spacing-30
610
644
  padding-for-table-cell-as-condensed:
611
645
  choice: spacing-20
646
+ padding-for-input:
647
+ choice: 'spacing-20'
612
648
 
613
649
  shadows:
614
650
  label: Shadows
@@ -630,6 +666,14 @@ decisionGroupsByTheme:
630
666
  choice: shadow-1
631
667
  shadow-for-card-when-raised:
632
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
633
677
 
634
678
  test:
635
679
  backgroundColors:
@@ -662,6 +706,10 @@ decisionGroupsByTheme:
662
706
  choice: color-neutral-95
663
707
  background-color-for-table-header:
664
708
  choice: color-surface
709
+ background-color-for-input-when-hovered:
710
+ choice: color-neutral-95
711
+ background-color-for-input-when-disabled:
712
+ choice: color-neutral-95
665
713
 
666
714
  borders:
667
715
  label: Borders
@@ -680,6 +728,16 @@ decisionGroupsByTheme:
680
728
  label: Border Colors
681
729
  prefix: border-color
682
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
683
741
  border-color-for-button-as-icon:
684
742
  choice: color-neutral
685
743
  border-color-for-button-as-icon-as-info:
@@ -692,8 +750,6 @@ decisionGroupsByTheme:
692
750
  choice: color-neutral-90
693
751
  border-color-for-table-header:
694
752
  choice: color-surface
695
- border-color-for-table-header-when-hovered:
696
- choice: color-neutral-90
697
753
  border-color-for-table-header-as-bottom:
698
754
  choice: color-neutral-90
699
755
 
@@ -713,6 +769,8 @@ decisionGroupsByTheme:
713
769
  choice: border-radius-2
714
770
  border-radius-for-card:
715
771
  choice: border-radius-4
772
+ border-radius-for-input:
773
+ choice: border-radius-4
716
774
 
717
775
  fontColors:
718
776
  label: Font Colors
@@ -720,6 +778,8 @@ decisionGroupsByTheme:
720
778
  decisions:
721
779
  font-color-for-table-header:
722
780
  choice: color-neutral-40
781
+ font-color-for-input-when-readonly:
782
+ choice: color-neutral-40
723
783
 
724
784
  fontSizes:
725
785
  label: Font Sizes
@@ -833,6 +893,8 @@ decisionGroupsByTheme:
833
893
  choice: '32px'
834
894
  height-for-button-as-icon-as-small:
835
895
  choice: '16px'
896
+ height-for-input:
897
+ choice: '40px'
836
898
 
837
899
  margins:
838
900
  label: Margins
@@ -861,6 +923,8 @@ decisionGroupsByTheme:
861
923
  choice: 'var(--spacing-30) var(--spacing-40)'
862
924
  padding-for-table-cell-as-condensed:
863
925
  choice: 'var(--spacing-20) var(--spacing-40)'
926
+ padding-for-input:
927
+ choice: 'spacing-30'
864
928
 
865
929
  shadows:
866
930
  label: Shadows
@@ -877,7 +941,15 @@ decisionGroupsByTheme:
877
941
  shadow-for-button-when-disabled:
878
942
  choice: shadow-0
879
943
  shadow-for-card-when-raised:
880
- 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)'
881
953
 
882
954
  # These tokens are deprecated as they don't follow our naming patterns.
883
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.6.0",
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.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.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",