diff --git a/news/changelog-1.8.md b/news/changelog-1.8.md index b108aa75135..6a0c891664e 100644 --- a/news/changelog-1.8.md +++ b/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. \ No newline at end of file +- ([#12853](https://github.com/quarto-dev/quarto-cli/issues/12853)): fix replaceAll() escaping issue with embedded notebooks containing `$` in their Markdown. diff --git a/src/format/reveal/format-reveal-theme.ts b/src/format/reveal/format-reveal-theme.ts index ecadd81bd98..099a7f4c14e 100644 --- a/src/format/reveal/format-reveal-theme.ts +++ b/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)) { diff --git a/tests/docs/playwright/revealjs/brand/custom.scss b/tests/docs/playwright/revealjs/brand/custom.scss new file mode 100644 index 00000000000..fb2125e5d9c --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/custom.scss @@ -0,0 +1,2 @@ +/*-- scss:defaults --*/ +$body-bg: $brand-dark-teal; diff --git a/tests/docs/playwright/revealjs/brand/project/.gitignore b/tests/docs/playwright/revealjs/brand/project/.gitignore new file mode 100644 index 00000000000..075b2542afb --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/project/.gitignore @@ -0,0 +1 @@ +/.quarto/ diff --git a/tests/docs/playwright/revealjs/brand/project/_brand.yml b/tests/docs/playwright/revealjs/brand/project/_brand.yml new file mode 100644 index 00000000000..5d845948870 --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/project/_brand.yml @@ -0,0 +1,3 @@ +color: + palette: + dark-teal: "#005E5E" diff --git a/tests/docs/playwright/revealjs/brand/project/_quarto.yml b/tests/docs/playwright/revealjs/brand/project/_quarto.yml new file mode 100644 index 00000000000..b8bae5830fa --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/project/_quarto.yml @@ -0,0 +1,2 @@ +project: + type: default diff --git a/tests/docs/playwright/revealjs/brand/project/custom.scss b/tests/docs/playwright/revealjs/brand/project/custom.scss new file mode 100644 index 00000000000..fb2125e5d9c --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/project/custom.scss @@ -0,0 +1,2 @@ +/*-- scss:defaults --*/ +$body-bg: $brand-dark-teal; diff --git a/tests/docs/playwright/revealjs/brand/project/index.qmd b/tests/docs/playwright/revealjs/brand/project/index.qmd new file mode 100644 index 00000000000..1419749959f --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/project/index.qmd @@ -0,0 +1,10 @@ +--- +title: test +format: + revealjs: + theme: [custom.scss, brand] +--- + +# content + +content \ No newline at end of file diff --git a/tests/docs/playwright/revealjs/brand/project/subdir/custom.scss b/tests/docs/playwright/revealjs/brand/project/subdir/custom.scss new file mode 100644 index 00000000000..fb2125e5d9c --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/project/subdir/custom.scss @@ -0,0 +1,2 @@ +/*-- scss:defaults --*/ +$body-bg: $brand-dark-teal; diff --git a/tests/docs/playwright/revealjs/brand/project/subdir/index.qmd b/tests/docs/playwright/revealjs/brand/project/subdir/index.qmd new file mode 100644 index 00000000000..1419749959f --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/project/subdir/index.qmd @@ -0,0 +1,10 @@ +--- +title: test +format: + revealjs: + theme: [custom.scss, brand] +--- + +# content + +content \ No newline at end of file diff --git a/tests/docs/playwright/revealjs/brand/single.qmd b/tests/docs/playwright/revealjs/brand/single.qmd new file mode 100644 index 00000000000..0316273f808 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/tests/docs/playwright/revealjs/brand/subdir/custom.scss b/tests/docs/playwright/revealjs/brand/subdir/custom.scss new file mode 100644 index 00000000000..fb2125e5d9c --- /dev/null +++ b/tests/docs/playwright/revealjs/brand/subdir/custom.scss @@ -0,0 +1,2 @@ +/*-- scss:defaults --*/ +$body-bg: $brand-dark-teal; diff --git a/tests/docs/playwright/revealjs/brand/subdir/index.qmd b/tests/docs/playwright/revealjs/brand/subdir/index.qmd new file mode 100644 index 00000000000..0316273f808 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/tests/integration/playwright/src/utils.ts b/tests/integration/playwright/src/utils.ts index 56595226ecb..0aabd2d0ff2 100644 --- a/tests/integration/playwright/src/utils.ts +++ b/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 { return { colorScheme: mode diff --git a/tests/integration/playwright/tests/revealjs-brand.spec.ts b/tests/integration/playwright/tests/revealjs-brand.spec.ts new file mode 100644 index 00000000000..08159591f88 --- /dev/null +++ b/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 { + 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); + }); +} \ No newline at end of file