Merge pull request #11828 from quarto-dev/fix/border-color

Author: cderv

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
 

src/resources/formats/html/bootstrap/_bootstrap-variables.scss

@@ -272,9 +272,12 @@ $link-weight: $font-weight-base !default;
 $link-decoration: null !default;
 
 // border colors
+/// 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, #fff),
-  $body-contrast-bg,
-  30%
+  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;

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|

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

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,44 @@ 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');
-})
+})
+
+test('border color from default theme does not change (like disappearing)', async ({ page }) => {
+  await page.goto('./html/default-border-color.html');
+
+  // callout border
+  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
+  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');
+  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');
+
+});