From fc651bd799925d32caed1e11802e93f0cc0ae55b Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@odoo.com>
Date: Wed, 5 Mar 2025 14:24:07 +0100
Subject: [PATCH] [ADD] runbot_merge: dark theme v0

Express (re-express) a bunch of SCSS rules in terms of CSS variables,
and create a darkified version.

Based entirely on prefers-color-scheme, as apparently there's no
native in-document way to force that out and I can't be arsed to add
an entire override on a stick. If you want to toggle the page, use
toggley.

Not claiming the scheme looks any good tho, it's very dark indeed. But
it should limit the levels of flashbanging... until you open the
backend and die anyway.

Fix #1021
---
 runbot_merge/__manifest__.py                  |  1 +
 .../static/scss/primary_variables.scss        | 28 ++++++
 runbot_merge/static/scss/revariable.scss      | 93 +++++++++++++++++++
 runbot_merge/static/scss/runbot_merge.scss    | 47 +---------
 4 files changed, 123 insertions(+), 46 deletions(-)
 create mode 100644 runbot_merge/static/scss/revariable.scss

diff --git a/runbot_merge/__manifest__.py b/runbot_merge/__manifest__.py
index 88f8a1e0..4cc0802c 100644
--- a/runbot_merge/__manifest__.py
+++ b/runbot_merge/__manifest__.py
@@ -28,6 +28,7 @@
           ('prepend', 'runbot_merge/static/scss/primary_variables.scss'),
        ],
         'web.assets_frontend': [
+            'runbot_merge/static/scss/revariable.scss',
             'runbot_merge/static/scss/runbot_merge.scss',
         ],
         'web.assets_backend': [
diff --git a/runbot_merge/static/scss/primary_variables.scss b/runbot_merge/static/scss/primary_variables.scss
index bb953494..8b1c999e 100644
--- a/runbot_merge/static/scss/primary_variables.scss
+++ b/runbot_merge/static/scss/primary_variables.scss
@@ -1,3 +1,4 @@
+$variable-prefix: '';
 // colors from the original mergebot
 $primary: #276e72;
 $secondary: #685563;
@@ -5,6 +6,8 @@ $success: #28a745;
 $info: #17a2b8;
 $warning: #ffc107;
 $danger: #dc3545;
+$light: #f8f9fa;
+$dark: #212529;
 $theme-colors: (
   "primary":    $primary,
   "secondary":  $secondary,
@@ -12,7 +15,15 @@ $theme-colors: (
   "info":       $info,
   "warning":    $warning,
   "danger":     $danger,
+  // gray-100
+  "light":      $light,
+  // gray-900
+  "dark":       $dark,
 );
+// gray-600
+$body-color: #6c757d;
+// same as table-bg and alert-bg
+$bg-scale: -80%;
 
 $o-system-fonts: sans-serif;
 
@@ -46,3 +57,20 @@ $h5-font-size:                $font-size-base;
 $h6-font-size:                $font-size-base;
 
 $border-radius: 0.25rem;
+
+// The builtins utilities-bg system is completely stupid because we do a bunch
+// of transformations on the theme-color, then we ignore them all because we
+// just reference the `--#{$category}-rgb` css variables.
+//
+// Update rgba-css-var to reference target-suffixed vars (e.g. -bg, -text) but
+// fallback to the un-suffixed vars if necessary.
+@function rgba-css-var($identifier, $target) {
+  @return rgba(
+    var(
+      --#{$variable-prefix}#{$identifier}-#{$target}-rgb,
+      var(--#{$variable-prefix}#{$identifier}-rgb)
+    ),
+    var(--#{$variable-prefix}#{$target}-opacity)
+  );
+}
+$utilities-bg-colors: map-loop($theme-colors, rgba-css-var, "$key", "bg");
diff --git a/runbot_merge/static/scss/revariable.scss b/runbot_merge/static/scss/revariable.scss
new file mode 100644
index 00000000..e813ed71
--- /dev/null
+++ b/runbot_merge/static/scss/revariable.scss
@@ -0,0 +1,93 @@
+// resets a bunch of CSS rules to either `inherit` color or use CSS variables,
+// such that they properly follow CSS variables
+:root {
+  color-scheme: light dark;
+
+  // dunno why it's not global
+  --bg-opacity: 1;
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}-bg-rgb: #{to-rgb(hsl(
+      hue($value),
+      max(saturation($value) - 16%, 0%),
+      90%,
+    ))};
+  }
+  // the adjusted danger is too saturated and a bit odd, rather than bother with
+  // adjusting the conversion just set the value we want
+  --danger-bg-rgb: 242, 222, 222;
+}
+@function invlight($value) {
+  @return hsl(hue($value), saturation($value), 100% - lightness($value));
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    $ibc: invlight($body-color);
+    --body-color: #{$ibc};
+    --body-color-rgb: #{to-rgb($ibc)};
+    $ibg: invlight($body-bg);
+    --body-bg: #{$ibg};
+    --body-bg-rgb: #{to-rgb($ibg)};
+
+    @each $color, $value in $theme-colors {
+      $value: invlight($value);
+
+      --#{$color}: #{$value};
+      --#{$color}-rgb: #{to_rgb($value)};
+      --#{$color}-bg-rgb: #{to-rgb(hsl(
+        hue($value),
+        min(saturation($value) + 16%, 100%),
+        10%,
+      ))};
+    }
+    --danger-bg-rgb: 41, 10, 10;
+  }
+}
+body {
+  font-family: inherit;
+}
+h1, h2, h3, h4, h5, h6{
+  color: inherit;
+  margin-top: 0.66em !important;
+  margin-bottom: 0.33em !important;
+}
+
+.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-gray-lighter,
+.table-success, .table-info, .table-warning, .table-danger {
+  color: inherit;
+}
+
+.dropdown-item, .dropdown-menu, .dropdown-menu a {
+  color: inherit;
+}
+
+.navbar-light {
+  background-color: var(--body-bg);
+  color: inherit;
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: inherit;
+}
+
+// reset the table and alert bg rules so they use the generic (rg)bg variables
+@each $category, $_ in $theme-colors {
+  .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));
+    }
+  }
+  .table-#{$category} {
+    $c: rgba(var(--#{$category}-bg-rgb), var(--bg-opacity));
+    --table-bg: #{$c};
+    --table-accent-bg: transparent;
+    &.table-active {
+      --table-bg: hsl(from #{$c} h s calc(l - 5));
+    }
+  }
+}
diff --git a/runbot_merge/static/scss/runbot_merge.scss b/runbot_merge/static/scss/runbot_merge.scss
index 0cd5dd53..b5d73e0b 100644
--- a/runbot_merge/static/scss/runbot_merge.scss
+++ b/runbot_merge/static/scss/runbot_merge.scss
@@ -1,30 +1,3 @@
-:root {
-  // dunno why it's not global
-  --bg-opacity: 1;
-
-  --success-rgb: 223, 240, 216;
-  --danger-rgb: 242, 222, 222;
-  --warning-rgb: 252, 248, 227;
-  --info-rgb: 217, 237, 247;
-}
-// reset the table bg rules so they use the generic (rg)bg variables
-@each $category, $whatever in $table-variants {
-  .table-#{$category} {
-    $c: rgba(var(--#{$category}-rgb), var(--bg-opacity));
-    --table-bg: #{$c};
-    --table-accent-bg: transparent;
-    &.table-active {
-      --table-bg: hsl(from #{$c} h s calc(l - 5));
-    }
-  }
-}
-
-// adjust because shift-color($primary, $alert-color-scale) is fucking awful
-.alert-primary {
-  // use string interpolation otherwise sass blows up because it tries to apply
-  // its own hsl function, and that does not support relative colors
-  background-color: #{'hsl(from var(--primary) h calc(s - 16) calc(l + 60))'};
-}
 .bg-unmerged {
   background-color: color-mix(
     in lab,
@@ -35,25 +8,7 @@
 
 html {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #666666;
 }
-body {
-  color: inherit;
-  font-family: inherit;
-}
-h1, h2, h3, h4, h5, h6{
-  color: inherit;
-  margin-top: 0.66em !important;
-  margin-bottom: 0.33em !important;
-}
-.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-gray-lighter,
-.table-success, .table-info, .table-warning, .table-danger {
-  color: inherit;
-}
-.dropdown-item, .dropdown-menu, .dropdown-menu a {
-  color: inherit;
-}
-
 
 .list-inline {
   margin-bottom: 10px;
@@ -157,5 +112,5 @@ tr.inactive {
   opacity: 0.5;
 }
 td.detached {
-  border-top: 2px solid map-get($theme-colors, "danger");
+  border-top: 2px solid var(--danger);
 }