colibri-ui 0.7.61 → 0.7.63

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 (31) hide show
  1. package/Button/Button.module.css +35 -7
  2. package/Button/index.js +2 -3
  3. package/Theme/colors/index.d.ts +17 -15
  4. package/Theme/colors/theme_buenos_aires.d.ts +4 -0
  5. package/Theme/colors/theme_buenos_aires.js +20 -18
  6. package/Theme/colors/theme_default.d.ts +30 -30
  7. package/Theme/colors/theme_default.js +15 -15
  8. package/Theme/index.d.ts +101 -4
  9. package/Theme/themes/buenos_aires.d.ts +95 -4
  10. package/Theme/themes/buenos_aires.js +95 -4
  11. package/Theme/themes/default.d.ts +6 -0
  12. package/Theme/themes/default.js +66 -60
  13. package/base/InputRoot/InputRoot.module.css +5 -5
  14. package/esm/Button/Button.module.css +35 -7
  15. package/esm/Button/index.js +2 -3
  16. package/esm/Theme/colors/index.d.ts +17 -15
  17. package/esm/Theme/colors/theme_buenos_aires.d.ts +4 -0
  18. package/esm/Theme/colors/theme_buenos_aires.js +20 -18
  19. package/esm/Theme/colors/theme_default.d.ts +30 -30
  20. package/esm/Theme/colors/theme_default.js +15 -15
  21. package/esm/Theme/index.d.ts +101 -4
  22. package/esm/Theme/themes/buenos_aires.d.ts +95 -4
  23. package/esm/Theme/themes/buenos_aires.js +95 -4
  24. package/esm/Theme/themes/default.d.ts +6 -0
  25. package/esm/Theme/themes/default.js +66 -60
  26. package/esm/base/InputRoot/InputRoot.module.css +5 -5
  27. package/esm/theme_ba_variables.css +95 -4
  28. package/esm/theme_default_variables.css +22 -16
  29. package/package.json +1 -1
  30. package/theme_ba_variables.css +95 -4
  31. package/theme_default_variables.css +22 -16
package/esm/Theme/themes/buenos_aires.d.ts CHANGED
@@ -1,9 +1,100 @@
1
1
  declare const _default: {
2
- "palette-bg-3": string;
3
2
  "palette-black": string;
4
3
  "palette-white": string;
5
- "palette-brand-ba-1": string;
6
- "palette-brand-ba-2": string;
7
- "palette-brand-ba-3": string;
4
+ "palette-bg-1": string;
5
+ "palette-bg-2": string;
6
+ "palette-bg-3": string;
7
+ "palette-bg-4": string;
8
+ "palette-bg-5": string;
9
+ "palette-brand-default-1": string;
10
+ "palette-brand-default-2": string;
11
+ "palette-brand-default-3": string;
12
+ "palette-primary-1": string;
13
+ "palette-primary-2": string;
14
+ "palette-primary-3": string;
15
+ "palette-primary-4": string;
16
+ "palette-primary-5": string;
17
+ "palette-tretiary-1": string;
18
+ "palette-tretiary-2": string;
19
+ "palette-tretiary-3": string;
20
+ "palette-tretiary-4": string;
21
+ "palette-tretiary-5": string;
22
+ "palette-alert": string;
23
+ "button-border-radius": string;
24
+ "button-primary-color": string;
25
+ "button-primary-background-color": string;
26
+ "button-primary-border-color": string;
27
+ "button-primary-color-hovered": string;
28
+ "button-primary-background-color-hovered": string;
29
+ "button-primary-border-color-hovered": string;
30
+ "button-primary-color-active": string;
31
+ "button-primary-background-color-active": string;
32
+ "button-primary-border-color-active": string;
33
+ "button-primary-color-disabled": string;
34
+ "button-primary-background-color-disabled": string;
35
+ "button-primary-border-color-disabled": string;
36
+ "button-secondary-color": string;
37
+ "button-secondary-background-color": string;
38
+ "button-secondary-border-color": string;
39
+ "button-secondary-color-hovered": string;
40
+ "button-secondary-background-color-hovered": string;
41
+ "button-secondary-border-color-hovered": string;
42
+ "button-secondary-color-active": string;
43
+ "button-secondary-background-color-active": string;
44
+ "button-secondary-border-color-active": string;
45
+ "button-secondary-color-disabled": string;
46
+ "button-secondary-background-color-disabled": string;
47
+ "button-secondary-border-color-disabled": string;
48
+ "button-outline-color": string;
49
+ "button-outline-background-color": string;
50
+ "button-outline-border-color": string;
51
+ "button-outline-color-hovered": string;
52
+ "button-outline-background-color-hovered": string;
53
+ "button-outline-border-color-hovered": string;
54
+ "button-outline-color-active": string;
55
+ "button-outline-background-color-active": string;
56
+ "button-outline-border-color-active": string;
57
+ "button-outline-color-disabled": string;
58
+ "button-outline-background-color-disabled": string;
59
+ "button-outline-border-color-disabled": string;
60
+ "button-pseudo-color": string;
61
+ "button-pseudo-background-color": string;
62
+ "button-pseudo-border-color": string;
63
+ "button-pseudo-color-hovered": string;
64
+ "button-pseudo-background-color-hovered": string;
65
+ "button-pseudo-border-color-hovered": string;
66
+ "button-pseudo-color-active": string;
67
+ "button-pseudo-background-color-active": string;
68
+ "button-pseudo-border-color-active": string;
69
+ "button-pseudo-color-disabled": string;
70
+ "button-pseudo-background-color-disabled": string;
71
+ "button-pseudo-border-color-disabled": string;
72
+ "button-clear-color": string;
73
+ "button-clear-color-hovered": string;
74
+ "button-clear-color-active": string;
75
+ "button-clear-color-disabled": string;
76
+ "button-clear-background-color-disabled": string;
77
+ "button-clear-border-color-disabled": string;
78
+ "input-primary-border-color": string;
79
+ "input-primary-plaseholder-color": string;
80
+ "input-primary-border-color-error": string;
81
+ "input-primary-background-color-error": string;
82
+ "input-primary-box-shadow-color-error": string;
83
+ "checkbox-primary-background-color-checked": string;
84
+ "checkbox-primary-background-color-hovered": string;
85
+ "checkbox-primary-box-shadow-focused": string;
86
+ "checkbox-primary-background-color-active": string;
87
+ "checkbox-primary-border-color-active": string;
88
+ "checkbox-primary-box-shadow-active": string;
89
+ "checkbox-primary-background-color-disabled": string;
90
+ "inputradio-primary-background-color-checked": string;
91
+ "inputradio-primary-background-color-hovered": string;
92
+ "inputradio-primary-box-shadow-focused": string;
93
+ "inputradio-primary-background-color-focused": string;
94
+ "inputradio-primary-border-color-focused": string;
95
+ "switch-primary-background-color": string;
96
+ "switch-primary-border-color": string;
97
+ "switch-primary-background-color-checked": string;
98
+ "switch-primary-border-color-checked": string;
8
99
  };
9
100
  export default _default;
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -1,12 +1,103 @@
1
1
  import Color from '../colors/index.js';
2
2
 
3
3
  var THEME_BA = {
4
- "palette-bg-3": Color.BG_3,
5
4
  "palette-black": Color.BLACK,
6
5
  "palette-white": Color.WHITE,
7
- "palette-brand-ba-1": Color.BRAND_BA_1,
8
- "palette-brand-ba-2": Color.BRAND_BA_2,
9
- "palette-brand-ba-3": Color.BRAND_BA_3
6
+ "palette-bg-1": Color.BG_1,
7
+ "palette-bg-2": Color.BG_2,
8
+ "palette-bg-3": Color.BG_3,
9
+ "palette-bg-4": Color.BG_4,
10
+ "palette-bg-5": Color.BG_5,
11
+ "palette-brand-default-1": Color.BRAND_BA_1,
12
+ "palette-brand-default-2": Color.BRAND_BA_2,
13
+ "palette-brand-default-3": Color.BRAND_BA_3,
14
+ "palette-primary-1": Color.PRIMARY_BA_1,
15
+ "palette-primary-2": Color.PRIMARY_BA_2,
16
+ "palette-primary-3": Color.PRIMARY_BA_3,
17
+ "palette-primary-4": Color.PRIMARY_BA_4,
18
+ "palette-primary-5": Color.PRIMARY_BA_5,
19
+ "palette-tretiary-1": Color.TRETIARY_BA_1,
20
+ "palette-tretiary-2": Color.TRETIARY_BA_2,
21
+ "palette-tretiary-3": Color.TRETIARY_BA_3,
22
+ "palette-tretiary-4": Color.TRETIARY_BA_4,
23
+ "palette-tretiary-5": Color.TRETIARY_BA_5,
24
+ "palette-alert": Color.ALERT,
25
+ "button-border-radius": "18px",
26
+ "button-primary-color": Color.BLACK,
27
+ "button-primary-background-color": Color.PRIMARY_BA_4,
28
+ "button-primary-border-color": Color.PRIMARY_BA_4,
29
+ "button-primary-color-hovered": Color.BLACK,
30
+ "button-primary-background-color-hovered": Color.PRIMARY_BA_4,
31
+ "button-primary-border-color-hovered": Color.PRIMARY_BA_4,
32
+ "button-primary-color-active": Color.BLACK,
33
+ "button-primary-background-color-active": Color.PRIMARY_BA_5,
34
+ "button-primary-border-color-active": Color.PRIMARY_BA_5,
35
+ "button-primary-color-disabled": Color.BG_4,
36
+ "button-primary-background-color-disabled": Color.PRIMARY_BA_1,
37
+ "button-primary-border-color-disabled": Color.PRIMARY_BA_1,
38
+ "button-secondary-color": Color.WHITE,
39
+ "button-secondary-background-color": Color.SECONDARY_BA_4,
40
+ "button-secondary-border-color": Color.SECONDARY_BA_4,
41
+ "button-secondary-color-hovered": Color.WHITE,
42
+ "button-secondary-background-color-hovered": Color.SECONDARY_BA_4,
43
+ "button-secondary-border-color-hovered": Color.SECONDARY_BA_4,
44
+ "button-secondary-color-active": Color.WHITE,
45
+ "button-secondary-background-color-active": Color.SECONDARY_BA_5,
46
+ "button-secondary-border-color-active": Color.SECONDARY_BA_5,
47
+ "button-secondary-color-disabled": Color.BG_4,
48
+ "button-secondary-background-color-disabled": Color.BG_1,
49
+ "button-secondary-border-color-disabled": Color.BG_1,
50
+ "button-outline-color": Color.BLACK,
51
+ "button-outline-background-color": Color.WHITE,
52
+ "button-outline-border-color": Color.SECONDARY_BA_4,
53
+ "button-outline-color-hovered": Color.BLACK,
54
+ "button-outline-background-color-hovered": Color.BG_1,
55
+ "button-outline-border-color-hovered": Color.SECONDARY_BA_4,
56
+ "button-outline-color-active": Color.BLACK,
57
+ "button-outline-background-color-active": Color.BG_2,
58
+ "button-outline-border-color-active": Color.SECONDARY_BA_4,
59
+ "button-outline-color-disabled": Color.BG_4,
60
+ "button-outline-background-color-disabled": Color.WHITE,
61
+ "button-outline-border-color-disabled": Color.BG_2,
62
+ "button-pseudo-color": Color.BLACK,
63
+ "button-pseudo-background-color": Color.TRETIARY_BA_1,
64
+ "button-pseudo-border-color": Color.TRETIARY_BA_1,
65
+ "button-pseudo-color-hovered": Color.BLACK,
66
+ "button-pseudo-background-color-hovered": Color.TRETIARY_BA_1,
67
+ "button-pseudo-border-color-hovered": Color.TRETIARY_BA_1,
68
+ "button-pseudo-color-active": Color.BLACK,
69
+ "button-pseudo-background-color-active": Color.TRETIARY_BA_2,
70
+ "button-pseudo-border-color-active": Color.TRETIARY_BA_2,
71
+ "button-pseudo-color-disabled": Color.BG_4,
72
+ "button-pseudo-background-color-disabled": Color.TRETIARY_BA_1,
73
+ "button-pseudo-border-color-disabled": Color.TRETIARY_BA_1,
74
+ "button-clear-color": Color.SECONDARY_BA_4,
75
+ "button-clear-color-hovered": Color.SECONDARY_BA_4,
76
+ "button-clear-color-active": Color.SECONDARY_BA_5,
77
+ "button-clear-color-disabled": Color.BG_4,
78
+ "button-clear-background-color-disabled": Color.WHITE,
79
+ "button-clear-border-color-disabled": Color.WHITE,
80
+ "input-primary-border-color": Color.BG_3,
81
+ "input-primary-plaseholder-color": Color.BG_2,
82
+ "input-primary-border-color-error": Color.ALERT,
83
+ "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
84
+ "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
85
+ "checkbox-primary-background-color-checked": Color.PRIMARY_BA_4,
86
+ "checkbox-primary-background-color-hovered": Color.PRIMARY_BA_4,
87
+ "checkbox-primary-box-shadow-focused": Color.PRIMARY_BA_1,
88
+ "checkbox-primary-background-color-active": Color.PRIMARY_BA_4,
89
+ "checkbox-primary-border-color-active": Color.PRIMARY_BA_4,
90
+ "checkbox-primary-box-shadow-active": Color.PRIMARY_BA_4,
91
+ "checkbox-primary-background-color-disabled": Color.PRIMARY_BA_1,
92
+ "inputradio-primary-background-color-checked": Color.PRIMARY_BA_4,
93
+ "inputradio-primary-background-color-hovered": Color.PRIMARY_BA_4,
94
+ "inputradio-primary-box-shadow-focused": Color.PRIMARY_BA_1,
95
+ "inputradio-primary-background-color-focused": Color.PRIMARY_BA_1,
96
+ "inputradio-primary-border-color-focused": Color.PRIMARY_BA_1,
97
+ "switch-primary-background-color": Color.BG_2,
98
+ "switch-primary-border-color": Color.BG_2,
99
+ "switch-primary-background-color-checked": Color.PRIMARY_BA_5,
100
+ "switch-primary-border-color-checked": Color.PRIMARY_BA_5
10
101
  };
11
102
 
12
103
  export { THEME_BA as default };
package/esm/Theme/themes/default.d.ts CHANGED
@@ -75,8 +75,14 @@ declare const _default: {
75
75
  "button-clear-color": string;
76
76
  "button-clear-color-hovered": string;
77
77
  "button-clear-color-active": string;
78
+ "button-clear-color-disabled": string;
79
+ "button-clear-background-color-disabled": string;
80
+ "button-clear-border-color-disabled": string;
78
81
  "input-primary-border-color": string;
79
82
  "input-primary-plaseholder-color": string;
83
+ "input-primary-border-color-error": string;
84
+ "input-primary-background-color-error": string;
85
+ "input-primary-box-shadow-color-error": string;
80
86
  "checkbox-primary-background-color-checked": string;
81
87
  "checkbox-primary-background-color-hovered": string;
82
88
  "checkbox-primary-box-shadow-focused": string;
package/esm/Theme/themes/default.js CHANGED
@@ -11,57 +11,57 @@ var THEME_DEFAULT = {
11
11
  "palette-brand-default-1": Color.BRAND_DEFAULT_1,
12
12
  "palette-brand-default-2": Color.BRAND_DEFAULT_2,
13
13
  "palette-brand-default-3": Color.BRAND_DEFAULT_3,
14
- "palette-primary-1": Color.PRIMARY_1,
15
- "palette-primary-2": Color.PRIMARY_2,
16
- "palette-primary-3": Color.PRIMARY_3,
17
- "palette-primary-4": Color.PRIMARY_4,
18
- "palette-primary-5": Color.PRIMARY_5,
19
- "palette-tretiary-1": Color.TRETIARY_1,
20
- "palette-tretiary-2": Color.TRETIARY_2,
21
- "palette-tretiary-3": Color.TRETIARY_3,
22
- "palette-tretiary-4": Color.TRETIARY_4,
23
- "palette-tretiary-5": Color.TRETIARY_5,
14
+ "palette-primary-1": Color.PRIMARY_DEFAULT_1,
15
+ "palette-primary-2": Color.PRIMARY_DEFAULT_2,
16
+ "palette-primary-3": Color.PRIMARY_DEFAULT_3,
17
+ "palette-primary-4": Color.PRIMARY_DEFAULT_4,
18
+ "palette-primary-5": Color.PRIMARY_DEFAULT_5,
19
+ "palette-tretiary-1": Color.TRETIARY_DEFAULT_1,
20
+ "palette-tretiary-2": Color.TRETIARY_DEFAULT_2,
21
+ "palette-tretiary-3": Color.TRETIARY_DEFAULT_3,
22
+ "palette-tretiary-4": Color.TRETIARY_DEFAULT_4,
23
+ "palette-tretiary-5": Color.TRETIARY_DEFAULT_5,
24
24
  "palette-alert": Color.ALERT,
25
25
  "typography-alert": Color.ALERT,
26
26
  "typography-success": Color.SUCCESS,
27
27
  "typography-secondary": Color.BG_3,
28
- "button-border-radius": "26px",
28
+ "button-border-radius": "18px",
29
29
  "button-primary-color": Color.WHITE,
30
- "button-primary-background-color": Color.PRIMARY_4,
31
- "button-primary-border-color": Color.PRIMARY_4,
30
+ "button-primary-background-color": Color.PRIMARY_DEFAULT_4,
31
+ "button-primary-border-color": Color.PRIMARY_DEFAULT_4,
32
32
  "button-primary-color-hovered": Color.WHITE,
33
- "button-primary-background-color-hovered": Color.PRIMARY_5,
34
- "button-primary-border-color-hovered": Color.PRIMARY_5,
33
+ "button-primary-background-color-hovered": Color.PRIMARY_DEFAULT_5,
34
+ "button-primary-border-color-hovered": Color.PRIMARY_DEFAULT_5,
35
35
  "button-primary-color-active": Color.WHITE,
36
- "button-primary-background-color-active": Color.PRIMARY_5,
37
- "button-primary-border-color-active": Color.PRIMARY_5,
38
- "button-primary-color-disabled": Color.PRIMARY_2,
39
- "button-primary-background-color-disabled": Color.PRIMARY_1,
40
- "button-primary-border-color-disabled": Color.PRIMARY_1,
36
+ "button-primary-background-color-active": Color.PRIMARY_DEFAULT_5,
37
+ "button-primary-border-color-active": Color.PRIMARY_DEFAULT_5,
38
+ "button-primary-color-disabled": Color.BG_4,
39
+ "button-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
40
+ "button-primary-border-color-disabled": Color.PRIMARY_DEFAULT_1,
41
41
  "button-secondary-color": Color.WHITE,
42
- "button-secondary-background-color": Color.SECONDARY_4,
43
- "button-secondary-border-color": Color.SECONDARY_4,
42
+ "button-secondary-background-color": Color.SECONDARY_DEFAULT_4,
43
+ "button-secondary-border-color": Color.SECONDARY_DEFAULT_4,
44
44
  "button-secondary-color-hovered": Color.WHITE,
45
- "button-secondary-background-color-hovered": Color.SECONDARY_5,
46
- "button-secondary-border-color-hovered": Color.SECONDARY_5,
45
+ "button-secondary-background-color-hovered": Color.SECONDARY_DEFAULT_5,
46
+ "button-secondary-border-color-hovered": Color.SECONDARY_DEFAULT_5,
47
47
  "button-secondary-color-active": Color.WHITE,
48
- "button-secondary-background-color-active": Color.SECONDARY_5,
49
- "button-secondary-border-color-active": Color.SECONDARY_5,
50
- "button-secondary-color-disabled": Color.SECONDARY_2,
51
- "button-secondary-background-color-disabled": Color.SECONDARY_1,
52
- "button-secondary-border-color-disabled": Color.SECONDARY_1,
53
- "button-pseudo-color": Color.TRETIARY_5,
54
- "button-pseudo-background-color": Color.WHITE,
55
- "button-pseudo-border-color": Color.WHITE,
56
- "button-pseudo-color-hovered": Color.TRETIARY_5,
57
- "button-pseudo-background-color-hovered": Color.TRETIARY_2,
58
- "button-pseudo-border-color-hovered": Color.TRETIARY_2,
59
- "button-pseudo-color-active": Color.TRETIARY_5,
60
- "button-pseudo-background-color-active": Color.TRETIARY_2,
61
- "button-pseudo-border-color-active": Color.TRETIARY_2,
62
- "button-pseudo-color-disabled": Color.SECONDARY_2,
63
- "button-pseudo-background-color-disabled": Color.SECONDARY_1,
64
- "button-pseudo-border-color-disabled": Color.SECONDARY_1,
48
+ "button-secondary-background-color-active": Color.SECONDARY_DEFAULT_5,
49
+ "button-secondary-border-color-active": Color.SECONDARY_DEFAULT_5,
50
+ "button-secondary-color-disabled": Color.BG_4,
51
+ "button-secondary-background-color-disabled": Color.SECONDARY_DEFAULT_1,
52
+ "button-secondary-border-color-disabled": Color.SECONDARY_DEFAULT_1,
53
+ "button-pseudo-color": Color.BLACK,
54
+ "button-pseudo-background-color": Color.TRETIARY_DEFAULT_1,
55
+ "button-pseudo-border-color": Color.TRETIARY_DEFAULT_1,
56
+ "button-pseudo-color-hovered": Color.BLACK,
57
+ "button-pseudo-background-color-hovered": Color.TRETIARY_DEFAULT_1,
58
+ "button-pseudo-border-color-hovered": Color.TRETIARY_DEFAULT_1,
59
+ "button-pseudo-color-active": Color.BLACK,
60
+ "button-pseudo-background-color-active": Color.TRETIARY_DEFAULT_2,
61
+ "button-pseudo-border-color-active": Color.TRETIARY_DEFAULT_2,
62
+ "button-pseudo-color-disabled": Color.BG_4,
63
+ "button-pseudo-background-color-disabled": Color.TRETIARY_DEFAULT_1,
64
+ "button-pseudo-border-color-disabled": Color.TRETIARY_DEFAULT_1,
65
65
  "button-outline-color": Color.BLACK,
66
66
  "button-outline-background-color": Color.WHITE,
67
67
  "button-outline-border-color": Color.BG_3,
@@ -71,30 +71,36 @@ var THEME_DEFAULT = {
71
71
  "button-outline-color-active": Color.BLACK,
72
72
  "button-outline-background-color-active": Color.BG_2,
73
73
  "button-outline-border-color-active": Color.BG_3,
74
- "button-outline-color-disabled": Color.SECONDARY_2,
75
- "button-outline-background-color-disabled": Color.SECONDARY_1,
74
+ "button-outline-color-disabled": Color.BG_4,
75
+ "button-outline-background-color-disabled": Color.WHITE,
76
76
  "button-outline-border-color-disabled": Color.BG_2,
77
- "button-clear-color": Color.PRIMARY_4,
78
- "button-clear-color-hovered": Color.PRIMARY_5,
79
- "button-clear-color-active": Color.PRIMARY_5,
77
+ "button-clear-color": Color.PRIMARY_DEFAULT_4,
78
+ "button-clear-color-hovered": Color.PRIMARY_DEFAULT_4,
79
+ "button-clear-color-active": Color.PRIMARY_DEFAULT_5,
80
+ "button-clear-color-disabled": Color.BG_4,
81
+ "button-clear-background-color-disabled": Color.WHITE,
82
+ "button-clear-border-color-disabled": Color.WHITE,
80
83
  "input-primary-border-color": Color.BG_3,
81
84
  "input-primary-plaseholder-color": Color.BG_2,
82
- "checkbox-primary-background-color-checked": Color.PRIMARY_4,
83
- "checkbox-primary-background-color-hovered": Color.PRIMARY_4,
84
- "checkbox-primary-box-shadow-focused": Color.PRIMARY_1,
85
- "checkbox-primary-background-color-active": Color.PRIMARY_4,
86
- "checkbox-primary-border-color-active": Color.PRIMARY_4,
87
- "checkbox-primary-box-shadow-active": Color.PRIMARY_4,
88
- "checkbox-primary-background-color-disabled": Color.PRIMARY_1,
89
- "inputradio-primary-background-color-checked": Color.PRIMARY_4,
90
- "inputradio-primary-background-color-hovered": Color.PRIMARY_4,
91
- "inputradio-primary-box-shadow-focused": Color.PRIMARY_1,
92
- "inputradio-primary-background-color-focused": Color.PRIMARY_1,
93
- "inputradio-primary-border-color-focused": Color.PRIMARY_1,
85
+ "input-primary-border-color-error": Color.ALERT,
86
+ "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
87
+ "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
88
+ "checkbox-primary-background-color-checked": Color.PRIMARY_DEFAULT_4,
89
+ "checkbox-primary-background-color-hovered": Color.PRIMARY_DEFAULT_4,
90
+ "checkbox-primary-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
91
+ "checkbox-primary-background-color-active": Color.PRIMARY_DEFAULT_4,
92
+ "checkbox-primary-border-color-active": Color.PRIMARY_DEFAULT_4,
93
+ "checkbox-primary-box-shadow-active": Color.PRIMARY_DEFAULT_4,
94
+ "checkbox-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
95
+ "inputradio-primary-background-color-checked": Color.PRIMARY_DEFAULT_4,
96
+ "inputradio-primary-background-color-hovered": Color.PRIMARY_DEFAULT_4,
97
+ "inputradio-primary-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
98
+ "inputradio-primary-background-color-focused": Color.PRIMARY_DEFAULT_1,
99
+ "inputradio-primary-border-color-focused": Color.PRIMARY_DEFAULT_1,
94
100
  "switch-primary-background-color": Color.BG_2,
95
101
  "switch-primary-border-color": Color.BG_2,
96
- "switch-primary-background-color-checked": Color.PRIMARY_5,
97
- "switch-primary-border-color-checked": Color.PRIMARY_5
102
+ "switch-primary-background-color-checked": Color.PRIMARY_DEFAULT_5,
103
+ "switch-primary-border-color-checked": Color.PRIMARY_DEFAULT_5
98
104
  };
99
105
 
100
106
  export { THEME_DEFAULT as default };
package/esm/base/InputRoot/InputRoot.module.css CHANGED
@@ -52,17 +52,17 @@
52
52
  pointer-events: none;
53
53
  }
54
54
  .variant_primary_error {
55
- background-color: var(--palette-tretiary-2);
56
- border-color: var(--palette-alert);
55
+ background-color: var(--input-primary-background-color-error);
56
+ border-color: var(--input-primary-border-color-error);
57
57
  }
58
58
  .variant_primary_error:hover {
59
59
  background-color: var(--palette-white);
60
- border-color: var(--palette-alert);
61
- box-shadow: 0 0 0 2px var(--palette-tretiary-2);
60
+ border-color: var(--input-primary-border-color-error);
61
+ box-shadow: 0 0 0 2px var(--input-primary-box-shadow-color-error);
62
62
  }
63
63
  .variant_primary_error:focus, .variant_primary_error:focus-within {
64
64
  background-color: var(--palette-white);
65
- border-color: var(--palette-alert);
65
+ border-color: var(--input-primary-border-color-error);
66
66
  }
67
67
 
68
68
  .size_s {
package/esm/theme_ba_variables.css CHANGED
@@ -1,8 +1,99 @@
1
1
  .theme {
2
- --palette-bg-3: #dbdbdb;
3
2
  --palette-black: #000;
4
3
  --palette-white: #fff;
5
- --palette-brand-ba-1: #B54141;
6
- --palette-brand-ba-2: #fffbe9;
7
- --palette-brand-ba-3: #D5D500;
4
+ --palette-bg-1: #f2f2f2;
5
+ --palette-bg-2: #e6e6e6;
6
+ --palette-bg-3: #dbdbdb;
7
+ --palette-bg-4: #b3b3b3;
8
+ --palette-bg-5: #999;
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
+ --palette-tretiary-1: #DFE7FA;
18
+ --palette-tretiary-2: #C0CFF8;
19
+ --palette-tretiary-3: #AFC3F5;
20
+ --palette-tretiary-4: #80A0ED;
21
+ --palette-tretiary-5: #6088ea;
22
+ --palette-alert: #ff564e;
23
+ --button-border-radius: 18px;
24
+ --button-primary-color: #000;
25
+ --button-primary-background-color: #ffce31;
26
+ --button-primary-border-color: #ffce31;
27
+ --button-primary-color-hovered: #000;
28
+ --button-primary-background-color-hovered: #ffce31;
29
+ --button-primary-border-color-hovered: #ffce31;
30
+ --button-primary-color-active: #000;
31
+ --button-primary-background-color-active: #ffc818;
32
+ --button-primary-border-color-active: #ffc818;
33
+ --button-primary-color-disabled: #b3b3b3;
34
+ --button-primary-background-color-disabled: #ffe695;
35
+ --button-primary-border-color-disabled: #ffe695;
36
+ --button-secondary-color: #fff;
37
+ --button-secondary-background-color: #1f1f1f;
38
+ --button-secondary-border-color: #1f1f1f;
39
+ --button-secondary-color-hovered: #fff;
40
+ --button-secondary-background-color-hovered: #1f1f1f;
41
+ --button-secondary-border-color-hovered: #1f1f1f;
42
+ --button-secondary-color-active: #fff;
43
+ --button-secondary-background-color-active: #000;
44
+ --button-secondary-border-color-active: #000;
45
+ --button-secondary-color-disabled: #b3b3b3;
46
+ --button-secondary-background-color-disabled: #f2f2f2;
47
+ --button-secondary-border-color-disabled: #f2f2f2;
48
+ --button-outline-color: #000;
49
+ --button-outline-background-color: #fff;
50
+ --button-outline-border-color: #1f1f1f;
51
+ --button-outline-color-hovered: #000;
52
+ --button-outline-background-color-hovered: #f2f2f2;
53
+ --button-outline-border-color-hovered: #1f1f1f;
54
+ --button-outline-color-active: #000;
55
+ --button-outline-background-color-active: #e6e6e6;
56
+ --button-outline-border-color-active: #1f1f1f;
57
+ --button-outline-color-disabled: #b3b3b3;
58
+ --button-outline-background-color-disabled: #fff;
59
+ --button-outline-border-color-disabled: #e6e6e6;
60
+ --button-pseudo-color: #000;
61
+ --button-pseudo-background-color: #DFE7FA;
62
+ --button-pseudo-border-color: #DFE7FA;
63
+ --button-pseudo-color-hovered: #000;
64
+ --button-pseudo-background-color-hovered: #DFE7FA;
65
+ --button-pseudo-border-color-hovered: #DFE7FA;
66
+ --button-pseudo-color-active: #000;
67
+ --button-pseudo-background-color-active: #C0CFF8;
68
+ --button-pseudo-border-color-active: #C0CFF8;
69
+ --button-pseudo-color-disabled: #b3b3b3;
70
+ --button-pseudo-background-color-disabled: #DFE7FA;
71
+ --button-pseudo-border-color-disabled: #DFE7FA;
72
+ --button-clear-color: #1f1f1f;
73
+ --button-clear-color-hovered: #1f1f1f;
74
+ --button-clear-color-active: #000;
75
+ --button-clear-color-disabled: #b3b3b3;
76
+ --button-clear-background-color-disabled: #fff;
77
+ --button-clear-border-color-disabled: #fff;
78
+ --input-primary-border-color: #dbdbdb;
79
+ --input-primary-plaseholder-color: #e6e6e6;
80
+ --input-primary-border-color-error: #ff564e;
81
+ --input-primary-background-color-error: #FFEAE2;
82
+ --input-primary-box-shadow-color-error: #FFEAE2;
83
+ --checkbox-primary-background-color-checked: #ffce31;
84
+ --checkbox-primary-background-color-hovered: #ffce31;
85
+ --checkbox-primary-box-shadow-focused: #ffe695;
86
+ --checkbox-primary-background-color-active: #ffce31;
87
+ --checkbox-primary-border-color-active: #ffce31;
88
+ --checkbox-primary-box-shadow-active: #ffce31;
89
+ --checkbox-primary-background-color-disabled: #ffe695;
90
+ --inputradio-primary-background-color-checked: #ffce31;
91
+ --inputradio-primary-background-color-hovered: #ffce31;
92
+ --inputradio-primary-box-shadow-focused: #ffe695;
93
+ --inputradio-primary-background-color-focused: #ffe695;
94
+ --inputradio-primary-border-color-focused: #ffe695;
95
+ --switch-primary-background-color: #e6e6e6;
96
+ --switch-primary-border-color: #e6e6e6;
97
+ --switch-primary-background-color-checked: #ffc818;
98
+ --switch-primary-border-color-checked: #ffc818;
8
99
  }
package/esm/theme_default_variables.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --typography-alert: #ff564e;
24
24
  --typography-success: #28bc00;
25
25
  --typography-secondary: #dbdbdb;
26
- --button-border-radius: 26px;
26
+ --button-border-radius: 18px;
27
27
  --button-primary-color: #fff;
28
28
  --button-primary-background-color: #067AFF;
29
29
  --button-primary-border-color: #067AFF;
@@ -33,7 +33,7 @@
33
33
  --button-primary-color-active: #fff;
34
34
  --button-primary-background-color-active: #0066DC;
35
35
  --button-primary-border-color-active: #0066DC;
36
- --button-primary-color-disabled: #B8D2FF;
36
+ --button-primary-color-disabled: #b3b3b3;
37
37
  --button-primary-background-color-disabled: #E8F0FE;
38
38
  --button-primary-border-color-disabled: #E8F0FE;
39
39
  --button-secondary-color: #fff;
@@ -45,21 +45,21 @@
45
45
  --button-secondary-color-active: #fff;
46
46
  --button-secondary-background-color-active: #ffab0f;
47
47
  --button-secondary-border-color-active: #ffab0f;
48
- --button-secondary-color-disabled: #ffdaa3;
48
+ --button-secondary-color-disabled: #b3b3b3;
49
49
  --button-secondary-background-color-disabled: #fff1db;
50
50
  --button-secondary-border-color-disabled: #fff1db;
51
- --button-pseudo-color: #fc5200;
52
- --button-pseudo-background-color: #fff;
53
- --button-pseudo-border-color: #fff;
54
- --button-pseudo-color-hovered: #fc5200;
55
- --button-pseudo-background-color-hovered: #FFEAE2;
56
- --button-pseudo-border-color-hovered: #FFEAE2;
57
- --button-pseudo-color-active: #fc5200;
51
+ --button-pseudo-color: #000;
52
+ --button-pseudo-background-color: #FFF5F0;
53
+ --button-pseudo-border-color: #FFF5F0;
54
+ --button-pseudo-color-hovered: #000;
55
+ --button-pseudo-background-color-hovered: #FFF5F0;
56
+ --button-pseudo-border-color-hovered: #FFF5F0;
57
+ --button-pseudo-color-active: #000;
58
58
  --button-pseudo-background-color-active: #FFEAE2;
59
59
  --button-pseudo-border-color-active: #FFEAE2;
60
- --button-pseudo-color-disabled: #ffdaa3;
61
- --button-pseudo-background-color-disabled: #fff1db;
62
- --button-pseudo-border-color-disabled: #fff1db;
60
+ --button-pseudo-color-disabled: #b3b3b3;
61
+ --button-pseudo-background-color-disabled: #FFF5F0;
62
+ --button-pseudo-border-color-disabled: #FFF5F0;
63
63
  --button-outline-color: #000;
64
64
  --button-outline-background-color: #fff;
65
65
  --button-outline-border-color: #dbdbdb;
@@ -69,14 +69,20 @@
69
69
  --button-outline-color-active: #000;
70
70
  --button-outline-background-color-active: #e6e6e6;
71
71
  --button-outline-border-color-active: #dbdbdb;
72
- --button-outline-color-disabled: #ffdaa3;
73
- --button-outline-background-color-disabled: #fff1db;
72
+ --button-outline-color-disabled: #b3b3b3;
73
+ --button-outline-background-color-disabled: #fff;
74
74
  --button-outline-border-color-disabled: #e6e6e6;
75
75
  --button-clear-color: #067AFF;
76
- --button-clear-color-hovered: #0066DC;
76
+ --button-clear-color-hovered: #067AFF;
77
77
  --button-clear-color-active: #0066DC;
78
+ --button-clear-color-disabled: #b3b3b3;
79
+ --button-clear-background-color-disabled: #fff;
80
+ --button-clear-border-color-disabled: #fff;
78
81
  --input-primary-border-color: #dbdbdb;
79
82
  --input-primary-plaseholder-color: #e6e6e6;
83
+ --input-primary-border-color-error: #ff564e;
84
+ --input-primary-background-color-error: #FFEAE2;
85
+ --input-primary-box-shadow-color-error: #FFEAE2;
80
86
  --checkbox-primary-background-color-checked: #067AFF;
81
87
  --checkbox-primary-background-color-hovered: #067AFF;
82
88
  --checkbox-primary-box-shadow-focused: #E8F0FE;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.61",
3
+ "version": "0.7.63",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},