Skip to content

Commit 30be4d4

Browse files
authored
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
1 parent 4087f89 commit 30be4d4

File tree

2 files changed

+12
-1
lines changed

2 files changed

+12
-1
lines changed

src/pydata_sphinx_theme/assets/styles/content/_quotes.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
blockquote {
33
padding: 1em 1em;
44
color: var(--pst-color-text-muted);
5-
border-left: 0.25em solid var(--pst-color-border);
5+
border-left: 0.25em solid var(--pst-color-blockquote-notch);
66
border-radius: $admonition-border-radius;
77
position: relative;
88

@@ -23,6 +23,11 @@ blockquote {
2323
@include legacy-backdrop-placeholder;
2424
background-color: var(--pst-color-surface);
2525

26+
// Ensure there is enough contrast against the background
27+
a {
28+
color: var(--pst-color-inline-code-links);
29+
}
30+
2631
//hack to make the text in the blockquote selectable
2732
&:before {
2833
z-index: -1;

src/pydata_sphinx_theme/assets/styles/variables/_color.scss

+6
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,12 @@ $pst-semantic-colors: (
189189
"light": rgba(23, 23, 26, 0.2),
190190
"dark": #{map-deep-get($color-palette, "gray", "700")},
191191
),
192+
"blockquote-notch": (
193+
// These colors have a contrast ratio > 3.0 against both the background and
194+
// surface colors that the notch is sandwiched between
195+
"light": #{map-deep-get($color-palette, "gray", "500")},
196+
"dark": #{map-deep-get($color-palette, "gray", "400")},
197+
),
192198
"inline-code": (
193199
"light": #{map-deep-get($color-palette, "pink", "600")},
194200
"dark": #{map-deep-get($color-palette, "pink", "300")},

0 commit comments

Comments
 (0)