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

[MayaGans]

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?

[cpsievert]

Hi Maya! Glad you're interested in bslib :)

TIL that gradients must be applied to background, not background-color, which is the core issue here. It seems our Sass/CSS variables could/should set background instead of background-color, but in the meantime, you could achieve the same effect this way:

page_sidebar(
  theme = bs_theme() |>
    bs_add_rules(
      ".bslib-sidebar-layout .sidebar {
        background: linear-gradient(#e66465, #9198e5); 
      }"
    ),
  sidebar = sidebar(fg = "white"),
  "Main UI"
)

[gadenbuie]

Another thing to try is to use the new bg-gradient-{from}-{to} classes (in the dev version of bslib), which come with prebuilt gradients:

page_sidebar(
  theme = bs_theme(preset = "shiny"),
  sidebar = sidebar(
    class = "bg-gradient-pink-blue",
    bg = "blue",
    title = "Happy Sidebar"
  ),
  "Main UI"
)

TIL that gradients must be applied to background, not background-color, which is the core issue here. It seems our Sass/CSS variables could/should set background instead of background-color

I think bslib's approach is defensible here. The bg and fg arguments of sidebar() require CSS colors so that we can compute the correct contrasting color. When setting a gradient or any other kind of background property, it's generally a good idea to set background-color as a fallback, and in fact even if you're using CSS classes (like ours or your own), it's best practice to set bg or fg appropriately so that the collapse toggle can pick up the correct colors.

Personally, I'd advocate for the approach I've used above: use a custom class to set the background gradient, giving sidebar() an appropriate fg or bg color.

Alternatively, the custom class should also set --bslib-sidebar-fg and --bslib-sidebar-bg appropriately. (Although we could update the sidebar CSS to hook in to the --bslib-color-{fg,bg} props used by the bg-gradient-*-* classes.)