@commercetools-frontend/ui-kit 16.7.5 → 16.8.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 +167 -127
  5. package/materials/custom-properties.json +146 -110
  6. package/materials/internals/definition.yaml +72 -34
  7. package/package.json +35 -35
package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED
@@ -79,7 +79,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
79
79
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
80
80
 
81
81
  // NOTE: This string will be replaced on build time with the package version.
82
- var version = "16.7.5";
82
+ var version = "16.8.0";
83
83
 
84
84
  exports.i18n = i18n__namespace;
85
85
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED
@@ -79,7 +79,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
79
79
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
80
80
 
81
81
  // NOTE: This string will be replaced on build time with the package version.
82
- var version = "16.7.5";
82
+ var version = "16.8.0";
83
83
 
84
84
  exports.i18n = i18n__namespace;
85
85
  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 = "16.7.5";
36
+ var version = "16.8.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -6,31 +6,61 @@
6
6
  */
7
7
 
8
8
  :root {
9
- --color-primary: #00b39e;
10
- --color-primary-20: hsl(172.9608938547486, 100%, 20%);
11
- --color-primary-25: hsl(172.9608938547486, 100%, 25%);
12
- --color-primary-30: hsl(172.9608938547486, 100%, 30%);
13
- --color-primary-40: hsl(172.9608938547486, 100%, 40%);
14
- --color-primary-85: hsl(172.9608938547486, 100%, 85%);
15
- --color-primary-95: hsl(172.9608938547486, 100%, 95%);
9
+ --color-primary: hsl(175, 55%, 45%);
10
+ --color-primary-20: hsl(175, 55%, 20%);
11
+ --color-primary-25: hsl(175, 55%, 25%);
12
+ --color-primary-30: hsl(175, 55%, 30%);
13
+ --color-primary-40: hsl(175, 55%, 40%);
14
+ --color-primary-85: hsl(175, 70%, 85%);
15
+ --color-primary-90: hsl(175, 70%, 90%);
16
+ --color-primary-95: hsl(175, 90%, 95%);
16
17
  --color-accent: #213c45;
17
18
  --color-accent-10: hsl(195, 35.2941176471%, 10%);
18
19
  --color-accent-20: hsl(195, 35.2941176471%, 20%);
19
20
  --color-accent-30: hsl(195, 35.2941176471%, 30%);
20
21
  --color-accent-40: hsl(195, 35.2941176471%, 40%);
22
+ --color-accent-50: hsl(195, 35%, 50%);
21
23
  --color-accent-60: hsl(195, 35.2941176471%, 60%);
24
+ --color-accent-85: hsl(195, 35%, 85%);
22
25
  --color-accent-90: hsl(195, 35.2941176471%, 90%);
23
26
  --color-accent-95: hsl(195, 35.2941176471%, 95%);
24
27
  --color-accent-98: hsl(195, 35.2941176471%, 98%);
25
- --color-neutral: #ccc;
28
+ --color-brown-10: hsl(35, 90%, 10%);
29
+ --color-brown-20: hsl(35, 50%, 20%);
30
+ --color-brown-35: hsl(35, 25%, 35%);
31
+ --color-brown-50: hsl(35, 30%, 50%);
32
+ --color-brown-70: hsl(35, 40%, 70%);
33
+ --color-brown-85: hsl(35, 60%, 85%);
34
+ --color-brown-90: hsl(35, 90%, 90%);
35
+ --color-brown-95: hsl(35, 80%, 95%);
36
+ --color-brown-98: hsl(35, 90%, 98%);
37
+ --color-purple-10: hsl(248, 90%, 10%);
38
+ --color-purple-20: hsl(248, 50%, 20%);
39
+ --color-purple-35: hsl(248, 25%, 35%);
40
+ --color-purple-50: hsl(248, 30%, 50%);
41
+ --color-purple-70: hsl(248, 40%, 70%);
42
+ --color-purple-85: hsl(248, 60%, 85%);
43
+ --color-purple-90: hsl(248, 50%, 90%);
44
+ --color-purple-95: hsl(248, 80%, 95%);
45
+ --color-purple-98: hsl(248, 90%, 98%);
46
+ --color-turquoise-10: hsl(180, 90%, 10%);
47
+ --color-turquoise-20: hsl(180, 50%, 20%);
48
+ --color-turquoise-35: hsl(180, 25%, 35%);
49
+ --color-turquoise-50: hsl(180, 30%, 45%);
50
+ --color-turquoise-70: hsl(180, 40%, 70%);
51
+ --color-turquoise-85: hsl(180, 60%, 85%);
52
+ --color-turquoise-90: hsl(180, 40%, 90%);
53
+ --color-turquoise-95: hsl(180, 80%, 95%);
54
+ --color-turquoise-98: hsl(180, 90%, 98%);
55
+ --color-neutral: hsl(232, 18%, 80%);
26
56
  --color-neutral-05: hsl(0deg 0% 80% / 5%);
27
57
  --color-neutral-10: hsl(0deg 0% 80% / 10%);
28
- --color-neutral-40: hsl(0, 0%, 40%);
29
- --color-neutral-60: hsl(0, 0%, 60%);
30
- --color-neutral-85: hsl(0, 0%, 85%);
31
- --color-neutral-90: hsl(0, 0%, 90%);
32
- --color-neutral-95: hsl(0, 0%, 95%);
33
- --color-neutral-98: hsl(0, 0%, 98%);
58
+ --color-neutral-40: hsl(232, 18%, 40%);
59
+ --color-neutral-60: hsl(232, 18%, 60%);
60
+ --color-neutral-85: hsl(232, 18%, 85%);
61
+ --color-neutral-90: hsl(232, 18%, 90%);
62
+ --color-neutral-95: hsl(232, 18%, 95%);
63
+ --color-neutral-98: hsl(232, 18%, 98%);
34
64
  --color-info: #078cdf;
35
65
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
36
66
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
@@ -60,6 +90,7 @@
60
90
  --border-width-2: 2px;
61
91
  --font-family: 'Inter', system-ui;
62
92
  --font-size-10: 0.75rem;
93
+ --font-size-12: 0.8rem;
63
94
  --font-size-20: 0.875rem;
64
95
  --font-size-30: 1rem;
65
96
  --font-size-40: 1.125rem;
@@ -67,6 +98,7 @@
67
98
  --font-size-60: 1.5rem;
68
99
  --font-size-70: 2rem;
69
100
  --font-size-80: 2.5rem;
101
+ --font-size-90: 3rem;
70
102
  --font-size-15: 0.9231rem;
71
103
  --font-size-35: 1.0769rem;
72
104
  --font-size-45: 1.2308rem;
@@ -79,7 +111,9 @@
79
111
  --font-weight-500: 500;
80
112
  --font-weight-600: 600;
81
113
  --font-weight-700: 700;
114
+ --line-height-05: 1.125rem;
82
115
  --line-height-10: 1.25rem;
116
+ --line-height-18: 1.3rem;
83
117
  --line-height-20: 1.375rem;
84
118
  --line-height-30: 1.5rem;
85
119
  --line-height-40: 1.625rem;
@@ -107,6 +141,7 @@
107
141
  --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12);
108
142
  --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25),
109
143
  -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25);
144
+ --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
110
145
  --constraint-scale: 100%;
111
146
  --constraint-1: 42px;
112
147
  --constraint-2: 84px;
@@ -129,6 +164,7 @@
129
164
  --spacing-m: 16px;
130
165
  --spacing-l: 24px;
131
166
  --spacing-xl: 32px;
167
+ --spacing-05: 2px;
132
168
  --spacing-10: 4px;
133
169
  --spacing-20: 8px;
134
170
  --spacing-25: 12px;
@@ -151,7 +187,11 @@
151
187
  --background-color-for-button-as-primary-when-active: #15a390;
152
188
  --background-color-for-button-as-primary-when-hovered: #17ab97;
153
189
  --background-color-for-button-as-icon-as-primary-when-active: #15a390;
154
- --background-color-for-button-as-icon-as-primary-when-hovered: #00b39e;
190
+ --background-color-for-button-as-icon-as-primary-when-hovered: hsl(
191
+ 175,
192
+ 55%,
193
+ 45%
194
+ );
155
195
  --background-color-for-button-as-icon-as-info-when-active: #057fcc;
156
196
  --background-color-for-button-as-icon-as-info-when-hovered: #078cdf;
157
197
  --background-color-for-button-as-urgent-when-active: #dc630a;
@@ -161,39 +201,46 @@
161
201
  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
162
202
  --background-color-for-input: #fff;
163
203
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
164
- --background-color-for-input-when-disabled: hsl(0, 0%, 95%);
165
- --background-color-for-input-when-hovered: hsl(0, 0%, 98%);
204
+ --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
205
+ --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
166
206
  --background-color-for-input-when-focused: #fff;
167
- --background-color-for-input-when-readonly: hsl(0, 0%, 95%);
207
+ --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
168
208
  --background-color-for-input-when-active: hsl(
169
209
  203.05555555555554,
170
210
  93.9130434783%,
171
211
  95%
172
212
  );
173
- --background-color-for-table-cell-when-hovered: hsl(0, 0%, 98%);
174
- --background-color-for-table-header: hsl(0, 0%, 95%);
175
- --background-color-for-tag: hsl(0, 0%, 95%);
213
+ --background-color-for-table-cell-when-hovered: hsl(232, 18%, 98%);
214
+ --background-color-for-table-header: hsl(232, 18%, 98%);
215
+ --background-color-for-tag: hsl(232, 18%, 95%);
176
216
  --background-color-for-tag-warning: hsl(
177
217
  25.110132158590307,
178
218
  89.0196078431%,
179
219
  95%
180
220
  );
181
- --background-color-for-tag-when-hovered: hsl(0, 0%, 90%);
221
+ --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
182
222
  --background-color-for-collapsible-panel-header-icon-when-disabled: #fff;
183
- --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 98%);
184
- --background-color-for-avatar: #213c45;
185
- --background-color-for-avatar-when-highlighted: hsl(195, 35.2941176471%, 30%);
186
- --background-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 95%);
223
+ --background-color-for-select-input-option-when-hovered: hsl(232, 18%, 98%);
224
+ --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
225
+ --background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
187
226
  --background-color-for-localized-input-label: #fff;
188
- --background-color-for-localized-input-label-when-readonly: hsl(0, 0%, 95%);
189
- --background-color-for-localized-input-label-when-disabled: hsl(0, 0%, 95%);
227
+ --background-color-for-localized-input-label-when-readonly: hsl(
228
+ 232,
229
+ 18%,
230
+ 95%
231
+ );
232
+ --background-color-for-localized-input-label-when-disabled: hsl(
233
+ 232,
234
+ 18%,
235
+ 95%
236
+ );
190
237
  --background-color-for-localized-rich-text-body-button-when-active: hsl(
191
238
  195,
192
239
  35.2941176471%,
193
240
  20%
194
241
  );
195
- --background-color-for-localized-rich-text-body-button: hsl(0, 0%, 95%);
196
- --background-color-for-rich-text-dropdown-when-hovered: hsl(0, 0%, 95%);
242
+ --background-color-for-localized-rich-text-body-button: hsl(232, 18%, 95%);
243
+ --background-color-for-rich-text-dropdown-when-hovered: hsl(232, 18%, 95%);
197
244
  --background-color-for-rich-text-more-styles-dropdown-when-hovered: hsl(
198
245
  203.05555555555554,
199
246
  93.9130434783%,
@@ -203,8 +250,8 @@
203
250
  --background-color-for-tooltip: hsl(195, 35.2941176471%, 10%);
204
251
  --background-color-for-view-switcher: #fff;
205
252
  --background-color-for-view-switcher-when-disabled: #fff;
206
- --background-color-for-view-switcher-when-selected: hsl(0, 0%, 95%);
207
- --background-color-for-view-switcher-when-hovered: hsl(0, 0%, 95%);
253
+ --background-color-for-view-switcher-when-selected: hsl(232, 18%, 95%);
254
+ --background-color-for-view-switcher-when-hovered: hsl(232, 18%, 95%);
208
255
  --background-color-for-content-notification-when-error: hsl(
209
256
  339.1304347826087,
210
257
  100%,
@@ -220,31 +267,27 @@
220
267
  89.0196078431%,
221
268
  95%
222
269
  );
223
- --background-color-for-content-notification-when-success: hsl(
224
- 172.9608938547486,
225
- 100%,
226
- 95%
227
- );
228
- --background-color-for-checkbox-input-icon: #00b39e;
229
- --background-color-for-checkbox-input-icon-when-disabled: #ccc;
230
- --background-color-for-checkbox-input-icon-when-readonly: hsl(0, 0%, 60%);
270
+ --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
271
+ --background-color-for-checkbox-input-icon: hsl(175, 55%, 45%);
272
+ --background-color-for-checkbox-input-icon-when-disabled: hsl(232, 18%, 80%);
273
+ --background-color-for-checkbox-input-icon-when-readonly: hsl(232, 18%, 60%);
231
274
  --background-color-for-checkbox-input-icon-when-error: #e60050;
232
- --background-color-for-checkbox-input-icon-when-hovered: hsl(0, 0%, 90%);
233
- --background-color-for-primary-action-dropdown-when-active: hsl(0, 0%, 90%);
234
- --background-color-for-primary-action-dropdown-when-disabled: hsl(0, 0%, 95%);
235
- --background-color-for-toggle-input-track: #ccc;
236
- --background-color-for-toggle-input-track-when-disabled: hsl(0, 0%, 90%);
237
- --background-color-for-toggle-input-thumb-when-disabled: hsl(0, 0%, 60%);
238
- --background-color-for-toggle-input-track-when-checked: hsl(
239
- 172.9608938547486,
240
- 100%,
241
- 40%
275
+ --background-color-for-checkbox-input-icon-when-hovered: hsl(232, 18%, 90%);
276
+ --background-color-for-primary-action-dropdown-when-active: hsl(
277
+ 232,
278
+ 18%,
279
+ 90%
242
280
  );
243
- --background-color-for-toggle-input-thumb-when-checked: hsl(
244
- 172.9608938547486,
245
- 100%,
246
- 25%
281
+ --background-color-for-primary-action-dropdown-when-disabled: hsl(
282
+ 232,
283
+ 18%,
284
+ 95%
247
285
  );
286
+ --background-color-for-toggle-input-track: hsl(232, 18%, 80%);
287
+ --background-color-for-toggle-input-track-when-disabled: hsl(232, 18%, 90%);
288
+ --background-color-for-toggle-input-thumb-when-disabled: hsl(232, 18%, 60%);
289
+ --background-color-for-toggle-input-track-when-checked: hsl(175, 55%, 40%);
290
+ --background-color-for-toggle-input-thumb-when-checked: hsl(175, 55%, 25%);
248
291
  --background-color-for-toggle-input-track-when-checked-and-disabled: hsl(
249
292
  195,
250
293
  35.2941176471%,
@@ -275,40 +318,40 @@
275
318
  --border-for-select-input-tag: 1px solid var(--color-neutral-85);
276
319
  --border-for-radio-input-option: 2px;
277
320
  --border-for-calendar-menu-when-focused: none;
278
- --border-color-for-input: #ccc;
279
- --border-color-for-input-when-focused: #00b39e;
280
- --border-color-for-input-when-disabled: #ccc;
321
+ --border-color-for-input: hsl(232, 18%, 80%);
322
+ --border-color-for-input-when-focused: hsl(175, 55%, 45%);
323
+ --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
281
324
  --border-color-for-input-when-readonly: #fff;
282
325
  --border-color-for-input-when-error: #e60050;
283
326
  --border-color-for-input-when-warning: #f16d0e;
284
- --border-color-for-input-when-hovered: #ccc;
285
- --border-color-for-tag: #ccc;
327
+ --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
328
+ --border-color-for-tag: hsl(232, 18%, 80%);
286
329
  --border-color-for-tag-warning: #f16d0e;
287
- --border-color-for-tag-when-focused: #ccc;
288
- --border-color-for-tag-when-hovered: #ccc;
289
- --border-color-for-button-as-icon: #ccc;
290
- --border-color-for-button-as-icon-as-info: #ccc;
291
- --border-color-for-button-as-icon-as-primary: #ccc;
330
+ --border-color-for-tag-when-focused: hsl(232, 18%, 80%);
331
+ --border-color-for-tag-when-hovered: hsl(232, 18%, 80%);
332
+ --border-color-for-button-as-icon: hsl(232, 18%, 80%);
333
+ --border-color-for-button-as-icon-as-info: hsl(232, 18%, 80%);
334
+ --border-color-for-button-as-icon-as-primary: hsl(232, 18%, 80%);
292
335
  --border-color-for-button-as-icon-when-disabled: #fff;
293
336
  --border-color-for-table-header: #fff;
294
- --border-color-for-table-header-as-bottom: hsl(0, 0%, 90%);
295
- --border-color-for-table-manager-droppable-list: #ccc;
296
- --border-color-for-collapsible-panel-header: hsl(0, 0%, 90%);
337
+ --border-color-for-table-header-as-bottom: hsl(232, 18%, 95%);
338
+ --border-color-for-table-manager-droppable-list: hsl(232, 18%, 80%);
339
+ --border-color-for-collapsible-panel-header: hsl(232, 18%, 90%);
297
340
  --border-color-for-stamp-when-error: hsl(339.1304347826087, 100%, 85%);
298
341
  --border-color-for-stamp-when-warning: hsl(
299
342
  25.110132158590307,
300
343
  89.0196078431%,
301
344
  85%
302
345
  );
303
- --border-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 85%);
346
+ --border-color-for-stamp-as-positive: hsl(175, 70%, 85%);
304
347
  --border-color-for-stamp-as-information: hsl(
305
348
  203.05555555555554,
306
349
  93.9130434783%,
307
350
  85%
308
351
  );
309
- --border-color-for-stamp-as-primary: hsl(172.9608938547486, 100%, 85%);
310
- --border-color-for-stamp-as-secondary: hsl(0, 0%, 85%);
311
- --border-color-for-localized-input-label: #ccc;
352
+ --border-color-for-stamp-as-primary: hsl(175, 70%, 85%);
353
+ --border-color-for-stamp-as-secondary: hsl(232, 18%, 85%);
354
+ --border-color-for-localized-input-label: hsl(232, 18%, 80%);
312
355
  --border-color-for-localized-input-label-when-readonly: #fff;
313
356
  --border-color-for-content-notification-when-error: hsl(
314
357
  339.1304347826087,
@@ -325,25 +368,21 @@
325
368
  89.0196078431%,
326
369
  85%
327
370
  );
328
- --border-color-for-content-notification-when-success: hsl(
329
- 172.9608938547486,
330
- 100%,
331
- 85%
332
- );
333
- --border-color-for-group-heading-select-input-options: hsl(0, 0%, 90%);
371
+ --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
372
+ --border-color-for-group-heading-select-input-options: hsl(232, 18%, 90%);
334
373
  --border-color-for-select-input-menu: #fff;
335
- --border-color-for-select-input-when-readonly: hsl(0, 0%, 95%);
374
+ --border-color-for-select-input-when-readonly: hsl(232, 18%, 95%);
336
375
  --border-color-for-select-input-menu-when-warning: #fff;
337
376
  --border-color-for-select-input-menu-when-error: #fff;
338
- --border-color-for-checkbox-input-icon: #00b39e;
339
- --border-color-for-checkbox-input-icon-when-disabled: #ccc;
340
- --border-color-for-checkbox-input-icon-when-readonly: hsl(0, 0%, 60%);
377
+ --border-color-for-checkbox-input-icon: hsl(175, 55%, 45%);
378
+ --border-color-for-checkbox-input-icon-when-disabled: hsl(232, 18%, 80%);
379
+ --border-color-for-checkbox-input-icon-when-readonly: hsl(232, 18%, 60%);
341
380
  --border-color-for-checkbox-input-icon-when-error: #e60050;
342
- --border-color-for-radio-input: hsl(0, 0%, 60%);
343
- --border-color-for-radio-input-when-disabled: #ccc;
344
- --border-color-for-radio-input-when-readonly: hsl(0, 0%, 60%);
345
- --border-color-for-radio-input-when-checked: #00b39e;
346
- --border-color-for-radio-input-when-focused: hsl(0, 0%, 60%);
381
+ --border-color-for-radio-input: hsl(232, 18%, 60%);
382
+ --border-color-for-radio-input-when-disabled: hsl(232, 18%, 80%);
383
+ --border-color-for-radio-input-when-readonly: hsl(232, 18%, 60%);
384
+ --border-color-for-radio-input-when-checked: hsl(175, 55%, 45%);
385
+ --border-color-for-radio-input-when-focused: hsl(232, 18%, 60%);
347
386
  --border-color-for-primary-action-dropdown-menu: #fff;
348
387
  --border-color-for-button-as-secondary-when-info: hsl(
349
388
  203.05555555555554,
@@ -359,7 +398,8 @@
359
398
  --border-radius-for-tag: 2px;
360
399
  --border-radius-for-card: 4px;
361
400
  --border-radius-for-table-manager-droppable-list: 4px;
362
- --border-radius-for-stamp: 20px;
401
+ --border-radius-for-stamp: 4px;
402
+ --border-radius-for-stamp-as-condensed: 2px;
363
403
  --border-radius-for-view-switcher: 4px;
364
404
  --border-radius-for-content-notification: 4px;
365
405
  --border-radius-for-primary-action-dropdown: var(--border-radius-4) 0 0
@@ -381,55 +421,56 @@
381
421
  --box-shadow-for-view-switcher-when-selected: none;
382
422
  --box-shadow-for-select-input-when-focused: inset 0 0 0 1px;
383
423
  --box-shadow-for-calendar-menu-when-focused: 0 2px 5px 0px rgba(0, 0, 0, 0.15);
424
+ --box-shadow-for-table: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
384
425
  --font-color-for-text: #1a1a1a;
385
- --font-color-for-text-when-disabled: hsl(0, 0%, 60%);
426
+ --font-color-for-text-when-disabled: hsl(232, 18%, 60%);
386
427
  --font-color-for-input: #1a1a1a;
387
- --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
428
+ --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
388
429
  --font-color-for-input-when-error: #e60050;
389
- --font-color-for-input-when-readonly: hsl(0, 0%, 40%);
430
+ --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
390
431
  --font-color-for-input-when-warning: #f16d0e;
391
432
  --font-color-for-tag: #1a1a1a;
392
- --font-color-for-tag-remove-icon: hsl(0, 0%, 40%);
393
- --font-color-for-tag-drag-icon: hsl(0, 0%, 40%);
433
+ --font-color-for-tag-remove-icon: hsl(232, 18%, 40%);
434
+ --font-color-for-tag-drag-icon: hsl(232, 18%, 40%);
394
435
  --font-color-for-tag-remove-icon-when-hovered: #e60050;
395
- --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
436
+ --font-color-for-tag-when-disabled: hsl(232, 18%, 60%);
396
437
  --font-color-for-text-when-inverted: #fff;
397
438
  --font-color-for-link-as-inverted: #fff;
398
- --font-color-for-link-as-primary: hsl(172.9608938547486, 100%, 25%);
439
+ --font-color-for-link-as-primary: hsl(175, 55%, 25%);
399
440
  --font-color-for-link-as-secondary: #1a1a1a;
400
- --font-color-for-link-as-primary-when-active: #00b39e;
401
- --font-color-for-link-as-secondary-when-active: #00b39e;
402
- --font-color-for-table-header: #1a1a1a;
403
- --font-color-for-localized-input-label: hsl(0, 0%, 60%);
404
- --font-color-for-view-switcher: hsl(0, 0%, 40%);
405
- --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%);
441
+ --font-color-for-link-as-primary-when-active: hsl(175, 55%, 45%);
442
+ --font-color-for-link-as-secondary-when-active: hsl(175, 55%, 45%);
443
+ --font-color-for-table-header: hsl(232, 18%, 40%);
444
+ --font-color-for-localized-input-label: hsl(232, 18%, 60%);
445
+ --font-color-for-view-switcher: hsl(232, 18%, 40%);
446
+ --font-color-for-view-switcher-when-disabled: hsl(232, 18%, 60%);
406
447
  --font-color-for-view-switcher-when-selected: #1a1a1a;
407
- --font-color-for-clear-input-icon: hsl(0, 0%, 40%);
448
+ --font-color-for-clear-input-icon: hsl(232, 18%, 40%);
408
449
  --font-color-for-clear-input-icon-when-hovered: #e60050;
409
450
  --font-color-for-content-notification: #1a1a1a;
410
451
  --font-color-for-content-notification-icon-when-error: #e60050;
411
452
  --font-color-for-content-notification-icon-when-warning: #f16d0e;
412
- --font-color-for-content-notification-icon-when-success: #00b39e;
453
+ --font-color-for-content-notification-icon-when-success: hsl(175, 55%, 45%);
413
454
  --font-color-for-content-notification-icon-when-info: #078cdf;
414
- --font-color-for-search-input-icon: hsl(0, 0%, 60%);
415
- --font-color-for-search-input-icon-when-hovered: #00b39e;
416
- --font-color-for-select-input-icon: hsl(0, 0%, 60%);
455
+ --font-color-for-search-input-icon: hsl(232, 18%, 60%);
456
+ --font-color-for-search-input-icon-when-hovered: hsl(175, 55%, 45%);
457
+ --font-color-for-select-input-icon: hsl(232, 18%, 60%);
417
458
  --font-color-for-select-input-when-error: #e60050;
418
459
  --font-color-for-select-input-when-warning: #f16d0e;
419
460
  --font-color-for-select-input-icon-when-error: #e60050;
420
461
  --font-color-for-select-input-icon-when-warning: #f16d0e;
421
- --font-color-for-money-input-currency-dropdown-indicator: hsl(0, 0%, 40%);
422
- --font-color-for-search-input-icon-when-readonly: hsl(0, 0%, 60%);
462
+ --font-color-for-money-input-currency-dropdown-indicator: hsl(232, 18%, 40%);
463
+ --font-color-for-search-input-icon-when-readonly: hsl(232, 18%, 60%);
423
464
  --font-color-for-checkbox-input-label: #1a1a1a;
424
465
  --font-color-for-checkbox-input-label-when-error: #e60050;
425
- --font-color-for-checkbox-input-label-when-disabled: hsl(0, 0%, 60%);
426
- --font-color-for-checkbox-input-label-when-readonly: hsl(0, 0%, 40%);
427
- --font-color-for-radio-input-when-disabled: hsl(0, 0%, 60%);
466
+ --font-color-for-checkbox-input-label-when-disabled: hsl(232, 18%, 60%);
467
+ --font-color-for-checkbox-input-label-when-readonly: hsl(232, 18%, 40%);
468
+ --font-color-for-radio-input-when-disabled: hsl(232, 18%, 60%);
428
469
  --font-color-for-radio-input-when-error: #e60050;
429
- --font-color-for-radio-input-when-readonly: hsl(0, 0%, 60%);
470
+ --font-color-for-radio-input-when-readonly: hsl(232, 18%, 60%);
430
471
  --font-color-for-radio-input-when-warning: #f16d0e;
431
- --font-color-for-flat-button-as-primary: hsl(172.9608938547486, 100%, 25%);
432
- --font-color-for-flat-button-as-primary-when-hovered: #00b39e;
472
+ --font-color-for-flat-button-as-primary: hsl(175, 55%, 25%);
473
+ --font-color-for-flat-button-as-primary-when-hovered: hsl(175, 55%, 45%);
433
474
  --font-color-for-flat-button-as-critical: #e60050;
434
475
  --font-color-for-flat-button-as-critical-when-hovered: hsl(
435
476
  339.1304347826087,
@@ -438,13 +479,13 @@
438
479
  );
439
480
  --font-color-for-flat-button-as-secondary: #1a1a1a;
440
481
  --font-color-for-flat-button-as-inverted: #fff;
441
- --font-color-for-flat-button-icon-when-disabled: hsl(0, 0%, 60%);
442
- --font-color-for-secondary-icon-button-as-primary: hsl(
443
- 172.9608938547486,
444
- 100%,
445
- 25%
482
+ --font-color-for-flat-button-icon-when-disabled: hsl(232, 18%, 60%);
483
+ --font-color-for-secondary-icon-button-as-primary: hsl(175, 55%, 25%);
484
+ --font-color-for-secondary-icon-button-as-primary-when-hovered: hsl(
485
+ 175,
486
+ 55%,
487
+ 45%
446
488
  );
447
- --font-color-for-secondary-icon-button-as-primary-when-hovered: #00b39e;
448
489
  --height-for-button-as-big: 40px;
449
490
  --height-for-button-as-medium: 32px;
450
491
  --height-for-button-as-icon-as-big: 40px;
@@ -459,7 +500,7 @@
459
500
  --height-for-primary-action-dropdown: 40px;
460
501
  --width-for-avatar-as-medium: 40px;
461
502
  --min-width-for-money-input-currency-dropdown: 80px;
462
- --placeholder-font-color-for-input: hsl(0, 0%, 60%);
503
+ --placeholder-font-color-for-input: hsl(232, 18%, 60%);
463
504
  --font-size-for-button: 0.875rem;
464
505
  --font-size-for-input: 1rem;
465
506
  --font-size-for-text-as-h1: 1.5rem;
@@ -468,19 +509,16 @@
468
509
  --font-size-for-text-as-h4: 1rem;
469
510
  --font-size-for-text-as-h5: 1rem;
470
511
  --font-size-for-text-as-body: 1rem;
512
+ --font-size-for-text-as-caption: 0.75rem;
471
513
  --font-size-for-text-as-detail: 0.875rem;
472
514
  --font-size-for-body: 16px;
473
515
  --font-size-for-link: 1rem;
474
- --font-size-for-stamp: 0.875rem;
475
516
  --font-size-for-view-switcher: 0.875rem;
476
517
  --font-size-for-table: 0.875rem;
477
- --font-size-for-avatar-as-small: 0.875rem;
478
- --font-size-for-avatar-as-medium: 1rem;
479
- --font-size-for-avatar-as-big: 2.5rem;
480
518
  --font-size-for-localized-input-label: 1rem;
481
519
  --font-size-for-content-notification: 1rem;
482
520
  --font-size-for-select-input-tag: 1rem;
483
- --icon-color-for-datetime-input-icon: hsl(0, 0%, 40%);
521
+ --icon-color-for-datetime-input-icon: hsl(232, 18%, 40%);
484
522
  --icon-color-for-datetime-input-icon-when-hovered: #e60050;
485
523
  --line-height-for-text-as-h1: 2.125rem;
486
524
  --line-height-for-text-as-h2: 1.75rem;
@@ -488,6 +526,7 @@
488
526
  --line-height-for-text-as-h4: 1.375rem;
489
527
  --line-height-for-text-as-h5: 1.375rem;
490
528
  --line-height-for-text-as-body: 1.625rem;
529
+ --line-height-for-text-as-caption: 1.125rem;
491
530
  --line-height-for-text-as-detail: 1.375rem;
492
531
  --line-height-for-select-input-options: 1.625rem;
493
532
  --line-height-for-table-header: 26px;
@@ -497,9 +536,10 @@
497
536
  --font-weight-for-text-as-h4: 500;
498
537
  --font-weight-for-text-as-h5: 500;
499
538
  --font-weight-for-text-as-body: 400;
539
+ --font-weight-for-text-as-caption: 400;
500
540
  --font-weight-for-text-as-detail: 400;
501
541
  --font-weight-for-button: 500;
502
- --font-weight-for-table-header: 600;
542
+ --font-weight-for-table-header: 500;
503
543
  --font-weight-for-text-as-bold: 600;
504
544
  --margin-for-table-header: 8px;
505
545
  --margin-for-table-cell-as-condensed: 8px;
@@ -518,7 +558,7 @@
518
558
  --margin-for-rich-text-dropdown-item-label: 0 0 0 var(--spacing-20);
519
559
  --margin-for-tag-list: 0 var(--spacing-20) var(--spacing-20) 0;
520
560
  --padding-for-stamp: 4px 12px;
521
- --padding-for-stamp-as-condensed: 0 var(--spacing-20);
561
+ --padding-for-stamp-as-condensed: var(--spacing-05) var(--spacing-10);
522
562
  --padding-for-tag: 2px 12px;
523
563
  --padding-for-table-header: 24px;
524
564
  --padding-for-table-header-as-condensed: 24px;