mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: all sections on by default, palette at top, fix font loading

Browse Source 
- All library defaultConfigs now enable every available section
- Color palette moved above Library picker in right panel (top of mind)
- Added fontImport() helper that injects Google Fonts @import into each
  scaffold's style tag so Plus Jakarta, DM Sans, Geist, Inter, Nunito
  actually load instead of falling back to system-ui

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-06 10:31:37 -08:00
parent eff75a1ab5
commit ef9f5a6ad3
2 changed files with 48 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/[workspace]/project/[projectId]/design/page.tsx
View File

@@ -243,7 +243,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "dm-sans", label: "DM Sans" },
{ id: "geist", label: "Geist" },
],
defaultConfig: { mode: "dark", background: "solid", nav: "standard", header: "centered", components: ["features", "pricing"], font: "system" },
defaultConfig: { mode: "dark", background: "solid", nav: "standard", header: "centered", components: ["logos", "features", "steps", "testimonials", "pricing", "faq", "cta"], font: "system" },
},
"hero-ui": {
modes: [{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }],
@@ -277,7 +277,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "geist", label: "Geist" },
{ id: "nunito", label: "Nunito" },
],
defaultConfig: { mode: "light", background: "clean", nav: "blur", header: "animated-badge", components: ["features", "metrics"], font: "system" },
defaultConfig: { mode: "light", background: "clean", nav: "blur", header: "animated-badge", components: ["features", "metrics", "avatars", "pricing", "testimonials", "cta"], font: "system" },
},
"aceternity": {
modes: [{ id: "dark", label: "Dark" }, { id: "light", label: "Light" }],
@@ -313,7 +313,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "geist", label: "Geist" },
{ id: "plus-jakarta", label: "Plus Jakarta" },
],
defaultConfig: { mode: "dark", background: "gradient", nav: "minimal", header: "gradient-text", components: ["features", "moving-cards"], font: "system" },
defaultConfig: { mode: "dark", background: "gradient", nav: "minimal", header: "gradient-text", components: ["badge", "features", "moving-cards", "bento", "pricing", "cta"], font: "system" },
},
"tailwind-only": {
modes: [{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }],
@@ -349,7 +349,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "plus-jakarta", label: "Plus Jakarta" },
{ id: "dm-sans", label: "DM Sans" },
],
defaultConfig: { mode: "light", background: "clean", nav: "minimal", header: "editorial", components: ["features", "stats", "pricing"], font: "system" },
defaultConfig: { mode: "light", background: "clean", nav: "minimal", header: "editorial", components: ["badge", "logos", "features", "stats", "testimonials", "pricing", "faq", "cta"], font: "system" },
},
};
@@ -654,6 +654,36 @@ function SurfaceSection({
)}
</div>
{/* Palette (colour) — top of mind, shown right after Lock */}
{availableColorThemes.length > 0 && (
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Colour</span>
<div style={{ display: "flex", gap: 7, flexWrap: "wrap", alignItems: "center" }}>
{availableColorThemes.map(ct => (
<button
key={ct.id}
title={ct.label}
onClick={() => !isLocked && setSelectedColorTheme(ct)}
disabled={isLocked}
style={{
width: 22, height: 22, borderRadius: "50%", border: "none", cursor: isLocked ? "not-allowed" : "pointer",
background: ct.bg ? `linear-gradient(135deg, ${ct.bg} 50%, ${ct.primary} 50%)` : ct.primary,
outline: activeColorTheme?.id === ct.id ? `2.5px solid ${ct.primary}` : "2px solid transparent",
outlineOffset: 2, transition: "transform 0.12s",
opacity: isLocked ? 0.4 : 1,
boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
}}
onMouseEnter={e => { if (!isLocked) (e.currentTarget as HTMLElement).style.transform = "scale(1.18)"; }}
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = "scale(1)"; }}
/>
))}
</div>
{activeColorTheme && (
<span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit" }}>{activeColorTheme.label}</span>
)}
</div>
)}
{/* Library — simple name buttons */}
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Library</span>
@@ -696,35 +726,6 @@ function SurfaceSection({
/>
)}
{/* Palette (colour) — shown after configurator */}
{availableColorThemes.length > 0 && (
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<span style={{ fontSize: "0.68rem", fontWeight: 600, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.08em", fontFamily: "Outfit" }}>Colour</span>
<div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
{availableColorThemes.map(ct => (
<button
key={ct.id}
title={ct.label}
onClick={() => !isLocked && setSelectedColorTheme(ct)}
disabled={isLocked}
style={{
width: 20, height: 20, borderRadius: "50%", border: "none", cursor: isLocked ? "not-allowed" : "pointer",
background: ct.bg ? `linear-gradient(135deg, ${ct.bg} 50%, ${ct.primary} 50%)` : ct.primary,
outline: activeColorTheme?.id === ct.id ? `2px solid ${ct.primary}` : "none",
outlineOffset: 2, transition: "transform 0.12s",
opacity: isLocked ? 0.4 : 1,
}}
onMouseEnter={e => { if (!isLocked) (e.currentTarget as HTMLElement).style.transform = "scale(1.15)"; }}
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = "scale(1)"; }}
/>
))}
{activeColorTheme && (
<span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit" }}>{activeColorTheme.label}</span>
)}
</div>
</div>
)}
</div>{/* end inner padding div */}
</div>{/* end right panel */}
</div>

16
components/design-scaffolds/marketing.tsx
View File

@@ -5,12 +5,21 @@ import { ThemeColor, DesignConfig, DAISY_THEMES, HEROUI_MARKETING_THEMES, ACETER
function fontStack(font?: string) {
if (font === "plus-jakarta") return '"Plus Jakarta Sans", system-ui, sans-serif';
if (font === "dm-sans") return '"DM Sans", system-ui, sans-serif';
if (font === "geist") return '"Geist", system-ui, sans-serif';
if (font === "geist") return '"Geist Sans", system-ui, sans-serif';
if (font === "inter") return '"Inter", system-ui, sans-serif';
if (font === "nunito") return '"Nunito", system-ui, sans-serif';
return "system-ui, sans-serif";
}
function fontImport(font?: string): string {
if (font === "plus-jakarta") return "@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');";
if (font === "dm-sans") return "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&display=swap');";
if (font === "geist") return "@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&display=swap');";
if (font === "inter") return "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');";
if (font === "nunito") return "@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');";
return "";
}
// Namespaced CSS keyframes (won't conflict with page styles)
const ACE_KEYFRAMES = `
@keyframes ace-blob1 { 0%,100%{transform:translate(0%,0%) scale(1)} 33%{transform:translate(28%,-22%) scale(1.12)} 66%{transform:translate(-18%,18%) scale(0.9)} }
@@ -201,6 +210,7 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
return (
<div style={{ height: "100%", fontFamily: ff, background: bg, color: text, overflow: "auto", position: "relative" }}>
<style>{fontImport(config?.font)}</style>
{bgStyle === "pattern" && (
<div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${p}22 1px, transparent 1px)`, backgroundSize: "20px 20px", pointerEvents: "none", zIndex: 0 }} />
)}
@@ -607,7 +617,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
return (
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative", color: text }}>
<style>{ACE_KEYFRAMES}</style>
<style>{ACE_KEYFRAMES + fontImport(config?.font)}</style>
<BgLayer />
{/* Nav */}
@@ -832,6 +842,7 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
return (
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
<style>{fontImport(config?.font)}</style>
{heroBgOverlay && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "70%", background: heroBgOverlay, pointerEvents: "none", zIndex: 0 }} />}
<nav style={{
@@ -1046,6 +1057,7 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
return (
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative", color: text }}>
<style>{fontImport(config?.font)}</style>
{bgStyle === "dot-grid" && (
<div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${isDark ? "#ffffff14" : "#00000012"} 1px, transparent 1px)`, backgroundSize: "20px 20px", pointerEvents: "none" }} />
)}