mbt-ui-kit 0.1.2 → 0.1.3
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/dist/components/menu-button/GraduationCapIcon.d.ts.map +1 -1
- package/dist/components/typography/Text.d.ts +9 -1
- package/dist/components/typography/Text.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +81 -69
- package/dist/styles/mbt-ui-kit.css +1 -1
- package/dist/styles/tokens.css +2 -0
- package/dist/styles/tokens.d.ts +7 -0
- package/dist/styles/tokens.d.ts.map +1 -1
- package/dist/{tokens-Bab0xxwT.cjs → tokens-B_TubVTm.cjs} +1 -1
- package/dist/{tokens-Dmbd19AM.js → tokens-C9fYKp_b.js} +20 -17
- package/dist/tokens-only.cjs +1 -1
- package/dist/tokens-only.js +1 -1
- package/package.json +2 -2
- package/src/styles/_tokens.scss +4 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraduationCapIcon.d.ts","sourceRoot":"","sources":["../../../src/components/menu-button/GraduationCapIcon.tsx"],"names":[],"mappings":"AAAA,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"GraduationCapIcon.d.ts","sourceRoot":"","sources":["../../../src/components/menu-button/GraduationCapIcon.tsx"],"names":[],"mappings":"AAAA,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAiCtE"}
|
|
@@ -31,6 +31,12 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
|
31
31
|
* @default false
|
|
32
32
|
*/
|
|
33
33
|
muted?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Отключить стилистические альтернативы шрифта
|
|
36
|
+
*
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
disableFontFeatures?: boolean;
|
|
34
40
|
/**
|
|
35
41
|
* HTML элемент для рендера
|
|
36
42
|
*
|
|
@@ -53,12 +59,14 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
|
53
59
|
* @small {boolean} Мелкий текст (12px)
|
|
54
60
|
* @label {boolean} Стиль label (12px, uppercase)
|
|
55
61
|
* @muted {boolean} Приглушённый цвет
|
|
62
|
+
* @disableFontFeatures {boolean} Отключить стилистические альтернативы шрифта
|
|
56
63
|
* @as {string} HTML элемент для рендера
|
|
57
64
|
*
|
|
58
65
|
* @example
|
|
59
66
|
* ```tsx
|
|
60
67
|
* <Text>Regular text</Text>
|
|
68
|
+
* <Text disableFontFeatures>Text without stylistic alternates</Text>
|
|
61
69
|
* ```
|
|
62
70
|
*/
|
|
63
|
-
export declare function Text({ children, strong, small, label, muted, as, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
71
|
+
export declare function Text({ children, strong, small, label, muted, disableFontFeatures, as, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
64
72
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;CAC3B;AAED
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAc,EACd,KAAa,EACb,KAAa,EACb,KAAa,EACb,mBAA2B,EAC3B,EAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAmBX"}
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./tokens-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./tokens-B_TubVTm.cjs"),t=require("react/jsx-runtime");function j({children:n,fullWidth:e,disabled:s,className:o,...i}){const r=["mbt-button",e&&"mbt-button--full-width",s&&"mbt-button--disabled",o].filter(Boolean).join(" ");return t.jsx("button",{type:"button",className:r,disabled:s,...i,children:n})}function f({className:n}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n,children:[t.jsx("circle",{cx:"11",cy:"11",r:"8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"m21 21-4.34-4.34",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function h({label:n,muted:e=!1,showSearchIcon:s=!1,icon:o,fullWidth:i=!1,className:r,...l}){const c=["mbt-input",i&&"mbt-input--full-width",r].filter(Boolean).join(" "),u=["mbt-input__label",e&&"mbt-input__label--muted"].filter(Boolean).join(" "),m=["mbt-input__wrapper",e&&"mbt-input__wrapper--muted"].filter(Boolean).join(" "),d=["mbt-input__field",e&&"mbt-input__field--muted"].filter(Boolean).join(" "),x=["mbt-input__icon",e&&"mbt-input__icon--muted"].filter(Boolean).join(" "),b=o||s&&t.jsx(f,{});return t.jsx("div",{className:c,children:t.jsxs("div",{className:"mbt-input__container",children:[n&&t.jsx("label",{className:u,children:n}),t.jsxs("div",{className:m,children:[t.jsx("input",{type:"text",className:d,...l}),b&&t.jsx("div",{className:x,children:b})]})]})})}function k({level:n,children:e,className:s,...o}){const i=`h${n}`,r=[`mbt-h${n}`,s].filter(Boolean).join(" ");return t.jsx(i,{className:r,...o,children:e})}function _({children:n,strong:e=!1,small:s=!1,label:o=!1,muted:i=!1,disableFontFeatures:r=!1,as:l="p",className:c,...u}){const m=l,d=["mbt-text",e&&"mbt-text--strong",s&&"mbt-text--small",o&&"mbt-text--label",i&&"mbt-text--muted",r&&"mbt-text--no-features",c].filter(Boolean).join(" ");return t.jsx(m,{className:d,...u,children:n})}function g({children:n,large:e=!1,muted:s=!1,as:o="div",className:i,...r}){const l=o,c=["mbt-metric",e&&"mbt-metric--large",s&&"mbt-metric--muted",i].filter(Boolean).join(" ");return t.jsx(l,{className:c,...r,children:n})}function p({className:n}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n,children:[t.jsx("path",{d:"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M22 10v6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M6 12.5V16a6 3 0 0 0 12 0v-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function N({children:n,icon:e,selected:s=!1,small:o=!1,disabled:i,className:r,...l}){const c=["mbt-menu-button",s&&"mbt-menu-button--selected",o&&"mbt-menu-button--small",r].filter(Boolean).join(" "),u=e??t.jsx(p,{});return t.jsxs("button",{type:"button",className:c,disabled:i,"aria-pressed":s,...l,children:[t.jsx("div",{className:"mbt-menu-button__icon",children:u}),t.jsx("span",{className:"mbt-menu-button__text",children:n})]})}exports.colors=a.colors;exports.fontSizes=a.fontSizes;exports.fontWeights=a.fontWeights;exports.fonts=a.fonts;exports.radius=a.radius;exports.spacing=a.spacing;exports.tokens=a.tokens;exports.transitions=a.transitions;exports.zIndex=a.zIndex;exports.Button=j;exports.GraduationCapIcon=p;exports.Heading=k;exports.Input=h;exports.MenuButton=N;exports.Metric=g;exports.SearchIcon=f;exports.Text=_;
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { c as
|
|
2
|
-
import { jsx as
|
|
3
|
-
function
|
|
1
|
+
import { c as L, a as C, b as y, f as I, r as W, s as M, t as z, d as T, z as S } from "./tokens-C9fYKp_b.js";
|
|
2
|
+
import { jsx as e, jsxs as c } from "react/jsx-runtime";
|
|
3
|
+
function k({
|
|
4
4
|
children: t,
|
|
5
|
-
fullWidth:
|
|
5
|
+
fullWidth: n,
|
|
6
6
|
disabled: o,
|
|
7
7
|
className: s,
|
|
8
8
|
...a
|
|
9
9
|
}) {
|
|
10
|
-
const
|
|
10
|
+
const r = [
|
|
11
11
|
"mbt-button",
|
|
12
|
-
|
|
12
|
+
n && "mbt-button--full-width",
|
|
13
13
|
o && "mbt-button--disabled",
|
|
14
14
|
s
|
|
15
15
|
].filter(Boolean).join(" ");
|
|
16
|
-
return /* @__PURE__ */
|
|
16
|
+
return /* @__PURE__ */ e("button", { type: "button", className: r, disabled: o, ...a, children: t });
|
|
17
17
|
}
|
|
18
18
|
function p({ className: t }) {
|
|
19
19
|
return /* @__PURE__ */ c(
|
|
@@ -26,22 +26,22 @@ function p({ className: t }) {
|
|
|
26
26
|
xmlns: "http://www.w3.org/2000/svg",
|
|
27
27
|
className: t,
|
|
28
28
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
29
|
+
/* @__PURE__ */ e(
|
|
30
30
|
"circle",
|
|
31
31
|
{
|
|
32
|
-
cx: "
|
|
33
|
-
cy: "
|
|
34
|
-
r: "
|
|
32
|
+
cx: "11",
|
|
33
|
+
cy: "11",
|
|
34
|
+
r: "8",
|
|
35
35
|
stroke: "currentColor",
|
|
36
36
|
strokeWidth: "1.5",
|
|
37
37
|
strokeLinecap: "round",
|
|
38
38
|
strokeLinejoin: "round"
|
|
39
39
|
}
|
|
40
40
|
),
|
|
41
|
-
/* @__PURE__ */
|
|
41
|
+
/* @__PURE__ */ e(
|
|
42
42
|
"path",
|
|
43
43
|
{
|
|
44
|
-
d: "
|
|
44
|
+
d: "m21 21-4.34-4.34",
|
|
45
45
|
stroke: "currentColor",
|
|
46
46
|
strokeWidth: "1.5",
|
|
47
47
|
strokeLinecap: "round",
|
|
@@ -52,84 +52,86 @@ function p({ className: t }) {
|
|
|
52
52
|
}
|
|
53
53
|
);
|
|
54
54
|
}
|
|
55
|
-
function
|
|
55
|
+
function x({
|
|
56
56
|
label: t,
|
|
57
|
-
muted:
|
|
57
|
+
muted: n = !1,
|
|
58
58
|
showSearchIcon: o = !1,
|
|
59
59
|
icon: s,
|
|
60
60
|
fullWidth: a = !1,
|
|
61
|
-
className:
|
|
62
|
-
...
|
|
61
|
+
className: r,
|
|
62
|
+
...i
|
|
63
63
|
}) {
|
|
64
64
|
const l = [
|
|
65
65
|
"mbt-input",
|
|
66
66
|
a && "mbt-input--full-width",
|
|
67
|
-
|
|
67
|
+
r
|
|
68
68
|
].filter(Boolean).join(" "), u = [
|
|
69
69
|
"mbt-input__label",
|
|
70
|
-
|
|
70
|
+
n && "mbt-input__label--muted"
|
|
71
71
|
].filter(Boolean).join(" "), m = [
|
|
72
72
|
"mbt-input__wrapper",
|
|
73
|
-
|
|
74
|
-
].filter(Boolean).join(" "),
|
|
73
|
+
n && "mbt-input__wrapper--muted"
|
|
74
|
+
].filter(Boolean).join(" "), d = [
|
|
75
75
|
"mbt-input__field",
|
|
76
|
-
|
|
76
|
+
n && "mbt-input__field--muted"
|
|
77
77
|
].filter(Boolean).join(" "), f = [
|
|
78
78
|
"mbt-input__icon",
|
|
79
|
-
|
|
80
|
-
].filter(Boolean).join(" "),
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
t && /* @__PURE__ */
|
|
79
|
+
n && "mbt-input__icon--muted"
|
|
80
|
+
].filter(Boolean).join(" "), b = s || o && /* @__PURE__ */ e(p, {});
|
|
81
|
+
return /* @__PURE__ */ e("div", { className: l, children: /* @__PURE__ */ c("div", { className: "mbt-input__container", children: [
|
|
82
|
+
t && /* @__PURE__ */ e("label", { className: u, children: t }),
|
|
83
83
|
/* @__PURE__ */ c("div", { className: m, children: [
|
|
84
|
-
/* @__PURE__ */
|
|
85
|
-
|
|
84
|
+
/* @__PURE__ */ e("input", { type: "text", className: d, ...i }),
|
|
85
|
+
b && /* @__PURE__ */ e("div", { className: f, children: b })
|
|
86
86
|
] })
|
|
87
87
|
] }) });
|
|
88
88
|
}
|
|
89
|
-
function
|
|
89
|
+
function N({
|
|
90
90
|
level: t,
|
|
91
|
-
children:
|
|
91
|
+
children: n,
|
|
92
92
|
className: o,
|
|
93
93
|
...s
|
|
94
94
|
}) {
|
|
95
|
-
const a = `h${t}`,
|
|
96
|
-
return /* @__PURE__ */
|
|
95
|
+
const a = `h${t}`, r = [`mbt-h${t}`, o].filter(Boolean).join(" ");
|
|
96
|
+
return /* @__PURE__ */ e(a, { className: r, ...s, children: n });
|
|
97
97
|
}
|
|
98
|
-
function
|
|
98
|
+
function j({
|
|
99
99
|
children: t,
|
|
100
|
-
strong:
|
|
100
|
+
strong: n = !1,
|
|
101
101
|
small: o = !1,
|
|
102
102
|
label: s = !1,
|
|
103
103
|
muted: a = !1,
|
|
104
|
+
disableFontFeatures: r = !1,
|
|
104
105
|
as: i = "p",
|
|
105
|
-
className:
|
|
106
|
-
...
|
|
106
|
+
className: l,
|
|
107
|
+
...u
|
|
107
108
|
}) {
|
|
108
|
-
const
|
|
109
|
+
const m = i, d = [
|
|
109
110
|
"mbt-text",
|
|
110
|
-
|
|
111
|
+
n && "mbt-text--strong",
|
|
111
112
|
o && "mbt-text--small",
|
|
112
113
|
s && "mbt-text--label",
|
|
113
114
|
a && "mbt-text--muted",
|
|
114
|
-
r
|
|
115
|
+
r && "mbt-text--no-features",
|
|
116
|
+
l
|
|
115
117
|
].filter(Boolean).join(" ");
|
|
116
|
-
return /* @__PURE__ */
|
|
118
|
+
return /* @__PURE__ */ e(m, { className: d, ...u, children: t });
|
|
117
119
|
}
|
|
118
|
-
function
|
|
120
|
+
function w({
|
|
119
121
|
children: t,
|
|
120
|
-
large:
|
|
122
|
+
large: n = !1,
|
|
121
123
|
muted: o = !1,
|
|
122
124
|
as: s = "div",
|
|
123
125
|
className: a,
|
|
124
|
-
...
|
|
126
|
+
...r
|
|
125
127
|
}) {
|
|
126
|
-
const
|
|
128
|
+
const i = s, l = [
|
|
127
129
|
"mbt-metric",
|
|
128
|
-
|
|
130
|
+
n && "mbt-metric--large",
|
|
129
131
|
o && "mbt-metric--muted",
|
|
130
132
|
a
|
|
131
133
|
].filter(Boolean).join(" ");
|
|
132
|
-
return /* @__PURE__ */
|
|
134
|
+
return /* @__PURE__ */ e(i, { className: l, ...r, children: t });
|
|
133
135
|
}
|
|
134
136
|
function h({ className: t }) {
|
|
135
137
|
return /* @__PURE__ */ c(
|
|
@@ -142,20 +144,30 @@ function h({ className: t }) {
|
|
|
142
144
|
xmlns: "http://www.w3.org/2000/svg",
|
|
143
145
|
className: t,
|
|
144
146
|
children: [
|
|
145
|
-
/* @__PURE__ */
|
|
147
|
+
/* @__PURE__ */ e(
|
|
148
|
+
"path",
|
|
149
|
+
{
|
|
150
|
+
d: "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z",
|
|
151
|
+
stroke: "currentColor",
|
|
152
|
+
strokeWidth: "1.5",
|
|
153
|
+
strokeLinecap: "round",
|
|
154
|
+
strokeLinejoin: "round"
|
|
155
|
+
}
|
|
156
|
+
),
|
|
157
|
+
/* @__PURE__ */ e(
|
|
146
158
|
"path",
|
|
147
159
|
{
|
|
148
|
-
d: "
|
|
160
|
+
d: "M22 10v6",
|
|
149
161
|
stroke: "currentColor",
|
|
150
162
|
strokeWidth: "1.5",
|
|
151
163
|
strokeLinecap: "round",
|
|
152
164
|
strokeLinejoin: "round"
|
|
153
165
|
}
|
|
154
166
|
),
|
|
155
|
-
/* @__PURE__ */
|
|
167
|
+
/* @__PURE__ */ e(
|
|
156
168
|
"path",
|
|
157
169
|
{
|
|
158
|
-
d: "M6
|
|
170
|
+
d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5",
|
|
159
171
|
stroke: "currentColor",
|
|
160
172
|
strokeWidth: "1.5",
|
|
161
173
|
strokeLinecap: "round",
|
|
@@ -166,20 +178,20 @@ function h({ className: t }) {
|
|
|
166
178
|
}
|
|
167
179
|
);
|
|
168
180
|
}
|
|
169
|
-
function
|
|
181
|
+
function g({
|
|
170
182
|
children: t,
|
|
171
|
-
icon:
|
|
183
|
+
icon: n,
|
|
172
184
|
selected: o = !1,
|
|
173
185
|
small: s = !1,
|
|
174
186
|
disabled: a,
|
|
175
|
-
className:
|
|
176
|
-
...
|
|
187
|
+
className: r,
|
|
188
|
+
...i
|
|
177
189
|
}) {
|
|
178
190
|
const l = [
|
|
179
191
|
"mbt-menu-button",
|
|
180
192
|
o && "mbt-menu-button--selected",
|
|
181
193
|
s && "mbt-menu-button--small",
|
|
182
|
-
|
|
194
|
+
r
|
|
183
195
|
].filter(Boolean).join(" ");
|
|
184
196
|
return /* @__PURE__ */ c(
|
|
185
197
|
"button",
|
|
@@ -188,30 +200,30 @@ function j({
|
|
|
188
200
|
className: l,
|
|
189
201
|
disabled: a,
|
|
190
202
|
"aria-pressed": o,
|
|
191
|
-
...
|
|
203
|
+
...i,
|
|
192
204
|
children: [
|
|
193
|
-
/* @__PURE__ */
|
|
194
|
-
/* @__PURE__ */
|
|
205
|
+
/* @__PURE__ */ e("div", { className: "mbt-menu-button__icon", children: n ?? /* @__PURE__ */ e(h, {}) }),
|
|
206
|
+
/* @__PURE__ */ e("span", { className: "mbt-menu-button__text", children: t })
|
|
195
207
|
]
|
|
196
208
|
}
|
|
197
209
|
);
|
|
198
210
|
}
|
|
199
211
|
export {
|
|
200
|
-
|
|
212
|
+
k as Button,
|
|
201
213
|
h as GraduationCapIcon,
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
214
|
+
N as Heading,
|
|
215
|
+
x as Input,
|
|
216
|
+
g as MenuButton,
|
|
217
|
+
w as Metric,
|
|
206
218
|
p as SearchIcon,
|
|
207
|
-
|
|
208
|
-
|
|
219
|
+
j as Text,
|
|
220
|
+
L as colors,
|
|
209
221
|
C as fontSizes,
|
|
210
222
|
y as fontWeights,
|
|
211
223
|
I as fonts,
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
224
|
+
W as radius,
|
|
225
|
+
M as spacing,
|
|
226
|
+
z as tokens,
|
|
227
|
+
T as transitions,
|
|
216
228
|
S as zIndex
|
|
217
229
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";@import"https://rsms.me/inter/inter.css";.mbt-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:0 8px;font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:normal;text-transform:uppercase;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease;background-color:#f2f4fa;color:#0b0e14}.mbt-button:hover{color:#6663fd}.mbt-button:active{opacity:.9}.mbt-button:focus-visible{box-shadow:0 0 0 2px #0b0e14,0 0 0 4px #6663fd}.mbt-button:disabled,.mbt-button--disabled{background-color:#474953;color:#8b92a6;cursor:not-allowed;pointer-events:none}.mbt-button--full-width{width:100%}.mbt-input__container{display:flex;flex-direction:column;gap:10px;width:100%;max-width:296px}.mbt-input__label{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__label--muted{color:#8b92a6}.mbt-input__wrapper{position:relative;display:flex;align-items:center;width:100%;border:1px solid #F2F4FA;border-radius:8px;padding:8px 16px;background-color:transparent;transition:border-color .15s ease}.mbt-input__wrapper--muted{border-color:#8b92a6}.mbt-input__wrapper:focus-within{border-color:#6663fd}.mbt-input__field{flex:1;appearance:none;border:none;background:none;outline:none;font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__field::placeholder{color:#f2f4fa}.mbt-input__field--muted{color:#8b92a6}.mbt-input__field--muted::placeholder{color:#8b92a6}.mbt-input__icon{flex-shrink:0;width:24px;height:24px;margin-left:8px;color:#f2f4fa}.mbt-input__icon--muted{color:#8b92a6}.mbt-input--full-width .mbt-input__container{max-width:none}.mbt-h1{font-family:IBM Plex Sans,sans-serif;font-size:72px;font-weight:600;line-height:80px;color:#f2f4fa;margin:0}.mbt-h2{font-family:IBM Plex Sans,sans-serif;font-size:40px;font-weight:600;line-height:48px;color:#f2f4fa;margin:0}.mbt-h3{font-family:IBM Plex Sans,sans-serif;font-size:28px;font-weight:500;line-height:36px;color:#f2f4fa;margin:0}.mbt-h4{font-family:IBM Plex Sans,sans-serif;font-size:20px;font-weight:500;line-height:28px;color:#f2f4fa;margin:0}.mbt-h5{font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;margin:0}.mbt-text{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0;font-feature-settings:"salt" on,"ss01" on,"ss02" on}.mbt-text--strong{font-weight:500}.mbt-text--small{font-size:12px;line-height:18px}.mbt-text--label{font-size:12px;text-transform:uppercase}.mbt-text--muted{color:#8b92a6}.mbt-text--no-features{font-feature-settings:normal}.mbt-metric{font-family:IBM Plex Mono,monospace;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0}.mbt-metric--large{font-size:24px;font-weight:500;line-height:32px}.mbt-metric--muted{color:#8b92a6}.mbt-menu-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;display:flex;align-items:center;width:248px;height:44px;padding:4px 12px;gap:8px;font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px;transition:background-color .15s ease,color .15s ease}.mbt-menu-button__icon{flex-shrink:0;width:24px;height:24px;color:#f2f4fa;transition:color .15s ease}.mbt-menu-button__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected){background-color:#2a3148;color:#446bec}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected) .mbt-menu-button__icon{color:#446bec}.mbt-menu-button--selected{background-color:#1d2335;color:#6663fd}.mbt-menu-button--selected .mbt-menu-button__icon{color:#6663fd}.mbt-menu-button--small{padding:4px 8px;height:26px;gap:8px;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.mbt-menu-button--small .mbt-menu-button__icon{width:20px;height:20px}.mbt-menu-button:disabled{color:#8b92a6;cursor:not-allowed;pointer-events:none}.mbt-menu-button:disabled .mbt-menu-button__icon{color:#8b92a6}*,*:before,*:after{box-sizing:border-box}:root{--mbt-color-bg-0: #0b0e14;--mbt-color-bg-1: #111520;--mbt-color-surface: #171c2a;--mbt-color-surface-raised: #1d2335;--mbt-color-text-primary: #f2f4fa;--mbt-color-text-muted: #8b92a6;--mbt-color-text-inverse: #0b0e14;--mbt-color-primary: #6663fd;--mbt-color-secondary: #4fa3b3;--mbt-color-gray: #474953;--mbt-color-border: #2a3148;--mbt-color-success: #4dba8a;--mbt-color-error: #c9636a;--mbt-color-warning: #d1a64a;--mbt-color-diamond: #e6f3ff;--mbt-color-diamond-stop-0: #beacd3;--mbt-color-diamond-stop-1: #bee3f7;--mbt-color-diamond-stop-2: #efece7;--mbt-color-diamond-stop-3: #f8ddde;--mbt-color-diamond-stop-4: #cfe6f1;--mbt-font-primary: "IBM Plex Sans", sans-serif;--mbt-font-secondary: "Inter", sans-serif;--mbt-font-mono: "IBM Plex Mono", monospace;--mbt-font-size-1: 12px;--mbt-font-size-2: 14px;--mbt-font-size-3: 16px;--mbt-font-size-4: 20px;--mbt-font-size-5: 24px;--mbt-font-size-6: 28px;--mbt-font-size-7: 40px;--mbt-font-size-8: 48px;--mbt-font-size-9: 72px;--mbt-font-weight-regular: 400;--mbt-font-weight-medium: 500;--mbt-font-weight-semibold: 600;--mbt-font-feature-inter-stylistic: "salt" on, "ss01" on, "ss02" on;--mbt-space-0: 0;--mbt-space-1: 4px;--mbt-space-2: 8px;--mbt-space-3: 12px;--mbt-space-4: 16px;--mbt-space-5: 24px;--mbt-space-6: 32px;--mbt-space-7: 48px;--mbt-space-8: 64px;--mbt-space-9: 96px;--mbt-space-10: 128px;--mbt-radius-0: 0;--mbt-radius-xs: 4px;--mbt-radius-sm: 8px;--mbt-radius-md: 12px;--mbt-radius-lg: 16px;--mbt-radius-xl: 24px;--mbt-radius-full: 999px;--mbt-z-index-0: 0;--mbt-z-index-1: 100;--mbt-z-index-2: 200;--mbt-z-index-3: 300;--mbt-z-index-4: 400;--mbt-z-index-5: 500;--mbt-transition-fast: .15s ease;--mbt-transition-normal: .25s ease;--mbt-transition-slow: .4s ease}
|
package/dist/styles/tokens.css
CHANGED
|
@@ -62,6 +62,8 @@
|
|
|
62
62
|
--mbt-font-weight-medium: 500;
|
|
63
63
|
--mbt-font-weight-semibold: 600;
|
|
64
64
|
|
|
65
|
+
--mbt-font-feature-inter-stylistic: 'salt' on, 'ss01' on, 'ss02' on;
|
|
66
|
+
|
|
65
67
|
/* ========================================================================= */
|
|
66
68
|
/* Spacing */
|
|
67
69
|
/* ========================================================================= */
|
package/dist/styles/tokens.d.ts
CHANGED
|
@@ -47,6 +47,9 @@ export declare const fontWeights: {
|
|
|
47
47
|
readonly medium: 500;
|
|
48
48
|
readonly semibold: 600;
|
|
49
49
|
};
|
|
50
|
+
export declare const fontFeatures: {
|
|
51
|
+
readonly interStylistic: "'salt' on, 'ss01' on, 'ss02' on";
|
|
52
|
+
};
|
|
50
53
|
export declare const spacing: {
|
|
51
54
|
readonly 0: "0";
|
|
52
55
|
readonly 1: "4px";
|
|
@@ -126,6 +129,9 @@ export declare const tokens: {
|
|
|
126
129
|
readonly medium: 500;
|
|
127
130
|
readonly semibold: 600;
|
|
128
131
|
};
|
|
132
|
+
readonly fontFeatures: {
|
|
133
|
+
readonly interStylistic: "'salt' on, 'ss01' on, 'ss02' on";
|
|
134
|
+
};
|
|
129
135
|
readonly spacing: {
|
|
130
136
|
readonly 0: "0";
|
|
131
137
|
readonly 1: "4px";
|
|
@@ -167,6 +173,7 @@ export type Color = keyof typeof colors;
|
|
|
167
173
|
export type Font = keyof typeof fonts;
|
|
168
174
|
export type FontSize = keyof typeof fontSizes;
|
|
169
175
|
export type FontWeight = keyof typeof fontWeights;
|
|
176
|
+
export type FontFeature = keyof typeof fontFeatures;
|
|
170
177
|
export type Spacing = keyof typeof spacing;
|
|
171
178
|
export type Radius = keyof typeof radius;
|
|
172
179
|
export type ZIndex = keyof typeof zIndex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA8BT,CAAC;AAMX,eAAO,MAAM,KAAK;;;;CAIR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAMX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAMX,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA8BT,CAAC;AAMX,eAAO,MAAM,KAAK;;;;CAIR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,YAAY;;CAEf,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAMX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUT,CAAC;AAEX,eAAe,MAAM,CAAC;AAMtB,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,MAAM,CAAC;AACxC,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,KAAK,CAAC;AACtC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,OAAO,CAAC;AAC3C,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8B92A6",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#4FA3B3",gray:"#474953",border:"#2A3148",success:"#4DBA8A",error:"#C9636A",warning:"#D1A64A",diamond:"#E6F3FF",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1"},o={primary:'"IBM Plex Sans", sans-serif',secondary:'"Inter", sans-serif',mono:'"IBM Plex Mono", monospace'},n={1:"12px",2:"14px",3:"16px",4:"20px",5:"24px",6:"28px",7:"40px",8:"48px",9:"72px"},t={regular:400,medium:500,semibold:600},e={0:"0",1:"4px",2:"8px",3:"12px",4:"16px",5:"24px",6:"32px",7:"48px",8:"64px",9:"96px",10:"128px"},p={0:"0",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"999px"},
|
|
1
|
+
"use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8B92A6",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#4FA3B3",gray:"#474953",border:"#2A3148",success:"#4DBA8A",error:"#C9636A",warning:"#D1A64A",diamond:"#E6F3FF",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1"},o={primary:'"IBM Plex Sans", sans-serif',secondary:'"Inter", sans-serif',mono:'"IBM Plex Mono", monospace'},n={1:"12px",2:"14px",3:"16px",4:"20px",5:"24px",6:"28px",7:"40px",8:"48px",9:"72px"},t={regular:400,medium:500,semibold:600},r={interStylistic:"'salt' on, 'ss01' on, 'ss02' on"},e={0:"0",1:"4px",2:"8px",3:"12px",4:"16px",5:"24px",6:"32px",7:"48px",8:"64px",9:"96px",10:"128px"},p={0:"0",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"999px"},a={0:0,1:100,2:200,3:300,4:400,5:500},x={fast:"150ms ease",normal:"250ms ease",slow:"400ms ease"},i={colors:s,fonts:o,fontSizes:n,fontWeights:t,fontFeatures:r,spacing:e,radius:p,zIndex:a,transitions:x};exports.colors=s;exports.fontSizes=n;exports.fontWeights=t;exports.fonts=o;exports.radius=p;exports.spacing=e;exports.tokens=i;exports.transitions=x;exports.zIndex=a;
|
|
@@ -28,7 +28,7 @@ const s = {
|
|
|
28
28
|
primary: '"IBM Plex Sans", sans-serif',
|
|
29
29
|
secondary: '"Inter", sans-serif',
|
|
30
30
|
mono: '"IBM Plex Mono", monospace'
|
|
31
|
-
},
|
|
31
|
+
}, n = {
|
|
32
32
|
1: "12px",
|
|
33
33
|
2: "14px",
|
|
34
34
|
3: "16px",
|
|
@@ -38,11 +38,13 @@ const s = {
|
|
|
38
38
|
7: "40px",
|
|
39
39
|
8: "48px",
|
|
40
40
|
9: "72px"
|
|
41
|
-
},
|
|
41
|
+
}, a = {
|
|
42
42
|
regular: 400,
|
|
43
43
|
medium: 500,
|
|
44
44
|
semibold: 600
|
|
45
|
-
},
|
|
45
|
+
}, t = {
|
|
46
|
+
interStylistic: "'salt' on, 'ss01' on, 'ss02' on"
|
|
47
|
+
}, e = {
|
|
46
48
|
0: "0",
|
|
47
49
|
1: "4px",
|
|
48
50
|
2: "8px",
|
|
@@ -54,7 +56,7 @@ const s = {
|
|
|
54
56
|
8: "64px",
|
|
55
57
|
9: "96px",
|
|
56
58
|
10: "128px"
|
|
57
|
-
},
|
|
59
|
+
}, p = {
|
|
58
60
|
0: "0",
|
|
59
61
|
xs: "4px",
|
|
60
62
|
sm: "8px",
|
|
@@ -69,28 +71,29 @@ const s = {
|
|
|
69
71
|
3: 300,
|
|
70
72
|
4: 400,
|
|
71
73
|
5: 500
|
|
72
|
-
},
|
|
74
|
+
}, r = {
|
|
73
75
|
fast: "150ms ease",
|
|
74
76
|
normal: "250ms ease",
|
|
75
77
|
slow: "400ms ease"
|
|
76
|
-
},
|
|
78
|
+
}, i = {
|
|
77
79
|
colors: s,
|
|
78
80
|
fonts: o,
|
|
79
|
-
fontSizes:
|
|
80
|
-
fontWeights:
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
fontSizes: n,
|
|
82
|
+
fontWeights: a,
|
|
83
|
+
fontFeatures: t,
|
|
84
|
+
spacing: e,
|
|
85
|
+
radius: p,
|
|
83
86
|
zIndex: x,
|
|
84
|
-
transitions:
|
|
87
|
+
transitions: r
|
|
85
88
|
};
|
|
86
89
|
export {
|
|
87
|
-
a,
|
|
88
|
-
|
|
90
|
+
n as a,
|
|
91
|
+
a as b,
|
|
89
92
|
s as c,
|
|
90
|
-
|
|
93
|
+
r as d,
|
|
91
94
|
o as f,
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
+
p as r,
|
|
96
|
+
e as s,
|
|
97
|
+
i as t,
|
|
95
98
|
x as z
|
|
96
99
|
};
|
package/dist/tokens-only.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./tokens-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./tokens-B_TubVTm.cjs");exports.colors=s.colors;exports.fontSizes=s.fontSizes;exports.fontWeights=s.fontWeights;exports.fonts=s.fonts;exports.radius=s.radius;exports.spacing=s.spacing;exports.tokens=s.tokens;exports.transitions=s.transitions;exports.zIndex=s.zIndex;
|
package/dist/tokens-only.js
CHANGED
package/package.json
CHANGED
package/src/styles/_tokens.scss
CHANGED
|
@@ -19,7 +19,7 @@ $text-inverse: #0B0E14;
|
|
|
19
19
|
|
|
20
20
|
// Brand
|
|
21
21
|
$primary: #6663FD;
|
|
22
|
-
$secondary: #
|
|
22
|
+
$secondary: #446bec;
|
|
23
23
|
|
|
24
24
|
// State
|
|
25
25
|
$gray: #474953;
|
|
@@ -60,6 +60,9 @@ $font-weight-regular: 400;
|
|
|
60
60
|
$font-weight-medium: 500;
|
|
61
61
|
$font-weight-semibold: 600;
|
|
62
62
|
|
|
63
|
+
// Font features
|
|
64
|
+
$font-feature-inter-stylistic: 'salt' on, 'ss01' on, 'ss02' on;
|
|
65
|
+
|
|
63
66
|
// -----------------------------------------------------------------------------
|
|
64
67
|
// Spacing
|
|
65
68
|
// -----------------------------------------------------------------------------
|