colibri-ui 0.7.85 → 0.7.87

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 (50) hide show
  1. package/Avatar/assets/user-circle.svg.js +6 -16
  2. package/Button/Button.module.css +18 -18
  3. package/Checkbox/Checkbox.module.css +4 -4
  4. package/InputRadio/InputRadio.module.css +5 -5
  5. package/Status/index.d.ts +4 -0
  6. package/Status/index.js +28 -0
  7. package/Status/index.module.css +45 -0
  8. package/Status/index.props.d.ts +13 -0
  9. package/Status/package.json +6 -0
  10. package/Switch/Switch.module.css +2 -2
  11. package/Theme/colors/common.js +3 -3
  12. package/Theme/colors/theme_buenos_aires.js +13 -13
  13. package/Theme/colors/theme_default.js +7 -7
  14. package/Theme/index.d.ts +76 -60
  15. package/Theme/themes/buenos_aires.d.ts +38 -30
  16. package/Theme/themes/buenos_aires.js +38 -30
  17. package/Theme/themes/default.d.ts +38 -30
  18. package/Theme/themes/default.js +38 -30
  19. package/Tooltip/Tooltip.module.css +3 -3
  20. package/Typography/index.js +2 -2
  21. package/base/InputRoot/InputRoot.module.css +1 -1
  22. package/esm/Avatar/assets/user-circle.svg.js +6 -16
  23. package/esm/Button/Button.module.css +18 -18
  24. package/esm/Checkbox/Checkbox.module.css +4 -4
  25. package/esm/InputRadio/InputRadio.module.css +5 -5
  26. package/esm/Status/index.d.ts +4 -0
  27. package/esm/Status/index.js +18 -0
  28. package/esm/Status/index.module.css +45 -0
  29. package/esm/Status/index.props.d.ts +13 -0
  30. package/esm/Switch/Switch.module.css +2 -2
  31. package/esm/Theme/colors/common.js +3 -3
  32. package/esm/Theme/colors/theme_buenos_aires.js +13 -13
  33. package/esm/Theme/colors/theme_default.js +7 -7
  34. package/esm/Theme/index.d.ts +76 -60
  35. package/esm/Theme/themes/buenos_aires.d.ts +38 -30
  36. package/esm/Theme/themes/buenos_aires.js +38 -30
  37. package/esm/Theme/themes/default.d.ts +38 -30
  38. package/esm/Theme/themes/default.js +38 -30
  39. package/esm/Tooltip/Tooltip.module.css +3 -3
  40. package/esm/Typography/index.js +2 -2
  41. package/esm/base/InputRoot/InputRoot.module.css +1 -1
  42. package/esm/index.d.ts +1 -0
  43. package/esm/index.js +1 -0
  44. package/esm/theme_ba_variables.css +75 -67
  45. package/esm/theme_default_variables.css +58 -50
  46. package/index.d.ts +1 -0
  47. package/index.js +22 -20
  48. package/package.json +1 -1
  49. package/theme_ba_variables.css +75 -67
  50. package/theme_default_variables.css +58 -50
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
  }