feat(skinStyles): add Math skinStyles (#502)

* Create Extension:Math styles

* Added ext.math.styles

* Added Extension:Math as Grade E

I'm not sure how to accomplish this without using LESS variables.  CSS variables don't seem to work with the `.recolor()` mixin.

* Added Stack Overflow link

README.md

@@ -48,6 +48,7 @@ Name | Grade | Version | Last updated
 [Graph](https://www.mediawiki.org/wiki/Extension:Graph) | B | N/A | N/A
 [Interwiki](https://www.mediawiki.org/wiki/Extension:Interwiki) | B | REL1_35 `a65a18e` | 2022-05-15
 [Lingo](https://www.mediawiki.org/wiki/Extension:Lingo) | B | REL1_35 `e948775` | 2022-04-29
+[Math](https://www.mediawiki.org/wiki/Extension:Math) | E | REL1_35 `b7a7939` | 2022-08-16
 [ManageWiki](https://www.mediawiki.org/wiki/Extension:ManageWiki) | B | master `60a2f51` | 2022-06-16
 [MsUpload](https://www.mediawiki.org/wiki/Extension:MsUpload) | A | REL1_35 `32eb420` | 2021-08-25
 [MultimediaViewer](https://www.mediawiki.org/wiki/Extension:MultimediaViewer) | A | N/A | N/A

skin.json

@@ -526,6 +526,7 @@
 			"+ext.Lingo": "skinStyles/extensions/Lingo/ext.Lingo.less",
 			"+ext.managewiki.oouiform.styles": "skinStyles/extensions/ManageWiki/ext.managewiki.oouiform.styles.less",
 			"+ext.pygments": "skinStyles/extensions/SyntaxHighlight_GeSHi/ext.pygments.less",
+			"+ext.math.styles": "skinStyles/extensions/Math/ext.math.styles.less",
 			"+ext.MsUpload": "skinStyles/extensions/MsUpload/ext.MsUpload.less",
 			"+ext.relatedArticles.cards": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less",
 			"+ext.relatedArticles.readMore": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less",

skinStyles/extensions/Math/ext.math.styles.less

@@ -0,0 +1,41 @@
+/*
+ * Citizen
+ *
+ * SkinStyles for Extension:Math
+ * Module: ext.math.styles
+ * Version: REL1_35 b7a7939
+ *
+ * Date: 2022-08-16
+*/
+
+@import '../../../resources/variables.less';
+
+// From https://stackoverflow.com/a/73390109/10624167
+.recolor(@color: #333) {
+    @r: red(@color) / 255;
+    @g: green(@color) / 255;
+    @b: blue(@color) / 255;
+    @a: alpha(@color);
+
+    // grayscale fallback if SVG from data url is not supported
+    @lightness: lightness(@color);
+    filter: saturate(0%) brightness(0%) invert(@lightness) opacity(@a);
+
+    // color filter
+    @svg-filter-id: "recolor";
+    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="@{svg-filter-id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 @{r} 0 0 0 0 @{g} 0 0 0 0 @{b} 0 0 0 @{a} 0"/></filter></svg> #@{svg-filter-id}');
+  }
+
+.skin-citizen-light {
+    .mwe-math-fallback-image-display,
+    .mwe-math-fallback-image-inline {
+        .recolor(@color-base);
+    }
+}
+
+.skin-citizen-dark {
+    .mwe-math-fallback-image-display,
+    .mwe-math-fallback-image-inline {
+        .recolor(@dark-color-base);
+    }
+}