@commercetools-frontend/ui-kit 15.8.0 → 15.9.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 +47 -1
  5. package/materials/custom-properties.json +39 -1
  6. package/materials/internals/definition.yaml +173 -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.8.0";
83
+ var version = "15.9.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.8.0";
83
+ var version = "15.9.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.8.0";
36
+ var version = "15.9.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -12,8 +12,11 @@
12
12
  --color-primary-85: hsl(172.9608938547486, 100%, 85%);
13
13
  --color-primary-95: hsl(172.9608938547486, 100%, 95%);
14
14
  --color-accent: #213c45;
15
+ --color-accent-10: hsl(195, 35.2941176471%, 10%);
16
+ --color-accent-20: hsl(195, 35.2941176471%, 20%);
15
17
  --color-accent-30: hsl(195, 35.2941176471%, 30%);
16
18
  --color-accent-40: hsl(195, 35.2941176471%, 40%);
19
+ --color-accent-90: hsl(195, 35.2941176471%, 90%);
17
20
  --color-accent-95: hsl(195, 35.2941176471%, 95%);
18
21
  --color-accent-98: hsl(195, 35.2941176471%, 98%);
19
22
  --color-neutral: #ccc;
@@ -23,13 +26,19 @@
23
26
  --color-neutral-60: hsl(0, 0%, 60%);
24
27
  --color-neutral-90: hsl(0, 0%, 90%);
25
28
  --color-neutral-95: hsl(0, 0%, 95%);
29
+ --color-neutral-85: hsl(0, 0%, 85%);
26
30
  --color-info: #078cdf;
31
+ --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
27
32
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
28
33
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
29
34
  --color-warning: #f16d0e;
30
35
  --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
36
+ --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
37
+ --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
31
38
  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
32
39
  --color-error: #e60050;
40
+ --color-error-40: hsl(339.1304347826087, 100%, 40%);
41
+ --color-error-85: hsl(339.1304347826087, 100%, 85%);
33
42
  --color-error-95: hsl(339.1304347826087, 100%, 95%);
34
43
  --color-solid: #1a1a1a;
35
44
  --color-solid-05: hsl(0deg 0% 10% / 5%);
@@ -49,12 +58,15 @@
49
58
  --font-size-40: 1.125rem;
50
59
  --font-size-50: 1.25rem;
51
60
  --font-size-60: 1.5rem;
61
+ --font-size-70: 2rem;
62
+ --font-size-80: 2.5rem;
52
63
  --font-size-15: 0.9231rem;
53
64
  --font-size-35: 1.0769rem;
54
65
  --font-size-45: 1.2308rem;
55
66
  --font-size-63: 1.5385rem;
56
67
  --font-size-66: 1.8462rem;
57
- --font-size-70: 2.4615rem;
68
+ --font-size-69: 2.4615rem;
69
+ --font-size-78: 3rem;
58
70
  --font-weight-300: 300;
59
71
  --font-weight-400: 400;
60
72
  --font-weight-500: 500;
@@ -163,6 +175,19 @@
163
175
  98%
164
176
  );
165
177
  --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 90%);
178
+ --background-color-for-avatar: hsl(0, 0%, 60%);
179
+ --background-color-for-avatar-when-highlighted: #ccc;
180
+ --background-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 85%);
181
+ --background-color-for-localized-multiline-text-input-label: hsl(
182
+ 195,
183
+ 35.2941176471%,
184
+ 98%
185
+ );
186
+ --background-color-for-localized-multiline-text-input-label-when-disabled: hsl(
187
+ 195,
188
+ 35.2941176471%,
189
+ 98%
190
+ );
166
191
  --border-for-button-as-secondary: none;
167
192
  --border-for-button-as-secondary-when-hovered: none;
168
193
  --border-for-button-as-secondary-when-active: none;
@@ -187,6 +212,14 @@
187
212
  --border-color-for-table-header-as-bottom: #213c45;
188
213
  --border-color-for-table-manager-droppable-list: hsl(0, 0%, 60%);
189
214
  --border-color-for-collapsible-panel-header: hsl(0, 0%, 60%);
215
+ --border-color-for-stamp-when-error: #e60050;
216
+ --border-color-for-stamp-when-warning: #f16d0e;
217
+ --border-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 40%);
218
+ --border-color-for-stamp-as-information: #078cdf;
219
+ --border-color-for-stamp-as-primary: hsl(172.9608938547486, 100%, 25%);
220
+ --border-color-for-stamp-as-secondary: hsl(0, 0%, 60%);
221
+ --border-color-for-localized-multiline-text-input-label: #ccc;
222
+ --border-color-for-localized-multiline-text-input-label-when-readonly: #ccc;
190
223
  --border-radius-for-button-as-big: 6px;
191
224
  --border-radius-for-button-as-small: 4px;
192
225
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -196,10 +229,12 @@
196
229
  --border-radius-for-tag: 2px;
197
230
  --border-radius-for-card: 6px;
198
231
  --border-radius-for-table-manager-droppable-list: 6px;
232
+ --border-radius-for-stamp: 2px;
199
233
  --border-width-for-input: 1px;
200
234
  --border-width-for-input-when-warning: 1px;
201
235
  --border-width-for-input-when-error: 1px;
202
236
  --border-width-for-input-when-focused: 1px;
237
+ --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
203
238
  --font-color-for-text: #1a1a1a;
204
239
  --font-color-for-input: #1a1a1a;
205
240
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -210,12 +245,14 @@
210
245
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
211
246
  --font-color-for-text-when-inverted: #fff;
212
247
  --font-color-for-table-header: #fff;
248
+ --font-color-for-localized-multiline-text-input-label: hsl(0, 0%, 60%);
213
249
  --height-for-button-as-big: 32px;
214
250
  --height-for-button-as-small: 24px;
215
251
  --height-for-button-as-icon-as-big: 32px;
216
252
  --height-for-button-as-icon-as-medium: 24px;
217
253
  --height-for-button-as-icon-as-small: 16px;
218
254
  --height-for-input: 32px;
255
+ --width-for-avatar-as-medium: 48px;
219
256
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
220
257
  --font-size-for-button: 1rem;
221
258
  --font-size-for-input: 1rem;
@@ -230,6 +267,12 @@
230
267
  --font-size-for-link: 1rem;
231
268
  --font-size-for-stamp: 1rem;
232
269
  --font-size-for-table: 1rem;
270
+ --font-size-for-avatar-as-small: 1rem;
271
+ --font-size-for-avatar-as-medium: 1.5rem;
272
+ --font-size-for-avatar-as-big: 3rem;
273
+ --font-size-for-localized-multiline-text-input-label: 0.9231rem;
274
+ --icon-color-for-datetime-input-icon: #1a1a1a;
275
+ --icon-color-for-datetime-input-icon-when-hovered: #f16d0e;
233
276
  --line-height-for-text-as-h1: inherit;
234
277
  --line-height-for-text-as-h2: inherit;
235
278
  --line-height-for-text-as-h3: inherit;
@@ -266,6 +309,9 @@
266
309
  --padding-for-collapsible-panel-section-description-as-condensed: 0 0
267
310
  var(--spacing-30);
268
311
  --padding-for-input: 8px;
312
+ --padding-for-multiline-input: var(--spacing-10) var(--spacing-20);
313
+ --padding-for-localized-rich-text-input-label: 0 var(--spacing-20);
314
+ --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20);
269
315
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
270
316
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
271
317
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
package/materials/custom-properties.json CHANGED
@@ -5,8 +5,11 @@
5
5
  "--color-primary-85": "hsl(172.9608938547486, 100%, 85%)",
6
6
  "--color-primary-95": "hsl(172.9608938547486, 100%, 95%)",
7
7
  "--color-accent": "#213c45",
8
+ "--color-accent-10": "hsl(195, 35.2941176471%, 10%)",
9
+ "--color-accent-20": "hsl(195, 35.2941176471%, 20%)",
8
10
  "--color-accent-30": "hsl(195, 35.2941176471%, 30%)",
9
11
  "--color-accent-40": "hsl(195, 35.2941176471%, 40%)",
12
+ "--color-accent-90": "hsl(195, 35.2941176471%, 90%)",
10
13
  "--color-accent-95": "hsl(195, 35.2941176471%, 95%)",
11
14
  "--color-accent-98": "hsl(195, 35.2941176471%, 98%)",
12
15
  "--color-neutral": "#ccc",
@@ -16,13 +19,19 @@
16
19
  "--color-neutral-60": "hsl(0, 0%, 60%)",
17
20
  "--color-neutral-90": "hsl(0, 0%, 90%)",
18
21
  "--color-neutral-95": "hsl(0, 0%, 95%)",
22
+ "--color-neutral-85": "hsl(0, 0%, 85%)",
19
23
  "--color-info": "#078cdf",
24
+ "--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
20
25
  "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
21
26
  "--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
22
27
  "--color-warning": "#f16d0e",
23
28
  "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
29
+ "--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)",
30
+ "--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
24
31
  "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
25
32
  "--color-error": "#e60050",
33
+ "--color-error-40": "hsl(339.1304347826087, 100%, 40%)",
34
+ "--color-error-85": "hsl(339.1304347826087, 100%, 85%)",
26
35
  "--color-error-95": "hsl(339.1304347826087, 100%, 95%)",
27
36
  "--color-solid": "#1a1a1a",
28
37
  "--color-solid-05": "hsl(0deg 0% 10% / 5%)",
@@ -42,12 +51,15 @@
42
51
  "--font-size-40": "1.125rem",
43
52
  "--font-size-50": "1.25rem",
44
53
  "--font-size-60": "1.5rem",
54
+ "--font-size-70": "2rem",
55
+ "--font-size-80": "2.5rem",
45
56
  "--font-size-15": "0.9231rem",
46
57
  "--font-size-35": "1.0769rem",
47
58
  "--font-size-45": "1.2308rem",
48
59
  "--font-size-63": "1.5385rem",
49
60
  "--font-size-66": "1.8462rem",
50
- "--font-size-70": "2.4615rem",
61
+ "--font-size-69": "2.4615rem",
62
+ "--font-size-78": "3rem",
51
63
  "--font-weight-300": "300",
52
64
  "--font-weight-400": "400",
53
65
  "--font-weight-500": "500",
@@ -135,6 +147,11 @@
135
147
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
136
148
  "--background-color-for-collapsible-panel-header-icon-when-disabled": "hsl(195, 35.2941176471%, 98%)",
137
149
  "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 90%)",
150
+ "--background-color-for-avatar": "hsl(0, 0%, 60%)",
151
+ "--background-color-for-avatar-when-highlighted": "#ccc",
152
+ "--background-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 85%)",
153
+ "--background-color-for-localized-multiline-text-input-label": "hsl(195, 35.2941176471%, 98%)",
154
+ "--background-color-for-localized-multiline-text-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)",
138
155
  "--border-for-button-as-secondary": "none",
139
156
  "--border-for-button-as-secondary-when-hovered": "none",
140
157
  "--border-for-button-as-secondary-when-active": "none",
@@ -158,6 +175,14 @@
158
175
  "--border-color-for-table-header-as-bottom": "#213c45",
159
176
  "--border-color-for-table-manager-droppable-list": "hsl(0, 0%, 60%)",
160
177
  "--border-color-for-collapsible-panel-header": "hsl(0, 0%, 60%)",
178
+ "--border-color-for-stamp-when-error": "#e60050",
179
+ "--border-color-for-stamp-when-warning": "#f16d0e",
180
+ "--border-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 40%)",
181
+ "--border-color-for-stamp-as-information": "#078cdf",
182
+ "--border-color-for-stamp-as-primary": "hsl(172.9608938547486, 100%, 25%)",
183
+ "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 60%)",
184
+ "--border-color-for-localized-multiline-text-input-label": "#ccc",
185
+ "--border-color-for-localized-multiline-text-input-label-when-readonly": "#ccc",
161
186
  "--border-radius-for-button-as-big": "6px",
162
187
  "--border-radius-for-button-as-small": "4px",
163
188
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -167,10 +192,12 @@
167
192
  "--border-radius-for-tag": "2px",
168
193
  "--border-radius-for-card": "6px",
169
194
  "--border-radius-for-table-manager-droppable-list": "6px",
195
+ "--border-radius-for-stamp": "2px",
170
196
  "--border-width-for-input": "1px",
171
197
  "--border-width-for-input-when-warning": "1px",
172
198
  "--border-width-for-input-when-error": "1px",
173
199
  "--border-width-for-input-when-focused": "1px",
200
+ "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
174
201
  "--font-color-for-text": "#1a1a1a",
175
202
  "--font-color-for-input": "#1a1a1a",
176
203
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -181,12 +208,14 @@
181
208
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
182
209
  "--font-color-for-text-when-inverted": "#fff",
183
210
  "--font-color-for-table-header": "#fff",
211
+ "--font-color-for-localized-multiline-text-input-label": "hsl(0, 0%, 60%)",
184
212
  "--height-for-button-as-big": "32px",
185
213
  "--height-for-button-as-small": "24px",
186
214
  "--height-for-button-as-icon-as-big": "32px",
187
215
  "--height-for-button-as-icon-as-medium": "24px",
188
216
  "--height-for-button-as-icon-as-small": "16px",
189
217
  "--height-for-input": "32px",
218
+ "--width-for-avatar-as-medium": "48px",
190
219
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
191
220
  "--font-size-for-button": "1rem",
192
221
  "--font-size-for-input": "1rem",
@@ -201,6 +230,12 @@
201
230
  "--font-size-for-link": "1rem",
202
231
  "--font-size-for-stamp": "1rem",
203
232
  "--font-size-for-table": "1rem",
233
+ "--font-size-for-avatar-as-small": "1rem",
234
+ "--font-size-for-avatar-as-medium": "1.5rem",
235
+ "--font-size-for-avatar-as-big": "3rem",
236
+ "--font-size-for-localized-multiline-text-input-label": "0.9231rem",
237
+ "--icon-color-for-datetime-input-icon": "#1a1a1a",
238
+ "--icon-color-for-datetime-input-icon-when-hovered": "#f16d0e",
204
239
  "--line-height-for-text-as-h1": "inherit",
205
240
  "--line-height-for-text-as-h2": "inherit",
206
241
  "--line-height-for-text-as-h3": "inherit",
@@ -236,6 +271,9 @@
236
271
  "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-50)",
237
272
  "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-30)",
238
273
  "--padding-for-input": "8px",
274
+ "--padding-for-multiline-input": "var(--spacing-10) var(--spacing-20)",
275
+ "--padding-for-localized-rich-text-input-label": "0 var(--spacing-20)",
276
+ "--padding-for-localized-multiline-text-input-label": "0 var(--spacing-20)",
239
277
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
240
278
  "--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)",
241
279
  "--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)",
package/materials/internals/definition.yaml CHANGED
@@ -42,8 +42,11 @@ choiceGroupsByTheme:
42
42
  color-primary-85: 'hsl(172.9608938547486, 100%, 85%)'
43
43
  color-primary-95: 'hsl(172.9608938547486, 100%, 95%)'
44
44
  color-accent: '#213c45'
45
+ color-accent-10: 'hsl(195, 35.2941176471%, 10%)'
46
+ color-accent-20: 'hsl(195, 35.2941176471%, 20%)'
45
47
  color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
46
48
  color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
49
+ color-accent-90: 'hsl(195, 35.2941176471%, 90%)'
47
50
  color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
48
51
  color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
49
52
  color-neutral: '#ccc'
@@ -53,13 +56,19 @@ choiceGroupsByTheme:
53
56
  color-neutral-60: 'hsl(0, 0%, 60%)'
54
57
  color-neutral-90: 'hsl(0, 0%, 90%)'
55
58
  color-neutral-95: 'hsl(0, 0%, 95%)'
59
+ color-neutral-85: 'hsl(0, 0%, 85%)'
56
60
  color-info: '#078cdf'
61
+ color-info-40: 'hsl(203.05555555555554, 93.9130434783%, 40%)'
57
62
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
58
63
  color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
59
64
  color-warning: '#f16d0e'
60
65
  color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
66
+ color-warning-40: 'hsl(25.110132158590307, 89.0196078431%, 40%)'
67
+ color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
61
68
  color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
62
69
  color-error: '#e60050'
70
+ color-error-40: 'hsl(339.1304347826087, 100%, 40%)'
71
+ color-error-85: 'hsl(339.1304347826087, 100%, 85%)'
63
72
  color-error-95: 'hsl(339.1304347826087, 100%, 95%)'
64
73
  color-solid: '#1a1a1a'
65
74
  color-solid-05: 'hsl(0deg 0% 10% / 5%)'
@@ -98,13 +107,16 @@ choiceGroupsByTheme:
98
107
  font-size-40: '1.125rem'
99
108
  font-size-50: '1.25rem'
100
109
  font-size-60: '1.5rem'
110
+ font-size-70: '2rem'
111
+ font-size-80: '2.5rem'
101
112
  # These font sizes are in rems based on a root font-size of 13px and they will be removed when we replace the default theme.
102
113
  font-size-15: '0.9231rem'
103
114
  font-size-35: '1.0769rem'
104
115
  font-size-45: '1.2308rem'
105
116
  font-size-63: '1.5385rem'
106
117
  font-size-66: '1.8462rem'
107
- font-size-70: '2.4615rem'
118
+ font-size-69: '2.4615rem'
119
+ font-size-78: '3rem'
108
120
 
109
121
  fontWeights:
110
122
  label: Font weights
@@ -237,6 +249,8 @@ states:
237
249
  description: 'When the element has inverted colors'
238
250
  raised:
239
251
  description: 'When the element is raised'
252
+ highlighted:
253
+ description: 'When the element is highlighted'
240
254
 
241
255
  variants:
242
256
  h1:
@@ -273,6 +287,10 @@ variants:
273
287
  description: 'Elements with a compact style'
274
288
  bottom:
275
289
  description: 'To differentiate component bottom style'
290
+ positive:
291
+ description: 'To differentiate component positive style'
292
+ information:
293
+ description: 'To differentiate component information style'
276
294
 
277
295
  componentGroups:
278
296
  button:
@@ -317,6 +335,18 @@ componentGroups:
317
335
  description: 'Select input elements'
318
336
  select-input-option:
319
337
  description: 'Select input option elements'
338
+ datetime-input:
339
+ description: 'Date time input elements'
340
+ datetime-input-icon:
341
+ description: 'Date time input icon elements'
342
+ avatar:
343
+ description: 'Avatar elements'
344
+ multiline-input:
345
+ description: 'Multiline input elements'
346
+ localized-rich-text-input-label:
347
+ description: 'Localized rich text input label elements'
348
+ localized-multiline-text-input-label:
349
+ description: 'Localized multiline text input label elements'
320
350
 
321
351
  decisionGroupsByTheme:
322
352
  default:
@@ -376,6 +406,21 @@ decisionGroupsByTheme:
376
406
  background-color-for-select-input-option-when-hovered:
377
407
  description: ''
378
408
  choice: color-neutral-90
409
+ background-color-for-avatar:
410
+ description: ''
411
+ choice: color-neutral-60
412
+ background-color-for-avatar-when-highlighted:
413
+ description: ''
414
+ choice: color-neutral
415
+ background-color-for-stamp-as-positive:
416
+ description: ''
417
+ choice: color-primary-85
418
+ background-color-for-localized-multiline-text-input-label:
419
+ description: ''
420
+ choice: color-accent-98
421
+ background-color-for-localized-multiline-text-input-label-when-disabled:
422
+ description: ''
423
+ choice: color-accent-98
379
424
 
380
425
  borders:
381
426
  label: Borders
@@ -442,6 +487,22 @@ decisionGroupsByTheme:
442
487
  choice: color-neutral-60
443
488
  border-color-for-collapsible-panel-header:
444
489
  choice: color-neutral-60
490
+ border-color-for-stamp-when-error:
491
+ choice: color-error
492
+ border-color-for-stamp-when-warning:
493
+ choice: color-warning
494
+ border-color-for-stamp-as-positive:
495
+ choice: color-primary-40
496
+ border-color-for-stamp-as-information:
497
+ choice: color-info
498
+ border-color-for-stamp-as-primary:
499
+ choice: color-primary-25
500
+ border-color-for-stamp-as-secondary:
501
+ choice: color-neutral-60
502
+ border-color-for-localized-multiline-text-input-label:
503
+ choice: color-neutral
504
+ border-color-for-localized-multiline-text-input-label-when-readonly:
505
+ choice: color-neutral
445
506
 
446
507
  borderRadiuses:
447
508
  label: Border Radius
@@ -467,6 +528,8 @@ decisionGroupsByTheme:
467
528
  choice: border-radius-6
468
529
  border-radius-for-table-manager-droppable-list:
469
530
  choice: border-radius-6
531
+ border-radius-for-stamp:
532
+ choice: border-radius-2
470
533
 
471
534
  borderWidths:
472
535
  label: Border width
@@ -481,6 +544,13 @@ decisionGroupsByTheme:
481
544
  border-width-for-input-when-focused:
482
545
  choice: border-width-1
483
546
 
547
+ boxShadows:
548
+ label: Box shadows
549
+ prefix: box-shadow
550
+ decisions:
551
+ box-shadow-for-datetime-input-when-hovered:
552
+ choice: 'inset 0 0 0 2px'
553
+
484
554
  fontColors:
485
555
  label: Font Colors
486
556
  prefix: font-color
@@ -514,6 +584,8 @@ decisionGroupsByTheme:
514
584
  choice: color-surface
515
585
  font-color-for-table-header:
516
586
  choice: color-surface
587
+ font-color-for-localized-multiline-text-input-label:
588
+ choice: color-neutral-60
517
589
 
518
590
  heights:
519
591
  label: Height
@@ -532,6 +604,13 @@ decisionGroupsByTheme:
532
604
  height-for-input:
533
605
  choice: '32px'
534
606
 
607
+ widths:
608
+ label: Width
609
+ prefix: width
610
+ decisions:
611
+ width-for-avatar-as-medium:
612
+ choice: '48px'
613
+
535
614
  placeholderFontColors:
536
615
  label: Placeholder font colors
537
616
  prefix: placeholder-font-color
@@ -552,7 +631,7 @@ decisionGroupsByTheme:
552
631
  choice: font-size-30
553
632
  font-size-for-text-as-h1:
554
633
  description: ''
555
- choice: font-size-70
634
+ choice: font-size-69
556
635
  font-size-for-text-as-h2:
557
636
  description: ''
558
637
  choice: font-size-66
@@ -581,6 +660,23 @@ decisionGroupsByTheme:
581
660
  choice: font-size-30
582
661
  font-size-for-table:
583
662
  choice: font-size-30
663
+ font-size-for-avatar-as-small:
664
+ choice: font-size-30
665
+ font-size-for-avatar-as-medium:
666
+ choice: font-size-60
667
+ font-size-for-avatar-as-big:
668
+ choice: font-size-78
669
+ font-size-for-localized-multiline-text-input-label:
670
+ choice: font-size-15
671
+
672
+ iconColors:
673
+ label: Icon colors
674
+ prefix: icon-color
675
+ decisions:
676
+ icon-color-for-datetime-input-icon:
677
+ choice: color-solid
678
+ icon-color-for-datetime-input-icon-when-hovered:
679
+ choice: color-warning
584
680
 
585
681
  lineHeights:
586
682
  label: Line Heights
@@ -685,6 +781,12 @@ decisionGroupsByTheme:
685
781
  choice: '0 0 var(--spacing-30)'
686
782
  padding-for-input:
687
783
  choice: spacing-20
784
+ padding-for-multiline-input:
785
+ choice: 'var(--spacing-10) var(--spacing-20)'
786
+ padding-for-localized-rich-text-input-label:
787
+ choice: '0 var(--spacing-20)'
788
+ padding-for-localized-multiline-text-input-label:
789
+ choice: '0 var(--spacing-20)'
688
790
 
689
791
  shadows:
690
792
  label: Shadows
@@ -752,6 +854,19 @@ decisionGroupsByTheme:
752
854
  choice: color-neutral-95
753
855
  background-color-for-input-when-disabled:
754
856
  choice: color-neutral-95
857
+ background-color-for-avatar:
858
+ description: ''
859
+ choice: color-accent
860
+ background-color-for-avatar-when-highlighted:
861
+ description: ''
862
+ choice: color-accent-30
863
+ background-color-for-stamp-as-positive:
864
+ description: ''
865
+ choice: color-primary-95
866
+ background-color-for-localized-multiline-text-input-label:
867
+ choice: color-surface
868
+ background-color-for-localized-multiline-text-input-label-when-disabled:
869
+ choice: color-neutral-95
755
870
 
756
871
  borders:
757
872
  label: Borders
@@ -800,6 +915,20 @@ decisionGroupsByTheme:
800
915
  choice: color-neutral
801
916
  border-color-for-collapsible-panel-header:
802
917
  choice: color-neutral-90
918
+ border-color-for-stamp-when-error:
919
+ choice: color-error-85
920
+ border-color-for-stamp-when-warning:
921
+ choice: color-warning-85
922
+ border-color-for-stamp-as-positive:
923
+ choice: color-primary-85
924
+ border-color-for-stamp-as-information:
925
+ choice: color-info-85
926
+ border-color-for-stamp-as-primary:
927
+ choice: color-primary-85
928
+ border-color-for-stamp-as-secondary:
929
+ choice: color-neutral-85
930
+ border-color-for-localized-multiline-text-input-label-when-readonly:
931
+ choice: color-neutral-90
803
932
 
804
933
  borderRadiuses:
805
934
  label: Border radiuses
@@ -821,6 +950,15 @@ decisionGroupsByTheme:
821
950
  choice: border-radius-4
822
951
  border-radius-for-input:
823
952
  choice: border-radius-4
953
+ border-radius-for-stamp:
954
+ choice: border-radius-20
955
+
956
+ boxShadows:
957
+ label: Box shadows
958
+ prefix: box-shadow
959
+ decisions:
960
+ box-shadow-for-datetime-input-when-hovered:
961
+ choice: 'inset 0 0 0 1px'
824
962
 
825
963
  fontColors:
826
964
  label: Font Colors
@@ -843,7 +981,7 @@ decisionGroupsByTheme:
843
981
  choice: font-size-60
844
982
  font-size-for-text-as-h2:
845
983
  description: ''
846
- choice: font-size-60
984
+ choice: font-size-50
847
985
  font-size-for-text-as-h3:
848
986
  description: ''
849
987
  choice: font-size-40
@@ -872,6 +1010,14 @@ decisionGroupsByTheme:
872
1010
  choice: font-size-20
873
1011
  font-size-for-table:
874
1012
  choice: font-size-20
1013
+ font-size-for-avatar-as-small:
1014
+ choice: font-size-20
1015
+ font-size-for-avatar-as-medium:
1016
+ choice: font-size-30
1017
+ font-size-for-avatar-as-big:
1018
+ choice: font-size-80
1019
+ font-size-for-localized-multiline-text-input-label:
1020
+ choice: font-size-30
875
1021
 
876
1022
  lineHeights:
877
1023
  label: Line Heights
@@ -882,7 +1028,7 @@ decisionGroupsByTheme:
882
1028
  choice: line-height-60
883
1029
  line-height-for-text-as-h2:
884
1030
  description: ''
885
- choice: line-height-60
1031
+ choice: line-height-50
886
1032
  line-height-for-text-as-h3:
887
1033
  description: ''
888
1034
  choice: line-height-30
@@ -908,7 +1054,7 @@ decisionGroupsByTheme:
908
1054
  choice: font-weight-600
909
1055
  font-weight-for-text-as-h2:
910
1056
  description: ''
911
- choice: font-weight-600
1057
+ choice: font-weight-500
912
1058
  font-weight-for-text-as-h3:
913
1059
  description: ''
914
1060
  choice: font-weight-500
@@ -946,6 +1092,22 @@ decisionGroupsByTheme:
946
1092
  height-for-input:
947
1093
  choice: '40px'
948
1094
 
1095
+ iconColors:
1096
+ label: Icon colors
1097
+ prefix: icon-color
1098
+ decisions:
1099
+ icon-color-for-datetime-input-icon:
1100
+ choice: color-neutral-40
1101
+ icon-color-for-datetime-input-icon-when-hovered:
1102
+ choice: color-error
1103
+
1104
+ widths:
1105
+ label: Width
1106
+ prefix: width
1107
+ decisions:
1108
+ width-for-avatar-as-medium:
1109
+ choice: '40px'
1110
+
949
1111
  margins:
950
1112
  label: Margins
951
1113
  prefix: margin
@@ -993,7 +1155,12 @@ decisionGroupsByTheme:
993
1155
  choice: '0 0 var(--spacing-40)'
994
1156
  padding-for-input:
995
1157
  choice: spacing-30
996
-
1158
+ padding-for-multiline-input:
1159
+ choice: spacing-20
1160
+ padding-for-localized-rich-text-input-label:
1161
+ choice: spacing-20
1162
+ padding-for-localized-multiline-text-input-label:
1163
+ choice: '0 12px'
997
1164
  shadows:
998
1165
  label: Shadows
999
1166
  prefix: shadow
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.8.0",
4
+ "version": "15.9.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.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"
27
+ "@commercetools-uikit/accessible-hidden": "15.9.0",
28
+ "@commercetools-uikit/avatar": "15.9.0",
29
+ "@commercetools-uikit/buttons": "15.9.0",
30
+ "@commercetools-uikit/card": "15.9.0",
31
+ "@commercetools-uikit/collapsible": "15.9.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.9.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.9.0",
34
+ "@commercetools-uikit/constraints": "15.9.0",
35
+ "@commercetools-uikit/data-table": "15.9.0",
36
+ "@commercetools-uikit/data-table-manager": "15.9.0",
37
+ "@commercetools-uikit/design-system": "15.9.0",
38
+ "@commercetools-uikit/field-errors": "15.9.0",
39
+ "@commercetools-uikit/field-label": "15.9.0",
40
+ "@commercetools-uikit/fields": "15.9.0",
41
+ "@commercetools-uikit/grid": "15.9.0",
42
+ "@commercetools-uikit/hooks": "15.9.0",
43
+ "@commercetools-uikit/i18n": "15.9.0",
44
+ "@commercetools-uikit/icons": "15.9.0",
45
+ "@commercetools-uikit/inputs": "15.9.0",
46
+ "@commercetools-uikit/label": "15.9.0",
47
+ "@commercetools-uikit/link": "15.9.0",
48
+ "@commercetools-uikit/loading-spinner": "15.9.0",
49
+ "@commercetools-uikit/messages": "15.9.0",
50
+ "@commercetools-uikit/notifications": "15.9.0",
51
+ "@commercetools-uikit/pagination": "15.9.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.9.0",
53
+ "@commercetools-uikit/spacings": "15.9.0",
54
+ "@commercetools-uikit/stamp": "15.9.0",
55
+ "@commercetools-uikit/tag": "15.9.0",
56
+ "@commercetools-uikit/text": "15.9.0",
57
+ "@commercetools-uikit/tooltip": "15.9.0",
58
+ "@commercetools-uikit/utils": "15.9.0",
59
+ "@commercetools-uikit/view-switcher": "15.9.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",