From 8f140c4eaafbbf80db811b5a69cf370eccac49a0 Mon Sep 17 00:00:00 2001 From: Mary Kate Fain Date: Wed, 4 Mar 2026 19:34:24 -0600 Subject: [PATCH] Add bundled fonts and background images for all 8 new theme presets 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). --- package-lock.json | 70 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 5 ++++ src/lib/fonts.ts | 46 +++++++++++++++++++++++++++++++ src/themes.ts | 40 +++++++++++++++++++++++++++ 4 files changed, 161 insertions(+) diff --git a/package-lock.json b/package-lock.json index ecb17745..df42613f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": [ diff --git a/package.json b/package.json index bc733436..bacac843 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts index 11e48ee6..1599af83 100644 --- a/src/lib/fonts.ts +++ b/src/lib/fonts.ts @@ -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. */ diff --git a/src/themes.ts b/src/themes.ts index 18da0d90..1b9460e8 100644 --- a/src/themes.ts +++ b/src/themes.ts @@ -305,6 +305,11 @@ export const themePresets: Record = { 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 = { 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 = { 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 = { 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 = { 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 = { 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 = { 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 = { 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', + }, }, };