From dc5f8c0df12082133f6b81379e013512581bf11b Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 16 Feb 2024 15:42:15 -0500 Subject: [PATCH 01/10] Independently style switch to stable version link --- .../assets/scripts/pydata-sphinx-theme.js | 2 +- .../assets/styles/sections/_announcement.scss | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js index 5ebdb0881..af1c768e4 100644 --- a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js +++ b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js @@ -489,7 +489,7 @@ function showVersionWarningBanner(data) { middle.classList = "bd-header-announcement__content"; inner.classList = "sidebar-message"; button.classList = - "sd-btn sd-btn-danger sd-shadow-sm sd-text-wrap font-weight-bold ms-3 my-1 align-baseline"; + "btn font-weight-bold ms-3 my-1 align-baseline button-link-to-stable-version"; button.href = `${preferredURL}${DOCUMENTATION_OPTIONS.pagename}.html`; button.innerText = "Switch to stable version"; button.onclick = checkPageExistsAndRedirect; diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss index 883087398..16b53d705 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -33,6 +33,14 @@ a { color: var(--pst-color-inline-code-links); } + + .button-link-to-stable-version { + @include box-shadow(); + background-color: var(--pst-color-danger); + border-color: var(--pst-color-danger); + color: var(--pst-color-heading-color); + border-radius: 0.25rem; + } } // Bg color is now defined in the theme color palette - using our secondary color From 1fa21c4a910d514384c8e8fc9638c1529c2f666a Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 16 Feb 2024 15:57:39 -0500 Subject: [PATCH 02/10] hover and focus --- .../assets/styles/sections/_announcement.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss index 16b53d705..7295aed7b 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -40,6 +40,16 @@ border-color: var(--pst-color-danger); color: var(--pst-color-heading-color); border-radius: 0.25rem; + + &:hover { + background-color: var(--pst-color-danger-highlight); + border-color: var(--pst-color-danger-highlight); + color: var(--pst-color-heading-color); + } + + &:focus-visible { + outline: 2px solid var(--pst-color-heading-color); + } } } From f0c94753f5c280fe613916bcc132f1b259d74a48 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 16 Feb 2024 17:39:28 -0500 Subject: [PATCH 03/10] docs and css cleanup --- docs/user_guide/web-components.rst | 27 ++++++++++++++----- .../assets/styles/sections/_announcement.scss | 20 +++++++++----- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/docs/user_guide/web-components.rst b/docs/user_guide/web-components.rst index 7a96cb355..70a76ffd6 100644 --- a/docs/user_guide/web-components.rst +++ b/docs/user_guide/web-components.rst @@ -4,16 +4,31 @@ Sphinx Design Components ======================== -The PyData Sphinx Theme uses `sphinx-design `__ -to add several UI components and provide extra flexibility for content creation. -These include badges, buttons, cards, and tabs, among other components. -This theme provides custom CSS to ensure that `sphinx-design `__ elements look and feel consistent with this theme. +On this page, you will find user interface components such as badges, buttons, +cards, and tabs. + +The components on this page are **not provided by PyData Theme**. They are +provided by a Sphinx extension called Sphinx Design. This means that if you wish +to use the components on this page, you must install Sphinx Design separately. .. seealso:: - For more information about how to use these extensions, see `the sphinx-design documentation `_. + To add the Sphinx Design extension to your Sphinx project, refer to `Sphinx + Design - Getting Started + `_. + +Contributors to both projects have worked to ensure compatible styling so that +Sphinx Design components look and feel consistent with the PyData Theme. + +This page shows you how the Sphinx Design components would look on your site if +you were to use them in combination with the PyData Theme. Sphinx Design also +provides a `PyData-themed version of the Sphinx Design site +`__; however, their site +use an older version of this theme. -Below you can find some examples of the components created with the :code:`sphinx-design` extension. +Any customizations you make to the theme could affect how these components +appear on your site. So what you see on this page might not match exactly what +you see on your site even if your site uses this theme. .. _badges-buttons: diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss index 7295aed7b..fd28b1a5b 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -36,19 +36,25 @@ .button-link-to-stable-version { @include box-shadow(); - background-color: var(--pst-color-danger); - border-color: var(--pst-color-danger); - color: var(--pst-color-heading-color); + + $background-color: var(--pst-color-danger); + $hover-background-color: var(--pst-color-danger-highlight); + $color: var(--pst-color-heading-color); + + background-color: $background-color; + border-color: $background-color; + color: $color; border-radius: 0.25rem; &:hover { - background-color: var(--pst-color-danger-highlight); - border-color: var(--pst-color-danger-highlight); - color: var(--pst-color-heading-color); + background-color: $hover-background-color; + border-color: $hover-background-color; + color: $color; } &:focus-visible { - outline: 2px solid var(--pst-color-heading-color); + outline: 0.1875rem solid $background-color; + outline-offset: 0.1875rem; } } } From a9552cd94b8b69951e71ec159ba656c153d95f2c Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 16 Feb 2024 19:36:40 -0500 Subject: [PATCH 04/10] Use focus ring Sass variables --- .../assets/styles/sections/_announcement.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss index fd28b1a5b..25aed34b0 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -34,6 +34,7 @@ color: var(--pst-color-inline-code-links); } + // The "Switch to stable version" link (styled like a button) .button-link-to-stable-version { @include box-shadow(); @@ -53,8 +54,8 @@ } &:focus-visible { - outline: 0.1875rem solid $background-color; - outline-offset: 0.1875rem; + outline: $focus-ring-width solid $background-color; + outline-offset: $focus-ring-width; } } } From 50f58d7339401801ad453947379493e98cf5a872 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 16 Feb 2024 19:40:20 -0500 Subject: [PATCH 05/10] text-wrap class --- src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js index af1c768e4..27c8a4845 100644 --- a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js +++ b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js @@ -489,7 +489,7 @@ function showVersionWarningBanner(data) { middle.classList = "bd-header-announcement__content"; inner.classList = "sidebar-message"; button.classList = - "btn font-weight-bold ms-3 my-1 align-baseline button-link-to-stable-version"; + "btn text-wrap font-weight-bold ms-3 my-1 align-baseline button-link-to-stable-version"; button.href = `${preferredURL}${DOCUMENTATION_OPTIONS.pagename}.html`; button.innerText = "Switch to stable version"; button.onclick = checkPageExistsAndRedirect; From e362e3f81ee9282c1bc4736b9f5ba33eaa58d915 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Wed, 28 Feb 2024 10:58:12 -0600 Subject: [PATCH 06/10] Update docs/user_guide/web-components.rst Co-authored-by: Tania Allard --- docs/user_guide/web-components.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user_guide/web-components.rst b/docs/user_guide/web-components.rst index 70a76ffd6..39dd0a58b 100644 --- a/docs/user_guide/web-components.rst +++ b/docs/user_guide/web-components.rst @@ -8,7 +8,7 @@ On this page, you will find user interface components such as badges, buttons, cards, and tabs. The components on this page are **not provided by PyData Theme**. They are -provided by a Sphinx extension called Sphinx Design. This means that if you wish +provided by `Sphinx Design _` (a Sphinx extension). This means that if you wish to use the components on this page, you must install Sphinx Design separately. .. seealso:: From 0f8b0f6a81576fc67d35f68dc389e2a61b1d986b Mon Sep 17 00:00:00 2001 From: gabalafou Date: Wed, 28 Feb 2024 10:58:25 -0600 Subject: [PATCH 07/10] Update docs/user_guide/web-components.rst Co-authored-by: Tania Allard --- docs/user_guide/web-components.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user_guide/web-components.rst b/docs/user_guide/web-components.rst index 39dd0a58b..78ef5d93b 100644 --- a/docs/user_guide/web-components.rst +++ b/docs/user_guide/web-components.rst @@ -9,7 +9,7 @@ cards, and tabs. The components on this page are **not provided by PyData Theme**. They are provided by `Sphinx Design _` (a Sphinx extension). This means that if you wish -to use the components on this page, you must install Sphinx Design separately. +to use the components on this page, you must install Sphinx Design separately and add it to your `conf.py`. .. seealso:: From 3f8a6b33e6de0d18aa27788a2fdc3cfa52d84dc5 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Wed, 28 Feb 2024 11:00:11 -0600 Subject: [PATCH 08/10] Update src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js Co-authored-by: Tania Allard --- src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js index 27c8a4845..e15194550 100644 --- a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js +++ b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js @@ -489,7 +489,7 @@ function showVersionWarningBanner(data) { middle.classList = "bd-header-announcement__content"; inner.classList = "sidebar-message"; button.classList = - "btn text-wrap font-weight-bold ms-3 my-1 align-baseline button-link-to-stable-version"; + "btn text-wrap font-weight-bold ms-3 my-1 align-baseline pst-button-link-to-stable-version"; button.href = `${preferredURL}${DOCUMENTATION_OPTIONS.pagename}.html`; button.innerText = "Switch to stable version"; button.onclick = checkPageExistsAndRedirect; From d2f4b0e2a146eaae0426d8df40349dbd59af825a Mon Sep 17 00:00:00 2001 From: gabalafou Date: Wed, 28 Feb 2024 11:00:17 -0600 Subject: [PATCH 09/10] Update src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss Co-authored-by: Tania Allard --- .../assets/styles/sections/_announcement.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss index 25aed34b0..82f12867d 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -35,7 +35,7 @@ } // The "Switch to stable version" link (styled like a button) - .button-link-to-stable-version { + .pst-button-link-to-stable-version { @include box-shadow(); $background-color: var(--pst-color-danger); From f0cc83948a47172cde7509b6a5ec6e21243c1b64 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Wed, 28 Feb 2024 12:14:30 -0500 Subject: [PATCH 10/10] use var --pst-color-danger-text --- .../assets/styles/sections/_announcement.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss index 82f12867d..8fbc50b3c 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -40,7 +40,7 @@ $background-color: var(--pst-color-danger); $hover-background-color: var(--pst-color-danger-highlight); - $color: var(--pst-color-heading-color); + $color: var(--pst-color-danger-text); background-color: $background-color; border-color: $background-color;