@commercetools-frontend/ui-kit 15.8.0 → 15.10.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 +84 -3
  5. package/materials/custom-properties.json +67 -3
  6. package/materials/internals/definition.yaml +292 -7
  7. package/package.json +35 -35
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.10.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.10.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.10.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;
@@ -147,8 +159,8 @@
147
159
  --background-color-for-input: #fff;
148
160
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
149
161
  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
150
- --background-color-for-input-when-hovered: unset;
151
- --background-color-for-input-when-focused: unset;
162
+ --background-color-for-input-when-hovered: #fff;
163
+ --background-color-for-input-when-focused: #fff;
152
164
  --background-color-for-table-cell-when-hovered: hsl(0, 0%, 90%);
153
165
  --background-color-for-table-header: #213c45;
154
166
  --background-color-for-tag: hsl(0, 0%, 95%);
@@ -163,12 +175,35 @@
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
+ );
191
+ --background-color-for-tooltip: #213c45;
192
+ --background-color-for-view-switcher: #fff;
193
+ --background-color-for-view-switcher-when-disabled: hsl(
194
+ 195,
195
+ 35.2941176471%,
196
+ 98%
197
+ );
198
+ --background-color-for-view-switcher-when-selected: hsl(0, 0%, 95%);
199
+ --background-color-for-view-switcher-when-hovered: hsl(0, 0%, 90%);
166
200
  --border-for-button-as-secondary: none;
167
201
  --border-for-button-as-secondary-when-hovered: none;
168
202
  --border-for-button-as-secondary-when-active: none;
169
203
  --border-for-card-when-raised: none;
170
204
  --border-for-collapsible-panel-header-icon-when-disabled: 1px solid
171
205
  var(--color-neutral);
206
+ --border-for-view-switcher: none;
172
207
  --border-color-for-input: hsl(0, 0%, 60%);
173
208
  --border-color-for-input-when-focused: #00b39e;
174
209
  --border-color-for-input-when-disabled: #ccc;
@@ -179,6 +214,7 @@
179
214
  --border-color-for-tag: hsl(0, 0%, 60%);
180
215
  --border-color-for-tag-warning: #f16d0e;
181
216
  --border-color-for-tag-when-focused: #00b39e;
217
+ --border-color-for-tag-when-hovered: #f16d0e;
182
218
  --border-color-for-button-as-icon: #fff;
183
219
  --border-color-for-button-as-icon-as-info: #078cdf;
184
220
  --border-color-for-button-as-icon-as-primary: #00b39e;
@@ -187,6 +223,14 @@
187
223
  --border-color-for-table-header-as-bottom: #213c45;
188
224
  --border-color-for-table-manager-droppable-list: hsl(0, 0%, 60%);
189
225
  --border-color-for-collapsible-panel-header: hsl(0, 0%, 60%);
226
+ --border-color-for-stamp-when-error: #e60050;
227
+ --border-color-for-stamp-when-warning: #f16d0e;
228
+ --border-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 40%);
229
+ --border-color-for-stamp-as-information: #078cdf;
230
+ --border-color-for-stamp-as-primary: hsl(172.9608938547486, 100%, 25%);
231
+ --border-color-for-stamp-as-secondary: hsl(0, 0%, 60%);
232
+ --border-color-for-localized-multiline-text-input-label: #ccc;
233
+ --border-color-for-localized-multiline-text-input-label-when-readonly: #ccc;
190
234
  --border-radius-for-button-as-big: 6px;
191
235
  --border-radius-for-button-as-small: 4px;
192
236
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -196,10 +240,19 @@
196
240
  --border-radius-for-tag: 2px;
197
241
  --border-radius-for-card: 6px;
198
242
  --border-radius-for-table-manager-droppable-list: 6px;
243
+ --border-radius-for-stamp: 2px;
244
+ --border-radius-for-view-switcher: 6px;
199
245
  --border-width-for-input: 1px;
200
246
  --border-width-for-input-when-warning: 1px;
201
247
  --border-width-for-input-when-error: 1px;
202
248
  --border-width-for-input-when-focused: 1px;
249
+ --border-width-for-tag: 1px;
250
+ --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px;
251
+ --box-shadow-for-view-switcher: 0 1px 1px 0 rgba(0, 0, 0, 0.24),
252
+ 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
253
+ --box-shadow-for-view-switcher-when-selected: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
254
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
255
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
203
256
  --font-color-for-text: #1a1a1a;
204
257
  --font-color-for-input: #1a1a1a;
205
258
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
@@ -207,15 +260,25 @@
207
260
  --font-color-for-input-when-readonly: hsl(0, 0%, 60%);
208
261
  --font-color-for-input-when-warning: #f16d0e;
209
262
  --font-color-for-tag: #1a1a1a;
263
+ --font-color-for-tag-remove-icon: #1a1a1a;
264
+ --font-color-for-tag-drag-icon: #1a1a1a;
265
+ --font-color-for-tag-remove-icon-when-hovered: #f16d0e;
210
266
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
211
267
  --font-color-for-text-when-inverted: #fff;
212
268
  --font-color-for-table-header: #fff;
269
+ --font-color-for-localized-multiline-text-input-label: hsl(0, 0%, 60%);
270
+ --font-color-for-view-switcher: #1a1a1a;
271
+ --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%);
272
+ --font-color-for-view-switcher-when-selected: #1a1a1a;
213
273
  --height-for-button-as-big: 32px;
214
274
  --height-for-button-as-small: 24px;
215
275
  --height-for-button-as-icon-as-big: 32px;
216
276
  --height-for-button-as-icon-as-medium: 24px;
217
277
  --height-for-button-as-icon-as-small: 16px;
218
278
  --height-for-input: 32px;
279
+ --height-for-view-switcher: 32px;
280
+ --height-for-view-switcher-when-condensed: 24px;
281
+ --width-for-avatar-as-medium: 48px;
219
282
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
220
283
  --font-size-for-button: 1rem;
221
284
  --font-size-for-input: 1rem;
@@ -229,7 +292,14 @@
229
292
  --font-size-for-body: 13px;
230
293
  --font-size-for-link: 1rem;
231
294
  --font-size-for-stamp: 1rem;
295
+ --font-size-for-view-switcher: 1rem;
232
296
  --font-size-for-table: 1rem;
297
+ --font-size-for-avatar-as-small: 1rem;
298
+ --font-size-for-avatar-as-medium: 1.5rem;
299
+ --font-size-for-avatar-as-big: 3rem;
300
+ --font-size-for-localized-multiline-text-input-label: 0.9231rem;
301
+ --icon-color-for-datetime-input-icon: #1a1a1a;
302
+ --icon-color-for-datetime-input-icon-when-hovered: #f16d0e;
233
303
  --line-height-for-text-as-h1: inherit;
234
304
  --line-height-for-text-as-h2: inherit;
235
305
  --line-height-for-text-as-h3: inherit;
@@ -248,6 +318,7 @@
248
318
  --font-weight-for-table-header: 400;
249
319
  --margin-for-table-header: 8px;
250
320
  --margin-for-table-as-condensed: 8px;
321
+ --margin-for-view-switcher-icon: 0 var(--spacing-10) 0 0;
251
322
  --padding-for-stamp: var(--spacing-10) var(--spacing-20);
252
323
  --padding-for-stamp-as-condensed: 1px var(--spacing-10);
253
324
  --padding-for-tag: 5px var(--spacing-20);
@@ -266,6 +337,14 @@
266
337
  --padding-for-collapsible-panel-section-description-as-condensed: 0 0
267
338
  var(--spacing-30);
268
339
  --padding-for-input: 8px;
340
+ --padding-for-multiline-input: var(--spacing-10) var(--spacing-20);
341
+ --padding-for-localized-rich-text-input-label: 0 var(--spacing-20);
342
+ --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20);
343
+ --padding-for-tag-remove-icon: 0 var(--spacing-10);
344
+ --padding-for-tooltip: var(--spacing-10) var(--spacing-20);
345
+ --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
346
+ --padding-for-view-switcher-when-condensed: 0 var(--spacing-20) 0
347
+ var(--spacing-20);
269
348
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
270
349
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
271
350
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -284,6 +363,8 @@
284
363
  --shadow-for-input-when-focused: inset 0 0 0 2px var(--color-primary);
285
364
  --shadow-for-input-when-error: none;
286
365
  --shadow-for-input-when-warning: none;
366
+ --shadow-for-tooltip: 0 2px 2px rgba(0, 0, 0, 0.24),
367
+ 0 1px 4.75px rgba(0, 0, 0, 0.12);
287
368
  --font-size-m: 1rem;
288
369
  --big-button-height: 32px;
289
370
  --small-button-height: 24px;
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",
@@ -127,19 +139,30 @@
127
139
  "--background-color-for-input": "#fff",
128
140
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
129
141
  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
130
- "--background-color-for-input-when-hovered": "unset",
131
- "--background-color-for-input-when-focused": "unset",
142
+ "--background-color-for-input-when-hovered": "#fff",
143
+ "--background-color-for-input-when-focused": "#fff",
132
144
  "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 90%)",
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%)",
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%)",
155
+ "--background-color-for-tooltip": "#213c45",
156
+ "--background-color-for-view-switcher": "#fff",
157
+ "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)",
158
+ "--background-color-for-view-switcher-when-selected": "hsl(0, 0%, 95%)",
159
+ "--background-color-for-view-switcher-when-hovered": "hsl(0, 0%, 90%)",
138
160
  "--border-for-button-as-secondary": "none",
139
161
  "--border-for-button-as-secondary-when-hovered": "none",
140
162
  "--border-for-button-as-secondary-when-active": "none",
141
163
  "--border-for-card-when-raised": "none",
142
164
  "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
165
+ "--border-for-view-switcher": "none",
143
166
  "--border-color-for-input": "hsl(0, 0%, 60%)",
144
167
  "--border-color-for-input-when-focused": "#00b39e",
145
168
  "--border-color-for-input-when-disabled": "#ccc",
@@ -150,6 +173,7 @@
150
173
  "--border-color-for-tag": "hsl(0, 0%, 60%)",
151
174
  "--border-color-for-tag-warning": "#f16d0e",
152
175
  "--border-color-for-tag-when-focused": "#00b39e",
176
+ "--border-color-for-tag-when-hovered": "#f16d0e",
153
177
  "--border-color-for-button-as-icon": "#fff",
154
178
  "--border-color-for-button-as-icon-as-info": "#078cdf",
155
179
  "--border-color-for-button-as-icon-as-primary": "#00b39e",
@@ -158,6 +182,14 @@
158
182
  "--border-color-for-table-header-as-bottom": "#213c45",
159
183
  "--border-color-for-table-manager-droppable-list": "hsl(0, 0%, 60%)",
160
184
  "--border-color-for-collapsible-panel-header": "hsl(0, 0%, 60%)",
185
+ "--border-color-for-stamp-when-error": "#e60050",
186
+ "--border-color-for-stamp-when-warning": "#f16d0e",
187
+ "--border-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 40%)",
188
+ "--border-color-for-stamp-as-information": "#078cdf",
189
+ "--border-color-for-stamp-as-primary": "hsl(172.9608938547486, 100%, 25%)",
190
+ "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 60%)",
191
+ "--border-color-for-localized-multiline-text-input-label": "#ccc",
192
+ "--border-color-for-localized-multiline-text-input-label-when-readonly": "#ccc",
161
193
  "--border-radius-for-button-as-big": "6px",
162
194
  "--border-radius-for-button-as-small": "4px",
163
195
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -167,10 +199,16 @@
167
199
  "--border-radius-for-tag": "2px",
168
200
  "--border-radius-for-card": "6px",
169
201
  "--border-radius-for-table-manager-droppable-list": "6px",
202
+ "--border-radius-for-stamp": "2px",
203
+ "--border-radius-for-view-switcher": "6px",
170
204
  "--border-width-for-input": "1px",
171
205
  "--border-width-for-input-when-warning": "1px",
172
206
  "--border-width-for-input-when-error": "1px",
173
207
  "--border-width-for-input-when-focused": "1px",
208
+ "--border-width-for-tag": "1px",
209
+ "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px",
210
+ "--box-shadow-for-view-switcher": "0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)",
211
+ "--box-shadow-for-view-switcher-when-selected": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)",
174
212
  "--font-color-for-text": "#1a1a1a",
175
213
  "--font-color-for-input": "#1a1a1a",
176
214
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
@@ -178,15 +216,25 @@
178
216
  "--font-color-for-input-when-readonly": "hsl(0, 0%, 60%)",
179
217
  "--font-color-for-input-when-warning": "#f16d0e",
180
218
  "--font-color-for-tag": "#1a1a1a",
219
+ "--font-color-for-tag-remove-icon": "#1a1a1a",
220
+ "--font-color-for-tag-drag-icon": "#1a1a1a",
221
+ "--font-color-for-tag-remove-icon-when-hovered": "#f16d0e",
181
222
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
182
223
  "--font-color-for-text-when-inverted": "#fff",
183
224
  "--font-color-for-table-header": "#fff",
225
+ "--font-color-for-localized-multiline-text-input-label": "hsl(0, 0%, 60%)",
226
+ "--font-color-for-view-switcher": "#1a1a1a",
227
+ "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)",
228
+ "--font-color-for-view-switcher-when-selected": "#1a1a1a",
184
229
  "--height-for-button-as-big": "32px",
185
230
  "--height-for-button-as-small": "24px",
186
231
  "--height-for-button-as-icon-as-big": "32px",
187
232
  "--height-for-button-as-icon-as-medium": "24px",
188
233
  "--height-for-button-as-icon-as-small": "16px",
189
234
  "--height-for-input": "32px",
235
+ "--height-for-view-switcher": "32px",
236
+ "--height-for-view-switcher-when-condensed": "24px",
237
+ "--width-for-avatar-as-medium": "48px",
190
238
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
191
239
  "--font-size-for-button": "1rem",
192
240
  "--font-size-for-input": "1rem",
@@ -200,7 +248,14 @@
200
248
  "--font-size-for-body": "13px",
201
249
  "--font-size-for-link": "1rem",
202
250
  "--font-size-for-stamp": "1rem",
251
+ "--font-size-for-view-switcher": "1rem",
203
252
  "--font-size-for-table": "1rem",
253
+ "--font-size-for-avatar-as-small": "1rem",
254
+ "--font-size-for-avatar-as-medium": "1.5rem",
255
+ "--font-size-for-avatar-as-big": "3rem",
256
+ "--font-size-for-localized-multiline-text-input-label": "0.9231rem",
257
+ "--icon-color-for-datetime-input-icon": "#1a1a1a",
258
+ "--icon-color-for-datetime-input-icon-when-hovered": "#f16d0e",
204
259
  "--line-height-for-text-as-h1": "inherit",
205
260
  "--line-height-for-text-as-h2": "inherit",
206
261
  "--line-height-for-text-as-h3": "inherit",
@@ -219,6 +274,7 @@
219
274
  "--font-weight-for-table-header": "400",
220
275
  "--margin-for-table-header": "8px",
221
276
  "--margin-for-table-as-condensed": "8px",
277
+ "--margin-for-view-switcher-icon": "0 var(--spacing-10) 0 0",
222
278
  "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
223
279
  "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
224
280
  "--padding-for-tag": "5px var(--spacing-20)",
@@ -236,6 +292,13 @@
236
292
  "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-50)",
237
293
  "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-30)",
238
294
  "--padding-for-input": "8px",
295
+ "--padding-for-multiline-input": "var(--spacing-10) var(--spacing-20)",
296
+ "--padding-for-localized-rich-text-input-label": "0 var(--spacing-20)",
297
+ "--padding-for-localized-multiline-text-input-label": "0 var(--spacing-20)",
298
+ "--padding-for-tag-remove-icon": "0 var(--spacing-10)",
299
+ "--padding-for-tooltip": "var(--spacing-10) var(--spacing-20)",
300
+ "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)",
301
+ "--padding-for-view-switcher-when-condensed": "0 var(--spacing-20) 0 var(--spacing-20)",
239
302
  "--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
303
  "--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
304
  "--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)",
@@ -247,6 +310,7 @@
247
310
  "--shadow-for-input-when-focused": "inset 0 0 0 2px var(--color-primary)",
248
311
  "--shadow-for-input-when-error": "none",
249
312
  "--shadow-for-input-when-warning": "none",
313
+ "--shadow-for-tooltip": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)",
250
314
  "--font-size-m": "1rem",
251
315
  "--big-button-height": "32px",
252
316
  "--small-button-height": "24px",
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,10 @@ 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'
254
+ condensed:
255
+ description: 'When the element is condensed'
240
256
 
241
257
  variants:
242
258
  h1:
@@ -273,6 +289,10 @@ variants:
273
289
  description: 'Elements with a compact style'
274
290
  bottom:
275
291
  description: 'To differentiate component bottom style'
292
+ positive:
293
+ description: 'To differentiate component positive style'
294
+ information:
295
+ description: 'To differentiate component information style'
276
296
 
277
297
  componentGroups:
278
298
  button:
@@ -281,6 +301,10 @@ componentGroups:
281
301
  description: 'Input elements'
282
302
  tag:
283
303
  description: 'Tag elements'
304
+ tag-remove-icon:
305
+ description: 'Tag remove icon elements'
306
+ tag-drag-icon:
307
+ description: 'Tag drag icon elements'
284
308
  tag-warning:
285
309
  description: 'Tag elements with type warning'
286
310
  text:
@@ -317,6 +341,24 @@ componentGroups:
317
341
  description: 'Select input elements'
318
342
  select-input-option:
319
343
  description: 'Select input option elements'
344
+ datetime-input:
345
+ description: 'Date time input elements'
346
+ datetime-input-icon:
347
+ description: 'Date time input icon elements'
348
+ avatar:
349
+ description: 'Avatar elements'
350
+ multiline-input:
351
+ description: 'Multiline input elements'
352
+ localized-rich-text-input-label:
353
+ description: 'Localized rich text input label elements'
354
+ localized-multiline-text-input-label:
355
+ description: 'Localized multiline text input label elements'
356
+ tooltip:
357
+ description: 'Tooltip elements'
358
+ view-switcher:
359
+ description: 'View switcher elements'
360
+ view-switcher-icon:
361
+ description: 'View switcher icon elements'
320
362
 
321
363
  decisionGroupsByTheme:
322
364
  default:
@@ -357,10 +399,10 @@ decisionGroupsByTheme:
357
399
  choice: color-accent-98
358
400
  background-color-for-input-when-hovered:
359
401
  description: ''
360
- choice: 'unset'
402
+ choice: color-surface
361
403
  background-color-for-input-when-focused:
362
404
  description: ''
363
- choice: 'unset'
405
+ choice: color-surface
364
406
  background-color-for-table-cell-when-hovered:
365
407
  choice: color-neutral-90
366
408
  background-color-for-table-header:
@@ -376,6 +418,31 @@ decisionGroupsByTheme:
376
418
  background-color-for-select-input-option-when-hovered:
377
419
  description: ''
378
420
  choice: color-neutral-90
421
+ background-color-for-avatar:
422
+ description: ''
423
+ choice: color-neutral-60
424
+ background-color-for-avatar-when-highlighted:
425
+ description: ''
426
+ choice: color-neutral
427
+ background-color-for-stamp-as-positive:
428
+ description: ''
429
+ choice: color-primary-85
430
+ background-color-for-localized-multiline-text-input-label:
431
+ description: ''
432
+ choice: color-accent-98
433
+ background-color-for-localized-multiline-text-input-label-when-disabled:
434
+ description: ''
435
+ choice: color-accent-98
436
+ background-color-for-tooltip:
437
+ choice: color-accent
438
+ background-color-for-view-switcher:
439
+ choice: color-surface
440
+ background-color-for-view-switcher-when-disabled:
441
+ choice: color-accent-98
442
+ background-color-for-view-switcher-when-selected:
443
+ choice: color-neutral-95
444
+ background-color-for-view-switcher-when-hovered:
445
+ choice: color-neutral-90
379
446
 
380
447
  borders:
381
448
  label: Borders
@@ -391,6 +458,8 @@ decisionGroupsByTheme:
391
458
  choice: 'none'
392
459
  border-for-collapsible-panel-header-icon-when-disabled:
393
460
  choice: '1px solid var(--color-neutral)'
461
+ border-for-view-switcher:
462
+ choice: 'none'
394
463
 
395
464
  borderColors:
396
465
  label: Border Colors
@@ -426,6 +495,8 @@ decisionGroupsByTheme:
426
495
  border-color-for-tag-when-focused:
427
496
  description: ''
428
497
  choice: color-primary
498
+ border-color-for-tag-when-hovered:
499
+ choice: color-warning
429
500
  border-color-for-button-as-icon:
430
501
  choice: color-surface
431
502
  border-color-for-button-as-icon-as-info:
@@ -442,6 +513,22 @@ decisionGroupsByTheme:
442
513
  choice: color-neutral-60
443
514
  border-color-for-collapsible-panel-header:
444
515
  choice: color-neutral-60
516
+ border-color-for-stamp-when-error:
517
+ choice: color-error
518
+ border-color-for-stamp-when-warning:
519
+ choice: color-warning
520
+ border-color-for-stamp-as-positive:
521
+ choice: color-primary-40
522
+ border-color-for-stamp-as-information:
523
+ choice: color-info
524
+ border-color-for-stamp-as-primary:
525
+ choice: color-primary-25
526
+ border-color-for-stamp-as-secondary:
527
+ choice: color-neutral-60
528
+ border-color-for-localized-multiline-text-input-label:
529
+ choice: color-neutral
530
+ border-color-for-localized-multiline-text-input-label-when-readonly:
531
+ choice: color-neutral
445
532
 
446
533
  borderRadiuses:
447
534
  label: Border Radius
@@ -467,6 +554,10 @@ decisionGroupsByTheme:
467
554
  choice: border-radius-6
468
555
  border-radius-for-table-manager-droppable-list:
469
556
  choice: border-radius-6
557
+ border-radius-for-stamp:
558
+ choice: border-radius-2
559
+ border-radius-for-view-switcher:
560
+ choice: border-radius-6
470
561
 
471
562
  borderWidths:
472
563
  label: Border width
@@ -480,6 +571,19 @@ decisionGroupsByTheme:
480
571
  choice: border-width-1
481
572
  border-width-for-input-when-focused:
482
573
  choice: border-width-1
574
+ border-width-for-tag:
575
+ choice: border-width-1
576
+
577
+ boxShadows:
578
+ label: Box shadows
579
+ prefix: box-shadow
580
+ decisions:
581
+ box-shadow-for-datetime-input-when-hovered:
582
+ choice: 'inset 0 0 0 2px'
583
+ box-shadow-for-view-switcher:
584
+ choice: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)
585
+ box-shadow-for-view-switcher-when-selected:
586
+ choice: shadow-9
483
587
 
484
588
  fontColors:
485
589
  label: Font Colors
@@ -506,6 +610,12 @@ decisionGroupsByTheme:
506
610
  font-color-for-tag:
507
611
  description: ''
508
612
  choice: color-solid
613
+ font-color-for-tag-remove-icon:
614
+ choice: color-solid
615
+ font-color-for-tag-drag-icon:
616
+ choice: color-solid
617
+ font-color-for-tag-remove-icon-when-hovered:
618
+ choice: color-warning
509
619
  font-color-for-tag-when-disabled:
510
620
  description: ''
511
621
  choice: color-neutral-60
@@ -514,6 +624,14 @@ decisionGroupsByTheme:
514
624
  choice: color-surface
515
625
  font-color-for-table-header:
516
626
  choice: color-surface
627
+ font-color-for-localized-multiline-text-input-label:
628
+ choice: color-neutral-60
629
+ font-color-for-view-switcher:
630
+ choice: color-solid
631
+ font-color-for-view-switcher-when-disabled:
632
+ choice: color-neutral-60
633
+ font-color-for-view-switcher-when-selected:
634
+ choice: color-solid
517
635
 
518
636
  heights:
519
637
  label: Height
@@ -531,6 +649,17 @@ decisionGroupsByTheme:
531
649
  choice: '16px'
532
650
  height-for-input:
533
651
  choice: '32px'
652
+ height-for-view-switcher:
653
+ choice: '32px'
654
+ height-for-view-switcher-when-condensed:
655
+ choice: '24px'
656
+
657
+ widths:
658
+ label: Width
659
+ prefix: width
660
+ decisions:
661
+ width-for-avatar-as-medium:
662
+ choice: '48px'
534
663
 
535
664
  placeholderFontColors:
536
665
  label: Placeholder font colors
@@ -552,7 +681,7 @@ decisionGroupsByTheme:
552
681
  choice: font-size-30
553
682
  font-size-for-text-as-h1:
554
683
  description: ''
555
- choice: font-size-70
684
+ choice: font-size-69
556
685
  font-size-for-text-as-h2:
557
686
  description: ''
558
687
  choice: font-size-66
@@ -579,8 +708,27 @@ decisionGroupsByTheme:
579
708
  choice: font-size-30
580
709
  font-size-for-stamp:
581
710
  choice: font-size-30
711
+ font-size-for-view-switcher:
712
+ choice: font-size-30
582
713
  font-size-for-table:
583
714
  choice: font-size-30
715
+ font-size-for-avatar-as-small:
716
+ choice: font-size-30
717
+ font-size-for-avatar-as-medium:
718
+ choice: font-size-60
719
+ font-size-for-avatar-as-big:
720
+ choice: font-size-78
721
+ font-size-for-localized-multiline-text-input-label:
722
+ choice: font-size-15
723
+
724
+ iconColors:
725
+ label: Icon colors
726
+ prefix: icon-color
727
+ decisions:
728
+ icon-color-for-datetime-input-icon:
729
+ choice: color-solid
730
+ icon-color-for-datetime-input-icon-when-hovered:
731
+ choice: color-warning
584
732
 
585
733
  lineHeights:
586
734
  label: Line Heights
@@ -646,6 +794,8 @@ decisionGroupsByTheme:
646
794
  choice: spacing-20
647
795
  margin-for-table-as-condensed:
648
796
  choice: spacing-20
797
+ margin-for-view-switcher-icon:
798
+ choice: '0 var(--spacing-10) 0 0'
649
799
 
650
800
  paddings:
651
801
  label: Paddings
@@ -685,6 +835,20 @@ decisionGroupsByTheme:
685
835
  choice: '0 0 var(--spacing-30)'
686
836
  padding-for-input:
687
837
  choice: spacing-20
838
+ padding-for-multiline-input:
839
+ choice: 'var(--spacing-10) var(--spacing-20)'
840
+ padding-for-localized-rich-text-input-label:
841
+ choice: '0 var(--spacing-20)'
842
+ padding-for-localized-multiline-text-input-label:
843
+ choice: '0 var(--spacing-20)'
844
+ padding-for-tag-remove-icon:
845
+ choice: '0 var(--spacing-10)'
846
+ padding-for-tooltip:
847
+ choice: 'var(--spacing-10) var(--spacing-20)'
848
+ padding-for-view-switcher:
849
+ choice: '0 var(--spacing-30) 0 var(--spacing-30)'
850
+ padding-for-view-switcher-when-condensed:
851
+ choice: '0 var(--spacing-20) 0 var(--spacing-20)'
688
852
 
689
853
  shadows:
690
854
  label: Shadows
@@ -714,6 +878,8 @@ decisionGroupsByTheme:
714
878
  choice: shadow-0
715
879
  shadow-for-input-when-warning:
716
880
  choice: shadow-0
881
+ shadow-for-tooltip:
882
+ choice: shadow-15
717
883
 
718
884
  test:
719
885
  backgroundColors:
@@ -752,6 +918,27 @@ decisionGroupsByTheme:
752
918
  choice: color-neutral-95
753
919
  background-color-for-input-when-disabled:
754
920
  choice: color-neutral-95
921
+ background-color-for-avatar:
922
+ description: ''
923
+ choice: color-accent
924
+ background-color-for-avatar-when-highlighted:
925
+ description: ''
926
+ choice: color-accent-30
927
+ background-color-for-stamp-as-positive:
928
+ description: ''
929
+ choice: color-primary-95
930
+ background-color-for-localized-multiline-text-input-label:
931
+ choice: color-surface
932
+ background-color-for-localized-multiline-text-input-label-when-disabled:
933
+ choice: color-neutral-95
934
+ background-color-for-tooltip:
935
+ choice: color-accent-10
936
+ background-color-for-view-switcher-when-disabled:
937
+ choice: color-surface
938
+ background-color-for-view-switcher-when-selected:
939
+ choice: color-neutral-95
940
+ background-color-for-view-switcher-when-hovered:
941
+ choice: color-neutral-95
755
942
 
756
943
  borders:
757
944
  label: Borders
@@ -767,6 +954,8 @@ decisionGroupsByTheme:
767
954
  choice: '1px solid var(--color-neutral-90)'
768
955
  border-for-collapsible-panel-header-icon-when-disabled:
769
956
  choice: 'none'
957
+ border-for-view-switcher:
958
+ choice: '1px solid var(--color-neutral)'
770
959
 
771
960
  borderColors:
772
961
  label: Border Colors
@@ -800,6 +989,24 @@ decisionGroupsByTheme:
800
989
  choice: color-neutral
801
990
  border-color-for-collapsible-panel-header:
802
991
  choice: color-neutral-90
992
+ border-color-for-stamp-when-error:
993
+ choice: color-error-85
994
+ border-color-for-stamp-when-warning:
995
+ choice: color-warning-85
996
+ border-color-for-stamp-as-positive:
997
+ choice: color-primary-85
998
+ border-color-for-stamp-as-information:
999
+ choice: color-info-85
1000
+ border-color-for-stamp-as-primary:
1001
+ choice: color-primary-85
1002
+ border-color-for-stamp-as-secondary:
1003
+ choice: color-neutral-85
1004
+ border-color-for-localized-multiline-text-input-label-when-readonly:
1005
+ choice: color-neutral-90
1006
+ border-color-for-tag:
1007
+ choice: color-neutral
1008
+ border-color-for-tag-when-hovered:
1009
+ choice: color-neutral
803
1010
 
804
1011
  borderRadiuses:
805
1012
  label: Border radiuses
@@ -821,6 +1028,28 @@ decisionGroupsByTheme:
821
1028
  choice: border-radius-4
822
1029
  border-radius-for-input:
823
1030
  choice: border-radius-4
1031
+ border-radius-for-stamp:
1032
+ choice: border-radius-20
1033
+ border-radius-for-view-switcher:
1034
+ choice: border-radius-4
1035
+
1036
+ borderWidths:
1037
+ label: Border width
1038
+ prefix: border-width
1039
+ decisions:
1040
+ border-width-for-tag:
1041
+ choice: '1px 1px 1px 0'
1042
+
1043
+ boxShadows:
1044
+ label: Box shadows
1045
+ prefix: box-shadow
1046
+ decisions:
1047
+ box-shadow-for-datetime-input-when-hovered:
1048
+ choice: 'inset 0 0 0 1px'
1049
+ box-shadow-for-view-switcher:
1050
+ choice: shadow-0
1051
+ box-shadow-for-view-switcher-when-selected:
1052
+ choice: shadow-0
824
1053
 
825
1054
  fontColors:
826
1055
  label: Font Colors
@@ -830,6 +1059,14 @@ decisionGroupsByTheme:
830
1059
  choice: color-neutral-40
831
1060
  font-color-for-input-when-readonly:
832
1061
  choice: color-neutral-40
1062
+ font-color-for-tag-remove-icon:
1063
+ choice: color-neutral-40
1064
+ font-color-for-tag-drag-icon:
1065
+ choice: color-neutral-40
1066
+ font-color-for-tag-remove-icon-when-hovered:
1067
+ choice: color-error
1068
+ font-color-for-view-switcher:
1069
+ choice: color-neutral-40
833
1070
 
834
1071
  fontSizes:
835
1072
  label: Font Sizes
@@ -843,7 +1080,7 @@ decisionGroupsByTheme:
843
1080
  choice: font-size-60
844
1081
  font-size-for-text-as-h2:
845
1082
  description: ''
846
- choice: font-size-60
1083
+ choice: font-size-50
847
1084
  font-size-for-text-as-h3:
848
1085
  description: ''
849
1086
  choice: font-size-40
@@ -870,8 +1107,18 @@ decisionGroupsByTheme:
870
1107
  choice: 'inherit'
871
1108
  font-size-for-stamp:
872
1109
  choice: font-size-20
1110
+ font-size-for-view-switcher:
1111
+ choice: font-size-20
873
1112
  font-size-for-table:
874
1113
  choice: font-size-20
1114
+ font-size-for-avatar-as-small:
1115
+ choice: font-size-20
1116
+ font-size-for-avatar-as-medium:
1117
+ choice: font-size-30
1118
+ font-size-for-avatar-as-big:
1119
+ choice: font-size-80
1120
+ font-size-for-localized-multiline-text-input-label:
1121
+ choice: font-size-30
875
1122
 
876
1123
  lineHeights:
877
1124
  label: Line Heights
@@ -882,7 +1129,7 @@ decisionGroupsByTheme:
882
1129
  choice: line-height-60
883
1130
  line-height-for-text-as-h2:
884
1131
  description: ''
885
- choice: line-height-60
1132
+ choice: line-height-50
886
1133
  line-height-for-text-as-h3:
887
1134
  description: ''
888
1135
  choice: line-height-30
@@ -908,7 +1155,7 @@ decisionGroupsByTheme:
908
1155
  choice: font-weight-600
909
1156
  font-weight-for-text-as-h2:
910
1157
  description: ''
911
- choice: font-weight-600
1158
+ choice: font-weight-500
912
1159
  font-weight-for-text-as-h3:
913
1160
  description: ''
914
1161
  choice: font-weight-500
@@ -945,6 +1192,26 @@ decisionGroupsByTheme:
945
1192
  choice: '16px'
946
1193
  height-for-input:
947
1194
  choice: '40px'
1195
+ height-for-view-switcher:
1196
+ choice: '40px'
1197
+ height-for-view-switcher-when-condensed:
1198
+ choice: '32px'
1199
+
1200
+ iconColors:
1201
+ label: Icon colors
1202
+ prefix: icon-color
1203
+ decisions:
1204
+ icon-color-for-datetime-input-icon:
1205
+ choice: color-neutral-40
1206
+ icon-color-for-datetime-input-icon-when-hovered:
1207
+ choice: color-error
1208
+
1209
+ widths:
1210
+ label: Width
1211
+ prefix: width
1212
+ decisions:
1213
+ width-for-avatar-as-medium:
1214
+ choice: '40px'
948
1215
 
949
1216
  margins:
950
1217
  label: Margins
@@ -954,6 +1221,8 @@ decisionGroupsByTheme:
954
1221
  choice: spacing-30
955
1222
  margin-for-table-cell-as-condensed:
956
1223
  choice: spacing-20
1224
+ margin-for-view-switcher-icon:
1225
+ choice: '0 var(--spacing-20) 0 0'
957
1226
 
958
1227
  paddings:
959
1228
  label: Paddings
@@ -993,6 +1262,20 @@ decisionGroupsByTheme:
993
1262
  choice: '0 0 var(--spacing-40)'
994
1263
  padding-for-input:
995
1264
  choice: spacing-30
1265
+ padding-for-multiline-input:
1266
+ choice: spacing-20
1267
+ padding-for-localized-rich-text-input-label:
1268
+ choice: spacing-20
1269
+ padding-for-localized-multiline-text-input-label:
1270
+ choice: '0 12px'
1271
+ padding-for-tag-remove-icon:
1272
+ choice: '0 12px'
1273
+ padding-for-tooltip:
1274
+ choice: 'var(--spacing-20) 12px'
1275
+ padding-for-view-switcher:
1276
+ choice: '0 var(--spacing-30) 0 var(--spacing-30)'
1277
+ padding-for-view-switcher-when-condensed:
1278
+ choice: '0 12px 0 12px'
996
1279
 
997
1280
  shadows:
998
1281
  label: Shadows
@@ -1018,6 +1301,8 @@ decisionGroupsByTheme:
1018
1301
  choice: 'inset 0 0 0 1px var(--color-error)'
1019
1302
  shadow-for-input-when-warning:
1020
1303
  choice: 'inset 0 0 0 1px var(--color-warning)'
1304
+ shadow-for-tooltip:
1305
+ choice: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)'
1021
1306
 
1022
1307
  # These tokens are deprecated as they don't follow our naming patterns.
1023
1308
  # 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.8.0",
4
+ "version": "15.10.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,43 +24,43 @@
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.10.0",
28
+ "@commercetools-uikit/avatar": "15.10.0",
29
+ "@commercetools-uikit/buttons": "15.10.0",
30
+ "@commercetools-uikit/card": "15.10.0",
31
+ "@commercetools-uikit/collapsible": "15.10.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.10.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.10.0",
34
+ "@commercetools-uikit/constraints": "15.10.0",
35
+ "@commercetools-uikit/data-table": "15.10.0",
36
+ "@commercetools-uikit/data-table-manager": "15.10.0",
37
+ "@commercetools-uikit/design-system": "15.10.0",
38
+ "@commercetools-uikit/field-errors": "15.10.0",
39
+ "@commercetools-uikit/field-label": "15.10.0",
40
+ "@commercetools-uikit/fields": "15.10.0",
41
+ "@commercetools-uikit/grid": "15.10.0",
42
+ "@commercetools-uikit/hooks": "15.10.0",
43
+ "@commercetools-uikit/i18n": "15.10.0",
44
+ "@commercetools-uikit/icons": "15.10.0",
45
+ "@commercetools-uikit/inputs": "15.10.0",
46
+ "@commercetools-uikit/label": "15.10.0",
47
+ "@commercetools-uikit/link": "15.10.0",
48
+ "@commercetools-uikit/loading-spinner": "15.10.0",
49
+ "@commercetools-uikit/messages": "15.10.0",
50
+ "@commercetools-uikit/notifications": "15.10.0",
51
+ "@commercetools-uikit/pagination": "15.10.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.10.0",
53
+ "@commercetools-uikit/spacings": "15.10.0",
54
+ "@commercetools-uikit/stamp": "15.10.0",
55
+ "@commercetools-uikit/tag": "15.10.0",
56
+ "@commercetools-uikit/text": "15.10.0",
57
+ "@commercetools-uikit/tooltip": "15.10.0",
58
+ "@commercetools-uikit/utils": "15.10.0",
59
+ "@commercetools-uikit/view-switcher": "15.10.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",
63
- "moment-timezone": "0.5.38",
63
+ "moment-timezone": "0.5.40",
64
64
  "react": "17.0.2",
65
65
  "react-intl": "^5.25.1",
66
66
  "react-router-dom": "5.3.4"