rstudio / rstudio/bslib

How to supply a custom gradient background to `sidebar()`?

Open
#812 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
569
Forks
72
Avg merge
1d 2h
Merged PRs (30d)
5

Description

Hi friends! First of all I'm obsessed with this package we don't deserve you all but of course I'm gonna ask to do weird outlier things LOL - not sure if this is a bug or by design.....

overriding a boostrap variable with a hex code works just fine:

page_sidebar(
   sidebar = "",
   theme = bs_add_variables(
      bs_theme(),
      "bslib-sidebar-bg" = "#e66465"
   )
)

But if I want to use a linear gradient I get a sass error?

page_sidebar(
   sidebar = "",
   theme = bs_add_variables(
      bs_theme(),
      "bslib-sidebar-bg" = "linear-gradient(#e66465, #9198e5)"
   )
)
Error in compile_data(sass_input, options) : 
  Error: argument `$color` of `red($color)` must be a color
        on line 60:10 of ../../../home/maya.gans/R/x86_64-pc-linux-gnu-library/4.3/bslib/sass-utils/color-contrast.scss, in function `red`
        from line 60:10 of ../../../home/maya.gans/R/x86_64-pc-linux-gnu-library/4.3/bslib/sass-utils/color-contrast.scss, in function `luminance`
        from line 49:8 of ../../../home/maya.gans/R/x86_64-pc-linux-gnu-library/4.3/bslib/sass-utils/color-contrast.scss, in function `contrast-ratio`
        from line 31:22 of ../../../home/maya.gans/R/x86_64-pc-linux-gnu-library/4.3/bslib/sass-utils/color-contrast.scss, in function `color-contrast`
        from line 12:20 of ../../../home/maya.gans/R/x86_64-pc-linux-gnu-library/4.3/bslib/components/_variables.scss
        from line 15:9 of stdin
>>     "r": red($color),

   ---------^

I know that linear-gradient can only be used on the background property, maybe $bslib-sidebar-bg is used for a different property?

I also tried the code below which looks like is just another way of assigning bslib-background-bg but now the sidebar is just white and I don't get any error?

page_sidebar(
   sidebar = sidebar(
      bg = "linear-gradient(#e66465, #9198e5)", 
      fg = 'white'
   )
)

Any tips?

Contributor guide

No contributing guide indexed for this repository

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.

Research direction

Start with the supplied page_sidebar() reproductions and trace the Sass error through sass-utils/color-contrast.scss and components/_variables.scss. Check how bslib-sidebar-bg and sidebar(bg=...) are consumed, then verify that a linear-gradient value compiles and renders as the sidebar background without breaking color-contrast handling.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, sass
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.