colibri-ui 0.7.84 → 0.7.86

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 (64) hide show
  1. package/Avatar/assets/user-circle.svg.js +53 -0
  2. package/Avatar/index.js +2 -2
  3. package/Button/Button.module.css +18 -18
  4. package/Checkbox/Checkbox.module.css +4 -4
  5. package/Chip/Chip.module.css +1 -3
  6. package/InputRadio/InputRadio.module.css +5 -5
  7. package/Menu/components/MenuItem/index.js +1 -1
  8. package/Status/index.d.ts +4 -0
  9. package/Status/index.js +28 -0
  10. package/Status/index.module.css +45 -0
  11. package/Status/index.props.d.ts +13 -0
  12. package/Status/package.json +6 -0
  13. package/Switch/Switch.module.css +2 -2
  14. package/TabsMenu/Tab/Tab.props.d.ts +0 -1
  15. package/TabsMenu/index.js +2 -3
  16. package/TabsMenu/index.props.d.ts +0 -1
  17. package/Theme/colors/common.js +3 -3
  18. package/Theme/colors/theme_buenos_aires.js +13 -13
  19. package/Theme/colors/theme_default.js +7 -7
  20. package/Theme/index.d.ts +76 -60
  21. package/Theme/themes/buenos_aires.d.ts +38 -30
  22. package/Theme/themes/buenos_aires.js +38 -30
  23. package/Theme/themes/default.d.ts +38 -30
  24. package/Theme/themes/default.js +38 -30
  25. package/Tooltip/Tooltip.module.css +3 -3
  26. package/Typography/index.js +2 -2
  27. package/base/InputRoot/InputRoot.module.css +1 -1
  28. package/esm/Avatar/assets/user-circle.svg.js +28 -0
  29. package/esm/Avatar/index.js +2 -2
  30. package/esm/Button/Button.module.css +18 -18
  31. package/esm/Checkbox/Checkbox.module.css +4 -4
  32. package/esm/Chip/Chip.module.css +1 -3
  33. package/esm/InputRadio/InputRadio.module.css +5 -5
  34. package/esm/Menu/components/MenuItem/index.js +1 -1
  35. package/esm/Status/index.d.ts +4 -0
  36. package/esm/Status/index.js +18 -0
  37. package/esm/Status/index.module.css +45 -0
  38. package/esm/Status/index.props.d.ts +13 -0
  39. package/esm/Switch/Switch.module.css +2 -2
  40. package/esm/TabsMenu/Tab/Tab.props.d.ts +0 -1
  41. package/esm/TabsMenu/index.js +2 -3
  42. package/esm/TabsMenu/index.props.d.ts +0 -1
  43. package/esm/Theme/colors/common.js +3 -3
  44. package/esm/Theme/colors/theme_buenos_aires.js +13 -13
  45. package/esm/Theme/colors/theme_default.js +7 -7
  46. package/esm/Theme/index.d.ts +76 -60
  47. package/esm/Theme/themes/buenos_aires.d.ts +38 -30
  48. package/esm/Theme/themes/buenos_aires.js +38 -30
  49. package/esm/Theme/themes/default.d.ts +38 -30
  50. package/esm/Theme/themes/default.js +38 -30
  51. package/esm/Tooltip/Tooltip.module.css +3 -3
  52. package/esm/Typography/index.js +2 -2
  53. package/esm/base/InputRoot/InputRoot.module.css +1 -1
  54. package/esm/index.d.ts +1 -0
  55. package/esm/index.js +1 -0
  56. package/esm/theme_ba_variables.css +75 -67
  57. package/esm/theme_default_variables.css +58 -50
  58. package/index.d.ts +1 -0
  59. package/index.js +22 -20
  60. package/package.json +1 -1
  61. package/theme_ba_variables.css +75 -67
  62. package/theme_default_variables.css +58 -50
  63. package/Avatar/assets/male-circle.svg.js +0 -62
  64. package/esm/Avatar/assets/male-circle.svg.js +0 -37
package/esm/theme_default_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .theme {
2
2
  --palette-black: #000;
3
- --palette-white: #fff;
3
+ --palette-white: #FFF;
4
4
  --palette-bg-1: #ECEEF2;
5
5
  --palette-bg-2: #E4E6EA;
6
6
  --palette-bg-3: #D6D9E0;
@@ -17,90 +17,98 @@
17
17
  --palette-tretiary-1: #FFF5F0;
18
18
  --palette-tretiary-2: #FFEAE2;
19
19
  --palette-tretiary-3: #FFD8CA;
20
- --palette-tretiary-4: #FFA384 ;
21
- --palette-tretiary-5: #fc5200;
22
- --palette-alert: #ff564e;
23
- --palette-success: #28bc00;
24
- --typography-alert: #ff564e;
25
- --typography-success: #28bc00;
20
+ --palette-tretiary-4: #FFA384;
21
+ --palette-tretiary-5: #FC5200;
22
+ --palette-alert: #FF564E;
23
+ --palette-success: #4AC99B;
24
+ --typography-alert: #FF564E;
25
+ --typography-success: #4AC99B;
26
26
  --typography-secondary: #D6D9E0;
27
- --button-border-radius: 18px;
28
- --button-primary-color: #fff;
29
- --button-primary-background-color: #067AFF;
27
+ --button-primary-color: #FFF;
28
+ --button-primary-bg: #067AFF;
30
29
  --button-primary-border-color: #067AFF;
31
- --button-primary-color-hovered: #fff;
32
- --button-primary-background-color-hovered: #0066DC;
30
+ --button-primary-color-hovered: #FFF;
31
+ --button-primary-bg-hovered: #0066DC;
33
32
  --button-primary-border-color-hovered: #0066DC;
34
- --button-primary-color-active: #fff;
35
- --button-primary-background-color-active: #0066DC;
33
+ --button-primary-color-active: #FFF;
34
+ --button-primary-bg-active: #0066DC;
36
35
  --button-primary-border-color-active: #0066DC;
37
36
  --button-primary-color-disabled: #C9CDD6;
38
- --button-primary-background-color-disabled: #E8F0FE;
37
+ --button-primary-bg-disabled: #E8F0FE;
39
38
  --button-primary-border-color-disabled: #E8F0FE;
40
- --button-secondary-color: #fff;
41
- --button-secondary-background-color: #f4b968;
42
- --button-secondary-border-color: #f4b968;
43
- --button-secondary-color-hovered: #fff;
44
- --button-secondary-background-color-hovered: #ffab0f;
45
- --button-secondary-border-color-hovered: #ffab0f;
46
- --button-secondary-color-active: #fff;
47
- --button-secondary-background-color-active: #ffab0f;
48
- --button-secondary-border-color-active: #ffab0f;
39
+ --button-secondary-color: #FFF;
40
+ --button-secondary-bg: #F4B968;
41
+ --button-secondary-border-color: #F4B968;
42
+ --button-secondary-color-hovered: #FFF;
43
+ --button-secondary-bg-hovered: #FFAB0F;
44
+ --button-secondary-border-color-hovered: #FFAB0F;
45
+ --button-secondary-color-active: #FFF;
46
+ --button-secondary-bg-active: #FFAB0F;
47
+ --button-secondary-border-color-active: #FFAB0F;
49
48
  --button-secondary-color-disabled: #C9CDD6;
50
- --button-secondary-background-color-disabled: #fff1db;
51
- --button-secondary-border-color-disabled: #fff1db;
49
+ --button-secondary-bg-disabled: #FFF1DB;
50
+ --button-secondary-border-color-disabled: #FFF1DB;
52
51
  --button-pseudo-color: #000;
53
- --button-pseudo-background-color: #FFF5F0;
52
+ --button-pseudo-bg: #FFF5F0;
54
53
  --button-pseudo-border-color: #FFF5F0;
55
54
  --button-pseudo-color-hovered: #000;
56
- --button-pseudo-background-color-hovered: #FFF5F0;
55
+ --button-pseudo-bg-hovered: #FFF5F0;
57
56
  --button-pseudo-border-color-hovered: #FFF5F0;
58
57
  --button-pseudo-color-active: #000;
59
- --button-pseudo-background-color-active: #FFEAE2;
58
+ --button-pseudo-bg-active: #FFEAE2;
60
59
  --button-pseudo-border-color-active: #FFEAE2;
61
60
  --button-pseudo-color-disabled: #C9CDD6;
62
- --button-pseudo-background-color-disabled: #FFF5F0;
61
+ --button-pseudo-bg-disabled: #FFF5F0;
63
62
  --button-pseudo-border-color-disabled: #FFF5F0;
64
63
  --button-outline-color: #000;
65
- --button-outline-background-color: #fff;
64
+ --button-outline-bg: #FFF;
66
65
  --button-outline-border-color: #D6D9E0;
67
66
  --button-outline-color-hovered: #000;
68
- --button-outline-background-color-hovered: #ECEEF2;
67
+ --button-outline-bg-hovered: #ECEEF2;
69
68
  --button-outline-border-color-hovered: #D6D9E0;
70
69
  --button-outline-color-active: #000;
71
- --button-outline-background-color-active: #E4E6EA;
70
+ --button-outline-bg-active: #E4E6EA;
72
71
  --button-outline-border-color-active: #D6D9E0;
73
72
  --button-outline-color-disabled: #C9CDD6;
74
- --button-outline-background-color-disabled: #fff;
73
+ --button-outline-bg-disabled: #FFF;
75
74
  --button-outline-border-color-disabled: #E4E6EA;
76
75
  --button-clear-color: #067AFF;
77
76
  --button-clear-color-hovered: #067AFF;
78
77
  --button-clear-color-active: #0066DC;
79
78
  --button-clear-color-disabled: #C9CDD6;
80
- --button-clear-background-color-disabled: #fff;
81
- --button-clear-border-color-disabled: #fff;
79
+ --button-clear-bg-disabled: #FFF;
80
+ --button-clear-border-color-disabled: #FFF;
82
81
  --input-primary-border-color: #D6D9E0;
83
82
  --input-primary-plaseholder-color: #E4E6EA;
84
- --input-primary-border-color-error: #ff564e;
85
- --input-primary-background-color-error: #FFEAE2;
83
+ --input-primary-border-color-error: #FF564E;
84
+ --input-primary-bg-error: #FFEAE2;
86
85
  --input-primary-box-shadow-color-error: #FFEAE2;
87
- --checkbox-background-color-checked: #067AFF;
88
- --checkbox-background-color-hovered: #067AFF;
86
+ --checkbox-bg-checked: #067AFF;
87
+ --checkbox-bg-hovered: #067AFF;
89
88
  --checkbox-box-shadow-focused: #E8F0FE;
90
- --checkbox-background-color-active: #067AFF;
89
+ --checkbox-bg-active: #067AFF;
91
90
  --checkbox-border-color-active: #067AFF;
92
91
  --checkbox-box-shadow-active: #067AFF;
93
- --checkbox-background-color-disabled: #E8F0FE;
94
- --input-radio-background-color-checked: #067AFF;
95
- --input-radio-background-color-hovered: #067AFF;
92
+ --checkbox-bg-disabled: #E8F0FE;
93
+ --input-radio-bg-checked: #067AFF;
94
+ --input-radio-bg-hovered: #067AFF;
96
95
  --input-radio-box-shadow-focused: #E8F0FE;
97
- --input-radio-background-color-focused: #E8F0FE;
96
+ --input-radio-bg-focused: #E8F0FE;
98
97
  --input-radio-border-color-focused: #E8F0FE;
99
- --switch-background-color: #E4E6EA;
98
+ --switch-bg: #E4E6EA;
100
99
  --switch-border-color: #E4E6EA;
101
- --switch-background-color-checked: #0066DC;
100
+ --switch-bg-checked: #0066DC;
102
101
  --switch-border-color-checked: #0066DC;
103
- --tooltip-background-color: #000;
104
- --tooltip-color: #fff;
105
- --tooltip-border-radius: 4px;
102
+ --tooltip-bg: #000;
103
+ --tooltip-color: #FFF;
104
+ --status-failure: #FF564E;
105
+ --status-failure-bg: rgba(244, 87, 37, .12);
106
+ --status-success: #4AC99B;
107
+ --status-success-bg: rgba(74, 201, 155, .12);
108
+ --status-warning: #ffc700;
109
+ --status-warning-bg: rgba(255, 199, 0, .12);
110
+ --status-info: #70b6f6;
111
+ --status-info-bg: rgba(112, 182, 246, .12);
112
+ --status-neutral: #BCC1CC;
113
+ --status-neutral-bg: #ECEEF2;
106
114
  }
package/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export { default as RadioGroup } from "./RadioGroup";
20
20
  export { default as Select } from "./Select";
21
21
  export { default as Separator } from "./Separator";
22
22
  export { SkeletonText, SkeletonRect } from "./Skeleton";
23
+ export { default as Status } from "./Status";
23
24
  export { default as Switch } from "./Switch";
24
25
  export { default as TabsMenu } from "./TabsMenu";
25
26
  export { default as TabsPanes } from "./TabsPanes";
package/index.js CHANGED
@@ -22,16 +22,17 @@ var index$i = require('./RadioGroup/index.js');
22
22
  var index$j = require('./Select/index.js');
23
23
  var index$k = require('./Separator/index.js');
24
24
  var index$l = require('./Skeleton/index.js');
25
- var index$m = require('./Switch/index.js');
26
- var index$n = require('./TabsMenu/index.js');
27
- var index$o = require('./TabsPanes/index.js');
28
- var index$p = require('./Theme/index.js');
29
- var index$q = require('./Tooltip/index.js');
30
- var index$r = require('./TimeSelect/index.js');
31
- var index$s = require('./Typography/index.js');
32
- var index$t = require('./hooks/useMediaSizes/index.js');
33
- var index$u = require('./hooks/useOnClickOutside/index.js');
34
- var index$v = require('./hooks/useScrollLock/index.js');
25
+ var index$m = require('./Status/index.js');
26
+ var index$n = require('./Switch/index.js');
27
+ var index$o = require('./TabsMenu/index.js');
28
+ var index$p = require('./TabsPanes/index.js');
29
+ var index$q = require('./Theme/index.js');
30
+ var index$r = require('./Tooltip/index.js');
31
+ var index$s = require('./TimeSelect/index.js');
32
+ var index$t = require('./Typography/index.js');
33
+ var index$u = require('./hooks/useMediaSizes/index.js');
34
+ var index$v = require('./hooks/useOnClickOutside/index.js');
35
+ var index$w = require('./hooks/useScrollLock/index.js');
35
36
  require('./Icons/index.js');
36
37
  var ArrowNext = require('./Icons/ArrowNext.js');
37
38
  var Cart = require('./Icons/Cart.js');
@@ -74,16 +75,17 @@ exports.Select = index$j.default;
74
75
  exports.Separator = index$k.default;
75
76
  exports.SkeletonRect = index$l.SkeletonRect;
76
77
  exports.SkeletonText = index$l.SkeletonText;
77
- exports.Switch = index$m.default;
78
- exports.TabsMenu = index$n.default;
79
- exports.TabsPanes = index$o.default;
80
- exports.THEMES = index$p.THEMES;
81
- exports.Tooltip = index$q.default;
82
- exports.TimeSelect = index$r.default;
83
- exports.Typography = index$s.default;
84
- exports.useMediaSizes = index$t.default;
85
- exports.useOnClickOutside = index$u.default;
86
- exports.useScrollLock = index$v.default;
78
+ exports.Status = index$m.default;
79
+ exports.Switch = index$n.default;
80
+ exports.TabsMenu = index$o.default;
81
+ exports.TabsPanes = index$p.default;
82
+ exports.THEMES = index$q.THEMES;
83
+ exports.Tooltip = index$r.default;
84
+ exports.TimeSelect = index$s.default;
85
+ exports.Typography = index$t.default;
86
+ exports.useMediaSizes = index$u.default;
87
+ exports.useOnClickOutside = index$v.default;
88
+ exports.useScrollLock = index$w.default;
87
89
  exports.ArrowNext = ArrowNext.default;
88
90
  exports.Cart = Cart.default;
89
91
  exports.Chevron = Chevron.default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.84",
3
+ "version": "0.7.86",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},
package/theme_ba_variables.css CHANGED
@@ -1,106 +1,114 @@
1
1
  .theme {
2
2
  --palette-black: #000;
3
- --palette-white: #fff;
3
+ --palette-white: #FFF;
4
4
  --palette-bg-1: #ECEEF2;
5
5
  --palette-bg-2: #E4E6EA;
6
6
  --palette-bg-3: #D6D9E0;
7
7
  --palette-bg-4: #C9CDD6;
8
8
  --palette-bg-5: #BCC1CC;
9
- --palette-brand-default-1: #fcdfe2;
10
- --palette-brand-default-2: #facdd2;
11
- --palette-brand-default-3: #F59fa7;
12
- --palette-primary-1: #ffe695;
13
- --palette-primary-2: #ffe07b;
14
- --palette-primary-3: #ffd85a;
15
- --palette-primary-4: #ffce31;
16
- --palette-primary-5: #ffc818;
9
+ --palette-brand-default-1: #FCDFE2;
10
+ --palette-brand-default-2: #FACDD2;
11
+ --palette-brand-default-3: #F59FA7;
12
+ --palette-primary-1: #FFE695;
13
+ --palette-primary-2: #FFE07B;
14
+ --palette-primary-3: #FFD85A;
15
+ --palette-primary-4: #FFCE31;
16
+ --palette-primary-5: #FFC818;
17
17
  --palette-tretiary-1: #DFE7FA;
18
18
  --palette-tretiary-2: #C0CFF8;
19
19
  --palette-tretiary-3: #AFC3F5;
20
20
  --palette-tretiary-4: #80A0ED;
21
- --palette-tretiary-5: #6088ea;
22
- --palette-alert: #ff564e;
23
- --palette-success: #28bc00;
24
- --typography-alert: #ff564e;
25
- --typography-success: #28bc00;
21
+ --palette-tretiary-5: #6088EA;
22
+ --palette-alert: #FF564E;
23
+ --palette-success: #4AC99B;
24
+ --typography-alert: #FF564E;
25
+ --typography-success: #4AC99B;
26
26
  --typography-secondary: #D6D9E0;
27
- --button-border-radius: 18px;
28
27
  --button-primary-color: #000;
29
- --button-primary-background-color: #ffce31;
30
- --button-primary-border-color: #ffce31;
28
+ --button-primary-bg: #FFCE31;
29
+ --button-primary-border-color: #FFCE31;
31
30
  --button-primary-color-hovered: #000;
32
- --button-primary-background-color-hovered: #ffce31;
33
- --button-primary-border-color-hovered: #ffce31;
31
+ --button-primary-bg-hovered: #FFCE31;
32
+ --button-primary-border-color-hovered: #FFCE31;
34
33
  --button-primary-color-active: #000;
35
- --button-primary-background-color-active: #ffc818;
36
- --button-primary-border-color-active: #ffc818;
34
+ --button-primary-bg-active: #FFC818;
35
+ --button-primary-border-color-active: #FFC818;
37
36
  --button-primary-color-disabled: #C9CDD6;
38
- --button-primary-background-color-disabled: #ffe695;
39
- --button-primary-border-color-disabled: #ffe695;
40
- --button-secondary-color: #fff;
41
- --button-secondary-background-color: #1f1f1f;
42
- --button-secondary-border-color: #1f1f1f;
43
- --button-secondary-color-hovered: #fff;
44
- --button-secondary-background-color-hovered: #1f1f1f;
45
- --button-secondary-border-color-hovered: #1f1f1f;
46
- --button-secondary-color-active: #fff;
47
- --button-secondary-background-color-active: #000;
37
+ --button-primary-bg-disabled: #FFE695;
38
+ --button-primary-border-color-disabled: #FFE695;
39
+ --button-secondary-color: #FFF;
40
+ --button-secondary-bg: #1F1F1F;
41
+ --button-secondary-border-color: #1F1F1F;
42
+ --button-secondary-color-hovered: #FFF;
43
+ --button-secondary-bg-hovered: #1F1F1F;
44
+ --button-secondary-border-color-hovered: #1F1F1F;
45
+ --button-secondary-color-active: #FFF;
46
+ --button-secondary-bg-active: #000;
48
47
  --button-secondary-border-color-active: #000;
49
48
  --button-secondary-color-disabled: #C9CDD6;
50
- --button-secondary-background-color-disabled: #ECEEF2;
49
+ --button-secondary-bg-disabled: #ECEEF2;
51
50
  --button-secondary-border-color-disabled: #ECEEF2;
52
51
  --button-outline-color: #000;
53
- --button-outline-background-color: #fff;
54
- --button-outline-border-color: #1f1f1f;
52
+ --button-outline-bg: #FFF;
53
+ --button-outline-border-color: #1F1F1F;
55
54
  --button-outline-color-hovered: #000;
56
- --button-outline-background-color-hovered: #ECEEF2;
57
- --button-outline-border-color-hovered: #1f1f1f;
55
+ --button-outline-bg-hovered: #ECEEF2;
56
+ --button-outline-border-color-hovered: #1F1F1F;
58
57
  --button-outline-color-active: #000;
59
- --button-outline-background-color-active: #E4E6EA;
60
- --button-outline-border-color-active: #1f1f1f;
58
+ --button-outline-bg-active: #E4E6EA;
59
+ --button-outline-border-color-active: #1F1F1F;
61
60
  --button-outline-color-disabled: #C9CDD6;
62
- --button-outline-background-color-disabled: #fff;
61
+ --button-outline-bg-disabled: #FFF;
63
62
  --button-outline-border-color-disabled: #E4E6EA;
64
63
  --button-pseudo-color: #000;
65
- --button-pseudo-background-color: #DFE7FA;
64
+ --button-pseudo-bg: #DFE7FA;
66
65
  --button-pseudo-border-color: #DFE7FA;
67
66
  --button-pseudo-color-hovered: #000;
68
- --button-pseudo-background-color-hovered: #DFE7FA;
67
+ --button-pseudo-bg-hovered: #DFE7FA;
69
68
  --button-pseudo-border-color-hovered: #DFE7FA;
70
69
  --button-pseudo-color-active: #000;
71
- --button-pseudo-background-color-active: #C0CFF8;
70
+ --button-pseudo-bg-active: #C0CFF8;
72
71
  --button-pseudo-border-color-active: #C0CFF8;
73
72
  --button-pseudo-color-disabled: #C9CDD6;
74
- --button-pseudo-background-color-disabled: #DFE7FA;
73
+ --button-pseudo-bg-disabled: #DFE7FA;
75
74
  --button-pseudo-border-color-disabled: #DFE7FA;
76
- --button-clear-color: #1f1f1f;
77
- --button-clear-color-hovered: #1f1f1f;
75
+ --button-clear-color: #1F1F1F;
76
+ --button-clear-color-hovered: #1F1F1F;
78
77
  --button-clear-color-active: #000;
79
78
  --button-clear-color-disabled: #C9CDD6;
80
- --button-clear-background-color-disabled: #fff;
81
- --button-clear-border-color-disabled: #fff;
79
+ --button-clear-bg-disabled: #FFF;
80
+ --button-clear-border-color-disabled: #FFF;
82
81
  --input-primary-border-color: #D6D9E0;
83
82
  --input-primary-plaseholder-color: #E4E6EA;
84
- --input-primary-border-color-error: #ff564e;
85
- --input-primary-background-color-error: #FFEAE2;
83
+ --input-primary-border-color-error: #FF564E;
84
+ --input-primary-bg-error: #FFEAE2;
86
85
  --input-primary-box-shadow-color-error: #FFEAE2;
87
- --checkbox-background-color-checked: #ffce31;
88
- --checkbox-background-color-hovered: #ffce31;
89
- --checkbox-box-shadow-focused: #ffe695;
90
- --checkbox-background-color-active: #ffce31;
91
- --checkbox-border-color-active: #ffce31;
92
- --checkbox-box-shadow-active: #ffce31;
93
- --checkbox-background-color-disabled: #ffe695;
94
- --input-radio-background-color-checked: #ffce31;
95
- --input-radio-background-color-hovered: #ffce31;
96
- --input-radio-box-shadow-focused: #ffe695;
97
- --input-radio-background-color-focused: #ffe695;
98
- --input-radio-border-color-focused: #ffe695;
99
- --switch-background-color: #E4E6EA;
86
+ --checkbox-bg-checked: #FFCE31;
87
+ --checkbox-bg-hovered: #FFCE31;
88
+ --checkbox-box-shadow-focused: #FFE695;
89
+ --checkbox-bg-active: #FFCE31;
90
+ --checkbox-border-color-active: #FFCE31;
91
+ --checkbox-box-shadow-active: #FFCE31;
92
+ --checkbox-bg-disabled: #FFE695;
93
+ --input-radio-bg-checked: #FFCE31;
94
+ --input-radio-bg-hovered: #FFCE31;
95
+ --input-radio-box-shadow-focused: #FFE695;
96
+ --input-radio-bg-focused: #FFE695;
97
+ --input-radio-border-color-focused: #FFE695;
98
+ --switch-bg: #E4E6EA;
100
99
  --switch-border-color: #E4E6EA;
101
- --switch-background-color-checked: #ffc818;
102
- --switch-border-color-checked: #ffc818;
103
- --tooltip-background-color: #333;
104
- --tooltip-color: #fff;
105
- --tooltip-border-radius: 4px;
100
+ --switch-bg-checked: #FFC818;
101
+ --switch-border-color-checked: #FFC818;
102
+ --tooltip-bg: #333;
103
+ --tooltip-color: #FFF;
104
+ --status-failure: #FF564E;
105
+ --status-failure-bg: rgba(244, 87, 37, .12);
106
+ --status-success: #4AC99B;
107
+ --status-success-bg: rgba(74, 201, 155, .12);
108
+ --status-warning: #ffc700;
109
+ --status-warning-bg: rgba(255, 199, 0, .12);
110
+ --status-info: #70b6f6;
111
+ --status-info-bg: rgba(112, 182, 246, .12);
112
+ --status-neutral: #BCC1CC;
113
+ --status-neutral-bg: #ECEEF2;
106
114
  }
package/theme_default_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .theme {
2
2
  --palette-black: #000;
3
- --palette-white: #fff;
3
+ --palette-white: #FFF;
4
4
  --palette-bg-1: #ECEEF2;
5
5
  --palette-bg-2: #E4E6EA;
6
6
  --palette-bg-3: #D6D9E0;
@@ -17,90 +17,98 @@
17
17
  --palette-tretiary-1: #FFF5F0;
18
18
  --palette-tretiary-2: #FFEAE2;
19
19
  --palette-tretiary-3: #FFD8CA;
20
- --palette-tretiary-4: #FFA384 ;
21
- --palette-tretiary-5: #fc5200;
22
- --palette-alert: #ff564e;
23
- --palette-success: #28bc00;
24
- --typography-alert: #ff564e;
25
- --typography-success: #28bc00;
20
+ --palette-tretiary-4: #FFA384;
21
+ --palette-tretiary-5: #FC5200;
22
+ --palette-alert: #FF564E;
23
+ --palette-success: #4AC99B;
24
+ --typography-alert: #FF564E;
25
+ --typography-success: #4AC99B;
26
26
  --typography-secondary: #D6D9E0;
27
- --button-border-radius: 18px;
28
- --button-primary-color: #fff;
29
- --button-primary-background-color: #067AFF;
27
+ --button-primary-color: #FFF;
28
+ --button-primary-bg: #067AFF;
30
29
  --button-primary-border-color: #067AFF;
31
- --button-primary-color-hovered: #fff;
32
- --button-primary-background-color-hovered: #0066DC;
30
+ --button-primary-color-hovered: #FFF;
31
+ --button-primary-bg-hovered: #0066DC;
33
32
  --button-primary-border-color-hovered: #0066DC;
34
- --button-primary-color-active: #fff;
35
- --button-primary-background-color-active: #0066DC;
33
+ --button-primary-color-active: #FFF;
34
+ --button-primary-bg-active: #0066DC;
36
35
  --button-primary-border-color-active: #0066DC;
37
36
  --button-primary-color-disabled: #C9CDD6;
38
- --button-primary-background-color-disabled: #E8F0FE;
37
+ --button-primary-bg-disabled: #E8F0FE;
39
38
  --button-primary-border-color-disabled: #E8F0FE;
40
- --button-secondary-color: #fff;
41
- --button-secondary-background-color: #f4b968;
42
- --button-secondary-border-color: #f4b968;
43
- --button-secondary-color-hovered: #fff;
44
- --button-secondary-background-color-hovered: #ffab0f;
45
- --button-secondary-border-color-hovered: #ffab0f;
46
- --button-secondary-color-active: #fff;
47
- --button-secondary-background-color-active: #ffab0f;
48
- --button-secondary-border-color-active: #ffab0f;
39
+ --button-secondary-color: #FFF;
40
+ --button-secondary-bg: #F4B968;
41
+ --button-secondary-border-color: #F4B968;
42
+ --button-secondary-color-hovered: #FFF;
43
+ --button-secondary-bg-hovered: #FFAB0F;
44
+ --button-secondary-border-color-hovered: #FFAB0F;
45
+ --button-secondary-color-active: #FFF;
46
+ --button-secondary-bg-active: #FFAB0F;
47
+ --button-secondary-border-color-active: #FFAB0F;
49
48
  --button-secondary-color-disabled: #C9CDD6;
50
- --button-secondary-background-color-disabled: #fff1db;
51
- --button-secondary-border-color-disabled: #fff1db;
49
+ --button-secondary-bg-disabled: #FFF1DB;
50
+ --button-secondary-border-color-disabled: #FFF1DB;
52
51
  --button-pseudo-color: #000;
53
- --button-pseudo-background-color: #FFF5F0;
52
+ --button-pseudo-bg: #FFF5F0;
54
53
  --button-pseudo-border-color: #FFF5F0;
55
54
  --button-pseudo-color-hovered: #000;
56
- --button-pseudo-background-color-hovered: #FFF5F0;
55
+ --button-pseudo-bg-hovered: #FFF5F0;
57
56
  --button-pseudo-border-color-hovered: #FFF5F0;
58
57
  --button-pseudo-color-active: #000;
59
- --button-pseudo-background-color-active: #FFEAE2;
58
+ --button-pseudo-bg-active: #FFEAE2;
60
59
  --button-pseudo-border-color-active: #FFEAE2;
61
60
  --button-pseudo-color-disabled: #C9CDD6;
62
- --button-pseudo-background-color-disabled: #FFF5F0;
61
+ --button-pseudo-bg-disabled: #FFF5F0;
63
62
  --button-pseudo-border-color-disabled: #FFF5F0;
64
63
  --button-outline-color: #000;
65
- --button-outline-background-color: #fff;
64
+ --button-outline-bg: #FFF;
66
65
  --button-outline-border-color: #D6D9E0;
67
66
  --button-outline-color-hovered: #000;
68
- --button-outline-background-color-hovered: #ECEEF2;
67
+ --button-outline-bg-hovered: #ECEEF2;
69
68
  --button-outline-border-color-hovered: #D6D9E0;
70
69
  --button-outline-color-active: #000;
71
- --button-outline-background-color-active: #E4E6EA;
70
+ --button-outline-bg-active: #E4E6EA;
72
71
  --button-outline-border-color-active: #D6D9E0;
73
72
  --button-outline-color-disabled: #C9CDD6;
74
- --button-outline-background-color-disabled: #fff;
73
+ --button-outline-bg-disabled: #FFF;
75
74
  --button-outline-border-color-disabled: #E4E6EA;
76
75
  --button-clear-color: #067AFF;
77
76
  --button-clear-color-hovered: #067AFF;
78
77
  --button-clear-color-active: #0066DC;
79
78
  --button-clear-color-disabled: #C9CDD6;
80
- --button-clear-background-color-disabled: #fff;
81
- --button-clear-border-color-disabled: #fff;
79
+ --button-clear-bg-disabled: #FFF;
80
+ --button-clear-border-color-disabled: #FFF;
82
81
  --input-primary-border-color: #D6D9E0;
83
82
  --input-primary-plaseholder-color: #E4E6EA;
84
- --input-primary-border-color-error: #ff564e;
85
- --input-primary-background-color-error: #FFEAE2;
83
+ --input-primary-border-color-error: #FF564E;
84
+ --input-primary-bg-error: #FFEAE2;
86
85
  --input-primary-box-shadow-color-error: #FFEAE2;
87
- --checkbox-background-color-checked: #067AFF;
88
- --checkbox-background-color-hovered: #067AFF;
86
+ --checkbox-bg-checked: #067AFF;
87
+ --checkbox-bg-hovered: #067AFF;
89
88
  --checkbox-box-shadow-focused: #E8F0FE;
90
- --checkbox-background-color-active: #067AFF;
89
+ --checkbox-bg-active: #067AFF;
91
90
  --checkbox-border-color-active: #067AFF;
92
91
  --checkbox-box-shadow-active: #067AFF;
93
- --checkbox-background-color-disabled: #E8F0FE;
94
- --input-radio-background-color-checked: #067AFF;
95
- --input-radio-background-color-hovered: #067AFF;
92
+ --checkbox-bg-disabled: #E8F0FE;
93
+ --input-radio-bg-checked: #067AFF;
94
+ --input-radio-bg-hovered: #067AFF;
96
95
  --input-radio-box-shadow-focused: #E8F0FE;
97
- --input-radio-background-color-focused: #E8F0FE;
96
+ --input-radio-bg-focused: #E8F0FE;
98
97
  --input-radio-border-color-focused: #E8F0FE;
99
- --switch-background-color: #E4E6EA;
98
+ --switch-bg: #E4E6EA;
100
99
  --switch-border-color: #E4E6EA;
101
- --switch-background-color-checked: #0066DC;
100
+ --switch-bg-checked: #0066DC;
102
101
  --switch-border-color-checked: #0066DC;
103
- --tooltip-background-color: #000;
104
- --tooltip-color: #fff;
105
- --tooltip-border-radius: 4px;
102
+ --tooltip-bg: #000;
103
+ --tooltip-color: #FFF;
104
+ --status-failure: #FF564E;
105
+ --status-failure-bg: rgba(244, 87, 37, .12);
106
+ --status-success: #4AC99B;
107
+ --status-success-bg: rgba(74, 201, 155, .12);
108
+ --status-warning: #ffc700;
109
+ --status-warning-bg: rgba(255, 199, 0, .12);
110
+ --status-info: #70b6f6;
111
+ --status-info-bg: rgba(112, 182, 246, .12);
112
+ --status-neutral: #BCC1CC;
113
+ --status-neutral-bg: #ECEEF2;
106
114
  }
package/Avatar/assets/male-circle.svg.js DELETED
@@ -1,62 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
-
7
- function _interopNamespace(e) {
8
- if (e && e.__esModule) return e;
9
- var n = Object.create(null);
10
- if (e) {
11
- Object.keys(e).forEach(function (k) {
12
- if (k !== 'default') {
13
- var d = Object.getOwnPropertyDescriptor(e, k);
14
- Object.defineProperty(n, k, d.get ? d : {
15
- enumerable: true,
16
- get: function () { return e[k]; }
17
- });
18
- }
19
- });
20
- }
21
- n.default = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
-
27
- var _circle, _mask, _g;
28
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
29
- var SvgMaleCircle = function SvgMaleCircle(props) {
30
- return /*#__PURE__*/React__namespace.createElement("svg", _extends({
31
- xmlns: "http://www.w3.org/2000/svg",
32
- width: 42,
33
- height: 42,
34
- fill: "none"
35
- }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
36
- cx: 21,
37
- cy: 21,
38
- r: 21,
39
- fill: "#eceef2"
40
- })), _mask || (_mask = /*#__PURE__*/React__namespace.createElement("mask", {
41
- id: "male-circle_svg__a",
42
- width: 42,
43
- height: 42,
44
- x: 0,
45
- y: 0,
46
- maskUnits: "userSpaceOnUse"
47
- }, /*#__PURE__*/React__namespace.createElement("circle", {
48
- cx: 21,
49
- cy: 21,
50
- r: 21,
51
- fill: "#eceef2"
52
- }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
53
- mask: "url(#male-circle_svg__a)"
54
- }, /*#__PURE__*/React__namespace.createElement("path", {
55
- fill: "#bcc1cc",
56
- d: "M14.263 22.623c.242.876 1.197 1.356 1.38 2.246q.047.22.096.49c.246 1.331.695 1.944 1.228 2.22.398.205.709.595.63 1.036-.055.31-.174.608-.4.816-.52.473-2.07.675-3.75.895-1.26.164-2.592.339-3.613.644-2.443.727-2.742 4.037-2.815 6.318a3.484 3.484 0 0 0 2.937 3.521l9.974 1.576a4 4 0 0 0 1.444-.035l10.016-2.095c2.04-.427 3.428-2.358 2.864-4.364-.46-1.636-1.155-3.386-2.147-4.213-.942-.786-2.864-1.1-4.605-1.384-1.405-.23-2.691-.44-3.248-.863-.388-.294-.448-.848-.409-1.332a.56.56 0 0 1 .26-.409c.882-.597 1.106-1.223 1.477-2.666.076-.299.136-.544.184-.744.116-.483.683-.887.922-1.323.175-.315.862-2.777.862-3.223 0-.497-.676-1.067-.564-1.55.158-.677.318-1.562.318-2.355 0-2.004-1.952-4.829-6.649-4.829-1.683 0-2.276.621-2.839 1.212a1.14 1.14 0 0 1-.857.332c-2.607-.05-2.873 1.175-3.066 2.3-.176 1.03.212 2.85.45 3.811.044.183-.289.539-.45.636-.368.22.124 2.443.37 3.332"
57
- }))));
58
- };
59
- var maleCircleUrl = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20fill%3D%22none%22%20viewBox%3D%220%200%2042%2042%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3Cmask%20id%3D%22male-circle_svg__a%22%20width%3D%2242%22%20height%3D%2242%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23male-circle_svg__a%29%22%3E%3Cpath%20fill%3D%22%23bcc1cc%22%20d%3D%22M14.263%2022.623c.242.876%201.197%201.356%201.38%202.246.031.147.063.31.096.49.246%201.331.695%201.944%201.228%202.22.398.205.709.595.63%201.036-.055.31-.174.608-.4.816-.52.473-2.07.675-3.75.895-1.26.164-2.592.339-3.613.644-2.443.727-2.742%204.037-2.815%206.318a3.484%203.484%200%20002.937%203.521l9.974%201.576a4%204%200%20001.444-.035l10.016-2.095c2.04-.427%203.428-2.358%202.864-4.364-.46-1.636-1.155-3.386-2.147-4.213-.942-.786-2.864-1.1-4.605-1.384-1.405-.23-2.691-.44-3.248-.863-.388-.294-.448-.848-.409-1.332a.56.56%200%2001.26-.409c.882-.597%201.106-1.223%201.477-2.666.076-.299.136-.544.184-.744.116-.483.683-.887.922-1.323.175-.315.862-2.777.862-3.223%200-.497-.676-1.067-.564-1.55.158-.677.318-1.562.318-2.355%200-2.004-1.952-4.829-6.649-4.829-1.683%200-2.276.621-2.839%201.212a1.142%201.142%200%2001-.857.332c-2.607-.05-2.873%201.175-3.066%202.3-.176%201.03.212%202.85.45%203.811.044.183-.289.539-.45.636-.368.22.124%202.443.37%203.332z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
60
-
61
- exports.ReactComponent = SvgMaleCircle;
62
- exports.default = maleCircleUrl;