geist-svelte 0.2.0 → 1.0.2

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.
Files changed (2) hide show
  1. package/README.md +150 -0
  2. package/package.json +3 -2
package/README.md ADDED
@@ -0,0 +1,150 @@
1
+ # geist-svelte
2
+
3
+ [![npm version](https://img.shields.io/npm/v/geist-svelte)](https://www.npmjs.com/package/geist-svelte) [![license](https://img.shields.io/npm/l/geist-svelte)](https://www.npmjs.com/package/geist-svelte)
4
+
5
+ [Geist font family](https://vercel.com/font) for Svelte and SvelteKit. Sans, Mono, and Pixel variants.
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm i geist-svelte
11
+ ```
12
+
13
+ **Compatibility:** Svelte 4 / 5 · Tailwind v3 / v4 · SvelteKit · Svelte (Vite)
14
+
15
+ ## Quickstart
16
+
17
+ Importing a font module registers the `@font-face` rules and CSS variables (for example `--font-geist-sans`).
18
+
19
+ ### SvelteKit + Tailwind v4
20
+
21
+ ```svelte
22
+ <!-- src/routes/+layout.svelte -->
23
+ <script lang="ts">
24
+ import '../app.css';
25
+ import 'geist-svelte/font/sans';
26
+ import 'geist-svelte/font/mono';
27
+ let { children } = $props();
28
+ </script>
29
+
30
+ {@render children()}
31
+ ```
32
+
33
+ ```css
34
+ /* src/app.css */
35
+ @theme inline {
36
+ --font-sans: var(--font-geist-sans);
37
+ --font-mono: var(--font-geist-mono);
38
+ }
39
+ ```
40
+
41
+ ### Tailwind v3
42
+
43
+ Use the same font imports as above, then map variables in `tailwind.config.js`:
44
+
45
+ ```js
46
+ import { fontFamily } from 'tailwindcss/defaultTheme';
47
+
48
+ export default {
49
+ theme: {
50
+ extend: {
51
+ fontFamily: {
52
+ sans: ['var(--font-geist-sans)', ...fontFamily.sans],
53
+ mono: ['var(--font-geist-mono)', ...fontFamily.mono],
54
+ },
55
+ },
56
+ },
57
+ };
58
+ ```
59
+
60
+ ### No Tailwind
61
+
62
+ ```svelte
63
+ <!-- src/routes/+layout.svelte -->
64
+ <script lang="ts">
65
+ import 'geist-svelte/font/sans';
66
+ import 'geist-svelte/font/mono';
67
+ let { children } = $props();
68
+ </script>
69
+
70
+ {@render children()}
71
+
72
+ <style>
73
+ :global(body) {
74
+ font-family: var(--font-geist-sans);
75
+ }
76
+ :global(code, pre) {
77
+ font-family: var(--font-geist-mono);
78
+ }
79
+ </style>
80
+ ```
81
+
82
+ ### Svelte (Vite)
83
+
84
+ ```ts
85
+ // src/main.ts
86
+ import 'geist-svelte/font/sans';
87
+ import 'geist-svelte/font/mono';
88
+ ```
89
+
90
+ ## Pixel Variants
91
+
92
+ | Export | CSS Variable | Description |
93
+ | -------------------- | ------------------------------- | ------------------------ |
94
+ | `GeistPixelSquare` | `--font-geist-pixel-square` | Square pixel shapes |
95
+ | `GeistPixelGrid` | `--font-geist-pixel-grid` | Grid-based pixel pattern |
96
+ | `GeistPixelCircle` | `--font-geist-pixel-circle` | Circular pixel shapes |
97
+ | `GeistPixelTriangle` | `--font-geist-pixel-triangle` | Triangular pixel shapes |
98
+ | `GeistPixelLine` | `--font-geist-pixel-line` | Line-based pixel pattern |
99
+
100
+ ```svelte
101
+ <script lang="ts">
102
+ import 'geist-svelte/font/pixel';
103
+ </script>
104
+ ```
105
+
106
+ ## CSS Variables
107
+
108
+ | Import Path | CSS Variable |
109
+ | ------------------------------------- | -------------------------------- |
110
+ | `geist-svelte/font/sans` | `--font-geist-sans` |
111
+ | `geist-svelte/font/mono` | `--font-geist-mono` |
112
+ | `geist-svelte/font/sans-non-variable` | `--font-geist-sans-non-variable` |
113
+ | `geist-svelte/font/mono-non-variable` | `--font-geist-mono-non-variable` |
114
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-square` |
115
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-grid` |
116
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-circle` |
117
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-triangle` |
118
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-line` |
119
+
120
+ ## Non-Variable Fonts
121
+
122
+ Variable fonts are recommended (smaller). Use non-variable variants only for legacy browser support:
123
+
124
+ ```svelte
125
+ <script lang="ts">
126
+ import 'geist-svelte/font/sans-non-variable';
127
+ import 'geist-svelte/font/mono-non-variable';
128
+ </script>
129
+ ```
130
+
131
+ ## TypeScript API
132
+
133
+ Use named imports only if you need metadata:
134
+
135
+ ```ts
136
+ import { GeistSans } from 'geist-svelte/font/sans';
137
+
138
+ GeistSans.variable; // '--font-geist-sans'
139
+ GeistSans.style.fontFamily; // full font-family string with fallbacks
140
+ ```
141
+
142
+ ## Troubleshooting
143
+
144
+ - **Fonts not applying:** confirm font imports run in your root entry (`+layout.svelte` or `main.ts`) and your CSS/Tailwind theme maps the variables.
145
+ - **Unused import warnings:** use side-effect imports (`import 'geist-svelte/font/sans';`).
146
+ - **Strict CSP:** allow your built asset origin in `font-src`.
147
+
148
+ ## License
149
+
150
+ The Geist font family is free and open sourced under the [SIL Open Font License](https://scripts.sil.org/OFL). This package is licensed under the MIT License.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "geist-svelte",
3
- "version": "0.2.0",
3
+ "version": "1.0.2",
4
4
  "description": "Geist font family for Svelte/SvelteKit — Sans, Mono, and Pixel variants by Vercel.",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -58,6 +58,7 @@
58
58
  },
59
59
  "files": [
60
60
  "dist",
61
+ "README.md",
61
62
  "!dist/**/*.test.*",
62
63
  "!dist/**/*.spec.*"
63
64
  ],
@@ -74,4 +75,4 @@
74
75
  "typescript": "^5.0.0",
75
76
  "vite": "^6.3.0"
76
77
  }
77
- }
78
+ }