synthesisui 0.1.8 → 0.1.9
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/guide.js +52 -2
- package/package.json +1 -1
package/dist/guide.js
CHANGED
|
@@ -1,6 +1,27 @@
|
|
|
1
1
|
const kebab = (v) => v.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
2
2
|
const list = (items) => items.length ? items.map((i) => `\`${i}\``).join(", ") : "_(none)_";
|
|
3
3
|
const dataAttrs = (variants) => Object.entries(variants).map(([axis, opts]) => `data-${kebab(axis)}="${Object.keys(opts).join("|")}"`);
|
|
4
|
+
// Famílias genéricas do CSS — fallbacks, não webfonts a carregar.
|
|
5
|
+
const GENERIC_FAMILIES = new Set([
|
|
6
|
+
"sans-serif", "serif", "monospace", "system-ui", "ui-sans-serif",
|
|
7
|
+
"ui-serif", "ui-monospace", "cursive", "fantasy", "inherit", "initial",
|
|
8
|
+
]);
|
|
9
|
+
/** Famílias custom do documento (display/body/mono), deduplicadas, sem genéricos. */
|
|
10
|
+
function customFontFamilies(families) {
|
|
11
|
+
const seen = new Set();
|
|
12
|
+
const out = [];
|
|
13
|
+
for (const family of [families.display, families.body, families.mono]) {
|
|
14
|
+
const name = family?.trim();
|
|
15
|
+
if (!name)
|
|
16
|
+
continue;
|
|
17
|
+
const key = name.toLowerCase();
|
|
18
|
+
if (GENERIC_FAMILIES.has(key) || seen.has(key))
|
|
19
|
+
continue;
|
|
20
|
+
seen.add(key);
|
|
21
|
+
out.push(name);
|
|
22
|
+
}
|
|
23
|
+
return out;
|
|
24
|
+
}
|
|
4
25
|
/** One entry per component: class, variant data-*, states, and multi-part anatomy. */
|
|
5
26
|
function componentEntry(cname, recipe) {
|
|
6
27
|
const cls = `.ds-${kebab(cname)}`;
|
|
@@ -31,6 +52,32 @@ export function buildGuide(payload) {
|
|
|
31
52
|
const { meta, foundations, motion, components } = doc;
|
|
32
53
|
const semanticRoles = Object.keys(foundations.color.semantic);
|
|
33
54
|
const seriesKeys = Object.keys(foundations.color.series ?? {});
|
|
55
|
+
const fontFamilies = customFontFamilies(foundations.typography.families);
|
|
56
|
+
const fontsHref = fontFamilies.length > 0
|
|
57
|
+
? `https://fonts.googleapis.com/css2?${fontFamilies
|
|
58
|
+
.map((n) => `family=${n.replace(/ /g, "+")}:wght@400;500;600;700`)
|
|
59
|
+
.join("&")}&display=swap`
|
|
60
|
+
: null;
|
|
61
|
+
const fontsSection = fontsHref
|
|
62
|
+
? `
|
|
63
|
+
## Fonts
|
|
64
|
+
|
|
65
|
+
This system's type relies on ${list(fontFamilies)} — **the DS ships token names, not the
|
|
66
|
+
fonts themselves.** If you don't load them they fall back to a generic family and the system loses
|
|
67
|
+
its typographic identity. Load them once (any one approach):
|
|
68
|
+
|
|
69
|
+
- **Google Fonts** — drop in your \`<head>\` (or root layout):
|
|
70
|
+
\`\`\`html
|
|
71
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
72
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
73
|
+
<link rel="stylesheet" href="${fontsHref}" />
|
|
74
|
+
\`\`\`
|
|
75
|
+
- **Next.js** (\`next/font/google\`), **Fontsource**, or self-hosted \`@font-face\` work too — just
|
|
76
|
+
register the families above. If a family isn't on Google Fonts, self-host it.
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
`
|
|
80
|
+
: "";
|
|
34
81
|
const weights = Object.keys(foundations.typography.weights);
|
|
35
82
|
const hasAlt = foundations.color.semanticAlt &&
|
|
36
83
|
Object.keys(foundations.color.semanticAlt).length > 0;
|
|
@@ -82,7 +129,7 @@ ${hasAlt
|
|
|
82
129
|
root.toggleAttribute("data-scheme"); // present = ${altScheme}, absent = ${meta.scheme}
|
|
83
130
|
\`\`\`
|
|
84
131
|
`
|
|
85
|
-
: ""}${hasTailwind
|
|
132
|
+
: ""}${fontsSection}${hasTailwind
|
|
86
133
|
? `
|
|
87
134
|
## Styling with Tailwind v4 (preferred in this project)
|
|
88
135
|
|
|
@@ -206,7 +253,10 @@ ${hasTailwind
|
|
|
206
253
|
weights${hasTailwind ? " (utility: `font-<key>`)" : ""}: ${list(weights)};
|
|
207
254
|
scale \`--ds-typography-scale-<key>-font-size\`${hasTailwind ? " (utility: `text-<key>`)" : ""}: ${list(Object.keys(foundations.typography.scale))}.
|
|
208
255
|
- Motion: durations \`--ds-motion-durations-<key>\` (${list(Object.keys(motion.durations))}) and
|
|
209
|
-
easings \`--ds-motion-easings-<key>\` (${list(Object.keys(motion.easings))}).
|
|
256
|
+
easings \`--ds-motion-easings-<key>\` (${list(Object.keys(motion.easings))}). Use them on
|
|
257
|
+
\`transition\`/\`animation\` (e.g. \`transition: color var(--ds-motion-durations-fast) var(--ds-motion-easings-standard)\`)
|
|
258
|
+
so timing stays on-brand. The DS ships timing tokens, **not** a runtime — for entrance/reveal/stagger
|
|
259
|
+
pair them with a motion lib (e.g. \`motion\`/Framer) or CSS \`@keyframes\`.
|
|
210
260
|
- When **creating a new component** the DS does not cover yet: compose it from these semantic
|
|
211
261
|
tokens to inherit the system's identity; do not invent colors/measures outside the scale.
|
|
212
262
|
|