maurice/snix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
Vincent Ambo 2021-09-25 15:51:19 +03:00 • committed by tazjin
parent c874e20630
commit ddb21647e4
2 changed files with 46 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

64
web/tvl/logo/default.nix
View file

@ -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
}
'';
# Dark version of the logo, suitable for light backgrounds.
darkCss = armchairCss: ''
.structure {
fill: #383838;
}
#letters {
fill: #fefefe;
}
${armchairCss}
'';
# 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: {
inherit palette;
# Expose the logo construction functions.
inherit palette darkCss lightCss animatedCss staticCss;
# Create a TVL logo SVG with the specified static armchair colour.
staticLogoSvg = colour: pkgs.writeText "logo.svg" (logoSvg (staticCss colour));
# Create a TVL logo SVG with the specified style.
logoSvg = style: pkgs.writeText "logo.svg" (logoSvg style);
# Create a TVL logo SVG with the specified animated armchair colour set.
animatedLogoSvg = colours: pkgs.writeText "logo.svg" (logoSvg (animatedCss colours));
# 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)))