geist-svelte 0.2.0 → 1.0.0

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 +175 -0
  2. package/package.json +2 -1
package/README.md ADDED
@@ -0,0 +1,175 @@
1
+ # geist-svelte
2
+
3
+ [Geist font family](https://vercel.com/font) for Svelte and SvelteKit. Sans, Mono, and Pixel variants.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm i geist-svelte
9
+ ```
10
+
11
+ ## Usage with SvelteKit
12
+
13
+ `GeistSans` is exported from `geist-svelte/font/sans`, `GeistMono` from `geist-svelte/font/mono`, and Geist Pixel variants from `geist-svelte/font/pixel`.
14
+
15
+ ### Basic Setup
16
+
17
+ In your root `+layout.svelte`:
18
+
19
+ ```svelte
20
+ <script lang="ts">
21
+ import { GeistSans } from 'geist-svelte/font/sans';
22
+
23
+ let { children } = $props();
24
+ </script>
25
+
26
+ {@render children()}
27
+
28
+ <style>
29
+ :global(body) {
30
+ font-family: var(--font-geist-sans);
31
+ }
32
+ </style>
33
+ ```
34
+
35
+ ### Using Multiple Fonts
36
+
37
+ ```svelte
38
+ <script lang="ts">
39
+ import { GeistSans } from 'geist-svelte/font/sans';
40
+ import { GeistMono } from 'geist-svelte/font/mono';
41
+
42
+ let { children } = $props();
43
+ </script>
44
+
45
+ {@render children()}
46
+
47
+ <style>
48
+ :global(body) {
49
+ font-family: var(--font-geist-sans);
50
+ }
51
+
52
+ :global(code, pre) {
53
+ font-family: var(--font-geist-mono);
54
+ }
55
+ </style>
56
+ ```
57
+
58
+ ### CSS-Only Import
59
+
60
+ If you don't need the metadata objects, you can import the CSS directly:
61
+
62
+ ```svelte
63
+ <script lang="ts">
64
+ import 'geist-svelte/font/sans';
65
+ import 'geist-svelte/font/mono';
66
+ </script>
67
+ ```
68
+
69
+ ## Pixel Variants
70
+
71
+ Geist Pixel includes five distinct variants:
72
+
73
+ | Export | CSS Variable | Description |
74
+ | -------------------- | ------------------------------- | ------------------------ |
75
+ | `GeistPixelSquare` | `--font-geist-pixel-square` | Square pixel shapes |
76
+ | `GeistPixelGrid` | `--font-geist-pixel-grid` | Grid-based pixel pattern |
77
+ | `GeistPixelCircle` | `--font-geist-pixel-circle` | Circular pixel shapes |
78
+ | `GeistPixelTriangle` | `--font-geist-pixel-triangle` | Triangular pixel shapes |
79
+ | `GeistPixelLine` | `--font-geist-pixel-line` | Line-based pixel pattern |
80
+
81
+ ```svelte
82
+ <script lang="ts">
83
+ import {
84
+ GeistPixelSquare,
85
+ GeistPixelGrid,
86
+ GeistPixelCircle,
87
+ GeistPixelTriangle,
88
+ GeistPixelLine,
89
+ } from 'geist-svelte/font/pixel';
90
+ </script>
91
+ ```
92
+
93
+ ## With Tailwind CSS
94
+
95
+ All fonts are available through CSS variables. Import the fonts in your root layout, then configure Tailwind.
96
+
97
+ ### Tailwind CSS v4
98
+
99
+ In your `app.css`:
100
+
101
+ ```css
102
+ @theme {
103
+ --font-sans: var(--font-geist-sans);
104
+ --font-mono: var(--font-geist-mono);
105
+ --font-pixel-square: var(--font-geist-pixel-square);
106
+ --font-pixel-grid: var(--font-geist-pixel-grid);
107
+ --font-pixel-circle: var(--font-geist-pixel-circle);
108
+ --font-pixel-triangle: var(--font-geist-pixel-triangle);
109
+ --font-pixel-line: var(--font-geist-pixel-line);
110
+ }
111
+ ```
112
+
113
+ ### Tailwind CSS v3
114
+
115
+ In your `tailwind.config.js`:
116
+
117
+ ```js
118
+ module.exports = {
119
+ theme: {
120
+ extend: {
121
+ fontFamily: {
122
+ sans: ['var(--font-geist-sans)'],
123
+ mono: ['var(--font-geist-mono)'],
124
+ 'pixel-square': ['var(--font-geist-pixel-square)'],
125
+ 'pixel-grid': ['var(--font-geist-pixel-grid)'],
126
+ 'pixel-circle': ['var(--font-geist-pixel-circle)'],
127
+ 'pixel-triangle': ['var(--font-geist-pixel-triangle)'],
128
+ 'pixel-line': ['var(--font-geist-pixel-line)'],
129
+ },
130
+ },
131
+ },
132
+ };
133
+ ```
134
+
135
+ ## CSS Variables
136
+
137
+ | Import Path | CSS Variable |
138
+ | ------------------------------------ | ------------------------------- |
139
+ | `geist-svelte/font/sans` | `--font-geist-sans` |
140
+ | `geist-svelte/font/mono` | `--font-geist-mono` |
141
+ | `geist-svelte/font/sans-non-variable`| `--font-geist-sans-non-variable`|
142
+ | `geist-svelte/font/mono-non-variable`| `--font-geist-mono-non-variable`|
143
+ | `geist-svelte/font/pixel` | `--font-geist-pixel-square` |
144
+ | | `--font-geist-pixel-grid` |
145
+ | | `--font-geist-pixel-circle` |
146
+ | | `--font-geist-pixel-triangle` |
147
+ | | `--font-geist-pixel-line` |
148
+
149
+ ## Non-Variable Fonts
150
+
151
+ Variable fonts (~30kb) are recommended. For browsers that don't support variable fonts, use the non-variable variants (~300kb):
152
+
153
+ ```svelte
154
+ <script lang="ts">
155
+ import { GeistSansNonVariable } from 'geist-svelte/font/sans-non-variable';
156
+ import { GeistMonoNonVariable } from 'geist-svelte/font/mono-non-variable';
157
+ </script>
158
+ ```
159
+
160
+ ## TypeScript API
161
+
162
+ Each export provides a metadata object:
163
+
164
+ ```ts
165
+ import { GeistSans } from 'geist-svelte/font/sans';
166
+
167
+ GeistSans.variable; // '--font-geist-sans'
168
+ GeistSans.style.fontFamily; // full font-family string with fallbacks
169
+ ```
170
+
171
+ ## License
172
+
173
+ The Geist font family is free and open sourced under the [SIL Open Font License](https://scripts.sil.org/OFL).
174
+
175
+ 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.0",
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
  ],