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 104bcb981..55d8fbebe 100644 --- 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")},