Use CSS color variables for map marker coloring

Author: opyh

src/components/Map/ColoredIconMarker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 
 type Props = {
   accessibilityGrade: string;
+  backgroundColor?: string;
   children?: React.ReactNode;
 };
 
 export default function ColoredIconMarker(
   props: React.SVGAttributes<SVGElement> & Props,
 ) {
-  const { accessibilityGrade, children } = props;
+  const { accessibilityGrade, children, backgroundColor } = props;
   return (
     <svg
       width="1em"
@@ -23,37 +24,39 @@ export default function ColoredIconMarker(
           cx={12.5}
           cy={12.5}
           r={10.5}
-          fill="#7EC512"
+          fill={backgroundColor}
           fillRule="nonzero"
           filter="url(#halo)"
         />
       )}
+
       {accessibilityGrade === "limited" && (
         <path
-          fill="#FC9B32"
+          fill={backgroundColor}
           d="M6.743 2.364h11.55l5.776 10.003-5.775 10.003H6.743L.967 12.367z"
           fillRule="evenodd"
           filter="url(#halo)"
         />
       )}
+
       {accessibilityGrade === "no" && (
         <path
           d="M22 22V3.072H3v19z"
-          fill="#F54B4B"
+          fill={backgroundColor}
           fillRule="nonzero"
           filter="url(#halo)"
         />
       )}
+
       {accessibilityGrade === "unknown" && (
         <path
-          strokeOpacity={0.25}
-          stroke="#000"
           d="M.707 12.5l11.794 11.793 11.798-11.79L12.5.707.707 12.5z"
-          fill="#efefef"
+          fill={backgroundColor}
           fillRule="evenodd"
           filter="url(#halo)"
         />
       )}
+
       <defs>
         <filter id="halo">
           <feDropShadow

src/components/Map/useMapIconLoader.tsx

@@ -36,20 +36,34 @@ function loadIcon(
   const wasInCache = !!dataUrl;
   if (!dataUrl) {
     const div = document.createElement("div");
+
     const root = createRoot(div);
-    flushSync(() => {
-      const [categoryIconName, accessibilityGrade] = finalIconName.split("-");
-      const IconComponent =
-        categoryIconName && accessibilityGrade
-          ? icons[categoryIconName]
-          : icons[iconName];
-      const element = accessibilityGrade ? (
-        <ColoredIconMarker accessibilityGrade={accessibilityGrade}>
-          <IconComponent />
-        </ColoredIconMarker>
-      ) : (
+    const [categoryIconName, accessibilityGrade] = finalIconName.split("-");
+    const IconComponent =
+      categoryIconName && accessibilityGrade
+        ? icons[categoryIconName]
+        : icons[iconName];
+
+    // Marker color originates from a CSS variable value like `var(--rating-yes)`
+    const style = getComputedStyle(document.documentElement);
+    const backgroundColor = style.getPropertyValue(
+      `--rating-${accessibilityGrade}`,
+    );
+    const foregroundColor = style.getPropertyValue(
+      `--rating-${accessibilityGrade}-contrast`,
+    );
+    const element = accessibilityGrade ? (
+      <ColoredIconMarker
+        accessibilityGrade={accessibilityGrade}
+        backgroundColor={backgroundColor}
+      >
         <IconComponent />
-      );
+      </ColoredIconMarker>
+    ) : (
+      <IconComponent />
+    );
+
+    flushSync(() => {
       root.render(element);
     });
     const svgElement = div.querySelector("svg");
@@ -76,13 +90,12 @@ function loadIcon(
         `scale(${options.iconSize}, ${options.iconSize})`,
       );
     }
-    if (options?.fill) {
-      const filledElements = iconElement.querySelectorAll(
+    const filledElements =
+      iconElement?.querySelectorAll(
         "path, rect, circle, ellipse, line, polyline, polygon",
-      );
-      for (const e of filledElements) {
-        e.setAttribute("fill", options.fill);
-      }
+      ) ?? [];
+    for (const e of filledElements) {
+      e.setAttribute("fill", options.fill ?? foregroundColor);
     }
 
     if (options.addShadow) {
@@ -147,13 +160,11 @@ export function loadIconsInMapInstance(mapInstance: MapBoxMap): void {
   for (const iconName of Object.keys(categoryIcons)) {
     for (const accessibilityGrade of ["yes", "no", "limited"]) {
       loadIcon(mapInstance, categoryIcons, iconName, {
-        fill: "white",
         addShadow: true,
         suffix: `-${accessibilityGrade}`,
       });
     }
     loadIcon(mapInstance, categoryIcons, iconName, {
-      fill: "#666",
       addShadow: true,
       suffix: "-unknown",
       iconSize: 0.8,