fix(toolbar): make suggestion diffs theme-friendly (#9322)

* Make backgrounds of ins/del elements in flaws block theme-friendly * Re-add accidentally removed variables
mdn · Apr 4, 2024 · d47c135 · d47c135
1 parent 732b836
commit d47c135
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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};