Merge pull request #2670 from AlchemyCMS/tinymce-5

Update Tinymce to v5
AlchemyCMS · Jan 2, 2024 · c59ab3d · c59ab3d
2 parents 8699664 + a32885b
commit c59ab3d
Show file tree

Hide file tree

Showing 54 changed files with 6,372 additions and 2,469 deletions.
diff --git a/app/assets/config/alchemy_manifest.js b/app/assets/config/alchemy_manifest.js
@@ -6,9 +6,8 @@
 //= link alchemy/welcome.css
 //= link tinymce/plugins/alchemy_link/plugin.min.js
 //= link tinymce/tinymce.min.js
-//= link_directory ../stylesheets/tinymce/skins/alchemy/ .css
-//= link_directory ../stylesheets/tinymce/skins/alchemy/img/
-//= link_directory ../stylesheets/tinymce/skins/alchemy/fonts/
+//= link_directory ../stylesheets/tinymce/skins/ui/alchemy/ .css
+//= link_directory ../stylesheets/tinymce/skins/content/alchemy/ .css
 //= link_tree ../images/alchemy/
 //= link_tree ../../../vendor/assets/fonts/
 //= link_tree ../../../vendor/assets/images/

diff --git a/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee b/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee
@@ -149,13 +149,13 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   # Selects the correct tab for link type and fills all fields.
   selectTab: ->
-    # Creating an temporary anchor node if we are linking an Picture Ingredient.
-    if (@link_object.getAttribute("is") == "alchemy-link-button")
-      @$link = $(@createTempLink())
     # Restoring the bookmarked selection inside the TinyMCE of an Richtext.
-    else if (@link_object.node.nodeName == 'A')
+    if @link_object.node?.nodeName == 'A'
       @$link = $(@link_object.node)
       @link_object.selection.moveToBookmark(@link_object.bookmark)
+    # Creating an temporary anchor node if we are linking an Picture Ingredient.
+    else if @link_object.getAttribute("is") == "alchemy-link-button"
+      @$link = $(@createTempLink())
     else
       return false
     # Populate title and target fields.

diff --git a/app/assets/javascripts/tinymce/icons/remixicons/icons.js b/app/assets/javascripts/tinymce/icons/remixicons/icons.js
@@ -0,0 +1,95 @@
+tinymce.IconManager.add("remixicons", {
+  icons: {
+    "action-next":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m12 13.2 5-5 1.4 1.4L12 16 5.6 9.6l1.5-1.4 4.9 5Z"/></svg>',
+    "action-prev":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m12 10.8-5 5-1.4-1.4L12 8l6.4 6.4-1.5 1.4-4.9-5Z"/></svg>',
+    "align-center":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 4h18v2H3V4Zm2 15h14v2H5v-2Zm-2-5h18v2H3v-2Zm2-5h14v2H5V9Z"/></svg>',
+    "align-justify":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 4h18v2H3V4Zm0 15h18v2H3v-2Zm0-5h18v2H3v-2Zm0-5h18v2H3V9Z"/></svg>',
+    "align-left":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 4h18v2H3V4Zm0 15h14v2H3v-2Zm0-5h18v2H3v-2Zm0-5h14v2H3V9Z"/></svg>',
+    "align-right":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 4h18v2H3V4Zm4 15h14v2H7v-2Zm-4-5h18v2H3v-2Zm4-5h14v2H7V9Z"/></svg>',
+    "arrow-left":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M7.8 11H20v2H7.8l5.4 5.4-1.4 1.4L4 12l7.8-7.8 1.4 1.4L7.8 11Z"/></svg>',
+    "arrow-right":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m16.2 11-5.4-5.4 1.4-1.4L20 12l-7.8 7.8-1.4-1.4 5.4-5.4H4v-2h12.2Z"/></svg>',
+    bold: '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 11h4.5a2.5 2.5 0 0 0 0-5H8v5Zm10 4.5c0 2.5-2 4.5-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.3 7.6c1.3.8 2.2 2.2 2.2 3.9ZM8 13v5h5.5a2.5 2.5 0 0 0 0-5H8Z"/></svg>',
+    bookmark:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M5 2h14c.6 0 1 .4 1 1v19.1a.5.5 0 0 1-.8.5L12 18l-7.2 4.6A.5.5 0 0 1 4 22V3c0-.6.4-1 1-1Zm13 2H6v15.4l6-3.7 6 3.7V4Z"/></svg>',
+    cancel:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-9.4 2.8-2.8 1.4 1.4-2.8 2.8 2.8 2.8-1.4 1.4-2.8-2.8-2.8 2.8-1.4-1.4 2.8-2.8-2.8-2.8 1.4-1.4 2.8 2.8Z"/></svg>',
+    checkmark:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M10 15.2 19.2 6l1.4 1.4L10 18l-6.4-6.4L5 10.2l5 5Z"/></svg>',
+    "chevron-down":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m12 13.2 5-5 1.4 1.4L12 16 5.6 9.6l1.5-1.4 4.9 5Z"/></svg>',
+    "chevron-left":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m10.8 12 5 5-1.4 1.4L8 12l6.4-6.4 1.4 1.5-5 4.9Z"/></svg>',
+    "chevron-right":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m13.2 12-5-5 1.4-1.4L16 12l-6.4 6.4L8.2 17l5-5Z"/></svg>',
+    "chevron-up":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m12 10.8-5 5-1.4-1.4L12 8l6.4 6.4-1.5 1.4-4.9-5Z"/></svg>',
+    close:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m12 10.6 5-5 1.4 1.5-5 4.9 5 5-1.5 1.4-4.9-5-5 5L5.6 17l5-5-5-5L7 5.7l5 5Z"/></svg>',
+    "color-picker":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 2c5.5 0 10 4 10 8.9 0 3-2.5 5.5-5.6 5.5h-2a1.7 1.7 0 0 0-1.2 2.8c.3.3.5.7.5 1.1 0 1-.8 1.7-1.7 1.7a10 10 0 0 1 0-20Zm-1.2 16.1c0-2 1.7-3.7 3.7-3.7h2c2 0 3.5-1.5 3.5-3.5C20 7 16.5 4 12 4a8 8 0 0 0-.7 16c-.3-.6-.5-1.2-.5-1.9ZM7.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm9 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3ZM12 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"/></svg>',
+    "color-swatch-remove-color":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m8.6 8.9-5 4.9L8.8 19h2.4l3.7-3.8L8.6 9ZM10 7.4l6.4 6.4 2.8-2.8-6.4-6.4L10 7.4ZM14 19h7v2H8l-6.5-6.5a1 1 0 0 1 0-1.4L12.1 2.5a1 1 0 0 1 1.4 0l7.8 7.8c.4.4.4 1 0 1.4L14 19Z"/></svg>',
+    fill: '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M19.2 18.7 21 17l1.8 1.7a2.5 2.5 0 1 1-3.6 0ZM9 1.1l11.3 11.3c.4.4.4 1 0 1.4l-8.5 8.5a1 1 0 0 1-1.4 0l-8.5-8.5a1 1 0 0 1 0-1.4l7.8-7.8-2.1-2.1L8.9 1ZM11 6l-7 7h14l-7-7Z"/></svg>',
+    fullscreen:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 3v2H4v4H2V3h6ZM2 21v-6h2v4h4v2H2Zm20 0h-6v-2h4v-4h2v6Zm0-12h-2V5h-4V3h6v6Z"/></svg>',
+    "highlight-bg-color":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M19.2 18.7 21 17l1.8 1.7a2.5 2.5 0 1 1-3.6 0ZM9 1.1l11.3 11.3c.4.4.4 1 0 1.4l-8.5 8.5a1 1 0 0 1-1.4 0l-8.5-8.5a1 1 0 0 1 0-1.4l7.8-7.8-2.1-2.1L8.9 1ZM11 6l-7 7h14l-7-7Z"/></svg>',
+    "horizontal-rule":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M2 11h2v2H2v-2Zm4 0h12v2H6v-2Zm14 0h2v2h-2v-2Z"/></svg>',
+    indent:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 4h18v2H3V4Zm0 15h18v2H3v-2Zm8-5h10v2H11v-2Zm0-5h10v2H11V9Zm-4 3.5L3 16V9l4 3.5Z"/></svg>',
+    "insert-character":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M14 20v-2.2a8.5 8.5 0 0 0 3.5-7c0-3-2-6-5.5-6s-5.5 3-5.5 6c0 3.2 1.6 5.9 3.5 7V20H3v-2h4.8C5.7 16.5 4 14 4 10.9 4 6.2 7.5 3 12 3s8 3.2 8 7.9c0 3-1.7 5.6-3.8 7.1H21v2h-7Z"/></svg>',
+    italic:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M15 20H7v-2h3l2-12H9V4h8v2h-3l-2 12h3v2Z"/></svg>',
+    link: '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m17.7 14.8-1.5-1.4 1.5-1.4A4 4 0 1 0 12 6.3l-1.4 1.5-1.4-1.5L10.6 5a6 6 0 0 1 8.5 8.5l-1.4 1.4Zm-2.9 2.9L13.4 19A6 6 0 0 1 5 10.6l1.4-1.4 1.5 1.4L6.3 12a4 4 0 0 0 5.7 5.7l1.4-1.5 1.4 1.5Zm0-10 1.4 1.5-7 7-1.4-1.4 7-7Z"/></svg>',
+    "more-drawer":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M4.5 10.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5S6 12.8 6 12s-.7-1.5-1.5-1.5Zm15 0c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5S21 12.8 21 12s-.7-1.5-1.5-1.5Zm-7.5 0c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5Z"/></svg>',
+    "new-tab":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M10 6v2H5v11h11v-5h2v6c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h6Zm11-3v8h-2V6.4l-7.8 7.8-1.4-1.4L17.6 5H13V3h8Z"/></svg>',
+    "ordered-list":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M5.8 3.5h-1l-1.5.4v1.5l1-.2v3.3H3V10h4V8.5H5.8v-5ZM10 4h11v2H10V4Zm0 7h11v2H10v-2Zm0 7h11v2H10v-2Zm-7.1-2.4A2.1 2.1 0 1 1 6.7 17l-1.4 1.6H7V20H3v-1.1L5.5 16l.1-.4a.6.6 0 0 0-1.2 0v.3H2.9v-.3Z"/></svg>',
+    outdent:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M3 4h18v2H3V4Zm0 15h18v2H3v-2Zm8-5h10v2H11v-2Zm0-5h10v2H11V9Zm-8 3.5L7 9v7l-4-3.5Z"/></svg>',
+    paragraph:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 6v15h-2v-5a6 6 0 0 1 0-12h10v2h-3v15h-2V6h-3Zm-2 0a4 4 0 1 0 0 8V6Z"/></svg>',
+    "paste-text":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M13 6v15h-2V6H5V4h14v2h-6Z"/></svg>',
+    redo: '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M18.2 7H11a6 6 0 0 0 0 12h9v2h-9a8 8 0 0 1 0-16h7.2l-2.6-2.5L17.1 1 22 6l-5 5-1.4-1.5L18.2 7Z"/></svg>',
+    "remove-formatting":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m12.7 14-1.1 6h-2l1.3-7.7L3.5 5 5 3.5l15.6 15.6-1.4 1.4-6.4-6.4Zm-1-6.5L12 6h-1.8l-2-2H20v2h-6l-.5 3.3-1.7-1.8Z"/></svg>',
+    sourcecode:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M17 8.5 18.3 7l5 4.9-5 5-1.4-1.5 3.5-3.5-3.6-3.5Zm-10 0L3.6 12l3.6 3.5L5.6 17 .6 12l5-5 1.5 1.5Z"/></svg>',
+    "strike-through":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M17.2 14c.2.5.3 1 .3 1.7 0 1.4-.5 2.4-1.6 3.2-1 .7-2.5 1.1-4.3 1.1-1.7 0-3.3-.4-4.9-1.1v-2.3c1.5.9 3 1.3 4.7 1.3 2.5 0 3.8-.7 3.8-2.2a2.2 2.2 0 0 0-.7-1.7H3v-2h18v2h-3.8ZM13 11H7.6a3.2 3.2 0 0 1-1.1-2.5c0-1.3.5-2.3 1.4-3.2 1-.9 2.4-1.3 4.3-1.3 1.5 0 2.9.3 4.2 1V7c-1.2-.7-2.5-1-3.9-1-2.5 0-3.7.8-3.7 2.4 0 .4.2.7.6 1 .5.4 1 .6 1.6.8l2 .7Z"/></svg>',
+    subscript:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m5.6 4 4.9 6 4.9-6H18l-6.2 7.5L18 19h-2.6l-4.9-6-5 6H3l6.2-7.5L3 4h2.6Zm16.2 12a.8.8 0 1 0-1.6.2l-1.1.3a2 2 0 1 1 3.3 1L20.7 19H23v1h-4v-1l2.6-2.4.2-.6Z"/></svg>',
+    superscript:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m5.6 5 4.9 6 4.9-6H18l-6.2 7.5L18 20h-2.6l-4.9-6-5 6H3l6.2-7.5L3 5h2.6Zm16 1.6a.8.8 0 0 0-.6-1.4.8.8 0 0 0-.8 1l-1.1.3a2 2 0 1 1 3.3 1L20.7 9H23v1h-4V9l2.6-2.4Z"/></svg>',
+    table:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M13 10v4h6v-4h-6Zm-2 0H5v4h6v-4Zm2 9h6v-3h-6v3Zm-2 0v-3H5v3h6Zm2-14v3h6V5h-6Zm-2 0H5v3h6V5ZM4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Z"/></svg>',
+    "text-color":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M15.2 14H8.8l-1.6 4H5l6-15h2l6 15h-2.2l-1.6-4Zm-.8-2L12 5.9 9.6 12h4.8ZM3 20h18v2H3v-2Z"/></svg>',
+    underline:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 3v9a4 4 0 0 0 8 0V3h2v9a6 6 0 0 1-12 0V3h2ZM4 20h16v2H4v-2Z"/></svg>',
+    undo: '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m5.8 7 2.6 2.5L6.9 11 2 6l5-5 1.4 1.5L5.8 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 0 0 0-12H5.8Z"/></svg>',
+    unlink:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m17.7 14.8-1.5-1.4 1.5-1.4A4 4 0 1 0 12 6.3l-1.4 1.5-1.4-1.5L10.6 5a6 6 0 0 1 8.5 8.5l-1.4 1.4Zm-2.9 2.9L13.4 19A6 6 0 0 1 5 10.6l1.4-1.4 1.5 1.4L6.3 12a4 4 0 0 0 5.7 5.7l1.4-1.5 1.4 1.5Zm0-10 1.4 1.5-7 7-1.4-1.4 7-7Zm-9-5.4 2-.5 1 3.8-2 .6-1-4Zm9.5 16 1.9-.5 1 4-2 .4-1-3.8ZM2.3 5.9l3.9 1-.6 2-3.8-1 .5-2Zm16 9.5 4 1-.6 2-3.9-1.1.6-2Z"/></svg>',
+    "unordered-list":
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 4h13v2H8V4ZM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3ZM8 11h13v2H8v-2Zm0 7h13v2H8v-2Z"/></svg>',
+    visualblocks:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M1 2v3h2V4h2v5H3.5v2h5V9H7V4h2v1h2V2H1Zm20 1h-7v2h6v14H4v-5H2v6c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1Z"/></svg>',
+    visualchars:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 6v15h-2v-5a6 6 0 0 1 0-12h10v2h-3v15h-2V6h-3Zm-2 0a4 4 0 1 0 0 8V6Z"/></svg>',
+    warning:
+      '<svg viewBox="0 0 24 24" width="16" height="16"><path d="m12.9 3 9.5 16.5a1 1 0 0 1-.9 1.5h-19a1 1 0 0 1-.9-1.5L11.1 3A1 1 0 0 1 13 3ZM4.2 19h15.6L12 5.5 4.2 19Zm6.8-3h2v2h-2v-2Zm0-7h2v5h-2V9Z"/></svg>'
+  }
+})
diff --git a/app/assets/javascripts/tinymce/plugins/alchemy_link/plugin.min.js b/app/assets/javascripts/tinymce/plugins/alchemy_link/plugin.min.js
@@ -1,19 +1,37 @@
-tinymce.PluginManager.add('alchemy_link', function(editor, url) {
-  editor.addButton('alchemy_link', {
-    icon: 'link',
-    tooltip: 'Insert/edit link',
-    shortcut: 'Ctrl+K',
-    stateSelector: 'a[href]',
-    onclick: function () {
-      var linkObject = {
-        node: editor.selection.getNode(),
-        bookmark: editor.selection.getBookmark(),
-        selection: editor.selection,
-        editor: editor
-      };
-      var linkDialog = new Alchemy.LinkDialog(linkObject);
-      editor.focus();
-      linkDialog.open();
+tinymce.PluginManager.add("alchemy_link", function (editor) {
+  const getAnchor = (selectedElm) => {
+    return editor.dom.getParent(selectedElm, "a[href]")
+  }
+
+  const openLinkDialog = () => {
+    if (Alchemy.currentDialog()) return
+    const linkObject = {
+      node: getAnchor(editor.selection.getNode()),
+      bookmark: editor.selection.getBookmark(),
+      selection: editor.selection,
+      editor: editor
     }
-  });
-});
+    const linkDialog = new Alchemy.LinkDialog(linkObject)
+    editor.focus()
+    linkDialog.open()
+  }
+
+  editor.ui.registry.addToggleButton("alchemy_link", {
+    icon: "link",
+    tooltip: "Insert/edit link",
+    onSetup(buttonApi) {
+      const onNodeChange = () => {
+        buttonApi.setActive(getAnchor(editor.selection.getNode()) !== null)
+      }
+      editor.on("NodeChange", onNodeChange)
+      return () => {
+        editor.off("NodeChange", onNodeChange)
+      }
+    },
+    onAction: openLinkDialog
+  })
+
+  // Replace the default link command with our own
+  editor.addCommand("mceLink", openLinkDialog)
+  editor.addShortcut("Meta+K", "", openLinkDialog)
+})
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -30,7 +30,11 @@ $default-font-size: 1em !default;
 $small-font-size: 0.9em !default;
 $default-font-style: $default-font-size $default-font-family !default;
 
+$default-padding: 4px !default;
+$default-margin: $default-padding !default;
+
 $dialog-header-height: 36px !default;
+$dialog-header-padding: 0 2 * $default-padding !default;
 $dialog-header-color: $dark-blue !default;
 $dialog-header-text-color: $white !default;
 $dialog-header-font-size: $default-font-size !default;
@@ -39,9 +43,6 @@ $dialog-overlay-color: rgb(100, 100, 100) !default;
 $dialog-overlay-opacity: 0.4 !default;
 $dialog-background-color: $light-gray !default;
 
-$default-padding: 4px !default;
-$default-margin: $default-padding !default;
-
 $default-border-color: rgba(#afafaf, 0.5) !default;
 $border-inset-color: lighten($default-border-color, 10%) !default;
 $default-border-width: 1px !default;
@@ -84,6 +85,13 @@ $button-padding: $default-padding 5 * $default-padding !default;
 $small-button-padding: 0.4em 0.8em !default;
 $button-margin: $form-field-margin !default;
 
+$icon-button-width: 30px !default;
+$icon-button-height: 30px !default;
+$icon-button-medium-width: 26px !default;
+$icon-button-medium-height: 26px !default;
+$icon-button-small-width: 15px !default;
+$icon-button-small-height: 15px !default;
+
 $secondary-button-bg-color: transparent !default;
 $secondary-button-text-color: $text-color !default;
 $secondary-button-border-color: $default-border-color !default;

diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss
@@ -52,16 +52,16 @@ input.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
+  width: $icon-button-width;
+  height: $icon-button-height;
   margin: 0;
   padding: 0;
   text-shadow: none;
   border-radius: $default-border-radius;
 
   &.small {
-    width: 15px;
-    height: 15px;
+    width: $icon-button-small-width;
+    height: $icon-button-small-height;
     background: none;
     border: none;
   }

diff --git a/app/assets/stylesheets/alchemy/dialogs.scss b/app/assets/stylesheets/alchemy/dialogs.scss
@@ -126,7 +126,7 @@ $dialog-transition-duration: 150ms;
   gap: $default-padding;
   position: relative;
   height: $dialog-header-height;
-  padding: 0 2 * $default-padding;
+  padding: $dialog-header-padding;
   background: $dialog-header-color;
   color: $dialog-header-text-color;
   font-weight: normal;

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -555,8 +555,8 @@ alchemy-publish-element-button {
   border-bottom-right-radius: $default-border-radius;
 
   .icon_button {
-    width: 26px;
-    height: 26px;
+    width: $icon-button-medium-width;
+    height: $icon-button-medium-height;
   }
 }
 

diff --git a/app/assets/stylesheets/tinymce/skins/alchemy/content.min.css.scss b/app/assets/stylesheets/tinymce/skins/alchemy/content.min.css.scss