Move icons to RL and generate inverted variants

Also remove unused parameter icon.

Change-Id: I0ce10a50a0738ba111cfd63bc9cc5de03fae8c8d

extension.json

@@ -50,7 +50,10 @@
 	"ResourceModules": {
 		"ext.templateData": {
 			"styles": "resources/ext.templateData.css",
-			"position": "top"
+			"position": "top",
+			"dependencies": [
+				"ext.templateData.images"
+			]
 		},
 		"ext.templateDataGenerator.editPage": {
 			"scripts": [
@@ -87,7 +90,8 @@
 				"oojs-ui-windows",
 				"ext.templateData",
 				"ext.templateDataGenerator.data",
-				"jquery.uls.data"
+				"jquery.uls.data",
+				"ext.templateDataGenerator.ui.images"
 			],
 			"messages": [
 				"comma-separator",
@@ -159,6 +163,47 @@
 				"templatedata-helplink",
 				"templatedata-helplink-target"
 			]
+		},
+		"ext.templateData.images": {
+			"class": "ResourceLoaderImageModule",
+			"selectorWithVariant": ".oo-ui-icon-{name}.oo-ui-image-invert",
+			"selectorWithoutVariant": ".oo-ui-icon-{name}",
+			"variants": {
+				"invert": {
+					"color": "#FFFFFF",
+					"global": true
+				}
+			},
+			"images": {
+				"template-format-block": {
+					"file": {
+						"ltr": "modules/images/block-rtl.svg",
+						"rtl": "modules/images/block-ltr.svg"
+					}
+				},
+				"template-format-inline": {
+					"file": "modules/images/inline.svg"
+				}
+			}
+		},
+		"ext.templateDataGenerator.ui.images": {
+			"class": "ResourceLoaderImageModule",
+			"selectorWithVariant": ".oo-ui-icon-{name}.oo-ui-image-invert",
+			"selectorWithoutVariant": ".oo-ui-icon-{name}",
+			"variants": {
+				"invert": {
+					"color": "#FFFFFF",
+					"global": true
+				}
+			},
+			"images": {
+				"parameter-set": {
+					"file": {
+						"ltr": "modules/images/parameter-set-ltr.svg",
+						"rtl": "modules/images/parameter-set-rtl.svg"
+					}
+				}
+			}
 		}
 	},
 	"ResourceFileModulePaths": {

modules/ext.templateDataGenerator.ui.css

@@ -96,15 +96,3 @@
 .tdg-languageResultWidget-highlight {
 	font-weight: bold;
 }
-
-/* Icons */
-
-.oo-ui-icon-parameter {
-	/* @embed */
-	background-image: url( images/parameter-ltr.svg );
-}
-
-.oo-ui-icon-parameter-set {
-	/* @embed */
-	background-image: url( images/parameter-set-ltr.svg );
-}

modules/images/parameter-ltr.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g id="parameter">
-        <path id="offset-box" d="M16 6h-8c-2 0-3 1-3 3v6c0 2 1 3 3 3h8c2 0 3-1 3-3v-6c0-2-1-3-3-3zm1 9c0 .469-.521 1-1 1h-6v-8h6c.479 0 1 .531 1 1v6z"/>
-    </g>
-</svg>

modules/images/parameter-rtl.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g id="parameter">
-        <path id="offset-box" d="M8 6h8c2 0 3 1 3 3v6c0 2-1 3-3 3h-8c-2 0-3-1-3-3v-6c0-2 1-3 3-3zm-1 9c0 .469.521 1 1 1h6v-8h-6c-.479 0-1 .531-1 1v6z"/>
-    </g>
-</svg>

resources/ext.templateData.css

@@ -31,13 +31,3 @@
 .mw-templateData-doc-param-type {
 	white-space: nowrap;
 }
-
-.oo-ui-icon-template-format-block {
-	/* @embed */
-	background-image: url( ../modules/images/block-ltr.svg );
-}
-
-.oo-ui-icon-template-format-inline {
-	/* @embed */
-	background-image: url( ../modules/images/inline.svg );
-}