@mindvalley/design-system 4.0.1 → 4.1.1
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/CHANGELOG.md +95 -55
- package/README.md +11 -17
- package/dist/tailwind/plugins/tokens/b2b/typography.d.ts +4 -1
- package/dist/tailwind/plugins/tokens/b2b/typography.d.ts.map +1 -1
- package/dist/tailwind/plugins/tokens/b2b/typography.js +25 -25
- package/dist/tailwind/plugins/tokens/mindvalley/typography-gsf.d.ts +15 -0
- package/dist/tailwind/plugins/tokens/mindvalley/typography-gsf.d.ts.map +1 -0
- package/dist/tailwind/plugins/tokens/mindvalley/typography-gsf.js +77 -0
- package/dist/tailwind/plugins/tokens/mindvalley/typography.d.ts.map +1 -1
- package/dist/tailwind/plugins/tokens/mindvalley/typography.js +420 -60
- package/dist/tailwind/plugins/typography-gsf.d.ts +31 -0
- package/dist/tailwind/plugins/typography-gsf.d.ts.map +1 -0
- package/dist/tailwind/plugins/typography-gsf.js +130 -0
- package/docs/README.md +25 -0
- package/docs/agents/code-style.md +84 -0
- package/docs/agents/git-workflow.md +79 -0
- package/docs/agents/testing.md +65 -0
- package/docs/agents/token-system.md +83 -0
- package/docs/{RELEASING.md → releasing.md} +9 -9
- package/docs/token-validation.md +298 -0
- package/docs/typography/README.md +58 -0
- package/docs/typography/migration.md +166 -0
- package/docs/typography/setup.md +366 -0
- package/docs/{USAGE.md → usage.md} +129 -131
- package/package.json +10 -3
- package/docs/CONTRIBUTION.md +0 -262
- package/docs/typography-fonts.md +0 -552
- package/docs/typography-token-pipeline-b2b.md +0 -156
|
@@ -0,0 +1,366 @@
|
|
|
1
|
+
# Typography setup
|
|
2
|
+
|
|
3
|
+
This guide covers how to set up typography in your application, including font loading and Tailwind plugin configuration.
|
|
4
|
+
|
|
5
|
+
## Google Sans Flex (recommended)
|
|
6
|
+
|
|
7
|
+
Google Sans Flex is a variable font that provides multiple weights and widths in a single file.
|
|
8
|
+
|
|
9
|
+
### 1. Load the font
|
|
10
|
+
|
|
11
|
+
Choose one of the following methods:
|
|
12
|
+
|
|
13
|
+
#### Option A: HTML link tags
|
|
14
|
+
|
|
15
|
+
Add to your HTML `<head>`:
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
19
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
20
|
+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet">
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
#### Option B: CSS @import (Tailwind v4)
|
|
24
|
+
|
|
25
|
+
Import directly in your CSS file - ideal for Tailwind v4's CSS-first approach:
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
/* Font import must come FIRST */
|
|
29
|
+
@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap";
|
|
30
|
+
|
|
31
|
+
@import "tailwindcss";
|
|
32
|
+
|
|
33
|
+
@config "./tailwind.config.js";
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
> **Important:** The Google Fonts `@import` must be the first statement in your CSS file. CSS requires `@import` rules to precede all other rules.
|
|
37
|
+
>
|
|
38
|
+
> **Note:** Google Sans Flex requires the variable font version to support width variations (`font-variation-settings: "wdth"`). Fontsource currently only offers static font weights, which won't work with this typography system.
|
|
39
|
+
|
|
40
|
+
### 2. Configure Tailwind plugin
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
// tailwind.config.ts
|
|
44
|
+
import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf'
|
|
45
|
+
|
|
46
|
+
export default {
|
|
47
|
+
plugins: [
|
|
48
|
+
typography({
|
|
49
|
+
brands: ['mindvalley'], // or ['b2b'] for B2B projects
|
|
50
|
+
}),
|
|
51
|
+
],
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Plugin options
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
typography({
|
|
59
|
+
// Class name casing (default: 'kebabCase')
|
|
60
|
+
casing: 'kebabCase' | 'camelCase' | 'snakeCase' | 'pascalCase' | 'noCase',
|
|
61
|
+
|
|
62
|
+
// Responsive breakpoints
|
|
63
|
+
breakpoints: {
|
|
64
|
+
tablet: '768px', // default: theme('screens.md')
|
|
65
|
+
desktop: '1024px', // default: theme('screens.lg')
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
// Optional class prefix
|
|
69
|
+
prefix: 'mv-',
|
|
70
|
+
|
|
71
|
+
// Brands to include
|
|
72
|
+
brands: ['mindvalley', 'b2b'],
|
|
73
|
+
})
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Tailwind v4 Setup
|
|
77
|
+
|
|
78
|
+
Tailwind v4 uses a CSS-first approach and doesn't require a config file by default. However, to use the typography plugin, you'll need to create a config file and load it with the `@config` directive.
|
|
79
|
+
|
|
80
|
+
**Step 1: Create `tailwind.config.js`**
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
// tailwind.config.js
|
|
84
|
+
import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf'
|
|
85
|
+
|
|
86
|
+
export default {
|
|
87
|
+
plugins: [
|
|
88
|
+
typography({
|
|
89
|
+
brands: ['mindvalley'],
|
|
90
|
+
}),
|
|
91
|
+
],
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
**Step 2: Load the config in your CSS**
|
|
96
|
+
|
|
97
|
+
```css
|
|
98
|
+
/* app.css */
|
|
99
|
+
@import "tailwindcss";
|
|
100
|
+
@config "./tailwind.config.js";
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
**Step 3: Use typography classes as normal**
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<h1 class="title-bold-1">Welcome</h1>
|
|
107
|
+
<p class="body">Body text</p>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
This same process works for the Sharp Grotesk plugin.
|
|
111
|
+
|
|
112
|
+
### 3. Use typography classes
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<h1 class="title-bold-1">Welcome to Mindvalley</h1>
|
|
116
|
+
<p class="body">This is body text using Google Sans Flex.</p>
|
|
117
|
+
<button class="button-text">Click Me</button>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
> **Important:** Typography classes are already responsive - don't add screen prefixes!
|
|
121
|
+
>
|
|
122
|
+
> ```html
|
|
123
|
+
> <!-- Bad -->
|
|
124
|
+
> <h1 class="title-bold-5 md:title-bold-3">Hello</h1>
|
|
125
|
+
>
|
|
126
|
+
> <!-- Good -->
|
|
127
|
+
> <h1 class="title-bold-5">Hello</h1>
|
|
128
|
+
> ```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## Sharp Grotesk (legacy)
|
|
133
|
+
|
|
134
|
+
Sharp Grotesk is the legacy typography system using static font files hosted on Fastly CDN.
|
|
135
|
+
|
|
136
|
+
### 1. Load the font
|
|
137
|
+
|
|
138
|
+
#### Direct CSS import
|
|
139
|
+
|
|
140
|
+
```css
|
|
141
|
+
/* Mindvalley brand */
|
|
142
|
+
@import '@mindvalley/design-system/typography/mindvalley/fonts.css';
|
|
143
|
+
|
|
144
|
+
/* B2B brand */
|
|
145
|
+
@import '@mindvalley/design-system/typography/b2b/fonts.css';
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
#### JavaScript import
|
|
149
|
+
|
|
150
|
+
```typescript
|
|
151
|
+
import '@mindvalley/design-system/typography/mindvalley/fonts.css'
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### 2. Configure Tailwind plugin
|
|
155
|
+
|
|
156
|
+
```typescript
|
|
157
|
+
// tailwind.config.ts
|
|
158
|
+
import typography from '@mindvalley/design-system/tailwind/plugins/typography'
|
|
159
|
+
|
|
160
|
+
export default {
|
|
161
|
+
plugins: [
|
|
162
|
+
typography({
|
|
163
|
+
brands: ['mindvalley'],
|
|
164
|
+
}),
|
|
165
|
+
],
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## Framework examples
|
|
172
|
+
|
|
173
|
+
### React (Vite)
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
// src/main.tsx
|
|
177
|
+
import './index.css'
|
|
178
|
+
|
|
179
|
+
import React from 'react'
|
|
180
|
+
import ReactDOM from 'react-dom/client'
|
|
181
|
+
import App from './App'
|
|
182
|
+
|
|
183
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
184
|
+
<React.StrictMode>
|
|
185
|
+
<App />
|
|
186
|
+
</React.StrictMode>,
|
|
187
|
+
)
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
```html
|
|
191
|
+
<!-- index.html -->
|
|
192
|
+
<head>
|
|
193
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
194
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
195
|
+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet">
|
|
196
|
+
</head>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Next.js (App Router)
|
|
200
|
+
|
|
201
|
+
```tsx
|
|
202
|
+
// app/layout.tsx
|
|
203
|
+
import './globals.css'
|
|
204
|
+
|
|
205
|
+
export default function RootLayout({
|
|
206
|
+
children,
|
|
207
|
+
}: {
|
|
208
|
+
children: React.ReactNode
|
|
209
|
+
}) {
|
|
210
|
+
return (
|
|
211
|
+
<html lang="en">
|
|
212
|
+
<head>
|
|
213
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
214
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
215
|
+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet" />
|
|
216
|
+
</head>
|
|
217
|
+
<body>{children}</body>
|
|
218
|
+
</html>
|
|
219
|
+
)
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
### Next.js (Pages Router)
|
|
224
|
+
|
|
225
|
+
```tsx
|
|
226
|
+
// pages/_document.tsx
|
|
227
|
+
import { Html, Head, Main, NextScript } from 'next/document'
|
|
228
|
+
|
|
229
|
+
export default function Document() {
|
|
230
|
+
return (
|
|
231
|
+
<Html lang="en">
|
|
232
|
+
<Head>
|
|
233
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
234
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
235
|
+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet" />
|
|
236
|
+
</Head>
|
|
237
|
+
<body>
|
|
238
|
+
<Main />
|
|
239
|
+
<NextScript />
|
|
240
|
+
</body>
|
|
241
|
+
</Html>
|
|
242
|
+
)
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
### Vue 3
|
|
247
|
+
|
|
248
|
+
```typescript
|
|
249
|
+
// src/main.ts
|
|
250
|
+
import { createApp } from 'vue'
|
|
251
|
+
import './assets/main.css'
|
|
252
|
+
import App from './App.vue'
|
|
253
|
+
|
|
254
|
+
createApp(App).mount('#app')
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<!-- index.html -->
|
|
259
|
+
<head>
|
|
260
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
261
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
262
|
+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet">
|
|
263
|
+
</head>
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
### Phoenix (Elixir)
|
|
267
|
+
|
|
268
|
+
Add to your layout template (`lib/your_app_web/components/layouts/root.html.heex`):
|
|
269
|
+
|
|
270
|
+
```html
|
|
271
|
+
<head>
|
|
272
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
273
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
274
|
+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet">
|
|
275
|
+
</head>
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
**For Sharp Grotesk with PostCSS/SCSS:**
|
|
279
|
+
|
|
280
|
+
Configure `postcss-import` to resolve from `node_modules`:
|
|
281
|
+
|
|
282
|
+
```javascript
|
|
283
|
+
// assets/postcss.config.js
|
|
284
|
+
module.exports = {
|
|
285
|
+
plugins: [
|
|
286
|
+
require('postcss-import')({
|
|
287
|
+
path: ['node_modules']
|
|
288
|
+
}),
|
|
289
|
+
require('tailwindcss'),
|
|
290
|
+
require('autoprefixer')
|
|
291
|
+
],
|
|
292
|
+
}
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
Then import in SCSS:
|
|
296
|
+
|
|
297
|
+
```scss
|
|
298
|
+
// assets/css/app.scss
|
|
299
|
+
@import '@mindvalley/design-system/dist/typography/mindvalley/fonts.css';
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
> **Note:** When using `@import` with `postcss-import`, use the full `dist/` path.
|
|
303
|
+
|
|
304
|
+
### CSS-in-JS (Styled Components)
|
|
305
|
+
|
|
306
|
+
```tsx
|
|
307
|
+
import { createGlobalStyle } from 'styled-components'
|
|
308
|
+
|
|
309
|
+
// Add the Google Fonts link tag to your HTML head
|
|
310
|
+
|
|
311
|
+
const GlobalStyles = createGlobalStyle`
|
|
312
|
+
body {
|
|
313
|
+
font-family: 'Google Sans Flex', Helvetica, Arial, sans-serif;
|
|
314
|
+
}
|
|
315
|
+
`
|
|
316
|
+
|
|
317
|
+
export default function App() {
|
|
318
|
+
return (
|
|
319
|
+
<>
|
|
320
|
+
<GlobalStyles />
|
|
321
|
+
{/* Your app content */}
|
|
322
|
+
</>
|
|
323
|
+
)
|
|
324
|
+
}
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
---
|
|
328
|
+
|
|
329
|
+
## Troubleshooting
|
|
330
|
+
|
|
331
|
+
### Fonts not loading
|
|
332
|
+
|
|
333
|
+
1. **Check link tags**: Ensure the Google Fonts link is in your HTML `<head>`
|
|
334
|
+
2. **CDN access**: Ensure your app can reach `fonts.googleapis.com`
|
|
335
|
+
3. **Variable font support**: Verify your browser supports variable fonts
|
|
336
|
+
|
|
337
|
+
### TypeScript errors
|
|
338
|
+
|
|
339
|
+
If you get TypeScript errors when importing CSS:
|
|
340
|
+
|
|
341
|
+
```typescript
|
|
342
|
+
// src/types/css.d.ts
|
|
343
|
+
declare module '*.css' {
|
|
344
|
+
const content: string
|
|
345
|
+
export default content
|
|
346
|
+
}
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
### PostCSS import issues
|
|
350
|
+
|
|
351
|
+
When using `@import` in SCSS/CSS with `postcss-import`, use the full `dist/` path:
|
|
352
|
+
|
|
353
|
+
```scss
|
|
354
|
+
/* Works */
|
|
355
|
+
@import '@mindvalley/design-system/dist/typography/mindvalley/fonts.css';
|
|
356
|
+
|
|
357
|
+
/* May not work */
|
|
358
|
+
@import '@mindvalley/design-system/typography/mindvalley/fonts.css';
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
---
|
|
362
|
+
|
|
363
|
+
## Related
|
|
364
|
+
|
|
365
|
+
- [Migration Guide](migration.md) - Migrate from Sharp Grotesk to Google Sans Flex
|
|
366
|
+
- [Typography Overview](README.md) - Class reference and overview
|