diff --git a/news/changelog-1.8.md b/news/changelog-1.8.md index 353ea23ff52..972957bd41c 100644 --- a/news/changelog-1.8.md +++ b/news/changelog-1.8.md @@ -33,6 +33,7 @@ All changes included in 1.8: ### `revealjs` +- ([#12550](https://github.com/quarto-dev/quarto-cli/issues/12550)): Revealjs supports `brand-mode`, allowing to select either the light or the dark brand. - ([#12598](https://github.com/quarto-dev/quarto-cli/pull/12598)): Ensure `.fragment` on an image with caption applies to whole figure. - ([#12716](https://github.com/quarto-dev/quarto-cli/issues/12716)): Correctly resolve `"brand"` set in `theme` configuration for document in subdirectory from project root. - Use `cdn.jsdelivr.net` for mathjax dependencies to ensure consistent CDN usage across formats. Previously, `cdnjs.cloudflare.com` was used for `revealjs` mathjax dependencies, while `cdn.jsdelivr.net` was used for html format. @@ -43,7 +44,7 @@ All changes included in 1.8: ### `typst` -- ([#12180](https://github.com/quarto-dev/quarto-cli/issues/12180): Typst schema / autocomplete for `logo` option has `path` and `alt`. +- ([#12180](https://github.com/quarto-dev/quarto-cli/issues/12180)): Typst schema / autocomplete for `logo` option has `path` and `alt`. - ([#12554](https://github.com/quarto-dev/quarto-cli/pull/12554)): CSS properties `font-weight` and `font-style` are translated to Typst `text` properties. - ([#12695](https://github.com/quarto-dev/quarto-cli/issues/12695)): Resolve Typst `font-paths` that start with `/` relative to project root. - ([#12739](https://github.com/quarto-dev/quarto-cli/pull/12739)): Remove unused variable `heading-background-color` and `heading-decoration` from Typst's templates. They are leftover from previous change, and not part of Brand.yml schema for typography of headings. diff --git a/src/core/sass/brand.ts b/src/core/sass/brand.ts index c85daeb4941..6ed3bd6369b 100644 --- a/src/core/sass/brand.ts +++ b/src/core/sass/brand.ts @@ -24,6 +24,7 @@ import { } from "../../resources/types/zod/schema-types.ts"; import { Brand } from "../brand/brand.ts"; import { darkModeDefault } from "../../format/html/format-html-info.ts"; +import { kBrandMode } from "../../config/constants.ts"; const defaultColorNameMap: Record = { "link-color": "link", @@ -634,14 +635,18 @@ export async function brandBootstrapSassLayers( export async function brandRevealSassLayers( input: string | undefined, - _format: Format, + format: Format, project: ProjectContext, ): Promise { + let brandMode: "light" | "dark" = "light"; + if (format.metadata[kBrandMode] === "dark") { + brandMode = "dark"; + } return (await brandSassLayers( input, project, defaultColorNameMap, - )).light; + ))[brandMode]; } export async function brandSassFormatExtras( diff --git a/src/format/reveal/format-reveal.ts b/src/format/reveal/format-reveal.ts index 389a2bb9efc..f644643bc1a 100644 --- a/src/format/reveal/format-reveal.ts +++ b/src/format/reveal/format-reveal.ts @@ -7,6 +7,7 @@ import { join } from "../../deno_ral/path.ts"; import { Document, Element, NodeType } from "../../core/deno-dom.ts"; import { + kBrandMode, kCodeLineNumbers, kFrom, kHtmlMathMethod, @@ -376,8 +377,11 @@ export function revealjsFormat() { ); } -const determineRevealLogo = (format: Format): string | undefined => { - const brandData = format.render.brand?.light?.processedData; +const determineRevealLogo = ( + brandMode: "light" | "dark", + format: Format, +): string | undefined => { + const brandData = format.render.brand?.[brandMode]?.processedData; if (brandData?.logo) { // add slide logo if we have one for (const size of Zod.BrandNamedLogo.options) { @@ -393,6 +397,10 @@ const determineRevealLogo = (format: Format): string | undefined => { }; function revealMarkdownAfterBody(format: Format) { + let brandMode: "light" | "dark" = "light"; + if (format.metadata[kBrandMode] === "dark") { + brandMode = "dark"; + } const lines: string[] = []; lines.push("::: {.quarto-auto-generated-content style='display: none;'}\n"); let revealLogo = format @@ -402,7 +410,7 @@ function revealMarkdownAfterBody(format: Format) { revealLogo = revealLogo.path; } if (Zod.BrandNamedLogo.options.includes(revealLogo as BrandNamedLogo)) { - const brandData = format.render.brand?.light?.processedData; + const brandData = format.render.brand?.[brandMode]?.processedData; const logoInfo = brandData?.logo ?.[revealLogo as BrandNamedLogo]; if (logoInfo) { @@ -410,7 +418,7 @@ function revealMarkdownAfterBody(format: Format) { } } } else { - revealLogo = determineRevealLogo(format); + revealLogo = determineRevealLogo(brandMode, format); } if (revealLogo) { lines.push( diff --git a/src/resources/schema/document-layout.yml b/src/resources/schema/document-layout.yml index ee0beac8f69..fe33f021ae1 100644 --- a/src/resources/schema/document-layout.yml +++ b/src/resources/schema/document-layout.yml @@ -53,9 +53,9 @@ enum: [light, dark] default: light tags: - formats: [typst] + formats: [typst, revealjs] description: | - The brand mode to use for rendering the Typst document, `light` or `dark`. + The brand mode to use for rendering the document, `light` or `dark`. - name: layout schema: diff --git a/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-dark.qmd b/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-dark.qmd new file mode 100644 index 00000000000..c92b09e39d2 --- /dev/null +++ b/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-dark.qmd @@ -0,0 +1,34 @@ +--- +title: brand-mode and revealjs +format: revealjs +brand: + logo: + medium: + light: sun-face.png + dark: moon-face.png + color: + foreground: + light: '#222' + dark: '#eee' + background: + light: '#eee' + dark: '#222' + typography: + headings: + color: + light: '#429' + dark: '#54e' +brand-mode: dark +_quarto: + tests: + revealjs: + ensureHtmlElements: + - + - 'img[src="moon-face.png"]' + - + - 'img[src="sun-face.png"]' +--- + +## Here's a slide + +- in {{< meta brand-mode >}} mode! diff --git a/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-default.qmd b/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-default.qmd new file mode 100644 index 00000000000..6a3d546505a --- /dev/null +++ b/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-default.qmd @@ -0,0 +1,33 @@ +--- +title: brand-mode and revealjs +format: revealjs +brand: + logo: + medium: + light: sun-face.png + dark: moon-face.png + color: + foreground: + light: '#222' + dark: '#eee' + background: + light: '#eee' + dark: '#222' + typography: + headings: + color: + light: '#429' + dark: '#54e' +_quarto: + tests: + revealjs: + ensureHtmlElements: + - + - 'img[src="sun-face.png"]' + - + - 'img[src="moon-face.png"]' +--- + +## Here's a slide + +- in {{< meta brand-mode >}} mode! diff --git a/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-light.qmd b/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-light.qmd new file mode 100644 index 00000000000..0177254374f --- /dev/null +++ b/tests/docs/smoke-all/revealjs/brand-mode/brand-mode-light.qmd @@ -0,0 +1,34 @@ +--- +title: brand-mode and revealjs +format: revealjs +brand: + logo: + medium: + light: sun-face.png + dark: moon-face.png + color: + foreground: + light: '#222' + dark: '#eee' + background: + light: '#eee' + dark: '#222' + typography: + headings: + color: + light: '#429' + dark: '#54e' +brand-mode: light +_quarto: + tests: + revealjs: + ensureHtmlElements: + - + - 'img[src="sun-face.png"]' + - + - 'img[src="moon-face.png"]' +--- + +## Here's a slide + +- in {{< meta brand-mode >}} mode! diff --git a/tests/docs/smoke-all/revealjs/brand-mode/moon-face.png b/tests/docs/smoke-all/revealjs/brand-mode/moon-face.png new file mode 100644 index 00000000000..ee057e972b9 Binary files /dev/null and b/tests/docs/smoke-all/revealjs/brand-mode/moon-face.png differ diff --git a/tests/docs/smoke-all/revealjs/brand-mode/sun-face.png b/tests/docs/smoke-all/revealjs/brand-mode/sun-face.png new file mode 100644 index 00000000000..62a734cb8db Binary files /dev/null and b/tests/docs/smoke-all/revealjs/brand-mode/sun-face.png differ