🌈 I provide private lessons on Emacs, Linux, and Life in general: https://protesilaos.com/coach/.

Modus themes (Emacs): new "faint syntax" option

The following is intended to be read inside of an org-mode buffer, so I provide the text verbatim for you to read locally.

The gist is that users of my highly-accessible (and highly-customisable) themes for Emacs now have the option to reduce the saturation in modes where syntax highlighting takes place.


#+TITLE: Initial implementation of the "faint syntax colours" option
#+AUTHOR: Protesilaos Stavrou

* Description of the new user-facing option

Users can now opt in to the customisation option that desaturates the
colours that are used to highlight code syntax.  This is made possible
by a new palette subset that consists of carefully-selected colours.
The idea is to make code less intense, but retain a sense of visual
order.

The new =defcustom= symbols:

+ =modus-operandi-theme-faint-syntax=
+ =modus-vivendi-theme-faint-syntax=

While the current implementation is considered "good enough", there may
still be improvements to be made.  Feedback is always welcome!

* Tools for measuring relative luminance and previewing colours

This is the formula for the subsequent calculations.  A resulting value
that is >= 7 means that the colour combination is highly accessible and
receives a AAA rating in the WCAG standard (what the Modus themes must
always conform with):

#+begin_src emacs-lisp
;; Code is courtesy of Omar Antolín Camarena:
;; https://github.com/oantolin/emacs-config
(defun wcag (hex)
  (apply #'+
         (cl-mapcar
          (lambda (k x)
            (* k (if (<= x 0.03928)
                     (/ x 12.92)
                   (expt (/ (+ x 0.055) 1.055) 2.4))))
          '(0.2126 0.7152 0.0722)
          (color-name-to-rgb hex))))

(defun clr (c1 c2)
  (let ((ct (/ (+ (wcag c1) 0.05)
               (+ (wcag c2) 0.05))))
    (max ct (/ ct))))
#+end_src

Use =rainbow-mode= to preview the colour values presented below.

#+begin_src emacs-lisp
(use-package rainbow-mode
  :ensure
  :commands rainbow-mode
  :config
  (setq rainbow-ansi-colors nil)
  (setq rainbow-x-colors nil))
#+end_src

* Tables with new "faint" colours

The following tables show the contrast ratio of the new "faint" accent
values relative to: =bg-main=, =bg-dim=, =bg-alt=, =bg-hl-line= (in this
order).

#+NAME: Modus Operandi faint accent values
| Colour name             |         | #ffffff | #f8f8f8 | #f0f0f0 | #f2eff3 |
|-------------------------+---------+---------+---------+---------+---------|
| red-faint               | #7f1010 |   10.58 |    9.97 |    9.29 |    9.28 |
| red-alt-faint           | #702f00 |   10.02 |    9.44 |    8.79 |    8.79 |
| red-alt-other-faint     | #7f002f |   10.81 |   10.17 |    9.48 |    9.48 |
| green-faint             | #1f441f |   11.02 |   10.38 |    9.67 |    9.67 |
| green-alt-faint         | #30440f |   10.72 |   10.09 |    9.40 |    9.40 |
| green-alt-other-faint   | #0f443f |   10.94 |   10.30 |    9.60 |    9.60 |
| yellow-faint            | #5f4400 |    9.08 |    8.55 |    7.97 |    7.96 |
| yellow-alt-faint        | #5d5000 |    8.04 |    7.57 |    7.05 |    7.05 |
| yellow-alt-other-faint  | #5e3a20 |    9.99 |    9.41 |    8.77 |    8.76 |
| blue-faint              | #002f88 |   11.92 |   11.22 |   10.46 |   10.45 |
| blue-alt-faint          | #003f78 |   10.59 |    9.98 |    9.30 |    9.29 |
| blue-alt-other-faint    | #1f2f6f |   12.39 |   11.67 |   10.88 |   10.87 |
| magenta-faint           | #752f50 |    9.22 |    8.68 |    8.09 |    8.08 |
| magenta-alt-faint       | #702565 |    9.81 |    9.23 |    8.60 |    8.60 |
| magenta-alt-other-faint | #5f3f7f |    8.39 |    7.90 |    7.36 |    7.35 |
| cyan-faint              | #12506f |    8.74 |    8.23 |    7.67 |    7.66 |
| cyan-alt-faint          | #354f6f |    8.40 |    7.91 |    7.37 |    7.37 |
| cyan-alt-other-faint    | #2e584f |    8.00 |    7.53 |    7.02 |    7.02 |
#+TBLFM: $3='(clr $2 @1$3);%0.2f :: $4='(clr $2 @1$4);%0.2f :: $5='(clr $2 @1$5);%0.2f :: $6='(clr $2 @1$6);%0.2f

#+NAME: Modus Vivendi faint accent values
| Colour name             |         | #000000 | #110b11 | #181a20 | #151823 |
|-------------------------+---------+---------+---------+---------+---------|
| red-faint               | #ffa0a0 |   10.79 |    9.99 |    8.93 |    9.09 |
| red-alt-faint           | #f5aa80 |   10.94 |   10.14 |    9.06 |    9.22 |
| red-alt-other-faint     | #ff9fbf |   10.96 |   10.15 |    9.08 |    9.24 |
| green-faint             | #88cf88 |   11.33 |   10.49 |    9.38 |    9.54 |
| green-alt-faint         | #a8cf88 |   11.95 |   11.06 |    9.89 |   10.07 |
| green-alt-other-faint   | #88cfaf |   11.59 |   10.73 |    9.60 |    9.77 |
| yellow-faint            | #d2b580 |   10.66 |    9.87 |    8.83 |    8.98 |
| yellow-alt-faint        | #cabf77 |   11.23 |   10.40 |    9.30 |    9.46 |
| yellow-alt-other-faint  | #d0ba95 |   11.14 |   10.32 |    9.23 |    9.39 |
| blue-faint              | #92baff |   10.69 |    9.90 |    8.85 |    9.01 |
| blue-alt-faint          | #a4b0ff |   10.23 |    9.48 |    8.47 |    8.62 |
| blue-alt-other-faint    | #8fc5ff |   11.60 |   10.74 |    9.61 |    9.77 |
| magenta-faint           | #e0b2d6 |   11.51 |   10.66 |    9.53 |    9.70 |
| magenta-alt-faint       | #ef9fe4 |   10.75 |    9.96 |    8.90 |    9.06 |
| magenta-alt-other-faint | #d0b4ff |   11.65 |   10.79 |    9.65 |    9.82 |
| cyan-faint              | #a0bfdf |   11.01 |   10.20 |    9.12 |    9.28 |
| cyan-alt-faint          | #90c4ed |   11.30 |   10.47 |    9.36 |    9.53 |
| cyan-alt-other-faint    | #a4d0bb |   12.32 |   11.41 |   10.20 |   10.38 |
#+TBLFM: $3='(clr $2 @1$3);%0.2f :: $4='(clr $2 @1$4);%0.2f :: $5='(clr $2 @1$5);%0.2f :: $6='(clr $2 @1$6);%0.2f

* Tables with all accent values for code syntax

For the sake of completeness, the following tables present all colours
that are meant to be used by =font-lock= and relevant modes.  The method
is the same as above, with the regard to the background values these are
compared against.

#+NAME: Modus Operandi accent values
| Colour name             |         | #ffffff | #f8f8f8 | #f0f0f0 | #f2eff3 |
|-------------------------+---------+---------+---------+---------+---------|
| red                     | #a60000 |    8.01 |    7.54 |    7.03 |    7.03 |
| red-alt                 | #972500 |    8.14 |    7.66 |    7.14 |    7.14 |
| red-alt-other           | #a0132f |    7.99 |    7.52 |    7.01 |    7.01 |
| green                   | #005e00 |    8.07 |    7.60 |    7.08 |    7.08 |
| green-alt               | #315b00 |    7.99 |    7.53 |    7.01 |    7.01 |
| green-alt-other         | #145c33 |    8.05 |    7.58 |    7.06 |    7.06 |
| yellow                  | #813e00 |    8.01 |    7.54 |    7.03 |    7.02 |
| yellow-alt              | #70480f |    8.01 |    7.54 |    7.03 |    7.02 |
| yellow-alt-other        | #863927 |    7.99 |    7.52 |    7.01 |    7.01 |
| blue                    | #0030a6 |   10.64 |   10.02 |    9.34 |    9.33 |
| blue-alt                | #223fbf |    8.30 |    7.81 |    7.28 |    7.28 |
| blue-alt-other          | #0000bb |   12.23 |   11.51 |   10.73 |   10.72 |
| magenta                 | #721045 |   11.20 |   10.54 |    9.83 |    9.82 |
| magenta-alt             | #8f0075 |    8.66 |    8.15 |    7.60 |    7.59 |
| magenta-alt-other       | #5317ac |   10.07 |    9.48 |    8.83 |    8.83 |
| cyan                    | #00538b |    8.05 |    7.58 |    7.06 |    7.06 |
| cyan-alt                | #30517f |    8.05 |    7.58 |    7.06 |    7.06 |
| cyan-alt-other          | #005a5f |    7.99 |    7.53 |    7.01 |    7.01 |
|-------------------------+---------+---------+---------+---------+---------|
| red-faint               | #7f1010 |   10.58 |    9.97 |    9.29 |    9.28 |
| red-alt-faint           | #702f00 |   10.02 |    9.44 |    8.79 |    8.79 |
| red-alt-other-faint     | #7f002f |   10.81 |   10.17 |    9.48 |    9.48 |
| green-faint             | #1f441f |   11.02 |   10.38 |    9.67 |    9.67 |
| green-alt-faint         | #30440f |   10.72 |   10.09 |    9.40 |    9.40 |
| green-alt-other-faint   | #0f443f |   10.94 |   10.30 |    9.60 |    9.60 |
| yellow-faint            | #5f4400 |    9.08 |    8.55 |    7.97 |    7.96 |
| yellow-alt-faint        | #5d5000 |    8.04 |    7.57 |    7.05 |    7.05 |
| yellow-alt-other-faint  | #5e3a20 |    9.99 |    9.41 |    8.77 |    8.76 |
| blue-faint              | #002f88 |   11.92 |   11.22 |   10.46 |   10.45 |
| blue-alt-faint          | #003f78 |   10.59 |    9.98 |    9.30 |    9.29 |
| blue-alt-other-faint    | #1f2f6f |   12.39 |   11.67 |   10.88 |   10.87 |
| magenta-faint           | #752f50 |    9.22 |    8.68 |    8.09 |    8.08 |
| magenta-alt-faint       | #702565 |    9.81 |    9.23 |    8.60 |    8.60 |
| magenta-alt-other-faint | #5f3f7f |    8.39 |    7.90 |    7.36 |    7.35 |
| cyan-faint              | #12506f |    8.74 |    8.23 |    7.67 |    7.66 |
| cyan-alt-faint          | #354f6f |    8.40 |    7.91 |    7.37 |    7.37 |
| cyan-alt-other-faint    | #2e584f |    8.00 |    7.53 |    7.02 |    7.02 |
#+TBLFM: $3='(clr $2 @1$3);%0.2f :: $4='(clr $2 @1$4);%0.2f :: $5='(clr $2 @1$5);%0.2f :: $6='(clr $2 @1$6);%0.2f

#+NAME: Modus Vivendi accent values
| Colour name             |         | #000000 | #110b11 | #181a20 | #151823 |
|-------------------------+---------+---------+---------+---------+---------|
| red                     | #ff8059 |    8.48 |    7.86 |    7.03 |    7.15 |
| red-alt                 | #f4923b |    9.02 |    8.35 |    7.47 |    7.60 |
| red-alt-other           | #ff9977 |   10.07 |    9.33 |    8.34 |    8.49 |
| green                   | #44bc44 |    8.52 |    7.89 |    7.06 |    7.18 |
| green-alt               | #80d200 |   11.14 |   10.31 |    9.22 |    9.38 |
| green-alt-other         | #00cd68 |    9.93 |    9.20 |    8.23 |    8.37 |
| yellow                  | #eecc00 |   13.27 |   12.29 |   10.99 |   11.18 |
| yellow-alt              | #cfdf30 |   14.25 |   13.20 |   11.80 |   12.01 |
| yellow-alt-other        | #f0ce43 |   13.61 |   12.61 |   11.28 |   11.47 |
| blue                    | #29aeff |    8.59 |    7.96 |    7.12 |    7.24 |
| blue-alt                | #72a4ff |    8.47 |    7.84 |    7.01 |    7.14 |
| blue-alt-other          | #00bdfa |    9.66 |    8.95 |    8.00 |    8.14 |
| magenta                 | #feacd0 |   12.03 |   11.14 |    9.96 |   10.13 |
| magenta-alt             | #f78fe7 |   10.04 |    9.30 |    8.31 |    8.46 |
| magenta-alt-other       | #b6a0ff |    9.46 |    8.76 |    7.84 |    7.97 |
| cyan                    | #00d3d0 |   11.23 |   10.40 |    9.30 |    9.46 |
| cyan-alt                | #4ae8fc |   14.24 |   13.19 |   11.79 |   12.00 |
| cyan-alt-other          | #6ae4b9 |   13.41 |   12.42 |   11.11 |   11.30 |
|-------------------------+---------+---------+---------+---------+---------|
| red-faint               | #ffa0a0 |   10.79 |    9.99 |    8.93 |    9.09 |
| red-alt-faint           | #f5aa80 |   10.94 |   10.14 |    9.06 |    9.22 |
| red-alt-other-faint     | #ff9fbf |   10.96 |   10.15 |    9.08 |    9.24 |
| green-faint             | #88cf88 |   11.33 |   10.49 |    9.38 |    9.54 |
| green-alt-faint         | #a8cf88 |   11.95 |   11.06 |    9.89 |   10.07 |
| green-alt-other-faint   | #88cfaf |   11.59 |   10.73 |    9.60 |    9.77 |
| yellow-faint            | #d2b580 |   10.66 |    9.87 |    8.83 |    8.98 |
| yellow-alt-faint        | #cabf77 |   11.23 |   10.40 |    9.30 |    9.46 |
| yellow-alt-other-faint  | #d0ba95 |   11.14 |   10.32 |    9.23 |    9.39 |
| blue-faint              | #92baff |   10.69 |    9.90 |    8.85 |    9.01 |
| blue-alt-faint          | #a4b0ff |   10.23 |    9.48 |    8.47 |    8.62 |
| blue-alt-other-faint    | #8fc5ff |   11.60 |   10.74 |    9.61 |    9.77 |
| magenta-faint           | #e0b2d6 |   11.51 |   10.66 |    9.53 |    9.70 |
| magenta-alt-faint       | #ef9fe4 |   10.75 |    9.96 |    8.90 |    9.06 |
| magenta-alt-other-faint | #d0b4ff |   11.65 |   10.79 |    9.65 |    9.82 |
| cyan-faint              | #a0bfdf |   11.01 |   10.20 |    9.12 |    9.28 |
| cyan-alt-faint          | #90c4ed |   11.30 |   10.47 |    9.36 |    9.53 |
| cyan-alt-other-faint    | #a4d0bb |   12.32 |   11.41 |   10.20 |   10.38 |
#+TBLFM: $3='(clr $2 @1$3);%0.2f :: $4='(clr $2 @1$4);%0.2f :: $5='(clr $2 @1$5);%0.2f :: $6='(clr $2 @1$6);%0.2f