Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buttons meet WCAG criteria #1589

Merged
merged 8 commits into from
Dec 22, 2023
Merged

Buttons meet WCAG criteria #1589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
409861a
Match buttons to design system
gabalafou Dec 10, 2023
6103070
back to top button
gabalafou Dec 10, 2023
1af48ac
switch to stable version button
gabalafou Dec 10, 2023
01df012
remove sd-sphinx-override class which seems to do nothing
gabalafou Dec 10, 2023
faeb165
underline
gabalafou Dec 20, 2023
98048ad
center
gabalafou Dec 20, 2023
f2611c8
Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_desig…
gabalafou Dec 20, 2023
ecd0970
don't forget outline buttons
gabalafou Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/user_guide/styling.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,18 +117,18 @@ Here is an overview of the colors available in the theme (change theme mode to s
</style>

<p>
<span class="sd-sphinx-override sd-badge pst-badge pst-primary sd-bg-text-primary">primary</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-secondary sd-bg-text-secondary">secondary</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-accent sd-bg-text-secondary">accent</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-success sd-bg-text-success">success</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-info sd-bg-text-info">info</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-warning sd-bg-text-warning">warning</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-danger sd-bg-text-danger">danger</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-background">background</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-on-background">on-background</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-surface">surface</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-on-surface sd-bg-text-primary">on-surface</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-target">target</span>
<span class="sd-badge pst-badge pst-primary sd-bg-text-primary">primary</span>
<span class="sd-badge pst-badge pst-secondary sd-bg-text-secondary">secondary</span>
<span class="sd-badge pst-badge pst-accent sd-bg-text-secondary">accent</span>
<span class="sd-badge pst-badge pst-success sd-bg-text-success">success</span>
<span class="sd-badge pst-badge pst-info sd-bg-text-info">info</span>
<span class="sd-badge pst-badge pst-warning sd-bg-text-warning">warning</span>
<span class="sd-badge pst-badge pst-danger sd-bg-text-danger">danger</span>
<span class="sd-badge pst-badge pst-background">background</span>
<span class="sd-badge pst-badge pst-on-background">on-background</span>
<span class="sd-badge pst-badge pst-surface">surface</span>
<span class="sd-badge pst-badge pst-on-surface sd-bg-text-primary">on-surface</span>
<span class="sd-badge pst-badge pst-target">target</span>
</p>


Expand Down
20 changes: 20 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/base/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
trallard marked this conversation as resolved.
Show resolved Hide resolved
}

@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
Expand Down
32 changes: 32 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,3 +304,35 @@ details.sd-dropdown {
}
}
}

/*******************************************************************************
* Buttons (which in Sphinx Design are actually links that look like buttons)
gabalafou marked this conversation as resolved.
Show resolved Hide resolved
* 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} {
trallard marked this conversation as resolved.
Show resolved Hide resolved
&: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;
}
}
}
}
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
{# the scroll to top button #}
<button type="button" class="btn rounded-pill" id="pst-back-to-top">
<i class="fa-solid fa-arrow-up"></i>
{{ _("Back to top") }}
{{- _("Back to top") -}}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly out of curiosity: why are these new - needed?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It removes the whitespace around the text.

I'm not 100% sure they're needed. When I added the underline on hover, it didn't look good because of the underlined space (which may have been a space character, I'm not 100% sure) between the up arrow and the text.

Then I added the minus signs. But then the text was too close to the arrow. So then I added some margin to the arrow. But after I added the margin, I never checked if the minus signs could be removed, but my hunch is that if you take the minus signs back out, then there will be too much space between the up arrow and the text. Although the minus side on the right side probably isn't needed.

</button>

{# checkbox to toggle primary sidebar #}
Expand Down
Loading