Merge pull request #11307 from quarto-dev/feature/mermaid-brand

brand,mermaid - support font family and weight forwarding
quarto-dev · Nov 4, 2024 · 8851f59 · 8851f59
2 parents a1cfb03 + 0d79e25
commit 8851f59
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/src/core/sass/brand.ts b/src/core/sass/brand.ts
@@ -464,6 +464,9 @@ const brandTypographyBundle = (
       ["line-height", "presentation-line-height"],
       // TBD?
 
+      // mermaid
+      ["family", "mermaid-font-family"],
+      ["weight", "mermaid-font-weight"],
       // ["style", "font-style-base"],
       // ["weight", "font-weight-base"],
     ],

diff --git a/src/resources/formats/html/_quarto-rules.scss b/src/resources/formats/html/_quarto-rules.scss
@@ -592,7 +592,6 @@ div.ansi-escaped-output {
   }
 }
 
-
 /* rules to support GT table styling */
 table.gt_table {
   color: var(--quarto-body-color);
@@ -701,6 +700,7 @@ $body-bg: #fff !default;
 $primary: #468 !default;
 $secondary: #999 !default;
 $font-family-sans-serif: sans-serif !default;
+$font-weight-base: 400 !default;
 
 /* SCSS variables
 
@@ -715,6 +715,7 @@ $mermaid-fg-color: $body-color !default;
 $mermaid-fg-color--lighter: lighten($body-color, 10%) !default;
 $mermaid-fg-color--lightest: lighten($body-color, 20%) !default;
 $mermaid-font-family: $font-family-sans-serif !default;
+$mermaid-font-weight: $font-weight-base !default;
 $mermaid-label-bg-color: $body-bg !default;
 $mermaid-label-fg-color: $primary !default;
 $mermaid-node-bg-color: rgba($primary, 0.1) !default;

diff --git a/src/resources/formats/html/mermaid/embed-mermaid.css b/src/resources/formats/html/mermaid/embed-mermaid.css
@@ -5,6 +5,13 @@
 
    (Quarto doesn't control this: mermaid does textual substitution in the
    CSS you pass them. So you can't just pass a URL to a CSS file.)
+
+   we currently use https://www.npmjs.com/package/css-minify to minify
+
+   $ deno
+   > import m from "npm:css-minify"
+   > let t = Deno.readTextFileSync("src/resources/formats/html/mermaid/embed-mermaid.css")
+   > await m(t)
 */
 
 .label text {
@@ -28,6 +35,7 @@ marker {
 .label {
   color: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 .label foreignObject {
   line-height: normal;
@@ -61,6 +69,7 @@ marker {
 .cluster span {
   color: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 defs #flowchart-circleEnd,
 defs #flowchart-circleStart,
@@ -78,6 +87,7 @@ g.classGroup rect {
 g.classGroup text {
   fill: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 .classLabel .box {
   fill: var(--mermaid-label-bg-color);
@@ -87,6 +97,7 @@ g.classGroup text {
 .classLabel .label {
   fill: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 .node .divider {
   stroke: var(--mermaid-node-fg-color);
@@ -97,6 +108,7 @@ g.classGroup text {
 .cardinality {
   fill: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 .cardinality text {
   fill: inherit !important;
@@ -122,13 +134,15 @@ g.stateGroup rect {
 g.stateGroup .state-title {
   fill: var(--mermaid-label-fg-color) !important;
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 g.stateGroup .composit {
   fill: var(--mermaid-label-bg-color);
 }
 .nodeLabel {
   color: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 .node circle.state-end,
 .node circle.state-start,
@@ -173,6 +187,7 @@ defs #statediagram-barbEnd {
 .entityLabel {
   fill: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 .relationshipLabelBox {
   fill: var(--mermaid-label-bg-color);
@@ -207,6 +222,7 @@ defs #ZERO_OR_MORE_START circle {
 text.actor > tspan {
   fill: var(--mermaid-label-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
 line {
   stroke: var(--mermaid-fg-color--lighter);
@@ -221,6 +237,7 @@ line {
   fill: var(--mermaid-edge-color);
   stroke: none;
   font-family: var(--mermaid-font-family) !important;
+  font-weight: var(--mermaid-font-weight) !important;
 }
 .noteText > tspan {
   fill: #000;
@@ -243,4 +260,5 @@ line {
 .labelText > span {
   fill: var(--mermaid-node-fg-color);
   font-family: var(--mermaid-font-family);
+  font-weight: var(--mermaid-font-weight);
 }
diff --git a/src/resources/formats/html/mermaid/mermaid-init.js b/src/resources/formats/html/mermaid/mermaid-init.js
@@ -31,7 +31,7 @@ const mermaidOpts = {
 // Copyright (c) 2016-2022 Martin Donath <[email protected]>
 
 const defaultCSS =
-  '.label text {fill: var(--mermaid-fg-color);}.node circle, .node ellipse, .node path, .node polygon, .node rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}marker {fill: var(--mermaid-edge-color) !important;}.edgeLabel .label rect {fill: #0000;}.label {color: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.label foreignObject {line-height: normal;overflow: visible;}.label div .edgeLabel {color: var(--mermaid-label-fg-color);}.edgeLabel, .edgeLabel rect, .label div .edgeLabel {background-color: var(--mermaid-label-bg-color);}.edgeLabel, .edgeLabel rect {fill: var(--mermaid-label-bg-color);color: var(--mermaid-edge-color);}.edgePath .path, .flowchart-link {stroke: var(--mermaid-edge-color);}.edgePath .arrowheadPath {fill: var(--mermaid-edge-color);stroke: none;}.cluster rect {fill: var(--mermaid-fg-color--lightest);stroke: var(--mermaid-fg-color--lighter);}.cluster span {color: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}defs #flowchart-circleEnd, defs #flowchart-circleStart, defs #flowchart-crossEnd, defs #flowchart-crossStart, defs #flowchart-pointEnd, defs #flowchart-pointStart {stroke: none;}g.classGroup line, g.classGroup rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}g.classGroup text {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.classLabel .box {fill: var(--mermaid-label-bg-color);background-color: var(--mermaid-label-bg-color);opacity: 1;}.classLabel .label {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.node .divider {stroke: var(--mermaid-node-fg-color);}.relation {stroke: var(--mermaid-edge-color);}.cardinality {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.cardinality text {fill: inherit !important;}defs #classDiagram-compositionEnd, defs #classDiagram-compositionStart, defs #classDiagram-dependencyEnd, defs #classDiagram-dependencyStart, defs #classDiagram-extensionEnd, defs #classDiagram-extensionStart {fill: var(--mermaid-edge-color) !important;stroke: var(--mermaid-edge-color) !important;}defs #classDiagram-aggregationEnd, defs #classDiagram-aggregationStart {fill: var(--mermaid-label-bg-color) !important;stroke: var(--mermaid-edge-color) !important;}g.stateGroup rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}g.stateGroup .state-title {fill: var(--mermaid-label-fg-color) !important;font-family: var(--mermaid-font-family);}g.stateGroup .composit {fill: var(--mermaid-label-bg-color);}.nodeLabel {color: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.node circle.state-end, .node circle.state-start, .start-state {fill: var(--mermaid-edge-color);stroke: none;}.end-state-inner, .end-state-outer {fill: var(--mermaid-edge-color);}.end-state-inner, .node circle.state-end {stroke: var(--mermaid-label-bg-color);}.transition {stroke: var(--mermaid-edge-color);}[id^="state-fork"] rect, [id^="state-join"] rect {fill: var(--mermaid-edge-color) !important;stroke: none !important;}.statediagram-cluster.statediagram-cluster .inner {fill: var(--mermaid-bg-color);}.statediagram-cluster rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}.statediagram-state rect.divider {fill: var(--mermaid-fg-color--lightest);stroke: var(--mermaid-fg-color--lighter);}defs #statediagram-barbEnd {stroke: var(--mermaid-edge-color);}.entityBox {fill: var(--mermaid-label-bg-color);stroke: var(--mermaid-node-fg-color);}.entityLabel {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.relationshipLabelBox {fill: var(--mermaid-label-bg-color);fill-opacity: 1;background-color: var(--mermaid-label-bg-color);opacity: 1;}.relationshipLabel {fill: var(--mermaid-label-fg-color);}.relationshipLine {stroke: var(--mermaid-edge-color);}defs #ONE_OR_MORE_END *, defs #ONE_OR_MORE_START *, defs #ONLY_ONE_END *, defs #ONLY_ONE_START *, defs #ZERO_OR_MORE_END *, defs #ZERO_OR_MORE_START *, defs #ZERO_OR_ONE_END *, defs #ZERO_OR_ONE_START * {stroke: var(--mermaid-edge-color) !important;}.actor, defs #ZERO_OR_MORE_END circle, defs #ZERO_OR_MORE_START circle {fill: var(--mermaid-label-bg-color);}.actor {stroke: var(--mermaid-node-fg-color);}text.actor > tspan {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}line {stroke: var(--mermaid-fg-color--lighter);}.messageLine0, .messageLine1 {stroke: var(--mermaid-edge-color);}.loopText > tspan, .messageText, .noteText > tspan {fill: var(--mermaid-edge-color);stroke: none;font-family: var(--mermaid-font-family) !important;}.noteText > tspan {fill: #000;}#arrowhead path {fill: var(--mermaid-edge-color);stroke: none;}.loopLine {stroke: var(--mermaid-node-fg-color);}.labelBox, .loopLine {fill: var(--mermaid-node-bg-color);}.labelBox {stroke: none;}.labelText, .labelText > span {fill: var(--mermaid-node-fg-color);font-family: var(--mermaid-font-family);}';
+  ".label text{fill:var(--mermaid-fg-color)}.node circle,.node ellipse,.node path,.node polygon,.node rect{fill:var(--mermaid-node-bg-color);stroke:var(--mermaid-node-fg-color)}marker{fill:var(--mermaid-edge-color)!important}.edgeLabel .label rect{fill:#0000}.label{color:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}.label foreignObject{line-height:normal;overflow:visible}.label div .edgeLabel{color:var(--mermaid-label-fg-color)}.edgeLabel,.edgeLabel rect,.label div .edgeLabel{background-color:var(--mermaid-label-bg-color)}.edgeLabel,.edgeLabel rect{fill:var(--mermaid-label-bg-color);color:var(--mermaid-edge-color)}.edgePath .path,.flowchart-link{stroke:var(--mermaid-edge-color)}.edgePath .arrowheadPath{fill:var(--mermaid-edge-color);stroke:none}.cluster rect{fill:var(--mermaid-fg-color--lightest);stroke:var(--mermaid-fg-color--lighter)}.cluster span{color:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}defs #flowchart-circleEnd,defs #flowchart-circleStart,defs #flowchart-crossEnd,defs #flowchart-crossStart,defs #flowchart-pointEnd,defs #flowchart-pointStart{stroke:none}g.classGroup line,g.classGroup rect{fill:var(--mermaid-node-bg-color);stroke:var(--mermaid-node-fg-color)}g.classGroup text{fill:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}.classLabel .box{fill:var(--mermaid-label-bg-color);background-color:var(--mermaid-label-bg-color);opacity:1}.classLabel .label{fill:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}.node .divider{stroke:var(--mermaid-node-fg-color)}.relation{stroke:var(--mermaid-edge-color)}.cardinality{fill:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}.cardinality text{fill:inherit!important}defs #classDiagram-compositionEnd,defs #classDiagram-compositionStart,defs #classDiagram-dependencyEnd,defs #classDiagram-dependencyStart,defs #classDiagram-extensionEnd,defs #classDiagram-extensionStart{fill:var(--mermaid-edge-color)!important;stroke:var(--mermaid-edge-color)!important}defs #classDiagram-aggregationEnd,defs #classDiagram-aggregationStart{fill:var(--mermaid-label-bg-color)!important;stroke:var(--mermaid-edge-color)!important}g.stateGroup rect{fill:var(--mermaid-node-bg-color);stroke:var(--mermaid-node-fg-color)}g.stateGroup .state-title{fill:var(--mermaid-label-fg-color)!important;font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}g.stateGroup .composit{fill:var(--mermaid-label-bg-color)}.nodeLabel{color:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}.node circle.state-end,.node circle.state-start,.start-state{fill:var(--mermaid-edge-color);stroke:none}.end-state-inner,.end-state-outer{fill:var(--mermaid-edge-color)}.end-state-inner,.node circle.state-end{stroke:var(--mermaid-label-bg-color)}.transition{stroke:var(--mermaid-edge-color)}[id^=state-fork] rect,[id^=state-join] rect{fill:var(--mermaid-edge-color)!important;stroke:none!important}.statediagram-cluster.statediagram-cluster .inner{fill:var(--mermaid-bg-color)}.statediagram-cluster rect{fill:var(--mermaid-node-bg-color);stroke:var(--mermaid-node-fg-color)}.statediagram-state rect.divider{fill:var(--mermaid-fg-color--lightest);stroke:var(--mermaid-fg-color--lighter)}defs #statediagram-barbEnd{stroke:var(--mermaid-edge-color)}.entityBox{fill:var(--mermaid-label-bg-color);stroke:var(--mermaid-node-fg-color)}.entityLabel{fill:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}.relationshipLabelBox{fill:var(--mermaid-label-bg-color);fill-opacity:1;background-color:var(--mermaid-label-bg-color);opacity:1}.relationshipLabel{fill:var(--mermaid-label-fg-color)}.relationshipLine{stroke:var(--mermaid-edge-color)}defs #ONE_OR_MORE_END *,defs #ONE_OR_MORE_START *,defs #ONLY_ONE_END *,defs #ONLY_ONE_START *,defs #ZERO_OR_MORE_END *,defs #ZERO_OR_MORE_START *,defs #ZERO_OR_ONE_END *,defs #ZERO_OR_ONE_START *{stroke:var(--mermaid-edge-color)!important}.actor,defs #ZERO_OR_MORE_END circle,defs #ZERO_OR_MORE_START circle{fill:var(--mermaid-label-bg-color)}.actor{stroke:var(--mermaid-node-fg-color)}text.actor>tspan{fill:var(--mermaid-label-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}line{stroke:var(--mermaid-fg-color--lighter)}.messageLine0,.messageLine1{stroke:var(--mermaid-edge-color)}.loopText>tspan,.messageText,.noteText>tspan{fill:var(--mermaid-edge-color);stroke:none;font-family:var(--mermaid-font-family)!important;font-weight:var(--mermaid-font-weight)!important}.noteText>tspan{fill:#000}#arrowhead path{fill:var(--mermaid-edge-color);stroke:none}.loopLine{stroke:var(--mermaid-node-fg-color)}.labelBox,.loopLine{fill:var(--mermaid-node-bg-color)}.labelBox{stroke:none}.labelText,.labelText>span{fill:var(--mermaid-node-fg-color);font-family:var(--mermaid-font-family);font-weight:var(--mermaid-font-weight)}";
 
 const mermaidThemeEl = document.querySelector('meta[name="mermaid-theme"]');
 if (mermaidThemeEl) {