Input Selectize render issues on superhero theme

[adampinky85]

Hi team,

We are using the Superhero theme which is really great!

Following upgrading from shiny 0.7.1 to 0.8.1 the input selectize ui element no longer renders correctly:

• Previously it renders with a white background and selected elements with a nice grey boarder in the selection field.
• Currently it renders with the theme background colour, the selected elements have the same colour, there is a white line between selected fields, and the selected fields are not easily visible.

Versions:
shiny: 0.8.1
shinyswatch: 0.5.1

Minimal Example:

import shiny
import shinyswatch


def server(_, __, ___):
    """Shiny main server"""


UI = shiny.ui.page_navbar(
    shinyswatch.theme.superhero(),
    shiny.ui.nav_panel(
        "dashboard",
        shiny.ui.input_selectize(
            "id",
            "labels",
            [1, 2, 3, 4],
            multiple=True,
        ),
    )
)

app = shiny.App(UI, server)

[gadenbuie]

Thanks for the report @adampinky85!

Internal notes: the problem is that we use --bs-tertiary-bg in the selectize styles,

.selectize-dropdown .active:not(.selected) {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color)
}

but from what I can tell Bootswatch hasn't yet (or hasn't in the release we bundle) customized the tertiary colors for its themes.

In the Bootstrap docs, the tertiary colors are described as

Tertiary — Use the color option for even lighter text. Use the bg option to style backgrounds for hover states, accents, and wells.

So while our use of --bs-tertiary-bg is technically correct, it doesn't work across all Bootswatch themes. We could report this upstream, patch in bslib or here in shinyswatch, or adjust the selectize styles in shiny.

[adampinky85]

Hi team, is there any update on fixing this issue? We would really appreciate being able to upgrade to the new versions. Many thanks!