276ed71f31
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
265 lines
6.5 KiB
JSON
265 lines
6.5 KiB
JSON
{
|
|
"name": "Design System Admin UI",
|
|
"version": "1.0.0",
|
|
"description": "Layered CSS design system implementation for DSS Admin UI using design tokens as source of truth",
|
|
"author": "DSS Team",
|
|
"license": "MIT",
|
|
"homepage": "https://github.com/anthropics/dss",
|
|
|
|
"metadata": {
|
|
"type": "design-system",
|
|
"architecture": "layered-css",
|
|
"tokens": {
|
|
"source": "design-tokens.json",
|
|
"format": "json",
|
|
"standardized": true
|
|
},
|
|
"colorSpace": "OKLCH",
|
|
"supportsDarkMode": true,
|
|
"supportsTheming": true
|
|
},
|
|
|
|
"structure": {
|
|
"layers": [
|
|
{
|
|
"number": 0,
|
|
"name": "Reset",
|
|
"path": "src/styles/0-reset/",
|
|
"description": "Browser reset and normalization",
|
|
"files": ["_reset.css"]
|
|
},
|
|
{
|
|
"number": 1,
|
|
"name": "Tokens",
|
|
"path": "src/styles/1-tokens/",
|
|
"description": "Design tokens as CSS custom properties",
|
|
"files": [
|
|
"_colors.css",
|
|
"_spacing.css",
|
|
"_typography.css",
|
|
"_radii.css",
|
|
"_shadows.css",
|
|
"_durations.css"
|
|
]
|
|
},
|
|
{
|
|
"number": 2,
|
|
"name": "Theme",
|
|
"path": "src/styles/2-theme/",
|
|
"description": "Semantic color palette and theming",
|
|
"files": [
|
|
"_palette.css",
|
|
"_theme-dark.css"
|
|
]
|
|
},
|
|
{
|
|
"number": 3,
|
|
"name": "Layout",
|
|
"path": "src/styles/3-layout/",
|
|
"description": "Application structure and layouts",
|
|
"files": [
|
|
"_grid.css",
|
|
"_sidebar.css",
|
|
"_header.css",
|
|
"_main.css"
|
|
]
|
|
},
|
|
{
|
|
"number": 4,
|
|
"name": "Components",
|
|
"path": "src/styles/4-components/",
|
|
"description": "Reusable component styles",
|
|
"files": [
|
|
"_navigation.css",
|
|
"_buttons.css",
|
|
"_inputs.css",
|
|
"_panels.css",
|
|
"_utilities.css"
|
|
]
|
|
},
|
|
{
|
|
"number": 5,
|
|
"name": "Admin",
|
|
"path": "src/styles/5-admin/",
|
|
"description": "Project-specific customizations",
|
|
"files": [
|
|
"_sidebar-custom.css",
|
|
"_responsive.css",
|
|
"_overrides.css"
|
|
]
|
|
}
|
|
],
|
|
"aggregator": "src/styles/index.css"
|
|
},
|
|
|
|
"colors": {
|
|
"primary": {
|
|
"light": "oklch(0.65 0.18 250)",
|
|
"hover": "oklch(0.55 0.18 250)",
|
|
"active": "oklch(0.45 0.18 250)",
|
|
"foreground": "#ffffff"
|
|
},
|
|
"semantic": {
|
|
"destructive": "oklch(0.63 0.25 30)",
|
|
"success": "oklch(0.65 0.18 140)",
|
|
"warning": "oklch(0.68 0.22 60)",
|
|
"info": "oklch(0.62 0.18 230)"
|
|
},
|
|
"neutral": {
|
|
"foreground": "oklch(0.20 0.02 280)",
|
|
"background": "oklch(0.98 0.01 280)",
|
|
"surface": "oklch(0.95 0.01 280)",
|
|
"border": "oklch(0.82 0.01 280)"
|
|
},
|
|
"darkMode": {
|
|
"foreground": "oklch(0.92 0.02 280)",
|
|
"background": "oklch(0.12 0.02 280)",
|
|
"surface": "oklch(0.15 0.02 280)",
|
|
"border": "oklch(0.30 0.02 280)"
|
|
}
|
|
},
|
|
|
|
"spacing": {
|
|
"baseUnit": "4px",
|
|
"scale": {
|
|
"0": "0",
|
|
"1": "0.25rem",
|
|
"2": "0.5rem",
|
|
"3": "0.75rem",
|
|
"4": "1rem",
|
|
"5": "1.25rem",
|
|
"6": "1.5rem",
|
|
"7": "1.75rem",
|
|
"8": "2rem"
|
|
}
|
|
},
|
|
|
|
"typography": {
|
|
"fontFamilies": {
|
|
"sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
"mono": "'Monaco', 'Courier New', monospace"
|
|
},
|
|
"sizes": {
|
|
"xs": "0.75rem",
|
|
"sm": "0.875rem",
|
|
"base": "1rem",
|
|
"lg": "1.125rem",
|
|
"xl": "1.25rem",
|
|
"2xl": "1.5rem"
|
|
},
|
|
"weights": {
|
|
"normal": 400,
|
|
"medium": 500,
|
|
"semibold": 600,
|
|
"bold": 700
|
|
}
|
|
},
|
|
|
|
"animation": {
|
|
"durations": {
|
|
"fast": "150ms",
|
|
"normal": "200ms",
|
|
"slow": "300ms"
|
|
},
|
|
"easing": {
|
|
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
"inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
}
|
|
},
|
|
|
|
"breakpoints": {
|
|
"mobile": "640px",
|
|
"tablet": "1024px",
|
|
"desktop": "1025px"
|
|
},
|
|
|
|
"documentation": {
|
|
"designSystem": "DESIGN-SYSTEM.md",
|
|
"tokenReference": "TOKEN-REFERENCE.md",
|
|
"componentUsage": "COMPONENT-USAGE.md",
|
|
"customizationGuide": "CUSTOMIZATION-GUIDE.md"
|
|
},
|
|
|
|
"components": {
|
|
"navigation": {
|
|
"classes": [".nav-section", ".nav-section__title", ".nav-item", ".nav-item__icon"],
|
|
"variants": [".nav-item--indent-1", ".nav-item--indent-2"],
|
|
"states": ["active", "hover", "focus-visible"]
|
|
},
|
|
"buttons": {
|
|
"classes": ["button"],
|
|
"variants": [".btn-primary", ".btn-secondary", ".btn-ghost", ".btn-destructive"],
|
|
"sizes": [".btn-sm", ".btn-lg"],
|
|
"states": ["hover", "active", "disabled", "focus-visible"]
|
|
},
|
|
"forms": {
|
|
"classes": [".form-group", ".form-group__help", ".form-group__error"],
|
|
"inputs": ["input[type]", "textarea", "select"]
|
|
},
|
|
"cards": {
|
|
"classes": [".card", ".panel"],
|
|
"variants": [".card--elevated", ".card--outlined"],
|
|
"sections": [".panel__header", ".panel__body", ".panel__footer"]
|
|
},
|
|
"utilities": {
|
|
"spacing": [".p-*", ".m-*", ".gap-*"],
|
|
"typography": [".text-*", ".font-*"],
|
|
"layout": [".flex", ".flex-col", ".flex-row"],
|
|
"visibility": [".hidden", ".block", ".inline-block"]
|
|
}
|
|
},
|
|
|
|
"accessibility": {
|
|
"wcagCompliance": "WCAG 2.1 AA",
|
|
"colorContrast": "Meets AA and AAA standards",
|
|
"focusIndicators": "2px solid ring with 2px offset",
|
|
"motionPreferences": "Respects prefers-reduced-motion",
|
|
"keyboardNavigation": "Full support"
|
|
},
|
|
|
|
"browsers": {
|
|
"supported": [
|
|
"Chrome 90+",
|
|
"Firefox 88+",
|
|
"Safari 14.1+",
|
|
"Edge 90+"
|
|
],
|
|
"colorSpaceSupport": "OKLCH (modern browsers)",
|
|
"cssFeatures": [
|
|
"CSS Custom Properties",
|
|
"CSS Grid",
|
|
"CSS Flexbox",
|
|
"Media Queries",
|
|
"CSS Variables"
|
|
]
|
|
},
|
|
|
|
"keywords": [
|
|
"design-system",
|
|
"css",
|
|
"tokens",
|
|
"layered-architecture",
|
|
"theme",
|
|
"dark-mode",
|
|
"accessibility",
|
|
"wcag"
|
|
],
|
|
|
|
"scripts": {
|
|
"generate-tokens": "npm run generate-tokens",
|
|
"build-css": "npm run build-css",
|
|
"test-a11y": "npm run test-a11y"
|
|
},
|
|
|
|
"exportConfiguration": {
|
|
"includeTokens": true,
|
|
"includeTheme": true,
|
|
"includeDocumentation": true,
|
|
"includeComponents": true,
|
|
"minifyCss": false,
|
|
"sourceMaps": true
|
|
}
|
|
}
|