95 lines
3.7 KiB
JavaScript
95 lines
3.7 KiB
JavaScript
/**
|
|
* Design System Overview
|
|
* @generated 2025-12-12T07:15:27.637235
|
|
*/
|
|
export default {
|
|
title: 'Overview',
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'DSS Design System - Token documentation and component library'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const styles = `
|
|
.overview { max-width: 800px; font-family: system-ui, sans-serif; }
|
|
.overview h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
|
.overview .subtitle { color: #6b7280; margin-bottom: 2rem; }
|
|
.overview h2 { font-size: 1.25rem; margin-top: 2rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
|
.overview ul { padding-left: 1.5rem; }
|
|
.overview li { margin: 0.5rem 0; }
|
|
.overview code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875rem; }
|
|
.layer { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: #f9fafb; border-radius: 8px; margin: 0.5rem 0; }
|
|
.layer-num { width: 24px; height: 24px; background: #18181b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
|
|
.stats { display: flex; gap: 1rem; margin: 1rem 0; }
|
|
.stat { background: #f9fafb; padding: 1rem; border-radius: 8px; text-align: center; }
|
|
.stat-value { font-size: 2rem; font-weight: 700; color: #18181b; }
|
|
.stat-label { font-size: 0.75rem; color: #6b7280; }
|
|
`;
|
|
|
|
export const Introduction = {
|
|
render: () => `
|
|
<style>${styles}</style>
|
|
<div class="overview">
|
|
<h1>DSS Design System</h1>
|
|
<p class="subtitle">Token-driven design system with 3-layer architecture</p>
|
|
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">22</div>
|
|
<div class="stat-label">Color Scales</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">59</div>
|
|
<div class="stat-label">Components</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">6</div>
|
|
<div class="stat-label">Categories</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Architecture</h2>
|
|
<div class="layer">
|
|
<span class="layer-num">1</span>
|
|
<strong>Core Primitives</strong> - Raw Tailwind values (colors, spacing, fonts)
|
|
</div>
|
|
<div class="layer">
|
|
<span class="layer-num">2</span>
|
|
<strong>Skin</strong> - Semantic mapping (primary, secondary, etc.)
|
|
</div>
|
|
<div class="layer">
|
|
<span class="layer-num">3</span>
|
|
<strong>Theme</strong> - Brand overrides
|
|
</div>
|
|
|
|
<h2>Navigation</h2>
|
|
<ul>
|
|
<li><strong>Foundation</strong> - Core primitives (colors, spacing, typography, radius, shadows)</li>
|
|
<li><strong>Tokens</strong> - Semantic design tokens from skin</li>
|
|
<li><strong>Components</strong> - 59 shadcn/ui components organized by category</li>
|
|
</ul>
|
|
|
|
<h2>Component Categories</h2>
|
|
<ul>
|
|
<li><strong>Form</strong> - Button, Input, Select, Checkbox, etc.</li>
|
|
<li><strong>Data Display</strong> - Table, Badge, Avatar, Chart, etc.</li>
|
|
<li><strong>Feedback</strong> - Alert, Toast, Progress, Spinner, etc.</li>
|
|
<li><strong>Navigation</strong> - Tabs, Breadcrumb, Sidebar, etc.</li>
|
|
<li><strong>Overlay</strong> - Dialog, Sheet, Dropdown, Tooltip, etc.</li>
|
|
<li><strong>Layout</strong> - Card, Separator, Scroll Area, etc.</li>
|
|
</ul>
|
|
|
|
<h2>Usage</h2>
|
|
<p>Import tokens CSS in your project:</p>
|
|
<pre><code>import '.dss/data/_system/themes/tokens.css';</code></pre>
|
|
<p>Use CSS variables in your styles:</p>
|
|
<pre><code>color: var(--color-primary);
|
|
background: var(--color-background);</code></pre>
|
|
</div>
|
|
`
|
|
};
|