synthesisui 0.1.4 → 0.1.5
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 +26 -8
- package/package.json +1 -1
package/dist/guide.js
CHANGED
|
@@ -63,18 +63,30 @@ ${hasAlt
|
|
|
63
63
|
`
|
|
64
64
|
: ""}${hasTailwind
|
|
65
65
|
? `
|
|
66
|
-
##
|
|
66
|
+
## Styling with Tailwind v4 (preferred in this project)
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
Import \`theme.css\` after \`tailwindcss\` and \`tokens.css\`:
|
|
69
69
|
\`\`\`css
|
|
70
70
|
@import "tailwindcss";
|
|
71
71
|
@import "./_synthesisui/ds/${slug}/tokens.css";
|
|
72
72
|
@import "./_synthesisui/ds/${slug}/theme.css";
|
|
73
73
|
\`\`\`
|
|
74
|
-
This maps the DS tokens onto Tailwind's theme, so inside \`[data-ds="${slug}"]\` you
|
|
75
|
-
|
|
76
|
-
\`
|
|
77
|
-
|
|
74
|
+
This maps the DS tokens onto Tailwind's theme, so inside \`[data-ds="${slug}"]\` you get utilities
|
|
75
|
+
backed by the design system: \`bg-*\`/\`text-*\`/\`border-*\` (semantic colors), \`p-*\`/\`m-*\`/\`gap-*\`
|
|
76
|
+
(spacing), \`rounded-*\`, \`shadow-*\`, \`font-*\`, \`ease-*\`.
|
|
77
|
+
|
|
78
|
+
**Prefer these utilities for layout and new composition** — they are this project's idiom and read
|
|
79
|
+
far better than inline \`style\`. Reach for inline \`var(--ds-*)\` only when no utility fits.
|
|
80
|
+
|
|
81
|
+
\`\`\`tsx
|
|
82
|
+
// ✅ preferred — Tailwind utilities backed by the DS
|
|
83
|
+
<main className="bg-canvas text-foreground p-2xl flex flex-col gap-md">
|
|
84
|
+
<button className="ds-button" data-intent="primary">Save</button>
|
|
85
|
+
</main>
|
|
86
|
+
|
|
87
|
+
// ❌ avoid — inline styles with raw var() when a utility exists
|
|
88
|
+
<main style={{ background: "var(--ds-color-semantic-canvas)", padding: "var(--ds-spacing-2xl)" }}>
|
|
89
|
+
\`\`\`
|
|
78
90
|
|
|
79
91
|
---
|
|
80
92
|
`
|
|
@@ -88,9 +100,15 @@ those, not the versioned ones. The pinned files for this version — ${artifactL
|
|
|
88
100
|
---
|
|
89
101
|
|
|
90
102
|
## Rules (follow them when creating components)
|
|
91
|
-
|
|
103
|
+
${hasTailwind
|
|
104
|
+
? `
|
|
105
|
+
- **Styling mechanism:** prefer Tailwind utilities backed by the DS (\`bg-primary\`, \`p-md\`,
|
|
106
|
+
\`font-display\`, …) for layout and new composition, and reuse the \`.ds-*\` recipes for components
|
|
107
|
+
the DS already covers. Use inline \`style\` with \`var(--ds-*)\` only as a last resort. The token
|
|
108
|
+
names below are the source vocabulary — every utility derives from them.`
|
|
109
|
+
: ""}
|
|
92
110
|
- **Always use semantic tokens**, never raw values nor primitives directly.
|
|
93
|
-
Color: \`var(--ds-color-semantic-<role>)
|
|
111
|
+
Color: \`var(--ds-color-semantic-<role>)\`${hasTailwind ? " (utility: `bg-<role>`/`text-<role>`)" : ""}. The roles are: ${list(semanticRoles)}.
|
|
94
112
|
- Primitives (\`--ds-color-<palette>-<step>\`) exist but should **not** be referenced directly —
|
|
95
113
|
they feed the semantic roles.
|
|
96
114
|
- Spacing → \`var(--ds-spacing-<key>)\`: ${list(Object.keys(foundations.spacing))}.
|