mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 22:34:56 +00:00
90 lines
2.3 KiB
Markdown
90 lines
2.3 KiB
Markdown
# Styles System
|
|
|
|
**Status:** ✅ Complete | **Schema:** V2 (Abstract System)
|
|
|
|
## Overview
|
|
|
|
Comprehensive styling system based on CSS as an abstract deterministic function, not syntax-focused format.
|
|
|
|
## What Exists
|
|
|
|
### Infrastructure ✅
|
|
- 44 packages with `seed/styles.json`
|
|
- All metadata.json files reference seed.styles
|
|
- Package validator with full V2 schema validation
|
|
- CSS Schema V2 specification
|
|
|
|
### Schema V2: Abstract System
|
|
|
|
**Core Abstraction:**
|
|
```
|
|
CSS = f(Style Rules, Element Tree, Environment) → Computed Styles
|
|
```
|
|
|
|
**10 Layers:**
|
|
1. **Identity** - Objects with ID, type, classes
|
|
2. **Selection** - Selectors as predicates
|
|
3. **Cascade** - Rules ordered by priority
|
|
4. **Values** - Typed properties (color, length, enum)
|
|
5. **Computed** - Resolved snapshots with source
|
|
6. **Layout** - Constraint systems (flex, grid)
|
|
7. **Paint** - Stacked effects
|
|
8. **Environment** - Context-dependent rules
|
|
9. **Tokens** - Design tokens as first-class values
|
|
10. **Animation** - State machines with keyframes
|
|
|
|
### Example (ui_home)
|
|
|
|
**V2 Schema includes:**
|
|
- 7 color tokens
|
|
- 5 selector predicates
|
|
- 4 effect definitions
|
|
- 9 appearance layers
|
|
- 2 layout systems
|
|
- 1 transition
|
|
- 4 cascade rules
|
|
- 3 responsive breakpoints
|
|
|
|
## GUI Mental Model
|
|
|
|
Users **define visual outcomes**, not write CSS:
|
|
1. Tag objects (identity)
|
|
2. Define conditions (selection)
|
|
3. Assign visual outcomes (effects/appearance)
|
|
4. Resolve conflicts (priority)
|
|
5. Preview result (computed)
|
|
|
|
**CSS is generated** as compilation output.
|
|
|
|
## Files
|
|
|
|
**Schema:**
|
|
- [CSS_SCHEMA_V2.md](../packages/shared/seed/CSS_SCHEMA_V2.md)
|
|
- [CSS_DATABASE_SCHEMA.md](../packages/shared/seed/CSS_DATABASE_SCHEMA.md)
|
|
|
|
**Validation:**
|
|
- [validate_styles.lua](../packages/package_validator/seed/scripts/validate_styles.lua)
|
|
|
|
**Example:**
|
|
- [ui_home/seed/styles.json](../packages/ui_home/seed/styles.json)
|
|
|
|
## Database Integration
|
|
|
|
```sql
|
|
CREATE TABLE styles (
|
|
id VARCHAR(255) PRIMARY KEY,
|
|
package_id VARCHAR(255),
|
|
schema_version VARCHAR(10),
|
|
data JSON,
|
|
compiled_css TEXT,
|
|
enabled BOOLEAN
|
|
);
|
|
```
|
|
|
|
## Next Steps
|
|
|
|
1. Implement V2 → CSS compiler
|
|
2. Build GUI designer (10 layer editors)
|
|
3. Create CSS → V2 migration tool
|
|
4. Database loader with hot reloading
|