Skip to content

Commit ea53f53

Browse files
sispsquidfunk
sisp
and
squidfunk
authored
Added CSS variables for Mermaid sequence diagrams (#5940)
* Add CSS variables for Mermaid sequence diagram note * Add CSS variables for Mermaid sequence diagram actor * Add CSS variables for Mermaid sequence diagram message * Add CSS variables for Mermaid sequence diagram actor man * Add CSS variables for Mermaid sequence diagram loop * Add CSS variables for Mermaid sequence diagram number * Add CSS variables for Mermaid sequence diagram box --------- Co-authored-by: Martin Donath <martin.donath@squidfunk.com>
1 parent ec709b4 commit ea53f53

File tree

7 files changed

+98
-21
lines changed

7 files changed

+98
-21
lines changed

‎material/assets/javascripts/bundle.7084fa49.min.js

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material/assets/javascripts/bundle.7084fa49.min.js.map

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material/assets/stylesheets/main.8b05fc09.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material/assets/stylesheets/main.8b05fc09.min.css.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material/base.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
{% endif %}
4545
{% endblock %}
4646
{% block styles %}
47-
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.f814a825.min.css' | url }}">
47+
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.8b05fc09.min.css' | url }}">
4848
{% if config.theme.palette %}
4949
{% set palette = config.theme.palette %}
5050
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.85d0ee34.min.css' | url }}">
@@ -250,7 +250,7 @@
250250
</script>
251251
{% endblock %}
252252
{% block scripts %}
253-
<script src="{{ 'assets/javascripts/bundle.315d0c11.min.js' | url }}"></script>
253+
<script src="{{ 'assets/javascripts/bundle.7084fa49.min.js' | url }}"></script>
254254
{% for script in config.extra_javascript %}
255255
{{ script | script_tag }}
256256
{% endfor %}

‎src/assets/javascripts/components/content/mermaid/index.css

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -324,32 +324,38 @@ defs #ZERO_OR_MORE_END circle {
324324

325325
/* Sequence actor */
326326
.actor {
327-
fill: var(--md-mermaid-label-bg-color);
328-
stroke: var(--md-mermaid-node-fg-color);
327+
fill: var(--md-mermaid-sequence-actor-bg-color);
328+
stroke: var(--md-mermaid-sequence-actor-border-color);
329329
}
330330

331331
/* Sequence actor text */
332332
text.actor > tspan {
333333
font-family: var(--md-mermaid-font-family);
334-
fill: var(--md-mermaid-label-fg-color);
334+
fill: var(--md-mermaid-sequence-actor-fg-color);
335335
}
336336

337337
/* Sequence actor line */
338338
line {
339-
stroke: var(--md-default-fg-color--lighter);
339+
stroke: var(--md-mermaid-sequence-actor-line-color);
340340
}
341341

342342
/* Sequence actor */
343343
.actor-man circle,
344344
.actor-man line {
345-
fill: var(--md-mermaid-label-bg-color);
346-
stroke: var(--md-mermaid-node-fg-color);
345+
fill: var(--md-mermaid-sequence-actorman-bg-color);
346+
stroke: var(--md-mermaid-sequence-actorman-line-color);
347347
}
348348

349349
/* Sequence message line */
350350
.messageLine0,
351351
.messageLine1 {
352-
stroke: var(--md-mermaid-edge-color);
352+
stroke: var(--md-mermaid-sequence-message-line-color);
353+
}
354+
355+
/* Sequence note */
356+
.note {
357+
fill: var(--md-mermaid-sequence-note-bg-color);
358+
stroke: var(--md-mermaid-sequence-note-border-color);
353359
}
354360

355361
/* Sequence message, loop and note text */
@@ -358,57 +364,67 @@ line {
358364
.loopText > tspan,
359365
.noteText > tspan {
360366
font-family: var(--md-mermaid-font-family) !important;
361-
fill: var(--md-mermaid-edge-color);
362367
stroke: none;
363368
}
364369

370+
/* Sequence message text */
371+
.messageText {
372+
fill: var(--md-mermaid-sequence-message-fg-color);
373+
}
374+
375+
/* Sequence loop text */
376+
.loopText,
377+
.loopText > tspan {
378+
fill: var(--md-mermaid-sequence-loop-fg-color);
379+
}
380+
365381
/* Sequence note text */
366382
.noteText > tspan {
367-
fill: hsl(0, 0%, 0%);
383+
fill: var(--md-mermaid-sequence-note-fg-color);
368384
}
369385

370386
/* Sequence arrow head */
371387
#arrowhead path {
372-
fill: var(--md-mermaid-edge-color);
388+
fill: var(--md-mermaid-sequence-message-line-color);
373389
stroke: none;
374390
}
375391

376392
/* Sequence loop line */
377393
.loopLine {
378-
fill: var(--md-mermaid-node-bg-color);
379-
stroke: var(--md-mermaid-node-fg-color);
394+
fill: var(--md-mermaid-sequence-loop-bg-color);
395+
stroke: var(--md-mermaid-sequence-loop-border-color);
380396
}
381397

382398
/* Sequence label box */
383399
.labelBox {
384-
fill: var(--md-mermaid-node-bg-color);
400+
fill: var(--md-mermaid-sequence-label-bg-color);
385401
stroke: none;
386402
}
387403

388404
/* Sequence label text */
389405
.labelText,
390406
.labelText > span {
391407
font-family: var(--md-mermaid-font-family);
392-
fill: var(--md-mermaid-node-fg-color);
408+
fill: var(--md-mermaid-sequence-label-fg-color);
393409
}
394410

395411
/* Sequence number */
396412
.sequenceNumber {
397-
fill: var(--md-accent-bg-color);
413+
fill: var(--md-mermaid-sequence-number-fg-color);
398414
}
399415

400416
/* Sequence rectangle */
401417
rect.rect {
402-
fill: var(--md-mermaid-node-bg-color);
418+
fill: var(--md-mermaid-sequence-box-bg-color);
403419
stroke: none;
404420
}
405421

406422
/* Sequence rectangle text */
407423
rect.rect + text.text {
408-
fill: var(--md-mermaid-edge-color);
424+
fill: var(--md-mermaid-sequence-box-fg-color);
409425
}
410426

411427
/* Sequence diagram markers */
412428
defs #sequencenumber {
413-
fill: var(--md-mermaid-node-fg-color) !important;
429+
fill: var(--md-mermaid-sequence-number-bg-color) !important;
414430
}

‎src/assets/stylesheets/main/integrations/_mermaid.scss

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,34 @@
2828
:root > * {
2929
--md-mermaid-font-family: var(--md-text-font-family), sans-serif;
3030

31-
// Colors
31+
// General colors
3232
--md-mermaid-edge-color: var(--md-code-fg-color);
3333
--md-mermaid-node-bg-color: var(--md-accent-fg-color--transparent);
3434
--md-mermaid-node-fg-color: var(--md-accent-fg-color);
3535
--md-mermaid-label-bg-color: var(--md-default-bg-color);
3636
--md-mermaid-label-fg-color: var(--md-code-fg-color);
37+
38+
// Sequence diagram colors
39+
--md-mermaid-sequence-actor-bg-color: var(--md-mermaid-label-bg-color);
40+
--md-mermaid-sequence-actor-fg-color: var(--md-mermaid-label-fg-color);
41+
--md-mermaid-sequence-actor-border-color: var(--md-mermaid-node-fg-color);
42+
--md-mermaid-sequence-actor-line-color: var(--md-default-fg-color--lighter);
43+
--md-mermaid-sequence-actorman-bg-color: var(--md-mermaid-label-bg-color);
44+
--md-mermaid-sequence-actorman-line-color: var(--md-mermaid-node-fg-color);
45+
--md-mermaid-sequence-box-bg-color: var(--md-mermaid-node-bg-color);
46+
--md-mermaid-sequence-box-fg-color: var(--md-mermaid-edge-color);
47+
--md-mermaid-sequence-label-bg-color: var(--md-mermaid-node-bg-color);
48+
--md-mermaid-sequence-label-fg-color: var(--md-mermaid-node-fg-color);
49+
--md-mermaid-sequence-loop-bg-color: var(--md-mermaid-node-bg-color);
50+
--md-mermaid-sequence-loop-fg-color: var(--md-mermaid-edge-color);
51+
--md-mermaid-sequence-loop-border-color: var(--md-mermaid-node-fg-color);
52+
--md-mermaid-sequence-message-fg-color: var(--md-mermaid-edge-color);
53+
--md-mermaid-sequence-message-line-color: var(--md-mermaid-edge-color);
54+
--md-mermaid-sequence-note-bg-color: var(--md-mermaid-label-bg-color);
55+
--md-mermaid-sequence-note-fg-color: var(--md-mermaid-edge-color);
56+
--md-mermaid-sequence-note-border-color: var(--md-mermaid-label-fg-color);
57+
--md-mermaid-sequence-number-bg-color: var(--md-mermaid-node-fg-color);
58+
--md-mermaid-sequence-number-fg-color: var(--md-accent-bg-color);
3759
}
3860

3961
// ----------------------------------------------------------------------------

0 commit comments

Comments
 (0)