colibri-ui 0.7.148 → 0.7.150

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 (33) hide show
  1. package/Avatar/Avatar.module.css +1 -0
  2. package/Avatar/index.js +5 -4
  3. package/Avatar/index.props.d.ts +1 -1
  4. package/Badge/index.js +19 -24
  5. package/Button/Button.module.css +44 -0
  6. package/Button/index.props.d.ts +1 -1
  7. package/Theme/colors/common.d.ts +12 -0
  8. package/Theme/colors/common.js +7 -1
  9. package/Theme/colors/index.d.ts +6 -0
  10. package/Theme/index.d.ts +48 -0
  11. package/Theme/themes/buenos_aires.d.ts +24 -0
  12. package/Theme/themes/buenos_aires.js +26 -2
  13. package/Theme/themes/default.d.ts +24 -0
  14. package/Theme/themes/default.js +26 -2
  15. package/esm/Avatar/Avatar.module.css +1 -0
  16. package/esm/Avatar/index.js +6 -5
  17. package/esm/Avatar/index.props.d.ts +1 -1
  18. package/esm/Badge/index.js +19 -24
  19. package/esm/Button/Button.module.css +44 -0
  20. package/esm/Button/index.props.d.ts +1 -1
  21. package/esm/Theme/colors/common.d.ts +12 -0
  22. package/esm/Theme/colors/common.js +7 -1
  23. package/esm/Theme/colors/index.d.ts +6 -0
  24. package/esm/Theme/index.d.ts +48 -0
  25. package/esm/Theme/themes/buenos_aires.d.ts +24 -0
  26. package/esm/Theme/themes/buenos_aires.js +26 -2
  27. package/esm/Theme/themes/default.d.ts +24 -0
  28. package/esm/Theme/themes/default.js +26 -2
  29. package/esm/theme_ba_variables.css +26 -2
  30. package/esm/theme_default_variables.css +26 -2
  31. package/package.json +1 -1
  32. package/theme_ba_variables.css +26 -2
  33. package/theme_default_variables.css +26 -2
package/Avatar/Avatar.module.css CHANGED
@@ -4,6 +4,7 @@
4
4
  box-sizing: border-box;
5
5
  transition: border-color 0.15s ease;
6
6
  }
7
+
7
8
  .avatar_bordered {
8
9
  background-color: var(--palette-white);
9
10
  border: 3px solid var(--palette-bg-2);
package/Avatar/index.js CHANGED
@@ -31,7 +31,8 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
31
31
  _b = props.alt,
32
32
  alt = _b === void 0 ? "profile image" : _b,
33
33
  _c = props.accountType,
34
- accountType = _c === void 0 ? index_props.AccountType.Organization : _c;
34
+ accountType = _c === void 0 ? index_props.AccountType.Organization : _c,
35
+ rest = tslib.__rest(props, ["avatarURL", "style", "size", "className", "bordered", "alt", "accountType"]);
35
36
  var stubImageURL = getStubImage(accountType);
36
37
  return /*#__PURE__*/React__default.default.createElement("img", tslib.__assign({
37
38
  alt: alt,
@@ -39,10 +40,10 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
39
40
  width: size,
40
41
  height: size,
41
42
  style: style,
42
- className: clx('avatar', {
43
- 'avatar_bordered': !!bordered
43
+ className: clx("avatar", {
44
+ avatar_bordered: !!bordered
44
45
  }, [className])
45
- }, props));
46
+ }, rest));
46
47
  });
47
48
 
48
49
  exports.default = Avatar;
package/Avatar/index.props.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  import type { AvatarSizes } from "./constants";
3
3
  export declare enum AccountType {
4
4
  Person = "person",
package/Badge/index.js CHANGED
@@ -17,37 +17,32 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
17
17
  var clx = classNames__default.default.bind(styles__default.default);
18
18
  var Badge = function Badge(_a) {
19
19
  var _b;
20
- var className = _a.className,
21
- content = _a.content,
20
+ var background = _a.background,
22
21
  children = _a.children,
23
- invisibleProp = _a.invisible,
24
- _c = _a.max,
25
- max = _c === void 0 ? 99 : _c,
26
- _d = _a.showZero,
27
- showZero = _d === void 0 ? false : _d,
22
+ className = _a.className,
28
23
  color = _a.color,
29
- _e = _a.direction,
30
- direction = _e === void 0 ? "right" : _e,
31
- background = _a.background,
32
- props = tslib.__rest(_a, ["className", "content", "children", "invisible", "max", "showZero", "color", "direction", "background"]);
24
+ content = _a.content,
25
+ _c = _a.direction,
26
+ direction = _c === void 0 ? "right" : _c,
27
+ invisibleProp = _a.invisible,
28
+ _d = _a.max,
29
+ max = _d === void 0 ? 99 : _d,
30
+ _e = _a.showZero,
31
+ showZero = _e === void 0 ? false : _e,
32
+ props = tslib.__rest(_a, ["background", "children", "className", "color", "content", "direction", "invisible", "max", "showZero"]);
33
33
  var invisible = invisibleProp;
34
34
  if (invisibleProp == null && (content === 0 && !showZero || content == null)) {
35
35
  invisible = true;
36
36
  }
37
- var displayValue;
38
- if (content) {
39
- displayValue = content > max ? "".concat(max, "+") : content;
40
- }
41
- return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, tslib.__assign({}, props), children, /*#__PURE__*/React__default.default.createElement("span", {
37
+ var displayValue = content ? content > max ? "".concat(max, "+") : content : undefined;
38
+ return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, tslib.__assign({}, props), children, displayValue && (/*#__PURE__*/React__default.default.createElement("span", {
39
+ className: clx("root", (_b = {}, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
40
+ "data-testid": "badge",
42
41
  style: {
43
- color: color,
44
- backgroundColor: background
45
- },
46
- className: clx((_b = {
47
- root: true
48
- }, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
49
- "data-testid": "badge"
50
- }, displayValue));
42
+ backgroundColor: background,
43
+ color: color
44
+ }
45
+ }, displayValue)));
51
46
  };
52
47
 
53
48
  exports.default = Badge;
package/Button/Button.module.css CHANGED
@@ -173,6 +173,50 @@
173
173
  cursor: not-allowed;
174
174
  pointer-events: none;
175
175
  }
176
+ .variant_alert {
177
+ background-color: var(--button-alert-bg);
178
+ border-color: var(--button-alert-border-color);
179
+ color: var(--button-alert-color);
180
+ }
181
+ .variant_alert:hover {
182
+ background-color: var(--button-alert-bg-hovered);
183
+ border-color: var(--button-alert-border-color-hovered);
184
+ color: var(--button-alert-color-hovered);
185
+ }
186
+ .variant_alert:active {
187
+ background-color: var(--button-alert-bg-active);
188
+ border-color: var(--button-alert-border-color-active);
189
+ color: var(--button-alert-color-active);
190
+ }
191
+ .variant_alert_disabled {
192
+ background-color: var(--button-alert-bg-disabled);
193
+ border-color: var(--button-alert-border-color-disabled);
194
+ color: var(--button-alert-color-disabled);
195
+ cursor: not-allowed;
196
+ pointer-events: none;
197
+ }
198
+ .variant_success {
199
+ background-color: var(--button-success-bg);
200
+ border-color: var(--button-success-border-color);
201
+ color: var(--button-success-color);
202
+ }
203
+ .variant_success:hover {
204
+ background-color: var(--button-success-bg-hovered);
205
+ border-color: var(--button-success-border-color-hovered);
206
+ color: var(--button-success-color-hovered);
207
+ }
208
+ .variant_success:active {
209
+ background-color: var(--button-success-bg-active);
210
+ border-color: var(--button-success-border-color-active);
211
+ color: var(--button-success-color-active);
212
+ }
213
+ .variant_success_disabled {
214
+ background-color: var(--button-success-bg-disabled);
215
+ border-color: var(--button-success-border-color-disabled);
216
+ color: var(--button-success-color-disabled);
217
+ cursor: not-allowed;
218
+ pointer-events: none;
219
+ }
176
220
 
177
221
  .text {
178
222
  overflow: hidden;
package/Button/index.props.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { ButtonHTMLAttributes, ReactNode } from "react";
2
- export type ButtonVariant = "primary" | "secondary" | "outline" | "pseudo" | "clear";
2
+ export type ButtonVariant = "primary" | "secondary" | "outline" | "pseudo" | "alert" | "success" | "clear";
3
3
  export type ButtonSize = "xs" | "s" | "m" | "l";
4
4
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
5
5
  variant?: ButtonVariant;
package/Theme/colors/common.d.ts CHANGED
@@ -11,7 +11,13 @@ export declare const Backgrounds: {
11
11
  };
12
12
  export declare const Accents: {
13
13
  ALERT: string;
14
+ ALERT_HOVER: string;
15
+ ALERT_ACTIVE: string;
16
+ ALERT_LIGHT: string;
14
17
  SUCCESS: string;
18
+ SUCCESS_HOVER: string;
19
+ SUCCESS_ACTIVE: string;
20
+ SUCCESS_LIGHT: string;
15
21
  };
16
22
  export declare const Color: {
17
23
  BG_1: string;
@@ -20,7 +26,13 @@ export declare const Color: {
20
26
  BG_4: string;
21
27
  BG_5: string;
22
28
  ALERT: string;
29
+ ALERT_HOVER: string;
30
+ ALERT_ACTIVE: string;
31
+ ALERT_LIGHT: string;
23
32
  SUCCESS: string;
33
+ SUCCESS_HOVER: string;
34
+ SUCCESS_ACTIVE: string;
35
+ SUCCESS_LIGHT: string;
24
36
  WHITE: string;
25
37
  BLACK: string;
26
38
  };
package/Theme/colors/common.js CHANGED
@@ -17,7 +17,13 @@ var Backgrounds = {
17
17
  };
18
18
  var Accents = {
19
19
  ALERT: "#FF564E",
20
- SUCCESS: "#4AC99B"
20
+ ALERT_HOVER: "#e72d24",
21
+ ALERT_ACTIVE: "#af2d26",
22
+ ALERT_LIGHT: "#ffeeed",
23
+ SUCCESS: "#4AC99B",
24
+ SUCCESS_HOVER: "#42b48b",
25
+ SUCCESS_ACTIVE: "#3ba07c",
26
+ SUCCESS_LIGHT: "#ecf9f5"
21
27
  };
22
28
  var Color = tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), Backgrounds);
23
29
 
package/Theme/colors/index.d.ts CHANGED
@@ -51,7 +51,13 @@ declare const _default: {
51
51
  BG_4: string;
52
52
  BG_5: string;
53
53
  ALERT: string;
54
+ ALERT_HOVER: string;
55
+ ALERT_ACTIVE: string;
56
+ ALERT_LIGHT: string;
54
57
  SUCCESS: string;
58
+ SUCCESS_HOVER: string;
59
+ SUCCESS_ACTIVE: string;
60
+ SUCCESS_LIGHT: string;
55
61
  WHITE: string;
56
62
  BLACK: string;
57
63
  };
package/Theme/index.d.ts CHANGED
@@ -78,6 +78,30 @@ export declare const THEMES: {
78
78
  "button-outline-color-disabled": string;
79
79
  "button-outline-bg-disabled": string;
80
80
  "button-outline-border-color-disabled": string;
81
+ "button-alert-color": string;
82
+ "button-alert-bg": string;
83
+ "button-alert-border-color": string;
84
+ "button-alert-color-hovered": string;
85
+ "button-alert-bg-hovered": string;
86
+ "button-alert-border-color-hovered": string;
87
+ "button-alert-color-active": string;
88
+ "button-alert-bg-active": string;
89
+ "button-alert-border-color-active": string;
90
+ "button-alert-color-disabled": string;
91
+ "button-alert-bg-disabled": string;
92
+ "button-alert-border-color-disabled": string;
93
+ "button-success-color": string;
94
+ "button-success-bg": string;
95
+ "button-success-border-color": string;
96
+ "button-success-color-hovered": string;
97
+ "button-success-bg-hovered": string;
98
+ "button-success-border-color-hovered": string;
99
+ "button-success-color-active": string;
100
+ "button-success-bg-active": string;
101
+ "button-success-border-color-active": string;
102
+ "button-success-color-disabled": string;
103
+ "button-success-bg-disabled": string;
104
+ "button-success-border-color-disabled": string;
81
105
  "button-clear-color": string;
82
106
  "button-clear-color-hovered": string;
83
107
  "button-clear-color-active": string;
@@ -197,6 +221,30 @@ export declare const THEMES: {
197
221
  "button-pseudo-color-disabled": string;
198
222
  "button-pseudo-bg-disabled": string;
199
223
  "button-pseudo-border-color-disabled": string;
224
+ "button-alert-color": string;
225
+ "button-alert-bg": string;
226
+ "button-alert-border-color": string;
227
+ "button-alert-color-hovered": string;
228
+ "button-alert-bg-hovered": string;
229
+ "button-alert-border-color-hovered": string;
230
+ "button-alert-color-active": string;
231
+ "button-alert-bg-active": string;
232
+ "button-alert-border-color-active": string;
233
+ "button-alert-color-disabled": string;
234
+ "button-alert-bg-disabled": string;
235
+ "button-alert-border-color-disabled": string;
236
+ "button-success-color": string;
237
+ "button-success-bg": string;
238
+ "button-success-border-color": string;
239
+ "button-success-color-hovered": string;
240
+ "button-success-bg-hovered": string;
241
+ "button-success-border-color-hovered": string;
242
+ "button-success-color-active": string;
243
+ "button-success-bg-active": string;
244
+ "button-success-border-color-active": string;
245
+ "button-success-color-disabled": string;
246
+ "button-success-bg-disabled": string;
247
+ "button-success-border-color-disabled": string;
200
248
  "button-clear-color": string;
201
249
  "button-clear-color-hovered": string;
202
250
  "button-clear-color-active": string;
package/Theme/themes/buenos_aires.d.ts CHANGED
@@ -77,6 +77,30 @@ declare const _default: {
77
77
  "button-pseudo-color-disabled": string;
78
78
  "button-pseudo-bg-disabled": string;
79
79
  "button-pseudo-border-color-disabled": string;
80
+ "button-alert-color": string;
81
+ "button-alert-bg": string;
82
+ "button-alert-border-color": string;
83
+ "button-alert-color-hovered": string;
84
+ "button-alert-bg-hovered": string;
85
+ "button-alert-border-color-hovered": string;
86
+ "button-alert-color-active": string;
87
+ "button-alert-bg-active": string;
88
+ "button-alert-border-color-active": string;
89
+ "button-alert-color-disabled": string;
90
+ "button-alert-bg-disabled": string;
91
+ "button-alert-border-color-disabled": string;
92
+ "button-success-color": string;
93
+ "button-success-bg": string;
94
+ "button-success-border-color": string;
95
+ "button-success-color-hovered": string;
96
+ "button-success-bg-hovered": string;
97
+ "button-success-border-color-hovered": string;
98
+ "button-success-color-active": string;
99
+ "button-success-bg-active": string;
100
+ "button-success-border-color-active": string;
101
+ "button-success-color-disabled": string;
102
+ "button-success-bg-disabled": string;
103
+ "button-success-border-color-disabled": string;
80
104
  "button-clear-color": string;
81
105
  "button-clear-color-hovered": string;
82
106
  "button-clear-color-active": string;
package/Theme/themes/buenos_aires.js CHANGED
@@ -83,6 +83,30 @@ var THEME_BA = {
83
83
  "button-pseudo-color-disabled": index.default.BG_4,
84
84
  "button-pseudo-bg-disabled": index.default.TRETIARY_BA_1,
85
85
  "button-pseudo-border-color-disabled": index.default.TRETIARY_BA_1,
86
+ "button-alert-color": index.default.WHITE,
87
+ "button-alert-bg": index.default.ALERT,
88
+ "button-alert-border-color": index.default.ALERT,
89
+ "button-alert-color-hovered": index.default.WHITE,
90
+ "button-alert-bg-hovered": index.default.ALERT_HOVER,
91
+ "button-alert-border-color-hovered": index.default.ALERT_HOVER,
92
+ "button-alert-color-active": index.default.WHITE,
93
+ "button-alert-bg-active": index.default.ALERT_ACTIVE,
94
+ "button-alert-border-color-active": index.default.ALERT_ACTIVE,
95
+ "button-alert-color-disabled": index.default.BG_4,
96
+ "button-alert-bg-disabled": index.default.ALERT_LIGHT,
97
+ "button-alert-border-color-disabled": index.default.ALERT_LIGHT,
98
+ "button-success-color": index.default.BLACK,
99
+ "button-success-bg": index.default.SUCCESS,
100
+ "button-success-border-color": index.default.SUCCESS,
101
+ "button-success-color-hovered": index.default.BLACK,
102
+ "button-success-bg-hovered": index.default.SUCCESS_HOVER,
103
+ "button-success-border-color-hovered": index.default.SUCCESS_HOVER,
104
+ "button-success-color-active": index.default.BLACK,
105
+ "button-success-bg-active": index.default.SUCCESS_ACTIVE,
106
+ "button-success-border-color-active": index.default.SUCCESS_ACTIVE,
107
+ "button-success-color-disabled": index.default.BG_4,
108
+ "button-success-bg-disabled": index.default.SUCCESS_LIGHT,
109
+ "button-success-border-color-disabled": index.default.SUCCESS_LIGHT,
86
110
  "button-clear-color": index.default.SECONDARY_BA_4,
87
111
  "button-clear-color-hovered": index.default.SECONDARY_BA_4,
88
112
  "button-clear-color-active": index.default.SECONDARY_BA_5,
@@ -113,9 +137,9 @@ var THEME_BA = {
113
137
  "tooltip-bg": index.default.SECONDARY_BA_3,
114
138
  "tooltip-color": index.default.WHITE,
115
139
  "status-failure": index.default.ALERT,
116
- "status-failure-bg": "rgba(244, 87, 37, .12)",
140
+ "status-failure-bg": index.default.ALERT_LIGHT,
117
141
  "status-success": index.default.SUCCESS,
118
- "status-success-bg": "rgba(74, 201, 155, .12)",
142
+ "status-success-bg": index.default.SUCCESS_LIGHT,
119
143
  "status-warning": "#ffc700",
120
144
  "status-warning-bg": "rgba(255, 199, 0, .12)",
121
145
  "status-info": "#70b6f6",
package/Theme/themes/default.d.ts CHANGED
@@ -77,6 +77,30 @@ declare const _default: {
77
77
  "button-outline-color-disabled": string;
78
78
  "button-outline-bg-disabled": string;
79
79
  "button-outline-border-color-disabled": string;
80
+ "button-alert-color": string;
81
+ "button-alert-bg": string;
82
+ "button-alert-border-color": string;
83
+ "button-alert-color-hovered": string;
84
+ "button-alert-bg-hovered": string;
85
+ "button-alert-border-color-hovered": string;
86
+ "button-alert-color-active": string;
87
+ "button-alert-bg-active": string;
88
+ "button-alert-border-color-active": string;
89
+ "button-alert-color-disabled": string;
90
+ "button-alert-bg-disabled": string;
91
+ "button-alert-border-color-disabled": string;
92
+ "button-success-color": string;
93
+ "button-success-bg": string;
94
+ "button-success-border-color": string;
95
+ "button-success-color-hovered": string;
96
+ "button-success-bg-hovered": string;
97
+ "button-success-border-color-hovered": string;
98
+ "button-success-color-active": string;
99
+ "button-success-bg-active": string;
100
+ "button-success-border-color-active": string;
101
+ "button-success-color-disabled": string;
102
+ "button-success-bg-disabled": string;
103
+ "button-success-border-color-disabled": string;
80
104
  "button-clear-color": string;
81
105
  "button-clear-color-hovered": string;
82
106
  "button-clear-color-active": string;
package/Theme/themes/default.js CHANGED
@@ -83,6 +83,30 @@ var THEME_DEFAULT = {
83
83
  "button-outline-color-disabled": index.default.BG_4,
84
84
  "button-outline-bg-disabled": index.default.WHITE,
85
85
  "button-outline-border-color-disabled": index.default.BG_2,
86
+ "button-alert-color": index.default.WHITE,
87
+ "button-alert-bg": index.default.ALERT,
88
+ "button-alert-border-color": index.default.ALERT,
89
+ "button-alert-color-hovered": index.default.WHITE,
90
+ "button-alert-bg-hovered": index.default.ALERT_HOVER,
91
+ "button-alert-border-color-hovered": index.default.ALERT_HOVER,
92
+ "button-alert-color-active": index.default.WHITE,
93
+ "button-alert-bg-active": index.default.ALERT_ACTIVE,
94
+ "button-alert-border-color-active": index.default.ALERT_ACTIVE,
95
+ "button-alert-color-disabled": index.default.BG_4,
96
+ "button-alert-bg-disabled": index.default.ALERT_LIGHT,
97
+ "button-alert-border-color-disabled": index.default.ALERT_LIGHT,
98
+ "button-success-color": index.default.BLACK,
99
+ "button-success-bg": index.default.SUCCESS,
100
+ "button-success-border-color": index.default.SUCCESS,
101
+ "button-success-color-hovered": index.default.BLACK,
102
+ "button-success-bg-hovered": index.default.SUCCESS_HOVER,
103
+ "button-success-border-color-hovered": index.default.SUCCESS_HOVER,
104
+ "button-success-color-active": index.default.BLACK,
105
+ "button-success-bg-active": index.default.SUCCESS_ACTIVE,
106
+ "button-success-border-color-active": index.default.SUCCESS_ACTIVE,
107
+ "button-success-color-disabled": index.default.BG_4,
108
+ "button-success-bg-disabled": index.default.SUCCESS_LIGHT,
109
+ "button-success-border-color-disabled": index.default.SUCCESS_LIGHT,
86
110
  "button-clear-color": index.default.PRIMARY_DEFAULT_4,
87
111
  "button-clear-color-hovered": index.default.PRIMARY_DEFAULT_4,
88
112
  "button-clear-color-active": index.default.PRIMARY_DEFAULT_5,
@@ -113,9 +137,9 @@ var THEME_DEFAULT = {
113
137
  "tooltip-bg": index.default.BLACK,
114
138
  "tooltip-color": index.default.WHITE,
115
139
  "status-failure": index.default.ALERT,
116
- "status-failure-bg": "rgba(244, 87, 37, .12)",
140
+ "status-failure-bg": index.default.ALERT_LIGHT,
117
141
  "status-success": index.default.SUCCESS,
118
- "status-success-bg": "rgba(74, 201, 155, .12)",
142
+ "status-success-bg": index.default.SUCCESS_LIGHT,
119
143
  "status-warning": "#ffc700",
120
144
  "status-warning-bg": "rgba(255, 199, 0, .12)",
121
145
  "status-info": "#70b6f6",
package/esm/Avatar/Avatar.module.css CHANGED
@@ -4,6 +4,7 @@
4
4
  box-sizing: border-box;
5
5
  transition: border-color 0.15s ease;
6
6
  }
7
+
7
8
  .avatar_bordered {
8
9
  background-color: var(--palette-white);
9
10
  border: 3px solid var(--palette-bg-2);
package/esm/Avatar/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __assign } from 'tslib';
1
+ import { __rest, __assign } from 'tslib';
2
2
  import React__default, { memo } from 'react';
3
3
  import classNames from 'classnames/bind';
4
4
  import { AvatarSizes } from './constants.js';
@@ -21,7 +21,8 @@ var Avatar = /*#__PURE__*/memo(function (props) {
21
21
  _b = props.alt,
22
22
  alt = _b === void 0 ? "profile image" : _b,
23
23
  _c = props.accountType,
24
- accountType = _c === void 0 ? AccountType.Organization : _c;
24
+ accountType = _c === void 0 ? AccountType.Organization : _c,
25
+ rest = __rest(props, ["avatarURL", "style", "size", "className", "bordered", "alt", "accountType"]);
25
26
  var stubImageURL = getStubImage(accountType);
26
27
  return /*#__PURE__*/React__default.createElement("img", __assign({
27
28
  alt: alt,
@@ -29,10 +30,10 @@ var Avatar = /*#__PURE__*/memo(function (props) {
29
30
  width: size,
30
31
  height: size,
31
32
  style: style,
32
- className: clx('avatar', {
33
- 'avatar_bordered': !!bordered
33
+ className: clx("avatar", {
34
+ avatar_bordered: !!bordered
34
35
  }, [className])
35
- }, props));
36
+ }, rest));
36
37
  });
37
38
 
38
39
  export { Avatar as default };
package/esm/Avatar/index.props.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  import type { AvatarSizes } from "./constants";
3
3
  export declare enum AccountType {
4
4
  Person = "person",
package/esm/Badge/index.js CHANGED
@@ -7,37 +7,32 @@ import styles from './Badge.module.css';
7
7
  var clx = classNames.bind(styles);
8
8
  var Badge = function Badge(_a) {
9
9
  var _b;
10
- var className = _a.className,
11
- content = _a.content,
10
+ var background = _a.background,
12
11
  children = _a.children,
13
- invisibleProp = _a.invisible,
14
- _c = _a.max,
15
- max = _c === void 0 ? 99 : _c,
16
- _d = _a.showZero,
17
- showZero = _d === void 0 ? false : _d,
12
+ className = _a.className,
18
13
  color = _a.color,
19
- _e = _a.direction,
20
- direction = _e === void 0 ? "right" : _e,
21
- background = _a.background,
22
- props = __rest(_a, ["className", "content", "children", "invisible", "max", "showZero", "color", "direction", "background"]);
14
+ content = _a.content,
15
+ _c = _a.direction,
16
+ direction = _c === void 0 ? "right" : _c,
17
+ invisibleProp = _a.invisible,
18
+ _d = _a.max,
19
+ max = _d === void 0 ? 99 : _d,
20
+ _e = _a.showZero,
21
+ showZero = _e === void 0 ? false : _e,
22
+ props = __rest(_a, ["background", "children", "className", "color", "content", "direction", "invisible", "max", "showZero"]);
23
23
  var invisible = invisibleProp;
24
24
  if (invisibleProp == null && (content === 0 && !showZero || content == null)) {
25
25
  invisible = true;
26
26
  }
27
- var displayValue;
28
- if (content) {
29
- displayValue = content > max ? "".concat(max, "+") : content;
30
- }
31
- return /*#__PURE__*/React__default.createElement(BadgeControl, __assign({}, props), children, /*#__PURE__*/React__default.createElement("span", {
27
+ var displayValue = content ? content > max ? "".concat(max, "+") : content : undefined;
28
+ return /*#__PURE__*/React__default.createElement(BadgeControl, __assign({}, props), children, displayValue && (/*#__PURE__*/React__default.createElement("span", {
29
+ className: clx("root", (_b = {}, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
30
+ "data-testid": "badge",
32
31
  style: {
33
- color: color,
34
- backgroundColor: background
35
- },
36
- className: clx((_b = {
37
- root: true
38
- }, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
39
- "data-testid": "badge"
40
- }, displayValue));
32
+ backgroundColor: background,
33
+ color: color
34
+ }
35
+ }, displayValue)));
41
36
  };
42
37
 
43
38
  export { Badge as default };
package/esm/Button/Button.module.css CHANGED
@@ -173,6 +173,50 @@
173
173
  cursor: not-allowed;
174
174
  pointer-events: none;
175
175
  }
176
+ .variant_alert {
177
+ background-color: var(--button-alert-bg);
178
+ border-color: var(--button-alert-border-color);
179
+ color: var(--button-alert-color);
180
+ }
181
+ .variant_alert:hover {
182
+ background-color: var(--button-alert-bg-hovered);
183
+ border-color: var(--button-alert-border-color-hovered);
184
+ color: var(--button-alert-color-hovered);
185
+ }
186
+ .variant_alert:active {
187
+ background-color: var(--button-alert-bg-active);
188
+ border-color: var(--button-alert-border-color-active);
189
+ color: var(--button-alert-color-active);
190
+ }
191
+ .variant_alert_disabled {
192
+ background-color: var(--button-alert-bg-disabled);
193
+ border-color: var(--button-alert-border-color-disabled);
194
+ color: var(--button-alert-color-disabled);
195
+ cursor: not-allowed;
196
+ pointer-events: none;
197
+ }
198
+ .variant_success {
199
+ background-color: var(--button-success-bg);
200
+ border-color: var(--button-success-border-color);
201
+ color: var(--button-success-color);
202
+ }
203
+ .variant_success:hover {
204
+ background-color: var(--button-success-bg-hovered);
205
+ border-color: var(--button-success-border-color-hovered);
206
+ color: var(--button-success-color-hovered);
207
+ }
208
+ .variant_success:active {
209
+ background-color: var(--button-success-bg-active);
210
+ border-color: var(--button-success-border-color-active);
211
+ color: var(--button-success-color-active);
212
+ }
213
+ .variant_success_disabled {
214
+ background-color: var(--button-success-bg-disabled);
215
+ border-color: var(--button-success-border-color-disabled);
216
+ color: var(--button-success-color-disabled);
217
+ cursor: not-allowed;
218
+ pointer-events: none;
219
+ }
176
220
 
177
221
  .text {
178
222
  overflow: hidden;
package/esm/Button/index.props.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { ButtonHTMLAttributes, ReactNode } from "react";
2
- export type ButtonVariant = "primary" | "secondary" | "outline" | "pseudo" | "clear";
2
+ export type ButtonVariant = "primary" | "secondary" | "outline" | "pseudo" | "alert" | "success" | "clear";
3
3
  export type ButtonSize = "xs" | "s" | "m" | "l";
4
4
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
5
5
  variant?: ButtonVariant;
package/esm/Theme/colors/common.d.ts CHANGED
@@ -11,7 +11,13 @@ export declare const Backgrounds: {
11
11
  };
12
12
  export declare const Accents: {
13
13
  ALERT: string;
14
+ ALERT_HOVER: string;
15
+ ALERT_ACTIVE: string;
16
+ ALERT_LIGHT: string;
14
17
  SUCCESS: string;
18
+ SUCCESS_HOVER: string;
19
+ SUCCESS_ACTIVE: string;
20
+ SUCCESS_LIGHT: string;
15
21
  };
16
22
  export declare const Color: {
17
23
  BG_1: string;
@@ -20,7 +26,13 @@ export declare const Color: {
20
26
  BG_4: string;
21
27
  BG_5: string;
22
28
  ALERT: string;
29
+ ALERT_HOVER: string;
30
+ ALERT_ACTIVE: string;
31
+ ALERT_LIGHT: string;
23
32
  SUCCESS: string;
33
+ SUCCESS_HOVER: string;
34
+ SUCCESS_ACTIVE: string;
35
+ SUCCESS_LIGHT: string;
24
36
  WHITE: string;
25
37
  BLACK: string;
26
38
  };
package/esm/Theme/colors/common.js CHANGED
@@ -13,7 +13,13 @@ var Backgrounds = {
13
13
  };
14
14
  var Accents = {
15
15
  ALERT: "#FF564E",
16
- SUCCESS: "#4AC99B"
16
+ ALERT_HOVER: "#e72d24",
17
+ ALERT_ACTIVE: "#af2d26",
18
+ ALERT_LIGHT: "#ffeeed",
19
+ SUCCESS: "#4AC99B",
20
+ SUCCESS_HOVER: "#42b48b",
21
+ SUCCESS_ACTIVE: "#3ba07c",
22
+ SUCCESS_LIGHT: "#ecf9f5"
17
23
  };
18
24
  var Color = __assign(__assign(__assign({}, Common), Accents), Backgrounds);
19
25
 
package/esm/Theme/colors/index.d.ts CHANGED
@@ -51,7 +51,13 @@ declare const _default: {
51
51
  BG_4: string;
52
52
  BG_5: string;
53
53
  ALERT: string;
54
+ ALERT_HOVER: string;
55
+ ALERT_ACTIVE: string;
56
+ ALERT_LIGHT: string;
54
57
  SUCCESS: string;
58
+ SUCCESS_HOVER: string;
59
+ SUCCESS_ACTIVE: string;
60
+ SUCCESS_LIGHT: string;
55
61
  WHITE: string;
56
62
  BLACK: string;
57
63
  };
package/esm/Theme/index.d.ts CHANGED
@@ -78,6 +78,30 @@ export declare const THEMES: {
78
78
  "button-outline-color-disabled": string;
79
79
  "button-outline-bg-disabled": string;
80
80
  "button-outline-border-color-disabled": string;
81
+ "button-alert-color": string;
82
+ "button-alert-bg": string;
83
+ "button-alert-border-color": string;
84
+ "button-alert-color-hovered": string;
85
+ "button-alert-bg-hovered": string;
86
+ "button-alert-border-color-hovered": string;
87
+ "button-alert-color-active": string;
88
+ "button-alert-bg-active": string;
89
+ "button-alert-border-color-active": string;
90
+ "button-alert-color-disabled": string;
91
+ "button-alert-bg-disabled": string;
92
+ "button-alert-border-color-disabled": string;
93
+ "button-success-color": string;
94
+ "button-success-bg": string;
95
+ "button-success-border-color": string;
96
+ "button-success-color-hovered": string;
97
+ "button-success-bg-hovered": string;
98
+ "button-success-border-color-hovered": string;
99
+ "button-success-color-active": string;
100
+ "button-success-bg-active": string;
101
+ "button-success-border-color-active": string;
102
+ "button-success-color-disabled": string;
103
+ "button-success-bg-disabled": string;
104
+ "button-success-border-color-disabled": string;
81
105
  "button-clear-color": string;
82
106
  "button-clear-color-hovered": string;
83
107
  "button-clear-color-active": string;
@@ -197,6 +221,30 @@ export declare const THEMES: {
197
221
  "button-pseudo-color-disabled": string;
198
222
  "button-pseudo-bg-disabled": string;
199
223
  "button-pseudo-border-color-disabled": string;
224
+ "button-alert-color": string;
225
+ "button-alert-bg": string;
226
+ "button-alert-border-color": string;
227
+ "button-alert-color-hovered": string;
228
+ "button-alert-bg-hovered": string;
229
+ "button-alert-border-color-hovered": string;
230
+ "button-alert-color-active": string;
231
+ "button-alert-bg-active": string;
232
+ "button-alert-border-color-active": string;
233
+ "button-alert-color-disabled": string;
234
+ "button-alert-bg-disabled": string;
235
+ "button-alert-border-color-disabled": string;
236
+ "button-success-color": string;
237
+ "button-success-bg": string;
238
+ "button-success-border-color": string;
239
+ "button-success-color-hovered": string;
240
+ "button-success-bg-hovered": string;
241
+ "button-success-border-color-hovered": string;
242
+ "button-success-color-active": string;
243
+ "button-success-bg-active": string;
244
+ "button-success-border-color-active": string;
245
+ "button-success-color-disabled": string;
246
+ "button-success-bg-disabled": string;
247
+ "button-success-border-color-disabled": string;
200
248
  "button-clear-color": string;
201
249
  "button-clear-color-hovered": string;
202
250
  "button-clear-color-active": string;
package/esm/Theme/themes/buenos_aires.d.ts CHANGED
@@ -77,6 +77,30 @@ declare const _default: {
77
77
  "button-pseudo-color-disabled": string;
78
78
  "button-pseudo-bg-disabled": string;
79
79
  "button-pseudo-border-color-disabled": string;
80
+ "button-alert-color": string;
81
+ "button-alert-bg": string;
82
+ "button-alert-border-color": string;
83
+ "button-alert-color-hovered": string;
84
+ "button-alert-bg-hovered": string;
85
+ "button-alert-border-color-hovered": string;
86
+ "button-alert-color-active": string;
87
+ "button-alert-bg-active": string;
88
+ "button-alert-border-color-active": string;
89
+ "button-alert-color-disabled": string;
90
+ "button-alert-bg-disabled": string;
91
+ "button-alert-border-color-disabled": string;
92
+ "button-success-color": string;
93
+ "button-success-bg": string;
94
+ "button-success-border-color": string;
95
+ "button-success-color-hovered": string;
96
+ "button-success-bg-hovered": string;
97
+ "button-success-border-color-hovered": string;
98
+ "button-success-color-active": string;
99
+ "button-success-bg-active": string;
100
+ "button-success-border-color-active": string;
101
+ "button-success-color-disabled": string;
102
+ "button-success-bg-disabled": string;
103
+ "button-success-border-color-disabled": string;
80
104
  "button-clear-color": string;
81
105
  "button-clear-color-hovered": string;
82
106
  "button-clear-color-active": string;
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -79,6 +79,30 @@ var THEME_BA = {
79
79
  "button-pseudo-color-disabled": Color.BG_4,
80
80
  "button-pseudo-bg-disabled": Color.TRETIARY_BA_1,
81
81
  "button-pseudo-border-color-disabled": Color.TRETIARY_BA_1,
82
+ "button-alert-color": Color.WHITE,
83
+ "button-alert-bg": Color.ALERT,
84
+ "button-alert-border-color": Color.ALERT,
85
+ "button-alert-color-hovered": Color.WHITE,
86
+ "button-alert-bg-hovered": Color.ALERT_HOVER,
87
+ "button-alert-border-color-hovered": Color.ALERT_HOVER,
88
+ "button-alert-color-active": Color.WHITE,
89
+ "button-alert-bg-active": Color.ALERT_ACTIVE,
90
+ "button-alert-border-color-active": Color.ALERT_ACTIVE,
91
+ "button-alert-color-disabled": Color.BG_4,
92
+ "button-alert-bg-disabled": Color.ALERT_LIGHT,
93
+ "button-alert-border-color-disabled": Color.ALERT_LIGHT,
94
+ "button-success-color": Color.BLACK,
95
+ "button-success-bg": Color.SUCCESS,
96
+ "button-success-border-color": Color.SUCCESS,
97
+ "button-success-color-hovered": Color.BLACK,
98
+ "button-success-bg-hovered": Color.SUCCESS_HOVER,
99
+ "button-success-border-color-hovered": Color.SUCCESS_HOVER,
100
+ "button-success-color-active": Color.BLACK,
101
+ "button-success-bg-active": Color.SUCCESS_ACTIVE,
102
+ "button-success-border-color-active": Color.SUCCESS_ACTIVE,
103
+ "button-success-color-disabled": Color.BG_4,
104
+ "button-success-bg-disabled": Color.SUCCESS_LIGHT,
105
+ "button-success-border-color-disabled": Color.SUCCESS_LIGHT,
82
106
  "button-clear-color": Color.SECONDARY_BA_4,
83
107
  "button-clear-color-hovered": Color.SECONDARY_BA_4,
84
108
  "button-clear-color-active": Color.SECONDARY_BA_5,
@@ -109,9 +133,9 @@ var THEME_BA = {
109
133
  "tooltip-bg": Color.SECONDARY_BA_3,
110
134
  "tooltip-color": Color.WHITE,
111
135
  "status-failure": Color.ALERT,
112
- "status-failure-bg": "rgba(244, 87, 37, .12)",
136
+ "status-failure-bg": Color.ALERT_LIGHT,
113
137
  "status-success": Color.SUCCESS,
114
- "status-success-bg": "rgba(74, 201, 155, .12)",
138
+ "status-success-bg": Color.SUCCESS_LIGHT,
115
139
  "status-warning": "#ffc700",
116
140
  "status-warning-bg": "rgba(255, 199, 0, .12)",
117
141
  "status-info": "#70b6f6",
package/esm/Theme/themes/default.d.ts CHANGED
@@ -77,6 +77,30 @@ declare const _default: {
77
77
  "button-outline-color-disabled": string;
78
78
  "button-outline-bg-disabled": string;
79
79
  "button-outline-border-color-disabled": string;
80
+ "button-alert-color": string;
81
+ "button-alert-bg": string;
82
+ "button-alert-border-color": string;
83
+ "button-alert-color-hovered": string;
84
+ "button-alert-bg-hovered": string;
85
+ "button-alert-border-color-hovered": string;
86
+ "button-alert-color-active": string;
87
+ "button-alert-bg-active": string;
88
+ "button-alert-border-color-active": string;
89
+ "button-alert-color-disabled": string;
90
+ "button-alert-bg-disabled": string;
91
+ "button-alert-border-color-disabled": string;
92
+ "button-success-color": string;
93
+ "button-success-bg": string;
94
+ "button-success-border-color": string;
95
+ "button-success-color-hovered": string;
96
+ "button-success-bg-hovered": string;
97
+ "button-success-border-color-hovered": string;
98
+ "button-success-color-active": string;
99
+ "button-success-bg-active": string;
100
+ "button-success-border-color-active": string;
101
+ "button-success-color-disabled": string;
102
+ "button-success-bg-disabled": string;
103
+ "button-success-border-color-disabled": string;
80
104
  "button-clear-color": string;
81
105
  "button-clear-color-hovered": string;
82
106
  "button-clear-color-active": string;
package/esm/Theme/themes/default.js CHANGED
@@ -79,6 +79,30 @@ var THEME_DEFAULT = {
79
79
  "button-outline-color-disabled": Color.BG_4,
80
80
  "button-outline-bg-disabled": Color.WHITE,
81
81
  "button-outline-border-color-disabled": Color.BG_2,
82
+ "button-alert-color": Color.WHITE,
83
+ "button-alert-bg": Color.ALERT,
84
+ "button-alert-border-color": Color.ALERT,
85
+ "button-alert-color-hovered": Color.WHITE,
86
+ "button-alert-bg-hovered": Color.ALERT_HOVER,
87
+ "button-alert-border-color-hovered": Color.ALERT_HOVER,
88
+ "button-alert-color-active": Color.WHITE,
89
+ "button-alert-bg-active": Color.ALERT_ACTIVE,
90
+ "button-alert-border-color-active": Color.ALERT_ACTIVE,
91
+ "button-alert-color-disabled": Color.BG_4,
92
+ "button-alert-bg-disabled": Color.ALERT_LIGHT,
93
+ "button-alert-border-color-disabled": Color.ALERT_LIGHT,
94
+ "button-success-color": Color.BLACK,
95
+ "button-success-bg": Color.SUCCESS,
96
+ "button-success-border-color": Color.SUCCESS,
97
+ "button-success-color-hovered": Color.BLACK,
98
+ "button-success-bg-hovered": Color.SUCCESS_HOVER,
99
+ "button-success-border-color-hovered": Color.SUCCESS_HOVER,
100
+ "button-success-color-active": Color.BLACK,
101
+ "button-success-bg-active": Color.SUCCESS_ACTIVE,
102
+ "button-success-border-color-active": Color.SUCCESS_ACTIVE,
103
+ "button-success-color-disabled": Color.BG_4,
104
+ "button-success-bg-disabled": Color.SUCCESS_LIGHT,
105
+ "button-success-border-color-disabled": Color.SUCCESS_LIGHT,
82
106
  "button-clear-color": Color.PRIMARY_DEFAULT_4,
83
107
  "button-clear-color-hovered": Color.PRIMARY_DEFAULT_4,
84
108
  "button-clear-color-active": Color.PRIMARY_DEFAULT_5,
@@ -109,9 +133,9 @@ var THEME_DEFAULT = {
109
133
  "tooltip-bg": Color.BLACK,
110
134
  "tooltip-color": Color.WHITE,
111
135
  "status-failure": Color.ALERT,
112
- "status-failure-bg": "rgba(244, 87, 37, .12)",
136
+ "status-failure-bg": Color.ALERT_LIGHT,
113
137
  "status-success": Color.SUCCESS,
114
- "status-success-bg": "rgba(74, 201, 155, .12)",
138
+ "status-success-bg": Color.SUCCESS_LIGHT,
115
139
  "status-warning": "#ffc700",
116
140
  "status-warning-bg": "rgba(255, 199, 0, .12)",
117
141
  "status-info": "#70b6f6",
package/esm/theme_ba_variables.css CHANGED
@@ -77,6 +77,30 @@
77
77
  --button-pseudo-color-disabled: #C9CDD6;
78
78
  --button-pseudo-bg-disabled: #DFE7FA;
79
79
  --button-pseudo-border-color-disabled: #DFE7FA;
80
+ --button-alert-color: #FFF;
81
+ --button-alert-bg: #FF564E;
82
+ --button-alert-border-color: #FF564E;
83
+ --button-alert-color-hovered: #FFF;
84
+ --button-alert-bg-hovered: #e72d24;
85
+ --button-alert-border-color-hovered: #e72d24;
86
+ --button-alert-color-active: #FFF;
87
+ --button-alert-bg-active: #af2d26;
88
+ --button-alert-border-color-active: #af2d26;
89
+ --button-alert-color-disabled: #C9CDD6;
90
+ --button-alert-bg-disabled: #ffeeed;
91
+ --button-alert-border-color-disabled: #ffeeed;
92
+ --button-success-color: #000;
93
+ --button-success-bg: #4AC99B;
94
+ --button-success-border-color: #4AC99B;
95
+ --button-success-color-hovered: #000;
96
+ --button-success-bg-hovered: #42b48b;
97
+ --button-success-border-color-hovered: #42b48b;
98
+ --button-success-color-active: #000;
99
+ --button-success-bg-active: #3ba07c;
100
+ --button-success-border-color-active: #3ba07c;
101
+ --button-success-color-disabled: #C9CDD6;
102
+ --button-success-bg-disabled: #ecf9f5;
103
+ --button-success-border-color-disabled: #ecf9f5;
80
104
  --button-clear-color: #25292e;
81
105
  --button-clear-color-hovered: #25292e;
82
106
  --button-clear-color-active: #1f2328;
@@ -107,9 +131,9 @@
107
131
  --tooltip-bg: #393f46;
108
132
  --tooltip-color: #FFF;
109
133
  --status-failure: #FF564E;
110
- --status-failure-bg: rgba(244, 87, 37, .12);
134
+ --status-failure-bg: #ffeeed;
111
135
  --status-success: #4AC99B;
112
- --status-success-bg: rgba(74, 201, 155, .12);
136
+ --status-success-bg: #ecf9f5;
113
137
  --status-warning: #ffc700;
114
138
  --status-warning-bg: rgba(255, 199, 0, .12);
115
139
  --status-info: #70b6f6;
package/esm/theme_default_variables.css CHANGED
@@ -77,6 +77,30 @@
77
77
  --button-outline-color-disabled: #C9CDD6;
78
78
  --button-outline-bg-disabled: #FFF;
79
79
  --button-outline-border-color-disabled: #E4E6EA;
80
+ --button-alert-color: #FFF;
81
+ --button-alert-bg: #FF564E;
82
+ --button-alert-border-color: #FF564E;
83
+ --button-alert-color-hovered: #FFF;
84
+ --button-alert-bg-hovered: #e72d24;
85
+ --button-alert-border-color-hovered: #e72d24;
86
+ --button-alert-color-active: #FFF;
87
+ --button-alert-bg-active: #af2d26;
88
+ --button-alert-border-color-active: #af2d26;
89
+ --button-alert-color-disabled: #C9CDD6;
90
+ --button-alert-bg-disabled: #ffeeed;
91
+ --button-alert-border-color-disabled: #ffeeed;
92
+ --button-success-color: #000;
93
+ --button-success-bg: #4AC99B;
94
+ --button-success-border-color: #4AC99B;
95
+ --button-success-color-hovered: #000;
96
+ --button-success-bg-hovered: #42b48b;
97
+ --button-success-border-color-hovered: #42b48b;
98
+ --button-success-color-active: #000;
99
+ --button-success-bg-active: #3ba07c;
100
+ --button-success-border-color-active: #3ba07c;
101
+ --button-success-color-disabled: #C9CDD6;
102
+ --button-success-bg-disabled: #ecf9f5;
103
+ --button-success-border-color-disabled: #ecf9f5;
80
104
  --button-clear-color: #067AFF;
81
105
  --button-clear-color-hovered: #067AFF;
82
106
  --button-clear-color-active: #0066DC;
@@ -107,9 +131,9 @@
107
131
  --tooltip-bg: #000;
108
132
  --tooltip-color: #FFF;
109
133
  --status-failure: #FF564E;
110
- --status-failure-bg: rgba(244, 87, 37, .12);
134
+ --status-failure-bg: #ffeeed;
111
135
  --status-success: #4AC99B;
112
- --status-success-bg: rgba(74, 201, 155, .12);
136
+ --status-success-bg: #ecf9f5;
113
137
  --status-warning: #ffc700;
114
138
  --status-warning-bg: rgba(255, 199, 0, .12);
115
139
  --status-info: #70b6f6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.148",
3
+ "version": "0.7.150",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},
package/theme_ba_variables.css CHANGED
@@ -77,6 +77,30 @@
77
77
  --button-pseudo-color-disabled: #C9CDD6;
78
78
  --button-pseudo-bg-disabled: #DFE7FA;
79
79
  --button-pseudo-border-color-disabled: #DFE7FA;
80
+ --button-alert-color: #FFF;
81
+ --button-alert-bg: #FF564E;
82
+ --button-alert-border-color: #FF564E;
83
+ --button-alert-color-hovered: #FFF;
84
+ --button-alert-bg-hovered: #e72d24;
85
+ --button-alert-border-color-hovered: #e72d24;
86
+ --button-alert-color-active: #FFF;
87
+ --button-alert-bg-active: #af2d26;
88
+ --button-alert-border-color-active: #af2d26;
89
+ --button-alert-color-disabled: #C9CDD6;
90
+ --button-alert-bg-disabled: #ffeeed;
91
+ --button-alert-border-color-disabled: #ffeeed;
92
+ --button-success-color: #000;
93
+ --button-success-bg: #4AC99B;
94
+ --button-success-border-color: #4AC99B;
95
+ --button-success-color-hovered: #000;
96
+ --button-success-bg-hovered: #42b48b;
97
+ --button-success-border-color-hovered: #42b48b;
98
+ --button-success-color-active: #000;
99
+ --button-success-bg-active: #3ba07c;
100
+ --button-success-border-color-active: #3ba07c;
101
+ --button-success-color-disabled: #C9CDD6;
102
+ --button-success-bg-disabled: #ecf9f5;
103
+ --button-success-border-color-disabled: #ecf9f5;
80
104
  --button-clear-color: #25292e;
81
105
  --button-clear-color-hovered: #25292e;
82
106
  --button-clear-color-active: #1f2328;
@@ -107,9 +131,9 @@
107
131
  --tooltip-bg: #393f46;
108
132
  --tooltip-color: #FFF;
109
133
  --status-failure: #FF564E;
110
- --status-failure-bg: rgba(244, 87, 37, .12);
134
+ --status-failure-bg: #ffeeed;
111
135
  --status-success: #4AC99B;
112
- --status-success-bg: rgba(74, 201, 155, .12);
136
+ --status-success-bg: #ecf9f5;
113
137
  --status-warning: #ffc700;
114
138
  --status-warning-bg: rgba(255, 199, 0, .12);
115
139
  --status-info: #70b6f6;
package/theme_default_variables.css CHANGED
@@ -77,6 +77,30 @@
77
77
  --button-outline-color-disabled: #C9CDD6;
78
78
  --button-outline-bg-disabled: #FFF;
79
79
  --button-outline-border-color-disabled: #E4E6EA;
80
+ --button-alert-color: #FFF;
81
+ --button-alert-bg: #FF564E;
82
+ --button-alert-border-color: #FF564E;
83
+ --button-alert-color-hovered: #FFF;
84
+ --button-alert-bg-hovered: #e72d24;
85
+ --button-alert-border-color-hovered: #e72d24;
86
+ --button-alert-color-active: #FFF;
87
+ --button-alert-bg-active: #af2d26;
88
+ --button-alert-border-color-active: #af2d26;
89
+ --button-alert-color-disabled: #C9CDD6;
90
+ --button-alert-bg-disabled: #ffeeed;
91
+ --button-alert-border-color-disabled: #ffeeed;
92
+ --button-success-color: #000;
93
+ --button-success-bg: #4AC99B;
94
+ --button-success-border-color: #4AC99B;
95
+ --button-success-color-hovered: #000;
96
+ --button-success-bg-hovered: #42b48b;
97
+ --button-success-border-color-hovered: #42b48b;
98
+ --button-success-color-active: #000;
99
+ --button-success-bg-active: #3ba07c;
100
+ --button-success-border-color-active: #3ba07c;
101
+ --button-success-color-disabled: #C9CDD6;
102
+ --button-success-bg-disabled: #ecf9f5;
103
+ --button-success-border-color-disabled: #ecf9f5;
80
104
  --button-clear-color: #067AFF;
81
105
  --button-clear-color-hovered: #067AFF;
82
106
  --button-clear-color-active: #0066DC;
@@ -107,9 +131,9 @@
107
131
  --tooltip-bg: #000;
108
132
  --tooltip-color: #FFF;
109
133
  --status-failure: #FF564E;
110
- --status-failure-bg: rgba(244, 87, 37, .12);
134
+ --status-failure-bg: #ffeeed;
111
135
  --status-success: #4AC99B;
112
- --status-success-bg: rgba(74, 201, 155, .12);
136
+ --status-success-bg: #ecf9f5;
113
137
  --status-warning: #ffc700;
114
138
  --status-warning-bg: rgba(255, 199, 0, .12);
115
139
  --status-info: #70b6f6;