alchemy_cms 7.2.6 → 7.3.0

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

@@ -71,7 +71,7 @@
   &[disabled]:active,
   &.disabled:hover,
   &[disabled]:hover {
-    background-color: transparentize($button-bg-color, 0.5);
+    background-color: hsla(0deg, 0%, 100%, 0.5);
     cursor: not-allowed;
     box-shadow: none;
   }
@@ -84,9 +84,9 @@
 
 @mixin form-label {
   width: $form-left-width;
-  padding-right: 2 * $default-padding;
+  padding-right: var(--spacing-2);
   padding-top: 0.6em;
-  margin-top: $default-margin;
+  margin-top: var(--spacing-1);
   vertical-align: top;
   word-break: normal;
   float: left;
@@ -98,7 +98,7 @@
   float: right;
   width: $form-right-width;
   margin: $form-field-margin;
-  padding: $default-padding 2 * $default-padding;
+  padding: var(--spacing-1) var(--spacing-2);
   line-height: 21px;
   min-height: $form-field-height;
   background: white;
@@ -106,12 +106,12 @@
 }
 
 @mixin form-hint(
-  $background-color: $light_yellow,
-  $border-color: $medium-gray
+  $background-color: var(--color-yellow_light),
+  $border-color: var(--color-grey_light)
 ) {
   font-size: $small-font-size;
   line-height: 1.5em;
-  padding: $default-padding;
+  padding: var(--spacing-1);
   background-color: $background-color;
   border: 1px solid $border-color;
   display: block;
@@ -138,7 +138,7 @@
 }
 
 @mixin drop-shadow {
-  $shadow: 0px 0px 4px $dark-gray;
+  $shadow: 0px 0px 4px var(--color-grey_dark);
   -webkit-box-shadow: $shadow;
   -moz-box-shadow: $shadow;
   -ms-box-shadow: $shadow;
@@ -147,36 +147,34 @@
 }
 
 @mixin label-base(
-  $margin: 2 * $default-margin 0,
-  $padding: $default-padding 3 * $default-padding
+  $margin: var(--spacing-2) 0,
+  $padding: var(--spacing-1) var(--spacing-3)
 ) {
   display: inline-flex;
   align-items: center;
-  gap: $default-padding;
+  gap: var(--spacing-1);
   vertical-align: middle;
   padding: $padding;
   margin: $margin;
-  background-color: $medium-gray;
+  background-color: var(--color-grey_light);
   overflow: hidden;
   position: relative;
   border-radius: $default-border-radius;
-  color: $text-color;
+  color: var(--color-text);
 }
 
-@mixin tag-base(
-  $margin: 2 * $default-margin 0,
-  $padding: $default-padding 3 * $default-padding
-) {
+@mixin tag-base($margin: var(--spacing-2) 0, $padding: var(--spacing-2)) {
   @include label-base($margin: $margin, $padding: $padding);
+  line-height: 1.3;
 
   &:before {
     display: inline-flex;
+    align-self: start;
     flex-shrink: 0;
-    content: "";
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>')
-      no-repeat center;
-    width: 1rem;
-    height: 1rem;
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
+    width: 12px;
+    height: 12px;
+    margin-top: var(--spacing-0);
   }
 
   &:focus {
@@ -204,7 +202,6 @@
 
 @mixin zoom-in {
   cursor: pointer;
-  cursor: image-url("alchemy/lupe.cur");
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
   cursor: zoom-in;

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

@@ -1,25 +1,26 @@
-$light-blue: #cddce5;
-$very-light-blue: lighten($light-blue, 12%);
-$blue: #2d5a8d;
-$dark-blue: darken($blue, 10%);
-$light-gray: #f7f7f7;
-$medium-gray: #efefef;
-$dark-gray: #666666;
-$very-dark-gray: #333;
-$dark-gray-blue: rgb(51, 59, 81);
-$light_yellow: #fbfbd8;
-$orange: #ffd77a;
-$dark-orange: #eca96e;
-$very-dark-orange: darken($dark-orange, 20%);
-$white: #fff;
-
-$text-color: rgba($dark-gray-blue, 0.8) !default;
-$muted-text-color: rgba($dark-gray-blue, 0.5) !default;
-$icon-color: rgba($dark-gray-blue, 0.75) !default;
-$linked-color: $orange !default;
-$anchor-color: $very-dark-orange !default;
-
-$body-background-color: $light-gray !default;
+@import "alchemy/deprecated_variables";
+
+$light-blue: hsl(203deg, 32%, 85%);
+$very-light-blue: hsl(203deg, 32%, 97%);
+$blue: hsl(212deg, 52%, 36%);
+$dark-blue: hsl(212deg, 52%, 26%);
+$light-gray: hsl(0deg, 0%, 97%);
+$medium-gray: hsl(0deg, 0%, 94%);
+$dark-gray: hsl(0deg, 0%, 40%);
+$very-dark-gray: hsl(0deg, 0%, 20%);
+$light_yellow: hsl(60deg, 81%, 92%);
+$orange: hsl(42deg, 100%, 74%);
+$dark-orange: hsl(28deg, 77%, 68%);
+$very-dark-orange: hsl(28deg, 77%, 48%);
+$white: hsl(0deg, 0%, 100%);
+
+$text-color: hsla(224deg, 23%, 26%, 0.8) !default;
+$muted-text-color: hsla(224deg, 23%, 26%, 0.5) !default;
+$icon-color: hsla(224deg, 23%, 26%, 0.75) !default;
+$linked-color: var(--color-orange_medium) !default;
+$anchor-color: var(--color-orange_very_dark) !default;
+
+$body-background-color: var(--color-grey_very_light) !default;
 
 $default-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
   "Lucida Sans", Verdana, Tahoma, sans-serif !default;
@@ -35,16 +36,16 @@ $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-color: var(--color-blue_dark) !default;
+$dialog-header-text-color: var(--color-white) !default;
 $dialog-header-font-size: $default-font-size !default;
-$dialog-box-shadow: 0 8px 16px rgba(35, 35, 35, 0.5) !default;
-$dialog-overlay-color: rgb(100, 100, 100) !default;
+$dialog-box-shadow: 0 8px 16px hsla(0deg, 0%, 14%, 0.5) !default;
+$dialog-overlay-color: hsl(0deg, 0%, 39%) !default;
 $dialog-overlay-opacity: 0.4 !default;
-$dialog-background-color: $light-gray !default;
+$dialog-background-color: var(--color-grey_very_light) !default;
 
-$default-border-color: rgba(#afafaf, 0.5) !default;
-$border-inset-color: lighten($default-border-color, 10%) !default;
+$default-border-color: hsla(0deg, 0%, 69%, 0.5) !default;
+$border-inset-color: hsla(0deg, 0%, 79%, 0.5) !default;
 $default-border-width: 1px !default;
 $default-border-style: solid !default;
 $default-border: $default-border-width $default-border-style
@@ -54,32 +55,32 @@ $default-border-radius: 3px !default;
 $form-field-margin: $default-margin 0 !default;
 $form-field-height: 31px !default;
 $form-field-addon-width: 30px !default;
-$form-field-background-color: $white !default;
+$form-field-background-color: var(--color-white) !default;
 $form-field-border-width: $default-border-width !default;
 $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-box-shadow: inset 0px 0 1px var(--color-grey_light) !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;
-$form-field-disabled-text-color: #888 !default;
-$form-field-disabled-bg-color: rgba($white, 0.5) !default;
+$form-field-text-color: var(--color-text) !default;
+$form-field-disabled-text-color: hsl(0deg, 0%, 53%) !default;
+$form-field-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5) !default;
 
-$focus-color: rgba($dark-orange, 0.75) !default;
+$focus-color: hsla(28deg, 77%, 68%, 0.75) !default;
 
-$button-bg-color: $white !default;
+$button-bg-color: var(--color-white) !default;
 $button-hover-bg-color: transparent !default;
 $button-border-color: $default-border-color !default;
 $button-border-width: 1px !default;
 $button-border-radius: $default-border-radius !default;
-$button-text-color: $text-color !default;
+$button-text-color: var(--color-text) !default;
 $button-hover-border-color: $default-border-color !default;
-$button-focus-border-color: $dark-orange !default;
+$button-focus-border-color: var(--color-orange_dark) !default;
 $button-font-weight: 700 !default;
 $button-text-shadow: none !default;
-$button-box-shadow: 0px 1px 1px -1px #333 !default;
+$button-box-shadow: 0px 1px 1px -1px hsl(0deg, 0%, 20%) !default;
 $button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
 $button-padding: $default-padding 5 * $default-padding !default;
 $small-button-padding: 0.4em 0.8em !default;
@@ -93,102 +94,105 @@ $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-text-color: var(--color-text) !default;
 $secondary-button-border-color: $default-border-color !default;
 
-$linked-button-color: rgba($linked-color, 0.75) !default;
-$linked-border-color: darken($linked-color, 10%) !default;
+$linked-button-color: hsla(42deg, 100%, 74%, 0.75) !default;
+$linked-border-color: hsl(42deg, 100%, 64%) !default;
 
-$success_border_color: #9cc4a1 !default;
-$success_text_color: #2e5934 !default;
-$success_background_color: #e2efd3 !default;
+$success_border_color: hsl(127deg, 25%, 69%) !default;
+$success_text_color: hsl(128deg, 32%, 26%) !default;
+$success_background_color: hsl(88deg, 47%, 88%) !default;
 
-$info_border_color: #8392b5 !default;
-$info_text_color: #233772 !default;
-$info_background_color: #cadbf3 !default;
+$info_border_color: hsl(222deg, 25%, 61%) !default;
+$info_text_color: hsl(225deg, 53%, 29%) !default;
+$info_background_color: hsl(215deg, 63%, 87%) !default;
 
-$warning_border_color: #c4c19c !default;
-$warning_text_color: #726d23 !default;
-$warning_background_color: #f3f0c1 !default;
+$warning_border_color: hsl(55deg, 25%, 69%) !default;
+$warning_text_color: hsl(56deg, 53%, 29%) !default;
+$warning_background_color: hsl(56deg, 68%, 85%) !default;
 
-$error_border_color: #c49c9c !default;
-$error_text_color: #a23434 !default;
-$error_background_color: #efd3d3 !default;
+$error_border_color: hsl(0deg, 25%, 69%) !default;
+$error_text_color: hsl(0deg, 51%, 42%) !default;
+$error_background_color: hsl(0deg, 47%, 88%) !default;
 
-$hint-background-color: $light_yellow !default;
-$hint-text-color: #59543e !default;
+$hint-background-color: var(--color-yellow_light) !default;
+$hint-text-color: hsl(49deg, 18%, 30%) !default;
 
 $form-left-width: 35% !default;
 $form-right-width: 65% !default;
 
 $sitemap-line-height: 32px !default;
-$sitemap-page-background-color: rgba($white, 0.75) !default;
-$sitemap-page-hover-color: rgba($light_yellow, 0.5) !default;
-$sitemap-info-background-color: rgba($white, 0.5) !default;
-$sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
+$sitemap-page-background-color: hsla(0deg, 0%, 100%, 0.75) !default;
+$sitemap-page-hover-color: hsla(60deg, 81%, 92%, 0.5) !default;
+$sitemap-info-background-color: hsla(0deg, 0%, 100%, 0.5) !default;
+$sitemap-highlight-color: hsla(57deg, 100%, 82%, 0.5) !default;
 
 $main-menu-width: 150px !default;
 $collapsed-main-menu-width: 48px !default;
 $collapsed-main-menu-entry-max-width: 300px !default;
-$main-menu-bg-color: $dark-blue !default;
-$main-menu-active-bg-color: $dark-orange !default;
-$main-menu-active-text-color: $dark-blue !default;
-$main-menu-text-color: $white !default;
-$main-menu-icon-color: $white !default;
+$main-menu-bg-color: var(--color-blue_dark) !default;
+$main-menu-active-bg-color: var(--color-orange_dark) !default;
+$main-menu-active-text-color: var(--color-blue_dark) !default;
+$main-menu-text-color: var(--color-white) !default;
+$main-menu-icon-color: var(--color-white) !default;
 $main-menu-entry-max-width: 110px !default;
-$toolbar-bg-color: $medium-gray !default;
+$toolbar-bg-color: var(--color-grey_light) !default;
 $toolbar-height: 46px !default;
 $tab-bar-height: 51px !default;
 $element-toolbar-height: 37px !default;
 $header-height: 29px !default;
-$header-background: #d8d8d8 !default;
-$text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
+$header-background: hsl(0deg, 0%, 85%) !default;
+$text-shadow-light: hsla(0deg, 0%, 100%, 0.5) 0 0 4px !default;
 $transition-duration: 250ms !default;
 $transition-easing: linear !default;
 
-$tooltip-background-color: $dark-blue !default;
+$tooltip-background-color: var(--color-blue_dark) !default;
 
 $addon-icon-opacity: 0.85 !default;
 
-$table-row-even-background-color: $white !default;
-$table-row-odd-background-color: rgba($white, 0.5) !default;
-$table-row-hover-color: rgba($light_yellow, 0.5) !default;
+$table-row-even-background-color: var(--color-white) !default;
+$table-row-odd-background-color: hsla(0deg, 0%, 100%, 0.5) !default;
+$table-row-hover-color: hsla(60deg, 81%, 92%, 0.5) !default;
 
 $elements-window-width: 22.5vw !default;
 $elements-window-min-width: 400px !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;
-$element-deprecated-border-color: rgb(253, 213, 175) !default;
+$element-header-active-bg-color: var(--color-blue_dark) !default;
+$element-header-active-color: var(--color-white) !default;
+$element-header-deprecated-bg-color: hsla(29deg, 95%, 84%, 0.25) !default;
+$element-deprecated-border-color: hsl(29deg, 95%, 84%) !default;
 $top-menu-height: 75px !default;
 
 $tabs-height: 31px !default;
 $pagination-height: 52px !default;
 
-$datepicker_current_bg: $blue !default;
-$datepicker_current_color: $white !default;
+$datepicker_current_bg: var(--color-blue_medium) !default;
+$datepicker_current_color: var(--color-white) !default;
 $datepicker_current_box_shadow: none !default;
-$datepicker_hover_bg: $light_yellow !default;
-$datepicker_hover_color: $text-color !default;
-$datepicker_today_bg: $medium-gray !default;
-$datepicker_today_color: $blue !default;
-$datepicker_header_color: $text-color !default;
-$datepicker_day_bg: $light-gray !default;
-$datepicker_day_border: 1px solid $medium-gray !default;
-$datepicker_day_color: $text-color !default;
-
-$select-hover-bg-color: $dark-blue !default;
-$select-hover-text-color: $white !default;
+$datepicker_hover_bg: var(--color-yellow_light) !default;
+$datepicker_hover_color: var(--color-text) !default;
+$datepicker_today_bg: var(--color-grey_light) !default;
+$datepicker_today_color: var(--color-blue_medium) !default;
+$datepicker_header_color: var(--color-text) !default;
+$datepicker_day_bg: var(--color-grey_very_light) !default;
+$datepicker_day_border: 1px solid var(--color-grey_light) !default;
+$datepicker_day_color: var(--color-text) !default;
+
+$select-hover-bg-color: var(--color-blue_dark) !default;
+$select-hover-text-color: var(--color-white) !default;
 $medium-select-box-width: 90px;
 $large-select-box-width: 120px;
 
 $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;
+  linear-gradient(45deg, var(--color-grey_light) 25%, transparent 25%) 0.5em
+    0.5em/1em 1em,
+  linear-gradient(-45deg, var(--color-grey_light) 25%, transparent 25%) -0.5em 0/1em
+    1em,
+  linear-gradient(45deg, transparent 75%, var(--color-grey_light) 75%) 0 0/1em
+    1em,
+  linear-gradient(-45deg, transparent 75%, var(--color-grey_light) 75%) 0 0.5em/1em
+    1em var(--color-white) !default;
 
 $small-screen-break-point: 500px;
 $medium-screen-break-point: 700px;

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

@@ -1,5 +1,5 @@
 .resources-header {
-  padding: 0 2 * $default-padding;
+  padding: 0 var(--spacing-2);
 }
 
 .applied-filter {
@@ -26,10 +26,10 @@
 }
 
 .selected_item_tools {
-  margin: -2 * $default-padding;
+  margin: calc(-1 * var(--spacing-2));
   border-bottom: 1px solid $default-border-color;
-  margin-bottom: 4 * $default-padding;
-  padding: 4 * $default-padding;
+  margin-bottom: var(--spacing-4);
+  padding: var(--spacing-4);
 
   .button {
     vertical-align: middle;
@@ -57,7 +57,7 @@
   height: var(--picture-thumbnail-height);
   position: relative;
   border-radius: var(--picture-thumbnail-border-radius);
-  padding: 2 * $default-padding;
+  padding: var(--spacing-2);
   padding-bottom: 2.5em;
   transition: all $transition-duration;
 
@@ -89,7 +89,7 @@
     bottom: 0;
     left: 0;
     line-height: 2.5;
-    padding: 0 $default-padding;
+    padding: 0 var(--spacing-1);
     text-overflow: ellipsis;
   }
 
@@ -124,7 +124,7 @@
   );
 
   display: grid;
-  gap: 2 * $default-margin;
+  gap: var(--spacing-2);
   grid-auto-rows: min-content;
   grid-template-columns: repeat(
     auto-fill,
@@ -171,11 +171,11 @@ div.assign_image_list_image {
   justify-content: center;
   position: absolute;
   background-color: white;
-  top: $default-padding;
-  padding: $default-padding / 2;
+  top: var(--spacing-1);
+  padding: var(--spacing-0);
   z-index: 10;
   border-radius: $default-border-radius;
-  box-shadow: 0 0 1px $dark-gray;
+  box-shadow: 0 0 1px var(--color-grey_dark);
 
   &:hover {
     text-decoration: none;
@@ -192,7 +192,7 @@ div.assign_image_list_image {
   }
 
   &.select {
-    left: $default-padding;
+    left: var(--spacing-1);
 
     input {
       margin: 0;
@@ -202,7 +202,7 @@ div.assign_image_list_image {
 
   &.delete {
     cursor: pointer;
-    right: $default-padding;
+    right: var(--spacing-1);
   }
 
   a {
@@ -226,7 +226,7 @@ div.assign_image_list_image {
   left: 0;
   width: 100%;
   max-height: 80%;
-  padding: $default-padding;
+  padding: var(--spacing-1);
   pointer-events: none;
 
   .tag {
@@ -250,14 +250,14 @@ div#library_sidebar {
   right: 0;
   width: 232px;
 
-  padding: $top-menu-height + 2 * $default-padding 4 * $default-padding
-    $pagination-height + 2 * $default-padding 4 * $default-padding;
+  padding: calc(#{$top-menu-height} + var(--spacing-2)) var(--spacing-4)
+    calc(#{$pagination-height} + var(--spacing-2)) var(--spacing-4);
   height: 100%;
   z-index: 3;
-  background-color: $light-gray;
+  background-color: var(--color-grey_very_light);
 
   h2 {
-    margin-top: 4 * $default-margin;
+    margin-top: var(--spacing-4);
   }
 
   h3 {
@@ -277,7 +277,7 @@ div#filter_bar {
 
 .alchemy-dialog-body {
   #library_sidebar {
-    padding: 0 4 * $default-padding;
+    padding: 0 var(--spacing-4);
   }
 }
 
@@ -308,17 +308,17 @@ div#filter_bar {
 #overlay_file_list {
   .assign_file_file {
     display: block;
-    margin-bottom: 4px;
+    margin-bottom: var(--spacing-1);
     word-break: break-all;
 
     &:hover {
-      background-color: $light_yellow;
+      background-color: var(--color-yellow_light);
     }
   }
 
   > ul {
     margin: 0;
-    padding: 4px 0;
+    padding: var(--spacing-1) 0;
 
     a {
       @extend %text-overflow;
@@ -326,11 +326,11 @@ div#filter_bar {
       justify-content: space-between;
       line-height: 25px;
       text-decoration: none;
-      padding: $default-padding 2 * $default-padding;
+      padding: var(--spacing-1) var(--spacing-2);
     }
 
     alchemy-icon {
-      margin-right: 2 * $default-margin;
+      margin-right: var(--spacing-2);
       vertical-align: bottom;
     }
   }

data/app/assets/stylesheets/alchemy/{attachment-select.scss → admin/attachment-select.scss}

@@ -4,10 +4,10 @@
   height: 21px;
 
   .icon {
-    margin: 0 $default-margin 0 0;
+    margin: 0 var(--spacing-1) 0 0;
 
     .select2-highlighted & {
-      fill: $white;
+      fill: var(--color-white);
     }
   }
 }

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

@@ -1,6 +1,6 @@
 .attachment_preview_container {
-  background-color: $medium-gray;
-  margin-top: 12px;
+  background-color: var(--color-grey_light);
+  margin-top: var(--spacing-3);
 
   audio,
   video {
@@ -10,7 +10,7 @@
   &.image-preview {
     height: 300px;
     text-align: center;
-    padding: 2 * $default-padding;
+    padding: var(--spacing-2);
     white-space: nowrap;
 
     &:before {
@@ -36,5 +36,5 @@
   width: 100%;
   background-color: white;
   min-height: 435px;
-  margin-top: 12px;
+  margin-top: var(--spacing-3);
 }

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

@@ -5,7 +5,7 @@ html {
 
   &.turbo-progress-bar::before,
   .turbo-progress-bar {
-    background-color: $blue !important;
+    background-color: var(--color-blue_medium) !important;
     z-index: 400001;
   }
 }
@@ -30,14 +30,14 @@ noscript {
 
   h1,
   p {
-    margin: 16px 0;
+    margin: var(--spacing-4) 0;
   }
 }
 
 body {
   margin: 0;
   padding: 0;
-  color: $text-color;
+  color: var(--color-text);
   font: $default-font-style;
   background-color: $body-background-color;
   height: 100%;
@@ -87,9 +87,9 @@ hr {
   width: 80%;
   max-width: 500px;
   margin: 2em auto;
-  padding: 4 * $default-padding;
-  background: $medium-gray;
-  border-radius: $default-border-radius;
+  padding: var(--spacing-4);
+  background: var(--color-grey_light);
+  border-radius: var(--border-radius_medium);
 }
 
 .float_right {
@@ -121,7 +121,7 @@ hr {
 }
 
 .bottom-left-rounded-border {
-  border-bottom-left-radius: $default-border-radius;
+  border-bottom-left-radius: var(--border-radius_medium);
 }
 
 .disable-user-select {
@@ -133,11 +133,11 @@ hr {
 }
 
 .with_padding {
-  padding: 2 * $default-padding;
+  padding: var(--spacing-2);
 }
 
 .with_margin {
-  margin: 2 * $default-margin;
+  margin: var(--spacing-2);
 }
 
 a img {

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

@@ -2,8 +2,8 @@ button,
 input[type="submit"],
 a.button,
 input.button {
-  @include button-defaults;
   position: relative;
+  @include button-defaults;
 
   &.secondary {
     background-color: $secondary-button-bg-color;
@@ -26,7 +26,7 @@ input.button {
 
   &.small {
     padding: $small-button-padding;
-    line-height: 4 * $default-padding;
+    line-height: var(--spacing-4);
     font-size: inherit;
   }
 
@@ -37,7 +37,7 @@ input.button {
 
     .icon {
       font-weight: normal;
-      margin-right: $default-margin;
+      margin-right: var(--spacing-1);
       fill: currentColor;
     }
   }