@commercetools-frontend/ui-kit 16.7.5 → 16.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 +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/materials/custom-properties.json CHANGED
@@ -1,29 +1,59 @@
1
1
  {
2
- "--color-primary": "#00b39e",
3
- "--color-primary-20": "hsl(172.9608938547486, 100%, 20%)",
4
- "--color-primary-25": "hsl(172.9608938547486, 100%, 25%)",
5
- "--color-primary-30": "hsl(172.9608938547486, 100%, 30%)",
6
- "--color-primary-40": "hsl(172.9608938547486, 100%, 40%)",
7
- "--color-primary-85": "hsl(172.9608938547486, 100%, 85%)",
8
- "--color-primary-95": "hsl(172.9608938547486, 100%, 95%)",
2
+ "--color-primary": "hsl(175, 55%, 45%)",
3
+ "--color-primary-20": "hsl(175, 55%, 20%)",
4
+ "--color-primary-25": "hsl(175, 55%, 25%)",
5
+ "--color-primary-30": "hsl(175, 55%, 30%)",
6
+ "--color-primary-40": "hsl(175, 55%, 40%)",
7
+ "--color-primary-85": "hsl(175, 70%, 85%)",
8
+ "--color-primary-90": "hsl(175, 70%, 90%)",
9
+ "--color-primary-95": "hsl(175, 90%, 95%)",
9
10
  "--color-accent": "#213c45",
10
11
  "--color-accent-10": "hsl(195, 35.2941176471%, 10%)",
11
12
  "--color-accent-20": "hsl(195, 35.2941176471%, 20%)",
12
13
  "--color-accent-30": "hsl(195, 35.2941176471%, 30%)",
13
14
  "--color-accent-40": "hsl(195, 35.2941176471%, 40%)",
15
+ "--color-accent-50": "hsl(195, 35%, 50%)",
14
16
  "--color-accent-60": "hsl(195, 35.2941176471%, 60%)",
17
+ "--color-accent-85": "hsl(195, 35%, 85%)",
15
18
  "--color-accent-90": "hsl(195, 35.2941176471%, 90%)",
16
19
  "--color-accent-95": "hsl(195, 35.2941176471%, 95%)",
17
20
  "--color-accent-98": "hsl(195, 35.2941176471%, 98%)",
18
- "--color-neutral": "#ccc",
21
+ "--color-brown-10": "hsl(35, 90%, 10%)",
22
+ "--color-brown-20": "hsl(35, 50%, 20%)",
23
+ "--color-brown-35": "hsl(35, 25%, 35%)",
24
+ "--color-brown-50": "hsl(35, 30%, 50%)",
25
+ "--color-brown-70": "hsl(35, 40%, 70%)",
26
+ "--color-brown-85": "hsl(35, 60%, 85%)",
27
+ "--color-brown-90": "hsl(35, 90%, 90%)",
28
+ "--color-brown-95": "hsl(35, 80%, 95%)",
29
+ "--color-brown-98": "hsl(35, 90%, 98%)",
30
+ "--color-purple-10": "hsl(248, 90%, 10%)",
31
+ "--color-purple-20": "hsl(248, 50%, 20%)",
32
+ "--color-purple-35": "hsl(248, 25%, 35%)",
33
+ "--color-purple-50": "hsl(248, 30%,50%)",
34
+ "--color-purple-70": "hsl(248, 40%, 70%)",
35
+ "--color-purple-85": "hsl(248, 60%, 85%)",
36
+ "--color-purple-90": "hsl(248, 50%, 90%)",
37
+ "--color-purple-95": "hsl(248, 80%, 95%)",
38
+ "--color-purple-98": "hsl(248, 90%, 98%)",
39
+ "--color-turquoise-10": "hsl(180, 90%, 10%)",
40
+ "--color-turquoise-20": "hsl(180, 50%, 20%)",
41
+ "--color-turquoise-35": "hsl(180, 25%, 35%)",
42
+ "--color-turquoise-50": "hsl(180, 30%, 45%)",
43
+ "--color-turquoise-70": "hsl(180, 40%, 70%)",
44
+ "--color-turquoise-85": "hsl(180, 60%, 85%)",
45
+ "--color-turquoise-90": "hsl(180, 40%, 90%)",
46
+ "--color-turquoise-95": "hsl(180, 80%, 95%)",
47
+ "--color-turquoise-98": "hsl(180, 90%, 98%)",
48
+ "--color-neutral": "hsl(232, 18%, 80%)",
19
49
  "--color-neutral-05": "hsl(0deg 0% 80% / 5%)",
20
50
  "--color-neutral-10": "hsl(0deg 0% 80% / 10%)",
21
- "--color-neutral-40": "hsl(0, 0%, 40%)",
22
- "--color-neutral-60": "hsl(0, 0%, 60%)",
23
- "--color-neutral-85": "hsl(0, 0%, 85%)",
24
- "--color-neutral-90": "hsl(0, 0%, 90%)",
25
- "--color-neutral-95": "hsl(0, 0%, 95%)",
26
- "--color-neutral-98": "hsl(0, 0%, 98%)",
51
+ "--color-neutral-40": "hsl(232, 18%, 40%)",
52
+ "--color-neutral-60": "hsl(232, 18%, 60%)",
53
+ "--color-neutral-85": "hsl(232, 18%, 85%)",
54
+ "--color-neutral-90": "hsl(232, 18%, 90%)",
55
+ "--color-neutral-95": "hsl(232, 18%, 95%)",
56
+ "--color-neutral-98": "hsl(232, 18%, 98%)",
27
57
  "--color-info": "#078cdf",
28
58
  "--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
29
59
  "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
@@ -53,6 +83,7 @@
53
83
  "--border-width-2": "2px",
54
84
  "--font-family": "'Inter', system-ui",
55
85
  "--font-size-10": "0.75rem",
86
+ "--font-size-12": "0.8rem",
56
87
  "--font-size-20": "0.875rem",
57
88
  "--font-size-30": "1rem",
58
89
  "--font-size-40": "1.125rem",
@@ -60,6 +91,7 @@
60
91
  "--font-size-60": "1.5rem",
61
92
  "--font-size-70": "2rem",
62
93
  "--font-size-80": "2.5rem",
94
+ "--font-size-90": "3rem",
63
95
  "--font-size-15": "0.9231rem",
64
96
  "--font-size-35": "1.0769rem",
65
97
  "--font-size-45": "1.2308rem",
@@ -72,7 +104,9 @@
72
104
  "--font-weight-500": "500",
73
105
  "--font-weight-600": "600",
74
106
  "--font-weight-700": "700",
107
+ "--line-height-05": "1.125rem",
75
108
  "--line-height-10": "1.25rem",
109
+ "--line-height-18": "1.3rem",
76
110
  "--line-height-20": "1.375rem",
77
111
  "--line-height-30": "1.5rem",
78
112
  "--line-height-40": "1.625rem",
@@ -95,6 +129,7 @@
95
129
  "--shadow-14": "0 0 0.5px rgba(0, 0, 0, 0.1)",
96
130
  "--shadow-15": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)",
97
131
  "--shadow-16": "0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)",
132
+ "--shadow-17": "0 1px 5px 0 rgba(0, 0, 0, 0.05)",
98
133
  "--constraint-scale": "100%",
99
134
  "--constraint-1": "42px",
100
135
  "--constraint-2": "84px",
@@ -117,6 +152,7 @@
117
152
  "--spacing-m": "16px",
118
153
  "--spacing-l": "24px",
119
154
  "--spacing-xl": "32px",
155
+ "--spacing-05": "2px",
120
156
  "--spacing-10": "4px",
121
157
  "--spacing-20": "8px",
122
158
  "--spacing-25": "12px",
@@ -139,7 +175,7 @@
139
175
  "--background-color-for-button-as-primary-when-active": "#15A390",
140
176
  "--background-color-for-button-as-primary-when-hovered": "#17AB97",
141
177
  "--background-color-for-button-as-icon-as-primary-when-active": "#15A390",
142
- "--background-color-for-button-as-icon-as-primary-when-hovered": "#00b39e",
178
+ "--background-color-for-button-as-icon-as-primary-when-hovered": "hsl(175, 55%, 45%)",
143
179
  "--background-color-for-button-as-icon-as-info-when-active": "#057FCC",
144
180
  "--background-color-for-button-as-icon-as-info-when-hovered": "#078cdf",
145
181
  "--background-color-for-button-as-urgent-when-active": "#DC630A",
@@ -149,50 +185,49 @@
149
185
  "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
150
186
  "--background-color-for-input": "#fff",
151
187
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
152
- "--background-color-for-input-when-disabled": "hsl(0, 0%, 95%)",
153
- "--background-color-for-input-when-hovered": "hsl(0, 0%, 98%)",
188
+ "--background-color-for-input-when-disabled": "hsl(232, 18%, 95%)",
189
+ "--background-color-for-input-when-hovered": "hsl(232, 18%, 98%)",
154
190
  "--background-color-for-input-when-focused": "#fff",
155
- "--background-color-for-input-when-readonly": "hsl(0, 0%, 95%)",
191
+ "--background-color-for-input-when-readonly": "hsl(232, 18%, 95%)",
156
192
  "--background-color-for-input-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)",
157
- "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 98%)",
158
- "--background-color-for-table-header": "hsl(0, 0%, 95%)",
159
- "--background-color-for-tag": "hsl(0, 0%, 95%)",
193
+ "--background-color-for-table-cell-when-hovered": "hsl(232, 18%, 98%)",
194
+ "--background-color-for-table-header": "hsl(232, 18%, 98%)",
195
+ "--background-color-for-tag": "hsl(232, 18%, 95%)",
160
196
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
161
- "--background-color-for-tag-when-hovered": "hsl(0, 0%, 90%)",
197
+ "--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)",
162
198
  "--background-color-for-collapsible-panel-header-icon-when-disabled": "#fff",
163
- "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 98%)",
164
- "--background-color-for-avatar": "#213c45",
165
- "--background-color-for-avatar-when-highlighted": "hsl(195, 35.2941176471%, 30%)",
166
- "--background-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 95%)",
199
+ "--background-color-for-select-input-option-when-hovered": "hsl(232, 18%, 98%)",
200
+ "--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)",
201
+ "--background-color-for-stamp-as-primary": "hsl(175, 70%, 90%)",
167
202
  "--background-color-for-localized-input-label": "#fff",
168
- "--background-color-for-localized-input-label-when-readonly": "hsl(0, 0%, 95%)",
169
- "--background-color-for-localized-input-label-when-disabled": "hsl(0, 0%, 95%)",
203
+ "--background-color-for-localized-input-label-when-readonly": "hsl(232, 18%, 95%)",
204
+ "--background-color-for-localized-input-label-when-disabled": "hsl(232, 18%, 95%)",
170
205
  "--background-color-for-localized-rich-text-body-button-when-active": "hsl(195, 35.2941176471%, 20%)",
171
- "--background-color-for-localized-rich-text-body-button": "hsl(0, 0%, 95%)",
172
- "--background-color-for-rich-text-dropdown-when-hovered": "hsl(0, 0%, 95%)",
206
+ "--background-color-for-localized-rich-text-body-button": "hsl(232, 18%, 95%)",
207
+ "--background-color-for-rich-text-dropdown-when-hovered": "hsl(232, 18%, 95%)",
173
208
  "--background-color-for-rich-text-more-styles-dropdown-when-hovered": "hsl(203.05555555555554, 93.9130434783%, 95%)",
174
209
  "--background-color-for-rich-text-button": "hsl(195, 35.2941176471%, 20%)",
175
210
  "--background-color-for-tooltip": "hsl(195, 35.2941176471%, 10%)",
176
211
  "--background-color-for-view-switcher": "#fff",
177
212
  "--background-color-for-view-switcher-when-disabled": "#fff",
178
- "--background-color-for-view-switcher-when-selected": "hsl(0, 0%, 95%)",
179
- "--background-color-for-view-switcher-when-hovered": "hsl(0, 0%, 95%)",
213
+ "--background-color-for-view-switcher-when-selected": "hsl(232, 18%, 95%)",
214
+ "--background-color-for-view-switcher-when-hovered": "hsl(232, 18%, 95%)",
180
215
  "--background-color-for-content-notification-when-error": "hsl(339.1304347826087, 100%, 95%)",
181
216
  "--background-color-for-content-notification-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)",
182
217
  "--background-color-for-content-notification-when-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
183
- "--background-color-for-content-notification-when-success": "hsl(172.9608938547486, 100%, 95%)",
184
- "--background-color-for-checkbox-input-icon": "#00b39e",
185
- "--background-color-for-checkbox-input-icon-when-disabled": "#ccc",
186
- "--background-color-for-checkbox-input-icon-when-readonly": "hsl(0, 0%, 60%)",
218
+ "--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)",
219
+ "--background-color-for-checkbox-input-icon": "hsl(175, 55%, 45%)",
220
+ "--background-color-for-checkbox-input-icon-when-disabled": "hsl(232, 18%, 80%)",
221
+ "--background-color-for-checkbox-input-icon-when-readonly": "hsl(232, 18%, 60%)",
187
222
  "--background-color-for-checkbox-input-icon-when-error": "#e60050",
188
- "--background-color-for-checkbox-input-icon-when-hovered": "hsl(0, 0%, 90%)",
189
- "--background-color-for-primary-action-dropdown-when-active": "hsl(0, 0%, 90%)",
190
- "--background-color-for-primary-action-dropdown-when-disabled": "hsl(0, 0%, 95%)",
191
- "--background-color-for-toggle-input-track": "#ccc",
192
- "--background-color-for-toggle-input-track-when-disabled": "hsl(0, 0%, 90%)",
193
- "--background-color-for-toggle-input-thumb-when-disabled": "hsl(0, 0%, 60%)",
194
- "--background-color-for-toggle-input-track-when-checked": "hsl(172.9608938547486, 100%, 40%)",
195
- "--background-color-for-toggle-input-thumb-when-checked": "hsl(172.9608938547486, 100%, 25%)",
223
+ "--background-color-for-checkbox-input-icon-when-hovered": "hsl(232, 18%, 90%)",
224
+ "--background-color-for-primary-action-dropdown-when-active": "hsl(232, 18%, 90%)",
225
+ "--background-color-for-primary-action-dropdown-when-disabled": "hsl(232, 18%, 95%)",
226
+ "--background-color-for-toggle-input-track": "hsl(232, 18%, 80%)",
227
+ "--background-color-for-toggle-input-track-when-disabled": "hsl(232, 18%, 90%)",
228
+ "--background-color-for-toggle-input-thumb-when-disabled": "hsl(232, 18%, 60%)",
229
+ "--background-color-for-toggle-input-track-when-checked": "hsl(175, 55%, 40%)",
230
+ "--background-color-for-toggle-input-thumb-when-checked": "hsl(175, 55%, 25%)",
196
231
  "--background-color-for-toggle-input-track-when-checked-and-disabled": "hsl(195, 35.2941176471%, 90%)",
197
232
  "--background-color-for-toggle-input-thumb-when-checked-and-disabled": "hsl(195, 35.2941176471%, 60%)",
198
233
  "--background-color-for-button-as-secondary-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)",
@@ -207,51 +242,51 @@
207
242
  "--border-for-select-input-tag": "1px solid var(--color-neutral-85)",
208
243
  "--border-for-radio-input-option": "2px",
209
244
  "--border-for-calendar-menu-when-focused": "none",
210
- "--border-color-for-input": "#ccc",
211
- "--border-color-for-input-when-focused": "#00b39e",
212
- "--border-color-for-input-when-disabled": "#ccc",
245
+ "--border-color-for-input": "hsl(232, 18%, 80%)",
246
+ "--border-color-for-input-when-focused": "hsl(175, 55%, 45%)",
247
+ "--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)",
213
248
  "--border-color-for-input-when-readonly": "#fff",
214
249
  "--border-color-for-input-when-error": "#e60050",
215
250
  "--border-color-for-input-when-warning": "#f16d0e",
216
- "--border-color-for-input-when-hovered": "#ccc",
217
- "--border-color-for-tag": "#ccc",
251
+ "--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)",
252
+ "--border-color-for-tag": "hsl(232, 18%, 80%)",
218
253
  "--border-color-for-tag-warning": "#f16d0e",
219
- "--border-color-for-tag-when-focused": "#ccc",
220
- "--border-color-for-tag-when-hovered": "#ccc",
221
- "--border-color-for-button-as-icon": "#ccc",
222
- "--border-color-for-button-as-icon-as-info": "#ccc",
223
- "--border-color-for-button-as-icon-as-primary": "#ccc",
254
+ "--border-color-for-tag-when-focused": "hsl(232, 18%, 80%)",
255
+ "--border-color-for-tag-when-hovered": "hsl(232, 18%, 80%)",
256
+ "--border-color-for-button-as-icon": "hsl(232, 18%, 80%)",
257
+ "--border-color-for-button-as-icon-as-info": "hsl(232, 18%, 80%)",
258
+ "--border-color-for-button-as-icon-as-primary": "hsl(232, 18%, 80%)",
224
259
  "--border-color-for-button-as-icon-when-disabled": "#fff",
225
260
  "--border-color-for-table-header": "#fff",
226
- "--border-color-for-table-header-as-bottom": "hsl(0, 0%, 90%)",
227
- "--border-color-for-table-manager-droppable-list": "#ccc",
228
- "--border-color-for-collapsible-panel-header": "hsl(0, 0%, 90%)",
261
+ "--border-color-for-table-header-as-bottom": "hsl(232, 18%, 95%)",
262
+ "--border-color-for-table-manager-droppable-list": "hsl(232, 18%, 80%)",
263
+ "--border-color-for-collapsible-panel-header": "hsl(232, 18%, 90%)",
229
264
  "--border-color-for-stamp-when-error": "hsl(339.1304347826087, 100%, 85%)",
230
265
  "--border-color-for-stamp-when-warning": "hsl(25.110132158590307, 89.0196078431%, 85%)",
231
- "--border-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 85%)",
266
+ "--border-color-for-stamp-as-positive": "hsl(175, 70%, 85%)",
232
267
  "--border-color-for-stamp-as-information": "hsl(203.05555555555554, 93.9130434783%, 85%)",
233
- "--border-color-for-stamp-as-primary": "hsl(172.9608938547486, 100%, 85%)",
234
- "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 85%)",
235
- "--border-color-for-localized-input-label": "#ccc",
268
+ "--border-color-for-stamp-as-primary": "hsl(175, 70%, 85%)",
269
+ "--border-color-for-stamp-as-secondary": "hsl(232, 18%, 85%)",
270
+ "--border-color-for-localized-input-label": "hsl(232, 18%, 80%)",
236
271
  "--border-color-for-localized-input-label-when-readonly": "#fff",
237
272
  "--border-color-for-content-notification-when-error": "hsl(339.1304347826087, 100%, 85%)",
238
273
  "--border-color-for-content-notification-when-info": "hsl(203.05555555555554, 93.9130434783%, 85%)",
239
274
  "--border-color-for-content-notification-when-warning": "hsl(25.110132158590307, 89.0196078431%, 85%)",
240
- "--border-color-for-content-notification-when-success": "hsl(172.9608938547486, 100%, 85%)",
241
- "--border-color-for-group-heading-select-input-options": "hsl(0, 0%, 90%)",
275
+ "--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)",
276
+ "--border-color-for-group-heading-select-input-options": "hsl(232, 18%, 90%)",
242
277
  "--border-color-for-select-input-menu": "#fff",
243
- "--border-color-for-select-input-when-readonly": "hsl(0, 0%, 95%)",
278
+ "--border-color-for-select-input-when-readonly": "hsl(232, 18%, 95%)",
244
279
  "--border-color-for-select-input-menu-when-warning": "#fff",
245
280
  "--border-color-for-select-input-menu-when-error": "#fff",
246
- "--border-color-for-checkbox-input-icon": "#00b39e",
247
- "--border-color-for-checkbox-input-icon-when-disabled": "#ccc",
248
- "--border-color-for-checkbox-input-icon-when-readonly": "hsl(0, 0%, 60%)",
281
+ "--border-color-for-checkbox-input-icon": "hsl(175, 55%, 45%)",
282
+ "--border-color-for-checkbox-input-icon-when-disabled": "hsl(232, 18%, 80%)",
283
+ "--border-color-for-checkbox-input-icon-when-readonly": "hsl(232, 18%, 60%)",
249
284
  "--border-color-for-checkbox-input-icon-when-error": "#e60050",
250
- "--border-color-for-radio-input": "hsl(0, 0%, 60%)",
251
- "--border-color-for-radio-input-when-disabled": "#ccc",
252
- "--border-color-for-radio-input-when-readonly": "hsl(0, 0%, 60%)",
253
- "--border-color-for-radio-input-when-checked": "#00b39e",
254
- "--border-color-for-radio-input-when-focused": "hsl(0, 0%, 60%)",
285
+ "--border-color-for-radio-input": "hsl(232, 18%, 60%)",
286
+ "--border-color-for-radio-input-when-disabled": "hsl(232, 18%, 80%)",
287
+ "--border-color-for-radio-input-when-readonly": "hsl(232, 18%, 60%)",
288
+ "--border-color-for-radio-input-when-checked": "hsl(175, 55%, 45%)",
289
+ "--border-color-for-radio-input-when-focused": "hsl(232, 18%, 60%)",
255
290
  "--border-color-for-primary-action-dropdown-menu": "#fff",
256
291
  "--border-color-for-button-as-secondary-when-info": "hsl(203.05555555555554, 93.9130434783%, 85%)",
257
292
  "--border-radius-for-button-as-big": "4px",
@@ -263,7 +298,8 @@
263
298
  "--border-radius-for-tag": "2px",
264
299
  "--border-radius-for-card": "4px",
265
300
  "--border-radius-for-table-manager-droppable-list": "4px",
266
- "--border-radius-for-stamp": "20px",
301
+ "--border-radius-for-stamp": "4px",
302
+ "--border-radius-for-stamp-as-condensed": "2px",
267
303
  "--border-radius-for-view-switcher": "4px",
268
304
  "--border-radius-for-content-notification": "4px",
269
305
  "--border-radius-for-primary-action-dropdown": "var(--border-radius-4) 0 0 var(--border-radius-4)",
@@ -283,62 +319,63 @@
283
319
  "--box-shadow-for-view-switcher-when-selected": "none",
284
320
  "--box-shadow-for-select-input-when-focused": "inset 0 0 0 1px",
285
321
  "--box-shadow-for-calendar-menu-when-focused": "0 2px 5px 0px rgba(0, 0, 0, 0.15)",
322
+ "--box-shadow-for-table": "0 1px 5px 0 rgba(0, 0, 0, 0.05)",
286
323
  "--font-color-for-text": "#1a1a1a",
287
- "--font-color-for-text-when-disabled": "hsl(0, 0%, 60%)",
324
+ "--font-color-for-text-when-disabled": "hsl(232, 18%, 60%)",
288
325
  "--font-color-for-input": "#1a1a1a",
289
- "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
326
+ "--font-color-for-input-when-disabled": "hsl(232, 18%, 60%)",
290
327
  "--font-color-for-input-when-error": "#e60050",
291
- "--font-color-for-input-when-readonly": "hsl(0, 0%, 40%)",
328
+ "--font-color-for-input-when-readonly": "hsl(232, 18%, 40%)",
292
329
  "--font-color-for-input-when-warning": "#f16d0e",
293
330
  "--font-color-for-tag": "#1a1a1a",
294
- "--font-color-for-tag-remove-icon": "hsl(0, 0%, 40%)",
295
- "--font-color-for-tag-drag-icon": "hsl(0, 0%, 40%)",
331
+ "--font-color-for-tag-remove-icon": "hsl(232, 18%, 40%)",
332
+ "--font-color-for-tag-drag-icon": "hsl(232, 18%, 40%)",
296
333
  "--font-color-for-tag-remove-icon-when-hovered": "#e60050",
297
- "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
334
+ "--font-color-for-tag-when-disabled": "hsl(232, 18%, 60%)",
298
335
  "--font-color-for-text-when-inverted": "#fff",
299
336
  "--font-color-for-link-as-inverted": "#fff",
300
- "--font-color-for-link-as-primary": "hsl(172.9608938547486, 100%, 25%)",
337
+ "--font-color-for-link-as-primary": "hsl(175, 55%, 25%)",
301
338
  "--font-color-for-link-as-secondary": "#1a1a1a",
302
- "--font-color-for-link-as-primary-when-active": "#00b39e",
303
- "--font-color-for-link-as-secondary-when-active": "#00b39e",
304
- "--font-color-for-table-header": "#1a1a1a",
305
- "--font-color-for-localized-input-label": "hsl(0, 0%, 60%)",
306
- "--font-color-for-view-switcher": "hsl(0, 0%, 40%)",
307
- "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)",
339
+ "--font-color-for-link-as-primary-when-active": "hsl(175, 55%, 45%)",
340
+ "--font-color-for-link-as-secondary-when-active": "hsl(175, 55%, 45%)",
341
+ "--font-color-for-table-header": "hsl(232, 18%, 40%)",
342
+ "--font-color-for-localized-input-label": "hsl(232, 18%, 60%)",
343
+ "--font-color-for-view-switcher": "hsl(232, 18%, 40%)",
344
+ "--font-color-for-view-switcher-when-disabled": "hsl(232, 18%, 60%)",
308
345
  "--font-color-for-view-switcher-when-selected": "#1a1a1a",
309
- "--font-color-for-clear-input-icon": "hsl(0, 0%, 40%)",
346
+ "--font-color-for-clear-input-icon": "hsl(232, 18%, 40%)",
310
347
  "--font-color-for-clear-input-icon-when-hovered": "#e60050",
311
348
  "--font-color-for-content-notification": "#1a1a1a",
312
349
  "--font-color-for-content-notification-icon-when-error": "#e60050",
313
350
  "--font-color-for-content-notification-icon-when-warning": "#f16d0e",
314
- "--font-color-for-content-notification-icon-when-success": "#00b39e",
351
+ "--font-color-for-content-notification-icon-when-success": "hsl(175, 55%, 45%)",
315
352
  "--font-color-for-content-notification-icon-when-info": "#078cdf",
316
- "--font-color-for-search-input-icon": "hsl(0, 0%, 60%)",
317
- "--font-color-for-search-input-icon-when-hovered": "#00b39e",
318
- "--font-color-for-select-input-icon": "hsl(0, 0%, 60%)",
353
+ "--font-color-for-search-input-icon": "hsl(232, 18%, 60%)",
354
+ "--font-color-for-search-input-icon-when-hovered": "hsl(175, 55%, 45%)",
355
+ "--font-color-for-select-input-icon": "hsl(232, 18%, 60%)",
319
356
  "--font-color-for-select-input-when-error": "#e60050",
320
357
  "--font-color-for-select-input-when-warning": "#f16d0e",
321
358
  "--font-color-for-select-input-icon-when-error": "#e60050",
322
359
  "--font-color-for-select-input-icon-when-warning": "#f16d0e",
323
- "--font-color-for-money-input-currency-dropdown-indicator": "hsl(0, 0%, 40%)",
324
- "--font-color-for-search-input-icon-when-readonly": "hsl(0, 0%, 60%)",
360
+ "--font-color-for-money-input-currency-dropdown-indicator": "hsl(232, 18%, 40%)",
361
+ "--font-color-for-search-input-icon-when-readonly": "hsl(232, 18%, 60%)",
325
362
  "--font-color-for-checkbox-input-label": "#1a1a1a",
326
363
  "--font-color-for-checkbox-input-label-when-error": "#e60050",
327
- "--font-color-for-checkbox-input-label-when-disabled": "hsl(0, 0%, 60%)",
328
- "--font-color-for-checkbox-input-label-when-readonly": "hsl(0, 0%, 40%)",
329
- "--font-color-for-radio-input-when-disabled": "hsl(0, 0%, 60%)",
364
+ "--font-color-for-checkbox-input-label-when-disabled": "hsl(232, 18%, 60%)",
365
+ "--font-color-for-checkbox-input-label-when-readonly": "hsl(232, 18%, 40%)",
366
+ "--font-color-for-radio-input-when-disabled": "hsl(232, 18%, 60%)",
330
367
  "--font-color-for-radio-input-when-error": "#e60050",
331
- "--font-color-for-radio-input-when-readonly": "hsl(0, 0%, 60%)",
368
+ "--font-color-for-radio-input-when-readonly": "hsl(232, 18%, 60%)",
332
369
  "--font-color-for-radio-input-when-warning": "#f16d0e",
333
- "--font-color-for-flat-button-as-primary": "hsl(172.9608938547486, 100%, 25%)",
334
- "--font-color-for-flat-button-as-primary-when-hovered": "#00b39e",
370
+ "--font-color-for-flat-button-as-primary": "hsl(175, 55%, 25%)",
371
+ "--font-color-for-flat-button-as-primary-when-hovered": "hsl(175, 55%, 45%)",
335
372
  "--font-color-for-flat-button-as-critical": "#e60050",
336
373
  "--font-color-for-flat-button-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)",
337
374
  "--font-color-for-flat-button-as-secondary": "#1a1a1a",
338
375
  "--font-color-for-flat-button-as-inverted": "#fff",
339
- "--font-color-for-flat-button-icon-when-disabled": "hsl(0, 0%, 60%)",
340
- "--font-color-for-secondary-icon-button-as-primary": "hsl(172.9608938547486, 100%, 25%)",
341
- "--font-color-for-secondary-icon-button-as-primary-when-hovered": "#00b39e",
376
+ "--font-color-for-flat-button-icon-when-disabled": "hsl(232, 18%, 60%)",
377
+ "--font-color-for-secondary-icon-button-as-primary": "hsl(175, 55%, 25%)",
378
+ "--font-color-for-secondary-icon-button-as-primary-when-hovered": "hsl(175, 55%, 45%)",
342
379
  "--height-for-button-as-big": "40px",
343
380
  "--height-for-button-as-medium": "32px",
344
381
  "--height-for-button-as-icon-as-big": "40px",
@@ -353,7 +390,7 @@
353
390
  "--height-for-primary-action-dropdown": "40px",
354
391
  "--width-for-avatar-as-medium": "40px",
355
392
  "--min-width-for-money-input-currency-dropdown": "80px",
356
- "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
393
+ "--placeholder-font-color-for-input": "hsl(232, 18%, 60%)",
357
394
  "--font-size-for-button": "0.875rem",
358
395
  "--font-size-for-input": "1rem",
359
396
  "--font-size-for-text-as-h1": "1.5rem",
@@ -362,19 +399,16 @@
362
399
  "--font-size-for-text-as-h4": "1rem",
363
400
  "--font-size-for-text-as-h5": "1rem",
364
401
  "--font-size-for-text-as-body": "1rem",
402
+ "--font-size-for-text-as-caption": "0.75rem",
365
403
  "--font-size-for-text-as-detail": "0.875rem",
366
404
  "--font-size-for-body": "16px",
367
405
  "--font-size-for-link": "1rem",
368
- "--font-size-for-stamp": "0.875rem",
369
406
  "--font-size-for-view-switcher": "0.875rem",
370
407
  "--font-size-for-table": "0.875rem",
371
- "--font-size-for-avatar-as-small": "0.875rem",
372
- "--font-size-for-avatar-as-medium": "1rem",
373
- "--font-size-for-avatar-as-big": "2.5rem",
374
408
  "--font-size-for-localized-input-label": "1rem",
375
409
  "--font-size-for-content-notification": "1rem",
376
410
  "--font-size-for-select-input-tag": "1rem",
377
- "--icon-color-for-datetime-input-icon": "hsl(0, 0%, 40%)",
411
+ "--icon-color-for-datetime-input-icon": "hsl(232, 18%, 40%)",
378
412
  "--icon-color-for-datetime-input-icon-when-hovered": "#e60050",
379
413
  "--line-height-for-text-as-h1": "2.125rem",
380
414
  "--line-height-for-text-as-h2": "1.75rem",
@@ -382,6 +416,7 @@
382
416
  "--line-height-for-text-as-h4": "1.375rem",
383
417
  "--line-height-for-text-as-h5": "1.375rem",
384
418
  "--line-height-for-text-as-body": "1.625rem",
419
+ "--line-height-for-text-as-caption": "1.125rem",
385
420
  "--line-height-for-text-as-detail": "1.375rem",
386
421
  "--line-height-for-select-input-options": "1.625rem",
387
422
  "--line-height-for-table-header": "26px",
@@ -391,9 +426,10 @@
391
426
  "--font-weight-for-text-as-h4": "500",
392
427
  "--font-weight-for-text-as-h5": "500",
393
428
  "--font-weight-for-text-as-body": "400",
429
+ "--font-weight-for-text-as-caption": "400",
394
430
  "--font-weight-for-text-as-detail": "400",
395
431
  "--font-weight-for-button": "500",
396
- "--font-weight-for-table-header": "600",
432
+ "--font-weight-for-table-header": "500",
397
433
  "--font-weight-for-text-as-bold": "600",
398
434
  "--margin-for-table-header": "8px",
399
435
  "--margin-for-table-cell-as-condensed": "8px",
@@ -412,7 +448,7 @@
412
448
  "--margin-for-rich-text-dropdown-item-label": "0 0 0 var(--spacing-20)",
413
449
  "--margin-for-tag-list": "0 var(--spacing-20) var(--spacing-20) 0",
414
450
  "--padding-for-stamp": "4px 12px",
415
- "--padding-for-stamp-as-condensed": "0 var(--spacing-20)",
451
+ "--padding-for-stamp-as-condensed": "var(--spacing-05) var(--spacing-10)",
416
452
  "--padding-for-tag": "2px 12px",
417
453
  "--padding-for-table-header": "24px",
418
454
  "--padding-for-table-header-as-condensed": "24px",