mbt-ui-kit 0.1.21 → 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 +3 -4
- package/.ai/agent-reference/README.md +1 -2
- package/.ai/agent-rules/README.md +1 -2
- package/README.md +17 -7
- 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.mjs +56 -55
- 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
|
@@ -101,9 +101,8 @@ const preloadFonts = [plexSansRegularUrl, plexSansMediumUrl, interVariableUrl];
|
|
|
101
101
|
<Text strong>Highlighted text.</Text>
|
|
102
102
|
<Text small muted>Secondary caption.</Text>
|
|
103
103
|
<Text label>Role</Text>
|
|
104
|
-
<Text>
|
|
105
|
-
|
|
106
|
-
</Text>
|
|
104
|
+
<Text>Some text <SearchIcon /> more text</Text>
|
|
105
|
+
<Text contentGap>{'Some text'}<SearchIcon />{'more text'}</Text>
|
|
107
106
|
|
|
108
107
|
<Metric>1,234</Metric>
|
|
109
108
|
<Metric large>42,500</Metric>
|
|
@@ -179,7 +178,7 @@ const panelStyle = {
|
|
|
179
178
|
import { colors } from 'mbt-ui-kit/tokens';
|
|
180
179
|
|
|
181
180
|
const heroStyle = {
|
|
182
|
-
background: colors.
|
|
181
|
+
background: `linear-gradient(45deg, ${colors.primaryStop0} 0%, ${colors.primaryStop1} 40%, ${colors.primaryStop2} 100%)`,
|
|
183
182
|
};
|
|
184
183
|
|
|
185
184
|
const customDiamondStyle = {
|
|
@@ -49,8 +49,7 @@ This folder holds factual package reference for `mbt-ui-kit`.
|
|
|
49
49
|
|
|
50
50
|
## Color Token Notes
|
|
51
51
|
|
|
52
|
-
- `colors` includes solid colors
|
|
53
|
-
- direct gradient tokens: `colors.primaryGradient` and `colors.diamondGradient`
|
|
52
|
+
- `colors` includes solid colors and gradient stop tokens.
|
|
54
53
|
- primary gradient stop tokens: `colors.primaryStop0`, `colors.primaryStop1`, `colors.primaryStop2`
|
|
55
54
|
- diamond gradient stop tokens: `colors.diamondStop0`, `colors.diamondStop1`, `colors.diamondStop2`, `colors.diamondStop3`, `colors.diamondStop4`
|
|
56
55
|
|
|
@@ -35,6 +35,5 @@ These files are the canonical package-owned rules for `mbt-ui-kit`.
|
|
|
35
35
|
## Token Guidance
|
|
36
36
|
|
|
37
37
|
- Preferred token families are `colors`, `fonts`, `fontSizes`, `fontWeights`, `fontFeatures`, `spacing`, `radius`, `zIndex`, and `transitions`.
|
|
38
|
-
- Use
|
|
39
|
-
- 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.
|
|
40
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
|
|
|
@@ -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 c=require("./tokens-
|
|
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.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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 {
|
|
4
|
-
function
|
|
3
|
+
import { Children as g, forwardRef as N, useId as w } from "react";
|
|
4
|
+
function k({ size: n = "md", className: e, ...s }) {
|
|
5
5
|
const o = ["mbt-loader", `mbt-loader--${n}`, e].filter(Boolean).join(" ");
|
|
6
6
|
return /* @__PURE__ */ c("span", { className: o, ...s, children: [
|
|
7
7
|
/* @__PURE__ */ t("span", { className: "mbt-loader__dot" }),
|
|
@@ -9,7 +9,7 @@ function w({ size: n = "md", className: e, ...s }) {
|
|
|
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
15
|
disabled: s,
|
|
@@ -35,12 +35,12 @@ function y({
|
|
|
35
35
|
...r,
|
|
36
36
|
children: [
|
|
37
37
|
/* @__PURE__ */ t("span", { className: "mbt-button__content", children: n }),
|
|
38
|
-
o && /* @__PURE__ */ t(
|
|
38
|
+
o && /* @__PURE__ */ t(k, { size: "md", className: "mbt-button__loader" })
|
|
39
39
|
]
|
|
40
40
|
}
|
|
41
41
|
);
|
|
42
42
|
}
|
|
43
|
-
function
|
|
43
|
+
function W({
|
|
44
44
|
level: n,
|
|
45
45
|
children: e,
|
|
46
46
|
className: s,
|
|
@@ -49,7 +49,7 @@ function M({
|
|
|
49
49
|
const a = `h${n}`, i = [`mbt-h${n}`, s].filter(Boolean).join(" ");
|
|
50
50
|
return /* @__PURE__ */ t(a, { className: i, ...o, children: e });
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function z({
|
|
53
53
|
children: n,
|
|
54
54
|
large: e = !1,
|
|
55
55
|
muted: s = !1,
|
|
@@ -65,29 +65,30 @@ function W({
|
|
|
65
65
|
].filter(Boolean).join(" ");
|
|
66
66
|
return /* @__PURE__ */ t(r, { className: l, ...i, children: n });
|
|
67
67
|
}
|
|
68
|
-
function
|
|
68
|
+
function L({
|
|
69
69
|
children: n,
|
|
70
70
|
strong: e = !1,
|
|
71
71
|
small: s = !1,
|
|
72
72
|
label: o = !1,
|
|
73
73
|
muted: a = !1,
|
|
74
74
|
disableFontFeatures: i = !1,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
contentGap: r = !1,
|
|
76
|
+
as: l = "p",
|
|
77
|
+
className: d,
|
|
78
|
+
...u
|
|
78
79
|
}) {
|
|
79
|
-
const
|
|
80
|
+
const b = l, p = [
|
|
80
81
|
"mbt-text",
|
|
81
82
|
e && "mbt-text--strong",
|
|
82
83
|
s && "mbt-text--small",
|
|
83
84
|
o && "mbt-text--label",
|
|
84
85
|
a && "mbt-text--muted",
|
|
85
86
|
i && "mbt-text--no-features",
|
|
86
|
-
|
|
87
|
-
].filter(Boolean).join(" ");
|
|
88
|
-
return /* @__PURE__ */ t(
|
|
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 });
|
|
89
90
|
}
|
|
90
|
-
function
|
|
91
|
+
function x() {
|
|
91
92
|
return /* @__PURE__ */ c(
|
|
92
93
|
"svg",
|
|
93
94
|
{
|
|
@@ -116,7 +117,7 @@ function L() {
|
|
|
116
117
|
}
|
|
117
118
|
);
|
|
118
119
|
}
|
|
119
|
-
function
|
|
120
|
+
function B() {
|
|
120
121
|
return /* @__PURE__ */ c(
|
|
121
122
|
"svg",
|
|
122
123
|
{
|
|
@@ -149,7 +150,7 @@ function x() {
|
|
|
149
150
|
}
|
|
150
151
|
);
|
|
151
152
|
}
|
|
152
|
-
function
|
|
153
|
+
function F({
|
|
153
154
|
children: n,
|
|
154
155
|
icon: e,
|
|
155
156
|
purchasable: s = !1,
|
|
@@ -167,13 +168,13 @@ function z({
|
|
|
167
168
|
return /* @__PURE__ */ c("div", { className: d, ...i, children: [
|
|
168
169
|
r && /* @__PURE__ */ c("span", { className: "mbt-badge__media", children: [
|
|
169
170
|
/* @__PURE__ */ t("span", { className: "mbt-badge__icon", children: e }),
|
|
170
|
-
l && /* @__PURE__ */ t("span", { className: "mbt-badge__purchasable", "aria-hidden": "true", children: /* @__PURE__ */ t(
|
|
171
|
+
l && /* @__PURE__ */ t("span", { className: "mbt-badge__purchasable", "aria-hidden": "true", children: /* @__PURE__ */ t(B, {}) })
|
|
171
172
|
] }),
|
|
172
|
-
/* @__PURE__ */ t(
|
|
173
|
-
o && /* @__PURE__ */ t("span", { className: "mbt-badge__boost", "aria-hidden": "true", children: /* @__PURE__ */ t(
|
|
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, {}) })
|
|
174
175
|
] });
|
|
175
176
|
}
|
|
176
|
-
function
|
|
177
|
+
function j({ className: n, title: e = "Search" }) {
|
|
177
178
|
return /* @__PURE__ */ c(
|
|
178
179
|
"svg",
|
|
179
180
|
{
|
|
@@ -213,7 +214,7 @@ function B({ className: n, title: e = "Search" }) {
|
|
|
213
214
|
}
|
|
214
215
|
);
|
|
215
216
|
}
|
|
216
|
-
const
|
|
217
|
+
const v = N(
|
|
217
218
|
({
|
|
218
219
|
label: n,
|
|
219
220
|
muted: e = !1,
|
|
@@ -223,40 +224,40 @@ const j = g(
|
|
|
223
224
|
className: i,
|
|
224
225
|
...r
|
|
225
226
|
}, l) => {
|
|
226
|
-
const d =
|
|
227
|
+
const d = w(), u = r.id ?? d, b = [
|
|
227
228
|
"mbt-input",
|
|
228
229
|
a && "mbt-input--full-width",
|
|
229
230
|
i
|
|
230
|
-
].filter(Boolean).join(" "),
|
|
231
|
+
].filter(Boolean).join(" "), p = [
|
|
231
232
|
"mbt-input__label",
|
|
232
233
|
e && "mbt-input__label--muted"
|
|
233
|
-
].filter(Boolean).join(" "),
|
|
234
|
+
].filter(Boolean).join(" "), h = [
|
|
234
235
|
"mbt-input__wrapper",
|
|
235
236
|
e && "mbt-input__wrapper--muted"
|
|
236
|
-
].filter(Boolean).join(" "),
|
|
237
|
+
].filter(Boolean).join(" "), m = [
|
|
237
238
|
"mbt-input__field",
|
|
238
239
|
e && "mbt-input__field--muted"
|
|
239
|
-
].filter(Boolean).join(" "), _ = ["mbt-input__icon", e && "mbt-input__icon--muted"].filter(Boolean).join(" "),
|
|
240
|
-
return /* @__PURE__ */ t("div", { className:
|
|
241
|
-
n && /* @__PURE__ */ t("label", { htmlFor:
|
|
242
|
-
/* @__PURE__ */ c("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: [
|
|
242
|
+
n && /* @__PURE__ */ t("label", { htmlFor: u, className: p, children: n }),
|
|
243
|
+
/* @__PURE__ */ c("div", { className: h, children: [
|
|
243
244
|
/* @__PURE__ */ t(
|
|
244
245
|
"input",
|
|
245
246
|
{
|
|
246
247
|
ref: l,
|
|
247
|
-
id:
|
|
248
|
+
id: u,
|
|
248
249
|
type: "text",
|
|
249
|
-
className:
|
|
250
|
+
className: m,
|
|
250
251
|
...r
|
|
251
252
|
}
|
|
252
253
|
),
|
|
253
|
-
|
|
254
|
+
f && /* @__PURE__ */ t("div", { className: _, children: f })
|
|
254
255
|
] })
|
|
255
256
|
] }) });
|
|
256
257
|
}
|
|
257
258
|
);
|
|
258
|
-
|
|
259
|
-
function
|
|
259
|
+
v.displayName = "Input";
|
|
260
|
+
function C({
|
|
260
261
|
className: n,
|
|
261
262
|
title: e = "Graduation cap"
|
|
262
263
|
}) {
|
|
@@ -307,7 +308,7 @@ function v({
|
|
|
307
308
|
}
|
|
308
309
|
);
|
|
309
310
|
}
|
|
310
|
-
function
|
|
311
|
+
function T({
|
|
311
312
|
children: n,
|
|
312
313
|
icon: e,
|
|
313
314
|
selected: s = !1,
|
|
@@ -331,31 +332,31 @@ function F({
|
|
|
331
332
|
"aria-pressed": s,
|
|
332
333
|
...r,
|
|
333
334
|
children: [
|
|
334
|
-
/* @__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, {}) }),
|
|
335
336
|
/* @__PURE__ */ t("span", { className: "mbt-menu-button__text", children: n })
|
|
336
337
|
]
|
|
337
338
|
}
|
|
338
339
|
);
|
|
339
340
|
}
|
|
340
341
|
export {
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
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,
|
|
357
358
|
D as spacing,
|
|
358
359
|
R as tokens,
|
|
359
360
|
q as transitions,
|
|
360
|
-
|
|
361
|
+
E as zIndex
|
|
361
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;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:#
|
|
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;
|