Initial commit: Clean DSS implementation
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
This commit is contained in:
Digital Production Factory
264
admin-ui/theme.json
Normal file
264
admin-ui/theme.json
Normal file
@@ -0,0 +1,264 @@
|
||||
{
|
||||
"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
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user