Fix blockquote color contrasts

pydata · Apr 25, 2024 · b8a2d85 · b8a2d85
1 parent a4eaf77
commit b8a2d85
Show file tree

Hide file tree

Showing 2 changed files with 11 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,11 @@ $pst-semantic-colors: (
     "light": rgba(23, 23, 26, 0.2),
     "dark": #{map-deep-get($color-palette, "gray", "700")},
   ),
+  "blockquote-notch": (
+    // gray-500 has a contrast ratio > 3.0 for foundation white and black
+    "light": #{map-deep-get($color-palette, "gray", "500")},
+    "dark": #{map-deep-get($color-palette, "gray", "500")},
+  ),
   "inline-code": (
     "light": #{map-deep-get($color-palette, "pink", "600")},
     "dark": #{map-deep-get($color-palette, "pink", "300")},