mbt-ui-kit 0.1.20 → 0.1.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/.ai/agent-examples/README.md +23 -1
- package/.ai/agent-reference/README.md +2 -2
- package/.ai/agent-rules/README.md +2 -2
- package/README.md +17 -7
- package/dist/components/badge/badge.d.ts +9 -0
- package/dist/components/badge/badge.d.ts.map +1 -0
- package/dist/components/badge/boost-icon.d.ts +2 -0
- package/dist/components/badge/boost-icon.d.ts.map +1 -0
- package/dist/components/badge/index.d.ts +3 -0
- package/dist/components/badge/index.d.ts.map +1 -0
- package/dist/components/badge/purchasable-icon.d.ts +2 -0
- package/dist/components/badge/purchasable-icon.d.ts.map +1 -0
- package/dist/components/button/button.d.ts +1 -2
- package/dist/components/button/button.d.ts.map +1 -1
- package/dist/components/typography/text.d.ts +3 -2
- package/dist/components/typography/text.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +198 -112
- package/dist/styles/mbt-ui-kit.css +1 -1
- package/dist/styles/tokens.css +4 -18
- package/dist/styles/tokens.d.ts +8 -12
- package/dist/styles/tokens.d.ts.map +1 -1
- package/dist/{tokens-C9wefV-c.js → tokens-C0g4TAJO.js} +27 -29
- package/dist/tokens-C8rDJFS5.cjs +1 -0
- package/dist/tokens-only.cjs +1 -1
- package/dist/tokens-only.mjs +1 -1
- package/package.json +1 -1
- package/src/styles/_tokens.scss +4 -18
- package/dist/tokens-DbQnrzz6.cjs +0 -1
|
@@ -57,6 +57,26 @@ const preloadFonts = [plexSansRegularUrl, plexSansMediumUrl, interVariableUrl];
|
|
|
57
57
|
<Button type="button" onClick={handleOpenSettings}>
|
|
58
58
|
<SettingsIcon /> Settings
|
|
59
59
|
</Button>
|
|
60
|
+
|
|
61
|
+
<Button>
|
|
62
|
+
Some text <SearchIcon /> Search
|
|
63
|
+
</Button>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Badges
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<Badge>1200</Badge>
|
|
70
|
+
|
|
71
|
+
<Badge icon={<CrystalIcon />}>1200</Badge>
|
|
72
|
+
|
|
73
|
+
<Badge icon={<CrystalIcon />} purchasable>
|
|
74
|
+
1200
|
|
75
|
+
</Badge>
|
|
76
|
+
|
|
77
|
+
<Badge icon={<CrystalIcon />} boost>
|
|
78
|
+
1200
|
|
79
|
+
</Badge>
|
|
60
80
|
```
|
|
61
81
|
|
|
62
82
|
## Inputs
|
|
@@ -81,6 +101,8 @@ const preloadFonts = [plexSansRegularUrl, plexSansMediumUrl, interVariableUrl];
|
|
|
81
101
|
<Text strong>Highlighted text.</Text>
|
|
82
102
|
<Text small muted>Secondary caption.</Text>
|
|
83
103
|
<Text label>Role</Text>
|
|
104
|
+
<Text>Some text <SearchIcon /> more text</Text>
|
|
105
|
+
<Text contentGap>{'Some text'}<SearchIcon />{'more text'}</Text>
|
|
84
106
|
|
|
85
107
|
<Metric>1,234</Metric>
|
|
86
108
|
<Metric large>42,500</Metric>
|
|
@@ -156,7 +178,7 @@ const panelStyle = {
|
|
|
156
178
|
import { colors } from 'mbt-ui-kit/tokens';
|
|
157
179
|
|
|
158
180
|
const heroStyle = {
|
|
159
|
-
background: colors.
|
|
181
|
+
background: `linear-gradient(45deg, ${colors.primaryStop0} 0%, ${colors.primaryStop1} 40%, ${colors.primaryStop2} 100%)`,
|
|
160
182
|
};
|
|
161
183
|
|
|
162
184
|
const customDiamondStyle = {
|
|
@@ -24,6 +24,7 @@ This folder holds factual package reference for `mbt-ui-kit`.
|
|
|
24
24
|
## Primary Components
|
|
25
25
|
|
|
26
26
|
- `Button`
|
|
27
|
+
- `Badge`
|
|
27
28
|
- `Input`
|
|
28
29
|
- `Loader`
|
|
29
30
|
- `Heading`
|
|
@@ -48,8 +49,7 @@ This folder holds factual package reference for `mbt-ui-kit`.
|
|
|
48
49
|
|
|
49
50
|
## Color Token Notes
|
|
50
51
|
|
|
51
|
-
- `colors` includes solid colors
|
|
52
|
-
- direct gradient tokens: `colors.primaryGradient` and `colors.diamondGradient`
|
|
52
|
+
- `colors` includes solid colors and gradient stop tokens.
|
|
53
53
|
- primary gradient stop tokens: `colors.primaryStop0`, `colors.primaryStop1`, `colors.primaryStop2`
|
|
54
54
|
- diamond gradient stop tokens: `colors.diamondStop0`, `colors.diamondStop1`, `colors.diamondStop2`, `colors.diamondStop3`, `colors.diamondStop4`
|
|
55
55
|
|
|
@@ -26,6 +26,7 @@ These files are the canonical package-owned rules for `mbt-ui-kit`.
|
|
|
26
26
|
## Component Guidance
|
|
27
27
|
|
|
28
28
|
- Use `Button` for shared button behavior instead of recreating button primitives.
|
|
29
|
+
- Use `Badge` for compact pill-style value labels with optional left media and package-owned purchasable or boost affordances.
|
|
29
30
|
- Use `Input` for labeled text inputs and search-style input affordances.
|
|
30
31
|
- Use `Heading`, `Text`, and `Metric` for typography when the consumer wants the package typography primitives.
|
|
31
32
|
- Use `MenuButton` for sidebar or navigation-style button treatments, not as a generic replacement for every button.
|
|
@@ -34,6 +35,5 @@ These files are the canonical package-owned rules for `mbt-ui-kit`.
|
|
|
34
35
|
## Token Guidance
|
|
35
36
|
|
|
36
37
|
- Preferred token families are `colors`, `fonts`, `fontSizes`, `fontWeights`, `fontFeatures`, `spacing`, `radius`, `zIndex`, and `transitions`.
|
|
37
|
-
- Use
|
|
38
|
-
- Use the exported gradient stop tokens when the consumer needs to compose the same gradients with a different angle or stop layout.
|
|
38
|
+
- Use the exported gradient stop tokens when the consumer needs to compose package gradients.
|
|
39
39
|
- When a consumer needs a custom value outside the token system, keep the exception local to that consumer instead of expanding package docs with app-only design rules.
|
package/README.md
CHANGED
|
@@ -193,20 +193,18 @@ Available token groups:
|
|
|
193
193
|
- `zIndex`
|
|
194
194
|
- `transitions`
|
|
195
195
|
|
|
196
|
-
The `colors` group also includes gradient
|
|
196
|
+
The `colors` group also includes gradient stop tokens:
|
|
197
197
|
|
|
198
|
-
- `primaryGradient`
|
|
199
|
-
- `diamondGradient`
|
|
200
198
|
- `primaryStop0`, `primaryStop1`, `primaryStop2`
|
|
201
199
|
- `diamondStop0`, `diamondStop1`, `diamondStop2`, `diamondStop3`, `diamondStop4`
|
|
202
200
|
|
|
203
|
-
|
|
201
|
+
Gradient composition from stop colors:
|
|
204
202
|
|
|
205
203
|
```tsx
|
|
206
204
|
import { colors } from 'mbt-ui-kit/tokens';
|
|
207
205
|
|
|
208
206
|
const heroStyle = {
|
|
209
|
-
background: colors.
|
|
207
|
+
background: `linear-gradient(45deg, ${colors.primaryStop0} 0%, ${colors.primaryStop1} 40%, ${colors.primaryStop2} 100%)`,
|
|
210
208
|
};
|
|
211
209
|
```
|
|
212
210
|
|
|
@@ -236,7 +234,12 @@ import 'mbt-ui-kit/tokens.css';
|
|
|
236
234
|
}
|
|
237
235
|
|
|
238
236
|
.hero {
|
|
239
|
-
background:
|
|
237
|
+
background: linear-gradient(
|
|
238
|
+
45deg,
|
|
239
|
+
var(--mbt-color-primary-stop-0) 0%,
|
|
240
|
+
var(--mbt-color-primary-stop-1) 40%,
|
|
241
|
+
var(--mbt-color-primary-stop-2) 100%
|
|
242
|
+
);
|
|
240
243
|
}
|
|
241
244
|
```
|
|
242
245
|
|
|
@@ -253,7 +256,14 @@ import 'mbt-ui-kit/tokens.css';
|
|
|
253
256
|
}
|
|
254
257
|
|
|
255
258
|
.hero {
|
|
256
|
-
background:
|
|
259
|
+
background: linear-gradient(
|
|
260
|
+
45deg,
|
|
261
|
+
$diamond-stop-0 0%,
|
|
262
|
+
$diamond-stop-1 25%,
|
|
263
|
+
$diamond-stop-2 50%,
|
|
264
|
+
$diamond-stop-3 75%,
|
|
265
|
+
$diamond-stop-4 100%
|
|
266
|
+
);
|
|
257
267
|
}
|
|
258
268
|
```
|
|
259
269
|
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
icon?: ReactNode;
|
|
5
|
+
purchasable?: boolean;
|
|
6
|
+
boost?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export declare function Badge({ children, icon, purchasable, boost, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
//# sourceMappingURL=badge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,WAAmB,EACnB,KAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAoCZ"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"boost-icon.d.ts","sourceRoot":"","sources":["../../../src/components/badge/boost-icon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,4CAoBxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"purchasable-icon.d.ts","sourceRoot":"","sources":["../../../src/components/badge/purchasable-icon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,4CAwB9B"}
|
|
@@ -4,7 +4,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
4
4
|
fullWidth?: boolean;
|
|
5
5
|
loading?: boolean;
|
|
6
6
|
variant?: 'primary' | 'secondary';
|
|
7
|
-
rounded?: boolean;
|
|
8
7
|
}
|
|
9
|
-
export declare function Button({ children, fullWidth,
|
|
8
|
+
export declare function Button({ children, fullWidth, disabled, loading, variant, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
//# sourceMappingURL=button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CAyBb"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
3
3
|
children?: ReactNode;
|
|
4
4
|
strong?: boolean;
|
|
@@ -6,7 +6,8 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
|
6
6
|
label?: boolean;
|
|
7
7
|
muted?: boolean;
|
|
8
8
|
disableFontFeatures?: boolean;
|
|
9
|
+
contentGap?: boolean;
|
|
9
10
|
as?: 'p' | 'span' | 'div';
|
|
10
11
|
}
|
|
11
|
-
export declare function Text({ children, strong, small, label, muted, disableFontFeatures, as, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function Text({ children, strong, small, label, muted, disableFontFeatures, contentGap, as, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
//# 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,
|
|
1
|
+
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;CAC3B;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAc,EACd,KAAa,EACb,KAAa,EACb,KAAa,EACb,mBAA2B,EAC3B,UAAkB,EAClB,EAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CA6BX"}
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./tokens-C8rDJFS5.cjs"),t=require("react/jsx-runtime"),x=require("react");function f({size:s="md",className:e,...n}){const o=["mbt-loader",`mbt-loader--${s}`,e].filter(Boolean).join(" ");return t.jsxs("span",{className:o,...n,children:[t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"})]})}function L({children:s,fullWidth:e,disabled:n,loading:o,variant:a="primary",className:i,...r}){const l=n||o,d=["mbt-button",a&&`mbt-button--${a}`,e&&"mbt-button--full-width",n&&"mbt-button--disabled",o&&"mbt-button--loading",i].filter(Boolean).join(" ");return t.jsxs("button",{type:"button",className:d,disabled:l,...r,children:[t.jsx("span",{className:"mbt-button__content",children:s}),o&&t.jsx(f,{size:"md",className:"mbt-button__loader"})]})}function B({level:s,children:e,className:n,...o}){const a=`h${s}`,i=[`mbt-h${s}`,n].filter(Boolean).join(" ");return t.jsx(a,{className:i,...o,children:e})}function v({children:s,large:e=!1,muted:n=!1,as:o="div",className:a,...i}){const r=o,l=["mbt-metric",e&&"mbt-metric--large",n&&"mbt-metric--muted",a].filter(Boolean).join(" ");return t.jsx(r,{className:l,...i,children:s})}function g({children:s,strong:e=!1,small:n=!1,label:o=!1,muted:a=!1,disableFontFeatures:i=!1,contentGap:r=!1,as:l="p",className:d,...m}){const b=l,h=["mbt-text",e&&"mbt-text--strong",n&&"mbt-text--small",o&&"mbt-text--label",a&&"mbt-text--muted",i&&"mbt-text--no-features",d].filter(Boolean).join(" "),p=r?t.jsx("span",{className:"mbt-text__content",children:x.Children.toArray(s).map(u=>typeof u=="string"?u.trim():u).filter(u=>u!=="")}):s;return t.jsx(b,{className:h,...m,children:p})}function C(){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t.jsx("path",{d:"M12 4L19 10.5L16.5 12.5L12 8.5L7.5 12.5L5 10.5L12 4Z",fill:"currentColor"}),t.jsx("path",{d:"M12 9L19 15.5L16.5 17.5L12 13.5L7.5 17.5L5 15.5L12 9Z",fill:"currentColor"})]})}function I(){return t.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t.jsx("path",{d:"M8 3V13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),t.jsx("path",{d:"M3 8H13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}function y({children:s,icon:e,purchasable:n=!1,boost:o=!1,className:a,...i}){const r=!!e,l=r&&n,d=["mbt-badge",r&&"mbt-badge--with-icon",n&&"mbt-badge--purchasable",o&&"mbt-badge--boost",a].filter(Boolean).join(" ");return t.jsxs("div",{className:d,...i,children:[r&&t.jsxs("span",{className:"mbt-badge__media",children:[t.jsx("span",{className:"mbt-badge__icon",children:e}),l&&t.jsx("span",{className:"mbt-badge__purchasable","aria-hidden":"true",children:t.jsx(I,{})})]}),t.jsx(g,{as:"span",disableFontFeatures:!0,strong:!0,className:"mbt-badge__content",children:s}),o&&t.jsx("span",{className:"mbt-badge__boost","aria-hidden":"true",children:t.jsx(C,{})})]})}function _({className:s,title:e="Search"}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:s,role:"img","aria-label":e,children:[t.jsx("title",{children:e}),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"})]})}const N=x.forwardRef(({label:s,muted:e=!1,showSearchIcon:n=!1,icon:o,fullWidth:a=!1,className:i,...r},l)=>{const d=x.useId(),m=r.id??d,b=["mbt-input",a&&"mbt-input--full-width",i].filter(Boolean).join(" "),h=["mbt-input__label",e&&"mbt-input__label--muted"].filter(Boolean).join(" "),p=["mbt-input__wrapper",e&&"mbt-input__wrapper--muted"].filter(Boolean).join(" "),u=["mbt-input__field",e&&"mbt-input__field--muted"].filter(Boolean).join(" "),k=["mbt-input__icon",e&&"mbt-input__icon--muted"].filter(Boolean).join(" "),j=o||n&&t.jsx(_,{});return t.jsx("div",{className:b,children:t.jsxs("div",{className:"mbt-input__container",children:[s&&t.jsx("label",{htmlFor:m,className:h,children:s}),t.jsxs("div",{className:p,children:[t.jsx("input",{ref:l,id:m,type:"text",className:u,...r}),j&&t.jsx("div",{className:k,children:j})]})]})})});N.displayName="Input";function w({className:s,title:e="Graduation cap"}){return t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:s,role:"img","aria-label":e,children:[t.jsx("title",{children:e}),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 M({children:s,icon:e,selected:n=!1,small:o=!1,disabled:a,className:i,...r}){const l=["mbt-menu-button",n&&"mbt-menu-button--selected",o&&"mbt-menu-button--small",i].filter(Boolean).join(" "),d=e??t.jsx(w,{});return t.jsxs("button",{type:"button",className:l,disabled:a,"aria-pressed":n,...r,children:[t.jsx("div",{className:"mbt-menu-button__icon",children:d}),t.jsx("span",{className:"mbt-menu-button__text",children:s})]})}exports.colors=c.colors;exports.fontFeatures=c.fontFeatures;exports.fontSizes=c.fontSizes;exports.fontWeights=c.fontWeights;exports.fonts=c.fonts;exports.radius=c.radius;exports.spacing=c.spacing;exports.tokens=c.tokens;exports.transitions=c.transitions;exports.zIndex=c.zIndex;exports.Badge=y;exports.Button=L;exports.GraduationCapIcon=w;exports.Heading=B;exports.Input=N;exports.Loader=f;exports.MenuButton=M;exports.Metric=v;exports.SearchIcon=_;exports.Text=g;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import './styles/index.scss';
|
|
2
2
|
export type { ButtonProps } from './components/button';
|
|
3
3
|
export { Button } from './components/button';
|
|
4
|
+
export type { BadgeProps } from './components/badge';
|
|
5
|
+
export { Badge } from './components/badge';
|
|
4
6
|
export type { InputProps } from './components/input';
|
|
5
7
|
export { Input, SearchIcon } from './components/input';
|
|
6
8
|
export type { LoaderProps } from './components/loader';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,UAAU,EACV,MAAM,GACP,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,MAAM,EACN,WAAW,EACX,MAAM,GACP,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,UAAU,EACV,MAAM,GACP,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,MAAM,EACN,WAAW,EACX,MAAM,GACP,MAAM,iBAAiB,CAAC"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,48 +1,180 @@
|
|
|
1
|
-
import { c as
|
|
1
|
+
import { c as G, f as H, a as P, b as V, d as Z, r as A, s as D, t as R, e as q, z as E } from "./tokens-C0g4TAJO.js";
|
|
2
2
|
import { jsxs as c, jsx as t } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as N, useId as
|
|
4
|
-
function
|
|
5
|
-
const
|
|
6
|
-
return /* @__PURE__ */ c("span", { className:
|
|
3
|
+
import { Children as g, forwardRef as N, useId as w } from "react";
|
|
4
|
+
function k({ size: n = "md", className: e, ...s }) {
|
|
5
|
+
const o = ["mbt-loader", `mbt-loader--${n}`, e].filter(Boolean).join(" ");
|
|
6
|
+
return /* @__PURE__ */ c("span", { className: o, ...s, children: [
|
|
7
7
|
/* @__PURE__ */ t("span", { className: "mbt-loader__dot" }),
|
|
8
8
|
/* @__PURE__ */ t("span", { className: "mbt-loader__dot" }),
|
|
9
9
|
/* @__PURE__ */ t("span", { className: "mbt-loader__dot" })
|
|
10
10
|
] });
|
|
11
11
|
}
|
|
12
|
-
function
|
|
12
|
+
function M({
|
|
13
13
|
children: n,
|
|
14
14
|
fullWidth: e,
|
|
15
|
-
rounded: o = !0,
|
|
16
15
|
disabled: s,
|
|
17
|
-
loading:
|
|
18
|
-
variant:
|
|
16
|
+
loading: o,
|
|
17
|
+
variant: a = "primary",
|
|
19
18
|
className: i,
|
|
20
|
-
...
|
|
19
|
+
...r
|
|
21
20
|
}) {
|
|
22
|
-
const
|
|
21
|
+
const l = s || o, d = [
|
|
23
22
|
"mbt-button",
|
|
24
|
-
|
|
23
|
+
a && `mbt-button--${a}`,
|
|
25
24
|
e && "mbt-button--full-width",
|
|
26
|
-
!o && "mbt-button--diagonal",
|
|
27
25
|
s && "mbt-button--disabled",
|
|
28
|
-
|
|
26
|
+
o && "mbt-button--loading",
|
|
29
27
|
i
|
|
30
28
|
].filter(Boolean).join(" ");
|
|
31
29
|
return /* @__PURE__ */ c(
|
|
32
30
|
"button",
|
|
33
31
|
{
|
|
34
32
|
type: "button",
|
|
35
|
-
className:
|
|
36
|
-
disabled:
|
|
37
|
-
...
|
|
33
|
+
className: d,
|
|
34
|
+
disabled: l,
|
|
35
|
+
...r,
|
|
38
36
|
children: [
|
|
39
37
|
/* @__PURE__ */ t("span", { className: "mbt-button__content", children: n }),
|
|
40
|
-
|
|
38
|
+
o && /* @__PURE__ */ t(k, { size: "md", className: "mbt-button__loader" })
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
function W({
|
|
44
|
+
level: n,
|
|
45
|
+
children: e,
|
|
46
|
+
className: s,
|
|
47
|
+
...o
|
|
48
|
+
}) {
|
|
49
|
+
const a = `h${n}`, i = [`mbt-h${n}`, s].filter(Boolean).join(" ");
|
|
50
|
+
return /* @__PURE__ */ t(a, { className: i, ...o, children: e });
|
|
51
|
+
}
|
|
52
|
+
function z({
|
|
53
|
+
children: n,
|
|
54
|
+
large: e = !1,
|
|
55
|
+
muted: s = !1,
|
|
56
|
+
as: o = "div",
|
|
57
|
+
className: a,
|
|
58
|
+
...i
|
|
59
|
+
}) {
|
|
60
|
+
const r = o, l = [
|
|
61
|
+
"mbt-metric",
|
|
62
|
+
e && "mbt-metric--large",
|
|
63
|
+
s && "mbt-metric--muted",
|
|
64
|
+
a
|
|
65
|
+
].filter(Boolean).join(" ");
|
|
66
|
+
return /* @__PURE__ */ t(r, { className: l, ...i, children: n });
|
|
67
|
+
}
|
|
68
|
+
function L({
|
|
69
|
+
children: n,
|
|
70
|
+
strong: e = !1,
|
|
71
|
+
small: s = !1,
|
|
72
|
+
label: o = !1,
|
|
73
|
+
muted: a = !1,
|
|
74
|
+
disableFontFeatures: i = !1,
|
|
75
|
+
contentGap: r = !1,
|
|
76
|
+
as: l = "p",
|
|
77
|
+
className: d,
|
|
78
|
+
...u
|
|
79
|
+
}) {
|
|
80
|
+
const b = l, p = [
|
|
81
|
+
"mbt-text",
|
|
82
|
+
e && "mbt-text--strong",
|
|
83
|
+
s && "mbt-text--small",
|
|
84
|
+
o && "mbt-text--label",
|
|
85
|
+
a && "mbt-text--muted",
|
|
86
|
+
i && "mbt-text--no-features",
|
|
87
|
+
d
|
|
88
|
+
].filter(Boolean).join(" "), h = r ? /* @__PURE__ */ t("span", { className: "mbt-text__content", children: g.toArray(n).map((m) => typeof m == "string" ? m.trim() : m).filter((m) => m !== "") }) : n;
|
|
89
|
+
return /* @__PURE__ */ t(b, { className: p, ...u, children: h });
|
|
90
|
+
}
|
|
91
|
+
function x() {
|
|
92
|
+
return /* @__PURE__ */ c(
|
|
93
|
+
"svg",
|
|
94
|
+
{
|
|
95
|
+
width: "24",
|
|
96
|
+
height: "24",
|
|
97
|
+
viewBox: "0 0 24 24",
|
|
98
|
+
fill: "none",
|
|
99
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
100
|
+
"aria-hidden": "true",
|
|
101
|
+
children: [
|
|
102
|
+
/* @__PURE__ */ t(
|
|
103
|
+
"path",
|
|
104
|
+
{
|
|
105
|
+
d: "M12 4L19 10.5L16.5 12.5L12 8.5L7.5 12.5L5 10.5L12 4Z",
|
|
106
|
+
fill: "currentColor"
|
|
107
|
+
}
|
|
108
|
+
),
|
|
109
|
+
/* @__PURE__ */ t(
|
|
110
|
+
"path",
|
|
111
|
+
{
|
|
112
|
+
d: "M12 9L19 15.5L16.5 17.5L12 13.5L7.5 17.5L5 15.5L12 9Z",
|
|
113
|
+
fill: "currentColor"
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
function B() {
|
|
121
|
+
return /* @__PURE__ */ c(
|
|
122
|
+
"svg",
|
|
123
|
+
{
|
|
124
|
+
width: "16",
|
|
125
|
+
height: "16",
|
|
126
|
+
viewBox: "0 0 16 16",
|
|
127
|
+
fill: "none",
|
|
128
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
129
|
+
"aria-hidden": "true",
|
|
130
|
+
children: [
|
|
131
|
+
/* @__PURE__ */ t(
|
|
132
|
+
"path",
|
|
133
|
+
{
|
|
134
|
+
d: "M8 3V13",
|
|
135
|
+
stroke: "currentColor",
|
|
136
|
+
strokeWidth: "2",
|
|
137
|
+
strokeLinecap: "round"
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ t(
|
|
141
|
+
"path",
|
|
142
|
+
{
|
|
143
|
+
d: "M3 8H13",
|
|
144
|
+
stroke: "currentColor",
|
|
145
|
+
strokeWidth: "2",
|
|
146
|
+
strokeLinecap: "round"
|
|
147
|
+
}
|
|
148
|
+
)
|
|
41
149
|
]
|
|
42
150
|
}
|
|
43
151
|
);
|
|
44
152
|
}
|
|
45
|
-
function
|
|
153
|
+
function F({
|
|
154
|
+
children: n,
|
|
155
|
+
icon: e,
|
|
156
|
+
purchasable: s = !1,
|
|
157
|
+
boost: o = !1,
|
|
158
|
+
className: a,
|
|
159
|
+
...i
|
|
160
|
+
}) {
|
|
161
|
+
const r = !!e, l = r && s, d = [
|
|
162
|
+
"mbt-badge",
|
|
163
|
+
r && "mbt-badge--with-icon",
|
|
164
|
+
s && "mbt-badge--purchasable",
|
|
165
|
+
o && "mbt-badge--boost",
|
|
166
|
+
a
|
|
167
|
+
].filter(Boolean).join(" ");
|
|
168
|
+
return /* @__PURE__ */ c("div", { className: d, ...i, children: [
|
|
169
|
+
r && /* @__PURE__ */ c("span", { className: "mbt-badge__media", children: [
|
|
170
|
+
/* @__PURE__ */ t("span", { className: "mbt-badge__icon", children: e }),
|
|
171
|
+
l && /* @__PURE__ */ t("span", { className: "mbt-badge__purchasable", "aria-hidden": "true", children: /* @__PURE__ */ t(B, {}) })
|
|
172
|
+
] }),
|
|
173
|
+
/* @__PURE__ */ t(L, { as: "span", disableFontFeatures: !0, strong: !0, className: "mbt-badge__content", children: n }),
|
|
174
|
+
o && /* @__PURE__ */ t("span", { className: "mbt-badge__boost", "aria-hidden": "true", children: /* @__PURE__ */ t(x, {}) })
|
|
175
|
+
] });
|
|
176
|
+
}
|
|
177
|
+
function j({ className: n, title: e = "Search" }) {
|
|
46
178
|
return /* @__PURE__ */ c(
|
|
47
179
|
"svg",
|
|
48
180
|
{
|
|
@@ -82,50 +214,50 @@ function x({ className: n, title: e = "Search" }) {
|
|
|
82
214
|
}
|
|
83
215
|
);
|
|
84
216
|
}
|
|
85
|
-
const
|
|
217
|
+
const v = N(
|
|
86
218
|
({
|
|
87
219
|
label: n,
|
|
88
220
|
muted: e = !1,
|
|
89
|
-
showSearchIcon:
|
|
90
|
-
icon:
|
|
221
|
+
showSearchIcon: s = !1,
|
|
222
|
+
icon: o,
|
|
91
223
|
fullWidth: a = !1,
|
|
92
|
-
className:
|
|
93
|
-
...
|
|
224
|
+
className: i,
|
|
225
|
+
...r
|
|
94
226
|
}, l) => {
|
|
95
|
-
const
|
|
227
|
+
const d = w(), u = r.id ?? d, b = [
|
|
96
228
|
"mbt-input",
|
|
97
229
|
a && "mbt-input--full-width",
|
|
98
|
-
|
|
230
|
+
i
|
|
99
231
|
].filter(Boolean).join(" "), p = [
|
|
100
232
|
"mbt-input__label",
|
|
101
233
|
e && "mbt-input__label--muted"
|
|
102
|
-
].filter(Boolean).join(" "),
|
|
234
|
+
].filter(Boolean).join(" "), h = [
|
|
103
235
|
"mbt-input__wrapper",
|
|
104
236
|
e && "mbt-input__wrapper--muted"
|
|
105
|
-
].filter(Boolean).join(" "),
|
|
237
|
+
].filter(Boolean).join(" "), m = [
|
|
106
238
|
"mbt-input__field",
|
|
107
239
|
e && "mbt-input__field--muted"
|
|
108
|
-
].filter(Boolean).join(" "), _ = ["mbt-input__icon", e && "mbt-input__icon--muted"].filter(Boolean).join(" "),
|
|
109
|
-
return /* @__PURE__ */ t("div", { className:
|
|
240
|
+
].filter(Boolean).join(" "), _ = ["mbt-input__icon", e && "mbt-input__icon--muted"].filter(Boolean).join(" "), f = o || s && /* @__PURE__ */ t(j, {});
|
|
241
|
+
return /* @__PURE__ */ t("div", { className: b, children: /* @__PURE__ */ c("div", { className: "mbt-input__container", children: [
|
|
110
242
|
n && /* @__PURE__ */ t("label", { htmlFor: u, className: p, children: n }),
|
|
111
|
-
/* @__PURE__ */ c("div", { className:
|
|
243
|
+
/* @__PURE__ */ c("div", { className: h, children: [
|
|
112
244
|
/* @__PURE__ */ t(
|
|
113
245
|
"input",
|
|
114
246
|
{
|
|
115
247
|
ref: l,
|
|
116
248
|
id: u,
|
|
117
249
|
type: "text",
|
|
118
|
-
className:
|
|
119
|
-
...
|
|
250
|
+
className: m,
|
|
251
|
+
...r
|
|
120
252
|
}
|
|
121
253
|
),
|
|
122
|
-
|
|
254
|
+
f && /* @__PURE__ */ t("div", { className: _, children: f })
|
|
123
255
|
] })
|
|
124
256
|
] }) });
|
|
125
257
|
}
|
|
126
258
|
);
|
|
127
|
-
|
|
128
|
-
function
|
|
259
|
+
v.displayName = "Input";
|
|
260
|
+
function C({
|
|
129
261
|
className: n,
|
|
130
262
|
title: e = "Graduation cap"
|
|
131
263
|
}) {
|
|
@@ -176,20 +308,20 @@ function w({
|
|
|
176
308
|
}
|
|
177
309
|
);
|
|
178
310
|
}
|
|
179
|
-
function
|
|
311
|
+
function T({
|
|
180
312
|
children: n,
|
|
181
313
|
icon: e,
|
|
182
|
-
selected:
|
|
183
|
-
small:
|
|
314
|
+
selected: s = !1,
|
|
315
|
+
small: o = !1,
|
|
184
316
|
disabled: a,
|
|
185
|
-
className:
|
|
186
|
-
...
|
|
317
|
+
className: i,
|
|
318
|
+
...r
|
|
187
319
|
}) {
|
|
188
320
|
const l = [
|
|
189
321
|
"mbt-menu-button",
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
322
|
+
s && "mbt-menu-button--selected",
|
|
323
|
+
o && "mbt-menu-button--small",
|
|
324
|
+
i
|
|
193
325
|
].filter(Boolean).join(" ");
|
|
194
326
|
return /* @__PURE__ */ c(
|
|
195
327
|
"button",
|
|
@@ -197,80 +329,34 @@ function C({
|
|
|
197
329
|
type: "button",
|
|
198
330
|
className: l,
|
|
199
331
|
disabled: a,
|
|
200
|
-
"aria-pressed":
|
|
201
|
-
...
|
|
332
|
+
"aria-pressed": s,
|
|
333
|
+
...r,
|
|
202
334
|
children: [
|
|
203
|
-
/* @__PURE__ */ t("div", { className: "mbt-menu-button__icon", children: e ?? /* @__PURE__ */ t(
|
|
335
|
+
/* @__PURE__ */ t("div", { className: "mbt-menu-button__icon", children: e ?? /* @__PURE__ */ t(C, {}) }),
|
|
204
336
|
/* @__PURE__ */ t("span", { className: "mbt-menu-button__text", children: n })
|
|
205
337
|
]
|
|
206
338
|
}
|
|
207
339
|
);
|
|
208
340
|
}
|
|
209
|
-
function I({
|
|
210
|
-
level: n,
|
|
211
|
-
children: e,
|
|
212
|
-
className: o,
|
|
213
|
-
...s
|
|
214
|
-
}) {
|
|
215
|
-
const a = `h${n}`, r = [`mbt-h${n}`, o].filter(Boolean).join(" ");
|
|
216
|
-
return /* @__PURE__ */ t(a, { className: r, ...s, children: e });
|
|
217
|
-
}
|
|
218
|
-
function y({
|
|
219
|
-
children: n,
|
|
220
|
-
large: e = !1,
|
|
221
|
-
muted: o = !1,
|
|
222
|
-
as: s = "div",
|
|
223
|
-
className: a,
|
|
224
|
-
...r
|
|
225
|
-
}) {
|
|
226
|
-
const i = s, l = [
|
|
227
|
-
"mbt-metric",
|
|
228
|
-
e && "mbt-metric--large",
|
|
229
|
-
o && "mbt-metric--muted",
|
|
230
|
-
a
|
|
231
|
-
].filter(Boolean).join(" ");
|
|
232
|
-
return /* @__PURE__ */ t(i, { className: l, ...r, children: n });
|
|
233
|
-
}
|
|
234
|
-
function W({
|
|
235
|
-
children: n,
|
|
236
|
-
strong: e = !1,
|
|
237
|
-
small: o = !1,
|
|
238
|
-
label: s = !1,
|
|
239
|
-
muted: a = !1,
|
|
240
|
-
disableFontFeatures: r = !1,
|
|
241
|
-
as: i = "p",
|
|
242
|
-
className: l,
|
|
243
|
-
...m
|
|
244
|
-
}) {
|
|
245
|
-
const u = i, d = [
|
|
246
|
-
"mbt-text",
|
|
247
|
-
e && "mbt-text--strong",
|
|
248
|
-
o && "mbt-text--small",
|
|
249
|
-
s && "mbt-text--label",
|
|
250
|
-
a && "mbt-text--muted",
|
|
251
|
-
r && "mbt-text--no-features",
|
|
252
|
-
l
|
|
253
|
-
].filter(Boolean).join(" ");
|
|
254
|
-
return /* @__PURE__ */ t(u, { className: d, ...m, children: n });
|
|
255
|
-
}
|
|
256
341
|
export {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
342
|
+
F as Badge,
|
|
343
|
+
M as Button,
|
|
344
|
+
C as GraduationCapIcon,
|
|
345
|
+
W as Heading,
|
|
346
|
+
v as Input,
|
|
347
|
+
k as Loader,
|
|
348
|
+
T as MenuButton,
|
|
349
|
+
z as Metric,
|
|
350
|
+
j as SearchIcon,
|
|
351
|
+
L as Text,
|
|
352
|
+
G as colors,
|
|
353
|
+
H as fontFeatures,
|
|
354
|
+
P as fontSizes,
|
|
355
|
+
V as fontWeights,
|
|
356
|
+
Z as fonts,
|
|
357
|
+
A as radius,
|
|
358
|
+
D as spacing,
|
|
273
359
|
R as tokens,
|
|
274
|
-
|
|
275
|
-
|
|
360
|
+
q as transitions,
|
|
361
|
+
E as zIndex
|
|
276
362
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-600.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-600.woff2) format("woff2")}.mbt-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;padding:8px 16px;display:grid;place-items:center;
|
|
1
|
+
@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-600.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-600.woff2) format("woff2")}.mbt-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;padding:8px 16px;display:grid;place-items:center;max-height:40px;border-radius: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}.mbt-button--primary{background-color:#f2f4fa;color:#0b0e14}.mbt-button--secondary{background-color:#475569;color:#f2f4fa}.mbt-button__content,.mbt-button__loader{grid-area:1/1}.mbt-button__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.mbt-button__content svg{display:block;flex-shrink:0}.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{background-color:#475569;color:#8d92a9;cursor:not-allowed;pointer-events:none}.mbt-button--loading{cursor:not-allowed;pointer-events:none}.mbt-button--loading .mbt-button__content{visibility:hidden}.mbt-button--full-width{width:100%}.mbt-badge{position:relative;display:inline-flex;align-items:center;gap:12px;height:24px;max-height:24px;padding:4px 12px;border-radius:999px;background:#1d2335;color:#f2f4fa;overflow:visible;-webkit-user-select:none;user-select:none}.mbt-badge--with-icon{padding-left:12px}.mbt-badge--purchasable{cursor:pointer}.mbt-badge--boost{padding-right:20px}.mbt-badge__media{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin-left:-20px}.mbt-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.mbt-badge__icon svg{display:block;max-width:100%;max-height:100%}.mbt-badge__purchasable{position:absolute;right:-8px;bottom:-7px;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#f2f4fa}.mbt-badge__content{display:inline-flex;align-items:center;min-width:0;line-height:1;color:inherit;white-space:nowrap}.mbt-badge__boost{position:absolute;top:-8px;right:-8px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:#0950c2}.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:#8d92a9}.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:#8d92a9}.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:#8d92a9}.mbt-input__field--muted::placeholder{color:#8d92a9}.mbt-input__icon{flex-shrink:0;width:24px;height:24px;margin-left:8px;color:#f2f4fa}.mbt-input__icon--muted{color:#8d92a9}.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:normal;color:#f2f4fa;margin:0;font-feature-settings:"salt" on,"ss01" on,"ss02" on}.mbt-text svg{display:inline-block;vertical-align:middle}.mbt-text__content{display:inline-flex;align-items:center;gap:8px}.mbt-text__content svg{display:block;flex-shrink:0}.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:#8d92a9}.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:#8d92a9}.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:#0950c2}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected) .mbt-menu-button__icon{color:#0950c2}.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:32px;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:#8d92a9;cursor:not-allowed;pointer-events:none}.mbt-menu-button:disabled .mbt-menu-button__icon{color:#8d92a9}.mbt-loader{display:inline-flex;align-items:center;gap:4px}.mbt-loader__dot{display:inline-block;background-color:currentColor;border-radius:999px;animation:mbt-loader-bounce 1.4s infinite ease-in-out both}.mbt-loader__dot:nth-child(1){animation-delay:-.32s}.mbt-loader__dot:nth-child(2){animation-delay:-.16s}.mbt-loader--sm .mbt-loader__dot{width:6px;height:6px}.mbt-loader--md .mbt-loader__dot{width:9px;height:9px}.mbt-loader--lg .mbt-loader__dot{width:12px;height:12px}@keyframes mbt-loader-bounce{0%,80%,to{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1)}}*,*: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-border: #2a3148;--mbt-color-gray: #475569;--mbt-color-text-primary: #f2f4fa;--mbt-color-text-muted: #8d92a9;--mbt-color-text-inverse: #0b0e14;--mbt-color-primary: #6663fd;--mbt-color-secondary: #0950c2;--mbt-color-success: #00b279;--mbt-color-error: #f2766a;--mbt-color-warning: #e6c352;--mbt-color-diamond: #e6f3ff;--mbt-color-primary-stop-0: #00a09e;--mbt-color-primary-stop-1: #234dc5;--mbt-color-primary-stop-2: #1945d9;--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-color-gold: #d1a64a;--mbt-color-silver: #969fa6;--mbt-color-bronze: #956c68;--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
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
/* Brand */
|
|
27
27
|
--mbt-color-primary: #6663fd;
|
|
28
|
-
--mbt-color-secondary: #
|
|
28
|
+
--mbt-color-secondary: #0950c2;
|
|
29
29
|
|
|
30
30
|
/* State */
|
|
31
31
|
--mbt-color-success: #00b279;
|
|
@@ -34,15 +34,9 @@
|
|
|
34
34
|
--mbt-color-diamond: #e6f3ff;
|
|
35
35
|
|
|
36
36
|
/* Primary gradient */
|
|
37
|
-
--mbt-color-primary-stop-0: #
|
|
38
|
-
--mbt-color-primary-stop-1: #
|
|
39
|
-
--mbt-color-primary-stop-2: #
|
|
40
|
-
--mbt-color-primary-gradient: linear-gradient(
|
|
41
|
-
45deg,
|
|
42
|
-
#65d5f4 0%,
|
|
43
|
-
#0096fa 40%,
|
|
44
|
-
#1c3dc2 100%
|
|
45
|
-
);
|
|
37
|
+
--mbt-color-primary-stop-0: #00a09e;
|
|
38
|
+
--mbt-color-primary-stop-1: #234dc5;
|
|
39
|
+
--mbt-color-primary-stop-2: #1945d9;
|
|
46
40
|
|
|
47
41
|
/* Diamond gradient */
|
|
48
42
|
--mbt-color-diamond-stop-0: #beacd3;
|
|
@@ -50,14 +44,6 @@
|
|
|
50
44
|
--mbt-color-diamond-stop-2: #efece7;
|
|
51
45
|
--mbt-color-diamond-stop-3: #f8ddde;
|
|
52
46
|
--mbt-color-diamond-stop-4: #cfe6f1;
|
|
53
|
-
--mbt-color-diamond-gradient: linear-gradient(
|
|
54
|
-
45deg,
|
|
55
|
-
#beacd3 0%,
|
|
56
|
-
#bee3f7 25%,
|
|
57
|
-
#efece7 50%,
|
|
58
|
-
#f8ddde 75%,
|
|
59
|
-
#cfe6f1 100%
|
|
60
|
-
);
|
|
61
47
|
|
|
62
48
|
/* Metals */
|
|
63
49
|
--mbt-color-gold: #d1a64a;
|
package/dist/styles/tokens.d.ts
CHANGED
|
@@ -13,23 +13,21 @@ export declare const colors: {
|
|
|
13
13
|
readonly textMuted: "#8D92A9";
|
|
14
14
|
readonly textInverse: "#0B0E14";
|
|
15
15
|
readonly primary: "#6663FD";
|
|
16
|
-
readonly secondary: "#
|
|
16
|
+
readonly secondary: "#0950C2";
|
|
17
17
|
readonly gray: "#475569";
|
|
18
18
|
readonly border: "#2A3148";
|
|
19
19
|
readonly success: "#00B279";
|
|
20
20
|
readonly error: "#F2766A";
|
|
21
21
|
readonly warning: "#E6C352";
|
|
22
22
|
readonly diamond: "#E6F3FF";
|
|
23
|
-
readonly primaryStop0: "#
|
|
24
|
-
readonly primaryStop1: "#
|
|
25
|
-
readonly primaryStop2: "#
|
|
26
|
-
readonly primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)";
|
|
23
|
+
readonly primaryStop0: "#00A09E";
|
|
24
|
+
readonly primaryStop1: "#234DC5";
|
|
25
|
+
readonly primaryStop2: "#1945D9";
|
|
27
26
|
readonly diamondStop0: "#BEACD3";
|
|
28
27
|
readonly diamondStop1: "#BEE3F7";
|
|
29
28
|
readonly diamondStop2: "#EFECE7";
|
|
30
29
|
readonly diamondStop3: "#F8DDDE";
|
|
31
30
|
readonly diamondStop4: "#CFE6F1";
|
|
32
|
-
readonly diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)";
|
|
33
31
|
readonly gold: "#D1A64A";
|
|
34
32
|
readonly silver: "#969FA6";
|
|
35
33
|
readonly bronze: "#956C68";
|
|
@@ -103,23 +101,21 @@ export declare const tokens: {
|
|
|
103
101
|
readonly textMuted: "#8D92A9";
|
|
104
102
|
readonly textInverse: "#0B0E14";
|
|
105
103
|
readonly primary: "#6663FD";
|
|
106
|
-
readonly secondary: "#
|
|
104
|
+
readonly secondary: "#0950C2";
|
|
107
105
|
readonly gray: "#475569";
|
|
108
106
|
readonly border: "#2A3148";
|
|
109
107
|
readonly success: "#00B279";
|
|
110
108
|
readonly error: "#F2766A";
|
|
111
109
|
readonly warning: "#E6C352";
|
|
112
110
|
readonly diamond: "#E6F3FF";
|
|
113
|
-
readonly primaryStop0: "#
|
|
114
|
-
readonly primaryStop1: "#
|
|
115
|
-
readonly primaryStop2: "#
|
|
116
|
-
readonly primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)";
|
|
111
|
+
readonly primaryStop0: "#00A09E";
|
|
112
|
+
readonly primaryStop1: "#234DC5";
|
|
113
|
+
readonly primaryStop2: "#1945D9";
|
|
117
114
|
readonly diamondStop0: "#BEACD3";
|
|
118
115
|
readonly diamondStop1: "#BEE3F7";
|
|
119
116
|
readonly diamondStop2: "#EFECE7";
|
|
120
117
|
readonly diamondStop3: "#F8DDDE";
|
|
121
118
|
readonly diamondStop4: "#CFE6F1";
|
|
122
|
-
readonly diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)";
|
|
123
119
|
readonly gold: "#D1A64A";
|
|
124
120
|
readonly silver: "#969FA6";
|
|
125
121
|
readonly bronze: "#956C68";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCT,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"}
|
|
@@ -10,7 +10,7 @@ const s = {
|
|
|
10
10
|
textInverse: "#0B0E14",
|
|
11
11
|
// Brand
|
|
12
12
|
primary: "#6663FD",
|
|
13
|
-
secondary: "#
|
|
13
|
+
secondary: "#0950C2",
|
|
14
14
|
// State
|
|
15
15
|
gray: "#475569",
|
|
16
16
|
border: "#2A3148",
|
|
@@ -19,25 +19,23 @@ const s = {
|
|
|
19
19
|
warning: "#E6C352",
|
|
20
20
|
// Gradient colors
|
|
21
21
|
diamond: "#E6F3FF",
|
|
22
|
-
primaryStop0: "#
|
|
23
|
-
primaryStop1: "#
|
|
24
|
-
primaryStop2: "#
|
|
25
|
-
primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)",
|
|
22
|
+
primaryStop0: "#00A09E",
|
|
23
|
+
primaryStop1: "#234DC5",
|
|
24
|
+
primaryStop2: "#1945D9",
|
|
26
25
|
diamondStop0: "#BEACD3",
|
|
27
26
|
diamondStop1: "#BEE3F7",
|
|
28
27
|
diamondStop2: "#EFECE7",
|
|
29
28
|
diamondStop3: "#F8DDDE",
|
|
30
29
|
diamondStop4: "#CFE6F1",
|
|
31
|
-
diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)",
|
|
32
30
|
// Metals
|
|
33
31
|
gold: "#D1A64A",
|
|
34
32
|
silver: "#969FA6",
|
|
35
33
|
bronze: "#956C68"
|
|
36
|
-
},
|
|
34
|
+
}, o = {
|
|
37
35
|
primary: '"IBM Plex Sans", sans-serif',
|
|
38
36
|
secondary: '"Inter", sans-serif',
|
|
39
37
|
mono: '"IBM Plex Mono", monospace'
|
|
40
|
-
},
|
|
38
|
+
}, a = {
|
|
41
39
|
1: "12px",
|
|
42
40
|
2: "14px",
|
|
43
41
|
3: "16px",
|
|
@@ -51,9 +49,9 @@ const s = {
|
|
|
51
49
|
regular: 400,
|
|
52
50
|
medium: 500,
|
|
53
51
|
semibold: 600
|
|
54
|
-
},
|
|
52
|
+
}, t = {
|
|
55
53
|
interStylistic: "'salt' on, 'ss01' on, 'ss02' on"
|
|
56
|
-
},
|
|
54
|
+
}, p = {
|
|
57
55
|
0: "0",
|
|
58
56
|
1: "4px",
|
|
59
57
|
2: "8px",
|
|
@@ -65,7 +63,7 @@ const s = {
|
|
|
65
63
|
8: "64px",
|
|
66
64
|
9: "96px",
|
|
67
65
|
10: "128px"
|
|
68
|
-
},
|
|
66
|
+
}, e = {
|
|
69
67
|
0: "0",
|
|
70
68
|
xs: "4px",
|
|
71
69
|
sm: "8px",
|
|
@@ -73,37 +71,37 @@ const s = {
|
|
|
73
71
|
lg: "16px",
|
|
74
72
|
xl: "24px",
|
|
75
73
|
full: "999px"
|
|
76
|
-
},
|
|
74
|
+
}, r = {
|
|
77
75
|
0: 0,
|
|
78
76
|
1: 100,
|
|
79
77
|
2: 200,
|
|
80
78
|
3: 300,
|
|
81
79
|
4: 400,
|
|
82
80
|
5: 500
|
|
83
|
-
},
|
|
81
|
+
}, x = {
|
|
84
82
|
fast: "150ms ease",
|
|
85
83
|
normal: "250ms ease",
|
|
86
84
|
slow: "400ms ease"
|
|
87
|
-
},
|
|
85
|
+
}, i = {
|
|
88
86
|
colors: s,
|
|
89
|
-
fonts:
|
|
90
|
-
fontSizes:
|
|
87
|
+
fonts: o,
|
|
88
|
+
fontSizes: a,
|
|
91
89
|
fontWeights: n,
|
|
92
|
-
fontFeatures:
|
|
93
|
-
spacing:
|
|
94
|
-
radius:
|
|
95
|
-
zIndex:
|
|
96
|
-
transitions:
|
|
90
|
+
fontFeatures: t,
|
|
91
|
+
spacing: p,
|
|
92
|
+
radius: e,
|
|
93
|
+
zIndex: r,
|
|
94
|
+
transitions: x
|
|
97
95
|
};
|
|
98
96
|
export {
|
|
99
|
-
|
|
97
|
+
a,
|
|
100
98
|
n as b,
|
|
101
99
|
s as c,
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
o as d,
|
|
101
|
+
x as e,
|
|
102
|
+
t as f,
|
|
103
|
+
e as r,
|
|
104
|
+
p as s,
|
|
105
|
+
i as t,
|
|
106
|
+
r as z
|
|
109
107
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8D92A9",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#0950C2",gray:"#475569",border:"#2A3148",success:"#00B279",error:"#F2766A",warning:"#E6C352",diamond:"#E6F3FF",primaryStop0:"#00A09E",primaryStop1:"#234DC5",primaryStop2:"#1945D9",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1",gold:"#D1A64A",silver:"#969FA6",bronze:"#956C68"},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={interStylistic:"'salt' on, 'ss01' on, 'ss02' on"},r={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},i={fast:"150ms ease",normal:"250ms ease",slow:"400ms ease"},x={colors:s,fonts:o,fontSizes:n,fontWeights:t,fontFeatures:e,spacing:r,radius:p,zIndex:a,transitions:i};exports.colors=s;exports.fontFeatures=e;exports.fontSizes=n;exports.fontWeights=t;exports.fonts=o;exports.radius=p;exports.spacing=r;exports.tokens=x;exports.transitions=i;exports.zIndex=a;
|
package/dist/tokens-only.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-C8rDJFS5.cjs");exports.colors=t.colors;exports.fontFeatures=t.fontFeatures;exports.fontSizes=t.fontSizes;exports.fontWeights=t.fontWeights;exports.fonts=t.fonts;exports.radius=t.radius;exports.spacing=t.spacing;exports.tokens=t.tokens;exports.transitions=t.transitions;exports.zIndex=t.zIndex;
|
package/dist/tokens-only.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as t, f as o, a as n, b as e, d as r, r as f, s as i, t as c, e as d, z } from "./tokens-
|
|
1
|
+
import { c as t, f as o, a as n, b as e, d as r, r as f, s as i, t as c, e as d, z } from "./tokens-C0g4TAJO.js";
|
|
2
2
|
export {
|
|
3
3
|
t as colors,
|
|
4
4
|
o as fontFeatures,
|
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: #0950c2;
|
|
23
23
|
|
|
24
24
|
// State
|
|
25
25
|
$gray: #475569;
|
|
@@ -30,28 +30,14 @@ $warning: #e6c352;
|
|
|
30
30
|
$diamond: #e6f3ff;
|
|
31
31
|
|
|
32
32
|
// Gradient colors
|
|
33
|
-
$primary-stop-0: #
|
|
34
|
-
$primary-stop-1: #
|
|
35
|
-
$primary-stop-2: #
|
|
36
|
-
$primary-gradient: linear-gradient(
|
|
37
|
-
45deg,
|
|
38
|
-
#65d5f4 0%,
|
|
39
|
-
#0096fa 40%,
|
|
40
|
-
#1c3dc2 100%
|
|
41
|
-
);
|
|
33
|
+
$primary-stop-0: #00a09e;
|
|
34
|
+
$primary-stop-1: #234dc5;
|
|
35
|
+
$primary-stop-2: #1945d9;
|
|
42
36
|
$diamond-stop-0: #beacd3;
|
|
43
37
|
$diamond-stop-1: #bee3f7;
|
|
44
38
|
$diamond-stop-2: #efece7;
|
|
45
39
|
$diamond-stop-3: #f8ddde;
|
|
46
40
|
$diamond-stop-4: #cfe6f1;
|
|
47
|
-
$diamond-gradient: linear-gradient(
|
|
48
|
-
45deg,
|
|
49
|
-
#beacd3 0%,
|
|
50
|
-
#bee3f7 25%,
|
|
51
|
-
#efece7 50%,
|
|
52
|
-
#f8ddde 75%,
|
|
53
|
-
#cfe6f1 100%
|
|
54
|
-
);
|
|
55
41
|
|
|
56
42
|
// Metals
|
|
57
43
|
$gold: #d1a64a;
|
package/dist/tokens-DbQnrzz6.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8D92A9",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#0078FD",gray:"#475569",border:"#2A3148",success:"#00B279",error:"#F2766A",warning:"#E6C352",diamond:"#E6F3FF",primaryStop0:"#65D5F4",primaryStop1:"#0096FA",primaryStop2:"#1C3DC2",primaryGradient:"linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1",diamondGradient:"linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)",gold:"#D1A64A",silver:"#969FA6",bronze:"#956C68"},n={primary:'"IBM Plex Sans", sans-serif',secondary:'"Inter", sans-serif',mono:'"IBM Plex Mono", monospace'},o={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={interStylistic:"'salt' on, 'ss01' on, 'ss02' on"},r={0:"0",1:"4px",2:"8px",3:"12px",4:"16px",5:"24px",6:"32px",7:"48px",8:"64px",9:"96px",10:"128px"},a={0:"0",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"999px"},i={0:0,1:100,2:200,3:300,4:400,5:500},p={fast:"150ms ease",normal:"250ms ease",slow:"400ms ease"},x={colors:s,fonts:n,fontSizes:o,fontWeights:t,fontFeatures:e,spacing:r,radius:a,zIndex:i,transitions:p};exports.colors=s;exports.fontFeatures=e;exports.fontSizes=o;exports.fontWeights=t;exports.fonts=n;exports.radius=a;exports.spacing=r;exports.tokens=x;exports.transitions=p;exports.zIndex=i;
|