feat: Add DSS infrastructure, remove legacy admin-ui code
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 legacy admin-ui/js/ vanilla JS components - Add .dss/ directory with core tokens, skins, themes - Add Storybook configuration and generated stories - Add DSS management scripts (dss-services, dss-init, dss-setup, dss-reset) - Add MCP command definitions for DSS plugin - Add Figma sync architecture and scripts - Update pre-commit hooks with documentation validation - Fix JSON trailing commas in skin files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DSS
284
admin-ui/src/stories/Typography.stories.js
Normal file
284
admin-ui/src/stories/Typography.stories.js
Normal file
@@ -0,0 +1,284 @@
|
||||
/**
|
||||
* Typography - Foundation
|
||||
* Font families, sizes, weights, and composed styles
|
||||
* @generated 2025-12-10T21:48:22.318522
|
||||
*/
|
||||
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