~james/core

core/docs/src/styles/diagrams.css -rw-r--r-- 2.9 KiB
452f17b7 — james chore(import): snapshot james.dad.town/core at f70c71c7696a 15 hours ago 
                                                                                
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

/* diagram svgs (src/assets/diagrams) carry only shapes and class names;
   colors and type come from here so they follow the theme */
.diagram {
  margin-block: 1.5rem;
  /* one hue per role, as in the Git Merge 2026 slides */
  --d-pds: #0ea5e9;
  --d-relay: #eab308;
  --d-index: #22c55e;
  --d-client: #a855f7;
  --d-knot: #f59e0b;
  --d-spindle: #ec4899;
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 48rem;
  margin-inline: auto;
  font-family: var(--font-sans);
}

.diagram figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-size: var(--sl-text-body-sm);
  color: var(--color-foreground-muted);
}

/* a service or component */
.diagram .box {
  fill: var(--color-background-default);
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

/* the thing the diagram is about */
.diagram .box-accent {
  fill: var(--color-background-info-subtle);
  stroke: var(--color-foreground-info);
  stroke-width: 1;
}

/* something outside tangled: a pds, plc, the user's machine */
.diagram .box-external {
  fill: var(--color-background-inset);
  stroke: var(--color-border-default);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* a dashed region grouping boxes, e.g. one operator's machines */
.diagram .group {
  fill: none;
  stroke: var(--color-border-default);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

/* role boxes: tinted fill, full-strength stroke */
.diagram :is(.box-pds, .box-relay, .box-index, .box-client, .box-knot, .box-spindle) {
  stroke-width: 1.5;
  fill: color-mix(in oklab, var(--d-role) 16%, var(--color-background-default));
  stroke: var(--d-role);
}

.diagram .box-pds { --d-role: var(--d-pds); }
.diagram .box-relay { --d-role: var(--d-relay); }
.diagram .box-index { --d-role: var(--d-index); }
.diagram .box-client { --d-role: var(--d-client); }
.diagram .box-knot { --d-role: var(--d-knot); }
.diagram .box-spindle { --d-role: var(--d-spindle); }

/* something you could run instead: dashed, untinted */
.diagram .yours {
  fill: var(--color-background-default);
  stroke-dasharray: 5 4;
}

.diagram .box.yours {
  stroke: var(--color-border-strong);
}

/* a small tag naming a supporting service */
.diagram .chip {
  fill: var(--color-background-muted);
  stroke: none;
}

.diagram .chip-label {
  fill: var(--color-foreground-muted);
  font-size: 10.5px;
}

.diagram .divider {
  stroke: var(--color-border-default);
  stroke-width: 1;
}

.diagram .label {
  fill: var(--color-foreground-default);
  font-size: 13px;
  font-weight: 590;
}

.diagram .sublabel {
  fill: var(--color-foreground-muted);
  font-size: 11px;
}

.diagram .group-label,
.diagram .edge-label {
  fill: var(--color-foreground-subtle);
  font-size: 11px;
}

.diagram .edge {
  fill: none;
  stroke: var(--color-foreground-subtle);
  stroke-width: 1.25;
}

.diagram .edge-dashed {
  fill: none;
  stroke: var(--color-foreground-subtle);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.diagram .arrowhead {
  fill: var(--color-foreground-subtle);
}