mermaid,themes - update themes

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.

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<string, unknown>)[name];
-        if (commentColor && typeof (commentColor) === "object") {
+        if (commentColor && typeof commentColor === "object") {
           const textColor =
             (commentColor as Record<string, unknown>)["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<string, unknown>)[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];
   }
 }

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",

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};

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;

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 --*/

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 --*/
 

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 --*/

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 --*/
 

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 --*/