alchemy_cms 8.0.0.a → 8.0.0.b

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

@@ -88,6 +88,7 @@ form {
 hr {
   border: 0 none;
   border-bottom: 1px solid;
+  border-color: var(--border-color);
   opacity: 0.5;
 }
 
@@ -96,8 +97,10 @@ hr {
   max-width: 500px;
   margin: 2em auto;
   padding: var(--spacing-4);
-  background: var(--color-grey_light);
+  background: var(--panel-background-color);
   border-radius: var(--border-radius_medium);
+  border: var(--border-default);
+  border-color: var(--panel-border-color);
 }
 
 .float_right {

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

@@ -1,27 +1,6 @@
 @use "sass:color";
 @use "../mixins";
 
-:root {
-  --button-border-radius: var(--border-radius_medium);
-  --button-border-style: var(--border-style);
-  --button-border-width: var(--border-width_small);
-  --button-border: var(--button-border-width) var(--button-border-style)
-    var(--button-border-color);
-  --button-font-size: var(--font-size_medium);
-  --button-font-weight: var(--font-weight_bold);
-  --button-height: 30px;
-  --button-line-height: var(--form-field-line-height);
-  --button-margin: var(--form-field-margin);
-  --button-padding: var(--spacing-1) var(--spacing-5);
-  --button-small-padding: 0.4em 0.8em;
-  --icon-button-height: 30px;
-  --icon-button-width: 30px;
-  --icon-button-medium-height: 26px;
-  --icon-button-medium-width: 26px;
-  --icon-button-small-height: 15px;
-  --icon-button-small-width: 15px;
-}
-
 button,
 input[type="submit"],
 a.button,
@@ -34,20 +13,19 @@ input.button {
     color: var(--button-secondary-text-color);
     border-color: var(--button-secondary-border-color);
 
-    &:focus {
+    &:focus:not([disabled]):not(.disabled) {
       @include mixins.default-focus-style(
         $border-color: var(--button-focus-border-color),
         $box-shadow: var(--button-focus-box-shadow)
       );
     }
 
-    &:hover {
-      background-color: var(--button-hover-bg-color);
-      border-color: var(--button-hover-border-color);
+    &:hover:not([disabled]):not(.disabled) {
+      background-color: var(--button-secondary-hover-bg-color);
+      border-color: var(--button-secondary-hover-border-color);
     }
 
-    &:active,
-    &:active:focus {
+    &:active:not([disabled]):not(.disabled) {
       border-color: var(--button-hover-border-color);
       box-shadow: none;
     }
@@ -69,10 +47,6 @@ input.button {
       fill: currentColor;
     }
   }
-
-  &[disabled] {
-    cursor: not-allowed;
-  }
 }
 
 .icon_button {
@@ -86,6 +60,7 @@ input.button {
   padding: 0;
   text-shadow: none;
   border-radius: var(--border-radius_medium);
+  color: var(--icon-color);
 
   &.small {
     width: var(--icon-button-small-width);
@@ -99,7 +74,7 @@ input.button {
   &:active,
   &:hover:not([disabled]):not(.disabled):not(.linked) {
     text-decoration: none;
-    background-color: var(--border-color);
+    background-color: var(--icon-button-hover-bg-color);
     cursor: pointer;
   }
 

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

@@ -1,12 +1,5 @@
 @use "../mixins";
 
-:root {
-  --dialog-header-height: 36px;
-  --dialog-header-font-size: var(--font-size_medium);
-  --dialog-header-padding: 0 var(--spacing-2);
-  --dialog-transition-duration: 150ms;
-}
-
 .alchemy-image-overlay-container,
 .alchemy-dialog-container {
   position: fixed;
@@ -163,6 +156,23 @@
   }
 }
 
+.alchemy-dialog-close {
+  display: inline-flex;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: var(--border-radius_medium);
+  color: var(--color-white);
+  padding: 0;
+
+  &:hover {
+    background-color: var(--color-blue_medium);
+  }
+}
+
 .alchemy-dialog-body {
   position: relative;
   color: var(--text-color);

data/app/stylesheets/alchemy/admin/element-select.scss

@@ -0,0 +1,11 @@
+.element-select-item {
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: auto;
+    height: var(--spacing-4);
+    fill: currentColor;
+    padding-right: var(--spacing-2);
+  }
+}

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

@@ -3,11 +3,6 @@
 @use "../mixins";
 @use "../variables" as vars;
 
-:root {
-  --elements-window-width: 0px;
-  --elements-window-min-width: 400px;
-}
-
 #alchemy_elements_window {
   --width: var(--elements-window-width, 100vw);
   position: absolute;
@@ -22,7 +17,10 @@
   );
   height: calc(100vh - var(--top-menu-height));
   border-left: var(--border-default);
-  background-color: var(--color-grey_very_light);
+  background-color: var(
+    --elements-window-background-color,
+    var(--dialog-background-color)
+  );
   transition: var(--transition-duration) ease-in-out;
   transform: translate3d(100%, 0, 0);
 
@@ -62,7 +60,10 @@ alchemy-elements-window-handle {
 
   &:hover,
   &.is-dragged {
-    background: var(--color-blue_dark);
+    background: var(
+      --elements-window-handle-dragged-background-color,
+      var(--color-blue_dark)
+    );
     cursor: ew-resize;
   }
 }
@@ -89,6 +90,7 @@ alchemy-elements-window-handle {
 
 alchemy-tinymce {
   display: block;
+  border-radius: var(--border-radius_medium);
 }
 
 #main-content-elements {
@@ -136,12 +138,15 @@ alchemy-tinymce {
 }
 
 .element-handle {
+  position: relative;
   display: inline-flex;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
   cursor: move;
   padding-right: var(--spacing-1);
 }
 
-.element-toggle {
+button.element-toggle {
   width: 20px;
   height: 20px;
   display: flex;
@@ -156,9 +161,8 @@ alchemy-tinymce {
   margin: 0 0 0 auto;
 
   &:hover {
-    &:not(:focus):not(:active) {
+    &:not(:focus) {
       background-color: var(--border-color);
-      border-color: transparent;
       cursor: pointer;
     }
   }
@@ -170,9 +174,12 @@ alchemy-tinymce {
 
 .element-editor {
   position: relative;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--element-editor-border-color, var(--border-color));
   border-radius: var(--border-radius_medium);
-  background-color: var(--color-grey_very_light);
+  background-color: var(
+    --element-editor-background-color,
+    --dialog-background-color
+  );
   margin: var(--spacing-2) 0;
   transition: box-shadow var(--transition-duration);
   scroll-margin: var(--spacing-2);
@@ -232,10 +239,10 @@ alchemy-tinymce {
   }
 
   &.dirty {
-    border-color: #d0c83d;
+    border-color: var(--element-dirty-border-color);
 
     > .element-header {
-      background-color: #fff8df;
+      background-color: var(--element-dirty-header-color);
     }
   }
 
@@ -261,7 +268,8 @@ alchemy-tinymce {
   &.selected:not(.is-fixed),
   &:hover:not(.is-fixed) {
     &:not(.element-hidden) {
-      box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
+      box-shadow: 0 2px 8px
+        var(--element-editor-hover-box-shadow-color, hsla(0, 0%, 60%, 0.75));
     }
   }
 
@@ -288,16 +296,24 @@ alchemy-tinymce {
   &.expanded {
     &.not-fixed {
       .nestable-elements {
-        box-shadow: inset 0 4px 8px -2px hsl(0deg, 0%, 79%);
-        background-color: var(--color-grey_light);
+        box-shadow: inset 0 4px 8px -2px
+          var(--nestable-elements-box-shadow-color, hsl(0deg, 0%, 79%));
+        background-color: var(
+          --nestable-elements-background-color,
+          var(--color-grey_light)
+        );
         padding: var(--spacing-1);
       }
     }
   }
 
   &.dragged {
-    border: 1px solid var(--color-grey_dark);
-    background-color: var(--color-grey_light);
+    border: 1px solid
+      var(--element-editor-dragged-border-color, var(--color-grey_dark));
+    background-color: var(
+      --element-editor-dragged-background-color,
+      var(--color-grey_light)
+    );
     opacity: 0.5;
     box-shadow: none !important;
 
@@ -323,7 +339,6 @@ alchemy-tinymce {
       opacity: 0;
       z-index: 1;
       box-shadow: 0 1px 1px var(--border-color);
-      background-color: var(--color-grey_very_light);
       transition: all var(--transition-duration);
 
       sl-switch::part(label) {
@@ -440,7 +455,7 @@ alchemy-tinymce {
     width: 100%;
     margin: 0 0 var(--spacing-4) 0;
     border: 0 none;
-    border-top: 1px solid var(--color-grey_light);
+    border-top: 1px solid var(--border-color);
     opacity: 1;
   }
 }
@@ -466,6 +481,34 @@ alchemy-tinymce {
     fill: currentColor;
     transition: fill var(--transition-duration);
   }
+
+  > .element-handle {
+    alchemy-icon,
+    .icon {
+      position: absolute;
+      width: var(--spacing-4);
+      height: var(--spacing-4);
+      transition: opacity var(--transition-duration);
+    }
+
+    alchemy-icon {
+      opacity: 0;
+    }
+
+    .icon {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    > .element-handle alchemy-icon {
+      opacity: 1;
+    }
+
+    > .element-handle .icon.element {
+      opacity: 0;
+    }
+  }
 }
 
 .element-hidden-icon {
@@ -479,8 +522,9 @@ alchemy-tinymce {
   padding: var(--spacing-1);
   gap: var(--spacing-1);
   height: 37px;
-  border-top: 1px solid var(--color-grey_light);
-  border-bottom: 1px solid var(--color-grey_light);
+  border-top: 1px solid var(--element-toolbar-border-color);
+  border-bottom: 1px solid var(--element-toolbar-border-color);
+  background-color: var(--element-toolbar-background-color);
 
   .is-fixed & {
     border-top-width: 0;
@@ -506,7 +550,7 @@ alchemy-publish-element-button {
 }
 
 .element-footer {
-  border-top: 1px solid var(--color-grey_light);
+  border-top: 1px solid var(--element-toolbar-border-color);
   padding: var(--spacing-2);
   text-align: right;
 
@@ -519,7 +563,7 @@ alchemy-publish-element-button {
   width: 100%;
   padding: var(--spacing-1) 0;
   position: relative;
-  border-bottom: 1px solid var(--color-grey_light);
+  border-bottom: 1px solid var(--element-toolbar-border-color);
 
   &:last-child {
     border-bottom: none;
@@ -559,8 +603,8 @@ alchemy-publish-element-button {
 
   .icon_button {
     &:not(.linked) {
-      background-color: var(--color-grey_light);
-      border-color: var(--border-color);
+      background-color: var(--form-field-addon-background-color);
+      border-color: var(--form-field-border-color);
       border-width: var(--form-field-border-width);
       border-style: var(--form-field-border-style);
       box-shadow: none;
@@ -619,7 +663,7 @@ alchemy-publish-element-button {
   z-index: 0;
   width: 100%;
   padding: var(--spacing-1);
-  background-color: #fff;
+  background-color: var(--picture-thumbnail-toolbar-bg-color, #fff);
   border-bottom-left-radius: var(--border-radius_medium);
   border-bottom-right-radius: var(--border-radius_medium);
 
@@ -680,7 +724,7 @@ alchemy-publish-element-button {
 
     alchemy-icon {
       --icon-size: 3em;
-      color: var(--color-grey_dark);
+      color: var(--icon-color);
 
       &.error {
         --icon-size: var(--icon-size-md);
@@ -793,8 +837,10 @@ alchemy-publish-element-button {
     gap: var(--spacing-1);
     margin: 6px 0 var(--spacing-1);
     padding: 0 var(--spacing-1) 0 var(--spacing-2);
-    border: var(--border-default);
-    background-color: var(--color-white);
+    border-style: var(--border-style);
+    border-width: var(--border-width_small);
+    border-color: var(--form-field-border-color);
+    background-color: var(--form-field-background-color);
     border-radius: var(--border-radius_medium);
     height: var(--form-field-height);
 
@@ -826,7 +872,6 @@ alchemy-publish-element-button {
   display: flex;
   gap: var(--spacing-1);
   align-items: center;
-  background-color: white;
   border-radius: 0 var(--border-radius_medium) var(--border-radius_medium) 0;
 
   a {
@@ -909,6 +954,18 @@ select.long {
     }
   }
 
+  &.dirty {
+    input,
+    select,
+    textarea,
+    .file,
+    .picture_thumbnail,
+    .select2-container,
+    .tinymce_container {
+      outline: 1px solid var(--element-dirty-border-color);
+    }
+  }
+
   &.display_inline {
     display: inline-block;
     vertical-align: middle;
@@ -959,6 +1016,7 @@ select.long {
     font-size: var(--font-size_small);
     line-height: 15px;
     text-indent: 1px;
+    color: var(--form-field-label-color);
 
     span.warning.icon {
       position: relative;
@@ -1099,7 +1157,10 @@ textarea.has_tinymce {
 
 .droppable-elements {
   min-height: 36px;
-  background-color: var(--color-yellow_light);
+  background-color: var(
+    --droppable-elements-background-color,
+    var(--color-yellow_light)
+  );
 }
 
 label.ingredient-date--label,

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

@@ -1,5 +1,6 @@
-div#filter_bar {
-  padding-top: var(--spacing-3);
+div#filter_bar,
+div#sorting_select {
+  margin-top: var(--spacing-2);
 }
 
 .filter-input {
@@ -8,7 +9,7 @@ div#filter_bar {
   label:not(:has(input[type="checkbox"])) {
     display: block;
     font-weight: bold;
-    font-size: 1.125rem;
+    font-size: var(--font-size_medium);
     margin-bottom: var(--spacing-2);
   }
 
@@ -19,7 +20,7 @@ div#filter_bar {
     cursor: pointer;
   }
 
-  &:has(select) {
+  &:has(select):not(:last-child) {
     margin-bottom: var(--spacing-4);
   }
 }
@@ -32,16 +33,14 @@ div#filter_bar {
 }
 
 .applied-filter {
-  --background-color: var(--color-grey_light);
-  --color: var(--text-color);
   display: inline-flex;
   justify-content: space-between;
   gap: var(--spacing-1);
   padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-2);
   border-radius: var(--border-radius_medium);
   border: 1px solid var(--border-color);
-  background-color: var(--background-color);
-  color: var(--color);
+  background-color: var(--tag-active-background-color);
+  color: var(--tag-active-text-color);
   white-space: nowrap;
   font-weight: normal;
 
@@ -53,6 +52,6 @@ div#filter_bar {
     display: inline-flex;
     justify-content: center;
     width: var(--spacing-4);
-    color: var(--icon-color);
+    color: var(--tag-active-text-color);
   }
 }

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

@@ -1,9 +1,5 @@
-:root {
-  --datepicker-font-size: var(--font-size_medium);
-}
-
 .flatpickr-calendar {
-  background: transparent;
+  background: var(--datepicker-bg-color);
   opacity: 0;
   display: none;
   text-align: center;
@@ -12,7 +8,7 @@
   -webkit-animation: none;
   animation: none;
   direction: ltr;
-  border: 0;
+  border: 1px solid var(--datepicker-border-color);
   font-size: var(--datepicker-font-size);
   line-height: 24px;
   border-radius: 5px;
@@ -22,7 +18,6 @@
   box-sizing: border-box;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
-  background: var(--datepicker-bg-color);
   box-shadow: var(--datepicker-box-shadow);
 }
 .flatpickr-calendar.open,
@@ -122,7 +117,7 @@
   bottom: 100%;
 }
 .flatpickr-calendar.arrowTop:before {
-  border-bottom-color: var(--border-color);
+  border-bottom-color: var(--datepicker-border-color);
 }
 .flatpickr-calendar.arrowTop:after {
   border-bottom-color: var(--datepicker-bg-color);
@@ -132,7 +127,7 @@
   top: 100%;
 }
 .flatpickr-calendar.arrowBottom:before {
-  border-top-color: var(--border-color);
+  border-top-color: var(--datepicker-border-color);
 }
 .flatpickr-calendar.arrowBottom:after {
   border-top-color: var(--datepicker-bg-color);
@@ -277,7 +272,7 @@
 .numInputWrapper span.arrowUp:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-bottom: 4px solid var(--border-color);
+  border-bottom: 4px solid var(--icon-color);
   top: 26%;
 }
 .numInputWrapper span.arrowDown {
@@ -286,7 +281,7 @@
 .numInputWrapper span.arrowDown:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid var(--border-color);
+  border-top: 4px solid var(--icon-color);
   top: 40%;
 }
 .numInputWrapper span svg {
@@ -334,12 +329,6 @@
   width: 7ch\0;
   display: inline-block;
 }
-.flatpickr-current-month .numInputWrapper span.arrowUp:after {
-  border-bottom-color: var(--border-color);
-}
-.flatpickr-current-month .numInputWrapper span.arrowDown:after {
-  border-top-color: var(--border-color);
-}
 .flatpickr-current-month input.cur-year {
   background: transparent;
   -webkit-box-sizing: border-box;
@@ -437,7 +426,7 @@ span.flatpickr-weekday {
   cursor: default;
   font-size: 90%;
   background: transparent;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--datepicker-weekday-text-color);
   line-height: 1;
   margin: 0;
   text-align: center;
@@ -608,7 +597,7 @@ span.flatpickr-weekday {
 .flatpickr-day.notAllowed,
 .flatpickr-day.notAllowed.prevMonthDay,
 .flatpickr-day.notAllowed.nextMonthDay {
-  color: rgba(57, 57, 57, 0.3);
+  color: var(--text-color-muted);
   background: transparent;
   border-color: transparent;
   cursor: default;
@@ -701,12 +690,6 @@ span.flatpickr-weekday {
   height: 40px;
   float: left;
 }
-.flatpickr-time .numInputWrapper span.arrowUp:after {
-  border-bottom-color: #393939;
-}
-.flatpickr-time .numInputWrapper span.arrowDown:after {
-  border-top-color: #393939;
-}
 .flatpickr-time.hasSeconds .numInputWrapper {
   width: 26%;
 }
@@ -718,7 +701,7 @@ span.flatpickr-weekday {
   -webkit-box-shadow: none;
   box-shadow: none;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--border-radius_medium);
   text-align: center;
   margin: 0;
   padding: 0;
@@ -732,6 +715,7 @@ span.flatpickr-weekday {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
+  top: -1px;
 }
 .flatpickr-time input.flatpickr-hour {
   font-weight: bold;
@@ -771,7 +755,8 @@ span.flatpickr-weekday {
 .flatpickr-time .flatpickr-am-pm:hover,
 .flatpickr-time input:focus,
 .flatpickr-time .flatpickr-am-pm:focus {
-  background: var(--color-grey_very_light);
+  background: var(--form-field-background-color);
+  box-shadow: inset 0 0 1px 2px var(--focus-color) !important;
 }
 .flatpickr-input[readonly] {
   cursor: pointer;

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

@@ -1,17 +1,6 @@
 @use "../extends";
 @use "../mixins";
 
-:root {
-  --form-field-margin: var(--spacing-1) 0;
-  --form-field-height: 31px;
-  --form-field-addon-width: 30px;
-  --form-field-border-width: var(--border-width_small);
-  --form-field-border-style: var(--border-style);
-  --form-field-padding: var(--spacing-1) var(--spacing-2);
-  --form-field-font-size: var(--font-size_medium);
-  --form-field-line-height: 1.25;
-}
-
 textarea,
 input[type="url"],
 input[type="number"],
@@ -22,10 +11,6 @@ input[type="search"],
 .thin_border,
 .input_field {
   @extend %default-input-style;
-
-  &.dirty {
-    background-color: #fff8df;
-  }
 }
 
 input[type="checkbox"] {

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

@@ -1,11 +1,6 @@
 @use "../extends";
 @use "../mixins";
 
-:root {
-  --form-left-column-width: 35%;
-  --form-right-column-width: 65%;
-}
-
 form {
   #main_content > &.alchemy {
     max-width: 600px;
@@ -102,7 +97,8 @@ form {
     &.language_locale small.error {
       @include mixins.form-hint(
         $background-color: var(--notice-error-background-color),
-        $border-color: var(--notice-error-border-color)
+        $border-color: var(--notice-error-border-color),
+        $color: var(--notice-error-text-color)
       );
       text-align: left;
     }
@@ -238,8 +234,7 @@ form {
     margin-left: var(--form-left-column-width);
 
     a[href] {
-      color: var(--color-grey_very_dark);
-      text-decoration: underline;
+      color: var(--hint-text-link-color);
     }
   }