Enable built-in Sass modules
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 569
- Forks
- 72
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 5
Description
Hi
Is it possible to allow usage of built-in Sass modules? quarto cli discussion #12254 might be helpful.
Here is some starter code for the subsequent examples.
library(bslib)
library(shiny)
custom_theme <- bs_theme(version = 5)
# UI ---------------------------------------------------------------------------
ui <- page_navbar(
theme = custom_theme,
nav_panel(
"One",
card(
card_header("card header goes here", class = "bg-aaa"),
"card content goes here"
)
),
nav_panel("Two"),
nav_panel("Three")
)
# Server -----------------------------------------------------------------------
server <- function(input, output) {
}
# Run the application ----------------------------------------------------------
shinyApp(ui = ui, server = server)
In the bslib getting started theming Variables docs we find the example
bs_theme("progress-bar-bg" = "mix(white, orange, 20%)")
We can use the deprecated lighten() function (deprecated as mix() above, but it's less illustrative for mix()) to turn the navbar slightly orange.
custom_theme <- bs_theme(
version = 5,
bg = "white",
"navbar-bg" = "lighten(#e06d33, 30%)",
fg = "black"
)
How can we @use the Sass color module's scale()?
custom_theme <- bs_theme(
version = 5,
bg = "white",
"navbar-bg" = "color.scale(#e06d33, $lightness: 50%)",
fg = "black"
)
Similarly, this works
custom_theme <- bs_theme(version = 5) |>
bs_add_variables("aaa" = "#e06d33") |>
bs_add_rules(
"
.bg-aaa {
background-color: lighten($aaa, 20%);
}
"
)
But we wished to do
custom_theme <-bs_theme(version = 5) |>
bs_add_variables("aaa" = "#e06d33") |>
bs_add_rules(
"
.bg-aaa {
background-color: color.scale($aaa, 50%);
}
"
)
or
custom_theme <- bs_theme(version = 5) |>
bs_add_variables("aaa" = "#e06d33") |>
bs_add_rules(
"
@use 'sass:color';
.bg-aaa {
background-color: color.scale($aaa, 50%);
}
"
)
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
No source file or test is identified in the issue. Start by reviewing the linked Quarto CLI discussion and reproducing the Sass examples; done means built-in modules can be used both in theme variable expressions and in rules added through bs_add_rules().
Written by the indexing model from the issue text.
Assessment
- Tech stack
- r, sass
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100