R shiny app using golem : how to use existing design system (CSS+JS)?

Question

I'm developing a Shiny App using the golem package. I want to use an existing design system (https://github.com/GouvernementFR/dsfr), full of css & js files.

Let's say my golem Shiny App is just :

app_ui <- function(request) {
  tagList(
    golem_add_external_resources(),
    ui <- fluidPage(
      actionButton("button","Button")
  ))
}
# Useless server
app_server <- function(input, output, session) {
}

I'm struggling with details, like for example in the button.css file, the button is not simply referenced as "btn" as usual but "fr-btn". How do I tell my golem Shiny app that my actionButtons would be called "fr-btn" from now on ?

.fr-btn {
  --text-spacing: 0;
  --title-spacing: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  --idle: transparent;
  color: var(--text-inverted-blue-france);
}

Is there a way to simply drop the whole design system folder in the www folder of my app and get it working ?

Sorry for the naive approach, I'm still learning to use both the golem framework and the custom CSS.

Answer 1

We've started to integrate the dsfr in {shinygouv}:

https://github.com/spyrales/shinygouv

Note that not everything is implemented, but that should do the trick :)

Colin