initial commit
This commit is contained in:
@@ -0,0 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{PROJECT_NAME}} Design System</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
background: white;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 3rem;
|
||||
min-height: 100vh;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.component-card {
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.component-preview {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.375rem;
|
||||
padding: 2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1f2937;
|
||||
color: #e5e7eb;
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 0.875rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.variant-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.state-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.token-swatch {
|
||||
height: 4rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.usage-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Fixed Sidebar Navigation -->
|
||||
<aside class="nav-sidebar">
|
||||
<div class="nav-content">
|
||||
<div class="nav-logo">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-2xl">{{PROJECT_ICON}}</span>
|
||||
<div>
|
||||
<div class="font-bold">{{PROJECT_NAME}}</div>
|
||||
<div class="text-xs text-gray-500">Design System</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-500">
|
||||
Last updated: {{LAST_UPDATED}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<div class="nav-section">
|
||||
<h4 class="nav-section-title">Overview</h4>
|
||||
<ul class="nav-list">
|
||||
<li><a href="#introduction" class="nav-link">Introduction</a></li>
|
||||
<li><a href="#getting-started" class="nav-link">Getting Started</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h4 class="nav-section-title">Foundation</h4>
|
||||
<ul class="nav-list">
|
||||
<li><a href="#design-tokens" class="nav-link">Design Tokens</a></li>
|
||||
<li><a href="#colors" class="nav-link">Colors</a></li>
|
||||
<li><a href="#typography" class="nav-link">Typography</a></li>
|
||||
<li><a href="#spacing" class="nav-link">Spacing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{COMPONENT_NAVIGATION}}
|
||||
|
||||
<div class="nav-section">
|
||||
<h4 class="nav-section-title">Resources</h4>
|
||||
<ul class="nav-list">
|
||||
<li><a href="#changelog" class="nav-link">Changelog</a></li>
|
||||
<li><a href="#figma" class="nav-link">Figma Files</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
|
||||
<!-- Introduction -->
|
||||
<section id="introduction" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h1 class="text-5xl font-extrabold text-gray-900 mb-4">{{PROJECT_NAME}} Design System</h1>
|
||||
<p class="text-xl text-gray-600 mb-8">{{PROJECT_DESCRIPTION}}</p>
|
||||
|
||||
<div class="component-card">
|
||||
<p class="text-gray-700 leading-relaxed mb-4">
|
||||
{{PROJECT_OVERVIEW}}
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<span class="version-badge">Version {{VERSION}}</span>
|
||||
<span class="usage-badge">{{COMPONENT_COUNT}} Components</span>
|
||||
<span class="version-badge">Mode: {{DESIGN_SYSTEM_MODE}}</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mt-4">
|
||||
<strong>Method:</strong> Whiteport Design Studio (WDS) • <strong>Created:</strong> {{CREATED_DATE}}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Getting Started -->
|
||||
<section id="getting-started" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Getting Started</h2>
|
||||
|
||||
<div class="component-card">
|
||||
<h3 class="text-xl font-semibold mb-4">Installation</h3>
|
||||
<div class="code-block">
|
||||
<pre>{{INSTALLATION_INSTRUCTIONS}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="component-card">
|
||||
<h3 class="text-xl font-semibold mb-4">Usage</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Import components from the design system:
|
||||
</p>
|
||||
<div class="code-block">
|
||||
<pre>{{USAGE_EXAMPLE}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Design Tokens -->
|
||||
<section id="design-tokens" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Design Tokens</h2>
|
||||
|
||||
<div class="component-card">
|
||||
<p class="text-gray-700 mb-4">
|
||||
Design tokens provide a consistent visual language across the application.
|
||||
All components use these tokens to ensure consistency and maintainability.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{DESIGN_TOKENS_CONTENT}}
|
||||
</section>
|
||||
|
||||
<!-- Colors -->
|
||||
<section id="colors" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Colors</h2>
|
||||
{{COLOR_TOKENS}}
|
||||
</section>
|
||||
|
||||
<!-- Typography -->
|
||||
<section id="typography" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Typography</h2>
|
||||
{{TYPOGRAPHY_TOKENS}}
|
||||
</section>
|
||||
|
||||
<!-- Spacing -->
|
||||
<section id="spacing" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Spacing</h2>
|
||||
{{SPACING_TOKENS}}
|
||||
</section>
|
||||
|
||||
<!-- Components -->
|
||||
{{COMPONENTS_CONTENT}}
|
||||
|
||||
<!-- Changelog -->
|
||||
<section id="changelog" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Changelog</h2>
|
||||
|
||||
<div class="component-card">
|
||||
<h3 class="text-lg font-semibold mb-4">Recent Updates</h3>
|
||||
{{CHANGELOG_CONTENT}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Figma -->
|
||||
<section id="figma" class="mb-16" style="scroll-margin-top: 2rem;">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-6">Figma Files</h2>
|
||||
|
||||
<div class="component-card">
|
||||
{{FIGMA_LINKS}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Smooth scrolling for navigation links
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
const targetElement = document.getElementById(targetId);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({ behavior: 'smooth' });
|
||||
|
||||
// Update active state
|
||||
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update active nav link on scroll
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let current = '';
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.clientHeight;
|
||||
if (window.pageYOffset >= sectionTop - 100) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${current}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Interactive component demos
|
||||
function toggleState(button, componentId, state) {
|
||||
const component = document.getElementById(componentId);
|
||||
if (component) {
|
||||
// Remove all state classes
|
||||
component.className = component.className.replace(/state-\w+/g, '');
|
||||
// Add new state class
|
||||
component.classList.add(`state-${state}`);
|
||||
|
||||
// Update button states
|
||||
button.parentElement.querySelectorAll('button').forEach(btn => {
|
||||
btn.classList.remove('bg-blue-500', 'text-white');
|
||||
btn.classList.add('bg-gray-200', 'text-gray-700');
|
||||
});
|
||||
button.classList.remove('bg-gray-200', 'text-gray-700');
|
||||
button.classList.add('bg-blue-500', 'text-white');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
# Component Library Configuration
|
||||
|
||||
**Library:** [Library Name]
|
||||
**Version:** [Version]
|
||||
**Last Updated:** [Date]
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
[Installation commands]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Mappings
|
||||
|
||||
**Format:** `WDS Component → Library Component`
|
||||
|
||||
### Interactive Components
|
||||
|
||||
- Button [btn-001] → shadcn/ui Button
|
||||
- [More mappings]
|
||||
|
||||
### Form Components
|
||||
|
||||
- Input Field [inp-001] → shadcn/ui Input
|
||||
- [More mappings]
|
||||
|
||||
---
|
||||
|
||||
## Theme Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"colors": {
|
||||
"primary": "#2563eb",
|
||||
"secondary": "#64748b"
|
||||
},
|
||||
"typography": {
|
||||
"fontFamily": "Inter, sans-serif"
|
||||
},
|
||||
"spacing": {
|
||||
"unit": "0.25rem"
|
||||
},
|
||||
"borderRadius": {
|
||||
"default": "0.375rem"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Customizations
|
||||
|
||||
[Document any customizations from library defaults]
|
||||
|
||||
---
|
||||
|
||||
## Library Documentation
|
||||
|
||||
**Official Docs:** [Link]
|
||||
**Component Gallery:** [Link]
|
||||
**GitHub:** [Link]
|
||||
@@ -0,0 +1,134 @@
|
||||
# [Component Name] [[component-id]]
|
||||
|
||||
**Type:** [Interactive/Form/Layout/Content/Feedback/Navigation]
|
||||
**Category:** [Specific category]
|
||||
**Purpose:** [Brief description]
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
[Component description and when to use it]
|
||||
|
||||
---
|
||||
|
||||
## Variants
|
||||
|
||||
[List variants if any, or state "This component has no variants"]
|
||||
|
||||
---
|
||||
|
||||
## States
|
||||
|
||||
**Required States:**
|
||||
|
||||
- default
|
||||
- [other required states]
|
||||
|
||||
**Optional States:**
|
||||
|
||||
- [optional states if any]
|
||||
|
||||
**State Descriptions:**
|
||||
[Describe each state]
|
||||
|
||||
---
|
||||
|
||||
## Styling
|
||||
|
||||
### Visual Properties
|
||||
|
||||
**Size:** [values]
|
||||
**Shape:** [values]
|
||||
**Colors:** [values]
|
||||
**Typography:** [values]
|
||||
**Spacing:** [values]
|
||||
|
||||
### Design Tokens
|
||||
|
||||
```yaml
|
||||
[Token definitions]
|
||||
```
|
||||
|
||||
### Figma Reference
|
||||
|
||||
[If Mode B - Custom Design System]
|
||||
|
||||
### Library Component
|
||||
|
||||
[If Mode C - Component Library]
|
||||
|
||||
---
|
||||
|
||||
## Behavior
|
||||
|
||||
### Interactions
|
||||
|
||||
[Describe interactions]
|
||||
|
||||
### Animations
|
||||
|
||||
[Describe animations if any]
|
||||
|
||||
---
|
||||
|
||||
## Accessibility
|
||||
|
||||
**ARIA Attributes:**
|
||||
[List ARIA attributes]
|
||||
|
||||
**Keyboard Support:**
|
||||
[List keyboard shortcuts]
|
||||
|
||||
**Screen Reader:**
|
||||
[How screen readers announce this]
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
### When to Use
|
||||
|
||||
[Guidelines]
|
||||
|
||||
### When Not to Use
|
||||
|
||||
[Guidelines]
|
||||
|
||||
### Best Practices
|
||||
|
||||
- [Practice 1]
|
||||
- [Practice 2]
|
||||
|
||||
---
|
||||
|
||||
## Used In
|
||||
|
||||
**Pages:** [count]
|
||||
|
||||
**Examples:**
|
||||
|
||||
- [Page] - [Usage]
|
||||
|
||||
---
|
||||
|
||||
## Related Components
|
||||
|
||||
[Related components if any]
|
||||
|
||||
---
|
||||
|
||||
## Version History
|
||||
|
||||
**Created:** [Date]
|
||||
**Last Updated:** [Date]
|
||||
|
||||
**Changes:**
|
||||
|
||||
- [Date]: [Change]
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
[Additional notes]
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design Tokens
|
||||
|
||||
**Last Updated:** [Date]
|
||||
**Token Count:** [count]
|
||||
|
||||
---
|
||||
|
||||
## Colors
|
||||
|
||||
### Primary Colors
|
||||
|
||||
```yaml
|
||||
primary-50: #eff6ff
|
||||
primary-100: #dbeafe
|
||||
primary-200: #bfdbfe
|
||||
primary-300: #93c5fd
|
||||
primary-400: #60a5fa
|
||||
primary-500: #3b82f6
|
||||
primary-600: #2563eb
|
||||
primary-700: #1d4ed8
|
||||
primary-800: #1e40af
|
||||
primary-900: #1e3a8a
|
||||
```
|
||||
|
||||
### Semantic Colors
|
||||
|
||||
```yaml
|
||||
success: #10b981
|
||||
error: #ef4444
|
||||
warning: #f59e0b
|
||||
info: #3b82f6
|
||||
```
|
||||
|
||||
### Neutral Colors
|
||||
|
||||
```yaml
|
||||
gray-50: #f9fafb
|
||||
gray-100: #f3f4f6
|
||||
[... more grays]
|
||||
gray-900: #111827
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Families
|
||||
|
||||
```yaml
|
||||
font-sans: 'Inter, system-ui, sans-serif'
|
||||
font-mono: 'JetBrains Mono, monospace'
|
||||
```
|
||||
|
||||
### Font Sizes
|
||||
|
||||
```yaml
|
||||
text-xs: 0.75rem
|
||||
text-sm: 0.875rem
|
||||
text-base: 1rem
|
||||
text-lg: 1.125rem
|
||||
text-xl: 1.25rem
|
||||
text-2xl: 1.5rem
|
||||
text-3xl: 1.875rem
|
||||
text-4xl: 2.25rem
|
||||
```
|
||||
|
||||
### Font Weights
|
||||
|
||||
```yaml
|
||||
font-normal: 400
|
||||
font-medium: 500
|
||||
font-semibold: 600
|
||||
font-bold: 700
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Spacing
|
||||
|
||||
```yaml
|
||||
spacing-0: 0
|
||||
spacing-1: 0.25rem
|
||||
spacing-2: 0.5rem
|
||||
spacing-3: 0.75rem
|
||||
spacing-4: 1rem
|
||||
spacing-6: 1.5rem
|
||||
spacing-8: 2rem
|
||||
spacing-12: 3rem
|
||||
spacing-16: 4rem
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Layout
|
||||
|
||||
### Breakpoints
|
||||
|
||||
```yaml
|
||||
sm: 640px
|
||||
md: 768px
|
||||
lg: 1024px
|
||||
xl: 1280px
|
||||
2xl: 1536px
|
||||
```
|
||||
|
||||
### Container Widths
|
||||
|
||||
```yaml
|
||||
container-sm: 640px
|
||||
container-md: 768px
|
||||
container-lg: 1024px
|
||||
container-xl: 1280px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Effects
|
||||
|
||||
### Shadows
|
||||
|
||||
```yaml
|
||||
shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05)
|
||||
shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1)
|
||||
shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1)
|
||||
```
|
||||
|
||||
### Border Radius
|
||||
|
||||
```yaml
|
||||
radius-sm: 0.125rem
|
||||
radius-md: 0.375rem
|
||||
radius-lg: 0.5rem
|
||||
radius-full: 9999px
|
||||
```
|
||||
|
||||
### Transitions
|
||||
|
||||
```yaml
|
||||
transition-fast: 150ms
|
||||
transition-base: 200ms
|
||||
transition-slow: 300ms
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component-Specific Tokens
|
||||
|
||||
### Button
|
||||
|
||||
```yaml
|
||||
button-padding-x: spacing-4
|
||||
button-padding-y: spacing-2
|
||||
button-border-radius: radius-md
|
||||
button-font-weight: font-semibold
|
||||
```
|
||||
|
||||
### Input
|
||||
|
||||
```yaml
|
||||
input-height: 2.5rem
|
||||
input-padding-x: spacing-3
|
||||
input-border-color: gray-300
|
||||
input-border-radius: radius-md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Tokens are automatically populated as components are added to the design system.**
|
||||
Reference in New Issue
Block a user