synthesisui 0.1.6 → 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 +24 -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.
|
|
@@ -163,6 +166,23 @@ in its own \`<div data-ds="${slug}"${hasAlt ? ` data-scheme="…"` : ""}>\`, or
|
|
|
163
166
|
app root so everything (portals included) inherits it. Behavior (open/close, focus trap, positioning,
|
|
164
167
|
keyboard) is yours to wire — the system ships the **looks**, not the JavaScript.
|
|
165
168
|
|
|
169
|
+
### Interactive recipes — the behavior contract
|
|
170
|
+
Several recipes are **static surfaces**: they ship the styling for every state, but never any
|
|
171
|
+
JavaScript. You own the interaction and drive each state by toggling the documented \`data-*\`
|
|
172
|
+
attributes (listed per component below). The recipe restyles itself; you wire the logic.
|
|
173
|
+
- **Open / close** (menu, select, modal, tooltip, popover): render the surface, then handle show/hide,
|
|
174
|
+
outside-click, focus trap, positioning and \`Esc\` yourself (or with a headless lib).
|
|
175
|
+
- **Selection / active** (tabs, sidebar, pagination): set \`data-active="true"\` on the chosen item from
|
|
176
|
+
your own state/router — the recipe lifts it onto a surface.
|
|
177
|
+
- **On / off** (switch): toggle \`data-state="on"\` on the track **and** its thumb together.
|
|
178
|
+
- **Command bar / ⌘K** (if your system ships one): the recipe is only the styled input row — wire the
|
|
179
|
+
shortcut, the palette list and filtering yourself.
|
|
180
|
+
- **Select** (native vs custom): \`.ds-select\` strips native chrome (\`appearance:none\`). On a real
|
|
181
|
+
\`<select>\`, wrap it and overlay your own chevron; on a custom trigger, nest \`.ds-select-chevron\`.
|
|
182
|
+
|
|
183
|
+
Pair these with the right ARIA (\`aria-expanded\`, \`role="dialog"\`, \`aria-current\`, …) — the system
|
|
184
|
+
styles it, you make it work.
|
|
185
|
+
|
|
166
186
|
---
|
|
167
187
|
|
|
168
188
|
## Rules (follow them when creating components)
|
|
@@ -176,7 +196,9 @@ ${hasTailwind
|
|
|
176
196
|
- **Always use semantic tokens**, never raw values nor primitives directly.
|
|
177
197
|
Color: \`var(--ds-color-semantic-<role>)\`${hasTailwind ? " (utility: `bg-<role>`/`text-<role>`)" : ""}. The roles are: ${list(semanticRoles)}.
|
|
178
198
|
- Primitives (\`--ds-color-<palette>-<step>\`) exist but should **not** be referenced directly —
|
|
179
|
-
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
|
+
: ""}
|
|
180
202
|
- Spacing → \`var(--ds-spacing-<key>)\`: ${list(Object.keys(foundations.spacing))}.
|
|
181
203
|
- Radius → \`var(--ds-radius-<key>)\`: ${list(Object.keys(foundations.radius))}.
|
|
182
204
|
- Shadow → \`var(--ds-shadow-<key>)\`: ${list(Object.keys(foundations.shadow))}.
|