chris/emacs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
emacs/var/elfeed/db/data/c6/c609159fbe5651c09f435c497685e01e517369c9
Chris Cochrun e013d7569e trying to fix
2022-01-03 12:49:32 -06:00

1321 lines
31 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<p>I spent this afternoon reviewing the subset of the Modus themes’ colour
palette that is used in the <code>org-habit</code> graph. In this post I present
the technicalities of the endeavour. The gist of this publication is
that picking colour values is hard.</p>
<p>Before I delve into the technicalities, I should inform you that I also
took this opportunity to make all the variants of the <code>org-habit</code> graph
work with the <code>modus-themes-deuteranopia</code> toggle, whereas before it only
worked with the <code>traffic-light</code> style (check the doc string of
<code>modus-themes-org-agenda</code> on what those styles are). In short: more
power for users with red-green colour deficiency. Play around with
these:</p>
<pre><code class="language-emacs-lisp">(setq modus-themes-deuteranopia t) ; try with nil too
(setq modus-themes-org-agenda
'(;; ...
;; Other key . value pairs
;; ...
(habit . nil)))
;; OR
(setq modus-themes-org-agenda
'(;; ...
;; Other key . value pairs
;; ...
(habit . simplified)))
;; OR
(setq modus-themes-org-agenda
'(;; ...
;; Other key . value pairs
;; ...
(habit . traffic-light)))
</code></pre>
<p>Now on to the minutia of picking colour values. Since I have started
clocking my time with Org, I am informed that the edits in
<code>modus-themes.el</code> took me 3 hours and 16 minutes. (This does not
include the time required to compile the data and write this entry.)
All those hours to produce this diff:</p>
<pre><code class="language-diff">diff --git a/modus-themes.el b/modus-themes.el
index 7767acf..17f3362 100644
--- a/modus-themes.el
+++ b/modus-themes.el
@@ -495,18 +495,18 @@ (defconst modus-themes-operandi-colors
;; those background values should only be used for graphs or similar
;; applications where colored blocks are expected to be positioned
;; next to each other
- (red-graph-0-bg . "#ef6f79")
- (red-graph-1-bg . "#ff9f9f")
- (green-graph-0-bg . "#49d239")
- (green-graph-1-bg . "#6dec6d")
- (yellow-graph-0-bg . "#efec08")
- (yellow-graph-1-bg . "#dbff4e")
- (blue-graph-0-bg . "#55a2f0")
- (blue-graph-1-bg . "#7fcfff")
- (magenta-graph-0-bg . "#ba86ef")
- (magenta-graph-1-bg . "#e7afff")
- (cyan-graph-0-bg . "#30d3f0")
- (cyan-graph-1-bg . "#6fefff")
+ (red-graph-0-bg . "#ef7969")
+ (red-graph-1-bg . "#ffafa0")
+ (green-graph-0-bg . "#49c029")
+ (green-graph-1-bg . "#8fef00")
+ (yellow-graph-0-bg . "#ffcf00")
+ (yellow-graph-1-bg . "#f9ff00")
+ (blue-graph-0-bg . "#7090ff")
+ (blue-graph-1-bg . "#8fbfff")
+ (magenta-graph-0-bg . "#e07fff")
+ (magenta-graph-1-bg . "#fad0ff")
+ (cyan-graph-0-bg . "#70d3f0")
+ (cyan-graph-1-bg . "#afefff")
;; the following are for cases where both the foreground and the
;; background need to have a similar hue and so must be combined
;; with themselves, even though the foregrounds can be paired with
@@ -736,18 +736,18 @@ (defconst modus-themes-vivendi-colors
;; those background values should only be used for graphs or similar
;; applications where colored blocks are expected to be positioned
;; next to each other
- (red-graph-0-bg . "#af0404")
- (red-graph-1-bg . "#801f2f")
- (green-graph-0-bg . "#24ba2f")
- (green-graph-1-bg . "#0f8f07")
- (yellow-graph-0-bg . "#ffd03e")
- (yellow-graph-1-bg . "#d7d800")
- (blue-graph-1-bg . "#2f50c8")
- (blue-graph-0-bg . "#5f8fff")
- (magenta-graph-0-bg . "#af7bee")
- (magenta-graph-1-bg . "#7f59cf")
- (cyan-graph-0-bg . "#47dcfa")
- (cyan-graph-1-bg . "#0bc0df")
+ (red-graph-0-bg . "#bb0404")
+ (red-graph-1-bg . "#6f1f1f")
+ (green-graph-0-bg . "#24ba0f")
+ (green-graph-1-bg . "#1f6f00")
+ (yellow-graph-0-bg . "#f7ef00")
+ (yellow-graph-1-bg . "#b08600")
+ (blue-graph-0-bg . "#2fafef")
+ (blue-graph-1-bg . "#1f2f8f")
+ (magenta-graph-0-bg . "#bf94fe")
+ (magenta-graph-1-bg . "#5f509f")
+ (cyan-graph-0-bg . "#47dfea")
+ (cyan-graph-1-bg . "#00808f")
;; the following are for cases where both the foreground and the
;; background need to have a similar hue and so must be combined
;; with themselves, even though the foregrounds can be paired with
</code></pre>
<p>To be clear, these are very subtle differences in some cases. Consider,
for instance a visualisation of one of the tables presented below with
<code>rainbow-mode</code> enabled (check <a href="protesilaos.com/emacs/dotemacs">my
dotemacs</a> for relevant configs):</p>
<p><a href="https://protesilaos.com/assets/images/attachments/2022-01-02-modus-themes-org-habit-table-sample.png"><img alt="Modus Operandi sample visualisation of table" src="https://protesilaos.com/assets/images/attachments/2022-01-02-modus-themes-org-habit-table-sample.png" /></a></p>
<h2>Technical considerations on the usage of those colours</h2>
<p>What we are dealing with here are pairs of colour values with a subtle
and an intense variant. Here are screenshots of how the <code>org-habit</code>
graph looks by default (though do check <code>modus-themes-org-agenda</code>).</p>
<p>Modus Operandi (the light theme):</p>
<p><a href="https://protesilaos.com/assets/images/attachments/2022-01-02-modus-themes-org-habit-graph-sample-operandi.png"><img alt="Modus Operandi sample org-habit graph" src="https://protesilaos.com/assets/images/attachments/2022-01-02-modus-themes-org-habit-graph-sample-operandi.png" /></a></p>
<p>Modus Vivendi (the dark theme):</p>
<p><a href="https://protesilaos.com/assets/images/attachments/2022-01-02-modus-themes-org-habit-graph-sample-vivendi.png"><img alt="Modus Vivendi sample org-habit graph" src="https://protesilaos.com/assets/images/attachments/2022-01-02-modus-themes-org-habit-graph-sample-vivendi.png" /></a></p>
<p>Unlike most colour combinations where we have a foreground value that is
intended to be used by text and we compare it to a background value to
arrive at a minimum contrast in relative luminance of 7:1 (per the
<code>modus-themes-contrast</code> function), the <code>org-habit</code> colours are all
backgrounds. This means that the 7:1 contrast ratio is not pertinent to
our consideration as we are not testing the legibility of text.
Instead, we have to measure the proximity in colour space of background
values in comparison to each other or, more precisely, in relation to
colours that appear adjacent to them in their particular context
(i.e. we are not particularly interested in all possible combinations).</p>
<p>Furthermore, because of differences in colour perception between light
and dark themes, we must treat <code>modus-operandi</code> and <code>modus-vivendi</code> in their
own right. This is not some simplistic exercise in colour inversion.
To clarify: it is easier to discern colour differences between bright
colours than subdued ones regardless of actual distance in colour space.
The brighter background colours are used with <code>modus-operandi</code> so you will
notice that the distance between them for some of the pairs of red,
green, yellow, blue, magenta, cyan is smaller than in <code>modus-vivendi</code>
(note that we use “magenta” for naming consistency, though sometimes the
actual colour is violet or purple for the purposes of context-dependent
variation).</p>
<h2>Unfiltered data of the changes</h2>
<p>In the following tables, we show the overall effect of those changes.
The built-in <code>colour-distance</code> function is written as <code>Δ</code> thanks to
<code>(defalias #'Δ #'color-distance)</code>. There is no need to focus on the
exact distance value, but mostly on the relative effect. In the next
section we elaborate on the particularities.</p>
<p>[ The formula for those tables which were written in Org notation is
<code>#+TBLFM: $2='(Δ $1 @1$2) :: $3='(Δ $1 @1$3) :: $4='(Δ $1 @1$4) ::
$5='(Δ $1 @1$5) :: $6='(Δ $1 @1$6) :: $7='(Δ $1 @1$7) :: $8='(Δ $1 @1$8)
:: $9='(Δ $1 @1$9) :: $10='(Δ $1 @1$10) :: $11='(Δ $1 @1$11) :: $12='(Δ
$1 @1$12) :: $13='(Δ $1 @1$13)</code>. ]</p>
<p>OLD Modus Operandi graph (org-habit) colour distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th>#ef6f79</th>
<th>#ff9f9f</th>
<th>#49d239</th>
<th>#6dec6d</th>
<th>#efec08</th>
<th>#dbff4e</th>
<th>#55a2f0</th>
<th>#7fcfff</th>
<th>#ba86ef</th>
<th>#e7afff</th>
<th>#30d3f0</th>
<th>#6fefff</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ef6f79</td>
<td>0</td>
<td>13010</td>
<td>121902</td>
<td>109012</td>
<td>89534</td>
<td>88678</td>
<td>107221</td>
<td>112812</td>
<td>40558</td>
<td>54313</td>
<td>169319</td>
<td>152275</td>
</tr>
<tr>
<td>#ff9f9f</td>
<td>13010</td>
<td>0</td>
<td>123434</td>
<td>87960</td>
<td>71347</td>
<td>54670</td>
<td>93134</td>
<td>75587</td>
<td>30037</td>
<td>21759</td>
<td>138833</td>
<td>103793</td>
</tr>
<tr>
<td>#49d239</td>
<td>121902</td>
<td>123434</td>
<td>0</td>
<td>13006</td>
<td>81037</td>
<td>64507</td>
<td>100420</td>
<td>110104</td>
<td>138754</td>
<td>165234</td>
<td>94658</td>
<td>111103</td>
</tr>
<tr>
<td>#6dec6d</td>
<td>109012</td>
<td>87960</td>
<td>13006</td>
<td>0</td>
<td>69513</td>
<td>35970</td>
<td>68764</td>
<td>58701</td>
<td>98593</td>
<td>105128</td>
<td>57735</td>
<td>55227</td>
</tr>
<tr>
<td>#efec08</td>
<td>89534</td>
<td>71347</td>
<td>81037</td>
<td>69513</td>
<td>0</td>
<td>13003</td>
<td>213337</td>
<td>178080</td>
<td>166483</td>
<td>142984</td>
<td>228952</td>
<td>186655</td>
</tr>
<tr>
<td>#dbff4e</td>
<td>88678</td>
<td>54670</td>
<td>64507</td>
<td>35970</td>
<td>13003</td>
<td>0</td>
<td>145428</td>
<td>105437</td>
<td>119715</td>
<td>93081</td>
<td>147673</td>
<td>106441</td>
</tr>
<tr>
<td>#55a2f0</td>
<td>107221</td>
<td>93134</td>
<td>100420</td>
<td>68764</td>
<td>213337</td>
<td>145428</td>
<td>0</td>
<td>13044</td>
<td>29187</td>
<td>57497</td>
<td>12798</td>
<td>26119</td>
</tr>
<tr>
<td>#7fcfff</td>
<td>112812</td>
<td>75587</td>
<td>110104</td>
<td>58701</td>
<td>178080</td>
<td>105437</td>
<td>13044</td>
<td>0</td>
<td>31268</td>
<td>33581</td>
<td>15404</td>
<td>4764</td>
</tr>
<tr>
<td>#ba86ef</td>
<td>40558</td>
<td>30037</td>
<td>138754</td>
<td>98593</td>
<td>166483</td>
<td>119715</td>
<td>29187</td>
<td>31268</td>
<td>0</td>
<td>13090</td>
<td>71096</td>
<td>59708</td>
</tr>
<tr>
<td>#e7afff</td>
<td>54313</td>
<td>21759</td>
<td>165234</td>
<td>105128</td>
<td>142984</td>
<td>93081</td>
<td>57497</td>
<td>33581</td>
<td>13090</td>
<td>0</td>
<td>91746</td>
<td>55269</td>
</tr>
<tr>
<td>#30d3f0</td>
<td>169319</td>
<td>138833</td>
<td>94658</td>
<td>57735</td>
<td>228952</td>
<td>147673</td>
<td>12798</td>
<td>15404</td>
<td>71096</td>
<td>91746</td>
<td>0</td>
<td>13017</td>
</tr>
<tr>
<td>#6fefff</td>
<td>152275</td>
<td>103793</td>
<td>111103</td>
<td>55227</td>
<td>186655</td>
<td>106441</td>
<td>26119</td>
<td>4764</td>
<td>59708</td>
<td>55269</td>
<td>13017</td>
<td>0</td>
</tr>
</tbody>
</table>
<p>NEW Modus Operandi graph (org-habit) colour distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th>#ef7969</th>
<th>#ffafa0</th>
<th>#49c029</th>
<th>#8fef00</th>
<th>#ffcf00</th>
<th>#f9ff00</th>
<th>#7090ff</th>
<th>#8fbfff</th>
<th>#e07fff</th>
<th>#fad0ff</th>
<th>#70d3f0</th>
<th>#afefff</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ef7969</td>
<td>0</td>
<td>18714</td>
<td>102713</td>
<td>106676</td>
<td>53152</td>
<td>95386</td>
<td>98252</td>
<td>96330</td>
<td>48246</td>
<td>77159</td>
<td>118813</td>
<td>117359</td>
</tr>
<tr>
<td>#ffafa0</td>
<td>18714</td>
<td>0</td>
<td>123038</td>
<td>108929</td>
<td>55728</td>
<td>77813</td>
<td>80663</td>
<td>56370</td>
<td>30879</td>
<td>22745</td>
<td>75981</td>
<td>54468</td>
</tr>
<tr>
<td>#49c029</td>
<td>102713</td>
<td>123038</td>
<td>0</td>
<td>25238</td>
<td>93136</td>
<td>102160</td>
<td>134631</td>
<td>130887</td>
<td>187958</td>
<td>193409</td>
<td>110332</td>
<td>150994</td>
</tr>
<tr>
<td>#8fef00</td>
<td>106676</td>
<td>108929</td>
<td>25238</td>
<td>0</td>
<td>39278</td>
<td>32383</td>
<td>202638</td>
<td>169139</td>
<td>217995</td>
<td>181945</td>
<td>150709</td>
<td>158446</td>
</tr>
<tr>
<td>#ffcf00</td>
<td>53152</td>
<td>55728</td>
<td>93136</td>
<td>39278</td>
<td>0</td>
<td>9396</td>
<td>221491</td>
<td>181641</td>
<td>163698</td>
<td>131790</td>
<td>188491</td>
<td>163814</td>
</tr>
<tr>
<td>#f9ff00</td>
<td>95386</td>
<td>77813</td>
<td>102160</td>
<td>32383</td>
<td>9396</td>
<td>0</td>
<td>251105</td>
<td>194094</td>
<td>203715</td>
<td>141390</td>
<td>192087</td>
<td>158776</td>
</tr>
<tr>
<td>#7090ff</td>
<td>98252</td>
<td>80663</td>
<td>134631</td>
<td>202638</td>
<td>221491</td>
<td>251105</td>
<td>0</td>
<td>11326</td>
<td>34778</td>
<td>68521</td>
<td>18677</td>
<td>46633</td>
</tr>
<tr>
<td>#8fbfff</td>
<td>96330</td>
<td>56370</td>
<td>130887</td>
<td>169139</td>
<td>181641</td>
<td>194094</td>
<td>11326</td>
<td>0</td>
<td>34495</td>
<td>33133</td>
<td>4600</td>
<td>11995</td>
</tr>
<tr>
<td>#e07fff</td>
<td>48246</td>
<td>30879</td>
<td>187958</td>
<td>217995</td>
<td>163698</td>
<td>203715</td>
<td>34778</td>
<td>34495</td>
<td>0</td>
<td>28445</td>
<td>62589</td>
<td>57301</td>
</tr>
<tr>
<td>#fad0ff</td>
<td>77159</td>
<td>22745</td>
<td>193409</td>
<td>181945</td>
<td>131790</td>
<td>141390</td>
<td>68521</td>
<td>33133</td>
<td>28445</td>
<td>0</td>
<td>52564</td>
<td>19936</td>
</tr>
<tr>
<td>#70d3f0</td>
<td>118813</td>
<td>75981</td>
<td>110332</td>
<td>150709</td>
<td>188491</td>
<td>192087</td>
<td>18677</td>
<td>4600</td>
<td>62589</td>
<td>52564</td>
<td>0</td>
<td>13964</td>
</tr>
<tr>
<td>#afefff</td>
<td>117359</td>
<td>54468</td>
<td>150994</td>
<td>158446</td>
<td>163814</td>
<td>158776</td>
<td>46633</td>
<td>11995</td>
<td>57301</td>
<td>19936</td>
<td>13964</td>
<td>0</td>
</tr>
</tbody>
</table>
<p>OLD Modus Vivendi graph (org-habit) colour distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th>#af0404</th>
<th>#801f2f</th>
<th>#24ba2f</th>
<th>#0f8f07</th>
<th>#ffd03e</th>
<th>#d7d800</th>
<th>#5f8fff</th>
<th>#2f50c8</th>
<th>#af7bee</th>
<th>#7f59cf</th>
<th>#47dcfa</th>
<th>#0bc0df</th>
</tr>
</thead>
<tbody>
<tr>
<td>#af0404</td>
<td>0</td>
<td>13197</td>
<td>185352</td>
<td>139125</td>
<td>193417</td>
<td>185677</td>
<td>251071</td>
<td>162793</td>
<td>184769</td>
<td>135146</td>
<td>368694</td>
<td>333961</td>
</tr>
<tr>
<td>#801f2f</td>
<td>13197</td>
<td>0</td>
<td>116655</td>
<td>84300</td>
<td>171524</td>
<td>163539</td>
<td>164986</td>
<td>87854</td>
<td>128352</td>
<td>78064</td>
<td>260218</td>
<td>220994</td>
</tr>
<tr>
<td>#24ba2f</td>
<td>185352</td>
<td>116655</td>
<td>0</td>
<td>13063</td>
<td>126754</td>
<td>89687</td>
<td>134979</td>
<td>112496</td>
<td>158089</td>
<td>126444</td>
<td>123269</td>
<td>92241</td>
</tr>
<tr>
<td>#0f8f07</td>
<td>139125</td>
<td>84300</td>
<td>13063</td>
<td>0</td>
<td>171398</td>
<td>120415</td>
<td>186877</td>
<td>126247</td>
<td>204125</td>
<td>150274</td>
<td>199253</td>
<td>148378</td>
</tr>
<tr>
<td>#ffd03e</td>
<td>193417</td>
<td>171524</td>
<td>126754</td>
<td>171398</td>
<td>0</td>
<td>13021</td>
<td>173197</td>
<td>225287</td>
<td>114798</td>
<td>150176</td>
<td>174725</td>
<td>217076</td>
</tr>
<tr>
<td>#d7d800</td>
<td>185677</td>
<td>163539</td>
<td>89687</td>
<td>120415</td>
<td>13021</td>
<td>0</td>
<td>216096</td>
<td>246294</td>
<td>166931</td>
<td>186457</td>
<td>207224</td>
<td>232936</td>
</tr>
<tr>
<td>#5f8fff</td>
<td>251071</td>
<td>164986</td>
<td>134979</td>
<td>186877</td>
<td>173197</td>
<td>216096</td>
<td>0</td>
<td>29588</td>
<td>18647</td>
<td>20223</td>
<td>25318</td>
<td>28261</td>
</tr>
<tr>
<td>#2f50c8</td>
<td>162793</td>
<td>87854</td>
<td>112496</td>
<td>126247</td>
<td>225287</td>
<td>246294</td>
<td>29588</td>
<td>0</td>
<td>51398</td>
<td>15558</td>
<td>87284</td>
<td>54868</td>
</tr>
<tr>
<td>#af7bee</td>
<td>184769</td>
<td>128352</td>
<td>158089</td>
<td>204125</td>
<td>114798</td>
<td>166931</td>
<td>18647</td>
<td>51398</td>
<td>0</td>
<td>13011</td>
<td>65355</td>
<td>83889</td>
</tr>
<tr>
<td>#7f59cf</td>
<td>135146</td>
<td>78064</td>
<td>126444</td>
<td>150274</td>
<td>150176</td>
<td>186457</td>
<td>20223</td>
<td>15558</td>
<td>13011</td>
<td>0</td>
<td>81596</td>
<td>74264</td>
</tr>
<tr>
<td>#47dcfa</td>
<td>368694</td>
<td>260218</td>
<td>123269</td>
<td>199253</td>
<td>174725</td>
<td>207224</td>
<td>25318</td>
<td>87284</td>
<td>65355</td>
<td>81596</td>
<td>0</td>
<td>13086</td>
</tr>
<tr>
<td>#0bc0df</td>
<td>333961</td>
<td>220994</td>
<td>92241</td>
<td>148378</td>
<td>217076</td>
<td>232936</td>
<td>28261</td>
<td>54868</td>
<td>83889</td>
<td>74264</td>
<td>13086</td>
<td>0</td>
</tr>
</tbody>
</table>
<p>NEW Modus Vivendi graph (org-habit) colour distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th>#b52c2c</th>
<th>#702020</th>
<th>#24bf00</th>
<th>#007800</th>
<th>#f7ef00</th>
<th>#b08600</th>
<th>#2fafef</th>
<th>#1f2f8f</th>
<th>#bf94fe</th>
<th>#5f509f</th>
<th>#47dfea</th>
<th>#00808f</th>
</tr>
</thead>
<tbody>
<tr>
<td>#b52c2c</td>
<td>0</td>
<td>13285</td>
<td>143530</td>
<td>106198</td>
<td>169970</td>
<td>37209</td>
<td>211299</td>
<td>80341</td>
<td>144794</td>
<td>56938</td>
<td>250752</td>
<td>132324</td>
</tr>
<tr>
<td>#702020</td>
<td>13285</td>
<td>0</td>
<td>118043</td>
<td>62148</td>
<td>224771</td>
<td>55042</td>
<td>208369</td>
<td>49756</td>
<td>190061</td>
<td>52156</td>
<td>259676</td>
<td>99738</td>
</tr>
<tr>
<td>#24bf00</td>
<td>143530</td>
<td>118043</td>
<td>0</td>
<td>23026</td>
<td>123924</td>
<td>60815</td>
<td>164630</td>
<td>142766</td>
<td>232779</td>
<td>127479</td>
<td>160831</td>
<td>79076</td>
</tr>
<tr>
<td>#007800</td>
<td>106198</td>
<td>62148</td>
<td>23026</td>
<td>0</td>
<td>209838</td>
<td>74000</td>
<td>184251</td>
<td>84053</td>
<td>261174</td>
<td>98026</td>
<td>211507</td>
<td>62084</td>
</tr>
<tr>
<td>#f7ef00</td>
<td>169970</td>
<td>224771</td>
<td>123924</td>
<td>209838</td>
<td>0</td>
<td>58819</td>
<td>259895</td>
<td>318876</td>
<td>181640</td>
<td>223450</td>
<td>214078</td>
<td>254266</td>
</tr>
<tr>
<td>#b08600</td>
<td>37209</td>
<td>55042</td>
<td>60815</td>
<td>74000</td>
<td>58819</td>
<td>0</td>
<td>195184</td>
<td>134954</td>
<td>149680</td>
<td>91391</td>
<td>198362</td>
<td>128070</td>
</tr>
<tr>
<td>#2fafef</td>
<td>211299</td>
<td>208369</td>
<td>164630</td>
<td>184251</td>
<td>259895</td>
<td>195184</td>
<td>0</td>
<td>93048</td>
<td>55062</td>
<td>59227</td>
<td>10653</td>
<td>40571</td>
</tr>
<tr>
<td>#1f2f8f</td>
<td>80341</td>
<td>49756</td>
<td>142766</td>
<td>84053</td>
<td>318876</td>
<td>134954</td>
<td>93048</td>
<td>0</td>
<td>135801</td>
<td>14376</td>
<td>151789</td>
<td>28445</td>
</tr>
<tr>
<td>#bf94fe</td>
<td>144794</td>
<td>190061</td>
<td>232779</td>
<td>261174</td>
<td>181640</td>
<td>149680</td>
<td>55062</td>
<td>135801</td>
<td>0</td>
<td>64611</td>
<td>60159</td>
<td>121516</td>
</tr>
<tr>
<td>#5f509f</td>
<td>56938</td>
<td>52156</td>
<td>127479</td>
<td>98026</td>
<td>223450</td>
<td>91391</td>
<td>59227</td>
<td>14376</td>
<td>64611</td>
<td>0</td>
<td>98948</td>
<td>29899</td>
</tr>
<tr>
<td>#47dfea</td>
<td>250752</td>
<td>259676</td>
<td>160831</td>
<td>211507</td>
<td>214078</td>
<td>198362</td>
<td>10653</td>
<td>151789</td>
<td>60159</td>
<td>98948</td>
<td>0</td>
<td>71126</td>
</tr>
<tr>
<td>#00808f</td>
<td>132324</td>
<td>99738</td>
<td>79076</td>
<td>62084</td>
<td>254266</td>
<td>128070</td>
<td>40571</td>
<td>28445</td>
<td>121516</td>
<td>29899</td>
<td>71126</td>
<td>0</td>
</tr>
</tbody>
</table>
<h2>Particular requirements for each theme</h2>
<p>For <code>modus-operandi</code> the intent was two-fold: (i) to reduce the overall
intensity of most values without undermining their utility and (ii) to
fine-tune specific colour combinations. Here is a comparison of old and
new value pairs.</p>
<p>Modus Operandi graph (org-habit) colour pair distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th>Distance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Old reds</td>
<td>#ef6f79</td>
<td>#ff9f9f</td>
<td>13010</td>
</tr>
<tr>
<td>New reds</td>
<td>#ef7969</td>
<td>#ffafa0</td>
<td>18714</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old greens</td>
<td>#49d239</td>
<td>#6dec6d</td>
<td>13006</td>
</tr>
<tr>
<td>New greens</td>
<td>#49c029</td>
<td>#8fef00</td>
<td>25238</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old yellows</td>
<td>#efec08</td>
<td>#dbff4e</td>
<td>13003</td>
</tr>
<tr>
<td>New yellows</td>
<td>#ffcf00</td>
<td>#f9ff00</td>
<td>9396</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old blues</td>
<td>#55a2f0</td>
<td>#7fcfff</td>
<td>13044</td>
</tr>
<tr>
<td>New blues</td>
<td>#7090ff</td>
<td>#8fbfff</td>
<td>11326</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old magentas</td>
<td>#ba86ef</td>
<td>#e7afff</td>
<td>13090</td>
</tr>
<tr>
<td>New magentas</td>
<td>#e07fff</td>
<td>#fad0ff</td>
<td>28445</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old cyans</td>
<td>#30d3f0</td>
<td>#6fefff</td>
<td>13017</td>
</tr>
<tr>
<td>New cyans</td>
<td>#70d3f0</td>
<td>#afefff</td>
<td>13964</td>
</tr>
</tbody>
</table>
<p>Notice that yellow and blue pairs have been brought closer, despite the
general trend to amplify the distinction between the values in each pair
(well “amplify” may give the wrong impression as these are subtle
tweaks—check again the first screenshot). This reduction may seem
like an error, though it is part of the design (and why we must look at
things holistically without following every rule to the letter while
remaining oblivious to its spirit). Consider that the old subtle yellow
(#dbff4e) was too close to the subtle red (#ff9f9f), while the old
subtle green (#6dec6d) was far closer to its corresponding blue
(#7fcfff) than what it should have been. Those combinations appear next
to each other and thus need to be accounted for. The following table
illustrates this point:</p>
<p>Modus Operandi select graph (org-habit) colour pairs distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th>Distance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Old subtle yellow vs subtle red</td>
<td>#dbff4e</td>
<td>#ff9f9f</td>
<td>54670</td>
</tr>
<tr>
<td>New subtle yellow vs subtle red</td>
<td>#f9ff00</td>
<td>#ffafa0</td>
<td>77813</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old subtle green vs subtle blue</td>
<td>#6dec6d</td>
<td>#7fcfff</td>
<td>58701</td>
</tr>
<tr>
<td>New subtle green vs subtle blue</td>
<td>#8fef00</td>
<td>#8fbfff</td>
<td>169139</td>
</tr>
</tbody>
</table>
<p>The new colours work better in general, but let us not belabour the
point.</p>
<p>For <code>modus-vivendi</code> the task was somewhat more straightforward as all we
had to do was to tone down the colours while paying attention to
inter-pair relations. This is paradoxically more tricky to convey with
raw data as one has to compare the visuals of the before and after
states (it is easier to discern colours on a dark backdrop because
“colour” is an expression of light). Suffice to say that we have
eliminated any exaggerations without making compromises on the relevant
functionality. Still, we managed to amplify the colour distance almost
across the board while avoiding any overshoot in intensity. This table
compares each pair of intense and subtle hues:</p>
<p>Modus Vivendi graph (org-habit) colour pair distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th>Distance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Old reds</td>
<td>#af0404</td>
<td>#801f2f</td>
<td>13197</td>
</tr>
<tr>
<td>New reds</td>
<td>#b52c2c</td>
<td>#702020</td>
<td>13285</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old greens</td>
<td>#24ba2f</td>
<td>#0f8f07</td>
<td>13063</td>
</tr>
<tr>
<td>New greens</td>
<td>#24bf00</td>
<td>#007800</td>
<td>23026</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old yellows</td>
<td>#ffd03e</td>
<td>#d7d800</td>
<td>13021</td>
</tr>
<tr>
<td>New yellows</td>
<td>#f7ef00</td>
<td>#b08600</td>
<td>58819</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old blues</td>
<td>#5f8fff</td>
<td>#2f50c8</td>
<td>29588</td>
</tr>
<tr>
<td>New blues</td>
<td>#2fafef</td>
<td>#1f2f8f</td>
<td>93048</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old magentas</td>
<td>#af7bee</td>
<td>#7f59cf</td>
<td>13011</td>
</tr>
<tr>
<td>New magentas</td>
<td>#bf94fe</td>
<td>#5f509f</td>
<td>64611</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old cyans</td>
<td>#47dcfa</td>
<td>#0bc0df</td>
<td>13086</td>
</tr>
<tr>
<td>New cyans</td>
<td>#47dfea</td>
<td>#00808f</td>
<td>71126</td>
</tr>
</tbody>
</table>
<p>Now here comes the counter-intuitive part. For <code>modus-operandi</code> the
yellow+red as well as green+blue combinations had to be rendered more
clear. Whereas for <code>modus-vivendi</code> we had to bring those colours closer
to each other to avoid exaggerations in intensity. Remember that
<code>modus-vivendi</code> has a black background, so any extra intensity is
immediately noticeable.</p>
<p>Modus Vivendi select graph (org-habit) colour pairs distance in hueness:</p>
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th>Distance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Old subtle yellow vs subtle red</td>
<td>#d7d800</td>
<td>#801f2f</td>
<td>163539</td>
</tr>
<tr>
<td>New subtle yellow vs subtle red</td>
<td>#b08600</td>
<td>#702020</td>
<td>55042</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Old subtle green vs subtle blue</td>
<td>#0f8f07</td>
<td>#2f50c8</td>
<td>126247</td>
</tr>
<tr>
<td>New subtle green vs subtle blue</td>
<td>#007800</td>
<td>#1f2f8f</td>
<td>84053</td>
</tr>
</tbody>
</table>
<h2>Tricky though perhaps dull</h2>
<p>I understand this is not an interesting topic and it probably is too
difficult to relate to the various data points without visualising them
and comparing the before and after states. Furthermore, data can be
deceptive and I have always maintained that theme development stands at
the intersection of science and art (at least for the purposes of
conforming with the rigorous accessibility standards of the Modus
themes).</p>
<p>That granted, I wanted to shed light on the “behind the scenes” work
that is not immediately obvious when one checks a diff that introduces
some seemingly trivial tweaks like <code>#49d239</code> -&gt; <code>#49c029</code> or <code>#7fcfff</code>
-&gt; <code>#8fbfff</code>.</p>
Reference in a new issue View git blame Copy permalink