@pcoi/tokens 0.1.0
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/build/index.d.ts +308 -0
- package/build/index.js +310 -0
- package/build/index.mjs +309 -0
- package/build/tokens.css +473 -0
- package/build/tokens.json +1423 -0
- package/build/tokens.scss +270 -0
- package/package.json +29 -0
- package/src/color/light.json +52 -0
- package/src/color/primitives.json +130 -0
- package/src/color/semantics.json +90 -0
- package/src/effects/primitives.json +122 -0
- package/src/layout/primitives.json +101 -0
- package/src/radius/primitives.json +11 -0
- package/src/radius/semantics.json +31 -0
- package/src/sizing/primitives.json +15 -0
- package/src/sizing/semantics.json +14 -0
- package/src/spacing/primitives.json +29 -0
- package/src/spacing/semantics.json +83 -0
- package/src/typography/primitives.json +69 -0
- package/src/typography/semantics.json +220 -0
package/build/index.d.ts
ADDED
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
// @pcoi/tokens — TypeScript Declarations
|
|
2
|
+
|
|
3
|
+
declare const tokens: {
|
|
4
|
+
readonly colorBg: string;
|
|
5
|
+
readonly colorBgAlt: string;
|
|
6
|
+
readonly colorBgCard: string;
|
|
7
|
+
readonly colorBgCardHover: string;
|
|
8
|
+
readonly colorSurface: string;
|
|
9
|
+
readonly colorAccent: string;
|
|
10
|
+
readonly colorAccentHover: string;
|
|
11
|
+
readonly colorTextPrimary: string;
|
|
12
|
+
readonly colorTextSecondary: string;
|
|
13
|
+
readonly colorTextMuted: string;
|
|
14
|
+
readonly colorSuccess: string;
|
|
15
|
+
readonly colorError: string;
|
|
16
|
+
readonly colorWarning: string;
|
|
17
|
+
readonly colorInfo: string;
|
|
18
|
+
readonly colorWhite: string;
|
|
19
|
+
readonly colorBlack: string;
|
|
20
|
+
readonly colorBorder: string;
|
|
21
|
+
readonly colorBorderHover: string;
|
|
22
|
+
readonly colorBorderSoft: string;
|
|
23
|
+
readonly colorBorderSoftHover: string;
|
|
24
|
+
readonly colorAccentGlow: string;
|
|
25
|
+
readonly colorAccentDim: string;
|
|
26
|
+
readonly colorHighlight: string;
|
|
27
|
+
readonly colorNavScrolledBg: string;
|
|
28
|
+
readonly colorGhostHoverBg: string;
|
|
29
|
+
readonly colorGhostHoverBorder: string;
|
|
30
|
+
readonly colorFocusBorder: string;
|
|
31
|
+
readonly colorFocusGlow: string;
|
|
32
|
+
readonly colorAccentBorderSubtle: string;
|
|
33
|
+
readonly colorAccentBorderDim: string;
|
|
34
|
+
readonly colorGridLine: string;
|
|
35
|
+
readonly spacing0: string;
|
|
36
|
+
readonly spacing4: string;
|
|
37
|
+
readonly spacing5: string;
|
|
38
|
+
readonly spacing6: string;
|
|
39
|
+
readonly spacing8: string;
|
|
40
|
+
readonly spacing10: string;
|
|
41
|
+
readonly spacing12: string;
|
|
42
|
+
readonly spacing14: string;
|
|
43
|
+
readonly spacing16: string;
|
|
44
|
+
readonly spacing20: string;
|
|
45
|
+
readonly spacing22: string;
|
|
46
|
+
readonly spacing24: string;
|
|
47
|
+
readonly spacing28: string;
|
|
48
|
+
readonly spacing32: string;
|
|
49
|
+
readonly spacing36: string;
|
|
50
|
+
readonly spacing40: string;
|
|
51
|
+
readonly spacing48: string;
|
|
52
|
+
readonly spacing60: string;
|
|
53
|
+
readonly spacing64: string;
|
|
54
|
+
readonly spacing72: string;
|
|
55
|
+
readonly spacing80: string;
|
|
56
|
+
readonly spacing100: string;
|
|
57
|
+
readonly spacing120: string;
|
|
58
|
+
readonly radiusSm: string;
|
|
59
|
+
readonly radiusMd: string;
|
|
60
|
+
readonly radiusLg: string;
|
|
61
|
+
readonly radiusXl: string;
|
|
62
|
+
readonly radiusFull: string;
|
|
63
|
+
readonly fontFamilySans: string;
|
|
64
|
+
readonly fontFamilyMono: string;
|
|
65
|
+
readonly fontWeightLight: number;
|
|
66
|
+
readonly fontWeightRegular: number;
|
|
67
|
+
readonly fontWeightMedium: number;
|
|
68
|
+
readonly fontWeightSemibold: number;
|
|
69
|
+
readonly fontWeightBold: number;
|
|
70
|
+
readonly fontWeightExtrabold: number;
|
|
71
|
+
readonly fontSizeXs: string;
|
|
72
|
+
readonly fontSizeSm: string;
|
|
73
|
+
readonly fontSizeCaption: string;
|
|
74
|
+
readonly fontSizeBodySm: string;
|
|
75
|
+
readonly fontSizeNav: string;
|
|
76
|
+
readonly fontSizeBody: string;
|
|
77
|
+
readonly fontSizeBodyDefault: string;
|
|
78
|
+
readonly fontSizeBodyLg: string;
|
|
79
|
+
readonly fontSizeLead: string;
|
|
80
|
+
readonly fontSizeSub: string;
|
|
81
|
+
readonly fontSizeH3: string;
|
|
82
|
+
readonly fontSizeH3Lg: string;
|
|
83
|
+
readonly fontSizeLogo: string;
|
|
84
|
+
readonly fontSizeCallout: string;
|
|
85
|
+
readonly fontSizeCloseSm: string;
|
|
86
|
+
readonly fontSizeCloseLg: string;
|
|
87
|
+
readonly fontSizeH2Sm: string;
|
|
88
|
+
readonly fontSizeH2: string;
|
|
89
|
+
readonly fontSizeH1: string;
|
|
90
|
+
readonly fontSizeDisplay: string;
|
|
91
|
+
readonly fontLineHeightNone: number;
|
|
92
|
+
readonly fontLineHeightTight: number;
|
|
93
|
+
readonly fontLineHeightHeading: number;
|
|
94
|
+
readonly fontLineHeightSnug: number;
|
|
95
|
+
readonly fontLineHeightBodySm: number;
|
|
96
|
+
readonly fontLineHeightBody: number;
|
|
97
|
+
readonly fontLineHeightStep: number;
|
|
98
|
+
readonly fontLineHeightRelaxed: number;
|
|
99
|
+
readonly fontLetterSpacingTight: string;
|
|
100
|
+
readonly fontLetterSpacingHeading: string;
|
|
101
|
+
readonly fontLetterSpacingNormal: string;
|
|
102
|
+
readonly fontLetterSpacingLogo: string;
|
|
103
|
+
readonly fontLetterSpacingLabel: string;
|
|
104
|
+
readonly fontLetterSpacingBadge: string;
|
|
105
|
+
readonly fontLetterSpacingSection: string;
|
|
106
|
+
readonly effectShadowBtnPrimaryHover: string;
|
|
107
|
+
readonly effectShadowNavScrolled: string;
|
|
108
|
+
readonly effectShadowMobileMenu: string;
|
|
109
|
+
readonly effectShadowFocusRing: string;
|
|
110
|
+
readonly effectShadowFocusRingError: string;
|
|
111
|
+
readonly effectShadowElevated: string;
|
|
112
|
+
readonly effectBlurNavBackdrop: string;
|
|
113
|
+
readonly effectTransitionFast: string;
|
|
114
|
+
readonly effectTransitionMedium: string;
|
|
115
|
+
readonly effectTransitionSlow: string;
|
|
116
|
+
readonly effectOpacityDisabled: number;
|
|
117
|
+
readonly effectTransformHoverLift: string;
|
|
118
|
+
readonly effectTransformHoverLiftSm: string;
|
|
119
|
+
readonly effectTransformFadeInOffset: string;
|
|
120
|
+
readonly effectTransformParallaxFactor: string;
|
|
121
|
+
readonly effectTransformPressScale: string;
|
|
122
|
+
readonly effectTransformPressScaleInput: string;
|
|
123
|
+
readonly effectTransformPressScaleControl: string;
|
|
124
|
+
readonly effectTransformPressScaleTrack: string;
|
|
125
|
+
readonly effectTransformPressScaleIcon: string;
|
|
126
|
+
readonly effectTransformToggleThumbOn: string;
|
|
127
|
+
readonly layoutContainerMax: string;
|
|
128
|
+
readonly layoutContainerNarrow: string;
|
|
129
|
+
readonly layoutContainerCta: string;
|
|
130
|
+
readonly layoutContainerCallout: string;
|
|
131
|
+
readonly layoutContainerChamath: string;
|
|
132
|
+
readonly layoutContainerHeroSub: string;
|
|
133
|
+
readonly layoutContainerCompare: string;
|
|
134
|
+
readonly layoutContainerWide: string;
|
|
135
|
+
readonly layoutContainerModal: string;
|
|
136
|
+
readonly layoutContainerToastMin: string;
|
|
137
|
+
readonly layoutContainerToastMax: string;
|
|
138
|
+
readonly layoutContainerCompareScroll: string;
|
|
139
|
+
readonly layoutContainerDocument: string;
|
|
140
|
+
readonly layoutNavHeight: string;
|
|
141
|
+
readonly layoutBreakpointDesktop: string;
|
|
142
|
+
readonly layoutBreakpointTablet: string;
|
|
143
|
+
readonly layoutBreakpointMobile: string;
|
|
144
|
+
readonly layoutBreakpointSmall: string;
|
|
145
|
+
readonly layoutZIndexBase: number;
|
|
146
|
+
readonly layoutZIndexContent: number;
|
|
147
|
+
readonly layoutZIndexMobileMenu: number;
|
|
148
|
+
readonly layoutZIndexNav: number;
|
|
149
|
+
readonly layoutZIndexDropdown: number;
|
|
150
|
+
readonly layoutZIndexModal: number;
|
|
151
|
+
readonly layoutZIndexToast: number;
|
|
152
|
+
readonly layoutComponentControlBox: string;
|
|
153
|
+
readonly layoutComponentRadioDot: string;
|
|
154
|
+
readonly layoutComponentToggleTrackW: string;
|
|
155
|
+
readonly layoutComponentToggleTrackH: string;
|
|
156
|
+
readonly layoutComponentToggleThumb: string;
|
|
157
|
+
readonly layoutComponentToggleThumbInset: string;
|
|
158
|
+
readonly layoutComponentToggleThumbTravel: string;
|
|
159
|
+
readonly layoutComponentToggleCheckW: string;
|
|
160
|
+
readonly layoutComponentToggleCheckH: string;
|
|
161
|
+
readonly layoutComponentToggleCheckStroke: string;
|
|
162
|
+
readonly layoutComponentIconBox: string;
|
|
163
|
+
readonly layoutComponentStepNumber: string;
|
|
164
|
+
readonly layoutComponentHamburger: string;
|
|
165
|
+
readonly layoutComponentHamburgerBarOffset: string;
|
|
166
|
+
readonly layoutComponentAccentLineW: string;
|
|
167
|
+
readonly layoutComponentAccentBorderW: string;
|
|
168
|
+
readonly layoutComponentBullet: string;
|
|
169
|
+
readonly sizingHeightXs: string;
|
|
170
|
+
readonly sizingHeightSm: string;
|
|
171
|
+
readonly sizingHeightMd: string;
|
|
172
|
+
readonly sizingHeightLg: string;
|
|
173
|
+
readonly sizingHeightXl: string;
|
|
174
|
+
readonly sizingHeight2xl: string;
|
|
175
|
+
readonly semanticBgDefault: string;
|
|
176
|
+
readonly semanticBgAlt: string;
|
|
177
|
+
readonly semanticBgCard: string;
|
|
178
|
+
readonly semanticBgCardHover: string;
|
|
179
|
+
readonly semanticBgSurface: string;
|
|
180
|
+
readonly semanticBgNavScrolled: string;
|
|
181
|
+
readonly semanticBgOverlay: string;
|
|
182
|
+
readonly semanticTextPrimary: string;
|
|
183
|
+
readonly semanticTextSecondary: string;
|
|
184
|
+
readonly semanticTextMuted: string;
|
|
185
|
+
readonly semanticTextAccent: string;
|
|
186
|
+
readonly semanticTextAccentHover: string;
|
|
187
|
+
readonly semanticTextOnAccent: string;
|
|
188
|
+
readonly semanticTextSuccess: string;
|
|
189
|
+
readonly semanticTextError: string;
|
|
190
|
+
readonly semanticTextWarning: string;
|
|
191
|
+
readonly semanticTextInfo: string;
|
|
192
|
+
readonly semanticActionPrimaryBg: string;
|
|
193
|
+
readonly semanticActionPrimaryBgHover: string;
|
|
194
|
+
readonly semanticActionPrimaryText: string;
|
|
195
|
+
readonly semanticActionGhostBg: string;
|
|
196
|
+
readonly semanticActionGhostBgHover: string;
|
|
197
|
+
readonly semanticActionGhostBorder: string;
|
|
198
|
+
readonly semanticActionGhostBorderHover: string;
|
|
199
|
+
readonly semanticActionGhostText: string;
|
|
200
|
+
readonly semanticActionGhostTextHover: string;
|
|
201
|
+
readonly semanticActionToggleBg: string;
|
|
202
|
+
readonly semanticActionToggleBgOn: string;
|
|
203
|
+
readonly semanticActionToggleThumb: string;
|
|
204
|
+
readonly semanticActionSuccess: string;
|
|
205
|
+
readonly semanticActionError: string;
|
|
206
|
+
readonly semanticActionWarning: string;
|
|
207
|
+
readonly semanticActionInfo: string;
|
|
208
|
+
readonly semanticActionSuccessBg: string;
|
|
209
|
+
readonly semanticActionErrorBg: string;
|
|
210
|
+
readonly semanticActionWarningBg: string;
|
|
211
|
+
readonly semanticActionInfoBg: string;
|
|
212
|
+
readonly semanticBorderDefault: string;
|
|
213
|
+
readonly semanticBorderHover: string;
|
|
214
|
+
readonly semanticBorderCard: string;
|
|
215
|
+
readonly semanticBorderCardHover: string;
|
|
216
|
+
readonly semanticBorderAccentSubtle: string;
|
|
217
|
+
readonly semanticBorderAccentDim: string;
|
|
218
|
+
readonly semanticBorderNav: string;
|
|
219
|
+
readonly semanticBorderInputHover: string;
|
|
220
|
+
readonly semanticBorderSuccess: string;
|
|
221
|
+
readonly semanticBorderError: string;
|
|
222
|
+
readonly semanticBorderWarning: string;
|
|
223
|
+
readonly semanticBorderInfo: string;
|
|
224
|
+
readonly semanticSurfaceAccentDim: string;
|
|
225
|
+
readonly semanticSurfaceAccentGlow: string;
|
|
226
|
+
readonly semanticSurfaceHighlight: string;
|
|
227
|
+
readonly semanticSurfaceElevated: string;
|
|
228
|
+
readonly semanticFocusBorder: string;
|
|
229
|
+
readonly semanticFocusGlow: string;
|
|
230
|
+
readonly semanticSpacingSectionY: string;
|
|
231
|
+
readonly semanticSpacingSectionYLg: string;
|
|
232
|
+
readonly semanticSpacingComponentGap: string;
|
|
233
|
+
readonly semanticSpacingCardPadding: string;
|
|
234
|
+
readonly semanticSpacingCardGap: string;
|
|
235
|
+
readonly semanticSpacingFormGap: string;
|
|
236
|
+
readonly semanticSpacingFormPadding: string;
|
|
237
|
+
readonly semanticSpacingInputX: string;
|
|
238
|
+
readonly semanticSpacingInputY: string;
|
|
239
|
+
readonly semanticSpacingBtnX: string;
|
|
240
|
+
readonly semanticSpacingBtnY: string;
|
|
241
|
+
readonly semanticSpacingBtnXLg: string;
|
|
242
|
+
readonly semanticSpacingBtnYLg: string;
|
|
243
|
+
readonly semanticSpacingNavHeight: string;
|
|
244
|
+
readonly semanticSpacingStackSm: string;
|
|
245
|
+
readonly semanticSpacingStackMd: string;
|
|
246
|
+
readonly semanticSpacingStackLg: string;
|
|
247
|
+
readonly semanticSpacingInlineSm: string;
|
|
248
|
+
readonly semanticSpacingInlineMd: string;
|
|
249
|
+
readonly semanticRadiusBtn: string;
|
|
250
|
+
readonly semanticRadiusInput: string;
|
|
251
|
+
readonly semanticRadiusCard: string;
|
|
252
|
+
readonly semanticRadiusPanel: string;
|
|
253
|
+
readonly semanticRadiusBadge: string;
|
|
254
|
+
readonly semanticRadiusAvatar: string;
|
|
255
|
+
readonly semanticTypeHeadingFont: string;
|
|
256
|
+
readonly semanticTypeBodyFont: string;
|
|
257
|
+
readonly semanticTypeMonoFont: string;
|
|
258
|
+
readonly semanticTypeDisplaySize: string;
|
|
259
|
+
readonly semanticTypeSectionTitleSize: string;
|
|
260
|
+
readonly semanticTypeSectionTitleSmSize: string;
|
|
261
|
+
readonly semanticTypeSectionTitleXsSize: string;
|
|
262
|
+
readonly semanticTypeHeadingMdSize: string;
|
|
263
|
+
readonly semanticTypeHeadingSmSize: string;
|
|
264
|
+
readonly semanticTypeStepTitleSize: string;
|
|
265
|
+
readonly semanticTypeCardSubtitleSize: string;
|
|
266
|
+
readonly semanticTypeBodySize: string;
|
|
267
|
+
readonly semanticTypeBodyLgSize: string;
|
|
268
|
+
readonly semanticTypeBodyCompactSize: string;
|
|
269
|
+
readonly semanticTypeBodySmSize: string;
|
|
270
|
+
readonly semanticTypeNavSize: string;
|
|
271
|
+
readonly semanticTypeLabelSize: string;
|
|
272
|
+
readonly semanticTypeSectionLabelSize: string;
|
|
273
|
+
readonly semanticTypeBadgeSize: string;
|
|
274
|
+
readonly semanticTypeCalloutSize: string;
|
|
275
|
+
readonly semanticTypeLogoSize: string;
|
|
276
|
+
readonly semanticTypeCloseSmSize: string;
|
|
277
|
+
readonly semanticTypeCloseLgSize: string;
|
|
278
|
+
readonly semanticTypeDisplayWeight: string;
|
|
279
|
+
readonly semanticTypeHeadingWeight: string;
|
|
280
|
+
readonly semanticTypeEmphasisWeight: string;
|
|
281
|
+
readonly semanticTypeLabelWeight: string;
|
|
282
|
+
readonly semanticTypeBodyWeight: string;
|
|
283
|
+
readonly semanticTypeCalloutWeight: string;
|
|
284
|
+
readonly semanticTypeDisplayLineHeight: string;
|
|
285
|
+
readonly semanticTypeHeadingLineHeight: string;
|
|
286
|
+
readonly semanticTypeBodyLineHeight: string;
|
|
287
|
+
readonly semanticTypeBodyCompactLineHeight: string;
|
|
288
|
+
readonly semanticTypeStepLineHeight: string;
|
|
289
|
+
readonly semanticTypeRelaxedLineHeight: string;
|
|
290
|
+
readonly semanticTypeNoneLineHeight: string;
|
|
291
|
+
readonly semanticTypeDisplayLetterSpacing: string;
|
|
292
|
+
readonly semanticTypeHeadingLetterSpacing: string;
|
|
293
|
+
readonly semanticTypeLabelLetterSpacing: string;
|
|
294
|
+
readonly semanticTypeSectionLabelLetterSpacing: string;
|
|
295
|
+
readonly semanticTypeBadgeLetterSpacing: string;
|
|
296
|
+
readonly semanticTypeLogoLetterSpacing: string;
|
|
297
|
+
readonly semanticSizingInputHeight: string;
|
|
298
|
+
readonly semanticSizingBtnHeight: string;
|
|
299
|
+
readonly semanticSizingBtnHeightLg: string;
|
|
300
|
+
readonly semanticSizingBtnHeightNav: string;
|
|
301
|
+
readonly semanticSizingTextareaMinHeight: string;
|
|
302
|
+
readonly semanticSizingBadgeHeight: string;
|
|
303
|
+
readonly semanticSizingStepNumber: string;
|
|
304
|
+
readonly semanticSizingIconBox: string;
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
export default tokens;
|
|
308
|
+
export { tokens };
|
package/build/index.js
ADDED
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// @pcoi/tokens — CommonJS
|
|
3
|
+
// Generated 2026-03-03
|
|
4
|
+
|
|
5
|
+
const tokens = {
|
|
6
|
+
"colorBg": "#0C0C14",
|
|
7
|
+
"colorBgAlt": "#111120",
|
|
8
|
+
"colorBgCard": "#16162A",
|
|
9
|
+
"colorBgCardHover": "#1C1C38",
|
|
10
|
+
"colorSurface": "#1A1A2E",
|
|
11
|
+
"colorAccent": "#D4A44C",
|
|
12
|
+
"colorAccentHover": "#E0B560",
|
|
13
|
+
"colorTextPrimary": "#E8E8F0",
|
|
14
|
+
"colorTextSecondary": "#9595B0",
|
|
15
|
+
"colorTextMuted": "#8585A0",
|
|
16
|
+
"colorSuccess": "#3DA87A",
|
|
17
|
+
"colorError": "#E05252",
|
|
18
|
+
"colorWarning": "#E8943A",
|
|
19
|
+
"colorInfo": "#5B8BD4",
|
|
20
|
+
"colorWhite": "#FFFFFF",
|
|
21
|
+
"colorBlack": "#000000",
|
|
22
|
+
"colorBorder": "rgba(255, 255, 255, 0.35)",
|
|
23
|
+
"colorBorderHover": "rgba(255, 255, 255, 0.45)",
|
|
24
|
+
"colorBorderSoft": "rgba(255, 255, 255, 0.06)",
|
|
25
|
+
"colorBorderSoftHover": "rgba(255, 255, 255, 0.12)",
|
|
26
|
+
"colorAccentGlow": "rgba(212, 164, 76, 0.15)",
|
|
27
|
+
"colorAccentDim": "rgba(212, 164, 76, 0.08)",
|
|
28
|
+
"colorHighlight": "rgba(212, 164, 76, 0.06)",
|
|
29
|
+
"colorNavScrolledBg": "rgba(12, 12, 20, 0.92)",
|
|
30
|
+
"colorGhostHoverBg": "rgba(255, 255, 255, 0.03)",
|
|
31
|
+
"colorGhostHoverBorder": "rgba(255, 255, 255, 0.35)",
|
|
32
|
+
"colorFocusBorder": "rgba(212, 164, 76, 0.55)",
|
|
33
|
+
"colorFocusGlow": "rgba(212, 164, 76, 0.08)",
|
|
34
|
+
"colorAccentBorderSubtle": "rgba(212, 164, 76, 0.58)",
|
|
35
|
+
"colorAccentBorderDim": "rgba(212, 164, 76, 0.52)",
|
|
36
|
+
"colorGridLine": "rgba(255, 255, 255, 0.02)",
|
|
37
|
+
"spacing0": "0px",
|
|
38
|
+
"spacing4": "4px",
|
|
39
|
+
"spacing5": "5px",
|
|
40
|
+
"spacing6": "6px",
|
|
41
|
+
"spacing8": "8px",
|
|
42
|
+
"spacing10": "10px",
|
|
43
|
+
"spacing12": "12px",
|
|
44
|
+
"spacing14": "14px",
|
|
45
|
+
"spacing16": "16px",
|
|
46
|
+
"spacing20": "20px",
|
|
47
|
+
"spacing22": "22px",
|
|
48
|
+
"spacing24": "24px",
|
|
49
|
+
"spacing28": "28px",
|
|
50
|
+
"spacing32": "32px",
|
|
51
|
+
"spacing36": "36px",
|
|
52
|
+
"spacing40": "40px",
|
|
53
|
+
"spacing48": "48px",
|
|
54
|
+
"spacing60": "60px",
|
|
55
|
+
"spacing64": "64px",
|
|
56
|
+
"spacing72": "72px",
|
|
57
|
+
"spacing80": "80px",
|
|
58
|
+
"spacing100": "100px",
|
|
59
|
+
"spacing120": "120px",
|
|
60
|
+
"radiusSm": "6px",
|
|
61
|
+
"radiusMd": "12px",
|
|
62
|
+
"radiusLg": "20px",
|
|
63
|
+
"radiusXl": "28px",
|
|
64
|
+
"radiusFull": "9999px",
|
|
65
|
+
"fontFamilySans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
66
|
+
"fontFamilyMono": "'JetBrains Mono', 'Fira Code', monospace",
|
|
67
|
+
"fontWeightLight": 300,
|
|
68
|
+
"fontWeightRegular": 400,
|
|
69
|
+
"fontWeightMedium": 500,
|
|
70
|
+
"fontWeightSemibold": 600,
|
|
71
|
+
"fontWeightBold": 700,
|
|
72
|
+
"fontWeightExtrabold": 800,
|
|
73
|
+
"fontSizeXs": "0.7rem",
|
|
74
|
+
"fontSizeSm": "0.75rem",
|
|
75
|
+
"fontSizeCaption": "0.8rem",
|
|
76
|
+
"fontSizeBodySm": "0.85rem",
|
|
77
|
+
"fontSizeNav": "0.875rem",
|
|
78
|
+
"fontSizeBody": "0.9rem",
|
|
79
|
+
"fontSizeBodyDefault": "0.95rem",
|
|
80
|
+
"fontSizeBodyLg": "1rem",
|
|
81
|
+
"fontSizeLead": "1.05rem",
|
|
82
|
+
"fontSizeSub": "1.1rem",
|
|
83
|
+
"fontSizeH3": "1.15rem",
|
|
84
|
+
"fontSizeH3Lg": "1.2rem",
|
|
85
|
+
"fontSizeLogo": "1.35rem",
|
|
86
|
+
"fontSizeCallout": "1.35rem",
|
|
87
|
+
"fontSizeCloseSm": "1.25rem",
|
|
88
|
+
"fontSizeCloseLg": "1.5rem",
|
|
89
|
+
"fontSizeH2Sm": "2.25rem",
|
|
90
|
+
"fontSizeH2": "2.5rem",
|
|
91
|
+
"fontSizeH1": "2.75rem",
|
|
92
|
+
"fontSizeDisplay": "4rem",
|
|
93
|
+
"fontLineHeightNone": 1,
|
|
94
|
+
"fontLineHeightTight": 1.1,
|
|
95
|
+
"fontLineHeightHeading": 1.2,
|
|
96
|
+
"fontLineHeightSnug": 1.3,
|
|
97
|
+
"fontLineHeightBodySm": 1.5,
|
|
98
|
+
"fontLineHeightBody": 1.6,
|
|
99
|
+
"fontLineHeightStep": 1.65,
|
|
100
|
+
"fontLineHeightRelaxed": 1.7,
|
|
101
|
+
"fontLetterSpacingTight": "-0.03em",
|
|
102
|
+
"fontLetterSpacingHeading": "-0.02em",
|
|
103
|
+
"fontLetterSpacingNormal": "0em",
|
|
104
|
+
"fontLetterSpacingLogo": "0.04em",
|
|
105
|
+
"fontLetterSpacingLabel": "0.06em",
|
|
106
|
+
"fontLetterSpacingBadge": "0.08em",
|
|
107
|
+
"fontLetterSpacingSection": "0.1em",
|
|
108
|
+
"effectShadowBtnPrimaryHover": "0 8px 30px rgba(212, 164, 76, 0.25)",
|
|
109
|
+
"effectShadowNavScrolled": "0 1px 0 rgba(255, 255, 255, 0.06)",
|
|
110
|
+
"effectShadowMobileMenu": "0 12px 40px rgba(0, 0, 0, 0.6)",
|
|
111
|
+
"effectShadowFocusRing": "0 0 0 3px rgba(212, 164, 76, 0.08)",
|
|
112
|
+
"effectShadowFocusRingError": "0 0 0 3px rgba(224, 82, 82, 0.08)",
|
|
113
|
+
"effectShadowElevated": "0 8px 32px rgba(0, 0, 0, 0.4)",
|
|
114
|
+
"effectBlurNavBackdrop": "20px",
|
|
115
|
+
"effectTransitionFast": "0.2s ease",
|
|
116
|
+
"effectTransitionMedium": "0.3s ease",
|
|
117
|
+
"effectTransitionSlow": "0.6s ease",
|
|
118
|
+
"effectOpacityDisabled": 0.5,
|
|
119
|
+
"effectTransformHoverLift": "translateY(-2px)",
|
|
120
|
+
"effectTransformHoverLiftSm": "translateY(-1px)",
|
|
121
|
+
"effectTransformFadeInOffset": "translateY(24px)",
|
|
122
|
+
"effectTransformParallaxFactor": "0.15",
|
|
123
|
+
"effectTransformPressScale": "scale(0.985)",
|
|
124
|
+
"effectTransformPressScaleInput": "scale(0.99)",
|
|
125
|
+
"effectTransformPressScaleControl": "scale(0.95)",
|
|
126
|
+
"effectTransformPressScaleTrack": "scale(0.975)",
|
|
127
|
+
"effectTransformPressScaleIcon": "scale(0.925)",
|
|
128
|
+
"effectTransformToggleThumbOn": "scale(1.15)",
|
|
129
|
+
"layoutContainerMax": "1200px",
|
|
130
|
+
"layoutContainerNarrow": "800px",
|
|
131
|
+
"layoutContainerCta": "680px",
|
|
132
|
+
"layoutContainerCallout": "600px",
|
|
133
|
+
"layoutContainerChamath": "640px",
|
|
134
|
+
"layoutContainerHeroSub": "520px",
|
|
135
|
+
"layoutContainerCompare": "900px",
|
|
136
|
+
"layoutContainerWide": "1100px",
|
|
137
|
+
"layoutContainerModal": "520px",
|
|
138
|
+
"layoutContainerToastMin": "280px",
|
|
139
|
+
"layoutContainerToastMax": "420px",
|
|
140
|
+
"layoutContainerCompareScroll": "500px",
|
|
141
|
+
"layoutContainerDocument": "900px",
|
|
142
|
+
"layoutNavHeight": "72px",
|
|
143
|
+
"layoutBreakpointDesktop": "1025px",
|
|
144
|
+
"layoutBreakpointTablet": "1024px",
|
|
145
|
+
"layoutBreakpointMobile": "768px",
|
|
146
|
+
"layoutBreakpointSmall": "480px",
|
|
147
|
+
"layoutZIndexBase": 1,
|
|
148
|
+
"layoutZIndexContent": 1,
|
|
149
|
+
"layoutZIndexMobileMenu": 100,
|
|
150
|
+
"layoutZIndexNav": 1000,
|
|
151
|
+
"layoutZIndexDropdown": 200,
|
|
152
|
+
"layoutZIndexModal": 500,
|
|
153
|
+
"layoutZIndexToast": 600,
|
|
154
|
+
"layoutComponentControlBox": "18px",
|
|
155
|
+
"layoutComponentRadioDot": "8px",
|
|
156
|
+
"layoutComponentToggleTrackW": "40px",
|
|
157
|
+
"layoutComponentToggleTrackH": "22px",
|
|
158
|
+
"layoutComponentToggleThumb": "16px",
|
|
159
|
+
"layoutComponentToggleThumbInset": "3px",
|
|
160
|
+
"layoutComponentToggleThumbTravel": "18px",
|
|
161
|
+
"layoutComponentToggleCheckW": "4px",
|
|
162
|
+
"layoutComponentToggleCheckH": "7px",
|
|
163
|
+
"layoutComponentToggleCheckStroke": "1.5px",
|
|
164
|
+
"layoutComponentIconBox": "52px",
|
|
165
|
+
"layoutComponentStepNumber": "48px",
|
|
166
|
+
"layoutComponentHamburger": "28px",
|
|
167
|
+
"layoutComponentHamburgerBarOffset": "7px",
|
|
168
|
+
"layoutComponentAccentLineW": "60px",
|
|
169
|
+
"layoutComponentAccentBorderW": "3px",
|
|
170
|
+
"layoutComponentBullet": "8px",
|
|
171
|
+
"sizingHeightXs": "24px",
|
|
172
|
+
"sizingHeightSm": "32px",
|
|
173
|
+
"sizingHeightMd": "40px",
|
|
174
|
+
"sizingHeightLg": "48px",
|
|
175
|
+
"sizingHeightXl": "64px",
|
|
176
|
+
"sizingHeight2xl": "80px",
|
|
177
|
+
"semanticBgDefault": "{color.bg}",
|
|
178
|
+
"semanticBgAlt": "{color.bg-alt}",
|
|
179
|
+
"semanticBgCard": "{color.bg-card}",
|
|
180
|
+
"semanticBgCardHover": "{color.bg-card-hover}",
|
|
181
|
+
"semanticBgSurface": "{color.surface}",
|
|
182
|
+
"semanticBgNavScrolled": "{color.nav-scrolled-bg}",
|
|
183
|
+
"semanticBgOverlay": "rgba(0, 0, 0, 0.6)",
|
|
184
|
+
"semanticTextPrimary": "{color.text-primary}",
|
|
185
|
+
"semanticTextSecondary": "{color.text-secondary}",
|
|
186
|
+
"semanticTextMuted": "{color.text-muted}",
|
|
187
|
+
"semanticTextAccent": "{color.accent}",
|
|
188
|
+
"semanticTextAccentHover": "{color.accent-hover}",
|
|
189
|
+
"semanticTextOnAccent": "{color.bg}",
|
|
190
|
+
"semanticTextSuccess": "{color.success}",
|
|
191
|
+
"semanticTextError": "{color.error}",
|
|
192
|
+
"semanticTextWarning": "{color.warning}",
|
|
193
|
+
"semanticTextInfo": "{color.info}",
|
|
194
|
+
"semanticActionPrimaryBg": "{color.accent}",
|
|
195
|
+
"semanticActionPrimaryBgHover": "{color.accent-hover}",
|
|
196
|
+
"semanticActionPrimaryText": "{color.bg}",
|
|
197
|
+
"semanticActionGhostBg": "transparent",
|
|
198
|
+
"semanticActionGhostBgHover": "{color.ghost-hover-bg}",
|
|
199
|
+
"semanticActionGhostBorder": "{color.border-hover}",
|
|
200
|
+
"semanticActionGhostBorderHover": "{color.ghost-hover-border}",
|
|
201
|
+
"semanticActionGhostText": "{color.text-secondary}",
|
|
202
|
+
"semanticActionGhostTextHover": "{color.text-primary}",
|
|
203
|
+
"semanticActionToggleBg": "{color.border-hover}",
|
|
204
|
+
"semanticActionToggleBgOn": "{color.accent}",
|
|
205
|
+
"semanticActionToggleThumb": "#FFFFFF",
|
|
206
|
+
"semanticActionSuccess": "{color.success}",
|
|
207
|
+
"semanticActionError": "{color.error}",
|
|
208
|
+
"semanticActionWarning": "{color.warning}",
|
|
209
|
+
"semanticActionInfo": "{color.info}",
|
|
210
|
+
"semanticActionSuccessBg": "rgba(42, 125, 95, 0.08)",
|
|
211
|
+
"semanticActionErrorBg": "rgba(224, 82, 82, 0.08)",
|
|
212
|
+
"semanticActionWarningBg": "rgba(232, 148, 58, 0.08)",
|
|
213
|
+
"semanticActionInfoBg": "rgba(91, 139, 212, 0.08)",
|
|
214
|
+
"semanticBorderDefault": "{color.border}",
|
|
215
|
+
"semanticBorderHover": "{color.border-hover}",
|
|
216
|
+
"semanticBorderCard": "{color.border-soft}",
|
|
217
|
+
"semanticBorderCardHover": "{color.border-soft-hover}",
|
|
218
|
+
"semanticBorderAccentSubtle": "{color.accent-border-subtle}",
|
|
219
|
+
"semanticBorderAccentDim": "{color.accent-border-dim}",
|
|
220
|
+
"semanticBorderNav": "{color.border}",
|
|
221
|
+
"semanticBorderInputHover": "{color.border-hover}",
|
|
222
|
+
"semanticBorderSuccess": "{color.success}",
|
|
223
|
+
"semanticBorderError": "{color.error}",
|
|
224
|
+
"semanticBorderWarning": "{color.warning}",
|
|
225
|
+
"semanticBorderInfo": "{color.info}",
|
|
226
|
+
"semanticSurfaceAccentDim": "{color.accent-dim}",
|
|
227
|
+
"semanticSurfaceAccentGlow": "{color.accent-glow}",
|
|
228
|
+
"semanticSurfaceHighlight": "{color.highlight}",
|
|
229
|
+
"semanticSurfaceElevated": "{color.bg-card}",
|
|
230
|
+
"semanticFocusBorder": "{color.focus-border}",
|
|
231
|
+
"semanticFocusGlow": "{color.focus-glow}",
|
|
232
|
+
"semanticSpacingSectionY": "{spacing.80}",
|
|
233
|
+
"semanticSpacingSectionYLg": "{spacing.120}",
|
|
234
|
+
"semanticSpacingComponentGap": "{spacing.40}",
|
|
235
|
+
"semanticSpacingCardPadding": "{spacing.36}",
|
|
236
|
+
"semanticSpacingCardGap": "{spacing.20}",
|
|
237
|
+
"semanticSpacingFormGap": "{spacing.20}",
|
|
238
|
+
"semanticSpacingFormPadding": "{spacing.40}",
|
|
239
|
+
"semanticSpacingInputX": "{spacing.16}",
|
|
240
|
+
"semanticSpacingInputY": "{spacing.12}",
|
|
241
|
+
"semanticSpacingBtnX": "{spacing.24}",
|
|
242
|
+
"semanticSpacingBtnY": "{spacing.10}",
|
|
243
|
+
"semanticSpacingBtnXLg": "{spacing.36}",
|
|
244
|
+
"semanticSpacingBtnYLg": "{spacing.16}",
|
|
245
|
+
"semanticSpacingNavHeight": "{spacing.72}",
|
|
246
|
+
"semanticSpacingStackSm": "{spacing.8}",
|
|
247
|
+
"semanticSpacingStackMd": "{spacing.16}",
|
|
248
|
+
"semanticSpacingStackLg": "{spacing.32}",
|
|
249
|
+
"semanticSpacingInlineSm": "{spacing.8}",
|
|
250
|
+
"semanticSpacingInlineMd": "{spacing.16}",
|
|
251
|
+
"semanticRadiusBtn": "{radius.sm}",
|
|
252
|
+
"semanticRadiusInput": "{radius.sm}",
|
|
253
|
+
"semanticRadiusCard": "{radius.md}",
|
|
254
|
+
"semanticRadiusPanel": "{radius.lg}",
|
|
255
|
+
"semanticRadiusBadge": "{radius.full}",
|
|
256
|
+
"semanticRadiusAvatar": "{radius.full}",
|
|
257
|
+
"semanticTypeHeadingFont": "{font.family.sans}",
|
|
258
|
+
"semanticTypeBodyFont": "{font.family.sans}",
|
|
259
|
+
"semanticTypeMonoFont": "{font.family.mono}",
|
|
260
|
+
"semanticTypeDisplaySize": "clamp(2.5rem, 5vw, 4rem)",
|
|
261
|
+
"semanticTypeSectionTitleSize": "clamp(1.75rem, 3.5vw, 2.75rem)",
|
|
262
|
+
"semanticTypeSectionTitleSmSize": "clamp(1.75rem, 3.5vw, 2.5rem)",
|
|
263
|
+
"semanticTypeSectionTitleXsSize": "clamp(1.5rem, 3vw, 2.25rem)",
|
|
264
|
+
"semanticTypeHeadingMdSize": "{font.size.h3}",
|
|
265
|
+
"semanticTypeHeadingSmSize": "{font.size.sub}",
|
|
266
|
+
"semanticTypeStepTitleSize": "{font.size.h3-lg}",
|
|
267
|
+
"semanticTypeCardSubtitleSize": "{font.size.lead}",
|
|
268
|
+
"semanticTypeBodySize": "{font.size.body-default}",
|
|
269
|
+
"semanticTypeBodyLgSize": "{font.size.body-lg}",
|
|
270
|
+
"semanticTypeBodyCompactSize": "{font.size.body}",
|
|
271
|
+
"semanticTypeBodySmSize": "{font.size.body-sm}",
|
|
272
|
+
"semanticTypeNavSize": "{font.size.nav}",
|
|
273
|
+
"semanticTypeLabelSize": "{font.size.caption}",
|
|
274
|
+
"semanticTypeSectionLabelSize": "{font.size.sm}",
|
|
275
|
+
"semanticTypeBadgeSize": "{font.size.xs}",
|
|
276
|
+
"semanticTypeCalloutSize": "{font.size.callout}",
|
|
277
|
+
"semanticTypeLogoSize": "{font.size.logo}",
|
|
278
|
+
"semanticTypeCloseSmSize": "{font.size.close-sm}",
|
|
279
|
+
"semanticTypeCloseLgSize": "{font.size.close-lg}",
|
|
280
|
+
"semanticTypeDisplayWeight": "{font.weight.extrabold}",
|
|
281
|
+
"semanticTypeHeadingWeight": "{font.weight.bold}",
|
|
282
|
+
"semanticTypeEmphasisWeight": "{font.weight.semibold}",
|
|
283
|
+
"semanticTypeLabelWeight": "{font.weight.medium}",
|
|
284
|
+
"semanticTypeBodyWeight": "{font.weight.regular}",
|
|
285
|
+
"semanticTypeCalloutWeight": "{font.weight.light}",
|
|
286
|
+
"semanticTypeDisplayLineHeight": "{font.lineHeight.tight}",
|
|
287
|
+
"semanticTypeHeadingLineHeight": "{font.lineHeight.heading}",
|
|
288
|
+
"semanticTypeBodyLineHeight": "{font.lineHeight.body}",
|
|
289
|
+
"semanticTypeBodyCompactLineHeight": "{font.lineHeight.body-sm}",
|
|
290
|
+
"semanticTypeStepLineHeight": "{font.lineHeight.step}",
|
|
291
|
+
"semanticTypeRelaxedLineHeight": "{font.lineHeight.relaxed}",
|
|
292
|
+
"semanticTypeNoneLineHeight": "{font.lineHeight.none}",
|
|
293
|
+
"semanticTypeDisplayLetterSpacing": "{font.letterSpacing.tight}",
|
|
294
|
+
"semanticTypeHeadingLetterSpacing": "{font.letterSpacing.heading}",
|
|
295
|
+
"semanticTypeLabelLetterSpacing": "{font.letterSpacing.label}",
|
|
296
|
+
"semanticTypeSectionLabelLetterSpacing": "{font.letterSpacing.section}",
|
|
297
|
+
"semanticTypeBadgeLetterSpacing": "{font.letterSpacing.badge}",
|
|
298
|
+
"semanticTypeLogoLetterSpacing": "{font.letterSpacing.logo}",
|
|
299
|
+
"semanticSizingInputHeight": "{sizing.height.md}",
|
|
300
|
+
"semanticSizingBtnHeight": "{sizing.height.md}",
|
|
301
|
+
"semanticSizingBtnHeightLg": "{sizing.height.lg}",
|
|
302
|
+
"semanticSizingBtnHeightNav": "{sizing.height.sm}",
|
|
303
|
+
"semanticSizingTextareaMinHeight": "{sizing.height.2xl}",
|
|
304
|
+
"semanticSizingBadgeHeight": "{sizing.height.xs}",
|
|
305
|
+
"semanticSizingStepNumber": "{sizing.height.lg}",
|
|
306
|
+
"semanticSizingIconBox": "52px"
|
|
307
|
+
};
|
|
308
|
+
|
|
309
|
+
module.exports = tokens;
|
|
310
|
+
module.exports.default = tokens;
|