@reinvented/design 1.0.0 → 1.1.0

package/skills/visual/transitions-animations.md

@@ -0,0 +1,66 @@
+# Visual: Transitions & Animations
+
+Motion design for interactive elements.
+
+## Standard Transitions
+
+Apply these to all interactive elements:
+
+```html
+<!-- Color change on hover (buttons, links, list items) -->
+className="transition-colors duration-150"
+
+<!-- Shadow change on hover (cards) -->
+className="transition-shadow duration-150"
+
+<!-- Multi-property transitions -->
+className="transition-all duration-200"
+
+<!-- Opacity reveal (show-on-hover elements) -->
+className="opacity-0 group-hover:opacity-100 transition-opacity"
+```
+
+## Loading Spinner
+
+```tsx
+<Loader2 className="w-4 h-4 animate-spin" />
+```
+
+Always `animate-spin` on `Loader2` icon. Never use custom CSS animations for spinners.
+
+## Hover Effects
+
+| Element | Hover Class | Notes |
+|---------|-------------|-------|
+| Buttons | Built into DS components | No extra classes needed |
+| Cards (clickable) | `hover:bg-accent/50 transition-colors` | Subtle background tint |
+| List items | `hover:bg-accent transition-colors` | Slightly stronger than cards |
+| Table rows | Built into `TableRow` | Hover effect is automatic |
+| Icons/actions | `opacity-0 group-hover:opacity-100` | Reveal-on-hover pattern |
+| Links | `hover:text-foreground transition-colors` | On `text-muted-foreground` elements |
+
+## Animation Principles
+
+1. **Subtle is better** — animations should be felt, not seen
+2. **150ms for color** — fast enough to feel instant, slow enough to be smooth
+3. **200ms for position/size** — slightly longer for spatial changes
+4. **300ms for entrances** — dialogs, sheets, dropdowns
+5. **No animation for data** — text, numbers, and status changes should be instant
+
+## Button Press Effect
+
+For a subtle "pressed" feeling:
+```html
+className="active:scale-[0.98] transition-transform"
+```
+
+## Staggered Animations
+
+For list items appearing on load, use CSS animation delays:
+```html
+<div v-for="(item, i) in items" :key="item.id"
+     className="animate-in fade-in slide-in-from-bottom-2"
+     :style="{ animationDelay: `${i * 50}ms` }">
+```
+
+Only use staggered animations for initial page load, not for content that's already visible.

package/skills/visual/typography-hierarchy.md

@@ -0,0 +1,66 @@
+# Visual: Typography Hierarchy
+
+How to use type scale to create clear information architecture.
+
+## The Hierarchy Stack
+
+Every page should have a clear top-to-bottom reading Order:
+
+| Level | Classes | Use | Example |
+|-------|---------|-----|---------|
+| **1. Page Title** | `text-2xl font-bold` | One per page, topmost heading | "Dashboard", "Team Members" |
+| **2. Page Subtitle** | `text-muted-foreground` (default size or `text-sm`) | Directly below page title | "Overview of your workspace." |
+| **3. Section Heading** | `text-lg font-semibold` | Separates major content areas | "Recent Activity", "Settings" |
+| **4. Card Title** | Varies by `CardTitle` context | Inside cards/panels | "Total Revenue", "Profile" |
+| **5. Body Text** | `text-sm` | Standard content | Table cells, descriptions |
+| **6. Label** | `text-sm font-medium` | Form labels, nav items | "Email", "Projects" |
+| **7. Caption / Meta** | `text-xs text-muted-foreground` | Timestamps, counts, helper text | "Updated 2 hours ago" |
+
+## Rules
+
+1. **One `text-2xl font-bold` per page** — the page title. Never two.
+2. **`text-sm` is the default body size** — not `text-base`. This keeps the UI compact and professional.
+3. **Font weights serve meaning**:
+   - `font-bold` (700): Page titles, large stat values
+   - `font-semibold` (600): Section headings, card titles
+   - `font-medium` (500): Labels, nav items, emphasized body text
+   - Default (400): Body text, descriptions
+4. **Color creates hierarchy too**: `text-foreground` for primary text, `text-muted-foreground` for secondary
+
+## Common Patterns
+
+### Page Header
+```tsx
+<div>
+  <h1 className="text-2xl font-bold">Projects</h1>
+  <p className="text-muted-foreground">Manage and track all your projects.</p>
+</div>
+```
+
+### Section with Content
+```tsx
+<div className="space-y-4">
+  <h2 className="text-lg font-semibold">Recent Activity</h2>
+  <!-- content -->
+</div>
+```
+
+### Stat Display
+```tsx
+<div className="text-2xl font-bold">$45,231</div>
+<p className="text-xs text-muted-foreground">+20.1% from last month</p>
+```
+
+## Anti-Patterns
+
+```html
+<!-- ❌ Too many heading sizes — confusing hierarchy -->
+<h1 className="text-3xl">Page</h1>
+<h2 className="text-2xl">Section</h2>
+<h3 className="text-xl">Subsection</h3>
+<h4 className="text-lg">Sub-subsection</h4>
+
+<!-- ✅ Clean two-level hierarchy -->
+<h1 className="text-2xl font-bold">Page</h1>
+<h2 className="text-lg font-semibold">Section</h2>
+```

package/DESIGN_GUIDE.md

@@ -1,148 +0,0 @@
-# Reinvented Design Guide
-
-## Overview
-The Reinvented design system uses **Shadcn-vue** components with custom **Radix-vue** primitives,
-**Tailwind CSS** for styling, and **Lucide** icons. All UI surfaces share this consistent foundation.
-
----
-
-## Typography
-
-| Token          | Size   | Weight   | Use                    |
-|---------------|--------|----------|------------------------|
-| `text-xs`     | 12px   | 400      | Timestamps, captions   |
-| `text-sm`     | 14px   | 400–500  | Body text, labels      |
-| `text-base`   | 16px   | 400      | Default body           |
-| `text-lg`     | 18px   | 600      | Section headings       |
-| `text-xl`     | 20px   | 600      | Page subtitles         |
-| `text-2xl`    | 24px   | 700      | Page titles            |
-| `text-3xl`    | 30px   | 700      | Hero text              |
-
-**Font:** Inter (loaded via Google Fonts).
-**Line height:** Use `leading-tight` (1.25) for headings, `leading-normal` (1.5) for body.
-
----
-
-## Colors
-
-Our brand color is **purple** (`hsl(252 100% 63%)`).
-
-| Token            | Light             | Dark              | Use                    |
-|-----------------|-------------------|-------------------|------------------------|
-| `primary`       | Purple 63%        | Purple 69%        | Buttons, links, focus  |
-| `secondary`     | Zinc 96%          | Zinc 16%          | Secondary actions      |
-| `muted`         | Zinc 96%          | Zinc 16%          | Backgrounds, disabled  |
-| `destructive`   | Red 60%           | Red 31%           | Delete, errors         |
-| `success`       | Green 36%         | Green 45%         | Confirmations          |
-| `warning`       | Amber 50%         | Amber 55%         | Alerts                 |
-| `info`          | Blue 60%          | Blue 65%          | Information            |
-
-**Usage rules:**
-- Never hardcode colors — always use `hsl(var(--token))`
-- Use `text-muted-foreground` for secondary text (not arbitrary gray)
-- Apply `bg-card` for card surfaces, `bg-background` for page backgrounds
-
----
-
-## Spacing
-
-Based on **4px increments**. Use Tailwind utilities:
-
-| Class    | Value | Use                        |
-|----------|-------|----------------------------|
-| `gap-1`  | 4px   | Icon-to-text gap           |
-| `gap-2`  | 8px   | Between small elements     |
-| `gap-3`  | 12px  | Between form fields        |
-| `gap-4`  | 16px  | Section spacing            |
-| `gap-6`  | 24px  | Between major sections     |
-| `p-4`    | 16px  | Standard padding           |
-| `p-6`    | 24px  | Card padding               |
-| `px-4`   | 16px  | Page horizontal padding    |
-
-**Rules:**
-- Always use spacing tokens, never arbitrary values
-- Vertical rhythm: Use `gap-4` or `gap-6` for stacking sections
-- Horizontal rhythm: Use `gap-2` or `gap-3` for inline elements
-
----
-
-## Icons
-
-- **Library:** Lucide Vue Next (`lucide-vue-next`)
-- **NO emojis** anywhere in the UI
-- Default icon size: `16px` (`w-4 h-4`)
-- In buttons/nav: `w-4 h-4`
-- In empty states: `w-12 h-12` with `text-muted-foreground`
-- Always use `stroke-width="2"` (Lucide default)
-
----
-
-## Shadows & Borders
-
-| Token       | CSS                            | Use                        |
-|-------------|-------------------------------|----------------------------|
-| `shadow-sm` | Subtle 1px shadow             | Cards, buttons             |
-| `shadow-md` | Medium depth                  | Dropdowns, popovers        |
-| `shadow-lg` | Strong depth                  | Modals, dialogs            |
-| `rounded-md`| `calc(var(--radius) - 2px)`  | Inputs, small elements     |
-| `rounded-lg`| `var(--radius)` (10px)       | Cards, containers          |
-
----
-
-## Component Guidelines
-
-### When to use existing components
-Always check `@reinvented/design` first:
-```ts
-import { Button, Card, Input, Avatar, Badge } from '@reinvented/design'
-```
-
-### Using Radix primitives
-For Dialog, DropdownMenu, Tabs, Tooltip, PopoverSelect, etc.:
-```ts
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@reinvented/design'
-```
-Style them using `cn()` and Tailwind:
-```vue
-<DialogContent :class="cn('fixed inset-0 z-50 flex items-center justify-center')">
-```
-
-### Building new components
-1. Create in `packages/ds/src/components/ui/<name>/`
-2. Use `cn()` for class merging
-3. Accept `class` prop for customization
-4. Use design tokens (never hardcode colors)
-5. Export from barrel (`src/index.ts`)
-
----
-
-## Page Patterns
-
-Import from `@reinvented/design/patterns/*`:
-
-| Pattern       | Use                                          |
-|--------------|----------------------------------------------|
-| `ListView`   | Lists with search, filters, items            |
-| `DetailView` | Detail pages with hero, tabs, content        |
-| `FormView`   | Forms with validation and submit             |
-| `EmptyState` | Centered empty state with icon and CTA       |
-
----
-
-## Dark Mode
-
-- Controlled via `.dark` class on `<html>` or `<body>`
-- All tokens automatically switch in dark mode
-- Test both modes when building surfaces
-- Use `dark:` prefix sparingly — prefer CSS variable-driven theming
-
----
-
-## Do NOT
-
-- Use `alert()`, `confirm()`, or `prompt()` — use Dialog/AlertDialog
-- Use emojis — use Lucide icons
-- Hardcode colors — use CSS variables
-- Use arbitrary Tailwind values (e.g., `text-[#333]`) — use tokens
-- Create split-screen layouts — use single-column responsive design
-- Use `@apply` excessively — prefer utility classes in templates