diff options
author | Shaun McCance <shaunm@redhat.com> | 2021-06-19 19:55:09 -0400 |
---|---|---|
committer | Shaun McCance <shaunm@redhat.com> | 2021-06-19 19:59:59 -0400 |
commit | 612f319060b87e30953f7d84d6a755d757ef845e (patch) | |
tree | 4fe61dadf9b872cac11c1d6aafcae45fd26675a1 | |
parent | 023d87ef9f8c6fb305d45b5151b367dc803bd441 (diff) | |
download | yelp-xsl-612f319060b87e30953f7d84d6a755d757ef845e.tar.gz |
common/color: Use different target contrasts for white-on-black
We can compute most colors from a set of base colors by moving colors
closer to the text or background color until they hit a target contrast.
For background colors, we were using a very high contrast with the text
color, because the lighter background colors look nice. But when using
inverse colors (white-on-near-black), that caused the background color
computation to give up from recursion depth and return something far
too dark.
Instead, we now detect if it's an inverse color scheme and adjust the
target contrasts accordingly.
This commit addresses one point in this yelp metabug:
https://gitlab.gnome.org/GNOME/yelp/-/issues/178
-rw-r--r-- | xslt/common/color.xsl | 98 |
1 files changed, 87 insertions, 11 deletions
diff --git a/xslt/common/color.xsl b/xslt/common/color.xsl index 7bf770ad..1cec3ba8 100644 --- a/xslt/common/color.xsl +++ b/xslt/common/color.xsl @@ -476,6 +476,7 @@ the `rgb()` scheme. Otherwise, it uses the `rgba()` scheme. <xsl:param name="color"/> <xsl:param name="target" select="5"/> <xsl:param name="recdepth" select="0"/> + <xsl:param name="name"/> <xsl:variable name="newcolor"> <xsl:call-template name="color.blend"> <xsl:with-param name="bg" select="$color"/> @@ -490,31 +491,66 @@ the `rgb()` scheme. Otherwise, it uses the `rgba()` scheme. </xsl:call-template> </xsl:variable> <xsl:choose> + <xsl:when test="$contrast >= $target"> + <xsl:value-of select="$newcolor"/> + </xsl:when> <xsl:when test="$recdepth > 10"> <xsl:message> - <xsl:text>Recursion depth exceeded calculating fg color</xsl:text> + <xsl:text>Recursion depth exceeded calculating </xsl:text> + <xsl:if test="$name"> + <xsl:value-of select="concat($name, ' ')"/> + </xsl:if> + <xsl:text>fg color. Using </xsl:text> + <xsl:value-of select="$newcolor"/> </xsl:message> <xsl:value-of select="$newcolor"/> </xsl:when> - <xsl:when test="$contrast >= $target"> - <xsl:value-of select="$newcolor"/> - </xsl:when> <xsl:otherwise> <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$newcolor"/> <xsl:with-param name="target" select="$target"/> <xsl:with-param name="recdepth" select="$recdepth + 1"/> + <xsl:with-param name="name" select="$name"/> </xsl:call-template> </xsl:otherwise> </xsl:choose> </xsl:template> +<!--#@ color.background --> +<xsl:variable name="_color.isinverse"> + <xsl:variable name="contrast"> + <xsl:call-template name="color.contrast"> + <xsl:with-param name="bg" select="'#000000'"/> + <xsl:with-param name="fg" select="$color.fg"/> + </xsl:call-template> + </xsl:variable> + <xsl:choose> + <xsl:when test="$contrast > 5"> + <xsl:text>1</xsl:text> + </xsl:when> + <xsl:otherwise> + <xsl:text>0</xsl:text> + </xsl:otherwise> + </xsl:choose> +</xsl:variable> + + <!--#* _color.bgify --> <xsl:template name="_color.bgify"> <xsl:param name="color"/> - <xsl:param name="target" select="19"/> + <xsl:param name="target"> + <xsl:choose> + <xsl:when test="normalize-space($_color.isinverse) = '1'"> + <xsl:value-of select="11"/> + </xsl:when> + <xsl:otherwise> + <xsl:value-of select="19"/> + </xsl:otherwise> + </xsl:choose> + </xsl:param> <xsl:param name="recdepth" select="0"/> + <xsl:param name="name"/> <xsl:variable name="newcolor"> <xsl:call-template name="color.blend"> <xsl:with-param name="bg" select="$color"/> @@ -529,20 +565,26 @@ the `rgb()` scheme. Otherwise, it uses the `rgba()` scheme. </xsl:call-template> </xsl:variable> <xsl:choose> + <xsl:when test="$contrast >= $target"> + <xsl:value-of select="$newcolor"/> + </xsl:when> <xsl:when test="$recdepth > 20"> <xsl:message> - <xsl:text>Recursion depth exceeded calculating bg color</xsl:text> + <xsl:text>Recursion depth exceeded calculating </xsl:text> + <xsl:if test="$name"> + <xsl:value-of select="concat($name, ' ')"/> + </xsl:if> + <xsl:text>bg color. Using </xsl:text> + <xsl:value-of select="$newcolor"/> </xsl:message> <xsl:value-of select="$newcolor"/> </xsl:when> - <xsl:when test="$contrast >= $target"> - <xsl:value-of select="$newcolor"/> - </xsl:when> <xsl:otherwise> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$newcolor"/> <xsl:with-param name="target" select="$target"/> <xsl:with-param name="recdepth" select="$recdepth + 1"/> + <xsl:with-param name="name" select="$name"/> </xsl:call-template> </xsl:otherwise> </xsl:choose> @@ -598,6 +640,7 @@ automatically computed based on {color.red} and {color.fg}. <xsl:param name="color.fg.red"> <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.red"/> + <xsl:with-param name="name" select="'red'"/> </xsl:call-template> </xsl:param> @@ -614,6 +657,7 @@ it can be automatically computed based on {color.red} and {color.bg}. <xsl:param name="color.bg.red"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.red"/> + <xsl:with-param name="name" select="'red'"/> </xsl:call-template> </xsl:param> @@ -642,6 +686,7 @@ automatically computed based on {color.orange} and {color.fg}. <xsl:param name="color.fg.orange"> <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.orange"/> + <xsl:with-param name="name" select="'orange'"/> </xsl:call-template> </xsl:param> @@ -658,6 +703,7 @@ it can be automatically computed based on {color.orange} and {color.bg}. <xsl:param name="color.bg.orange"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.orange"/> + <xsl:with-param name="name" select="'orange'"/> </xsl:call-template> </xsl:param> @@ -687,6 +733,7 @@ automatically computed based on {color.yellow} and {color.fg}. <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.yellow"/> <xsl:with-param name="target" select="5.5"/> + <xsl:with-param name="name" select="'yellow'"/> </xsl:call-template> </xsl:param> @@ -703,7 +750,17 @@ it can be automatically computed based on {color.yellow} and {color.bg}. <xsl:param name="color.bg.yellow"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.yellow"/> - <xsl:with-param name="target" select="20"/> + <xsl:with-param name="target"> + <xsl:choose> + <xsl:when test="normalize-space($_color.isinverse) = '1'"> + <xsl:value-of select="9"/> + </xsl:when> + <xsl:otherwise> + <xsl:value-of select="20"/> + </xsl:otherwise> + </xsl:choose> + </xsl:with-param> + <xsl:with-param name="name" select="'yellow'"/> </xsl:call-template> </xsl:param> @@ -732,6 +789,7 @@ automatically computed based on {color.green} and {color.fg}. <xsl:param name="color.fg.green"> <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.green"/> + <xsl:with-param name="name" select="'green'"/> </xsl:call-template> </xsl:param> @@ -748,6 +806,7 @@ it can be automatically computed based on {color.green} and {color.bg}. <xsl:param name="color.bg.green"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.green"/> + <xsl:with-param name="name" select="'green'"/> </xsl:call-template> </xsl:param> @@ -776,6 +835,7 @@ automatically computed based on {color.blue} and {color.fg}. <xsl:param name="color.fg.blue"> <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.blue"/> + <xsl:with-param name="name" select="'blue'"/> </xsl:call-template> </xsl:param> @@ -791,6 +851,7 @@ it can be automatically computed based on {color.blue} and {color.bg}. <xsl:param name="color.bg.blue"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.blue"/> + <xsl:with-param name="name" select="'blue'"/> </xsl:call-template> </xsl:param> @@ -819,6 +880,7 @@ automatically computed based on {color.purple} and {color.fg}. <xsl:param name="color.fg.purple"> <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.purple"/> + <xsl:with-param name="name" select="'purple'"/> </xsl:call-template> </xsl:param> @@ -835,6 +897,7 @@ it can be automatically computed based on {color.purple} and {color.bg}. <xsl:param name="color.bg.purple"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.purple"/> + <xsl:with-param name="name" select="'purple'"/> </xsl:call-template> </xsl:param> @@ -863,6 +926,7 @@ automatically computed based on {color.gray} and {color.fg}. <xsl:param name="color.fg.gray"> <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.gray"/> + <xsl:with-param name="name" select="'gray'"/> </xsl:call-template> </xsl:param> @@ -879,6 +943,7 @@ it can be automatically computed based on {color.gray} and {color.bg}. <xsl:param name="color.bg.gray"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.gray"/> + <xsl:with-param name="name" select="'gray'"/> </xsl:call-template> </xsl:param> @@ -898,6 +963,7 @@ specified, it can be automatically computed based on {color.gray} and <xsl:call-template name="_color.fgify"> <xsl:with-param name="color" select="$color.gray"/> <xsl:with-param name="target" select="8"/> + <xsl:with-param name="name" select="'dark'"/> </xsl:call-template> </xsl:param> @@ -917,7 +983,17 @@ specified, it can be automatically computed based on {color.gray} and <xsl:param name="color.bg.dark"> <xsl:call-template name="_color.bgify"> <xsl:with-param name="color" select="$color.gray"/> - <xsl:with-param name="target" select="17"/> + <xsl:with-param name="target"> + <xsl:choose> + <xsl:when test="normalize-space($_color.isinverse) = '1'"> + <xsl:value-of select="9"/> + </xsl:when> + <xsl:otherwise> + <xsl:value-of select="17"/> + </xsl:otherwise> + </xsl:choose> + </xsl:with-param> + <xsl:with-param name="name" select="'dark'"/> </xsl:call-template> </xsl:param> |