🎨 Pattern: Components use legacy variables (--surface-ground, --surface...

Date: 2026-02-25
Time: 21:47:17 UTC
Session: gspace1-143.3
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

Components use legacy variables (--surface-ground, --surface-card, --text-color) not set by theme system — dark theme had no effect. How to support both legacy and new variables?

Task: Not specified

🎯 Decision Made

Chosen:

B) Add legacy aliases in theme-variables.service that map to theme colors

Options Considered:

1. A) Migrate all components to --ux-* only
2. B) Add legacy aliases in theme-variables.service that map to theme colors
3. C) Add fallback chain in ux-smart-theme-utilities only

💭 Reasoning

ROOT CAUSE: Universe-hub and other components use --surface-ground, --surface-card, --surface-border, --text-color-secondary with light fallbacks (#f5f5f5, white, #e0e0e0, #666). ThemeVariablesService only set --ux-* variables. FIX: In generateCssVariablesFromTheme(), add: --surface-ground, --surface-card, --surface-border, --text-color-secondary, --surface-100, --surface-200. Each maps to the theme's background, surface, border, textSecondary, surfaceVariant. Components using legacy vars now receive theme-aware values. Enables incremental migration without breaking existing components.

📁 Files Involved

• libs/theme-system/theme-runtime/src/lib/services/theme-variables.service.ts

🔗 Related

• Decision ID: dev_1772056037443_enyhrkl
• Session: 143 (migrated from 142)
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation. Moved to S143 per user request.