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

Jump to bottom

Obviate background-from-color-variable #1558

Merged
merged 2 commits into from
Nov 17, 2023
Merged

Obviate background-from-color-variable #1558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62754b0
Obviate background-from-color-variable
gabalafou Nov 10, 2023
6be3770
backwards compatibility
gabalafou Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 4 additions & 8 deletions docs/_static/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,13 @@
div.admonition.admonition-olive {
border-color: hsl(60, 100%, 25%);
}
div.admonition.admonition-olive > .admonition-title:before {
div.admonition.admonition-olive > .admonition-title {
background-color: hsl(60, 100%, 14%);
color: white;
}
div.admonition.admonition-olive > .admonition-title:after {
color: hsl(60, 100%, 25%);
}
div.admonition.admonition-olive > .admonition-title {
color: white;
}
/* end-custom-color */

/* begin-custom-icon/* <your static path>/custom.css */
Expand All @@ -30,16 +28,14 @@ div.admonition.admonition-icon > .admonition-title:after {
div.admonition.admonition-youtube {
border-color: hsl(0, 100%, 50%); /* YouTube red */
}
div.admonition.admonition-youtube > .admonition-title:before {
div.admonition.admonition-youtube > .admonition-title {
background-color: hsl(0, 99%, 18%);
color: white;
}
div.admonition.admonition-youtube > .admonition-title:after {
color: hsl(0, 100%, 50%);
content: "\f26c"; /* fa-solid fa-tv */
}
div.admonition.admonition-youtube > .admonition-title {
color: white;
}
/* end-custom-youtube */

/* fix for project names that are parsed as links: the whole card is a link so
Expand Down
7 changes: 3 additions & 4 deletions src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,16 @@
// loading the math module
@use "sass:math";

// Set background color from a color variable
//
@mixin background-from-color-variable($color-variable) {
// We must add ::before pseudo-element to some theme components (such as admonitions)
// because users were instructed to customize the background color this way.
@mixin legacy-backdrop-placeholder {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Thanks for adding context for historical purposes

&:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: var(#{$color-variable});
z-index: -1;
// So that hovering over the text within background is still possible.
// Otherwise the background overlays the text and you cannot click or select easily.
Expand Down
47 changes: 13 additions & 34 deletions src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ div.admonition,
padding: 0.4rem 0.6rem 0.4rem 2rem;
font-weight: var(--pst-admonition-font-weight-heading);
position: relative;
@include background-from-color-variable(--pst-color-info-bg);
@include legacy-backdrop-placeholder;
background-color: var(--pst-color-info-bg);
// now that we use solid colors we want the title on top
z-index: 1;

Expand All @@ -63,9 +64,7 @@ div.admonition,
&.attention {
border-color: var(--pst-color-attention);
> .admonition-title {
&:before {
background-color: var(--pst-color-attention-bg);
}
background-color: var(--pst-color-attention-bg);

&:after {
color: var(--pst-color-attention);
Expand All @@ -77,9 +76,7 @@ div.admonition,
&.caution {
border-color: var(--pst-color-warning);
> .admonition-title {
&:before {
background-color: var(--pst-color-warning-bg);
}
background-color: var(--pst-color-warning-bg);

&:after {
color: var(--pst-color-warning);
Expand All @@ -91,9 +88,7 @@ div.admonition,
&.warning {
border-color: var(--pst-color-warning);
> .admonition-title {
&:before {
background-color: var(--pst-color-warning-bg);
}
background-color: var(--pst-color-warning-bg);

&:after {
color: var(--pst-color-warning);
Expand All @@ -105,9 +100,7 @@ div.admonition,
&.danger {
border-color: var(--pst-color-danger);
> .admonition-title {
&:before {
background-color: var(--pst-color-danger-bg);
}
background-color: var(--pst-color-danger-bg);

&:after {
color: var(--pst-color-danger);
Expand All @@ -119,9 +112,7 @@ div.admonition,
&.error {
border-color: var(--pst-color-danger);
> .admonition-title {
&:before {
background-color: var(--pst-color-danger-bg);
}
background-color: var(--pst-color-danger-bg);

&:after {
color: var(--pst-color-danger);
Expand All @@ -133,9 +124,7 @@ div.admonition,
&.hint {
border-color: var(--pst-color-success);
> .admonition-title {
&:before {
background-color: var(--pst-color-success-bg);
}
background-color: var(--pst-color-success-bg);

&:after {
color: var(--pst-color-success);
Expand All @@ -147,9 +136,7 @@ div.admonition,
&.tip {
border-color: var(--pst-color-success);
> .admonition-title {
&:before {
background-color: var(--pst-color-success-bg);
}
background-color: var(--pst-color-success-bg);

&:after {
color: var(--pst-color-success);
Expand All @@ -161,9 +148,7 @@ div.admonition,
&.important {
border-color: var(--pst-color-attention);
> .admonition-title {
&:before {
background-color: var(--pst-color-attention-bg);
}
background-color: var(--pst-color-attention-bg);

&:after {
color: var(--pst-color-attention);
Expand All @@ -175,9 +160,7 @@ div.admonition,
&.note {
border-color: var(--pst-color-info);
> .admonition-title {
&:before {
background-color: var(--pst-color-info-bg);
}
background-color: var(--pst-color-info-bg);

&:after {
color: var(--pst-color-info);
Expand All @@ -189,9 +172,7 @@ div.admonition,
&.seealso {
border-color: var(--pst-color-success);
> .admonition-title {
&:before {
background-color: var(--pst-color-success-bg);
}
background-color: var(--pst-color-success-bg);

&:after {
color: var(--pst-color-success);
Expand All @@ -203,9 +184,7 @@ div.admonition,
&.admonition-todo {
border-color: var(--pst-color-secondary);
> .admonition-title {
&:before {
background-color: var(--pst-color-secondary-bg);
}
background-color: var(--pst-color-secondary-bg);

&:after {
color: var(--pst-color-secondary);
Expand Down
3 changes: 2 additions & 1 deletion src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ blockquote {
margin-bottom: 0;
}

@include background-from-color-variable(--pst-color-on-background);
@include legacy-backdrop-placeholder;
background-color: var(--pst-color-surface);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

In addition to removing the mixin, I also changed the color variable here because I think the desired style for blockquotes is for them to have a background color that stands out against the page's background.

For reference on why I chose --pst-color-surface: Color variables.

Before:

before this PR the blockquote box did not stand out from the page

After:

after this PR the blockquote box has a gray background that stands out from the white page


//hack to make the text in the blockquote selectable
&:before {
Expand Down
4 changes: 2 additions & 2 deletions src/pydata_sphinx_theme/assets/styles/content/_spans.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ span.guilabel {
padding: 2.4px 6px;
margin: auto 2px;
position: relative;

@include background-from-color-variable(--pst-color-info-bg);
@include legacy-backdrop-placeholder;
background-color: var(--pst-color-info-bg);
}

a.reference.download:before {
Expand Down
5 changes: 2 additions & 3 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 @@ -231,9 +231,8 @@ details.sd-dropdown {
}
}

// Background color and border are grey by default
background-color: unset !important;
@include background-from-color-variable(--pst-sd-dropdown-bg-color);
@include legacy-backdrop-placeholder;
background-color: var(--pst-sd-dropdown-bg-color) !important;

// Add a left border with the same structure as our admonitions
border-left: 0.2rem solid var(--pst-sd-dropdown-color) !important;
Expand Down