Merge branch 'main' into #512-unselect-multi-selection

package.json

@@ -78,5 +78,5 @@
             "last 1 safari version"
         ]
     },
-    "version": "3.3.29"
+    "version": "3.3.31"
 }

public/styles/fonts_mtr.css

@@ -2,10 +2,8 @@
 
 .rmp-name__mtr__zh {
     font-family: Vegur, Helvetica, 'GenYoMin TW', HiraMinProN-W6, serif;
-    fill: #001f50;
 }
 .rmp-name__mtr__en {
     font-family: Myriad Pro, Vegur, Helvetica, sans-serif;
-    fill: #001f50;
     font-weight: bold;
 }

src/components/svgs/stations/mtr.tsx

@@ -136,6 +136,7 @@ const MTRStation = (props: StationComponentProps) => {
                         lineHeight={10}
                         grow="up"
                         baseOffset={1}
+                        fill="#001f50"
                         className="rmp-name__mtr__zh"
                     />
                     <MultilineText
@@ -144,6 +145,7 @@ const MTRStation = (props: StationComponentProps) => {
                         lineHeight={7.5}
                         grow="down"
                         baseOffset={1}
+                        fill="#001f50"
                         className="rmp-name__mtr__en"
                     />
                 </g>

src/util/download.ts

@@ -57,15 +57,21 @@ export const makeImages = async (
     Object.entries({
         '.rmp-name__zh': ['font-family'],
         '.rmp-name__en': ['font-family'],
-        '.rmp-name__mtr__zh': ['font-family', 'fill'],
-        '.rmp-name__mtr__en': ['font-family', 'fill'],
+        '.rmp-name__mtr__zh': ['font-family'],
+        '.rmp-name__mtr__en': ['font-family', 'font-weight'],
         '.rmp-name__berlin': ['font-family'],
         '.rmp-name-outline': ['paint-order', 'stroke', 'stroke-width', 'stroke-linejoin'],
     }).forEach(([className, styleSet]) => {
         const e = document.querySelector(className);
         if (e === null) return; // no element in the canvas uses this class
         const style = window.getComputedStyle(e);
         elem.querySelectorAll(className).forEach(el => {
+            // Polyfill paint-order used in .rmp-name-outline for Adobe Illustrator.
+            // This is an SVG 2 specification and SVG 2 is not finalized or released yet.
+            // https://www.w3.org/TR/SVG2/painting.html#PaintOrder
+            if (className === '.rmp-name-outline')
+                el.insertAdjacentElement('afterend', el.cloneNode(true) as SVGElement);
+
             styleSet.forEach(styleName => {
                 el.setAttribute(styleName, style.getPropertyValue(styleName));
             });