GRIN/eranos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bundled fonts and background images for all 8 new theme presets

Browse Source 
Install Cinzel, Nunito, Quicksand, Courier Prime, and Comic Neue as
bundled fonts and register them in the font registry. Add Unsplash
background images to every new preset (Gothic, Cottage, Candy Heart,
Midnight, Hologram, Floret, Win 95, Plush).
This commit is contained in:
Mary Kate Fain
2026-03-04 19:34:24 -06:00
parent 16c9009d5f
commit 8f140c4eaa
4 changed files with 161 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+70
View File
@@ -17,6 +17,7 @@
"@dnd-kit/utilities": "^3.2.2",
"@emoji-mart/data": "^1.2.1",
"@emoji-mart/react": "^1.1.1",
"@fontsource-variable/cinzel": "^5.2.8",
"@fontsource-variable/comfortaa": "^5.2.8",
"@fontsource-variable/dm-sans": "^5.2.8",
"@fontsource-variable/inter": "^5.2.6",
@@ -24,11 +25,15 @@
"@fontsource-variable/lora": "^5.2.8",
"@fontsource-variable/merriweather": "^5.2.6",
"@fontsource-variable/montserrat": "^5.2.8",
"@fontsource-variable/nunito": "^5.2.7",
"@fontsource-variable/outfit": "^5.2.8",
"@fontsource-variable/playfair-display": "^5.2.8",
"@fontsource-variable/quicksand": "^5.2.10",
"@fontsource/bungee-shade": "^5.2.7",
"@fontsource/cherry-bomb-one": "^5.2.7",
"@fontsource/comic-neue": "^5.2.7",
"@fontsource/comic-relief": "^5.2.2",
"@fontsource/courier-prime": "^5.2.8",
"@fontsource/creepster": "^5.2.7",
"@fontsource/luckiest-guy": "^5.2.8",
"@fontsource/permanent-marker": "^5.2.7",
@@ -1158,6 +1163,14 @@
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
"license": "MIT"
},
"node_modules/@fontsource-variable/cinzel": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource-variable/cinzel/-/cinzel-5.2.8.tgz",
"integrity": "sha512-62ddfR79tYNWxIZJPlyFGBusbnONbPL6d163mT/jZOGV4vV8so6Z3buRM5epqtiA6qcVVeF8OZijJJGeLABGJg==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource-variable/comfortaa": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource-variable/comfortaa/-/comfortaa-5.2.8.tgz",
@@ -1221,6 +1234,14 @@
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource-variable/nunito": {
"version": "5.2.7",
"resolved": "https://registry.npmjs.org/@fontsource-variable/nunito/-/nunito-5.2.7.tgz",
"integrity": "sha512-2N8QhatkyKgSUbAGZO2FYLioxA32+RyI1EplVLawbpkGjUeui9Qg9VMrpkCaik1ydjFjfLV+kzQ0cGEsMrMenQ==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource-variable/outfit": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource-variable/outfit/-/outfit-5.2.8.tgz",
@@ -1239,6 +1260,14 @@
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource-variable/quicksand": {
"version": "5.2.10",
"resolved": "https://registry.npmjs.org/@fontsource-variable/quicksand/-/quicksand-5.2.10.tgz",
"integrity": "sha512-1uzkzGDwWgtFnxquAXuD7fZV9wHkALb49UPzRXxGTVeeLsNrGnIU0O/pcz6m1U7RDtpHz2qx77JhCpKaq7FrUg==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/bungee-shade": {
"version": "5.2.7",
"resolved": "https://registry.npmjs.org/@fontsource/bungee-shade/-/bungee-shade-5.2.7.tgz",
@@ -1255,6 +1284,14 @@
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/comic-neue": {
"version": "5.2.7",
"resolved": "https://registry.npmjs.org/@fontsource/comic-neue/-/comic-neue-5.2.7.tgz",
"integrity": "sha512-tNi0Nxbz0QMwHvZWJSP5G0SXq8CeX5b+K3l3q/afPmJ/WlQ+i3/NfOYWBzsojCZko1lNplfmjbsOGMuBs4WmcA==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/comic-relief": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/@fontsource/comic-relief/-/comic-relief-5.2.2.tgz",
@@ -1264,6 +1301,14 @@
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/courier-prime": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/courier-prime/-/courier-prime-5.2.8.tgz",
"integrity": "sha512-M3xOCcXnGuFi9TcGCrz4hm5yeWg4Sn35MALRLPnqNoHhawTFvhyi2KSI2+5RyFtDNJrb58bPh8LLipgiI9KA0w==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/creepster": {
"version": "5.2.7",
"resolved": "https://registry.npmjs.org/@fontsource/creepster/-/creepster-5.2.7.tgz",
@@ -3217,6 +3262,7 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3230,6 +3276,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3243,6 +3290,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3256,6 +3304,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3269,6 +3318,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3282,6 +3332,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3295,6 +3346,7 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3308,6 +3360,7 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3321,6 +3374,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3334,6 +3388,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3347,6 +3402,7 @@
"cpu": [
"loong64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3360,6 +3416,7 @@
"cpu": [
"loong64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3373,6 +3430,7 @@
"cpu": [
"ppc64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3386,6 +3444,7 @@
"cpu": [
"ppc64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3399,6 +3458,7 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3412,6 +3472,7 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3425,6 +3486,7 @@
"cpu": [
"s390x"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3438,6 +3500,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3451,6 +3514,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3464,6 +3528,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3477,6 +3542,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3490,6 +3556,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3503,6 +3570,7 @@
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3516,6 +3584,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -3529,6 +3598,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
package.json
+5
View File
@@ -24,6 +24,7 @@
"@dnd-kit/utilities": "^3.2.2",
"@emoji-mart/data": "^1.2.1",
"@emoji-mart/react": "^1.1.1",
"@fontsource-variable/cinzel": "^5.2.8",
"@fontsource-variable/comfortaa": "^5.2.8",
"@fontsource-variable/dm-sans": "^5.2.8",
"@fontsource-variable/inter": "^5.2.6",
@@ -31,11 +32,15 @@
"@fontsource-variable/lora": "^5.2.8",
"@fontsource-variable/merriweather": "^5.2.6",
"@fontsource-variable/montserrat": "^5.2.8",
"@fontsource-variable/nunito": "^5.2.7",
"@fontsource-variable/outfit": "^5.2.8",
"@fontsource-variable/playfair-display": "^5.2.8",
"@fontsource-variable/quicksand": "^5.2.10",
"@fontsource/bungee-shade": "^5.2.7",
"@fontsource/cherry-bomb-one": "^5.2.7",
"@fontsource/comic-neue": "^5.2.7",
"@fontsource/comic-relief": "^5.2.2",
"@fontsource/courier-prime": "^5.2.8",
"@fontsource/creepster": "^5.2.7",
"@fontsource/luckiest-guy": "^5.2.8",
"@fontsource/permanent-marker": "^5.2.7",
src/lib/fonts.ts
+46
View File
@@ -170,6 +170,52 @@ export const bundledFonts: BundledFont[] = [
load: () => import('@fontsource/press-start-2p/400.css').then(() => {}),
cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff2',
},
{
family: 'Cinzel',
cssFamily: 'Cinzel Variable',
category: 'serif',
variable: true,
load: () => import('@fontsource-variable/cinzel').then(() => {}),
cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/cinzel:vf@latest/latin-wght-normal.woff2',
},
{
family: 'Nunito',
cssFamily: 'Nunito Variable',
category: 'sans',
variable: true,
load: () => import('@fontsource-variable/nunito').then(() => {}),
cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/nunito:vf@latest/latin-wght-normal.woff2',
},
{
family: 'Quicksand',
cssFamily: 'Quicksand Variable',
category: 'sans',
variable: true,
load: () => import('@fontsource-variable/quicksand').then(() => {}),
cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/quicksand:vf@latest/latin-wght-normal.woff2',
},
{
family: 'Courier Prime',
cssFamily: 'Courier Prime',
category: 'mono',
variable: false,
load: async () => {
await import('@fontsource/courier-prime/400.css');
await import('@fontsource/courier-prime/700.css');
},
cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/courier-prime@latest/latin-400-normal.woff2',
},
{
family: 'Comic Neue',
cssFamily: 'Comic Neue',
category: 'handwriting',
variable: false,
load: async () => {
await import('@fontsource/comic-neue/400.css');
await import('@fontsource/comic-neue/700.css');
},
cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/comic-neue@latest/latin-400-normal.woff2',
},
];
/** Map from lowercase family name to BundledFont for quick lookup. */
src/themes.ts
+40
View File
@@ -305,6 +305,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '0 100% 45%',
},
font: { family: 'Cinzel' },
background: {
url: 'https://images.unsplash.com/photo-1518882570535-be5e3f4d8e76?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
cottage: {
@@ -317,6 +322,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '43 80% 55%',
},
font: { family: 'Lora' },
background: {
url: 'https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
candyheart: {
@@ -328,6 +338,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '330 85% 55%',
},
font: { family: 'Comfortaa' },
background: {
url: 'https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
midnight: {
@@ -340,6 +355,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '190 100% 50%',
},
font: { family: 'Inter' },
background: {
url: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
hologram: {
@@ -351,6 +371,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '280 55% 65%',
},
font: { family: 'Nunito' },
background: {
url: 'https://images.unsplash.com/photo-1517483000871-1dbf64a6e1c6?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
floret: {
@@ -362,6 +387,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '160 60% 70%',
},
font: { family: 'Quicksand' },
background: {
url: 'https://images.unsplash.com/photo-1490750967868-88aa4f44baee?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
win95: {
@@ -374,6 +404,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '240 100% 30%',
},
font: { family: 'Courier Prime' },
background: {
url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
plush: {
@@ -385,6 +420,11 @@ export const themePresets: Record<string, ThemePreset> = {
primary: '210 90% 55%',
},
font: { family: 'Comic Neue' },
background: {
url: 'https://images.unsplash.com/photo-1550684376-efcbd6e3f031?w=1920&q=80',
mode: 'cover',
mimeType: 'image/jpeg',
},
},
};