Obviate background-from-color-variable (#1558)

* Obviate background-from-color-variable * backwards compatibility
pydata · Nov 17, 2023 · c1befa8 · c1befa8
1 parent 42b2976
commit c1befa8
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 52 deletions.
diff --git a/docs/_static/custom.css b/docs/_static/custom.css
@@ -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 */
@@ -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

diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss
@@ -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 {
   &: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.

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
@@ -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;
 
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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);

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
@@ -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);
 
   //hack to make the text in the blockquote selectable
   &:before {

diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -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 {

diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
@@ -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;