@renegademaster-droid/ds-core 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/dist/chunk-WL3JTAPJ.js +398 -0
- package/dist/chunk-WL3JTAPJ.js.map +1 -0
- package/dist/index.cjs +425 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +9 -0
- package/dist/index.js.map +1 -0
- package/dist/tokens.cjs +425 -0
- package/dist/tokens.cjs.map +1 -0
- package/dist/tokens.d.cts +30 -0
- package/dist/tokens.d.ts +30 -0
- package/dist/tokens.js +9 -0
- package/dist/tokens.js.map +1 -0
- package/package.json +34 -0
package/dist/tokens.cjs
ADDED
|
@@ -0,0 +1,425 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/tokens.ts
|
|
21
|
+
var tokens_exports = {};
|
|
22
|
+
__export(tokens_exports, {
|
|
23
|
+
figmaDarkVariableDefs: () => figmaDarkVariableDefs,
|
|
24
|
+
figmaVariableDefs: () => figmaVariableDefs
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(tokens_exports);
|
|
27
|
+
|
|
28
|
+
// ../../vendor/chakra-design-system-demo/src/theme/figma-tokens.ts
|
|
29
|
+
var figmaVariableDefs = {
|
|
30
|
+
// Semantic / UI (Figma → theme.colors.figma) — from selected Figma node
|
|
31
|
+
"text/fg": "#000000",
|
|
32
|
+
"text/fg_muted": "#52525b",
|
|
33
|
+
"text/fg_subtle": "#a1a1aa",
|
|
34
|
+
"bg/default": "#ffffff",
|
|
35
|
+
"bg/muted": "#f4f4f5",
|
|
36
|
+
"bg/panel": "#ffffff",
|
|
37
|
+
"border/default": "#e4e4e7",
|
|
38
|
+
// Action bar (Figma → theme.colors.figma.actionBar*)
|
|
39
|
+
"action-bar/bg": "#f4f4f5",
|
|
40
|
+
"action-bar/border": "#e4e4e7",
|
|
41
|
+
"action-bar/fg": "#000000",
|
|
42
|
+
// Semantic color tokens (Figma → theme.colors.*.subtle / .muted)
|
|
43
|
+
"red/subtle": "#fee2e2",
|
|
44
|
+
"blue/muted": "#bfdbfe",
|
|
45
|
+
// Gray scale (Figma → theme.colors.gray)
|
|
46
|
+
"gray/50": "#fafafa",
|
|
47
|
+
"gray/100": "#f4f4f5",
|
|
48
|
+
"gray/200": "#E2E8F0",
|
|
49
|
+
"gray/300": "#d4d4d8",
|
|
50
|
+
"gray/400": "#a1a1aa",
|
|
51
|
+
"gray/500": "#71717a",
|
|
52
|
+
"gray/600": "#52525b",
|
|
53
|
+
"gray/700": "#3f3f46",
|
|
54
|
+
"gray/800": "#27272a",
|
|
55
|
+
"gray/900": "#18181b",
|
|
56
|
+
"gray/950": "#111111",
|
|
57
|
+
// Red, Pink, Purple, Cyan, Blue, Teal, Green, Yellow, Orange (Figma → theme.colors.*)
|
|
58
|
+
"red/50": "#fef2f2",
|
|
59
|
+
"red/100": "#fee2e2",
|
|
60
|
+
"red/200": "#fecaca",
|
|
61
|
+
"red/300": "#fca5a5",
|
|
62
|
+
"red/400": "#f87171",
|
|
63
|
+
"red/500": "#ef4444",
|
|
64
|
+
"red/600": "#dc2626",
|
|
65
|
+
"red/700": "#991919",
|
|
66
|
+
"red/800": "#511111",
|
|
67
|
+
"red/900": "#300c0c",
|
|
68
|
+
"red/950": "#1f0808",
|
|
69
|
+
"pink/50": "#fdf2f8",
|
|
70
|
+
"pink/100": "#fce7f3",
|
|
71
|
+
"pink/200": "#fbcfe8",
|
|
72
|
+
"pink/300": "#f9a8d4",
|
|
73
|
+
"pink/400": "#f472b6",
|
|
74
|
+
"pink/500": "#ec4899",
|
|
75
|
+
"pink/600": "#db2777",
|
|
76
|
+
"pink/700": "#a41752",
|
|
77
|
+
"pink/800": "#6d0e34",
|
|
78
|
+
"pink/900": "#45061f",
|
|
79
|
+
"pink/950": "#2c0514",
|
|
80
|
+
"purple/50": "#faf5ff",
|
|
81
|
+
"purple/100": "#f3e8ff",
|
|
82
|
+
"purple/200": "#e9d5ff",
|
|
83
|
+
"purple/300": "#d8b4fe",
|
|
84
|
+
"purple/400": "#c084fc",
|
|
85
|
+
"purple/500": "#a855f7",
|
|
86
|
+
"purple/600": "#9333ea",
|
|
87
|
+
"purple/700": "#641ba3",
|
|
88
|
+
"purple/800": "#4a1772",
|
|
89
|
+
"purple/900": "#2f0553",
|
|
90
|
+
"purple/950": "#1a032e",
|
|
91
|
+
"cyan/50": "#ecfeff",
|
|
92
|
+
"cyan/100": "#cffafe",
|
|
93
|
+
"cyan/200": "#a5f3fc",
|
|
94
|
+
"cyan/300": "#67e8f9",
|
|
95
|
+
"cyan/400": "#22d3ee",
|
|
96
|
+
"cyan/500": "#06b6d4",
|
|
97
|
+
"cyan/600": "#0891b2",
|
|
98
|
+
"cyan/700": "#0c5c72",
|
|
99
|
+
"cyan/800": "#134152",
|
|
100
|
+
"cyan/900": "#072a38",
|
|
101
|
+
"cyan/950": "#051b24",
|
|
102
|
+
"blue/50": "#eff6ff",
|
|
103
|
+
"blue/100": "#dbeafe",
|
|
104
|
+
"blue/200": "#bfdbfe",
|
|
105
|
+
"blue/300": "#a3cfff",
|
|
106
|
+
"blue/400": "#60a5fa",
|
|
107
|
+
"blue/500": "#3774fa",
|
|
108
|
+
"blue/600": "#2563eb",
|
|
109
|
+
"blue/700": "#173da6",
|
|
110
|
+
"blue/contrast": "#ffffff",
|
|
111
|
+
"blue/solid": "#2563eb",
|
|
112
|
+
"blue/800": "#1a3478",
|
|
113
|
+
"blue/900": "#14204a",
|
|
114
|
+
"blue/950": "#0c142e",
|
|
115
|
+
"teal/50": "#f0fdfa",
|
|
116
|
+
"teal/100": "#ccfbf1",
|
|
117
|
+
"teal/200": "#99f6e4",
|
|
118
|
+
"teal/300": "#5eead4",
|
|
119
|
+
"teal/400": "#2dd4bf",
|
|
120
|
+
"teal/500": "#14b8a6",
|
|
121
|
+
"teal/600": "#0d9488",
|
|
122
|
+
"teal/700": "#0c5d56",
|
|
123
|
+
"teal/800": "#114240",
|
|
124
|
+
"teal/900": "#032726",
|
|
125
|
+
"teal/950": "#021716",
|
|
126
|
+
"teal/contrast": "#ffffff",
|
|
127
|
+
"green/50": "#f0fdf4",
|
|
128
|
+
"green/100": "#dcfce7",
|
|
129
|
+
"green/200": "#bbf7d0",
|
|
130
|
+
"green/300": "#86efac",
|
|
131
|
+
"green/400": "#4ade80",
|
|
132
|
+
"green/500": "#22c55e",
|
|
133
|
+
"green/600": "#16a34a",
|
|
134
|
+
"green/700": "#116932",
|
|
135
|
+
"green/800": "#124a28",
|
|
136
|
+
"green/900": "#042713",
|
|
137
|
+
"green/950": "#03190c",
|
|
138
|
+
"yellow/50": "#fefce8",
|
|
139
|
+
"yellow/100": "#fef9c3",
|
|
140
|
+
"yellow/200": "#fef08a",
|
|
141
|
+
"yellow/300": "#fde047",
|
|
142
|
+
"yellow/400": "#facc15",
|
|
143
|
+
"yellow/500": "#eab308",
|
|
144
|
+
"yellow/600": "#ca8a04",
|
|
145
|
+
"yellow/700": "#845209",
|
|
146
|
+
"yellow/800": "#713f12",
|
|
147
|
+
"yellow/900": "#422006",
|
|
148
|
+
"yellow/950": "#281304",
|
|
149
|
+
"orange/50": "#fff7ed",
|
|
150
|
+
"orange/100": "#ffedd5",
|
|
151
|
+
"orange/200": "#fed7aa",
|
|
152
|
+
"orange/300": "#fdba74",
|
|
153
|
+
"orange/400": "#fb923c",
|
|
154
|
+
"orange/500": "#f97316",
|
|
155
|
+
"orange/600": "#ea580c",
|
|
156
|
+
"orange/700": "#92310a",
|
|
157
|
+
"orange/800": "#6c2710",
|
|
158
|
+
"orange/900": "#3b1106",
|
|
159
|
+
"orange/950": "#220a04",
|
|
160
|
+
// Primary (Figma → theme.colors.primary) — often maps to brand/teal
|
|
161
|
+
"primary/50": "#f0fdfa",
|
|
162
|
+
"primary/100": "#ccfbf1",
|
|
163
|
+
"primary/200": "#99f6e4",
|
|
164
|
+
"primary/300": "#5eead4",
|
|
165
|
+
"primary/400": "#2dd4bf",
|
|
166
|
+
"primary/500": "#14b8a6",
|
|
167
|
+
"primary/600": "#0d9488",
|
|
168
|
+
"primary/700": "#0c5d56",
|
|
169
|
+
"primary/800": "#114240",
|
|
170
|
+
"primary/900": "#032726",
|
|
171
|
+
"primary/950": "#021716",
|
|
172
|
+
// Secondary (Figma → theme.colors.secondary) — often gray
|
|
173
|
+
"secondary/50": "#fafafa",
|
|
174
|
+
"secondary/100": "#f4f4f5",
|
|
175
|
+
"secondary/200": "#e4e4e7",
|
|
176
|
+
"secondary/300": "#d4d4d8",
|
|
177
|
+
"secondary/400": "#a1a1aa",
|
|
178
|
+
"secondary/500": "#71717a",
|
|
179
|
+
"secondary/600": "#52525b",
|
|
180
|
+
"secondary/700": "#3f3f46",
|
|
181
|
+
"secondary/800": "#27272a",
|
|
182
|
+
"secondary/900": "#18181b",
|
|
183
|
+
"secondary/950": "#111111",
|
|
184
|
+
// Semantic: success (Figma → theme.colors.success), green
|
|
185
|
+
"success/50": "#f0fdf4",
|
|
186
|
+
"success/100": "#dcfce7",
|
|
187
|
+
"success/200": "#bbf7d0",
|
|
188
|
+
"success/300": "#86efac",
|
|
189
|
+
"success/400": "#4ade80",
|
|
190
|
+
"success/500": "#22c55e",
|
|
191
|
+
"success/600": "#16a34a",
|
|
192
|
+
"success/700": "#116932",
|
|
193
|
+
"success/800": "#124a28",
|
|
194
|
+
"success/900": "#042713",
|
|
195
|
+
"success/950": "#03190c",
|
|
196
|
+
// Semantic: error (Figma → theme.colors.error), red
|
|
197
|
+
"error/50": "#fef2f2",
|
|
198
|
+
"error/100": "#fee2e2",
|
|
199
|
+
"error/200": "#fecaca",
|
|
200
|
+
"error/300": "#fca5a5",
|
|
201
|
+
"error/400": "#f87171",
|
|
202
|
+
"error/500": "#ef4444",
|
|
203
|
+
"error/600": "#dc2626",
|
|
204
|
+
"error/700": "#991919",
|
|
205
|
+
"error/800": "#511111",
|
|
206
|
+
"error/900": "#300c0c",
|
|
207
|
+
"error/950": "#1f0808",
|
|
208
|
+
// Semantic: warning (Figma → theme.colors.warning), yellow
|
|
209
|
+
"warning/50": "#fefce8",
|
|
210
|
+
"warning/100": "#fef9c3",
|
|
211
|
+
"warning/200": "#fef08a",
|
|
212
|
+
"warning/300": "#fde047",
|
|
213
|
+
"warning/400": "#facc15",
|
|
214
|
+
"warning/500": "#eab308",
|
|
215
|
+
"warning/600": "#ca8a04",
|
|
216
|
+
"warning/700": "#845209",
|
|
217
|
+
"warning/800": "#713f12",
|
|
218
|
+
"warning/900": "#422006",
|
|
219
|
+
"warning/950": "#281304",
|
|
220
|
+
// Size & spacing (Figma → theme.space) — from selected Figma node
|
|
221
|
+
"Size/0_5": "2",
|
|
222
|
+
"Size/1": "4",
|
|
223
|
+
"Size/1_5": "6",
|
|
224
|
+
"Size/2": "8",
|
|
225
|
+
"Size/2_5": "10",
|
|
226
|
+
"Size/3": "12",
|
|
227
|
+
"Size/3_5": "14",
|
|
228
|
+
"Size/4": "16",
|
|
229
|
+
"Size/4_5": "18",
|
|
230
|
+
"Size/5": "20",
|
|
231
|
+
"Size/6": "24",
|
|
232
|
+
"Size/7": "28",
|
|
233
|
+
"Size/8": "32",
|
|
234
|
+
"Size/9": "36",
|
|
235
|
+
"Size/10": "40",
|
|
236
|
+
"Size/11": "44",
|
|
237
|
+
"Size/12": "48",
|
|
238
|
+
"Size/14": "56",
|
|
239
|
+
"Size/16": "64",
|
|
240
|
+
"Size/20": "80",
|
|
241
|
+
"Size/24": "96",
|
|
242
|
+
"Size/28": "112",
|
|
243
|
+
"Size/32": "128",
|
|
244
|
+
"Size/36": "144",
|
|
245
|
+
"Size/40": "160",
|
|
246
|
+
"Size/44": "176",
|
|
247
|
+
"Size/48": "192",
|
|
248
|
+
"Size/52": "208",
|
|
249
|
+
"Size/56": "224",
|
|
250
|
+
"Size/60": "240",
|
|
251
|
+
"Size/72": "288",
|
|
252
|
+
"Size/80": "320",
|
|
253
|
+
"Size/96": "384",
|
|
254
|
+
"Large Sizes/2xs": "256",
|
|
255
|
+
"Spacing/1": "4",
|
|
256
|
+
"Spacing/1_5": "6",
|
|
257
|
+
"Spacing/2": "8",
|
|
258
|
+
"Spacing/3": "12",
|
|
259
|
+
"Spacing/6": "24",
|
|
260
|
+
"Spacing/7": "28",
|
|
261
|
+
"Spacing/10": "40",
|
|
262
|
+
// Breakpoints (Figma → theme.breakpoints) — from get_variable_defs on layout/variables
|
|
263
|
+
"Breakpoint/sm": "480",
|
|
264
|
+
"Breakpoint/md": "768",
|
|
265
|
+
"Breakpoint/lg": "1024",
|
|
266
|
+
"Breakpoint/xl": "1280",
|
|
267
|
+
"Breakpoint/2xl": "1536",
|
|
268
|
+
// Radii (Figma → theme.radii) — from selected Figma node
|
|
269
|
+
"Radii/2xs": "1",
|
|
270
|
+
"Radii/xs": "2",
|
|
271
|
+
"Radii/sm": "4",
|
|
272
|
+
"Radii/md": "6",
|
|
273
|
+
"Radii/lg": "8",
|
|
274
|
+
"Radii/xl": "12",
|
|
275
|
+
"Radii/2xl": "16",
|
|
276
|
+
"Radii/Global_tokens/2xl": "16",
|
|
277
|
+
"Radii/Global_tokens/lg": "8",
|
|
278
|
+
"Radii/3xl": "24",
|
|
279
|
+
"Radii/4xl": "32",
|
|
280
|
+
"Radii/full": "9999",
|
|
281
|
+
"Radii/Semantic_tokens/l1": "2",
|
|
282
|
+
"Radii/Semantic_tokens/l2": "4",
|
|
283
|
+
// Typography (Figma → theme.fonts, fontSizes, fontWeights) — from selected Figma node
|
|
284
|
+
"fonts/body": "Inter",
|
|
285
|
+
"fontSizes/xs": "12",
|
|
286
|
+
"fontSizes/sm": "14",
|
|
287
|
+
"fontSizes/md": "16",
|
|
288
|
+
"fontSizes/lg": "18",
|
|
289
|
+
"fontSizes/xl": "20",
|
|
290
|
+
"fontSizes/2xl": "24",
|
|
291
|
+
"fontSizes/3xl": "30",
|
|
292
|
+
"fontSizes/4xl": "36",
|
|
293
|
+
"fontSizes/5xl": "48",
|
|
294
|
+
"fontSizes/6xl": "60",
|
|
295
|
+
"fontSizes/7xl": "72",
|
|
296
|
+
"fontWeights/normal": "400",
|
|
297
|
+
"fontWeights/medium": "500",
|
|
298
|
+
// Composite typography (Figma → use for lineHeight/letterSpacing) — from get_variable_defs
|
|
299
|
+
"xs/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/xs, weight: fontWeights/normal, lineHeight: 16, letterSpacing: 0)',
|
|
300
|
+
"sm/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/sm, weight: fontWeights/normal, lineHeight: 20, letterSpacing: 0)',
|
|
301
|
+
"md/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/md, weight: fontWeights/normal, lineHeight: 24, letterSpacing: 0)',
|
|
302
|
+
"lg/font-medium": 'Font(family: "fonts/body", style: Medium, size: fontSizes/lg, weight: fontWeights/medium, lineHeight: 28, letterSpacing: 0)',
|
|
303
|
+
"xl/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/xl, weight: fontWeights/normal, lineHeight: 30, letterSpacing: 0)',
|
|
304
|
+
"2xl/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/2xl, weight: fontWeights/normal, lineHeight: 32, letterSpacing: 0)',
|
|
305
|
+
"3xl/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/3xl, weight: fontWeights/normal, lineHeight: 38, letterSpacing: 0)',
|
|
306
|
+
"4xl/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/4xl, weight: fontWeights/normal, lineHeight: 44, letterSpacing: -0.4000000059604645)',
|
|
307
|
+
"5xl/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/5xl, weight: fontWeights/normal, lineHeight: 60, letterSpacing: -0.4000000059604645)',
|
|
308
|
+
"6xl/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/6xl, weight: fontWeights/normal, lineHeight: 72, letterSpacing: -0.4000000059604645)',
|
|
309
|
+
"7xl/font-normal": 'Font(family: "fonts/body", style: Regular, size: fontSizes/7xl, weight: fontWeights/normal, lineHeight: 92, letterSpacing: -0.4000000059604645)',
|
|
310
|
+
// Effects (Figma → theme.shadows, theme.blur) — from get_variable_defs on effects collection
|
|
311
|
+
"Shadows/Shadows light/xs": "Effect(type: DROP_SHADOW, color: #18181B1A, offset: (0, 1), radius: 2, spread: 0); Effect(type: DROP_SHADOW, color: #18181B33, offset: (0, 0), radius: 1, spread: 0)",
|
|
312
|
+
"Shadows/light/sm": "Effect(type: DROP_SHADOW, color: #0000001a, offset: (0, 1), radius: 2, spread: 0)",
|
|
313
|
+
"Shadows/light/md": "Effect(type: DROP_SHADOW, color: #0000001a, offset: (0, 2), radius: 4, spread: 0); Effect(type: DROP_SHADOW, color: #0000000f, offset: (0, 4), radius: 8, spread: 0)",
|
|
314
|
+
"Shadows/light/lg": "Effect(type: DROP_SHADOW, color: #0000001a, offset: (0, 4), radius: 8, spread: 0); Effect(type: DROP_SHADOW, color: #00000014, offset: (0, 12), radius: 24, spread: 0)",
|
|
315
|
+
"Shadows/dark/sm": "Effect(type: DROP_SHADOW, color: #00000033, offset: (0, 1), radius: 2, spread: 0)",
|
|
316
|
+
"Shadows/dark/md": "Effect(type: DROP_SHADOW, color: #00000033, offset: (0, 2), radius: 4, spread: 0)",
|
|
317
|
+
"Shadows/dark/lg": "Effect(type: DROP_SHADOW, color: #00000029, offset: (0, 8), radius: 24, spread: 0)",
|
|
318
|
+
"Blurs/sm": "Effect(type: LAYER_BLUR, radius: 4)",
|
|
319
|
+
"Blurs/md": "Effect(type: LAYER_BLUR, radius: 8)",
|
|
320
|
+
"Blurs/lg": "Effect(type: LAYER_BLUR, radius: 16)",
|
|
321
|
+
"Blurs/xl": "Effect(type: LAYER_BLUR, radius: 24)",
|
|
322
|
+
"Blurs/2xl": "Effect(type: LAYER_BLUR, radius: 40)",
|
|
323
|
+
"Blurs/3xl": "Effect(type: LAYER_BLUR, radius: 64)"
|
|
324
|
+
};
|
|
325
|
+
var figmaDarkVariableDefs = {
|
|
326
|
+
"text/fg": "#fafafa",
|
|
327
|
+
"text/fg_muted": "#a1a1aa",
|
|
328
|
+
"text/fg_subtle": "#71717a",
|
|
329
|
+
"text/fg_inverted": "#000000",
|
|
330
|
+
"text/fg_error": "#f87171",
|
|
331
|
+
"text/fg_warning": "#fde047",
|
|
332
|
+
"text/fg_success": "#86efac",
|
|
333
|
+
"text/fg_info": "#a3cfff",
|
|
334
|
+
"bg/default": "#000000",
|
|
335
|
+
"bg/muted": "#18181b",
|
|
336
|
+
"bg/subtle": "#111111",
|
|
337
|
+
"bg/emphasized": "#27272a",
|
|
338
|
+
"bg/inverted": "#ffffff",
|
|
339
|
+
"bg/panel": "#111111",
|
|
340
|
+
"bg/error": "#1f0808",
|
|
341
|
+
"bg/warning": "#220a04",
|
|
342
|
+
"bg/success": "#03190c",
|
|
343
|
+
"bg/info": "#0c142e",
|
|
344
|
+
"border/default": "#27272a",
|
|
345
|
+
"action-bar/bg": "#18181b",
|
|
346
|
+
"action-bar/border": "#27272a",
|
|
347
|
+
"action-bar/fg": "#fafafa",
|
|
348
|
+
"border/subtle": "#111111",
|
|
349
|
+
"border/muted": "#18181b",
|
|
350
|
+
"border/emphasized": "#3f3f46",
|
|
351
|
+
"border/inverted": "#e4e4e7",
|
|
352
|
+
"border/error": "#f87171",
|
|
353
|
+
"border/warning": "#fb923c",
|
|
354
|
+
"border/success": "#4ade80",
|
|
355
|
+
"border/info": "#60a5fa",
|
|
356
|
+
"gray/contrast": "#000000",
|
|
357
|
+
"gray/fg": "#e4e4e7",
|
|
358
|
+
"gray/subtle": "#18181b",
|
|
359
|
+
"gray/muted": "#27272a",
|
|
360
|
+
"gray/emphasized": "#3f3f46",
|
|
361
|
+
"gray/solid": "#ffffff",
|
|
362
|
+
"gray/focusRing": "#a1a1aa",
|
|
363
|
+
"red/fg": "#fca5a5",
|
|
364
|
+
"red/subtle": "#300c0c",
|
|
365
|
+
"red/muted": "#511111",
|
|
366
|
+
"red/emphasized": "#991919",
|
|
367
|
+
"red/solid": "#dc2626",
|
|
368
|
+
"red/focusRing": "#f87171",
|
|
369
|
+
"pink/fg": "#f9a8d4",
|
|
370
|
+
"pink/subtle": "#45061f",
|
|
371
|
+
"pink/muted": "#6d0e34",
|
|
372
|
+
"pink/emphasized": "#a41752",
|
|
373
|
+
"pink/solid": "#db2777",
|
|
374
|
+
"pink/focusRing": "#f472b6",
|
|
375
|
+
"purple/contrast": "#ffffff",
|
|
376
|
+
"purple/fg": "#d8b4fe",
|
|
377
|
+
"purple/subtle": "#2f0553",
|
|
378
|
+
"purple/muted": "#4a1772",
|
|
379
|
+
"purple/emphasized": "#641ba3",
|
|
380
|
+
"purple/solid": "#9333ea",
|
|
381
|
+
"purple/focusRing": "#c084fc",
|
|
382
|
+
"cyan/fg": "#67e8f9",
|
|
383
|
+
"cyan/subtle": "#072a38",
|
|
384
|
+
"cyan/muted": "#134152",
|
|
385
|
+
"cyan/emphasized": "#0c5c72",
|
|
386
|
+
"cyan/solid": "#0891b2",
|
|
387
|
+
"cyan/focusRing": "#22d3ee",
|
|
388
|
+
"blue/fg": "#a3cfff",
|
|
389
|
+
"blue/subtle": "#14204a",
|
|
390
|
+
"blue/muted": "#1a3478",
|
|
391
|
+
"blue/emphasized": "#173da6",
|
|
392
|
+
"blue/solid": "#2563eb",
|
|
393
|
+
"blue/focusRing": "#60a5fa",
|
|
394
|
+
"teal/fg": "#5eead4",
|
|
395
|
+
"teal/subtle": "#032726",
|
|
396
|
+
"teal/muted": "#114240",
|
|
397
|
+
"teal/emphasized": "#0c5d56",
|
|
398
|
+
"teal/solid": "#b81417",
|
|
399
|
+
"teal/focusRing": "#2dd4bf",
|
|
400
|
+
"green/fg": "#86efac",
|
|
401
|
+
"green/subtle": "#042713",
|
|
402
|
+
"green/muted": "#124a28",
|
|
403
|
+
"green/emphasized": "#116932",
|
|
404
|
+
"green/solid": "#16a34a",
|
|
405
|
+
"green/focusRing": "#4ade80",
|
|
406
|
+
"yellow/contrast": "#000000",
|
|
407
|
+
"yellow/fg": "#fde047",
|
|
408
|
+
"yellow/subtle": "#422006",
|
|
409
|
+
"yellow/muted": "#713f12",
|
|
410
|
+
"yellow/emphasized": "#845209",
|
|
411
|
+
"yellow/solid": "#fde047",
|
|
412
|
+
"yellow/focusRing": "#facc15",
|
|
413
|
+
"orange/fg": "#fdba74",
|
|
414
|
+
"orange/subtle": "#3b1106",
|
|
415
|
+
"orange/muted": "#6c2710",
|
|
416
|
+
"orange/emphasized": "#92310a",
|
|
417
|
+
"orange/solid": "#eab308",
|
|
418
|
+
"orange/focusRing": "#fb923c"
|
|
419
|
+
};
|
|
420
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
421
|
+
0 && (module.exports = {
|
|
422
|
+
figmaDarkVariableDefs,
|
|
423
|
+
figmaVariableDefs
|
|
424
|
+
});
|
|
425
|
+
//# sourceMappingURL=tokens.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts","../../../vendor/chakra-design-system-demo/src/theme/figma-tokens.ts"],"sourcesContent":["export * from \"../../../vendor/chakra-design-system-demo/src/theme/figma-tokens\";\n","/**\n * Figma design tokens — source for Chakra theme styles.\n * From Figma MCP get_variable_defs. Mapped to design system via figma-to-chakra → theme.\n *\n * Token → design system usage:\n * - colors (gray, red, teal, etc.) → Button, Badge, Alert, Card, Input, Link, Text, Heading\n * - figma.fg, figma.fg_muted, figma.default, figma.borderDefault → semantic text/background/border\n * - space → Button padding (px, py), Card/Container padding, Stack/Flex gap\n * - radii → Button, Card, Input, Badge borderRadius\n * - fonts, fontSizes, fontWeights → Text, Heading, Input, Link typography\n * - Shadows/*, Blurs/* → theme.shadows, theme.blur (box-shadow, filter: blur())\n */\nimport type { FigmaVariableDefs } from \"./figma-to-chakra\";\n\n/** From Figma MCP get_variable_defs. Merged: latest fetch + kept spacing/typography. */\nexport const figmaVariableDefs: FigmaVariableDefs = {\n // Semantic / UI (Figma → theme.colors.figma) — from selected Figma node\n \"text/fg\": \"#000000\",\n \"text/fg_muted\": \"#52525b\",\n \"text/fg_subtle\": \"#a1a1aa\",\n \"bg/default\": \"#ffffff\",\n \"bg/muted\": \"#f4f4f5\",\n \"bg/panel\": \"#ffffff\",\n \"border/default\": \"#e4e4e7\",\n\n // Action bar (Figma → theme.colors.figma.actionBar*)\n \"action-bar/bg\": \"#f4f4f5\",\n \"action-bar/border\": \"#e4e4e7\",\n \"action-bar/fg\": \"#000000\",\n\n // Semantic color tokens (Figma → theme.colors.*.subtle / .muted)\n \"red/subtle\": \"#fee2e2\",\n \"blue/muted\": \"#bfdbfe\",\n\n // Gray scale (Figma → theme.colors.gray)\n \"gray/50\": \"#fafafa\",\n \"gray/100\": \"#f4f4f5\",\n \"gray/200\": \"#E2E8F0\",\n \"gray/300\": \"#d4d4d8\",\n \"gray/400\": \"#a1a1aa\",\n \"gray/500\": \"#71717a\",\n \"gray/600\": \"#52525b\",\n \"gray/700\": \"#3f3f46\",\n \"gray/800\": \"#27272a\",\n \"gray/900\": \"#18181b\",\n \"gray/950\": \"#111111\",\n\n // Red, Pink, Purple, Cyan, Blue, Teal, Green, Yellow, Orange (Figma → theme.colors.*)\n \"red/50\": \"#fef2f2\",\n \"red/100\": \"#fee2e2\",\n \"red/200\": \"#fecaca\",\n \"red/300\": \"#fca5a5\",\n \"red/400\": \"#f87171\",\n \"red/500\": \"#ef4444\",\n \"red/600\": \"#dc2626\",\n \"red/700\": \"#991919\",\n \"red/800\": \"#511111\",\n \"red/900\": \"#300c0c\",\n \"red/950\": \"#1f0808\",\n \"pink/50\": \"#fdf2f8\",\n \"pink/100\": \"#fce7f3\",\n \"pink/200\": \"#fbcfe8\",\n \"pink/300\": \"#f9a8d4\",\n \"pink/400\": \"#f472b6\",\n \"pink/500\": \"#ec4899\",\n \"pink/600\": \"#db2777\",\n \"pink/700\": \"#a41752\",\n \"pink/800\": \"#6d0e34\",\n \"pink/900\": \"#45061f\",\n \"pink/950\": \"#2c0514\",\n \"purple/50\": \"#faf5ff\",\n \"purple/100\": \"#f3e8ff\",\n \"purple/200\": \"#e9d5ff\",\n \"purple/300\": \"#d8b4fe\",\n \"purple/400\": \"#c084fc\",\n \"purple/500\": \"#a855f7\",\n \"purple/600\": \"#9333ea\",\n \"purple/700\": \"#641ba3\",\n \"purple/800\": \"#4a1772\",\n \"purple/900\": \"#2f0553\",\n \"purple/950\": \"#1a032e\",\n \"cyan/50\": \"#ecfeff\",\n \"cyan/100\": \"#cffafe\",\n \"cyan/200\": \"#a5f3fc\",\n \"cyan/300\": \"#67e8f9\",\n \"cyan/400\": \"#22d3ee\",\n \"cyan/500\": \"#06b6d4\",\n \"cyan/600\": \"#0891b2\",\n \"cyan/700\": \"#0c5c72\",\n \"cyan/800\": \"#134152\",\n \"cyan/900\": \"#072a38\",\n \"cyan/950\": \"#051b24\",\n \"blue/50\": \"#eff6ff\",\n \"blue/100\": \"#dbeafe\",\n \"blue/200\": \"#bfdbfe\",\n \"blue/300\": \"#a3cfff\",\n \"blue/400\": \"#60a5fa\",\n \"blue/500\": \"#3774fa\",\n \"blue/600\": \"#2563eb\",\n \"blue/700\": \"#173da6\",\n \"blue/contrast\": \"#ffffff\",\n \"blue/solid\": \"#2563eb\",\n \"blue/800\": \"#1a3478\",\n \"blue/900\": \"#14204a\",\n \"blue/950\": \"#0c142e\",\n \"teal/50\": \"#f0fdfa\",\n \"teal/100\": \"#ccfbf1\",\n \"teal/200\": \"#99f6e4\",\n \"teal/300\": \"#5eead4\",\n \"teal/400\": \"#2dd4bf\",\n \"teal/500\": \"#14b8a6\",\n \"teal/600\": \"#0d9488\",\n \"teal/700\": \"#0c5d56\",\n \"teal/800\": \"#114240\",\n \"teal/900\": \"#032726\",\n \"teal/950\": \"#021716\",\n \"teal/contrast\": \"#ffffff\",\n \"green/50\": \"#f0fdf4\",\n \"green/100\": \"#dcfce7\",\n \"green/200\": \"#bbf7d0\",\n \"green/300\": \"#86efac\",\n \"green/400\": \"#4ade80\",\n \"green/500\": \"#22c55e\",\n \"green/600\": \"#16a34a\",\n \"green/700\": \"#116932\",\n \"green/800\": \"#124a28\",\n \"green/900\": \"#042713\",\n \"green/950\": \"#03190c\",\n \"yellow/50\": \"#fefce8\",\n \"yellow/100\": \"#fef9c3\",\n \"yellow/200\": \"#fef08a\",\n \"yellow/300\": \"#fde047\",\n \"yellow/400\": \"#facc15\",\n \"yellow/500\": \"#eab308\",\n \"yellow/600\": \"#ca8a04\",\n \"yellow/700\": \"#845209\",\n \"yellow/800\": \"#713f12\",\n \"yellow/900\": \"#422006\",\n \"yellow/950\": \"#281304\",\n \"orange/50\": \"#fff7ed\",\n \"orange/100\": \"#ffedd5\",\n \"orange/200\": \"#fed7aa\",\n \"orange/300\": \"#fdba74\",\n \"orange/400\": \"#fb923c\",\n \"orange/500\": \"#f97316\",\n \"orange/600\": \"#ea580c\",\n \"orange/700\": \"#92310a\",\n \"orange/800\": \"#6c2710\",\n \"orange/900\": \"#3b1106\",\n \"orange/950\": \"#220a04\",\n\n // Primary (Figma → theme.colors.primary) — often maps to brand/teal\n \"primary/50\": \"#f0fdfa\",\n \"primary/100\": \"#ccfbf1\",\n \"primary/200\": \"#99f6e4\",\n \"primary/300\": \"#5eead4\",\n \"primary/400\": \"#2dd4bf\",\n \"primary/500\": \"#14b8a6\",\n \"primary/600\": \"#0d9488\",\n \"primary/700\": \"#0c5d56\",\n \"primary/800\": \"#114240\",\n \"primary/900\": \"#032726\",\n \"primary/950\": \"#021716\",\n\n // Secondary (Figma → theme.colors.secondary) — often gray\n \"secondary/50\": \"#fafafa\",\n \"secondary/100\": \"#f4f4f5\",\n \"secondary/200\": \"#e4e4e7\",\n \"secondary/300\": \"#d4d4d8\",\n \"secondary/400\": \"#a1a1aa\",\n \"secondary/500\": \"#71717a\",\n \"secondary/600\": \"#52525b\",\n \"secondary/700\": \"#3f3f46\",\n \"secondary/800\": \"#27272a\",\n \"secondary/900\": \"#18181b\",\n \"secondary/950\": \"#111111\",\n\n // Semantic: success (Figma → theme.colors.success), green\n \"success/50\": \"#f0fdf4\",\n \"success/100\": \"#dcfce7\",\n \"success/200\": \"#bbf7d0\",\n \"success/300\": \"#86efac\",\n \"success/400\": \"#4ade80\",\n \"success/500\": \"#22c55e\",\n \"success/600\": \"#16a34a\",\n \"success/700\": \"#116932\",\n \"success/800\": \"#124a28\",\n \"success/900\": \"#042713\",\n \"success/950\": \"#03190c\",\n\n // Semantic: error (Figma → theme.colors.error), red\n \"error/50\": \"#fef2f2\",\n \"error/100\": \"#fee2e2\",\n \"error/200\": \"#fecaca\",\n \"error/300\": \"#fca5a5\",\n \"error/400\": \"#f87171\",\n \"error/500\": \"#ef4444\",\n \"error/600\": \"#dc2626\",\n \"error/700\": \"#991919\",\n \"error/800\": \"#511111\",\n \"error/900\": \"#300c0c\",\n \"error/950\": \"#1f0808\",\n\n // Semantic: warning (Figma → theme.colors.warning), yellow\n \"warning/50\": \"#fefce8\",\n \"warning/100\": \"#fef9c3\",\n \"warning/200\": \"#fef08a\",\n \"warning/300\": \"#fde047\",\n \"warning/400\": \"#facc15\",\n \"warning/500\": \"#eab308\",\n \"warning/600\": \"#ca8a04\",\n \"warning/700\": \"#845209\",\n \"warning/800\": \"#713f12\",\n \"warning/900\": \"#422006\",\n \"warning/950\": \"#281304\",\n\n // Size & spacing (Figma → theme.space) — from selected Figma node\n \"Size/0_5\": \"2\",\n \"Size/1\": \"4\",\n \"Size/1_5\": \"6\",\n \"Size/2\": \"8\",\n \"Size/2_5\": \"10\",\n \"Size/3\": \"12\",\n \"Size/3_5\": \"14\",\n \"Size/4\": \"16\",\n \"Size/4_5\": \"18\",\n \"Size/5\": \"20\",\n \"Size/6\": \"24\",\n \"Size/7\": \"28\",\n \"Size/8\": \"32\",\n \"Size/9\": \"36\",\n \"Size/10\": \"40\",\n \"Size/11\": \"44\",\n \"Size/12\": \"48\",\n \"Size/14\": \"56\",\n \"Size/16\": \"64\",\n \"Size/20\": \"80\",\n \"Size/24\": \"96\",\n \"Size/28\": \"112\",\n \"Size/32\": \"128\",\n \"Size/36\": \"144\",\n \"Size/40\": \"160\",\n \"Size/44\": \"176\",\n \"Size/48\": \"192\",\n \"Size/52\": \"208\",\n \"Size/56\": \"224\",\n \"Size/60\": \"240\",\n \"Size/72\": \"288\",\n \"Size/80\": \"320\",\n \"Size/96\": \"384\",\n \"Large Sizes/2xs\": \"256\",\n \"Spacing/1\": \"4\",\n \"Spacing/1_5\": \"6\",\n \"Spacing/2\": \"8\",\n \"Spacing/3\": \"12\",\n \"Spacing/6\": \"24\",\n \"Spacing/7\": \"28\",\n \"Spacing/10\": \"40\",\n\n // Breakpoints (Figma → theme.breakpoints) — from get_variable_defs on layout/variables\n \"Breakpoint/sm\": \"480\",\n \"Breakpoint/md\": \"768\",\n \"Breakpoint/lg\": \"1024\",\n \"Breakpoint/xl\": \"1280\",\n \"Breakpoint/2xl\": \"1536\",\n\n // Radii (Figma → theme.radii) — from selected Figma node\n \"Radii/2xs\": \"1\",\n \"Radii/xs\": \"2\",\n \"Radii/sm\": \"4\",\n \"Radii/md\": \"6\",\n \"Radii/lg\": \"8\",\n \"Radii/xl\": \"12\",\n \"Radii/2xl\": \"16\",\n \"Radii/Global_tokens/2xl\": \"16\",\n \"Radii/Global_tokens/lg\": \"8\",\n \"Radii/3xl\": \"24\",\n \"Radii/4xl\": \"32\",\n \"Radii/full\": \"9999\",\n \"Radii/Semantic_tokens/l1\": \"2\",\n \"Radii/Semantic_tokens/l2\": \"4\",\n\n // Typography (Figma → theme.fonts, fontSizes, fontWeights) — from selected Figma node\n \"fonts/body\": \"Inter\",\n \"fontSizes/xs\": \"12\",\n \"fontSizes/sm\": \"14\",\n \"fontSizes/md\": \"16\",\n \"fontSizes/lg\": \"18\",\n \"fontSizes/xl\": \"20\",\n \"fontSizes/2xl\": \"24\",\n \"fontSizes/3xl\": \"30\",\n \"fontSizes/4xl\": \"36\",\n \"fontSizes/5xl\": \"48\",\n \"fontSizes/6xl\": \"60\",\n \"fontSizes/7xl\": \"72\",\n \"fontWeights/normal\": \"400\",\n \"fontWeights/medium\": \"500\",\n // Composite typography (Figma → use for lineHeight/letterSpacing) — from get_variable_defs\n \"xs/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/xs, weight: fontWeights/normal, lineHeight: 16, letterSpacing: 0)',\n \"sm/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/sm, weight: fontWeights/normal, lineHeight: 20, letterSpacing: 0)',\n \"md/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/md, weight: fontWeights/normal, lineHeight: 24, letterSpacing: 0)',\n \"lg/font-medium\":\n 'Font(family: \"fonts/body\", style: Medium, size: fontSizes/lg, weight: fontWeights/medium, lineHeight: 28, letterSpacing: 0)',\n \"xl/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/xl, weight: fontWeights/normal, lineHeight: 30, letterSpacing: 0)',\n \"2xl/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/2xl, weight: fontWeights/normal, lineHeight: 32, letterSpacing: 0)',\n \"3xl/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/3xl, weight: fontWeights/normal, lineHeight: 38, letterSpacing: 0)',\n \"4xl/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/4xl, weight: fontWeights/normal, lineHeight: 44, letterSpacing: -0.4000000059604645)',\n \"5xl/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/5xl, weight: fontWeights/normal, lineHeight: 60, letterSpacing: -0.4000000059604645)',\n \"6xl/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/6xl, weight: fontWeights/normal, lineHeight: 72, letterSpacing: -0.4000000059604645)',\n \"7xl/font-normal\":\n 'Font(family: \"fonts/body\", style: Regular, size: fontSizes/7xl, weight: fontWeights/normal, lineHeight: 92, letterSpacing: -0.4000000059604645)',\n\n // Effects (Figma → theme.shadows, theme.blur) — from get_variable_defs on effects collection\n \"Shadows/Shadows light/xs\":\n \"Effect(type: DROP_SHADOW, color: #18181B1A, offset: (0, 1), radius: 2, spread: 0); Effect(type: DROP_SHADOW, color: #18181B33, offset: (0, 0), radius: 1, spread: 0)\",\n \"Shadows/light/sm\":\n \"Effect(type: DROP_SHADOW, color: #0000001a, offset: (0, 1), radius: 2, spread: 0)\",\n \"Shadows/light/md\":\n \"Effect(type: DROP_SHADOW, color: #0000001a, offset: (0, 2), radius: 4, spread: 0); Effect(type: DROP_SHADOW, color: #0000000f, offset: (0, 4), radius: 8, spread: 0)\",\n \"Shadows/light/lg\":\n \"Effect(type: DROP_SHADOW, color: #0000001a, offset: (0, 4), radius: 8, spread: 0); Effect(type: DROP_SHADOW, color: #00000014, offset: (0, 12), radius: 24, spread: 0)\",\n \"Shadows/dark/sm\":\n \"Effect(type: DROP_SHADOW, color: #00000033, offset: (0, 1), radius: 2, spread: 0)\",\n \"Shadows/dark/md\":\n \"Effect(type: DROP_SHADOW, color: #00000033, offset: (0, 2), radius: 4, spread: 0)\",\n \"Shadows/dark/lg\":\n \"Effect(type: DROP_SHADOW, color: #00000029, offset: (0, 8), radius: 24, spread: 0)\",\n \"Blurs/sm\": \"Effect(type: LAYER_BLUR, radius: 4)\",\n \"Blurs/md\": \"Effect(type: LAYER_BLUR, radius: 8)\",\n \"Blurs/lg\": \"Effect(type: LAYER_BLUR, radius: 16)\",\n \"Blurs/xl\": \"Effect(type: LAYER_BLUR, radius: 24)\",\n \"Blurs/2xl\": \"Effect(type: LAYER_BLUR, radius: 40)\",\n \"Blurs/3xl\": \"Effect(type: LAYER_BLUR, radius: 64)\",\n};\n\n/** Dark mode variables from Figma MCP get_variable_defs (Dark mode / variables collection). */\nexport const figmaDarkVariableDefs: FigmaVariableDefs = {\n \"text/fg\": \"#fafafa\",\n \"text/fg_muted\": \"#a1a1aa\",\n \"text/fg_subtle\": \"#71717a\",\n \"text/fg_inverted\": \"#000000\",\n \"text/fg_error\": \"#f87171\",\n \"text/fg_warning\": \"#fde047\",\n \"text/fg_success\": \"#86efac\",\n \"text/fg_info\": \"#a3cfff\",\n \"bg/default\": \"#000000\",\n \"bg/muted\": \"#18181b\",\n \"bg/subtle\": \"#111111\",\n \"bg/emphasized\": \"#27272a\",\n \"bg/inverted\": \"#ffffff\",\n \"bg/panel\": \"#111111\",\n \"bg/error\": \"#1f0808\",\n \"bg/warning\": \"#220a04\",\n \"bg/success\": \"#03190c\",\n \"bg/info\": \"#0c142e\",\n \"border/default\": \"#27272a\",\n \"action-bar/bg\": \"#18181b\",\n \"action-bar/border\": \"#27272a\",\n \"action-bar/fg\": \"#fafafa\",\n \"border/subtle\": \"#111111\",\n \"border/muted\": \"#18181b\",\n \"border/emphasized\": \"#3f3f46\",\n \"border/inverted\": \"#e4e4e7\",\n \"border/error\": \"#f87171\",\n \"border/warning\": \"#fb923c\",\n \"border/success\": \"#4ade80\",\n \"border/info\": \"#60a5fa\",\n \"gray/contrast\": \"#000000\",\n \"gray/fg\": \"#e4e4e7\",\n \"gray/subtle\": \"#18181b\",\n \"gray/muted\": \"#27272a\",\n \"gray/emphasized\": \"#3f3f46\",\n \"gray/solid\": \"#ffffff\",\n \"gray/focusRing\": \"#a1a1aa\",\n \"red/fg\": \"#fca5a5\",\n \"red/subtle\": \"#300c0c\",\n \"red/muted\": \"#511111\",\n \"red/emphasized\": \"#991919\",\n \"red/solid\": \"#dc2626\",\n \"red/focusRing\": \"#f87171\",\n \"pink/fg\": \"#f9a8d4\",\n \"pink/subtle\": \"#45061f\",\n \"pink/muted\": \"#6d0e34\",\n \"pink/emphasized\": \"#a41752\",\n \"pink/solid\": \"#db2777\",\n \"pink/focusRing\": \"#f472b6\",\n \"purple/contrast\": \"#ffffff\",\n \"purple/fg\": \"#d8b4fe\",\n \"purple/subtle\": \"#2f0553\",\n \"purple/muted\": \"#4a1772\",\n \"purple/emphasized\": \"#641ba3\",\n \"purple/solid\": \"#9333ea\",\n \"purple/focusRing\": \"#c084fc\",\n \"cyan/fg\": \"#67e8f9\",\n \"cyan/subtle\": \"#072a38\",\n \"cyan/muted\": \"#134152\",\n \"cyan/emphasized\": \"#0c5c72\",\n \"cyan/solid\": \"#0891b2\",\n \"cyan/focusRing\": \"#22d3ee\",\n \"blue/fg\": \"#a3cfff\",\n \"blue/subtle\": \"#14204a\",\n \"blue/muted\": \"#1a3478\",\n \"blue/emphasized\": \"#173da6\",\n \"blue/solid\": \"#2563eb\",\n \"blue/focusRing\": \"#60a5fa\",\n \"teal/fg\": \"#5eead4\",\n \"teal/subtle\": \"#032726\",\n \"teal/muted\": \"#114240\",\n \"teal/emphasized\": \"#0c5d56\",\n \"teal/solid\": \"#b81417\",\n \"teal/focusRing\": \"#2dd4bf\",\n \"green/fg\": \"#86efac\",\n \"green/subtle\": \"#042713\",\n \"green/muted\": \"#124a28\",\n \"green/emphasized\": \"#116932\",\n \"green/solid\": \"#16a34a\",\n \"green/focusRing\": \"#4ade80\",\n \"yellow/contrast\": \"#000000\",\n \"yellow/fg\": \"#fde047\",\n \"yellow/subtle\": \"#422006\",\n \"yellow/muted\": \"#713f12\",\n \"yellow/emphasized\": \"#845209\",\n \"yellow/solid\": \"#fde047\",\n \"yellow/focusRing\": \"#facc15\",\n \"orange/fg\": \"#fdba74\",\n \"orange/subtle\": \"#3b1106\",\n \"orange/muted\": \"#6c2710\",\n \"orange/emphasized\": \"#92310a\",\n \"orange/solid\": \"#eab308\",\n \"orange/focusRing\": \"#fb923c\",\n};\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Maps Figma variable definitions (from Figma MCP get_variable_defs) into
|
|
3
|
+
* Chakra UI theme overrides. Use Chakra components; styles come from Figma tokens.
|
|
4
|
+
*
|
|
5
|
+
* Figma variable defs format: { "variable/name/path": value }
|
|
6
|
+
* - Color values: "#RRGGBB" or "#RRGGBBAA"
|
|
7
|
+
* - Spacing/size values: number (px)
|
|
8
|
+
* - Naming conventions: color/*, spacing/*, radius/*, shadow/*, font/*
|
|
9
|
+
*/
|
|
10
|
+
type FigmaVariableDefs = Record<string, string | number>;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Figma design tokens — source for Chakra theme styles.
|
|
14
|
+
* From Figma MCP get_variable_defs. Mapped to design system via figma-to-chakra → theme.
|
|
15
|
+
*
|
|
16
|
+
* Token → design system usage:
|
|
17
|
+
* - colors (gray, red, teal, etc.) → Button, Badge, Alert, Card, Input, Link, Text, Heading
|
|
18
|
+
* - figma.fg, figma.fg_muted, figma.default, figma.borderDefault → semantic text/background/border
|
|
19
|
+
* - space → Button padding (px, py), Card/Container padding, Stack/Flex gap
|
|
20
|
+
* - radii → Button, Card, Input, Badge borderRadius
|
|
21
|
+
* - fonts, fontSizes, fontWeights → Text, Heading, Input, Link typography
|
|
22
|
+
* - Shadows/*, Blurs/* → theme.shadows, theme.blur (box-shadow, filter: blur())
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/** From Figma MCP get_variable_defs. Merged: latest fetch + kept spacing/typography. */
|
|
26
|
+
declare const figmaVariableDefs: FigmaVariableDefs;
|
|
27
|
+
/** Dark mode variables from Figma MCP get_variable_defs (Dark mode / variables collection). */
|
|
28
|
+
declare const figmaDarkVariableDefs: FigmaVariableDefs;
|
|
29
|
+
|
|
30
|
+
export { figmaDarkVariableDefs, figmaVariableDefs };
|
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Maps Figma variable definitions (from Figma MCP get_variable_defs) into
|
|
3
|
+
* Chakra UI theme overrides. Use Chakra components; styles come from Figma tokens.
|
|
4
|
+
*
|
|
5
|
+
* Figma variable defs format: { "variable/name/path": value }
|
|
6
|
+
* - Color values: "#RRGGBB" or "#RRGGBBAA"
|
|
7
|
+
* - Spacing/size values: number (px)
|
|
8
|
+
* - Naming conventions: color/*, spacing/*, radius/*, shadow/*, font/*
|
|
9
|
+
*/
|
|
10
|
+
type FigmaVariableDefs = Record<string, string | number>;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Figma design tokens — source for Chakra theme styles.
|
|
14
|
+
* From Figma MCP get_variable_defs. Mapped to design system via figma-to-chakra → theme.
|
|
15
|
+
*
|
|
16
|
+
* Token → design system usage:
|
|
17
|
+
* - colors (gray, red, teal, etc.) → Button, Badge, Alert, Card, Input, Link, Text, Heading
|
|
18
|
+
* - figma.fg, figma.fg_muted, figma.default, figma.borderDefault → semantic text/background/border
|
|
19
|
+
* - space → Button padding (px, py), Card/Container padding, Stack/Flex gap
|
|
20
|
+
* - radii → Button, Card, Input, Badge borderRadius
|
|
21
|
+
* - fonts, fontSizes, fontWeights → Text, Heading, Input, Link typography
|
|
22
|
+
* - Shadows/*, Blurs/* → theme.shadows, theme.blur (box-shadow, filter: blur())
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/** From Figma MCP get_variable_defs. Merged: latest fetch + kept spacing/typography. */
|
|
26
|
+
declare const figmaVariableDefs: FigmaVariableDefs;
|
|
27
|
+
/** Dark mode variables from Figma MCP get_variable_defs (Dark mode / variables collection). */
|
|
28
|
+
declare const figmaDarkVariableDefs: FigmaVariableDefs;
|
|
29
|
+
|
|
30
|
+
export { figmaDarkVariableDefs, figmaVariableDefs };
|
package/dist/tokens.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@renegademaster-droid/ds-core",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"files": ["dist"],
|
|
8
|
+
"main": "./dist/index.cjs",
|
|
9
|
+
"module": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"import": "./dist/index.js",
|
|
15
|
+
"require": "./dist/index.cjs"
|
|
16
|
+
},
|
|
17
|
+
"./tokens": {
|
|
18
|
+
"types": "./dist/tokens.d.ts",
|
|
19
|
+
"import": "./dist/tokens.js",
|
|
20
|
+
"require": "./dist/tokens.cjs"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"clean": "rimraf dist",
|
|
25
|
+
"build": "tsup",
|
|
26
|
+
"dev": "tsup --watch",
|
|
27
|
+
"prepublishOnly": "npm run clean && npm run build"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"rimraf": "^6.0.0",
|
|
31
|
+
"tsup": "^8.0.0",
|
|
32
|
+
"typescript": "^5.0.0"
|
|
33
|
+
}
|
|
34
|
+
}
|