olly-molly 0.1.0 → 0.1.3

package/app/design-system/page.tsx

@@ -1,242 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Button } from '@/components/ui/Button';
-import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/Card';
-import { Badge, StatusBadge, PriorityBadge } from '@/components/ui/Badge';
-import { Input } from '@/components/ui/Input';
-import { Textarea } from '@/components/ui/Textarea';
-import { Select } from '@/components/ui/Select';
-import { Modal } from '@/components/ui/Modal';
-import { Avatar } from '@/components/ui/Avatar';
-import { ThemeToggle } from '@/components/ThemeToggle';
-
-export default function DesignSystemPage() {
-    const [selectValue, setSelectValue] = useState('');
-    const [modalOpen, setModalOpen] = useState(false);
-
-    return (
-        <div className="min-h-screen bg-[var(--bg-primary)]">
-            {/* Header */}
-            <header className="border-b border-[var(--border-primary)]">
-                <div className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
-                    <div className="flex items-center gap-4">
-                        <Image
-                            src="/app-icon.png"
-                            alt="Olly Molly"
-                            width={32}
-                            height={32}
-                            className="opacity-80"
-                        />
-                        <div>
-                            <h1 className="text-sm font-medium text-[var(--text-primary)]">Design System</h1>
-                            <p className="text-xs text-[var(--text-muted)]">Olly Molly</p>
-                        </div>
-                    </div>
-                    <div className="flex items-center gap-4">
-                        <Link href="/" className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
-                            ← Back
-                        </Link>
-                        <ThemeToggle />
-                    </div>
-                </div>
-            </header>
-
-            <main className="max-w-5xl mx-auto px-6 py-12">
-                {/* Intro */}
-                <div className="mb-16">
-                    <h1 className="text-display text-[var(--text-primary)] mb-4">Design System</h1>
-                    <p className="text-body text-[var(--text-secondary)] max-w-lg">
-                        Minimal design inspired by fontshare.com. Cream backgrounds, black text, thin borders.
-                    </p>
-                </div>
-
-                {/* Colors */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Colors</h2>
-                    <div className="border-t border-[var(--border-primary)]">
-                        <ColorRow name="bg-primary" value="#F5F4EE" />
-                        <ColorRow name="bg-secondary" value="#EFEDE5" />
-                        <ColorRow name="bg-card" value="#FAFAF7" />
-                        <ColorRow name="border-primary" value="#E0DED6" />
-                        <ColorRow name="text-primary" value="#1A1A1A" isText />
-                        <ColorRow name="text-secondary" value="#4A4A4A" isText />
-                        <ColorRow name="text-muted" value="#9A9A9A" isText />
-                    </div>
-                </section>
-
-                {/* Typography */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Typography</h2>
-                    <div className="border-t border-[var(--border-primary)] divide-y divide-[var(--border-primary)]">
-                        <div className="py-4 flex items-baseline justify-between">
-                            <span className="text-display text-[var(--text-primary)]">Display</span>
-                            <span className="text-xs text-[var(--text-muted)]">2.5rem / 500</span>
-                        </div>
-                        <div className="py-4 flex items-baseline justify-between">
-                            <span className="text-heading-1 text-[var(--text-primary)]">Heading 1</span>
-                            <span className="text-xs text-[var(--text-muted)]">1.75rem / 500</span>
-                        </div>
-                        <div className="py-4 flex items-baseline justify-between">
-                            <span className="text-heading-2 text-[var(--text-primary)]">Heading 2</span>
-                            <span className="text-xs text-[var(--text-muted)]">1.25rem / 500</span>
-                        </div>
-                        <div className="py-4 flex items-baseline justify-between">
-                            <span className="text-body text-[var(--text-primary)]">Body Text</span>
-                            <span className="text-xs text-[var(--text-muted)]">0.875rem</span>
-                        </div>
-                        <div className="py-4 flex items-baseline justify-between">
-                            <span className="text-caption text-[var(--text-muted)]">CAPTION TEXT</span>
-                            <span className="text-xs text-[var(--text-muted)]">0.75rem</span>
-                        </div>
-                    </div>
-                </section>
-
-                {/* Buttons */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Buttons</h2>
-                    <div className="border-t border-[var(--border-primary)] py-6">
-                        <div className="flex flex-wrap items-center gap-4 mb-6">
-                            <Button variant="primary">Primary</Button>
-                            <Button variant="secondary">Secondary</Button>
-                            <Button variant="ghost">Ghost</Button>
-                            <Button variant="danger">Danger</Button>
-                        </div>
-                        <div className="flex flex-wrap items-center gap-4">
-                            <Button size="sm">Small</Button>
-                            <Button size="md">Medium</Button>
-                            <Button size="lg">Large</Button>
-                            <Button disabled>Disabled</Button>
-                        </div>
-                    </div>
-                </section>
-
-                {/* Badges */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Badges</h2>
-                    <div className="border-t border-[var(--border-primary)] py-6">
-                        <div className="flex flex-wrap gap-3 mb-4">
-                            <Badge>Default</Badge>
-                            <Badge variant="success">Success</Badge>
-                            <Badge variant="warning">Warning</Badge>
-                            <Badge variant="danger">Danger</Badge>
-                            <Badge variant="info">Info</Badge>
-                        </div>
-                        <div className="flex flex-wrap gap-3 mb-4">
-                            <StatusBadge status="TODO" />
-                            <StatusBadge status="IN_PROGRESS" />
-                            <StatusBadge status="IN_REVIEW" />
-                            <StatusBadge status="COMPLETE" />
-                        </div>
-                        <div className="flex flex-wrap gap-3">
-                            <PriorityBadge priority="LOW" />
-                            <PriorityBadge priority="MEDIUM" />
-                            <PriorityBadge priority="HIGH" />
-                            <PriorityBadge priority="CRITICAL" />
-                        </div>
-                    </div>
-                </section>
-
-                {/* Cards */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Cards</h2>
-                    <div className="border border-[var(--border-primary)]">
-                        <Card variant="bordered">
-                            <CardHeader>
-                                <h3 className="text-sm font-medium text-[var(--text-primary)]">Card Title</h3>
-                            </CardHeader>
-                            <CardContent>
-                                <p className="text-sm text-[var(--text-secondary)]">
-                                    Minimal card with thin borders and no shadows.
-                                </p>
-                            </CardContent>
-                            <CardFooter>
-                                <div className="flex justify-end gap-3">
-                                    <Button variant="ghost" size="sm">Cancel</Button>
-                                    <Button size="sm">Save</Button>
-                                </div>
-                            </CardFooter>
-                        </Card>
-                    </div>
-                </section>
-
-                {/* Form Elements */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Form Elements</h2>
-                    <div className="border-t border-[var(--border-primary)] py-6 space-y-6 max-w-md">
-                        <Input label="Input" placeholder="Enter text..." />
-                        <Input label="With Error" placeholder="Enter text..." error="This field has an error" />
-                        <Select
-                            label="Select"
-                            value={selectValue}
-                            onChange={setSelectValue}
-                            placeholder="Choose option..."
-                            options={[
-                                { value: '1', label: 'Option 1' },
-                                { value: '2', label: 'Option 2' },
-                            ]}
-                        />
-                        <Textarea label="Textarea" placeholder="Write here..." rows={3} />
-                    </div>
-                </section>
-
-                {/* Avatars */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Avatars</h2>
-                    <div className="border-t border-[var(--border-primary)] py-6">
-                        <div className="flex items-end gap-6">
-                            <Avatar name="John Doe" size="sm" />
-                            <Avatar name="Jane Smith" size="md" />
-                            <Avatar name="Bob Wilson" size="lg" />
-                            <Avatar name="PM" emoji="👔" size="md" />
-                        </div>
-                    </div>
-                </section>
-
-                {/* Modal */}
-                <section className="mb-16">
-                    <h2 className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-6">Modal</h2>
-                    <div className="border-t border-[var(--border-primary)] py-6">
-                        <Button onClick={() => setModalOpen(true)}>Open Modal</Button>
-                    </div>
-                </section>
-            </main>
-
-            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title="Modal Title">
-                <p className="text-sm text-[var(--text-secondary)] mb-6">
-                    Minimal modal dialog with thin borders.
-                </p>
-                <div className="flex justify-end gap-3">
-                    <Button variant="ghost" onClick={() => setModalOpen(false)}>Cancel</Button>
-                    <Button onClick={() => setModalOpen(false)}>Confirm</Button>
-                </div>
-            </Modal>
-
-            {/* Footer */}
-            <footer className="border-t border-[var(--border-primary)] py-8">
-                <p className="text-center text-xs text-[var(--text-muted)]">
-                    Olly Molly Design System
-                </p>
-            </footer>
-        </div>
-    );
-}
-
-function ColorRow({ name, value, isText = false }: { name: string; value: string; isText?: boolean }) {
-    return (
-        <div className="flex items-center justify-between py-3 border-b border-[var(--border-primary)]">
-            <div className="flex items-center gap-4">
-                <div
-                    className={`w-8 h-8 border border-[var(--border-primary)] ${isText ? 'flex items-center justify-center bg-[var(--bg-card)]' : ''}`}
-                    style={{ backgroundColor: isText ? undefined : value }}
-                >
-                    {isText && <span style={{ color: value }} className="text-sm font-medium">A</span>}
-                </div>
-                <span className="text-sm text-[var(--text-primary)]">{name}</span>
-            </div>
-            <span className="text-xs text-[var(--text-muted)] font-mono">{value}</span>
-        </div>
-    );
-}

package/app/globals.css

@@ -1,318 +0,0 @@
-@import "tailwindcss";
-
-/* ================================
-   DESIGN SYSTEM - Minimal Paper
-   Inspired by fontshare.com
-   ================================ */
-
-/* Light theme (default) - Minimal cream aesthetic */
-:root,
-[data-theme="light"] {
-  /* Backgrounds - cream/eggshell tones */
-  --bg-primary: #F5F4EE;
-  --bg-secondary: #EFEDE5;
-  --bg-tertiary: #E8E6DC;
-  --bg-card: #FAFAF7;
-  --bg-card-hover: #F5F4EE;
-  --bg-column: #F5F4EE;
-  
-  /* Borders - subtle, thin lines */
-  --border-primary: #E0DED6;
-  --border-secondary: #D0CEC4;
-  --border-accent: #1A1A1A;
-  
-  /* Text - high contrast black/gray */
-  --text-primary: #1A1A1A;
-  --text-secondary: #4A4A4A;
-  --text-tertiary: #7A7A7A;
-  --text-muted: #9A9A9A;
-  
-  /* Accent - minimal, just black */
-  --accent-primary: #1A1A1A;
-  --accent-secondary: #3A3A3A;
-  --accent-light: #E0DED6;
-  
-  /* Status colors - muted, minimal */
-  --status-todo: #F5F4EE;
-  --status-todo-text: #7A7A7A;
-  --status-progress: #FFF8E7;
-  --status-progress-text: #996B00;
-  --status-review: #F5F0FF;
-  --status-review-text: #6B4FA0;
-  --status-done: #F0F7F0;
-  --status-done-text: #2D6A2D;
-  
-  /* Priority colors - subtle */
-  --priority-low: #F5F4EE;
-  --priority-low-text: #7A7A7A;
-  --priority-medium: #FFF8E7;
-  --priority-medium-text: #996B00;
-  --priority-high: #FFF0F0;
-  --priority-high-text: #B03030;
-  --priority-critical: #FFE0E0;
-  --priority-critical-text: #901010;
-  
-  /* Shadows - minimal to none */
-  --shadow-sm: none;
-  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.06);
-  --shadow-card: none;
-}
-
-/* Dark theme - Inverted minimal */
-[data-theme="dark"] {
-  /* Backgrounds */
-  --bg-primary: #141414;
-  --bg-secondary: #1C1C1C;
-  --bg-tertiary: #242424;
-  --bg-card: #1C1C1C;
-  --bg-card-hover: #242424;
-  --bg-column: #1C1C1C;
-  
-  /* Borders */
-  --border-primary: #2A2A2A;
-  --border-secondary: #3A3A3A;
-  --border-accent: #FFFFFF;
-  
-  /* Text */
-  --text-primary: #F5F4EE;
-  --text-secondary: #C0C0C0;
-  --text-tertiary: #8A8A8A;
-  --text-muted: #5A5A5A;
-  
-  /* Accents */
-  --accent-primary: #FFFFFF;
-  --accent-secondary: #E0E0E0;
-  --accent-light: #2A2A2A;
-  
-  /* Status colors - dark variants */
-  --status-todo: #1C1C1C;
-  --status-todo-text: #8A8A8A;
-  --status-progress: #2A2517;
-  --status-progress-text: #E0B030;
-  --status-review: #251A2A;
-  --status-review-text: #B090E0;
-  --status-done: #1A2A1A;
-  --status-done-text: #70C070;
-  
-  /* Priority colors - dark variants */
-  --priority-low: #1C1C1C;
-  --priority-low-text: #8A8A8A;
-  --priority-medium: #2A2517;
-  --priority-medium-text: #E0B030;
-  --priority-high: #2A1717;
-  --priority-high-text: #E07070;
-  --priority-critical: #3A1A1A;
-  --priority-critical-text: #FF8080;
-  
-  /* Shadows */
-  --shadow-sm: none;
-  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.2);
-  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3);
-  --shadow-card: none;
-}
-
-/* Tailwind theme integration */
-@theme inline {
-  --color-background: var(--bg-primary);
-  --color-foreground: var(--text-primary);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-/* ================================
-   BASE STYLES
-   ================================ */
-
-html {
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-body {
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ================================
-   TYPOGRAPHY SYSTEM
-   ================================ */
-
-.text-display {
-  font-size: 2.5rem;
-  font-weight: 500;
-  line-height: 1.1;
-  letter-spacing: -0.03em;
-}
-
-.text-heading-1 {
-  font-size: 1.75rem;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -0.02em;
-}
-
-.text-heading-2 {
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-}
-
-.text-heading-3 {
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.4;
-}
-
-.text-body-lg {
-  font-size: 1rem;
-  line-height: 1.6;
-}
-
-.text-body {
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
-
-.text-body-sm {
-  font-size: 0.8125rem;
-  line-height: 1.5;
-}
-
-.text-caption {
-  font-size: 0.75rem;
-  line-height: 1.4;
-  letter-spacing: 0.01em;
-}
-
-/* ================================
-   UTILITY CLASSES
-   ================================ */
-
-/* Background utilities */
-.bg-primary { background-color: var(--bg-primary) !important; }
-.bg-secondary { background-color: var(--bg-secondary) !important; }
-.bg-tertiary { background-color: var(--bg-tertiary) !important; }
-.bg-card { background-color: var(--bg-card) !important; }
-.bg-column { background-color: var(--bg-column) !important; }
-
-/* Text utilities */
-.text-primary { color: var(--text-primary) !important; }
-.text-secondary { color: var(--text-secondary) !important; }
-.text-tertiary { color: var(--text-tertiary) !important; }
-.text-muted { color: var(--text-muted) !important; }
-.text-accent { color: var(--accent-primary) !important; }
-
-/* Border utilities */
-.border-primary { border-color: var(--border-primary) !important; }
-.border-secondary { border-color: var(--border-secondary) !important; }
-.border-accent { border-color: var(--border-accent) !important; }
-
-/* ================================
-   SCROLLBAR STYLING
-   ================================ */
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border-secondary);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-/* ================================
-   ANIMATIONS
-   ================================ */
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes zoom-in-95 {
-  from { 
-    opacity: 0;
-    transform: scale(0.98);
-  }
-  to { 
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes gentle-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.animate-in {
-  animation-duration: 150ms;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-
-.fade-in { animation-name: fade-in; }
-.zoom-in-95 { animation-name: zoom-in-95; }
-.slide-up { animation-name: slide-up; }
-.gentle-pulse { animation: gentle-pulse 2s ease-in-out infinite; }
-
-/* ================================
-   LINE CLAMP
-   ================================ */
-
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* ================================
-   MINIMAL BORDER STYLE
-   ================================ */
-
-.border-thin {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-primary);
-}
-
-.divider {
-  height: 1px;
-  background-color: var(--border-primary);
-  width: 100%;
-}

package/app/layout.tsx

@@ -1,37 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import { ThemeProvider } from "@/components/ThemeProvider";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Olly Molly",
-  description: "Manage your AI development team with Olly Molly",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <ThemeProvider>
-          {children}
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}