From 66ee1078c0ace3c5f1861272741999e1ac790f77 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Mon, 9 Dec 2024 12:33:00 +0100 Subject: [PATCH 1/5] Use correct default color for new border config Our default theme use default bootstrap variable and is not a real theme like other bootswatch themes. So be sure to use the default value when we do use variables before defaults bootstrap layer applies --- .../formats/html/bootstrap/_bootstrap-variables.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss index 83b1d902b8..466e103feb 100644 --- a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss +++ b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss @@ -272,9 +272,5 @@ $link-weight: $font-weight-base !default; $link-decoration: null !default; // border colors -$border-color: mix( - if(variable-exists(body-color), $body-color, #fff), - $body-contrast-bg, - 30% -) !default; +$border-color: mix($body-contrast-color, $body-contrast-bg, 30%) !default; $table-border-color: $border-color !default; From cd031b997bdab0ea127408300d33bacb9feffd67 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Thu, 9 Jan 2025 17:30:07 +0100 Subject: [PATCH 2/5] Be explicit in the color we are mixing Add comment about using own bootstrap defaults --- .../formats/html/bootstrap/_bootstrap-variables.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss index 466e103feb..c698781fb6 100644 --- a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss +++ b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss @@ -272,5 +272,12 @@ $link-weight: $font-weight-base !default; $link-decoration: null !default; // border colors -$border-color: mix($body-contrast-color, $body-contrast-bg, 30%) !default; +/// if a theme does not provide body-color or body-bg +/// defaults to boostrap own default value for theses variables (in _variables.scss) +$border-color: mix( + if(variable-exists(body-color), $body-color, $gray-900), + if(variable-exists(body-bg), $body-bg, $white), + 15% +) !default; +/// Make sure table border are the same as the border color (in case change in bootstrap default) $table-border-color: $border-color !default; From 0e6f3ad1e0ef327e6980f7b079eaf42f9fc7d949 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 10 Jan 2025 16:55:05 +0100 Subject: [PATCH 3/5] test - Add some playwright tests for default border colors --- .../playwright/html/default-border-color.qmd | 33 ++++++++++++++++ tests/integration/playwright/src/utils.ts | 16 ++++++-- .../playwright/tests/html-themes.spec.ts | 39 ++++++++++++++++++- 3 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 tests/docs/playwright/html/default-border-color.qmd diff --git a/tests/docs/playwright/html/default-border-color.qmd b/tests/docs/playwright/html/default-border-color.qmd new file mode 100644 index 0000000000..072ca7b5bf --- /dev/null +++ b/tests/docs/playwright/html/default-border-color.qmd @@ -0,0 +1,33 @@ +--- +title: "Checking that border color for default does not change" +format: + html: + theme: litera +--- + +::: callout-note + +Content + +::: + +::: {.panel-tabset} + +## Tab 1 + +This is a playground for Quarto. + +## Tab 2 + +Another Tab + +## Tab 3 + +![An image]({{< placeholder 600 400 >}}){#fig-placeholder} + +::: + +| | mpg| cyl| +|:-------------|---:|---:| +|Mazda RX4 | 21| 6| +|Mazda RX4 Wag | 21| 6| \ No newline at end of file diff --git a/tests/integration/playwright/src/utils.ts b/tests/integration/playwright/src/utils.ts index f1f6b5ff6f..bb0266319a 100644 --- a/tests/integration/playwright/src/utils.ts +++ b/tests/integration/playwright/src/utils.ts @@ -125,14 +125,18 @@ export type RGBColor = { red: number; green: number; blue: number; + alpha?: number; }; export async function checkColor(element, cssProperty, rgbColors: RGBColor) { - await expect(element).toHaveCSS(cssProperty, `rgb(${rgbColors.red}, ${rgbColors.green}, ${rgbColors.blue})`); + const colorString = rgbColors.alpha !== undefined + ? `rgba(${rgbColors.red}, ${rgbColors.green}, ${rgbColors.blue}, ${rgbColors.alpha})` + : `rgb(${rgbColors.red}, ${rgbColors.green}, ${rgbColors.blue})`; + await expect(element).toHaveCSS(cssProperty, colorString); } -export function asRGB(red: number, green: number, blue: number): RGBColor { - return { red, green, blue }; +export function asRGB(red: number, green: number, blue: number, alpha?: number): RGBColor { + return { red, green, blue, alpha }; } export async function getCSSProperty(loc: Locator, variable: string, asNumber = false): Promise { @@ -147,7 +151,6 @@ export async function getCSSProperty(loc: Locator, variable: string, asNumber = } } - 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); @@ -157,4 +160,9 @@ export async function checkFontSizeSimilar(loc1: Locator, loc2: Locator, factor: 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); +} + +export async function checkBorderProperties(element: Locator, side: string, color: RGBColor, width: string) { + await checkColor(element, `border-${side}-color`, color); + await expect(element).toHaveCSS(`border-${side}-width`, width); } \ No newline at end of file diff --git a/tests/integration/playwright/tests/html-themes.spec.ts b/tests/integration/playwright/tests/html-themes.spec.ts index 08b71d33b2..8d78f25262 100644 --- a/tests/integration/playwright/tests/html-themes.spec.ts +++ b/tests/integration/playwright/tests/html-themes.spec.ts @@ -1,5 +1,5 @@ import { test, expect } from '@playwright/test'; -import { getCSSProperty } from '../src/utils'; +import { asRGB, checkBorderProperties, checkColor, getCSSProperty } from '../src/utils'; test('Dark and light theme respect user themes', async ({ page }) => { // This document use a custom theme file that change the background color of the title banner @@ -37,4 +37,39 @@ test('Mainfont can be set to multiple mainfont families', async ({ page }) => { expect(await getCSSProperty(page.locator('body'), '--bs-body-font-family', false)).toEqual('Creepster, "Cascadia Code", Inter'); await page.goto('./html/mainfont/mainfont-3.html'); expect(await getCSSProperty(page.locator('body'), '--bs-body-font-family', false)).toEqual('Creepster, "Cascadia Code", Inter'); -}) \ No newline at end of file +}) + +test('border color from default theme does not change (like disappearing)', async ({ page }) => { + await page.goto('./html/default-border-color.html'); + + // callout border + for (const side of ['bottom', 'right', 'top']) { + await checkBorderProperties(page.getByText('Note Content'), side, asRGB(0, 0, 0, 0.1), '1px'); + } + + // tabset border + for (const side of ['bottom', 'right', 'left']) { + await checkBorderProperties( + page.getByText('This is a playground for Quarto. Another Tab'), + side, + asRGB(225, 225, 226), + '1px' + ); + } + + // table borders + const table = page.locator('table'); + const headerColor = asRGB(154, 157, 160); + const borderColor = asRGB(214, 216, 217); + // table defines top and bottom borders + await checkBorderProperties(table, 'top', borderColor, '1px'); + await checkBorderProperties(table, 'bottom', borderColor, '1px'); + + // table header row have a specific bottom row, other are colorized but hidden (width 0) + const thead = table.locator('> thead'); + await checkBorderProperties(thead, 'bottom', headerColor, '1px'); + await checkBorderProperties(thead, 'top', borderColor, '0px'); + await checkBorderProperties(thead, 'left', asRGB(0, 0, 0, 0.1), '0px'); + await checkBorderProperties(thead, 'right', asRGB(0, 0, 0, 0.1), '0px'); + +}); \ No newline at end of file From 56085e8af7b89ccbdfc04db10cc8139b9bdab4bc Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 10 Jan 2025 16:58:30 +0100 Subject: [PATCH 4/5] Add regression fix changelog entry in 1.7 too --- 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 6001ecf759..e555159ab8 100644 --- a/news/changelog-1.7.md +++ b/news/changelog-1.7.md @@ -7,6 +7,7 @@ All changes included in 1.7: - ([#11549](https://github.com/quarto-dev/quarto-cli/issues/11549)): Fix regression in rendering `dashboard` tabsets into cards without titles. - ([#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. ## YAML validation From 4b31c88967bc8c3b80ae24b3f95358bbef73859a Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 10 Jan 2025 17:27:52 +0100 Subject: [PATCH 5/5] rewrite test for better linux support and easier readibility --- .../playwright/tests/html-themes.spec.ts | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/tests/integration/playwright/tests/html-themes.spec.ts b/tests/integration/playwright/tests/html-themes.spec.ts index 8d78f25262..392bba4a32 100644 --- a/tests/integration/playwright/tests/html-themes.spec.ts +++ b/tests/integration/playwright/tests/html-themes.spec.ts @@ -43,19 +43,24 @@ test('border color from default theme does not change (like disappearing)', asyn await page.goto('./html/default-border-color.html'); // callout border - for (const side of ['bottom', 'right', 'top']) { - await checkBorderProperties(page.getByText('Note Content'), side, asRGB(0, 0, 0, 0.1), '1px'); - } + const calloutNote = page.locator('div.callout-note'); + const calloutBorderColor = asRGB(0, 0, 0, 0.1); + await checkBorderProperties(calloutNote, 'bottom', calloutBorderColor, '1px'); + await checkBorderProperties(calloutNote, 'right', calloutBorderColor, '1px'); + await checkBorderProperties(calloutNote, 'top', calloutBorderColor, '1px'); // tabset border - for (const side of ['bottom', 'right', 'left']) { - await checkBorderProperties( - page.getByText('This is a playground for Quarto. Another Tab'), - side, - asRGB(225, 225, 226), - '1px' - ); - } + const tabContent = page.locator('div.tab-content'); + const tabBorderColor = asRGB(225, 225, 226); + await checkBorderProperties(tabContent, 'bottom', tabBorderColor, '1px'); + await checkBorderProperties(tabContent, 'right', tabBorderColor, '1px'); + await checkBorderProperties(tabContent, 'left', tabBorderColor, '1px'); + + const activeNavLink = page.locator('li.nav-item > a.nav-link.active'); + await checkBorderProperties(activeNavLink, 'top', tabBorderColor, '1px'); + await checkBorderProperties(activeNavLink, 'right', tabBorderColor, '1px'); + await checkBorderProperties(activeNavLink, 'left', tabBorderColor, '1px'); + await checkBorderProperties(activeNavLink, 'bottom', asRGB(255, 255, 255), '1px'); // table borders const table = page.locator('table');