colibri-ui 0.7.62 → 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 (27) hide show
  1. package/Button/Button.module.css +35 -7
  2. package/Button/index.js +2 -3
  3. package/Theme/colors/index.d.ts +2 -0
  4. package/Theme/colors/theme_buenos_aires.d.ts +4 -0
  5. package/Theme/colors/theme_buenos_aires.js +20 -18
  6. package/Theme/index.d.ts +82 -0
  7. package/Theme/themes/buenos_aires.d.ts +76 -0
  8. package/Theme/themes/buenos_aires.js +77 -1
  9. package/Theme/themes/default.d.ts +6 -0
  10. package/Theme/themes/default.js +22 -16
  11. package/base/InputRoot/InputRoot.module.css +5 -5
  12. package/esm/Button/Button.module.css +35 -7
  13. package/esm/Button/index.js +2 -3
  14. package/esm/Theme/colors/index.d.ts +2 -0
  15. package/esm/Theme/colors/theme_buenos_aires.d.ts +4 -0
  16. package/esm/Theme/colors/theme_buenos_aires.js +20 -18
  17. package/esm/Theme/index.d.ts +82 -0
  18. package/esm/Theme/themes/buenos_aires.d.ts +76 -0
  19. package/esm/Theme/themes/buenos_aires.js +77 -1
  20. package/esm/Theme/themes/default.d.ts +6 -0
  21. package/esm/Theme/themes/default.js +22 -16
  22. package/esm/base/InputRoot/InputRoot.module.css +5 -5
  23. package/esm/theme_ba_variables.css +89 -13
  24. package/esm/theme_default_variables.css +22 -16
  25. package/package.json +1 -1
  26. package/theme_ba_variables.css +89 -13
  27. package/theme_default_variables.css +22 -16
package/esm/Theme/colors/theme_buenos_aires.d.ts CHANGED
@@ -23,6 +23,8 @@ export declare const BrandBA: {
23
23
  BRAND_BA_1: string;
24
24
  BRAND_BA_2: string;
25
25
  BRAND_BA_3: string;
26
+ BRAND_BA_4: string;
27
+ BRAND_BA_5: string;
26
28
  };
27
29
  export declare const Color: {
28
30
  TRETIARY_BA_1: string;
@@ -43,5 +45,7 @@ export declare const Color: {
43
45
  BRAND_BA_1: string;
44
46
  BRAND_BA_2: string;
45
47
  BRAND_BA_3: string;
48
+ BRAND_BA_4: string;
49
+ BRAND_BA_5: string;
46
50
  };
47
51
  export default Color;
package/esm/Theme/colors/theme_buenos_aires.js CHANGED
@@ -1,30 +1,32 @@
1
1
  import { __assign } from 'tslib';
2
2
 
3
3
  var PrimaryBA = {
4
- PRIMARY_BA_1: "rgba(38, 49, 129, .07)",
5
- PRIMARY_BA_2: "rgba(38, 49, 129, .3)",
6
- PRIMARY_BA_3: "rgba(38, 49, 129, .4)",
7
- PRIMARY_BA_4: "rgba(38, 49, 129, .6)",
8
- PRIMARY_BA_5: "rgba(38, 49, 129, .8)"
4
+ PRIMARY_BA_1: "#ffe695",
5
+ PRIMARY_BA_2: "#ffe07b",
6
+ PRIMARY_BA_3: "#ffd85a",
7
+ PRIMARY_BA_4: "#ffce31",
8
+ PRIMARY_BA_5: "#ffc818"
9
9
  };
10
10
  var SecondaryBA = {
11
- SECONDARY_BA_1: "#d9d9d9",
12
- SECONDARY_BA_2: "#bbb",
13
- SECONDARY_BA_3: "#636363",
14
- SECONDARY_BA_4: "#313131",
15
- SECONDARY_BA_5: "#1a1a1a"
11
+ SECONDARY_BA_1: "#7d7d7d",
12
+ SECONDARY_BA_2: "#5c5c5c",
13
+ SECONDARY_BA_3: "#333",
14
+ SECONDARY_BA_4: "#1f1f1f",
15
+ SECONDARY_BA_5: "#000"
16
16
  };
17
17
  var TretiaryBA = {
18
- TRETIARY_BA_1: "#EDF1F5",
19
- TRETIARY_BA_2: "#d3dbe3",
20
- TRETIARY_BA_3: "#c5cfda",
21
- TRETIARY_BA_4: "#b1bcc8",
22
- TRETIARY_BA_5: "#87929d"
18
+ TRETIARY_BA_1: "#DFE7FA",
19
+ TRETIARY_BA_2: "#C0CFF8",
20
+ TRETIARY_BA_3: "#AFC3F5",
21
+ TRETIARY_BA_4: "#80A0ED",
22
+ TRETIARY_BA_5: "#6088ea"
23
23
  };
24
24
  var BrandBA = {
25
- BRAND_BA_1: "#B54141",
26
- BRAND_BA_2: "#fffbe9",
27
- BRAND_BA_3: "#D5D500"
25
+ BRAND_BA_1: "#fcdfe2",
26
+ BRAND_BA_2: "#facdd2",
27
+ BRAND_BA_3: "#F59fa7",
28
+ BRAND_BA_4: "#ef6975",
29
+ BRAND_BA_5: "#E61428"
28
30
  };
29
31
  var Color = __assign(__assign(__assign(__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA);
30
32
 
package/esm/Theme/index.d.ts CHANGED
@@ -76,8 +76,14 @@ export declare const THEMES: {
76
76
  "button-clear-color": string;
77
77
  "button-clear-color-hovered": string;
78
78
  "button-clear-color-active": string;
79
+ "button-clear-color-disabled": string;
80
+ "button-clear-background-color-disabled": string;
81
+ "button-clear-border-color-disabled": string;
79
82
  "input-primary-border-color": string;
80
83
  "input-primary-plaseholder-color": string;
84
+ "input-primary-border-color-error": string;
85
+ "input-primary-background-color-error": string;
86
+ "input-primary-box-shadow-color-error": string;
81
87
  "checkbox-primary-background-color-checked": string;
82
88
  "checkbox-primary-background-color-hovered": string;
83
89
  "checkbox-primary-box-shadow-focused": string;
@@ -117,5 +123,81 @@ export declare const THEMES: {
117
123
  "palette-tretiary-4": string;
118
124
  "palette-tretiary-5": string;
119
125
  "palette-alert": string;
126
+ "button-border-radius": string;
127
+ "button-primary-color": string;
128
+ "button-primary-background-color": string;
129
+ "button-primary-border-color": string;
130
+ "button-primary-color-hovered": string;
131
+ "button-primary-background-color-hovered": string;
132
+ "button-primary-border-color-hovered": string;
133
+ "button-primary-color-active": string;
134
+ "button-primary-background-color-active": string;
135
+ "button-primary-border-color-active": string;
136
+ "button-primary-color-disabled": string;
137
+ "button-primary-background-color-disabled": string;
138
+ "button-primary-border-color-disabled": string;
139
+ "button-secondary-color": string;
140
+ "button-secondary-background-color": string;
141
+ "button-secondary-border-color": string;
142
+ "button-secondary-color-hovered": string;
143
+ "button-secondary-background-color-hovered": string;
144
+ "button-secondary-border-color-hovered": string;
145
+ "button-secondary-color-active": string;
146
+ "button-secondary-background-color-active": string;
147
+ "button-secondary-border-color-active": string;
148
+ "button-secondary-color-disabled": string;
149
+ "button-secondary-background-color-disabled": string;
150
+ "button-secondary-border-color-disabled": string;
151
+ "button-outline-color": string;
152
+ "button-outline-background-color": string;
153
+ "button-outline-border-color": string;
154
+ "button-outline-color-hovered": string;
155
+ "button-outline-background-color-hovered": string;
156
+ "button-outline-border-color-hovered": string;
157
+ "button-outline-color-active": string;
158
+ "button-outline-background-color-active": string;
159
+ "button-outline-border-color-active": string;
160
+ "button-outline-color-disabled": string;
161
+ "button-outline-background-color-disabled": string;
162
+ "button-outline-border-color-disabled": string;
163
+ "button-pseudo-color": string;
164
+ "button-pseudo-background-color": string;
165
+ "button-pseudo-border-color": string;
166
+ "button-pseudo-color-hovered": string;
167
+ "button-pseudo-background-color-hovered": string;
168
+ "button-pseudo-border-color-hovered": string;
169
+ "button-pseudo-color-active": string;
170
+ "button-pseudo-background-color-active": string;
171
+ "button-pseudo-border-color-active": string;
172
+ "button-pseudo-color-disabled": string;
173
+ "button-pseudo-background-color-disabled": string;
174
+ "button-pseudo-border-color-disabled": string;
175
+ "button-clear-color": string;
176
+ "button-clear-color-hovered": string;
177
+ "button-clear-color-active": string;
178
+ "button-clear-color-disabled": string;
179
+ "button-clear-background-color-disabled": string;
180
+ "button-clear-border-color-disabled": string;
181
+ "input-primary-border-color": string;
182
+ "input-primary-plaseholder-color": string;
183
+ "input-primary-border-color-error": string;
184
+ "input-primary-background-color-error": string;
185
+ "input-primary-box-shadow-color-error": string;
186
+ "checkbox-primary-background-color-checked": string;
187
+ "checkbox-primary-background-color-hovered": string;
188
+ "checkbox-primary-box-shadow-focused": string;
189
+ "checkbox-primary-background-color-active": string;
190
+ "checkbox-primary-border-color-active": string;
191
+ "checkbox-primary-box-shadow-active": string;
192
+ "checkbox-primary-background-color-disabled": string;
193
+ "inputradio-primary-background-color-checked": string;
194
+ "inputradio-primary-background-color-hovered": string;
195
+ "inputradio-primary-box-shadow-focused": string;
196
+ "inputradio-primary-background-color-focused": string;
197
+ "inputradio-primary-border-color-focused": string;
198
+ "switch-primary-background-color": string;
199
+ "switch-primary-border-color": string;
200
+ "switch-primary-background-color-checked": string;
201
+ "switch-primary-border-color-checked": string;
120
202
  };
121
203
  };
package/esm/Theme/themes/buenos_aires.d.ts CHANGED
@@ -20,5 +20,81 @@ declare const _default: {
20
20
  "palette-tretiary-4": string;
21
21
  "palette-tretiary-5": string;
22
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;
23
99
  };
24
100
  export default _default;
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -21,7 +21,83 @@ var THEME_BA = {
21
21
  "palette-tretiary-3": Color.TRETIARY_BA_3,
22
22
  "palette-tretiary-4": Color.TRETIARY_BA_4,
23
23
  "palette-tretiary-5": Color.TRETIARY_BA_5,
24
- "palette-alert": Color.ALERT
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
25
101
  };
26
102
 
27
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
@@ -25,7 +25,7 @@ var THEME_DEFAULT = {
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
30
  "button-primary-background-color": Color.PRIMARY_DEFAULT_4,
31
31
  "button-primary-border-color": Color.PRIMARY_DEFAULT_4,
@@ -35,7 +35,7 @@ var THEME_DEFAULT = {
35
35
  "button-primary-color-active": Color.WHITE,
36
36
  "button-primary-background-color-active": Color.PRIMARY_DEFAULT_5,
37
37
  "button-primary-border-color-active": Color.PRIMARY_DEFAULT_5,
38
- "button-primary-color-disabled": Color.PRIMARY_DEFAULT_2,
38
+ "button-primary-color-disabled": Color.BG_4,
39
39
  "button-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
40
40
  "button-primary-border-color-disabled": Color.PRIMARY_DEFAULT_1,
41
41
  "button-secondary-color": Color.WHITE,
@@ -47,21 +47,21 @@ var THEME_DEFAULT = {
47
47
  "button-secondary-color-active": Color.WHITE,
48
48
  "button-secondary-background-color-active": Color.SECONDARY_DEFAULT_5,
49
49
  "button-secondary-border-color-active": Color.SECONDARY_DEFAULT_5,
50
- "button-secondary-color-disabled": Color.SECONDARY_DEFAULT_2,
50
+ "button-secondary-color-disabled": Color.BG_4,
51
51
  "button-secondary-background-color-disabled": Color.SECONDARY_DEFAULT_1,
52
52
  "button-secondary-border-color-disabled": Color.SECONDARY_DEFAULT_1,
53
- "button-pseudo-color": Color.TRETIARY_DEFAULT_5,
54
- "button-pseudo-background-color": Color.WHITE,
55
- "button-pseudo-border-color": Color.WHITE,
56
- "button-pseudo-color-hovered": Color.TRETIARY_DEFAULT_5,
57
- "button-pseudo-background-color-hovered": Color.TRETIARY_DEFAULT_2,
58
- "button-pseudo-border-color-hovered": Color.TRETIARY_DEFAULT_2,
59
- "button-pseudo-color-active": Color.TRETIARY_DEFAULT_5,
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
60
  "button-pseudo-background-color-active": Color.TRETIARY_DEFAULT_2,
61
61
  "button-pseudo-border-color-active": Color.TRETIARY_DEFAULT_2,
62
- "button-pseudo-color-disabled": Color.SECONDARY_DEFAULT_2,
63
- "button-pseudo-background-color-disabled": Color.SECONDARY_DEFAULT_1,
64
- "button-pseudo-border-color-disabled": Color.SECONDARY_DEFAULT_1,
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,14 +71,20 @@ 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_DEFAULT_2,
75
- "button-outline-background-color-disabled": Color.SECONDARY_DEFAULT_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
77
  "button-clear-color": Color.PRIMARY_DEFAULT_4,
78
- "button-clear-color-hovered": Color.PRIMARY_DEFAULT_5,
78
+ "button-clear-color-hovered": Color.PRIMARY_DEFAULT_4,
79
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,
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,
82
88
  "checkbox-primary-background-color-checked": Color.PRIMARY_DEFAULT_4,
83
89
  "checkbox-primary-background-color-hovered": Color.PRIMARY_DEFAULT_4,
84
90
  "checkbox-primary-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
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
@@ -6,18 +6,94 @@
6
6
  --palette-bg-3: #dbdbdb;
7
7
  --palette-bg-4: #b3b3b3;
8
8
  --palette-bg-5: #999;
9
- --palette-brand-default-1: #B54141;
10
- --palette-brand-default-2: #fffbe9;
11
- --palette-brand-default-3: #D5D500;
12
- --palette-primary-1: rgba(38, 49, 129, .07);
13
- --palette-primary-2: rgba(38, 49, 129, .3);
14
- --palette-primary-3: rgba(38, 49, 129, .4);
15
- --palette-primary-4: rgba(38, 49, 129, .6);
16
- --palette-primary-5: rgba(38, 49, 129, .8);
17
- --palette-tretiary-1: #EDF1F5;
18
- --palette-tretiary-2: #d3dbe3;
19
- --palette-tretiary-3: #c5cfda;
20
- --palette-tretiary-4: #b1bcc8;
21
- --palette-tretiary-5: #87929d;
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
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;
23
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.62",
3
+ "version": "0.7.63",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},