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/Button/Button.module.css CHANGED
@@ -41,13 +41,6 @@
41
41
  .root_fullWidth {
42
42
  width: 100%;
43
43
  }
44
- .root_disabled {
45
- background-color: var(--button-primary-background-color-disabled);
46
- border-color: var(--button-primary-border-color-disabled);
47
- color: var(--button-primary-color-disabled);
48
- cursor: not-allowed;
49
- pointer-events: none;
50
- }
51
44
 
52
45
  .icon {
53
46
  display: flex;
@@ -89,6 +82,13 @@
89
82
  border-color: var(--button-primary-border-color-active);
90
83
  color: var(--button-primary-color-active);
91
84
  }
85
+ .variant_primary_disabled {
86
+ background-color: var(--button-primary-background-color-disabled);
87
+ border-color: var(--button-primary-border-color-disabled);
88
+ color: var(--button-primary-color-disabled);
89
+ cursor: not-allowed;
90
+ pointer-events: none;
91
+ }
92
92
  .variant_secondary {
93
93
  background-color: var(--button-secondary-background-color);
94
94
  border-color: var(--button-secondary-border-color);
@@ -104,6 +104,13 @@
104
104
  border-color: var(--button-secondary-border-color-active);
105
105
  color: var(--button-secondary-color-active);
106
106
  }
107
+ .variant_secondary_disabled {
108
+ background-color: var(--button-secondary-background-color-disabled);
109
+ border-color: var(--button-secondary-border-color-disabled);
110
+ color: var(--button-secondary-color-disabled);
111
+ cursor: not-allowed;
112
+ pointer-events: none;
113
+ }
107
114
  .variant_pseudo {
108
115
  background-color: var(--button-pseudo-background-color);
109
116
  border-color: var(--button-pseudo-border-color);
@@ -119,6 +126,13 @@
119
126
  border-color: var(--button-pseudo-border-color-active);
120
127
  color: var(--button-pseudo-color-active);
121
128
  }
129
+ .variant_pseudo_disabled {
130
+ background-color: var(--button-pseudo-background-color-disabled);
131
+ border-color: var(--button-pseudo-border-color-disabled);
132
+ color: var(--button-pseudo-color-disabled);
133
+ cursor: not-allowed;
134
+ pointer-events: none;
135
+ }
122
136
  .variant_outline {
123
137
  background-color: var(--button-outline-background-color);
124
138
  border-color: var(--button-outline-border-color);
@@ -134,6 +148,13 @@
134
148
  border-color: var(--button-outline-border-color-active);
135
149
  color: var(--button-outline-color-active);
136
150
  }
151
+ .variant_outline_disabled {
152
+ background-color: var(--button-outline-background-color-disabled);
153
+ border-color: var(--button-outline-border-color-disabled);
154
+ color: var(--button-outline-color-disabled);
155
+ cursor: not-allowed;
156
+ pointer-events: none;
157
+ }
137
158
  .variant_clear {
138
159
  background-color: transparent;
139
160
  border-color: transparent;
@@ -144,4 +165,11 @@
144
165
  }
145
166
  .variant_clear:active {
146
167
  color: var(--button-clear-color-active);
168
+ }
169
+ .variant_clear_disabled {
170
+ background-color: var(--button-clear-background-color-disabled);
171
+ border-color: var(--button-clear-border-color-disabled);
172
+ color: var(--button-clear-color-disabled);
173
+ cursor: not-allowed;
174
+ pointer-events: none;
147
175
  }
package/Button/index.js CHANGED
@@ -34,9 +34,8 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
34
34
  ref: ref,
35
35
  className: clx(styles__default.default.root, (_b = {
36
36
  root_icon: !!icon,
37
- root_disabled: disabled ? 1 : 0,
38
- root_fullWidth: fullWidth ? 1 : 0
39
- }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className),
37
+ root_fullWidth: !!fullWidth
38
+ }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
40
39
  disabled: disabled,
41
40
  "data-cy": "button"
42
41
  }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
package/Theme/colors/index.d.ts CHANGED
@@ -35,6 +35,8 @@ declare const _default: {
35
35
  BRAND_BA_1: string;
36
36
  BRAND_BA_2: string;
37
37
  BRAND_BA_3: string;
38
+ BRAND_BA_4: string;
39
+ BRAND_BA_5: string;
38
40
  BG_1: string;
39
41
  BG_2: string;
40
42
  BG_3: string;
package/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/Theme/colors/theme_buenos_aires.js CHANGED
@@ -5,30 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib = require('tslib');
6
6
 
7
7
  var PrimaryBA = {
8
- PRIMARY_BA_1: "rgba(38, 49, 129, .07)",
9
- PRIMARY_BA_2: "rgba(38, 49, 129, .3)",
10
- PRIMARY_BA_3: "rgba(38, 49, 129, .4)",
11
- PRIMARY_BA_4: "rgba(38, 49, 129, .6)",
12
- PRIMARY_BA_5: "rgba(38, 49, 129, .8)"
8
+ PRIMARY_BA_1: "#ffe695",
9
+ PRIMARY_BA_2: "#ffe07b",
10
+ PRIMARY_BA_3: "#ffd85a",
11
+ PRIMARY_BA_4: "#ffce31",
12
+ PRIMARY_BA_5: "#ffc818"
13
13
  };
14
14
  var SecondaryBA = {
15
- SECONDARY_BA_1: "#d9d9d9",
16
- SECONDARY_BA_2: "#bbb",
17
- SECONDARY_BA_3: "#636363",
18
- SECONDARY_BA_4: "#313131",
19
- SECONDARY_BA_5: "#1a1a1a"
15
+ SECONDARY_BA_1: "#7d7d7d",
16
+ SECONDARY_BA_2: "#5c5c5c",
17
+ SECONDARY_BA_3: "#333",
18
+ SECONDARY_BA_4: "#1f1f1f",
19
+ SECONDARY_BA_5: "#000"
20
20
  };
21
21
  var TretiaryBA = {
22
- TRETIARY_BA_1: "#EDF1F5",
23
- TRETIARY_BA_2: "#d3dbe3",
24
- TRETIARY_BA_3: "#c5cfda",
25
- TRETIARY_BA_4: "#b1bcc8",
26
- TRETIARY_BA_5: "#87929d"
22
+ TRETIARY_BA_1: "#DFE7FA",
23
+ TRETIARY_BA_2: "#C0CFF8",
24
+ TRETIARY_BA_3: "#AFC3F5",
25
+ TRETIARY_BA_4: "#80A0ED",
26
+ TRETIARY_BA_5: "#6088ea"
27
27
  };
28
28
  var BrandBA = {
29
- BRAND_BA_1: "#B54141",
30
- BRAND_BA_2: "#fffbe9",
31
- BRAND_BA_3: "#D5D500"
29
+ BRAND_BA_1: "#fcdfe2",
30
+ BRAND_BA_2: "#facdd2",
31
+ BRAND_BA_3: "#F59fa7",
32
+ BRAND_BA_4: "#ef6975",
33
+ BRAND_BA_5: "#E61428"
32
34
  };
33
35
  var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA);
34
36
 
package/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/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/Theme/themes/buenos_aires.js CHANGED
@@ -25,7 +25,83 @@ var THEME_BA = {
25
25
  "palette-tretiary-3": index.default.TRETIARY_BA_3,
26
26
  "palette-tretiary-4": index.default.TRETIARY_BA_4,
27
27
  "palette-tretiary-5": index.default.TRETIARY_BA_5,
28
- "palette-alert": index.default.ALERT
28
+ "palette-alert": index.default.ALERT,
29
+ "button-border-radius": "18px",
30
+ "button-primary-color": index.default.BLACK,
31
+ "button-primary-background-color": index.default.PRIMARY_BA_4,
32
+ "button-primary-border-color": index.default.PRIMARY_BA_4,
33
+ "button-primary-color-hovered": index.default.BLACK,
34
+ "button-primary-background-color-hovered": index.default.PRIMARY_BA_4,
35
+ "button-primary-border-color-hovered": index.default.PRIMARY_BA_4,
36
+ "button-primary-color-active": index.default.BLACK,
37
+ "button-primary-background-color-active": index.default.PRIMARY_BA_5,
38
+ "button-primary-border-color-active": index.default.PRIMARY_BA_5,
39
+ "button-primary-color-disabled": index.default.BG_4,
40
+ "button-primary-background-color-disabled": index.default.PRIMARY_BA_1,
41
+ "button-primary-border-color-disabled": index.default.PRIMARY_BA_1,
42
+ "button-secondary-color": index.default.WHITE,
43
+ "button-secondary-background-color": index.default.SECONDARY_BA_4,
44
+ "button-secondary-border-color": index.default.SECONDARY_BA_4,
45
+ "button-secondary-color-hovered": index.default.WHITE,
46
+ "button-secondary-background-color-hovered": index.default.SECONDARY_BA_4,
47
+ "button-secondary-border-color-hovered": index.default.SECONDARY_BA_4,
48
+ "button-secondary-color-active": index.default.WHITE,
49
+ "button-secondary-background-color-active": index.default.SECONDARY_BA_5,
50
+ "button-secondary-border-color-active": index.default.SECONDARY_BA_5,
51
+ "button-secondary-color-disabled": index.default.BG_4,
52
+ "button-secondary-background-color-disabled": index.default.BG_1,
53
+ "button-secondary-border-color-disabled": index.default.BG_1,
54
+ "button-outline-color": index.default.BLACK,
55
+ "button-outline-background-color": index.default.WHITE,
56
+ "button-outline-border-color": index.default.SECONDARY_BA_4,
57
+ "button-outline-color-hovered": index.default.BLACK,
58
+ "button-outline-background-color-hovered": index.default.BG_1,
59
+ "button-outline-border-color-hovered": index.default.SECONDARY_BA_4,
60
+ "button-outline-color-active": index.default.BLACK,
61
+ "button-outline-background-color-active": index.default.BG_2,
62
+ "button-outline-border-color-active": index.default.SECONDARY_BA_4,
63
+ "button-outline-color-disabled": index.default.BG_4,
64
+ "button-outline-background-color-disabled": index.default.WHITE,
65
+ "button-outline-border-color-disabled": index.default.BG_2,
66
+ "button-pseudo-color": index.default.BLACK,
67
+ "button-pseudo-background-color": index.default.TRETIARY_BA_1,
68
+ "button-pseudo-border-color": index.default.TRETIARY_BA_1,
69
+ "button-pseudo-color-hovered": index.default.BLACK,
70
+ "button-pseudo-background-color-hovered": index.default.TRETIARY_BA_1,
71
+ "button-pseudo-border-color-hovered": index.default.TRETIARY_BA_1,
72
+ "button-pseudo-color-active": index.default.BLACK,
73
+ "button-pseudo-background-color-active": index.default.TRETIARY_BA_2,
74
+ "button-pseudo-border-color-active": index.default.TRETIARY_BA_2,
75
+ "button-pseudo-color-disabled": index.default.BG_4,
76
+ "button-pseudo-background-color-disabled": index.default.TRETIARY_BA_1,
77
+ "button-pseudo-border-color-disabled": index.default.TRETIARY_BA_1,
78
+ "button-clear-color": index.default.SECONDARY_BA_4,
79
+ "button-clear-color-hovered": index.default.SECONDARY_BA_4,
80
+ "button-clear-color-active": index.default.SECONDARY_BA_5,
81
+ "button-clear-color-disabled": index.default.BG_4,
82
+ "button-clear-background-color-disabled": index.default.WHITE,
83
+ "button-clear-border-color-disabled": index.default.WHITE,
84
+ "input-primary-border-color": index.default.BG_3,
85
+ "input-primary-plaseholder-color": index.default.BG_2,
86
+ "input-primary-border-color-error": index.default.ALERT,
87
+ "input-primary-background-color-error": index.default.TRETIARY_DEFAULT_2,
88
+ "input-primary-box-shadow-color-error": index.default.TRETIARY_DEFAULT_2,
89
+ "checkbox-primary-background-color-checked": index.default.PRIMARY_BA_4,
90
+ "checkbox-primary-background-color-hovered": index.default.PRIMARY_BA_4,
91
+ "checkbox-primary-box-shadow-focused": index.default.PRIMARY_BA_1,
92
+ "checkbox-primary-background-color-active": index.default.PRIMARY_BA_4,
93
+ "checkbox-primary-border-color-active": index.default.PRIMARY_BA_4,
94
+ "checkbox-primary-box-shadow-active": index.default.PRIMARY_BA_4,
95
+ "checkbox-primary-background-color-disabled": index.default.PRIMARY_BA_1,
96
+ "inputradio-primary-background-color-checked": index.default.PRIMARY_BA_4,
97
+ "inputradio-primary-background-color-hovered": index.default.PRIMARY_BA_4,
98
+ "inputradio-primary-box-shadow-focused": index.default.PRIMARY_BA_1,
99
+ "inputradio-primary-background-color-focused": index.default.PRIMARY_BA_1,
100
+ "inputradio-primary-border-color-focused": index.default.PRIMARY_BA_1,
101
+ "switch-primary-background-color": index.default.BG_2,
102
+ "switch-primary-border-color": index.default.BG_2,
103
+ "switch-primary-background-color-checked": index.default.PRIMARY_BA_5,
104
+ "switch-primary-border-color-checked": index.default.PRIMARY_BA_5
29
105
  };
30
106
 
31
107
  exports.default = THEME_BA;
package/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/Theme/themes/default.js CHANGED
@@ -29,7 +29,7 @@ var THEME_DEFAULT = {
29
29
  "typography-alert": index.default.ALERT,
30
30
  "typography-success": index.default.SUCCESS,
31
31
  "typography-secondary": index.default.BG_3,
32
- "button-border-radius": "26px",
32
+ "button-border-radius": "18px",
33
33
  "button-primary-color": index.default.WHITE,
34
34
  "button-primary-background-color": index.default.PRIMARY_DEFAULT_4,
35
35
  "button-primary-border-color": index.default.PRIMARY_DEFAULT_4,
@@ -39,7 +39,7 @@ var THEME_DEFAULT = {
39
39
  "button-primary-color-active": index.default.WHITE,
40
40
  "button-primary-background-color-active": index.default.PRIMARY_DEFAULT_5,
41
41
  "button-primary-border-color-active": index.default.PRIMARY_DEFAULT_5,
42
- "button-primary-color-disabled": index.default.PRIMARY_DEFAULT_2,
42
+ "button-primary-color-disabled": index.default.BG_4,
43
43
  "button-primary-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
44
44
  "button-primary-border-color-disabled": index.default.PRIMARY_DEFAULT_1,
45
45
  "button-secondary-color": index.default.WHITE,
@@ -51,21 +51,21 @@ var THEME_DEFAULT = {
51
51
  "button-secondary-color-active": index.default.WHITE,
52
52
  "button-secondary-background-color-active": index.default.SECONDARY_DEFAULT_5,
53
53
  "button-secondary-border-color-active": index.default.SECONDARY_DEFAULT_5,
54
- "button-secondary-color-disabled": index.default.SECONDARY_DEFAULT_2,
54
+ "button-secondary-color-disabled": index.default.BG_4,
55
55
  "button-secondary-background-color-disabled": index.default.SECONDARY_DEFAULT_1,
56
56
  "button-secondary-border-color-disabled": index.default.SECONDARY_DEFAULT_1,
57
- "button-pseudo-color": index.default.TRETIARY_DEFAULT_5,
58
- "button-pseudo-background-color": index.default.WHITE,
59
- "button-pseudo-border-color": index.default.WHITE,
60
- "button-pseudo-color-hovered": index.default.TRETIARY_DEFAULT_5,
61
- "button-pseudo-background-color-hovered": index.default.TRETIARY_DEFAULT_2,
62
- "button-pseudo-border-color-hovered": index.default.TRETIARY_DEFAULT_2,
63
- "button-pseudo-color-active": index.default.TRETIARY_DEFAULT_5,
57
+ "button-pseudo-color": index.default.BLACK,
58
+ "button-pseudo-background-color": index.default.TRETIARY_DEFAULT_1,
59
+ "button-pseudo-border-color": index.default.TRETIARY_DEFAULT_1,
60
+ "button-pseudo-color-hovered": index.default.BLACK,
61
+ "button-pseudo-background-color-hovered": index.default.TRETIARY_DEFAULT_1,
62
+ "button-pseudo-border-color-hovered": index.default.TRETIARY_DEFAULT_1,
63
+ "button-pseudo-color-active": index.default.BLACK,
64
64
  "button-pseudo-background-color-active": index.default.TRETIARY_DEFAULT_2,
65
65
  "button-pseudo-border-color-active": index.default.TRETIARY_DEFAULT_2,
66
- "button-pseudo-color-disabled": index.default.SECONDARY_DEFAULT_2,
67
- "button-pseudo-background-color-disabled": index.default.SECONDARY_DEFAULT_1,
68
- "button-pseudo-border-color-disabled": index.default.SECONDARY_DEFAULT_1,
66
+ "button-pseudo-color-disabled": index.default.BG_4,
67
+ "button-pseudo-background-color-disabled": index.default.TRETIARY_DEFAULT_1,
68
+ "button-pseudo-border-color-disabled": index.default.TRETIARY_DEFAULT_1,
69
69
  "button-outline-color": index.default.BLACK,
70
70
  "button-outline-background-color": index.default.WHITE,
71
71
  "button-outline-border-color": index.default.BG_3,
@@ -75,14 +75,20 @@ var THEME_DEFAULT = {
75
75
  "button-outline-color-active": index.default.BLACK,
76
76
  "button-outline-background-color-active": index.default.BG_2,
77
77
  "button-outline-border-color-active": index.default.BG_3,
78
- "button-outline-color-disabled": index.default.SECONDARY_DEFAULT_2,
79
- "button-outline-background-color-disabled": index.default.SECONDARY_DEFAULT_1,
78
+ "button-outline-color-disabled": index.default.BG_4,
79
+ "button-outline-background-color-disabled": index.default.WHITE,
80
80
  "button-outline-border-color-disabled": index.default.BG_2,
81
81
  "button-clear-color": index.default.PRIMARY_DEFAULT_4,
82
- "button-clear-color-hovered": index.default.PRIMARY_DEFAULT_5,
82
+ "button-clear-color-hovered": index.default.PRIMARY_DEFAULT_4,
83
83
  "button-clear-color-active": index.default.PRIMARY_DEFAULT_5,
84
+ "button-clear-color-disabled": index.default.BG_4,
85
+ "button-clear-background-color-disabled": index.default.WHITE,
86
+ "button-clear-border-color-disabled": index.default.WHITE,
84
87
  "input-primary-border-color": index.default.BG_3,
85
88
  "input-primary-plaseholder-color": index.default.BG_2,
89
+ "input-primary-border-color-error": index.default.ALERT,
90
+ "input-primary-background-color-error": index.default.TRETIARY_DEFAULT_2,
91
+ "input-primary-box-shadow-color-error": index.default.TRETIARY_DEFAULT_2,
86
92
  "checkbox-primary-background-color-checked": index.default.PRIMARY_DEFAULT_4,
87
93
  "checkbox-primary-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
88
94
  "checkbox-primary-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
package/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/Button/Button.module.css CHANGED
@@ -41,13 +41,6 @@
41
41
  .root_fullWidth {
42
42
  width: 100%;
43
43
  }
44
- .root_disabled {
45
- background-color: var(--button-primary-background-color-disabled);
46
- border-color: var(--button-primary-border-color-disabled);
47
- color: var(--button-primary-color-disabled);
48
- cursor: not-allowed;
49
- pointer-events: none;
50
- }
51
44
 
52
45
  .icon {
53
46
  display: flex;
@@ -89,6 +82,13 @@
89
82
  border-color: var(--button-primary-border-color-active);
90
83
  color: var(--button-primary-color-active);
91
84
  }
85
+ .variant_primary_disabled {
86
+ background-color: var(--button-primary-background-color-disabled);
87
+ border-color: var(--button-primary-border-color-disabled);
88
+ color: var(--button-primary-color-disabled);
89
+ cursor: not-allowed;
90
+ pointer-events: none;
91
+ }
92
92
  .variant_secondary {
93
93
  background-color: var(--button-secondary-background-color);
94
94
  border-color: var(--button-secondary-border-color);
@@ -104,6 +104,13 @@
104
104
  border-color: var(--button-secondary-border-color-active);
105
105
  color: var(--button-secondary-color-active);
106
106
  }
107
+ .variant_secondary_disabled {
108
+ background-color: var(--button-secondary-background-color-disabled);
109
+ border-color: var(--button-secondary-border-color-disabled);
110
+ color: var(--button-secondary-color-disabled);
111
+ cursor: not-allowed;
112
+ pointer-events: none;
113
+ }
107
114
  .variant_pseudo {
108
115
  background-color: var(--button-pseudo-background-color);
109
116
  border-color: var(--button-pseudo-border-color);
@@ -119,6 +126,13 @@
119
126
  border-color: var(--button-pseudo-border-color-active);
120
127
  color: var(--button-pseudo-color-active);
121
128
  }
129
+ .variant_pseudo_disabled {
130
+ background-color: var(--button-pseudo-background-color-disabled);
131
+ border-color: var(--button-pseudo-border-color-disabled);
132
+ color: var(--button-pseudo-color-disabled);
133
+ cursor: not-allowed;
134
+ pointer-events: none;
135
+ }
122
136
  .variant_outline {
123
137
  background-color: var(--button-outline-background-color);
124
138
  border-color: var(--button-outline-border-color);
@@ -134,6 +148,13 @@
134
148
  border-color: var(--button-outline-border-color-active);
135
149
  color: var(--button-outline-color-active);
136
150
  }
151
+ .variant_outline_disabled {
152
+ background-color: var(--button-outline-background-color-disabled);
153
+ border-color: var(--button-outline-border-color-disabled);
154
+ color: var(--button-outline-color-disabled);
155
+ cursor: not-allowed;
156
+ pointer-events: none;
157
+ }
137
158
  .variant_clear {
138
159
  background-color: transparent;
139
160
  border-color: transparent;
@@ -144,4 +165,11 @@
144
165
  }
145
166
  .variant_clear:active {
146
167
  color: var(--button-clear-color-active);
168
+ }
169
+ .variant_clear_disabled {
170
+ background-color: var(--button-clear-background-color-disabled);
171
+ border-color: var(--button-clear-border-color-disabled);
172
+ color: var(--button-clear-color-disabled);
173
+ cursor: not-allowed;
174
+ pointer-events: none;
147
175
  }
package/esm/Button/index.js CHANGED
@@ -24,9 +24,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
24
24
  ref: ref,
25
25
  className: clx(styles.root, (_b = {
26
26
  root_icon: !!icon,
27
- root_disabled: disabled ? 1 : 0,
28
- root_fullWidth: fullWidth ? 1 : 0
29
- }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className),
27
+ root_fullWidth: !!fullWidth
28
+ }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
30
29
  disabled: disabled,
31
30
  "data-cy": "button"
32
31
  }, props), icon && /*#__PURE__*/React__default.createElement("span", {
package/esm/Theme/colors/index.d.ts CHANGED
@@ -35,6 +35,8 @@ declare const _default: {
35
35
  BRAND_BA_1: string;
36
36
  BRAND_BA_2: string;
37
37
  BRAND_BA_3: string;
38
+ BRAND_BA_4: string;
39
+ BRAND_BA_5: string;
38
40
  BG_1: string;
39
41
  BG_2: string;
40
42
  BG_3: string;