lini 0.22.0

Pretty diagrams, charts, and technical drawings from plain text, with fine-grained control. Compiles to clean, themeable SVG.
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

// The built-in named-hue palette (SPEC §11.2): 11 hues × 5 tiers, plus a few
// "pretty card" combinations (wash fill + ink stroke/text) showing the easy path.
{
  gap: 18; padding: 30 16; font-size: 13;

  |sw::box| { width: 80; height: 34; stroke: none; }
  |h::block| { color: --muted; }
  |card::box| { stroke-width: 1.5; width: 88; padding: 15 0; }
}

|block| "Lini palette — 11 hues × 5 tiers" { font-size: 18; }

|group#board| {
  layout: grid; columns: 56, 82, 82, 82, 82, 82; gap: 5; fill: none; stroke: none;
} [
  |h| ""
  |h| "wash"
  |h| "soft"
  |h| "base"
  |h| "deep"
  |h| "ink"
  |h| "red"
  |sw| { fill: --red-wash; }
  |sw| { fill: --red-soft; }
  |sw| { fill: --red; }
  |sw| { fill: --red-deep; }
  |sw| { fill: --red-ink; }
  |h| "rose"
  |sw| { fill: --rose-wash; }
  |sw| { fill: --rose-soft; }
  |sw| { fill: --rose; }
  |sw| { fill: --rose-deep; }
  |sw| { fill: --rose-ink; }
  |h| "orange"
  |sw| { fill: --orange-wash; }
  |sw| { fill: --orange-soft; }
  |sw| { fill: --orange; }
  |sw| { fill: --orange-deep; }
  |sw| { fill: --orange-ink; }
  |h| "amber"
  |sw| { fill: --amber-wash; }
  |sw| { fill: --amber-soft; }
  |sw| { fill: --amber; }
  |sw| { fill: --amber-deep; }
  |sw| { fill: --amber-ink; }
  |h| "lime"
  |sw| { fill: --lime-wash; }
  |sw| { fill: --lime-soft; }
  |sw| { fill: --lime; }
  |sw| { fill: --lime-deep; }
  |sw| { fill: --lime-ink; }
  |h| "green"
  |sw| { fill: --green-wash; }
  |sw| { fill: --green-soft; }
  |sw| { fill: --green; }
  |sw| { fill: --green-deep; }
  |sw| { fill: --green-ink; }
  |h| "teal"
  |sw| { fill: --teal-wash; }
  |sw| { fill: --teal-soft; }
  |sw| { fill: --teal; }
  |sw| { fill: --teal-deep; }
  |sw| { fill: --teal-ink; }
  |h| "sky"
  |sw| { fill: --sky-wash; }
  |sw| { fill: --sky-soft; }
  |sw| { fill: --sky; }
  |sw| { fill: --sky-deep; }
  |sw| { fill: --sky-ink; }
  |h| "blue"
  |sw| { fill: --blue-wash; }
  |sw| { fill: --blue-soft; }
  |sw| { fill: --blue; }
  |sw| { fill: --blue-deep; }
  |sw| { fill: --blue-ink; }
  |h| "purple"
  |sw| { fill: --purple-wash; }
  |sw| { fill: --purple-soft; }
  |sw| { fill: --purple; }
  |sw| { fill: --purple-deep; }
  |sw| { fill: --purple-ink; }
  |h| "gray"
  |sw| { fill: --gray-wash; }
  |sw| { fill: --gray-soft; }
  |sw| { fill: --gray; }
  |sw| { fill: --gray-deep; }
  |sw| { fill: --gray-ink; }
]

|row#cards| { gap: 10; } [
  |card| "Wash" { fill: --purple-wash; stroke: --purple; color: --purple; }
  |card| "Soft" {
    fill: --purple-soft; stroke: --purple-deep; color: --purple-deep;
  }
  |card| "Base" { fill: --purple; stroke: --purple-ink; color: --purple-ink; }
  |card| "Deep" { fill: --purple-deep; stroke: --purple-deep; color: --bg; }
  |card| "Ink" { fill: --purple-ink; stroke: --purple-ink; color: --bg; }
]