mbt-ui-kit 0.1.18 → 0.1.20
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 +22 -0
- package/.ai/agent-reference/README.md +7 -0
- package/.ai/agent-rules/README.md +2 -0
- package/README.md +35 -0
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/styles/mbt-ui-kit.css +1 -1
- package/dist/styles/tokens.css +28 -10
- package/dist/styles/tokens.d.ts +24 -16
- package/dist/styles/tokens.d.ts.map +1 -1
- package/dist/{tokens-Bxhg1IBs.js → tokens-C9wefV-c.js} +36 -32
- package/dist/tokens-DbQnrzz6.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 +26 -10
- package/dist/tokens-Bcuwagjb.cjs +0 -1
|
@@ -150,6 +150,20 @@ const panelStyle = {
|
|
|
150
150
|
};
|
|
151
151
|
```
|
|
152
152
|
|
|
153
|
+
## Gradient Tokens
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { colors } from 'mbt-ui-kit/tokens';
|
|
157
|
+
|
|
158
|
+
const heroStyle = {
|
|
159
|
+
background: colors.primaryGradient,
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
const customDiamondStyle = {
|
|
163
|
+
background: `linear-gradient(90deg, ${colors.diamondStop0} 0%, ${colors.diamondStop1} 25%, ${colors.diamondStop2} 50%, ${colors.diamondStop3} 75%, ${colors.diamondStop4} 100%)`,
|
|
164
|
+
};
|
|
165
|
+
```
|
|
166
|
+
|
|
153
167
|
## CSS Custom Properties
|
|
154
168
|
|
|
155
169
|
```tsx
|
|
@@ -163,6 +177,10 @@ import 'mbt-ui-kit/tokens.css';
|
|
|
163
177
|
padding: var(--mbt-space-4);
|
|
164
178
|
border-radius: var(--mbt-radius-sm);
|
|
165
179
|
}
|
|
180
|
+
|
|
181
|
+
.hero {
|
|
182
|
+
background: var(--mbt-color-primary-gradient);
|
|
183
|
+
}
|
|
166
184
|
```
|
|
167
185
|
|
|
168
186
|
## Sass Tokens
|
|
@@ -176,6 +194,10 @@ import 'mbt-ui-kit/tokens.css';
|
|
|
176
194
|
padding: $space-4;
|
|
177
195
|
border-radius: $radius-sm;
|
|
178
196
|
}
|
|
197
|
+
|
|
198
|
+
.hero {
|
|
199
|
+
background: $diamond-gradient;
|
|
200
|
+
}
|
|
179
201
|
```
|
|
180
202
|
|
|
181
203
|
## Guidance
|
|
@@ -46,4 +46,11 @@ This folder holds factual package reference for `mbt-ui-kit`.
|
|
|
46
46
|
- `zIndex`
|
|
47
47
|
- `transitions`
|
|
48
48
|
|
|
49
|
+
## Color Token Notes
|
|
50
|
+
|
|
51
|
+
- `colors` includes solid colors, gradient stop tokens, and convenience gradient strings.
|
|
52
|
+
- direct gradient tokens: `colors.primaryGradient` and `colors.diamondGradient`
|
|
53
|
+
- primary gradient stop tokens: `colors.primaryStop0`, `colors.primaryStop1`, `colors.primaryStop2`
|
|
54
|
+
- diamond gradient stop tokens: `colors.diamondStop0`, `colors.diamondStop1`, `colors.diamondStop2`, `colors.diamondStop3`, `colors.diamondStop4`
|
|
55
|
+
|
|
49
56
|
Reference docs should stay factual. Policy and maintenance rules belong in `.ai/agent-rules/`.
|
|
@@ -34,4 +34,6 @@ These files are the canonical package-owned rules for `mbt-ui-kit`.
|
|
|
34
34
|
## Token Guidance
|
|
35
35
|
|
|
36
36
|
- Preferred token families are `colors`, `fonts`, `fontSizes`, `fontWeights`, `fontFeatures`, `spacing`, `radius`, `zIndex`, and `transitions`.
|
|
37
|
+
- Use `colors.primaryGradient` and `colors.diamondGradient` when the consumer wants the package's default gradient strings directly.
|
|
38
|
+
- Use the exported gradient stop tokens when the consumer needs to compose the same gradients with a different angle or stop layout.
|
|
37
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,6 +193,33 @@ Available token groups:
|
|
|
193
193
|
- `zIndex`
|
|
194
194
|
- `transitions`
|
|
195
195
|
|
|
196
|
+
The `colors` group also includes gradient tokens and gradient stop tokens:
|
|
197
|
+
|
|
198
|
+
- `primaryGradient`
|
|
199
|
+
- `diamondGradient`
|
|
200
|
+
- `primaryStop0`, `primaryStop1`, `primaryStop2`
|
|
201
|
+
- `diamondStop0`, `diamondStop1`, `diamondStop2`, `diamondStop3`, `diamondStop4`
|
|
202
|
+
|
|
203
|
+
Direct gradient usage:
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
import { colors } from 'mbt-ui-kit/tokens';
|
|
207
|
+
|
|
208
|
+
const heroStyle = {
|
|
209
|
+
background: colors.primaryGradient,
|
|
210
|
+
};
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
Custom angle composition:
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
import { colors } from 'mbt-ui-kit/tokens';
|
|
217
|
+
|
|
218
|
+
const accentStyle = {
|
|
219
|
+
background: `linear-gradient(90deg, ${colors.diamondStop0} 0%, ${colors.diamondStop1} 25%, ${colors.diamondStop2} 50%, ${colors.diamondStop3} 75%, ${colors.diamondStop4} 100%)`,
|
|
220
|
+
};
|
|
221
|
+
```
|
|
222
|
+
|
|
196
223
|
### CSS Custom Properties
|
|
197
224
|
|
|
198
225
|
```tsx
|
|
@@ -207,6 +234,10 @@ import 'mbt-ui-kit/tokens.css';
|
|
|
207
234
|
border-radius: var(--mbt-radius-sm);
|
|
208
235
|
transition: all var(--mbt-transition-fast);
|
|
209
236
|
}
|
|
237
|
+
|
|
238
|
+
.hero {
|
|
239
|
+
background: var(--mbt-color-primary-gradient);
|
|
240
|
+
}
|
|
210
241
|
```
|
|
211
242
|
|
|
212
243
|
### Sass Tokens
|
|
@@ -220,6 +251,10 @@ import 'mbt-ui-kit/tokens.css';
|
|
|
220
251
|
padding: $space-4;
|
|
221
252
|
border-radius: $radius-sm;
|
|
222
253
|
}
|
|
254
|
+
|
|
255
|
+
.hero {
|
|
256
|
+
background: $diamond-gradient;
|
|
257
|
+
}
|
|
223
258
|
```
|
|
224
259
|
|
|
225
260
|
## Development
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./tokens-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./tokens-DbQnrzz6.cjs"),t=require("react/jsx-runtime"),p=require("react");function f({size:n="md",className:e,...s}){const o=["mbt-loader",`mbt-loader--${n}`,e].filter(Boolean).join(" ");return t.jsxs("span",{className:o,...s,children:[t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"}),t.jsx("span",{className:"mbt-loader__dot"})]})}function w({children:n,fullWidth:e,rounded:s=!0,disabled:o,loading:a,variant:r="primary",className:i,...c}){const u=o||a,m=["mbt-button",r&&`mbt-button--${r}`,e&&"mbt-button--full-width",!s&&"mbt-button--diagonal",o&&"mbt-button--disabled",a&&"mbt-button--loading",i].filter(Boolean).join(" ");return t.jsxs("button",{type:"button",className:m,disabled:u,...c,children:[t.jsx("span",{className:"mbt-button__content",children:n}),a&&t.jsx(f,{size:"md",className:"mbt-button__loader"})]})}function j({className:n,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:n,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 x=p.forwardRef(({label:n,muted:e=!1,showSearchIcon:s=!1,icon:o,fullWidth:a=!1,className:r,...i},c)=>{const u=p.useId(),m=i.id??u,d=["mbt-input",a&&"mbt-input--full-width",r].filter(Boolean).join(" "),_=["mbt-input__label",e&&"mbt-input__label--muted"].filter(Boolean).join(" "),N=["mbt-input__wrapper",e&&"mbt-input__wrapper--muted"].filter(Boolean).join(" "),g=["mbt-input__field",e&&"mbt-input__field--muted"].filter(Boolean).join(" "),k=["mbt-input__icon",e&&"mbt-input__icon--muted"].filter(Boolean).join(" "),b=o||s&&t.jsx(j,{});return t.jsx("div",{className:d,children:t.jsxs("div",{className:"mbt-input__container",children:[n&&t.jsx("label",{htmlFor:m,className:_,children:n}),t.jsxs("div",{className:N,children:[t.jsx("input",{ref:c,id:m,type:"text",className:g,...i}),b&&t.jsx("div",{className:k,children:b})]})]})})});x.displayName="Input";function h({className:n,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:n,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 B({children:n,icon:e,selected:s=!1,small:o=!1,disabled:a,className:r,...i}){const c=["mbt-menu-button",s&&"mbt-menu-button--selected",o&&"mbt-menu-button--small",r].filter(Boolean).join(" "),u=e??t.jsx(h,{});return t.jsxs("button",{type:"button",className:c,disabled:a,"aria-pressed":s,...i,children:[t.jsx("div",{className:"mbt-menu-button__icon",children:u}),t.jsx("span",{className:"mbt-menu-button__text",children:n})]})}function I({level:n,children:e,className:s,...o}){const a=`h${n}`,r=[`mbt-h${n}`,s].filter(Boolean).join(" ");return t.jsx(a,{className:r,...o,children:e})}function L({children:n,large:e=!1,muted:s=!1,as:o="div",className:a,...r}){const i=o,c=["mbt-metric",e&&"mbt-metric--large",s&&"mbt-metric--muted",a].filter(Boolean).join(" ");return t.jsx(i,{className:c,...r,children:n})}function v({children:n,strong:e=!1,small:s=!1,label:o=!1,muted:a=!1,disableFontFeatures:r=!1,as:i="p",className:c,...u}){const m=i,d=["mbt-text",e&&"mbt-text--strong",s&&"mbt-text--small",o&&"mbt-text--label",a&&"mbt-text--muted",r&&"mbt-text--no-features",c].filter(Boolean).join(" ");return t.jsx(m,{className:d,...u,children:n})}exports.colors=l.colors;exports.fontFeatures=l.fontFeatures;exports.fontSizes=l.fontSizes;exports.fontWeights=l.fontWeights;exports.fonts=l.fonts;exports.radius=l.radius;exports.spacing=l.spacing;exports.tokens=l.tokens;exports.transitions=l.transitions;exports.zIndex=l.zIndex;exports.Button=w;exports.GraduationCapIcon=h;exports.Heading=I;exports.Input=x;exports.Loader=f;exports.MenuButton=B;exports.Metric=L;exports.SearchIcon=j;exports.Text=v;
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as T, f as $, a as S, b as F, d as G, r as D, s as H, t as R, e as V, z as q } from "./tokens-
|
|
1
|
+
import { c as T, f as $, a as S, b as F, d as G, r as D, s as H, t as R, e as V, z as q } from "./tokens-C9wefV-c.js";
|
|
2
2
|
import { jsxs as c, jsx as t } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as N, useId as k } from "react";
|
|
4
4
|
function g({ size: n = "md", className: e, ...o }) {
|
|
@@ -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}.mbt-button--diagonal{border-radius:0 8px}.mbt-button{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:#
|
|
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}.mbt-button--diagonal{border-radius:0 8px}.mbt-button{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: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-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--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:#0078fd}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected) .mbt-menu-button__icon{color:#0078fd}.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: #0078fd;--mbt-color-success: #00b279;--mbt-color-error: #f2766a;--mbt-color-warning: #e6c352;--mbt-color-diamond: #e6f3ff;--mbt-color-primary-stop-0: #65d5f4;--mbt-color-primary-stop-1: #0096fa;--mbt-color-primary-stop-2: #1c3dc2;--mbt-color-primary-gradient: linear-gradient( 45deg, #65d5f4 0%, #0096fa 40%, #1c3dc2 100% );--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-diamond-gradient: linear-gradient( 45deg, #beacd3 0%, #bee3f7 25%, #efece7 50%, #f8ddde 75%, #cfe6f1 100% );--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
|
@@ -15,35 +15,53 @@
|
|
|
15
15
|
--mbt-color-bg-1: #111520;
|
|
16
16
|
--mbt-color-surface: #171c2a;
|
|
17
17
|
--mbt-color-surface-raised: #1d2335;
|
|
18
|
+
--mbt-color-border: #2a3148;
|
|
19
|
+
--mbt-color-gray: #475569;
|
|
18
20
|
|
|
19
21
|
/* Text */
|
|
20
22
|
--mbt-color-text-primary: #f2f4fa;
|
|
21
|
-
--mbt-color-text-muted: #
|
|
23
|
+
--mbt-color-text-muted: #8d92a9;
|
|
22
24
|
--mbt-color-text-inverse: #0b0e14;
|
|
23
25
|
|
|
24
26
|
/* Brand */
|
|
25
27
|
--mbt-color-primary: #6663fd;
|
|
26
|
-
--mbt-color-secondary: #
|
|
28
|
+
--mbt-color-secondary: #0078fd;
|
|
27
29
|
|
|
28
30
|
/* State */
|
|
29
|
-
--mbt-color-
|
|
30
|
-
--mbt-color-
|
|
31
|
-
--mbt-color-
|
|
32
|
-
--mbt-color-
|
|
33
|
-
|
|
31
|
+
--mbt-color-success: #00b279;
|
|
32
|
+
--mbt-color-error: #f2766a;
|
|
33
|
+
--mbt-color-warning: #e6c352;
|
|
34
|
+
--mbt-color-diamond: #e6f3ff;
|
|
35
|
+
|
|
36
|
+
/* Primary gradient */
|
|
37
|
+
--mbt-color-primary-stop-0: #65d5f4;
|
|
38
|
+
--mbt-color-primary-stop-1: #0096fa;
|
|
39
|
+
--mbt-color-primary-stop-2: #1c3dc2;
|
|
40
|
+
--mbt-color-primary-gradient: linear-gradient(
|
|
41
|
+
45deg,
|
|
42
|
+
#65d5f4 0%,
|
|
43
|
+
#0096fa 40%,
|
|
44
|
+
#1c3dc2 100%
|
|
45
|
+
);
|
|
34
46
|
|
|
35
47
|
/* Diamond gradient */
|
|
36
|
-
--mbt-color-brilliant: #74cee9;
|
|
37
|
-
--mbt-color-diamond: #e6f3ff;
|
|
38
48
|
--mbt-color-diamond-stop-0: #beacd3;
|
|
39
49
|
--mbt-color-diamond-stop-1: #bee3f7;
|
|
40
50
|
--mbt-color-diamond-stop-2: #efece7;
|
|
41
51
|
--mbt-color-diamond-stop-3: #f8ddde;
|
|
42
52
|
--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
|
+
);
|
|
43
61
|
|
|
44
62
|
/* Metals */
|
|
45
63
|
--mbt-color-gold: #d1a64a;
|
|
46
|
-
--mbt-color-silver: #
|
|
64
|
+
--mbt-color-silver: #969fa6;
|
|
47
65
|
--mbt-color-bronze: #956c68;
|
|
48
66
|
|
|
49
67
|
/* ========================================================================= */
|
package/dist/styles/tokens.d.ts
CHANGED
|
@@ -10,24 +10,28 @@ export declare const colors: {
|
|
|
10
10
|
readonly surface: "#171C2A";
|
|
11
11
|
readonly surfaceRaised: "#1D2335";
|
|
12
12
|
readonly textPrimary: "#F2F4FA";
|
|
13
|
-
readonly textMuted: "#
|
|
13
|
+
readonly textMuted: "#8D92A9";
|
|
14
14
|
readonly textInverse: "#0B0E14";
|
|
15
15
|
readonly primary: "#6663FD";
|
|
16
|
-
readonly secondary: "#
|
|
17
|
-
readonly gray: "#
|
|
16
|
+
readonly secondary: "#0078FD";
|
|
17
|
+
readonly gray: "#475569";
|
|
18
18
|
readonly border: "#2A3148";
|
|
19
|
-
readonly success: "#
|
|
20
|
-
readonly error: "#
|
|
21
|
-
readonly warning: "#
|
|
22
|
-
readonly brilliant: "#74cee9";
|
|
19
|
+
readonly success: "#00B279";
|
|
20
|
+
readonly error: "#F2766A";
|
|
21
|
+
readonly warning: "#E6C352";
|
|
23
22
|
readonly diamond: "#E6F3FF";
|
|
23
|
+
readonly primaryStop0: "#65D5F4";
|
|
24
|
+
readonly primaryStop1: "#0096FA";
|
|
25
|
+
readonly primaryStop2: "#1C3DC2";
|
|
26
|
+
readonly primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)";
|
|
24
27
|
readonly diamondStop0: "#BEACD3";
|
|
25
28
|
readonly diamondStop1: "#BEE3F7";
|
|
26
29
|
readonly diamondStop2: "#EFECE7";
|
|
27
30
|
readonly diamondStop3: "#F8DDDE";
|
|
28
31
|
readonly diamondStop4: "#CFE6F1";
|
|
32
|
+
readonly diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)";
|
|
29
33
|
readonly gold: "#D1A64A";
|
|
30
|
-
readonly silver: "#
|
|
34
|
+
readonly silver: "#969FA6";
|
|
31
35
|
readonly bronze: "#956C68";
|
|
32
36
|
};
|
|
33
37
|
export declare const fonts: {
|
|
@@ -96,24 +100,28 @@ export declare const tokens: {
|
|
|
96
100
|
readonly surface: "#171C2A";
|
|
97
101
|
readonly surfaceRaised: "#1D2335";
|
|
98
102
|
readonly textPrimary: "#F2F4FA";
|
|
99
|
-
readonly textMuted: "#
|
|
103
|
+
readonly textMuted: "#8D92A9";
|
|
100
104
|
readonly textInverse: "#0B0E14";
|
|
101
105
|
readonly primary: "#6663FD";
|
|
102
|
-
readonly secondary: "#
|
|
103
|
-
readonly gray: "#
|
|
106
|
+
readonly secondary: "#0078FD";
|
|
107
|
+
readonly gray: "#475569";
|
|
104
108
|
readonly border: "#2A3148";
|
|
105
|
-
readonly success: "#
|
|
106
|
-
readonly error: "#
|
|
107
|
-
readonly warning: "#
|
|
108
|
-
readonly brilliant: "#74cee9";
|
|
109
|
+
readonly success: "#00B279";
|
|
110
|
+
readonly error: "#F2766A";
|
|
111
|
+
readonly warning: "#E6C352";
|
|
109
112
|
readonly diamond: "#E6F3FF";
|
|
113
|
+
readonly primaryStop0: "#65D5F4";
|
|
114
|
+
readonly primaryStop1: "#0096FA";
|
|
115
|
+
readonly primaryStop2: "#1C3DC2";
|
|
116
|
+
readonly primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)";
|
|
110
117
|
readonly diamondStop0: "#BEACD3";
|
|
111
118
|
readonly diamondStop1: "#BEE3F7";
|
|
112
119
|
readonly diamondStop2: "#EFECE7";
|
|
113
120
|
readonly diamondStop3: "#F8DDDE";
|
|
114
121
|
readonly diamondStop4: "#CFE6F1";
|
|
122
|
+
readonly diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)";
|
|
115
123
|
readonly gold: "#D1A64A";
|
|
116
|
-
readonly silver: "#
|
|
124
|
+
readonly silver: "#969FA6";
|
|
117
125
|
readonly bronze: "#956C68";
|
|
118
126
|
};
|
|
119
127
|
readonly fonts: {
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CT,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"}
|
|
@@ -6,34 +6,38 @@ const s = {
|
|
|
6
6
|
surfaceRaised: "#1D2335",
|
|
7
7
|
// Text
|
|
8
8
|
textPrimary: "#F2F4FA",
|
|
9
|
-
textMuted: "#
|
|
9
|
+
textMuted: "#8D92A9",
|
|
10
10
|
textInverse: "#0B0E14",
|
|
11
11
|
// Brand
|
|
12
12
|
primary: "#6663FD",
|
|
13
|
-
secondary: "#
|
|
13
|
+
secondary: "#0078FD",
|
|
14
14
|
// State
|
|
15
|
-
gray: "#
|
|
15
|
+
gray: "#475569",
|
|
16
16
|
border: "#2A3148",
|
|
17
|
-
success: "#
|
|
18
|
-
error: "#
|
|
19
|
-
warning: "#
|
|
20
|
-
//
|
|
21
|
-
brilliant: "#74cee9",
|
|
17
|
+
success: "#00B279",
|
|
18
|
+
error: "#F2766A",
|
|
19
|
+
warning: "#E6C352",
|
|
20
|
+
// Gradient colors
|
|
22
21
|
diamond: "#E6F3FF",
|
|
22
|
+
primaryStop0: "#65D5F4",
|
|
23
|
+
primaryStop1: "#0096FA",
|
|
24
|
+
primaryStop2: "#1C3DC2",
|
|
25
|
+
primaryGradient: "linear-gradient(45deg, #65D5F4 0%, #0096FA 40%, #1C3DC2 100%)",
|
|
23
26
|
diamondStop0: "#BEACD3",
|
|
24
27
|
diamondStop1: "#BEE3F7",
|
|
25
28
|
diamondStop2: "#EFECE7",
|
|
26
29
|
diamondStop3: "#F8DDDE",
|
|
27
30
|
diamondStop4: "#CFE6F1",
|
|
31
|
+
diamondGradient: "linear-gradient(45deg, #BEACD3 0%, #BEE3F7 25%, #EFECE7 50%, #F8DDDE 75%, #CFE6F1 100%)",
|
|
28
32
|
// Metals
|
|
29
33
|
gold: "#D1A64A",
|
|
30
|
-
silver: "#
|
|
34
|
+
silver: "#969FA6",
|
|
31
35
|
bronze: "#956C68"
|
|
32
|
-
},
|
|
36
|
+
}, a = {
|
|
33
37
|
primary: '"IBM Plex Sans", sans-serif',
|
|
34
38
|
secondary: '"Inter", sans-serif',
|
|
35
39
|
mono: '"IBM Plex Mono", monospace'
|
|
36
|
-
},
|
|
40
|
+
}, o = {
|
|
37
41
|
1: "12px",
|
|
38
42
|
2: "14px",
|
|
39
43
|
3: "16px",
|
|
@@ -43,13 +47,13 @@ const s = {
|
|
|
43
47
|
7: "40px",
|
|
44
48
|
8: "48px",
|
|
45
49
|
9: "72px"
|
|
46
|
-
},
|
|
50
|
+
}, n = {
|
|
47
51
|
regular: 400,
|
|
48
52
|
medium: 500,
|
|
49
53
|
semibold: 600
|
|
50
54
|
}, e = {
|
|
51
55
|
interStylistic: "'salt' on, 'ss01' on, 'ss02' on"
|
|
52
|
-
},
|
|
56
|
+
}, r = {
|
|
53
57
|
0: "0",
|
|
54
58
|
1: "4px",
|
|
55
59
|
2: "8px",
|
|
@@ -61,7 +65,7 @@ const s = {
|
|
|
61
65
|
8: "64px",
|
|
62
66
|
9: "96px",
|
|
63
67
|
10: "128px"
|
|
64
|
-
},
|
|
68
|
+
}, t = {
|
|
65
69
|
0: "0",
|
|
66
70
|
xs: "4px",
|
|
67
71
|
sm: "8px",
|
|
@@ -69,37 +73,37 @@ const s = {
|
|
|
69
73
|
lg: "16px",
|
|
70
74
|
xl: "24px",
|
|
71
75
|
full: "999px"
|
|
72
|
-
},
|
|
76
|
+
}, p = {
|
|
73
77
|
0: 0,
|
|
74
78
|
1: 100,
|
|
75
79
|
2: 200,
|
|
76
80
|
3: 300,
|
|
77
81
|
4: 400,
|
|
78
82
|
5: 500
|
|
79
|
-
},
|
|
83
|
+
}, i = {
|
|
80
84
|
fast: "150ms ease",
|
|
81
85
|
normal: "250ms ease",
|
|
82
86
|
slow: "400ms ease"
|
|
83
|
-
},
|
|
87
|
+
}, x = {
|
|
84
88
|
colors: s,
|
|
85
|
-
fonts:
|
|
86
|
-
fontSizes:
|
|
87
|
-
fontWeights:
|
|
89
|
+
fonts: a,
|
|
90
|
+
fontSizes: o,
|
|
91
|
+
fontWeights: n,
|
|
88
92
|
fontFeatures: e,
|
|
89
|
-
spacing:
|
|
90
|
-
radius:
|
|
91
|
-
zIndex:
|
|
92
|
-
transitions:
|
|
93
|
+
spacing: r,
|
|
94
|
+
radius: t,
|
|
95
|
+
zIndex: p,
|
|
96
|
+
transitions: i
|
|
93
97
|
};
|
|
94
98
|
export {
|
|
95
|
-
|
|
96
|
-
|
|
99
|
+
o as a,
|
|
100
|
+
n as b,
|
|
97
101
|
s as c,
|
|
98
|
-
|
|
99
|
-
|
|
102
|
+
a as d,
|
|
103
|
+
i as e,
|
|
100
104
|
e as f,
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
t as r,
|
|
106
|
+
r as s,
|
|
107
|
+
x as t,
|
|
108
|
+
p as z
|
|
105
109
|
};
|
|
@@ -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:"#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;
|
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-DbQnrzz6.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-C9wefV-c.js";
|
|
2
2
|
export {
|
|
3
3
|
t as colors,
|
|
4
4
|
o as fontFeatures,
|
package/package.json
CHANGED
package/src/styles/_tokens.scss
CHANGED
|
@@ -14,32 +14,48 @@ $surface-raised: #1d2335;
|
|
|
14
14
|
|
|
15
15
|
// Text
|
|
16
16
|
$text-primary: #f2f4fa;
|
|
17
|
-
$text-muted: #
|
|
17
|
+
$text-muted: #8d92a9;
|
|
18
18
|
$text-inverse: #0b0e14;
|
|
19
19
|
|
|
20
20
|
// Brand
|
|
21
21
|
$primary: #6663fd;
|
|
22
|
-
$secondary: #
|
|
22
|
+
$secondary: #0078fd;
|
|
23
23
|
|
|
24
24
|
// State
|
|
25
|
-
$gray: #
|
|
25
|
+
$gray: #475569;
|
|
26
26
|
$border: #2a3148;
|
|
27
|
-
$success: #
|
|
28
|
-
$error: #
|
|
29
|
-
$warning: #
|
|
30
|
-
|
|
31
|
-
// Diamond gradient stops
|
|
32
|
-
$brilliant: #74cee9;
|
|
27
|
+
$success: #00b279;
|
|
28
|
+
$error: #f2766a;
|
|
29
|
+
$warning: #e6c352;
|
|
33
30
|
$diamond: #e6f3ff;
|
|
31
|
+
|
|
32
|
+
// Gradient colors
|
|
33
|
+
$primary-stop-0: #65d5f4;
|
|
34
|
+
$primary-stop-1: #0096fa;
|
|
35
|
+
$primary-stop-2: #1c3dc2;
|
|
36
|
+
$primary-gradient: linear-gradient(
|
|
37
|
+
45deg,
|
|
38
|
+
#65d5f4 0%,
|
|
39
|
+
#0096fa 40%,
|
|
40
|
+
#1c3dc2 100%
|
|
41
|
+
);
|
|
34
42
|
$diamond-stop-0: #beacd3;
|
|
35
43
|
$diamond-stop-1: #bee3f7;
|
|
36
44
|
$diamond-stop-2: #efece7;
|
|
37
45
|
$diamond-stop-3: #f8ddde;
|
|
38
46
|
$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
|
+
);
|
|
39
55
|
|
|
40
56
|
// Metals
|
|
41
57
|
$gold: #d1a64a;
|
|
42
|
-
$silver: #
|
|
58
|
+
$silver: #969fa6;
|
|
43
59
|
$bronze: #956c68;
|
|
44
60
|
|
|
45
61
|
// -----------------------------------------------------------------------------
|
package/dist/tokens-Bcuwagjb.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8B92A6",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#3d91ff",gray:"#474953",border:"#2A3148",success:"#4DBA8A",error:"#C9636A",warning:"#D1A64A",brilliant:"#74cee9",diamond:"#E6F3FF",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1",gold:"#D1A64A",silver:"#A09EA6",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"},a={0:"0",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"999px"},p={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:a,zIndex:p,transitions:i};exports.colors=s;exports.fontFeatures=e;exports.fontSizes=n;exports.fontWeights=t;exports.fonts=o;exports.radius=a;exports.spacing=r;exports.tokens=x;exports.transitions=i;exports.zIndex=p;
|