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>

material/base.html

@@ -44,7 +44,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f814a825.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.8b05fc09.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.85d0ee34.min.css' | url }}">
@@ -250,7 +250,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.315d0c11.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.7084fa49.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {{ script | script_tag }}
       {% endfor %}

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

@@ -324,32 +324,38 @@ defs #ZERO_OR_MORE_END circle {
 
 /* Sequence actor */
 .actor {
-  fill: var(--md-mermaid-label-bg-color);
-  stroke: var(--md-mermaid-node-fg-color);
+  fill: var(--md-mermaid-sequence-actor-bg-color);
+  stroke: var(--md-mermaid-sequence-actor-border-color);
 }
 
 /* Sequence actor text */
 text.actor > tspan {
   font-family: var(--md-mermaid-font-family);
-  fill: var(--md-mermaid-label-fg-color);
+  fill: var(--md-mermaid-sequence-actor-fg-color);
 }
 
 /* Sequence actor line */
 line {
-  stroke: var(--md-default-fg-color--lighter);
+  stroke: var(--md-mermaid-sequence-actor-line-color);
 }
 
 /* Sequence actor */
 .actor-man circle,
 .actor-man line {
-  fill: var(--md-mermaid-label-bg-color);
-  stroke: var(--md-mermaid-node-fg-color);
+  fill: var(--md-mermaid-sequence-actorman-bg-color);
+  stroke: var(--md-mermaid-sequence-actorman-line-color);
 }
 
 /* Sequence message line */
 .messageLine0,
 .messageLine1 {
-  stroke: var(--md-mermaid-edge-color);
+  stroke: var(--md-mermaid-sequence-message-line-color);
+}
+
+/* Sequence note */
+.note {
+  fill: var(--md-mermaid-sequence-note-bg-color);
+  stroke: var(--md-mermaid-sequence-note-border-color);
 }
 
 /* Sequence message, loop and note text */
@@ -358,30 +364,40 @@ line {
 .loopText > tspan,
 .noteText > tspan {
   font-family: var(--md-mermaid-font-family) !important;
-  fill: var(--md-mermaid-edge-color);
   stroke: none;
 }
 
+/* Sequence message text */
+.messageText {
+  fill: var(--md-mermaid-sequence-message-fg-color);
+}
+
+/* Sequence loop text */
+.loopText,
+.loopText > tspan {
+  fill: var(--md-mermaid-sequence-loop-fg-color);
+}
+
 /* Sequence note text */
 .noteText > tspan {
-  fill: hsl(0, 0%, 0%);
+  fill: var(--md-mermaid-sequence-note-fg-color);
 }
 
 /* Sequence arrow head */
 #arrowhead path {
-  fill: var(--md-mermaid-edge-color);
+  fill: var(--md-mermaid-sequence-message-line-color);
   stroke: none;
 }
 
 /* Sequence loop line */
 .loopLine {
-  fill: var(--md-mermaid-node-bg-color);
-  stroke: var(--md-mermaid-node-fg-color);
+  fill: var(--md-mermaid-sequence-loop-bg-color);
+  stroke: var(--md-mermaid-sequence-loop-border-color);
 }
 
 /* Sequence label box */
 .labelBox {
-  fill: var(--md-mermaid-node-bg-color);
+  fill: var(--md-mermaid-sequence-label-bg-color);
   stroke: none;
 }
 
@@ -389,26 +405,26 @@ line {
 .labelText,
 .labelText > span {
   font-family: var(--md-mermaid-font-family);
-  fill: var(--md-mermaid-node-fg-color);
+  fill: var(--md-mermaid-sequence-label-fg-color);
 }
 
 /* Sequence number */
 .sequenceNumber {
-  fill: var(--md-accent-bg-color);
+  fill: var(--md-mermaid-sequence-number-fg-color);
 }
 
 /* Sequence rectangle */
 rect.rect {
-  fill: var(--md-mermaid-node-bg-color);
+  fill: var(--md-mermaid-sequence-box-bg-color);
   stroke: none;
 }
 
 /* Sequence rectangle text */
 rect.rect + text.text {
-  fill: var(--md-mermaid-edge-color);
+  fill: var(--md-mermaid-sequence-box-fg-color);
 }
 
 /* Sequence diagram markers */
 defs #sequencenumber {
-  fill: var(--md-mermaid-node-fg-color) !important;
+  fill: var(--md-mermaid-sequence-number-bg-color) !important;
 }

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

@@ -28,12 +28,34 @@
 :root > * {
   --md-mermaid-font-family:            var(--md-text-font-family), sans-serif;
 
-  // Colors
+  // General colors
   --md-mermaid-edge-color:             var(--md-code-fg-color);
   --md-mermaid-node-bg-color:          var(--md-accent-fg-color--transparent);
   --md-mermaid-node-fg-color:          var(--md-accent-fg-color);
   --md-mermaid-label-bg-color:         var(--md-default-bg-color);
   --md-mermaid-label-fg-color:         var(--md-code-fg-color);
+
+  // Sequence diagram colors
+  --md-mermaid-sequence-actor-bg-color:      var(--md-mermaid-label-bg-color);
+  --md-mermaid-sequence-actor-fg-color:      var(--md-mermaid-label-fg-color);
+  --md-mermaid-sequence-actor-border-color:  var(--md-mermaid-node-fg-color);
+  --md-mermaid-sequence-actor-line-color:    var(--md-default-fg-color--lighter);
+  --md-mermaid-sequence-actorman-bg-color:   var(--md-mermaid-label-bg-color);
+  --md-mermaid-sequence-actorman-line-color: var(--md-mermaid-node-fg-color);
+  --md-mermaid-sequence-box-bg-color:        var(--md-mermaid-node-bg-color);
+  --md-mermaid-sequence-box-fg-color:        var(--md-mermaid-edge-color);
+  --md-mermaid-sequence-label-bg-color:      var(--md-mermaid-node-bg-color);
+  --md-mermaid-sequence-label-fg-color:      var(--md-mermaid-node-fg-color);
+  --md-mermaid-sequence-loop-bg-color:       var(--md-mermaid-node-bg-color);
+  --md-mermaid-sequence-loop-fg-color:       var(--md-mermaid-edge-color);
+  --md-mermaid-sequence-loop-border-color:   var(--md-mermaid-node-fg-color);
+  --md-mermaid-sequence-message-fg-color:    var(--md-mermaid-edge-color);
+  --md-mermaid-sequence-message-line-color:  var(--md-mermaid-edge-color);
+  --md-mermaid-sequence-note-bg-color:       var(--md-mermaid-label-bg-color);
+  --md-mermaid-sequence-note-fg-color:       var(--md-mermaid-edge-color);
+  --md-mermaid-sequence-note-border-color:   var(--md-mermaid-label-fg-color);
+  --md-mermaid-sequence-number-bg-color:     var(--md-mermaid-node-fg-color);
+  --md-mermaid-sequence-number-fg-color:     var(--md-accent-bg-color);
 }
 
 // ----------------------------------------------------------------------------