From 71d72d887dca57004e83107ebd0ed52f0cc9d258 Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 3 Jul 2023 11:12:18 +0100 Subject: [PATCH 1/7] Ensure search hover is aligned with the rest of the theme --- src/pydata_sphinx_theme/assets/styles/components/_search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss index 6deeefdfd..1c480cfdd 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss @@ -144,7 +144,7 @@ &:hover, &:focus { background-color: var(--pst-color-surface); - border-color: var(--pst-color-primary); + border: 2px solid var(--pst-color-link-hover); } // The keyboard shotcut text From 29a1101557551f29931e0061c7606a0660415b6b Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 3 Jul 2023 11:26:12 +0100 Subject: [PATCH 2/7] Add focus-visible to search field --- .../assets/styles/components/_search.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss index 1c480cfdd..fd53a3dd4 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss @@ -141,11 +141,13 @@ color: var(--pst-color-text-muted); padding: 0.5em; - &:hover, - &:focus { + &:hover { background-color: var(--pst-color-surface); border: 2px solid var(--pst-color-link-hover); } + &:focus-visible { + border: 2px solid var(--pst-color-accent); + } // The keyboard shotcut text .search-button__kbd-shortcut { From 1ec94aab26f1c4f720fdb70830c11259c11473fe Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 3 Jul 2023 11:27:27 +0100 Subject: [PATCH 3/7] :bug: Fix variable --- .../assets/styles/abstracts/_links.scss | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss index 875a6252b..f3fe96be1 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss @@ -20,7 +20,7 @@ $link-underline-offset: 0.1578em !default; // - 0.1875rem, if it's thicker than 3px because the user has changed the text // size in their browser // - 0.12em (relative to the link's text size) -$link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; +$link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default; // Ensures links have an underline decoration by default - needed to meet // WCAG SC 1.4.1 @@ -39,8 +39,8 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; // Ensures links have an underline decoration on hover - distinct from the // default behaviour @mixin link-decoration-hover { - @if $link-hover-underline-thickness { - text-decoration-thickness: $link-hover-underline-thickness; + @if $link-hover-decoration-thickness { + text-decoration-thickness: $link-hover-decoration-thickness; // Disable ink skipping on underlines on hover. Browsers haven't // standardised on this part of the spec yet, so set both properties text-decoration-skip-ink: none; // Chromium, Firefox @@ -132,12 +132,13 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; // Adds a vertical line on the left hand side of the link to indicate that // it's the current page. Note this is distinct from an active state. // Used on the primary sidebar and the TOC. +// We want the side box shadow to have the same thickness as the hover underline @mixin link-sidebar-current { font-weight: 600; color: var(--pst-color-primary); - @if $link-underline-thickness { + @if $link-hover-decoration-thickness { box-shadow: inset - $link-underline-thickness + $link-hover-decoration-thickness 0px 0px var(--pst-color-primary); @@ -148,19 +149,30 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; // // Adds a bottom underline, this leaves enough space for the hover state without // cluttering the navbar. +// We want the side box shadow to have the same thickness as the hover underline @mixin link-navbar-current { font-weight: 600; - border-bottom: $link-hover-underline-thickness solid var(--pst-color-primary); color: var(--pst-color-primary); + @if $link-hover-decoration-thickness { + border-bottom: $link-hover-decoration-thickness + solid + var(--pst-color-primary); + } } // Navigation bar icon links hover styles // // Adds a bottom box-shadow - since there is no text we cannot use text-decoration +// We want the side box shadow to have the same thickness as the hover underline @mixin icon-navbar-hover { &:hover { color: var(--pst-color-link-hover); - box-shadow: 0px $link-underline-thickness 0px var(--pst-color-hover); + @if $link-hover-decoration-thickness { + box-shadow: 0px + $link-hover-decoration-thickness + 0px + var(--pst-color-link-hover); + } } } From a3960d7720d6ceb57221220dd9b4d9487a0bf02a Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 3 Jul 2023 11:27:45 +0100 Subject: [PATCH 4/7] :wheelchair: Ensure sidebar toggle is focusable --- .../theme/pydata_sphinx_theme/sections/header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html index 554166717..01744a812 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html @@ -40,7 +40,7 @@ {% endfor %} {% if not remove_sidebar_secondary %} -