[yelp-xsl] common/color: Use different target contrasts for white-on-black
- From: Shaun McCance <shaunm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [yelp-xsl] common/color: Use different target contrasts for white-on-black
- Date: Sun, 20 Jun 2021 00:00:15 +0000 (UTC)
commit 612f319060b87e30953f7d84d6a755d757ef845e
Author: Shaun McCance <shaunm redhat com>
Date: Sat Jun 19 19:55:09 2021 -0400
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
xslt/common/color.xsl | 98 +++++++++++++++++++++++++++++++++++++++++++++------
1 file 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>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]