Designsystemet Theme — ds

Override Designsystemet CSS tokens for color, typography, and spacing. Call inside your UI alongside use_designsystemet().

Usage

ds_theme(
  color = NULL,
  font_size = NULL,
  border_radius = NULL,
  button_padding = NULL,
  ...
)

Arguments

color: Global color context. One of "default", "brand1", "brand2", "neutral", "success", "warning", "danger", "info". Sets data-color on <html>.
font_size: Base font size as a CSS value (e.g. "16px", "1rem"). Overrides --ds-font-size-base on :root.
border_radius: Border radius as a CSS value (e.g. "4px", "0"). Overrides --ds-border-radius-md on :root.
button_padding: Padding for buttons as a CSS shorthand (e.g. "0.4rem 0.9rem"). Overrides --dsc-button-padding on :root.
...: Named CSS custom property overrides in the form "--ds-token-name" = "value". Applied to :root.

Value

A <style> tag applied to :root and optionally a JS snippet to set data-color on <html>.

Details

Color palette tokens follow the Designsystemet naming convention. Use data-color="brand2" on a container to switch its color context, or set color here to change the global default.

Examples

ui <- bslib::page_fluid(
  use_designsystemet(),
  ds_theme(color = "brand1", border_radius = "2px", button_padding = "0.3rem 0.8rem"),
  ds_button("Click me", inputId = "btn")
)