From 173e7c8f278c2feba69526e13fdedfae8dd72341 Mon Sep 17 00:00:00 2001 From: Marcel Klehr Date: Wed, 29 Feb 2012 14:16:20 +0100 Subject: [PATCH 1/2] Extend colorutils Add color invertion and calculation of complementary colors. --- static/js/colorutils.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/static/js/colorutils.js b/static/js/colorutils.js index 9bba39ad..5fbefb4d 100644 --- a/static/js/colorutils.js +++ b/static/js/colorutils.js @@ -120,4 +120,19 @@ colorutils.blend = function(c1, c2, t) return [colorutils.scale(t, c1[0], c2[0]), colorutils.scale(t, c1[1], c2[1]), colorutils.scale(t, c1[2], c2[2])]; } +colorutils.invert = function(c) +{ + return [1 - c[0], 1 - c[1], 1- c[2]]; +} + +colorutils.complementary = function(c) +{ + var inv = colorutils.invert(c); + return [ + (inv[0] >= c[0]) ? Math.min(inv[0] * 1.30, 1) : (c[0] * 0.30), + (inv[1] >= c[1]) ? Math.min(inv[1] * 1.59, 1) : (c[1] * 0.59), + (inv[2] >= c[2]) ? Math.min(inv[2] * 1.11, 1) : (c[2] * 0.11) + ]; +} + exports.colorutils = colorutils; From f5f82a76375bb07366f9246e15d565224e84af72 Mon Sep 17 00:00:00 2001 From: Marcel Klehr Date: Wed, 29 Feb 2012 14:21:35 +0100 Subject: [PATCH 2/2] Rework dynamic text contrast -Remove hard coding of default text color -add dynamic link text contrast --- static/js/ace2_inner.js | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/static/js/ace2_inner.js b/static/js/ace2_inner.js index 71f7d20f..17d02036 100644 --- a/static/js/ace2_inner.js +++ b/static/js/ace2_inner.js @@ -229,18 +229,34 @@ function Ace2Inner(){ bgcolor = fadeColor(bgcolor, info.fade); } - // Text color - var txtcolor = (colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5) ? '#ffffff' : '#000000'; - var authorStyle = dynamicCSS.selectorStyle(getAuthorColorClassSelector( getAuthorClassName(author))); - authorStyle.backgroundColor = bgcolor; - authorStyle.color = txtcolor; - var authorStyleTop = dynamicCSSTop.selectorStyle(getAuthorColorClassSelector( getAuthorClassName(author))); + var anchorStyle = dynamicCSS.selectorStyle(getAuthorColorClassSelector( + getAuthorClassName(author))+' > a') + + // author color + authorStyle.backgroundColor = bgcolor; authorStyleTop.backgroundColor = bgcolor; - authorStyleTop.color = txtcolor; + + // text contrast + if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5) + { + authorStyle.color = '#ffffff'; + authorStyleTop.color = '#ffffff'; + }else{ + authorStyle.color = null; + authorStyleTop.color = null; + } + + // anchor text contrast + if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.55) + { + anchorStyle.color = colorutils.triple2css(colorutils.complementary(colorutils.css2triple(bgcolor))); + }else{ + anchorStyle.color = null; + } } } }