From 115a790f1987d915684c310cf4061e9d352c8f1e Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@odoo.com>
Date: Thu, 13 Mar 2025 10:45:18 +0100
Subject: [PATCH] [IMP] runbot_merge: tune dark mode colors

- Make the body color slightly darker for better contrast (makes it
  lighter when inverted).
- Make backgrounds lighter in dark mode.
- Hard-code success as well as danger and update the latter to make it
  lighter.

  Ideally this should be computed in oklch but sadly libsass doesn't
  support oklch computations, and there is no way to extract
  individual channels in CSS so there's no way to generate the `-rgb`
  variables.
- Hard-code the dark mode background to a dark gray instead of a black
  (using light-gray in light mode looks weird so keep white).
- Fix text and link color in alerts, I clearly still don't understand
  how CSS variables work and I don't care anymore, fuck'em.

Part of #1088
---
 .../static/scss/primary_variables.scss        |  6 ++---
 runbot_merge/static/scss/revariable.scss      | 24 ++++++++++++-------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/runbot_merge/static/scss/primary_variables.scss b/runbot_merge/static/scss/primary_variables.scss
index 1b41bd7d..18c021da 100644
--- a/runbot_merge/static/scss/primary_variables.scss
+++ b/runbot_merge/static/scss/primary_variables.scss
@@ -15,13 +15,11 @@ $theme-colors: (
   "info":       $info,
   "warning":    $warning,
   "danger":     $danger,
-  // gray-100
   "light":      $light,
-  // gray-900
   "dark":       $dark,
 );
-// gray-600
-$body-color: #6c757d;
+// gray-700
+$body-color: #495057;
 // same as table-bg and alert-bg
 $bg-scale: -80%;
 
diff --git a/runbot_merge/static/scss/revariable.scss b/runbot_merge/static/scss/revariable.scss
index 4f4fa044..fb54a171 100644
--- a/runbot_merge/static/scss/revariable.scss
+++ b/runbot_merge/static/scss/revariable.scss
@@ -27,7 +27,7 @@
     $ibc: invlight($body-color);
     --body-color: #{$ibc};
     --body-color-rgb: #{to-rgb($ibc)};
-    $ibg: invlight($body-bg);
+    $ibg: $gray-900;
     --body-bg: #{$ibg};
     --body-bg-rgb: #{to-rgb($ibg)};
 
@@ -39,10 +39,11 @@
       --#{$color}-bg-rgb: #{to-rgb(hsl(
         hue($value),
         min(saturation($value) + 16%, 100%),
-        10%,
+        15%,
       ))};
     }
-    --danger-bg-rgb: 41, 10, 10;
+    --success-bg-rgb: 17, 68, 28;
+    --danger-bg-rgb: 96, 32, 32;
 }
 
 :root.dark {
@@ -85,11 +86,18 @@ h1, h2, h3, h4, h5, h6{
   .alert-#{$category} {
     // inline alert-variant as it can't handle ~~the truth~~ CSS variables
     background-color: rgba(var(--#{$category}-bg-rgb), var(--bg-opacity));
-    border-color: color-mix(in rgb, var(--#{$category}-rgb) #{$alert-border-scale}, var(--light));
-    --alert-text: color-mix(in rgb, var(--#{$category}-rgb) #{$alert-color-scale}, var(--dark));
-    color: var(--alert-text);
-    .alert-link {
-      color: color-mix(in rgb, var(--alert-text) 20%, var(--dark));
+    border-color: color-mix(in srgb, var(--#{$category}) #{-$alert-border-scale}, var(--light));
+    color: color-mix(in srgb, var(--#{$category}) #{$alert-color-scale}, var(--dark));
+    a {
+      color: color-mix(
+        in srgb,
+        color-mix(
+          in srgb,
+          var(--#{$category}) #{$alert-color-scale},
+          var(--dark)
+        ) 80%,
+        var(--dark)
+      );
     }
   }
   .table-#{$category} {