diff --git a/docs/user_guide/styling.rst b/docs/user_guide/styling.rst index 3e2df90a2..22136676d 100644 --- a/docs/user_guide/styling.rst +++ b/docs/user_guide/styling.rst @@ -117,18 +117,18 @@ Here is an overview of the colors available in the theme (change theme mode to s

- primary - secondary - accent - success - info - warning - danger - background - on-background - surface - on-surface - target + primary + secondary + accent + success + info + warning + danger + background + on-background + surface + on-surface + target

diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss index a75166bbf..8f4cc1081 100644 --- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -178,6 +178,26 @@ pre { color: var(--pst-color-secondary-text); background-color: var(--pst-color-secondary); border: none; + + .fa-arrow-up { + // Using margin instead of a space character prevents the space between the + // icon and the text from being underlined when the button is hovered. + margin-inline-end: 0.5em; + } + + @include link-style-hover; + &:hover { + text-decoration-thickness: 1px; + background-color: var(--pst-violet-600); + color: var(--pst-color-secondary-text); + } + + &:focus-visible { + box-shadow: none; + outline: $focus-ring-outline; + outline-color: var(--pst-color-secondary); + outline-offset: $focus-ring-width; + } } // Focus ring diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss index 5f4cb753f..66bdfdbfb 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -304,3 +304,35 @@ details.sd-dropdown { } } } + +/******************************************************************************* +* Buttons (which in Sphinx Design are actually links that look like buttons) +* ref: https://sphinx-design.readthedocs.io/en/pydata-theme/badges_buttons.html#buttons +*/ +html { + .sd-btn { + min-width: 2.25rem; + padding: 0.3125rem 0.75rem 0.4375rem; // 5px 12px 7px + + @include link-style-hover; // override Sphinx Design + &:hover { + text-decoration-thickness: 1px; + } + } + + @each $name in $sd-semantic-color-names { + .sd-btn-#{$name}, + .sd-btn-outline-#{$name} { + &:focus-visible { + // Override Sphinx Design's use of -highlight colors. The -highlight + // colors are 15% darker, so this would create the effect of darkening + // the button when focused but we just want the button to have a focus + // ring of the same (non-highlight) color. + background-color: var(--sd-color-#{$name}) !important; + border-color: var(--sd-color-#{$name}) !important; + outline: var(--sd-color-#{$name}) solid $focus-ring-width; + outline-offset: $focus-ring-width; + } + } + } +} diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html index b83730c48..71d11c19f 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html @@ -61,7 +61,7 @@ {# the scroll to top button #} {# checkbox to toggle primary sidebar #}