alchemy_cms 7.4.5 → 8.0.0.a

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

@@ -1,15 +1,18 @@
+@use "base";
+@use "../mixins";
+
 .resource_info {
   .value {
     position: relative;
-    @include clearfix;
+    @include mixins.clearfix;
 
     > label {
-      @include form-label;
+      @include mixins.form-label;
     }
 
     > p {
-      @include form-value-display;
-      @include truncate($form-right-width);
+      @include mixins.form-value-display;
+      @include mixins.truncate(var(--form-right-column-width));
     }
 
     &.with-icon {
@@ -27,7 +30,7 @@
     position: absolute;
     right: 0;
     top: var(--spacing-1);
-    height: $form-field-height;
+    height: var(--form-field-height);
     background-color: var(--color-grey_light);
     padding: 0 var(--spacing-2);
     transition: background-color 0.3s;

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

@@ -1,3 +1,6 @@
+@use "../mixins";
+@use "../variables" as vars;
+
 .search_field {
   position: relative;
   margin-bottom: var(--spacing-1);
@@ -58,8 +61,8 @@
     border: none;
     background-color: hsla(0deg, 0%, 100%, 0.75);
     transition:
-      width $transition-duration ease-in-out,
-      background-color $transition-duration linear;
+      width var(--transition-duration) ease-in-out,
+      background-color var(--transition-duration) linear;
     border-radius: 0;
     padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
     margin: 0;
@@ -67,16 +70,16 @@
     box-shadow: none;
     -webkit-appearance: none;
 
-    @media screen and (min-width: $medium-screen-break-point) {
+    @media screen and (min-width: vars.$medium-screen-break-point) {
       width: 150px;
     }
 
     &:focus {
       width: 250px;
-      background-color: $form-field-background-color;
+      background-color: var(--form-field-background-color);
 
-      @include default-focus-style(
-        $box-shadow: inset 0 0 0 2px $focus-color,
+      @include mixins.default-focus-style(
+        $box-shadow: inset 0 0 0 2px var(--focus-color),
         $border-radius: 0
       );
     }

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

@@ -1,19 +1,27 @@
-@import "alchemy_admin/select2";
+@use "sass:color";
+@use "alchemy_admin/select2";
+@use "../extends";
+@use "../mixins";
+
+:root {
+  --select-medium-width: 90px;
+  --select-large-width: 120px;
+}
 
 select {
-  @include button-defaults(
-    $background-color: $form-field-background-color,
-    $hover-color: $form-field-background-color,
-    $hover-border-color: darken($default-border-color, 10%),
+  @include mixins.button-defaults(
+    $background-color: var(--form-field-background-color),
+    $hover-color: var(--form-field-background-color),
+    $hover-border-color: var(--button-hover-border-color),
     $padding: var(--spacing-1) 26px var(--spacing-1) var(--spacing-2),
-    $border: 1px solid $default-border-color,
+    $border: 1px solid var(--button-border-color),
     $box-shadow: none,
-    $color: $form-field-text-color,
+    $color: var(--form-field-text-color),
     $margin: 0
   );
 
   & {
-    height: $form-field-height;
+    height: var(--form-field-height);
     max-width: 100%;
     width: auto;
     font-weight: normal;
@@ -32,11 +40,11 @@ select {
   }
 
   &.medium {
-    width: $medium-select-box-width;
+    width: var(--select-medium-width);
   }
 
   &.large {
-    width: $large-select-box-width;
+    width: var(--select-large-width);
   }
 }
 
@@ -44,15 +52,15 @@ select {
   &.alchemy_selectbox {
     .select2-choice {
       width: 100%;
-      height: $form-field-height;
-      @include button-defaults(
-        $background-color: $form-field-background-color,
-        $hover-color: $form-field-background-color,
-        $hover-border-color: darken($default-border-color, 10%),
-        $padding: $form-field-padding,
-        $border: 1px solid $default-border-color,
+      height: var(--form-field-height);
+      @include mixins.button-defaults(
+        $background-color: var(--form-field-background-color),
+        $hover-color: var(--form-field-background-color),
+        $hover-border-color: var(--button-hover-border-color),
+        $padding: var(--form-field-padding),
+        $border: 1px solid var(--button-border-color),
         $box-shadow: none,
-        $color: $form-field-text-color,
+        $color: var(--form-field-text-color),
         $margin: 0
       );
 
@@ -80,7 +88,7 @@ select {
           align-items: center;
           justify-content: center;
           background-image: none;
-          color: var(--color-icon);
+          color: var(--icon-color);
 
           &:before {
             display: inline-block;
@@ -102,17 +110,19 @@ select {
     }
 
     &.medium {
-      width: $medium-select-box-width;
+      width: var(--select-medium-width);
     }
 
     &.large {
-      width: $large-select-box-width;
+      width: var(--select-large-width);
     }
 
     &.select2-container-active {
       .select2-choice,
       .select2-choices {
-        @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
+        @include mixins.default-focus-style(
+          $box-shadow: 0 0 0 1px var(--focus-color)
+        );
       }
     }
 
@@ -122,14 +132,14 @@ select {
         background-image: none;
         background-color: var(--color-grey_very_light);
         box-shadow: none;
-        border-color: $border-inset-color;
+        border-color: var(border-inset-color);
         cursor: not-allowed;
 
         .select2-arrow {
-          border-color: $border-inset-color;
+          border-color: var(border-inset-color);
 
           b {
-            color: $border-inset-color;
+            color: var(border-inset-color);
           }
         }
       }
@@ -155,7 +165,7 @@ select {
       }
 
       &:hover {
-        color: var(--color-icon);
+        color: var(--icon-color);
       }
     }
   }
@@ -165,7 +175,9 @@ select {
 
     &.select2-container-active {
       .select2-choices {
-        @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
+        @include mixins.default-focus-style(
+          $box-shadow: 0 0 0 1px var(--focus-color)
+        );
       }
     }
 
@@ -181,14 +193,14 @@ select {
         background-image: none;
         border: 0 none;
         box-shadow: none;
-        color: var(--color-text);
+        color: var(--text-color);
       }
 
       .select2-search-field {
         height: 29px;
 
         input {
-          color: $form-field-text-color;
+          color: var(--form-field-text-color);
           padding: 3px 6px;
           margin: 0;
         }
@@ -207,7 +219,7 @@ select {
   }
 
   &.select2-with-searchbox .select2-results > .select2-result:first-child {
-    @include border-top-radius(0);
+    @include mixins.border-top-radius(0);
   }
 
   .select2-results {
@@ -215,11 +227,11 @@ select {
     margin: 0;
 
     > .select2-result:first-child {
-      @include border-top-radius($default-border-radius);
+      @include mixins.border-top-radius(var(--border-radius_medium));
     }
 
-    &:last-child {
-      @include border-bottom-radius($default-border-radius);
+    > .select2-result:last-child {
+      @include mixins.border-bottom-radius(var(--border-radius_medium));
     }
 
     .select2-result {
@@ -227,8 +239,8 @@ select {
       padding: var(--spacing-1) 0;
 
       &.select2-highlighted {
-        background: $select-hover-bg-color;
-        color: $select-hover-text-color;
+        background: var(--select-hover-bg-color);
+        color: var(--select-hover-text-color);
       }
 
       &.select2-result-with-children {
@@ -252,8 +264,8 @@ select {
   }
 
   &.select2-drop-active {
-    border-radius: $default-border-radius;
-    border: $default-border;
+    border-radius: var(--border-radius_medium);
+    border: var(--border-default);
   }
 
   .select2-more-results,

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

@@ -1,8 +1,4 @@
-:root,
-:host,
 .alchemy-light {
-  color-scheme: light;
-
   /*
    * Theme Tokens
    */
@@ -352,7 +348,7 @@ sl-dialog {
   }
 
   &::part(header) {
-    --header-spacing: var(--spacing-3);
+    --header-spacing: 9.5px var(--spacing-3);
     background-color: var(--color-blue_dark);
     border-top-left-radius: var(--border-radius_medium);
     border-top-right-radius: var(--border-radius_medium);
@@ -363,8 +359,11 @@ sl-dialog {
   }
 
   &::part(title) {
-    --sl-font-size-large: var(--font-size_small);
+    --sl-font-size-large: var(--font-size_medium);
     color: var(--color-white);
+    font-weight: var(--font-weight_bold);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   &::part(close-button) {

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

@@ -1,18 +1,23 @@
+@use "base";
+@use "../mixins";
+@use "../variables" as vars;
+
 :root {
+  --sitemap-line-height: 32px;
   --sitemap-url-width: 420px;
   --sitemap-url-header-offset: 0;
   --sitemap-status-width-base: 90px;
   --sitemap-status-length: 2;
 
-  @media screen and (min-width: $large-screen-break-point) {
+  @media screen and (min-width: vars.$large-screen-break-point) {
     --sitemap-url-width: 520px;
   }
 
-  @media screen and (min-width: $xlarge-screen-break-point) {
+  @media screen and (min-width: vars.$xlarge-screen-break-point) {
     --sitemap-url-width: 620px;
   }
 
-  @media screen and (min-width: $xxlarge-screen-break-point) {
+  @media screen and (min-width: vars.$xxlarge-screen-break-point) {
     --sitemap-url-width: 820px;
   }
 }
@@ -32,7 +37,7 @@
     padding-left: var(--spacing-1);
     width: calc(var(--sitemap-url-width) - 60px);
 
-    @media screen and (min-width: $large-screen-break-point) {
+    @media screen and (min-width: vars.$large-screen-break-point) {
       display: block;
     }
   }
@@ -43,11 +48,11 @@
     margin-right: 190px;
     margin-left: auto;
 
-    @media screen and (min-width: $medium-screen-break-point) {
+    @media screen and (min-width: vars.$medium-screen-break-point) {
       display: block;
     }
 
-    @media screen and (min-width: $large-screen-break-point) {
+    @media screen and (min-width: vars.$large-screen-break-point) {
       margin-left: initial;
     }
   }
@@ -71,10 +76,10 @@
 
   .page_folder {
     position: absolute;
-    left: -$sitemap-line-height;
+    left: calc(-1 * var(--spacing-8));
     top: 0;
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
+    width: var(--sitemap-line-height);
+    height: var(--sitemap-line-height);
   }
 
   .placeholder {
@@ -92,7 +97,7 @@
     padding-left: 0;
 
     li {
-      padding-left: $sitemap-line-height;
+      padding-left: var(--sitemap-line-height);
       padding-right: 0;
     }
   }
@@ -101,16 +106,16 @@
 .sitemap_page {
   display: flex;
   align-items: center;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   margin: var(--spacing-3) 0;
   position: relative;
-  transition: background-color $transition-duration;
+  transition: background-color var(--transition-duration);
   --sitemap-status-width: calc(
     var(--sitemap-status-width-base) * var(--sitemap-status-length)
   );
 
   &.highlight {
-    background-color: $sitemap-highlight-color;
+    background-color: var(--sitemap-highlight-color);
   }
 
   &.no-match .sitemap_pagename_link {
@@ -118,8 +123,8 @@
   }
 
   &:hover {
-    background-color: $sitemap-page-hover-color;
-    border-radius: $default-border-radius;
+    background-color: var(--sitemap-page-hover-color);
+    border-radius: var(--border-radius_medium);
   }
 
   &:has(.page_infos :nth-child(3)) {
@@ -134,18 +139,18 @@
   align-items: center;
   flex-shrink: 0;
   width: 32px;
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
 }
 
 .sitemap_sitename {
   flex-grow: 1;
-  @include border-left-radius($default-border-radius);
-  line-height: $sitemap-line-height - 4;
+  @include mixins.border-left-radius(var(--border-radius_medium));
+  line-height: calc(var(--sitemap-line-height) - 4px);
   overflow: hidden;
-  background-color: $sitemap-page-background-color;
+  background-color: var(--sitemap-page-background-color);
 
   &.without-status {
-    @include border-right-radius($default-border-radius);
+    @include mixins.border-right-radius(var(--border-radius_medium));
   }
 
   .sitemap_pagename_link {
@@ -164,30 +169,30 @@
 
 .sitemap_url {
   display: none;
-  background-color: $sitemap-info-background-color;
-  line-height: $sitemap-line-height - 2px;
+  background-color: var(--sitemap-info-background-color);
+  line-height: calc(var(--sitemap-line-height) - 2px);
   font-size: var(--font-size_small);
   padding: 0 var(--spacing-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border: 1px solid $sitemap-page-background-color;
+  border: 1px solid var(--sitemap-page-background-color);
   width: calc(var(--sitemap-url-width) - var(--sitemap-status-width));
 
-  @media screen and (min-width: $large-screen-break-point) {
+  @media screen and (min-width: vars.$large-screen-break-point) {
     display: block;
   }
 }
 
 .page_infos {
   @extend .right-rounded-border;
-  background-color: $sitemap-page-background-color;
+  background-color: var(--sitemap-page-background-color);
   border-left: 1px solid var(--color-grey_very_light);
   display: none;
   justify-content: end;
   width: var(--sitemap-status-width);
-  height: $sitemap-line-height;
-  line-height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
+  line-height: var(--sitemap-line-height);
 
   .page_status {
     margin: 0 var(--spacing-1);
@@ -195,7 +200,7 @@
     white-space: nowrap;
   }
 
-  @media screen and (min-width: $medium-screen-break-point) {
+  @media screen and (min-width: vars.$medium-screen-break-point) {
     display: flex;
   }
 }
@@ -204,17 +209,17 @@
   display: none;
   align-items: center;
   gap: var(--spacing-1);
-  height: $sitemap-line-height;
+  height: var(--sitemap-line-height);
   padding: 0 var(--spacing-2);
 
-  @media screen and (min-width: $small-screen-break-point) {
+  @media screen and (min-width: vars.$small-screen-break-point) {
     display: flex;
   }
 
   .sitemap_tool {
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
-    line-height: $sitemap-line-height;
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    line-height: var(--sitemap-line-height);
     text-align: center;
     margin: 0;
 

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

@@ -1,3 +1,5 @@
+@use "base";
+
 table {
   border-style: none;
   border-spacing: 0 var(--spacing-1);
@@ -38,7 +40,7 @@ table {
   vertical-align: top;
   line-height: 22px;
   border-right: 1px solid var(--color-grey_light);
-  transition: background-color $transition-duration;
+  transition: background-color var(--transition-duration);
 
   &:last-child {
     border-right: 0 none;
@@ -74,12 +76,12 @@ th,
 
 tr.even td,
 .table .row.even .col {
-  background-color: $table-row-even-background-color;
+  background-color: var(--table-row-even-background-color);
 }
 
 tr.odd td,
 .table .row.odd .col {
-  background-color: $table-row-odd-background-color;
+  background-color: var(--table-row-odd-background-color);
 }
 
 .list tr .tools,
@@ -112,7 +114,7 @@ td.heading {
 
 .list tr:hover td,
 .table .row:hover .col {
-  background-color: $table-row-hover-color;
+  background-color: var(--table-row-hover-color);
 }
 
 td,

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

@@ -1,10 +1,12 @@
+@use "../mixins";
+
 .tag-list {
   display: flex;
   flex-direction: column;
   height: 100%;
 
   .alchemy-dialog-body & {
-    max-height: 316px;
+    max-height: 292px;
   }
 
   alchemy-list-filter {
@@ -35,7 +37,7 @@
       }
 
       a {
-        @include tag-base;
+        @include mixins.tag-base;
 
         & {
           display: flex;
@@ -64,7 +66,7 @@
 .tag {
   pointer-events: none;
   font-size: var(--font-size_small);
-  @include tag-base(
+  @include mixins.tag-base(
     $margin: var(--spacing-0) 0,
     $padding: var(--spacing-1) var(--spacing-2) var(--spacing-1)
   );
@@ -117,7 +119,7 @@
       padding: var(--spacing-1);
       margin: 0 0 var(--spacing-1) 0;
       position: relative;
-      border-radius: $default-border-radius;
+      border-radius: var(--border-radius_medium);
 
       &.odd {
         background-color: #eaf3f9;

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

@@ -1,11 +1,18 @@
+@use "../extends";
+@use "../variables" as vars;
+
+:root {
+  --toolbar-height: 46px;
+  --toolbar-padding: var(--spacing-2) var(--spacing-1);
+  --toolbar-border-bottom: var(--border-default);
+}
+
 #toolbar {
-  display: flex;
+  @extend %gradiated-toolbar;
   align-items: center;
   gap: var(--spacing-2);
   z-index: 10;
-  @extend %gradiated-toolbar;
   margin-right: 0px;
-  border-bottom: $default-border;
   position: relative;
 
   .toolbar_button {
@@ -31,7 +38,7 @@
   overflow-y: visible;
   -webkit-overflow-scrolling: touch;
 
-  @media screen and (min-width: $medium-screen-break-point) {
+  @media screen and (min-width: vars.$medium-screen-break-point) {
     overflow: visible;
   }
 
@@ -74,14 +81,13 @@
   height: 29px;
   border-right-style: solid;
   border-right-width: 1px;
-  border-right-color: $default-border-color;
+  border-right-color: var(--border-color);
   margin-right: var(--spacing-1);
   margin-left: var(--spacing-1);
 }
 
 #overlay_toolbar {
   @extend %gradiated-toolbar;
-  border-bottom: $default-border;
 }
 
 .button_group {

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

@@ -55,13 +55,13 @@ p {
   white-space: normal;
 
   a {
-    color: $anchor-color;
+    color: var(--text-link-color);
   }
 }
 
 kbd,
 code {
-  border: $default-border;
+  border: var(--border-default);
   border-radius: var(--border-radius_medium);
   font-family: Courier, monospaced;
   margin: 0 0.25ex;

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

@@ -1,3 +1,5 @@
+@use "../extends";
+
 .upload-button {
   display: inline-block;
 
@@ -56,7 +58,7 @@ alchemy-upload-progress {
   opacity: 0;
   padding: var(--spacing-4);
   position: fixed;
-  transition: $transition-duration ease-in-out;
+  transition: var(--transition-duration) ease-in-out;
   width: 100%;
   z-index: 150;
 
@@ -72,9 +74,9 @@ alchemy-upload-progress {
   }
 
   .value-text {
-    color: var(--font-color_default);
+    color: var(--file-upload-text-color);
     font-size: var(--font-size_large);
-    font-weight: var(--font-weigth_bold);
+    font-weight: var(--font-weight_bold);
     min-width: 100px;
   }
 
@@ -124,14 +126,14 @@ alchemy-upload-progress {
       }
 
       .error-message {
-        color: var(--font-color_failed);
+        color: var(--file-upload-failed-text-color);
       }
 
       button {
         margin-left: auto; // right align button
         &:hover,
         &:active {
-          background-color: $default-border-color;
+          background-color: var(--border-color);
         }
       }