|
|
1c98aff722
|
feat(admin): complete Task 7 Phase 2 - styling rollout
Extended the theming system to additional pages and components, continuing
to eliminate hardcoded colors and duplicated styles.
**Pages Refactored:**
- /admin/media - Integrated EmptyState with action button (~20 lines removed)
- /admin/albums - Integrated EmptyState & ErrorMessage (~25 lines removed)
- Fixed hardcoded spacing in loading spinner (32px → calc($unit * 4))
- Replaced hardcoded error color (#d33 → $error-text)
**Components Updated with Semantic Colors:**
- Button.svelte - Replaced 3 instances of #dc2626 → $error-text
- AlbumSelector.svelte - Error message uses $error-bg, $error-text
- AlbumSelectorModal.svelte - Error message uses $error-bg, $error-text, $error-border
- Fixed border width (1px → $unit-1px)
**Phase 2 Results:**
- Total lines removed: ~105 across 4 pages (Phase 1: 60, Phase 2: 45)
- EmptyState component now used in 4 pages
- ErrorMessage component now used in 3 pages
- Standardized error colors across 3 modal components
**Theming Benefits:**
- Error styling centralized (change $error-bg once, updates everywhere)
- Empty states guaranteed visual consistency
- Dark mode ready (just remap CSS variables in themes.scss)
**Remaining work (future):**
- ~30 files with remaining hardcoded colors
- ~15 files with spacing that could use $unit system
- Opportunity for additional semantic variables as needed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-08 22:02:33 -07:00 |
|
|
|
45e3556663
|
feat(admin): complete Task 7 Phase 1 - styling & theming foundation
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>
|
2025-10-08 21:28:28 -07:00 |
|
