diff --git a/news/changelog-1.5.md b/news/changelog-1.5.md index 7acb3757b54..576d9689904 100644 --- a/news/changelog-1.5.md +++ b/news/changelog-1.5.md @@ -101,6 +101,10 @@ All changes included in 1.5: - ([#8607](https://github.com/quarto-dev/quarto-cli/issues/8607)): Ensure we properly use the `description` attribute if it is present. +## Mermaid diagrams + +- ([#9503](https://github.com/quarto-dev/quarto-cli/pull/9503)): Improve bootswatch themes to play well with Mermaid flowcharts. + ## Filters - ([#8417](https://github.com/quarto-dev/quarto-cli/issues/8417)): Maintain a single AST element in the output cells when parsing HTML from RawBlock elements. diff --git a/src/format/html/format-html-scss.ts b/src/format/html/format-html-scss.ts index ea88ec5dfbc..8971900e3d9 100644 --- a/src/format/html/format-html-scss.ts +++ b/src/format/html/format-html-scss.ts @@ -42,6 +42,7 @@ import { kBootstrapDependencyName, quartoBootstrapCustomizationLayer, quartoBootstrapFunctions, + quartoBootstrapMermaidDefaults, quartoBootstrapMixins, quartoBootstrapRules, quartoCodeFilenameRules, @@ -249,6 +250,9 @@ function layerTheme( // If no themes were provided, we still should inject our customization if (!injectedCustomization) { layers.unshift(quartoBootstrapCustomizationLayer()); + // mermaid defaults are provided by built-in themes but not by the defaults + // so we need to inject extras + layers.unshift(quartoBootstrapMermaidDefaults()); } return { layers, loadPaths }; } @@ -317,9 +321,9 @@ export function resolveTextHighlightingLayer( if (themeDescriptor) { const readTextColor = (name: string) => { const textStyles = themeDescriptor.json["text-styles"]; - if (textStyles && typeof (textStyles) === "object") { + if (textStyles && typeof textStyles === "object") { const commentColor = (textStyles as Record)[name]; - if (commentColor && typeof (commentColor) === "object") { + if (commentColor && typeof commentColor === "object") { const textColor = (commentColor as Record)["text-color"]; return textColor; @@ -368,19 +372,19 @@ function resolveThemeLayer( let theme = undefined; let defaultDark = false; - if (typeof (themes) === "string") { + if (typeof themes === "string") { // The themes is just a string theme = { light: [themes] }; } else if (Array.isArray(themes)) { // The themes is an array theme = { light: themes }; - } else if (typeof (themes) === "object") { + } else if (typeof themes === "object") { // The themes are an object - look at each key and // deal with them either as a string or a string[] const themeArr = (theme?: unknown): string[] => { const themes: string[] = []; if (theme) { - if (typeof (theme) === "string") { + if (typeof theme === "string") { themes.push(theme); } else if (Array.isArray(theme)) { themes.push(...theme); @@ -522,7 +526,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { const colorDefaults: string[] = []; const navbar = (metadata[kWebsite] as Metadata)?.[kSiteNavbar]; - if (navbar && typeof (navbar) === "object") { + if (navbar && typeof navbar === "object") { // Forward navbar background color const navbarBackground = (navbar as Record)[kBackground]; if (navbarBackground !== undefined) { @@ -532,9 +536,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { sassVariable( "navbar-bg", navbarBackground, - typeof (navbarBackground) === "string" - ? asBootstrapColor - : undefined, + typeof navbarBackground === "string" ? asBootstrapColor : undefined, ), ), ); @@ -549,9 +551,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { sassVariable( "navbar-fg", navbarForeground, - typeof (navbarForeground) === "string" - ? asBootstrapColor - : undefined, + typeof navbarForeground === "string" ? asBootstrapColor : undefined, ), ), ); @@ -575,7 +575,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { const sidebars = (metadata[kWebsite] as Metadata)?.[kSiteSidebar]; const sidebar = Array.isArray(sidebars) ? sidebars[0] - : typeof (sidebars) === "object" + : typeof sidebars === "object" ? (sidebars as Metadata) : undefined; @@ -589,7 +589,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { sassVariable( "sidebar-bg", sidebarBackground, - typeof (sidebarBackground) === "string" + typeof sidebarBackground === "string" ? asBootstrapColor : undefined, ), @@ -612,7 +612,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { sassVariable( "sidebar-fg", sidebarForeground, - typeof (sidebarForeground) === "string" + typeof sidebarForeground === "string" ? asBootstrapColor : undefined, ), @@ -640,7 +640,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { } const footer = (metadata[kWebsite] as Metadata)?.[kPageFooter] as Metadata; - if (footer !== undefined && typeof (footer) === "object") { + if (footer !== undefined && typeof footer === "object") { // Forward footer color const footerBg = footer[kBackground]; if (footerBg !== undefined) { @@ -650,7 +650,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { sassVariable( "footer-bg", footerBg, - typeof (footerBg) === "string" ? asBootstrapColor : undefined, + typeof footerBg === "string" ? asBootstrapColor : undefined, ), ), ); @@ -665,7 +665,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { sassVariable( "footer-fg", footerFg, - typeof (footerFg) === "string" ? asBootstrapColor : undefined, + typeof footerFg === "string" ? asBootstrapColor : undefined, ), ), ); @@ -689,7 +689,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { } // If the footer border is a color, set that - if (footerBorder !== undefined && typeof (footerBorder) === "string") { + if (footerBorder !== undefined && typeof footerBorder === "string") { resolveBootstrapColorDefault(footerBorder, colorDefaults); variables.push( outputVariable( @@ -704,7 +704,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { // Forward any footer color const footerColor = footer[kColor]; - if (footerColor && typeof (footerColor) === "string") { + if (footerColor && typeof footerColor === "string") { resolveBootstrapColorDefault(footerColor, colorDefaults); variables.push( outputVariable( @@ -729,7 +729,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { sassVariable( kCodeBorderLeft, codeblockLeftBorder, - typeof (codeblockLeftBorder) === "string" + typeof codeblockLeftBorder === "string" ? asBootstrapColor : undefined, ), @@ -746,7 +746,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => { variables.push(outputVariable(sassVariable( kCodeBlockBackground, codeblockBackground, - typeof (codeblockBackground) === "string" ? asBootstrapColor : undefined, + typeof codeblockBackground === "string" ? asBootstrapColor : undefined, ))); } @@ -775,7 +775,7 @@ function resolveBootstrapColorDefault(value: unknown, variables: string[]) { } function bootstrapColorDefault(value: unknown) { - if (typeof (value) === "string") { + if (typeof value === "string") { return bootstrapColorVars[value]; } } diff --git a/src/format/html/format-html-shared.ts b/src/format/html/format-html-shared.ts index d138428dbe8..1bfcafaad0a 100644 --- a/src/format/html/format-html-shared.ts +++ b/src/format/html/format-html-shared.ts @@ -229,6 +229,14 @@ export const quartoGlobalCssVariableRules = () => { /*! quarto-variables-end */ `; }; +export const quartoBootstrapMermaidDefaults = () => { + const path = formatResourcePath( + "html", + join("bootstrap", "_bootstrap-mermaid-defaults.scss"), + ); + return sassLayer(path); +}; + export const quartoBootstrapCustomizationLayer = () => { const path = formatResourcePath( "html", diff --git a/src/resources/formats/html/_quarto-rules.scss b/src/resources/formats/html/_quarto-rules.scss index 3df0e382af8..eb54fcbd7a9 100644 --- a/src/resources/formats/html/_quarto-rules.scss +++ b/src/resources/formats/html/_quarto-rules.scss @@ -690,32 +690,6 @@ input[type="checkbox"] { margin-right: 0.5ch; } -// Mermaid Theming -// if none come from theme, we need these -$body-color: #222 !default; -$body-bg: #fff !default; -$primary: #468 !default; -$secondary: #999 !default; -$font-family-sans-serif: sans-serif !default; - -/* SCSS variables - - These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd - - Make sure to update the docs if you change these. -*/ -$mermaid-bg-color: $body-bg !default; -$mermaid-edge-color: $secondary !default; -$mermaid-node-fg-color: $body-color !default; -$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-label-bg-color: $body-bg !default; -$mermaid-label-fg-color: $primary !default; -$mermaid-node-bg-color: rgba($primary, 0.1) !default; -$mermaid-node-fg-color: $primary !default; - /* CSS variables */ :root { --mermaid-bg-color: #{$mermaid-bg-color}; diff --git a/src/resources/formats/html/bootstrap/_bootstrap-mermaid-defaults.scss b/src/resources/formats/html/bootstrap/_bootstrap-mermaid-defaults.scss new file mode 100644 index 00000000000..b5e3de87dbc --- /dev/null +++ b/src/resources/formats/html/bootstrap/_bootstrap-mermaid-defaults.scss @@ -0,0 +1,23 @@ +/*-- scss:defaults --*/ + +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ +$mermaid-bg-color: #fff !default; +$mermaid-edge-color: lighten($mermaid-body-color, 50%) !default; +$mermaid-node-fg-color: $mermaid-body-color !default; +$mermaid-fg-color: $mermaid-body-color !default; +$mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; +$mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; +$mermaid-font-family: sans-serif !default; +$mermaid-label-bg-color: $mermaid-bg-color !default; +$mermaid-label-fg-color: $mermaid-body-color !default; +$mermaid-node-bg-color: rgba($mermaid-body-color, 0.1) !default; +$mermaid-node-fg-color: $mermaid-body-color !default; diff --git a/src/resources/formats/html/bootstrap/themes/cerulean.scss b/src/resources/formats/html/bootstrap/themes/cerulean.scss index 170861d3cd5..c766ec7708c 100644 --- a/src/resources/formats/html/bootstrap/themes/cerulean.scss +++ b/src/resources/formats/html/bootstrap/themes/cerulean.scss @@ -59,6 +59,24 @@ $dropdown-link-hover-bg: $primary !default; $navbar-dark-color: rgba($white, .8) !default; $navbar-dark-hover-color: $white !default; +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ +$mermaid-bg-color: #fff !default; +$mermaid-edge-color: darken($secondary, 20%) !default; +$mermaid-node-fg-color: $body-color !default; +$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: sans-serif !default; +$mermaid-label-bg-color: #fff !default; +$mermaid-label-fg-color: $primary !default; +$mermaid-node-bg-color: rgba($primary, 0.1) !default; +$mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/cosmo.scss b/src/resources/formats/html/bootstrap/themes/cosmo.scss index 7ef7b1080fc..57fd2a2a48f 100644 --- a/src/resources/formats/html/bootstrap/themes/cosmo.scss +++ b/src/resources/formats/html/bootstrap/themes/cosmo.scss @@ -67,7 +67,25 @@ $alert-border-width: 0 !default; $progress-height: .5rem !default; - +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: lighten($secondary, 20%) !default; + $mermaid-node-fg-color: $body-color !default; + $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: sans-serif !default; + $mermaid-label-bg-color: #fff !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/cyborg.scss b/src/resources/formats/html/bootstrap/themes/cyborg.scss index 6a1506c438d..dd287daa83b 100644 --- a/src/resources/formats/html/bootstrap/themes/cyborg.scss +++ b/src/resources/formats/html/bootstrap/themes/cyborg.scss @@ -190,6 +190,23 @@ $btn-close-hover-opacity: 1 !default; $pre-color: inherit !default; +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff; + $mermaid-edge-color: lighten($secondary, 20%); + $mermaid-node-fg-color: $body-color; + $mermaid-fg-color: $body-color; + $mermaid-fg-color--lighter: lighten($body-color, 10%); + $mermaid-fg-color--lightest: lighten($body-color, 20%); + $mermaid-font-family: sans-serif; + $mermaid-label-bg-color: #000; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/darkly.scss b/src/resources/formats/html/bootstrap/themes/darkly.scss index f14d9602955..1fd3e96330b 100644 --- a/src/resources/formats/html/bootstrap/themes/darkly.scss +++ b/src/resources/formats/html/bootstrap/themes/darkly.scss @@ -182,7 +182,25 @@ $btn-close-hover-opacity: 1 !default; $pre-color: inherit !default; - +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: lighten($secondary, 20%) !default; + $mermaid-node-fg-color: darken($body-color, 20%) !default; + $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: sans-serif !default; + $mermaid-label-bg-color: $body-bg !default; + $mermaid-label-fg-color: lighten($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/flatly.scss b/src/resources/formats/html/bootstrap/themes/flatly.scss index 13587d3b526..03fb1ac1b0c 100644 --- a/src/resources/formats/html/bootstrap/themes/flatly.scss +++ b/src/resources/formats/html/bootstrap/themes/flatly.scss @@ -119,7 +119,26 @@ $btn-close-color: $white !default; $btn-close-opacity: .4 !default; $btn-close-hover-opacity: 1 !default; - +$mermaid-primary: #888 !default; +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: darken($secondary, 20%) !default; + $mermaid-node-fg-color: $mermaid-primary !default; + $mermaid-fg-color: $mermaid-primary !default; + $mermaid-fg-color--lighter: lighten($mermaid-primary, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-primary, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: #fff !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/journal.scss b/src/resources/formats/html/bootstrap/themes/journal.scss index aa5fdfd68c9..01008f99914 100644 --- a/src/resources/formats/html/bootstrap/themes/journal.scss +++ b/src/resources/formats/html/bootstrap/themes/journal.scss @@ -58,7 +58,27 @@ $pagination-hover-color: $white !default; $pagination-hover-bg: $primary !default; $pagination-hover-border-color: $primary !default; - +// Quarto diagrams + +$mermaid-body-color: #000 !default; +$mermaid-body-bg: #fff !default; +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: $secondary !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-body-bg !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/litera.scss b/src/resources/formats/html/bootstrap/themes/litera.scss index 72414556cc5..dc756751fca 100644 --- a/src/resources/formats/html/bootstrap/themes/litera.scss +++ b/src/resources/formats/html/bootstrap/themes/litera.scss @@ -93,7 +93,27 @@ $badge-padding-x: 1.2em !default; $alert-border-width: 0 !default; - +// Quarto diagrams + +$mermaid-body-bg: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: $secondary !default; + $mermaid-node-fg-color: $body-color !default; + $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: sans-serif !default; + $mermaid-label-bg-color: $mermaid-body-bg !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/lumen.scss b/src/resources/formats/html/bootstrap/themes/lumen.scss index b8bab78a171..2d595c353c2 100644 --- a/src/resources/formats/html/bootstrap/themes/lumen.scss +++ b/src/resources/formats/html/bootstrap/themes/lumen.scss @@ -95,7 +95,28 @@ $btn-close-opacity: .4 !default; $btn-close-hover-opacity: 1 !default; - +// Quarto diagrams + +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 20%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/lux.scss b/src/resources/formats/html/bootstrap/themes/lux.scss index 00625f9cde0..f8a33405880 100644 --- a/src/resources/formats/html/bootstrap/themes/lux.scss +++ b/src/resources/formats/html/bootstrap/themes/lux.scss @@ -100,6 +100,25 @@ $pagination-border-color: transparent !default; $pagination-hover-border-color: $pagination-border-color !default; $pagination-disabled-border-color: $pagination-border-color !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 20%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/materia.scss b/src/resources/formats/html/bootstrap/themes/materia.scss index 1b8a3da56d5..5659d8630a9 100644 --- a/src/resources/formats/html/bootstrap/themes/materia.scss +++ b/src/resources/formats/html/bootstrap/themes/materia.scss @@ -121,6 +121,25 @@ $btn-focus-box-shadow: 0 0 0 2px mix($white, $black, 40%) !default; $input-box-shadow: inset 0 -1px 0 mix($white, $black, 86.7%) !default; $input-focus-box-shadow: inset 0 -2px 0 $primary !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 20%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/minty.scss b/src/resources/formats/html/bootstrap/themes/minty.scss index 84789a83501..6d5bd55cd36 100644 --- a/src/resources/formats/html/bootstrap/themes/minty.scss +++ b/src/resources/formats/html/bootstrap/themes/minty.scss @@ -99,6 +99,25 @@ $breadcrumb-active-color: $breadcrumb-divider-color !default; $breadcrumb-border-radius: .25rem !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: darken($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/morph.scss b/src/resources/formats/html/bootstrap/themes/morph.scss index ed2efcdbc4e..9e2680a965a 100644 --- a/src/resources/formats/html/bootstrap/themes/morph.scss +++ b/src/resources/formats/html/bootstrap/themes/morph.scss @@ -227,6 +227,25 @@ $breadcrumb-active-color: $link-color !default; $btn-close-color: $headings-color !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: $body-bg !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: darken($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/pulse.scss b/src/resources/formats/html/bootstrap/themes/pulse.scss index ec435be9c2e..48338c70162 100644 --- a/src/resources/formats/html/bootstrap/themes/pulse.scss +++ b/src/resources/formats/html/bootstrap/themes/pulse.scss @@ -89,6 +89,25 @@ $list-group-active-color: $white !default; $list-group-active-bg: $list-group-bg !default; $list-group-disabled-color: lighten($list-group-bg, 30%) !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: darken($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ @@ -174,7 +193,7 @@ $list-group-disabled-color: lighten($list-group-bg, 30%) !default; .nav-tabs { .nav-link, - .nav-link.active, { + .nav-link.active { border-width: 0 0 1px; } diff --git a/src/resources/formats/html/bootstrap/themes/quartz.scss b/src/resources/formats/html/bootstrap/themes/quartz.scss index 8b6190fc779..76b15ca0fa8 100644 --- a/src/resources/formats/html/bootstrap/themes/quartz.scss +++ b/src/resources/formats/html/bootstrap/themes/quartz.scss @@ -220,6 +220,25 @@ $breadcrumb-active-color: $white !default; $btn-close-color: $white !default; +$mermaid-body-color: rgba(255, 255, 255, 0.5) !default; +$mermaid-bg-color: rgba(255, 255, 255, 0.5) !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: darken($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/sandstone.scss b/src/resources/formats/html/bootstrap/themes/sandstone.scss index c97694ed581..ee5f075511f 100644 --- a/src/resources/formats/html/bootstrap/themes/sandstone.scss +++ b/src/resources/formats/html/bootstrap/themes/sandstone.scss @@ -133,6 +133,25 @@ $btn-close-color: $white !default; $btn-close-opacity: .8 !default; $btn-close-hover-opacity: 1 !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: darken($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/simplex.scss b/src/resources/formats/html/bootstrap/themes/simplex.scss index a4bc7272fed..03d7d2eebd0 100644 --- a/src/resources/formats/html/bootstrap/themes/simplex.scss +++ b/src/resources/formats/html/bootstrap/themes/simplex.scss @@ -101,6 +101,25 @@ $breadcrumb-padding-y: .375rem !default; $breadcrumb-padding-x: .75rem !default; $breadcrumb-border-radius: .25rem !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: darken($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/sketchy.scss b/src/resources/formats/html/bootstrap/themes/sketchy.scss index 0d01a32a675..78502be1a1b 100644 --- a/src/resources/formats/html/bootstrap/themes/sketchy.scss +++ b/src/resources/formats/html/bootstrap/themes/sketchy.scss @@ -154,6 +154,25 @@ $btn-close-opacity: 1 !default; $btn-close-hover-opacity: 1 !default; $btn-close-focus-shadow: none !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: darken($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/slate.scss b/src/resources/formats/html/bootstrap/themes/slate.scss index a9f1518ad1d..b7e29777f4c 100644 --- a/src/resources/formats/html/bootstrap/themes/slate.scss +++ b/src/resources/formats/html/bootstrap/themes/slate.scss @@ -195,6 +195,25 @@ $breadcrumb-border-radius: .25rem !default; $pre-color: inherit !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: $body-bg !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: lighten($primary, 40%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/solar.scss b/src/resources/formats/html/bootstrap/themes/solar.scss index f1ae9712703..60b2d40bf10 100644 --- a/src/resources/formats/html/bootstrap/themes/solar.scss +++ b/src/resources/formats/html/bootstrap/themes/solar.scss @@ -188,6 +188,25 @@ $btn-close-color: $white !default; $pre-color: inherit !default; +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-font-family: sans-serif; + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: lighten($primary, 40%); + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/spacelab.scss b/src/resources/formats/html/bootstrap/themes/spacelab.scss index eb22749cb63..ab309aef5ec 100644 --- a/src/resources/formats/html/bootstrap/themes/spacelab.scss +++ b/src/resources/formats/html/bootstrap/themes/spacelab.scss @@ -59,6 +59,25 @@ $headings-color: $gray-900 !default; $navbar-light-hover-color: $info !default; $navbar-light-active-color: $info !default; +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/superhero.scss b/src/resources/formats/html/bootstrap/themes/superhero.scss index 17070657623..d8d44f45dc6 100644 --- a/src/resources/formats/html/bootstrap/themes/superhero.scss +++ b/src/resources/formats/html/bootstrap/themes/superhero.scss @@ -198,7 +198,25 @@ $btn-close-hover-opacity: 1 !default; $pre-color: inherit !default; - +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: $secondary !default; + $mermaid-node-fg-color: $body-color !default; + $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: sans-serif !default; + $mermaid-label-bg-color: $body-bg !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/united.scss b/src/resources/formats/html/bootstrap/themes/united.scss index 8de77534eda..64963aae7fc 100644 --- a/src/resources/formats/html/bootstrap/themes/united.scss +++ b/src/resources/formats/html/bootstrap/themes/united.scss @@ -54,7 +54,25 @@ $font-family-sans-serif: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe $table-dark-bg: $dark !default; $table-dark-border-color: darken($dark, 5%) !default; - +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: $secondary !default; + $mermaid-node-fg-color: $body-color !default; + $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: sans-serif !default; + $mermaid-label-bg-color: #fff !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/vapor.scss b/src/resources/formats/html/bootstrap/themes/vapor.scss index 8f98e4944b0..218ec030fd1 100644 --- a/src/resources/formats/html/bootstrap/themes/vapor.scss +++ b/src/resources/formats/html/bootstrap/themes/vapor.scss @@ -170,7 +170,25 @@ $list-group-action-active-bg: $list-group-hover-bg !default; $breadcrumb-divider-color: $text-muted !default; $breadcrumb-active-color: $component-active-bg !default; - +// Quarto diagrams + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: #fff !default; + $mermaid-edge-color: $secondary !default; + $mermaid-node-fg-color: $body-color !default; + $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: sans-serif !default; + $mermaid-label-bg-color: $body-bg !default; + $mermaid-label-fg-color: lighten($primary, 20%) !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/yeti.scss b/src/resources/formats/html/bootstrap/themes/yeti.scss index 672927852bb..475196d5379 100644 --- a/src/resources/formats/html/bootstrap/themes/yeti.scss +++ b/src/resources/formats/html/bootstrap/themes/yeti.scss @@ -104,7 +104,28 @@ $btn-close-color: $gray-600 !default; $btn-close-opacity: .6 !default; $btn-close-hover-opacity: 1 !default; - +// Quarto diagrams + +$mermaid-body-color: #000 !default; +$mermaid-body-bg: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-body-bg !default; + $mermaid-edge-color: darken($secondary, 20%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-body-bg !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + /*-- scss:rules --*/ diff --git a/src/resources/formats/html/bootstrap/themes/zephyr.scss b/src/resources/formats/html/bootstrap/themes/zephyr.scss index 5b4644332db..3dbe4c9c817 100644 --- a/src/resources/formats/html/bootstrap/themes/zephyr.scss +++ b/src/resources/formats/html/bootstrap/themes/zephyr.scss @@ -154,6 +154,27 @@ $breadcrumb-padding-x: 1rem !default; $breadcrumb-divider: quote(">") !default; +// Quarto diagrams + +$mermaid-body-color: #000 !default; +$mermaid-body-bg: #fff !default; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-body-bg !default; + $mermaid-edge-color: darken($secondary, 20%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-body-bg !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; /*-- scss:rules --*/ diff --git a/src/resources/formats/html/mermaid/mermaid-init.js b/src/resources/formats/html/mermaid/mermaid-init.js index b726354c7d8..0ac09a7ed0c 100644 --- 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 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; stroke: 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);}'; const mermaidThemeEl = document.querySelector('meta[name="mermaid-theme"]'); if (mermaidThemeEl) { diff --git a/src/resources/formats/revealjs/themes/beige.scss b/src/resources/formats/revealjs/themes/beige.scss index 347a1a086ea..07e8a274b47 100644 --- a/src/resources/formats/revealjs/themes/beige.scss +++ b/src/resources/formats/revealjs/themes/beige.scss @@ -25,6 +25,32 @@ $presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, // code blocks $code-block-bg: transparent !default; +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-font-family: sans-serif; + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + + + /*-- scss:mixins --*/ @mixin bodyBackground() { diff --git a/src/resources/formats/revealjs/themes/blood.scss b/src/resources/formats/revealjs/themes/blood.scss index c8fc5494246..9558822940d 100644 --- a/src/resources/formats/revealjs/themes/blood.scss +++ b/src/resources/formats/revealjs/themes/blood.scss @@ -25,6 +25,30 @@ $presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 20px 20px rgba(0, 0, 0, 0.15); $presentation-heading-text-transform: uppercase !default; +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-font-family: sans-serif; + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + /*-- scss:rules --*/ .reveal p { diff --git a/src/resources/formats/revealjs/themes/dark.scss b/src/resources/formats/revealjs/themes/dark.scss index 24998ec3adb..cb31702bf6a 100644 --- a/src/resources/formats/revealjs/themes/dark.scss +++ b/src/resources/formats/revealjs/themes/dark.scss @@ -4,3 +4,30 @@ $body-bg: #191919 !default; $body-color: #fff !default; $link-color: #42affa !default; $input-panel-bg: rgba(233, 236, 239, 0.2) !default; + +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-font-family: sans-serif; + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + + + diff --git a/src/resources/formats/revealjs/themes/default.scss b/src/resources/formats/revealjs/themes/default.scss index 5094b6ff6e7..aac16930034 100644 --- a/src/resources/formats/revealjs/themes/default.scss +++ b/src/resources/formats/revealjs/themes/default.scss @@ -1 +1,26 @@ /*-- scss:defaults --*/ + +// Quarto diagrams + +$mermaid-body-color: #000 !default; +$mermaid-bg-color: #fff !default; +$primary: $mermaid-body-color !default; +$secondary: #2a76dd !default; // is this from --r-link-color in our default theme, but I don't know how to use css variables in scss :shrug: + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color !default; + $mermaid-edge-color: darken($secondary, 10%) !default; + $mermaid-node-fg-color: $mermaid-body-color !default; + $mermaid-fg-color: $mermaid-body-color !default; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%) !default; + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%) !default; + $mermaid-font-family: sans-serif !default; + $mermaid-label-bg-color: $mermaid-bg-color !default; + $mermaid-label-fg-color: $primary !default; + $mermaid-node-bg-color: rgba($primary, 0.1) !default; + $mermaid-node-fg-color: $primary !default; + diff --git a/src/resources/formats/revealjs/themes/league.scss b/src/resources/formats/revealjs/themes/league.scss index 8006340de94..754df46f536 100644 --- a/src/resources/formats/revealjs/themes/league.scss +++ b/src/resources/formats/revealjs/themes/league.scss @@ -27,6 +27,31 @@ $presentation-heading-text-transform: uppercase !default; // code blocks $code-block-bg: transparent !default; +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + + + /*-- scss:mixins --*/ // Background generator diff --git a/src/resources/formats/revealjs/themes/moon.scss b/src/resources/formats/revealjs/themes/moon.scss index fc6550b8d0b..a5fc2f973ce 100644 --- a/src/resources/formats/revealjs/themes/moon.scss +++ b/src/resources/formats/revealjs/themes/moon.scss @@ -19,6 +19,30 @@ $presentation-heading-font: "League Gothic", sans-serif !default; $presentation-heading-color: #eee8d5 !default; $presentation-heading-text-transform: uppercase !default; +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + + /*-- scss:rules --*/ html * { diff --git a/src/resources/formats/revealjs/themes/night.scss b/src/resources/formats/revealjs/themes/night.scss index 7ff7e28c113..7353370ac0a 100644 --- a/src/resources/formats/revealjs/themes/night.scss +++ b/src/resources/formats/revealjs/themes/night.scss @@ -19,3 +19,26 @@ $presentation-heading-letter-spacing: -0.03em; // code blocks $code-block-border-color: rgba(233, 236, 239, 0.5) !default; + +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; diff --git a/src/resources/formats/revealjs/themes/serif.scss b/src/resources/formats/revealjs/themes/serif.scss index fa936b09ef7..879a016fb93 100644 --- a/src/resources/formats/revealjs/themes/serif.scss +++ b/src/resources/formats/revealjs/themes/serif.scss @@ -15,6 +15,30 @@ $presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif !default; $presentation-heading-color: #383d3d !default; +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + + /*-- scss:rules --*/ .reveal a { diff --git a/src/resources/formats/revealjs/themes/simple.scss b/src/resources/formats/revealjs/themes/simple.scss index adf0a56af07..b25b7ff31d6 100644 --- a/src/resources/formats/revealjs/themes/simple.scss +++ b/src/resources/formats/revealjs/themes/simple.scss @@ -14,3 +14,28 @@ $selection-bg: rgba(0, 0, 0, 0.99); // headings $presentation-heading-font: "News Cycle", sans-serif !default; + +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + + diff --git a/src/resources/formats/revealjs/themes/sky.scss b/src/resources/formats/revealjs/themes/sky.scss index eb8c5ca10eb..d4d76cf4eb9 100644 --- a/src/resources/formats/revealjs/themes/sky.scss +++ b/src/resources/formats/revealjs/themes/sky.scss @@ -22,6 +22,29 @@ $presentation-heading-letter-spacing: -0.08em; $code-block-border-color: lighten($link-color, 30%) !default; $code-block-bg: transparent !default; +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-label-bg-color: mix($primary, #add9e4, 10%); + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + /*-- scss:mixins --*/ // Background generator diff --git a/src/resources/formats/revealjs/themes/solarized.scss b/src/resources/formats/revealjs/themes/solarized.scss index 2907861f435..7e2eb771350 100644 --- a/src/resources/formats/revealjs/themes/solarized.scss +++ b/src/resources/formats/revealjs/themes/solarized.scss @@ -20,6 +20,32 @@ $presentation-heading-text-transform: uppercase !default; // code blocks $code-block-border-color: #93a1a1 !default; +// Quarto diagrams + +$mermaid-body-color: #000; +$mermaid-bg-color: $body-bg; +$primary: $body-color; +$secondary: $link-color; + +/* SCSS variables for mermaid diagrams + + These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd + + Make sure to update the docs if you change these. */ + $mermaid-bg-color: $mermaid-bg-color; + $mermaid-edge-color: darken($secondary, 10%); + $mermaid-node-fg-color: $mermaid-body-color; + $mermaid-fg-color: $mermaid-body-color; + $mermaid-fg-color--lighter: lighten($mermaid-body-color, 10%); + $mermaid-fg-color--lightest: lighten($mermaid-body-color, 20%); + $mermaid-label-bg-color: $mermaid-bg-color; + $mermaid-label-fg-color: $primary; + $mermaid-node-bg-color: rgba($primary, 0.1); + $mermaid-node-fg-color: $primary; + + + + /*-- scss:rules --*/ html * {