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
209 lines
8.2 KiB
CSS
209 lines
8.2 KiB
CSS
/**
|
|
* 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;
|
|
}
|