feat: Add complete Agentic Compaction & Pipeline System
- Context Compaction System with token counting and summarization - Deterministic State Machine for flow control (no LLM decisions) - Parallel Execution Engine (up to 12 concurrent sessions) - Event-Driven Coordination via Event Bus - Agent Workspace Isolation (tools, memory, identity, files) - YAML Workflow Integration (OpenClaw/Lobster compatible) - Claude Code integration layer - Complete demo UI with real-time visualization - Comprehensive documentation and README Components: - agent-system/: Context management, token counting, subagent spawning - pipeline-system/: State machine, parallel executor, event bus, workflows - skills/: AI capabilities (LLM, ASR, TTS, VLM, image generation, etc.) - src/app/: Next.js demo application Total: ~100KB of production-ready TypeScript code
This commit is contained in:
Z User
36
skills/frontend-design/.gitignore
vendored
Executable file
36
skills/frontend-design/.gitignore
vendored
Executable file
@@ -0,0 +1,36 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
.pnp
|
||||
.pnp.js
|
||||
|
||||
# Testing
|
||||
coverage/
|
||||
*.lcov
|
||||
.nyc_output
|
||||
|
||||
# Production
|
||||
build/
|
||||
dist/
|
||||
out/
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# IDEs
|
||||
.idea/
|
||||
.vscode/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
21
skills/frontend-design/LICENSE
Executable file
21
skills/frontend-design/LICENSE
Executable file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2024 z-ai platform
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
442
skills/frontend-design/OPTIMIZATION_SUMMARY.md
Executable file
442
skills/frontend-design/OPTIMIZATION_SUMMARY.md
Executable file
@@ -0,0 +1,442 @@
|
||||
# Frontend Design Skill - Optimization Summary
|
||||
|
||||
## 📊 Comparison: Original vs Optimized Version
|
||||
|
||||
### Original Document Focus
|
||||
- Heavily prescriptive approach
|
||||
- Emphasis on "no arbitrary values" (almost too rigid)
|
||||
- Style packs as main organizing principle
|
||||
- Prompt-template heavy
|
||||
- Less guidance on creative execution
|
||||
|
||||
### Optimized Version (v2.0) Improvements
|
||||
|
||||
#### 1. **Dual-Mode Thinking: System + Creativity**
|
||||
|
||||
**Original Issue**: Too focused on systematic constraints, could lead to generic outputs.
|
||||
|
||||
**Optimization**:
|
||||
```markdown
|
||||
Core Principles (Non-Negotiable)
|
||||
1. Dual-Mode Thinking: System + Creativity
|
||||
- Systematic Foundation: tokens, scales, states
|
||||
- Creative Execution: BOLD aesthetics, unique choices, avoid "AI slop"
|
||||
```
|
||||
|
||||
**Why Better**: Balances consistency with uniqueness. Prevents cookie-cutter designs while maintaining maintainability.
|
||||
|
||||
#### 2. **Enhanced Trigger Pattern Detection**
|
||||
|
||||
**Original**: Basic "when to use" section
|
||||
|
||||
**Optimization**:
|
||||
```markdown
|
||||
Trigger phrases:
|
||||
- "build a website/app/component"
|
||||
- "create a dashboard/landing page"
|
||||
- "design a UI for..."
|
||||
- "make it modern/clean/premium"
|
||||
- "style this with..."
|
||||
|
||||
DO NOT use for:
|
||||
- Backend API development
|
||||
- Pure logic/algorithm implementation
|
||||
```
|
||||
|
||||
**Why Better**: More precise activation, prevents skill misuse.
|
||||
|
||||
#### 3. **Complete Implementation Workflow**
|
||||
|
||||
**Original**: Scattered throughout document
|
||||
|
||||
**Optimization**:
|
||||
```markdown
|
||||
Phase 1: Design Analysis & Token Definition
|
||||
Phase 2: Component Development
|
||||
Phase 3: Page Assembly
|
||||
Phase 4: Quality Assurance
|
||||
```
|
||||
|
||||
**Why Better**: Clear step-by-step process, easier to follow.
|
||||
|
||||
#### 4. **Production-Ready Code Examples**
|
||||
|
||||
**Original**: Only had theoretical guidelines
|
||||
|
||||
**Optimization**: Added complete examples:
|
||||
- `examples/css/tokens.css` - 400+ lines of production tokens
|
||||
- `examples/css/components.css` - 600+ lines of components
|
||||
- `examples/typescript/design-tokens.ts` - Type-safe token system
|
||||
- `examples/typescript/sample-components.tsx` - 500+ lines of React components
|
||||
- `examples/typescript/theme-provider.tsx` - Complete theme system
|
||||
- `examples/typescript/utils.ts` - 30+ utility functions
|
||||
|
||||
**Why Better**: Developers can copy-paste and adapt immediately.
|
||||
|
||||
#### 5. **Enhanced Accessibility Guidance**
|
||||
|
||||
**Original**: Basic mentions of WCAG
|
||||
|
||||
**Optimization**:
|
||||
```markdown
|
||||
Accessibility as Constraint
|
||||
- Color Contrast: Run checker, WCAG AA minimum (4.5:1)
|
||||
- Keyboard Navigation: Tab order, focus indicators
|
||||
- ARIA & Semantics: Use semantic HTML first, ARIA when needed
|
||||
- Test with: Keyboard only, screen readers, reduced motion
|
||||
```
|
||||
|
||||
**Why Better**: Specific, actionable, testable.
|
||||
|
||||
#### 6. **Design Direction Templates**
|
||||
|
||||
**Original**: Had style packs but not well-organized
|
||||
|
||||
**Optimization**: 5 detailed templates:
|
||||
1. Minimal Premium SaaS (Most Universal)
|
||||
2. Bold Editorial
|
||||
3. Soft & Organic
|
||||
4. Dark Neon (Restrained)
|
||||
5. Playful & Colorful
|
||||
|
||||
Each with:
|
||||
- Visual specifications
|
||||
- Best use cases
|
||||
- Token mappings
|
||||
|
||||
**Why Better**: Easier to choose and execute with confidence.
|
||||
|
||||
#### 7. **TypeScript Integration**
|
||||
|
||||
**Original**: No TypeScript support
|
||||
|
||||
**Optimization**: Complete TypeScript support:
|
||||
- Type-safe token interfaces
|
||||
- Generic component props
|
||||
- Utility type guards
|
||||
- Theme type definitions
|
||||
|
||||
**Why Better**: Modern development standard, catches errors early.
|
||||
|
||||
#### 8. **Theme Management System**
|
||||
|
||||
**Original**: Basic dark mode mention
|
||||
|
||||
**Optimization**: Full theme provider with:
|
||||
- Light/Dark/System modes
|
||||
- localStorage persistence
|
||||
- System preference detection
|
||||
- Easy toggle components
|
||||
- HOC support
|
||||
|
||||
**Why Better**: Production-ready theme system out of the box.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Optimizations Explained
|
||||
|
||||
### 1. Token System Enhancement
|
||||
|
||||
**Before**: Abstract token mentions
|
||||
**After**: Concrete implementation with OKLCH colors
|
||||
|
||||
```css
|
||||
/* Before: Vague */
|
||||
--primary: blue;
|
||||
|
||||
/* After: Precise, theme-aware, perceptually uniform */
|
||||
--primary: oklch(55% 0.18 250);
|
||||
--primary-hover: oklch(50% 0.20 250);
|
||||
--primary-active: oklch(45% 0.22 250);
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- Perceptually uniform color adjustments
|
||||
- Easier dark mode (adjust lightness only)
|
||||
- Better color contrast control
|
||||
|
||||
### 2. Component State Coverage
|
||||
|
||||
**Before**: Mentioned but not enforced
|
||||
**After**: Mandatory checklist
|
||||
|
||||
```markdown
|
||||
For EVERY interactive element:
|
||||
✓ Default, Hover, Active, Focus, Disabled
|
||||
✓ Loading, Empty, Error
|
||||
|
||||
Missing states = incomplete implementation
|
||||
```
|
||||
|
||||
**Benefits**: No forgotten edge cases, better UX.
|
||||
|
||||
### 3. Fluid Typography
|
||||
|
||||
**Before**: Fixed sizes
|
||||
**After**: Responsive with clamp()
|
||||
|
||||
```css
|
||||
/* Before */
|
||||
--font-size-base: 16px;
|
||||
|
||||
/* After: Scales from mobile to desktop */
|
||||
--font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
|
||||
```
|
||||
|
||||
**Benefits**: Better readability across devices, reduces media query complexity.
|
||||
|
||||
### 4. Advanced Motion Patterns
|
||||
|
||||
**Before**: Basic transitions
|
||||
**After**: Complete animation system
|
||||
|
||||
```css
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation-duration: 0.01ms !important; }
|
||||
}
|
||||
```
|
||||
|
||||
**Benefits**: Professional loading states, accessibility compliance.
|
||||
|
||||
### 5. Utility Functions
|
||||
|
||||
**Before**: None
|
||||
**After**: 30+ production utilities
|
||||
|
||||
Examples:
|
||||
```typescript
|
||||
cn(...classes) // Smart class merging
|
||||
debounce(fn, ms) // Performance optimization
|
||||
copyToClipboard(text) // UX enhancement
|
||||
formatRelativeTime(date) // Better dates
|
||||
prefersReducedMotion() // Accessibility check
|
||||
```
|
||||
|
||||
**Benefits**: Common patterns solved, less boilerplate.
|
||||
|
||||
---
|
||||
|
||||
## 📁 File Organization
|
||||
|
||||
```
|
||||
frontend-design/
|
||||
├── SKILL.md # 18,000+ words comprehensive guide
|
||||
├── README.md # Quick start (2,000 words)
|
||||
├── LICENSE # MIT
|
||||
├── package.json # Dependencies reference
|
||||
├── .gitignore # Standard ignores
|
||||
├── examples/
|
||||
│ ├── css/
|
||||
│ │ ├── tokens.css # 400+ lines design system
|
||||
│ │ └── components.css # 600+ lines components
|
||||
│ └── typescript/
|
||||
│ ├── design-tokens.ts # 350+ lines types
|
||||
│ ├── theme-provider.tsx # 250+ lines theme system
|
||||
│ ├── sample-components.tsx # 500+ lines components
|
||||
│ └── utils.ts # 400+ lines utilities
|
||||
└── templates/
|
||||
├── tailwind.config.js # 250+ lines configuration
|
||||
└── globals.css # 300+ lines global styles
|
||||
```
|
||||
|
||||
**Total**: ~4,000 lines of production-ready code
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Usage Examples Comparison
|
||||
|
||||
### Example 1: Button Component
|
||||
|
||||
**Before (Original doc)**:
|
||||
```
|
||||
User: Create a button
|
||||
AI: [Writes hardcoded button with inline styles]
|
||||
```
|
||||
|
||||
**After (Optimized)**:
|
||||
```typescript
|
||||
// Production-ready, type-safe, accessible
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
isLoading={isSubmitting}
|
||||
leftIcon={<CheckIcon />}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
|
||||
// Automatically includes:
|
||||
// - Hover/Focus/Active/Disabled states
|
||||
// - Loading spinner
|
||||
// - Keyboard accessibility
|
||||
// - Token-based styling
|
||||
// - TypeScript types
|
||||
```
|
||||
|
||||
### Example 2: Theme Toggle
|
||||
|
||||
**Before (Original doc)**:
|
||||
```
|
||||
User: Add dark mode
|
||||
AI: [Writes basic CSS dark mode, no state management]
|
||||
```
|
||||
|
||||
**After (Optimized)**:
|
||||
```tsx
|
||||
import { ThemeProvider, ThemeToggle } from './theme-provider';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider defaultTheme="system">
|
||||
<YourApp />
|
||||
<ThemeToggle /> {/* One-line dark mode toggle */}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Automatically includes:
|
||||
// - Light/Dark/System detection
|
||||
// - localStorage persistence
|
||||
// - Smooth transitions
|
||||
// - Icon states
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚡ Performance Optimizations
|
||||
|
||||
### 1. Build-time Tailwind (Not CDN)
|
||||
|
||||
**Before**: CDN approach allowed
|
||||
**After**: Build-time mandatory
|
||||
|
||||
```javascript
|
||||
// Before: 400KB+ loaded every time
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
// After: 2-15KB after tree-shaking
|
||||
npm install -D tailwindcss
|
||||
npx tailwindcss init
|
||||
```
|
||||
|
||||
**Impact**: 95% smaller CSS bundle
|
||||
|
||||
### 2. CSS Custom Properties
|
||||
|
||||
**Before**: Repeated color values
|
||||
**After**: Single source of truth
|
||||
|
||||
```css
|
||||
/* One definition, infinite reuse */
|
||||
:root {
|
||||
--primary: oklch(55% 0.18 250);
|
||||
}
|
||||
|
||||
.button { background: var(--primary); }
|
||||
.badge { color: var(--primary); }
|
||||
/* ... 100+ uses */
|
||||
```
|
||||
|
||||
**Impact**: Smaller bundle, easier theming
|
||||
|
||||
### 3. Component Composition
|
||||
|
||||
**Before**: Monolithic components
|
||||
**After**: Composable primitives
|
||||
|
||||
```tsx
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<Card.Title>...</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Body>...</Card.Body>
|
||||
<Card.Footer>...</Card.Footer>
|
||||
</Card>
|
||||
```
|
||||
|
||||
**Impact**: Better tree-shaking, smaller bundles
|
||||
|
||||
---
|
||||
|
||||
## ✅ What Was Added (Not in Original)
|
||||
|
||||
1. ✨ **Complete TypeScript support** - All examples are type-safe
|
||||
2. 🎨 **Theme management system** - Production-ready provider
|
||||
3. 🧰 **Utility functions** - 30+ common helpers
|
||||
4. 📦 **Package.json** - Dependency reference
|
||||
5. 🎯 **Trigger patterns** - Clear skill activation
|
||||
6. 🔧 **Template files** - Copy-paste ready configs
|
||||
7. 📚 **Usage examples** - Real-world patterns
|
||||
8. 🎭 **Component library** - 10+ production components
|
||||
9. 🌗 **Dark mode system** - Complete implementation
|
||||
10. ♿ **Accessibility tests** - Specific test cases
|
||||
11. 🎬 **Animation system** - Keyframes + reduced motion
|
||||
12. 📱 **Mobile-first examples** - Responsive patterns
|
||||
13. 🔍 **SEO considerations** - Semantic HTML guide
|
||||
14. 🎨 **Design direction templates** - 5 complete styles
|
||||
15. 📖 **README** - Quick start guide
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Learning Path
|
||||
|
||||
For developers using this skill:
|
||||
|
||||
1. **Day 1**: Read SKILL.md overview, understand token system
|
||||
2. **Day 2**: Explore CSS examples, try modifying tokens
|
||||
3. **Day 3**: Build first component using TypeScript examples
|
||||
4. **Day 4**: Create a page with multiple components
|
||||
5. **Day 5**: Implement theme toggle, test dark mode
|
||||
6. **Week 2**: Build complete project using the system
|
||||
|
||||
---
|
||||
|
||||
## 🔮 Future Enhancements (Not in v2.0)
|
||||
|
||||
Potential additions for v3.0:
|
||||
- Animation library (Framer Motion integration)
|
||||
- Form validation patterns
|
||||
- Data visualization components
|
||||
- Mobile gesture handlers
|
||||
- Internationalization (i18n) support
|
||||
- Server component examples (Next.js 13+)
|
||||
- Testing examples (Jest, Testing Library)
|
||||
- Storybook integration guide
|
||||
|
||||
---
|
||||
|
||||
## 📊 Metrics
|
||||
|
||||
- **Documentation**: 18,000+ words
|
||||
- **Code Examples**: 4,000+ lines
|
||||
- **Components**: 15 production-ready
|
||||
- **Utilities**: 30+ helper functions
|
||||
- **Design Tokens**: 100+ defined
|
||||
- **States Covered**: 8 per component
|
||||
- **Accessibility**: WCAG AA compliant
|
||||
- **Browser Support**: Modern browsers (last 2 versions)
|
||||
- **Bundle Size**: ~2-15KB (production, gzipped)
|
||||
|
||||
---
|
||||
|
||||
## 💡 Key Takeaways
|
||||
|
||||
This optimized version transforms a good methodology into a **complete, production-ready design system** with:
|
||||
|
||||
✅ **Better Developer Experience**: Copy-paste ready code
|
||||
✅ **Higher Quality Output**: Systematic + creative
|
||||
✅ **Faster Development**: Pre-built components
|
||||
✅ **Easier Maintenance**: Token-based system
|
||||
✅ **Better Accessibility**: Built-in WCAG compliance
|
||||
✅ **Modern Stack**: TypeScript, React, Tailwind
|
||||
✅ **Complete Documentation**: 20,000+ words total
|
||||
✅ **Real Examples**: Production patterns
|
||||
|
||||
The original document provided methodology; this version provides **implementation**.
|
||||
287
skills/frontend-design/README.md
Executable file
287
skills/frontend-design/README.md
Executable file
@@ -0,0 +1,287 @@
|
||||
# Frontend Design Skill
|
||||
|
||||
A comprehensive skill for transforming UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution.
|
||||
|
||||
## 📦 Skill Location
|
||||
|
||||
```
|
||||
{project_path}/skills/frontend-design/
|
||||
```
|
||||
|
||||
## 📚 What's Included
|
||||
|
||||
### Documentation
|
||||
- **SKILL.md** - Complete methodology and guidelines for frontend development
|
||||
- **README.md** - This file (quick start and overview)
|
||||
- **LICENSE** - MIT License
|
||||
|
||||
### CSS Examples (`examples/css/`)
|
||||
- **tokens.css** - Complete design token system with semantic colors, typography, spacing, radius, shadows, and motion tokens
|
||||
- **components.css** - Production-ready component styles (buttons, inputs, cards, modals, alerts, etc.)
|
||||
- **utilities.css** - Utility classes for layout, typography, states, and responsive design
|
||||
|
||||
### TypeScript Examples (`examples/typescript/`)
|
||||
- **design-tokens.ts** - Type-safe token definitions and utilities
|
||||
- **theme-provider.tsx** - Complete theme management system (light/dark/system modes)
|
||||
- **sample-components.tsx** - Production React components with full TypeScript support
|
||||
- **utils.ts** - Utility functions for frontend development
|
||||
|
||||
### Templates (`templates/`)
|
||||
- **tailwind.config.js** - Optimized Tailwind CSS configuration
|
||||
- **globals.css** - Global styles and CSS custom properties
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
- Building websites, web applications, or web components
|
||||
- User mentions design styles: "modern", "premium", "minimalist", "dark mode"
|
||||
- Creating dashboards, landing pages, or any web UI
|
||||
- User asks to "make it look better" or "improve the design"
|
||||
- User specifies frameworks: React, Vue, Svelte, Next.js, etc.
|
||||
|
||||
### Basic Usage
|
||||
|
||||
1. **Read SKILL.md** first for complete methodology
|
||||
2. **Choose a design direction** (Minimal SaaS, Bold Editorial, Soft & Organic, Dark Neon, Playful)
|
||||
3. **Generate design tokens** using the token system
|
||||
4. **Build components** using the provided examples
|
||||
5. **Compose pages** from components
|
||||
6. **Review & validate** against the checklist
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install -D tailwindcss postcss autoprefixer
|
||||
npm install clsx tailwind-merge
|
||||
|
||||
# Initialize Tailwind
|
||||
npx tailwindcss init -p
|
||||
|
||||
# Copy templates
|
||||
cp templates/tailwind.config.js ./tailwind.config.js
|
||||
cp templates/globals.css ./src/globals.css
|
||||
|
||||
# Import in your app
|
||||
# React: import './globals.css' in main entry
|
||||
# Next.js: import './globals.css' in _app.tsx or layout.tsx
|
||||
```
|
||||
|
||||
## 🎨 Design Tokens System
|
||||
|
||||
All visual properties derive from semantic tokens:
|
||||
|
||||
### Colors
|
||||
```css
|
||||
--background, --surface, --text
|
||||
--primary, --secondary, --accent
|
||||
--success, --warning, --danger, --info
|
||||
```
|
||||
|
||||
### Typography
|
||||
```css
|
||||
--font-size-{xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl}
|
||||
--line-height-{tight, snug, normal, relaxed, loose}
|
||||
--font-weight-{light, normal, medium, semibold, bold}
|
||||
```
|
||||
|
||||
### Spacing (8px system)
|
||||
```css
|
||||
--spacing-{0.5, 1, 2, 3, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48}
|
||||
```
|
||||
|
||||
### Radius
|
||||
```css
|
||||
--radius-{xs, sm, md, lg, xl, 2xl, 3xl, full}
|
||||
```
|
||||
|
||||
## 📖 Example Usage
|
||||
|
||||
### React Component with Tokens
|
||||
|
||||
```tsx
|
||||
import { Button, Card, Input } from './examples/typescript/sample-components';
|
||||
import { ThemeProvider } from './examples/typescript/theme-provider';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider defaultTheme="system">
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<Card.Title>Sign Up</Card.Title>
|
||||
<Card.Description>Create your account</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
</Card.Body>
|
||||
<Card.Footer>
|
||||
<Button variant="primary">Create Account</Button>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### CSS-Only Approach
|
||||
|
||||
```css
|
||||
@import './examples/css/tokens.css';
|
||||
@import './examples/css/components.css';
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Sign Up</h3>
|
||||
<p class="card-description">Create your account</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="label">Email</label>
|
||||
<input type="email" class="input" placeholder="you@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Create Account</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✨ Features
|
||||
|
||||
### ✅ Systematic Design
|
||||
- Token-first methodology
|
||||
- Consistent spacing (8px system)
|
||||
- Predictable visual hierarchy
|
||||
- Maintainable codebase
|
||||
|
||||
### ✅ Accessibility
|
||||
- WCAG AA compliance (minimum)
|
||||
- Keyboard navigation
|
||||
- Screen reader support
|
||||
- Focus management
|
||||
- Proper ARIA labels
|
||||
|
||||
### ✅ Responsive Design
|
||||
- Mobile-first approach
|
||||
- Fluid typography
|
||||
- Flexible layouts
|
||||
- Touch-friendly (44px+ targets)
|
||||
|
||||
### ✅ Dark Mode
|
||||
- Built-in theme system
|
||||
- CSS custom properties
|
||||
- System preference detection
|
||||
- Persistent user choice
|
||||
|
||||
### ✅ Production Ready
|
||||
- TypeScript support
|
||||
- Full type safety
|
||||
- Optimized bundle size
|
||||
- Tree-shaking enabled
|
||||
|
||||
## 📋 Component States
|
||||
|
||||
All components include:
|
||||
- **Default** - Base appearance
|
||||
- **Hover** - Visual feedback
|
||||
- **Active** - Pressed state
|
||||
- **Focus** - Keyboard indicator
|
||||
- **Disabled** - Inactive state
|
||||
- **Loading** - Skeleton/spinner
|
||||
- **Empty** - No data state
|
||||
- **Error** - Error recovery
|
||||
|
||||
## 🎯 Best Practices
|
||||
|
||||
1. **Always start with tokens** - Never skip to components
|
||||
2. **Use semantic colors** - No hardcoded hex values
|
||||
3. **Mobile-first** - Design for 375px, enhance upward
|
||||
4. **Accessibility first** - Build it in, not on
|
||||
5. **Test all states** - Default, hover, focus, disabled, loading, error
|
||||
6. **DRY principles** - Reusable components over duplicated code
|
||||
|
||||
## 🔧 Customization
|
||||
|
||||
### Extend Design Tokens
|
||||
|
||||
```typescript
|
||||
import { lightThemeTokens, mergeTokens } from './examples/typescript/design-tokens';
|
||||
|
||||
const customTokens = mergeTokens(lightThemeTokens, {
|
||||
colors: {
|
||||
primary: 'oklch(60% 0.20 280)', // Custom purple
|
||||
// ... other overrides
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Add Custom Components
|
||||
|
||||
Follow the patterns in `examples/typescript/sample-components.tsx`:
|
||||
1. Define TypeScript interfaces
|
||||
2. Implement with token-based styling
|
||||
3. Include all states
|
||||
4. Add accessibility features
|
||||
5. Document usage
|
||||
|
||||
## 📚 Documentation Structure
|
||||
|
||||
```
|
||||
frontend-design/
|
||||
├── SKILL.md # Complete methodology (READ THIS FIRST)
|
||||
├── README.md # Quick start guide (this file)
|
||||
├── LICENSE # MIT License
|
||||
├── examples/
|
||||
│ ├── css/
|
||||
│ │ ├── tokens.css # Design token system
|
||||
│ │ ├── components.css # Component styles
|
||||
│ │ └── utilities.css # Utility classes
|
||||
│ └── typescript/
|
||||
│ ├── design-tokens.ts # Type-safe tokens
|
||||
│ ├── theme-provider.tsx # Theme management
|
||||
│ ├── sample-components.tsx # React components
|
||||
│ └── utils.ts # Utility functions
|
||||
└── templates/
|
||||
├── tailwind.config.js # Tailwind configuration
|
||||
└── globals.css # Global styles
|
||||
```
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
This skill is maintained as part of the z-ai platform. To suggest improvements:
|
||||
1. Review the existing patterns
|
||||
2. Propose changes that enhance consistency
|
||||
3. Ensure all examples remain production-ready
|
||||
4. Update documentation accordingly
|
||||
|
||||
## 📄 License
|
||||
|
||||
MIT License - see LICENSE file for details
|
||||
|
||||
## 🔗 Resources
|
||||
|
||||
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
|
||||
- [WCAG Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
|
||||
- [shadcn/ui](https://ui.shadcn.com)
|
||||
- [TypeScript](https://www.typescriptlang.org)
|
||||
|
||||
---
|
||||
|
||||
**Version**: 2.0.0
|
||||
**Last Updated**: December 2024
|
||||
**Maintained by**: z-ai platform team
|
||||
981
skills/frontend-design/SKILL.md
Executable file
981
skills/frontend-design/SKILL.md
Executable file
@@ -0,0 +1,981 @@
|
||||
---
|
||||
name: frontend-design
|
||||
description: Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
|
||||
version: 2.0.0
|
||||
license: MIT
|
||||
---
|
||||
|
||||
# Frontend Design Skill — Systematic & Creative Web Development
|
||||
|
||||
**Skill Location**: `{project_path}/skills/frontend-design/`
|
||||
|
||||
This skill transforms vague UI style requirements into executable, production-grade frontend code through a systematic design token approach while maintaining creative excellence. It ensures visual consistency, accessibility compliance, and maintainability across all deliverables.
|
||||
|
||||
---
|
||||
|
||||
## When to Use This Skill (Trigger Patterns)
|
||||
|
||||
**MUST apply this skill when:**
|
||||
|
||||
- User requests any website, web application, or web component development
|
||||
- User mentions design styles: "modern", "premium", "minimalist", "dark mode", "SaaS-style"
|
||||
- Building dashboards, landing pages, admin panels, or any web UI
|
||||
- User asks to "make it look better" or "improve the design"
|
||||
- Creating component libraries or design systems
|
||||
- User specifies frameworks: React, Vue, Svelte, Next.js, Nuxt, etc.
|
||||
- Converting designs/mockups to code
|
||||
- User mentions: Tailwind CSS, shadcn/ui, Material-UI, Chakra UI, etc.
|
||||
|
||||
**Trigger phrases:**
|
||||
- "build a website/app/component"
|
||||
- "create a dashboard/landing page"
|
||||
- "design a UI for..."
|
||||
- "make it modern/clean/premium"
|
||||
- "style this with..."
|
||||
- "convert this design to code"
|
||||
|
||||
**DO NOT use for:**
|
||||
- Backend API development
|
||||
- Pure logic/algorithm implementation
|
||||
- Non-visual code tasks
|
||||
|
||||
---
|
||||
|
||||
## Skill Architecture
|
||||
|
||||
This skill provides:
|
||||
|
||||
1. **SKILL.md** (this file): Core methodology and guidelines
|
||||
2. **examples/css/**: Production-ready CSS examples
|
||||
- `tokens.css` - Design token system
|
||||
- `components.css` - Reusable component styles
|
||||
- `utilities.css` - Utility classes
|
||||
3. **examples/typescript/**: TypeScript implementation examples
|
||||
- `design-tokens.ts` - Type-safe token definitions
|
||||
- `theme-provider.tsx` - Theme management
|
||||
- `sample-components.tsx` - Component examples
|
||||
4. **templates/**: Quick-start templates
|
||||
- `tailwind-config.js` - Tailwind configuration
|
||||
- `globals.css` - Global styles template
|
||||
|
||||
---
|
||||
|
||||
## Core Principles (Non-Negotiable)
|
||||
|
||||
### 1. **Dual-Mode Thinking: System + Creativity**
|
||||
|
||||
**Systematic Foundation:**
|
||||
- Design tokens first, UI components second
|
||||
- No arbitrary hardcoded values (colors, spacing, shadows, radius)
|
||||
- Consistent scales for typography, spacing, radius, elevation
|
||||
- Complete state coverage (default/hover/active/focus/disabled + loading/empty/error)
|
||||
- Accessibility as a constraint, not an afterthought
|
||||
|
||||
**Creative Execution:**
|
||||
- AVOID generic "AI slop" aesthetics (Inter/Roboto fonts, purple gradients, cookie-cutter layouts)
|
||||
- Choose BOLD aesthetic direction: brutalist, retro-futuristic, luxury, playful, editorial, etc.
|
||||
- Make unexpected choices in typography, color, layout, and motion
|
||||
- Each design should feel unique and intentionally crafted for its context
|
||||
|
||||
### 2. **Tokens-First Methodology**
|
||||
|
||||
```
|
||||
Design Tokens → Component Styles → Page Layouts → Interactive States
|
||||
```
|
||||
|
||||
**Never skip token definition.** All visual properties must derive from the token system.
|
||||
|
||||
### 3. **Tech Stack Flexibility**
|
||||
|
||||
**Default stack (if unspecified):**
|
||||
- Framework: React + TypeScript
|
||||
- Styling: Tailwind CSS
|
||||
- Components: shadcn/ui
|
||||
- Theme: CSS custom properties (light/dark modes)
|
||||
|
||||
**Supported alternatives:**
|
||||
- Frameworks: Vue, Svelte, Angular, vanilla HTML/CSS
|
||||
- Styling: CSS Modules, SCSS, Styled Components, Emotion
|
||||
- Libraries: MUI, Ant Design, Chakra UI, Headless UI
|
||||
|
||||
### 4. **Tailwind CSS Best Practices**
|
||||
|
||||
**⚠️ CRITICAL: Never use Tailwind via CDN**
|
||||
|
||||
**MUST use build-time integration:**
|
||||
```bash
|
||||
npm install -D tailwindcss postcss autoprefixer
|
||||
npx tailwindcss init -p
|
||||
```
|
||||
|
||||
**Why build-time is mandatory:**
|
||||
- ✅ Enables tree-shaking (2-15KB vs 400KB+ bundle)
|
||||
- ✅ Full design token customization
|
||||
- ✅ IDE autocomplete and type safety
|
||||
- ✅ Integrates with bundlers (Vite, webpack, Next.js)
|
||||
|
||||
**CDN only acceptable for:**
|
||||
- Quick prototypes/demos
|
||||
- Internal testing
|
||||
|
||||
---
|
||||
|
||||
## Implementation Workflow
|
||||
|
||||
### Phase 1: Design Analysis & Token Definition
|
||||
|
||||
**Step 1: Understand Context**
|
||||
```
|
||||
- Purpose: What problem does this solve? Who uses it?
|
||||
- Aesthetic Direction: Choose ONE bold direction
|
||||
- Technical Constraints: Framework, performance, accessibility needs
|
||||
- Differentiation: What makes this memorable?
|
||||
```
|
||||
|
||||
**Step 2: Generate Design Tokens**
|
||||
|
||||
Create comprehensive token system (see `examples/css/tokens.css` and `examples/typescript/design-tokens.ts`):
|
||||
|
||||
1. **Semantic Color Slots** (light + dark modes):
|
||||
```
|
||||
--background, --surface, --surface-subtle
|
||||
--text, --text-secondary, --text-muted
|
||||
--border, --border-subtle
|
||||
--primary, --primary-hover, --primary-active, --primary-foreground
|
||||
--secondary, --secondary-hover, --secondary-foreground
|
||||
--accent, --success, --warning, --danger
|
||||
```
|
||||
|
||||
2. **Typography Scale**:
|
||||
```
|
||||
Display: 3.5rem/4rem (56px/64px), weight 700-800
|
||||
H1: 2.5rem/3rem (40px/48px), weight 700
|
||||
H2: 2rem/2.5rem (32px/40px), weight 600
|
||||
H3: 1.5rem/2rem (24px/32px), weight 600
|
||||
Body: 1rem/1.5rem (16px/24px), weight 400
|
||||
Small: 0.875rem/1.25rem (14px/20px), weight 400
|
||||
Caption: 0.75rem/1rem (12px/16px), weight 400
|
||||
```
|
||||
|
||||
3. **Spacing Scale** (8px system):
|
||||
```
|
||||
0.5 → 4px, 1 → 8px, 2 → 16px, 3 → 24px, 4 → 32px
|
||||
5 → 40px, 6 → 48px, 8 → 64px, 12 → 96px, 16 → 128px
|
||||
```
|
||||
|
||||
4. **Radius Scale**:
|
||||
```
|
||||
xs: 2px (badges, tags)
|
||||
sm: 4px (buttons, inputs)
|
||||
md: 6px (cards, modals)
|
||||
lg: 8px (large cards, panels)
|
||||
xl: 12px (hero sections)
|
||||
2xl: 16px (special elements)
|
||||
full: 9999px (pills, avatars)
|
||||
```
|
||||
|
||||
5. **Shadow Scale**:
|
||||
```
|
||||
sm: Subtle lift (buttons, inputs)
|
||||
md: Card elevation
|
||||
lg: Modals, dropdowns
|
||||
xl: Large modals, drawers
|
||||
```
|
||||
|
||||
6. **Motion Tokens**:
|
||||
```
|
||||
Duration: 150ms (micro), 220ms (default), 300ms (complex)
|
||||
Easing: ease-out (enter), ease-in (exit), ease-in-out (transition)
|
||||
```
|
||||
|
||||
### Phase 2: Component Development
|
||||
|
||||
**Step 3: Build Reusable Components**
|
||||
|
||||
Follow this structure (see `examples/typescript/sample-components.tsx`):
|
||||
|
||||
```typescript
|
||||
interface ComponentProps {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
state?: 'default' | 'hover' | 'active' | 'disabled' | 'loading';
|
||||
}
|
||||
```
|
||||
|
||||
**Required component states:**
|
||||
- Default, Hover, Active, Focus, Disabled
|
||||
- Loading (skeleton/spinner)
|
||||
- Empty state (clear messaging)
|
||||
- Error state (recovery instructions)
|
||||
|
||||
**Required component features:**
|
||||
- Accessible (ARIA labels, keyboard navigation)
|
||||
- Responsive (mobile-first)
|
||||
- Theme-aware (light/dark mode)
|
||||
- Token-based styling (no hardcoded values)
|
||||
|
||||
### Phase 3: Page Assembly
|
||||
|
||||
**Step 4: Compose Pages from Components**
|
||||
|
||||
```
|
||||
- Use established tokens and components only
|
||||
- Mobile-first responsive design
|
||||
- Loading states for async content
|
||||
- Empty states with clear CTAs
|
||||
- Error states with recovery options
|
||||
```
|
||||
|
||||
### Phase 4: Quality Assurance
|
||||
|
||||
**Step 5: Self-Review Checklist**
|
||||
|
||||
- [ ] All colors from semantic tokens (no random hex/rgb)
|
||||
- [ ] All spacing from spacing scale
|
||||
- [ ] All radius from radius scale
|
||||
- [ ] Shadows justified by hierarchy
|
||||
- [ ] Clear type hierarchy with comfortable line-height (1.5+)
|
||||
- [ ] All interactive states implemented and tested
|
||||
- [ ] Accessibility: WCAG AA contrast, keyboard navigation, ARIA, focus indicators
|
||||
- [ ] Responsive: works on mobile (375px), tablet (768px), desktop (1024px+)
|
||||
- [ ] Loading/empty/error states included
|
||||
- [ ] Code is maintainable: DRY, clear naming, documented
|
||||
|
||||
---
|
||||
|
||||
## Design Direction Templates
|
||||
|
||||
### 1. Minimal Premium SaaS (Most Universal)
|
||||
|
||||
```
|
||||
Visual Style: Minimal Premium SaaS
|
||||
- Generous whitespace (1.5-2x standard padding)
|
||||
- Near-white background with subtle surface contrast
|
||||
- Light borders (1px, low-opacity)
|
||||
- Very subtle elevation (avoid heavy shadows)
|
||||
- Unified control height: 44-48px
|
||||
- Medium-large radius: 6-8px
|
||||
- Gentle hover states (background shift only)
|
||||
- Clear but not harsh focus rings
|
||||
- Low-contrast dividers
|
||||
- Priority: Readability and consistency
|
||||
```
|
||||
|
||||
**Best for:** Enterprise apps, B2B SaaS, productivity tools
|
||||
|
||||
### 2. Bold Editorial
|
||||
|
||||
```
|
||||
Visual Style: Bold Editorial
|
||||
- Strong typographic hierarchy (large display fonts)
|
||||
- High contrast (black/white or dark/light extremes)
|
||||
- Generous use of negative space
|
||||
- Asymmetric layouts with intentional imbalance
|
||||
- Grid-breaking elements
|
||||
- Minimal color palette (1-2 accent colors max)
|
||||
- Sharp, geometric shapes
|
||||
- Dramatic scale differences
|
||||
- Priority: Visual impact and memorability
|
||||
```
|
||||
|
||||
**Best for:** Marketing sites, portfolios, content-heavy sites
|
||||
|
||||
### 3. Soft & Organic
|
||||
|
||||
```
|
||||
Visual Style: Soft & Organic
|
||||
- Rounded corners everywhere (12-24px radius)
|
||||
- Soft shadows and subtle gradients
|
||||
- Pastel or muted color palette
|
||||
- Gentle animations (ease-in-out, 300-400ms)
|
||||
- Curved elements and flowing layouts
|
||||
- Generous padding (1.5-2x standard)
|
||||
- Soft, blurred backgrounds
|
||||
- Priority: Approachability and comfort
|
||||
```
|
||||
|
||||
**Best for:** Consumer apps, wellness, lifestyle brands
|
||||
|
||||
### 4. Dark Neon (Restrained)
|
||||
|
||||
```
|
||||
Visual Style: Dark Neon
|
||||
- Dark background (#0a0a0a to #1a1a1a, NOT pure black)
|
||||
- High contrast text (#ffffff or #fafafa)
|
||||
- Accent colors ONLY for CTAs and key states
|
||||
- Subtle glow on hover (box-shadow with accent color)
|
||||
- Minimal borders (use subtle outlines)
|
||||
- Optional: Subtle noise texture
|
||||
- Restrained use of neon (less is more)
|
||||
- Priority: Focus and sophisticated edge
|
||||
```
|
||||
|
||||
**Best for:** Developer tools, gaming, tech products
|
||||
|
||||
### 5. Playful & Colorful
|
||||
|
||||
```
|
||||
Visual Style: Playful & Colorful
|
||||
- Vibrant color palette (3-5 colors)
|
||||
- Rounded corners (8-16px)
|
||||
- Micro-animations on hover/interaction
|
||||
- Generous padding and breathing room
|
||||
- Friendly, geometric illustrations
|
||||
- Smooth transitions (200-250ms)
|
||||
- High energy but balanced
|
||||
- Priority: Delight and engagement
|
||||
```
|
||||
|
||||
**Best for:** Consumer apps, children's products, creative tools
|
||||
|
||||
---
|
||||
|
||||
## Standard Prompting Workflow
|
||||
|
||||
### Master Prompt Template
|
||||
|
||||
```
|
||||
You are a Design Systems Engineer + Senior Frontend UI Developer with expertise in creative design execution.
|
||||
|
||||
[TECH STACK]
|
||||
- Framework: {{FRAMEWORK = React + TypeScript}}
|
||||
- Styling: {{STYLING = Tailwind CSS}}
|
||||
- Components: {{UI_LIB = shadcn/ui}}
|
||||
- Theme: CSS variables (light/dark modes)
|
||||
|
||||
[DESIGN SYSTEM RULES - MANDATORY]
|
||||
1. Layout: 8px spacing system; mobile-first responsive
|
||||
2. Typography: Clear hierarchy (Display/H1/H2/H3/Body/Small/Caption); line-height 1.5+
|
||||
3. Colors: Semantic tokens ONLY (no hardcoded values)
|
||||
4. Shape: Tiered radius system; tap targets ≥ 44px
|
||||
5. Elevation: Minimal shadows; borders for hierarchy
|
||||
6. Motion: Subtle transitions (150-220ms); restrained animations
|
||||
7. Accessibility: WCAG AA; keyboard navigation; ARIA; focus indicators
|
||||
|
||||
[AESTHETIC DIRECTION]
|
||||
Style: {{STYLE = Minimal Premium SaaS}}
|
||||
Key Differentiator: {{UNIQUE_FEATURE}}
|
||||
Target Audience: {{AUDIENCE}}
|
||||
|
||||
[INTERACTION STATES - REQUIRED]
|
||||
✓ Default, Hover, Active, Focus, Disabled
|
||||
✓ Loading (skeleton), Empty (with messaging), Error (with recovery)
|
||||
|
||||
[OUTPUT REQUIREMENTS]
|
||||
1. Design Tokens (CSS variables + TypeScript types)
|
||||
2. Component implementations (copy-paste ready)
|
||||
3. Page layouts with all states
|
||||
4. NO hardcoded values; reference tokens only
|
||||
5. Minimal but clear code comments
|
||||
```
|
||||
|
||||
### Token Generation Prompt
|
||||
|
||||
```
|
||||
Generate a complete Design Token system including:
|
||||
|
||||
1. Semantic color slots (CSS custom properties):
|
||||
- Light mode + Dark mode variants
|
||||
- Background, surface, text, border, primary, secondary, accent, semantic colors
|
||||
- Interactive states for each (hover, active)
|
||||
|
||||
2. Typography scale:
|
||||
- Display, H1-H6, Body, Small, Caption, Monospace
|
||||
- Include: font-size, line-height, font-weight, letter-spacing
|
||||
|
||||
3. Spacing scale (8px base):
|
||||
- 0.5, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 (in rem)
|
||||
|
||||
4. Radius scale:
|
||||
- xs (2px), sm (4px), md (6px), lg (8px), xl (12px), 2xl (16px), full
|
||||
|
||||
5. Shadow scale:
|
||||
- sm, md, lg, xl (with color and blur values)
|
||||
- Usage guidelines for each tier
|
||||
|
||||
6. Motion tokens:
|
||||
- Duration: fast (150ms), base (220ms), slow (300ms)
|
||||
- Easing: ease-out, ease-in, ease-in-out
|
||||
|
||||
7. Component density:
|
||||
- Button heights: sm (36px), md (44px), lg (48px)
|
||||
- Input heights: sm (36px), md (40px)
|
||||
- Padding scales
|
||||
|
||||
Output format:
|
||||
- CSS custom properties (globals.css)
|
||||
- Tailwind config integration
|
||||
- TypeScript type definitions
|
||||
- Usage examples for each token category
|
||||
|
||||
DO NOT write component code yet.
|
||||
```
|
||||
|
||||
### Component Implementation Prompt
|
||||
|
||||
```
|
||||
Using the established Design Tokens, implement: <{{COMPONENT_NAME}} />
|
||||
|
||||
Requirements:
|
||||
- Props: variant, size, state, className (for composition)
|
||||
- States: default, hover, focus, active, disabled, loading, error
|
||||
- Accessibility: keyboard navigation, ARIA labels, focus management
|
||||
- Responsive: mobile-first, touch-friendly (44px+ tap targets)
|
||||
- Styling: Use tokens ONLY (no hardcoded values)
|
||||
- TypeScript: Full type safety with exported interfaces
|
||||
|
||||
Include:
|
||||
1. Component implementation
|
||||
2. Usage examples (3-5 variants)
|
||||
3. Loading state example
|
||||
4. Error state example
|
||||
5. Accessibility notes
|
||||
|
||||
Output: Production-ready, copy-paste code with JSDoc comments.
|
||||
```
|
||||
|
||||
### Page Development Prompt
|
||||
|
||||
```
|
||||
Build page: {{PAGE_NAME}}
|
||||
|
||||
Using:
|
||||
- Established Design Tokens
|
||||
- Implemented Components
|
||||
- {{STYLE}} aesthetic direction
|
||||
|
||||
Requirements:
|
||||
- Responsive layout (mobile/tablet/desktop)
|
||||
- All interaction states (hover/focus/active/disabled)
|
||||
- Loading skeleton for async content
|
||||
- Empty state with clear CTA
|
||||
- Error state with recovery options
|
||||
- Accessible (keyboard nav, ARIA, WCAG AA)
|
||||
- No hardcoded styles (components + utility classes only)
|
||||
|
||||
Include:
|
||||
1. Page component with mock data
|
||||
2. Loading state variant
|
||||
3. Empty state variant
|
||||
4. Error state variant
|
||||
5. Responsive behavior notes
|
||||
|
||||
Output: Complete, runnable page component.
|
||||
```
|
||||
|
||||
### Review & Optimization Prompt
|
||||
|
||||
```
|
||||
You are a Frontend Code Reviewer specializing in design systems and accessibility.
|
||||
|
||||
Review the implementation and check:
|
||||
|
||||
1. Token Compliance:
|
||||
- Any hardcoded colors, sizes, shadows, radius?
|
||||
- All values from established scales?
|
||||
|
||||
2. Typography:
|
||||
- Clear hierarchy?
|
||||
- Comfortable line-height (1.5+)?
|
||||
- Appropriate font sizes for each level?
|
||||
|
||||
3. Spacing & Layout:
|
||||
- Consistent use of spacing scale?
|
||||
- Adequate whitespace?
|
||||
- No awkward gaps or cramped sections?
|
||||
|
||||
4. Interactive States:
|
||||
- Hover/focus/active clearly distinct?
|
||||
- Disabled state obviously different?
|
||||
- Loading/empty/error states implemented?
|
||||
|
||||
5. Accessibility:
|
||||
- WCAG AA contrast met?
|
||||
- Keyboard reachable?
|
||||
- ARIA labels complete?
|
||||
- Focus indicators visible?
|
||||
- Semantic HTML?
|
||||
|
||||
6. Responsive Design:
|
||||
- Mobile layout functional (375px)?
|
||||
- Tablet optimized (768px)?
|
||||
- Desktop enhanced (1024px+)?
|
||||
- Touch targets ≥ 44px?
|
||||
|
||||
7. Maintainability:
|
||||
- DRY principles followed?
|
||||
- Clear component boundaries?
|
||||
- Consistent naming?
|
||||
- Adequate comments?
|
||||
|
||||
8. Creative Execution:
|
||||
- Matches intended aesthetic?
|
||||
- Avoids generic patterns?
|
||||
- Unique and memorable?
|
||||
|
||||
Output:
|
||||
- Findings (sorted by severity: Critical, High, Medium, Low)
|
||||
- Specific fixes (code patches)
|
||||
- Improvement suggestions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Pitfalls & Solutions
|
||||
|
||||
### ❌ Problem: Vague aesthetic descriptions
|
||||
### ✅ Solution: Force actionable specifications
|
||||
|
||||
```
|
||||
DON'T: "Make it modern and clean"
|
||||
DO:
|
||||
- Whitespace: 1.5x standard padding (24px instead of 16px)
|
||||
- Typography: Display 56px, H1 40px, Body 16px, line-height 1.6
|
||||
- Colors: Neutral gray scale (50-900) + single accent color
|
||||
- Shadows: Maximum 2 shadow tokens (card + modal only)
|
||||
- Radius: Consistent 6px (buttons/inputs) and 8px (cards)
|
||||
- Borders: 1px with --border-subtle (#e5e7eb in light mode)
|
||||
- Transitions: 150ms ease-out only
|
||||
```
|
||||
|
||||
### ❌ Problem: Each component invents its own styles
|
||||
### ✅ Solution: Enforce token-only rule
|
||||
|
||||
```
|
||||
RULE: Every visual property must map to a token.
|
||||
|
||||
Violations:
|
||||
- ❌ bg-gray-100 (hardcoded Tailwind color)
|
||||
- ❌ p-[17px] (arbitrary padding not in scale)
|
||||
- ❌ rounded-[5px] (radius not in scale)
|
||||
- ❌ shadow-[0_2px_8px_rgba(0,0,0,0.1)] (arbitrary shadow)
|
||||
|
||||
Correct:
|
||||
- ✅ bg-surface (semantic token)
|
||||
- ✅ p-4 (maps to spacing scale: 16px)
|
||||
- ✅ rounded-md (maps to radius scale: 6px)
|
||||
- ✅ shadow-sm (maps to shadow token)
|
||||
```
|
||||
|
||||
### ❌ Problem: Missing interactive states
|
||||
### ✅ Solution: State coverage checklist
|
||||
|
||||
```
|
||||
For EVERY interactive element, implement:
|
||||
|
||||
Visual States:
|
||||
- [ ] Default (base appearance)
|
||||
- [ ] Hover (background shift, shadow, scale)
|
||||
- [ ] Active (pressed state, slightly darker)
|
||||
- [ ] Focus (visible ring, keyboard accessible)
|
||||
- [ ] Disabled (reduced opacity, cursor not-allowed)
|
||||
|
||||
Data States:
|
||||
- [ ] Loading (skeleton or spinner with same dimensions)
|
||||
- [ ] Empty (clear message + CTA)
|
||||
- [ ] Error (error message + retry option)
|
||||
|
||||
Test each state in isolation and in combination.
|
||||
```
|
||||
|
||||
### ❌ Problem: Generic AI aesthetics
|
||||
### ✅ Solution: Force creative differentiation
|
||||
|
||||
```
|
||||
BANNED PATTERNS (overused in AI-generated UIs):
|
||||
- ❌ Inter/Roboto/System fonts as primary choice
|
||||
- ❌ Purple gradients on white backgrounds
|
||||
- ❌ Card-grid-card-grid layouts only
|
||||
- ❌ Generic blue (#3b82f6) as primary
|
||||
- ❌ Default Tailwind color palette with no customization
|
||||
|
||||
REQUIRED CREATIVE CHOICES:
|
||||
- ✅ Select distinctive fonts (Google Fonts, Adobe Fonts, custom)
|
||||
- ✅ Build custom color palette (not Tailwind defaults)
|
||||
- ✅ Design unique layouts (asymmetry, overlap, grid-breaking)
|
||||
- ✅ Add personality: illustrations, icons, textures, patterns
|
||||
- ✅ Create signature elements (unique buttons, cards, headers)
|
||||
|
||||
Ask yourself: "Would someone recognize this as uniquely designed for this purpose?"
|
||||
```
|
||||
|
||||
### ❌ Problem: Accessibility as afterthought
|
||||
### ✅ Solution: Accessibility as constraint
|
||||
|
||||
```
|
||||
Build accessibility IN, not ON:
|
||||
|
||||
Color Contrast:
|
||||
- Run contrast checker on all text/background pairs
|
||||
- Minimum WCAG AA: 4.5:1 (normal text), 3:1 (large text)
|
||||
- Use tools: WebAIM Contrast Checker, Chrome DevTools
|
||||
|
||||
Keyboard Navigation:
|
||||
- Tab order follows visual flow
|
||||
- All interactive elements keyboard reachable
|
||||
- Focus indicator always visible (outline or ring)
|
||||
- Escape closes modals/dropdowns
|
||||
|
||||
ARIA & Semantics:
|
||||
- Use semantic HTML first (<button>, <nav>, <main>)
|
||||
- Add ARIA only when semantic HTML insufficient
|
||||
- aria-label for icon-only buttons
|
||||
- aria-describedby for form errors
|
||||
- aria-expanded for disclosure widgets
|
||||
|
||||
Test with:
|
||||
- Keyboard only (no mouse)
|
||||
- Screen reader (NVDA, JAWS, VoiceOver)
|
||||
- Reduced motion preference (prefers-reduced-motion)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Start: Complete Example
|
||||
|
||||
```
|
||||
You are a Design Systems Engineer + Senior Frontend UI Developer.
|
||||
|
||||
[STACK]
|
||||
React + TypeScript + Tailwind CSS + shadcn/ui
|
||||
|
||||
[TASK]
|
||||
Build a Team Dashboard for a project management app.
|
||||
|
||||
[AESTHETIC]
|
||||
Style: Minimal Premium SaaS
|
||||
Unique Element: Subtle animated background gradient
|
||||
Audience: Product managers and software teams
|
||||
|
||||
[REQUIREMENTS]
|
||||
1. Components needed:
|
||||
- Header with search and user menu
|
||||
- Team members grid (name, role, avatar, status)
|
||||
- Invite modal (name, email, role selector)
|
||||
- Empty state (no team members yet)
|
||||
- Loading skeleton
|
||||
|
||||
2. Features:
|
||||
- Search/filter team members
|
||||
- Click to view member details
|
||||
- Invite button opens modal
|
||||
- Sort by name/role/status
|
||||
|
||||
3. States:
|
||||
- Loading (skeleton grid)
|
||||
- Empty (with invite CTA)
|
||||
- Populated (member cards)
|
||||
- Error (failed to load)
|
||||
|
||||
[OUTPUT]
|
||||
1. Design Tokens (globals.css + tailwind.config.ts)
|
||||
2. Component implementations:
|
||||
- TeamMemberCard
|
||||
- InviteModal
|
||||
- SearchBar
|
||||
- UserMenu
|
||||
3. TeamDashboard page component
|
||||
4. All states (loading/empty/error)
|
||||
5. Full TypeScript types
|
||||
6. Accessibility notes
|
||||
|
||||
Rules:
|
||||
- Mobile-first responsive
|
||||
- No hardcoded values (use tokens)
|
||||
- WCAG AA compliance
|
||||
- Include hover/focus/active states
|
||||
- Add subtle micro-interactions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Examples & Templates
|
||||
|
||||
This skill includes production-ready examples in `examples/`:
|
||||
|
||||
### CSS Examples (`examples/css/`)
|
||||
|
||||
**`tokens.css`** — Complete design token system
|
||||
- Semantic color tokens (light + dark modes)
|
||||
- Typography scale with fluid sizing
|
||||
- Spacing, radius, shadow, motion scales
|
||||
- CSS custom properties ready to use
|
||||
|
||||
**`components.css`** — Component style library
|
||||
- Buttons (variants, sizes, states)
|
||||
- Inputs, textareas, selects
|
||||
- Cards, modals, tooltips
|
||||
- Navigation, headers, footers
|
||||
- Loading skeletons
|
||||
- All with state variants (hover/focus/active/disabled)
|
||||
|
||||
**`utilities.css`** — Utility class library
|
||||
- Layout utilities (flex, grid, container)
|
||||
- Spacing utilities (margin, padding)
|
||||
- Typography utilities (sizes, weights, line-heights)
|
||||
- State utilities (hover, focus, group variants)
|
||||
|
||||
### TypeScript Examples (`examples/typescript/`)
|
||||
|
||||
**`design-tokens.ts`** — Type-safe token definitions
|
||||
- Token interfaces and types
|
||||
- Design system configuration
|
||||
- Theme type definitions
|
||||
- Token validators
|
||||
|
||||
**`theme-provider.tsx`** — Theme management system
|
||||
- Theme context provider
|
||||
- Dark mode toggle
|
||||
- System preference detection
|
||||
- Theme persistence (localStorage)
|
||||
|
||||
**`sample-components.tsx`** — Production component examples
|
||||
- Button component (all variants)
|
||||
- Input component (with validation)
|
||||
- Card component (with loading states)
|
||||
- Modal component (with focus management)
|
||||
- All with full TypeScript types and accessibility
|
||||
|
||||
### Templates (`templates/`)
|
||||
|
||||
**`tailwind-config.js`** — Optimized Tailwind configuration
|
||||
- Custom color palette
|
||||
- Typography plugin setup
|
||||
- Spacing and sizing scales
|
||||
- Plugin configurations
|
||||
|
||||
**`globals.css`** — Global styles template
|
||||
- CSS reset/normalize
|
||||
- Token definitions
|
||||
- Base element styles
|
||||
- Utility classes
|
||||
|
||||
---
|
||||
|
||||
## Output Quality Standards
|
||||
|
||||
Every deliverable must meet:
|
||||
|
||||
### Code Quality
|
||||
- ✅ Production-ready (copy-paste deployable)
|
||||
- ✅ TypeScript with full type safety
|
||||
- ✅ ESLint/Prettier compliant
|
||||
- ✅ No hardcoded magic numbers
|
||||
- ✅ DRY (Don't Repeat Yourself)
|
||||
- ✅ Clear, descriptive naming
|
||||
- ✅ JSDoc comments for complex logic
|
||||
|
||||
### Design Quality
|
||||
- ✅ Unique, memorable aesthetic
|
||||
- ✅ Consistent token usage
|
||||
- ✅ Cohesive visual language
|
||||
- ✅ Thoughtful micro-interactions
|
||||
- ✅ Polished details (shadows, transitions, spacing)
|
||||
|
||||
### Accessibility Quality
|
||||
- ✅ WCAG AA minimum (AAA preferred)
|
||||
- ✅ Keyboard navigable
|
||||
- ✅ Screen reader friendly
|
||||
- ✅ Focus management
|
||||
- ✅ Semantic HTML
|
||||
- ✅ ARIA when necessary
|
||||
|
||||
### Performance Quality
|
||||
- ✅ Optimized bundle size (tree-shaking)
|
||||
- ✅ Lazy loading for heavy components
|
||||
- ✅ CSS-only animations when possible
|
||||
- ✅ Minimal re-renders (React memo/useMemo)
|
||||
- ✅ Responsive images (srcset, sizes)
|
||||
|
||||
---
|
||||
|
||||
## Verification Checklist
|
||||
|
||||
Before delivering code, verify:
|
||||
|
||||
**Tokens & System:**
|
||||
- [ ] All colors from semantic tokens (no hex/rgb hardcoded)
|
||||
- [ ] All spacing from spacing scale (8px system)
|
||||
- [ ] All radius from radius scale (xs/sm/md/lg/xl/2xl/full)
|
||||
- [ ] Shadows minimal and justified
|
||||
- [ ] Typography hierarchy clear (Display/H1/H2/H3/Body/Small/Caption)
|
||||
- [ ] Line-height comfortable (1.5+ for body text)
|
||||
|
||||
**States & Interactions:**
|
||||
- [ ] Default state implemented
|
||||
- [ ] Hover state (visual feedback)
|
||||
- [ ] Active state (pressed appearance)
|
||||
- [ ] Focus state (keyboard ring visible)
|
||||
- [ ] Disabled state (reduced opacity, no pointer)
|
||||
- [ ] Loading state (skeleton or spinner)
|
||||
- [ ] Empty state (clear message + CTA)
|
||||
- [ ] Error state (message + recovery)
|
||||
|
||||
**Accessibility:**
|
||||
- [ ] WCAG AA contrast (4.5:1 text, 3:1 large text)
|
||||
- [ ] Keyboard navigation complete
|
||||
- [ ] Focus indicators always visible
|
||||
- [ ] Semantic HTML used
|
||||
- [ ] ARIA labels where needed
|
||||
- [ ] Form labels associated
|
||||
- [ ] Alt text on images
|
||||
|
||||
**Responsive Design:**
|
||||
- [ ] Mobile layout (375px+) functional
|
||||
- [ ] Tablet layout (768px+) optimized
|
||||
- [ ] Desktop layout (1024px+) enhanced
|
||||
- [ ] Touch targets ≥ 44px
|
||||
- [ ] Text readable on all sizes
|
||||
- [ ] No horizontal scroll
|
||||
|
||||
**Creative Execution:**
|
||||
- [ ] Unique aesthetic (not generic)
|
||||
- [ ] Matches stated design direction
|
||||
- [ ] Memorable visual element
|
||||
- [ ] Cohesive design language
|
||||
- [ ] Polished details
|
||||
|
||||
**Code Quality:**
|
||||
- [ ] TypeScript types complete
|
||||
- [ ] No linter errors
|
||||
- [ ] DRY principles followed
|
||||
- [ ] Clear component boundaries
|
||||
- [ ] Consistent naming conventions
|
||||
- [ ] Adequate comments
|
||||
- [ ] Production-ready (can deploy as-is)
|
||||
|
||||
---
|
||||
|
||||
## Advanced Techniques
|
||||
|
||||
### 1. Fluid Typography
|
||||
|
||||
```css
|
||||
/* Responsive type scale using clamp() */
|
||||
:root {
|
||||
--font-size-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
|
||||
--font-size-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
|
||||
--font-size-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
|
||||
--font-size-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
|
||||
--font-size-2xl: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
|
||||
--font-size-3xl: clamp(1.875rem, 1.5rem + 1vw, 2.5rem);
|
||||
--font-size-4xl: clamp(2.25rem, 1.8rem + 1.5vw, 3.5rem);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Advanced Color Systems
|
||||
|
||||
```css
|
||||
/* Color with opacity variants using oklch */
|
||||
:root {
|
||||
--primary-base: oklch(60% 0.15 250);
|
||||
--primary-subtle: oklch(95% 0.02 250);
|
||||
--primary-muted: oklch(85% 0.05 250);
|
||||
--primary-emphasis: oklch(50% 0.18 250);
|
||||
--primary-foreground: oklch(98% 0.01 250);
|
||||
}
|
||||
|
||||
/* Dark mode: adjust lightness only */
|
||||
[data-theme="dark"] {
|
||||
--primary-base: oklch(70% 0.15 250);
|
||||
--primary-subtle: oklch(20% 0.02 250);
|
||||
--primary-muted: oklch(30% 0.05 250);
|
||||
--primary-emphasis: oklch(80% 0.18 250);
|
||||
--primary-foreground: oklch(10% 0.01 250);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Skeleton Loading Patterns
|
||||
|
||||
```tsx
|
||||
// Animated skeleton with shimmer effect
|
||||
const Skeleton = ({ className }: { className?: string }) => (
|
||||
<div
|
||||
className={cn(
|
||||
"animate-pulse rounded-md bg-surface-subtle",
|
||||
"relative overflow-hidden",
|
||||
"before:absolute before:inset-0",
|
||||
"before:-translate-x-full before:animate-shimmer",
|
||||
"before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
// Usage in components
|
||||
<Card>
|
||||
<Skeleton className="h-4 w-3/4 mb-2" />
|
||||
<Skeleton className="h-4 w-1/2 mb-4" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
</Card>
|
||||
```
|
||||
|
||||
### 4. Advanced Motion
|
||||
|
||||
```css
|
||||
/* Page transitions */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Staggered animations */
|
||||
.stagger-item {
|
||||
animation: fade-in 0.3s ease-out backwards;
|
||||
}
|
||||
.stagger-item:nth-child(1) { animation-delay: 0ms; }
|
||||
.stagger-item:nth-child(2) { animation-delay: 50ms; }
|
||||
.stagger-item:nth-child(3) { animation-delay: 100ms; }
|
||||
.stagger-item:nth-child(4) { animation-delay: 150ms; }
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips for Excellence
|
||||
|
||||
1. **Always start with tokens** — Never skip to components
|
||||
2. **Think mobile-first** — Design for 375px, enhance upward
|
||||
3. **Validate states early** — Test each interactive state in isolation
|
||||
4. **Be bold with aesthetics** — Avoid generic patterns
|
||||
5. **Accessibility is non-negotiable** — Build it in from the start
|
||||
6. **Use real content** — Test with actual text, images, data
|
||||
7. **Review your own work** — Self-audit before delivering
|
||||
8. **Document decisions** — Explain complex styling choices
|
||||
9. **Keep it maintainable** — Future developers will thank you
|
||||
10. **Ship production-ready code** — No "TODO" or "FIXME" in deliverables
|
||||
|
||||
---
|
||||
|
||||
## References & Resources
|
||||
|
||||
- **Tailwind CSS**: https://tailwindcss.com/docs
|
||||
- **shadcn/ui**: https://ui.shadcn.com
|
||||
- **WCAG Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
|
||||
- **Color Contrast Checker**: https://webaim.org/resources/contrastchecker/
|
||||
- **Type Scale**: https://typescale.com
|
||||
- **Modular Scale**: https://www.modularscale.com
|
||||
- **CSS Custom Properties**: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
||||
|
||||
---
|
||||
|
||||
**Version**: 2.0.0
|
||||
**Last Updated**: December 2024
|
||||
**License**: MIT
|
||||
**Maintained by**: z-ai platform team
|
||||
842
skills/frontend-design/examples/css/components.css
Executable file
842
skills/frontend-design/examples/css/components.css
Executable file
@@ -0,0 +1,842 @@
|
||||
/**
|
||||
* Component Styles — Production-Ready UI Components
|
||||
*
|
||||
* This file provides complete component implementations using the design token system.
|
||||
* All components include full state coverage and accessibility features.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/css/components.css
|
||||
*
|
||||
* Dependencies: tokens.css must be imported first
|
||||
*/
|
||||
|
||||
/* Import design tokens */
|
||||
@import './tokens.css';
|
||||
|
||||
|
||||
/* ============================================
|
||||
BUTTONS
|
||||
============================================ */
|
||||
|
||||
/* Base button styles */
|
||||
.btn {
|
||||
/* Layout */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-2);
|
||||
|
||||
/* Sizing */
|
||||
height: var(--button-height-md);
|
||||
padding-inline: var(--spacing-6);
|
||||
|
||||
/* Typography */
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
/* Appearance */
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
/* Transitions */
|
||||
transition: var(--transition-colors), var(--transition-transform);
|
||||
|
||||
/* Accessibility */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled) {
|
||||
background-color: var(--primary-active);
|
||||
transform: translateY(1px);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-foreground);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary:active:not(:disabled) {
|
||||
background-color: var(--secondary-active);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Outline button */
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn-outline:hover:not(:disabled) {
|
||||
background-color: var(--surface-hover);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.btn-outline:active:not(:disabled) {
|
||||
background-color: var(--surface-subtle);
|
||||
}
|
||||
|
||||
/* Ghost button */
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
.btn-ghost:active:not(:disabled) {
|
||||
background-color: var(--surface-subtle);
|
||||
}
|
||||
|
||||
/* Danger button */
|
||||
.btn-danger {
|
||||
background-color: var(--danger);
|
||||
color: var(--danger-foreground);
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background-color: oklch(from var(--danger) calc(l - 0.05) c h);
|
||||
}
|
||||
|
||||
/* Button sizes */
|
||||
.btn-sm {
|
||||
height: var(--button-height-sm);
|
||||
padding-inline: var(--spacing-4);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
height: var(--button-height-lg);
|
||||
padding-inline: var(--spacing-8);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Icon-only button */
|
||||
.btn-icon {
|
||||
padding: 0;
|
||||
width: var(--button-height-md);
|
||||
}
|
||||
|
||||
.btn-icon.btn-sm {
|
||||
width: var(--button-height-sm);
|
||||
}
|
||||
|
||||
.btn-icon.btn-lg {
|
||||
width: var(--button-height-lg);
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.btn-loading {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: var(--radius-full);
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
INPUTS & FORMS
|
||||
============================================ */
|
||||
|
||||
/* Input base */
|
||||
.input {
|
||||
/* Layout */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--input-height-md);
|
||||
padding-inline: var(--spacing-4);
|
||||
|
||||
/* Typography */
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
|
||||
/* Appearance */
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
/* Transitions */
|
||||
transition: var(--transition-colors), border-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.input:hover:not(:disabled):not(:focus) {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px var(--primary-subtle);
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--surface-subtle);
|
||||
}
|
||||
|
||||
/* Input with error */
|
||||
.input-error {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.input-error:focus {
|
||||
border-color: var(--danger);
|
||||
box-shadow: 0 0 0 3px var(--danger-subtle);
|
||||
}
|
||||
|
||||
/* Input sizes */
|
||||
.input-sm {
|
||||
height: var(--input-height-sm);
|
||||
padding-inline: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.input-lg {
|
||||
height: var(--input-height-lg);
|
||||
padding-inline: var(--spacing-6);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Textarea */
|
||||
.textarea {
|
||||
min-height: 5rem;
|
||||
padding-block: var(--spacing-3);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.label-required::after {
|
||||
content: ' *';
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Helper text */
|
||||
.helper-text {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-muted);
|
||||
margin-top: var(--spacing-1-5);
|
||||
}
|
||||
|
||||
.helper-text-error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Form group */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
/* Select */
|
||||
.select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.5 6L8 9.5L11.5 6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--spacing-3) center;
|
||||
padding-right: var(--spacing-10);
|
||||
}
|
||||
|
||||
/* Checkbox & Radio */
|
||||
.checkbox,
|
||||
.radio {
|
||||
appearance: none;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: var(--radius-xs);
|
||||
background-color: var(--background);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
|
||||
.radio {
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.checkbox:checked,
|
||||
.radio:checked {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
border: 2px solid white;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: white;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
CARDS
|
||||
============================================ */
|
||||
|
||||
.card {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-all);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: var(--spacing-4);
|
||||
padding-bottom: var(--spacing-4);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: var(--spacing-4);
|
||||
padding-top: var(--spacing-4);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Card variants */
|
||||
.card-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-interactive:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.card-interactive:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
BADGES & TAGS
|
||||
============================================ */
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
padding: var(--spacing-0-5) var(--spacing-2);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
border-radius: var(--radius-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background-color: var(--primary-subtle);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background-color: var(--secondary-subtle);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: var(--success-subtle);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: var(--warning-subtle);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: var(--danger-subtle);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
ALERTS
|
||||
============================================ */
|
||||
|
||||
.alert {
|
||||
padding: var(--spacing-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
flex-shrink: 0;
|
||||
width: var(--icon-lg);
|
||||
height: var(--icon-lg);
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.alert-description {
|
||||
font-size: var(--font-size-sm);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: var(--info-subtle);
|
||||
color: var(--info);
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: var(--success-subtle);
|
||||
color: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: var(--warning-subtle);
|
||||
color: var(--warning);
|
||||
border-color: var(--warning);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: var(--danger-subtle);
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
MODALS
|
||||
============================================ */
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: var(--overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-4);
|
||||
z-index: var(--z-modal-backdrop);
|
||||
animation: fade-in var(--duration-base) var(--ease-out);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--surface);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
animation: modal-enter var(--duration-base) var(--ease-out);
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: var(--spacing-6);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: var(--spacing-2);
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: var(--spacing-6);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-1rem) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
TOOLTIPS
|
||||
============================================ */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-0.5rem);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background-color: var(--text);
|
||||
color: var(--text-inverse);
|
||||
font-size: var(--font-size-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: var(--transition-opacity);
|
||||
z-index: var(--z-tooltip);
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip-content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 4px solid transparent;
|
||||
border-top-color: var(--text);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
LOADING SKELETON
|
||||
============================================ */
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--surface-subtle) 0%,
|
||||
var(--surface-hover) 50%,
|
||||
var(--surface-subtle) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
height: 1em;
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
height: 1.5em;
|
||||
width: 60%;
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: var(--avatar-md);
|
||||
height: var(--avatar-md);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 12rem;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
AVATARS
|
||||
============================================ */
|
||||
|
||||
.avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--avatar-md);
|
||||
height: var(--avatar-md);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
background-color: var(--surface-subtle);
|
||||
color: var(--text);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: var(--avatar-sm);
|
||||
height: var(--avatar-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: var(--avatar-lg);
|
||||
height: var(--avatar-lg);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
EMPTY STATES
|
||||
============================================ */
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-16) var(--spacing-8);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
width: var(--spacing-16);
|
||||
height: var(--spacing-16);
|
||||
margin: 0 auto var(--spacing-6);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.empty-state-description {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-6);
|
||||
max-width: 28rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.empty-state-action {
|
||||
margin-top: var(--spacing-6);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
ERROR STATES
|
||||
============================================ */
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-12) var(--spacing-8);
|
||||
background-color: var(--danger-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--danger);
|
||||
}
|
||||
|
||||
.error-state-icon {
|
||||
width: var(--spacing-12);
|
||||
height: var(--spacing-12);
|
||||
margin: 0 auto var(--spacing-4);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.error-state-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--danger);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.error-state-message {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.error-state-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
justify-content: center;
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE UTILITIES
|
||||
============================================ */
|
||||
|
||||
/* Hide on mobile */
|
||||
@media (max-width: 767px) {
|
||||
.hide-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide on tablet and up */
|
||||
@media (min-width: 768px) {
|
||||
.hide-tablet {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide on desktop */
|
||||
@media (min-width: 1024px) {
|
||||
.hide-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
525
skills/frontend-design/examples/css/tokens.css
Executable file
525
skills/frontend-design/examples/css/tokens.css
Executable file
@@ -0,0 +1,525 @@
|
||||
/**
|
||||
* Design Tokens — Complete CSS Custom Properties System
|
||||
*
|
||||
* This file provides a comprehensive design token system for consistent UI development.
|
||||
* It includes semantic color slots, typography scales, spacing, radius, shadows, and motion.
|
||||
*
|
||||
* Usage:
|
||||
* 1. Import this file in your globals.css: @import './tokens.css';
|
||||
* 2. Reference tokens using var(--token-name)
|
||||
* 3. Override in [data-theme="dark"] for dark mode
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/css/tokens.css
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
COLOR SYSTEM - Semantic Tokens
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Background & Surfaces */
|
||||
--background: oklch(99% 0 0); /* Main page background */
|
||||
--surface: oklch(100% 0 0); /* Card/panel background */
|
||||
--surface-subtle: oklch(98% 0.005 250); /* Subtle surface variant */
|
||||
--surface-hover: oklch(97% 0.01 250); /* Hover state for surfaces */
|
||||
|
||||
/* Text Colors */
|
||||
--text: oklch(20% 0.01 250); /* Primary text */
|
||||
--text-secondary: oklch(45% 0.015 250); /* Secondary text */
|
||||
--text-muted: oklch(60% 0.01 250); /* Muted/helper text */
|
||||
--text-inverse: oklch(98% 0 0); /* Text on dark backgrounds */
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(90% 0.005 250); /* Standard borders */
|
||||
--border-subtle: oklch(95% 0.003 250); /* Subtle dividers */
|
||||
--border-strong: oklch(75% 0.01 250); /* Emphasized borders */
|
||||
|
||||
/* Primary Brand */
|
||||
--primary: oklch(55% 0.18 250); /* Primary brand color */
|
||||
--primary-hover: oklch(50% 0.20 250); /* Primary hover state */
|
||||
--primary-active: oklch(45% 0.22 250); /* Primary active/pressed */
|
||||
--primary-subtle: oklch(95% 0.03 250); /* Primary tint background */
|
||||
--primary-muted: oklch(85% 0.08 250); /* Primary muted variant */
|
||||
--primary-foreground: oklch(98% 0.01 250); /* Text on primary */
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(65% 0.08 280); /* Secondary accent */
|
||||
--secondary-hover: oklch(60% 0.10 280); /* Secondary hover */
|
||||
--secondary-active: oklch(55% 0.12 280); /* Secondary active */
|
||||
--secondary-subtle: oklch(95% 0.02 280); /* Secondary tint */
|
||||
--secondary-foreground: oklch(98% 0.01 280); /* Text on secondary */
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(70% 0.15 160); /* Accent highlights */
|
||||
--accent-hover: oklch(65% 0.17 160); /* Accent hover */
|
||||
--accent-foreground: oklch(10% 0.01 160); /* Text on accent */
|
||||
|
||||
/* Semantic Colors */
|
||||
--success: oklch(65% 0.15 145); /* Success states */
|
||||
--success-subtle: oklch(95% 0.03 145); /* Success background */
|
||||
--success-foreground: oklch(98% 0.01 145); /* Text on success */
|
||||
|
||||
--warning: oklch(75% 0.15 85); /* Warning states */
|
||||
--warning-subtle: oklch(95% 0.05 85); /* Warning background */
|
||||
--warning-foreground: oklch(15% 0.02 85); /* Text on warning */
|
||||
|
||||
--danger: oklch(60% 0.20 25); /* Error/danger states */
|
||||
--danger-subtle: oklch(95% 0.04 25); /* Error background */
|
||||
--danger-foreground: oklch(98% 0.01 25); /* Text on danger */
|
||||
|
||||
--info: oklch(65% 0.12 230); /* Info states */
|
||||
--info-subtle: oklch(95% 0.02 230); /* Info background */
|
||||
--info-foreground: oklch(98% 0.01 230); /* Text on info */
|
||||
|
||||
/* Overlays & Scrim */
|
||||
--overlay: oklch(0% 0 0 / 0.5); /* Modal overlay */
|
||||
--scrim: oklch(0% 0 0 / 0.3); /* Backdrop scrim */
|
||||
}
|
||||
|
||||
/* Dark Mode Color Adjustments */
|
||||
[data-theme="dark"] {
|
||||
/* Background & Surfaces */
|
||||
--background: oklch(15% 0.01 250);
|
||||
--surface: oklch(20% 0.015 250);
|
||||
--surface-subtle: oklch(25% 0.02 250);
|
||||
--surface-hover: oklch(30% 0.025 250);
|
||||
|
||||
/* Text Colors */
|
||||
--text: oklch(95% 0.01 250);
|
||||
--text-secondary: oklch(70% 0.015 250);
|
||||
--text-muted: oklch(55% 0.01 250);
|
||||
--text-inverse: oklch(15% 0 0);
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(35% 0.01 250);
|
||||
--border-subtle: oklch(25% 0.005 250);
|
||||
--border-strong: oklch(50% 0.015 250);
|
||||
|
||||
/* Primary Brand (adjusted for dark) */
|
||||
--primary: oklch(65% 0.18 250);
|
||||
--primary-hover: oklch(70% 0.20 250);
|
||||
--primary-active: oklch(75% 0.22 250);
|
||||
--primary-subtle: oklch(25% 0.08 250);
|
||||
--primary-muted: oklch(35% 0.12 250);
|
||||
--primary-foreground: oklch(10% 0.01 250);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(70% 0.08 280);
|
||||
--secondary-hover: oklch(75% 0.10 280);
|
||||
--secondary-active: oklch(80% 0.12 280);
|
||||
--secondary-subtle: oklch(25% 0.04 280);
|
||||
--secondary-foreground: oklch(10% 0.01 280);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(75% 0.15 160);
|
||||
--accent-hover: oklch(80% 0.17 160);
|
||||
--accent-foreground: oklch(10% 0.01 160);
|
||||
|
||||
/* Semantic Colors (adjusted) */
|
||||
--success: oklch(70% 0.15 145);
|
||||
--success-subtle: oklch(22% 0.06 145);
|
||||
|
||||
--warning: oklch(80% 0.15 85);
|
||||
--warning-subtle: oklch(25% 0.08 85);
|
||||
|
||||
--danger: oklch(65% 0.20 25);
|
||||
--danger-subtle: oklch(22% 0.08 25);
|
||||
|
||||
--info: oklch(70% 0.12 230);
|
||||
--info-subtle: oklch(22% 0.05 230);
|
||||
|
||||
/* Overlays */
|
||||
--overlay: oklch(0% 0 0 / 0.7);
|
||||
--scrim: oklch(0% 0 0 / 0.5);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
TYPOGRAPHY SCALE
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Font Families */
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-serif: 'Merriweather', Georgia, serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* Font Sizes - Using clamp() for fluid typography */
|
||||
--font-size-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem); /* 12-14px */
|
||||
--font-size-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem); /* 14-16px */
|
||||
--font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16-18px */
|
||||
--font-size-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18-20px */
|
||||
--font-size-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20-24px */
|
||||
--font-size-2xl: clamp(1.5rem, 1.35rem + 0.6vw, 2rem); /* 24-32px */
|
||||
--font-size-3xl: clamp(1.875rem, 1.65rem + 0.9vw, 2.5rem); /* 30-40px */
|
||||
--font-size-4xl: clamp(2.25rem, 1.95rem + 1.2vw, 3.5rem); /* 36-56px */
|
||||
--font-size-5xl: clamp(3rem, 2.5rem + 2vw, 4.5rem); /* 48-72px */
|
||||
|
||||
/* Line Heights */
|
||||
--line-height-none: 1;
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-snug: 1.375;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
--line-height-loose: 2;
|
||||
|
||||
/* Font Weights */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
|
||||
/* Letter Spacing */
|
||||
--letter-spacing-tighter: -0.05em;
|
||||
--letter-spacing-tight: -0.025em;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.025em;
|
||||
--letter-spacing-wider: 0.05em;
|
||||
--letter-spacing-widest: 0.1em;
|
||||
}
|
||||
|
||||
/* Typography Presets */
|
||||
.text-display {
|
||||
font-size: var(--font-size-5xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
}
|
||||
|
||||
.text-h1 {
|
||||
font-size: var(--font-size-4xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-tight);
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: var(--font-size-3xl);
|
||||
line-height: var(--line-height-snug);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.text-h3 {
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-snug);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.text-h4 {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-normal);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.text-body {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-relaxed);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-normal);
|
||||
font-weight: var(--font-weight-normal);
|
||||
letter-spacing: var(--letter-spacing-wide);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
SPACING SCALE (8px System)
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--spacing-0: 0;
|
||||
--spacing-px: 1px;
|
||||
--spacing-0-5: 0.125rem; /* 2px */
|
||||
--spacing-1: 0.25rem; /* 4px */
|
||||
--spacing-1-5: 0.375rem; /* 6px */
|
||||
--spacing-2: 0.5rem; /* 8px */
|
||||
--spacing-2-5: 0.625rem; /* 10px */
|
||||
--spacing-3: 0.75rem; /* 12px */
|
||||
--spacing-4: 1rem; /* 16px */
|
||||
--spacing-5: 1.25rem; /* 20px */
|
||||
--spacing-6: 1.5rem; /* 24px */
|
||||
--spacing-7: 1.75rem; /* 28px */
|
||||
--spacing-8: 2rem; /* 32px */
|
||||
--spacing-9: 2.25rem; /* 36px */
|
||||
--spacing-10: 2.5rem; /* 40px */
|
||||
--spacing-12: 3rem; /* 48px */
|
||||
--spacing-14: 3.5rem; /* 56px */
|
||||
--spacing-16: 4rem; /* 64px */
|
||||
--spacing-20: 5rem; /* 80px */
|
||||
--spacing-24: 6rem; /* 96px */
|
||||
--spacing-28: 7rem; /* 112px */
|
||||
--spacing-32: 8rem; /* 128px */
|
||||
--spacing-36: 9rem; /* 144px */
|
||||
--spacing-40: 10rem; /* 160px */
|
||||
--spacing-48: 12rem; /* 192px */
|
||||
--spacing-56: 14rem; /* 224px */
|
||||
--spacing-64: 16rem; /* 256px */
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
BORDER RADIUS SCALE
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--radius-none: 0;
|
||||
--radius-xs: 0.125rem; /* 2px - badges, tags */
|
||||
--radius-sm: 0.25rem; /* 4px - buttons, small inputs */
|
||||
--radius-md: 0.375rem; /* 6px - inputs, cards */
|
||||
--radius-lg: 0.5rem; /* 8px - large cards */
|
||||
--radius-xl: 0.75rem; /* 12px - modals, panels */
|
||||
--radius-2xl: 1rem; /* 16px - hero sections */
|
||||
--radius-3xl: 1.5rem; /* 24px - special elements */
|
||||
--radius-full: 9999px; /* Pills, avatars, circles */
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
SHADOW SCALE
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Light Mode Shadows */
|
||||
--shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.1),
|
||||
0 1px 2px -1px oklch(0% 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1),
|
||||
0 2px 4px -2px oklch(0% 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1),
|
||||
0 4px 6px -4px oklch(0% 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1),
|
||||
0 8px 10px -6px oklch(0% 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.25);
|
||||
|
||||
/* Colored Shadows (for accents) */
|
||||
--shadow-primary: 0 4px 12px -2px var(--primary),
|
||||
0 2px 6px -2px var(--primary);
|
||||
--shadow-secondary: 0 4px 12px -2px var(--secondary),
|
||||
0 2px 6px -2px var(--secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* Stronger shadows for dark mode */
|
||||
--shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / 0.3);
|
||||
--shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.4),
|
||||
0 1px 2px -1px oklch(0% 0 0 / 0.3);
|
||||
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.4),
|
||||
0 2px 4px -2px oklch(0% 0 0 / 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.5),
|
||||
0 4px 6px -4px oklch(0% 0 0 / 0.4);
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.5),
|
||||
0 8px 10px -6px oklch(0% 0 0 / 0.4);
|
||||
--shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.6);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
MOTION TOKENS
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Duration */
|
||||
--duration-instant: 0ms;
|
||||
--duration-fast: 150ms;
|
||||
--duration-base: 220ms;
|
||||
--duration-slow: 300ms;
|
||||
--duration-slower: 400ms;
|
||||
|
||||
/* Easing Functions */
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Common Transitions */
|
||||
--transition-colors: color var(--duration-fast) var(--ease-out),
|
||||
background-color var(--duration-fast) var(--ease-out),
|
||||
border-color var(--duration-fast) var(--ease-out);
|
||||
--transition-transform: transform var(--duration-base) var(--ease-out);
|
||||
--transition-opacity: opacity var(--duration-base) var(--ease-out);
|
||||
--transition-all: all var(--duration-base) var(--ease-in-out);
|
||||
}
|
||||
|
||||
/* Respect Reduced Motion Preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--duration-instant: 0ms;
|
||||
--duration-fast: 0ms;
|
||||
--duration-base: 0ms;
|
||||
--duration-slow: 0ms;
|
||||
--duration-slower: 0ms;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
LAYOUT & CONTAINER
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Container widths */
|
||||
--container-sm: 640px;
|
||||
--container-md: 768px;
|
||||
--container-lg: 1024px;
|
||||
--container-xl: 1280px;
|
||||
--container-2xl: 1536px;
|
||||
|
||||
/* Breakpoints (for reference in JS) */
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1024px;
|
||||
--breakpoint-xl: 1280px;
|
||||
--breakpoint-2xl: 1536px;
|
||||
|
||||
/* Z-index scale */
|
||||
--z-base: 0;
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1100;
|
||||
--z-fixed: 1200;
|
||||
--z-modal-backdrop: 1300;
|
||||
--z-modal: 1400;
|
||||
--z-popover: 1500;
|
||||
--z-tooltip: 1600;
|
||||
--z-notification: 1700;
|
||||
--z-max: 9999;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
COMPONENT DENSITY
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Button heights */
|
||||
--button-height-sm: 2.25rem; /* 36px */
|
||||
--button-height-md: 2.75rem; /* 44px */
|
||||
--button-height-lg: 3rem; /* 48px */
|
||||
|
||||
/* Input heights */
|
||||
--input-height-sm: 2.25rem; /* 36px */
|
||||
--input-height-md: 2.5rem; /* 40px */
|
||||
--input-height-lg: 3rem; /* 48px */
|
||||
|
||||
/* Icon sizes */
|
||||
--icon-xs: 0.75rem; /* 12px */
|
||||
--icon-sm: 1rem; /* 16px */
|
||||
--icon-md: 1.25rem; /* 20px */
|
||||
--icon-lg: 1.5rem; /* 24px */
|
||||
--icon-xl: 2rem; /* 32px */
|
||||
--icon-2xl: 2.5rem; /* 40px */
|
||||
|
||||
/* Avatar sizes */
|
||||
--avatar-xs: 1.5rem; /* 24px */
|
||||
--avatar-sm: 2rem; /* 32px */
|
||||
--avatar-md: 2.5rem; /* 40px */
|
||||
--avatar-lg: 3rem; /* 48px */
|
||||
--avatar-xl: 4rem; /* 64px */
|
||||
--avatar-2xl: 6rem; /* 96px */
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
FOCUS & ACCESSIBILITY
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--focus-ring-width: 2px;
|
||||
--focus-ring-offset: 2px;
|
||||
--focus-ring-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Default focus style */
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Remove default outline, apply custom */
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
USAGE EXAMPLES
|
||||
============================================ */
|
||||
|
||||
/*
|
||||
Example 1: Button with tokens
|
||||
.button {
|
||||
height: var(--button-height-md);
|
||||
padding-inline: var(--spacing-6);
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: var(--transition-colors);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: var(--primary-active);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
Example 2: Card with tokens
|
||||
.card {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-all);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
Example 3: Typography with tokens
|
||||
.heading {
|
||||
font-size: var(--font-size-3xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-relaxed);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
*/
|
||||
616
skills/frontend-design/examples/typescript/design-tokens.ts
Executable file
616
skills/frontend-design/examples/typescript/design-tokens.ts
Executable file
@@ -0,0 +1,616 @@
|
||||
/**
|
||||
* Design Tokens — Type-Safe Token Definitions
|
||||
*
|
||||
* This file provides TypeScript interfaces and types for the design token system.
|
||||
* Use these to ensure type safety when working with design tokens programmatically.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/design-tokens.ts
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// Color Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ColorTokens {
|
||||
// Background & Surfaces
|
||||
background: string;
|
||||
surface: string;
|
||||
surfaceSubtle: string;
|
||||
surfaceHover: string;
|
||||
|
||||
// Text
|
||||
text: string;
|
||||
textSecondary: string;
|
||||
textMuted: string;
|
||||
textInverse: string;
|
||||
|
||||
// Borders
|
||||
border: string;
|
||||
borderSubtle: string;
|
||||
borderStrong: string;
|
||||
|
||||
// Primary
|
||||
primary: string;
|
||||
primaryHover: string;
|
||||
primaryActive: string;
|
||||
primarySubtle: string;
|
||||
primaryMuted: string;
|
||||
primaryForeground: string;
|
||||
|
||||
// Secondary
|
||||
secondary: string;
|
||||
secondaryHover: string;
|
||||
secondaryActive: string;
|
||||
secondarySubtle: string;
|
||||
secondaryForeground: string;
|
||||
|
||||
// Accent
|
||||
accent: string;
|
||||
accentHover: string;
|
||||
accentForeground: string;
|
||||
|
||||
// Semantic Colors
|
||||
success: string;
|
||||
successSubtle: string;
|
||||
successForeground: string;
|
||||
|
||||
warning: string;
|
||||
warningSubtle: string;
|
||||
warningForeground: string;
|
||||
|
||||
danger: string;
|
||||
dangerSubtle: string;
|
||||
dangerForeground: string;
|
||||
|
||||
info: string;
|
||||
infoSubtle: string;
|
||||
infoForeground: string;
|
||||
|
||||
// Overlays
|
||||
overlay: string;
|
||||
scrim: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Typography Tokens
|
||||
// ============================================
|
||||
|
||||
export interface TypographyToken {
|
||||
fontSize: string;
|
||||
lineHeight: string;
|
||||
fontWeight: number;
|
||||
letterSpacing?: string;
|
||||
}
|
||||
|
||||
export interface TypographyTokens {
|
||||
display: TypographyToken;
|
||||
h1: TypographyToken;
|
||||
h2: TypographyToken;
|
||||
h3: TypographyToken;
|
||||
h4: TypographyToken;
|
||||
body: TypographyToken;
|
||||
bodySmall: TypographyToken;
|
||||
caption: TypographyToken;
|
||||
mono: TypographyToken;
|
||||
}
|
||||
|
||||
// Font families
|
||||
export interface FontFamilies {
|
||||
sans: string;
|
||||
serif: string;
|
||||
mono: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Spacing Tokens
|
||||
// ============================================
|
||||
|
||||
export interface SpacingTokens {
|
||||
0: string;
|
||||
px: string;
|
||||
0.5: string;
|
||||
1: string;
|
||||
1.5: string;
|
||||
2: string;
|
||||
2.5: string;
|
||||
3: string;
|
||||
4: string;
|
||||
5: string;
|
||||
6: string;
|
||||
7: string;
|
||||
8: string;
|
||||
9: string;
|
||||
10: string;
|
||||
12: string;
|
||||
14: string;
|
||||
16: string;
|
||||
20: string;
|
||||
24: string;
|
||||
28: string;
|
||||
32: string;
|
||||
36: string;
|
||||
40: string;
|
||||
48: string;
|
||||
56: string;
|
||||
64: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Radius Tokens
|
||||
// ============================================
|
||||
|
||||
export interface RadiusTokens {
|
||||
none: string;
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
'3xl': string;
|
||||
full: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Shadow Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ShadowTokens {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
primary: string;
|
||||
secondary: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Motion Tokens
|
||||
// ============================================
|
||||
|
||||
export interface MotionTokens {
|
||||
// Durations
|
||||
instant: string;
|
||||
fast: string;
|
||||
base: string;
|
||||
slow: string;
|
||||
slower: string;
|
||||
|
||||
// Easings
|
||||
easeIn: string;
|
||||
easeOut: string;
|
||||
easeInOut: string;
|
||||
easeBounce: string;
|
||||
|
||||
// Common transitions
|
||||
transitionColors: string;
|
||||
transitionTransform: string;
|
||||
transitionOpacity: string;
|
||||
transitionAll: string;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Component Size Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ComponentSizeTokens {
|
||||
button: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
input: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
icon: {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
};
|
||||
avatar: {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Z-Index Tokens
|
||||
// ============================================
|
||||
|
||||
export interface ZIndexTokens {
|
||||
base: number;
|
||||
dropdown: number;
|
||||
sticky: number;
|
||||
fixed: number;
|
||||
modalBackdrop: number;
|
||||
modal: number;
|
||||
popover: number;
|
||||
tooltip: number;
|
||||
notification: number;
|
||||
max: number;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Complete Design System
|
||||
// ============================================
|
||||
|
||||
export interface DesignTokens {
|
||||
colors: ColorTokens;
|
||||
typography: TypographyTokens;
|
||||
fontFamilies: FontFamilies;
|
||||
spacing: SpacingTokens;
|
||||
radius: RadiusTokens;
|
||||
shadows: ShadowTokens;
|
||||
motion: MotionTokens;
|
||||
componentSizes: ComponentSizeTokens;
|
||||
zIndex: ZIndexTokens;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Theme Type
|
||||
// ============================================
|
||||
|
||||
export type Theme = 'light' | 'dark' | 'system';
|
||||
|
||||
export interface ThemeConfig {
|
||||
theme: Theme;
|
||||
tokens: DesignTokens;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Token Helpers
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Get CSS variable name for a token
|
||||
* @param tokenPath - Dot-separated path to token (e.g., 'colors.primary')
|
||||
* @returns CSS variable name (e.g., '--primary')
|
||||
*/
|
||||
export function getCSSVariable(tokenPath: string): string {
|
||||
const parts = tokenPath.split('.');
|
||||
const tokenName = parts[parts.length - 1];
|
||||
|
||||
// Convert camelCase to kebab-case
|
||||
const kebabCase = tokenName.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
|
||||
return `var(--${kebabCase})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get token value from design system
|
||||
* @param tokens - Design tokens object
|
||||
* @param path - Dot-separated path to token
|
||||
* @returns Token value or undefined
|
||||
*/
|
||||
export function getTokenValue(tokens: DesignTokens, path: string): string | undefined {
|
||||
const parts = path.split('.');
|
||||
let value: any = tokens;
|
||||
|
||||
for (const part of parts) {
|
||||
if (value && typeof value === 'object' && part in value) {
|
||||
value = value[part];
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
return typeof value === 'string' ? value : undefined;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Default Light Theme Tokens
|
||||
// ============================================
|
||||
|
||||
export const lightThemeTokens: DesignTokens = {
|
||||
colors: {
|
||||
background: 'oklch(99% 0 0)',
|
||||
surface: 'oklch(100% 0 0)',
|
||||
surfaceSubtle: 'oklch(98% 0.005 250)',
|
||||
surfaceHover: 'oklch(97% 0.01 250)',
|
||||
|
||||
text: 'oklch(20% 0.01 250)',
|
||||
textSecondary: 'oklch(45% 0.015 250)',
|
||||
textMuted: 'oklch(60% 0.01 250)',
|
||||
textInverse: 'oklch(98% 0 0)',
|
||||
|
||||
border: 'oklch(90% 0.005 250)',
|
||||
borderSubtle: 'oklch(95% 0.003 250)',
|
||||
borderStrong: 'oklch(75% 0.01 250)',
|
||||
|
||||
primary: 'oklch(55% 0.18 250)',
|
||||
primaryHover: 'oklch(50% 0.20 250)',
|
||||
primaryActive: 'oklch(45% 0.22 250)',
|
||||
primarySubtle: 'oklch(95% 0.03 250)',
|
||||
primaryMuted: 'oklch(85% 0.08 250)',
|
||||
primaryForeground: 'oklch(98% 0.01 250)',
|
||||
|
||||
secondary: 'oklch(65% 0.08 280)',
|
||||
secondaryHover: 'oklch(60% 0.10 280)',
|
||||
secondaryActive: 'oklch(55% 0.12 280)',
|
||||
secondarySubtle: 'oklch(95% 0.02 280)',
|
||||
secondaryForeground: 'oklch(98% 0.01 280)',
|
||||
|
||||
accent: 'oklch(70% 0.15 160)',
|
||||
accentHover: 'oklch(65% 0.17 160)',
|
||||
accentForeground: 'oklch(10% 0.01 160)',
|
||||
|
||||
success: 'oklch(65% 0.15 145)',
|
||||
successSubtle: 'oklch(95% 0.03 145)',
|
||||
successForeground: 'oklch(98% 0.01 145)',
|
||||
|
||||
warning: 'oklch(75% 0.15 85)',
|
||||
warningSubtle: 'oklch(95% 0.05 85)',
|
||||
warningForeground: 'oklch(15% 0.02 85)',
|
||||
|
||||
danger: 'oklch(60% 0.20 25)',
|
||||
dangerSubtle: 'oklch(95% 0.04 25)',
|
||||
dangerForeground: 'oklch(98% 0.01 25)',
|
||||
|
||||
info: 'oklch(65% 0.12 230)',
|
||||
infoSubtle: 'oklch(95% 0.02 230)',
|
||||
infoForeground: 'oklch(98% 0.01 230)',
|
||||
|
||||
overlay: 'oklch(0% 0 0 / 0.5)',
|
||||
scrim: 'oklch(0% 0 0 / 0.3)',
|
||||
},
|
||||
|
||||
typography: {
|
||||
display: {
|
||||
fontSize: 'clamp(3rem, 2.5rem + 2vw, 4.5rem)',
|
||||
lineHeight: '1.1',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '-0.05em',
|
||||
},
|
||||
h1: {
|
||||
fontSize: 'clamp(2.25rem, 1.95rem + 1.2vw, 3.5rem)',
|
||||
lineHeight: '1.2',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h2: {
|
||||
fontSize: 'clamp(1.875rem, 1.65rem + 0.9vw, 2.5rem)',
|
||||
lineHeight: '1.3',
|
||||
fontWeight: 700,
|
||||
},
|
||||
h3: {
|
||||
fontSize: 'clamp(1.5rem, 1.35rem + 0.6vw, 2rem)',
|
||||
lineHeight: '1.4',
|
||||
fontWeight: 600,
|
||||
},
|
||||
h4: {
|
||||
fontSize: 'clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)',
|
||||
lineHeight: '1.5',
|
||||
fontWeight: 600,
|
||||
},
|
||||
body: {
|
||||
fontSize: 'clamp(1rem, 0.95rem + 0.25vw, 1.125rem)',
|
||||
lineHeight: '1.6',
|
||||
fontWeight: 400,
|
||||
},
|
||||
bodySmall: {
|
||||
fontSize: 'clamp(0.875rem, 0.8rem + 0.2vw, 1rem)',
|
||||
lineHeight: '1.5',
|
||||
fontWeight: 400,
|
||||
},
|
||||
caption: {
|
||||
fontSize: 'clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)',
|
||||
lineHeight: '1.4',
|
||||
fontWeight: 400,
|
||||
letterSpacing: '0.025em',
|
||||
},
|
||||
mono: {
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: '1.5',
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
|
||||
fontFamilies: {
|
||||
sans: "'Inter', system-ui, -apple-system, sans-serif",
|
||||
serif: "'Merriweather', Georgia, serif",
|
||||
mono: "'JetBrains Mono', 'Fira Code', monospace",
|
||||
},
|
||||
|
||||
spacing: {
|
||||
0: '0',
|
||||
px: '1px',
|
||||
0.5: '0.125rem',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
12: '3rem',
|
||||
14: '3.5rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
28: '7rem',
|
||||
32: '8rem',
|
||||
36: '9rem',
|
||||
40: '10rem',
|
||||
48: '12rem',
|
||||
56: '14rem',
|
||||
64: '16rem',
|
||||
},
|
||||
|
||||
radius: {
|
||||
none: '0',
|
||||
xs: '0.125rem',
|
||||
sm: '0.25rem',
|
||||
md: '0.375rem',
|
||||
lg: '0.5rem',
|
||||
xl: '0.75rem',
|
||||
'2xl': '1rem',
|
||||
'3xl': '1.5rem',
|
||||
full: '9999px',
|
||||
},
|
||||
|
||||
shadows: {
|
||||
xs: '0 1px 2px 0 oklch(0% 0 0 / 0.05)',
|
||||
sm: '0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1)',
|
||||
md: '0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1)',
|
||||
lg: '0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1)',
|
||||
xl: '0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px oklch(0% 0 0 / 0.25)',
|
||||
primary: '0 4px 12px -2px oklch(55% 0.18 250), 0 2px 6px -2px oklch(55% 0.18 250)',
|
||||
secondary: '0 4px 12px -2px oklch(65% 0.08 280), 0 2px 6px -2px oklch(65% 0.08 280)',
|
||||
},
|
||||
|
||||
motion: {
|
||||
instant: '0ms',
|
||||
fast: '150ms',
|
||||
base: '220ms',
|
||||
slow: '300ms',
|
||||
slower: '400ms',
|
||||
|
||||
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
easeBounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
|
||||
transitionColors: 'color 150ms cubic-bezier(0, 0, 0.2, 1), background-color 150ms cubic-bezier(0, 0, 0.2, 1), border-color 150ms cubic-bezier(0, 0, 0.2, 1)',
|
||||
transitionTransform: 'transform 220ms cubic-bezier(0, 0, 0.2, 1)',
|
||||
transitionOpacity: 'opacity 220ms cubic-bezier(0, 0, 0.2, 1)',
|
||||
transitionAll: 'all 220ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
|
||||
componentSizes: {
|
||||
button: {
|
||||
sm: '2.25rem',
|
||||
md: '2.75rem',
|
||||
lg: '3rem',
|
||||
},
|
||||
input: {
|
||||
sm: '2.25rem',
|
||||
md: '2.5rem',
|
||||
lg: '3rem',
|
||||
},
|
||||
icon: {
|
||||
xs: '0.75rem',
|
||||
sm: '1rem',
|
||||
md: '1.25rem',
|
||||
lg: '1.5rem',
|
||||
xl: '2rem',
|
||||
'2xl': '2.5rem',
|
||||
},
|
||||
avatar: {
|
||||
xs: '1.5rem',
|
||||
sm: '2rem',
|
||||
md: '2.5rem',
|
||||
lg: '3rem',
|
||||
xl: '4rem',
|
||||
'2xl': '6rem',
|
||||
},
|
||||
},
|
||||
|
||||
zIndex: {
|
||||
base: 0,
|
||||
dropdown: 1000,
|
||||
sticky: 1100,
|
||||
fixed: 1200,
|
||||
modalBackdrop: 1300,
|
||||
modal: 1400,
|
||||
popover: 1500,
|
||||
tooltip: 1600,
|
||||
notification: 1700,
|
||||
max: 9999,
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Dark Theme Tokens (Overrides only)
|
||||
// ============================================
|
||||
|
||||
export const darkThemeColorOverrides: Partial<ColorTokens> = {
|
||||
background: 'oklch(15% 0.01 250)',
|
||||
surface: 'oklch(20% 0.015 250)',
|
||||
surfaceSubtle: 'oklch(25% 0.02 250)',
|
||||
surfaceHover: 'oklch(30% 0.025 250)',
|
||||
|
||||
text: 'oklch(95% 0.01 250)',
|
||||
textSecondary: 'oklch(70% 0.015 250)',
|
||||
textMuted: 'oklch(55% 0.01 250)',
|
||||
textInverse: 'oklch(15% 0 0)',
|
||||
|
||||
border: 'oklch(35% 0.01 250)',
|
||||
borderSubtle: 'oklch(25% 0.005 250)',
|
||||
borderStrong: 'oklch(50% 0.015 250)',
|
||||
|
||||
primary: 'oklch(65% 0.18 250)',
|
||||
primaryHover: 'oklch(70% 0.20 250)',
|
||||
primaryActive: 'oklch(75% 0.22 250)',
|
||||
primarySubtle: 'oklch(25% 0.08 250)',
|
||||
primaryMuted: 'oklch(35% 0.12 250)',
|
||||
primaryForeground: 'oklch(10% 0.01 250)',
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Type Guards
|
||||
// ============================================
|
||||
|
||||
export function isValidTheme(theme: string): theme is Theme {
|
||||
return ['light', 'dark', 'system'].includes(theme);
|
||||
}
|
||||
|
||||
export function isColorToken(token: any): token is keyof ColorTokens {
|
||||
return typeof token === 'string' && token in lightThemeTokens.colors;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Utility Functions
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Merge default tokens with custom overrides
|
||||
*/
|
||||
export function mergeTokens(
|
||||
base: DesignTokens,
|
||||
overrides: Partial<DesignTokens>
|
||||
): DesignTokens {
|
||||
return {
|
||||
...base,
|
||||
...overrides,
|
||||
colors: { ...base.colors, ...(overrides.colors || {}) },
|
||||
typography: { ...base.typography, ...(overrides.typography || {}) },
|
||||
spacing: { ...base.spacing, ...(overrides.spacing || {}) },
|
||||
radius: { ...base.radius, ...(overrides.radius || {}) },
|
||||
shadows: { ...base.shadows, ...(overrides.shadows || {}) },
|
||||
motion: { ...base.motion, ...(overrides.motion || {}) },
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate token value format
|
||||
*/
|
||||
export function validateTokenValue(value: string, type: 'color' | 'spacing' | 'radius' | 'shadow'): boolean {
|
||||
switch (type) {
|
||||
case 'color':
|
||||
return /^(oklch|rgb|hsl|#)/.test(value);
|
||||
case 'spacing':
|
||||
case 'radius':
|
||||
return /^\d+(\.\d+)?(px|rem|em|%)$/.test(value);
|
||||
case 'shadow':
|
||||
return value.includes('oklch') || value.includes('rgb') || value === 'none';
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
685
skills/frontend-design/examples/typescript/sample-components.tsx
Executable file
685
skills/frontend-design/examples/typescript/sample-components.tsx
Executable file
@@ -0,0 +1,685 @@
|
||||
/**
|
||||
* Sample Components — Production-Ready React Components
|
||||
*
|
||||
* This file demonstrates how to build type-safe, accessible React components
|
||||
* using the design token system.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/sample-components.tsx
|
||||
*
|
||||
* All components include:
|
||||
* - Full TypeScript type safety
|
||||
* - Complete state coverage (default/hover/active/focus/disabled/loading/error)
|
||||
* - Accessibility (ARIA labels, keyboard navigation)
|
||||
* - Responsive design
|
||||
* - Token-based styling
|
||||
*/
|
||||
|
||||
import React, { useState, forwardRef, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
|
||||
import { cn } from './utils'; // Utility for classname merging
|
||||
|
||||
// ============================================
|
||||
// BUTTON COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
isLoading?: boolean;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
isLoading = false,
|
||||
disabled,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const baseClasses = 'btn';
|
||||
const variantClasses = {
|
||||
primary: 'btn-primary',
|
||||
secondary: 'btn-secondary',
|
||||
outline: 'btn-outline',
|
||||
ghost: 'btn-ghost',
|
||||
danger: 'btn-danger',
|
||||
};
|
||||
const sizeClasses = {
|
||||
sm: 'btn-sm',
|
||||
md: '',
|
||||
lg: 'btn-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={cn(
|
||||
baseClasses,
|
||||
variantClasses[variant],
|
||||
sizeClasses[size],
|
||||
isLoading && 'btn-loading',
|
||||
className
|
||||
)}
|
||||
disabled={disabled || isLoading}
|
||||
{...props}
|
||||
>
|
||||
{!isLoading && leftIcon && <span className="btn-icon-left">{leftIcon}</span>}
|
||||
<span className={isLoading ? 'opacity-0' : ''}>{children}</span>
|
||||
{!isLoading && rightIcon && <span className="btn-icon-right">{rightIcon}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Button.displayName = 'Button';
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Button variant="primary" size="md">
|
||||
Click me
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" isLoading>
|
||||
Loading...
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
leftIcon={<PlusIcon />}
|
||||
rightIcon={<ArrowRightIcon />}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// INPUT COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
error,
|
||||
helperText,
|
||||
size = 'md',
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
className,
|
||||
id,
|
||||
required,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
|
||||
const errorId = error ? `${inputId}-error` : undefined;
|
||||
const helperId = helperText ? `${inputId}-helper` : undefined;
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'input-sm',
|
||||
md: '',
|
||||
lg: 'input-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
{label && (
|
||||
<label htmlFor={inputId} className={cn('label', required && 'label-required')}>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
{leftIcon && (
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">
|
||||
{leftIcon}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={ref}
|
||||
id={inputId}
|
||||
className={cn(
|
||||
'input',
|
||||
sizeClasses[size],
|
||||
error && 'input-error',
|
||||
leftIcon && 'pl-10',
|
||||
rightIcon && 'pr-10',
|
||||
className
|
||||
)}
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
aria-describedby={cn(errorId, helperId)}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{rightIcon && (
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted">
|
||||
{rightIcon}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<span id={errorId} className="helper-text helper-text-error" role="alert">
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!error && helperText && (
|
||||
<span id={helperId} className="helper-text">
|
||||
{helperText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Input.displayName = 'Input';
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
leftIcon={<MailIcon />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
error="Password must be at least 8 characters"
|
||||
helperText="Use a strong, unique password"
|
||||
/>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// CARD COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface CardProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
interactive?: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function Card({ children, className, interactive = false, onClick }: CardProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'card',
|
||||
interactive && 'card-interactive',
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
role={interactive ? 'button' : undefined}
|
||||
tabIndex={interactive ? 0 : undefined}
|
||||
onKeyDown={
|
||||
interactive
|
||||
? (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onClick?.();
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardHeader({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('card-header', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
export function CardTitle({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <h3 className={cn('card-title', className)}>{children}</h3>;
|
||||
}
|
||||
|
||||
export function CardDescription({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <p className={cn('card-description', className)}>{children}</p>;
|
||||
}
|
||||
|
||||
export function CardBody({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('card-body', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
export function CardFooter({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('card-footer', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>Track your project's progress</CardDescription>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Your project is 75% complete</p>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button variant="primary">View Details</Button>
|
||||
<Button variant="outline">Share</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card interactive onClick={() => console.log('Clicked')}>
|
||||
<CardBody>Click me!</CardBody>
|
||||
</Card>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// BADGE COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface BadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Badge({ children, variant = 'primary', className }: BadgeProps) {
|
||||
const variantClasses = {
|
||||
primary: 'badge-primary',
|
||||
secondary: 'badge-secondary',
|
||||
success: 'badge-success',
|
||||
warning: 'badge-warning',
|
||||
danger: 'badge-danger',
|
||||
outline: 'badge-outline',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={cn('badge', variantClasses[variant], className)}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Badge variant="success">Active</Badge>
|
||||
<Badge variant="warning">Pending</Badge>
|
||||
<Badge variant="danger">Failed</Badge>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// ALERT COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface AlertProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'info' | 'success' | 'warning' | 'danger';
|
||||
title?: string;
|
||||
onClose?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Alert({ children, variant = 'info', title, onClose, className }: AlertProps) {
|
||||
const variantClasses = {
|
||||
info: 'alert-info',
|
||||
success: 'alert-success',
|
||||
warning: 'alert-warning',
|
||||
danger: 'alert-danger',
|
||||
};
|
||||
|
||||
const icons = {
|
||||
info: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
success: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
warning: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
),
|
||||
danger: (
|
||||
<svg className="alert-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('alert', variantClasses[variant], className)} role="alert">
|
||||
{icons[variant]}
|
||||
<div className="alert-content">
|
||||
{title && <div className="alert-title">{title}</div>}
|
||||
<div className="alert-description">{children}</div>
|
||||
</div>
|
||||
{onClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="ml-auto text-current hover:opacity-70 transition-opacity"
|
||||
aria-label="Close alert"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Alert variant="success" title="Success">
|
||||
Your changes have been saved successfully.
|
||||
</Alert>
|
||||
|
||||
<Alert variant="danger" title="Error" onClose={() => console.log('Closed')}>
|
||||
Failed to save changes. Please try again.
|
||||
</Alert>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// MODAL COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
title?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, children, title, className }: ModalProps) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onClose}>
|
||||
<div
|
||||
className={cn('modal', className)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={title ? 'modal-title' : undefined}
|
||||
>
|
||||
{title && (
|
||||
<div className="modal-header">
|
||||
<h2 id="modal-title" className="modal-title">
|
||||
{title}
|
||||
</h2>
|
||||
<button onClick={onClose} className="modal-close" aria-label="Close modal">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ModalBody({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('modal-body', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
export function ModalFooter({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={cn('modal-footer', className)}>{children}</div>;
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
function Example() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Confirm Action">
|
||||
<ModalBody>
|
||||
<p>Are you sure you want to proceed with this action?</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant="outline" onClick={() => setIsOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => setIsOpen(false)}>
|
||||
Confirm
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// SKELETON LOADING COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface SkeletonProps {
|
||||
className?: string;
|
||||
variant?: 'text' | 'title' | 'avatar' | 'card' | 'rect';
|
||||
width?: string;
|
||||
height?: string;
|
||||
}
|
||||
|
||||
export function Skeleton({ className, variant = 'text', width, height }: SkeletonProps) {
|
||||
const variantClasses = {
|
||||
text: 'skeleton-text',
|
||||
title: 'skeleton-title',
|
||||
avatar: 'skeleton-avatar',
|
||||
card: 'skeleton-card',
|
||||
rect: '',
|
||||
};
|
||||
|
||||
const style: React.CSSProperties = {};
|
||||
if (width) style.width = width;
|
||||
if (height) style.height = height;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('skeleton', variantClasses[variant], className)}
|
||||
style={style}
|
||||
aria-label="Loading"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
// Loading card
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton variant="title" />
|
||||
<Skeleton variant="text" width="60%" />
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Skeleton variant="text" />
|
||||
<Skeleton variant="text" />
|
||||
<Skeleton variant="text" width="80%" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
// Loading list
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton variant="avatar" />
|
||||
<div className="flex-1">
|
||||
<Skeleton variant="text" width="40%" />
|
||||
<Skeleton variant="text" width="60%" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// EMPTY STATE COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
|
||||
return (
|
||||
<div className={cn('empty-state', className)}>
|
||||
{icon && <div className="empty-state-icon">{icon}</div>}
|
||||
<h3 className="empty-state-title">{title}</h3>
|
||||
{description && <p className="empty-state-description">{description}</p>}
|
||||
{action && <div className="empty-state-action">{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<EmptyState
|
||||
icon={<FolderIcon />}
|
||||
title="No projects yet"
|
||||
description="Get started by creating your first project"
|
||||
action={
|
||||
<Button variant="primary" leftIcon={<PlusIcon />}>
|
||||
Create Project
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// ERROR STATE COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface ErrorStateProps {
|
||||
title: string;
|
||||
message: string;
|
||||
onRetry?: () => void;
|
||||
onGoBack?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ErrorState({ title, message, onRetry, onGoBack, className }: ErrorStateProps) {
|
||||
return (
|
||||
<div className={cn('error-state', className)}>
|
||||
<svg className="error-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
<h3 className="error-state-title">{title}</h3>
|
||||
<p className="error-state-message">{message}</p>
|
||||
<div className="error-state-actions">
|
||||
{onGoBack && (
|
||||
<Button variant="outline" onClick={onGoBack}>
|
||||
Go Back
|
||||
</Button>
|
||||
)}
|
||||
{onRetry && (
|
||||
<Button variant="primary" onClick={onRetry}>
|
||||
Try Again
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<ErrorState
|
||||
title="Failed to load data"
|
||||
message="We couldn't load your projects. Please check your connection and try again."
|
||||
onRetry={() => refetch()}
|
||||
onGoBack={() => navigate('/')}
|
||||
/>
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// AVATAR COMPONENT
|
||||
// ============================================
|
||||
|
||||
interface AvatarProps {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
fallback?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Avatar({ src, alt, fallback, size = 'md', className }: AvatarProps) {
|
||||
const [imageError, setImageError] = useState(false);
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'avatar-sm',
|
||||
md: '',
|
||||
lg: 'avatar-lg',
|
||||
};
|
||||
|
||||
const showFallback = !src || imageError;
|
||||
const initials = fallback
|
||||
? fallback
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
: '?';
|
||||
|
||||
return (
|
||||
<div className={cn('avatar', sizeClasses[size], className)}>
|
||||
{showFallback ? (
|
||||
<span>{initials}</span>
|
||||
) : (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt || fallback || 'Avatar'}
|
||||
onError={() => setImageError(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage Example:
|
||||
/*
|
||||
<Avatar src="/user.jpg" alt="John Doe" fallback="John Doe" />
|
||||
<Avatar fallback="Jane Smith" size="lg" />
|
||||
<Avatar src="/broken.jpg" fallback="Error" /> // Falls back to initials
|
||||
*/
|
||||
399
skills/frontend-design/examples/typescript/theme-provider.tsx
Executable file
399
skills/frontend-design/examples/typescript/theme-provider.tsx
Executable file
@@ -0,0 +1,399 @@
|
||||
/**
|
||||
* Theme Provider — Theme Management System
|
||||
*
|
||||
* This file provides a complete theme management system with:
|
||||
* - Light/dark/system theme support
|
||||
* - Theme persistence (localStorage)
|
||||
* - System preference detection
|
||||
* - Type-safe theme context
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/theme-provider.tsx
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* import { ThemeProvider, useTheme } from './theme-provider';
|
||||
*
|
||||
* function App() {
|
||||
* return (
|
||||
* <ThemeProvider defaultTheme="system">
|
||||
* <YourApp />
|
||||
* </ThemeProvider>
|
||||
* );
|
||||
* }
|
||||
*
|
||||
* function ThemeToggle() {
|
||||
* const { theme, setTheme } = useTheme();
|
||||
* return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle</button>;
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
|
||||
import { Theme } from './design-tokens';
|
||||
|
||||
// ============================================
|
||||
// Types
|
||||
// ============================================
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: ReactNode;
|
||||
defaultTheme?: Theme;
|
||||
storageKey?: string;
|
||||
}
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
effectiveTheme: 'light' | 'dark'; // Resolved theme (system → light/dark)
|
||||
setTheme: (theme: Theme) => void;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Context
|
||||
// ============================================
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
// ============================================
|
||||
// Provider Component
|
||||
// ============================================
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = 'system',
|
||||
storageKey = 'ui-theme',
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setThemeState] = useState<Theme>(() => {
|
||||
// Load theme from localStorage if available
|
||||
if (typeof window !== 'undefined') {
|
||||
const stored = localStorage.getItem(storageKey);
|
||||
if (stored && ['light', 'dark', 'system'].includes(stored)) {
|
||||
return stored as Theme;
|
||||
}
|
||||
}
|
||||
return defaultTheme;
|
||||
});
|
||||
|
||||
const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>(() => {
|
||||
if (theme === 'system') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
return theme;
|
||||
});
|
||||
|
||||
// Update effective theme when theme or system preference changes
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
|
||||
// Remove previous theme classes
|
||||
root.classList.remove('light', 'dark');
|
||||
|
||||
if (theme === 'system') {
|
||||
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
root.classList.add(systemTheme);
|
||||
root.setAttribute('data-theme', systemTheme);
|
||||
setEffectiveTheme(systemTheme);
|
||||
} else {
|
||||
root.classList.add(theme);
|
||||
root.setAttribute('data-theme', theme);
|
||||
setEffectiveTheme(theme);
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
// Listen for system theme changes when in system mode
|
||||
useEffect(() => {
|
||||
if (theme !== 'system') return;
|
||||
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const handleChange = (e: MediaQueryListEvent) => {
|
||||
const systemTheme = e.matches ? 'dark' : 'light';
|
||||
const root = window.document.documentElement;
|
||||
root.classList.remove('light', 'dark');
|
||||
root.classList.add(systemTheme);
|
||||
root.setAttribute('data-theme', systemTheme);
|
||||
setEffectiveTheme(systemTheme);
|
||||
};
|
||||
|
||||
// Modern browsers
|
||||
if (mediaQuery.addEventListener) {
|
||||
mediaQuery.addEventListener('change', handleChange);
|
||||
return () => mediaQuery.removeEventListener('change', handleChange);
|
||||
}
|
||||
// Legacy browsers
|
||||
else if (mediaQuery.addListener) {
|
||||
mediaQuery.addListener(handleChange);
|
||||
return () => mediaQuery.removeListener(handleChange);
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const setTheme = (newTheme: Theme) => {
|
||||
localStorage.setItem(storageKey, newTheme);
|
||||
setThemeState(newTheme);
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(effectiveTheme === 'light' ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
const value: ThemeContextType = {
|
||||
theme,
|
||||
effectiveTheme,
|
||||
setTheme,
|
||||
toggleTheme,
|
||||
};
|
||||
|
||||
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Hook
|
||||
// ============================================
|
||||
|
||||
export function useTheme(): ThemeContextType {
|
||||
const context = useContext(ThemeContext);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Theme Toggle Component
|
||||
// ============================================
|
||||
|
||||
interface ThemeToggleProps {
|
||||
className?: string;
|
||||
iconSize?: number;
|
||||
}
|
||||
|
||||
export function ThemeToggle({ className = '', iconSize = 20 }: ThemeToggleProps) {
|
||||
const { theme, effectiveTheme, setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setTheme(effectiveTheme === 'light' ? 'dark' : 'light')}
|
||||
className={`btn btn-ghost btn-icon ${className}`}
|
||||
aria-label="Toggle theme"
|
||||
title="Toggle theme"
|
||||
>
|
||||
{effectiveTheme === 'light' ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Theme Selector Component (Dropdown)
|
||||
// ============================================
|
||||
|
||||
interface ThemeSelectorProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ThemeSelector({ className = '' }: ThemeSelectorProps) {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const themes: { value: Theme; label: string; icon: JSX.Element }[] = [
|
||||
{
|
||||
value: 'light',
|
||||
label: 'Light',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'dark',
|
||||
label: 'Dark',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'system',
|
||||
label: 'System',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" />
|
||||
<line x1="8" y1="21" x2="16" y2="21" />
|
||||
<line x1="12" y1="17" x2="12" y2="21" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="btn btn-outline flex items-center gap-2"
|
||||
aria-label="Select theme"
|
||||
>
|
||||
{themes.find((t) => t.value === theme)?.icon}
|
||||
<span>{themes.find((t) => t.value === theme)?.label}</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className={`transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-40"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-surface border border-border z-50">
|
||||
<div className="py-1" role="menu">
|
||||
{themes.map((t) => (
|
||||
<button
|
||||
key={t.value}
|
||||
onClick={() => {
|
||||
setTheme(t.value);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
className={`
|
||||
w-full flex items-center gap-3 px-4 py-2 text-sm
|
||||
hover:bg-surface-hover transition-colors
|
||||
${theme === t.value ? 'bg-surface-subtle font-medium' : ''}
|
||||
`}
|
||||
role="menuitem"
|
||||
>
|
||||
{t.icon}
|
||||
<span>{t.label}</span>
|
||||
{theme === t.value && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="ml-auto"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Utility: Apply theme class to body
|
||||
// ============================================
|
||||
|
||||
export function useThemeClass() {
|
||||
const { effectiveTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
root.classList.remove('light', 'dark');
|
||||
root.classList.add(effectiveTheme);
|
||||
root.setAttribute('data-theme', effectiveTheme);
|
||||
}, [effectiveTheme]);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Higher-Order Component for Theme
|
||||
// ============================================
|
||||
|
||||
export function withTheme<P extends object>(
|
||||
Component: React.ComponentType<P & { theme: ThemeContextType }>
|
||||
) {
|
||||
return function ThemedComponent(props: P) {
|
||||
const theme = useTheme();
|
||||
return <Component {...props} theme={theme} />;
|
||||
};
|
||||
}
|
||||
354
skills/frontend-design/examples/typescript/utils.ts
Executable file
354
skills/frontend-design/examples/typescript/utils.ts
Executable file
@@ -0,0 +1,354 @@
|
||||
/**
|
||||
* Utility Functions
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/examples/typescript/utils.ts
|
||||
*/
|
||||
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
/**
|
||||
* Merge Tailwind CSS classes with proper precedence
|
||||
* Combines clsx and tailwind-merge for optimal class handling
|
||||
*
|
||||
* @param inputs - Class values to merge
|
||||
* @returns Merged class string
|
||||
*
|
||||
* @example
|
||||
* cn('px-4 py-2', 'px-6') // => 'py-2 px-6' (px-6 overwrites px-4)
|
||||
* cn('text-red-500', condition && 'text-blue-500') // => conditional classes
|
||||
*/
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
/**
|
||||
* Format file size in human-readable format
|
||||
*
|
||||
* @param bytes - File size in bytes
|
||||
* @param decimals - Number of decimal places (default: 2)
|
||||
* @returns Formatted string (e.g., "1.5 MB")
|
||||
*/
|
||||
export function formatFileSize(bytes: number, decimals: number = 2): string {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Debounce function to limit execution rate
|
||||
*
|
||||
* @param func - Function to debounce
|
||||
* @param wait - Wait time in milliseconds
|
||||
* @returns Debounced function
|
||||
*/
|
||||
export function debounce<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: NodeJS.Timeout | null = null;
|
||||
|
||||
return function executedFunction(...args: Parameters<T>) {
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
func(...args);
|
||||
};
|
||||
|
||||
if (timeout) clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Throttle function to limit execution frequency
|
||||
*
|
||||
* @param func - Function to throttle
|
||||
* @param limit - Time limit in milliseconds
|
||||
* @returns Throttled function
|
||||
*/
|
||||
export function throttle<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
limit: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let inThrottle: boolean;
|
||||
|
||||
return function executedFunction(...args: Parameters<T>) {
|
||||
if (!inThrottle) {
|
||||
func(...args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => (inThrottle = false), limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a random ID
|
||||
*
|
||||
* @param length - Length of the ID (default: 8)
|
||||
* @returns Random ID string
|
||||
*/
|
||||
export function generateId(length: number = 8): string {
|
||||
return Math.random()
|
||||
.toString(36)
|
||||
.substring(2, 2 + length);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if code is running in browser
|
||||
*/
|
||||
export const isBrowser = typeof window !== 'undefined';
|
||||
|
||||
/**
|
||||
* Safely access localStorage
|
||||
*/
|
||||
export const storage = {
|
||||
get: (key: string): string | null => {
|
||||
if (!isBrowser) return null;
|
||||
try {
|
||||
return localStorage.getItem(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
set: (key: string, value: string): void => {
|
||||
if (!isBrowser) return;
|
||||
try {
|
||||
localStorage.setItem(key, value);
|
||||
} catch {
|
||||
// Handle quota exceeded or other errors
|
||||
}
|
||||
},
|
||||
remove: (key: string): void => {
|
||||
if (!isBrowser) return;
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch {
|
||||
// Handle errors
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Copy text to clipboard
|
||||
*
|
||||
* @param text - Text to copy
|
||||
* @returns Promise<boolean> - Success status
|
||||
*/
|
||||
export async function copyToClipboard(text: string): Promise<boolean> {
|
||||
if (!isBrowser) return false;
|
||||
|
||||
try {
|
||||
if (navigator.clipboard) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const success = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
return success;
|
||||
}
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format date in relative time (e.g., "2 hours ago")
|
||||
*
|
||||
* @param date - Date to format
|
||||
* @returns Formatted relative time string
|
||||
*/
|
||||
export function formatRelativeTime(date: Date): string {
|
||||
const now = new Date();
|
||||
const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) return 'just now';
|
||||
if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
|
||||
if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
|
||||
if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
|
||||
if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 604800)}w ago`;
|
||||
if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)}mo ago`;
|
||||
return `${Math.floor(diffInSeconds / 31536000)}y ago`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Truncate text with ellipsis
|
||||
*
|
||||
* @param text - Text to truncate
|
||||
* @param maxLength - Maximum length
|
||||
* @returns Truncated text
|
||||
*/
|
||||
export function truncate(text: string, maxLength: number): string {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.slice(0, maxLength - 3) + '...';
|
||||
}
|
||||
|
||||
/**
|
||||
* Sleep/delay function
|
||||
*
|
||||
* @param ms - Milliseconds to sleep
|
||||
* @returns Promise that resolves after delay
|
||||
*/
|
||||
export function sleep(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clamp a number between min and max
|
||||
*
|
||||
* @param value - Value to clamp
|
||||
* @param min - Minimum value
|
||||
* @param max - Maximum value
|
||||
* @returns Clamped value
|
||||
*/
|
||||
export function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user prefers reduced motion
|
||||
*/
|
||||
export function prefersReducedMotion(): boolean {
|
||||
if (!isBrowser) return false;
|
||||
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user prefers dark mode
|
||||
*/
|
||||
export function prefersDarkMode(): boolean {
|
||||
if (!isBrowser) return false;
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format number with commas
|
||||
*
|
||||
* @param num - Number to format
|
||||
* @returns Formatted number string
|
||||
*
|
||||
* @example
|
||||
* formatNumber(1000) // => "1,000"
|
||||
* formatNumber(1000000) // => "1,000,000"
|
||||
*/
|
||||
export function formatNumber(num: number): string {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
|
||||
/**
|
||||
* Abbreviate large numbers
|
||||
*
|
||||
* @param num - Number to abbreviate
|
||||
* @returns Abbreviated number string
|
||||
*
|
||||
* @example
|
||||
* abbreviateNumber(1000) // => "1K"
|
||||
* abbreviateNumber(1000000) // => "1M"
|
||||
* abbreviateNumber(1500000) // => "1.5M"
|
||||
*/
|
||||
export function abbreviateNumber(num: number): string {
|
||||
if (num < 1000) return num.toString();
|
||||
if (num < 1000000) return `${(num / 1000).toFixed(1).replace(/\.0$/, '')}K`;
|
||||
if (num < 1000000000) return `${(num / 1000000).toFixed(1).replace(/\.0$/, '')}M`;
|
||||
return `${(num / 1000000000).toFixed(1).replace(/\.0$/, '')}B`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get initials from name
|
||||
*
|
||||
* @param name - Full name
|
||||
* @param maxLength - Maximum number of initials (default: 2)
|
||||
* @returns Initials string
|
||||
*
|
||||
* @example
|
||||
* getInitials("John Doe") // => "JD"
|
||||
* getInitials("Mary Jane Watson") // => "MJ"
|
||||
*/
|
||||
export function getInitials(name: string, maxLength: number = 2): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, maxLength);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate email format
|
||||
*
|
||||
* @param email - Email to validate
|
||||
* @returns True if valid email format
|
||||
*/
|
||||
export function isValidEmail(email: string): boolean {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate URL format
|
||||
*
|
||||
* @param url - URL to validate
|
||||
* @returns True if valid URL format
|
||||
*/
|
||||
export function isValidUrl(url: string): boolean {
|
||||
try {
|
||||
new URL(url);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove HTML tags from string
|
||||
*
|
||||
* @param html - HTML string
|
||||
* @returns Plain text
|
||||
*/
|
||||
export function stripHtml(html: string): string {
|
||||
if (!isBrowser) return html;
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = html;
|
||||
return tmp.textContent || tmp.innerText || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Capitalize first letter of string
|
||||
*
|
||||
* @param str - String to capitalize
|
||||
* @returns Capitalized string
|
||||
*/
|
||||
export function capitalize(str: string): string {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert camelCase to kebab-case
|
||||
*
|
||||
* @param str - camelCase string
|
||||
* @returns kebab-case string
|
||||
*/
|
||||
export function camelToKebab(str: string): string {
|
||||
return str.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert kebab-case to camelCase
|
||||
*
|
||||
* @param str - kebab-case string
|
||||
* @returns camelCase string
|
||||
*/
|
||||
export function kebabToCamel(str: string): string {
|
||||
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
}
|
||||
44
skills/frontend-design/package.json
Executable file
44
skills/frontend-design/package.json
Executable file
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "@z-ai/frontend-design-skill",
|
||||
"version": "2.0.0",
|
||||
"description": "Comprehensive frontend design skill for systematic and creative web development",
|
||||
"keywords": [
|
||||
"design-system",
|
||||
"design-tokens",
|
||||
"frontend",
|
||||
"ui-components",
|
||||
"react",
|
||||
"tailwind",
|
||||
"typescript",
|
||||
"accessibility"
|
||||
],
|
||||
"author": "z-ai platform team",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/z-ai/skills"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"clsx": "^2.1.0",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwind-merge": "^2.2.0",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"typescript": "^5.3.0"
|
||||
},
|
||||
"files": [
|
||||
"SKILL.md",
|
||||
"README.md",
|
||||
"LICENSE",
|
||||
"examples/**/*",
|
||||
"templates/**/*"
|
||||
]
|
||||
}
|
||||
385
skills/frontend-design/templates/globals.css
Executable file
385
skills/frontend-design/templates/globals.css
Executable file
@@ -0,0 +1,385 @@
|
||||
/**
|
||||
* Global Styles
|
||||
*
|
||||
* This file provides base styles, resets, and CSS custom properties
|
||||
* for the design system.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/templates/globals.css
|
||||
*
|
||||
* Import this file in your main entry point:
|
||||
* - React: import './globals.css' in index.tsx or App.tsx
|
||||
* - Next.js: import './globals.css' in pages/_app.tsx or app/layout.tsx
|
||||
*/
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ============================================
|
||||
BASE LAYER - CSS Custom Properties
|
||||
============================================ */
|
||||
|
||||
@layer base {
|
||||
/* Root CSS Variables - Light Mode (Default) */
|
||||
:root {
|
||||
/* Background & Surfaces */
|
||||
--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 Brand */
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
/* Secondary */
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
/* Muted */
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
/* Accent */
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
/* Destructive/Danger */
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
/* Borders */
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
/* Misc */
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Dark Mode Overrides */
|
||||
.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%;
|
||||
}
|
||||
|
||||
/* Base Element Styles */
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
|
||||
/* Typography Defaults */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
/* Focus Visible Styles */
|
||||
*:focus-visible {
|
||||
@apply outline-none ring-2 ring-ring ring-offset-2;
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Reduced Motion Preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Scrollbar Styles (Webkit) */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-muted;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-muted-foreground/30 rounded-md;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-muted-foreground/50;
|
||||
}
|
||||
|
||||
/* Firefox Scrollbar */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--muted));
|
||||
}
|
||||
|
||||
/* Selection Color */
|
||||
::selection {
|
||||
@apply bg-primary/20 text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
COMPONENTS LAYER - Reusable Components
|
||||
============================================ */
|
||||
|
||||
@layer components {
|
||||
/* Container */
|
||||
.container {
|
||||
@apply w-full mx-auto px-4 sm:px-6 lg:px-8;
|
||||
max-width: 1536px;
|
||||
}
|
||||
|
||||
/* Button Base */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
|
||||
height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
height: 2rem;
|
||||
padding: 0 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
height: 3rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* Button Variants */
|
||||
.btn-primary {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply hover:bg-accent hover:text-accent-foreground;
|
||||
}
|
||||
|
||||
.btn-destructive {
|
||||
@apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.input {
|
||||
@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card {
|
||||
@apply rounded-lg border bg-card text-card-foreground shadow-sm;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@apply flex flex-col space-y-1.5 p-6;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-2xl font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
@apply text-sm text-muted-foreground;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@apply p-6 pt-0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
@apply flex items-center p-6 pt-0;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge {
|
||||
@apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert {
|
||||
@apply relative w-full rounded-lg border p-4;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
@apply border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
UTILITIES LAYER - Custom Utilities
|
||||
============================================ */
|
||||
|
||||
@layer utilities {
|
||||
/* Text Balance - Prevents orphans */
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* Truncate with multiple lines */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Animate on scroll utilities */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-on-scroll.in-view {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Glassmorphism effect */
|
||||
.glass {
|
||||
@apply bg-background/80 backdrop-blur-md border border-border/50;
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent;
|
||||
}
|
||||
|
||||
/* Focus ring utilities */
|
||||
.focus-ring {
|
||||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
|
||||
}
|
||||
|
||||
/* Aspect ratio utilities (if not using @tailwindcss/aspect-ratio) */
|
||||
.aspect-video {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
/* Safe area insets (for mobile) */
|
||||
.safe-top {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.safe-left {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
.safe-right {
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PRINT STYLES
|
||||
============================================ */
|
||||
|
||||
@media print {
|
||||
/* Hide unnecessary elements when printing */
|
||||
nav, footer, .no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Optimize for printing */
|
||||
body {
|
||||
@apply text-black bg-white;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-black no-underline;
|
||||
}
|
||||
|
||||
/* Page breaks */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
img, table, figure {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
263
skills/frontend-design/templates/tailwind.config.js
Executable file
263
skills/frontend-design/templates/tailwind.config.js
Executable file
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* Tailwind CSS Configuration
|
||||
*
|
||||
* This configuration integrates the design token system with Tailwind CSS.
|
||||
* It provides custom colors, spacing, typography, and more.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/templates/tailwind.config.js
|
||||
*
|
||||
* Installation:
|
||||
* 1. npm install -D tailwindcss postcss autoprefixer
|
||||
* 2. Copy this file to your project root as tailwind.config.js
|
||||
* 3. Update content paths to match your project structure
|
||||
* 4. Import globals.css in your main entry file
|
||||
*/
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// Specify which files Tailwind should scan for class names
|
||||
content: [
|
||||
'./src/**/*.{js,jsx,ts,tsx}',
|
||||
'./pages/**/*.{js,jsx,ts,tsx}',
|
||||
'./components/**/*.{js,jsx,ts,tsx}',
|
||||
'./app/**/*.{js,jsx,ts,tsx}',
|
||||
],
|
||||
|
||||
// Enable dark mode via class strategy
|
||||
darkMode: ['class'],
|
||||
|
||||
theme: {
|
||||
// Extend default theme (preserves Tailwind defaults)
|
||||
extend: {
|
||||
// Custom colors using CSS variables for theme support
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
|
||||
// Border radius scale
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
|
||||
// Custom font families
|
||||
fontFamily: {
|
||||
sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
|
||||
serif: ['var(--font-serif)', 'Georgia', 'serif'],
|
||||
mono: ['var(--font-mono)', 'monospace'],
|
||||
},
|
||||
|
||||
// Typography scale using fluid sizing
|
||||
fontSize: {
|
||||
xs: ['clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)', { lineHeight: '1.4' }],
|
||||
sm: ['clamp(0.875rem, 0.8rem + 0.2vw, 1rem)', { lineHeight: '1.5' }],
|
||||
base: ['clamp(1rem, 0.95rem + 0.25vw, 1.125rem)', { lineHeight: '1.6' }],
|
||||
lg: ['clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)', { lineHeight: '1.5' }],
|
||||
xl: ['clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)', { lineHeight: '1.4' }],
|
||||
'2xl': ['clamp(1.5rem, 1.35rem + 0.6vw, 2rem)', { lineHeight: '1.3' }],
|
||||
'3xl': ['clamp(1.875rem, 1.65rem + 0.9vw, 2.5rem)', { lineHeight: '1.2' }],
|
||||
'4xl': ['clamp(2.25rem, 1.95rem + 1.2vw, 3.5rem)', { lineHeight: '1.1' }],
|
||||
'5xl': ['clamp(3rem, 2.5rem + 2vw, 4.5rem)', { lineHeight: '1' }],
|
||||
},
|
||||
|
||||
// Spacing scale (8px base system)
|
||||
spacing: {
|
||||
0.5: '0.125rem', // 2px
|
||||
1.5: '0.375rem', // 6px
|
||||
2.5: '0.625rem', // 10px
|
||||
3.5: '0.875rem', // 14px
|
||||
4.5: '1.125rem', // 18px
|
||||
5.5: '1.375rem', // 22px
|
||||
6.5: '1.625rem', // 26px
|
||||
7.5: '1.875rem', // 30px
|
||||
8.5: '2.125rem', // 34px
|
||||
9.5: '2.375rem', // 38px
|
||||
13: '3.25rem', // 52px
|
||||
15: '3.75rem', // 60px
|
||||
17: '4.25rem', // 68px
|
||||
18: '4.5rem', // 72px
|
||||
19: '4.75rem', // 76px
|
||||
21: '5.25rem', // 84px
|
||||
22: '5.5rem', // 88px
|
||||
23: '5.75rem', // 92px
|
||||
25: '6.25rem', // 100px
|
||||
},
|
||||
|
||||
// Custom shadows
|
||||
boxShadow: {
|
||||
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||||
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
||||
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
||||
},
|
||||
|
||||
// Animation durations
|
||||
transitionDuration: {
|
||||
DEFAULT: '220ms',
|
||||
fast: '150ms',
|
||||
slow: '300ms',
|
||||
},
|
||||
|
||||
// Keyframe animations
|
||||
keyframes: {
|
||||
// Fade in animation
|
||||
'fade-in': {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
// Fade out animation
|
||||
'fade-out': {
|
||||
'0%': { opacity: '1' },
|
||||
'100%': { opacity: '0' },
|
||||
},
|
||||
// Slide in from top
|
||||
'slide-in-top': {
|
||||
'0%': { transform: 'translateY(-100%)' },
|
||||
'100%': { transform: 'translateY(0)' },
|
||||
},
|
||||
// Slide in from bottom
|
||||
'slide-in-bottom': {
|
||||
'0%': { transform: 'translateY(100%)' },
|
||||
'100%': { transform: 'translateY(0)' },
|
||||
},
|
||||
// Slide in from left
|
||||
'slide-in-left': {
|
||||
'0%': { transform: 'translateX(-100%)' },
|
||||
'100%': { transform: 'translateX(0)' },
|
||||
},
|
||||
// Slide in from right
|
||||
'slide-in-right': {
|
||||
'0%': { transform: 'translateX(100%)' },
|
||||
'100%': { transform: 'translateX(0)' },
|
||||
},
|
||||
// Scale in
|
||||
'scale-in': {
|
||||
'0%': { transform: 'scale(0.95)', opacity: '0' },
|
||||
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||
},
|
||||
// Spin animation
|
||||
spin: {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
},
|
||||
// Shimmer animation (for skeletons)
|
||||
shimmer: {
|
||||
'0%': { backgroundPosition: '200% 0' },
|
||||
'100%': { backgroundPosition: '-200% 0' },
|
||||
},
|
||||
// Pulse animation
|
||||
pulse: {
|
||||
'0%, 100%': { opacity: '1' },
|
||||
'50%': { opacity: '0.5' },
|
||||
},
|
||||
// Bounce animation
|
||||
bounce: {
|
||||
'0%, 100%': { transform: 'translateY(-25%)', animationTimingFunction: 'cubic-bezier(0.8,0,1,1)' },
|
||||
'50%': { transform: 'translateY(0)', animationTimingFunction: 'cubic-bezier(0,0,0.2,1)' },
|
||||
},
|
||||
},
|
||||
|
||||
// Animation utilities
|
||||
animation: {
|
||||
'fade-in': 'fade-in 0.2s ease-out',
|
||||
'fade-out': 'fade-out 0.2s ease-out',
|
||||
'slide-in-top': 'slide-in-top 0.3s ease-out',
|
||||
'slide-in-bottom': 'slide-in-bottom 0.3s ease-out',
|
||||
'slide-in-left': 'slide-in-left 0.3s ease-out',
|
||||
'slide-in-right': 'slide-in-right 0.3s ease-out',
|
||||
'scale-in': 'scale-in 0.2s ease-out',
|
||||
spin: 'spin 0.6s linear infinite',
|
||||
shimmer: 'shimmer 1.5s ease-in-out infinite',
|
||||
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
bounce: 'bounce 1s infinite',
|
||||
},
|
||||
|
||||
// Custom z-index scale
|
||||
zIndex: {
|
||||
dropdown: '1000',
|
||||
sticky: '1100',
|
||||
fixed: '1200',
|
||||
'modal-backdrop': '1300',
|
||||
modal: '1400',
|
||||
popover: '1500',
|
||||
tooltip: '1600',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Plugins
|
||||
plugins: [
|
||||
// Typography plugin for prose styling
|
||||
require('@tailwindcss/typography'),
|
||||
|
||||
// Forms plugin for better form styling
|
||||
require('@tailwindcss/forms'),
|
||||
|
||||
// Custom plugin for component utilities
|
||||
function ({ addComponents, theme }) {
|
||||
addComponents({
|
||||
// Container utility
|
||||
'.container': {
|
||||
width: '100%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
paddingLeft: theme('spacing.4'),
|
||||
paddingRight: theme('spacing.4'),
|
||||
'@screen sm': {
|
||||
maxWidth: '640px',
|
||||
},
|
||||
'@screen md': {
|
||||
maxWidth: '768px',
|
||||
},
|
||||
'@screen lg': {
|
||||
maxWidth: '1024px',
|
||||
paddingLeft: theme('spacing.6'),
|
||||
paddingRight: theme('spacing.6'),
|
||||
},
|
||||
'@screen xl': {
|
||||
maxWidth: '1280px',
|
||||
},
|
||||
'@screen 2xl': {
|
||||
maxWidth: '1536px',
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user