Merge pull request #11963 from quarto-dev/callout-title-color

Author: cderv

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
 

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,

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`);
   }

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 {

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,

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 `<strong>` and `<b>` 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
+
+:::

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) {

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<number> {
   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');
 });