synthesisui 0.1.7 → 0.1.8
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 +7 -2
- package/package.json +1 -1
package/dist/guide.js
CHANGED
|
@@ -30,6 +30,7 @@ export function buildGuide(payload) {
|
|
|
30
30
|
const { document: doc, slug, name, version } = payload;
|
|
31
31
|
const { meta, foundations, motion, components } = doc;
|
|
32
32
|
const semanticRoles = Object.keys(foundations.color.semantic);
|
|
33
|
+
const seriesKeys = Object.keys(foundations.color.series ?? {});
|
|
33
34
|
const weights = Object.keys(foundations.typography.weights);
|
|
34
35
|
const hasAlt = foundations.color.semanticAlt &&
|
|
35
36
|
Object.keys(foundations.color.semanticAlt).length > 0;
|
|
@@ -93,7 +94,9 @@ Import \`theme.css\` after \`tailwindcss\` and \`tokens.css\`:
|
|
|
93
94
|
\`\`\`
|
|
94
95
|
This maps the DS tokens onto Tailwind's theme, so inside \`[data-ds="${slug}"]\` you get utilities
|
|
95
96
|
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
|
|
97
|
+
(spacing), \`rounded-*\`, \`shadow-*\`, \`font-*\` (families **and** weights), \`text-*\` (type scale), \`ease-*\`${seriesKeys.length > 0
|
|
98
|
+
? `, \`bg-series-*\`/\`text-series-*\`/\`fill-series-*\` (data-viz series)`
|
|
99
|
+
: ""}.
|
|
97
100
|
|
|
98
101
|
**Prefer these utilities for layout and new composition** — they are this project's idiom and read
|
|
99
102
|
far better than inline \`style\`. Reach for inline \`var(--ds-*)\` only when no utility fits.
|
|
@@ -193,7 +196,9 @@ ${hasTailwind
|
|
|
193
196
|
- **Always use semantic tokens**, never raw values nor primitives directly.
|
|
194
197
|
Color: \`var(--ds-color-semantic-<role>)\`${hasTailwind ? " (utility: `bg-<role>`/`text-<role>`)" : ""}. The roles are: ${list(semanticRoles)}.
|
|
195
198
|
- Primitives (\`--ds-color-<palette>-<step>\`) exist but should **not** be referenced directly —
|
|
196
|
-
they feed the semantic roles.
|
|
199
|
+
they feed the semantic roles.${seriesKeys.length > 0
|
|
200
|
+
? `\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.`
|
|
201
|
+
: ""}
|
|
197
202
|
- Spacing → \`var(--ds-spacing-<key>)\`: ${list(Object.keys(foundations.spacing))}.
|
|
198
203
|
- Radius → \`var(--ds-radius-<key>)\`: ${list(Object.keys(foundations.radius))}.
|
|
199
204
|
- Shadow → \`var(--ds-shadow-<key>)\`: ${list(Object.keys(foundations.shadow))}.
|