Ensure we use PST colours throughout #1927

trallard · 2024-07-15T15:46:29Z

Closes #1925

Also, as I was fixing the above issue, I took the opportunity to make some needed changes regarding text colour.
And I realised there was perhaps a missing style from the banner button.

docs/user_guide/web-components.rst

trallard · 2024-07-15T15:47:54Z

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


No longer needed now that we fixed accessible pygments

trallard · 2024-07-15T15:48:59Z

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

+  // calculate the text color for the highlight color
+  --pst-color-#{$name}-highlight-text: #{a11y-combination($highlight-color)};


Since we already calculate a WCAG conformant text colour for our semantic colours it made sense to do the same for highlight colours that are used for hover

trallard · 2024-07-15T15:49:39Z

src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss

+      // applying the same style as the SD "buttons"
+      @include link-style-hover;
+
+      text-decoration-thickness: 1px;


Seems this was missed, so I added this to bring parity with other buttons @gabalafou unless there was a reason to leave this out?

Correct. Plus, I like this parity because the text underline suggests that the button is actually a link, which is the case.

OriolAbril · 2024-07-18T13:09:12Z

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

I wanted to comment that on the issue but I only got to it now and I see there is a PR already, thanks for the quick response @trallard!

I see now that these colors are always available, not only when sphinx-design is an active extension which was confusing me when I wrote the issue.

ThomasYAD · 2024-07-23T12:16:53Z

Great to see this being fixed, as I was also trying to change the hover color of the 'back-to-top' button via a custom css file! However I saw that the same goes for the hover color for tables (this is also hard coded to a certain violet value in _color.scss ) Maybe that can also be changed? I am a css rookie so maybe I am mistaken and it isn't hard coded, in that case could you point me a way to edit this? :)

OriolAbril · 2024-07-23T12:22:02Z

You can already change the table hover, it will be the color of whatever you have defined as --pst-color-table-row-hover-bg. You can follow the steps in https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html#base-variables to have these variables defined to whatever value you want, this css file can serve as example.

ThomasYAD · 2024-07-23T12:51:12Z

You can already change the table hover, it will be the color of whatever you have defined as --pst-color-table-row-hover-bg. You can follow the steps in https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html#base-variables to have these variables defined to whatever value you want, this css file can serve as example.

Ah okay, thats great. I had been staring at the color userguide and trying different things for a few hours, but the "-bg" suffix requirement wasn't clear to me. Thank you for the quick response, the example and the help!

trallard · 2024-07-23T13:05:36Z

Ah okay, thats great. I had been staring at the color userguide and trying different things for a few hours, but the "-bg" suffix requirement wasn't clear to me. Thank you for the quick response, the example and the help!

Not so long ago, we changed our colour system, and therefore how we define colours, so it looks like this could be better documented/updated in the docs.
Thanks for the feedback!

gabalafou

This is great! There's just one or two places that need some cleanup :)

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

gabalafou · 2024-07-29T07:58:06Z

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss


-  // 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


Could we delete lines 91-93? The same comment is made earlier, I think repeating it here adds noise

Yes we can remove them I just substituted the text that was there before.

gabalafou · 2024-07-29T08:00:59Z

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

+  @each $name in $sd-semantic-color-names {
+    .sd-btn-#{$name} {
+      &:hover {
+        color: var(--pst-color-#{$name}-highlight-text) !important;


Do you think we should try upstreaming things like this?

gabalafou · 2024-07-29T08:39:38Z

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

@@ -66,25 +66,40 @@ $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}";


It looks like we're able to create AA conforming colors for everything except warning-highlight in light mode:

warning-highlight warning-highlight-text

#d27a07 #14181e

Contrast ratio 4.4:1.

Yeah there is no WCAG conformant combination with our text colours and the orange (at least how this is being calculated). And I did not want to spend hours and hours tweaking that to get perfect colours considering we only use these for hover effects.
The alternative would be to manually specify all the colours pst and sd and use our colour palette.
I mean we can do that since the colours are always present like mentioned in the comment above.
But there are tradeoffs to each approach.

That makes sense. I was actually trying to say that I was impressed that there was only one semantic color that didn't work. And it's not that far from the 4.5 target.

…n.scss Co-authored-by: gabalafou <[email protected]>

trallard

Thanks @gabalafou

github-actions · 2024-07-30T07:00:23Z

Coverage report

This PR does not seem to contain any modification to coverable code.

trallard added 9 commits July 12, 2024 18:35

ENH - Remove hover hard coded colour

848fc2f

Add primary and secondary button examples to docs

43e4df8

Tweak colour scaling slightly

f58dbee

Remove hack fix - no longer needed

959bb4f

Add calculation for highlight text colour

2b0d8d3

Set hover text colour to accessible colour

57a2384

Rename colours to pst

29875a8

Add missing style from banner button

d210f95

Fix broken link in docs

5c66a78

trallard added kind: enhancement New feature or request tag: accessibility Issues related to accessibility issues or efforts labels Jul 15, 2024

trallard commented Jul 15, 2024

View reviewed changes

trallard requested a review from gabalafou July 15, 2024 15:49

OriolAbril reviewed Jul 18, 2024

View reviewed changes

gabalafou requested changes Jul 29, 2024

View reviewed changes

Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_desig…

3a8609a

…n.scss Co-authored-by: gabalafou <[email protected]>

trallard commented Jul 29, 2024

View reviewed changes

remove comment

dcbade5

gabalafou approved these changes Jul 30, 2024

View reviewed changes

gabalafou merged commit d47b30c into pydata:main Aug 6, 2024
29 checks passed

trallard deleted the trallard/fix-button-colours branch August 6, 2024 10:31

drammock mentioned this pull request Aug 29, 2024

DOCS - Fix link #1967

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensure we use PST colours throughout #1927

Ensure we use PST colours throughout #1927

trallard commented Jul 15, 2024

trallard Jul 15, 2024

trallard Jul 15, 2024

trallard Jul 15, 2024

gabalafou Jul 18, 2024

OriolAbril Jul 18, 2024

ThomasYAD commented Jul 23, 2024

OriolAbril commented Jul 23, 2024

ThomasYAD commented Jul 23, 2024 •

edited

Loading

trallard commented Jul 23, 2024

gabalafou left a comment

gabalafou Jul 29, 2024

trallard Jul 29, 2024

gabalafou Jul 29, 2024

gabalafou Jul 29, 2024

trallard Jul 29, 2024 •

edited

Loading

gabalafou Jul 30, 2024

trallard left a comment

github-actions bot commented Jul 30, 2024

		// calculate the text color for the highlight color
		--pst-color-#{$name}-highlight-text: #{a11y-combination($highlight-color)};

Ensure we use PST colours throughout #1927

Ensure we use PST colours throughout #1927

Conversation

trallard commented Jul 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ThomasYAD commented Jul 23, 2024

OriolAbril commented Jul 23, 2024

ThomasYAD commented Jul 23, 2024 • edited Loading

trallard commented Jul 23, 2024

gabalafou left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

trallard Jul 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

trallard left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 30, 2024

Coverage report

ThomasYAD commented Jul 23, 2024 •

edited

Loading

trallard Jul 29, 2024 •

edited

Loading