Skip to content

Replace chaotic gradient colors with standard Shadcn semantic colors #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hotlong merged 4 commits into from
Jan 15, 2026
Merged

Replace chaotic gradient colors with standard Shadcn semantic colors #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85ebd42
Initial plan
Copilot Jan 14, 2026
f564f18
Remove chaotic chart colors from playground, restore standard Shadcn …
Copilot Jan 14, 2026
52be163
Replace all chaotic gradient colors with standard Shadcn semantic colors
Copilot Jan 15, 2026
31a9bb3
Fix remaining gradient colors missed in code review
Copilot Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions apps/playground/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,63 @@
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;

--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

Expand Down
68 changes: 34 additions & 34 deletions apps/playground/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,35 +19,35 @@ export const Home = () => {
const [activeCategory, setActiveCategory] = useState<string>('Layouts');

return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50 text-gray-900">
<div className="min-h-screen bg-background text-foreground">
{/* Hero Section */}
<header className="bg-white/80 backdrop-blur-md border-b border-gray-200/50 sticky top-0 z-20 shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="bg-gradient-to-br from-indigo-600 to-purple-600 p-2 rounded-xl shadow-lg shadow-indigo-200">
<Box className="w-5 h-5 text-white" />
<div className="bg-primary p-2 rounded-xl shadow-lg">
<Box className="w-5 h-5 text-primary-foreground" />
</div>
<span className="font-bold text-xl tracking-tight bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">Object UI Studio</span>
<span className="font-bold text-xl tracking-tight">Object UI Studio</span>
</div>
<div className="flex items-center gap-3">
<button
onClick={() => navigate('/studio/new')}
className="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 border border-indigo-200 rounded-lg transition-all shadow-sm hover:shadow"
className="flex items-center gap-2 px-4 py-2 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg transition-all shadow-sm hover:shadow"
>
<Plus className="w-4 h-4" />
New Design
</button>
<button
onClick={() => navigate('/my-designs')}
className="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-gray-700 hover:text-gray-900 bg-white/50 hover:bg-white border border-gray-200 rounded-lg transition-all shadow-sm hover:shadow"
className="flex items-center gap-2 px-4 py-2 text-sm font-semibold bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border rounded-lg transition-all shadow-sm hover:shadow"
>
<FolderOpen className="w-4 h-4" />
My Designs
</button>
<a
href="https://github.com/objectql/objectui"
target="_blank"
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white/50 hover:bg-white border border-gray-200 rounded-lg transition-all shadow-sm hover:shadow"
className="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border rounded-lg transition-all shadow-sm hover:shadow"
>
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
Expand All @@ -62,39 +62,39 @@ export const Home = () => {
<div className="text-center mb-20 relative">
{/* Decorative elements */}
<div className="absolute inset-0 -z-10 overflow-hidden">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br from-indigo-200 to-purple-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
<div className="absolute top-20 right-1/4 w-80 h-80 bg-gradient-to-br from-blue-200 to-cyan-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
<div className="absolute top-0 left-1/4 w-96 h-96 bg-muted/20 rounded-full blur-3xl opacity-30 animate-pulse"></div>
<div className="absolute top-20 right-1/4 w-80 h-80 bg-muted/30 rounded-full blur-3xl opacity-30 animate-pulse"></div>
</div>

<div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-50 border border-indigo-200 rounded-full text-sm font-semibold text-indigo-700 mb-6 shadow-sm">
<div className="inline-flex items-center gap-2 px-4 py-2 bg-muted border border-border rounded-full text-sm font-semibold text-muted-foreground mb-6 shadow-sm">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
</span>
Interactive Visual Editor
</div>

<h1 className="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight text-gray-900 mb-6 leading-tight">
<h1 className="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-tight">
Build Stunning Interfaces,<br />
<span className="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">Purely from JSON.</span>
<span className="text-primary">Purely from JSON.</span>
</h1>
<p className="max-w-2xl mx-auto text-xl text-gray-600 leading-relaxed mb-8">
<p className="max-w-2xl mx-auto text-xl text-muted-foreground leading-relaxed mb-8">
Object UI transforms JSON schemas into fully functional, accessible, and responsive React applications.
<br className="hidden sm:block" />
<span className="font-semibold text-gray-700">Select a template below or start from scratch.</span>
<span className="font-semibold">Select a template below or start from scratch.</span>
</p>

<div className="flex justify-center gap-4">
<button
onClick={() => navigate('/studio/new')}
className="flex items-center gap-2 px-6 py-3 text-lg font-bold text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-xl shadow-lg shadow-indigo-300/50 transition-all transform hover:scale-105"
className="flex items-center gap-2 px-6 py-3 text-lg font-bold bg-primary text-primary-foreground hover:bg-primary/90 rounded-xl shadow-lg transition-all transform hover:scale-105"
>
<Plus className="w-5 h-5" />
Start New Design
</button>
<button
onClick={() => navigate('/my-designs')}
className="flex items-center gap-2 px-6 py-3 text-lg font-bold text-gray-700 bg-white hover:bg-gray-50 border-2 border-gray-200 rounded-xl shadow-lg transition-all transform hover:scale-105"
className="flex items-center gap-2 px-6 py-3 text-lg font-bold bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border rounded-xl shadow-lg transition-all transform hover:scale-105"
>
<FolderOpen className="w-5 h-5" />
Open Saved
Expand All @@ -111,14 +111,14 @@ export const Home = () => {
className={`
group flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200
${activeCategory === category
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg shadow-indigo-300/50 scale-105'
: 'bg-white text-gray-700 hover:bg-gray-50 border-2 border-gray-200 hover:border-indigo-200 hover:shadow-md'}
? 'bg-primary text-primary-foreground shadow-lg scale-105'
: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border hover:shadow-md'}
`}
>
<CategoryIcon name={category} />
{category}
{activeCategory === category && (
<span className="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs font-bold">
<span className="ml-1 px-2 py-0.5 bg-primary-foreground/20 rounded-full text-xs font-bold">
{exampleCategories[category as keyof typeof exampleCategories].length}
</span>
)}
Expand All @@ -136,42 +136,42 @@ export const Home = () => {
<div
key={key}
onClick={() => navigate(`/${key}`)}
className="group relative bg-white rounded-2xl border-2 border-gray-200 overflow-hidden hover:shadow-2xl hover:shadow-indigo-500/20 transition-all duration-300 cursor-pointer hover:border-indigo-400 hover:-translate-y-1 flex flex-col h-72"
className="group relative bg-card rounded-2xl border-2 border-border overflow-hidden hover:shadow-2xl transition-all duration-300 cursor-pointer hover:border-primary hover:-translate-y-1 flex flex-col h-72"
>
{/* Gradient overlay on hover */}
<div className="absolute inset-0 bg-gradient-to-br from-indigo-500/0 via-purple-500/0 to-pink-500/0 group-hover:from-indigo-500/5 group-hover:via-purple-500/5 group-hover:to-pink-500/5 transition-all duration-500 pointer-events-none z-10"></div>
{/* Overlay on hover */}
<div className="absolute inset-0 bg-primary/0 group-hover:bg-primary/5 transition-all duration-500 pointer-events-none z-10"></div>

{/* Mock Preview Window */}
<div className="bg-gradient-to-br from-gray-50 to-slate-100 border-b border-gray-200 p-6 flex-1 flex items-center justify-center overflow-hidden relative">
<div className="bg-muted border-b border-border p-6 flex-1 flex items-center justify-center overflow-hidden relative">
{/* Decorative grid */}
<div className="absolute inset-0 opacity-20 bg-dot-pattern-sm"></div>

<div className="relative w-3/4 h-3/4 bg-white shadow-xl border-2 border-gray-300 rounded-xl flex flex-col group-hover:scale-110 transition-transform duration-500">
<div className="h-5 border-b-2 border-gray-200 bg-gradient-to-b from-gray-100 to-gray-50 flex items-center px-2 gap-1.5 rounded-t-xl">
<div className="relative w-3/4 h-3/4 bg-card shadow-xl border-2 border-border rounded-xl flex flex-col group-hover:scale-110 transition-transform duration-500">
<div className="h-5 border-b-2 border-border bg-muted flex items-center px-2 gap-1.5 rounded-t-xl">
<div className="w-2 h-2 rounded-full bg-red-500 shadow-sm"></div>
<div className="w-2 h-2 rounded-full bg-yellow-500 shadow-sm"></div>
<div className="w-2 h-2 rounded-full bg-green-500 shadow-sm"></div>
</div>
<div className="flex-1 p-3">
<div className="space-y-2.5">
<div className="h-2.5 bg-gradient-to-r from-indigo-200 to-purple-200 rounded-full w-1/2 animate-pulse"></div>
<div className="h-2.5 bg-gradient-to-r from-blue-200 to-cyan-200 rounded-full w-3/4 animate-pulse [animation-delay:75ms]"></div>
<div className="h-2.5 bg-gradient-to-r from-purple-200 to-pink-200 rounded-full w-full animate-pulse [animation-delay:150ms]"></div>
<div className="h-2.5 bg-muted rounded-full w-1/2 animate-pulse"></div>
<div className="h-2.5 bg-muted rounded-full w-3/4 animate-pulse [animation-delay:75ms]"></div>
<div className="h-2.5 bg-muted rounded-full w-full animate-pulse [animation-delay:150ms]"></div>
</div>
</div>
</div>
</div>

<div className="p-6 relative z-10 bg-white border-t border-gray-100">
<h3 className="text-lg font-bold text-gray-900 group-hover:text-indigo-600 transition-colors mb-2">
<div className="p-6 relative z-10 bg-card border-t border-border">
<h3 className="text-lg font-bold group-hover:text-primary transition-colors mb-2">
{title}
</h3>
<div className="flex items-center justify-between">
<div className="flex items-center text-sm font-semibold text-gray-500 group-hover:text-indigo-600 transition-colors">
<div className="flex items-center text-sm font-semibold text-muted-foreground group-hover:text-primary transition-colors">
Launch Studio
<ArrowRight className="w-4 h-4 ml-2 transform group-hover:translate-x-2 transition-transform" />
</div>
<div className="px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-xs font-bold group-hover:bg-indigo-600 group-hover:text-white transition-colors">
<div className="px-3 py-1 bg-muted text-muted-foreground rounded-full text-xs font-bold group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
Try Now
</div>
</div>
Expand Down
Loading
Loading