From 848fc2ffd8e15700c8abed2ef84a8e38ca1578cb Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Fri, 12 Jul 2024 18:35:38 +0100 Subject: [PATCH 01/11] ENH - Remove hover hard coded colour --- src/pydata_sphinx_theme/assets/styles/base/_base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss index 4fb0b0600..de2a8d44c 100644 --- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -194,7 +194,7 @@ pre { @include link-style-hover; text-decoration-thickness: 1px; - background-color: var(--pst-violet-600); + background-color: var(--pst-color-secondary-highlight); color: var(--pst-color-secondary-text); } From 43e4df87a51c19723334cb9e8510b55b6460762e Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Fri, 12 Jul 2024 18:36:51 +0100 Subject: [PATCH 02/11] Add primary and secondary button examples to docs --- docs/user_guide/web-components.rst | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/user_guide/web-components.rst b/docs/user_guide/web-components.rst index 2515af91d..6bde7aa88 100644 --- a/docs/user_guide/web-components.rst +++ b/docs/user_guide/web-components.rst @@ -111,6 +111,24 @@ Here are some of the available button-style links, also using semantic colors: Dark + .. grid-item:: + + .. button-ref:: badges-buttons + :ref-type: ref + :color: secondary + :shadow: + + Secondary + + .. grid-item:: + + .. button-ref:: badges-buttons + :ref-type: ref + :color: primary + :shadow: + + Primary + .. note:: `Sphinx Design buttons From f58dbeeda60078a2795340388aab07f19f8107f0 Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Fri, 12 Jul 2024 18:40:25 +0100 Subject: [PATCH 03/11] Tweak colour scaling slightly --- .../assets/styles/extensions/_sphinx_design.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) 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 3902a1006..67a39d4b9 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -72,14 +72,20 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); // on the WCAG color contrast guidelines --pst-color-#{$name}-text: #{a11y-combination($value)}; - // TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work - --pst-color-#{$name}-highlight: #{color.adjust($value, $lightness: -15%)}; + // highlight is used for hover effects on buttons, here we make some fluid scaling + // to avoid jarring effects + --pst-color-#{$name}-highlight: #{color.scale( + $value, + $lightness: -15%, + $saturation: 10% + )}; // override the sphinx-design variables --sd-color-#{$name}: var(--pst-color-#{$name}); --sd-color-#{$name}-text: var(--pst-color-#{$name}-text); - // TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work + // highlight is used for hover effects on buttons, here we make some fluid scaling + // to avoid jarring effects --sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight); } From 959bb4f7d0344f2d2dda14c3e650af6eed13fcbb Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Fri, 12 Jul 2024 18:40:55 +0100 Subject: [PATCH 04/11] Remove hack fix - no longer needed --- src/pydata_sphinx_theme/assets/styles/content/_code.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/content/_code.scss b/src/pydata_sphinx_theme/assets/styles/content/_code.scss index 84080928d..6371097ea 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_code.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_code.scss @@ -61,12 +61,6 @@ a > code { color: var(--pst-color-inline-code-links); } -// Fix for Sphinx's "highlight" directive - this is an issue with our accessible pygments theme -// and the colour we are using for the background of the code blocks. -html[data-theme="light"] .highlight .nf { - color: #0078a1 !important; -} - // Minimum opacity needed for linenos to be WCAG AA conformant span.linenos { opacity: 0.8 !important; From 2b0d8d362825f5a83553d0d163381c8db78ce391 Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 15 Jul 2024 16:31:19 +0100 Subject: [PATCH 05/11] Add calculation for highlight text colour --- .../styles/extensions/_sphinx_design.scss | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) 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 67a39d4b9..ccec39f39 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -66,6 +66,8 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); @mixin create-sd-colors($value, $name) { // define the pst variables, so that downstream user overrides will work + @debug "Creating color variables for semantic color: #{$name}"; + --pst-color-#{$name}: #{$value}; // we are now using a11y-combination to calculate the text color - this is based @@ -73,11 +75,14 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); --pst-color-#{$name}-text: #{a11y-combination($value)}; // highlight is used for hover effects on buttons, here we make some fluid scaling - // to avoid jarring effects + // to avoid jarring effects -- we create a local variable that we can access + // later to calculate the text color + $highlight-color: color.scale($value, $lightness: -15%, $saturation: 5%); + --pst-color-#{$name}-highlight: #{color.scale( $value, $lightness: -15%, - $saturation: 10% + $saturation: 5% )}; // override the sphinx-design variables @@ -87,10 +92,12 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); // highlight is used for hover effects on buttons, here we make some fluid scaling // to avoid jarring effects --sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight); + --sd-color-#{$name}-highlight-text: #{a11y-combination($highlight-color)}; } // Now we override the --sd-color-* variables. @each $mode in (light, dark) { + @debug "Creating color variables for mode: #{$mode}"; html[data-theme="#{$mode}"] { // check if this color is defined differently for light/dark @each $name in $sd-semantic-color-names { @@ -105,7 +112,7 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); @if string.index($key, "bg") { --sd-color-#{$name}-bg: #{$value}; - // create local variable + // create local variable -- needed to calculate the text color $value: check-color($value); --sd-color-#{$name}-bg-text: #{a11y-combination($value)}; @@ -347,6 +354,14 @@ html { } } + @each $name in $sd-semantic-color-names { + .sd-btn-#{$name} { + &:hover { + color: var(--sd-color-#{$name}-highlight-text) !important; + } + } + } + @each $name in $sd-semantic-color-names { .sd-btn-#{$name}, .sd-btn-outline-#{$name} { From 57a2384a834866e48c8cd5d434d8655e78cfa8f9 Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 15 Jul 2024 16:31:49 +0100 Subject: [PATCH 06/11] Set hover text colour to accessible colour --- src/pydata_sphinx_theme/assets/styles/base/_base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss index de2a8d44c..3d3190eb2 100644 --- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -195,7 +195,7 @@ pre { text-decoration-thickness: 1px; background-color: var(--pst-color-secondary-highlight); - color: var(--pst-color-secondary-text); + color: var(--sd-color-secondary-highlight-text); } &:focus-visible { From 29875a86d62fa43ac19de63c555ab1c61a292cab Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 15 Jul 2024 16:42:57 +0100 Subject: [PATCH 07/11] Rename colours to pst --- src/pydata_sphinx_theme/assets/styles/base/_base.scss | 2 +- .../assets/styles/extensions/_sphinx_design.scss | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss index 3d3190eb2..c50dc32d0 100644 --- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -195,7 +195,7 @@ pre { text-decoration-thickness: 1px; background-color: var(--pst-color-secondary-highlight); - color: var(--sd-color-secondary-highlight-text); + color: var(--pst-color-secondary-highlight-text); } &:focus-visible { 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 ccec39f39..ee096df8b 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -92,7 +92,9 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); // highlight is used for hover effects on buttons, here we make some fluid scaling // to avoid jarring effects --sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight); - --sd-color-#{$name}-highlight-text: #{a11y-combination($highlight-color)}; + + // calculate the text color for the highlight color + --pst-color-#{$name}-highlight-text: #{a11y-combination($highlight-color)}; } // Now we override the --sd-color-* variables. @@ -357,7 +359,7 @@ html { @each $name in $sd-semantic-color-names { .sd-btn-#{$name} { &:hover { - color: var(--sd-color-#{$name}-highlight-text) !important; + color: var(--pst-color-#{$name}-highlight-text) !important; } } } From d210f95e33d13916a659ed921d042d53aabfb2fe Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 15 Jul 2024 16:43:11 +0100 Subject: [PATCH 08/11] Add missing style from banner button --- .../assets/styles/sections/_announcement.scss | 6 +++++- 1 file changed, 5 insertions(+), 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 c3cc62549..8fa66565e 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss @@ -53,9 +53,13 @@ border-radius: 0.25rem; &:hover { + // applying the same style as the SD "buttons" + @include link-style-hover; + + text-decoration-thickness: 1px; background-color: $hover-background-color; border-color: $hover-background-color; - color: $color; + color: var(--pst-color-danger-highlight-text); } &:focus-visible { From 5c66a78807b58248fa0adf71cab659b86456d4d2 Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 15 Jul 2024 16:43:22 +0100 Subject: [PATCH 09/11] Fix broken link in docs --- docs/user_guide/web-components.rst | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/user_guide/web-components.rst b/docs/user_guide/web-components.rst index 6bde7aa88..484166a83 100644 --- a/docs/user_guide/web-components.rst +++ b/docs/user_guide/web-components.rst @@ -7,9 +7,9 @@ Sphinx Design Components 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 `Sphinx Design _` (a Sphinx extension). This means that if you wish -to use the components on this page, you must install Sphinx Design separately and add it to your `conf.py`. +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 and add it to your `conf.py`. .. seealso:: From 3a8609aa790b876f6515dcd0841780b7eeb807c9 Mon Sep 17 00:00:00 2001 From: Tania Allard Date: Mon, 29 Jul 2024 14:13:08 +0100 Subject: [PATCH 10/11] Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss Co-authored-by: gabalafou --- .../assets/styles/extensions/_sphinx_design.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) 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 ee096df8b..5d46bb3fe 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -79,11 +79,7 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); // later to calculate the text color $highlight-color: color.scale($value, $lightness: -15%, $saturation: 5%); - --pst-color-#{$name}-highlight: #{color.scale( - $value, - $lightness: -15%, - $saturation: 5% - )}; + --pst-color-#{$name}-highlight: #{$highlight-color}; // override the sphinx-design variables --sd-color-#{$name}: var(--pst-color-#{$name}); From dcbade559663c88994a6d81fc001ba4e74fc3e95 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Tue, 30 Jul 2024 08:51:30 +0200 Subject: [PATCH 11/11] remove comment --- .../assets/styles/extensions/_sphinx_design.scss | 3 --- 1 file changed, 3 deletions(-) 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 5d46bb3fe..46d7bb8b2 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -84,9 +84,6 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors); // override the sphinx-design variables --sd-color-#{$name}: var(--pst-color-#{$name}); --sd-color-#{$name}-text: var(--pst-color-#{$name}-text); - - // highlight is used for hover effects on buttons, here we make some fluid scaling - // to avoid jarring effects --sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight); // calculate the text color for the highlight color