pixelsrc 0.2.0

Pixelsrc - GenAI-native pixel art format and compiler
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!-- Generated by scripts/generate-demos.sh -->
<!-- Do not edit manually - regenerate with: ./scripts/generate-demos.sh -->

# CSS Variable Demos

## Tests CSS custom property definition syntax (--name: value)

<div class="demo-source">

```jsonl
{"type": "palette", "name": "theme_colors", "colors": {"--primary": "#4169E1", "--secondary": "#8B4513", "--accent": "#FFD700", "--bg": "#1a1a2e", "--fg": "#ffffff", ".": "#00000000", "{pri}": "#4169E1", "{sec}": "#8B4513", "{acc}": "#FFD700"}}
{"type": "palette", "name": "component_values", "colors": {"--red": "200", "--green": "100", "--blue": "50", "--alpha": "0.8", "{sample}": "rgba(200, 100, 50, 0.8)"}}
{"type": "palette", "name": "hsl_components", "colors": {"--hue": "240", "--sat": "100%", "--light": "50%", "{blue}": "hsl(240, 100%, 50%)"}}
{"type": "sprite", "name": "theme_example", "palette": "theme_colors", "grid": ["{pri}{pri}{sec}", "{pri}{acc}{sec}", "{sec}{sec}{sec}"]}
```

</div>

<div class="demo-container" data-demo="definition">
</div>

## Tests var() reference resolution

<div class="demo-source">

```jsonl
{"type": "palette", "name": "var_resolution", "colors": {"--primary": "#FF6B6B", "--secondary": "#4ECDC4", "--accent": "#FFE66D", ".": "#00000000", "{main}": "var(--primary)", "{alt}": "var(--secondary)", "{highlight}": "var(--accent)"}}
{"type": "sprite", "name": "resolved_colors", "palette": "var_resolution", "grid": ["{main}{main}{alt}", "{main}{highlight}{alt}", "{alt}{alt}{alt}"]}
{"type": "palette", "name": "hsl_var_resolution", "colors": {"--hue": "240", "--sat": "100%", "--light": "50%", "{blue_hsl}": "hsl(var(--hue), var(--sat), var(--light))"}}
{"type": "palette", "name": "rgb_var_resolution", "colors": {"--r": "255", "--g": "128", "--b": "0", "{orange_rgb}": "rgb(var(--r), var(--g), var(--b))"}}
```

</div>

<div class="demo-container" data-demo="resolution">
</div>

## Tests var(--name, fallback) syntax

<div class="demo-source">

```jsonl
{"type": "palette", "name": "simple_fallback", "colors": {"--defined": "#FF0000", ".": "#00000000", "{has_var}": "var(--defined)", "{uses_fallback}": "var(--undefined, #00FF00)"}}
{"type": "sprite", "name": "fallback_demo", "palette": "simple_fallback", "grid": ["{has_var}{has_var}", "{uses_fallback}{uses_fallback}"]}
{"type": "palette", "name": "nested_fallback", "colors": {"--last": "#0000FF", ".": "#00000000", "{deep}": "var(--a, var(--b, var(--c, var(--last))))"}}
{"type": "sprite", "name": "nested_fallback_result", "palette": "nested_fallback", "grid": ["{deep}{deep}"]}
{"type": "palette", "name": "color_mix_fallback", "colors": {"--known": "red", ".": "#00000000", "{mixed}": "color-mix(in oklch, var(--known), var(--unknown, blue))"}}
{"type": "sprite", "name": "mix_fallback_result", "palette": "color_mix_fallback", "grid": ["{mixed}{mixed}"]}
```

</div>

<div class="demo-container" data-demo="fallbacks">
</div>

## Tests variables referencing other variables

<div class="demo-source">

```jsonl
{"type": "palette", "name": "basic_chain", "colors": {"--base": "#FF0000", "--level2": "var(--base)", "--level3": "var(--level2)", ".": "#00000000", "{final}": "var(--level3)"}}
{"type": "sprite", "name": "chain_result", "palette": "basic_chain", "grid": ["{final}{final}"]}
{"type": "palette", "name": "deep_chain", "colors": {"--l1": "#00FF00", "--l2": "var(--l1)", "--l3": "var(--l2)", "--l4": "var(--l3)", "--l5": "var(--l4)", ".": "#00000000", "{deep}": "var(--l5)"}}
{"type": "sprite", "name": "deep_chain_result", "palette": "deep_chain", "grid": ["{deep}{deep}"]}
{"type": "palette", "name": "color_mix_chain", "colors": {"--base": "#4169E1", "--shadow": "color-mix(in oklch, var(--base) 70%, black)", "--highlight": "color-mix(in oklch, var(--base) 70%, white)", ".": "#00000000", "{b}": "var(--base)", "{s}": "var(--shadow)", "{h}": "var(--highlight)"}}
{"type": "sprite", "name": "shaded_box", "palette": "color_mix_chain", "grid": ["{h}{h}{b}", "{h}{b}{s}", "{b}{s}{s}"]}
```

</div>

<div class="demo-container" data-demo="chaining">
</div>