quarto-dev / quarto-dev/quarto-cli

Improve line and border color on webpages when brand is used

Open
#11,500 2 comments 0 reactions 1 assignee View on GitHub

@cscheid is already working on this.

Since Nov 21, 2024.

brand early-in-release enhancement html
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Particularly in examples with a dark background a lot of lines and borders are white with no easy way to control them.

Steps to reproduce

Preview this webpage project: index.qmd and _quarto.yml

index.qmd:

---
title: "lines"
toc: true
brand:
  color:
    background: "#222"
    foreground: "#ee7"
    primary: "rgb(238, 163, 0)"
---

## Section

```{.r filename="Filename"}
# CODE
```

## Another section

_quarto.yml:

project:
  type: website

website:
  sidebar:
    contents:
      - href: index.qmd
        text: Home
Expected behavior

Borders and lines should probably inherit from foreground, or the element they are surrounding.

Actual behavior

Image
Image

Lots of lines and borders aren't a great color by default:

  • TOC border on in-active sections
  • Border around search box
  • Line under <h2> header
  • Border around a code cell
  • Line under the sidebar when it is collapsed on a small screen

Some of these can be controlled by $table-border-color, e.g:

brand:
  color:
    background: "#222"
    foreground: "#ee7"
    primary: "rgb(238, 163, 0)"
  defaults:
    bootstrap:
      defaults:
        table-border-color: black

But, it's unintuitive to use something called table-border-color (especially since it doesn't actually change the color in <table> elements).

Your environment

No response

Quarto check output
$ quarto check
Quarto 99.9.9
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: bf93178346e68f721714ef4c7f792943b4d80f6e
      Path: /Users/charlottewickham/Documents/posit/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2024.03.13
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.1
      Path: /Users/charlottewickham/Documents/posit/quarto-web/.venv/bin/python
      Jupyter: 5.7.2
      Kernels: julia-1.10, ark, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.3
      Path: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources
      LibPaths:
        - /Users/charlottewickham/Library/R/arm64/4.3/library
        - /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
      knitr: 1.45
      rmarkdown: 2.28

[✓] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.