From a8346724372ea23ffbe67a8a01f54e6441b4cb2e Mon Sep 17 00:00:00 2001 From: Eli Carlin-Coleman Date: Fri, 16 Oct 2020 07:52:16 -0400 Subject: [PATCH] Fix low-contrast CSS strings in code blocks (#39967) (#39987) First noticed on the challenge "Divide the Grid Into an Area Template", text is hard to read in night mode due to low contrast in the CSS code block. Problem was discussed in issue #39967, and this change was proposed to boost contrast above the minimum acceptable ratio of 4.5:1. This change only targets CSS code blocks in night mode, and only strings. I could not find code blocks in other languages with this issue, but they may exist. This also does not target `.token.operator`, `.token.entity`, or `.token.url`. There is no issue here with contrast, but these classes do not include a background. A proposed future change could be to remove the background from `.token.string` as well, but this change is not made here, as current style guides recommend the background. --- client/src/components/layouts/prism-night.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/src/components/layouts/prism-night.css b/client/src/components/layouts/prism-night.css index 0b81cfc43c..382000cafe 100644 --- a/client/src/components/layouts/prism-night.css +++ b/client/src/components/layouts/prism-night.css @@ -110,6 +110,13 @@ padding in night mode */ color: #7ec699; } +/* CSS code block strings have low contrast in night mode. This attempts to increase contrast above 4.5:1 */ +.night .language-css .token.string, +.night .style .token.string { + color: #ec9126; + background: hsl(0 0% 100% / 0.12); +} + .night .token.operator, .night .token.entity, .night .token.url {