@greensight/gts 1.0.0-alpha.17 → 1.0.0-alpha.18
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/index.cjs +18 -18
- package/index.mjs +336 -261
- package/modules/typography/typographyFromTokenManager/module.d.ts +1 -0
- package/modules/typography/typographyFromTokenManager/module.d.ts.map +1 -1
- package/modules/typography/utils.d.ts +3 -2
- package/modules/typography/utils.d.ts.map +1 -1
- package/package.json +1 -1
package/index.mjs
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
import { tsImport as
|
|
6
|
-
import { existsSync as
|
|
7
|
-
import { readFile as
|
|
8
|
-
import { resolve as
|
|
9
|
-
const
|
|
1
|
+
var ne = Object.defineProperty;
|
|
2
|
+
var se = (o, e, r) => e in o ? ne(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r;
|
|
3
|
+
var m = (o, e, r) => se(o, typeof e != "symbol" ? e + "" : e, r);
|
|
4
|
+
import k from "path";
|
|
5
|
+
import { tsImport as ae } from "ts-import";
|
|
6
|
+
import { existsSync as O } from "node:fs";
|
|
7
|
+
import { readFile as E, mkdir as ie, writeFile as le, rm as ce } from "node:fs/promises";
|
|
8
|
+
import { resolve as V } from "node:path";
|
|
9
|
+
const y = class y {
|
|
10
10
|
static resolveReadPath(e) {
|
|
11
11
|
if (!e || !e.trim())
|
|
12
12
|
throw new Error("File path must be a non-empty string");
|
|
13
|
-
return
|
|
13
|
+
return V(y.baseDir, e);
|
|
14
14
|
}
|
|
15
15
|
static resolveWritePath(e, r) {
|
|
16
|
-
const t =
|
|
16
|
+
const t = V(y.baseDir, r ?? "");
|
|
17
17
|
return {
|
|
18
18
|
targetDir: t,
|
|
19
|
-
targetPath:
|
|
19
|
+
targetPath: V(t, e)
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
static handleReadError(e, r) {
|
|
@@ -25,65 +25,65 @@ const f = class f {
|
|
|
25
25
|
);
|
|
26
26
|
}
|
|
27
27
|
static async read(e, r = "utf8") {
|
|
28
|
-
const t =
|
|
28
|
+
const t = y.resolveReadPath(e);
|
|
29
29
|
try {
|
|
30
|
-
return await
|
|
30
|
+
return await E(t, { encoding: r });
|
|
31
31
|
} catch (n) {
|
|
32
|
-
|
|
32
|
+
y.handleReadError(n, t);
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
static async readBuffer(e) {
|
|
36
|
-
const r =
|
|
36
|
+
const r = y.resolveReadPath(e);
|
|
37
37
|
try {
|
|
38
|
-
return await
|
|
38
|
+
return await E(r);
|
|
39
39
|
} catch (t) {
|
|
40
|
-
|
|
40
|
+
y.handleReadError(t, r);
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
static async readJson(e) {
|
|
44
|
-
const r =
|
|
44
|
+
const r = y.resolveReadPath(e);
|
|
45
45
|
try {
|
|
46
|
-
const t = await
|
|
46
|
+
const t = await E(r, { encoding: "utf8" });
|
|
47
47
|
try {
|
|
48
48
|
return JSON.parse(t);
|
|
49
49
|
} catch (n) {
|
|
50
50
|
throw new Error(`Failed to parse JSON from "${r}": ${n.message}`);
|
|
51
51
|
}
|
|
52
52
|
} catch (t) {
|
|
53
|
-
|
|
53
|
+
y.handleReadError(t, r);
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
static async write(e, r = "", t = {}) {
|
|
57
|
-
const { directory: n, overwrite: s = !0 } = t, { targetDir: a, targetPath:
|
|
58
|
-
if (!s &&
|
|
59
|
-
throw new Error(`File ${
|
|
60
|
-
return await
|
|
57
|
+
const { directory: n, overwrite: s = !0 } = t, { targetDir: a, targetPath: i } = y.resolveWritePath(e, n);
|
|
58
|
+
if (!s && O(i))
|
|
59
|
+
throw new Error(`File ${i} already exists`);
|
|
60
|
+
return await ie(a, { recursive: !0 }), await le(i, r, { encoding: "utf8" }), i;
|
|
61
61
|
}
|
|
62
62
|
static async writeWithExtension(e, r, t = "", n) {
|
|
63
63
|
const s = r.startsWith(".") ? r : `.${r}`, a = `${e}${s}`;
|
|
64
|
-
return
|
|
64
|
+
return y.write(a, t, n);
|
|
65
65
|
}
|
|
66
66
|
static exists(e) {
|
|
67
|
-
const r =
|
|
68
|
-
return
|
|
67
|
+
const r = y.resolveReadPath(e);
|
|
68
|
+
return O(r);
|
|
69
69
|
}
|
|
70
70
|
static async delete(e, r) {
|
|
71
|
-
const { targetPath: t } =
|
|
72
|
-
|
|
71
|
+
const { targetPath: t } = y.resolveWritePath(e, r);
|
|
72
|
+
O(t) && await ce(t, { recursive: !0, force: !0 });
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
|
-
|
|
76
|
-
let u =
|
|
77
|
-
const
|
|
75
|
+
m(y, "baseDir", process.cwd());
|
|
76
|
+
let u = y;
|
|
77
|
+
const $ = class $ {
|
|
78
78
|
static async create() {
|
|
79
|
-
if (u.exists(
|
|
79
|
+
if (u.exists($.configFileName))
|
|
80
80
|
throw new Error("The file already exists");
|
|
81
|
-
await u.write(
|
|
81
|
+
await u.write($.configFileName, "", { overwrite: !1 });
|
|
82
82
|
}
|
|
83
83
|
async load() {
|
|
84
84
|
try {
|
|
85
|
-
const e = await
|
|
86
|
-
`${
|
|
85
|
+
const e = await ae.compile(
|
|
86
|
+
`${k.resolve(process.cwd(), $.configFileName)}`
|
|
87
87
|
);
|
|
88
88
|
if (!e) throw new Error();
|
|
89
89
|
return e.default;
|
|
@@ -92,24 +92,24 @@ const b = class b {
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
|
-
|
|
96
|
-
let
|
|
97
|
-
const
|
|
95
|
+
m($, "configFileName", "gts.config.ts");
|
|
96
|
+
let j = $;
|
|
97
|
+
const ue = (o) => {
|
|
98
98
|
const e = new URLSearchParams();
|
|
99
99
|
return Object.keys(o).forEach((r) => {
|
|
100
100
|
Array.isArray(o[r]) ? o[r].forEach((t) => e.append(`${r}[]`, t)) : e.append(r, o[r]);
|
|
101
101
|
}), e;
|
|
102
|
-
},
|
|
102
|
+
}, de = (o, e = 50) => {
|
|
103
103
|
const r = [];
|
|
104
104
|
for (let t = 0; t < o.length; t += e)
|
|
105
105
|
r.push(o.slice(t, t + e));
|
|
106
106
|
return r;
|
|
107
107
|
};
|
|
108
|
-
class
|
|
108
|
+
class N {
|
|
109
109
|
constructor(e, r) {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
110
|
+
m(this, "figmaToken");
|
|
111
|
+
m(this, "fileId");
|
|
112
|
+
m(this, "onTimeMeasureHandler");
|
|
113
113
|
this.figmaToken = e, this.fileId = r;
|
|
114
114
|
}
|
|
115
115
|
setOnTimeMeasureHandler(e) {
|
|
@@ -124,29 +124,29 @@ class C {
|
|
|
124
124
|
return r;
|
|
125
125
|
}
|
|
126
126
|
async performControlledRequest(e, { params: r = {}, timeout: t = 3e4, abortController: n = new AbortController() } = {}) {
|
|
127
|
-
var
|
|
127
|
+
var b;
|
|
128
128
|
if (!this.figmaToken || !this.fileId)
|
|
129
129
|
throw new Error("Добавьте figmaToken и figmaId");
|
|
130
|
-
const s = Object.entries(r).reduce((
|
|
130
|
+
const s = Object.entries(r).reduce((T, [f, h]) => typeof h < "u" ? { ...T, [f]: h } : T, {}), a = `https://api.figma.com/v1${e}${s && Object.keys(s).length ? `?${ue(s)}` : ""}`;
|
|
131
131
|
console.log("endpoinWithParams=", a);
|
|
132
|
-
const
|
|
132
|
+
const i = setTimeout(() => n.abort(), t), l = {
|
|
133
133
|
"Content-Type": "application/json",
|
|
134
134
|
...this.figmaToken && { "X-Figma-Token": this.figmaToken }
|
|
135
135
|
}, c = {
|
|
136
136
|
method: "GET",
|
|
137
|
-
headers:
|
|
137
|
+
headers: l,
|
|
138
138
|
signal: n.signal
|
|
139
|
-
}, d = performance.now(),
|
|
140
|
-
clearTimeout(
|
|
141
|
-
const
|
|
142
|
-
return (
|
|
139
|
+
}, d = performance.now(), p = await fetch(`${a}`, c);
|
|
140
|
+
clearTimeout(i);
|
|
141
|
+
const g = performance.now() - d;
|
|
142
|
+
return (b = this.onTimeMeasureHandler) == null || b.call(this, a, l, g), p;
|
|
143
143
|
}
|
|
144
144
|
async request(e, r) {
|
|
145
145
|
var n;
|
|
146
146
|
const t = await this.performControlledRequest(e, {
|
|
147
147
|
...r
|
|
148
148
|
});
|
|
149
|
-
return (n = t.headers.get("content-type")) != null && n.includes("application/json") ?
|
|
149
|
+
return (n = t.headers.get("content-type")) != null && n.includes("application/json") ? N.returnJSON(t) : t;
|
|
150
150
|
}
|
|
151
151
|
async getComponents() {
|
|
152
152
|
return this.request(`/files/${this.fileId}/components`);
|
|
@@ -155,7 +155,7 @@ class C {
|
|
|
155
155
|
return this.request(`/files/${this.fileId}/styles`);
|
|
156
156
|
}
|
|
157
157
|
async getNodes(e) {
|
|
158
|
-
const r =
|
|
158
|
+
const r = de(e).map(
|
|
159
159
|
(s) => this.request(`/files/${this.fileId}/nodes`, { params: { ids: s.join(",") } })
|
|
160
160
|
), t = await Promise.all(r);
|
|
161
161
|
return {
|
|
@@ -164,7 +164,7 @@ class C {
|
|
|
164
164
|
};
|
|
165
165
|
}
|
|
166
166
|
}
|
|
167
|
-
const
|
|
167
|
+
const fe = (o, e) => {
|
|
168
168
|
const r = Array.isArray(e) ? e : e.split(".");
|
|
169
169
|
let t = o;
|
|
170
170
|
for (const n of r) {
|
|
@@ -172,15 +172,15 @@ const re = (o, e) => {
|
|
|
172
172
|
t = t[n];
|
|
173
173
|
}
|
|
174
174
|
return t;
|
|
175
|
-
},
|
|
175
|
+
}, H = (o, e) => {
|
|
176
176
|
if (!e || typeof e != "object") return o;
|
|
177
177
|
if (!o || typeof o != "object") return e;
|
|
178
178
|
const r = { ...o };
|
|
179
179
|
for (const t in e)
|
|
180
|
-
e.hasOwnProperty(t) && (typeof e[t] == "object" && e[t] !== null && typeof r[t] == "object" && r[t] !== null ? r[t] =
|
|
180
|
+
e.hasOwnProperty(t) && (typeof e[t] == "object" && e[t] !== null && typeof r[t] == "object" && r[t] !== null ? r[t] = H(r[t], e[t]) : r[t] = e[t]);
|
|
181
181
|
return r;
|
|
182
182
|
};
|
|
183
|
-
function
|
|
183
|
+
function v(o, e) {
|
|
184
184
|
if (o === e)
|
|
185
185
|
return !0;
|
|
186
186
|
if (o == null || e == null)
|
|
@@ -195,7 +195,7 @@ function F(o, e) {
|
|
|
195
195
|
if (o.length !== e.length)
|
|
196
196
|
return !1;
|
|
197
197
|
for (let r = 0; r < o.length; r++)
|
|
198
|
-
if (!
|
|
198
|
+
if (!v(o[r], e[r]))
|
|
199
199
|
return !1;
|
|
200
200
|
return !0;
|
|
201
201
|
}
|
|
@@ -204,29 +204,29 @@ function F(o, e) {
|
|
|
204
204
|
if (r.length !== t.length)
|
|
205
205
|
return !1;
|
|
206
206
|
for (const n of r)
|
|
207
|
-
if (!t.includes(n) || !
|
|
207
|
+
if (!t.includes(n) || !v(o[n], e[n]))
|
|
208
208
|
return !1;
|
|
209
209
|
return !0;
|
|
210
210
|
}
|
|
211
211
|
return !1;
|
|
212
212
|
}
|
|
213
|
-
const
|
|
213
|
+
const B = {
|
|
214
214
|
color: {},
|
|
215
215
|
effect: {},
|
|
216
216
|
text: {},
|
|
217
217
|
grid: {}
|
|
218
218
|
};
|
|
219
|
-
class
|
|
219
|
+
class pe {
|
|
220
220
|
constructor(e) {
|
|
221
221
|
// files
|
|
222
|
-
|
|
223
|
-
|
|
222
|
+
m(this, "tokensDir");
|
|
223
|
+
m(this, "manifestPath");
|
|
224
224
|
// result data
|
|
225
|
-
|
|
226
|
-
|
|
225
|
+
m(this, "variables");
|
|
226
|
+
m(this, "styles");
|
|
227
227
|
// flags
|
|
228
|
-
|
|
229
|
-
this.tokensDir = e || "", this.manifestPath =
|
|
228
|
+
m(this, "loaded", !1);
|
|
229
|
+
this.tokensDir = e || "", this.manifestPath = k.join(this.tokensDir, "manifest.json");
|
|
230
230
|
}
|
|
231
231
|
isLoaded() {
|
|
232
232
|
return this.loaded && !!this.variables && !!this.styles;
|
|
@@ -289,16 +289,16 @@ class oe {
|
|
|
289
289
|
return Promise.all(
|
|
290
290
|
e.map(async ({ fileName: r, modeName: t, collectionName: n }) => {
|
|
291
291
|
try {
|
|
292
|
-
const s =
|
|
292
|
+
const s = k.join(this.tokensDir, r), a = await u.readJson(s);
|
|
293
293
|
return this.processTokensFile(a, t, n);
|
|
294
294
|
} catch (s) {
|
|
295
|
-
return console.warn(`Failed to load variable file: ${
|
|
295
|
+
return console.warn(`Failed to load variable file: ${k.join(this.tokensDir, r)}`, s), {};
|
|
296
296
|
}
|
|
297
297
|
})
|
|
298
298
|
);
|
|
299
299
|
}
|
|
300
300
|
mergeVariables(e) {
|
|
301
|
-
return e.reduce((r, t) =>
|
|
301
|
+
return e.reduce((r, t) => H(r, t), {});
|
|
302
302
|
}
|
|
303
303
|
/**
|
|
304
304
|
* Loads and processes all token variables from manifest collections
|
|
@@ -329,16 +329,16 @@ class oe {
|
|
|
329
329
|
return (await Promise.all(
|
|
330
330
|
e.map(async ({ styleType: t, fileName: n }) => {
|
|
331
331
|
try {
|
|
332
|
-
const s =
|
|
332
|
+
const s = k.join(this.tokensDir, n), a = await u.readJson(s);
|
|
333
333
|
return { styleType: t, styleTokens: a };
|
|
334
334
|
} catch (s) {
|
|
335
|
-
return console.warn(`Failed to load style file: ${
|
|
335
|
+
return console.warn(`Failed to load style file: ${k.join(this.tokensDir, n)}`, s), { styleType: t, styleTokens: {} };
|
|
336
336
|
}
|
|
337
337
|
})
|
|
338
338
|
)).reduce(
|
|
339
339
|
(t, n) => ({ ...t, [n.styleType]: this.getTokensFromFile(n.styleTokens, "") }),
|
|
340
340
|
{
|
|
341
|
-
...
|
|
341
|
+
...B
|
|
342
342
|
}
|
|
343
343
|
);
|
|
344
344
|
}
|
|
@@ -346,7 +346,7 @@ class oe {
|
|
|
346
346
|
* Loads and processes all style tokens from manifest
|
|
347
347
|
*/
|
|
348
348
|
async loadStyles(e) {
|
|
349
|
-
if (!e) return { ...
|
|
349
|
+
if (!e) return { ...B };
|
|
350
350
|
const r = this.createStyleFileList(e);
|
|
351
351
|
return await this.loadStyleFiles(r);
|
|
352
352
|
}
|
|
@@ -423,7 +423,7 @@ class oe {
|
|
|
423
423
|
if (!this.loaded || !this.variables)
|
|
424
424
|
throw new Error("Tokens not loaded. Call load() first.");
|
|
425
425
|
for (const t of Object.values(this.variables)) {
|
|
426
|
-
const n =
|
|
426
|
+
const n = fe(t, e);
|
|
427
427
|
if (n != null && n.value && typeof n.value == "object") {
|
|
428
428
|
if (r) return n.value[r];
|
|
429
429
|
{
|
|
@@ -434,12 +434,12 @@ class oe {
|
|
|
434
434
|
}
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
|
-
const
|
|
438
|
-
const e = await new
|
|
437
|
+
const yt = async () => {
|
|
438
|
+
const e = await new j().load();
|
|
439
439
|
if (!e)
|
|
440
440
|
throw new Error("Заполнить ошибку через нейронку");
|
|
441
|
-
const { figmaToken: r, fileId: t, modules: n, manifest: s } = e, a = new
|
|
442
|
-
s && u.exists(s) && await
|
|
441
|
+
const { figmaToken: r, fileId: t, modules: n, manifest: s } = e, a = new N(r, t), i = new pe(s);
|
|
442
|
+
s && u.exists(s) && await i.load(), await Promise.all(
|
|
443
443
|
// [
|
|
444
444
|
// colorsFromTokenManager({
|
|
445
445
|
// input: {
|
|
@@ -554,30 +554,30 @@ const rt = async () => {
|
|
|
554
554
|
// },
|
|
555
555
|
// }),
|
|
556
556
|
// ].map(module => module.executor({ figmaApiClient, tokenManagerClient }))
|
|
557
|
-
n.map((
|
|
557
|
+
n.map((l) => l.executor({ figmaApiClient: a, tokenManagerClient: i }))
|
|
558
558
|
);
|
|
559
|
-
},
|
|
560
|
-
await
|
|
561
|
-
},
|
|
559
|
+
}, ht = async () => {
|
|
560
|
+
await j.create(), console.log("\x1B[32m%s\x1B[0m", "✔️ Configuration file created gts.config.ts");
|
|
561
|
+
}, ge = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs", "xxs", "xxxs"], ye = (o) => parseInt(o.value, 10), he = (o) => o.reduce(
|
|
562
562
|
(e, r) => ({
|
|
563
563
|
...e,
|
|
564
|
-
[r.name]:
|
|
564
|
+
[r.name]: ye(r)
|
|
565
565
|
}),
|
|
566
566
|
{}
|
|
567
|
-
),
|
|
567
|
+
), me = async (o, e) => {
|
|
568
568
|
await u.delete(o, e);
|
|
569
|
-
},
|
|
569
|
+
}, be = async (o, e, r) => {
|
|
570
570
|
await u.write(o, e, { directory: r });
|
|
571
|
-
},
|
|
572
|
-
await
|
|
573
|
-
},
|
|
571
|
+
}, x = async (o, e, r) => {
|
|
572
|
+
await me(o, r), await be(o, e, r);
|
|
573
|
+
}, we = (o) => {
|
|
574
574
|
const e = o.map(({ name: r, value: t }) => ` --${r}: ${t};`);
|
|
575
575
|
return e.length ? `.breakpoint-variables {
|
|
576
576
|
${e.join(`
|
|
577
577
|
`)}
|
|
578
578
|
}
|
|
579
579
|
` : "";
|
|
580
|
-
},
|
|
580
|
+
}, ke = (o) => {
|
|
581
581
|
var t;
|
|
582
582
|
const e = o.map(({ name: n, value: s }) => ` ${n}: ${s}`), r = (t = o.at(-1)) == null ? void 0 : t.name;
|
|
583
583
|
return !e.length || !r ? "" : `$breakpointList: (
|
|
@@ -587,7 +587,7 @@ ${e.join(`,
|
|
|
587
587
|
|
|
588
588
|
$defaultBreakpoint: '${r}';
|
|
589
589
|
`;
|
|
590
|
-
},
|
|
590
|
+
}, $e = (o) => [
|
|
591
591
|
`const breakpoints = ${JSON.stringify(o, null, 4)} as const;`,
|
|
592
592
|
"",
|
|
593
593
|
"const BREAKPOINTS_NAMES = Object.keys(breakpoints);",
|
|
@@ -599,14 +599,14 @@ $defaultBreakpoint: '${r}';
|
|
|
599
599
|
"export type { BreakpointsKeysType, AllowMedia };",
|
|
600
600
|
""
|
|
601
601
|
].join(`
|
|
602
|
-
`),
|
|
603
|
-
const r =
|
|
602
|
+
`), Te = async ({ breakpointTokens: o, dir: e }) => {
|
|
603
|
+
const r = he(o), t = we(o), n = ke(o), s = $e(r);
|
|
604
604
|
await Promise.all([
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
605
|
+
x("styles.css", t, e),
|
|
606
|
+
x("styles.scss", n, e),
|
|
607
|
+
x("index.ts", s, e)
|
|
608
608
|
]);
|
|
609
|
-
},
|
|
609
|
+
}, Se = (o, e) => {
|
|
610
610
|
const r = Object.keys(o).filter((s) => !isNaN(Number(s))).sort((s, a) => Number(s) - Number(a));
|
|
611
611
|
if (r.length > e.length)
|
|
612
612
|
throw new Error(
|
|
@@ -621,7 +621,7 @@ $defaultBreakpoint: '${r}';
|
|
|
621
621
|
name: e[e.length - 1 - a] || `bp-${s}`,
|
|
622
622
|
value: s
|
|
623
623
|
}));
|
|
624
|
-
},
|
|
624
|
+
}, mt = ({
|
|
625
625
|
input: o = {},
|
|
626
626
|
output: { dir: e }
|
|
627
627
|
}) => ({
|
|
@@ -629,21 +629,21 @@ $defaultBreakpoint: '${r}';
|
|
|
629
629
|
executor: async ({ tokenManagerClient: r }) => {
|
|
630
630
|
try {
|
|
631
631
|
console.log("[breakpoints/tokenManager] Generating breakpoints from TokenManager...");
|
|
632
|
-
const { names: t =
|
|
632
|
+
const { names: t = ge } = o;
|
|
633
633
|
if (!r.isLoaded())
|
|
634
634
|
throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
|
|
635
635
|
const n = r.getStyles();
|
|
636
636
|
if (!n.grid)
|
|
637
637
|
throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
|
|
638
638
|
console.log("[breakpoints/tokenManager] Extracting breakpoints from grid styles...");
|
|
639
|
-
const s =
|
|
639
|
+
const s = Se(n.grid, t);
|
|
640
640
|
if (!s.length) {
|
|
641
641
|
console.warn("[breakpoints/tokenManager] No breakpoints found in grid styles.");
|
|
642
642
|
return;
|
|
643
643
|
}
|
|
644
644
|
console.log(
|
|
645
645
|
`[breakpoints/tokenManager] Found ${s.length} breakpoints: ${s.map((a) => a.name).join(", ")}`
|
|
646
|
-
), console.log(`[breakpoints/tokenManager] Writing files to ${e}...`), await
|
|
646
|
+
), console.log(`[breakpoints/tokenManager] Writing files to ${e}...`), await Te({
|
|
647
647
|
breakpointTokens: s,
|
|
648
648
|
dir: e
|
|
649
649
|
}), console.log("[breakpoints/tokenManager] ✅ Successfully generated breakpoint files");
|
|
@@ -652,25 +652,25 @@ $defaultBreakpoint: '${r}';
|
|
|
652
652
|
throw console.error("[breakpoints/tokenManager] ❌ Failed to generate breakpoints:", n), t instanceof Error && t.stack && console.error("[breakpoints/tokenManager] Stack trace:", t.stack), t;
|
|
653
653
|
}
|
|
654
654
|
}
|
|
655
|
-
}),
|
|
655
|
+
}), je = "styles.css", Fe = "index.ts", D = (o, e) => {
|
|
656
656
|
if (!e.length) return "";
|
|
657
657
|
const r = e.map((t) => ` ${t}`).join(`
|
|
658
658
|
`);
|
|
659
659
|
return `${o} {
|
|
660
660
|
${r}
|
|
661
661
|
}`;
|
|
662
|
-
},
|
|
662
|
+
}, Ce = (o) => `.${o.replace(/\s+/g, "-").toLowerCase()}`, U = (o) => `--cl-${o}`, Me = (o) => o.reduce(
|
|
663
663
|
(e, r) => {
|
|
664
|
-
const t =
|
|
664
|
+
const t = U(r.name);
|
|
665
665
|
return typeof r.value == "object" ? Object.entries(r.value).forEach(([n, s]) => {
|
|
666
666
|
e[n] || (e[n] = []), e[n].push(`${t}: ${s};`);
|
|
667
667
|
}) : e.root.push(`${t}: ${r.value};`), e;
|
|
668
668
|
},
|
|
669
669
|
{ root: [] }
|
|
670
|
-
),
|
|
671
|
-
const e =
|
|
670
|
+
), Oe = (o) => {
|
|
671
|
+
const e = D(".color-variables", o.root), r = Object.entries(o).reduce((t, [n, s]) => {
|
|
672
672
|
if (n === "root" || !s.length) return t;
|
|
673
|
-
const a =
|
|
673
|
+
const a = D(Ce(`${n}-color-variables`), s);
|
|
674
674
|
return a && t.push(a), t;
|
|
675
675
|
}, []).join(`
|
|
676
676
|
|
|
@@ -678,64 +678,64 @@ ${r}
|
|
|
678
678
|
return [e, r].filter(Boolean).join(`
|
|
679
679
|
|
|
680
680
|
`);
|
|
681
|
-
},
|
|
682
|
-
${o.map((t) => ` '${t.name}': 'var(${
|
|
681
|
+
}, Ee = (o) => `${`const colors = {
|
|
682
|
+
${o.map((t) => ` '${t.name}': 'var(${U(t.name)})'`).join(`,
|
|
683
683
|
`)}
|
|
684
684
|
} as const;`}
|
|
685
685
|
|
|
686
686
|
type ColorsKeysType = keyof typeof colors;
|
|
687
687
|
|
|
688
688
|
export { colors, type ColorsKeysType };
|
|
689
|
-
`,
|
|
689
|
+
`, Ve = async ({
|
|
690
690
|
tsContent: o,
|
|
691
691
|
cssContent: e,
|
|
692
692
|
dir: r
|
|
693
693
|
}) => {
|
|
694
694
|
await u.delete(r);
|
|
695
|
-
const t = u.write(
|
|
695
|
+
const t = u.write(Fe, o, { directory: r }), n = u.write(je, e, { directory: r });
|
|
696
696
|
await Promise.all([t, n]);
|
|
697
|
-
},
|
|
698
|
-
const r =
|
|
699
|
-
await
|
|
700
|
-
},
|
|
697
|
+
}, xe = async ({ colorTokens: o, dir: e }) => {
|
|
698
|
+
const r = Me(o), t = Oe(r), n = Ee(o);
|
|
699
|
+
await Ve({ tsContent: n, cssContent: t, dir: e });
|
|
700
|
+
}, C = (o) => o.reduce((e, r) => {
|
|
701
701
|
const t = Number((r.position * 100).toFixed(1));
|
|
702
702
|
return [...e, `${r.color}${t > 0 && t < 100 ? ` ${t}%` : ""}`];
|
|
703
|
-
}, []).join(", "),
|
|
704
|
-
const e =
|
|
703
|
+
}, []).join(", "), ve = (o) => {
|
|
704
|
+
const e = C(o.stops);
|
|
705
705
|
return `linear-gradient(${o.angle}deg, ${e})`;
|
|
706
|
-
},
|
|
707
|
-
const e =
|
|
706
|
+
}, Pe = (o) => `radial-gradient(circle, ${C(o.stops)})`, Ne = (o) => {
|
|
707
|
+
const e = C(o.stops);
|
|
708
708
|
return `conic-gradient(from ${o.angle}deg, ${e})`;
|
|
709
|
-
},
|
|
710
|
-
const e =
|
|
709
|
+
}, Ae = (o) => {
|
|
710
|
+
const e = C(o.stops);
|
|
711
711
|
return `linear-gradient(${o.angle}deg, ${e})`;
|
|
712
|
-
},
|
|
712
|
+
}, K = (o) => typeof o == "string" ? o : o.type === "linear" ? ve(o) : o.type === "radial" ? Pe(o) : o.type === "conic" ? Ne(o) : o.type === "diamond" ? Ae(o) : "", Q = (o, e) => Object.keys(o).reduce(
|
|
713
713
|
(r, t) => {
|
|
714
714
|
const n = o[t], s = e ? `${e}-${t}` : t;
|
|
715
715
|
if (n && typeof n == "object" && "type" in n && "value" in n) {
|
|
716
|
-
const
|
|
717
|
-
(
|
|
718
|
-
...
|
|
719
|
-
[
|
|
716
|
+
const i = Object.keys(n.value), l = i.length > 1 ? n.value : n.value[i[0]], c = typeof l == "object" ? Object.keys(l).reduce(
|
|
717
|
+
(p, g) => ({
|
|
718
|
+
...p,
|
|
719
|
+
[g]: K(l[g])
|
|
720
720
|
}),
|
|
721
721
|
{}
|
|
722
|
-
) :
|
|
722
|
+
) : K(l), d = { [s]: c };
|
|
723
723
|
return { ...r, ...d };
|
|
724
724
|
}
|
|
725
|
-
const a =
|
|
725
|
+
const a = Q(n, s);
|
|
726
726
|
return { ...r, ...a };
|
|
727
727
|
},
|
|
728
728
|
{}
|
|
729
|
-
),
|
|
729
|
+
), Z = (o, e) => Object.keys(o).reduce((r, t) => {
|
|
730
730
|
const n = o[t];
|
|
731
731
|
if (n.type && n.type !== "color") return r;
|
|
732
732
|
if (n.type && n.value) {
|
|
733
733
|
const a = typeof n.value == "string" ? e.resolveVariableValueString(n.value, t) : e.resolveVariableValue(n.value);
|
|
734
734
|
return a ? { ...r, [t]: { ...n, value: a } } : r;
|
|
735
735
|
}
|
|
736
|
-
const s =
|
|
736
|
+
const s = Z(n, e);
|
|
737
737
|
return s ? { ...r, [t]: s } : r;
|
|
738
|
-
}, {}),
|
|
738
|
+
}, {}), bt = ({ input: o = {}, output: { dir: e } }) => ({
|
|
739
739
|
name: "colors/tokenManager",
|
|
740
740
|
executor: async ({ tokenManagerClient: r }) => {
|
|
741
741
|
try {
|
|
@@ -747,26 +747,26 @@ export { colors, type ColorsKeysType };
|
|
|
747
747
|
throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
|
|
748
748
|
const s = [], a = r.getVariables();
|
|
749
749
|
if (n) {
|
|
750
|
-
const
|
|
751
|
-
console.log("[colors/tokenManager] Processing styles for colors..."),
|
|
750
|
+
const l = r.getStyles();
|
|
751
|
+
console.log("[colors/tokenManager] Processing styles for colors..."), l.color && s.push(l.color);
|
|
752
752
|
}
|
|
753
753
|
if (t != null && t.length) {
|
|
754
754
|
console.log(`[colors/tokenManager] Processing ${t.length} variable groups...`);
|
|
755
|
-
const
|
|
756
|
-
s.push(...
|
|
755
|
+
const l = t.map((c) => a[c]).filter(Boolean);
|
|
756
|
+
s.push(...l);
|
|
757
757
|
}
|
|
758
|
-
const
|
|
759
|
-
(
|
|
760
|
-
(c, [d,
|
|
758
|
+
const i = s.map((l) => Z(l, r)).flatMap(
|
|
759
|
+
(l) => Object.entries(Q(l, "")).reduce(
|
|
760
|
+
(c, [d, p]) => [...c, { name: d, value: p }],
|
|
761
761
|
[]
|
|
762
762
|
)
|
|
763
763
|
);
|
|
764
|
-
if (
|
|
764
|
+
if (i.length === 0) {
|
|
765
765
|
console.warn("[colors/tokenManager] No color tokens generated");
|
|
766
766
|
return;
|
|
767
767
|
}
|
|
768
|
-
console.log(`[colors/tokenManager] Generated ${
|
|
769
|
-
colorTokens:
|
|
768
|
+
console.log(`[colors/tokenManager] Generated ${i.length} color tokens`), console.log(`[colors/tokenManager] Writing files to ${e}...`), await xe({
|
|
769
|
+
colorTokens: i,
|
|
770
770
|
dir: e
|
|
771
771
|
}), console.log("[colors/tokenManager] ✅ Successfully generated color files");
|
|
772
772
|
} catch (t) {
|
|
@@ -774,7 +774,7 @@ export { colors, type ColorsKeysType };
|
|
|
774
774
|
throw console.error("[colors/tokenManager] ❌ Failed to generate colors:", n), t instanceof Error && t.stack && console.error("[colors/tokenManager] Stack trace:", t.stack), t;
|
|
775
775
|
}
|
|
776
776
|
}
|
|
777
|
-
}),
|
|
777
|
+
}), Re = (o) => ` @media (width <= ${o.breakpoint}px) {
|
|
778
778
|
.container {
|
|
779
779
|
padding-left: ${o.offset};
|
|
780
780
|
padding-right: ${o.offset};
|
|
@@ -784,34 +784,34 @@ export { colors, type ColorsKeysType };
|
|
|
784
784
|
padding-left: ${o.offset};
|
|
785
785
|
padding-right: ${o.offset};
|
|
786
786
|
}
|
|
787
|
-
}`,
|
|
788
|
-
const r = e || "components", t = o.map((n) =>
|
|
787
|
+
}`, Be = (o, e) => {
|
|
788
|
+
const r = e || "components", t = o.map((n) => Re(n)).join(`
|
|
789
789
|
|
|
790
790
|
`);
|
|
791
791
|
return `@layer ${r} {
|
|
792
792
|
${t}
|
|
793
793
|
}`;
|
|
794
|
-
},
|
|
794
|
+
}, De = () => `import styles from './styles.module.css';
|
|
795
795
|
|
|
796
796
|
export const conatinerClassName = styles.container;
|
|
797
797
|
export const conatinerTabletClassName = styles.containerTablet;
|
|
798
|
-
`,
|
|
798
|
+
`, z = async (o, e, r) => {
|
|
799
799
|
await u.delete(o, r), await u.write(o, e, { directory: r });
|
|
800
|
-
},
|
|
801
|
-
const t =
|
|
802
|
-
await
|
|
803
|
-
},
|
|
800
|
+
}, Ke = async ({ containerTokens: o, dir: e, layer: r }) => {
|
|
801
|
+
const t = Be(o, r), n = De();
|
|
802
|
+
await z("styles.module.css", t, e), await z("index.ts", n, e);
|
|
803
|
+
}, ze = (o) => {
|
|
804
804
|
const e = o.trim().toLowerCase();
|
|
805
805
|
return e === "0" || e === "0px";
|
|
806
|
-
},
|
|
807
|
-
const
|
|
808
|
-
if (!
|
|
806
|
+
}, Le = (o, e) => Object.keys(o).filter((s) => !isNaN(Number(s))).sort((s, a) => Number(a) - Number(s)).reduce((s, a) => {
|
|
807
|
+
const i = o[a];
|
|
808
|
+
if (!i || !("value" in i) || !Array.isArray(i.value))
|
|
809
809
|
return s;
|
|
810
|
-
const
|
|
811
|
-
if (!(
|
|
810
|
+
const l = i.value.find((d) => d.pattern === "columns");
|
|
811
|
+
if (!(l != null && l.offset))
|
|
812
812
|
return s;
|
|
813
|
-
const c = e.resolveVariableValueString(
|
|
814
|
-
return !c || typeof c != "string" ||
|
|
813
|
+
const c = e.resolveVariableValueString(l.offset);
|
|
814
|
+
return !c || typeof c != "string" || ze(c) ? s : [
|
|
815
815
|
...s,
|
|
816
816
|
{
|
|
817
817
|
breakpoint: Number(a),
|
|
@@ -819,9 +819,9 @@ export const conatinerTabletClassName = styles.containerTablet;
|
|
|
819
819
|
}
|
|
820
820
|
];
|
|
821
821
|
}, []).reduce((s, a) => {
|
|
822
|
-
const
|
|
823
|
-
return
|
|
824
|
-
}, []),
|
|
822
|
+
const i = s[s.length - 1];
|
|
823
|
+
return i && v(i.offset, a.offset) || s.push(a), s;
|
|
824
|
+
}, []), wt = ({
|
|
825
825
|
input: o = {},
|
|
826
826
|
output: { dir: e }
|
|
827
827
|
}) => ({
|
|
@@ -836,14 +836,14 @@ export const conatinerTabletClassName = styles.containerTablet;
|
|
|
836
836
|
const n = r.getStyles();
|
|
837
837
|
if (!n.grid)
|
|
838
838
|
throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
|
|
839
|
-
const s =
|
|
839
|
+
const s = Le(n.grid, r);
|
|
840
840
|
if (!s.length) {
|
|
841
841
|
console.warn("[container/tokenManager] No container tokens found.");
|
|
842
842
|
return;
|
|
843
843
|
}
|
|
844
844
|
console.log(
|
|
845
845
|
`[container/tokenManager] Found ${s.length} container tokens: ${s.map((a) => a.breakpoint).join(", ")}`
|
|
846
|
-
), console.log(`[container/tokenManager] Writing files to ${e}...`), await
|
|
846
|
+
), console.log(`[container/tokenManager] Writing files to ${e}...`), await Ke({
|
|
847
847
|
containerTokens: s,
|
|
848
848
|
dir: e,
|
|
849
849
|
layer: t
|
|
@@ -853,26 +853,26 @@ export const conatinerTabletClassName = styles.containerTablet;
|
|
|
853
853
|
throw console.error("[container/tokenManager] ❌ Failed to generate container:", n), t instanceof Error && t.stack && console.error("[container/tokenManager] Stack trace:", t.stack), t;
|
|
854
854
|
}
|
|
855
855
|
}
|
|
856
|
-
}),
|
|
856
|
+
}), We = "styles.css", Ie = "index.ts", L = (o, e) => {
|
|
857
857
|
if (!e.length) return "";
|
|
858
858
|
const r = e.map((t) => ` ${t}`).join(`
|
|
859
859
|
`);
|
|
860
860
|
return `${o} {
|
|
861
861
|
${r}
|
|
862
862
|
}`;
|
|
863
|
-
},
|
|
863
|
+
}, Ge = (o) => `.${o.replace(/\s+/g, "-").toLowerCase()}`, X = (o) => `--${o}`, Je = ({ offsetX: o, offsetY: e, blur: r, spread: t, color: n }) => `${o} ${e} ${r} ${t} ${n}`, qe = (o) => o.reduce(
|
|
864
864
|
(e, r) => {
|
|
865
|
-
const t =
|
|
865
|
+
const t = X(r.name);
|
|
866
866
|
return typeof r.value != "object" ? (e.root.push(`${t}: ${r.value};`), e) : Object.entries(r.value).reduce((n, [s, a]) => {
|
|
867
|
-
const
|
|
868
|
-
return { ...n, [s]: [...
|
|
867
|
+
const i = n[s] ?? [];
|
|
868
|
+
return { ...n, [s]: [...i, `${t}: ${a};`] };
|
|
869
869
|
}, e);
|
|
870
870
|
},
|
|
871
871
|
{ root: [] }
|
|
872
|
-
),
|
|
873
|
-
const e =
|
|
872
|
+
), He = (o) => {
|
|
873
|
+
const e = L(".shadow-variables", o.root), r = Object.entries(o).reduce((t, [n, s]) => {
|
|
874
874
|
if (n === "root" || !s.length) return t;
|
|
875
|
-
const a =
|
|
875
|
+
const a = L(Ge(`${n}-shadow-variables`), s);
|
|
876
876
|
return a && t.push(a), t;
|
|
877
877
|
}, []).join(`
|
|
878
878
|
|
|
@@ -880,39 +880,39 @@ ${r}
|
|
|
880
880
|
return [e, r].filter(Boolean).join(`
|
|
881
881
|
|
|
882
882
|
`);
|
|
883
|
-
},
|
|
884
|
-
${o.map((t) => ` '${t.name}': 'var(${
|
|
883
|
+
}, Ue = (o) => `${`const shadows = {
|
|
884
|
+
${o.map((t) => ` '${t.name}': 'var(${X(t.name)})'`).join(`,
|
|
885
885
|
`)}
|
|
886
886
|
} as const;`}
|
|
887
887
|
|
|
888
888
|
type ShadowsKeysType = keyof typeof shadows;
|
|
889
889
|
|
|
890
890
|
export { shadows, type ShadowsKeysType };
|
|
891
|
-
`,
|
|
891
|
+
`, Qe = async ({
|
|
892
892
|
tsContent: o,
|
|
893
893
|
cssContent: e,
|
|
894
894
|
dir: r
|
|
895
895
|
}) => {
|
|
896
896
|
await u.delete(r);
|
|
897
|
-
const t = u.write(
|
|
897
|
+
const t = u.write(Ie, o, { directory: r }), n = u.write(We, e, { directory: r });
|
|
898
898
|
await Promise.all([t, n]);
|
|
899
|
-
},
|
|
900
|
-
const r =
|
|
901
|
-
await
|
|
902
|
-
},
|
|
899
|
+
}, Ze = async ({ shadowTokens: o, dir: e }) => {
|
|
900
|
+
const r = qe(o), t = He(r), n = Ue(o);
|
|
901
|
+
await Qe({ tsContent: n, cssContent: t, dir: e });
|
|
902
|
+
}, Y = (o, e) => Object.keys(o).reduce(
|
|
903
903
|
(r, t) => {
|
|
904
904
|
const n = o[t], s = e ? `${e}-${t}` : t;
|
|
905
905
|
if (n && typeof n == "object" && "type" in n && "value" in n) {
|
|
906
|
-
const
|
|
907
|
-
[s]: n.value.map(
|
|
906
|
+
const i = {
|
|
907
|
+
[s]: n.value.map(Je).join(", ")
|
|
908
908
|
};
|
|
909
|
-
return { ...r, ...
|
|
909
|
+
return { ...r, ...i };
|
|
910
910
|
}
|
|
911
|
-
const a =
|
|
911
|
+
const a = Y(n, s);
|
|
912
912
|
return { ...r, ...a };
|
|
913
913
|
},
|
|
914
914
|
{}
|
|
915
|
-
),
|
|
915
|
+
), kt = ({ input: o = {}, output: { dir: e } }) => ({
|
|
916
916
|
name: "shadows/tokenManager",
|
|
917
917
|
executor: async ({ tokenManagerClient: r }) => {
|
|
918
918
|
try {
|
|
@@ -928,8 +928,8 @@ export { shadows, type ShadowsKeysType };
|
|
|
928
928
|
console.log("[shadows/tokenManager] Processing styles for shadows..."), a.effect && n.push(a.effect);
|
|
929
929
|
}
|
|
930
930
|
const s = n.flatMap(
|
|
931
|
-
(a) => Object.entries(
|
|
932
|
-
(
|
|
931
|
+
(a) => Object.entries(Y(a, "")).reduce(
|
|
932
|
+
(i, [l, c]) => [...i, { name: l, value: c }],
|
|
933
933
|
[]
|
|
934
934
|
)
|
|
935
935
|
);
|
|
@@ -937,7 +937,7 @@ export { shadows, type ShadowsKeysType };
|
|
|
937
937
|
console.warn("[shadows/tokenManager] No shadow tokens generated");
|
|
938
938
|
return;
|
|
939
939
|
}
|
|
940
|
-
console.log(`[shadows/tokenManager] Generated ${s.length} shadow tokens`), console.log(`[shadows/tokenManager] Writing files to ${e}...`), await
|
|
940
|
+
console.log(`[shadows/tokenManager] Generated ${s.length} shadow tokens`), console.log(`[shadows/tokenManager] Writing files to ${e}...`), await Ze({
|
|
941
941
|
shadowTokens: s,
|
|
942
942
|
dir: e
|
|
943
943
|
}), console.log("[shadows/tokenManager] ✅ Successfully generated shadow files");
|
|
@@ -946,30 +946,30 @@ export { shadows, type ShadowsKeysType };
|
|
|
946
946
|
throw console.error("[shadows/tokenManager] ❌ Failed to generate shadows:", n), t instanceof Error && t.stack && console.error("[shadows/tokenManager] Stack trace:", t.stack), t;
|
|
947
947
|
}
|
|
948
948
|
}
|
|
949
|
-
}),
|
|
949
|
+
}), Xe = "styles.module.css", Ye = "index.ts", _e = "typography.ts", W = "sans-serif", _ = (o, e) => {
|
|
950
950
|
if (typeof o != "string") return o;
|
|
951
951
|
const r = e[o] ?? o;
|
|
952
|
-
return r.trim().toLowerCase().endsWith(
|
|
953
|
-
},
|
|
952
|
+
return r.trim().toLowerCase().endsWith(W) ? r : `${r}, ${W}`;
|
|
953
|
+
}, I = (o, e) => typeof o.fontFamily != "string" ? o : {
|
|
954
954
|
...o,
|
|
955
|
-
fontFamily:
|
|
956
|
-
},
|
|
955
|
+
fontFamily: _(o.fontFamily, e)
|
|
956
|
+
}, F = (o, e) => {
|
|
957
957
|
const r = {};
|
|
958
958
|
return Object.entries(o).forEach(([t, n]) => {
|
|
959
|
-
const s = t === "fontFamily" ?
|
|
959
|
+
const s = t === "fontFamily" ? _(n, e) : n, a = t.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
960
960
|
r[a] = s;
|
|
961
961
|
}), r;
|
|
962
|
-
},
|
|
963
|
-
const t = Object.keys(o.breakpoints), n =
|
|
962
|
+
}, et = (o, e, r) => {
|
|
963
|
+
const t = Object.keys(o.breakpoints), n = F(o.base, r);
|
|
964
964
|
return t.reduce(
|
|
965
|
-
(s, a,
|
|
966
|
-
const
|
|
967
|
-
return
|
|
965
|
+
(s, a, i) => {
|
|
966
|
+
const l = F(o.breakpoints[a], r);
|
|
967
|
+
return i ? [...s, { breakpoint: Number(e[a]), css: l }] : [
|
|
968
968
|
{
|
|
969
969
|
breakpoint: null,
|
|
970
970
|
css: {
|
|
971
971
|
...n,
|
|
972
|
-
...
|
|
972
|
+
...l
|
|
973
973
|
}
|
|
974
974
|
}
|
|
975
975
|
];
|
|
@@ -981,21 +981,94 @@ export { shadows, type ShadowsKeysType };
|
|
|
981
981
|
}
|
|
982
982
|
]
|
|
983
983
|
);
|
|
984
|
-
},
|
|
984
|
+
}, ee = () => ({
|
|
985
|
+
base: {},
|
|
986
|
+
breakpoints: {}
|
|
987
|
+
}), P = (o, e, r, t) => {
|
|
988
|
+
Object.keys(t).length && (o.breakpoints[e] || (o.breakpoints[e] = {}), o.breakpoints[e][r] = {
|
|
989
|
+
...o.breakpoints[e][r],
|
|
990
|
+
...t
|
|
991
|
+
});
|
|
992
|
+
}, S = (o, e, r, t) => {
|
|
993
|
+
et(e.value, r, t).forEach(({ breakpoint: s, css: a }) => {
|
|
994
|
+
if (s === null) {
|
|
995
|
+
o.base[e.name] = a;
|
|
996
|
+
return;
|
|
997
|
+
}
|
|
998
|
+
P(o, s, e.name, a);
|
|
999
|
+
});
|
|
1000
|
+
}, te = (o) => {
|
|
1001
|
+
const e = G(o.base), r = Object.keys(o.breakpoints).reduce((t, n) => {
|
|
1002
|
+
const s = Number(n), a = o.breakpoints[s];
|
|
1003
|
+
return t + `@media (max-width: ${s}px) { ${G(a)} }`;
|
|
1004
|
+
}, "");
|
|
1005
|
+
return e + r;
|
|
1006
|
+
}, tt = (o, e, r) => {
|
|
1007
|
+
const t = o.reduce((n, s) => (S(n, s, e, r), n), ee());
|
|
1008
|
+
return te(t);
|
|
1009
|
+
}, G = (o) => Object.keys(o).reduce((e, r) => {
|
|
985
1010
|
const t = o[r], n = Object.keys(t).map((s) => `${s}: ${t[s]}`).join(";");
|
|
986
1011
|
return e + `.typo-${r} { ${n} }`;
|
|
987
|
-
}, ""),
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
}
|
|
1012
|
+
}, ""), J = (o) => {
|
|
1013
|
+
if (typeof o == "number") return Number.isFinite(o) ? o : null;
|
|
1014
|
+
const e = Number.parseFloat(o);
|
|
1015
|
+
return Number.isFinite(e) ? e : null;
|
|
1016
|
+
}, q = (o) => {
|
|
1017
|
+
if (typeof o == "number") return o / 16;
|
|
1018
|
+
const e = o.trim().toLowerCase();
|
|
1019
|
+
if (e.endsWith("rem")) return J(e);
|
|
1020
|
+
if (e.endsWith("px")) {
|
|
1021
|
+
const r = J(e);
|
|
1022
|
+
return r === null ? null : r / 16;
|
|
1023
|
+
}
|
|
1024
|
+
return null;
|
|
1025
|
+
}, rt = (o) => {
|
|
1026
|
+
const { minValueRem: e, maxValueRem: r, minVwRem: t, maxVwRem: n } = o, s = r - e;
|
|
1027
|
+
return `calc(${e}rem + ((100vw - ${t}rem) / (${n}rem - ${t}rem)) * ${s}rem)`;
|
|
1028
|
+
}, ot = (o, e, r, t) => {
|
|
1029
|
+
const n = ["font-size", "line-height"], s = Object.entries(e.value.breakpoints).map(([f, h]) => {
|
|
1030
|
+
const w = Number.parseInt(r[f], 10);
|
|
1031
|
+
return { breakpointName: f, width: w, typography: h };
|
|
1032
|
+
}).filter((f) => Number.isFinite(f.width)).sort((f, h) => h.width - f.width);
|
|
1033
|
+
if (s.length < 2) {
|
|
1034
|
+
S(o, e, r, t);
|
|
1035
|
+
return;
|
|
1036
|
+
}
|
|
1037
|
+
const a = s[0], i = s[s.length - 1];
|
|
1038
|
+
if (a.width <= i.width) {
|
|
1039
|
+
S(o, e, r, t);
|
|
1040
|
+
return;
|
|
1041
|
+
}
|
|
1042
|
+
const l = F(a.typography, t), c = F(i.typography, t), d = a.width / 16, p = i.width / 16;
|
|
1043
|
+
if (d === p) {
|
|
1044
|
+
S(o, e, r, t);
|
|
1045
|
+
return;
|
|
1046
|
+
}
|
|
1047
|
+
o.base[e.name] = l;
|
|
1048
|
+
const g = n.reduce((f, h) => {
|
|
1049
|
+
const w = l[h], M = c[h];
|
|
1050
|
+
if (w === void 0 || M === void 0 || w === M)
|
|
1051
|
+
return f;
|
|
1052
|
+
const A = q(w), R = q(M);
|
|
1053
|
+
return A === null || R === null ? f : {
|
|
1054
|
+
...f,
|
|
1055
|
+
[h]: rt({ minValueRem: R, maxValueRem: A, minVwRem: p, maxVwRem: d })
|
|
1056
|
+
};
|
|
1057
|
+
}, {});
|
|
1058
|
+
P(o, a.width, e.name, g);
|
|
1059
|
+
const b = !Object.keys(g).includes("font-size") && l["font-size"] !== c["font-size"], T = Object.entries(c).filter(([f, h]) => l[f] === h ? !1 : !n.includes(f) || f === "font-size" && b ? !0 : !Object.keys(g).includes(f)).reduce(
|
|
1060
|
+
(f, [h, w]) => ({
|
|
1061
|
+
...f,
|
|
1062
|
+
[h]: w
|
|
1063
|
+
}),
|
|
1064
|
+
{}
|
|
1065
|
+
);
|
|
1066
|
+
P(o, i.width, e.name, T);
|
|
1067
|
+
}, nt = (o, e, r, t) => {
|
|
1068
|
+
if (!t) return tt(o, e, r);
|
|
1069
|
+
const n = o.reduce((s, a) => (ot(s, a, e, r), s), ee());
|
|
1070
|
+
return te(n);
|
|
1071
|
+
}, st = (o) => o.length ? `import styles from './styles.module.css';
|
|
999
1072
|
import { typography } from './typography';
|
|
1000
1073
|
|
|
1001
1074
|
type TypographyKeysType = keyof typeof typography;
|
|
@@ -1003,12 +1076,12 @@ type TypographyKeysType = keyof typeof typography;
|
|
|
1003
1076
|
const getTypographyClass = (typographyKey: TypographyKeysType) => styles[\`typo-\${typographyKey}\`];
|
|
1004
1077
|
|
|
1005
1078
|
export { typography, getTypographyClass, type TypographyKeysType };
|
|
1006
|
-
` : "",
|
|
1079
|
+
` : "", at = (o, e) => o.length ? `const typography = {
|
|
1007
1080
|
${o.map((t) => {
|
|
1008
|
-
const n =
|
|
1009
|
-
(a, [
|
|
1081
|
+
const n = I(t.value.base, e), s = Object.entries(t.value.breakpoints).reduce(
|
|
1082
|
+
(a, [i, l]) => ({
|
|
1010
1083
|
...a,
|
|
1011
|
-
[
|
|
1084
|
+
[i]: I(l, e)
|
|
1012
1085
|
}),
|
|
1013
1086
|
{}
|
|
1014
1087
|
);
|
|
@@ -1023,80 +1096,82 @@ ${o.map((t) => {
|
|
|
1023
1096
|
} as const;
|
|
1024
1097
|
|
|
1025
1098
|
export { typography };
|
|
1026
|
-
` : "",
|
|
1099
|
+
` : "", it = async ({
|
|
1027
1100
|
indexTSContent: o,
|
|
1028
1101
|
typographyTSContent: e,
|
|
1029
1102
|
cssContent: r,
|
|
1030
1103
|
dir: t
|
|
1031
1104
|
}) => {
|
|
1032
1105
|
await u.delete(t);
|
|
1033
|
-
const n = u.write(
|
|
1106
|
+
const n = u.write(Ye, o, { directory: t }), s = u.write(_e, e, { directory: t }), a = u.write(Xe, r, { directory: t });
|
|
1034
1107
|
await Promise.all([n, s, a]);
|
|
1035
|
-
},
|
|
1108
|
+
}, lt = async ({
|
|
1036
1109
|
typographyTokens: o,
|
|
1037
1110
|
dir: e,
|
|
1038
1111
|
breakpoints: r,
|
|
1039
|
-
fontFamily: t
|
|
1112
|
+
fontFamily: t,
|
|
1113
|
+
fluid: n
|
|
1040
1114
|
}) => {
|
|
1041
|
-
const
|
|
1042
|
-
await
|
|
1043
|
-
},
|
|
1115
|
+
const s = nt(o, r, t, n), a = at(o, t), i = st(o);
|
|
1116
|
+
await it({ indexTSContent: i, typographyTSContent: a, cssContent: s, dir: e });
|
|
1117
|
+
}, re = (o, e, r) => Object.keys(o).reduce((t, n) => {
|
|
1044
1118
|
const s = o[n];
|
|
1045
1119
|
if (typeof s != "object" || Array.isArray(s)) return t;
|
|
1046
1120
|
if (!("type" in s) || !("value" in s))
|
|
1047
|
-
return { ...t, [n]:
|
|
1121
|
+
return { ...t, [n]: re(s, e, r) };
|
|
1048
1122
|
if (s.type !== "typography") return t;
|
|
1049
|
-
const a = s.value,
|
|
1050
|
-
(
|
|
1051
|
-
const
|
|
1052
|
-
if (
|
|
1053
|
-
|
|
1054
|
-
const
|
|
1055
|
-
|
|
1123
|
+
const a = s.value, i = Object.entries(a).reduce(
|
|
1124
|
+
(l, [c, d]) => {
|
|
1125
|
+
const p = Object.keys(r.breakpoints);
|
|
1126
|
+
if (p.length)
|
|
1127
|
+
p.forEach((g) => {
|
|
1128
|
+
const b = e.resolveVariableValueString(d, g);
|
|
1129
|
+
b && (b === d ? l.base = { ...l.base, [c]: b } : l.breakpoints[g] = { ...l.breakpoints[g], [c]: b });
|
|
1056
1130
|
});
|
|
1057
1131
|
else {
|
|
1058
|
-
const
|
|
1059
|
-
|
|
1132
|
+
const g = e.resolveVariableValueString(d);
|
|
1133
|
+
g && (l.base = { ...l.base, [c]: g });
|
|
1060
1134
|
}
|
|
1061
|
-
return
|
|
1135
|
+
return l;
|
|
1062
1136
|
},
|
|
1063
1137
|
{ base: {}, breakpoints: {} }
|
|
1064
1138
|
);
|
|
1065
|
-
return { ...t, [n]: { type: "typography", value:
|
|
1066
|
-
}, {}),
|
|
1139
|
+
return { ...t, [n]: { type: "typography", value: i } };
|
|
1140
|
+
}, {}), oe = (o, e) => Object.keys(o).reduce((r, t) => {
|
|
1067
1141
|
const n = e ? `${e}-${t}` : t, s = o[t];
|
|
1068
1142
|
if (!("type" in s) || !("value" in s))
|
|
1069
|
-
return { ...r, ...
|
|
1143
|
+
return { ...r, ...oe(s, n) };
|
|
1070
1144
|
const a = s.value;
|
|
1071
1145
|
return { ...r, [n]: a };
|
|
1072
|
-
}, {}),
|
|
1146
|
+
}, {}), $t = ({ input: o, output: { dir: e } }) => ({
|
|
1073
1147
|
name: "typography/tokenManager",
|
|
1074
1148
|
executor: async ({ tokenManagerClient: r }) => {
|
|
1075
1149
|
try {
|
|
1076
1150
|
console.log("[typography/tokenManager] Generating typography from TokenManager...");
|
|
1077
|
-
const { breakpoints: t, fontFamily: n } = o;
|
|
1151
|
+
const { breakpoints: t, fontFamily: n } = o, s = o.fluid ?? !0;
|
|
1078
1152
|
if (!r.isLoaded())
|
|
1079
1153
|
throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
|
|
1080
|
-
const
|
|
1081
|
-
console.log("[typography/tokenManager] Processing styles for typography..."),
|
|
1082
|
-
const l =
|
|
1083
|
-
(
|
|
1084
|
-
...
|
|
1085
|
-
...
|
|
1154
|
+
const a = [], i = r.getStyles();
|
|
1155
|
+
console.log("[typography/tokenManager] Processing styles for typography..."), i.text && a.push(i.text);
|
|
1156
|
+
const l = a.reduce(
|
|
1157
|
+
(d, p) => ({
|
|
1158
|
+
...d,
|
|
1159
|
+
...re(p, r, { breakpoints: o.breakpoints })
|
|
1086
1160
|
}),
|
|
1087
1161
|
{}
|
|
1088
|
-
),
|
|
1089
|
-
([
|
|
1162
|
+
), c = Object.entries(oe(l)).map(
|
|
1163
|
+
([d, p]) => ({ name: d, value: p })
|
|
1090
1164
|
);
|
|
1091
|
-
if (
|
|
1165
|
+
if (c.length === 0) {
|
|
1092
1166
|
console.warn("[typography/tokenManager] No typography tokens generated");
|
|
1093
1167
|
return;
|
|
1094
1168
|
}
|
|
1095
|
-
console.log(`[typography/tokenManager] Generated ${
|
|
1096
|
-
typographyTokens:
|
|
1169
|
+
console.log(`[typography/tokenManager] Generated ${c.length} typography tokens`), console.log(`[typography/tokenManager] Writing files to ${e}...`), await lt({
|
|
1170
|
+
typographyTokens: c,
|
|
1097
1171
|
dir: e,
|
|
1098
1172
|
breakpoints: t,
|
|
1099
|
-
fontFamily: n || {}
|
|
1173
|
+
fontFamily: n || {},
|
|
1174
|
+
fluid: s
|
|
1100
1175
|
}), console.log("[typography/tokenManager] ✅ Successfully generated typography files");
|
|
1101
1176
|
} catch (t) {
|
|
1102
1177
|
const n = t instanceof Error ? t.message : String(t);
|
|
@@ -1105,13 +1180,13 @@ export { typography };
|
|
|
1105
1180
|
}
|
|
1106
1181
|
});
|
|
1107
1182
|
export {
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1183
|
+
ge as BREAKPOINTS_NAMES,
|
|
1184
|
+
pe as TokenManager,
|
|
1185
|
+
mt as breakpointsFromTokenManager,
|
|
1186
|
+
bt as colorsFromTokenManager,
|
|
1187
|
+
wt as containerFromTokenManager,
|
|
1188
|
+
yt as generate,
|
|
1189
|
+
ht as init,
|
|
1190
|
+
kt as shadowsFromTokenManager,
|
|
1191
|
+
$t as typographyFromTokenManager
|
|
1117
1192
|
};
|