diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss index 0387c1030..93205697b 100644 --- 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 index 7318cc401..a82fa0f6f 100644 --- 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")},