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
314
admin-ui/src/stories/Spacing.stories.js
Normal file
314
admin-ui/src/stories/Spacing.stories.js
Normal file
@@ -0,0 +1,314 @@
|
||||
/**
|
||||
* Spacing Primitives - Foundation
|
||||
* @generated 2025-12-10T21:48:22.318244
|
||||
*/
|
||||
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>
|
||||
`
|
||||
};
|
||||
Reference in New Issue
Block a user