triafly-ui-kit 1.0.74 → 1.0.76
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
button.btn{--height-sm: 28px;--height-md: 36px;--height-lg: 44px;--height: var(--height-md);flex-shrink:0;background-color:var(--color-bg-brand-default);color:var(--light-color-static)!important;display:flex;justify-content:center;align-items:center;height:var(--height);border-radius:calc(var(--height) / 2);border:none;padding:10px 16px;cursor:pointer;transition:.15s all}button.btn:hover{background-color:var(--color-bg-brand-hover)}button.btn svg *{fill:var(--light-color-static)}button.btn span{color:var(--light-color-static)}button.btn[disabled]{opacity:50%;cursor:default;pointer-events:none}button.btn.brand-light{background-color:var(--color-
|
|
1
|
+
button.btn{--height-sm: 28px;--height-md: 36px;--height-lg: 44px;--height: var(--height-md);flex-shrink:0;background-color:var(--color-bg-brand-default);color:var(--light-color-static)!important;display:flex;justify-content:center;align-items:center;height:var(--height);border-radius:calc(var(--height) / 2);border:none;padding:10px 16px;cursor:pointer;transition:.15s all}button.btn:hover{background-color:var(--color-bg-brand-hover)}button.btn svg *{fill:var(--light-color-static)}button.btn span{color:var(--light-color-static)}button.btn[disabled]{opacity:50%;cursor:default;pointer-events:none}button.btn.brand-light{background-color:var(--color-button-brandlight-filled-bg);color:var(--color-button-brandlight-filled-text)!important}button.btn.brand-light:hover{background-color:var(--color-button-brandlight-filled-hover)}button.btn.brand-light svg *{fill:var(--color-button-brandlight-filled-text)}button.btn.brand-light span{color:var(--color-button-brandlight-filled-text)}button.btn.gray{background-color:var(--color-bg-neutral-lightest-default);color:var(--color-text-primary-default)!important}button.btn.gray:hover{background-color:var(--color-bg-neutral-medium-default)}button.btn.gray svg *{fill:var(--color-text-primary-default)}button.btn.gray span{color:var(--color-text-primary-default)}button.btn.danger{background-color:var(--color-bg-error-default);color:var(--light-color-static)!important}button.btn.danger:hover{background-color:var(--color-bg-error-hover)}button.btn.danger svg *{fill:var(--light-color-static)}button.btn.danger span{color:var(--light-color-static)}button.btn.outlined{background-color:transparent!important;border:1px solid var(--color-border-brand-default);color:var(--color-border-brand-default)}button.btn.outlined[disabled]{pointer-events:none}button.btn.outlined:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-border-brand-default)}button.btn.outlined span{color:var(--color-border-brand-default)}button.btn.outlined svg *{fill:var(--color-border-brand-default)}button.btn.outlined.gray{background-color:transparent!important;border:1px solid var(--color-border-secondary-default);color:var(--color-text-primary-default)}button.btn.outlined.gray[disabled]{pointer-events:none}button.btn.outlined.gray:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-border-secondary-default)}button.btn.outlined.gray span{color:var(--color-text-primary-default)}button.btn.outlined.gray svg *{fill:var(--color-text-primary-default)}button.btn.outlined.danger{background-color:transparent!important;border:1px solid var(--color-bg-error-default);color:var(--color-bg-error-default)}button.btn.outlined.danger[disabled]{pointer-events:none}button.btn.outlined.danger:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-bg-error-default)}button.btn.outlined.danger span{color:var(--color-bg-error-default)}button.btn.outlined.danger svg *{fill:var(--color-bg-error-default)}button.btn.sm{--height: var(--height-sm);padding:6px 12px}button.btn.sm span{font-size:12px}button.btn.lg{--height: var(--height-lg);padding:12px 20px}button.btn.icon-button{width:var(--height);height:var(--height);padding:0;border-radius:50%;display:flex;justify-content:center;align-items:center}button.btn.icon-button *{margin:0!important}button.btn.semiround{border-radius:6px}button.btn.semiround.lg{border-radius:8px}button.btn.loading .btn-label{color:transparent}button.btn .arrow{margin:0 10px 0 0}button.btn .arrow:last-child{margin:0 0 0 10px;transform:rotate(180deg)}button.btn .icon,button.btn .icon-tail,button.btn .icon span,button.btn .icon-tail span{display:flex}button.btn .icon{margin:0 8px 0 0}button.btn .icon-tail{margin:0 0 0 8px}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { Button as e } from "./Button.js";
|
|
3
|
+
import { IconSearch as a } from "../Icons/Icons.js";
|
|
4
|
+
const o = {
|
|
5
|
+
title: "UIKit/Button",
|
|
6
|
+
component: e,
|
|
7
|
+
tags: ["autodocs"]
|
|
8
|
+
}, r = {
|
|
9
|
+
args: {
|
|
10
|
+
label: "Brand Default",
|
|
11
|
+
type: "button"
|
|
12
|
+
}
|
|
13
|
+
}, u = {
|
|
14
|
+
args: {
|
|
15
|
+
label: "Brand Light",
|
|
16
|
+
className: "brand-light",
|
|
17
|
+
type: "button"
|
|
18
|
+
}
|
|
19
|
+
}, i = {
|
|
20
|
+
args: {
|
|
21
|
+
label: "Gray",
|
|
22
|
+
className: "gray",
|
|
23
|
+
type: "button"
|
|
24
|
+
}
|
|
25
|
+
}, d = {
|
|
26
|
+
args: {
|
|
27
|
+
label: "Danger",
|
|
28
|
+
className: "danger",
|
|
29
|
+
type: "button"
|
|
30
|
+
}
|
|
31
|
+
}, g = {
|
|
32
|
+
args: {
|
|
33
|
+
label: "Outlined Brand",
|
|
34
|
+
className: "outlined",
|
|
35
|
+
type: "button"
|
|
36
|
+
}
|
|
37
|
+
}, c = {
|
|
38
|
+
args: {
|
|
39
|
+
label: "Outlined Gray",
|
|
40
|
+
className: "outlined gray",
|
|
41
|
+
type: "button"
|
|
42
|
+
}
|
|
43
|
+
}, b = {
|
|
44
|
+
args: {
|
|
45
|
+
label: "Outlined Danger",
|
|
46
|
+
className: "outlined danger",
|
|
47
|
+
type: "button"
|
|
48
|
+
}
|
|
49
|
+
}, m = {
|
|
50
|
+
args: {
|
|
51
|
+
label: "Small",
|
|
52
|
+
className: "sm",
|
|
53
|
+
type: "button"
|
|
54
|
+
}
|
|
55
|
+
}, p = {
|
|
56
|
+
args: {
|
|
57
|
+
label: "Medium (default)",
|
|
58
|
+
type: "button"
|
|
59
|
+
}
|
|
60
|
+
}, y = {
|
|
61
|
+
args: {
|
|
62
|
+
label: "Large",
|
|
63
|
+
className: "lg",
|
|
64
|
+
type: "button"
|
|
65
|
+
}
|
|
66
|
+
}, N = {
|
|
67
|
+
args: {
|
|
68
|
+
label: "Rounded (default)",
|
|
69
|
+
type: "button"
|
|
70
|
+
}
|
|
71
|
+
}, h = {
|
|
72
|
+
args: {
|
|
73
|
+
label: "Semiround",
|
|
74
|
+
className: "semiround",
|
|
75
|
+
type: "button"
|
|
76
|
+
}
|
|
77
|
+
}, B = {
|
|
78
|
+
args: {
|
|
79
|
+
label: "Semiround Large",
|
|
80
|
+
className: "semiround lg",
|
|
81
|
+
type: "button"
|
|
82
|
+
}
|
|
83
|
+
}, D = {
|
|
84
|
+
args: {
|
|
85
|
+
label: "",
|
|
86
|
+
// Пустая строка для кнопки-иконки
|
|
87
|
+
className: "icon-button",
|
|
88
|
+
type: "button",
|
|
89
|
+
icon: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(a, {}) })
|
|
90
|
+
}
|
|
91
|
+
}, L = {
|
|
92
|
+
args: {
|
|
93
|
+
label: "Brand Light Large",
|
|
94
|
+
className: "brand-light lg",
|
|
95
|
+
type: "button"
|
|
96
|
+
}
|
|
97
|
+
}, O = {
|
|
98
|
+
args: {
|
|
99
|
+
label: "Outlined Danger Small",
|
|
100
|
+
className: "outlined danger sm",
|
|
101
|
+
type: "button"
|
|
102
|
+
}
|
|
103
|
+
}, S = {
|
|
104
|
+
args: {
|
|
105
|
+
label: "Disabled Outlined Gray",
|
|
106
|
+
className: "outlined gray",
|
|
107
|
+
type: "button",
|
|
108
|
+
isDisabled: !0
|
|
109
|
+
}
|
|
110
|
+
}, f = {
|
|
111
|
+
args: {
|
|
112
|
+
label: "With Icons",
|
|
113
|
+
type: "button",
|
|
114
|
+
icon: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(a, {}) }),
|
|
115
|
+
iconTail: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(a, {}) })
|
|
116
|
+
}
|
|
117
|
+
}, G = {
|
|
118
|
+
args: {
|
|
119
|
+
label: "Next",
|
|
120
|
+
type: "button",
|
|
121
|
+
navigation: "next"
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
export {
|
|
125
|
+
r as BrandDefault,
|
|
126
|
+
u as BrandLight,
|
|
127
|
+
L as BrandLightLarge,
|
|
128
|
+
d as Danger,
|
|
129
|
+
S as DisabledOutlinedGray,
|
|
130
|
+
i as Gray,
|
|
131
|
+
D as IconButton,
|
|
132
|
+
y as Large,
|
|
133
|
+
p as Medium,
|
|
134
|
+
G as NavigationExample,
|
|
135
|
+
g as OutlinedBrand,
|
|
136
|
+
b as OutlinedDanger,
|
|
137
|
+
O as OutlinedDangerSmall,
|
|
138
|
+
c as OutlinedGray,
|
|
139
|
+
N as Rounded,
|
|
140
|
+
h as Semiround,
|
|
141
|
+
B as SemiroundLarge,
|
|
142
|
+
m as Small,
|
|
143
|
+
f as WithIcons,
|
|
144
|
+
o as default
|
|
145
|
+
};
|
package/package.json
CHANGED
|
@@ -218,7 +218,7 @@ html[data-theme="light"] {
|
|
|
218
218
|
|
|
219
219
|
/* Light Theme - Buttons */
|
|
220
220
|
--color-button-brandlight-filled-text: var(--light-brand-100);
|
|
221
|
-
--color-button-brandlight-filled-bg: var(--light-brand-
|
|
221
|
+
--color-button-brandlight-filled-bg: var(--light-brand-20);
|
|
222
222
|
--color-button-brandlight-filled-hover: var(--light-brand-50);
|
|
223
223
|
--color-button-brandlight-filled-icon: var(--light-brand-100);
|
|
224
224
|
}
|