Skip to content

Commit 1d92caa

Browse files
cscheidcscheid
committed
quarto diagram scss for reveal
1 parent f4786f4 commit 1d92caa

10 files changed

Lines changed: 247 additions & 0 deletions

File tree

‎src/resources/formats/revealjs/themes/beige.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,32 @@ $presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
2525
// code blocks
2626
$code-block-bg: transparent !default;
2727

28+
// Quarto diagrams
29+
30+
$mermaid-body-color: #000;
31+
$mermaid-bg-color: $body-bg;
32+
$primary: $body-color;
33+
$secondary: $link-color;
34+
35+
/* SCSS variables for mermaid diagrams
36+
37+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
38+
39+
Make sure to update the docs if you change these. */
40+
$mermaid-bg-color: $mermaid-bg-color;
41+
$mermaid-edge-color: darken($secondary, 10%);
42+
$mermaid-node-fg-color: $mermaid-body-color;
43+
$mermaid-fg-color: $mermaid-body-color;
44+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
45+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
46+
$mermaid-font-family: sans-serif;
47+
$mermaid-label-bg-color: $mermaid-bg-color;
48+
$mermaid-label-fg-color: $primary;
49+
$mermaid-node-bg-color: rgba($primary, 0.1);
50+
$mermaid-node-fg-color: $primary;
51+
52+
53+
2854
/*-- scss:mixins --*/
2955

3056
@mixin bodyBackground() {

‎src/resources/formats/revealjs/themes/blood.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,30 @@ $presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
2525
0 20px 20px rgba(0, 0, 0, 0.15);
2626
$presentation-heading-text-transform: uppercase !default;
2727

28+
// Quarto diagrams
29+
30+
$mermaid-body-color: #000;
31+
$mermaid-bg-color: $body-bg;
32+
$primary: $body-color;
33+
$secondary: $link-color;
34+
35+
/* SCSS variables for mermaid diagrams
36+
37+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
38+
39+
Make sure to update the docs if you change these. */
40+
$mermaid-bg-color: $mermaid-bg-color;
41+
$mermaid-edge-color: darken($secondary, 10%);
42+
$mermaid-node-fg-color: $mermaid-body-color;
43+
$mermaid-fg-color: $mermaid-body-color;
44+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
45+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
46+
$mermaid-font-family: sans-serif;
47+
$mermaid-label-bg-color: $mermaid-bg-color;
48+
$mermaid-label-fg-color: $primary;
49+
$mermaid-node-bg-color: rgba($primary, 0.1);
50+
$mermaid-node-fg-color: $primary;
51+
2852
/*-- scss:rules --*/
2953

3054
.reveal p {

‎src/resources/formats/revealjs/themes/dark.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,30 @@ $body-bg: #191919 !default;
44
$body-color: #fff !default;
55
$link-color: #42affa !default;
66
$input-panel-bg: rgba(233, 236, 239, 0.2) !default;
7+
8+
// Quarto diagrams
9+
10+
$mermaid-body-color: #000;
11+
$mermaid-bg-color: $body-bg;
12+
$primary: $body-color;
13+
$secondary: $link-color;
14+
15+
/* SCSS variables for mermaid diagrams
16+
17+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
18+
19+
Make sure to update the docs if you change these. */
20+
$mermaid-bg-color: $mermaid-bg-color;
21+
$mermaid-edge-color: darken($secondary, 10%);
22+
$mermaid-node-fg-color: $mermaid-body-color;
23+
$mermaid-fg-color: $mermaid-body-color;
24+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
25+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
26+
$mermaid-font-family: sans-serif;
27+
$mermaid-label-bg-color: $mermaid-bg-color;
28+
$mermaid-label-fg-color: $primary;
29+
$mermaid-node-bg-color: rgba($primary, 0.1);
30+
$mermaid-node-fg-color: $primary;
31+
32+
33+

‎src/resources/formats/revealjs/themes/league.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,31 @@ $presentation-heading-text-transform: uppercase !default;
2727
// code blocks
2828
$code-block-bg: transparent !default;
2929

30+
// Quarto diagrams
31+
32+
$mermaid-body-color: #000;
33+
$mermaid-bg-color: $body-bg;
34+
$primary: $body-color;
35+
$secondary: $link-color;
36+
37+
/* SCSS variables for mermaid diagrams
38+
39+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
40+
41+
Make sure to update the docs if you change these. */
42+
$mermaid-bg-color: $mermaid-bg-color;
43+
$mermaid-edge-color: darken($secondary, 10%);
44+
$mermaid-node-fg-color: $mermaid-body-color;
45+
$mermaid-fg-color: $mermaid-body-color;
46+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
47+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
48+
$mermaid-label-bg-color: $mermaid-bg-color;
49+
$mermaid-label-fg-color: $primary;
50+
$mermaid-node-bg-color: rgba($primary, 0.1);
51+
$mermaid-node-fg-color: $primary;
52+
53+
54+
3055
/*-- scss:mixins --*/
3156

3257
// Background generator

‎src/resources/formats/revealjs/themes/moon.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,30 @@ $presentation-heading-font: "League Gothic", sans-serif !default;
1919
$presentation-heading-color: #eee8d5 !default;
2020
$presentation-heading-text-transform: uppercase !default;
2121

22+
// Quarto diagrams
23+
24+
$mermaid-body-color: #000;
25+
$mermaid-bg-color: $body-bg;
26+
$primary: $body-color;
27+
$secondary: $link-color;
28+
29+
/* SCSS variables for mermaid diagrams
30+
31+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
32+
33+
Make sure to update the docs if you change these. */
34+
$mermaid-bg-color: $mermaid-bg-color;
35+
$mermaid-edge-color: darken($secondary, 10%);
36+
$mermaid-node-fg-color: $mermaid-body-color;
37+
$mermaid-fg-color: $mermaid-body-color;
38+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
39+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
40+
$mermaid-label-bg-color: $mermaid-bg-color;
41+
$mermaid-label-fg-color: $primary;
42+
$mermaid-node-bg-color: rgba($primary, 0.1);
43+
$mermaid-node-fg-color: $primary;
44+
45+
2246
/*-- scss:rules --*/
2347

2448
html * {

‎src/resources/formats/revealjs/themes/night.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,26 @@ $presentation-heading-letter-spacing: -0.03em;
1919

2020
// code blocks
2121
$code-block-border-color: rgba(233, 236, 239, 0.5) !default;
22+
23+
// Quarto diagrams
24+
25+
$mermaid-body-color: #000;
26+
$mermaid-bg-color: $body-bg;
27+
$primary: $body-color;
28+
$secondary: $link-color;
29+
30+
/* SCSS variables for mermaid diagrams
31+
32+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
33+
34+
Make sure to update the docs if you change these. */
35+
$mermaid-bg-color: $mermaid-bg-color;
36+
$mermaid-edge-color: darken($secondary, 10%);
37+
$mermaid-node-fg-color: $mermaid-body-color;
38+
$mermaid-fg-color: $mermaid-body-color;
39+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
40+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
41+
$mermaid-label-bg-color: $mermaid-bg-color;
42+
$mermaid-label-fg-color: $primary;
43+
$mermaid-node-bg-color: rgba($primary, 0.1);
44+
$mermaid-node-fg-color: $primary;

‎src/resources/formats/revealjs/themes/serif.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,30 @@ $presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino,
1515
FreeSerif, serif !default;
1616
$presentation-heading-color: #383d3d !default;
1717

18+
// Quarto diagrams
19+
20+
$mermaid-body-color: #000;
21+
$mermaid-bg-color: $body-bg;
22+
$primary: $body-color;
23+
$secondary: $link-color;
24+
25+
/* SCSS variables for mermaid diagrams
26+
27+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
28+
29+
Make sure to update the docs if you change these. */
30+
$mermaid-bg-color: $mermaid-bg-color;
31+
$mermaid-edge-color: darken($secondary, 10%);
32+
$mermaid-node-fg-color: $mermaid-body-color;
33+
$mermaid-fg-color: $mermaid-body-color;
34+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
35+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
36+
$mermaid-label-bg-color: $mermaid-bg-color;
37+
$mermaid-label-fg-color: $primary;
38+
$mermaid-node-bg-color: rgba($primary, 0.1);
39+
$mermaid-node-fg-color: $primary;
40+
41+
1842
/*-- scss:rules --*/
1943

2044
.reveal a {

‎src/resources/formats/revealjs/themes/simple.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,28 @@ $selection-bg: rgba(0, 0, 0, 0.99);
1414

1515
// headings
1616
$presentation-heading-font: "News Cycle", sans-serif !default;
17+
18+
// Quarto diagrams
19+
20+
$mermaid-body-color: #000;
21+
$mermaid-bg-color: $body-bg;
22+
$primary: $body-color;
23+
$secondary: $link-color;
24+
25+
/* SCSS variables for mermaid diagrams
26+
27+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
28+
29+
Make sure to update the docs if you change these. */
30+
$mermaid-bg-color: $mermaid-bg-color;
31+
$mermaid-edge-color: darken($secondary, 10%);
32+
$mermaid-node-fg-color: $mermaid-body-color;
33+
$mermaid-fg-color: $mermaid-body-color;
34+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
35+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
36+
$mermaid-label-bg-color: $mermaid-bg-color;
37+
$mermaid-label-fg-color: $primary;
38+
$mermaid-node-bg-color: rgba($primary, 0.1);
39+
$mermaid-node-fg-color: $primary;
40+
41+

‎src/resources/formats/revealjs/themes/sky.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,29 @@ $presentation-heading-letter-spacing: -0.08em;
2222
$code-block-border-color: lighten($link-color, 30%) !default;
2323
$code-block-bg: transparent !default;
2424

25+
// Quarto diagrams
26+
27+
$mermaid-body-color: #000;
28+
$mermaid-bg-color: $body-bg;
29+
$primary: $body-color;
30+
$secondary: $link-color;
31+
32+
/* SCSS variables for mermaid diagrams
33+
34+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
35+
36+
Make sure to update the docs if you change these. */
37+
$mermaid-bg-color: $mermaid-bg-color;
38+
$mermaid-edge-color: darken($secondary, 10%);
39+
$mermaid-node-fg-color: $mermaid-body-color;
40+
$mermaid-fg-color: $mermaid-body-color;
41+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
42+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
43+
$mermaid-label-bg-color: mix($primary, #add9e4, 10%);
44+
$mermaid-label-fg-color: $primary;
45+
$mermaid-node-bg-color: rgba($primary, 0.1);
46+
$mermaid-node-fg-color: $primary;
47+
2548
/*-- scss:mixins --*/
2649

2750
// Background generator

‎src/resources/formats/revealjs/themes/solarized.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,32 @@ $presentation-heading-text-transform: uppercase !default;
2020
// code blocks
2121
$code-block-border-color: #93a1a1 !default;
2222

23+
// Quarto diagrams
24+
25+
$mermaid-body-color: #000;
26+
$mermaid-bg-color: $body-bg;
27+
$primary: $body-color;
28+
$secondary: $link-color;
29+
30+
/* SCSS variables for mermaid diagrams
31+
32+
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
33+
34+
Make sure to update the docs if you change these. */
35+
$mermaid-bg-color: $mermaid-bg-color;
36+
$mermaid-edge-color: darken($secondary, 10%);
37+
$mermaid-node-fg-color: $mermaid-body-color;
38+
$mermaid-fg-color: $mermaid-body-color;
39+
$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%);
40+
$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%);
41+
$mermaid-label-bg-color: $mermaid-bg-color;
42+
$mermaid-label-fg-color: $primary;
43+
$mermaid-node-bg-color: rgba($primary, 0.1);
44+
$mermaid-node-fg-color: $primary;
45+
46+
47+
48+
2349
/*-- scss:rules --*/
2450

2551
html * {

0 commit comments

Comments
 (0)