bs_add_variables(
  theme,
  ...,
  .where = "defaults",
  .default_flag = identical(.where, "defaults")
)

bs_add_rules(theme, rules)

bs_add_declarations(theme, declarations)

bs_bundle(theme, ...)

# Function to preview the styling a (primary) Bootstrap button
library(htmltools)
button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello")
preview_button <- function(theme) {
  if (interactive()) {
    browsable(tags$body(bs_theme_dependencies(theme), button))
  }
}

# Here we start with a theme based on a Bootswatch theme,
# then override some variable defaults
theme <- bs_theme(bootswatch = "sketchy", primary = "orange") %>%
  bs_add_variables(
    "body-bg" = "#EEEEEE",
    "font-family-base" = "monospace",
    "font-size-base" = "1.4rem",
    "btn-padding-y" = ".16rem",
    "btn-padding-x" = "2rem"
  )

preview_button(theme)

# If you need to set a variable based on another Bootstrap variable
theme %>%
  bs_add_variables("body-color" = "$success", .where = "declarations") %>%
  preview_button()

# Start a new global theme and add some custom rules that
# use Bootstrap variables to define a custom styling for a
# 'person card'
person_rules <- system.file("custom", "person.scss", package = "bslib")
theme <- bs_theme() %>% bs_add_rules(sass::sass_file(person_rules))
# Include custom CSS that leverages bootstrap Sass variables
person <- function(name, title, company) {
  tags$div(
    class = "person",
    h3(class = "name", name),
    div(class = "title", title),
    div(class = "company", company)
  )
}
if (interactive()) {
  browsable(shiny::fluidPage(
    theme = theme,
    person("Andrew Carnegie", "Owner", "Carnegie Steel Company"),
    person("John D. Rockefeller", "Chairman", "Standard Oil")
  ))
}