@hagicode/hagilight-mermaid 0.15.2-dev.163.1.58f0516 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -1
- package/dist/palette.d.ts +13 -0
- package/dist/palette.js +237 -0
- package/dist/theme.js +10 -0
- package/dist/types.d.ts +10 -0
- package/package.json +1 -1
- package/styles.css +35 -345
package/README.md
CHANGED
|
@@ -91,6 +91,16 @@ The theme reads these colors from the page. Define them on `:root` (or any ances
|
|
|
91
91
|
| `--hagilight-mermaid-mm-up`, `--hagilight-mermaid-mm-down` | Trace colors override | primary and warning | primary and warning |
|
|
92
92
|
| `--hagilight-mermaid-app-font-mono` | Error source font | system monospace | system monospace |
|
|
93
93
|
|
|
94
|
+
### Series palette
|
|
95
|
+
|
|
96
|
+
Charts that tell many parts apart (pie, Gantt, git graph, journey, timeline, mindmap, kanban, radar, XY, Venn, quadrant, event modeling, Cynefin) read a fixed 12-hue categorical palette per preset and mode, not the site tokens. Mermaid's base theme would derive these from the primary color and leave every slice navy. Each hue has three tones, generated in OKLCH:
|
|
97
|
+
|
|
98
|
+
- **mark** for slices, bars, lines and branches: at least 3:1 against the canvas, with 4.5:1 text on it. In dark mode no mark passes 0.5 relative luminance, so a large mark never glares.
|
|
99
|
+
- **fill** for blocks that carry their own text, such as notes, quadrants and event boxes.
|
|
100
|
+
- **border** for the edge of a fill block.
|
|
101
|
+
|
|
102
|
+
Blue and teal lead the order, then amber and violet, so neighbouring series never read alike. `getMermaidSemanticTheme(mode, preset).series` exposes the tones; node, edge and cluster colors still follow the tokens above.
|
|
103
|
+
|
|
94
104
|
To use a site's own names, pass `tokens` instead of redefining the package tokens:
|
|
95
105
|
|
|
96
106
|
```ts
|
|
@@ -148,7 +158,7 @@ With Mermaid 11.16.1, every diagram type the demo covers renders an SVG, and non
|
|
|
148
158
|
- **Part focus and the reveal** read Mermaid 11.16.1's SVG structure, which has no shared shape across diagram types. A later Mermaid release can rename a class: the affected type then loses its part focus, and its reveal falls back to the generic one, until the table in `src/adapters.ts` is updated. The browser checks pin the installed version.
|
|
149
159
|
- **Thin lines** (a sequence message, a git branch) are hard to hit on their own, so the part includes its label: hover the label or the text beside the line.
|
|
150
160
|
- **Block**, **kanban**, **architecture** and **Wardley** have no dependency graph the tracing can read, so they get part focus rather than upstream and downstream paths.
|
|
151
|
-
- **Text halo**: the default preset draws a
|
|
161
|
+
- **Text halo**: the default preset draws a halo behind diagram text, white in light mode and `#111827` in dark mode. Set `--hagilight-mermaid-halo` to the page color when it differs. Text printed on a colored mark (pie slices, Gantt bars, timeline and branch labels) has no halo.
|
|
152
162
|
|
|
153
163
|
## Parity
|
|
154
164
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { MermaidSemanticTheme, MermaidSeriesColor } from './types.js';
|
|
2
|
+
export declare const DEFAULT_LIGHT_SERIES: readonly MermaidSeriesColor[];
|
|
3
|
+
export declare const DEFAULT_DARK_SERIES: readonly MermaidSeriesColor[];
|
|
4
|
+
export declare const ARCHIFY_LIGHT_SERIES: readonly MermaidSeriesColor[];
|
|
5
|
+
export declare const ARCHIFY_DARK_SERIES: readonly MermaidSeriesColor[];
|
|
6
|
+
/** Blends two hex colors; other color forms return the first untouched, since Mermaid cannot mix them. */
|
|
7
|
+
export declare function mixColors(from: string, to: string, amount: number): string;
|
|
8
|
+
/**
|
|
9
|
+
* Mermaid variables for the diagram types that color many parts apart, plus the surfaces that base-theme
|
|
10
|
+
* derivation leaves cream, grey or black (notes, grids, pie outlines, git labels). Everything here is a
|
|
11
|
+
* pure function of the semantic theme, so a site token change still flows through node and edge colors.
|
|
12
|
+
*/
|
|
13
|
+
export declare function buildSeriesVariables(theme: MermaidSemanticTheme): Record<string, unknown>;
|
package/dist/palette.js
ADDED
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Categorical series for charts and diagrams that color many parts apart (pie, Gantt, git graph,
|
|
3
|
+
* journey, mindmap, radar, xychart, venn). Each entry has three tones generated in OKLCH:
|
|
4
|
+
* mark a mid tone for slices, bars, lines and branches (3:1 against the canvas, readable text on it),
|
|
5
|
+
* fill a quiet tone for blocks that carry their own text,
|
|
6
|
+
* border the edge tone of a fill block.
|
|
7
|
+
* Hue order puts blue and teal first, then amber and violet, so neighbours never read alike.
|
|
8
|
+
* Mermaid's base theme would derive these from the primary color, which leaves every part navy.
|
|
9
|
+
*/
|
|
10
|
+
function series(fill, border, mark) {
|
|
11
|
+
return { fill, border, mark };
|
|
12
|
+
}
|
|
13
|
+
export const DEFAULT_LIGHT_SERIES = [
|
|
14
|
+
series('#dce9ff', '#335aa6', '#5889e6'),
|
|
15
|
+
series('#cbf1eb', '#006d64', '#02a295'),
|
|
16
|
+
series('#f8e5cb', '#7f5400', '#bb7e00'),
|
|
17
|
+
series('#eee2fe', '#6f4797', '#a272d4'),
|
|
18
|
+
series('#ffdfe1', '#98374a', '#d76074'),
|
|
19
|
+
series('#d7f0d9', '#13702f', '#3da454'),
|
|
20
|
+
series('#ffe1d3', '#97400d', '#d46a34'),
|
|
21
|
+
series('#cdeefc', '#006884', '#089ac3'),
|
|
22
|
+
series('#fbdef0', '#8b3b74', '#c664a8'),
|
|
23
|
+
series('#e9ebcc', '#626202', '#929300'),
|
|
24
|
+
series('#e5e5ff', '#584fa3', '#847ce2'),
|
|
25
|
+
series('#caf0f5', '#006b74', '#0d9eab'),
|
|
26
|
+
];
|
|
27
|
+
export const DEFAULT_DARK_SERIES = [
|
|
28
|
+
series('#1d2d4c', '#7ba4f0', '#77a4f6'),
|
|
29
|
+
series('#003631', '#26bdae', '#0bbeaf'),
|
|
30
|
+
series('#3f2903', '#d09945', '#d49838'),
|
|
31
|
+
series('#352546', '#b691e1', '#b88fe6'),
|
|
32
|
+
series('#472026', '#e58491', '#ea808f'),
|
|
33
|
+
series('#16361c', '#6db979', '#67bb75'),
|
|
34
|
+
series('#462312', '#e28b63', '#e7885d'),
|
|
35
|
+
series('#003344', '#39b4dd', '#22b5e1'),
|
|
36
|
+
series('#412137', '#d686bc', '#da83be'),
|
|
37
|
+
series('#303006', '#a9ab4a', '#aaab3f'),
|
|
38
|
+
series('#2b294b', '#9d99ed', '#9d98f2'),
|
|
39
|
+
series('#00353a', '#17bac8', '#0ebac9'),
|
|
40
|
+
];
|
|
41
|
+
export const ARCHIFY_LIGHT_SERIES = [
|
|
42
|
+
series('#d4f6fa', '#06717a', '#0698a4'),
|
|
43
|
+
series('#dbf6e7', '#04764c', '#019f68'),
|
|
44
|
+
series('#fdecd5', '#865900', '#b37901'),
|
|
45
|
+
series('#efebff', '#6953a0', '#8d73d1'),
|
|
46
|
+
series('#ffe8e9', '#9b424d', '#cc5e6b'),
|
|
47
|
+
series('#e4f0ff', '#2e64a6', '#4687d8'),
|
|
48
|
+
series('#e7f4db', '#4c701a', '#699630'),
|
|
49
|
+
series('#ffe9e0', '#994920', '#c96736'),
|
|
50
|
+
series('#ffe6f6', '#8f4478', '#bc61a0'),
|
|
51
|
+
series('#d6f7f1', '#00736a', '#0d9b8f'),
|
|
52
|
+
series('#eaeeff', '#505ba7', '#6f7dd9'),
|
|
53
|
+
series('#f4f0d5', '#716400', '#998702'),
|
|
54
|
+
];
|
|
55
|
+
export const ARCHIFY_DARK_SERIES = [
|
|
56
|
+
series('#002a2e', '#1acfdf', '#0ebac9'),
|
|
57
|
+
series('#082b1b', '#61d19a', '#3fbf86'),
|
|
58
|
+
series('#322004', '#e8aa4e', '#d79628'),
|
|
59
|
+
series('#261f3a', '#bda7fe', '#ab91f2'),
|
|
60
|
+
series('#39191c', '#ff939c', '#ef7d88'),
|
|
61
|
+
series('#12253c', '#85bafe', '#65a7fa'),
|
|
62
|
+
series('#1c290d', '#9cc86c', '#87b651'),
|
|
63
|
+
series('#381b0e', '#fc9b6f', '#eb8656'),
|
|
64
|
+
series('#341a2c', '#ee95d1', '#de80c0'),
|
|
65
|
+
series('#002b27', '#2bd2c2', '#08beaf'),
|
|
66
|
+
series('#1d223c', '#a3b2fe', '#8c9cfb'),
|
|
67
|
+
series('#2a2403', '#cbb94c', '#b9a624'),
|
|
68
|
+
];
|
|
69
|
+
function channels(color) {
|
|
70
|
+
const match = color.match(/^#([0-9a-f]{6})$/i);
|
|
71
|
+
if (!match)
|
|
72
|
+
return null;
|
|
73
|
+
return [0, 2, 4].map((offset) => Number.parseInt(match[1].slice(offset, offset + 2), 16));
|
|
74
|
+
}
|
|
75
|
+
const toHex = (rgb) => `#${rgb.map((value) => Math.round(value).toString(16).padStart(2, '0')).join('')}`;
|
|
76
|
+
/** Blends two hex colors; other color forms return the first untouched, since Mermaid cannot mix them. */
|
|
77
|
+
export function mixColors(from, to, amount) {
|
|
78
|
+
const a = channels(from);
|
|
79
|
+
const b = channels(to);
|
|
80
|
+
if (!a || !b)
|
|
81
|
+
return from;
|
|
82
|
+
return toHex(a.map((value, index) => value + (b[index] - value) * amount));
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Mermaid variables for the diagram types that color many parts apart, plus the surfaces that base-theme
|
|
86
|
+
* derivation leaves cream, grey or black (notes, grids, pie outlines, git labels). Everything here is a
|
|
87
|
+
* pure function of the semantic theme, so a site token change still flows through node and edge colors.
|
|
88
|
+
*/
|
|
89
|
+
export function buildSeriesVariables(theme) {
|
|
90
|
+
const dark = theme.mode === 'dark';
|
|
91
|
+
const { series: tones, onSeries: onMark, foreground, background } = theme;
|
|
92
|
+
const at = (index) => tones[index % tones.length];
|
|
93
|
+
const variables = {
|
|
94
|
+
darkMode: dark,
|
|
95
|
+
textColor: foreground,
|
|
96
|
+
titleColor: foreground,
|
|
97
|
+
labelTextColor: foreground,
|
|
98
|
+
};
|
|
99
|
+
for (let index = 0; index < 12; index += 1) {
|
|
100
|
+
variables[`cScale${index}`] = at(index).mark;
|
|
101
|
+
variables[`cScaleLabel${index}`] = onMark;
|
|
102
|
+
variables[`pie${index + 1}`] = at(index).mark;
|
|
103
|
+
}
|
|
104
|
+
for (let index = 0; index < 8; index += 1) {
|
|
105
|
+
variables[`git${index}`] = at(index).mark;
|
|
106
|
+
variables[`gitBranchLabel${index}`] = onMark;
|
|
107
|
+
variables[`venn${index + 1}`] = at(index).mark;
|
|
108
|
+
variables[`fillType${index}`] = at(index).mark;
|
|
109
|
+
}
|
|
110
|
+
Object.assign(variables, {
|
|
111
|
+
pieStrokeColor: background,
|
|
112
|
+
pieStrokeWidth: '2px',
|
|
113
|
+
pieOuterStrokeColor: theme.cluster.border,
|
|
114
|
+
pieOuterStrokeWidth: '1px',
|
|
115
|
+
pieOpacity: '1',
|
|
116
|
+
pieSectionTextColor: onMark,
|
|
117
|
+
pieTitleTextColor: foreground,
|
|
118
|
+
pieLegendTextColor: foreground,
|
|
119
|
+
vennTitleTextColor: foreground,
|
|
120
|
+
vennSetTextColor: foreground,
|
|
121
|
+
tagLabelColor: foreground,
|
|
122
|
+
tagLabelBackground: theme.node.fill,
|
|
123
|
+
tagLabelBorder: theme.node.border,
|
|
124
|
+
commitLabelColor: foreground,
|
|
125
|
+
commitLabelBackground: theme.cluster.fill,
|
|
126
|
+
// Sequence and state diagrams.
|
|
127
|
+
actorBkg: theme.node.fill,
|
|
128
|
+
actorBorder: theme.node.border,
|
|
129
|
+
actorTextColor: theme.node.text,
|
|
130
|
+
actorLineColor: mixColors(background, foreground, 0.4),
|
|
131
|
+
signalColor: theme.edge.line,
|
|
132
|
+
signalTextColor: theme.edge.label,
|
|
133
|
+
labelBoxBkgColor: theme.cluster.fill,
|
|
134
|
+
labelBoxBorderColor: theme.cluster.border,
|
|
135
|
+
loopTextColor: foreground,
|
|
136
|
+
noteBkgColor: at(2).fill,
|
|
137
|
+
noteBorderColor: at(2).border,
|
|
138
|
+
noteTextColor: foreground,
|
|
139
|
+
activationBkgColor: theme.coreNode.fill,
|
|
140
|
+
activationBorderColor: theme.node.border,
|
|
141
|
+
sequenceNumberColor: background,
|
|
142
|
+
specialStateColor: theme.edge.line,
|
|
143
|
+
// Gantt: tasks read as a series, done work steps back, critical and today use the danger tone.
|
|
144
|
+
sectionBkgColor: theme.cluster.fill,
|
|
145
|
+
altSectionBkgColor: background,
|
|
146
|
+
sectionBkgColor2: theme.cluster.fill,
|
|
147
|
+
gridColor: mixColors(background, foreground, dark ? 0.2 : 0.16),
|
|
148
|
+
taskBkgColor: at(0).mark,
|
|
149
|
+
taskBorderColor: at(0).border,
|
|
150
|
+
taskTextColor: onMark,
|
|
151
|
+
taskTextLightColor: onMark,
|
|
152
|
+
taskTextDarkColor: foreground,
|
|
153
|
+
taskTextOutsideColor: foreground,
|
|
154
|
+
activeTaskBkgColor: at(1).mark,
|
|
155
|
+
activeTaskBorderColor: at(1).border,
|
|
156
|
+
doneTaskBkgColor: mixColors(background, foreground, dark ? 0.32 : 0.22),
|
|
157
|
+
doneTaskBorderColor: mixColors(background, foreground, dark ? 0.5 : 0.45),
|
|
158
|
+
critBkgColor: theme.danger,
|
|
159
|
+
critBorderColor: theme.danger,
|
|
160
|
+
todayLineColor: theme.danger,
|
|
161
|
+
// Quadrant chart: four quiet fills, one point tone.
|
|
162
|
+
quadrant1Fill: at(0).fill,
|
|
163
|
+
quadrant2Fill: at(1).fill,
|
|
164
|
+
quadrant3Fill: at(4).fill,
|
|
165
|
+
quadrant4Fill: at(2).fill,
|
|
166
|
+
quadrant1TextFill: foreground,
|
|
167
|
+
quadrant2TextFill: foreground,
|
|
168
|
+
quadrant3TextFill: foreground,
|
|
169
|
+
quadrant4TextFill: foreground,
|
|
170
|
+
quadrantPointFill: at(0).border,
|
|
171
|
+
quadrantPointTextFill: foreground,
|
|
172
|
+
quadrantXAxisTextFill: foreground,
|
|
173
|
+
quadrantYAxisTextFill: foreground,
|
|
174
|
+
quadrantTitleFill: foreground,
|
|
175
|
+
quadrantInternalBorderStrokeFill: theme.cluster.border,
|
|
176
|
+
quadrantExternalBorderStrokeFill: theme.node.border,
|
|
177
|
+
// Event modeling: one family per role, so command, event and read model never share a hue.
|
|
178
|
+
emUiFill: background,
|
|
179
|
+
emUiStroke: theme.cluster.border,
|
|
180
|
+
emCommandFill: at(0).fill,
|
|
181
|
+
emCommandStroke: at(0).border,
|
|
182
|
+
emEventFill: at(6).fill,
|
|
183
|
+
emEventStroke: at(6).border,
|
|
184
|
+
emReadModelFill: at(5).fill,
|
|
185
|
+
emReadModelStroke: at(5).border,
|
|
186
|
+
emProcessorFill: at(3).fill,
|
|
187
|
+
emProcessorStroke: at(3).border,
|
|
188
|
+
emSwimlaneBackgroundOdd: theme.cluster.fill,
|
|
189
|
+
emSwimlaneBackgroundStroke: theme.cluster.border,
|
|
190
|
+
attributeBackgroundColorOdd: theme.node.fill,
|
|
191
|
+
attributeBackgroundColorEven: theme.cluster.fill,
|
|
192
|
+
archEdgeColor: theme.edge.line,
|
|
193
|
+
archEdgeArrowColor: theme.edge.arrow,
|
|
194
|
+
wardleyEvolutionColor: theme.danger,
|
|
195
|
+
xyChart: {
|
|
196
|
+
backgroundColor: background,
|
|
197
|
+
titleColor: foreground,
|
|
198
|
+
dataLabelColor: foreground,
|
|
199
|
+
xAxisTitleColor: foreground,
|
|
200
|
+
xAxisLabelColor: foreground,
|
|
201
|
+
xAxisTickColor: theme.edge.line,
|
|
202
|
+
xAxisLineColor: theme.edge.line,
|
|
203
|
+
yAxisTitleColor: foreground,
|
|
204
|
+
yAxisLabelColor: foreground,
|
|
205
|
+
yAxisTickColor: theme.edge.line,
|
|
206
|
+
yAxisLineColor: theme.edge.line,
|
|
207
|
+
plotColorPalette: tones.map((tone) => tone.mark).join(','),
|
|
208
|
+
},
|
|
209
|
+
radar: {
|
|
210
|
+
axisColor: theme.edge.line,
|
|
211
|
+
graticuleColor: mixColors(background, foreground, dark ? 0.2 : 0.12),
|
|
212
|
+
graticuleOpacity: 0.55,
|
|
213
|
+
curveOpacity: 0.38,
|
|
214
|
+
},
|
|
215
|
+
packet: {
|
|
216
|
+
startByteColor: foreground,
|
|
217
|
+
endByteColor: foreground,
|
|
218
|
+
labelColor: foreground,
|
|
219
|
+
titleColor: foreground,
|
|
220
|
+
blockStrokeColor: at(0).border,
|
|
221
|
+
blockFillColor: at(0).fill,
|
|
222
|
+
},
|
|
223
|
+
cynefin: {
|
|
224
|
+
complexBg: at(5).fill,
|
|
225
|
+
complicatedBg: at(0).fill,
|
|
226
|
+
chaoticBg: at(4).fill,
|
|
227
|
+
clearBg: at(2).fill,
|
|
228
|
+
confusionBg: at(3).fill,
|
|
229
|
+
boundaryColor: theme.edge.line,
|
|
230
|
+
arrowColor: theme.edge.line,
|
|
231
|
+
cliffColor: theme.danger,
|
|
232
|
+
textColor: foreground,
|
|
233
|
+
labelColor: foreground,
|
|
234
|
+
},
|
|
235
|
+
});
|
|
236
|
+
return variables;
|
|
237
|
+
}
|
package/dist/theme.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ARCHIFY_DARK_SERIES, ARCHIFY_LIGHT_SERIES, DEFAULT_DARK_SERIES, DEFAULT_LIGHT_SERIES, buildSeriesVariables, } from './palette.js';
|
|
1
2
|
/** Custom properties read for each role when a site does not map its own. */
|
|
2
3
|
export const TOKEN_PROPERTIES = {
|
|
3
4
|
background: '--hagilight-mermaid-background',
|
|
@@ -22,6 +23,8 @@ const LIGHT_THEME = {
|
|
|
22
23
|
coreNode: { fill: '#dbeafe', border: '#1e40af', text: '#17212b' },
|
|
23
24
|
cluster: { fill: '#f8fafc', border: '#64748b', text: '#17212b' },
|
|
24
25
|
edge: { line: '#334155', label: '#17212b', arrow: '#1d4ed8' },
|
|
26
|
+
series: DEFAULT_LIGHT_SERIES,
|
|
27
|
+
onSeries: '#0b1220',
|
|
25
28
|
};
|
|
26
29
|
const DARK_THEME = {
|
|
27
30
|
mode: 'dark',
|
|
@@ -38,6 +41,8 @@ const DARK_THEME = {
|
|
|
38
41
|
coreNode: { fill: '#1d4ed8', border: '#bfdbfe', text: '#ffffff' },
|
|
39
42
|
cluster: { fill: '#1f2937', border: '#94a3b8', text: '#f8fafc' },
|
|
40
43
|
edge: { line: '#cbd5e1', label: '#f8fafc', arrow: '#93c5fd' },
|
|
44
|
+
series: DEFAULT_DARK_SERIES,
|
|
45
|
+
onSeries: '#0b1220',
|
|
41
46
|
};
|
|
42
47
|
const ARCHIFY_LIGHT_THEME = {
|
|
43
48
|
mode: 'light',
|
|
@@ -54,6 +59,8 @@ const ARCHIFY_LIGHT_THEME = {
|
|
|
54
59
|
coreNode: { fill: '#cffafe', border: '#0891b2', text: '#164e63' },
|
|
55
60
|
cluster: { fill: '#f1f5f9', border: '#94a3b8', text: '#0f172a' },
|
|
56
61
|
edge: { line: '#475569', label: '#0f172a', arrow: '#0891b2' },
|
|
62
|
+
series: ARCHIFY_LIGHT_SERIES,
|
|
63
|
+
onSeries: '#0f172a',
|
|
57
64
|
};
|
|
58
65
|
const ARCHIFY_DARK_THEME = {
|
|
59
66
|
mode: 'dark',
|
|
@@ -70,6 +77,8 @@ const ARCHIFY_DARK_THEME = {
|
|
|
70
77
|
coreNode: { fill: '#083344', border: '#22d3ee', text: '#ecfeff' },
|
|
71
78
|
cluster: { fill: '#0f172a', border: '#475569', text: '#f8fafc' },
|
|
72
79
|
edge: { line: '#22d3ee', label: '#f8fafc', arrow: '#22d3ee' },
|
|
80
|
+
series: ARCHIFY_DARK_SERIES,
|
|
81
|
+
onSeries: '#020617',
|
|
73
82
|
};
|
|
74
83
|
export const MERMAID_LAYOUT_DEFAULTS = {
|
|
75
84
|
nodeSpacing: 36,
|
|
@@ -189,6 +198,7 @@ export function getMermaidThemeConfig(mode, preset = 'default', options = {}) {
|
|
|
189
198
|
labelBoxBorderColor: semantic.cluster.border,
|
|
190
199
|
fontFamily: 'inherit',
|
|
191
200
|
fontSize: '14px',
|
|
201
|
+
...buildSeriesVariables(semantic),
|
|
192
202
|
};
|
|
193
203
|
if (appliedPreset === 'archify') {
|
|
194
204
|
Object.assign(themeVariables, {
|
package/dist/types.d.ts
CHANGED
|
@@ -48,6 +48,12 @@ export interface MermaidLabelOverrides extends Partial<Omit<MermaidLabels, 'trac
|
|
|
48
48
|
trace?: Partial<MermaidLabels['trace']>;
|
|
49
49
|
viewer?: Partial<MermaidLabels['viewer']>;
|
|
50
50
|
}
|
|
51
|
+
/** Three tones of one categorical hue: a mark for slices and lines, a quiet fill for text blocks, and its border. */
|
|
52
|
+
export interface MermaidSeriesColor {
|
|
53
|
+
mark: string;
|
|
54
|
+
fill: string;
|
|
55
|
+
border: string;
|
|
56
|
+
}
|
|
51
57
|
export interface MermaidSemanticTheme {
|
|
52
58
|
mode: MermaidThemeMode;
|
|
53
59
|
base: 'base';
|
|
@@ -79,6 +85,10 @@ export interface MermaidSemanticTheme {
|
|
|
79
85
|
label: string;
|
|
80
86
|
arrow: string;
|
|
81
87
|
};
|
|
88
|
+
/** Categorical colors for diagrams that tell many parts apart, such as pie, Gantt and git graph. */
|
|
89
|
+
series: readonly MermaidSeriesColor[];
|
|
90
|
+
/** Text color that holds 4.5:1 on every series `mark`. */
|
|
91
|
+
onSeries: string;
|
|
82
92
|
}
|
|
83
93
|
export interface MermaidLayoutConfig {
|
|
84
94
|
nodeSpacing: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hagicode/hagilight-mermaid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Framework-agnostic Mermaid rendering with the HagiCode look: themes, presets, entrance reveal and path tracing for Astro, Starlight and Docusaurus sites",
|
|
6
6
|
"repository": {
|
package/styles.css
CHANGED
|
@@ -74,14 +74,30 @@
|
|
|
74
74
|
|
|
75
75
|
.mermaid-container.mermaid-preset-default .mermaid-diagram-container svg text {
|
|
76
76
|
paint-order: stroke fill;
|
|
77
|
-
stroke: #fff;
|
|
77
|
+
stroke: var(--hagilight-mermaid-halo, #fff);
|
|
78
78
|
stroke-width: 4px;
|
|
79
79
|
stroke-linecap: round;
|
|
80
80
|
stroke-linejoin: round;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
.mermaid-container[data-mermaid-mode="dark"].mermaid-preset-default .mermaid-diagram-container svg text {
|
|
84
|
-
stroke: #
|
|
84
|
+
stroke: var(--hagilight-mermaid-halo, #111827);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Text printed on a colored mark has no line behind it to clear, and a halo only blurs its edges. */
|
|
88
|
+
.mermaid-container.mermaid-preset-default .mermaid-diagram-container svg :is(
|
|
89
|
+
text.slice,
|
|
90
|
+
text.taskText,
|
|
91
|
+
text.journey-section,
|
|
92
|
+
text.task,
|
|
93
|
+
text.treemapLabel,
|
|
94
|
+
text.treemapValue,
|
|
95
|
+
text.treemapSectionLabel,
|
|
96
|
+
text.treemapSectionValue,
|
|
97
|
+
g.timeline-node text,
|
|
98
|
+
g.branchLabel text
|
|
99
|
+
) {
|
|
100
|
+
stroke: none;
|
|
85
101
|
}
|
|
86
102
|
|
|
87
103
|
/*
|
|
@@ -644,355 +660,29 @@
|
|
|
644
660
|
}
|
|
645
661
|
|
|
646
662
|
/*
|
|
647
|
-
*
|
|
648
|
-
*
|
|
649
|
-
* derive near-black series colours from the dark node fill. These rules recolour them from the same
|
|
650
|
-
* tokens as everything else. Mermaid's own `#id .x` rules outrank any class selector, hence !important.
|
|
663
|
+
* Parts Mermaid draws from fixed colors that no theme variable reaches. They follow the container tokens, so
|
|
664
|
+
* both modes read from one place. Mermaid's own `#id .x` rules outrank any class selector, hence !important.
|
|
651
665
|
*/
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
--hagilight-mermaid-tint: color-mix(in srgb, var(--hagilight-mermaid-trace-down, #60a5fa) 26%, var(--hagilight-mermaid-surface, #1f2937));
|
|
655
|
-
--hagilight-mermaid-tint-strong: color-mix(in srgb, var(--hagilight-mermaid-trace-down, #60a5fa) 52%, var(--hagilight-mermaid-surface, #1f2937));
|
|
656
|
-
--hagilight-mermaid-warm: color-mix(in srgb, var(--hagilight-mermaid-trace-up, #fbbf24) 30%, var(--hagilight-mermaid-surface, #1f2937));
|
|
657
|
-
--hagilight-mermaid-series-0: var(--hagilight-mermaid-series-0-color, #60a5fa);
|
|
658
|
-
--hagilight-mermaid-series-1: var(--hagilight-mermaid-series-1-color, #34d399);
|
|
659
|
-
--hagilight-mermaid-series-2: var(--hagilight-mermaid-series-2-color, #fbbf24);
|
|
660
|
-
--hagilight-mermaid-series-3: var(--hagilight-mermaid-series-3-color, #f472b6);
|
|
661
|
-
--hagilight-mermaid-series-4: var(--hagilight-mermaid-series-4-color, #a78bfa);
|
|
662
|
-
--hagilight-mermaid-series-5: var(--hagilight-mermaid-series-5-color, #22d3ee);
|
|
663
|
-
--hagilight-mermaid-series-6: var(--hagilight-mermaid-series-6-color, #fb923c);
|
|
664
|
-
--hagilight-mermaid-series-7: var(--hagilight-mermaid-series-7-color, #a3e635);
|
|
665
|
-
}
|
|
666
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="eventmodeling"] g.em-swimlane rect {
|
|
667
|
-
fill: var(--hagilight-mermaid-group, #1e293b) !important;
|
|
668
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
669
|
-
}
|
|
670
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="eventmodeling"] g.em-box rect {
|
|
671
|
-
filter: brightness(0.5) saturate(1.15);
|
|
672
|
-
}
|
|
673
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="eventmodeling"] g.em-swimlane text {
|
|
674
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
675
|
-
color: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
676
|
-
stroke: none !important;
|
|
677
|
-
}
|
|
678
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="eventmodeling"] g.em-box foreignObject, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="eventmodeling"] g.em-box foreignObject div, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="eventmodeling"] g.em-box foreignObject b {
|
|
679
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
680
|
-
color: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
681
|
-
stroke: none !important;
|
|
682
|
-
}
|
|
683
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="eventmodeling"] path.em-relation {
|
|
684
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
685
|
-
}
|
|
686
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="packet"] rect.packetBlock {
|
|
687
|
-
fill: var(--hagilight-mermaid-tint, #243a5a) !important;
|
|
688
|
-
stroke: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
689
|
-
}
|
|
690
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="packet"] text.packetLabel {
|
|
691
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
692
|
-
color: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
693
|
-
stroke: none !important;
|
|
694
|
-
}
|
|
695
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="packet"] text.packetByte, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="packet"] text.packetTitle {
|
|
696
|
-
fill: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
697
|
-
stroke: none !important;
|
|
698
|
-
}
|
|
699
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] g[class^="bar-plot"] rect {
|
|
700
|
-
fill: var(--hagilight-mermaid-tint-strong, #2f5a96) !important;
|
|
701
|
-
stroke: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
702
|
-
}
|
|
703
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] g[class^="line-plot"] path {
|
|
704
|
-
stroke: var(--hagilight-mermaid-trace-up, #fbbf24) !important;
|
|
705
|
-
}
|
|
706
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] g.chart-title text, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] g.bottom-axis text, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] g.left-axis text {
|
|
707
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
708
|
-
stroke: none !important;
|
|
709
|
-
}
|
|
710
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] g.bottom-axis path, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] g.left-axis path {
|
|
711
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
712
|
-
}
|
|
713
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="xychart"] rect.background {
|
|
714
|
-
fill: transparent !important;
|
|
715
|
-
}
|
|
716
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="cynefin"] rect.cynefinDomain {
|
|
717
|
-
fill: var(--hagilight-mermaid-group, #1e293b) !important;
|
|
718
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
719
|
-
}
|
|
720
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="cynefin"] path.cynefinConfusion {
|
|
721
|
-
fill: var(--hagilight-mermaid-tint, #243a5a) !important;
|
|
722
|
-
}
|
|
723
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="cynefin"] rect.cynefinItem {
|
|
724
|
-
fill: var(--hagilight-mermaid-surface, #1f2937) !important;
|
|
725
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
726
|
-
}
|
|
727
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="cynefin"] text {
|
|
728
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
729
|
-
color: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
730
|
-
stroke: none !important;
|
|
731
|
-
}
|
|
732
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="cynefin"] path.cynefinBoundary {
|
|
733
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
734
|
-
}
|
|
735
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.section0, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.section2 {
|
|
736
|
-
fill: var(--hagilight-mermaid-group, #1e293b) !important;
|
|
737
|
-
}
|
|
738
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.section1, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.section3 {
|
|
739
|
-
fill: var(--hagilight-mermaid-surface, #1f2937) !important;
|
|
740
|
-
}
|
|
741
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.task {
|
|
742
|
-
fill: var(--hagilight-mermaid-tint-strong, #2f5a96) !important;
|
|
743
|
-
stroke: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
744
|
-
}
|
|
745
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.task[class*="done"] {
|
|
746
|
-
fill: var(--hagilight-mermaid-group, #1e293b) !important;
|
|
747
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
748
|
-
}
|
|
749
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.task[class*="active"] {
|
|
750
|
-
fill: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
751
|
-
}
|
|
752
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] rect.task[class*="crit"] {
|
|
753
|
-
fill: var(--hagilight-mermaid-danger, #f87171) !important;
|
|
754
|
-
}
|
|
755
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] text.taskText, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] text.taskTextOutsideLeft, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] text.taskTextOutsideRight, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] text.sectionTitle, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] text.titleText {
|
|
756
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
757
|
-
stroke: none !important;
|
|
758
|
-
}
|
|
759
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] g.grid .tick line {
|
|
760
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
761
|
-
}
|
|
762
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gantt"] g.grid .tick text {
|
|
763
|
-
fill: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
764
|
-
stroke: none !important;
|
|
765
|
-
}
|
|
766
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] circle.radarGraticule {
|
|
767
|
-
fill: transparent !important;
|
|
768
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
769
|
-
}
|
|
770
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] line.radarAxisLine {
|
|
771
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
772
|
-
}
|
|
773
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] path.radarCurve-0 {
|
|
774
|
-
fill: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
775
|
-
stroke: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
776
|
-
fill-opacity: 0.32 !important;
|
|
777
|
-
}
|
|
778
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] rect.radarLegendBox-0 {
|
|
779
|
-
fill: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
780
|
-
stroke: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
781
|
-
}
|
|
782
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] path.radarCurve-1 {
|
|
783
|
-
fill: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
784
|
-
stroke: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
785
|
-
fill-opacity: 0.32 !important;
|
|
786
|
-
}
|
|
787
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] rect.radarLegendBox-1 {
|
|
788
|
-
fill: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
789
|
-
stroke: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
790
|
-
}
|
|
791
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] path.radarCurve-2 {
|
|
792
|
-
fill: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
793
|
-
stroke: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
794
|
-
fill-opacity: 0.32 !important;
|
|
795
|
-
}
|
|
796
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] rect.radarLegendBox-2 {
|
|
797
|
-
fill: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
798
|
-
stroke: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
799
|
-
}
|
|
800
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] path.radarCurve-3 {
|
|
801
|
-
fill: var(--hagilight-mermaid-series-3, #f472b6) !important;
|
|
802
|
-
stroke: var(--hagilight-mermaid-series-3, #f472b6) !important;
|
|
803
|
-
fill-opacity: 0.32 !important;
|
|
804
|
-
}
|
|
805
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] rect.radarLegendBox-3 {
|
|
806
|
-
fill: var(--hagilight-mermaid-series-3, #f472b6) !important;
|
|
807
|
-
stroke: var(--hagilight-mermaid-series-3, #f472b6) !important;
|
|
808
|
-
}
|
|
809
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="radar"] text {
|
|
810
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
811
|
-
stroke: none !important;
|
|
812
|
-
}
|
|
813
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="venn"] g.venn-set-0 path {
|
|
814
|
-
fill: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
815
|
-
fill-opacity: 0.28 !important;
|
|
816
|
-
stroke: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
817
|
-
}
|
|
818
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="venn"] g.venn-set-1 path {
|
|
819
|
-
fill: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
820
|
-
fill-opacity: 0.28 !important;
|
|
821
|
-
stroke: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
822
|
-
}
|
|
823
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="venn"] g.venn-set-2 path {
|
|
824
|
-
fill: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
825
|
-
fill-opacity: 0.28 !important;
|
|
826
|
-
stroke: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
827
|
-
}
|
|
828
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="venn"] g.venn-intersection path {
|
|
829
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
830
|
-
fill-opacity: 0.1 !important;
|
|
831
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
832
|
-
}
|
|
833
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="venn"] text {
|
|
834
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
835
|
-
stroke: none !important;
|
|
666
|
+
.mermaid-container svg[aria-roledescription="gantt"] g.grid .tick line {
|
|
667
|
+
stroke: var(--hagilight-mermaid-line, #e2e8f0) !important;
|
|
836
668
|
}
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
stroke: none !important;
|
|
841
|
-
}
|
|
842
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treeView"] line.treeView-node-line {
|
|
843
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
844
|
-
}
|
|
845
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription^="railroad"] g.railroad-terminal rect {
|
|
846
|
-
fill: var(--hagilight-mermaid-warm, #4a3f1f) !important;
|
|
847
|
-
stroke: var(--hagilight-mermaid-trace-up, #fbbf24) !important;
|
|
848
|
-
}
|
|
849
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription^="railroad"] g.railroad-nonterminal rect {
|
|
850
|
-
fill: var(--hagilight-mermaid-tint, #243a5a) !important;
|
|
851
|
-
stroke: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
852
|
-
}
|
|
853
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription^="railroad"] text {
|
|
854
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
855
|
-
stroke: none !important;
|
|
856
|
-
}
|
|
857
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription^="railroad"] path.railroad-line {
|
|
858
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
859
|
-
}
|
|
860
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="timeline"] path.node-bkg {
|
|
861
|
-
fill: var(--hagilight-mermaid-tint-strong, #2f5a96) !important;
|
|
862
|
-
}
|
|
863
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="timeline"] line[class^="node-line"] {
|
|
864
|
-
stroke: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
865
|
-
}
|
|
866
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="timeline"] text {
|
|
867
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
868
|
-
color: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
869
|
-
stroke: none !important;
|
|
870
|
-
}
|
|
871
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="mindmap"] path.node-bkg, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="mindmap"] g.node rect {
|
|
872
|
-
fill: var(--hagilight-mermaid-tint, #243a5a) !important;
|
|
873
|
-
}
|
|
874
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="mindmap"] g.node.section-root circle {
|
|
875
|
-
fill: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
876
|
-
}
|
|
877
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="mindmap"] line[class^="node-line"] {
|
|
878
|
-
stroke: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
879
|
-
}
|
|
880
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="mindmap"] g.edgePaths path {
|
|
881
|
-
stroke: var(--hagilight-mermaid-muted-ink, #94a3b8) !important;
|
|
882
|
-
}
|
|
883
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="kanban"] g.sections g.cluster rect {
|
|
884
|
-
fill: var(--hagilight-mermaid-group, #1e293b) !important;
|
|
885
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
886
|
-
}
|
|
887
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch0, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow0 {
|
|
888
|
-
stroke: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
889
|
-
}
|
|
890
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit0, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label0 {
|
|
891
|
-
fill: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
892
|
-
stroke: var(--hagilight-mermaid-series-0, #60a5fa) !important;
|
|
893
|
-
}
|
|
894
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch1, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow1 {
|
|
895
|
-
stroke: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
896
|
-
}
|
|
897
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit1, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label1 {
|
|
898
|
-
fill: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
899
|
-
stroke: var(--hagilight-mermaid-series-1, #34d399) !important;
|
|
900
|
-
}
|
|
901
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch2, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow2 {
|
|
902
|
-
stroke: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
903
|
-
}
|
|
904
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit2, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label2 {
|
|
905
|
-
fill: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
906
|
-
stroke: var(--hagilight-mermaid-series-2, #fbbf24) !important;
|
|
907
|
-
}
|
|
908
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch3, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow3 {
|
|
909
|
-
stroke: var(--hagilight-mermaid-series-3, #f472b6) !important;
|
|
910
|
-
}
|
|
911
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit3, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label3 {
|
|
912
|
-
fill: var(--hagilight-mermaid-series-3, #f472b6) !important;
|
|
913
|
-
stroke: var(--hagilight-mermaid-series-3, #f472b6) !important;
|
|
914
|
-
}
|
|
915
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch4, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow4 {
|
|
916
|
-
stroke: var(--hagilight-mermaid-series-4, #a78bfa) !important;
|
|
917
|
-
}
|
|
918
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit4, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label4 {
|
|
919
|
-
fill: var(--hagilight-mermaid-series-4, #a78bfa) !important;
|
|
920
|
-
stroke: var(--hagilight-mermaid-series-4, #a78bfa) !important;
|
|
921
|
-
}
|
|
922
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch5, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow5 {
|
|
923
|
-
stroke: var(--hagilight-mermaid-series-5, #22d3ee) !important;
|
|
924
|
-
}
|
|
925
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit5, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label5 {
|
|
926
|
-
fill: var(--hagilight-mermaid-series-5, #22d3ee) !important;
|
|
927
|
-
stroke: var(--hagilight-mermaid-series-5, #22d3ee) !important;
|
|
928
|
-
}
|
|
929
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch6, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow6 {
|
|
930
|
-
stroke: var(--hagilight-mermaid-series-6, #fb923c) !important;
|
|
931
|
-
}
|
|
932
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit6, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label6 {
|
|
933
|
-
fill: var(--hagilight-mermaid-series-6, #fb923c) !important;
|
|
934
|
-
stroke: var(--hagilight-mermaid-series-6, #fb923c) !important;
|
|
935
|
-
}
|
|
936
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] line.branch7, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] path.arrow7 {
|
|
937
|
-
stroke: var(--hagilight-mermaid-series-7, #a3e635) !important;
|
|
938
|
-
}
|
|
939
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] circle.commit7, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.label7 {
|
|
940
|
-
fill: var(--hagilight-mermaid-series-7, #a3e635) !important;
|
|
941
|
-
stroke: var(--hagilight-mermaid-series-7, #a3e635) !important;
|
|
942
|
-
}
|
|
943
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] rect.branchLabelBkg {
|
|
944
|
-
stroke: none !important;
|
|
945
|
-
}
|
|
946
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] g.branchLabel text, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] g.branchLabel tspan, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] .branch-label0, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] .branch-label1, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="gitGraph"] .branch-label2 {
|
|
947
|
-
fill: var(--hagilight-mermaid-surface, #111827) !important;
|
|
948
|
-
stroke: none !important;
|
|
949
|
-
}
|
|
950
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="er"] g.row-rect-odd path[stroke="none"] {
|
|
951
|
-
fill: var(--hagilight-mermaid-group, #1e293b) !important;
|
|
952
|
-
}
|
|
953
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="er"] g.row-rect-even path[stroke="none"] {
|
|
954
|
-
fill: var(--hagilight-mermaid-surface, #1f2937) !important;
|
|
955
|
-
}
|
|
956
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="er"] .nodeLabel, .mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="er"] .nodeLabel p {
|
|
957
|
-
color: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
958
|
-
}
|
|
959
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treemap"] rect.treemapSection {
|
|
960
|
-
fill: var(--hagilight-mermaid-group, #1e293b) !important;
|
|
961
|
-
stroke: var(--hagilight-mermaid-line, #334155) !important;
|
|
962
|
-
}
|
|
963
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treemap"] rect.treemapSection.section0 {
|
|
964
|
-
fill: color-mix(in srgb, var(--hagilight-mermaid-series-0, #60a5fa) 14%, var(--hagilight-mermaid-surface, #1f2937)) !important;
|
|
965
|
-
}
|
|
966
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treemap"] rect.treemapSection.section1 {
|
|
967
|
-
fill: color-mix(in srgb, var(--hagilight-mermaid-series-1, #34d399) 14%, var(--hagilight-mermaid-surface, #1f2937)) !important;
|
|
968
|
-
}
|
|
969
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treemap"] rect.treemapSection.section2 {
|
|
970
|
-
fill: color-mix(in srgb, var(--hagilight-mermaid-series-2, #fbbf24) 14%, var(--hagilight-mermaid-surface, #1f2937)) !important;
|
|
971
|
-
}
|
|
972
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treemap"] rect.treemapSection.section3 {
|
|
973
|
-
fill: color-mix(in srgb, var(--hagilight-mermaid-series-3, #f472b6) 14%, var(--hagilight-mermaid-surface, #1f2937)) !important;
|
|
974
|
-
}
|
|
975
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treemap"] rect.treemapLeaf {
|
|
976
|
-
fill: var(--hagilight-mermaid-tint-strong, #2f5a96) !important;
|
|
977
|
-
stroke: var(--hagilight-mermaid-trace-down, #60a5fa) !important;
|
|
978
|
-
}
|
|
979
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="treemap"] text {
|
|
980
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
981
|
-
stroke: none !important;
|
|
982
|
-
}
|
|
983
|
-
.mermaid-container[data-mermaid-mode="dark"] svg[aria-roledescription="wardley"] text {
|
|
984
|
-
fill: var(--hagilight-mermaid-ink, #f8fafc) !important;
|
|
669
|
+
|
|
670
|
+
.mermaid-container svg[aria-roledescription="gantt"] g.grid .tick text {
|
|
671
|
+
fill: var(--hagilight-mermaid-muted-ink, #64748b) !important;
|
|
985
672
|
stroke: none !important;
|
|
986
673
|
}
|
|
987
|
-
|
|
988
|
-
|
|
674
|
+
|
|
675
|
+
.mermaid-container svg[aria-roledescription="timeline"] .lineWrapper line {
|
|
676
|
+
stroke: var(--hagilight-mermaid-muted-ink, #64748b) !important;
|
|
989
677
|
}
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
678
|
+
|
|
679
|
+
.mermaid-container svg[aria-roledescription="treeView"] text.treeView-node-label {
|
|
680
|
+
fill: var(--hagilight-mermaid-ink, #17212b) !important;
|
|
681
|
+
color: var(--hagilight-mermaid-ink, #17212b) !important;
|
|
993
682
|
}
|
|
994
|
-
|
|
995
|
-
|
|
683
|
+
|
|
684
|
+
.mermaid-container svg[aria-roledescription="treeView"] line.treeView-node-line {
|
|
685
|
+
stroke: var(--hagilight-mermaid-muted-ink, #64748b) !important;
|
|
996
686
|
}
|
|
997
687
|
|
|
998
688
|
/* Loading state. */
|