feat: add support for svg icons

ck.sh

@@ -59,7 +59,7 @@ case "$COMMAND" in
 				cd ckeditor-dev
 
 				# Convert svg icons to png
-				node ../support/svgToPng.js skins/moono-lexicon/icons/icons.json skins/moono-lexicon/icons
+				node ../support/iconsClassesGenerator.js skins/moono-lexicon/icons/icons.json skins/moono-lexicon/icons.css
 
 				if [ -n "$DEBUG" ]; then
 					dev/builder/build.sh --build-config ../../../support/build-config.js \

skins/moono-lexicon/editor.css

@@ -46,6 +46,9 @@ other files.
 /* Styles for notifications. */
 @import url('notification.css');
 
+/* Icons */
+@import url('icons.css');
+
 /* Important!
    To avoid showing the editor UI while its styles are still not available, the
    editor creates it with visibility:hidden. Here, we restore the UI visibility. */

skins/moono-lexicon/icons.css

@@ -0,0 +1,4 @@
+.cke_hidpi .cke_button_icon {
+	background-size: 16px !important;
+	background-position: center !important;
+}

skins/moono-lexicon/icons/icons.json

@@ -4,36 +4,59 @@
         "align-image-center": "align-image-center",
         "align-image-left": "align-image-left",
         "align-image-right": "align-image-right",
-        "anchor": "flag-full",
+        "anchor": {
+            "ltr": "flag-full"
+        },
         "blockquote": "quote-right",
         "bold": "bold",
-        "bulletedlist": "list-ul",
+        "bulletedlist": {
+            "ltr": "list-ul"
+        },
         "copy": "paste",
         "cut": "cut",
-        "find": "search",
+        "find": {
+            "ltr": "search",
+            "rtl": "search"
+        },
         "hidden": "hidden",
         "horizontalrule": "separator",
         "image": "picture",
-        "indent": "indent-more",
+        "indent": {
+            "ltr": "indent-more",
+            "rtl": "indent-less"
+        },
         "italic": "italic",
         "justifyblock": "align-justify",
         "justifycenter": "align-center",
         "justifyleft": "align-left",
         "justifyright": "align-right",
         "link": "link",
         "maximize": "full-size",
-        "numberedlist": "list-ol",
-        "outdent": "indent-less",
-        "redo": "redo",
+        "numberedlist": {
+            "ltr": "list-ol"
+        },
+        "outdent": {
+            "ltr": "indent-less",
+            "rtr": "indent-more"
+        },
+        "redo": {
+            "ltr": "redo",
+            "rtl": "undo"
+        },
         "removeformat": "remove-style",
         "replace": "change-list",
-        "source": "code",
+        "source": {
+            "ltr":"code"
+        },
         "strike": "strikethrough",
         "subscript": "subscript",
         "superscript": "superscript",
         "table": "table2",
         "underline": "underline",
-        "undo": "undo",
+        "undo": {
+            "ltr": "undo",
+            "rtl": "redo"
+        },
         "unlink": "chain-broken"
     }
 }

skins/moono-lexicon/toolbar.css

@@ -149,11 +149,6 @@ a.cke_button_disabled:hover {
 	cursor: default;
 }
 
-a.cke_button_disabled:focus {
-	border: 1px #bcbcbc solid;
-	padding: 3px 5px;
-}
-
 .cke_hc a.cke_button_disabled:hover,
 .cke_hc a.cke_button_disabled:focus,
 .cke_hc a.cke_button_disabled:active {
@@ -178,9 +173,8 @@ a.cke_button_disabled:focus {
 /* This class is applied to the button when the feature associated with the
    button cannot be used (grayed-out), i.e. paste button remains disabled when
    there is nothing in the clipboard to be pasted. */
-a.cke_button_disabled .cke_button_icon,
 a.cke_button_disabled .cke_button_arrow {
-	opacity: 0.3;
+	border-top: 3px solid #a7a9bc;
 }
 
 .cke_hc a.cke_button_disabled {
@@ -270,6 +264,8 @@ a.cke_button_disabled .cke_button_arrow {
 /* Button inner elements. */
 /* The icon which is a visual representation of the button. */
 .cke_button_icon {
+	background-size: 16px !important;
+	background-position: center !important;
 	cursor: inherit;
 	background-repeat: no-repeat;
 	width: 16px;