feat: add CSS generation system with custom properties and ETS cache

- Create theme-primitives.css with spacing, fonts, radius scales
- Create theme-semantic.css with semantic CSS variable aliases
- Update app.css to import theme CSS files
- Add CSSGenerator module for dynamic CSS token generation
  - Generates mood variables (neutral, warm, cool, dark)
  - Generates typography variables (7 font combinations)
  - Generates shape variables (sharp, soft, round, pill)
  - Generates density variables (spacious, balanced, compact)
  - Converts hex colors to HSL for flexible manipulation
- Add CSSCache GenServer with ETS table for performance
  - Caches generated CSS to avoid regeneration
  - Warms cache on application startup
  - Provides invalidation for theme updates
- Add CSSCache to application supervision tree
- Add comprehensive tests for CSS generation (29 tests)
- Add comprehensive tests for preset validation (14 tests)
- All tests passing (58 total tests, 0 failures)
- Verified CSS generation and caching work correctly in IEx
This commit is contained in:
2025-12-30 21:41:25 +00:00
parent a401365943
commit 878d8f63ac
8 changed files with 813 additions and 2 deletions

View File

@@ -102,4 +102,10 @@
/* Make LiveView wrapper divs transparent for layout */
[data-phx-session], [data-phx-teleported-src] { display: contents }
/* Theme CSS - Layer 1: Primitives (fixed CSS variables) */
@import url("/css/theme-primitives.css");
/* Theme CSS - Layer 3: Semantic aliases */
@import url("/css/theme-semantic.css");
/* This file is for your main application CSS */