From ecc0254235e6606f651ab68f895f76d78e910e92 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 24 Jan 2025 11:23:21 +0100 Subject: [PATCH 1/4] revealjs - callout-title default to body color --- src/resources/formats/revealjs/quarto.scss | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 401b4a5d8b5..a09f78152a5 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -672,9 +672,6 @@ $panel-sidebar-padding: 0.5em; quarto-color.blackness($backgroundColor) > $code-block-theme-dark-threshhold ) { /*! dark */ - .reveal div.callout.callout-style-default .callout-title { - color: #222; - } } @else { /*! light */ } @@ -900,16 +897,15 @@ kbd { } &.callout-title { + display: flex; + align-items: center; + p { margin-top: 0.5em; margin-bottom: 0.5em; + color: var(--r-main-color); } } - - &.callout-title { - display: flex; - align-items: center; - } } .callout-icon::before { From 3a9a4947f0df5b92d6c56f172694dd65d9cccd63 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Thu, 30 Jan 2025 19:51:39 +0100 Subject: [PATCH 2/4] Patch dracula theme regarding callout-title --- .../src/common/patches/revealjs-theme-0001-dracula.patch | 8 +++++--- package/src/common/update-html-dependencies.ts | 4 +++- src/resources/formats/revealjs/themes/dracula.scss | 4 +++- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/package/src/common/patches/revealjs-theme-0001-dracula.patch b/package/src/common/patches/revealjs-theme-0001-dracula.patch index 9206a828246..fe2d7d0e07e 100644 --- a/package/src/common/patches/revealjs-theme-0001-dracula.patch +++ b/package/src/common/patches/revealjs-theme-0001-dracula.patch @@ -1,8 +1,8 @@ diff --git a/src/resources/formats/revealjs/themes/dracula.scss b/src/resources/formats/revealjs/themes/dracula.scss -index 5330fbc1b..45498dd41 100644 +index 5330fbc1b..fe068d9a8 100644 --- a/src/resources/formats/revealjs/themes/dracula.scss +++ b/src/resources/formats/revealjs/themes/dracula.scss -@@ -1,106 +1,88 @@ +@@ -1,106 +1,90 @@ /** * Dracula Dark theme for reveal.js. * Based on https://draculatheme.com @@ -151,7 +151,9 @@ index 5330fbc1b..45498dd41 100644 - } + strong, + b { -+ color: var(--r-bold-color); ++ &:not(.callout-title strong, .callout-tile b) { ++ color: var(--r-bold-color); ++ } + } + em, + i, diff --git a/package/src/common/update-html-dependencies.ts b/package/src/common/update-html-dependencies.ts index 3b6f5780495..40aed8c6e84 100644 --- a/package/src/common/update-html-dependencies.ts +++ b/package/src/common/update-html-dependencies.ts @@ -1123,7 +1123,9 @@ async function updateGithubSourceCodeDependency( await unzip(zipFile, working); await onDownload(working, version); - if (patches) await applyGitPatches(patches); + if (patches) { + await applyGitPatches(patches); + } } else { throw new Error(`${versionEnvVar} is not defined`); } diff --git a/src/resources/formats/revealjs/themes/dracula.scss b/src/resources/formats/revealjs/themes/dracula.scss index 45498dd4146..fe068d9a8d1 100644 --- a/src/resources/formats/revealjs/themes/dracula.scss +++ b/src/resources/formats/revealjs/themes/dracula.scss @@ -59,7 +59,9 @@ $light-bg-text-color: $body-bg !default; .reveal { strong, b { - color: var(--r-bold-color); + &:not(.callout-title strong, .callout-tile b) { + color: var(--r-bold-color); + } } em, i, From aa9fa400cb7bb19546900bbe1dbb72c7eba874d5 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 31 Jan 2025 11:13:52 +0100 Subject: [PATCH 3/4] add playwright test for dracula theme tweak regaring color-title aims to prevent problem at next revealjs update --- .../callouts/dracula-theme-tweaks.qmd | 19 +++++++++++++++++ tests/integration/playwright/src/utils.ts | 21 ++++++++++++++----- .../playwright/tests/revealjs-themes.spec.ts | 9 +++++++- 3 files changed, 43 insertions(+), 6 deletions(-) create mode 100644 tests/docs/playwright/revealjs/callouts/dracula-theme-tweaks.qmd diff --git a/tests/docs/playwright/revealjs/callouts/dracula-theme-tweaks.qmd b/tests/docs/playwright/revealjs/callouts/dracula-theme-tweaks.qmd new file mode 100644 index 00000000000..32105f3f31c --- /dev/null +++ b/tests/docs/playwright/revealjs/callouts/dracula-theme-tweaks.qmd @@ -0,0 +1,19 @@ +--- +title: callout title in dracula theme is tweak +format: + revealjs: + theme: dracula +--- + +`dracula` theme in revealjs does use a color for `` and `` element. We don't want that to apply on Callout title which are using this HTML element. +So we tweaked dracula theme et this test checks that color of title is like in other themes => the same as the body color. + +## Note + +::: {.callout-note} + +## Title of the callout + +Content + +::: diff --git a/tests/integration/playwright/src/utils.ts b/tests/integration/playwright/src/utils.ts index bb0266319a8..be403edee2c 100644 --- a/tests/integration/playwright/src/utils.ts +++ b/tests/integration/playwright/src/utils.ts @@ -151,15 +151,26 @@ export async function getCSSProperty(loc: Locator, variable: string, asNumber = } } +export async function checkCSSproperty(loc1: Locator, loc2: Locator, property: string, asNumber: false | true, checkType: 'identical' | 'similar', factor: number = 1) { + let loc1Property = await getCSSProperty(loc1, property, asNumber); + let loc2Property = await getCSSProperty(loc2, property, asNumber); + if (checkType === 'identical') { + await expect(loc2).toHaveCSS(property, loc1Property as string); + } else { + await expect(loc1Property).toBeCloseTo(loc2Property as number * factor); + } +} + export async function checkFontSizeIdentical(loc1: Locator, loc2: Locator) { - const loc1FontSize = await getCSSProperty(loc1, 'font-size', false) as string; - await expect(loc2).toHaveCSS('font-size', loc1FontSize); + await checkCSSproperty(loc1, loc2, 'font-size', false, 'identical'); } export async function checkFontSizeSimilar(loc1: Locator, loc2: Locator, factor: number = 1) { - const loc1FontSize = await getCSSProperty(loc1, 'font-size', true) as number; - const loc2FontSize = await getCSSProperty(loc2, 'font-size', true) as number; - await expect(loc1FontSize).toBeCloseTo(loc2FontSize * factor); + await checkCSSproperty(loc1, loc2, 'font-size', true, 'similar', factor); +} + +export async function checkColorIdentical(loc1: Locator, loc2: Locator, property: string) { + await checkCSSproperty(loc1, loc2, property, false, 'identical'); } export async function checkBorderProperties(element: Locator, side: string, color: RGBColor, width: string) { diff --git a/tests/integration/playwright/tests/revealjs-themes.spec.ts b/tests/integration/playwright/tests/revealjs-themes.spec.ts index 2eb8d33320c..d8fb52056af 100644 --- a/tests/integration/playwright/tests/revealjs-themes.spec.ts +++ b/tests/integration/playwright/tests/revealjs-themes.spec.ts @@ -1,5 +1,5 @@ import { test, expect, Locator } from '@playwright/test'; -import { asRGB, checkColor, checkFontSizeIdentical, checkFontSizeSimilar, getCSSProperty, RGBColor } from '../src/utils'; +import { asRGB, checkColor, checkColorIdentical, checkFontSizeSimilar, getCSSProperty, RGBColor } from '../src/utils'; async function getRevealMainFontSize(page: any): Promise { return await getCSSProperty(page.locator('body'), "--r-main-font-size", true) as number; @@ -71,4 +71,11 @@ test('Callouts can be customized using SCSS variables', async ({ page }) => { await checkCustom(page.locator('div.callout-warning'), '10px', asRGB(173, 216, 230)); await checkCustom(page.locator('div.callout-important'), '10px', asRGB(128, 128, 128)); await checkCustom(page.locator('div.callout-caution'), '10px', asRGB(0, 128, 0)); +}); + +test('Callout title color in dracula theme is correctly tweaked to use same as body color', async ({ page }) => { + await page.goto('./revealjs/callouts/dracula-theme-tweaks.html#/note'); + const calloutTitleLoc = page.getByText('Title of the callout', { exact: true }); + const calloutContentLoc = page.getByText('Content', { exact: true }); + await checkColorIdentical(calloutTitleLoc, calloutContentLoc, 'color'); }); \ No newline at end of file From 9ae277c672c70d28e178210bfd912c4c537f0b6c Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 31 Jan 2025 11:17:59 +0100 Subject: [PATCH 4/4] Add to 1.7 changelog --- news/changelog-1.7.md | 1 + 1 file changed, 1 insertion(+) diff --git a/news/changelog-1.7.md b/news/changelog-1.7.md index c42502d7b4f..3d1ce35685c 100644 --- a/news/changelog-1.7.md +++ b/news/changelog-1.7.md @@ -8,6 +8,7 @@ All changes included in 1.7: - ([#11580](https://github.com/quarto-dev/quarto-cli/issues/11580)): Fix regression with documents containing `categories` fields that are not strings. - ([#11752](https://github.com/quarto-dev/quarto-cli/issues/11752)): Fix regression with non-alphanumeric characters in `categories` preventing correct filtering of listing. - ([#11561](https://github.com/quarto-dev/quarto-cli/issues/11561)): Fix a regression with `$border-color` that impacted, callouts borders, tabset borders, and table borders of the defaults themes. `$border-color` is now correctly a mixed of `$body-color` and `$body-bg` even for the default theme. +- ([#11943](https://github.com/quarto-dev/quarto-cli/issues/11943)): Fix callout title color on dark theme in revealjs following Revealjs update in quarto 1.6. ## YAML validation