[elpa] externals/modus-operandi-theme e8efe89 028/112: MAJOR REVIEW of diff views (`diff-mode', `magit')

[Stefan Monnier]

branch: externals/modus-operandi-theme
commit e8efe8937583e7c0536b3d32fbf7fa1fba67b4a4
Author: Protesilaos Stavrou <address@hidden>
Commit: Protesilaos Stavrou <address@hidden>

    MAJOR REVIEW of diff views (`diff-mode', `magit')
    
    + Define an entire new subset of the colour palette.  This one is
    designed specifically for diffs in their various states.
    
    + Define bespoke faces that apply the new colours.  These are internal
    to each theme and are only meant to make the development process more
    convenient.
    
    + Update `diff-mode' and `magit' to use the new faces.
    
    This commit is the end-result of an initiative that was announced in
    issue 18: https://gitlab.com/protesilaos/modus-themes/-/issues/18
    
    The original idea was to test whether diffs could be improved by
    removing most background elements.  Basically to just use red and green
    for the affected lines, with red and green background used only for
    refined diff views (in-line changes).
    
    It eventually became clear that such a course of action would be to the
    detriment of productivity, especially in Magit where interactivity (and
    concomitant visual cues) are an essential aspect of the user experience.
    
    So backgrounds are still in place.  And, in general, the approach is the
    same as before.  The new colours are meant to be easier on the eyes
    while always conforming with the WCAG AAA standard (minimum contrast
    ratio of 7:1 between a given background and foreground combination).
---
 modus-operandi-theme.el | 68 ++++++++++++++++++++++++++++++++++---------------
 modus-vivendi-theme.el  | 68 ++++++++++++++++++++++++++++++++++---------------
 2 files changed, 94 insertions(+), 42 deletions(-)

diff --git a/modus-operandi-theme.el b/modus-operandi-theme.el
index a927b90..87a5b6b 100644
--- a/modus-operandi-theme.el
+++ b/modus-operandi-theme.el
@@ -272,6 +272,15 @@ between foreground and background is >= 7:1)."
 (defface modus-theme-special-mild nil t)
 (defface modus-theme-special-warm nil t)
 (defface modus-theme-special-calm nil t)
+(defface modus-theme-diff-added nil t)
+(defface modus-theme-diff-changed nil t)
+(defface modus-theme-diff-removed nil t)
+(defface modus-theme-diff-refine-added nil t)
+(defface modus-theme-diff-refine-changed nil t)
+(defface modus-theme-diff-refine-removed nil t)
+(defface modus-theme-diff-focus-added nil t)
+(defface modus-theme-diff-focus-changed nil t)
+(defface modus-theme-diff-focus-removed nil t)
 
 ;; User-facing customisation options.  They are all deactivated by
 ;; default (users must opt in).
@@ -417,6 +426,15 @@ between foreground and background is >= 7:1)."
       (fg-header "#2a2a2a") (bg-header "#e5e5e5")
       (fg-whitespace "#645060") (bg-whitespace "#fff8fc")
       (fg-paren-match "#222222") (bg-paren-match "#deb8af")
+      (fg-diff-added "#002600") (bg-diff-added "#d4fad4")
+      (fg-diff-changed "#302300") (bg-diff-changed "#fcefcf")
+      (fg-diff-removed "#400000") (bg-diff-removed "#ffe8ef")
+      (fg-diff-refine-added "#003a00") (bg-diff-refine-added "#94cf94")
+      (fg-diff-refine-changed "#3a2a10") (bg-diff-refine-changed "#cccf8f")
+      (fg-diff-refine-removed "#500000") (bg-diff-refine-removed "#daa2b0")
+      (fg-diff-focus-added "#002900") (bg-diff-focus-added "#c4eac4")
+      (fg-diff-focus-changed "#332600") (bg-diff-focus-changed "#ecdfbf")
+      (fg-diff-focus-removed "#460000") (bg-diff-focus-removed "#efd8df")
 
       ;; conditional styles that evaluate user-facing customisation
       ;; options
@@ -476,6 +494,16 @@ between foreground and background is >= 7:1)."
    `(modus-theme-special-mild ((,class (:background ,bg-special-mild 
:foreground ,fg-special-mild))))
    `(modus-theme-special-warm ((,class (:background ,bg-special-warm 
:foreground ,fg-special-warm))))
    `(modus-theme-special-calm ((,class (:background ,bg-special-calm 
:foreground ,fg-special-calm))))
+   ;;; colour combinations intended for `diff-mode' or equivalent
+   `(modus-theme-diff-added ((,class (:background ,bg-diff-added :foreground 
,fg-diff-added))))
+   `(modus-theme-diff-changed ((,class (:background ,bg-diff-changed 
:foreground ,fg-diff-changed))))
+   `(modus-theme-diff-removed ((,class (:background ,bg-diff-removed 
:foreground ,fg-diff-removed))))
+   `(modus-theme-diff-refine-added ((,class (:background ,bg-diff-refine-added 
:foreground ,fg-diff-refine-added))))
+   `(modus-theme-diff-refine-changed ((,class (:background 
,bg-diff-refine-changed :foreground ,fg-diff-refine-changed))))
+   `(modus-theme-diff-refine-removed ((,class (:background 
,bg-diff-refine-removed :foreground ,fg-diff-refine-removed))))
+   `(modus-theme-diff-focus-added ((,class (:background ,bg-diff-focus-added 
:foreground ,fg-diff-focus-added))))
+   `(modus-theme-diff-focus-changed ((,class (:background 
,bg-diff-focus-changed :foreground ,fg-diff-focus-changed))))
+   `(modus-theme-diff-focus-removed ((,class (:background 
,bg-diff-focus-removed :foreground ,fg-diff-focus-removed))))
    ;;;;;;;;;;;;;;;;;;;
    ;; actual styles ;;
    ;;;;;;;;;;;;;;;;;;;
@@ -793,22 +821,22 @@ between foreground and background is >= 7:1)."
    `(diff-hl-insert ((,class (:inherit modus-theme-intense-green))))
    `(diff-hl-reverted-hunk-highlight ((,class (:inherit 
modus-theme-intense-magenta))))
    ;;;; diff-mode
-   `(diff-added ((,class (:foreground ,green))))
-   `(diff-changed ((,class (:foreground ,yellow))))
+   `(diff-added ((,class (:inherit modus-theme-diff-focus-added))))
+   `(diff-changed ((,class (:inherit modus-theme-diff-focus-changed))))
    `(diff-context ((,class (:foreground ,fg-alt))))
    `(diff-file-header ((,class (:foreground ,blue :weight bold))))
    `(diff-function ((,class (:foreground ,fg-special-cold))))
    `(diff-header ((,class (:foreground ,blue-nuanced))))
-   `(diff-hunk-header ((,class (:inherit modus-theme-special-warm :weight 
bold))))
+   `(diff-hunk-header ((,class (:inherit modus-theme-subtle-cyan :weight 
bold))))
    `(diff-index ((,class (:foreground ,blue-alt :weight bold))))
    `(diff-indicator-added ((,class (:inherit diff-added))))
    `(diff-indicator-changed ((,class (:inherit diff-changed))))
    `(diff-indicator-removed ((,class (:inherit diff-removed))))
    `(diff-nonexistent ((,class (:inherit modus-theme-intense-neutral :weight 
bold))))
-   `(diff-refine-added ((,class (:inherit modus-theme-refine-green))))
-   `(diff-refine-changed ((,class (:inherit modus-theme-refine-yellow))))
-   `(diff-refine-removed ((,class (:inherit modus-theme-refine-red))))
-   `(diff-removed ((,class (:foreground ,red))))
+   `(diff-refine-added ((,class (:inherit modus-theme-diff-refine-added))))
+   `(diff-refine-changed ((,class (:inherit modus-theme-diff-refine-changed))))
+   `(diff-refine-removed ((,class (:inherit modus-theme-diff-refine-removed))))
+   `(diff-removed ((,class (:inherit modus-theme-diff-focus-removed))))
    ;;;; dim-autoload
    `(dim-autoload-cookie-line ((,class (:foreground ,fg-alt :slant 
,modus-theme-slant))))
    ;;;; dired
@@ -1569,25 +1597,23 @@ between foreground and background is >= 7:1)."
    `(magit-branch-upstream ((,class (:slant italic))))
    `(magit-cherry-equivalent ((,class (:background ,bg-main :foreground 
,magenta-intense))))
    `(magit-cherry-unmatched ((,class (:background ,bg-main :foreground 
,cyan-intense))))
-   `(magit-diff-added ((,class (:foreground ,green))))
-   `(magit-diff-added-highlight ((,class (:foreground ,green))))
-   `(magit-diff-base ((,class (:foreground ,yellow))))
-   `(magit-diff-base-highlight ((,class (:foreground ,yellow))))
-   `(magit-diff-changed ((,class (:weight bold))))
-   `(magit-diff-changed-highlight ((,class (:weight bold))))
+   `(magit-diff-added ((,class (:inherit modus-theme-diff-added))))
+   `(magit-diff-added-highlight ((,class (:inherit 
modus-theme-diff-focus-added))))
+   `(magit-diff-base ((,class (:inherit modus-theme-diff-changed))))
+   `(magit-diff-base-highlight ((,class (:inherit 
modus-theme-diff-focus-changed))))
    `(magit-diff-context ((,class (:foreground ,fg-alt))))
-   `(magit-diff-context-highlight ((,class (:foreground ,fg-alt))))
-   `(magit-diff-file-heading ((,class (:background ,bg-main :foreground 
,fg-special-cold :weight bold))))
+   `(magit-diff-context-highlight ((,class (:background ,bg-alt :foreground 
,fg-alt))))
+   `(magit-diff-file-heading ((,class (:foreground ,fg-special-cold :weight 
bold))))
    `(magit-diff-file-heading-highlight ((,class (:inherit 
modus-theme-special-cold :weight bold))))
    `(magit-diff-file-heading-selection ((,class (:background ,bg-alt 
:foreground ,cyan))))
-   `(magit-diff-hunk-heading ((,class (:foreground ,fg-special-warm :weight 
bold))))
-   `(magit-diff-hunk-heading-highlight ((,class (:inherit 
modus-theme-special-warm :weight bold))))
-   `(magit-diff-hunk-heading-selection ((,class (:inherit 
magit-diff-file-heading-selection))))
-   `(magit-diff-hunk-region ((,class (:background ,bg-region :foreground 
,fg-main))))
+   `(magit-diff-hunk-heading ((,class (:inherit modus-theme-intense-neutral 
:weight bold))))
+   `(magit-diff-hunk-heading-highlight ((,class (:inherit 
modus-theme-subtle-blue :weight bold))))
+   `(magit-diff-hunk-heading-selection ((,class (:inherit 
modus-theme-refine-cyan))))
+   `(magit-diff-hunk-region ((,class (:weight bold))))
    `(magit-diff-lines-boundary ((,class (:background ,fg-main))))
    `(magit-diff-lines-heading ((,class (:inherit modus-theme-refine-magenta))))
-   `(magit-diff-removed ((,class (:foreground ,red))))
-   `(magit-diff-removed-highlight ((,class (:foreground ,red))))
+   `(magit-diff-removed ((,class (:inherit modus-theme-diff-removed))))
+   `(magit-diff-removed-highlight ((,class (:inherit 
modus-theme-diff-focus-removed))))
    `(magit-diffstat-added ((,class (:foreground ,green))))
    `(magit-diffstat-removed ((,class (:foreground ,red))))
    `(magit-dimmed ((,class (:foreground ,fg-alt))))
diff --git a/modus-vivendi-theme.el b/modus-vivendi-theme.el
index 2c60830..129f7ee 100644
--- a/modus-vivendi-theme.el
+++ b/modus-vivendi-theme.el
@@ -272,6 +272,15 @@ between foreground and background is >= 7:1)."
 (defface modus-theme-special-mild nil t)
 (defface modus-theme-special-warm nil t)
 (defface modus-theme-special-calm nil t)
+(defface modus-theme-diff-added nil t)
+(defface modus-theme-diff-changed nil t)
+(defface modus-theme-diff-removed nil t)
+(defface modus-theme-diff-refine-added nil t)
+(defface modus-theme-diff-refine-changed nil t)
+(defface modus-theme-diff-refine-removed nil t)
+(defface modus-theme-diff-focus-added nil t)
+(defface modus-theme-diff-focus-changed nil t)
+(defface modus-theme-diff-focus-removed nil t)
 
 ;; User-facing customisation options.  They are all deactivated by
 ;; default (users must opt in).
@@ -417,6 +426,15 @@ between foreground and background is >= 7:1)."
       (fg-header "#dddddd") (bg-header "#2a2a2a")
       (fg-whitespace "#a4959f") (bg-whitespace "#170016")
       (fg-paren-match "#fcfcfc") (bg-paren-match "#754a5d")
+      (fg-diff-added "#a4baa4") (bg-diff-added "#002600")
+      (fg-diff-changed "#b0ba9f") (bg-diff-changed "#302000")
+      (fg-diff-removed "#bbadaa") (bg-diff-removed "#440000")
+      (fg-diff-refine-added "#e0ffe0") (bg-diff-refine-added "#006000")
+      (fg-diff-refine-changed "#ffffcc") (bg-diff-refine-changed "#585800")
+      (fg-diff-refine-removed "#ffc8bb") (bg-diff-refine-removed "#800000")
+      (fg-diff-focus-added "#b4ddb4") (bg-diff-focus-added "#244024")
+      (fg-diff-focus-changed "#d0daaf") (bg-diff-focus-changed "#4a3a10")
+      (fg-diff-focus-removed "#eebdba") (bg-diff-focus-removed "#542222")
 
       ;; conditional styles that evaluate user-facing customisation
       ;; options
@@ -476,6 +494,16 @@ between foreground and background is >= 7:1)."
    `(modus-theme-special-mild ((,class (:background ,bg-special-mild 
:foreground ,fg-special-mild))))
    `(modus-theme-special-warm ((,class (:background ,bg-special-warm 
:foreground ,fg-special-warm))))
    `(modus-theme-special-calm ((,class (:background ,bg-special-calm 
:foreground ,fg-special-calm))))
+   ;;; colour combinations intended for `diff-mode' or equivalent
+   `(modus-theme-diff-added ((,class (:background ,bg-diff-added :foreground 
,fg-diff-added))))
+   `(modus-theme-diff-changed ((,class (:background ,bg-diff-changed 
:foreground ,fg-diff-changed))))
+   `(modus-theme-diff-removed ((,class (:background ,bg-diff-removed 
:foreground ,fg-diff-removed))))
+   `(modus-theme-diff-refine-added ((,class (:background ,bg-diff-refine-added 
:foreground ,fg-diff-refine-added))))
+   `(modus-theme-diff-refine-changed ((,class (:background 
,bg-diff-refine-changed :foreground ,fg-diff-refine-changed))))
+   `(modus-theme-diff-refine-removed ((,class (:background 
,bg-diff-refine-removed :foreground ,fg-diff-refine-removed))))
+   `(modus-theme-diff-focus-added ((,class (:background ,bg-diff-focus-added 
:foreground ,fg-diff-focus-added))))
+   `(modus-theme-diff-focus-changed ((,class (:background 
,bg-diff-focus-changed :foreground ,fg-diff-focus-changed))))
+   `(modus-theme-diff-focus-removed ((,class (:background 
,bg-diff-focus-removed :foreground ,fg-diff-focus-removed))))
    ;;;;;;;;;;;;;;;;;;;
    ;; actual styles ;;
    ;;;;;;;;;;;;;;;;;;;
@@ -793,22 +821,22 @@ between foreground and background is >= 7:1)."
    `(diff-hl-insert ((,class (:inherit modus-theme-intense-green))))
    `(diff-hl-reverted-hunk-highlight ((,class (:inherit 
modus-theme-intense-magenta))))
    ;;;; diff-mode
-   `(diff-added ((,class (:foreground ,green))))
-   `(diff-changed ((,class (:foreground ,yellow))))
+   `(diff-added ((,class (:inherit modus-theme-diff-focus-added))))
+   `(diff-changed ((,class (:inherit modus-theme-diff-focus-changed))))
    `(diff-context ((,class (:foreground ,fg-alt))))
    `(diff-file-header ((,class (:foreground ,blue :weight bold))))
    `(diff-function ((,class (:foreground ,fg-special-cold))))
    `(diff-header ((,class (:foreground ,blue-nuanced))))
-   `(diff-hunk-header ((,class (:inherit modus-theme-special-warm :weight 
bold))))
+   `(diff-hunk-header ((,class (:inherit modus-theme-subtle-cyan :weight 
bold))))
    `(diff-index ((,class (:foreground ,blue-alt :weight bold))))
    `(diff-indicator-added ((,class (:inherit diff-added))))
    `(diff-indicator-changed ((,class (:inherit diff-changed))))
    `(diff-indicator-removed ((,class (:inherit diff-removed))))
    `(diff-nonexistent ((,class (:inherit modus-theme-intense-neutral :weight 
bold))))
-   `(diff-refine-added ((,class (:inherit modus-theme-refine-green))))
-   `(diff-refine-changed ((,class (:inherit modus-theme-refine-yellow))))
-   `(diff-refine-removed ((,class (:inherit modus-theme-refine-red))))
-   `(diff-removed ((,class (:foreground ,red))))
+   `(diff-refine-added ((,class (:inherit modus-theme-diff-refine-added))))
+   `(diff-refine-changed ((,class (:inherit modus-theme-diff-refine-changed))))
+   `(diff-refine-removed ((,class (:inherit modus-theme-diff-refine-removed))))
+   `(diff-removed ((,class (:inherit modus-theme-diff-focus-removed))))
    ;;;; dim-autoload
    `(dim-autoload-cookie-line ((,class (:foreground ,fg-alt :slant 
,modus-theme-slant))))
    ;;;; dired
@@ -1569,25 +1597,23 @@ between foreground and background is >= 7:1)."
    `(magit-branch-upstream ((,class (:slant italic))))
    `(magit-cherry-equivalent ((,class (:background ,bg-main :foreground 
,magenta-intense))))
    `(magit-cherry-unmatched ((,class (:background ,bg-main :foreground 
,cyan-intense))))
-   `(magit-diff-added ((,class (:foreground ,green))))
-   `(magit-diff-added-highlight ((,class (:foreground ,green))))
-   `(magit-diff-base ((,class (:foreground ,yellow))))
-   `(magit-diff-base-highlight ((,class (:foreground ,yellow))))
-   `(magit-diff-changed ((,class (:weight bold))))
-   `(magit-diff-changed-highlight ((,class (:weight bold))))
+   `(magit-diff-added ((,class (:inherit modus-theme-diff-added))))
+   `(magit-diff-added-highlight ((,class (:inherit 
modus-theme-diff-focus-added))))
+   `(magit-diff-base ((,class (:inherit modus-theme-diff-changed))))
+   `(magit-diff-base-highlight ((,class (:inherit 
modus-theme-diff-focus-changed))))
    `(magit-diff-context ((,class (:foreground ,fg-alt))))
-   `(magit-diff-context-highlight ((,class (:foreground ,fg-alt))))
-   `(magit-diff-file-heading ((,class (:background ,bg-main :foreground 
,fg-special-cold :weight bold))))
+   `(magit-diff-context-highlight ((,class (:background ,bg-alt :foreground 
,fg-alt))))
+   `(magit-diff-file-heading ((,class (:foreground ,fg-special-cold :weight 
bold))))
    `(magit-diff-file-heading-highlight ((,class (:inherit 
modus-theme-special-cold :weight bold))))
    `(magit-diff-file-heading-selection ((,class (:background ,bg-alt 
:foreground ,cyan))))
-   `(magit-diff-hunk-heading ((,class (:foreground ,fg-special-warm :weight 
bold))))
-   `(magit-diff-hunk-heading-highlight ((,class (:inherit 
modus-theme-special-warm :weight bold :extend nil))))
-   `(magit-diff-hunk-heading-selection ((,class (:inherit 
magit-diff-file-heading-selection))))
-   `(magit-diff-hunk-region ((,class (:background ,bg-region :foreground 
,fg-main))))
+   `(magit-diff-hunk-heading ((,class (:inherit modus-theme-intense-neutral 
:weight bold))))
+   `(magit-diff-hunk-heading-highlight ((,class (:inherit 
modus-theme-subtle-blue :weight bold))))
+   `(magit-diff-hunk-heading-selection ((,class (:inherit 
modus-theme-refine-cyan))))
+   `(magit-diff-hunk-region ((,class (:weight bold))))
    `(magit-diff-lines-boundary ((,class (:background ,fg-main))))
    `(magit-diff-lines-heading ((,class (:inherit modus-theme-refine-magenta))))
-   `(magit-diff-removed ((,class (:foreground ,red))))
-   `(magit-diff-removed-highlight ((,class (:foreground ,red))))
+   `(magit-diff-removed ((,class (:inherit modus-theme-diff-removed))))
+   `(magit-diff-removed-highlight ((,class (:inherit 
modus-theme-diff-focus-removed))))
    `(magit-diffstat-added ((,class (:foreground ,green))))
    `(magit-diffstat-removed ((,class (:foreground ,red))))
    `(magit-dimmed ((,class (:foreground ,fg-alt))))