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

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" }} />
)}