[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

@@ -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': [

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");

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));
+    }
+  }
+}

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);
 }