@vchasno/ui-kit 0.3.20 → 0.3.22
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.
- package/CHANGELOG.md +12 -0
- package/dist/Datepicker/index.cjs.js +1 -1
- package/dist/Datepicker/index.js +1 -1
- package/dist/Datepicker/types/components/Button/Button.d.ts +1 -1
- package/dist/Menu/types/components/Button/Button.d.ts +1 -1
- package/dist/ProjectsPopover/types/components/Button/Button.d.ts +1 -1
- package/dist/Select/types/components/Button/Button.d.ts +1 -1
- package/dist/SelectCreatable/types/components/Button/Button.d.ts +1 -1
- package/dist/Snackbar/index.cjs.js +1 -1
- package/dist/Snackbar/index.js +1 -1
- package/dist/Snackbar/types/components/Button/Button.d.ts +1 -1
- package/dist/css/Alert.global.css +79 -0
- package/dist/css/BubbleBox.global.css +47 -0
- package/dist/css/Button.global.css +189 -0
- package/dist/css/Checkbox.global.css +74 -0
- package/dist/css/DatePicker.global.css +625 -0
- package/dist/css/FollowUs.global.css +25 -0
- package/dist/css/Input.global.css +89 -0
- package/dist/css/InputMeta.global.css +25 -0
- package/dist/css/LabelText.global.css +75 -0
- package/dist/css/MaskInput.global.css +16 -0
- package/dist/css/Menu.global.css +117 -0
- package/dist/css/MenuButton.global.css +18 -0
- package/dist/css/MenuItem.global.css +30 -0
- package/dist/css/MobileAppLinks.global.css +22 -0
- package/dist/css/Pagination.global.css +51 -0
- package/dist/css/Paragraph.global.css +9 -0
- package/dist/css/ProjectsPopover.global.css +111 -0
- package/dist/css/Select.global.css +190 -0
- package/dist/css/Snackbar.global.css +31 -0
- package/dist/css/Spinner.global.css +47 -0
- package/dist/css/SplashLogo.global.css +29 -0
- package/dist/css/SvgBorder.global.css +32 -0
- package/dist/css/Switch.global.css +82 -0
- package/dist/css/Tabs.global.css +122 -0
- package/dist/css/Text.global.css +73 -0
- package/dist/css/TextAreaInput.global.css +41 -0
- package/dist/css/TextInput.global.css +22 -0
- package/dist/css/Title.global.css +44 -0
- package/dist/css/_theme.css +2 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/types/components/Button/Button.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
.vchasno-ui-title {
|
|
2
|
+
color: var(--vchasno-ui-text-primary-color, #333);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.vchasno-ui-title.--ellipsis {
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
text-overflow: ellipsis;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
h1.vchasno-ui-title,
|
|
12
|
+
.vchasno-ui-title h1 {
|
|
13
|
+
font-size: 32px;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
line-height: 1.35;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
h2.vchasno-ui-title,
|
|
19
|
+
.vchasno-ui-title h2 {
|
|
20
|
+
font-size: 30px;
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
line-height: 1.35;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
h3.vchasno-ui-title,
|
|
26
|
+
.vchasno-ui-title h3 {
|
|
27
|
+
font-size: 24px;
|
|
28
|
+
font-weight: 500;
|
|
29
|
+
line-height: 1.35;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h4.vchasno-ui-title,
|
|
33
|
+
.vchasno-ui-title h4 {
|
|
34
|
+
font-size: 20px;
|
|
35
|
+
font-weight: 400;
|
|
36
|
+
line-height: 1.4;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
h5.vchasno-ui-title,
|
|
40
|
+
.vchasno-ui-title h5 {
|
|
41
|
+
font-size: 16px;
|
|
42
|
+
font-weight: 400;
|
|
43
|
+
line-height: 1.5;
|
|
44
|
+
}
|
package/dist/css/_theme.css
CHANGED
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
--vchasno-ui-btn-primary-hover-bg: #3f328c;
|
|
9
9
|
--vchasno-ui-btn-primary-color: #fff;
|
|
10
10
|
--vchasno-ui-btn-secondary-bg: #ffb200;
|
|
11
|
+
--vchasno-ui-btn-pink-bg: #ff9498;
|
|
12
|
+
--vchasno-ui-btn-pink-hover-bg: #f4736f;
|
|
11
13
|
--vchasno-ui-btn-secondary-hover-bg: #f39300;
|
|
12
14
|
--vchasno-ui-btn-secondary-color: #fff;
|
|
13
15
|
--vchasno-ui-btn-light-bg: #fff;
|
package/dist/index.d.ts
CHANGED
|
@@ -49,7 +49,7 @@ interface TextAlign {
|
|
|
49
49
|
}
|
|
50
50
|
type VchasnoProduct = 'edo' | 'kep' | 'kasa' | 'edi' | 'ttn' | 'dm';
|
|
51
51
|
|
|
52
|
-
type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
|
|
52
|
+
type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
|
|
53
53
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
|
|
54
54
|
className?: string;
|
|
55
55
|
theme?: ButtonTheme;
|
package/dist/index.js
CHANGED
|
@@ -236,7 +236,7 @@ var Spinner = function (_a) {
|
|
|
236
236
|
React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
237
237
|
};
|
|
238
238
|
|
|
239
|
-
var css_248z$l = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n min-width: 40px;\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n min-height: 50px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n
|
|
239
|
+
var css_248z$l = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n min-width: 40px;\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n min-height: 50px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--pink {\n background-color: var(--vchasno-ui-btn-pink-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--pink:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-pink-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
|
|
240
240
|
styleInject(css_248z$l);
|
|
241
241
|
|
|
242
242
|
var Button = React$1.forwardRef(function (_a, ref) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { LoadingFeedback, Sizable } from '../types';
|
|
3
3
|
import './Button.global.css';
|
|
4
|
-
type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
|
|
4
|
+
type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
|
|
5
5
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
|
|
6
6
|
className?: string;
|
|
7
7
|
theme?: ButtonTheme;
|