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

gabalafou · web-flow · commit c1befa8cf3a6 · 2023-11-17T16:24:32.000-06:00
* Obviate background-from-color-variable

* backwards compatibility
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;

Original file line number	Diff line number	Diff line change
`@@ -7,15 +7,13 @@`
`7`	`7`	`div.admonition.admonition-olive {`
`8`	`8`	`border-color: hsl(60, 100%, 25%);`
`9`	`9`	`}`
`10`		`-div.admonition.admonition-olive > .admonition-title:before {`
	`10`	`+div.admonition.admonition-olive > .admonition-title {`
`11`	`11`	`background-color: hsl(60, 100%, 14%);`
	`12`	`+ color: white;`
`12`	`13`	`}`
`13`	`14`	`div.admonition.admonition-olive > .admonition-title:after {`
`14`	`15`	`color: hsl(60, 100%, 25%);`
`15`	`16`	`}`
`16`		`-div.admonition.admonition-olive > .admonition-title {`
`17`		`- color: white;`
`18`		`-}`
`19`	`17`	`/* end-custom-color */`
`20`	`18`
`21`	`19`	`/* begin-custom-icon/* <your static path>/custom.css */`
`@@ -30,16 +28,14 @@ div.admonition.admonition-icon > .admonition-title:after {`
`30`	`28`	`div.admonition.admonition-youtube {`
`31`	`29`	`border-color: hsl(0, 100%, 50%); /* YouTube red */`
`32`	`30`	`}`
`33`		`-div.admonition.admonition-youtube > .admonition-title:before {`
	`31`	`+div.admonition.admonition-youtube > .admonition-title {`
`34`	`32`	`background-color: hsl(0, 99%, 18%);`
	`33`	`+ color: white;`
`35`	`34`	`}`
`36`	`35`	`div.admonition.admonition-youtube > .admonition-title:after {`
`37`	`36`	`color: hsl(0, 100%, 50%);`
`38`	`37`	`content: "\f26c"; /* fa-solid fa-tv */`
`39`	`38`	`}`
`40`		`-div.admonition.admonition-youtube > .admonition-title {`
`41`		`- color: white;`
`42`		`-}`
`43`	`39`	`/* end-custom-youtube */`
`44`	`40`
`45`	`41`	`/* fix for project names that are parsed as links: the whole card is a link so`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,8 @@ blockquote {`
`20`	`20`	`margin-bottom: 0;`
`21`	`21`	`}`
`22`	`22`
`23`		`- @include background-from-color-variable(--pst-color-on-background);`
	`23`	`+ @include legacy-backdrop-placeholder;`
	`24`	`+ background-color: var(--pst-color-surface);`
`24`	`25`
`25`	`26`	`//hack to make the text in the blockquote selectable`
`26`	`27`	`&:before {`
Original file line number	Diff line number	Diff line change
`@@ -231,9 +231,8 @@ details.sd-dropdown {`
`231`	`231`	`}`
`232`	`232`	`}`
`233`	`233`
`234`		`- // Background color and border are grey by default`
`235`		`- background-color: unset !important;`
`236`		`- @include background-from-color-variable(--pst-sd-dropdown-bg-color);`
	`234`	`+ @include legacy-backdrop-placeholder;`
	`235`	`+ background-color: var(--pst-sd-dropdown-bg-color) !important;`
`237`	`236`
`238`	`237`	`// Add a left border with the same structure as our admonitions`
`239`	`238`	`border-left: 0.2rem solid var(--pst-sd-dropdown-color) !important;`