Merge pull request #10341 from quarto-dev/feature/brand-yaml

brand - pass colors to revealjs theme. use sass 'primary' variable for links in `revealjs`

src/command/render/pandoc.ts

@@ -30,7 +30,6 @@ import {
   kHtmlFinalizers,
   kHtmlPostprocessors,
   kMarkdownAfterBody,
-  kSassBundles,
   kTextHighlightingMode,
 } from "../../config/types.ts";
 import {
@@ -201,7 +200,6 @@ import {
   MarkdownPipelineHandler,
 } from "../../core/markdown-pipeline.ts";
 import { getEnv } from "../../../package/src/util/utils.ts";
-import { brandSassFormatExtras } from "../../core/sass/brand.ts";
 
 // in case we are running multiple pandoc processes
 // we need to make sure we capture all of the trace files
@@ -405,17 +403,10 @@ export async function runPandoc(
       ))
       : {};
 
-    const brandExtras: FormatExtras = await brandSassFormatExtras(
-      options.format,
-      options.project,
-    );
-
     // start with the merge
     const inputExtras = mergeConfigs(
       projectExtras,
       formatExtras,
-      brandExtras,
-      // project documentclass always wins
       {
         metadata: projectExtras.metadata?.[kDocumentClass]
           ? {

src/core/sass/brand.ts

@@ -11,18 +11,29 @@ import {
   FormatExtras,
   kSassBundles,
   SassBundle,
+  SassBundleLayers,
 } from "../../config/types.ts";
 import { ProjectContext } from "../../project/types.ts";
 
-export async function brandSassFormatExtras(
-  _format: Format,
+export async function brandBootstrapSassBundles(
   project: ProjectContext,
-): Promise<FormatExtras> {
+  key: string,
+): Promise<SassBundle[]> {
+  return (await brandBootstrapSassBundleLayers(project, key)).map(
+    (layer: SassBundleLayers) => {
+      return {
+        ...layer,
+        dependency: "bootstrap",
+      };
+    },
+  );
+}
+export async function brandBootstrapSassBundleLayers(
+  project: ProjectContext,
+  key: string,
+): Promise<SassBundleLayers[]> {
   const brand = await project.resolveBrand();
-  if (!brand) {
-    return {};
-  }
-  const sassBundles: SassBundle[] = [];
+  const sassBundles: SassBundleLayers[] = [];
 
   if (brand?.data.color) {
     const colorVariables: string[] = ["/* color variables from _brand.yml */"];
@@ -40,9 +51,9 @@ export async function brandSassFormatExtras(
       );
     }
     // const colorEntries = Object.keys(brand.color);
-    const colorBundle: SassBundle = {
-      key: "brand-color",
-      dependency: "bootstrap",
+    const colorBundle: SassBundleLayers = {
+      key,
+      // dependency: "bootstrap",
       quarto: {
         defaults: colorVariables.join("\n"),
         uses: "",
@@ -54,9 +65,37 @@ export async function brandSassFormatExtras(
     sassBundles.push(colorBundle);
   }
 
-  return {
-    html: {
-      [kSassBundles]: sassBundles,
-    },
-  };
+  return sassBundles;
+}
+
+export async function brandRevealSassBundleLayers(
+  _format: Format,
+  project: ProjectContext,
+): Promise<SassBundleLayers[]> {
+  return brandBootstrapSassBundleLayers(project, "reveal-theme");
+}
+
+export async function brandSassFormatExtras(
+  _format: Format,
+  project: ProjectContext,
+): Promise<FormatExtras> {
+  const htmlSassBundleLayers = await brandBootstrapSassBundleLayers(
+    project,
+    "brand",
+  );
+  const htmlSassBundles: SassBundle[] = htmlSassBundleLayers.map((layer) => {
+    return {
+      ...layer,
+      dependency: "bootstrap",
+    };
+  });
+  if (htmlSassBundles.length === 0) {
+    return {};
+  } else {
+    return {
+      html: {
+        [kSassBundles]: htmlSassBundles,
+      },
+    };
+  }
 }

src/format/dashboard/format-dashboard.ts

@@ -61,6 +61,8 @@ import { projectIsWebsite } from "../../project/project-shared.ts";
 import { processShinyComponents } from "./format-dashboard-shiny.ts";
 import { processToolbars } from "./format-dashboard-toolbar.ts";
 import { processDatatables } from "./format-dashboard-tables.ts";
+import { assert } from "testing/asserts.ts";
+import { brandBootstrapSassBundles } from "../../core/sass/brand.ts";
 
 const kDashboardClz = "quarto-dashboard";
 
@@ -94,6 +96,7 @@ export function dashboardFormat() {
       project?: ProjectContext,
       quiet?: boolean,
     ) => {
+      assert(project);
       if (baseHtmlFormat.formatExtras) {
         // Read the dashboard metadata
         const dashboard = await dashboardMeta(format);
@@ -156,12 +159,17 @@ export function dashboardFormat() {
           scrolling: dashboard.scrolling,
         };
 
+        extras.html[kSassBundles] = extras.html[kSassBundles] || [];
         if (!isWebsiteProject) {
           // If this is a website project, it will inject the scss for dashboards
-          extras.html[kSassBundles] = extras.html[kSassBundles] || [];
           extras.html[kSassBundles].unshift(dashboardScssLayer());
         }
 
+        // add _brand.yml sass bundle
+        extras.html[kSassBundles].push(
+          ...await brandBootstrapSassBundles(project, "bootstrap"),
+        );
+
         const scripts: DependencyHtmlFile[] = [];
         const stylesheets: DependencyHtmlFile[] = [];
 

src/format/html/format-html.ts

@@ -113,6 +113,7 @@ import {
 } from "./format-html-types.ts";
 import { kQuartoHtmlDependency } from "./format-html-constants.ts";
 import { registerWriterFormatHandler } from "../format-handlers.ts";
+import { brandSassFormatExtras } from "../../core/sass/brand.ts";
 
 export function htmlFormat(
   figwidth: number,
@@ -171,6 +172,7 @@ export function htmlFormat(
             project,
             quiet,
           ),
+          await brandSassFormatExtras(format, project),
           { [kFilterParams]: htmlFilterParams },
         );
       },

src/format/reveal/format-reveal-theme.ts

@@ -38,6 +38,8 @@ import { titleSlideScss } from "./format-reveal-title.ts";
 import { asCssFont, asCssNumber } from "../../core/css.ts";
 import { cssHasDarkModeSentinel } from "../../core/pandoc/css.ts";
 import { pandocNativeStr } from "../../core/pandoc/codegen.ts";
+import { ProjectContext } from "../../project/types.ts";
+import { brandRevealSassBundleLayers } from "../../core/sass/brand.ts";
 
 export const kRevealLightThemes = [
   "white",
@@ -63,6 +65,7 @@ export async function revealTheme(
   input: string,
   libDir: string,
   temp: TempContext,
+  project: ProjectContext,
 ) {
   // metadata override to return
   const metadata: Metadata = {};
@@ -175,8 +178,13 @@ export async function revealTheme(
     loadPaths,
   };
 
+  const brandLayers: SassBundleLayers[] = await brandRevealSassBundleLayers(
+    format,
+    project,
+  );
+
   // compile sass
-  const css = await compileSass([bundleLayers], temp);
+  const css = await compileSass([bundleLayers, ...brandLayers], temp);
   copyTo(
     css,
     join(revealDestDir, "dist", "theme", "quarto.css"),

src/format/reveal/format-reveal.ts

@@ -150,7 +150,13 @@ export function revealjsFormat() {
         }
 
         // get theme info (including text highlighing mode)
-        const theme = await revealTheme(format, input, libDir, services.temp);
+        const theme = await revealTheme(
+          format,
+          input,
+          libDir,
+          services.temp,
+          project,
+        );
 
         const revealPluginData = await revealPluginExtras(
           input,

src/resources/formats/revealjs/quarto.scss

@@ -19,7 +19,8 @@ $body-color: #222 !default;
 $text-muted: lighten($body-color, 30%) !default;
 
 // link colors
-$link-color: #2a76dd !default;
+$primary: #2a76dd !default;
+$link-color: $primary !default;
 $link-color-hover: lighten($link-color, 10%) !default;
 
 // selection colors