Merge pull request #12960 from quarto-dev/revealjs/brand-layer

reveajs - correctly identify brand layer

Author: cderv

news/changelog-1.8.md

@@ -25,6 +25,7 @@ All changes included in 1.8:
 ### `revealjs`
 
 - ([#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.
 
 ### `docx`
 
@@ -93,4 +94,4 @@ All changes included in 1.8:
 
 - ([#11321](https://github.com/quarto-dev/quarto-cli/issues/11321)): Follow [recommendation from LaTeX project](https://latex-project.org/news/latex2e-news/ltnews40.pdf) and use `lualatex` instead of `xelatex` as the default PDF engine.
 - ([#12782](https://github.com/quarto-dev/quarto-cli/pull/12782)): fix bug on `safeRemoveDirSync`'s detection of safe directory boundaries.
-- ([#12853](https://github.com/quarto-dev/quarto-cli/issues/12853)): fix replaceAll() escaping issue with embedded notebooks containing `$` in their Markdown.
+- ([#12853](https://github.com/quarto-dev/quarto-cli/issues/12853)): fix replaceAll() escaping issue with embedded notebooks containing `$` in their Markdown.

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

@@ -124,7 +124,7 @@ export async function revealTheme(
     .map(
       (theme) => {
         const themePath = join(relative(Deno.cwd(), dirname(input)), theme);
-        if (themePath === "brand") {
+        if (theme === "brand") {
           usedBrandLayers = true;
           return brandLayers;
         } else if (existsSync(themePath)) {

tests/docs/playwright/revealjs/brand/custom.scss

@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;

tests/docs/playwright/revealjs/brand/project/.gitignore

@@ -0,0 +1 @@
+/.quarto/

tests/docs/playwright/revealjs/brand/project/_brand.yml

@@ -0,0 +1,3 @@
+color:
+  palette:
+    dark-teal: "#005E5E"

tests/docs/playwright/revealjs/brand/project/_quarto.yml

@@ -0,0 +1,2 @@
+project:
+  type: default

tests/docs/playwright/revealjs/brand/project/custom.scss

@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;

tests/docs/playwright/revealjs/brand/project/index.qmd

@@ -0,0 +1,10 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+---
+
+# content
+
+content

tests/docs/playwright/revealjs/brand/project/subdir/custom.scss

@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;

tests/docs/playwright/revealjs/brand/project/subdir/index.qmd

@@ -0,0 +1,10 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+---
+
+# content
+
+content

tests/docs/playwright/revealjs/brand/single.qmd

@@ -0,0 +1,14 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+brand:
+  color:
+    palette:
+      dark-teal: "#005E5E"
+---
+
+# content
+
+content

tests/docs/playwright/revealjs/brand/subdir/custom.scss

@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;

tests/docs/playwright/revealjs/brand/subdir/index.qmd

@@ -0,0 +1,14 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+brand:
+  color:
+    palette:
+      dark-teal: "#005E5E"
+---
+
+# content
+
+content

tests/integration/playwright/src/utils.ts

@@ -233,6 +233,10 @@ export async function checkBorderProperties(element: Locator, side: string, colo
   await expect(element).toHaveCSS(`border-${side}-width`, width);
 }
 
+export async function checkBackgroundColorProperty(element: Locator, color: RGBColor) {
+  await checkColor(element, `background-color`, color);
+}
+
 export function useDarkLightMode(mode: 'dark' | 'light'): Partial<PlaywrightTestOptions> {
   return {
     colorScheme: mode

tests/integration/playwright/tests/revealjs-brand.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect, Locator } from '@playwright/test';
+import { asRGB, checkBackgroundColorProperty, checkColor, checkColorIdentical, checkFontSizeSimilar, getCSSProperty, hexToRgb, RGBColor } from '../src/utils';
+
+async function getRevealBrandColorVar(page: any, suffix: string): Promise<string> {
+  return await getCSSProperty(page.locator('body'), `--quarto-scss-export-brand-${suffix}`, false) as string;
+}
+
+// specific function to check the branded background color for revealjs/brand/ tests
+// They use `color.palette.dark-teal` as brand color
+async function checkBrandedBackgroundColor(page: any) {
+  const brandColor = await getRevealBrandColorVar(page, 'dark-teal');
+  await checkBackgroundColorProperty(page.locator('body'), hexToRgb(brandColor));
+}
+
+// Define test cases with their URLs to reduce duplication
+const brandTestCases = [
+  { 
+    name: 'project file using _brand.yml configuration', 
+    url: './revealjs/brand/project/index.html',
+    description: 'Tests a file within a project that uses _brand.yml for branding'
+  },
+  { 
+    name: 'nested file within project inheriting project branding', 
+    url: './revealjs/brand/project/subdir/index.html',
+    description: 'Tests a file in a subdirectory that inherits project branding from _brand.yml' 
+  },
+  { 
+    name: 'standalone file with inline brand configuration', 
+    url: './revealjs/brand/single.html',
+    description: 'Tests a standalone file with inline brand configuration in YAML frontmatter'
+  },
+  { 
+    name: 'file in subdirectory with inline brand configuration', 
+    url: './revealjs/brand/subdir/index.html',
+    description: 'Tests a file in subdirectory with its own inline brand configuration' 
+  }
+];
+
+// Run all test cases with the same pattern
+for (const testCase of brandTestCases) {
+  test(testCase.name, async ({ page }, testInfo) => {
+    // Add the description as an annotation to the test report
+    testInfo.annotations.push({
+      type: 'description',
+      description: testCase.description
+    });
+
+    await page.goto(testCase.url);
+    await checkBrandedBackgroundColor(page);
+  });
+}