Justin Edmund
45e3556663
Implemented a three-layer theming architecture to standardize admin component styling and prepare for future dark mode support. **Architecture:** - Layer 1: Base colors ($gray-80, $red-60) in variables.scss - Layer 2: Semantic SCSS variables ($input-bg, $error-bg) in variables.scss - Layer 3: CSS custom properties (--input-bg, --error-bg) in themes.scss **New semantic variables (~30 added):** - Inputs & forms (bg, hover, focus, text, border states) - State messages (error, success, warning with bg/text/border) - Empty states (text, heading colors) - Cards, dropdowns, popovers, modals (bg, border, shadow) **New reusable components:** - EmptyState.svelte - Supports icon and action snippets - ErrorMessage.svelte - Supports dismissible errors **Pages refactored:** - /admin/projects - Uses EmptyState and ErrorMessage (~30 lines removed) - /admin/posts - Uses EmptyState and ErrorMessage with icon (~30 lines removed) **Benefits:** - 60+ lines of duplicate styles removed (just 2 pages) - Future dark mode = remap CSS variables in themes.scss only - Guaranteed visual consistency for errors and empty states - $unit-based spacing system enforced **Remaining work (Phase 2):** - Replace hardcoded colors in ~40 files - Fix hardcoded spacing in ~20 files - Expand EmptyState/ErrorMessage to remaining pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
58 lines
1.5 KiB
SCSS
58 lines
1.5 KiB
SCSS
:root {
|
|
// Base page colors
|
|
--bg-color: #{$gray-80};
|
|
--page-color: #{$gray-100};
|
|
--card-color: #{$gray-90};
|
|
--mention-bg-color: #{$gray-90};
|
|
--text-color: #{$gray-20};
|
|
|
|
// Inputs & Forms
|
|
--input-bg: #{$input-bg};
|
|
--input-bg-hover: #{$input-bg-hover};
|
|
--input-bg-focus: #{$input-bg-focus};
|
|
--input-text: #{$input-text};
|
|
--input-text-hover: #{$input-text-hover};
|
|
--input-border: #{$input-border};
|
|
--input-border-focus: #{$input-border-focus};
|
|
|
|
// State Messages
|
|
--error-bg: #{$error-bg};
|
|
--error-text: #{$error-text};
|
|
--error-border: #{$error-border};
|
|
|
|
--success-bg: #{$success-bg};
|
|
--success-text: #{$success-text};
|
|
--success-border: #{$success-border};
|
|
|
|
--warning-bg: #{$warning-bg};
|
|
--warning-text: #{$warning-text};
|
|
--warning-border: #{$warning-border};
|
|
|
|
// Empty States
|
|
--empty-state-text: #{$empty-state-text};
|
|
--empty-state-heading: #{$empty-state-heading};
|
|
|
|
// Cards & Containers
|
|
--card-bg: #{$card-bg};
|
|
--card-border: #{$card-border};
|
|
--card-shadow: #{$card-shadow};
|
|
--card-shadow-hover: #{$card-shadow-hover};
|
|
|
|
// Dropdowns & Popovers
|
|
--dropdown-bg: #{$dropdown-bg};
|
|
--dropdown-border: #{$dropdown-border};
|
|
--dropdown-shadow: #{$dropdown-shadow};
|
|
--dropdown-item-hover: #{$dropdown-item-hover};
|
|
|
|
// Modals
|
|
--modal-overlay: #{$modal-overlay};
|
|
--modal-bg: #{$modal-bg};
|
|
--modal-shadow: #{$modal-shadow};
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
// Future: remap CSS custom properties for dark mode
|
|
// --input-bg: #{$dark-input-bg};
|
|
// --card-bg: #{$dark-card-bg};
|
|
// etc.
|
|
}
|