colibri-ui 0.7.85 → 0.7.86

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 (48) hide show
  1. package/Button/Button.module.css +18 -18
  2. package/Checkbox/Checkbox.module.css +4 -4
  3. package/InputRadio/InputRadio.module.css +5 -5
  4. package/Status/index.d.ts +4 -0
  5. package/Status/index.js +28 -0
  6. package/Status/index.module.css +45 -0
  7. package/Status/index.props.d.ts +13 -0
  8. package/Status/package.json +6 -0
  9. package/Switch/Switch.module.css +2 -2
  10. package/Theme/colors/common.js +3 -3
  11. package/Theme/colors/theme_buenos_aires.js +13 -13
  12. package/Theme/colors/theme_default.js +7 -7
  13. package/Theme/index.d.ts +76 -60
  14. package/Theme/themes/buenos_aires.d.ts +38 -30
  15. package/Theme/themes/buenos_aires.js +38 -30
  16. package/Theme/themes/default.d.ts +38 -30
  17. package/Theme/themes/default.js +38 -30
  18. package/Tooltip/Tooltip.module.css +3 -3
  19. package/Typography/index.js +2 -2
  20. package/base/InputRoot/InputRoot.module.css +1 -1
  21. package/esm/Button/Button.module.css +18 -18
  22. package/esm/Checkbox/Checkbox.module.css +4 -4
  23. package/esm/InputRadio/InputRadio.module.css +5 -5
  24. package/esm/Status/index.d.ts +4 -0
  25. package/esm/Status/index.js +18 -0
  26. package/esm/Status/index.module.css +45 -0
  27. package/esm/Status/index.props.d.ts +13 -0
  28. package/esm/Switch/Switch.module.css +2 -2
  29. package/esm/Theme/colors/common.js +3 -3
  30. package/esm/Theme/colors/theme_buenos_aires.js +13 -13
  31. package/esm/Theme/colors/theme_default.js +7 -7
  32. package/esm/Theme/index.d.ts +76 -60
  33. package/esm/Theme/themes/buenos_aires.d.ts +38 -30
  34. package/esm/Theme/themes/buenos_aires.js +38 -30
  35. package/esm/Theme/themes/default.d.ts +38 -30
  36. package/esm/Theme/themes/default.js +38 -30
  37. package/esm/Tooltip/Tooltip.module.css +3 -3
  38. package/esm/Typography/index.js +2 -2
  39. package/esm/base/InputRoot/InputRoot.module.css +1 -1
  40. package/esm/index.d.ts +1 -0
  41. package/esm/index.js +1 -0
  42. package/esm/theme_ba_variables.css +75 -67
  43. package/esm/theme_default_variables.css +58 -50
  44. package/index.d.ts +1 -0
  45. package/index.js +22 -20
  46. package/package.json +1 -1
  47. package/theme_ba_variables.css +75 -67
  48. package/theme_default_variables.css +58 -50
package/esm/Theme/themes/buenos_aires.d.ts CHANGED
@@ -24,84 +24,92 @@ declare const _default: {
24
24
  "typography-alert": string;
25
25
  "typography-success": string;
26
26
  "typography-secondary": string;
27
- "button-border-radius": string;
28
27
  "button-primary-color": string;
29
- "button-primary-background-color": string;
28
+ "button-primary-bg": string;
30
29
  "button-primary-border-color": string;
31
30
  "button-primary-color-hovered": string;
32
- "button-primary-background-color-hovered": string;
31
+ "button-primary-bg-hovered": string;
33
32
  "button-primary-border-color-hovered": string;
34
33
  "button-primary-color-active": string;
35
- "button-primary-background-color-active": string;
34
+ "button-primary-bg-active": string;
36
35
  "button-primary-border-color-active": string;
37
36
  "button-primary-color-disabled": string;
38
- "button-primary-background-color-disabled": string;
37
+ "button-primary-bg-disabled": string;
39
38
  "button-primary-border-color-disabled": string;
40
39
  "button-secondary-color": string;
41
- "button-secondary-background-color": string;
40
+ "button-secondary-bg": string;
42
41
  "button-secondary-border-color": string;
43
42
  "button-secondary-color-hovered": string;
44
- "button-secondary-background-color-hovered": string;
43
+ "button-secondary-bg-hovered": string;
45
44
  "button-secondary-border-color-hovered": string;
46
45
  "button-secondary-color-active": string;
47
- "button-secondary-background-color-active": string;
46
+ "button-secondary-bg-active": string;
48
47
  "button-secondary-border-color-active": string;
49
48
  "button-secondary-color-disabled": string;
50
- "button-secondary-background-color-disabled": string;
49
+ "button-secondary-bg-disabled": string;
51
50
  "button-secondary-border-color-disabled": string;
52
51
  "button-outline-color": string;
53
- "button-outline-background-color": string;
52
+ "button-outline-bg": string;
54
53
  "button-outline-border-color": string;
55
54
  "button-outline-color-hovered": string;
56
- "button-outline-background-color-hovered": string;
55
+ "button-outline-bg-hovered": string;
57
56
  "button-outline-border-color-hovered": string;
58
57
  "button-outline-color-active": string;
59
- "button-outline-background-color-active": string;
58
+ "button-outline-bg-active": string;
60
59
  "button-outline-border-color-active": string;
61
60
  "button-outline-color-disabled": string;
62
- "button-outline-background-color-disabled": string;
61
+ "button-outline-bg-disabled": string;
63
62
  "button-outline-border-color-disabled": string;
64
63
  "button-pseudo-color": string;
65
- "button-pseudo-background-color": string;
64
+ "button-pseudo-bg": string;
66
65
  "button-pseudo-border-color": string;
67
66
  "button-pseudo-color-hovered": string;
68
- "button-pseudo-background-color-hovered": string;
67
+ "button-pseudo-bg-hovered": string;
69
68
  "button-pseudo-border-color-hovered": string;
70
69
  "button-pseudo-color-active": string;
71
- "button-pseudo-background-color-active": string;
70
+ "button-pseudo-bg-active": string;
72
71
  "button-pseudo-border-color-active": string;
73
72
  "button-pseudo-color-disabled": string;
74
- "button-pseudo-background-color-disabled": string;
73
+ "button-pseudo-bg-disabled": string;
75
74
  "button-pseudo-border-color-disabled": string;
76
75
  "button-clear-color": string;
77
76
  "button-clear-color-hovered": string;
78
77
  "button-clear-color-active": string;
79
78
  "button-clear-color-disabled": string;
80
- "button-clear-background-color-disabled": string;
79
+ "button-clear-bg-disabled": string;
81
80
  "button-clear-border-color-disabled": string;
82
81
  "input-primary-border-color": string;
83
82
  "input-primary-plaseholder-color": string;
84
83
  "input-primary-border-color-error": string;
85
- "input-primary-background-color-error": string;
84
+ "input-primary-bg-error": string;
86
85
  "input-primary-box-shadow-color-error": string;
87
- "checkbox-background-color-checked": string;
88
- "checkbox-background-color-hovered": string;
86
+ "checkbox-bg-checked": string;
87
+ "checkbox-bg-hovered": string;
89
88
  "checkbox-box-shadow-focused": string;
90
- "checkbox-background-color-active": string;
89
+ "checkbox-bg-active": string;
91
90
  "checkbox-border-color-active": string;
92
91
  "checkbox-box-shadow-active": string;
93
- "checkbox-background-color-disabled": string;
94
- "input-radio-background-color-checked": string;
95
- "input-radio-background-color-hovered": string;
92
+ "checkbox-bg-disabled": string;
93
+ "input-radio-bg-checked": string;
94
+ "input-radio-bg-hovered": string;
96
95
  "input-radio-box-shadow-focused": string;
97
- "input-radio-background-color-focused": string;
96
+ "input-radio-bg-focused": string;
98
97
  "input-radio-border-color-focused": string;
99
- "switch-background-color": string;
98
+ "switch-bg": string;
100
99
  "switch-border-color": string;
101
- "switch-background-color-checked": string;
100
+ "switch-bg-checked": string;
102
101
  "switch-border-color-checked": string;
103
- "tooltip-background-color": string;
102
+ "tooltip-bg": string;
104
103
  "tooltip-color": string;
105
- "tooltip-border-radius": string;
104
+ "status-failure": string;
105
+ "status-failure-bg": string;
106
+ "status-success": string;
107
+ "status-success-bg": string;
108
+ "status-warning": string;
109
+ "status-warning-bg": string;
110
+ "status-info": string;
111
+ "status-info-bg": string;
112
+ "status-neutral": string;
113
+ "status-neutral-bg": string;
106
114
  };
107
115
  export default _default;
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -26,85 +26,93 @@ var THEME_BA = {
26
26
  "typography-alert": Color.ALERT,
27
27
  "typography-success": Color.SUCCESS,
28
28
  "typography-secondary": Color.BG_3,
29
- "button-border-radius": "18px",
30
29
  "button-primary-color": Color.BLACK,
31
- "button-primary-background-color": Color.PRIMARY_BA_4,
30
+ "button-primary-bg": Color.PRIMARY_BA_4,
32
31
  "button-primary-border-color": Color.PRIMARY_BA_4,
33
32
  "button-primary-color-hovered": Color.BLACK,
34
- "button-primary-background-color-hovered": Color.PRIMARY_BA_4,
33
+ "button-primary-bg-hovered": Color.PRIMARY_BA_4,
35
34
  "button-primary-border-color-hovered": Color.PRIMARY_BA_4,
36
35
  "button-primary-color-active": Color.BLACK,
37
- "button-primary-background-color-active": Color.PRIMARY_BA_5,
36
+ "button-primary-bg-active": Color.PRIMARY_BA_5,
38
37
  "button-primary-border-color-active": Color.PRIMARY_BA_5,
39
38
  "button-primary-color-disabled": Color.BG_4,
40
- "button-primary-background-color-disabled": Color.PRIMARY_BA_1,
39
+ "button-primary-bg-disabled": Color.PRIMARY_BA_1,
41
40
  "button-primary-border-color-disabled": Color.PRIMARY_BA_1,
42
41
  "button-secondary-color": Color.WHITE,
43
- "button-secondary-background-color": Color.SECONDARY_BA_4,
42
+ "button-secondary-bg": Color.SECONDARY_BA_4,
44
43
  "button-secondary-border-color": Color.SECONDARY_BA_4,
45
44
  "button-secondary-color-hovered": Color.WHITE,
46
- "button-secondary-background-color-hovered": Color.SECONDARY_BA_4,
45
+ "button-secondary-bg-hovered": Color.SECONDARY_BA_4,
47
46
  "button-secondary-border-color-hovered": Color.SECONDARY_BA_4,
48
47
  "button-secondary-color-active": Color.WHITE,
49
- "button-secondary-background-color-active": Color.SECONDARY_BA_5,
48
+ "button-secondary-bg-active": Color.SECONDARY_BA_5,
50
49
  "button-secondary-border-color-active": Color.SECONDARY_BA_5,
51
50
  "button-secondary-color-disabled": Color.BG_4,
52
- "button-secondary-background-color-disabled": Color.BG_1,
51
+ "button-secondary-bg-disabled": Color.BG_1,
53
52
  "button-secondary-border-color-disabled": Color.BG_1,
54
53
  "button-outline-color": Color.BLACK,
55
- "button-outline-background-color": Color.WHITE,
54
+ "button-outline-bg": Color.WHITE,
56
55
  "button-outline-border-color": Color.SECONDARY_BA_4,
57
56
  "button-outline-color-hovered": Color.BLACK,
58
- "button-outline-background-color-hovered": Color.BG_1,
57
+ "button-outline-bg-hovered": Color.BG_1,
59
58
  "button-outline-border-color-hovered": Color.SECONDARY_BA_4,
60
59
  "button-outline-color-active": Color.BLACK,
61
- "button-outline-background-color-active": Color.BG_2,
60
+ "button-outline-bg-active": Color.BG_2,
62
61
  "button-outline-border-color-active": Color.SECONDARY_BA_4,
63
62
  "button-outline-color-disabled": Color.BG_4,
64
- "button-outline-background-color-disabled": Color.WHITE,
63
+ "button-outline-bg-disabled": Color.WHITE,
65
64
  "button-outline-border-color-disabled": Color.BG_2,
66
65
  "button-pseudo-color": Color.BLACK,
67
- "button-pseudo-background-color": Color.TRETIARY_BA_1,
66
+ "button-pseudo-bg": Color.TRETIARY_BA_1,
68
67
  "button-pseudo-border-color": Color.TRETIARY_BA_1,
69
68
  "button-pseudo-color-hovered": Color.BLACK,
70
- "button-pseudo-background-color-hovered": Color.TRETIARY_BA_1,
69
+ "button-pseudo-bg-hovered": Color.TRETIARY_BA_1,
71
70
  "button-pseudo-border-color-hovered": Color.TRETIARY_BA_1,
72
71
  "button-pseudo-color-active": Color.BLACK,
73
- "button-pseudo-background-color-active": Color.TRETIARY_BA_2,
72
+ "button-pseudo-bg-active": Color.TRETIARY_BA_2,
74
73
  "button-pseudo-border-color-active": Color.TRETIARY_BA_2,
75
74
  "button-pseudo-color-disabled": Color.BG_4,
76
- "button-pseudo-background-color-disabled": Color.TRETIARY_BA_1,
75
+ "button-pseudo-bg-disabled": Color.TRETIARY_BA_1,
77
76
  "button-pseudo-border-color-disabled": Color.TRETIARY_BA_1,
78
77
  "button-clear-color": Color.SECONDARY_BA_4,
79
78
  "button-clear-color-hovered": Color.SECONDARY_BA_4,
80
79
  "button-clear-color-active": Color.SECONDARY_BA_5,
81
80
  "button-clear-color-disabled": Color.BG_4,
82
- "button-clear-background-color-disabled": Color.WHITE,
81
+ "button-clear-bg-disabled": Color.WHITE,
83
82
  "button-clear-border-color-disabled": Color.WHITE,
84
83
  "input-primary-border-color": Color.BG_3,
85
84
  "input-primary-plaseholder-color": Color.BG_2,
86
85
  "input-primary-border-color-error": Color.ALERT,
87
- "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
86
+ "input-primary-bg-error": Color.TRETIARY_DEFAULT_2,
88
87
  "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
89
- "checkbox-background-color-checked": Color.PRIMARY_BA_4,
90
- "checkbox-background-color-hovered": Color.PRIMARY_BA_4,
88
+ "checkbox-bg-checked": Color.PRIMARY_BA_4,
89
+ "checkbox-bg-hovered": Color.PRIMARY_BA_4,
91
90
  "checkbox-box-shadow-focused": Color.PRIMARY_BA_1,
92
- "checkbox-background-color-active": Color.PRIMARY_BA_4,
91
+ "checkbox-bg-active": Color.PRIMARY_BA_4,
93
92
  "checkbox-border-color-active": Color.PRIMARY_BA_4,
94
93
  "checkbox-box-shadow-active": Color.PRIMARY_BA_4,
95
- "checkbox-background-color-disabled": Color.PRIMARY_BA_1,
96
- "input-radio-background-color-checked": Color.PRIMARY_BA_4,
97
- "input-radio-background-color-hovered": Color.PRIMARY_BA_4,
94
+ "checkbox-bg-disabled": Color.PRIMARY_BA_1,
95
+ "input-radio-bg-checked": Color.PRIMARY_BA_4,
96
+ "input-radio-bg-hovered": Color.PRIMARY_BA_4,
98
97
  "input-radio-box-shadow-focused": Color.PRIMARY_BA_1,
99
- "input-radio-background-color-focused": Color.PRIMARY_BA_1,
98
+ "input-radio-bg-focused": Color.PRIMARY_BA_1,
100
99
  "input-radio-border-color-focused": Color.PRIMARY_BA_1,
101
- "switch-background-color": Color.BG_2,
100
+ "switch-bg": Color.BG_2,
102
101
  "switch-border-color": Color.BG_2,
103
- "switch-background-color-checked": Color.PRIMARY_BA_5,
102
+ "switch-bg-checked": Color.PRIMARY_BA_5,
104
103
  "switch-border-color-checked": Color.PRIMARY_BA_5,
105
- "tooltip-background-color": Color.SECONDARY_BA_3,
104
+ "tooltip-bg": Color.SECONDARY_BA_3,
106
105
  "tooltip-color": Color.WHITE,
107
- "tooltip-border-radius": "4px"
106
+ "status-failure": Color.ALERT,
107
+ "status-failure-bg": "rgba(244, 87, 37, .12)",
108
+ "status-success": Color.SUCCESS,
109
+ "status-success-bg": "rgba(74, 201, 155, .12)",
110
+ "status-warning": "#ffc700",
111
+ "status-warning-bg": "rgba(255, 199, 0, .12)",
112
+ "status-info": "#70b6f6",
113
+ "status-info-bg": "rgba(112, 182, 246, .12)",
114
+ "status-neutral": Color.BG_5,
115
+ "status-neutral-bg": Color.BG_1
108
116
  };
109
117
 
110
118
  export { THEME_BA as default };
package/esm/Theme/themes/default.d.ts CHANGED
@@ -24,84 +24,92 @@ declare const _default: {
24
24
  "typography-alert": string;
25
25
  "typography-success": string;
26
26
  "typography-secondary": string;
27
- "button-border-radius": string;
28
27
  "button-primary-color": string;
29
- "button-primary-background-color": string;
28
+ "button-primary-bg": string;
30
29
  "button-primary-border-color": string;
31
30
  "button-primary-color-hovered": string;
32
- "button-primary-background-color-hovered": string;
31
+ "button-primary-bg-hovered": string;
33
32
  "button-primary-border-color-hovered": string;
34
33
  "button-primary-color-active": string;
35
- "button-primary-background-color-active": string;
34
+ "button-primary-bg-active": string;
36
35
  "button-primary-border-color-active": string;
37
36
  "button-primary-color-disabled": string;
38
- "button-primary-background-color-disabled": string;
37
+ "button-primary-bg-disabled": string;
39
38
  "button-primary-border-color-disabled": string;
40
39
  "button-secondary-color": string;
41
- "button-secondary-background-color": string;
40
+ "button-secondary-bg": string;
42
41
  "button-secondary-border-color": string;
43
42
  "button-secondary-color-hovered": string;
44
- "button-secondary-background-color-hovered": string;
43
+ "button-secondary-bg-hovered": string;
45
44
  "button-secondary-border-color-hovered": string;
46
45
  "button-secondary-color-active": string;
47
- "button-secondary-background-color-active": string;
46
+ "button-secondary-bg-active": string;
48
47
  "button-secondary-border-color-active": string;
49
48
  "button-secondary-color-disabled": string;
50
- "button-secondary-background-color-disabled": string;
49
+ "button-secondary-bg-disabled": string;
51
50
  "button-secondary-border-color-disabled": string;
52
51
  "button-pseudo-color": string;
53
- "button-pseudo-background-color": string;
52
+ "button-pseudo-bg": string;
54
53
  "button-pseudo-border-color": string;
55
54
  "button-pseudo-color-hovered": string;
56
- "button-pseudo-background-color-hovered": string;
55
+ "button-pseudo-bg-hovered": string;
57
56
  "button-pseudo-border-color-hovered": string;
58
57
  "button-pseudo-color-active": string;
59
- "button-pseudo-background-color-active": string;
58
+ "button-pseudo-bg-active": string;
60
59
  "button-pseudo-border-color-active": string;
61
60
  "button-pseudo-color-disabled": string;
62
- "button-pseudo-background-color-disabled": string;
61
+ "button-pseudo-bg-disabled": string;
63
62
  "button-pseudo-border-color-disabled": string;
64
63
  "button-outline-color": string;
65
- "button-outline-background-color": string;
64
+ "button-outline-bg": string;
66
65
  "button-outline-border-color": string;
67
66
  "button-outline-color-hovered": string;
68
- "button-outline-background-color-hovered": string;
67
+ "button-outline-bg-hovered": string;
69
68
  "button-outline-border-color-hovered": string;
70
69
  "button-outline-color-active": string;
71
- "button-outline-background-color-active": string;
70
+ "button-outline-bg-active": string;
72
71
  "button-outline-border-color-active": string;
73
72
  "button-outline-color-disabled": string;
74
- "button-outline-background-color-disabled": string;
73
+ "button-outline-bg-disabled": string;
75
74
  "button-outline-border-color-disabled": string;
76
75
  "button-clear-color": string;
77
76
  "button-clear-color-hovered": string;
78
77
  "button-clear-color-active": string;
79
78
  "button-clear-color-disabled": string;
80
- "button-clear-background-color-disabled": string;
79
+ "button-clear-bg-disabled": string;
81
80
  "button-clear-border-color-disabled": string;
82
81
  "input-primary-border-color": string;
83
82
  "input-primary-plaseholder-color": string;
84
83
  "input-primary-border-color-error": string;
85
- "input-primary-background-color-error": string;
84
+ "input-primary-bg-error": string;
86
85
  "input-primary-box-shadow-color-error": string;
87
- "checkbox-background-color-checked": string;
88
- "checkbox-background-color-hovered": string;
86
+ "checkbox-bg-checked": string;
87
+ "checkbox-bg-hovered": string;
89
88
  "checkbox-box-shadow-focused": string;
90
- "checkbox-background-color-active": string;
89
+ "checkbox-bg-active": string;
91
90
  "checkbox-border-color-active": string;
92
91
  "checkbox-box-shadow-active": string;
93
- "checkbox-background-color-disabled": string;
94
- "input-radio-background-color-checked": string;
95
- "input-radio-background-color-hovered": string;
92
+ "checkbox-bg-disabled": string;
93
+ "input-radio-bg-checked": string;
94
+ "input-radio-bg-hovered": string;
96
95
  "input-radio-box-shadow-focused": string;
97
- "input-radio-background-color-focused": string;
96
+ "input-radio-bg-focused": string;
98
97
  "input-radio-border-color-focused": string;
99
- "switch-background-color": string;
98
+ "switch-bg": string;
100
99
  "switch-border-color": string;
101
- "switch-background-color-checked": string;
100
+ "switch-bg-checked": string;
102
101
  "switch-border-color-checked": string;
103
- "tooltip-background-color": string;
102
+ "tooltip-bg": string;
104
103
  "tooltip-color": string;
105
- "tooltip-border-radius": string;
104
+ "status-failure": string;
105
+ "status-failure-bg": string;
106
+ "status-success": string;
107
+ "status-success-bg": string;
108
+ "status-warning": string;
109
+ "status-warning-bg": string;
110
+ "status-info": string;
111
+ "status-info-bg": string;
112
+ "status-neutral": string;
113
+ "status-neutral-bg": string;
106
114
  };
107
115
  export default _default;
package/esm/Theme/themes/default.js CHANGED
@@ -26,85 +26,93 @@ var THEME_DEFAULT = {
26
26
  "typography-alert": Color.ALERT,
27
27
  "typography-success": Color.SUCCESS,
28
28
  "typography-secondary": Color.BG_3,
29
- "button-border-radius": "18px",
30
29
  "button-primary-color": Color.WHITE,
31
- "button-primary-background-color": Color.PRIMARY_DEFAULT_4,
30
+ "button-primary-bg": Color.PRIMARY_DEFAULT_4,
32
31
  "button-primary-border-color": Color.PRIMARY_DEFAULT_4,
33
32
  "button-primary-color-hovered": Color.WHITE,
34
- "button-primary-background-color-hovered": Color.PRIMARY_DEFAULT_5,
33
+ "button-primary-bg-hovered": Color.PRIMARY_DEFAULT_5,
35
34
  "button-primary-border-color-hovered": Color.PRIMARY_DEFAULT_5,
36
35
  "button-primary-color-active": Color.WHITE,
37
- "button-primary-background-color-active": Color.PRIMARY_DEFAULT_5,
36
+ "button-primary-bg-active": Color.PRIMARY_DEFAULT_5,
38
37
  "button-primary-border-color-active": Color.PRIMARY_DEFAULT_5,
39
38
  "button-primary-color-disabled": Color.BG_4,
40
- "button-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
39
+ "button-primary-bg-disabled": Color.PRIMARY_DEFAULT_1,
41
40
  "button-primary-border-color-disabled": Color.PRIMARY_DEFAULT_1,
42
41
  "button-secondary-color": Color.WHITE,
43
- "button-secondary-background-color": Color.SECONDARY_DEFAULT_4,
42
+ "button-secondary-bg": Color.SECONDARY_DEFAULT_4,
44
43
  "button-secondary-border-color": Color.SECONDARY_DEFAULT_4,
45
44
  "button-secondary-color-hovered": Color.WHITE,
46
- "button-secondary-background-color-hovered": Color.SECONDARY_DEFAULT_5,
45
+ "button-secondary-bg-hovered": Color.SECONDARY_DEFAULT_5,
47
46
  "button-secondary-border-color-hovered": Color.SECONDARY_DEFAULT_5,
48
47
  "button-secondary-color-active": Color.WHITE,
49
- "button-secondary-background-color-active": Color.SECONDARY_DEFAULT_5,
48
+ "button-secondary-bg-active": Color.SECONDARY_DEFAULT_5,
50
49
  "button-secondary-border-color-active": Color.SECONDARY_DEFAULT_5,
51
50
  "button-secondary-color-disabled": Color.BG_4,
52
- "button-secondary-background-color-disabled": Color.SECONDARY_DEFAULT_1,
51
+ "button-secondary-bg-disabled": Color.SECONDARY_DEFAULT_1,
53
52
  "button-secondary-border-color-disabled": Color.SECONDARY_DEFAULT_1,
54
53
  "button-pseudo-color": Color.BLACK,
55
- "button-pseudo-background-color": Color.TRETIARY_DEFAULT_1,
54
+ "button-pseudo-bg": Color.TRETIARY_DEFAULT_1,
56
55
  "button-pseudo-border-color": Color.TRETIARY_DEFAULT_1,
57
56
  "button-pseudo-color-hovered": Color.BLACK,
58
- "button-pseudo-background-color-hovered": Color.TRETIARY_DEFAULT_1,
57
+ "button-pseudo-bg-hovered": Color.TRETIARY_DEFAULT_1,
59
58
  "button-pseudo-border-color-hovered": Color.TRETIARY_DEFAULT_1,
60
59
  "button-pseudo-color-active": Color.BLACK,
61
- "button-pseudo-background-color-active": Color.TRETIARY_DEFAULT_2,
60
+ "button-pseudo-bg-active": Color.TRETIARY_DEFAULT_2,
62
61
  "button-pseudo-border-color-active": Color.TRETIARY_DEFAULT_2,
63
62
  "button-pseudo-color-disabled": Color.BG_4,
64
- "button-pseudo-background-color-disabled": Color.TRETIARY_DEFAULT_1,
63
+ "button-pseudo-bg-disabled": Color.TRETIARY_DEFAULT_1,
65
64
  "button-pseudo-border-color-disabled": Color.TRETIARY_DEFAULT_1,
66
65
  "button-outline-color": Color.BLACK,
67
- "button-outline-background-color": Color.WHITE,
66
+ "button-outline-bg": Color.WHITE,
68
67
  "button-outline-border-color": Color.BG_3,
69
68
  "button-outline-color-hovered": Color.BLACK,
70
- "button-outline-background-color-hovered": Color.BG_1,
69
+ "button-outline-bg-hovered": Color.BG_1,
71
70
  "button-outline-border-color-hovered": Color.BG_3,
72
71
  "button-outline-color-active": Color.BLACK,
73
- "button-outline-background-color-active": Color.BG_2,
72
+ "button-outline-bg-active": Color.BG_2,
74
73
  "button-outline-border-color-active": Color.BG_3,
75
74
  "button-outline-color-disabled": Color.BG_4,
76
- "button-outline-background-color-disabled": Color.WHITE,
75
+ "button-outline-bg-disabled": Color.WHITE,
77
76
  "button-outline-border-color-disabled": Color.BG_2,
78
77
  "button-clear-color": Color.PRIMARY_DEFAULT_4,
79
78
  "button-clear-color-hovered": Color.PRIMARY_DEFAULT_4,
80
79
  "button-clear-color-active": Color.PRIMARY_DEFAULT_5,
81
80
  "button-clear-color-disabled": Color.BG_4,
82
- "button-clear-background-color-disabled": Color.WHITE,
81
+ "button-clear-bg-disabled": Color.WHITE,
83
82
  "button-clear-border-color-disabled": Color.WHITE,
84
83
  "input-primary-border-color": Color.BG_3,
85
84
  "input-primary-plaseholder-color": Color.BG_2,
86
85
  "input-primary-border-color-error": Color.ALERT,
87
- "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
86
+ "input-primary-bg-error": Color.TRETIARY_DEFAULT_2,
88
87
  "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
89
- "checkbox-background-color-checked": Color.PRIMARY_DEFAULT_4,
90
- "checkbox-background-color-hovered": Color.PRIMARY_DEFAULT_4,
88
+ "checkbox-bg-checked": Color.PRIMARY_DEFAULT_4,
89
+ "checkbox-bg-hovered": Color.PRIMARY_DEFAULT_4,
91
90
  "checkbox-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
92
- "checkbox-background-color-active": Color.PRIMARY_DEFAULT_4,
91
+ "checkbox-bg-active": Color.PRIMARY_DEFAULT_4,
93
92
  "checkbox-border-color-active": Color.PRIMARY_DEFAULT_4,
94
93
  "checkbox-box-shadow-active": Color.PRIMARY_DEFAULT_4,
95
- "checkbox-background-color-disabled": Color.PRIMARY_DEFAULT_1,
96
- "input-radio-background-color-checked": Color.PRIMARY_DEFAULT_4,
97
- "input-radio-background-color-hovered": Color.PRIMARY_DEFAULT_4,
94
+ "checkbox-bg-disabled": Color.PRIMARY_DEFAULT_1,
95
+ "input-radio-bg-checked": Color.PRIMARY_DEFAULT_4,
96
+ "input-radio-bg-hovered": Color.PRIMARY_DEFAULT_4,
98
97
  "input-radio-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
99
- "input-radio-background-color-focused": Color.PRIMARY_DEFAULT_1,
98
+ "input-radio-bg-focused": Color.PRIMARY_DEFAULT_1,
100
99
  "input-radio-border-color-focused": Color.PRIMARY_DEFAULT_1,
101
- "switch-background-color": Color.BG_2,
100
+ "switch-bg": Color.BG_2,
102
101
  "switch-border-color": Color.BG_2,
103
- "switch-background-color-checked": Color.PRIMARY_DEFAULT_5,
102
+ "switch-bg-checked": Color.PRIMARY_DEFAULT_5,
104
103
  "switch-border-color-checked": Color.PRIMARY_DEFAULT_5,
105
- "tooltip-background-color": Color.BLACK,
104
+ "tooltip-bg": Color.BLACK,
106
105
  "tooltip-color": Color.WHITE,
107
- "tooltip-border-radius": "4px"
106
+ "status-failure": Color.ALERT,
107
+ "status-failure-bg": "rgba(244, 87, 37, .12)",
108
+ "status-success": Color.SUCCESS,
109
+ "status-success-bg": "rgba(74, 201, 155, .12)",
110
+ "status-warning": "#ffc700",
111
+ "status-warning-bg": "rgba(255, 199, 0, .12)",
112
+ "status-info": "#70b6f6",
113
+ "status-info-bg": "rgba(112, 182, 246, .12)",
114
+ "status-neutral": Color.BG_5,
115
+ "status-neutral-bg": Color.BG_1
108
116
  };
109
117
 
110
118
  export { THEME_DEFAULT as default };
package/esm/Tooltip/Tooltip.module.css CHANGED
@@ -97,7 +97,7 @@
97
97
  position: relative;
98
98
  }
99
99
  .tail::before {
100
- border-bottom: 5px solid var(--tooltip-background-color);
100
+ border-bottom: 5px solid var(--tooltip-bg);
101
101
  border-left: 6px solid transparent;
102
102
  border-right: 6px solid transparent;
103
103
  content: "";
@@ -108,8 +108,8 @@
108
108
  }
109
109
 
110
110
  .overlay {
111
- background-color: var(--tooltip-background-color);
112
- border-radius: var(--tooltip-border-radius);
111
+ background-color: var(--tooltip-bg);
112
+ border-radius: 0.35rem;
113
113
  color: var(--tooltip-color);
114
114
  font-size: 14px;
115
115
  font-style: normal;
package/esm/Typography/index.js CHANGED
@@ -7,7 +7,7 @@ var clx = classNames.bind(styles);
7
7
  var Typography = function Typography(_a) {
8
8
  var _b;
9
9
  var _c = _a.tag,
10
- Element = _c === void 0 ? "span" : _c,
10
+ Component = _c === void 0 ? "span" : _c,
11
11
  children = _a.children,
12
12
  variant = _a.variant,
13
13
  size = _a.size,
@@ -15,7 +15,7 @@ var Typography = function Typography(_a) {
15
15
  fontWeight = _a.fontWeight,
16
16
  className = _a.className,
17
17
  props = __rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "className"]);
18
- return /*#__PURE__*/React__default.createElement(Element, __assign({}, props, {
18
+ return /*#__PURE__*/React__default.createElement(Component, __assign({}, props, {
19
19
  style: style,
20
20
  className: clx((_b = {
21
21
  root: true
package/esm/base/InputRoot/InputRoot.module.css CHANGED
@@ -52,7 +52,7 @@
52
52
  pointer-events: none;
53
53
  }
54
54
  .variant_primary_error {
55
- background-color: var(--input-primary-background-color-error);
55
+ background-color: var(--input-primary-bg-error);
56
56
  border-color: var(--input-primary-border-color-error);
57
57
  }
58
58
  .variant_primary_error:hover {
package/esm/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export { default as RadioGroup } from "./RadioGroup";
20
20
  export { default as Select } from "./Select";
21
21
  export { default as Separator } from "./Separator";
22
22
  export { SkeletonText, SkeletonRect } from "./Skeleton";
23
+ export { default as Status } from "./Status";
23
24
  export { default as Switch } from "./Switch";
24
25
  export { default as TabsMenu } from "./TabsMenu";
25
26
  export { default as TabsPanes } from "./TabsPanes";
package/esm/index.js CHANGED
@@ -20,6 +20,7 @@ export { default as RadioGroup } from './RadioGroup/index.js';
20
20
  export { default as Select } from './Select/index.js';
21
21
  export { default as Separator } from './Separator/index.js';
22
22
  export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
23
+ export { default as Status } from './Status/index.js';
23
24
  export { default as Switch } from './Switch/index.js';
24
25
  export { default as TabsMenu } from './TabsMenu/index.js';
25
26
  export { default as TabsPanes } from './TabsPanes/index.js';