alchemy_cms 7.2.7 → 7.3.0

data/app/assets/stylesheets/alchemy/{toolbar.scss → admin/toolbar.scss}

@@ -1,7 +1,7 @@
 #toolbar {
   display: flex;
   align-items: center;
-  gap: 2 * $default-padding;
+  gap: var(--spacing-2);
   z-index: 10;
   @extend %gradiated-toolbar;
   margin-right: 0px;
@@ -18,7 +18,7 @@
 
   div p {
     float: right;
-    margin: 3px $default-margin 0 0;
+    margin: 3px var(--spacing-1) 0 0;
     padding: 0;
   }
 }
@@ -37,11 +37,11 @@
 
   &.right {
     flex-grow: 0;
-    padding: 8px 0;
+    padding: var(--spacing-2) 0;
 
     .toolbar_button {
       &:last-child {
-        margin-right: $default-margin;
+        margin-right: var(--spacing-1);
       }
     }
   }
@@ -54,14 +54,14 @@
   }
 
   .toolbar_button {
-    margin: 0 2 * $default-margin;
+    margin: 0 var(--spacing-2);
 
     &:first-child {
-      margin-left: $default-margin;
+      margin-left: var(--spacing-1);
 
       select,
       .alchemy_selectbox {
-        margin-left: 2 * $default-margin;
+        margin-left: var(--spacing-2);
       }
     }
   }
@@ -75,8 +75,8 @@
   border-right-style: solid;
   border-right-width: 1px;
   border-right-color: $default-border-color;
-  margin-right: $default-margin;
-  margin-left: $default-margin;
+  margin-right: var(--spacing-1);
+  margin-left: var(--spacing-1);
 }
 
 #overlay_toolbar {
@@ -88,7 +88,7 @@
   position: relative;
   display: inline-block;
   vertical-align: top;
-  margin: 0 2 * $default-margin;
+  margin: 0 var(--spacing-2);
 
   &:hover label {
     display: block;

data/app/assets/stylesheets/alchemy/{typography.scss → admin/typography.scss}

@@ -51,7 +51,7 @@ h5,
 }
 
 p {
-  margin: 0 0 2 * $default-margin 0;
+  margin: 0 0 var(--spacing-2) 0;
   white-space: normal;
 
   a {
@@ -62,7 +62,7 @@ p {
 kbd,
 code {
   border: $default-border;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
   font-family: Courier, monospaced;
   margin: 0 0.25ex;
   padding: 0.25em 0.5em;
@@ -70,5 +70,5 @@ code {
 }
 
 code {
-  background: $medium-gray;
+  background: var(--color-grey_light);
 }

data/app/assets/stylesheets/alchemy/{upload.scss → admin/upload.scss}

@@ -21,7 +21,7 @@
 
   &:after {
     align-items: center;
-    background-color: rgba($dark-gray, 0.6);
+    background-color: hsla(0deg, 0%, 40%, 0.6);
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.6)"><path d="M1 14.5C1 12.1716 2.22429 10.1291 4.06426 8.9812C4.56469 5.044 7.92686 2 12 2C16.0731 2 19.4353 5.044 19.9357 8.9812C21.7757 10.1291 23 12.1716 23 14.5C23 17.9216 20.3562 20.7257 17 20.9811L7 21C3.64378 20.7257 1 17.9216 1 14.5ZM16.8483 18.9868C19.1817 18.8093 21 16.8561 21 14.5C21 12.927 20.1884 11.4962 18.8771 10.6781L18.0714 10.1754L17.9517 9.23338C17.5735 6.25803 15.0288 4 12 4C8.97116 4 6.42647 6.25803 6.0483 9.23338L5.92856 10.1754L5.12288 10.6781C3.81156 11.4962 3 12.927 3 14.5C3 16.8561 4.81833 18.8093 7.1517 18.9868L7.325 19H16.675L16.8483 18.9868ZM13 13V17H11V13H8L12 8L16 13H13Z"></path></svg>');
     background-repeat: no-repeat;
     background-size: 80px 80px;

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

@@ -1,49 +1,44 @@
-/*  Alchemy CMS Sprockets Manifest
- *  -------------------------------
- *= require_self
- */
-
 @import "alchemy/custom-properties";
 @import "alchemy/defaults";
-@import "alchemy/archive";
-@import "alchemy/navigation";
-@import "alchemy/attachments";
-@import "alchemy/base";
-@import "alchemy/buttons";
-@import "alchemy/dialogs";
-@import "alchemy/toolbar";
-@import "alchemy/clipboard";
-@import "alchemy/dashboard";
-@import "alchemy/elements";
-@import "alchemy/errors";
-@import "alchemy/flash";
-@import "alchemy/flatpickr";
 @import "alchemy/fonts";
-@import "alchemy/forms";
-@import "alchemy/form_fields";
-@import "alchemy/frame";
-@import "alchemy/hints";
-@import "alchemy/icons";
-@import "alchemy/images";
-@import "alchemy/image_library";
-@import "alchemy/labels";
-@import "alchemy/list_filter";
-@import "alchemy/nodes";
-@import "alchemy/attachment-select";
-@import "alchemy/node-select";
-@import "alchemy/notices";
-@import "alchemy/page-select";
-@import "alchemy/pagination";
-@import "alchemy/preview_window";
-@import "alchemy/resource_info";
-@import "alchemy/search";
-@import "alchemy/selects";
-@import "alchemy/shoelace";
-@import "alchemy/sitemap";
-@import "alchemy/spinner";
-@import "alchemy/tables";
-@import "alchemy/tags";
-@import "alchemy/typography";
-@import "alchemy/lists";
-@import "alchemy/upload";
+@import "alchemy/admin/archive";
+@import "alchemy/admin/attachment-select";
+@import "alchemy/admin/attachments";
+@import "alchemy/admin/base";
+@import "alchemy/admin/buttons";
+@import "alchemy/admin/clipboard";
+@import "alchemy/admin/dashboard";
+@import "alchemy/admin/dialogs";
+@import "alchemy/admin/elements";
+@import "alchemy/admin/errors";
+@import "alchemy/admin/flash";
+@import "alchemy/admin/flatpickr";
+@import "alchemy/admin/form_fields";
+@import "alchemy/admin/forms";
+@import "alchemy/admin/frame";
+@import "alchemy/admin/hints";
+@import "alchemy/admin/icons";
+@import "alchemy/admin/image_library";
+@import "alchemy/admin/images";
+@import "alchemy/admin/labels";
+@import "alchemy/admin/list_filter";
+@import "alchemy/admin/lists";
+@import "alchemy/admin/navigation";
+@import "alchemy/admin/node-select";
+@import "alchemy/admin/nodes";
+@import "alchemy/admin/notices";
+@import "alchemy/admin/page-select";
+@import "alchemy/admin/pagination";
+@import "alchemy/admin/preview_window";
+@import "alchemy/admin/resource_info";
+@import "alchemy/admin/search";
+@import "alchemy/admin/selects";
+@import "alchemy/admin/shoelace";
+@import "alchemy/admin/sitemap";
+@import "alchemy/admin/spinner";
+@import "alchemy/admin/tables";
+@import "alchemy/admin/tags";
+@import "alchemy/admin/toolbar";
+@import "alchemy/admin/typography";
+@import "alchemy/admin/upload";
 @import "jquery.Jcrop.min";

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

@@ -0,0 +1,57 @@
+@import "alchemy/custom-properties";
+@import "alchemy/variables";
+@import "alchemy/fonts";
+
+body {
+  background-color: $main-menu-bg-color;
+  color: var(--color-white);
+  font-family: $default-font-family;
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 22px;
+}
+
+h3 {
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 1.2;
+  margin-bottom: 20px;
+  padding-top: 20px;
+}
+
+.container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 600px;
+  margin-top: -50px;
+  transform: translateY(-50%) translateX(-300px);
+}
+
+ul {
+  line-height: 1.6;
+  margin-bottom: 17px;
+  padding: 0;
+  padding-left: 20px;
+  margin: 0px;
+  list-style-position: outside;
+
+  li {
+    color: var(--color-white);
+    margin-bottom: 12px;
+    background-color: none;
+    border-bottom: 0 none;
+    line-height: 22px;
+  }
+}
+
+a {
+  color: var(--color-white);
+  text-decoration: underline;
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    color: var(--color-white);
+    text-decoration: none;
+  }
+}

data/app/assets/stylesheets/tinymce/skins/content/alchemy/{content.min.scss → content.scss}

@@ -6,6 +6,7 @@
 */
 
 @import "alchemy/variables";
+@import "alchemy/custom-properties";
 
 html {
   font-size: 13px;
@@ -15,11 +16,11 @@ body {
   font-family: $default-font-family;
   line-height: 1.4;
   margin: 1em;
-  color: $text-color;
+  color: var(--color-text);
 }
 
 a {
-  color: $dark-blue;
+  color: var(--color-blue_dark);
 }
 
 table {
@@ -38,7 +39,7 @@ figure {
 }
 
 figure figcaption {
-  color: $dark-gray;
+  color: var(--color-grey_dark);
   display: block;
   margin-top: 0.25rem;
   text-align: center;
@@ -51,7 +52,7 @@ hr {
 }
 
 code {
-  background-color: $light-gray;
+  background-color: var(--color-grey_very_light);
   border-radius: $default-border-radius;
   padding: 0.1rem 0.2rem;
 }

data/app/assets/stylesheets/tinymce/skins/ui/alchemy/{skin.min.scss → skin.scss}

@@ -141,7 +141,7 @@ button::-moz-focus-inner {
 }
 
 .tox .accessibility-issue__repair {
-  margin-top: 16px;
+  margin-top: var(--spacing-4);
 }
 
 .tox
@@ -734,12 +734,12 @@ button::-moz-focus-inner {
 
 .tox .tox-collection--list .tox-collection__item--enabled {
   background-color: rgba(175, 175, 175, 0.25);
-  color: $text-color;
+  color: var(--color-text);
 }
 
 .tox .tox-collection--toolbar .tox-collection__item--enabled {
   background-color: rgba(175, 175, 175, 0.5);
-  color: $text-color;
+  color: var(--color-text);
 }
 
 .tox .tox-collection--toolbar .tox-collection__item--active {
@@ -748,14 +748,14 @@ button::-moz-focus-inner {
 
 .tox .tox-collection--grid .tox-collection__item--enabled {
   background-color: rgba(175, 175, 175, 0.5);
-  color: $text-color;
+  color: var(--color-text);
 }
 
 .tox
   .tox-collection--grid
   .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
   background-color: rgba(175, 175, 175, 0.25);
-  color: $text-color;
+  color: var(--color-text);
   outline: none;
 }
 
@@ -776,7 +776,7 @@ button::-moz-focus-inner {
 .tox
   .tox-collection--toolbar
   .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
-  color: $text-color;
+  color: var(--color-text);
 }
 
 .tox .tox-collection__item-checkmark,
@@ -893,7 +893,7 @@ button::-moz-focus-inner {
 .tox .tox-collection--horizontal .tox-collection__item {
   height: 34px;
   margin: 2px 0 3px 0;
-  padding: 0 4px;
+  padding: 0 var(--spacing-1);
 }
 
 .tox .tox-collection--horizontal .tox-collection__item-label {
@@ -901,7 +901,7 @@ button::-moz-focus-inner {
 }
 
 .tox .tox-collection--horizontal .tox-collection__item-caret {
-  margin-left: 4px;
+  margin-left: var(--spacing-1);
 }
 
 .tox .tox-collection__item-container {
@@ -1035,7 +1035,7 @@ button::-moz-focus-inner {
 }
 
 .tox[dir="rtl"] .tox-collection--horizontal .tox-collection__item-caret {
-  margin-right: 4px;
+  margin-right: var(--spacing-1);
 }
 
 .tox .tox-color-picker-container {
@@ -1181,7 +1181,7 @@ button::-moz-focus-inner {
 .tox .tox-toolbar .tox-swatches,
 .tox .tox-toolbar__overflow .tox-swatches,
 .tox .tox-toolbar__primary .tox-swatches {
-  margin: 2px 0 3px 4px;
+  margin: 2px 0 3px var(--spacing-1);
 }
 
 .tox .tox-collection--list .tox-collection__group .tox-swatches-menu {
@@ -1555,7 +1555,7 @@ button::-moz-focus-inner {
 
 .tox .tox-dialog__header .tox-button {
   z-index: 1;
-  color: $white;
+  color: var(--color-white);
   background-image: none; // If used in Solidus we need to override the background image
   border: none; // If used in Solidus we need to override the border
 }
@@ -1619,7 +1619,7 @@ button::-moz-focus-inner {
   display: inline-block;
   font-size: $base-font-size;
   line-height: 1.3;
-  padding: 16px 15px;
+  padding: var(--spacing-4) 15px;
   text-decoration: none;
   white-space: nowrap;
   border-bottom: 2px solid var(--tabs_track-color);
@@ -1703,7 +1703,7 @@ button::-moz-focus-inner {
   font-style: normal;
   font-weight: 700;
   letter-spacing: normal;
-  margin-bottom: 4 * $default-margin;
+  margin-bottom: var(--spacing-4);
   margin-top: 2rem;
   text-transform: none;
 }
@@ -1714,13 +1714,13 @@ button::-moz-focus-inner {
   font-style: normal;
   font-weight: 700;
   letter-spacing: normal;
-  margin-bottom: 4 * $default-margin;
+  margin-bottom: var(--spacing-4);
   margin-top: 2rem;
   text-transform: none;
 }
 
 .tox .tox-dialog__body-content .tox-form__group p {
-  margin-bottom: 4 * $default-margin;
+  margin-bottom: var(--spacing-4);
 }
 
 .tox .tox-dialog__body-content .tox-form__group h1:first-child,
@@ -2087,7 +2087,7 @@ body.tox-dialog__disable-scroll {
   box-sizing: border-box;
   height: 23px;
   position: absolute;
-  top: 4px;
+  top: var(--spacing-1);
   width: 24px;
 }
 
@@ -2133,7 +2133,7 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox:not([dir="rtl"]) .tox-color-input span {
-  left: 4px;
+  left: var(--spacing-1);
 }
 
 .tox[dir="rtl"] .tox-color-input .tox-textfield {
@@ -2141,7 +2141,7 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox[dir="rtl"] .tox-color-input span {
-  right: 4px;
+  right: var(--spacing-1);
 }
 
 .tox .tox-label,
@@ -2174,11 +2174,11 @@ body.tox-dialog__disable-scroll {
 
 .tox .tox-form__group {
   box-sizing: border-box;
-  margin-bottom: 4 * $default-margin;
+  margin-bottom: var(--spacing-4);
 }
 
 .tox .tox-form__group .tox-label {
-  margin-bottom: $default-margin;
+  margin-bottom: var(--spacing-1);
 }
 
 .tox .tox-form-group--maximize {
@@ -2357,7 +2357,7 @@ body.tox-dialog__disable-scroll {
 .tox .tox-listbox__select-label {
   cursor: default;
   flex: 1;
-  margin: 0 4px;
+  margin: 0 var(--spacing-1);
 }
 
 .tox .tox-listbox__select-chevron {
@@ -2407,7 +2407,7 @@ body.tox-dialog__disable-scroll {
   margin: 0;
   min-height: 34px;
   outline: 0;
-  padding: 5px 4px;
+  padding: 5px var(--spacing-1);
   resize: none;
   width: 100%;
 }
@@ -2689,13 +2689,13 @@ body.tox-dialog__disable-scroll {
 
 .tox .tox-menubar {
   background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='rgba%28175,%20175,%20175,%200.5%29'/%3E%3C/svg%3E")
-    left 0 top 0 $light-gray;
-  background-color: $light-gray;
+    left 0 top 0 var(--color-grey_very_light);
+  background-color: var(--color-grey_very_light);
   display: flex;
   flex: 0 0 auto;
   flex-shrink: 0;
   flex-wrap: wrap;
-  padding: 0 4px 0 4px;
+  padding: 0 var(--spacing-1) 0 var(--spacing-1);
 }
 
 .tox.tox-tinymce:not(.tox-tinymce-inline)
@@ -2710,7 +2710,7 @@ body.tox-dialog__disable-scroll {
   border: 0;
   border-radius: $default-border-radius;
   box-shadow: none;
-  color: $icon-color;
+  color: var(--color-icon);
   display: flex;
   flex: 0 0 auto;
   font-size: $base-font-size;
@@ -2721,7 +2721,7 @@ body.tox-dialog__disable-scroll {
   margin: 2px 0 3px 0;
   outline: 0;
   overflow: hidden;
-  padding: 0 4px;
+  padding: 0 var(--spacing-1);
   text-transform: none;
   width: auto;
 }
@@ -2758,7 +2758,7 @@ body.tox-dialog__disable-scroll {
 .tox .tox-mbtn__select-label {
   cursor: default;
   font-weight: 400;
-  margin: 0 4px;
+  margin: 0 var(--spacing-1);
 }
 
 .tox .tox-mbtn[disabled] .tox-mbtn__select-label {
@@ -3247,9 +3247,9 @@ body.tox-dialog__disable-scroll {
 
 .tox .tox-statusbar {
   align-items: center;
-  background-color: $light-gray;
+  background-color: var(--color-grey_very_light);
   border-top: $default-border;
-  color: $muted-text-color;
+  color: var(--color-text_muted);
   display: flex;
   flex: 0 0 auto;
   font-size: $small-font-size;
@@ -3289,7 +3289,7 @@ body.tox-dialog__disable-scroll {
 .tox .tox-statusbar a,
 .tox .tox-statusbar__path-item,
 .tox .tox-statusbar__wordcount {
-  color: $text-color;
+  color: var(--color-text);
   text-decoration: none;
 }
 
@@ -3318,7 +3318,7 @@ body.tox-dialog__disable-scroll {
 
 .tox .tox-statusbar__resize-handle svg {
   display: block;
-  fill: $icon-color;
+  fill: var(--color-icon);
 }
 
 .tox .tox-statusbar__resize-handle:focus svg {
@@ -3365,7 +3365,7 @@ body.tox-dialog__disable-scroll {
   border: 0;
   border-radius: $default-border-radius;
   box-shadow: none;
-  color: $icon-color;
+  color: var(--color-icon);
   display: flex;
   flex: 0 0 auto;
   font-size: $base-font-size;
@@ -3373,7 +3373,7 @@ body.tox-dialog__disable-scroll {
   font-weight: 400;
   height: $icon-button-medium-height;
   justify-content: center;
-  margin: $default-margin 1px;
+  margin: var(--spacing-1) 1px;
   outline: 0;
   overflow: hidden;
   padding: 0;
@@ -3383,7 +3383,7 @@ body.tox-dialog__disable-scroll {
 
 .tox .tox-tbtn svg {
   display: block;
-  fill: $icon-color;
+  fill: var(--color-icon);
 }
 
 .tox .tox-tbtn.tox-tbtn-more {
@@ -3487,7 +3487,7 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox .tox-tbtn--labeled {
-  padding: 0 4px;
+  padding: 0 var(--spacing-1);
   width: unset;
 }
 
@@ -3502,14 +3502,14 @@ body.tox-dialog__disable-scroll {
 
 .tox .tox-tbtn--select {
   margin: 2px 0 3px 0;
-  padding: 0 4px;
+  padding: 0 var(--spacing-1);
   width: auto;
 }
 
 .tox .tox-tbtn__select-label {
   cursor: default;
   font-weight: 400;
-  margin: 0 4px;
+  margin: 0 var(--spacing-1);
 }
 
 .tox .tox-tbtn__select-chevron {
@@ -3583,14 +3583,14 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox .tox-toolbar-overlord {
-  background-color: $light-gray;
+  background-color: var(--color-grey_very_light);
 }
 
 .tox .tox-toolbar,
 .tox .tox-toolbar__overflow,
 .tox .tox-toolbar__primary {
   background: url("data:image/svg+xml;charset=utf8,%3Csvg height='34px' viewBox='0 0 40 39px' width='34px' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='33px' width='100' height='1' fill='rgba%28175,%20175,%20175,%200.5%29'/%3E%3C/svg%3E")
-    left 0 top 0 $light-gray;
+    left 0 top 0 var(--color-grey_very_light);
   display: flex;
   flex: 0 0 auto;
   flex-shrink: 0;

data/app/components/alchemy/admin/resource/action.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module Resource
+      # Renders a container for a button, which evaluate CanCanCan and shows a tooltip. This
+      # is an internal component for the resource table, to make easier to read.
+      #
+      # @param [String, Symbol, nil] :name
+      #   name of an action to evaluate if the user can perform these action on the given object
+      # @param [String, nil] :tooltip
+      #   show a tooltip around the button
+      # @param [Lambda] :block
+      #   a block to include a button or a link
+      #
+      class Action < ViewComponent::Base
+        delegate :can?, to: :helpers
+
+        attr_reader :block, :name, :tooltip
+
+        erb_template <<~ERB
+          <% if name.nil? || can?(name, @resource) %>
+            <% if tooltip.present? %>
+              <sl-tooltip content="<%= tooltip %>">
+                 <%= view_context.capture(@resource, &block) %>
+              </sl-tooltip>
+            <% else %>
+              <%= view_context.capture(@resource, &block) %>
+            <% end %>
+          <% end %>
+        ERB
+
+        def initialize(name = nil, tooltip = nil, &block)
+          @name = name
+          @tooltip = tooltip
+          @block = block
+        end
+
+        def with_resource(resource)
+          @resource = resource
+          self
+        end
+      end
+    end
+  end
+end

data/app/components/alchemy/admin/resource/cell.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module Resource
+      # Renders a table cell with the given css classes
+      #
+      # @param [String, nil] :css_classes
+      #   css classes that are show at the table cell
+      # @param [Lambda] :block
+      #   a block to include a button or a link
+      #
+      class Cell < ViewComponent::Base
+        attr_reader :block, :css_classes
+
+        erb_template <<~ERB
+          <td class="<%= css_classes %>">
+            <%= view_context.capture(@resource, &block) %>
+          </td>
+        ERB
+
+        def initialize(css_classes, &block)
+          @css_classes = css_classes
+          @block = block
+        end
+
+        def with_resource(resource)
+          @resource = resource
+          self
+        end
+      end
+    end
+  end
+end