synthesisui 0.1.7 → 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 +59 -4
- 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)}`;
|
|
@@ -30,6 +51,33 @@ export function buildGuide(payload) {
|
|
|
30
51
|
const { document: doc, slug, name, version } = payload;
|
|
31
52
|
const { meta, foundations, motion, components } = doc;
|
|
32
53
|
const semanticRoles = Object.keys(foundations.color.semantic);
|
|
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
|
+
: "";
|
|
33
81
|
const weights = Object.keys(foundations.typography.weights);
|
|
34
82
|
const hasAlt = foundations.color.semanticAlt &&
|
|
35
83
|
Object.keys(foundations.color.semanticAlt).length > 0;
|
|
@@ -81,7 +129,7 @@ ${hasAlt
|
|
|
81
129
|
root.toggleAttribute("data-scheme"); // present = ${altScheme}, absent = ${meta.scheme}
|
|
82
130
|
\`\`\`
|
|
83
131
|
`
|
|
84
|
-
: ""}${hasTailwind
|
|
132
|
+
: ""}${fontsSection}${hasTailwind
|
|
85
133
|
? `
|
|
86
134
|
## Styling with Tailwind v4 (preferred in this project)
|
|
87
135
|
|
|
@@ -93,7 +141,9 @@ Import \`theme.css\` after \`tailwindcss\` and \`tokens.css\`:
|
|
|
93
141
|
\`\`\`
|
|
94
142
|
This maps the DS tokens onto Tailwind's theme, so inside \`[data-ds="${slug}"]\` you get utilities
|
|
95
143
|
backed by the design system: \`bg-*\`/\`text-*\`/\`border-*\` (semantic colors), \`p-*\`/\`m-*\`/\`gap-*\`
|
|
96
|
-
(spacing), \`rounded-*\`, \`shadow-*\`, \`font-*\` (families **and** weights), \`text-*\` (type scale), \`ease
|
|
144
|
+
(spacing), \`rounded-*\`, \`shadow-*\`, \`font-*\` (families **and** weights), \`text-*\` (type scale), \`ease-*\`${seriesKeys.length > 0
|
|
145
|
+
? `, \`bg-series-*\`/\`text-series-*\`/\`fill-series-*\` (data-viz series)`
|
|
146
|
+
: ""}.
|
|
97
147
|
|
|
98
148
|
**Prefer these utilities for layout and new composition** — they are this project's idiom and read
|
|
99
149
|
far better than inline \`style\`. Reach for inline \`var(--ds-*)\` only when no utility fits.
|
|
@@ -193,7 +243,9 @@ ${hasTailwind
|
|
|
193
243
|
- **Always use semantic tokens**, never raw values nor primitives directly.
|
|
194
244
|
Color: \`var(--ds-color-semantic-<role>)\`${hasTailwind ? " (utility: `bg-<role>`/`text-<role>`)" : ""}. The roles are: ${list(semanticRoles)}.
|
|
195
245
|
- Primitives (\`--ds-color-<palette>-<step>\`) exist but should **not** be referenced directly —
|
|
196
|
-
they feed the semantic roles.
|
|
246
|
+
they feed the semantic roles.${seriesKeys.length > 0
|
|
247
|
+
? `\n- Data-viz → \`var(--ds-color-series-<n>)\`${hasTailwind ? " (utility: `bg-series-<n>`/`text-series-<n>`/`fill-series-<n>`)" : ""}: categorical chart/series colors, ${seriesKeys.length} of them (${list(seriesKeys)}). Use them in order for multi-series charts; they re-paint with the system.`
|
|
248
|
+
: ""}
|
|
197
249
|
- Spacing → \`var(--ds-spacing-<key>)\`: ${list(Object.keys(foundations.spacing))}.
|
|
198
250
|
- Radius → \`var(--ds-radius-<key>)\`: ${list(Object.keys(foundations.radius))}.
|
|
199
251
|
- Shadow → \`var(--ds-shadow-<key>)\`: ${list(Object.keys(foundations.shadow))}.
|
|
@@ -201,7 +253,10 @@ ${hasTailwind
|
|
|
201
253
|
weights${hasTailwind ? " (utility: `font-<key>`)" : ""}: ${list(weights)};
|
|
202
254
|
scale \`--ds-typography-scale-<key>-font-size\`${hasTailwind ? " (utility: `text-<key>`)" : ""}: ${list(Object.keys(foundations.typography.scale))}.
|
|
203
255
|
- Motion: durations \`--ds-motion-durations-<key>\` (${list(Object.keys(motion.durations))}) and
|
|
204
|
-
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\`.
|
|
205
260
|
- When **creating a new component** the DS does not cover yet: compose it from these semantic
|
|
206
261
|
tokens to inherit the system's identity; do not invent colors/measures outside the scale.
|
|
207
262
|
|