How to supply a custom gradient background to `sidebar()`?
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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