alchemy_cms 7.4.10 → 8.0.0.b

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

@@ -1,27 +1,27 @@
-@import "alchemy_admin/select2";
+@use "sass:color";
+@use "alchemy_admin/select2";
+@use "../extends";
+@use "../mixins";
 
 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(--select-background-color),
+    $hover-color: var(--select-background-color),
+    $hover-border-color: var(--select-hover-border-color),
     $padding: var(--spacing-1) 26px var(--spacing-1) var(--spacing-2),
-    $border: 1px solid $default-border-color,
+    $border: 1px solid var(--select-border-color),
     $box-shadow: none,
-    $color: $form-field-text-color,
+    $color: var(--select-text-color),
     $margin: 0
   );
 
   & {
-    height: $form-field-height;
+    height: var(--form-field-height);
     max-width: 100%;
     width: auto;
     font-weight: normal;
     vertical-align: middle;
-    background-image: var(
-      --select-background-image,
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='hsla(224deg, 23%, 26%, 0.75)' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E")
-    );
+    background-image: var(--select-background-image);
     background-position: right 0.75em center;
     background-repeat: no-repeat;
     background-size: 1em;
@@ -32,27 +32,30 @@ 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 {
+  border-radius: var(--border-radius_medium);
+
   &.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,
+
+      @include mixins.button-defaults(
+        $background-color: var(--select-background-color),
+        $height: var(--form-field-height),
+        $hover-color: var(--select-background-color),
+        $hover-border-color: var(--select-hover-border-color),
+        $padding: var(--form-field-padding),
+        $border: 1px solid var(--select-border-color),
         $box-shadow: none,
-        $color: $form-field-text-color,
+        $color: var(--select-text-color),
         $margin: 0
       );
 
@@ -80,15 +83,14 @@ select {
           align-items: center;
           justify-content: center;
           background-image: none;
-          color: var(--color-icon);
+          color: var(--icon-color);
 
           &:before {
             display: inline-block;
             content: "";
             width: 1rem;
             height: 1rem;
-            background: 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="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>')
-              no-repeat;
+            background: var(--select-background-image) no-repeat;
           }
         }
       }
@@ -102,17 +104,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)
+        );
       }
     }
 
@@ -120,16 +124,17 @@ select {
       .select2-choice,
       .select2-choice:hover {
         background-image: none;
-        background-color: var(--color-grey_very_light);
+        background-color: var(--select-disabled-background-color);
         box-shadow: none;
-        border-color: $border-inset-color;
+        border-color: var(--select-disabled-border-color);
         cursor: not-allowed;
+        color: var(--select-disabled-text-color);
 
         .select2-arrow {
-          border-color: $border-inset-color;
+          border-color: var(--select-disabled-border-color);
 
           b {
-            color: $border-inset-color;
+            color: var(--text-color-muted);
           }
         }
       }
@@ -150,12 +155,11 @@ select {
         display: inline-flex;
         width: 12px;
         height: 12px;
-        background: 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="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>')
-          no-repeat;
+        background: var(--select-close-icon) no-repeat;
       }
 
       &:hover {
-        color: var(--color-icon);
+        color: var(--icon-color);
       }
     }
   }
@@ -165,7 +169,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,33 +187,59 @@ select {
         background-image: none;
         border: 0 none;
         box-shadow: none;
-        color: var(--color-text);
+        color: var(--text-color);
+        background-color: var(--tag-background-color);
       }
 
       .select2-search-field {
         height: 29px;
 
         input {
-          color: $form-field-text-color;
+          color: var(--form-field-text-color);
           padding: 3px 6px;
           margin: 0;
+
+          &.select2-active {
+            background: var(--form-field-background-color) !important;
+          }
         }
       }
     }
   }
+
+  .select2-default {
+    color: var(--text-color-muted) !important;
+  }
 }
 
 .select2-drop {
+  background: var(--select-dropdown-background-color);
+  box-shadow: var(--select-dropdown-box-shadow);
+  color: var(--select-dropdown-text-color, var(--text-color));
+  margin-top: 1px;
+
+  &.select2-drop-above {
+    margin-top: -1px;
+
+    &.select2-drop-active {
+      border-top-color: var(--select-dropdown-border-color);
+    }
+  }
+
   .select2-search {
     margin: var(--spacing-1) 0;
 
     .select2-input {
       width: inherit;
+
+      &.select2-active {
+        background: var(--form-field-background-color) !important;
+      }
     }
   }
 
   &.select2-with-searchbox .select2-results > .select2-result:first-child {
-    @include border-top-radius(0);
+    @include mixins.border-top-radius(0);
   }
 
   .select2-results {
@@ -215,11 +247,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 +259,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, var(--color-blue_dark));
+        color: var(--select-hover-text-color, var(--color-white));
       }
 
       &.select2-result-with-children {
@@ -240,10 +272,15 @@ select {
     .select2-searching {
       padding: var(--spacing-2);
       margin: 0;
+      background: var(--select-dropdown-background-color);
     }
 
     .select2-result-label {
       padding: var(--spacing-1) var(--spacing-2);
+
+      em {
+        text-decoration: underline;
+      }
     }
 
     ul.select2-result-sub > li .select2-result-label {
@@ -252,14 +289,16 @@ select {
   }
 
   &.select2-drop-active {
-    border-radius: $default-border-radius;
-    border: $default-border;
+    border-radius: var(--border-radius_medium);
+    border: 1px solid var(--select-dropdown-border-color);
   }
 
   .select2-more-results,
   .select2-ajax-error {
     padding: var(--spacing-2);
     margin-bottom: 0;
+    background: var(--notice-error-background-color);
+    color: var(--notice-error-text-color);
   }
 }
 

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

@@ -1,25 +1,8 @@
-:root,
-:host,
-.alchemy-light {
-  color-scheme: light;
-
+:root {
   /*
    * Theme Tokens
    */
 
-  /* Primary */
-  --sl-color-primary-50: var(--color-blue_very_light);
-  --sl-color-primary-100: var(--color-blue_very_light);
-  --sl-color-primary-200: var(--color-blue_light);
-  --sl-color-primary-300: var(--color-blue_light);
-  --sl-color-primary-400: var(--color-blue_medium);
-  --sl-color-primary-500: var(--color-blue_medium);
-  --sl-color-primary-600: var(--color-blue_dark);
-  --sl-color-primary-700: var(--color-blue_dark);
-  --sl-color-primary-800: var(--color-blue_dark);
-  --sl-color-primary-900: var(--color-blue_dark);
-  --sl-color-primary-950: var(--color-blue_dark);
-
   /* Success */
   --sl-color-success-50: var(--color-green_very_light);
   --sl-color-success-100: var(--color-green_very_light);
@@ -59,19 +42,6 @@
   --sl-color-danger-900: var(--color-red_dark);
   --sl-color-danger-950: var(--color-red_dark);
 
-  /* Neutral */
-  --sl-color-neutral-50: var(--color-grey_very_light);
-  --sl-color-neutral-100: var(--color-grey_very_light);
-  --sl-color-neutral-200: var(--color-grey_light);
-  --sl-color-neutral-300: var(--color-grey_light);
-  --sl-color-neutral-400: var(--color-grey_medium);
-  --sl-color-neutral-500: var(--color-grey_medium);
-  --sl-color-neutral-600: var(--color-grey_dark);
-  --sl-color-neutral-700: var(--color-grey_dark);
-  --sl-color-neutral-800: var(--color-grey_very_dark);
-  --sl-color-neutral-900: var(--color-grey-very_dark);
-  --sl-color-neutral-950: var(--color-grey-very_dark);
-
   /* Neutral one-offs */
   --sl-color-neutral-0: hsl(0, 0%, 100%);
   --sl-color-neutral-1000: hsl(0, 0%, 0%);
@@ -134,8 +104,8 @@
 
   /* Font sizes */
   --sl-font-size-2x-small: 0.625rem; /* 10px */
-  --sl-font-size-x-small: var(--font-size_small); /* 12px */
-  --sl-font-size-small: var(--font-size_medium); /* 14px */
+  --sl-font-size-x-small: var(--font-size_small); /* 10px */
+  --sl-font-size-small: var(--font-size_medium); /* 12px */
   --sl-font-size-medium: var(--font-size_large); /* 16px */
   --sl-font-size-large: 1.25rem; /* 20px */
   --sl-font-size-x-large: 1.5rem; /* 24px */
@@ -145,9 +115,9 @@
 
   /* Font weights */
   --sl-font-weight-light: 300;
-  --sl-font-weight-normal: 400;
-  --sl-font-weight-semibold: 500;
-  --sl-font-weight-bold: 700;
+  --sl-font-weight-normal: var(--font-weight_normal);
+  --sl-font-weight-semibold: var(--font-weight_normal);
+  --sl-font-weight-bold: var(--font-weight_bold);
 
   /* Letter spacings */
   --sl-letter-spacing-denser: -0.03em;
@@ -164,7 +134,7 @@
   --sl-line-height-looser: 2.6;
 
   /* Focus rings */
-  --sl-focus-ring-color: var(--outline-color, --sl-color-primary-600);
+  --sl-focus-ring-color: var(--focus-color);
   --sl-focus-ring-style: solid;
   --sl-focus-ring-width: 2px;
   --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
@@ -185,11 +155,11 @@
   --sl-input-height-medium: 2.5rem; /* 40px */
   --sl-input-height-large: 3.125rem; /* 50px */
 
-  --sl-input-background-color: var(--sl-color-neutral-0);
+  --sl-input-background-color: var(--form-field-background-color);
   --sl-input-background-color-hover: var(--sl-input-background-color);
   --sl-input-background-color-focus: var(--sl-input-background-color);
-  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
-  --sl-input-border-color: var(--sl-color-neutral-300);
+  --sl-input-background-color-disabled: var(--form-field-disabled-bg-color);
+  --sl-input-border-color: var(--form-field-border-color);
   --sl-input-border-color-hover: var(--sl-color-neutral-400);
   --sl-input-border-color-focus: var(--sl-color-primary-500);
   --sl-input-border-color-disabled: var(--sl-color-neutral-300);
@@ -209,10 +179,10 @@
   --sl-input-font-size-large: var(--sl-font-size-large);
   --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
 
-  --sl-input-color: var(--sl-color-neutral-700);
+  --sl-input-color: var(--form-field-text-color);
   --sl-input-color-hover: var(--sl-color-neutral-700);
   --sl-input-color-focus: var(--sl-color-neutral-700);
-  --sl-input-color-disabled: var(--sl-color-neutral-900);
+  --sl-input-color-disabled: var(--form-field-disabled-text-color);
   --sl-input-icon-color: var(--sl-color-neutral-500);
   --sl-input-icon-color-hover: var(--sl-color-neutral-600);
   --sl-input-icon-color-focus: var(--sl-color-neutral-600);
@@ -222,7 +192,7 @@
   --sl-input-spacing-medium: var(--sl-spacing-medium);
   --sl-input-spacing-large: var(--sl-spacing-large);
 
-  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-color: var(--focus-color);
   --sl-input-focus-ring-offset: 0;
 
   --sl-input-filled-background-color: var(--sl-color-neutral-100);
@@ -244,7 +214,7 @@
   --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
   --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
   --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
-  --sl-input-help-text-color: var(--sl-color-neutral-500);
+  --sl-input-help-text-color: var(--hint-text-color);
 
   /* Toggles (checkboxes, radios, switches) */
   --sl-toggle-size-small: 0.875rem; /* 14px */
@@ -255,7 +225,7 @@
    * Overlays
    */
 
-  --sl-overlay-background-color: hsl(0 0% 39.2% / 40%);
+  --sl-overlay-background-color: var(--dialog-overlay-color);
 
   /*
    * Panels
@@ -270,8 +240,8 @@
    */
 
   --sl-tooltip-border-radius: var(--sl-border-radius-medium);
-  --sl-tooltip-background-color: var(--sl-color-primary-800);
-  --sl-tooltip-color: var(--sl-color-neutral-0);
+  --sl-tooltip-background-color: var(--tooltip-background-color);
+  --sl-tooltip-color: hsla(0, 0%, 90%, 0.9);
   --sl-tooltip-font-family: var(--sl-font-sans);
   --sl-tooltip-font-weight: var(--sl-font-weight-normal);
   --sl-tooltip-font-size: var(--sl-font-size-small);
@@ -315,23 +285,18 @@
   }
 }
 
-.alchemy-light {
-  sl-tab-group {
-    --indicator-color: var(--tabs_indicator-color);
-    --track-color: var(--tabs_track-color);
-  }
-
-  sl-tab-panel {
-    --padding: var(--spacing-4);
-  }
+sl-tab-group {
+  --indicator-color: var(--tabs_indicator-color);
+  --track-color: var(--tabs_track-color);
+}
 
-  sl-tooltip {
-    --show-delay: 0.2s;
-  }
+sl-tab-panel {
+  --padding: var(--spacing-4);
 }
 
 sl-tooltip {
   --max-width: 200px;
+  --show-delay: 0.2s;
 
   &::part(body) {
     white-space: normal;
@@ -340,20 +305,21 @@ sl-tooltip {
 
   &::part(base__popup) {
     border-radius: var(--border-radius_medium);
-    box-shadow: 0 0 var(--spacing-1) var(--color-grey_light);
+    box-shadow: var(--tooltip-box-shadow);
   }
 }
 
 sl-dialog {
   &::part(panel) {
-    background-color: var(--color-grey_very_light);
+    background-color: var(--dialog-background-color);
     --body-spacing: var(--spacing-4) var(--spacing-3);
     --footer-spacing: var(--spacing-4) var(--spacing-3);
+    --sl-shadow-x-large: var(--dialog-box-shadow);
   }
 
   &::part(header) {
-    --header-spacing: var(--spacing-3);
-    background-color: var(--color-blue_dark);
+    --header-spacing: 9.5px var(--spacing-3);
+    background-color: var(--dialog-header-color);
     border-top-left-radius: var(--border-radius_medium);
     border-top-right-radius: var(--border-radius_medium);
   }
@@ -363,14 +329,17 @@ sl-dialog {
   }
 
   &::part(title) {
-    --sl-font-size-large: var(--font-size_small);
-    color: var(--color-white);
+    --sl-font-size-large: var(--font-size_medium);
+    color: var(--dialog-header-text-color);
+    font-weight: var(--font-weight_bold);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   &::part(close-button) {
-    --sl-color-primary-600: var(--color-white);
-    --sl-color-primary-700: var(--color-white);
-    color: var(--color-white);
+    --sl-color-primary-600: var(--dialog-header-text-color);
+    --sl-color-primary-700: var(--dialog-header-text-color);
+    color: var(--dialog-header-text-color);
     fill: currentColor;
   }
 }