From a7360e10d9de4c4e7950e12b57e2316bc5ff9169 Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Wed, 13 Aug 2025 20:09:08 -0400 Subject: [PATCH 1/2] playwright tests before fixing #8568 i simply report i do not try to explain but it looks like a11y has a dark mode inline code foreground color --- .../a11y-syntax-highlighting.qmd | 7 ++++++- .../arrow-syntax-highlighting.qmd | 8 +++++-- .../playwright/tests/html-dark-mode.spec.ts | 21 ++++++++++++++++++- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd index 47729714248..ac8803f6d11 100644 --- a/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd +++ b/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd @@ -9,12 +9,17 @@ theme: highlight-style: a11y --- +### Inline code + +* Python: `def identity(x): return x`{.python} +* R: `identity <- function(x) x`{.r} + +### Code blocks ```markdown ![asdf](asd.png) ``` - ```python #| label: fig-polar #| fig-cap: "A line plot on a polar axis" diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd index 344fd955c72..a118d781c89 100644 --- a/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd +++ b/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd @@ -12,13 +12,17 @@ _quarto: - ["link[href*=\"-dark-\"]"] --- -## Hello +### Inline code + +* Python: `def identity(x): return x`{.python} +* R: `identity <- function(x) x`{.r} + +### Code blocks ```markdown ![asdf](asd.png) ``` - ```python #| label: fig-polar #| fig-cap: "A line plot on a polar axis" diff --git a/tests/integration/playwright/tests/html-dark-mode.spec.ts b/tests/integration/playwright/tests/html-dark-mode.spec.ts index ddc2fb7c8e8..df4aea6658c 100644 --- a/tests/integration/playwright/tests/html-dark-mode.spec.ts +++ b/tests/integration/playwright/tests/html-dark-mode.spec.ts @@ -43,9 +43,18 @@ test('Syntax highlighting, a11y, with JS', async ({ page }) => { await expect(locatr).toHaveClass('fullcontent quarto-light'); await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)'); const importKeyword = await page.locator('span.im').first(); + // light inline code + const pythonCode = await page.locator('li code.sourceCode.r'); + await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); // light highlight stylesheet await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)'); + await page.locator("a.quarto-color-scheme-toggle").click(); + + // dark inline code + await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(192, 128, 216)'); // dark highlight stylesheet await expect(importKeyword).toHaveCSS('color', 'rgb(248, 248, 242)'); }); @@ -58,6 +67,16 @@ test('Syntax highlighting, arrow, with JS', async ({ page }) => { const locatr = await page.locator('body').first(); await expect(locatr).toHaveClass('fullcontent quarto-light'); await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)'); + // light inline code + const pythonCode = await page.locator('li code.sourceCode.python'); + await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); + // alert const link = await page.locator('span.al').first(); - await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); + await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); // transparent + + await page.locator("a.quarto-color-scheme-toggle").click(); + // dark inline code + await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); }); From 8c557cfee70782d3b7fa82ab6f113d2228feffcb Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Mon, 4 Aug 2025 16:54:56 -0400 Subject: [PATCH 2/2] default background and foreground for inline code in dark mode fixes #8568 this minimal and defensive change (found and iterated with Claude) changes inline code without .sourceCode to use the same default background and foreground colors as the block code, when in dark mode. it is probably more defensive than it needs to be it also causes code with .sourceCode to default to the code block background if not otherwise specified, instead of $grey-100, in both modes. --- news/changelog-1.8.md | 3 +- .../html/bootstrap/_bootstrap-rules.scss | 53 ++++++++++++++----- .../html/bootstrap/_bootstrap-variables.scss | 6 ++- .../a11y-syntax-highlighting.qmd | 3 +- .../arrow-syntax-highlighting.qmd | 1 + .../playwright/tests/html-dark-mode.spec.ts | 10 ++-- 6 files changed, 56 insertions(+), 20 deletions(-) diff --git a/news/changelog-1.8.md b/news/changelog-1.8.md index 51572044710..0e49185e472 100644 --- a/news/changelog-1.8.md +++ b/news/changelog-1.8.md @@ -20,6 +20,7 @@ All changes included in 1.8: - ([#726](https://github.com/quarto-dev/quarto-cli/issues/726)): a11y - Provide `.screen-reader-only` callout type when callout text doesn't naturally include the type. - ([#5538](https://github.com/quarto-dev/quarto-cli/issues/5538)): Fix code-copy button style so that scrolling behaves properly. - ([#5879](https://github.com/quarto-dev/quarto-cli/issues/5879)): Improve font rendering of `kbd` shortcode on macOS. `kbd` will now also be stricter in converting keyboard shortcuts to macOS icons. +- ([#8568](https://github.com/quarto-dev/quarto-cli/issues/8568)) Default inline code background color to the code block background color if not specified; foreground color is `$pre-color` in dark mode and (remains) purple in light mode. - ([#10983](https://github.com/quarto-dev/quarto-cli/issues/10983)): Fix spacing inconsistency between paras and first section headings. - ([#12259](https://github.com/quarto-dev/quarto-cli/issues/12259)): Fix conflict between `html-math-method: katex` and crossref popups (author: @benkeks). - ([#12341](https://github.com/quarto-dev/quarto-cli/issues/12341)): Enable light and dark logos for html formats (sidebar, navbar, dashboard). @@ -108,7 +109,7 @@ All changes included in 1.8: - ([#12753](https://github.com/quarto-dev/quarto-cli/issues/12753)): Support change in IPython 9+ and import `set_matplotlib_formats` from `matplotlib_inline.backend_inline` in the internal `setup.py` script used to initialize rendering with Jupyter engine. - ([#12839](https://github.com/quarto-dev/quarto-cli/issues/12839)): Support for `plotly.py` 6+ which now loads plotly.js using a cdn in script as a module. -- ([#13026](https://github.com/quarto-dev/quarto-cli/pulls/13026), [#13151](https://github.com/quarto-dev/quarto-cli/pulls/13151)), [#13184](https://github.com/quarto-dev/quarto-cli/pull/13184): Use `jsdelivr` CDN for jupyter widgets dependencies. +- ([#13026](https://github.com/quarto-dev/quarto-cli/pull/13026), [#13151](https://github.com/quarto-dev/quarto-cli/pull/13151)), [#13184](https://github.com/quarto-dev/quarto-cli/pull/13184): Use `jsdelivr` CDN for jupyter widgets dependencies. ### `knitr` diff --git a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss index 07d982073db..8aba5b288bc 100644 --- a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss +++ b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss @@ -923,6 +923,26 @@ pre { border: initial; } +p code.sourceCode, +li code.sourceCode, +td code.sourceCode { + $calculated-bg: if( + variable-exists(code-bg), + if( + $code-bg == $gray-100 and variable-exists(code-block-bg-color), + $code-block-bg-color, + $code-bg + ), + null + ); + + @if variable-exists(mono-background-color) { + background-color: $mono-background-color; + } @else if variable-exists(calculated-bg) { + background-color: $calculated-bg; + } +} + // Maps the pandoc 'monobackgroundcolor' to bootstrap // Note this only targets code outside of sourceCode blocks @if variable-exists(mono-background-color) { @@ -942,14 +962,23 @@ pre code:not(.sourceCode) { background-color: initial; } -// Default padding if background is set p code:not(.sourceCode), li code:not(.sourceCode), td code:not(.sourceCode) { + $calculated-bg: if( + variable-exists(code-bg), + if( + $code-bg == $gray-100 and variable-exists(code-block-bg-color), + $code-block-bg-color, + $code-bg + ), + null + ); + @if variable-exists(mono-background-color) { background-color: $mono-background-color; - } @else if variable-exists(code-bg) { - background-color: $code-bg; + } @else if variable-exists(calculated-bg) { + background-color: $calculated-bg; } @if variable-exists(code-padding) { @@ -2197,12 +2226,12 @@ a { // screen-reader-only, cf https://github.com/quarto-dev/quarto-cli/issues/726#issuecomment-1112486100 .screen-reader-only { - position: absolute; - clip: rect(0 0 0 0); - border: 0; - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - width: 1px; -} \ No newline at end of file + position: absolute; + clip: rect(0 0 0 0); + border: 0; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + width: 1px; +} diff --git a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss index c698781fb66..330f403c49d 100644 --- a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss +++ b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss @@ -38,7 +38,11 @@ $code-block-theme-dark-threshhold: 40% !default; /* Inline Code Formatting */ // $code-bg, $code-color, $code-padding -$code-color: #7d12ba !default; +$code-color: if( + variable-exists(pre-color) and $pre-color != null, + $pre-color, + #7d12ba +) !default; // Set a default body emphasis color $code-bg: $gray-100 !default; diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd index ac8803f6d11..2fd453a26d6 100644 --- a/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd +++ b/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd @@ -5,12 +5,13 @@ execute: warning: false theme: light: [cosmo, theme.scss] - dark: [cosmo, theme-dark.scss] + dark: [solar, theme-dark.scss] highlight-style: a11y --- ### Inline code +* No syntax highlighting: `foo(bar)` * Python: `def identity(x): return x`{.python} * R: `identity <- function(x) x`{.r} diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd index a118d781c89..df8c5d38ad2 100644 --- a/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd +++ b/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd @@ -14,6 +14,7 @@ _quarto: ### Inline code +* No syntax highlighting: `foo(bar)` * Python: `def identity(x): return x`{.python} * R: `identity <- function(x) x`{.r} diff --git a/tests/integration/playwright/tests/html-dark-mode.spec.ts b/tests/integration/playwright/tests/html-dark-mode.spec.ts index df4aea6658c..8df7c3601c2 100644 --- a/tests/integration/playwright/tests/html-dark-mode.spec.ts +++ b/tests/integration/playwright/tests/html-dark-mode.spec.ts @@ -45,7 +45,7 @@ test('Syntax highlighting, a11y, with JS', async ({ page }) => { const importKeyword = await page.locator('span.im').first(); // light inline code const pythonCode = await page.locator('li code.sourceCode.r'); - await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); + await expect(pythonCode).toHaveCSS('background-color', 'rgba(233, 236, 239, 0.65)'); await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); // light highlight stylesheet await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)'); @@ -53,7 +53,7 @@ test('Syntax highlighting, a11y, with JS', async ({ page }) => { await page.locator("a.quarto-color-scheme-toggle").click(); // dark inline code - await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); + await expect(pythonCode).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); await expect(pythonCode).toHaveCSS('color', 'rgb(192, 128, 216)'); // dark highlight stylesheet await expect(importKeyword).toHaveCSS('color', 'rgb(248, 248, 242)'); @@ -69,7 +69,7 @@ test('Syntax highlighting, arrow, with JS', async ({ page }) => { await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)'); // light inline code const pythonCode = await page.locator('li code.sourceCode.python'); - await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); + await expect(pythonCode).toHaveCSS('background-color', 'rgba(233, 236, 239, 0.65)'); await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); // alert const link = await page.locator('span.al').first(); @@ -77,6 +77,6 @@ test('Syntax highlighting, arrow, with JS', async ({ page }) => { await page.locator("a.quarto-color-scheme-toggle").click(); // dark inline code - await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)'); - await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); + await expect(pythonCode).toHaveCSS('background-color', 'rgba(37, 41, 46, 0.65)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(122, 130, 136)'); });