@commercetools-frontend/ui-kit 15.7.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 +67 -1
  5. package/materials/custom-properties.json +53 -1
  6. package/materials/internals/definition.yaml +246 -11
  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.7.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.7.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.7.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;
@@ -157,11 +169,31 @@
157
169
  89.0196078431%,
158
170
  95%
159
171
  );
172
+ --background-color-for-collapsible-panel-header-icon-when-disabled: hsl(
173
+ 195,
174
+ 35.2941176471%,
175
+ 98%
176
+ );
160
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
+ );
161
191
  --border-for-button-as-secondary: none;
162
192
  --border-for-button-as-secondary-when-hovered: none;
163
193
  --border-for-button-as-secondary-when-active: none;
164
194
  --border-for-card-when-raised: none;
195
+ --border-for-collapsible-panel-header-icon-when-disabled: 1px solid
196
+ var(--color-neutral);
165
197
  --border-color-for-input: hsl(0, 0%, 60%);
166
198
  --border-color-for-input-when-focused: #00b39e;
167
199
  --border-color-for-input-when-disabled: #ccc;
@@ -178,6 +210,16 @@
178
210
  --border-color-for-button-as-icon-when-disabled: #ccc;
179
211
  --border-color-for-table-header: #ccc;
180
212
  --border-color-for-table-header-as-bottom: #213c45;
213
+ --border-color-for-table-manager-droppable-list: hsl(0, 0%, 60%);
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;
181
223
  --border-radius-for-button-as-big: 6px;
182
224
  --border-radius-for-button-as-small: 4px;
183
225
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -186,10 +228,13 @@
186
228
  --border-radius-for-input: 6px;
187
229
  --border-radius-for-tag: 2px;
188
230
  --border-radius-for-card: 6px;
231
+ --border-radius-for-table-manager-droppable-list: 6px;
232
+ --border-radius-for-stamp: 2px;
189
233
  --border-width-for-input: 1px;
190
234
  --border-width-for-input-when-warning: 1px;
191
235
  --border-width-for-input-when-error: 1px;
192
236
  --border-width-for-input-when-focused: 1px;
237
+ --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
193
238
  --font-color-for-text: #1a1a1a;
194
239
  --font-color-for-input: #1a1a1a;
195
240
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -200,12 +245,14 @@
200
245
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
201
246
  --font-color-for-text-when-inverted: #fff;
202
247
  --font-color-for-table-header: #fff;
248
+ --font-color-for-localized-multiline-text-input-label: hsl(0, 0%, 60%);
203
249
  --height-for-button-as-big: 32px;
204
250
  --height-for-button-as-small: 24px;
205
251
  --height-for-button-as-icon-as-big: 32px;
206
252
  --height-for-button-as-icon-as-medium: 24px;
207
253
  --height-for-button-as-icon-as-small: 16px;
208
254
  --height-for-input: 32px;
255
+ --width-for-avatar-as-medium: 48px;
209
256
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
210
257
  --font-size-for-button: 1rem;
211
258
  --font-size-for-input: 1rem;
@@ -220,6 +267,12 @@
220
267
  --font-size-for-link: 1rem;
221
268
  --font-size-for-stamp: 1rem;
222
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;
223
276
  --line-height-for-text-as-h1: inherit;
224
277
  --line-height-for-text-as-h2: inherit;
225
278
  --line-height-for-text-as-h3: inherit;
@@ -245,7 +298,20 @@
245
298
  --padding-for-table-header-as-condensed: 8px;
246
299
  --padding-for-table-cell: 16px;
247
300
  --padding-for-table-cell-as-condensed: 8px;
301
+ --padding-for-table-manager-droppable-list: 8px;
302
+ --padding-for-table-manager-settings-panel: 16px;
303
+ --padding-for-table-manager-draggable-tag: 4px;
304
+ --padding-for-collapsible-panel-header: var(--spacing-20) var(--spacing-30);
305
+ --padding-for-collapsible-panel-header-as-condensed: 8px;
306
+ --padding-for-collapsible-panel-section-wrapper: 16px;
307
+ --padding-for-collapsible-panel-section-wrapper-as-condensed: 8px;
308
+ --padding-for-collapsible-panel-section-description: 0 0 var(--spacing-50);
309
+ --padding-for-collapsible-panel-section-description-as-condensed: 0 0
310
+ var(--spacing-30);
248
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);
249
315
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
250
316
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
251
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",
@@ -133,11 +145,18 @@
133
145
  "--background-color-for-table-header": "#213c45",
134
146
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
135
147
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
148
+ "--background-color-for-collapsible-panel-header-icon-when-disabled": "hsl(195, 35.2941176471%, 98%)",
136
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%)",
137
155
  "--border-for-button-as-secondary": "none",
138
156
  "--border-for-button-as-secondary-when-hovered": "none",
139
157
  "--border-for-button-as-secondary-when-active": "none",
140
158
  "--border-for-card-when-raised": "none",
159
+ "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
141
160
  "--border-color-for-input": "hsl(0, 0%, 60%)",
142
161
  "--border-color-for-input-when-focused": "#00b39e",
143
162
  "--border-color-for-input-when-disabled": "#ccc",
@@ -154,6 +173,16 @@
154
173
  "--border-color-for-button-as-icon-when-disabled": "#ccc",
155
174
  "--border-color-for-table-header": "#ccc",
156
175
  "--border-color-for-table-header-as-bottom": "#213c45",
176
+ "--border-color-for-table-manager-droppable-list": "hsl(0, 0%, 60%)",
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",
157
186
  "--border-radius-for-button-as-big": "6px",
158
187
  "--border-radius-for-button-as-small": "4px",
159
188
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -162,10 +191,13 @@
162
191
  "--border-radius-for-input": "6px",
163
192
  "--border-radius-for-tag": "2px",
164
193
  "--border-radius-for-card": "6px",
194
+ "--border-radius-for-table-manager-droppable-list": "6px",
195
+ "--border-radius-for-stamp": "2px",
165
196
  "--border-width-for-input": "1px",
166
197
  "--border-width-for-input-when-warning": "1px",
167
198
  "--border-width-for-input-when-error": "1px",
168
199
  "--border-width-for-input-when-focused": "1px",
200
+ "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
169
201
  "--font-color-for-text": "#1a1a1a",
170
202
  "--font-color-for-input": "#1a1a1a",
171
203
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -176,12 +208,14 @@
176
208
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
177
209
  "--font-color-for-text-when-inverted": "#fff",
178
210
  "--font-color-for-table-header": "#fff",
211
+ "--font-color-for-localized-multiline-text-input-label": "hsl(0, 0%, 60%)",
179
212
  "--height-for-button-as-big": "32px",
180
213
  "--height-for-button-as-small": "24px",
181
214
  "--height-for-button-as-icon-as-big": "32px",
182
215
  "--height-for-button-as-icon-as-medium": "24px",
183
216
  "--height-for-button-as-icon-as-small": "16px",
184
217
  "--height-for-input": "32px",
218
+ "--width-for-avatar-as-medium": "48px",
185
219
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
186
220
  "--font-size-for-button": "1rem",
187
221
  "--font-size-for-input": "1rem",
@@ -196,6 +230,12 @@
196
230
  "--font-size-for-link": "1rem",
197
231
  "--font-size-for-stamp": "1rem",
198
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",
199
239
  "--line-height-for-text-as-h1": "inherit",
200
240
  "--line-height-for-text-as-h2": "inherit",
201
241
  "--line-height-for-text-as-h3": "inherit",
@@ -221,7 +261,19 @@
221
261
  "--padding-for-table-header-as-condensed": "8px",
222
262
  "--padding-for-table-cell": "16px",
223
263
  "--padding-for-table-cell-as-condensed": "8px",
264
+ "--padding-for-table-manager-droppable-list": "8px",
265
+ "--padding-for-table-manager-settings-panel": "16px",
266
+ "--padding-for-table-manager-draggable-tag": "4px",
267
+ "--padding-for-collapsible-panel-header": "var(--spacing-20) var(--spacing-30)",
268
+ "--padding-for-collapsible-panel-header-as-condensed": "8px",
269
+ "--padding-for-collapsible-panel-section-wrapper": "16px",
270
+ "--padding-for-collapsible-panel-section-wrapper-as-condensed": "8px",
271
+ "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-50)",
272
+ "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-30)",
224
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)",
225
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)",
226
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)",
227
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:
@@ -299,10 +317,36 @@ componentGroups:
299
317
  description: 'Table header elements'
300
318
  table-cell:
301
319
  description: 'Table cell elements'
320
+ table-manager-droppable-list:
321
+ description: 'Table manager droppable list elements'
322
+ table-manager-settings-panel:
323
+ description: 'Table manager settings panel elements'
324
+ table-manager-draggable-tag:
325
+ description: 'Table manager settings draggable tag elements'
326
+ collapsible-panel-header:
327
+ description: 'collapsible panel header elements'
328
+ collapsible-panel-section-wrapper:
329
+ description: 'collapsible panel section wrapper elements'
330
+ collapsible-panel-section-description:
331
+ description: 'collapsible panel section description elements'
332
+ collapsible-panel-header-icon:
333
+ description: 'collapsible panel header icon elements'
302
334
  select-input:
303
335
  description: 'Select input elements'
304
336
  select-input-option:
305
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'
306
350
 
307
351
  decisionGroupsByTheme:
308
352
  default:
@@ -357,9 +401,26 @@ decisionGroupsByTheme:
357
401
  background-color-for-tag-warning:
358
402
  description: ''
359
403
  choice: color-warning-95
404
+ background-color-for-collapsible-panel-header-icon-when-disabled:
405
+ choice: color-accent-98
360
406
  background-color-for-select-input-option-when-hovered:
361
407
  description: ''
362
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
363
424
 
364
425
  borders:
365
426
  label: Borders
@@ -373,6 +434,8 @@ decisionGroupsByTheme:
373
434
  choice: 'none'
374
435
  border-for-card-when-raised:
375
436
  choice: 'none'
437
+ border-for-collapsible-panel-header-icon-when-disabled:
438
+ choice: '1px solid var(--color-neutral)'
376
439
 
377
440
  borderColors:
378
441
  label: Border Colors
@@ -420,6 +483,26 @@ decisionGroupsByTheme:
420
483
  choice: color-neutral
421
484
  border-color-for-table-header-as-bottom:
422
485
  choice: color-accent
486
+ border-color-for-table-manager-droppable-list:
487
+ choice: color-neutral-60
488
+ border-color-for-collapsible-panel-header:
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
423
506
 
424
507
  borderRadiuses:
425
508
  label: Border Radius
@@ -443,8 +526,10 @@ decisionGroupsByTheme:
443
526
  choice: border-radius-2
444
527
  border-radius-for-card:
445
528
  choice: border-radius-6
446
- # We don't have font families in choices yet, so we can't have decisions for
447
- # them
529
+ border-radius-for-table-manager-droppable-list:
530
+ choice: border-radius-6
531
+ border-radius-for-stamp:
532
+ choice: border-radius-2
448
533
 
449
534
  borderWidths:
450
535
  label: Border width
@@ -459,6 +544,13 @@ decisionGroupsByTheme:
459
544
  border-width-for-input-when-focused:
460
545
  choice: border-width-1
461
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
+
462
554
  fontColors:
463
555
  label: Font Colors
464
556
  prefix: font-color
@@ -492,6 +584,8 @@ decisionGroupsByTheme:
492
584
  choice: color-surface
493
585
  font-color-for-table-header:
494
586
  choice: color-surface
587
+ font-color-for-localized-multiline-text-input-label:
588
+ choice: color-neutral-60
495
589
 
496
590
  heights:
497
591
  label: Height
@@ -510,6 +604,13 @@ decisionGroupsByTheme:
510
604
  height-for-input:
511
605
  choice: '32px'
512
606
 
607
+ widths:
608
+ label: Width
609
+ prefix: width
610
+ decisions:
611
+ width-for-avatar-as-medium:
612
+ choice: '48px'
613
+
513
614
  placeholderFontColors:
514
615
  label: Placeholder font colors
515
616
  prefix: placeholder-font-color
@@ -530,7 +631,7 @@ decisionGroupsByTheme:
530
631
  choice: font-size-30
531
632
  font-size-for-text-as-h1:
532
633
  description: ''
533
- choice: font-size-70
634
+ choice: font-size-69
534
635
  font-size-for-text-as-h2:
535
636
  description: ''
536
637
  choice: font-size-66
@@ -559,6 +660,23 @@ decisionGroupsByTheme:
559
660
  choice: font-size-30
560
661
  font-size-for-table:
561
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
562
680
 
563
681
  lineHeights:
564
682
  label: Line Heights
@@ -643,8 +761,32 @@ decisionGroupsByTheme:
643
761
  choice: spacing-30
644
762
  padding-for-table-cell-as-condensed:
645
763
  choice: spacing-20
764
+ padding-for-table-manager-droppable-list:
765
+ choice: spacing-20
766
+ padding-for-table-manager-settings-panel:
767
+ choice: spacing-30
768
+ padding-for-table-manager-draggable-tag:
769
+ choice: spacing-10
770
+ padding-for-collapsible-panel-header:
771
+ choice: 'var(--spacing-20) var(--spacing-30)'
772
+ padding-for-collapsible-panel-header-as-condensed:
773
+ choice: spacing-20
774
+ padding-for-collapsible-panel-section-wrapper:
775
+ choice: spacing-30
776
+ padding-for-collapsible-panel-section-wrapper-as-condensed:
777
+ choice: spacing-20
778
+ padding-for-collapsible-panel-section-description:
779
+ choice: '0 0 var(--spacing-50)'
780
+ padding-for-collapsible-panel-section-description-as-condensed:
781
+ choice: '0 0 var(--spacing-30)'
646
782
  padding-for-input:
647
- choice: 'spacing-20'
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)'
648
790
 
649
791
  shadows:
650
792
  label: Shadows
@@ -706,10 +848,25 @@ decisionGroupsByTheme:
706
848
  choice: color-neutral-95
707
849
  background-color-for-table-header:
708
850
  choice: color-surface
851
+ background-color-for-collapsible-panel-header-icon-when-disabled:
852
+ choice: color-surface
709
853
  background-color-for-input-when-hovered:
710
854
  choice: color-neutral-95
711
855
  background-color-for-input-when-disabled:
712
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
713
870
 
714
871
  borders:
715
872
  label: Borders
@@ -723,6 +880,8 @@ decisionGroupsByTheme:
723
880
  choice: '1px solid var(--color-neutral)'
724
881
  border-for-card-when-raised:
725
882
  choice: '1px solid var(--color-neutral-90)'
883
+ border-for-collapsible-panel-header-icon-when-disabled:
884
+ choice: 'none'
726
885
 
727
886
  borderColors:
728
887
  label: Border Colors
@@ -752,6 +911,24 @@ decisionGroupsByTheme:
752
911
  choice: color-surface
753
912
  border-color-for-table-header-as-bottom:
754
913
  choice: color-neutral-90
914
+ border-color-for-table-manager-droppable-list:
915
+ choice: color-neutral
916
+ border-color-for-collapsible-panel-header:
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
755
932
 
756
933
  borderRadiuses:
757
934
  label: Border radiuses
@@ -769,8 +946,19 @@ decisionGroupsByTheme:
769
946
  choice: border-radius-2
770
947
  border-radius-for-card:
771
948
  choice: border-radius-4
949
+ border-radius-for-table-manager-droppable-list:
950
+ choice: border-radius-4
772
951
  border-radius-for-input:
773
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'
774
962
 
775
963
  fontColors:
776
964
  label: Font Colors
@@ -793,7 +981,7 @@ decisionGroupsByTheme:
793
981
  choice: font-size-60
794
982
  font-size-for-text-as-h2:
795
983
  description: ''
796
- choice: font-size-60
984
+ choice: font-size-50
797
985
  font-size-for-text-as-h3:
798
986
  description: ''
799
987
  choice: font-size-40
@@ -822,6 +1010,14 @@ decisionGroupsByTheme:
822
1010
  choice: font-size-20
823
1011
  font-size-for-table:
824
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
825
1021
 
826
1022
  lineHeights:
827
1023
  label: Line Heights
@@ -832,7 +1028,7 @@ decisionGroupsByTheme:
832
1028
  choice: line-height-60
833
1029
  line-height-for-text-as-h2:
834
1030
  description: ''
835
- choice: line-height-60
1031
+ choice: line-height-50
836
1032
  line-height-for-text-as-h3:
837
1033
  description: ''
838
1034
  choice: line-height-30
@@ -858,7 +1054,7 @@ decisionGroupsByTheme:
858
1054
  choice: font-weight-600
859
1055
  font-weight-for-text-as-h2:
860
1056
  description: ''
861
- choice: font-weight-600
1057
+ choice: font-weight-500
862
1058
  font-weight-for-text-as-h3:
863
1059
  description: ''
864
1060
  choice: font-weight-500
@@ -896,6 +1092,22 @@ decisionGroupsByTheme:
896
1092
  height-for-input:
897
1093
  choice: '40px'
898
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
+
899
1111
  margins:
900
1112
  label: Margins
901
1113
  prefix: margin
@@ -923,9 +1135,32 @@ decisionGroupsByTheme:
923
1135
  choice: 'var(--spacing-30) var(--spacing-40)'
924
1136
  padding-for-table-cell-as-condensed:
925
1137
  choice: 'var(--spacing-20) var(--spacing-40)'
1138
+ padding-for-table-manager-droppable-list:
1139
+ choice: spacing-30
1140
+ padding-for-table-manager-settings-panel:
1141
+ choice: 'var(--spacing-40) var(--spacing-50)'
1142
+ padding-for-table-manager-draggable-tag:
1143
+ choice: 'var(--spacing-10) 0'
1144
+ padding-for-collapsible-panel-header:
1145
+ choice: 'var(--spacing-30) 0'
1146
+ padding-for-collapsible-panel-header-as-condensed:
1147
+ choice: 'var(--spacing-20) 0'
1148
+ padding-for-collapsible-panel-section-wrapper:
1149
+ choice: 'var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
1150
+ padding-for-collapsible-panel-section-wrapper-as-condensed:
1151
+ choice: 'var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
1152
+ padding-for-collapsible-panel-section-description:
1153
+ choice: '0 0 var(--spacing-40)'
1154
+ padding-for-collapsible-panel-section-description-as-condensed:
1155
+ choice: '0 0 var(--spacing-40)'
926
1156
  padding-for-input:
927
- choice: 'spacing-30'
928
-
1157
+ choice: spacing-30
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'
929
1164
  shadows:
930
1165
  label: Shadows
931
1166
  prefix: shadow
@@ -941,7 +1176,7 @@ decisionGroupsByTheme:
941
1176
  shadow-for-button-when-disabled:
942
1177
  choice: shadow-0
943
1178
  shadow-for-card-when-raised:
944
- choice: shadow-0
1179
+ choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
945
1180
  shadow-for-input:
946
1181
  choice: shadow-0
947
1182
  shadow-for-input-when-focused:
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.7.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.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"
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",