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
208
admin-ui/css/dss-theme.css
Normal file
208
admin-ui/css/dss-theme.css
Normal file
@@ -0,0 +1,208 @@
|
||||
/**
|
||||
* DSS Theme - Layer 2 (Semantic Mapping)
|
||||
*
|
||||
* Maps design tokens to semantic purposes.
|
||||
* This layer creates the bridge between raw design tokens
|
||||
* and component-specific styling.
|
||||
*
|
||||
* FIRST PRINCIPLES:
|
||||
* - No fallback values - tokens layer MUST load first
|
||||
* - If tokens are missing, theme-loader.js handles it with fallback CSS file
|
||||
* - Components should use these semantic tokens, not raw tokens directly
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ==========================================================================
|
||||
App Shell Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--ds-color-surface-0);
|
||||
--header-border: var(--ds-color-border);
|
||||
--header-text: var(--ds-color-foreground);
|
||||
--header-height: var(--app-header-height);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: var(--ds-color-surface-0);
|
||||
--sidebar-border: var(--ds-color-border);
|
||||
--sidebar-text: var(--ds-color-foreground);
|
||||
--sidebar-width: var(--app-sidebar-width);
|
||||
|
||||
/* Main Content */
|
||||
--main-bg: var(--ds-color-background);
|
||||
--main-text: var(--ds-color-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Navigation Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--nav-item-text: var(--ds-color-foreground);
|
||||
--nav-item-text-muted: var(--ds-color-muted-foreground);
|
||||
--nav-item-bg-hover: var(--ds-color-accent);
|
||||
--nav-item-bg-active: var(--ds-color-accent);
|
||||
--nav-item-text-active: var(--ds-color-primary);
|
||||
--nav-item-border-focus: var(--ds-color-ring);
|
||||
--nav-section-title: var(--ds-color-muted-foreground);
|
||||
--nav-item-radius: var(--ds-radius-md);
|
||||
--nav-item-padding: var(--ds-space-3);
|
||||
--nav-item-gap: var(--ds-space-3);
|
||||
|
||||
/* ==========================================================================
|
||||
Button Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
/* Default Button */
|
||||
--button-bg: var(--ds-color-primary);
|
||||
--button-text: var(--ds-color-primary-foreground);
|
||||
--button-border: var(--ds-color-primary);
|
||||
--button-bg-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 10%));
|
||||
|
||||
/* Secondary Button */
|
||||
--button-secondary-bg: var(--ds-color-secondary);
|
||||
--button-secondary-text: var(--ds-color-secondary-foreground);
|
||||
|
||||
/* Ghost Button */
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-text: var(--ds-color-foreground);
|
||||
--button-ghost-bg-hover: var(--ds-color-accent);
|
||||
|
||||
/* Outline Button */
|
||||
--button-outline-bg: transparent;
|
||||
--button-outline-text: var(--ds-color-foreground);
|
||||
--button-outline-border: var(--ds-color-border);
|
||||
--button-outline-bg-hover: var(--ds-color-accent);
|
||||
|
||||
/* Button Sizing */
|
||||
--button-padding-x: var(--ds-space-4);
|
||||
--button-padding-y: var(--ds-space-2);
|
||||
--button-radius: var(--ds-radius-md);
|
||||
--button-font-size: var(--ds-font-size-sm);
|
||||
--button-font-weight: var(--ds-font-weight-medium);
|
||||
|
||||
/* ==========================================================================
|
||||
Card Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--card-bg: var(--ds-color-surface-0);
|
||||
--card-border: var(--ds-color-border);
|
||||
--card-text: var(--ds-color-foreground);
|
||||
--card-text-muted: var(--ds-color-muted-foreground);
|
||||
--card-radius: var(--ds-radius-lg);
|
||||
--card-padding: var(--ds-space-5);
|
||||
--card-shadow: var(--ds-shadow-sm);
|
||||
--card-shadow-hover: var(--ds-shadow-md);
|
||||
|
||||
/* ==========================================================================
|
||||
Input Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--input-bg: var(--ds-color-background);
|
||||
--input-text: var(--ds-color-foreground);
|
||||
--input-placeholder: var(--ds-color-muted-foreground);
|
||||
--input-border: var(--ds-color-border);
|
||||
--input-border-focus: var(--ds-color-ring);
|
||||
--input-radius: var(--ds-radius-md);
|
||||
--input-padding-x: var(--ds-space-3);
|
||||
--input-padding-y: var(--ds-space-2);
|
||||
|
||||
/* ==========================================================================
|
||||
Badge Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--badge-bg: var(--ds-color-primary);
|
||||
--badge-text: var(--ds-color-primary-foreground);
|
||||
--badge-radius: var(--ds-radius-full);
|
||||
--badge-padding-x: var(--ds-space-2-5);
|
||||
--badge-padding-y: var(--ds-space-0-5);
|
||||
--badge-font-size: var(--ds-font-size-xs);
|
||||
|
||||
/* Badge Variants */
|
||||
--badge-secondary-bg: var(--ds-color-secondary);
|
||||
--badge-secondary-text: var(--ds-color-secondary-foreground);
|
||||
--badge-outline-bg: transparent;
|
||||
--badge-outline-text: var(--ds-color-foreground);
|
||||
--badge-outline-border: var(--ds-color-border);
|
||||
--badge-success-bg: var(--ds-color-success);
|
||||
--badge-success-text: var(--ds-color-success-foreground);
|
||||
--badge-warning-bg: var(--ds-color-warning);
|
||||
--badge-warning-text: var(--ds-color-warning-foreground);
|
||||
--badge-error-bg: var(--ds-color-error);
|
||||
--badge-error-text: var(--ds-color-error-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Landing Page Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--landing-bg: var(--ds-color-background);
|
||||
--landing-hero-text: var(--ds-color-foreground);
|
||||
--landing-hero-subtitle: var(--ds-color-muted-foreground);
|
||||
|
||||
/* Dashboard Card */
|
||||
--dashboard-card-bg: var(--ds-color-surface-0);
|
||||
--dashboard-card-border: var(--ds-color-border);
|
||||
--dashboard-card-border-hover: var(--ds-color-accent);
|
||||
--dashboard-card-text: var(--ds-color-foreground);
|
||||
--dashboard-card-text-muted: var(--ds-color-muted-foreground);
|
||||
--dashboard-card-shadow-hover: var(--ds-shadow-md);
|
||||
|
||||
/* Category Title */
|
||||
--category-title-text: var(--ds-color-foreground);
|
||||
--category-title-border: var(--ds-color-border);
|
||||
|
||||
/* ==========================================================================
|
||||
Toast/Notification Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--toast-bg: var(--ds-color-surface-0);
|
||||
--toast-text: var(--ds-color-foreground);
|
||||
--toast-border: var(--ds-color-border);
|
||||
--toast-shadow: var(--ds-shadow-lg);
|
||||
--toast-radius: var(--ds-radius-lg);
|
||||
|
||||
--toast-success-bg: var(--ds-color-success);
|
||||
--toast-success-text: var(--ds-color-success-foreground);
|
||||
--toast-warning-bg: var(--ds-color-warning);
|
||||
--toast-warning-text: var(--ds-color-warning-foreground);
|
||||
--toast-error-bg: var(--ds-color-error);
|
||||
--toast-error-text: var(--ds-color-error-foreground);
|
||||
--toast-info-bg: var(--ds-color-info);
|
||||
--toast-info-text: var(--ds-color-info-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Avatar Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--avatar-bg: var(--ds-color-muted);
|
||||
--avatar-text: var(--ds-color-foreground);
|
||||
--avatar-border: var(--ds-color-border);
|
||||
--avatar-size-sm: 32px;
|
||||
--avatar-size-md: 40px;
|
||||
--avatar-size-lg: 48px;
|
||||
|
||||
/* ==========================================================================
|
||||
Help Panel Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--help-panel-bg: var(--ds-color-surface-1);
|
||||
--help-panel-border: var(--ds-color-border);
|
||||
--help-panel-text: var(--ds-color-foreground);
|
||||
--help-panel-text-muted: var(--ds-color-muted-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Typography Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--text-heading: var(--ds-color-foreground);
|
||||
--text-body: var(--ds-color-foreground);
|
||||
--text-muted: var(--ds-color-muted-foreground);
|
||||
--text-link: var(--ds-color-primary);
|
||||
--text-link-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 20%));
|
||||
|
||||
/* ==========================================================================
|
||||
Focus Ring
|
||||
========================================================================== */
|
||||
|
||||
--focus-ring-width: 2px;
|
||||
--focus-ring-color: var(--ds-color-ring);
|
||||
--focus-ring-offset: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user