Update building colors for colored skins (#2073)

## Description:

Skins with custom colors sometimes have lighter secondary color making
the structure icons hard to read. so instead we keep the lighter color
as structure background

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/graphics/layers/StructureIconsLayer.ts

@@ -1,3 +1,5 @@
+import { extend } from "colord";
+import a11yPlugin from "colord/plugins/a11y";
 import { OutlineFilter } from "pixi-filters";
 import * as PIXI from "pixi.js";
 import bitmapFont from "../../../../resources/fonts/round_6x6_modified.xml";
@@ -16,6 +18,8 @@ import { ToggleStructureEvent } from "../../InputHandler";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
+extend([a11yPlugin]);
+
 type ShapeType = "triangle" | "square" | "pentagon" | "octagon" | "circle";
 
 class StructureRenderInfo {
@@ -381,18 +385,23 @@ export class StructureIconsLayer implements Layer {
     structureCanvas.height = Math.ceil(iconSize);
     const context = structureCanvas.getContext("2d")!;
 
+    const tc = owner.territoryColor();
+    const bc = owner.borderColor();
+
+    const darker = bc.luminance() < tc.luminance() ? bc : tc;
+    const lighter = bc.luminance() < tc.luminance() ? tc : bc;
+
     let borderColor: string;
     if (isConstruction) {
       context.fillStyle = "rgb(198, 198, 198)";
       borderColor = "rgb(128, 127, 127)";
     } else {
-      context.fillStyle = owner
-        .territoryColor()
+      context.fillStyle = lighter
         .lighten(0.13)
         .alpha(renderIcon ? 0.65 : 1)
         .toRgbString();
-      const darken = owner.borderColor().isLight() ? 0.17 : 0.15;
-      borderColor = owner.borderColor().darken(darken).toRgbString();
+      const darken = darker.isLight() ? 0.17 : 0.15;
+      borderColor = darker.darken(darken).toRgbString();
     }
 
     context.strokeStyle = borderColor;