alchemy_cms 8.0.0.a → 8.0.0.b

data/app/stylesheets/alchemy/_themes.scss

@@ -0,0 +1,540 @@
+@use "custom-properties";
+
+@mixin dark-theme {
+  --body-background-color: var(--a-dark-grey);
+
+  /* Borders */
+  --border-color: var(--a-darker-grey);
+  --border-inset-color: var(--a-grey);
+
+  /* Buttons */
+  --button-bg-color: var(--color-blue_dark);
+  --button-border-color: var(--color-blue_medium);
+  --button-box-shadow: 0 1px 1px -1px hsl(0deg, 0%, 10%);
+  --button-focus-border-color: var(--color-orange_dark);
+  --button-focus-box-shadow: 0 1px 1px 0 var(--button-focus-border-color);
+  --button-hover-bg-color: var(--color-blue_medium);
+  --button-hover-border-color: var(--color-blue_medium);
+  --button-text-color: var(--color-white);
+  --button-text-shadow: none;
+  --button-disabled-bg-color: var(--a-dark-grey);
+  --button-disabled-border-color: var(--a-grey);
+  --button-secondary-bg-color: var(--a-darker-grey);
+  --button-secondary-border-color: var(--a-grey);
+  --button-secondary-hover-bg-color: var(--a-dark-grey);
+  --button-secondary-hover-border-color: var(--a-grey);
+  --button-secondary-text-color: var(--color-white);
+
+  --code-background-color: var(--a-darkest-grey);
+  --code-border-color: var(--a-grey);
+
+  /* Datepicker */
+  --datepicker-bg-color: var(--a-dark-grey);
+  --datepicker-border-color: var(--a-grey);
+  --datepicker-box-shadow: var(--select-dropdown-box-shadow);
+  --datepicker-text-color: var(--text-color);
+  --datepicker-weekday-text-color: var(--a-lighter-grey);
+  --datepicker-text-hover-color: var(--color-orange_medium);
+  --datepicker-day-hover-bg: var(--a-grey);
+  --datepicker-today-border-color: var(--a-light-grey);
+  --datepicker-today-hover-bg-color: var(--a-light-grey);
+  --datepicker-today-hover-text-color: var(--color-white);
+  --datepicker-selected-bg-color: var(--color-blue_medium);
+  --datepicker-selected-text-color: var(--color-white);
+
+  /* Dialogs */
+  --dialog-header-color: var(--color-blue_dark);
+  --dialog-header-text-color: var(--color-white);
+  --dialog-box-shadow: 0 var(--spacing-2) var(--spacing-4)
+    hsla(0deg, 0%, 0%, 0.5);
+  --dialog-overlay-color: hsla(0deg, 0%, 10%, 0.8);
+  --dialog-background-color: var(--a-dark-grey);
+
+  /* Elements */
+  --element-editor-background-color: var(--a-dark-grey);
+  --element-editor-border-color: var(--a-darkest-grey);
+  --element-editor-dragged-background-color: var(--color-blue_medium);
+  --element-editor-dragged-border-color: var(--color-orange_dark);
+  --element-editor-hover-box-shadow-color: var(--a-darkest-grey);
+  --element-header-bg-color: transparent;
+  --element-header-active-bg-color: var(--color-blue_medium);
+  --element-header-active-color: var(--color-white);
+  --element-header-deprecated-bg-color: hsla(29deg, 95%, 20%, 0.25);
+  --element-deprecated-border-color: hsl(29deg, 95%, 30%);
+  --element-toolbar-background-color: var(--a-dark-grey);
+  --element-toolbar-border-color: var(--a-darker-grey);
+  --element-dirty-border-color: hsl(55deg, 67%, 45%);
+  --element-dirty-header-color: hsl(55deg, 45%, 15%);
+
+  --elements-window-handle-dragged-background-color: var(--color-orange_dark);
+
+  --droppable-elements-background-color: var(--color-blue_dark);
+
+  --nestable-elements-background-color: var(--a-dark-grey);
+  --nestable-elements-box-shadow-color: var(--a-darkest-grey);
+
+  /* Focus Status */
+  --focus-color: var(--color-orange_dark);
+
+  /* Form Fields */
+  --form-field-addon-background-color: var(--a-darker-grey);
+  --form-field-background-color: var(--a-darkest-grey);
+  --form-field-border-color: var(--border-inset-color);
+  --form-field-box-shadow: inset 0 0 1px var(--a-dark-grey);
+  --form-field-label-color: var(--text-color-muted);
+  --form-field-text-color: var(--text-color);
+  --form-field-disabled-text-color: hsl(0deg, 0%, 53%);
+  --form-field-disabled-bg-color: hsla(0deg, 0%, 20%, 0.5);
+  --form-field-error-bg-color: hsl(0deg, 47%, 10%);
+  --form-field-error-box-shadow: inset 0 0 1px hsla(0deg, 25%, 30%, 0.5);
+
+  /* Header */
+  --header-background: var(--a-darkest-grey);
+
+  /* Hints */
+  --hint-background-color: hsl(55deg, 20%, 25%);
+  --hint-border-color: hsla(55deg, 20%, 50%, 0.5);
+  --hint-text-color: hsl(55deg, 20%, 75%);
+  --hint-text-link-color: hsla(0deg, 0%, 100%, 0.85);
+
+  /* Icon Buttons */
+  --icon-button-linked-color: hsla(42deg, 100%, 40%, 0.75);
+  --icon-button-linked-hover-color: hsla(42deg, 100%, 50%, 0.75);
+  --icon-button-linked-border-color: hsl(42deg, 100%, 50%);
+  --icon-button-linked-hover-border-color: hsl(42deg, 100%, 60%);
+  --icon-button-hover-bg-color: var(--a-darkest-grey);
+
+  /* Icons */
+  --icon-color: var(--a-lighter-grey);
+
+  --image-overlay-box-shadow: -4px 0 4px 0px hsla(0deg, 0%, 0%, 0.5);
+  --image-overlay-hover-bg-color: var(--a-darker-grey);
+
+  --list-filter-background-color: var(--form-field-background-color);
+  --list-filter-focus-background-color: var(--form-field-background-color);
+
+  /* Main Menu */
+  --main-menu-bg-color: var(--color-blue_dark);
+  --main-menu-active-bg-color: var(--color-orange_dark);
+  --main-menu-active-text-color: var(--color-blue_dark);
+  --main-menu-text-color: var(--color-white);
+  --main-menu-icon-color: var(--color-white);
+
+  /* Notices */
+  --notice-success-background-color: hsl(88deg, 47%, 20%);
+  --notice-success-border-color: hsl(127deg, 25%, 30%);
+  --notice-success-text-color: hsl(127deg, 42%, 65%);
+
+  --notice-info-background-color: hsl(215deg, 63%, 20%);
+  --notice-info-border-color: hsl(225deg, 25%, 30%);
+  --notice-info-text-color: hsl(225deg, 55%, 80%);
+
+  --notice-warning-background-color: hsl(55deg, 70%, 15%);
+  --notice-warning-border-color: hsl(55deg, 25%, 30%);
+  --notice-warning-text-color: hsl(55deg, 53%, 80%);
+
+  --notice-error-background-color: hsl(0deg, 45%, 15%);
+  --notice-error-border-color: hsl(0deg, 25%, 30%);
+  --notice-error-text-color: hsl(0, 50%, 75%);
+
+  /* Pagination */
+  --pagination-background-color: var(--a-darker-grey);
+  --pagination-border-color: var(--a-dark-grey);
+  --pagination-active-bg-color: var(--color-blue_dark);
+  --pagination-active-text-color: var(--color-white);
+  --pagination-disabled-text-color: var(--a-light-grey);
+
+  /* Panels */
+  --panel-background-color: var(--a-darker-grey);
+  --panel-border-color: var(--a-grey);
+
+  --picture-thumbnail-background-color: var(--a-dark-grey);
+  --picture-thumbnail-toolbar-bg-color: var(--a-darker-grey);
+  --picture-tool-background-color: var(--a-darker-grey);
+  --picture-tool-hover-background-color: var(--a-darkest-grey);
+
+  --search-field-background-color: var(--a-dark-grey);
+
+  /* Selects */
+  --select-background-color: var(--form-field-background-color);
+  --select-border-color: var(--form-field-border-color);
+  --select-text-color: var(--text-color);
+  --select-hover-bg-color: var(--color-blue_dark);
+  --select-hover-border-color: var(--form-field-border-color);
+  --select-hover-text-color: var(--color-white);
+  --select-background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="hsl(200deg, 5%, 70%)" viewBox="0 0 24 24"><path d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"></path></svg>');
+  --select-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 70%)"><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>');
+  --select-disabled-background-color: var(--a-darker-grey);
+  --select-disabled-border-color: var(--a-grey);
+  --select-disabled-text-color: var(--a-lighter-grey);
+  --select-dropdown-background-color: var(--a-darker-grey);
+  --select-dropdown-box-shadow: 0 var(--spacing-2) var(--spacing-2)
+    hsla(0deg, 0%, 0%, 0.75);
+  --select-dropdown-border-color: var(--a-grey);
+
+  /* Sidebar */
+  --sidebar-background-color: var(--a-darker-grey);
+
+  /* Sitemap */
+  --sitemap-page-background-color: var(--a-darker-grey);
+  --sitemap-page-hover-color: var(--a-grey);
+  --sitemap-info-background-color: var(--a-darker-grey);
+  --sitemap-highlight-color: var(--a-grey);
+
+  /* Tables */
+  --table-border-color: var(--border-color);
+  --table-row-even-background-color: var(--a-darker-grey);
+  --table-row-odd-background-color: var(--a-darkest-grey);
+  --table-row-hover-color: var(--a-grey);
+
+  /* Tags */
+  --tag-background-color: var(--a-grey);
+  --tag-hover-background-color: var(--a-dark-grey);
+  --tag-active-background-color: var(--color-orange_dark);
+  --tag-active-text-color: var(--a-grey);
+  --tag-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 70%)"><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>');
+  --tag-active-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 22.5%)"><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>');
+
+  /* Text */
+  --text-color: var(--a-lightest-grey);
+  --text-color-muted: var(--a-lighter-grey);
+  --text-link-color: var(--color-orange_medium);
+  --text-shadow-light: 0 0 var(--spacing-1) hsla(0deg, 0%, 20%, 0.5);
+
+  /* Thumbnails */
+  --thumbnail-background:
+    linear-gradient(45deg, var(--a-grey) 25%, transparent 25%) 0.5em 0.5em/1em
+      1em,
+    linear-gradient(-45deg, var(--a-grey) 25%, transparent 25%) -0.5em 0/1em 1em,
+    linear-gradient(45deg, transparent 75%, var(--a-grey) 75%) 0 0/1em 1em,
+    linear-gradient(-45deg, transparent 75%, var(--a-grey) 75%) 0 0.5em/1em 1em
+      var(--a-dark-grey);
+
+  /* Toolbar */
+  --toolbar-bg-color: var(--a-darker-grey);
+  --toolbar-border-bottom: 1px solid var(--a-darkest-grey);
+
+  /* Tooltips */
+  --tooltip-background-color: var(--color-blue_dark);
+  --tooltip-box-shadow: 0 0 var(--spacing-1) hsla(0deg, 0%, 0%, 0.5);
+
+  /* Shoelace */
+  --tabs_indicator-color: var(--color-orange_dark);
+  --tabs_track-color: var(--border-color);
+  --sl-input-label-color: var(--text-color);
+
+  /* File Upload */
+  --file-upload-failed-text-color: var(--notice-error-text-color);
+  --file-upload-text-color: var(--text-color);
+  --file-upload_background-color: var(--a-grey);
+  --file-upload_single-upload-background-color: var(--a-dark-grey);
+  --file-upload_progress-track-color: var(--a-darker-grey);
+  --file-upload_progress-indicator-color: var(--color-blue_medium);
+  --file-upload_progress-indicator-color-canceled: var(--a-grey);
+  --file-upload_progress-indicator-color-failed: var(
+    --notice-error-border-color
+  );
+  --file-upload_progress-indicator-color-invalid: var(
+    --notice-warning-border-color
+  );
+  --file-upload_progress-indicator-color-successful: var(
+    --notice-success-border-color
+  );
+  --file-upload_progress-indicator-color-upload-finished: var(
+    --color-blue_medium
+  );
+
+  /*
+  * Shoelace Theme Tokens
+  */
+
+  /* Primary */
+  --sl-color-primary-50: var(--color-orange_medium);
+  --sl-color-primary-100: var(--color-orange_medium);
+  --sl-color-primary-200: var(--color-orange_medium);
+  --sl-color-primary-300: var(--color-orange_dark);
+  --sl-color-primary-400: var(--color-orange_dark);
+  --sl-color-primary-500: var(--color-orange_dark);
+  --sl-color-primary-600: var(--color-orange_dark);
+  --sl-color-primary-700: var(--color-orange_very_dark);
+  --sl-color-primary-800: var(--color-orange_very_dark);
+  --sl-color-primary-900: var(--color-orange_very_dark);
+  --sl-color-primary-950: var(--color-orange_very_dark);
+
+  /* Neutral */
+  --sl-color-neutral-50: var(--a-grey);
+  --sl-color-neutral-100: var(--a-grey);
+  --sl-color-neutral-200: var(--a-light-grey);
+  --sl-color-neutral-300: var(--a-light-grey);
+  --sl-color-neutral-400: var(--a-light-grey);
+  --sl-color-neutral-500: var(--a-lighter-grey);
+  --sl-color-neutral-600: var(--a-lighter-grey);
+  --sl-color-neutral-700: var(--a-lighter-grey);
+  --sl-color-neutral-800: var(--a-lightest-grey);
+  --sl-color-neutral-900: var(--a-lightest-grey);
+  --sl-color-neutral-950: var(--a-lightest-grey);
+
+  .select2-container.select2-container-multi
+    .select2-search-choice-close:before,
+  .select2-container.select2-allowclear .select2-search-choice-close:before {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 70%)"><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>');
+  }
+}
+
+@mixin light-theme {
+  --body-background-color: var(--color-grey_very_light);
+
+  /* Borders */
+  --border-color: hsla(0deg, 0%, 69%, 0.5);
+  --border-inset-color: hsla(0deg, 0%, 79%, 0.5);
+
+  /* Buttons */
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--border-color);
+  --button-box-shadow: 0 1px 1px -1px hsl(0deg, 0%, 20%);
+  --button-focus-border-color: var(--color-orange_dark);
+  --button-focus-box-shadow: 0 1px 1px 0 var(--button-focus-border-color);
+  --button-hover-bg-color: var(--color-grey_very_light);
+  --button-hover-border-color: hsla(0deg, 0%, 59%, 0.5);
+  --button-text-color: var(--text-color);
+  --button-text-shadow: none;
+  --button-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5);
+  --button-disabled-border-color: var(--button-border-color);
+  --button-secondary-bg-color: var(--color-grey_light);
+  --button-secondary-border-color: var(--border-color);
+  --button-secondary-hover-bg-color: var(--color-white);
+  --button-secondary-hover-border-color: var(--color-grey_medium);
+  --button-secondary-text-color: var(--text-color);
+
+  --code-background-color: var(--color-grey_light);
+  --code-border-color: var(--border-color);
+
+  /* Datepicker */
+  --datepicker-bg-color: var(--color-white);
+  --datepicker-border-color: var(--border-color);
+  --datepicker-box-shadow: var(--select-dropdown-box-shadow);
+  --datepicker-text-color: var(--text-color);
+  --datepicker-weekday-text-color: rgba(0, 0, 0, 0.54);
+  --datepicker-text-hover-color: var(--color-orange_dark);
+  --datepicker-day-hover-bg: var(--color-grey_light);
+  --datepicker-today-border-color: var(--color-grey_dark);
+  --datepicker-today-hover-bg-color: var(--color-grey_dark);
+  --datepicker-today-hover-text-color: var(--color-white);
+  --datepicker-selected-bg-color: var(--color-blue_medium);
+  --datepicker-selected-text-color: var(--color-white);
+
+  /* Dialogs */
+  --dialog-header-color: var(--color-blue_dark);
+  --dialog-header-text-color: var(--color-white);
+  --dialog-box-shadow: 0 var(--spacing-2) var(--spacing-4)
+    hsla(0deg, 0%, 14%, 0.5);
+  --dialog-overlay-color: hsla(0deg, 0%, 39%, 0.4);
+  --dialog-background-color: var(--color-grey_very_light);
+
+  /* Elements */
+  --element-editor-background-color: var(--color-grey_very_light);
+  --element-header-bg-color: transparent;
+  --element-header-active-bg-color: var(--color-blue_dark);
+  --element-header-active-color: var(--color-white);
+  --element-header-deprecated-bg-color: hsla(29deg, 95%, 84%, 0.25);
+  --element-deprecated-border-color: hsl(29deg, 95%, 84%);
+  --element-toolbar-background-color: var(--color-grey_very_light);
+  --element-toolbar-border-color: var(--color-grey_light);
+  --element-dirty-border-color: hsl(56deg, 67%, 52%);
+  --element-dirty-header-color: hsl(56deg, 100%, 93%);
+
+  /* Focus Status */
+  --focus-color: hsla(28deg, 77%, 68%, 0.75);
+
+  /* Form Fields */
+  --form-field-addon-background-color: var(--color-grey_light);
+  --form-field-background-color: var(--color-white);
+  --form-field-border-color: var(--border-color) var(--border-color)
+    var(--border-inset-color) var(--border-inset-color);
+  --form-field-box-shadow: inset 0 0 1px var(--color-grey_light);
+  --form-field-label-color: var(--text-color);
+  --form-field-text-color: var(--text-color);
+  --form-field-disabled-text-color: hsl(0deg, 0%, 53%);
+  --form-field-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5);
+  --form-field-error-bg-color: hsl(0deg, 47%, 96%);
+  --form-field-error-box-shadow: inset 0 0 1px hsla(0deg, 25%, 69%, 0.5);
+
+  /* Header */
+  --header-background: hsl(0deg, 0%, 85%);
+
+  /* Hints */
+  --hint-background-color: var(--color-yellow_light);
+  --hint-border-color: var(--color-grey_light);
+  --hint-text-color: hsl(49deg, 18%, 30%);
+  --hint-text-link-color: var(--color-grey_very_dark);
+
+  /* Icon Buttons */
+  --icon-button-linked-color: hsla(42deg, 100%, 74%, 0.75);
+  --icon-button-linked-hover-color: hsla(42deg, 100%, 64%, 0.75);
+  --icon-button-linked-border-color: hsl(42deg, 100%, 64%);
+  --icon-button-linked-hover-border-color: hsl(42deg, 100%, 54%);
+  --icon-button-hover-bg-color: hsla(0deg, 0%, 69%, 0.5);
+
+  /* Icons */
+  --icon-color: hsla(224deg, 23%, 26%, 0.75);
+
+  --image-overlay-box-shadow: -4px 0 4px 0px var(--text-color);
+  --image-overlay-hover-bg-color: var(--color-grey_light);
+
+  --list-filter-background-color: hsla(0deg, 0%, 100%, 0.25);
+  --list-filter-focus-background-color: var(--color-white);
+
+  /* Main Menu */
+  --main-menu-bg-color: var(--color-blue_dark);
+  --main-menu-active-bg-color: var(--color-orange_dark);
+  --main-menu-active-text-color: var(--color-blue_dark);
+  --main-menu-text-color: var(--color-white);
+  --main-menu-icon-color: var(--color-white);
+
+  /* Notices */
+  --notice-success-background-color: hsl(88deg, 47%, 88%);
+  --notice-success-border-color: hsl(127deg, 25%, 69%);
+  --notice-success-text-color: hsl(128deg, 32%, 26%);
+
+  --notice-info-background-color: hsl(215deg, 63%, 87%);
+  --notice-info-border-color: hsl(222deg, 25%, 61%);
+  --notice-info-text-color: hsl(225deg, 53%, 29%);
+
+  --notice-warning-background-color: hsl(56deg, 68%, 85%);
+  --notice-warning-border-color: hsl(55deg, 25%, 69%);
+  --notice-warning-text-color: hsl(56deg, 53%, 29%);
+
+  --notice-error-background-color: hsl(0deg, 47%, 88%);
+  --notice-error-border-color: hsl(0deg, 25%, 69%);
+  --notice-error-text-color: hsl(0deg, 51%, 42%);
+
+  /* Pagination */
+  --pagination-background-color: var(--color-grey_very_light);
+  --pagination-border-color: var(--border-color);
+  --pagination-active-bg-color: var(--color-blue_dark);
+  --pagination-active-text-color: var(--color-white);
+  --pagination-disabled-text-color: #c0c0c0;
+
+  /* Panels */
+  --panel-background-color: var(--color-grey_light);
+  --panel-border-color: var(--border-color);
+
+  --picture-tool-background-color: var(--color-white);
+  --picture-tool-hover-background-color: var(--color-grey_very_light);
+
+  --search-field-background-color: var(--color-grey_very_light);
+
+  /* Selects */
+  --select-background-color: var(--form-field-background-color);
+  --select-border-color: var(--border-inset-color);
+  --select-text-color: var(--form-field-text-color);
+  --select-hover-bg-color: var(--color-blue_dark);
+  --select-hover-border-color: var(--border-color);
+  --select-hover-text-color: var(--color-white);
+  --select-background-image: 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>');
+  --select-close-icon: 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>');
+  --select-disabled-background-color: var(--color-grey_very_light);
+  --select-disabled-border-color: var(--border-inset-color);
+  --select-dropdown-background-color: var(--color-white);
+  --select-dropdown-box-shadow: 0 var(--spacing-2) var(--spacing-2)
+    hsla(0deg, 0%, 0%, 0.15);
+  --select-dropdown-border-color: var(--color-grey_very_light);
+
+  /* Sidebar */
+  --sidebar-background-color: var(--color-grey_very_light);
+
+  /* Sitemap */
+  --sitemap-page-background-color: hsla(0deg, 0%, 100%, 0.75);
+  --sitemap-page-hover-color: hsla(60deg, 81%, 92%, 0.5);
+  --sitemap-info-background-color: hsla(0deg, 0%, 100%, 0.5);
+  --sitemap-highlight-color: hsla(57deg, 100%, 82%, 0.5);
+
+  /* Tables */
+  --table-border-color: var(--color-grey_light);
+  --table-row-even-background-color: var(--color-white);
+  --table-row-odd-background-color: hsla(0deg, 0%, 100%, 0.5);
+  --table-row-hover-color: hsla(60deg, 81%, 92%, 0.5);
+
+  /* Tags */
+  --tag-background-color: var(--color-grey_light);
+  --tag-background-image: 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>');
+  --tag-hover-background-color: var(--color-grey_medium);
+  --tag-active-background-color: var(--color-blue_medium);
+  --tag-active-text-color: var(--color-grey_very_light);
+  --tag-active-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.95)"><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>');
+
+  /* Text */
+  --text-color: hsla(224deg, 23%, 26%, 0.8);
+  --text-color-muted: hsla(224deg, 23%, 26%, 0.5);
+  --text-link-color: var(--color-orange_very_dark);
+  --text-shadow-light: 0 0 var(--spacing-1) hsla(0deg, 0%, 100%, 0.5);
+
+  /* Thumbnails */
+  --thumbnail-background:
+    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-grey_medium);
+
+  /* Toolbar */
+  --toolbar-bg-color: var(--color-grey_light);
+  --toolbar-border-bottom: var(--border-default);
+
+  /* Tooltips */
+  --tooltip-background-color: var(--color-blue_dark);
+  --tooltip-box-shadow: 0 0 var(--spacing-1) var(--color-grey_light);
+
+  /* Shoelace */
+  --tabs_indicator-color: var(--color-orange_dark);
+  --tabs_track-color: var(--color-grey_light);
+  --sl-input-label-color: var(--text-color);
+
+  /* File Upload */
+  --file-upload-failed-text-color: var(--color-red_medium);
+  --file-upload-text-color: var(--text-color);
+  --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
+  --file-upload_single-upload-background-color: var(--color-grey_light);
+  --file-upload_progress-track-color: var(--color-blue_very_light);
+  --file-upload_progress-indicator-color: var(--color-blue_dark);
+  --file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);
+  --file-upload_progress-indicator-color-failed: var(--color-red_medium);
+  --file-upload_progress-indicator-color-invalid: var(--color-red_medium);
+  --file-upload_progress-indicator-color-successful: var(--color-green_medium);
+  --file-upload_progress-indicator-color-upload-finished: var(
+    --color-blue_dark
+  );
+
+  /*
+  * Shoelace 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);
+
+  /* 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);
+}

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

@@ -1,8 +1,16 @@
 @use "../extends";
 @use "../mixins";
 
+alchemy-uploader {
+  display: inline-block;
+}
+
 .resources-header {
   padding: 0 var(--spacing-2);
+
+  h2 {
+    margin: var(--spacing-3) 0;
+  }
 }
 
 .resources-table-wrapper {
@@ -30,11 +38,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 1px 1px var(--border-color);
+  background-color: var(--picture-thumbnail-background-color, transparent);
+
+  &:not(:has(alchemy-icon)) {
+    box-shadow: 0 0 1px 1px var(--border-color);
+  }
 
   &:hover {
     text-decoration: none;
   }
+
+  alchemy-icon {
+    display: flex;
+    width: var(--picture-width);
+    height: var(--picture-height);
+  }
 }
 
 .picture_thumbnail {
@@ -154,20 +172,22 @@ div.assign_image_list_image {
 
 .picture_tool {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
   align-items: center;
   justify-content: center;
   position: absolute;
-  background-color: white;
+  background-color: var(--picture-tool-background-color);
   top: var(--spacing-1);
-  padding: var(--spacing-0);
+  padding: var(--spacing-1);
   z-index: 10;
   border-radius: var(--border-radius_medium);
   box-shadow: 0 0 1px var(--color-grey_dark);
 
   &:hover {
     text-decoration: none;
+    background-color: var(--picture-tool-hover-background-color);
+    transition: background-color var(--transition-duration);
   }
 
   &.visible {
@@ -243,7 +263,7 @@ div#library_sidebar {
     calc(var(--pagination-height) + var(--spacing-2)) var(--spacing-4);
   height: 100%;
   z-index: 3;
-  background-color: var(--color-grey_very_light);
+  background-color: var(--sidebar-background-color);
 
   h2 {
     margin-top: var(--spacing-4);
@@ -260,7 +280,7 @@ div#library_sidebar {
 
 .alchemy-dialog-body {
   #library_sidebar {
-    padding: 0 var(--spacing-4);
+    padding: 0 var(--spacing-4) var(--pagination-height);
   }
 }
 
@@ -299,7 +319,7 @@ div#library_sidebar {
     word-break: break-all;
 
     &:hover {
-      background-color: var(--color-yellow_light);
+      background-color: var(--table-row-hover-color);
     }
   }
 

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

@@ -1,40 +1,17 @@
 .attachment_preview_container {
-  background-color: var(--color-grey_light);
-  margin-top: var(--spacing-3);
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 100%;
+  background-color: var(--panel-background-color);
+  margin-top: va r(--spacing-1);
 
+  img,
   audio,
   video {
     display: block;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
   }
-
-  &.image-preview {
-    height: 300px;
-    text-align: center;
-    padding: var(--spacing-2);
-    white-space: nowrap;
-
-    &:before {
-      content: "";
-      display: inline-block;
-      height: 100%;
-      vertical-align: middle;
-      margin-right: -0.25em;
-    }
-
-    img.full_width {
-      display: inline-block;
-      width: auto;
-      height: auto;
-      max-width: 100%;
-      max-height: 100%;
-      vertical-align: middle;
-    }
-  }
-}
-
-.full-iframe {
-  width: 100%;
-  background-color: white;
-  min-height: 435px;
-  margin-top: var(--spacing-3);
 }