synthesisui 0.4.8 → 0.4.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 +20 -4
- package/package.json +1 -1
package/dist/guide.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { nextFontSnippet } from "./fonts.js";
|
|
1
2
|
const kebab = (v) => v.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
2
3
|
const list = (items) => items.length ? items.map((i) => `\`${i}\``).join(", ") : "_(none)_";
|
|
3
4
|
const dataAttrs = (variants) => Object.entries(variants).map(([axis, opts]) => `data-${kebab(axis)}="${Object.keys(opts).join("|")}"`);
|
|
@@ -67,6 +68,7 @@ export function buildGuide(payload) {
|
|
|
67
68
|
.map((n) => `family=${n.replace(/ /g, "+")}:wght@400;500;600;700`)
|
|
68
69
|
.join("&")}&display=swap`
|
|
69
70
|
: null;
|
|
71
|
+
const nextFonts = nextFontSnippet(foundations.typography.families, slug);
|
|
70
72
|
const fontsSection = fontsHref
|
|
71
73
|
? `
|
|
72
74
|
## Fonts
|
|
@@ -74,15 +76,29 @@ export function buildGuide(payload) {
|
|
|
74
76
|
This system's type relies on ${list(fontFamilies)} - **the DS ships token names, not the
|
|
75
77
|
fonts themselves.** If you don't load them they fall back to a generic family and the system loses
|
|
76
78
|
its typographic identity. Load them once (any one approach):
|
|
77
|
-
|
|
78
|
-
|
|
79
|
+
${nextFonts
|
|
80
|
+
? `
|
|
81
|
+
- **Next.js (recommended)** - \`next/font\` self-hosts the families (preloaded, size-adjusted
|
|
82
|
+
fallbacks - no font flash on refresh). Three small blocks:
|
|
83
|
+
\`\`\`ts
|
|
84
|
+
${nextFonts.fontsFile.map((l) => ` ${l}`).join("\n")}
|
|
85
|
+
\`\`\`
|
|
86
|
+
\`\`\`tsx
|
|
87
|
+
${nextFonts.layout.map((l) => ` ${l}`).join("\n")}
|
|
88
|
+
\`\`\`
|
|
89
|
+
\`\`\`css
|
|
90
|
+
${nextFonts.css.map((l) => ` ${l}`).join("\n")}
|
|
91
|
+
\`\`\``
|
|
92
|
+
: ""}
|
|
93
|
+
- **Anywhere else** - Google Fonts \`<link>\` in the \`<head>\` (works everywhere, may flash on
|
|
94
|
+
cold loads):
|
|
79
95
|
\`\`\`html
|
|
80
96
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
81
97
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
82
98
|
<link rel="stylesheet" href="${fontsHref}" />
|
|
83
99
|
\`\`\`
|
|
84
|
-
- **
|
|
85
|
-
|
|
100
|
+
- **Fontsource** or self-hosted \`@font-face\` work too - just register the families above.
|
|
101
|
+
If a family isn't on Google Fonts, self-host it.
|
|
86
102
|
|
|
87
103
|
---
|
|
88
104
|
`
|