From d47c1352e084ce2d6c0490fff573931bc3e69a29 Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Thu, 4 Apr 2024 05:11:32 -0700
Subject: [PATCH] fix(toolbar): make suggestion diffs theme-friendly (#9322)

* Make backgrounds of ins/del elements in flaws block theme-friendly

* Re-add accidentally removed variables
---
 client/src/document/toolbar/flaws.scss | 5 ++---
 client/src/ui/base/_themes.scss        | 4 ++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/document/toolbar/flaws.scss b/client/src/document/toolbar/flaws.scss
index 80a5441f68b6..fa152b57da3e 100644
--- a/client/src/document/toolbar/flaws.scss
+++ b/client/src/document/toolbar/flaws.scss
@@ -32,12 +32,11 @@
     }
 
     ins {
-      background-color: #d4fcbc;
+      background-color: var(--background-ins);
     }
 
     del {
-      background-color: #fbb;
-      text-decoration: none;
+      background-color: var(--background-del);
     }
 
     .explanation-notes li {
diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
index 478bc1f4ed47..6ea376b6bb18 100644
--- a/client/src/ui/base/_themes.scss
+++ b/client/src/ui/base/_themes.scss
@@ -40,6 +40,8 @@
       $mdn-theme-light-icon-success,
       $alpha: -0.9
     )};
+  --background-del: #{color.adjust($mdn-theme-light-icon-critical, $alpha: -0.5)};
+  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};
 
   --border-primary: #{$mdn-theme-light-border-primary};
   --border-secondary: #{$mdn-theme-light-border-secondary};
@@ -316,6 +318,8 @@
       $mdn-theme-light-icon-success,
       $alpha: -0.9
     )};
+  --background-del: #{color.adjust($mdn-theme-light-icon-critical, $alpha: -0.5)};
+  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};
 
   --border-primary: #{$mdn-theme-dark-border-primary};
   --border-secondary: #{$mdn-theme-dark-border-secondary};