style(web/tvl/logo): Add dark & light versions, dim background r/2917

Currently the pitch black colour of the logo outline looks a bit
strange on the homepage, dimming this to the same colour as the text
is nicer.

While poking around in that colouring segment I also made a way to
spit out light logos instead (to use on dark backgrounds).

Note: The light colours are just picked from our web CSS, but they
don't actually look good yet - it also needs a different palette. For
now nothing uses the light version.

Change-Id: Ibfe7fa252cd40b803ac96047d0627dad0d6d9ac2
Reviewed-on: https://cl.tvl.fyi/c/depot/+/3633
Tested-by: BuildkiteCI
Reviewed-by: tazjin <mail@tazj.in>

1 files changed, 43 insertions, 21 deletions

diff --git a/web/tvl/logo/default.nix b/web/tvl/logo/default.nix
index 945bf1da73b2..9b7d5b9a0a27 100644
--- a/web/tvl/logo/default.nix
+++ b/web/tvl/logo/default.nix
@@ -13,14 +13,6 @@ let
     red = "#FF6663";
   };
 
-  logoShapes = builtins.readFile ./logo-shapes.svg;
-  logoSvg = style: ''
-    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="420 860 1640 1500">
-      <style>${style}</style>
-      ${logoShapes}
-    </svg>
-  '';
-
   staticCss = colour: ''
     #armchair-background {
       fill: ${colour};
@@ -44,27 +36,57 @@ let
     }
   '';
 
-in depot.nix.utils.drvTargets(lib.fix (self: {
-  inherit palette;
+  # Dark version of the logo, suitable for light backgrounds.
+  darkCss = armchairCss: ''
+    .structure {
+      fill: #383838;
+    }
+    #letters {
+      fill: #fefefe;
+    }
+    ${armchairCss}
+  '';
 
-  # Create a TVL logo SVG with the specified static armchair colour.
-  staticLogoSvg = colour: pkgs.writeText "logo.svg" (logoSvg (staticCss colour));
+  # Light version, suitable for dark backgrounds.
+  lightCss = armchairCss: ''
+    .structure {
+      fill: #e4e4ef;
+    }
+    #letters {
+      fill: #181818;
+    }
+    ${armchairCss}
+  '';
+
+  logoShapes = builtins.readFile ./logo-shapes.svg;
+  logoSvg = style: ''
+    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="420 860 1640 1500">
+      <style>${style}</style>
+      ${logoShapes}
+    </svg>
+  '';
+
+in depot.nix.utils.drvTargets(lib.fix (self: {
+  # Expose the logo construction functions.
+  inherit palette darkCss lightCss animatedCss staticCss;
 
-  # Create a TVL logo SVG with the specified animated armchair colour set.
-  animatedLogoSvg = colours: pkgs.writeText "logo.svg" (logoSvg (animatedCss colours));
+  # Create a TVL logo SVG with the specified style.
+  logoSvg = style: pkgs.writeText "logo.svg" (logoSvg style);
 
-  # Create a PNG of the TVL logo with the specified static armchair colour and DPI.
-  logoPng = colour: dpi: pkgs.runCommandNoCC "logo.png" {} ''
+  # Create a PNG of the TVL logo with the specified style and DPI.
+  logoPng = style: dpi: pkgs.runCommandNoCC "logo.png" {} ''
     ${pkgs.inkscape}/bin/inkscape \
       --export-area-drawing \
       --export-background-opacity 0 \
       --export-dpi ${toString dpi} \
-      ${self.staticLogoSvg colour} -o $out
+      ${self.logoSvg style} -o $out
   '';
 
-  # Animated SVG logo with all colours.
-  pastelRainbow = self.animatedLogoSvg (lib.attrValues palette);
+  # Animated dark SVG logo with all colours.
+  pastelRainbow = self.logoSvg (darkCss (animatedCss (lib.attrValues palette)));
 }
 
-# Add individual outputs for static logos of each colour.
-// (lib.mapAttrs' (k: v: lib.nameValuePair "${k}Png" (self.logoPng v 96)) palette)))
+# Add individual outputs for static dark logos of each colour.
+// (lib.mapAttrs'
+    (k: v: lib.nameValuePair "${k}Png"
+     (self.logoPng (darkCss (staticCss v)) 96)) palette)))