rstudio / rstudio/bslib

Enable built-in Sass modules

Open
#1,206 4 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

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

  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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.