alchemy_cms 7.0.8 → 7.1.0.pre.b2

data/app/assets/javascripts/tinymce/icons/remixicons/icons.js

@@ -0,0 +1,93 @@
+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>',
+    "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>'
+  }
+})

data/app/assets/javascripts/tinymce/plugins/alchemy_link/plugin.min.js

@@ -1,19 +1,38 @@
-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)
+      }
+      onNodeChange()
+      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)
+})

data/app/assets/stylesheets/alchemy/_custom-properties.scss

@@ -0,0 +1,82 @@
+:root {
+  // Sizes
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+
+  // Font Families
+  --font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
+    Terminal, monospace;
+  --font-sans: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+    "Lucida Sans", Verdana, Tahoma, sans-serif;
+
+  // Font Size - at the moment only in Pixel, because the base font size is 12px
+  --font-size_small: 12px; // 0.875rem
+  --font-size_medium: 14px; // 1rem
+  --font-size_large: 16px; // 1.25 rem
+
+  --font-weigth_normal: 500;
+  --font-weigth_bold: 700;
+
+  // border-radius
+  --border-radius_medium: 3px;
+
+  // Colors
+  --color-blue_very_light: hsl(203deg, 32%, 85%);
+  --color-blue_light: hsl(212deg, 51%, 50%);
+  --color-blue_medium: hsl(212deg, 52%, 36%);
+  --color-blue_dark: hsl(212deg, 51%, 26%);
+
+  --color-green_very_light: hsl(88deg, 47%, 88%);
+  --color-green_light: hsl(127deg, 25%, 69%);
+  --color-green_medium: hsl(127deg, 25%, 48%);
+  --color-green_dark: hsl(128deg, 32%, 26%);
+
+  --color-yellow_light: hsl(60, 81%, 92%);
+  --color-yellow_medium: hsl(56, 68%, 85%);
+  --color-yellow_dark: hsl(56, 53%, 29%);
+
+  --color-orange_medium: hsl(42deg, 100%, 74%);
+  --color-orange_dark: hsl(28deg, 77%, 68%);
+  --color-orange_very_dark: hsl(28deg, 77%, 48%);
+
+  --color-red_very_light: hsl(360deg, 47%, 88%);
+  --color-red_light: hsl(360deg, 25%, 69%);
+  --color-red_medium: hsl(360deg, 51%, 42%);
+  --color-red_dark: hsl(360deg, 51%, 25%);
+
+  --color-grey-blue_light: hsl(224deg, 23%, 60%);
+  --color-grey-blue_medium: hsl(224deg, 23%, 40%);
+  --color-grey-blue_dark: hsl(224deg, 23%, 26%);
+
+  --color-grey_light: hsl(0deg, 0%, 94%);
+  --color-grey_medium: hsl(0deg, 0%, 78%);
+  --color-grey_dark: hsl(0deg, 0%, 40%);
+  --color-grey_very_dark: hsl(0deg, 0%, 20%);
+  --color-text: hsla(224, 22.7%, 25.9%, 0.8);
+}
+
+.alchemy-light {
+  --outline-color: var(--color-orange_dark);
+
+  --font-color_failed: var(--color-red_medium);
+  --font-color_default: var(--color-text);
+
+  --tabs_indicator-color: var(--color-orange_dark);
+  --tabs_track-color: var(--color-grey_light);
+  --sl-input-label-color: var(--color-text);
+
+  --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
+  --file-upload_single-upload-background-color: var(--color-grey_light);
+  --file-upload_progress-track-color: var(--color-blue_very_light);
+  --file-upload_progress-indicator-color: var(--color-blue_dark);
+
+  --file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);
+  --file-upload_progress-indicator-color-failed: var(--color-red_medium);
+  --file-upload_progress-indicator-color-invalid: var(--color-red_medium);
+  --file-upload_progress-indicator-color-successful: var(--color-green_medium);
+  --file-upload_progress-indicator-color-upload-finished: var(
+    --color-blue_dark
+  );
+}

data/app/assets/stylesheets/alchemy/_mixins.scss

@@ -1,7 +1,8 @@
 @mixin default-focus-style(
   $border-color: $focus-color,
   $box-shadow: 0 0 0 2px $focus-color,
-  $border-radius: $default-border-radius) {
+  $border-radius: $default-border-radius
+) {
   border-color: $border-color;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
@@ -25,12 +26,15 @@
   $color: $button-text-color,
   $line-height: $form-field-line-height,
   $focus-border-color: $button-focus-border-color,
-  $focus-box-shadow: $button-focus-box-shadow) {
-  display: inline-block;
+  $focus-box-shadow: $button-focus-box-shadow
+) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-family: $default-font-family;
   font-size: $default-font-size;
   font-weight: $button-font-weight;
-  line-height: $line-height;
+  height: 30px;
   padding: $padding;
   cursor: pointer;
   border-radius: $border-radius;
@@ -49,7 +53,8 @@
     border-color: $hover-border-color;
   }
 
-  &:active, &.active {
+  &:active,
+  &.active {
     box-shadow: inset $button-box-shadow;
   }
 
@@ -60,9 +65,12 @@
     );
   }
 
-  &.disabled, &[disabled],
-  &.disabled:active, &[disabled]:active,
-  &.disabled:hover, &[disabled]:hover {
+  &.disabled,
+  &[disabled],
+  &.disabled:active,
+  &[disabled]:active,
+  &.disabled:hover,
+  &[disabled]:hover {
     background-color: transparentize($button-bg-color, 0.5);
     cursor: not-allowed;
     box-shadow: none;
@@ -90,14 +98,17 @@
   float: right;
   width: $form-right-width;
   margin: $form-field-margin;
-  padding: $default-padding 2*$default-padding;
+  padding: $default-padding 2 * $default-padding;
   line-height: 21px;
   min-height: $form-field-height;
   background: white;
   border-radius: $default-border-radius;
 }
 
-@mixin form-hint($background-color: $light_yellow, $border-color: $medium-gray) {
+@mixin form-hint(
+  $background-color: $light_yellow,
+  $border-color: $medium-gray
+) {
   font-size: $small-font-size;
   line-height: 1.5em;
   padding: $default-padding;
@@ -135,7 +146,10 @@
   box-shadow: $shadow;
 }
 
-@mixin label-base($margin: 2*$default-margin 0, $padding: $default-padding 3*$default-padding) {
+@mixin label-base(
+  $margin: 2 * $default-margin 0,
+  $padding: $default-padding 3 * $default-padding
+) {
   display: inline-block;
   vertical-align: middle;
   padding: $padding;
@@ -147,18 +161,18 @@
   color: $text-color;
 }
 
-@mixin tag-base($margin: 2*$default-margin 0, $padding: $default-padding 3*$default-padding) {
-  @include label-base(
-    $margin: $margin,
-    $padding: $padding
-  );
+@mixin tag-base(
+  $margin: 2 * $default-margin 0,
+  $padding: $default-padding 3 * $default-padding
+) {
+  @include label-base($margin: $margin, $padding: $padding);
 
   &:before {
-    content: fa-content($fa-var-tag);
-    font-family: 'Font Awesome 5 Free';
-    font-weight: 900;
-    font-size: 0.8em;
-    padding-right: 2*$default-padding;
+    content: $ri-price-tag-3-line;
+    font-family: "remixicon";
+    font-weight: 400;
+    font-size: 1em;
+    padding-right: $default-padding;
   }
 
   &:focus {
@@ -169,7 +183,8 @@
 @mixin linked-button(
   $border-radius: $default-border-radius,
   $line-height: $form-field-line-height,
-  $padding: 3px) {
+  $padding: 3px
+) {
   @include button-defaults(
     $line-height: $line-height,
     $background-color: $linked-button-color,
@@ -185,7 +200,7 @@
 
 @mixin zoom-in {
   cursor: pointer;
-  cursor: image-url('alchemy/lupe.cur');
+  cursor: image-url("alchemy/lupe.cur");
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
   cursor: zoom-in;
@@ -199,13 +214,6 @@
   white-space: $wrap;
 }
 
-@mixin hint-hover-style {
-  visibility: visible;
-  top: 26px;
-  opacity: 1;
-  transition-delay: .2s;
-}
-
 @mixin clearfix {
   &::after {
     clear: both;

data/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;
@@ -59,7 +60,7 @@ $form-field-border-style: $default-border-style !default;
 $form-field-border-color: $default-border-color $default-border-color
   $border-inset-color $border-inset-color !default;
 $form-field-box-shadow: inset 0px 0 1px $medium-gray !default;
-$form-field-padding: 0.6em 0.75em !default;
+$form-field-padding: $default-padding 2 * $default-padding !default;
 $form-field-font-size: $default-font-size !default;
 $form-field-line-height: 1.25 !default;
 $form-field-text-color: $text-color !default;
@@ -80,10 +81,17 @@ $button-font-weight: 700 !default;
 $button-text-shadow: none !default;
 $button-box-shadow: 0px 1px 1px -1px #333 !default;
 $button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
-$button-padding: 0.55em 2em !default;
+$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;
@@ -108,7 +116,7 @@ $error_text_color: #a23434 !default;
 $error_background_color: #efd3d3 !default;
 
 $hint-background-color: $light_yellow !default;
-$hint-text-color: $very-dark-gray !default;
+$hint-text-color: #59543e !default;
 
 $form-left-width: 35% !default;
 $form-right-width: 65% !default;
@@ -130,6 +138,7 @@ $main-menu-icon-color: $white !default;
 $main-menu-entry-max-width: 110px !default;
 $toolbar-bg-color: $medium-gray !default;
 $toolbar-height: 46px !default;
+$tab-bar-height: 51px !default;
 $element-toolbar-height: 37px !default;
 $header-height: 29px !default;
 $header-background: #d8d8d8 !default;
@@ -147,7 +156,7 @@ $table-row-hover-color: rgba($light_yellow, 0.5) !default;
 
 $elements-window-width: 22.5vw !default;
 $elements-window-min-width: 400px !default;
-$element-header-bg-color: $medium-gray !default;
+$element-header-bg-color: transparent !default;
 $element-header-active-bg-color: $dark-blue !default;
 $element-header-active-color: $white !default;
 $element-header-deprecated-bg-color: rgba(253, 213, 175, 0.25) !default;
@@ -174,6 +183,12 @@ $select-hover-text-color: $white !default;
 $medium-select-box-width: 90px;
 $large-select-box-width: 120px;
 
-$thumbnail-background-color: opacify($default-border-color, 1) !default;
+$thumbnail-background:
+  linear-gradient(45deg, $medium-gray 25%, transparent 25%) 0.5em 0.5em/1em 1em,
+  linear-gradient(-45deg, $medium-gray 25%, transparent 25%) -0.5em 0/1em 1em,
+  linear-gradient(45deg, transparent 75%, $medium-gray 75%) 0 0/1em 1em,
+  linear-gradient(-45deg, transparent 75%, $medium-gray 75%) 0 0.5em/1em 1em
+    $white !default;
+
 $medium-screen-break-point: 700px;
 $large-screen-break-point: 1000px;

data/app/assets/stylesheets/alchemy/admin.scss

@@ -3,9 +3,8 @@
  *= require_self
  */
 
-@import "fontawesome/fontawesome";
-@import "fontawesome/regular";
-@import "fontawesome/solid";
+@import "remixicon";
+@import "alchemy/custom-properties";
 @import "alchemy/defaults";
 @import "alchemy/archive";
 @import "alchemy/navigation";
@@ -39,6 +38,7 @@
 @import "alchemy/resource_info";
 @import "alchemy/search";
 @import "alchemy/selects";
+@import "alchemy/shoelace";
 @import "alchemy/sitemap";
 @import "alchemy/spinner";
 @import "alchemy/tables";
@@ -46,5 +46,4 @@
 @import "alchemy/typography";
 @import "alchemy/lists";
 @import "alchemy/upload";
-@import "alchemy/jquery-ui";
 @import "jquery.Jcrop.min";