@commercetools-frontend/ui-kit 19.0.0 → 19.2.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 (10) hide show
  1. package/dist/commercetools-frontend-ui-kit.cjs.dev.js +7 -1
  2. package/dist/commercetools-frontend-ui-kit.cjs.prod.js +7 -1
  3. package/dist/commercetools-frontend-ui-kit.esm.js +2 -1
  4. package/dist/declarations/src/index.d.ts +1 -0
  5. package/materials/custom-properties.css +68 -158
  6. package/materials/custom-properties.json +68 -126
  7. package/materials/custom-properties_default.css +68 -158
  8. package/materials/custom-properties_recolouring.css +9 -83
  9. package/materials/internals/definition.yaml +71 -457
  10. package/package.json +37 -36
package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED
@@ -17,6 +17,7 @@ var collapsiblePanel = require('@commercetools-uikit/collapsible-panel');
17
17
  var constraints = require('@commercetools-uikit/constraints');
18
18
  var notifications = require('@commercetools-uikit/notifications');
19
19
  var primaryActionDropdown = require('@commercetools-uikit/primary-action-dropdown');
20
+ var dropdownMenu = require('@commercetools-uikit/dropdown-menu');
20
21
  var fieldLabel = require('@commercetools-uikit/field-label');
21
22
  var fieldErrors = require('@commercetools-uikit/field-errors');
22
23
  var grid = require('@commercetools-uikit/grid');
@@ -66,6 +67,7 @@ var collapsibleMotion__default = /*#__PURE__*/_interopDefault(collapsibleMotion)
66
67
  var collapsiblePanel__default = /*#__PURE__*/_interopDefault(collapsiblePanel);
67
68
  var constraints__default = /*#__PURE__*/_interopDefault(constraints);
68
69
  var primaryActionDropdown__default = /*#__PURE__*/_interopDefault(primaryActionDropdown);
70
+ var dropdownMenu__default = /*#__PURE__*/_interopDefault(dropdownMenu);
69
71
  var fieldLabel__default = /*#__PURE__*/_interopDefault(fieldLabel);
70
72
  var fieldErrors__default = /*#__PURE__*/_interopDefault(fieldErrors);
71
73
  var grid__default = /*#__PURE__*/_interopDefault(grid);
@@ -81,7 +83,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
81
83
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
82
84
 
83
85
  // NOTE: This string will be replaced on build time with the package version.
84
- var version = "19.0.0";
86
+ var version = "19.2.0";
85
87
 
86
88
  exports.i18n = i18n__namespace;
87
89
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -128,6 +130,10 @@ Object.defineProperty(exports, 'PrimaryActionDropdownOption', {
128
130
  enumerable: true,
129
131
  get: function () { return primaryActionDropdown.Option; }
130
132
  });
133
+ Object.defineProperty(exports, 'DropdownMenu', {
134
+ enumerable: true,
135
+ get: function () { return dropdownMenu__default["default"]; }
136
+ });
131
137
  Object.defineProperty(exports, 'FieldLabel', {
132
138
  enumerable: true,
133
139
  get: function () { return fieldLabel__default["default"]; }
package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED
@@ -17,6 +17,7 @@ var collapsiblePanel = require('@commercetools-uikit/collapsible-panel');
17
17
  var constraints = require('@commercetools-uikit/constraints');
18
18
  var notifications = require('@commercetools-uikit/notifications');
19
19
  var primaryActionDropdown = require('@commercetools-uikit/primary-action-dropdown');
20
+ var dropdownMenu = require('@commercetools-uikit/dropdown-menu');
20
21
  var fieldLabel = require('@commercetools-uikit/field-label');
21
22
  var fieldErrors = require('@commercetools-uikit/field-errors');
22
23
  var grid = require('@commercetools-uikit/grid');
@@ -66,6 +67,7 @@ var collapsibleMotion__default = /*#__PURE__*/_interopDefault(collapsibleMotion)
66
67
  var collapsiblePanel__default = /*#__PURE__*/_interopDefault(collapsiblePanel);
67
68
  var constraints__default = /*#__PURE__*/_interopDefault(constraints);
68
69
  var primaryActionDropdown__default = /*#__PURE__*/_interopDefault(primaryActionDropdown);
70
+ var dropdownMenu__default = /*#__PURE__*/_interopDefault(dropdownMenu);
69
71
  var fieldLabel__default = /*#__PURE__*/_interopDefault(fieldLabel);
70
72
  var fieldErrors__default = /*#__PURE__*/_interopDefault(fieldErrors);
71
73
  var grid__default = /*#__PURE__*/_interopDefault(grid);
@@ -81,7 +83,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
81
83
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
82
84
 
83
85
  // NOTE: This string will be replaced on build time with the package version.
84
- var version = "19.0.0";
86
+ var version = "19.2.0";
85
87
 
86
88
  exports.i18n = i18n__namespace;
87
89
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -128,6 +130,10 @@ Object.defineProperty(exports, 'PrimaryActionDropdownOption', {
128
130
  enumerable: true,
129
131
  get: function () { return primaryActionDropdown.Option; }
130
132
  });
133
+ Object.defineProperty(exports, 'DropdownMenu', {
134
+ enumerable: true,
135
+ get: function () { return dropdownMenu__default["default"]; }
136
+ });
131
137
  Object.defineProperty(exports, 'FieldLabel', {
132
138
  enumerable: true,
133
139
  get: function () { return fieldLabel__default["default"]; }
package/dist/commercetools-frontend-ui-kit.esm.js CHANGED
@@ -14,6 +14,7 @@ export { default as CollapsiblePanel } from '@commercetools-uikit/collapsible-pa
14
14
  export { default as Constraints } from '@commercetools-uikit/constraints';
15
15
  export { ContentNotification } from '@commercetools-uikit/notifications';
16
16
  export { default as PrimaryActionDropdown, Option as PrimaryActionDropdownOption } from '@commercetools-uikit/primary-action-dropdown';
17
+ export { default as DropdownMenu } from '@commercetools-uikit/dropdown-menu';
17
18
  export { default as FieldLabel } from '@commercetools-uikit/field-label';
18
19
  export { default as FieldErrors } from '@commercetools-uikit/field-errors';
19
20
  export { default as Grid } from '@commercetools-uikit/grid';
@@ -34,6 +35,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
34
35
  export { customProperties, designTokens } from '@commercetools-uikit/design-system';
35
36
 
36
37
  // NOTE: This string will be replaced on build time with the package version.
37
- var version = "19.0.0";
38
+ var version = "19.2.0";
38
39
 
39
40
  export { version };
package/dist/declarations/src/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export { default as CollapsiblePanel } from '@commercetools-uikit/collapsible-pa
14
14
  export { default as Constraints } from '@commercetools-uikit/constraints';
15
15
  export { ContentNotification } from '@commercetools-uikit/notifications';
16
16
  export { default as PrimaryActionDropdown, Option as PrimaryActionDropdownOption, } from '@commercetools-uikit/primary-action-dropdown';
17
+ export { default as DropdownMenu } from '@commercetools-uikit/dropdown-menu';
17
18
  export { default as FieldLabel } from '@commercetools-uikit/field-label';
18
19
  export { default as FieldErrors } from '@commercetools-uikit/field-errors';
19
20
  export { default as Grid } from '@commercetools-uikit/grid';
package/materials/custom-properties.css CHANGED
@@ -6,54 +6,54 @@
6
6
  */
7
7
 
8
8
  :root {
9
- --color-primary: hsl(175, 55%, 45%);
10
- --color-primary-10: hsl(175, 55%, 10%);
11
- --color-primary-20: hsl(175, 55%, 20%);
12
- --color-primary-25: hsl(175, 55%, 25%);
13
- --color-primary-30: hsl(175, 55%, 30%);
14
- --color-primary-40: hsl(175, 55%, 40%);
15
- --color-primary-85: hsl(175, 70%, 85%);
16
- --color-primary-90: hsl(175, 70%, 90%);
17
- --color-primary-95: hsl(175, 90%, 95%);
18
- --color-primary-98: hsl(175, 100%, 99%);
9
+ --color-primary: hsl(240, 64%, 58%);
10
+ --color-primary-10: hsl(240, 66%, 19%);
11
+ --color-primary-20: hsl(240, 45%, 33%);
12
+ --color-primary-25: hsl(240, 46%, 48%);
13
+ --color-primary-30: hsl(240, 46%, 53%);
14
+ --color-primary-40: hsl(240, 100%, 67%);
15
+ --color-primary-85: hsl(244, 100%, 84%);
16
+ --color-primary-90: hsl(243, 100%, 93%);
17
+ --color-primary-95: hsl(244, 100%, 97%);
18
+ --color-primary-98: hsl(244, 100%, 99%);
19
19
  --color-accent: #213c45;
20
- --color-accent-10: hsl(195, 35.2941176471%, 10%);
21
- --color-accent-20: hsl(195, 35.2941176471%, 20%);
22
- --color-accent-30: hsl(195, 35.2941176471%, 30%);
23
- --color-accent-40: hsl(195, 35.2941176471%, 40%);
24
- --color-accent-50: hsl(195, 35%, 50%);
25
- --color-accent-60: hsl(195, 35.2941176471%, 60%);
26
- --color-accent-85: hsl(195, 35%, 85%);
27
- --color-accent-90: hsl(195, 35.2941176471%, 90%);
28
- --color-accent-95: hsl(195, 35.2941176471%, 95%);
29
- --color-accent-98: hsl(195, 35.2941176471%, 98%);
30
- --color-brown-10: hsl(35, 90%, 10%);
31
- --color-brown-20: hsl(35, 50%, 20%);
32
- --color-brown-35: hsl(35, 25%, 35%);
33
- --color-brown-50: hsl(35, 30%, 50%);
34
- --color-brown-70: hsl(35, 40%, 70%);
35
- --color-brown-85: hsl(35, 60%, 85%);
36
- --color-brown-90: hsl(35, 90%, 90%);
37
- --color-brown-95: hsl(35, 80%, 95%);
38
- --color-brown-98: hsl(35, 90%, 98%);
39
- --color-purple-10: hsl(248, 90%, 10%);
20
+ --color-accent-10: hsl(195, 100%, 10%);
21
+ --color-accent-20: hsl(195, 80%, 20%);
22
+ --color-accent-30: hsl(195, 70%, 30%);
23
+ --color-accent-40: hsl(195, 70%, 40%);
24
+ --color-accent-50: hsl(195, 70%, 50%);
25
+ --color-accent-60: hsl(195, 70%, 60%);
26
+ --color-accent-85: hsl(195, 85%, 85%);
27
+ --color-accent-90: hsl(195, 90%, 90%);
28
+ --color-accent-95: hsl(195, 95%, 95%);
29
+ --color-accent-98: hsl(195, 100%, 98%);
30
+ --color-brown-10: hsl(41, 100%, 10%);
31
+ --color-brown-20: hsl(41, 100%, 20%);
32
+ --color-brown-35: hsl(41, 96%, 35%);
33
+ --color-brown-50: hsl(41, 95%, 44%);
34
+ --color-brown-70: hsl(47, 95%, 70%);
35
+ --color-brown-85: hsl(47, 100%, 85%);
36
+ --color-brown-90: hsl(47, 100%, 90%);
37
+ --color-brown-95: hsl(47, 100%, 95%);
38
+ --color-brown-98: hsl(48, 100%, 97%);
39
+ --color-purple-10: hsl(248, 88%, 10%);
40
40
  --color-purple-20: hsl(248, 50%, 20%);
41
41
  --color-purple-35: hsl(248, 25%, 35%);
42
- --color-purple-50: hsl(248, 30%, 50%);
43
- --color-purple-70: hsl(248, 40%, 70%);
44
- --color-purple-85: hsl(248, 60%, 85%);
45
- --color-purple-90: hsl(248, 50%, 90%);
46
- --color-purple-95: hsl(248, 80%, 95%);
47
- --color-purple-98: hsl(248, 90%, 98%);
48
- --color-turquoise-10: hsl(180, 90%, 10%);
49
- --color-turquoise-20: hsl(180, 50%, 20%);
50
- --color-turquoise-35: hsl(180, 25%, 35%);
51
- --color-turquoise-50: hsl(180, 30%, 45%);
52
- --color-turquoise-70: hsl(180, 40%, 70%);
53
- --color-turquoise-85: hsl(180, 60%, 85%);
54
- --color-turquoise-90: hsl(180, 40%, 90%);
55
- --color-turquoise-95: hsl(180, 80%, 95%);
56
- --color-turquoise-98: hsl(180, 90%, 98%);
42
+ --color-purple-50: hsl(248, 64%, 58%);
43
+ --color-purple-70: hsl(248, 80%, 70%);
44
+ --color-purple-85: hsl(249, 100%, 85%);
45
+ --color-purple-90: hsl(248, 100%, 90%);
46
+ --color-purple-95: hsl(248, 100%, 95%);
47
+ --color-purple-98: hsl(246, 100%, 98%);
48
+ --color-turquoise-10: hsl(180, 88%, 10%);
49
+ --color-turquoise-20: hsl(180, 90%, 20%);
50
+ --color-turquoise-35: hsl(178, 88%, 35%);
51
+ --color-turquoise-50: hsl(178, 67%, 50%);
52
+ --color-turquoise-70: hsl(180, 75%, 70%);
53
+ --color-turquoise-85: hsl(180, 90%, 85%);
54
+ --color-turquoise-90: hsl(180, 88%, 90%);
55
+ --color-turquoise-95: hsl(180, 88%, 95%);
56
+ --color-turquoise-98: hsl(180, 100%, 98%);
57
57
  --color-neutral: hsl(232, 18%, 80%);
58
58
  --color-neutral-05: hsl(0deg 0% 80% / 5%);
59
59
  --color-neutral-10: hsl(0deg 0% 80% / 10%);
@@ -69,17 +69,17 @@
69
69
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
70
70
  --color-info-90: #ceebfd;
71
71
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
72
- --color-warning: #f16d0e;
73
- --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
74
- --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
75
- --color-warning-60: hsl(25.110132158590307, 90%, 60%);
76
- --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
77
- --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
78
- --color-error: #e60050;
79
- --color-error-25: hsl(339.1304347826087, 100%, 25%);
80
- --color-error-40: hsl(339.1304347826087, 100%, 40%);
81
- --color-error-85: hsl(339.1304347826087, 100%, 85%);
82
- --color-error-95: hsl(339.1304347826087, 100%, 95%);
72
+ --color-warning: hsl(35, 90%, 45%);
73
+ --color-warning-25: hsl(33, 83%, 25%);
74
+ --color-warning-40: hsl(33, 80%, 34%);
75
+ --color-warning-60: hsl(35, 90%, 55%);
76
+ --color-warning-85: hsl(33, 90%, 80%);
77
+ --color-warning-95: hsl(45, 100%, 92%);
78
+ --color-error: hsl(3, 65%, 58%);
79
+ --color-error-25: hsl(4, 69%, 37%);
80
+ --color-error-40: hsl(3, 60%, 46%);
81
+ --color-error-85: hsl(1, 55%, 74%);
82
+ --color-error-95: hsl(349, 66%, 92%);
83
83
  --color-solid: #1a1a1a;
84
84
  --color-solid-02: hsl(0deg 0% 10% / 2%);
85
85
  --color-solid-05: hsl(0deg 0% 10% / 5%);
@@ -193,27 +193,10 @@
193
193
  --break-point-biggerdesktop: 1280px;
194
194
  --break-point-giantdesktop: 1680px;
195
195
  --break-point-jumbodesktop: 1920px;
196
- --background-color-for-button-when-active: hsl(232, 18%, 95%);
197
- --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
198
- --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
199
- --background-color-for-icon-button-when-disabled: hsl(
200
- 195,
201
- 35.2941176471%,
202
- 95%
203
- );
204
196
  --background-color-for-input: #fff;
205
- --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
206
197
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
207
- --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
208
- --background-color-for-input-when-focused: #fff;
209
198
  --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
210
- --background-color-for-input-when-active: hsl(
211
- 203.05555555555554,
212
- 93.9130434783%,
213
- 95%
214
- );
215
- --background-color-for-input-as-quiet: transparent;
216
- --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
199
+ --background-color-for-input-when-hovered: hsl(244, 100%, 99%);
217
200
  --background-color-for-localized-input-label: #fff;
218
201
  --background-color-for-localized-input-label-when-readonly: hsl(
219
202
  232,
@@ -225,102 +208,29 @@
225
208
  18%,
226
209
  95%
227
210
  );
228
- --background-color-for-button-as-primary: #15a390;
229
- --background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%);
230
- --background-color-for-button-as-primary-as-default-when-hovered: #17ab97;
231
- --background-color-for-button-as-primary-as-default-when-active: #15a390;
232
- --background-color-for-button-as-primary-as-urgent: #f16d0e;
233
- --background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
234
- --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
235
- --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
236
- --background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
237
- --background-color-for-toggle-thumb-when-disabled: hsl(
238
- 195,
239
- 35.2941176471%,
240
- 60%
241
- );
242
- --background-color-for-toggle-track-when-disabled: hsl(
243
- 195,
244
- 35.2941176471%,
245
- 90%
246
- );
247
- --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
248
- 232,
249
- 18%,
250
- 60%
251
- );
252
- --background-color-for-toggle-track-when-active-when-disabled: hsl(
253
- 232,
254
- 18%,
255
- 90%
256
- );
257
- --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1);
258
- --background-color-for-loading-spinner-track: #213c45;
259
- --background-color-for-loading-spinner-dot: #213c45;
260
- --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
261
- --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%);
262
- --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%);
263
- --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%);
264
- --background-color-for-tag: hsl(232, 18%, 95%);
265
- --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
266
- --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%);
267
- --background-color-for-dropdown-when-active: hsl(232, 18%, 90%);
268
- --background-color-for-dropdown-option-when-active: hsl(
269
- 203.05555555555554,
270
- 93.9130434783%,
271
- 95%
272
- );
211
+ --background-color-for-button-when-active: hsl(243, 100%, 93%);
212
+ --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
213
+ --background-color-for-button-when-disabled: hsl(232, 18%, 95%);
273
214
  --border-color-for-input: hsl(232, 18%, 80%);
274
- --border-color-for-input-when-focused: hsl(175, 55%, 45%);
275
215
  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
276
216
  --border-color-for-input-when-readonly: #fff;
277
- --border-color-for-input-when-error: #e60050;
278
- --border-color-for-input-when-warning: #f16d0e;
217
+ --border-color-for-input-when-error: hsl(3, 65%, 58%);
218
+ --border-color-for-input-when-warning: hsl(35, 90%, 45%);
279
219
  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
280
- --border-color-for-input-as-quiet: transparent;
281
- --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
282
- --border-color-for-dropdown: hsl(232, 18%, 80%);
283
- --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
284
- --border-color-for-checkbox-input: hsl(175, 55%, 45%);
285
- --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%);
286
- --border-color-for-tag: hsl(232, 18%, 85%);
287
- --border-radius-for-button-as-big: 4px;
288
- --border-radius-for-button-as-medium: 4px;
220
+ --border-color-for-input-when-focused: hsl(240, 100%, 67%);
221
+ --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
289
222
  --border-radius-for-input: 4px;
290
- --border-width-for-input: 1px;
291
- --border-width-for-input-when-warning: 1px;
292
- --border-width-for-input-when-error: 1px;
293
- --border-width-for-input-when-focused: 1px;
294
223
  --font-color-for-input: #1a1a1a;
295
224
  --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
296
- --font-color-for-input-when-error: #e60050;
225
+ --font-color-for-input-when-error: hsl(3, 60%, 46%);
297
226
  --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
298
- --font-color-for-input-when-warning: #f16d0e;
299
- --font-color-for-button-as-secondary: #1a1a1a;
300
- --font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%);
301
- --font-color-for-button-as-flat-as-critical: #e60050;
302
- --font-color-for-button-as-flat-as-critical-when-hovered: hsl(
303
- 339.1304347826087,
304
- 100%,
305
- 25%
306
- );
307
- --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
308
- --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
309
- --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
310
- --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%);
311
- --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%);
312
- --font-color-for-text-as-positive: hsl(175, 55%, 25%);
227
+ --font-color-for-input-when-warning: hsl(35, 90%, 45%);
228
+ --font-color-for-button-as-secondary: hsl(240, 64%, 58%);
313
229
  --height-for-button-as-big: 40px;
314
- --height-for-button-as-medium: 32px;
315
230
  --height-for-button-as-small: 16px;
231
+ --height-for-button-as-medium: 32px;
316
232
  --height-for-input: 40px;
317
233
  --height-for-input-as-small: 32px;
318
- --placeholder-font-color-for-input: hsl(232, 18%, 60%);
319
- --font-size-for-button: 0.875rem;
320
- --font-size-for-input: 1rem;
321
- --padding-for-input: 0 var(--spacing-30);
322
- --padding-for-input-as-quiet: 0 var(--spacing-20);
323
- --padding-for-button: 0 var(--spacing-30);
324
234
  --shadow-for-input: none;
325
235
  --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
326
236
  --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
package/materials/custom-properties.json CHANGED
@@ -1,52 +1,52 @@
1
1
  {
2
- "--color-primary": "hsl(175, 55%, 45%)",
3
- "--color-primary-10": "hsl(175, 55%, 10%)",
4
- "--color-primary-20": "hsl(175, 55%, 20%)",
5
- "--color-primary-25": "hsl(175, 55%, 25%)",
6
- "--color-primary-30": "hsl(175, 55%, 30%)",
7
- "--color-primary-40": "hsl(175, 55%, 40%)",
8
- "--color-primary-85": "hsl(175, 70%, 85%)",
9
- "--color-primary-90": "hsl(175, 70%, 90%)",
10
- "--color-primary-95": "hsl(175, 90%, 95%)",
11
- "--color-primary-98": "hsl(175, 100%, 99%)",
2
+ "--color-primary": "hsl(240, 64%, 58%)",
3
+ "--color-primary-10": "hsl(240, 66%, 19%)",
4
+ "--color-primary-20": "hsl(240, 45%, 33%)",
5
+ "--color-primary-25": "hsl(240, 46%, 48%)",
6
+ "--color-primary-30": "hsl(240, 46%, 53%)",
7
+ "--color-primary-40": "hsl(240, 100%, 67%)",
8
+ "--color-primary-85": "hsl(244, 100%, 84%)",
9
+ "--color-primary-90": "hsl(243, 100%, 93%)",
10
+ "--color-primary-95": "hsl(244, 100%, 97%)",
11
+ "--color-primary-98": "hsl(244, 100%, 99%)",
12
12
  "--color-accent": "#213c45",
13
- "--color-accent-10": "hsl(195, 35.2941176471%, 10%)",
14
- "--color-accent-20": "hsl(195, 35.2941176471%, 20%)",
15
- "--color-accent-30": "hsl(195, 35.2941176471%, 30%)",
16
- "--color-accent-40": "hsl(195, 35.2941176471%, 40%)",
17
- "--color-accent-50": "hsl(195, 35%, 50%)",
18
- "--color-accent-60": "hsl(195, 35.2941176471%, 60%)",
19
- "--color-accent-85": "hsl(195, 35%, 85%)",
20
- "--color-accent-90": "hsl(195, 35.2941176471%, 90%)",
21
- "--color-accent-95": "hsl(195, 35.2941176471%, 95%)",
22
- "--color-accent-98": "hsl(195, 35.2941176471%, 98%)",
23
- "--color-brown-10": "hsl(35, 90%, 10%)",
24
- "--color-brown-20": "hsl(35, 50%, 20%)",
25
- "--color-brown-35": "hsl(35, 25%, 35%)",
26
- "--color-brown-50": "hsl(35, 30%, 50%)",
27
- "--color-brown-70": "hsl(35, 40%, 70%)",
28
- "--color-brown-85": "hsl(35, 60%, 85%)",
29
- "--color-brown-90": "hsl(35, 90%, 90%)",
30
- "--color-brown-95": "hsl(35, 80%, 95%)",
31
- "--color-brown-98": "hsl(35, 90%, 98%)",
32
- "--color-purple-10": "hsl(248, 90%, 10%)",
13
+ "--color-accent-10": "hsl(195, 100%, 10%)",
14
+ "--color-accent-20": "hsl(195, 80%, 20%)",
15
+ "--color-accent-30": "hsl(195, 70%, 30%)",
16
+ "--color-accent-40": "hsl(195, 70%, 40%)",
17
+ "--color-accent-50": "hsl(195, 70%, 50%)",
18
+ "--color-accent-60": "hsl(195, 70%, 60%)",
19
+ "--color-accent-85": "hsl(195, 85%, 85%)",
20
+ "--color-accent-90": "hsl(195, 90%, 90%)",
21
+ "--color-accent-95": "hsl(195, 95%, 95%)",
22
+ "--color-accent-98": "hsl(195, 100%, 98%)",
23
+ "--color-brown-10": "hsl(41, 100%, 10%)",
24
+ "--color-brown-20": "hsl(41, 100%, 20%)",
25
+ "--color-brown-35": "hsl(41, 96%, 35%)",
26
+ "--color-brown-50": "hsl(41, 95%, 44%)",
27
+ "--color-brown-70": "hsl(47, 95%, 70%)",
28
+ "--color-brown-85": "hsl(47, 100%, 85%)",
29
+ "--color-brown-90": "hsl(47, 100%, 90%)",
30
+ "--color-brown-95": "hsl(47, 100%, 95%)",
31
+ "--color-brown-98": "hsl(48, 100%, 97%)",
32
+ "--color-purple-10": "hsl(248, 88%, 10%)",
33
33
  "--color-purple-20": "hsl(248, 50%, 20%)",
34
34
  "--color-purple-35": "hsl(248, 25%, 35%)",
35
- "--color-purple-50": "hsl(248, 30%,50%)",
36
- "--color-purple-70": "hsl(248, 40%, 70%)",
37
- "--color-purple-85": "hsl(248, 60%, 85%)",
38
- "--color-purple-90": "hsl(248, 50%, 90%)",
39
- "--color-purple-95": "hsl(248, 80%, 95%)",
40
- "--color-purple-98": "hsl(248, 90%, 98%)",
41
- "--color-turquoise-10": "hsl(180, 90%, 10%)",
42
- "--color-turquoise-20": "hsl(180, 50%, 20%)",
43
- "--color-turquoise-35": "hsl(180, 25%, 35%)",
44
- "--color-turquoise-50": "hsl(180, 30%, 45%)",
45
- "--color-turquoise-70": "hsl(180, 40%, 70%)",
46
- "--color-turquoise-85": "hsl(180, 60%, 85%)",
47
- "--color-turquoise-90": "hsl(180, 40%, 90%)",
48
- "--color-turquoise-95": "hsl(180, 80%, 95%)",
49
- "--color-turquoise-98": "hsl(180, 90%, 98%)",
35
+ "--color-purple-50": "hsl(248, 64%, 58%)",
36
+ "--color-purple-70": "hsl(248, 80%, 70%)",
37
+ "--color-purple-85": "hsl(249, 100%, 85%)",
38
+ "--color-purple-90": "hsl(248, 100%, 90%)",
39
+ "--color-purple-95": "hsl(248, 100%, 95%)",
40
+ "--color-purple-98": "hsl(246, 100%, 98%)",
41
+ "--color-turquoise-10": "hsl(180, 88%, 10%)",
42
+ "--color-turquoise-20": "hsl(180, 90%, 20%)",
43
+ "--color-turquoise-35": "hsl(178, 88%, 35%)",
44
+ "--color-turquoise-50": "hsl(178, 67%, 50%)",
45
+ "--color-turquoise-70": "hsl(180, 75%, 70%)",
46
+ "--color-turquoise-85": "hsl(180, 90%, 85%)",
47
+ "--color-turquoise-90": "hsl(180, 88%, 90%)",
48
+ "--color-turquoise-95": "hsl(180, 88%, 95%)",
49
+ "--color-turquoise-98": "hsl(180, 100%, 98%)",
50
50
  "--color-neutral": "hsl(232, 18%, 80%)",
51
51
  "--color-neutral-05": "hsl(0deg 0% 80% / 5%)",
52
52
  "--color-neutral-10": "hsl(0deg 0% 80% / 10%)",
@@ -62,17 +62,17 @@
62
62
  "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
63
63
  "--color-info-90": "#CEEBFD",
64
64
  "--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
65
- "--color-warning": "#f16d0e",
66
- "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
67
- "--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)",
68
- "--color-warning-60": "hsl(25.110132158590307, 90%, 60%)",
69
- "--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
70
- "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
71
- "--color-error": "#e60050",
72
- "--color-error-25": "hsl(339.1304347826087, 100%, 25%)",
73
- "--color-error-40": "hsl(339.1304347826087, 100%, 40%)",
74
- "--color-error-85": "hsl(339.1304347826087, 100%, 85%)",
75
- "--color-error-95": "hsl(339.1304347826087, 100%, 95%)",
65
+ "--color-warning": "hsl(35, 90%, 45%)",
66
+ "--color-warning-25": "hsl(33, 83%, 25%)",
67
+ "--color-warning-40": "hsl(33, 80%, 34%)",
68
+ "--color-warning-60": "hsl(35, 90%, 55%)",
69
+ "--color-warning-85": "hsl(33, 90%, 80%)",
70
+ "--color-warning-95": "hsl(45, 100%, 92%)",
71
+ "--color-error": "hsl(3, 65%, 58%)",
72
+ "--color-error-25": "hsl(4, 69%, 37%)",
73
+ "--color-error-40": "hsl(3, 60%, 46%)",
74
+ "--color-error-85": "hsl(1, 55%, 74%)",
75
+ "--color-error-95": "hsl(349, 66%, 92%)",
76
76
  "--color-solid": "#1a1a1a",
77
77
  "--color-solid-02": "hsl(0deg 0% 10% / 2%)",
78
78
  "--color-solid-05": "hsl(0deg 0% 10% / 5%)",
@@ -181,94 +181,36 @@
181
181
  "--break-point-biggerdesktop": "1280px",
182
182
  "--break-point-giantdesktop": "1680px",
183
183
  "--break-point-jumbodesktop": "1920px",
184
- "--background-color-for-button-when-active": "hsl(232, 18%, 95%)",
185
- "--background-color-for-button-when-hovered": "hsl(232, 18%, 98%)",
186
- "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
187
- "--background-color-for-icon-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
188
184
  "--background-color-for-input": "#fff",
189
- "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
190
185
  "--background-color-for-input-when-disabled": "hsl(232, 18%, 95%)",
191
- "--background-color-for-input-when-hovered": "hsl(232, 18%, 98%)",
192
- "--background-color-for-input-when-focused": "#fff",
193
186
  "--background-color-for-input-when-readonly": "hsl(232, 18%, 95%)",
194
- "--background-color-for-input-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)",
195
- "--background-color-for-input-as-quiet": "transparent",
196
- "--background-color-for-input-as-quiet-when-hovered": "hsl(0deg 0% 10% / 2%)",
187
+ "--background-color-for-input-when-hovered": "hsl(244, 100%, 99%)",
197
188
  "--background-color-for-localized-input-label": "#fff",
198
189
  "--background-color-for-localized-input-label-when-readonly": "hsl(232, 18%, 95%)",
199
190
  "--background-color-for-localized-input-label-when-disabled": "hsl(232, 18%, 95%)",
200
- "--background-color-for-button-as-primary": "#15a390",
201
- "--background-color-for-button-as-primary-when-hovered": "hsl(175, 55%, 45%)",
202
- "--background-color-for-button-as-primary-as-default-when-hovered": "#17ab97",
203
- "--background-color-for-button-as-primary-as-default-when-active": "#15a390",
204
- "--background-color-for-button-as-primary-as-urgent": "#f16d0e",
205
- "--background-color-for-stamp-as-primary": "hsl(175, 70%, 90%)",
206
- "--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)",
207
- "--background-color-for-toggle-thumb-when-active": "hsl(175, 55%, 25%)",
208
- "--background-color-for-toggle-track-when-active": "hsl(175, 55%, 40%)",
209
- "--background-color-for-toggle-thumb-when-disabled": "hsl(195, 35.2941176471%, 60%)",
210
- "--background-color-for-toggle-track-when-disabled": "hsl(195, 35.2941176471%, 90%)",
211
- "--background-color-for-toggle-thumb-when-active-when-disabled": "hsl(232, 18%, 60%)",
212
- "--background-color-for-toggle-track-when-active-when-disabled": "hsl(232, 18%, 90%)",
213
- "--background-color-for-toggle-thumb-when-hovered": "rgba(0, 0, 0, 0.1)",
214
- "--background-color-for-loading-spinner-track": "#213c45",
215
- "--background-color-for-loading-spinner-dot": "#213c45",
216
- "--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)",
217
- "--background-color-for-view-switcher-button-when-active": "hsl(232, 18%, 95%)",
218
- "--background-color-for-checkbox-input-when-hovered": "hsl(232, 18%, 90%)",
219
- "--background-color-for-radio-option-when-hovered": "hsl(232, 18%, 90%)",
220
- "--background-color-for-tag": "hsl(232, 18%, 95%)",
221
- "--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)",
222
- "--background-color-for-dropdown-when-hovered": "hsl(232, 18%, 95%)",
223
- "--background-color-for-dropdown-when-active": "hsl(232, 18%, 90%)",
224
- "--background-color-for-dropdown-option-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)",
191
+ "--background-color-for-button-when-active": "hsl(243, 100%, 93%)",
192
+ "--background-color-for-button-when-hovered": "hsl(244, 100%, 97%)",
193
+ "--background-color-for-button-when-disabled": "hsl(232, 18%, 95%)",
225
194
  "--border-color-for-input": "hsl(232, 18%, 80%)",
226
- "--border-color-for-input-when-focused": "hsl(175, 55%, 45%)",
227
195
  "--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)",
228
196
  "--border-color-for-input-when-readonly": "#fff",
229
- "--border-color-for-input-when-error": "#e60050",
230
- "--border-color-for-input-when-warning": "#f16d0e",
197
+ "--border-color-for-input-when-error": "hsl(3, 65%, 58%)",
198
+ "--border-color-for-input-when-warning": "hsl(35, 90%, 45%)",
231
199
  "--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)",
232
- "--border-color-for-input-as-quiet": "transparent",
233
- "--border-color-for-button-as-secondary": "hsl(232, 18%, 80%)",
234
- "--border-color-for-dropdown": "hsl(232, 18%, 80%)",
235
- "--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)",
236
- "--border-color-for-checkbox-input": "hsl(175, 55%, 45%)",
237
- "--border-color-for-checkbox-input-when-active": "hsl(175, 55%, 45%)",
238
- "--border-color-for-tag": "hsl(232, 18%, 85%)",
239
- "--border-radius-for-button-as-big": "4px",
240
- "--border-radius-for-button-as-medium": "4px",
200
+ "--border-color-for-input-when-focused": "hsl(240, 100%, 67%)",
201
+ "--border-color-for-button-as-secondary": "hsl(244, 100%, 84%)",
241
202
  "--border-radius-for-input": "4px",
242
- "--border-width-for-input": "1px",
243
- "--border-width-for-input-when-warning": "1px",
244
- "--border-width-for-input-when-error": "1px",
245
- "--border-width-for-input-when-focused": "1px",
246
203
  "--font-color-for-input": "#1a1a1a",
247
204
  "--font-color-for-input-when-disabled": "hsl(232, 18%, 60%)",
248
- "--font-color-for-input-when-error": "#e60050",
205
+ "--font-color-for-input-when-error": "hsl(3, 60%, 46%)",
249
206
  "--font-color-for-input-when-readonly": "hsl(232, 18%, 40%)",
250
- "--font-color-for-input-when-warning": "#f16d0e",
251
- "--font-color-for-button-as-secondary": "#1a1a1a",
252
- "--font-color-for-button-as-flat-when-hovered": "hsl(175, 55%, 45%)",
253
- "--font-color-for-button-as-flat-as-critical": "#e60050",
254
- "--font-color-for-button-as-flat-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)",
255
- "--font-color-for-view-switcher-button": "hsl(232, 18%, 40%)",
256
- "--font-color-for-stamp-as-positive": "hsl(175, 55%, 25%)",
257
- "--font-color-for-content-notification-when-success": "hsl(175, 55%, 45%)",
258
- "--font-color-for-avatar-as-turquoise": "hsl(180, 30%, 45%)",
259
- "--font-color-for-leading-icon-as-turquoise": "hsl(180, 30%, 45%)",
260
- "--font-color-for-text-as-positive": "hsl(175, 55%, 25%)",
207
+ "--font-color-for-input-when-warning": "hsl(35, 90%, 45%)",
208
+ "--font-color-for-button-as-secondary": "hsl(240, 64%, 58%)",
261
209
  "--height-for-button-as-big": "40px",
262
- "--height-for-button-as-medium": "32px",
263
210
  "--height-for-button-as-small": "16px",
211
+ "--height-for-button-as-medium": "32px",
264
212
  "--height-for-input": "40px",
265
213
  "--height-for-input-as-small": "32px",
266
- "--placeholder-font-color-for-input": "hsl(232, 18%, 60%)",
267
- "--font-size-for-button": "0.875rem",
268
- "--font-size-for-input": "1rem",
269
- "--padding-for-input": "0 var(--spacing-30)",
270
- "--padding-for-input-as-quiet": "0 var(--spacing-20)",
271
- "--padding-for-button": "0 var(--spacing-30)",
272
214
  "--shadow-for-input": "none",
273
215
  "--shadow-for-input-when-focused": "inset 0 0 0 1px var(--color-primary)",
274
216
  "--shadow-for-input-when-error": "inset 0 0 0 1px var(--color-error)",