@eduboxpro/studio 0.1.5 → 0.1.7
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 +59 -0
- package/fesm2022/eduboxpro-studio.mjs +649 -4
- package/fesm2022/eduboxpro-studio.mjs.map +1 -1
- package/index.d.ts +453 -9
- package/package.json +1 -1
- package/src/styles/studio.scss +18 -0
package/README.md
CHANGED
|
@@ -212,6 +212,11 @@ provideStudioConfig({
|
|
|
212
212
|
},
|
|
213
213
|
typography: {
|
|
214
214
|
fontFamily: 'Inter, sans-serif',
|
|
215
|
+
fontMono: 'JetBrains Mono, monospace',
|
|
216
|
+
googleFonts: [
|
|
217
|
+
{ family: 'Inter', weights: [400, 500, 600, 700], display: 'swap' },
|
|
218
|
+
{ family: 'JetBrains Mono', weights: [400, 500, 600], display: 'swap' }
|
|
219
|
+
],
|
|
215
220
|
fontSize: {
|
|
216
221
|
sm: '0.875rem',
|
|
217
222
|
base: '1rem',
|
|
@@ -261,6 +266,60 @@ provideStudioConfig({
|
|
|
261
266
|
})
|
|
262
267
|
```
|
|
263
268
|
|
|
269
|
+
### Google Fonts Integration
|
|
270
|
+
|
|
271
|
+
The library supports automatic loading of Google Fonts. Simply configure the fonts you want to use in the `googleFonts` array:
|
|
272
|
+
|
|
273
|
+
```typescript
|
|
274
|
+
provideStudioConfig({
|
|
275
|
+
theme: {
|
|
276
|
+
typography: {
|
|
277
|
+
// Specify fonts to load from Google Fonts
|
|
278
|
+
googleFonts: [
|
|
279
|
+
{
|
|
280
|
+
family: 'Poppins',
|
|
281
|
+
weights: [400, 500, 600, 700],
|
|
282
|
+
display: 'swap'
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
family: 'Inter',
|
|
286
|
+
weights: [400, 500, 600, 700],
|
|
287
|
+
display: 'swap'
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
family: 'JetBrains Mono',
|
|
291
|
+
weights: [400, 500, 600],
|
|
292
|
+
display: 'swap'
|
|
293
|
+
}
|
|
294
|
+
],
|
|
295
|
+
// Set the default font family
|
|
296
|
+
fontFamily: 'Poppins, system-ui, -apple-system, sans-serif',
|
|
297
|
+
fontMono: 'JetBrains Mono, monospace'
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
})
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
**Parameters:**
|
|
304
|
+
- `family` - Font family name from Google Fonts
|
|
305
|
+
- `weights` - Array of font weights to load (e.g., [400, 500, 600, 700])
|
|
306
|
+
- `display` - Font display strategy: `'swap'` (recommended), `'auto'`, `'block'`, `'fallback'`, or `'optional'`
|
|
307
|
+
|
|
308
|
+
**Note:** Fonts are loaded automatically when the app initializes. The library will:
|
|
309
|
+
1. Add preconnect links to Google Fonts CDN for better performance
|
|
310
|
+
2. Load the specified fonts with the chosen weights
|
|
311
|
+
3. Apply the fonts to all library components
|
|
312
|
+
|
|
313
|
+
You can dynamically change fonts at runtime by updating the CSS variable:
|
|
314
|
+
|
|
315
|
+
```typescript
|
|
316
|
+
// Update font family programmatically
|
|
317
|
+
document.documentElement.style.setProperty(
|
|
318
|
+
'--studio-font-family',
|
|
319
|
+
'Inter, system-ui, sans-serif'
|
|
320
|
+
);
|
|
321
|
+
```
|
|
322
|
+
|
|
264
323
|
## License
|
|
265
324
|
|
|
266
325
|
MIT © EduBoxPro Team
|