bruno/dss
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Add DSS infrastructure, remove legacy admin-ui code
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
Details

Browse Source 
- 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
2025-12-10 22:15:11 -03:00
parent 71c6dc805a
commit 08ce228df1
205 changed files with 65666 additions and 47577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
admin-ui/src/stories/Shadows.stories.js Normal file
View File

@@ -0,0 +1,108 @@
/**
* Shadows - Foundation
* Box shadow scale
* @generated 2025-12-10T21:48:22.318898
*/
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>
`
};