Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Website projects ignore `$border-color` and `$border-radius` defaults because of an invalid `scss:variables` boundary in `quarto-listing.scss`

Open Beginner friendly
  • Is something wrong?
#15,176 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
sass
Domain
build-system

Research direction

Read src/core/sass.ts around lines 201–202 and inspect src/resources/projects/website/listing/quarto-listing.scss around lines 4 and 80–98. Confirm how the layer parser handles the scss:variables boundary, then render the provided website reproduction and compare its CSS with the standalone output. Done when the website honors the theme's $border-color and $border-radius defaults.

Written by the indexing model from the issue text.

Description

bug websites
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

In a website project, a theme that sets $border-color or $border-radius with !default in scss:defaults has no effect.
The same theme works in a standalone document.
Colours and radii that a theme sets for borders, form controls and cards are replaced by Quarto's own values.

quarto-listing.scss starts the functions layer with a valid boundary.

A later line is /*-- scss:variables --*/, followed by variables such as $border-color: $gray-300 !default; and $border-radius: 0.25rem !default;.

The layer parser only accepts uses, functions, rules, defaults and mixins, so variables is read as a comment.

Those variables therefore stay in the functions layer.
Functions are written before all defaults, so they are set first, and the !default of a theme or user layer that comes later is ignored.

With QUARTO_SAVE_SCSS set, the saved file shows the order.
$border-color: $gray-300 !default; is at line 620, inside the 'functions' section from Quarto (lines 490 to 1036).
The theme's $border-color: #ff0000 !default; is at line 1042, under Defaults from user-defined SCSS.

#13960 reports the same kind of bad delimiter for title-block.scss, where the variables are all null !default and nothing breaks.
This file is different, because its variables shadow real theme variables.

Steps to reproduce

custom.scss:

/*-- scss:defaults --*/
$border-color: #ff0000 !default;
$border-radius: 1rem !default;

_quarto.yml of a website project:

project:
  type: website
website:
  title: t
format:
  html:
    theme: [default, custom.scss]

index.qmd is any page with a title.
For comparison, render a standalone document with the same theme: [default, custom.scss].

quarto render
grep -o -- '--bs-border-color:[^;]*' _site/site_libs/bootstrap/bootstrap-*.min.css
grep -o -- '\.form-control{[^}]*}' _site/site_libs/bootstrap/bootstrap-*.min.css | grep -o 'border-radius:[^;]*'
Actual behavior
Output --bs-border-color .form-control border-radius
website project #dee2e6 .25rem
standalone document #ff0000 1rem

Rendered in a website project, the form control and the button keep Quarto's .25rem radius and the grey border:

A table, a form control and a button in a website project: the form control has a grey border and the corners are barely rounded.

The same theme in a standalone document:

The same page as a standalone document: the form control has a red border and round corners, and the button is rounded.

Expected behavior

The !default values of the theme apply in a website project, as they do in a standalone document.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
Dominant language
JavaScript
Stars
6.1k
Forks
471
Avg merge
17h 35m
Merged PRs (30d)
107

Getting set up

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.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.