Feature - Improve Structure Color Contrast (#2454)

If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves #2447

## Description:

This PR updates the logic used to generate structure fill and border
colors. Currently, (v0.26.16 and earlier), some light territory colors
have structures that are difficult to see and identify. This PR ensures
that all territory colors have structures that are easily visible.

Instead of using `Colord.lighten()` and `Colord.darken()` to generate
structure colors, the logic now:
- queries the territory color and border color of the structure owner
- Converts these colors to the [LAB color
space](https://en.wikipedia.org/wiki/CIELAB_color_space) (which is a
human-perception-uniform color space).
- Darkens the border color (by decreasing LAB luminance) and sometimes
lightens the territory color (by increasing LAB luminance) until a
specific `Color Delta` is achieved (currently `delta > 0.5`)
- This ensures contrast between the structure and the territory
background.

Additionally, this PR re-organizes colors in the `Colors.ts` file for
better visibility and removes redundant colors from the `nationColors`
list.

This PR is an implementation of the proposed mock-up posted on imgur in
issue #2447. Screenshots of the original, final, and side-by-side
comparison of structure colors (for all available player colors) are in
the [imgur
album](https://imgur.com/a/openfront-color-playground-4cxSbbj).

I'd recommend inclusion as a feature/fix for v27.

## 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:

GlacialDrift

src/client/graphics/layers/StructureDrawingUtils.ts

@@ -253,26 +253,13 @@ export class SpriteFactory {
     structureCanvas.height = Math.ceil(iconSize);
     const context = structureCanvas.getContext("2d")!;
 
-    const tc = owner.territoryColor();
-    const bc = owner.borderColor();
-
-    // Potentially change logic here. Some TC/BC combinations do not provide good color contrast.
-    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 = lighter
-        .lighten(0.13)
-        .alpha(renderIcon ? 0.65 : 1)
-        .toRgbString();
-      const darken = darker.isLight() ? 0.17 : 0.15;
-      borderColor = darker.darken(darken).toRgbString();
-    }
-    context.strokeStyle = borderColor;
+    // Use structureColors defined from the PlayerView.
+    context.fillStyle = isConstruction
+      ? "rgb(198,198,198)"
+      : owner.structureColors().light.toRgbString();
+    context.strokeStyle = isConstruction
+      ? "rgb(127,127, 127)"
+      : owner.structureColors().dark.toRgbString();
     context.lineWidth = 1;
     const halfIconSize = iconSize / 2;
 
@@ -400,7 +387,10 @@ export class SpriteFactory {
       };
       const [offsetX, offsetY] = SHAPE_OFFSETS[shape] || [0, 0];
       context.drawImage(
-        this.getImageColored(structureInfo.image, borderColor),
+        this.getImageColored(
+          structureInfo.image,
+          owner.structureColors().dark.toRgbString(),
+        ),
         offsetX,
         offsetY,
       );