Update PST style (#442)

Author: jarrodmillman

assets/theme-css/pst/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.

assets/theme-css/pst/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);

assets/theme-css/pst/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 {