Skip to content

Commit 8851f59

Browse files
cscheidcscheid
authored
Merge pull request #11307 from quarto-dev/feature/mermaid-brand
brand,mermaid - support font family and weight forwarding
2 parents a1cfb03 + 0d79e25 commit 8851f59

4 files changed

Lines changed: 24 additions & 2 deletions

File tree

‎src/core/sass/brand.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,9 @@ const brandTypographyBundle = (
464464
["line-height", "presentation-line-height"],
465465
// TBD?
466466

467+
// mermaid
468+
["family", "mermaid-font-family"],
469+
["weight", "mermaid-font-weight"],
467470
// ["style", "font-style-base"],
468471
// ["weight", "font-weight-base"],
469472
],

‎src/resources/formats/html/_quarto-rules.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -592,7 +592,6 @@ div.ansi-escaped-output {
592592
}
593593
}
594594

595-
596595
/* rules to support GT table styling */
597596
table.gt_table {
598597
color: var(--quarto-body-color);
@@ -701,6 +700,7 @@ $body-bg: #fff !default;
701700
$primary: #468 !default;
702701
$secondary: #999 !default;
703702
$font-family-sans-serif: sans-serif !default;
703+
$font-weight-base: 400 !default;
704704

705705
/* SCSS variables
706706
@@ -715,6 +715,7 @@ $mermaid-fg-color: $body-color !default;
715715
$mermaid-fg-color--lighter: lighten($body-color, 10%) !default;
716716
$mermaid-fg-color--lightest: lighten($body-color, 20%) !default;
717717
$mermaid-font-family: $font-family-sans-serif !default;
718+
$mermaid-font-weight: $font-weight-base !default;
718719
$mermaid-label-bg-color: $body-bg !default;
719720
$mermaid-label-fg-color: $primary !default;
720721
$mermaid-node-bg-color: rgba($primary, 0.1) !default;

‎src/resources/formats/html/mermaid/embed-mermaid.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
66
(Quarto doesn't control this: mermaid does textual substitution in the
77
CSS you pass them. So you can't just pass a URL to a CSS file.)
8+
9+
we currently use https://www.npmjs.com/package/css-minify to minify
10+
11+
$ deno
12+
> import m from "npm:css-minify"
13+
> let t = Deno.readTextFileSync("src/resources/formats/html/mermaid/embed-mermaid.css")
14+
> await m(t)
815
*/
916

1017
.label text {
@@ -28,6 +35,7 @@ marker {
2835
.label {
2936
color: var(--mermaid-label-fg-color);
3037
font-family: var(--mermaid-font-family);
38+
font-weight: var(--mermaid-font-weight);
3139
}
3240
.label foreignObject {
3341
line-height: normal;
@@ -61,6 +69,7 @@ marker {
6169
.cluster span {
6270
color: var(--mermaid-label-fg-color);
6371
font-family: var(--mermaid-font-family);
72+
font-weight: var(--mermaid-font-weight);
6473
}
6574
defs #flowchart-circleEnd,
6675
defs #flowchart-circleStart,
@@ -78,6 +87,7 @@ g.classGroup rect {
7887
g.classGroup text {
7988
fill: var(--mermaid-label-fg-color);
8089
font-family: var(--mermaid-font-family);
90+
font-weight: var(--mermaid-font-weight);
8191
}
8292
.classLabel .box {
8393
fill: var(--mermaid-label-bg-color);
@@ -87,6 +97,7 @@ g.classGroup text {
8797
.classLabel .label {
8898
fill: var(--mermaid-label-fg-color);
8999
font-family: var(--mermaid-font-family);
100+
font-weight: var(--mermaid-font-weight);
90101
}
91102
.node .divider {
92103
stroke: var(--mermaid-node-fg-color);
@@ -97,6 +108,7 @@ g.classGroup text {
97108
.cardinality {
98109
fill: var(--mermaid-label-fg-color);
99110
font-family: var(--mermaid-font-family);
111+
font-weight: var(--mermaid-font-weight);
100112
}
101113
.cardinality text {
102114
fill: inherit !important;
@@ -122,13 +134,15 @@ g.stateGroup rect {
122134
g.stateGroup .state-title {
123135
fill: var(--mermaid-label-fg-color) !important;
124136
font-family: var(--mermaid-font-family);
137+
font-weight: var(--mermaid-font-weight);
125138
}
126139
g.stateGroup .composit {
127140
fill: var(--mermaid-label-bg-color);
128141
}
129142
.nodeLabel {
130143
color: var(--mermaid-label-fg-color);
131144
font-family: var(--mermaid-font-family);
145+
font-weight: var(--mermaid-font-weight);
132146
}
133147
.node circle.state-end,
134148
.node circle.state-start,
@@ -173,6 +187,7 @@ defs #statediagram-barbEnd {
173187
.entityLabel {
174188
fill: var(--mermaid-label-fg-color);
175189
font-family: var(--mermaid-font-family);
190+
font-weight: var(--mermaid-font-weight);
176191
}
177192
.relationshipLabelBox {
178193
fill: var(--mermaid-label-bg-color);
@@ -207,6 +222,7 @@ defs #ZERO_OR_MORE_START circle {
207222
text.actor > tspan {
208223
fill: var(--mermaid-label-fg-color);
209224
font-family: var(--mermaid-font-family);
225+
font-weight: var(--mermaid-font-weight);
210226
}
211227
line {
212228
stroke: var(--mermaid-fg-color--lighter);
@@ -221,6 +237,7 @@ line {
221237
fill: var(--mermaid-edge-color);
222238
stroke: none;
223239
font-family: var(--mermaid-font-family) !important;
240+
font-weight: var(--mermaid-font-weight) !important;
224241
}
225242
.noteText > tspan {
226243
fill: #000;
@@ -243,4 +260,5 @@ line {
243260
.labelText > span {
244261
fill: var(--mermaid-node-fg-color);
245262
font-family: var(--mermaid-font-family);
263+
font-weight: var(--mermaid-font-weight);
246264
}

‎src/resources/formats/html/mermaid/mermaid-init.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const mermaidOpts = {
3131
// Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
3232

3333
const defaultCSS =
34-
'.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);}';
34+
".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)}";
3535

3636
const mermaidThemeEl = document.querySelector('meta[name="mermaid-theme"]');
3737
if (mermaidThemeEl) {

0 commit comments

Comments
 (0)