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:

Identity - Objects with ID, type, classes
Selection - Selectors as predicates
Cascade - Rules ordered by priority
Values - Typed properties (color, length, enum)
Computed - Resolved snapshots with source
Layout - Constraint systems (flex, grid)
Paint - Stacked effects
Environment - Context-dependent rules
Tokens - Design tokens as first-class values
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:

Tag objects (identity)
Define conditions (selection)
Assign visual outcomes (effects/appearance)
Resolve conflicts (priority)
Preview result (computed)

CSS is generated as compilation output.

Files

Schema:

Validation:

validate_styles.lua

Example:

ui_home/seed/styles.json

Database Integration

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

Implement V2 → CSS compiler
Build GUI designer (10 layer editors)
Create CSS → V2 migration tool
Database loader with hot reloading

2.3 KiB Raw Blame History