branch: externals/modus-operandi-theme
commit e8efe8937583e7c0536b3d32fbf7fa1fba67b4a4
Author: Protesilaos Stavrou <[email protected]>
Commit: Protesilaos Stavrou <[email protected]>
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))))
