Badges from sphinx_design have wrong colors

[stefanodavid]

Describe the bug

I think there is something fishy going on with badges using the secondary colour.

context When I create a new project using sphinx_book_theme and sphinx_design, colors of secondary badges seems (is?) wrong

expectation I expected badges with secondary colour to have a gray background (#6c757d) as defined in sphinx-design (and how it was before I migrated from sphinx-rtd-theme.

bug The secondary badge instead has an orange background, #ee9040. Moreover, the CSS is defined with !important, which makes it impossible to override.

Reproduce the bug

1. create a new project using html_theme = 'sphinx_book_theme' extensions = ['sphinx design']
2. copy https://github.com/executablebooks/sphinx-design/blob/main/docs/snippets/rst/badge-basic.txt into index.rst
3. build project
4. compare with [1] https://sphinx-design.readthedocs.io/en/alabaster-theme/badges_buttons.html#badges

Note that even if you check [1] and change theme to sbt, badge with secondary colour changes.

And even stranger: on one of my projects, the secondary badges have completely different colours :D

List your environment

The problem arises on debian/devuan/ubuntu using Python 3.11 and relevant packages:

Sphinx==5.3.0 (the version should matter unless it's < 7.0 sphinx-book-theme==1.0.1 sphinx_design==0.5.0

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[stefanodavid]

As a workaround, define these rules in your custom CSS (other may be needed, this works on my projects)

.sd-outline-secondary {
    border-color:  #6c757d !important;
}

.sd-text-secondary {
    color:  #6c757d !important;
}

.sd-bg-secondary {
    background-color:  #6c757d !important;
}