chore: exclude generated files from git tracking
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
- Remove .dss/data/, .dss/components/, generated stories from tracking - Update .gitignore to exclude all runtime/generated content - Keep only reference files (.dss/config/, .dss/core/, .dss/skins/, .dss/themes/, .dss/schema/) Generated files are now created on /dss-init and not committed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,884 +0,0 @@
|
||||
/**
|
||||
* Color Primitives - Foundation
|
||||
* Full Tailwind color palette organized by category
|
||||
* @generated 2025-12-12T07:46:35.099020
|
||||
*/
|
||||
export default {
|
||||
title: 'Foundation/Colors/Primitives',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Core color primitives from Tailwind palette. Organized into Base, Neutral, and Semantic scales.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.color-container { font-family: system-ui, sans-serif; }
|
||||
.color-section { margin-bottom: 3rem; }
|
||||
.color-section h2 { font-size: 1.25rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
||||
.swatch-row { display: flex; flex-wrap: wrap; gap: 1rem; }
|
||||
.color-swatch { text-align: center; }
|
||||
.swatch { width: 80px; height: 80px; border-radius: 8px; margin-bottom: 0.5rem; }
|
||||
.label { font-weight: 500; font-size: 0.875rem; }
|
||||
.value { font-family: monospace; font-size: 0.75rem; color: #6b7280; }
|
||||
.palette-grid { display: flex; flex-wrap: wrap; gap: 2rem; }
|
||||
.color-palette { min-width: 140px; }
|
||||
.color-palette h3 { margin: 0 0 0.5rem; text-transform: capitalize; font-size: 0.875rem; font-weight: 600; }
|
||||
.shades { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; }
|
||||
.shade { padding: 0.5rem 0.75rem; font-family: monospace; font-size: 0.65rem; }
|
||||
`;
|
||||
|
||||
export const AllColors = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="color-container">
|
||||
|
||||
<div class="color-section">
|
||||
<h2>Base</h2>
|
||||
<div class="swatch-row">
|
||||
<div class="color-swatch">
|
||||
<div class="swatch" style="background: #ffffff; border: 1px solid #e5e7eb;"></div>
|
||||
<div class="label">white</div>
|
||||
<div class="value">#ffffff</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="swatch" style="background: #000000; "></div>
|
||||
<div class="label">black</div>
|
||||
<div class="value">#000000</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="swatch" style="background: transparent; border: 1px solid #e5e7eb;"></div>
|
||||
<div class="label">transparent</div>
|
||||
<div class="value">transparent</div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-section">
|
||||
<h2>Neutral Scales</h2>
|
||||
<div class="palette-grid">
|
||||
<div class="color-palette">
|
||||
<h3>slate</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #f8fafc; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f1f5f9; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e2e8f0; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #cbd5e1; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #94a3b8; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #64748b; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #475569; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #334155; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1e293b; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0f172a; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #020617; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>gray</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #f9fafb; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f3f4f6; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e5e7eb; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d1d5db; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #9ca3af; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #6b7280; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4b5563; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #374151; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1f2937; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #111827; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #030712; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>zinc</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fafafa; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f4f4f5; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e4e4e7; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d4d4d8; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a1a1aa; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #71717a; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #52525b; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #3f3f46; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #27272a; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #18181b; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #09090b; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>neutral</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fafafa; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f5f5f5; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e5e5e5; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d4d4d4; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a3a3a3; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #737373; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #525252; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #404040; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #262626; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #171717; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0a0a0a; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>stone</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fafaf9; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f5f5f4; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e7e5e4; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d6d3d1; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a8a29e; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #78716c; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #57534e; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #44403c; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #292524; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1c1917; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0c0a09; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-section">
|
||||
<h2>Semantic Scales</h2>
|
||||
<div class="palette-grid">
|
||||
<div class="color-palette">
|
||||
<h3>red</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fef2f2; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fee2e2; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fecaca; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fca5a5; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f87171; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ef4444; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #dc2626; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #b91c1c; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #991b1b; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #7f1d1d; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #450a0a; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>orange</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fff7ed; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ffedd5; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fed7aa; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fdba74; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fb923c; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f97316; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ea580c; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #c2410c; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #9a3412; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #7c2d12; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #431407; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>amber</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fffbeb; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fef3c7; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fde68a; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fcd34d; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fbbf24; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f59e0b; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d97706; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #b45309; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #92400e; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #78350f; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #451a03; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>yellow</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fefce8; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fef9c3; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fef08a; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fde047; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #facc15; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #eab308; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ca8a04; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a16207; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #854d0e; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #713f12; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #422006; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>lime</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #f7fee7; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ecfccb; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d9f99d; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #bef264; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a3e635; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #84cc16; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #65a30d; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4d7c0f; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #3f6212; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #365314; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1a2e05; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>green</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #f0fdf4; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #dcfce7; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #bbf7d0; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #86efac; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4ade80; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #22c55e; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #16a34a; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #15803d; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #166534; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #14532d; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #052e16; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>emerald</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #ecfdf5; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d1fae5; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a7f3d0; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #6ee7b7; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #34d399; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #10b981; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #059669; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #047857; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #065f46; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #064e3b; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #022c22; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>teal</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #f0fdfa; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ccfbf1; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #99f6e4; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #5eead4; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #2dd4bf; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #14b8a6; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0d9488; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0f766e; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #115e59; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #134e4a; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #042f2e; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>cyan</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #ecfeff; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #cffafe; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a5f3fc; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #67e8f9; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #22d3ee; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #06b6d4; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0891b2; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0e7490; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #155e75; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #164e63; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #083344; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>sky</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #f0f9ff; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e0f2fe; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #bae6fd; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #7dd3fc; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #38bdf8; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0ea5e9; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0284c7; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0369a1; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #075985; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #0c4a6e; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #082f49; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>blue</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #eff6ff; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #dbeafe; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #bfdbfe; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #93c5fd; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #60a5fa; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #3b82f6; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #2563eb; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1d4ed8; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1e40af; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1e3a8a; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #172554; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>indigo</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #eef2ff; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e0e7ff; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #c7d2fe; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a5b4fc; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #818cf8; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #6366f1; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4f46e5; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4338ca; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #3730a3; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #312e81; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #1e1b4b; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>violet</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #f5f3ff; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ede9fe; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ddd6fe; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #c4b5fd; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a78bfa; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #8b5cf6; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #7c3aed; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #6d28d9; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #5b21b6; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4c1d95; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #2e1065; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>purple</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #faf5ff; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f3e8ff; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e9d5ff; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d8b4fe; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #c084fc; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a855f7; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #9333ea; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #7e22ce; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #6b21a8; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #581c87; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #3b0764; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>fuchsia</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fdf4ff; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fae8ff; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f5d0fe; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f0abfc; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e879f9; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #d946ef; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #c026d3; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #a21caf; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #86198f; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #701a75; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4a044e; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>pink</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fdf2f8; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fce7f3; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fbcfe8; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f9a8d4; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f472b6; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ec4899; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #db2777; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #be185d; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #9d174d; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #831843; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #500724; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="color-palette">
|
||||
<h3>rose</h3>
|
||||
<div class="shades">
|
||||
<div class="shade" style="background: #fff1f2; color: #000;">
|
||||
<span>50</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #ffe4e6; color: #000;">
|
||||
<span>100</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fecdd3; color: #000;">
|
||||
<span>200</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fda4af; color: #000;">
|
||||
<span>300</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #fb7185; color: #000;">
|
||||
<span>400</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #f43f5e; color: #fff;">
|
||||
<span>500</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #e11d48; color: #fff;">
|
||||
<span>600</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #be123c; color: #fff;">
|
||||
<span>700</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #9f1239; color: #fff;">
|
||||
<span>800</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #881337; color: #fff;">
|
||||
<span>900</span>
|
||||
</div>
|
||||
<div class="shade" style="background: #4c0519; color: #fff;">
|
||||
<span>950</span>
|
||||
</div></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,164 +0,0 @@
|
||||
/**
|
||||
* Data Display
|
||||
* Components for displaying data
|
||||
* @generated 2025-12-12T07:46:35.099955
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Data Display',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Components for displaying data'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.component-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
||||
.radix-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
||||
.variants { margin-bottom: 0.5rem; }
|
||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.25rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
||||
`;
|
||||
|
||||
export const Overview = {
|
||||
name: 'Component Catalog',
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Accordion</h3>
|
||||
<span class="radix-badge">@radix-ui/react-accordion</span>
|
||||
</div>
|
||||
<p class="description">A vertically stacked set of interactive headings that reveal content sections</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Avatar</h3>
|
||||
<span class="radix-badge">@radix-ui/react-avatar</span>
|
||||
</div>
|
||||
<p class="description">An image element with a fallback for user profile images</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">size:</span> <span class="badge">sm</span> <span class="badge">md</span> <span class="badge">lg</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Badge</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a badge or label</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">secondary</span> <span class="badge">destructive</span> <span class="badge">outline</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Carousel</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">A carousel with embla-carousel</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: embla-carousel-react</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Chart</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Beautiful charts using Recharts</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: recharts</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Collapsible</h3>
|
||||
<span class="radix-badge">@radix-ui/react-collapsible</span>
|
||||
</div>
|
||||
<p class="description">An interactive component that expands/collapses content</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Data Table</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Powerful table with sorting, filtering, pagination</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: @tanstack/react-table</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Item</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Generic list item component</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Kbd</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Keyboard key display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Table</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Styled HTML table</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Typography</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Text styling components</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,128 +0,0 @@
|
||||
/**
|
||||
* Feedback
|
||||
* User feedback components
|
||||
* @generated 2025-12-12T07:46:35.100070
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Feedback',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'User feedback components'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.component-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
||||
.radix-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
||||
.variants { margin-bottom: 0.5rem; }
|
||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.25rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
||||
`;
|
||||
|
||||
export const Overview = {
|
||||
name: 'Component Catalog',
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Alert</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a callout for user attention</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Empty</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Empty state display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Progress</h3>
|
||||
<span class="radix-badge">@radix-ui/react-progress</span>
|
||||
</div>
|
||||
<p class="description">Progress indicator bar</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Skeleton</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Loading placeholder</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Sonner</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Toast notifications with sonner</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: sonner</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Spinner</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Loading spinner animation</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Toast</h3>
|
||||
<span class="radix-badge">@radix-ui/react-toast</span>
|
||||
</div>
|
||||
<p class="description">Toast notification component</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,254 +0,0 @@
|
||||
/**
|
||||
* Form Components
|
||||
* Input controls and form elements
|
||||
* @generated 2025-12-12T07:46:35.099811
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Form Components',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Input controls and form elements'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.component-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
||||
.radix-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
||||
.variants { margin-bottom: 0.5rem; }
|
||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.25rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
||||
`;
|
||||
|
||||
export const Overview = {
|
||||
name: 'Component Catalog',
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Button</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a button or a component that looks like a button</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span> <span class="badge">outline</span> <span class="badge">secondary</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span> <span class="badge">icon</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Button Group</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Groups multiple buttons together</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Calendar</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">A date picker component with monthly/yearly views</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: react-day-picker</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Checkbox</h3>
|
||||
<span class="radix-badge">@radix-ui/react-checkbox</span>
|
||||
</div>
|
||||
<p class="description">A control that allows toggling between checked and unchecked</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Combobox</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Autocomplete input with command palette</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Command</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Command palette with search and filtering</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: cmdk</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Date Picker</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">A date picker built with calendar and popover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Field</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Form field wrapper with label and error</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Form</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Form component with react-hook-form integration</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: react-hook-form, @hookform/resolvers, zod</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Input</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Text input field</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Input Group</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Group of inputs with addons</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Input OTP</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">One-time password input</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: input-otp</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Label</h3>
|
||||
<span class="radix-badge">@radix-ui/react-label</span>
|
||||
</div>
|
||||
<p class="description">Text label for form elements</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Native Select</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Native HTML select element with styling</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Radio Group</h3>
|
||||
<span class="radix-badge">@radix-ui/react-radio-group</span>
|
||||
</div>
|
||||
<p class="description">Set of mutually exclusive options</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Select</h3>
|
||||
<span class="radix-badge">@radix-ui/react-select</span>
|
||||
</div>
|
||||
<p class="description">Custom select dropdown</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Slider</h3>
|
||||
<span class="radix-badge">@radix-ui/react-slider</span>
|
||||
</div>
|
||||
<p class="description">Range slider input</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Switch</h3>
|
||||
<span class="radix-badge">@radix-ui/react-switch</span>
|
||||
</div>
|
||||
<p class="description">Toggle switch control</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Textarea</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Multi-line text input</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Toggle</h3>
|
||||
<span class="radix-badge">@radix-ui/react-toggle</span>
|
||||
</div>
|
||||
<p class="description">Two-state button</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">outline</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Toggle Group</h3>
|
||||
<span class="radix-badge">@radix-ui/react-toggle-group</span>
|
||||
</div>
|
||||
<p class="description">Group of toggle buttons</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,110 +0,0 @@
|
||||
/**
|
||||
* Layout
|
||||
* Layout and structure components
|
||||
* @generated 2025-12-12T07:46:35.100368
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Layout',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Layout and structure components'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.component-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
||||
.radix-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
||||
.variants { margin-bottom: 0.5rem; }
|
||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.25rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
||||
`;
|
||||
|
||||
export const Overview = {
|
||||
name: 'Component Catalog',
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Aspect Ratio</h3>
|
||||
<span class="radix-badge">@radix-ui/react-aspect-ratio</span>
|
||||
</div>
|
||||
<p class="description">Displays content with a desired aspect ratio</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Card</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a card with header, content, and footer</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Resizable</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Resizable panel groups</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: react-resizable-panels</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Scroll Area</h3>
|
||||
<span class="radix-badge">@radix-ui/react-scroll-area</span>
|
||||
</div>
|
||||
<p class="description">Custom scrollbar styling</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Separator</h3>
|
||||
<span class="radix-badge">@radix-ui/react-separator</span>
|
||||
</div>
|
||||
<p class="description">Visual divider</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">orientation:</span> <span class="badge">horizontal</span> <span class="badge">vertical</span></div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,119 +0,0 @@
|
||||
/**
|
||||
* Navigation
|
||||
* Navigation components
|
||||
* @generated 2025-12-12T07:46:35.100163
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Navigation',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Navigation components'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.component-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
||||
.radix-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
||||
.variants { margin-bottom: 0.5rem; }
|
||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.25rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
||||
`;
|
||||
|
||||
export const Overview = {
|
||||
name: 'Component Catalog',
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Breadcrumb</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Displays the path to the current page in a hierarchy</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Menubar</h3>
|
||||
<span class="radix-badge">@radix-ui/react-menubar</span>
|
||||
</div>
|
||||
<p class="description">Horizontal menu with dropdowns</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Navigation Menu</h3>
|
||||
<span class="radix-badge">@radix-ui/react-navigation-menu</span>
|
||||
</div>
|
||||
<p class="description">Website navigation with mega menus</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Pagination</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Page navigation with previous/next</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Sidebar</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Application sidebar with collapsible sections</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Tabs</h3>
|
||||
<span class="radix-badge">@radix-ui/react-tabs</span>
|
||||
</div>
|
||||
<p class="description">Tabbed interface</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,146 +0,0 @@
|
||||
/**
|
||||
* Overlay
|
||||
* Modal and overlay components
|
||||
* @generated 2025-12-12T07:46:35.100264
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Overlay',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Modal and overlay components'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.component-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
||||
.radix-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
||||
.variants { margin-bottom: 0.5rem; }
|
||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.25rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
||||
`;
|
||||
|
||||
export const Overview = {
|
||||
name: 'Component Catalog',
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Alert Dialog</h3>
|
||||
<span class="radix-badge">@radix-ui/react-alert-dialog</span>
|
||||
</div>
|
||||
<p class="description">A modal dialog that interrupts user flow with important information</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Context Menu</h3>
|
||||
<span class="radix-badge">@radix-ui/react-context-menu</span>
|
||||
</div>
|
||||
<p class="description">Right-click context menu with keyboard support</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Dialog</h3>
|
||||
<span class="radix-badge">@radix-ui/react-dialog</span>
|
||||
</div>
|
||||
<p class="description">A modal dialog for content display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Drawer</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">A drawer component extending dialog</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: vaul</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Dropdown Menu</h3>
|
||||
<span class="radix-badge">@radix-ui/react-dropdown-menu</span>
|
||||
</div>
|
||||
<p class="description">Menu displayed on trigger interaction</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Hover Card</h3>
|
||||
<span class="radix-badge">@radix-ui/react-hover-card</span>
|
||||
</div>
|
||||
<p class="description">Content appearing on hover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Popover</h3>
|
||||
<span class="radix-badge">@radix-ui/react-popover</span>
|
||||
</div>
|
||||
<p class="description">Floating content panel</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Sheet</h3>
|
||||
<span class="radix-badge">@radix-ui/react-dialog</span>
|
||||
</div>
|
||||
<p class="description">Side panel overlay</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">side:</span> <span class="badge">top</span> <span class="badge">right</span> <span class="badge">bottom</span> <span class="badge">left</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Tooltip</h3>
|
||||
<span class="radix-badge">@radix-ui/react-tooltip</span>
|
||||
</div>
|
||||
<p class="description">Informative popup on hover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* Effects - Design Tokens
|
||||
* Shadows and focus rings
|
||||
* @generated 2025-12-10T19:56:03.054416
|
||||
*/
|
||||
export default {
|
||||
title: 'Foundation/Effects',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Shadow and focus ring effects extracted from Figma.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.effects-grid { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem; }
|
||||
.effect-card {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.name { font-family: monospace; font-size: 0.75rem; color: #6b7280; }
|
||||
`;
|
||||
|
||||
export const Shadows = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="effects-grid">
|
||||
|
||||
<div class="effect-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<span class="name">shadow-xs</span>
|
||||
</div>
|
||||
<div class="effect-card" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);">
|
||||
<span class="name">shadow-sm</span>
|
||||
</div>
|
||||
<div class="effect-card" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);">
|
||||
<span class="name">shadow-md</span>
|
||||
</div>
|
||||
<div class="effect-card" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);">
|
||||
<span class="name">shadow-lg</span>
|
||||
</div>
|
||||
<div class="effect-card" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);">
|
||||
<span class="name">shadow-xl</span>
|
||||
</div>
|
||||
<div class="effect-card" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);">
|
||||
<span class="name">shadow-2xl</span>
|
||||
</div>
|
||||
<div class="effect-card" style="box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);">
|
||||
<span class="name">focus-ring</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,94 +0,0 @@
|
||||
/**
|
||||
* Design System Overview
|
||||
* @generated 2025-12-12T07:46:35.098779
|
||||
*/
|
||||
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>
|
||||
`
|
||||
};
|
||||
@@ -1,87 +0,0 @@
|
||||
/**
|
||||
* Border Radius - Foundation
|
||||
* @generated 2025-12-12T07:46:35.099454
|
||||
*/
|
||||
export default {
|
||||
title: 'Foundation/Radius',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Border radius scale for consistent rounded corners.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.radius-grid { display: flex; flex-wrap: wrap; gap: 2rem; }
|
||||
.radius-item { text-align: center; }
|
||||
.box { width: 80px; height: 80px; background: var(--color-primary, #18181b); margin-bottom: 0.5rem; }
|
||||
.name { font-weight: 500; font-size: 0.875rem; }
|
||||
.value { font-family: monospace; font-size: 0.75rem; color: #6b7280; }
|
||||
.comment { font-size: 0.65rem; color: #9ca3af; }
|
||||
`;
|
||||
|
||||
export const RadiusScale = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="radius-grid">
|
||||
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 0;"></div>
|
||||
<div class="name">none</div>
|
||||
<div class="value">0</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 0.125rem;"></div>
|
||||
<div class="name">sm</div>
|
||||
<div class="value">0.125rem</div>
|
||||
<div class="comment">2px</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 0.25rem;"></div>
|
||||
<div class="name">default</div>
|
||||
<div class="value">0.25rem</div>
|
||||
<div class="comment">4px</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 0.375rem;"></div>
|
||||
<div class="name">md</div>
|
||||
<div class="value">0.375rem</div>
|
||||
<div class="comment">6px</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 0.5rem;"></div>
|
||||
<div class="name">lg</div>
|
||||
<div class="value">0.5rem</div>
|
||||
<div class="comment">8px</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 0.75rem;"></div>
|
||||
<div class="name">xl</div>
|
||||
<div class="value">0.75rem</div>
|
||||
<div class="comment">12px</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 1rem;"></div>
|
||||
<div class="name">2xl</div>
|
||||
<div class="value">1rem</div>
|
||||
<div class="comment">16px</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 1.5rem;"></div>
|
||||
<div class="name">3xl</div>
|
||||
<div class="value">1.5rem</div>
|
||||
<div class="comment">24px</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 9999px;"></div>
|
||||
<div class="name">full</div>
|
||||
<div class="value">9999px</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,178 +0,0 @@
|
||||
/**
|
||||
* Semantic Colors - Design Tokens
|
||||
* Resolved color tokens for light theme
|
||||
* @generated 2025-12-12T07:46:35.099688
|
||||
*/
|
||||
export default {
|
||||
title: 'Tokens/Semantic Colors',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Semantic color tokens mapped from primitives. Use these in components via CSS variables.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.semantic-colors { display: flex; flex-direction: column; gap: 2rem; }
|
||||
.token-group h3 { margin: 0 0 1rem; font-size: 1rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
||||
.token-row { display: flex; flex-wrap: wrap; gap: 1rem; }
|
||||
.token-card { text-align: center; }
|
||||
.swatch { width: 80px; height: 60px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 0.5rem; }
|
||||
.name { font-size: 0.75rem; font-weight: 500; }
|
||||
.value { font-family: monospace; font-size: 0.65rem; color: #6b7280; }
|
||||
.comment { font-size: 0.6rem; color: #9ca3af; max-width: 80px; }
|
||||
`;
|
||||
|
||||
export const LightTheme = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="semantic-colors">
|
||||
|
||||
<div class="token-group">
|
||||
<h3>Surface</h3>
|
||||
<div class="token-row">
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #ffffff;"></div>
|
||||
<div class="name">background</div>
|
||||
<div class="value">#ffffff</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #09090b;"></div>
|
||||
<div class="name">foreground</div>
|
||||
<div class="value">#09090b</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #ffffff;"></div>
|
||||
<div class="name">card</div>
|
||||
<div class="value">#ffffff</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #09090b;"></div>
|
||||
<div class="name">card-foreground</div>
|
||||
<div class="value">#09090b</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #ffffff;"></div>
|
||||
<div class="name">popover</div>
|
||||
<div class="value">#ffffff</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #09090b;"></div>
|
||||
<div class="name">popover-foreground</div>
|
||||
<div class="value">#09090b</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #fafafa;"></div>
|
||||
<div class="name">primary-foreground</div>
|
||||
<div class="value">#fafafa</div>
|
||||
<div class="comment">zinc-50</div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #18181b;"></div>
|
||||
<div class="name">secondary-foreground</div>
|
||||
<div class="value">#18181b</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #71717a;"></div>
|
||||
<div class="name">muted-foreground</div>
|
||||
<div class="value">#71717a</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #18181b;"></div>
|
||||
<div class="name">accent-foreground</div>
|
||||
<div class="value">#18181b</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #fafafa;"></div>
|
||||
<div class="name">destructive-foreground</div>
|
||||
<div class="value">#fafafa</div>
|
||||
<div class="comment"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="token-group">
|
||||
<h3>Primary</h3>
|
||||
<div class="token-row">
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #18181b;"></div>
|
||||
<div class="name">primary</div>
|
||||
<div class="value">#18181b</div>
|
||||
<div class="comment">zinc-900 - brand primary</div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="token-group">
|
||||
<h3>Secondary</h3>
|
||||
<div class="token-row">
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #f4f4f5;"></div>
|
||||
<div class="name">secondary</div>
|
||||
<div class="value">#f4f4f5</div>
|
||||
<div class="comment"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="token-group">
|
||||
<h3>Accent</h3>
|
||||
<div class="token-row">
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #f4f4f5;"></div>
|
||||
<div class="name">accent</div>
|
||||
<div class="value">#f4f4f5</div>
|
||||
<div class="comment"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="token-group">
|
||||
<h3>Muted</h3>
|
||||
<div class="token-row">
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #f4f4f5;"></div>
|
||||
<div class="name">muted</div>
|
||||
<div class="value">#f4f4f5</div>
|
||||
<div class="comment"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="token-group">
|
||||
<h3>Destructive</h3>
|
||||
<div class="token-row">
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #ef4444;"></div>
|
||||
<div class="name">destructive</div>
|
||||
<div class="value">#ef4444</div>
|
||||
<div class="comment"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="token-group">
|
||||
<h3>Other</h3>
|
||||
<div class="token-row">
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #e4e4e7;"></div>
|
||||
<div class="name">border</div>
|
||||
<div class="value">#e4e4e7</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #e4e4e7;"></div>
|
||||
<div class="name">input</div>
|
||||
<div class="value">#e4e4e7</div>
|
||||
<div class="comment"></div>
|
||||
</div>
|
||||
<div class="token-card">
|
||||
<div class="swatch" style="background: #18181b;"></div>
|
||||
<div class="name">ring</div>
|
||||
<div class="value">#18181b</div>
|
||||
<div class="comment">matches primary</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,108 +0,0 @@
|
||||
/**
|
||||
* Shadows - Foundation
|
||||
* Box shadow scale
|
||||
* @generated 2025-12-12T07:46:35.099557
|
||||
*/
|
||||
export default {
|
||||
title: 'Foundation/Effects/Shadows',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Box shadow tokens for elevation and depth.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.shadows-grid { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem; background: #f9fafb; }
|
||||
.shadow-card { text-align: center; }
|
||||
.box { width: 120px; height: 80px; background: white; border-radius: 8px; margin-bottom: 0.5rem; }
|
||||
.name { font-size: 0.75rem; font-weight: 500; }
|
||||
.value { font-size: 0.6rem; color: #6b7280; font-family: monospace; max-width: 120px; word-wrap: break-word; }
|
||||
`;
|
||||
|
||||
export const AllShadows = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="shadows-grid">
|
||||
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: none;"></div>
|
||||
<div class="name">none</div>
|
||||
<div class="value">none</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
|
||||
<div class="name">xs</div>
|
||||
<div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">sm</div>
|
||||
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">default</div>
|
||||
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">md</div>
|
||||
<div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">lg</div>
|
||||
<div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">xl</div>
|
||||
<div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
|
||||
<div class="name">2xl</div>
|
||||
<div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);"></div>
|
||||
<div class="name">inner</div>
|
||||
<div class="value">inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
|
||||
<div class="name">shadow-xs</div>
|
||||
<div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">shadow-sm</div>
|
||||
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">shadow-md</div>
|
||||
<div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">shadow-lg</div>
|
||||
<div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
|
||||
<div class="name">shadow-xl</div>
|
||||
<div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
|
||||
</div>
|
||||
<div class="shadow-card">
|
||||
<div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
|
||||
<div class="name">shadow-2xl</div>
|
||||
<div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,314 +0,0 @@
|
||||
/**
|
||||
* Spacing Primitives - Foundation
|
||||
* @generated 2025-12-12T07:46:35.099156
|
||||
*/
|
||||
export default {
|
||||
title: 'Foundation/Spacing',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Spacing scale based on 4px grid. Use for margins, padding, and gaps.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.spacing-grid { display: flex; flex-direction: column; gap: 0.25rem; max-width: 600px; }
|
||||
.spacing-item { display: flex; align-items: center; gap: 1rem; }
|
||||
.bar { height: 20px; background: var(--color-primary, #18181b); border-radius: 2px; min-width: 2px; }
|
||||
.info { display: flex; gap: 1rem; font-family: monospace; font-size: 0.75rem; }
|
||||
.name { font-weight: 600; min-width: 32px; }
|
||||
.value { color: #6b7280; min-width: 80px; }
|
||||
.comment { color: #9ca3af; font-size: 0.65rem; }
|
||||
`;
|
||||
|
||||
export const SpacingScale = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="spacing-grid">
|
||||
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 1px;"></div>
|
||||
<div class="info">
|
||||
<span class="name">px</span>
|
||||
<span class="value">1px</span>
|
||||
<span class="comment"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0;"></div>
|
||||
<div class="info">
|
||||
<span class="name">0</span>
|
||||
<span class="value">0</span>
|
||||
<span class="comment"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0.125rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">0.5</span>
|
||||
<span class="value">0.125rem</span>
|
||||
<span class="comment">2px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0.25rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">1</span>
|
||||
<span class="value">0.25rem</span>
|
||||
<span class="comment">4px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0.375rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">1.5</span>
|
||||
<span class="value">0.375rem</span>
|
||||
<span class="comment">6px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0.5rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">2</span>
|
||||
<span class="value">0.5rem</span>
|
||||
<span class="comment">8px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0.625rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">2.5</span>
|
||||
<span class="value">0.625rem</span>
|
||||
<span class="comment">10px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0.75rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">3</span>
|
||||
<span class="value">0.75rem</span>
|
||||
<span class="comment">12px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 0.875rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">3.5</span>
|
||||
<span class="value">0.875rem</span>
|
||||
<span class="comment">14px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 1rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">4</span>
|
||||
<span class="value">1rem</span>
|
||||
<span class="comment">16px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 1.25rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">5</span>
|
||||
<span class="value">1.25rem</span>
|
||||
<span class="comment">20px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 1.5rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">6</span>
|
||||
<span class="value">1.5rem</span>
|
||||
<span class="comment">24px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 1.75rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">7</span>
|
||||
<span class="value">1.75rem</span>
|
||||
<span class="comment">28px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 2rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">8</span>
|
||||
<span class="value">2rem</span>
|
||||
<span class="comment">32px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 2.25rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">9</span>
|
||||
<span class="value">2.25rem</span>
|
||||
<span class="comment">36px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 2.5rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">10</span>
|
||||
<span class="value">2.5rem</span>
|
||||
<span class="comment">40px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 2.75rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">11</span>
|
||||
<span class="value">2.75rem</span>
|
||||
<span class="comment">44px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 3rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">12</span>
|
||||
<span class="value">3rem</span>
|
||||
<span class="comment">48px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 3.5rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">14</span>
|
||||
<span class="value">3.5rem</span>
|
||||
<span class="comment">56px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 4rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">16</span>
|
||||
<span class="value">4rem</span>
|
||||
<span class="comment">64px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 5rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">20</span>
|
||||
<span class="value">5rem</span>
|
||||
<span class="comment">80px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 6rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">24</span>
|
||||
<span class="value">6rem</span>
|
||||
<span class="comment">96px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 7rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">28</span>
|
||||
<span class="value">7rem</span>
|
||||
<span class="comment">112px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 8rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">32</span>
|
||||
<span class="value">8rem</span>
|
||||
<span class="comment">128px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 9rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">36</span>
|
||||
<span class="value">9rem</span>
|
||||
<span class="comment">144px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 10rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">40</span>
|
||||
<span class="value">10rem</span>
|
||||
<span class="comment">160px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 11rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">44</span>
|
||||
<span class="value">11rem</span>
|
||||
<span class="comment">176px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 12rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">48</span>
|
||||
<span class="value">12rem</span>
|
||||
<span class="comment">192px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 13rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">52</span>
|
||||
<span class="value">13rem</span>
|
||||
<span class="comment">208px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 14rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">56</span>
|
||||
<span class="value">14rem</span>
|
||||
<span class="comment">224px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 15rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">60</span>
|
||||
<span class="value">15rem</span>
|
||||
<span class="comment">240px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 16rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">64</span>
|
||||
<span class="value">16rem</span>
|
||||
<span class="comment">256px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 18rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">72</span>
|
||||
<span class="value">18rem</span>
|
||||
<span class="comment">288px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 20rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">80</span>
|
||||
<span class="value">20rem</span>
|
||||
<span class="comment">320px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 24rem;"></div>
|
||||
<div class="info">
|
||||
<span class="name">96</span>
|
||||
<span class="value">24rem</span>
|
||||
<span class="comment">384px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -1,284 +0,0 @@
|
||||
/**
|
||||
* Typography - Foundation
|
||||
* Font families, sizes, weights, and composed styles
|
||||
* @generated 2025-12-12T07:46:35.099319
|
||||
*/
|
||||
export default {
|
||||
title: 'Foundation/Typography',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Typography primitives and composed text styles.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.typo-container { font-family: system-ui, sans-serif; }
|
||||
.section { margin-bottom: 3rem; }
|
||||
.section h2 { font-size: 1.25rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
||||
.font-sample { margin-bottom: 1.5rem; }
|
||||
.sample-text { font-size: 1.5rem; margin-bottom: 0.25rem; }
|
||||
.meta { font-size: 0.75rem; font-family: monospace; }
|
||||
.meta .name { font-weight: 600; margin-right: 1rem; }
|
||||
.meta .value { color: #6b7280; }
|
||||
.size-grid, .weight-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
|
||||
.size-sample, .weight-sample { text-align: center; min-width: 60px; }
|
||||
.size-sample .text { display: block; margin-bottom: 0.25rem; }
|
||||
.weight-sample .text { display: block; margin-bottom: 0.25rem; font-size: 1.5rem; }
|
||||
.name { font-size: 0.75rem; font-weight: 500; display: block; }
|
||||
.value { font-size: 0.65rem; color: #6b7280; font-family: monospace; }
|
||||
.props { color: #6b7280; font-family: monospace; }
|
||||
.style-sample { margin-bottom: 1rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 1rem; }
|
||||
.style-sample .text { margin-bottom: 0.25rem; color: var(--color-foreground, #18181b); }
|
||||
`;
|
||||
|
||||
export const FontFamilies = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="typo-container">
|
||||
<div class="section">
|
||||
<h2>Font Families</h2>
|
||||
|
||||
<div class="font-sample">
|
||||
<div class="sample-text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">sans</span>
|
||||
<span class="value">Inter, ui-sans-serif, system-ui, -apple-...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-sample">
|
||||
<div class="sample-text" style="font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">serif</span>
|
||||
<span class="value">ui-serif, Georgia, Cambria, 'Times New R...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-sample">
|
||||
<div class="sample-text" style="font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">mono</span>
|
||||
<span class="value">ui-monospace, SFMono-Regular, 'SF Mono',...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
export const FontSizes = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="typo-container">
|
||||
<div class="section">
|
||||
<h2>Font Sizes</h2>
|
||||
<div class="size-grid">
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 0.75rem;">Aa</span>
|
||||
<span class="name">xs</span>
|
||||
<span class="value">0.75rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 0.875rem;">Aa</span>
|
||||
<span class="name">sm</span>
|
||||
<span class="value">0.875rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 1rem;">Aa</span>
|
||||
<span class="name">base</span>
|
||||
<span class="value">1rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 1.125rem;">Aa</span>
|
||||
<span class="name">lg</span>
|
||||
<span class="value">1.125rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 1.25rem;">Aa</span>
|
||||
<span class="name">xl</span>
|
||||
<span class="value">1.25rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 1.5rem;">Aa</span>
|
||||
<span class="name">2xl</span>
|
||||
<span class="value">1.5rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 1.875rem;">Aa</span>
|
||||
<span class="name">3xl</span>
|
||||
<span class="value">1.875rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 2.25rem;">Aa</span>
|
||||
<span class="name">4xl</span>
|
||||
<span class="value">2.25rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 3rem;">Aa</span>
|
||||
<span class="name">5xl</span>
|
||||
<span class="value">3rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 3.75rem;">Aa</span>
|
||||
<span class="name">6xl</span>
|
||||
<span class="value">3.75rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 4.5rem;">Aa</span>
|
||||
<span class="name">7xl</span>
|
||||
<span class="value">4.5rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 6rem;">Aa</span>
|
||||
<span class="name">8xl</span>
|
||||
<span class="value">6rem</span>
|
||||
</div>
|
||||
<div class="size-sample">
|
||||
<span class="text" style="font-size: 8rem;">Aa</span>
|
||||
<span class="name">9xl</span>
|
||||
<span class="value">8rem</span>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
export const FontWeights = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="typo-container">
|
||||
<div class="section">
|
||||
<h2>Font Weights</h2>
|
||||
<div class="weight-grid">
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 100;">Aa</span>
|
||||
<span class="name">thin</span>
|
||||
<span class="value">100</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 200;">Aa</span>
|
||||
<span class="name">extralight</span>
|
||||
<span class="value">200</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 300;">Aa</span>
|
||||
<span class="name">light</span>
|
||||
<span class="value">300</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 400;">Aa</span>
|
||||
<span class="name">normal</span>
|
||||
<span class="value">400</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 500;">Aa</span>
|
||||
<span class="name">medium</span>
|
||||
<span class="value">500</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 600;">Aa</span>
|
||||
<span class="name">semibold</span>
|
||||
<span class="value">600</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 700;">Aa</span>
|
||||
<span class="name">bold</span>
|
||||
<span class="value">700</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 800;">Aa</span>
|
||||
<span class="name">extrabold</span>
|
||||
<span class="value">800</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="text" style="font-weight: 900;">Aa</span>
|
||||
<span class="name">black</span>
|
||||
<span class="value">900</span>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
export const TextStyles = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="typo-container">
|
||||
<div class="section">
|
||||
<h2>Composed Text Styles</h2>
|
||||
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 3rem; font-weight: 700; line-height: 1;">
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">heading-1</span>
|
||||
<span class="props">3rem / 700</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.875rem; font-weight: 600; line-height: 1.2;">
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">heading-2</span>
|
||||
<span class="props">1.875rem / 600</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.3;">
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">heading-3</span>
|
||||
<span class="props">1.5rem / 600</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.4;">
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">heading-4</span>
|
||||
<span class="props">1.25rem / 600</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5;">
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">paragraph-regular</span>
|
||||
<span class="props">1rem / 400</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5;">
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">paragraph-bold</span>
|
||||
<span class="props">1rem / 500</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1.5;">
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="name">paragraph-small-regular</span>
|
||||
<span class="props">0.875rem / 400</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
Reference in New Issue
Block a user