support for quarto theme

[LiNk-NY]

As quarto vignettes become feasible, a BiocStyle type of styling should be provided to Bioconductors.
I've asked Claude.ai to help me write a biocstylesque.scss file below:

/*-- scss:defaults --*/

// Color Palette
$bioc-primary: #1a81c2;
$bioc-secondary: #005C7A;
$bioc-text-dark: #333333;
$bioc-text-light: #556B7F;
$bioc-background: #FFFFFF;
$bioc-sidebar-bg: #F0F4F8;
$bioc-border-light: #D9E6F0;
$bioc-title-color: #87b13f;

// Typography
$font-stack-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;

/*-- scss:mixins --*/
@mixin bioc-heading {
    color: $bioc-primary;
    font-weight: 500;
    border-bottom: 1px solid $bioc-border-light;
    padding-bottom: 0.3em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
    @include bioc-heading;
}

h1 {
    font-size: 2em;
    border-bottom: 2px solid $bioc-primary;
    &.title { //target h1 with class title.
        color: $bioc-title-color; //apply custom color.
    }
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.3em;
}

h4 {
    font-size: 1.2em;
}

// Links
a {
    color: $bioc-primary;
    text-decoration: none;

    &:hover {
        color: darken($bioc-primary, 10%);
        text-decoration: underline;
    }
}

// Code blocks
pre, code {
    border-color: lighten($bioc-primary, 40%);
}

/*-- scss:uses --*/
// Additional customizations

which renders into:

_{Using quarto cli version 1.8.0}

[lgatto]

That's great, thank you. I will try to test this later. Where would it need to be added? In my package's vignette directory and then point to in in my vignette header, or can we add it in BiocStyle?

[grimbough]

Thanks @LiNk-NY for looking into this. Agreed it will be a useful addition. Any idea who's primarily responsible for BiocStyle is now? Is it still @aoles ?

---

Just a quick glance athe screen shot, do you know what's happening with the author and affiliation columns? They look a bit jumbled up there.

[LiNk-NY]

@grimbough

Just a quick glance athe screen shot, do you know what's happening with the author and affiliation columns? They look a bit jumbled up there.

I tested this on the latest version of quarto and it has been resolved (at least) in the quarto cli version 1.8.0. I also updated the screenshot. Thanks!

[federicomarini]

A later test as of July 2025, adding a few possible add-ons to have (cross)references displayed a bit better

As in the previous tests: our prompt, Claude's reply (pretty spot on)

/*-- scss:defaults --*/

// Color Palette
$bioc-primary: #1a81c2;
$bioc-secondary: #005C7A;
$bioc-text-dark: #333333;
$bioc-text-light: #556B7F;
$bioc-background: #FFFFFF;
$bioc-sidebar-bg: #F0F4F8;
$bioc-border-light: #D9E6F0;
$bioc-title-color: #87b13f;
// $bioc-reference-hover: #666666;
$bioc-reference-hover: lighten($bioc-secondary, 20%); // Lighter tone of secondary color for reference hover

// Typography
$font-stack-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;

/*-- scss:mixins --*/
@mixin bioc-heading {
    color: $bioc-primary;
    font-weight: 500;
    border-bottom: 1px solid $bioc-border-light;
    padding-bottom: 0.3em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
    @include bioc-heading;
}

h1 {
    font-size: 2em;
    border-bottom: 2px solid $bioc-primary;
    &.title { //target h1 with class title.
        color: $bioc-title-color; //apply custom color.
    }
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.3em;
}

h4 {
    font-size: 1.2em;
}

// Links
a {
    color: $bioc-primary;
    text-decoration: none;

    &:hover {
        color: darken($bioc-primary, 10%);
        text-decoration: underline;
    }
}

// Code blocks
pre, code {
    border-color: lighten($bioc-primary, 40%);
}

// References styling
.citation, .citation a {
    &:hover {
        color: $bioc-reference-hover !important;
    }
}

// Bibliography/References section
#refs .csl-entry a {
    &:hover {
        color: $bioc-reference-hover !important;
    }
}

// Cross-references (figures, tables, etc.)
.quarto-xref {
    &:hover {
        color: $bioc-reference-hover !important;
    }
}

/*-- scss:uses --*/
// Additional customizations

[federicomarini]

... although I now realize it is not too easy to make a judgment call on what is "better" 😉

What would be the best approach to have such styling "embedded" into basically any next vignette document we want to do with this style? I am still moving my first steps with quarto (I know, I am bit late on the wagon...)

[federicomarini]

As an extra thought: We could even "suggest" to go with our website font, Atkinson Hyperlegible, for the main text components

Incredibly simple to set, from a few tests:

which could give us...

(colors are different, but would do the job to showcase it a bit)

[LiNk-NY]

Hi @federicomarini
Thank you for your suggestions. I have started playing with this on the quarto branch. So far, it doesn't look so straightforward to add a BiocStyle themed vignette via quarto. What has worked for me is the format: html in the yaml header of the vignette along with the custom.scss. Perhaps the first step is to distribute an _extension with the above scss.

[federicomarini]

That is the new thing I still need to fully grasp how it works - these _extension are a bit terse to me.

What if, for the creation of the vignette, we go with a function like BiocStyle::use_bioc_vignette()?

That could copy the content of some template qmd we have in the inst/templates folder, and in there we also have the scss file, and so the references.bib, calls it the name the user just specified, and prompts them open in the editor? I know it is a bit of a bootleg solution, but this is how I would go with some internal report template

[LiNk-NY]

Yes, that is a potential solution but I was wondering if quarto-r has something more distribute-able not only for BiocStyle but for other organizations. You can follow the question here : quarto-dev/quarto-r#269

[federicomarini]

Agreed - I found it odd to not have a pendant, just like it existed for the Rmarkdown templates, somewhat not already directly incorporated into their very powerful sheriff in town for the literate programming cosmos.
Let's see if they have a solution which is more widely applicable.

It seems though that we do not do anything bad by curating further our precious scss file, because that seems to be required whatever approach we might be taking.
I just somewhat replicated the corporate design of our University Medical Center, and I have to say it is quite easy to make it look fine, also documenting a bit the process 🤓

[LiNk-NY]

FWIW I have added an extension here https://github.com/Bioconductor/quarto-extensions though I'm still figuring out how to import the extension at that location using quarto add ...

[federicomarini]

Thanks Marcel for following up on this!
Whatever the solution will be, I am happy to test it in the next submission(s) and/or think of refurbishing some of my vignettes for that purpose.
I did notice there are some aspects which are handled differently, but all in all it is a major improvement IMO (more "consistency" in cross-referencing is manna from the heavens...).

[LiNk-NY]

I have added a quarto engine solution to BiocStyle. It still needs some work as I am not proficient in CSS / SCSS but feel free to test at the quarto branch and see the PR : https://github.com/Bioconductor/BiocStyle/pull/115/files

Thanks!