Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve line and border color on webpages when brand is used #11500

Open
cwickham opened this issue Nov 21, 2024 · 0 comments
Open

Improve line and border color on webpages when brand is used #11500

cwickham opened this issue Nov 21, 2024 · 0 comments
Assignees
Labels
backport brand `_brand.yml` bug Something isn't working html Issues with HTML and related web technology (html/css/scss)
Milestone

Comments

@cwickham
Copy link
Collaborator

cwickham commented Nov 21, 2024

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
@cwickham cwickham added brand `_brand.yml` bug Something isn't working labels Nov 21, 2024
@cscheid cscheid self-assigned this Nov 21, 2024
@cscheid cscheid added this to the v1.7 milestone Nov 21, 2024
@mcanouil mcanouil added the html Issues with HTML and related web technology (html/css/scss) label Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport brand `_brand.yml` bug Something isn't working html Issues with HTML and related web technology (html/css/scss)
Projects
None yet
Development

No branches or pull requests

3 participants