alchemy_cms 7.4.6 → 8.0.0.a

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

@@ -1,7 +1,9 @@
+@use "../mixins";
+
 html {
   box-sizing: border-box;
   height: 100%;
-  font-size: $base-font-size;
+  font-size: var(--font-size_medium);
 
   &.turbo-progress-bar::before,
   .turbo-progress-bar {
@@ -28,9 +30,9 @@ noscript {
   width: 100%;
   text-align: center;
   line-height: 1em;
-  border-bottom: 1px solid $warning_border_color;
-  color: $warning_text_color;
-  background-color: $warning_background_color;
+  border-bottom: 1px solid var(--notice-warning-border-color);
+  color: var(--notice-warning-text-color);
+  background-color: var(--notice-warning-background-color);
 
   h1,
   p {
@@ -41,13 +43,13 @@ noscript {
 body {
   margin: 0;
   padding: 0;
-  color: var(--color-text);
-  font: $default-font-style;
-  background-color: $body-background-color;
+  color: var(--text-color);
+  font: var(--font-default);
+  background-color: var(--body-background-color);
   height: 100%;
   cursor: default;
   opacity: 1;
-  transition: opacity $transition-duration;
+  transition: opacity var(--transition-duration);
 
   // Fix for strange element window offset
   &.pages.edit {
@@ -62,7 +64,7 @@ body {
 a {
   color: inherit;
   text-decoration: none;
-  transition: $transition-duration;
+  transition: var(--transition-duration);
 
   &:hover {
     text-decoration: underline;
@@ -76,7 +78,7 @@ a {
 
 a:focus,
 [tabindex]:focus {
-  @include default-focus-style;
+  @include mixins.default-focus-style;
 }
 
 form {
@@ -111,19 +113,19 @@ hr {
 }
 
 .top-rounded-border {
-  @include border-top-radius($default-border-radius);
+  @include mixins.border-top-radius(var(--border-radius_medium));
 }
 
 .left-rounded-border {
-  @include border-left-radius($default-border-radius);
+  @include mixins.border-left-radius(var(--border-radius_medium));
 }
 
 .right-rounded-border {
-  @include border-right-radius($default-border-radius);
+  @include mixins.border-right-radius(var(--border-radius_medium));
 }
 
 .bottom-rounded-border {
-  @include border-bottom-radius($default-border-radius);
+  @include mixins.border-bottom-radius(var(--border-radius_medium));
 }
 
 .bottom-left-rounded-border {

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

@@ -0,0 +1,160 @@
+@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,
+input.button {
+  position: relative;
+  @include mixins.button-defaults;
+
+  &.secondary {
+    background-color: var(--button-secondary-bg-color);
+    color: var(--button-secondary-text-color);
+    border-color: var(--button-secondary-border-color);
+
+    &:focus {
+      @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);
+    }
+
+    &:active,
+    &:active:focus {
+      border-color: var(--button-hover-border-color);
+      box-shadow: none;
+    }
+  }
+
+  &.small {
+    padding: var(--button-small-padding);
+    line-height: var(--spacing-4);
+    font-size: var(--font-size_small);
+  }
+
+  &.with_icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-1);
+
+    alchemy-icon {
+      fill: currentColor;
+    }
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+}
+
+.icon_button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-button-width);
+  height: var(--icon-button-height);
+  margin: 0;
+  padding: 0;
+  text-shadow: none;
+  border-radius: var(--border-radius_medium);
+
+  &.small {
+    width: var(--icon-button-small-width);
+    height: var(--icon-button-small-height);
+    background: none;
+    border: none;
+    padding: 0; // button.small has padding
+  }
+
+  &.active,
+  &:active,
+  &:hover:not([disabled]):not(.disabled):not(.linked) {
+    text-decoration: none;
+    background-color: var(--border-color);
+    cursor: pointer;
+  }
+
+  .icon {
+    transition: fill 250ms;
+  }
+
+  &.disabled,
+  &[disabled] {
+    pointer-events: none;
+
+    svg {
+      opacity: 0.3;
+    }
+
+    &:hover {
+      text-decoration: none;
+      cursor: default;
+    }
+  }
+
+  &.linked {
+    @include mixins.button-defaults(
+      $background-color: var(--icon-button-linked-color),
+      $hover-color: var(--icon-button-linked-hover-color),
+      $border: 1px solid var(--icon-button-linked-border-color),
+      $hover-border-color: var(--icon-button-linked-hover-border-color),
+      $box-shadow: none,
+      $padding: 3px,
+      $margin: 0
+    );
+  }
+
+  &:focus:not(.disabled):not([disabled]) {
+    @include mixins.default-focus-style;
+  }
+
+  .spinner {
+    position: static;
+    transform: none;
+  }
+}
+
+button.icon_button {
+  background: transparent;
+  border: 0 none;
+  box-shadow: none;
+  font-weight: normal;
+
+  &:disabled,
+  &.disabled {
+    background: transparent;
+  }
+}
+
+#new_element button.button {
+  float: right;
+}

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

@@ -12,9 +12,9 @@
       align-items: center;
       gap: var(--spacing-2);
       padding: var(--spacing-2);
-      border: $default-border;
+      border: var(--border-default);
       background-color: white;
-      border-radius: $default-border-radius;
+      border-radius: var(--border-radius_medium);
 
       &.elements {
         background-color: var(--color-grey_light);

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

@@ -47,16 +47,13 @@
   }
 }
 
-#update_check {
+alchemy-update-check {
+  display: flex;
   position: relative;
   height: 16px;
   margin-bottom: 2em;
-
-  img#load_info {
-    width: 16px;
-    height: 16px;
-    display: none;
-  }
+  text-align: center;
+  justify-content: center;
 
   > span {
     display: inline-flex;
@@ -70,18 +67,18 @@
     .icon {
       fill: currentColor;
     }
-  }
 
-  #up_to_date {
-    color: $success_text_color;
-  }
+    &.up_to_date {
+      color: var(--notice-success-text-color);
+    }
 
-  #error {
-    color: $error_text_color;
-  }
+    &.error {
+      color: var(--notice-error-text-color);
+    }
 
-  #update_available {
-    color: $warning_text_color;
+    &.update_available {
+      color: var(--notice-warning-text-color);
+    }
   }
 }
 

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

@@ -1,4 +1,11 @@
-$dialog-transition-duration: 150ms;
+@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 {
@@ -14,7 +21,7 @@ $dialog-transition-duration: 150ms;
   opacity: 0;
   transform: scale(0.98);
   transition-property: transform, opacity;
-  transition-duration: $dialog-transition-duration;
+  transition-duration: var(--dialog-transition-duration);
   transition-timing-function: ease-in;
 
   // vertical aligment
@@ -42,7 +49,7 @@ $dialog-transition-duration: 150ms;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0);
-  transition: background-color $dialog-transition-duration linear;
+  transition: background-color var(--dialog-transition-duration) linear;
 
   &.closable {
     cursor: pointer;
@@ -51,7 +58,7 @@ $dialog-transition-duration: 150ms;
 
 .alchemy-dialog-overlay {
   &.open {
-    background-color: rgba($dialog-overlay-color, $dialog-overlay-opacity);
+    background-color: var(--dialog-overlay-color);
   }
 }
 
@@ -67,10 +74,10 @@ $dialog-transition-duration: 150ms;
 .alchemy-dialog {
   white-space: normal;
   margin: var(--spacing-2);
-  @include border-top-radius($default-border-radius);
-  box-shadow: $dialog-box-shadow;
-  background-color: $dialog-background-color;
-  transition: min-height $dialog-transition-duration ease-in-out;
+  @include mixins.border-top-radius(var(--border-radius_medium));
+  box-shadow: var(--dialog-box-shadow);
+  background-color: var(--dialog-background-color);
+  transition: min-height var(--dialog-transition-duration) ease-in-out;
 
   div#jscropper {
     padding: var(--spacing-2);
@@ -127,13 +134,13 @@ $dialog-transition-duration: 150ms;
   align-items: center;
   gap: var(--spacing-1);
   position: relative;
-  height: $dialog-header-height;
-  padding: $dialog-header-padding;
-  background: $dialog-header-color;
-  color: $dialog-header-text-color;
+  height: var(--dialog-header-height);
+  padding: var(--dialog-header-padding);
+  background: var(--dialog-header-color);
+  color: var(--dialog-header-text-color);
   font-weight: normal;
-  font-size: $dialog-header-font-size;
-  @include border-top-radius($default-border-radius);
+  font-size: var(--dialog-header-font-size);
+  @include mixins.border-top-radius(var(--border-radius_medium));
 }
 
 .alchemy-dialog-title {
@@ -143,7 +150,7 @@ $dialog-transition-duration: 150ms;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  @include antialiased-font-smoothing;
+  @include mixins.antialiased-font-smoothing;
 }
 
 .alchemy-image-overlay-close,
@@ -158,7 +165,7 @@ $dialog-transition-duration: 150ms;
 
 .alchemy-dialog-body {
   position: relative;
-  color: var(--color-text);
+  color: var(--text-color);
 
   .message,
   alchemy-message {