@tangle-network/sandbox-ui 0.10.8 → 0.10.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/README.md +46 -0
- package/dist/globals.css +0 -1
- package/dist/styles.css +0 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,6 +35,52 @@ Import styles in your app root:
|
|
|
35
35
|
import "@tangle-network/sandbox-ui/styles";
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
### Fonts
|
|
39
|
+
|
|
40
|
+
sandbox-ui references the following font families in its design tokens but does **not** bundle them — consumer apps must load the fonts themselves. This is deliberate: a URL `@import` inside a library CSS bundle breaks when downstream apps chain-import the stylesheet (see CHANGELOG 0.10.9 for the full reasoning).
|
|
41
|
+
|
|
42
|
+
| Family | Role | Used as CSS variable |
|
|
43
|
+
| ------------ | ----------------------------------- | -------------------- |
|
|
44
|
+
| Geist | UI body text | `--font-sans` |
|
|
45
|
+
| Geist Mono | Code, terminal | `--font-mono` |
|
|
46
|
+
| Outfit | Display / headings (default theme) | `--font-display` |
|
|
47
|
+
| Manrope | Display / headings (vault theme) | `--font-display` |
|
|
48
|
+
| Inter | UI body (vault theme) | `--font-sans` |
|
|
49
|
+
|
|
50
|
+
Pick one loading strategy that fits your app:
|
|
51
|
+
|
|
52
|
+
**1. Self-hosted via `@fontsource/*`** (recommended — no external network request):
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
npm install @fontsource/geist-sans @fontsource/geist-mono @fontsource/outfit @fontsource/manrope @fontsource/inter
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
// app entry
|
|
60
|
+
import "@fontsource/geist-sans/400.css";
|
|
61
|
+
import "@fontsource/geist-sans/500.css";
|
|
62
|
+
import "@fontsource/geist-sans/600.css";
|
|
63
|
+
import "@fontsource/geist-sans/700.css";
|
|
64
|
+
import "@fontsource/geist-mono/400.css";
|
|
65
|
+
import "@fontsource/geist-mono/500.css";
|
|
66
|
+
import "@fontsource/outfit/500.css";
|
|
67
|
+
import "@fontsource/outfit/700.css";
|
|
68
|
+
import "@fontsource/manrope/500.css";
|
|
69
|
+
import "@fontsource/manrope/700.css";
|
|
70
|
+
import "@fontsource/inter/400.css";
|
|
71
|
+
import "@fontsource/inter/600.css";
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**2. Google Fonts via HTML `<link>`:**
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
78
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
79
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" />
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Any family you omit falls back per the `--font-*` token chain (e.g. `--font-sans` falls back to `"DM Sans", ui-sans-serif, system-ui, sans-serif`).
|
|
83
|
+
|
|
38
84
|
If you are building on the sandbox SDK directly, use `useSdkSession` to turn raw SDK/session-gateway events into the `messages + partMap` model that `ChatContainer` and `SandboxWorkbench` expect:
|
|
39
85
|
|
|
40
86
|
```tsx
|
package/dist/globals.css
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");
|
|
3
2
|
@layer properties;
|
|
4
3
|
:root, [data-sandbox-ui] {
|
|
5
4
|
--md3-surface: #0a0a14;
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");
|
|
3
2
|
@layer properties;
|
|
4
3
|
:root, [data-sandbox-ui] {
|
|
5
4
|
--md3-surface: #0a0a14;
|
package/package.json
CHANGED