Fix blockquote color contrasts (#1786)

* Fix blockquote color contrasts * Increase contrast of blockquote notch in dark mode * Update comment in src/pydata_sphinx_theme/assets/styles/variables/_color.scss * Update comment in src/pydata_sphinx_theme/assets/styles/variables/_color.scss
pydata · Apr 29, 2024 · 30be4d4 · 30be4d4
1 parent 4087f89
commit 30be4d4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
@@ -2,7 +2,7 @@
 blockquote {
   padding: 1em 1em;
   color: var(--pst-color-text-muted);
-  border-left: 0.25em solid var(--pst-color-border);
+  border-left: 0.25em solid var(--pst-color-blockquote-notch);
   border-radius: $admonition-border-radius;
   position: relative;
 
@@ -23,6 +23,11 @@ blockquote {
   @include legacy-backdrop-placeholder;
   background-color: var(--pst-color-surface);
 
+  // Ensure there is enough contrast against the background
+  a {
+    color: var(--pst-color-inline-code-links);
+  }
+
   //hack to make the text in the blockquote selectable
   &:before {
     z-index: -1;

diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -189,6 +189,12 @@ $pst-semantic-colors: (
     "light": rgba(23, 23, 26, 0.2),
     "dark": #{map-deep-get($color-palette, "gray", "700")},
   ),
+  "blockquote-notch": (
+    // These colors have a contrast ratio > 3.0 against both the background and
+    // surface colors that the notch is sandwiched between
+    "light": #{map-deep-get($color-palette, "gray", "500")},
+    "dark": #{map-deep-get($color-palette, "gray", "400")},
+  ),
   "inline-code": (
     "light": #{map-deep-get($color-palette, "pink", "600")},
     "dark": #{map-deep-get($color-palette, "pink", "300")},