alchemy_cms 8.0.0.a → 8.0.0.c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (216) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -0
  3. data/app/assets/builds/alchemy/admin/page-select.css +1 -1
  4. data/app/assets/builds/alchemy/admin.css +1 -1
  5. data/app/assets/builds/alchemy/dark-theme.css +1 -0
  6. data/app/assets/builds/alchemy/light-theme.css +1 -0
  7. data/app/assets/builds/alchemy/theme.css +1 -0
  8. data/app/assets/builds/alchemy/welcome.css +1 -1
  9. data/app/assets/builds/tinymce/skins/content/alchemy/content.min.css +1 -1
  10. data/app/assets/builds/tinymce/skins/content/alchemy-dark/content.min.css +1 -0
  11. data/app/assets/builds/tinymce/skins/ui/alchemy/skin.min.css +1 -1
  12. data/app/assets/builds/tinymce/skins/ui/alchemy-dark/content.min.css +1 -0
  13. data/app/assets/builds/tinymce/skins/ui/alchemy-dark/skin.min.css +1 -0
  14. data/app/assets/images/alchemy/element_icons/layout-bottom-2-line.svg +1 -0
  15. data/app/assets/images/alchemy/icons-sprite.svg +1 -1
  16. data/app/components/alchemy/admin/element_select.rb +39 -0
  17. data/app/components/alchemy/admin/link_dialog/tabs.rb +1 -1
  18. data/app/components/alchemy/admin/locale_select.rb +38 -0
  19. data/app/components/alchemy/ingredients/datetime_view.rb +4 -2
  20. data/app/controllers/alchemy/admin/attachments_controller.rb +2 -0
  21. data/app/controllers/alchemy/admin/elements_controller.rb +2 -0
  22. data/app/controllers/alchemy/admin/pages_controller.rb +3 -1
  23. data/app/controllers/alchemy/admin/pictures_controller.rb +26 -34
  24. data/app/controllers/alchemy/admin/resources_controller.rb +1 -1
  25. data/app/controllers/alchemy/pages_controller.rb +19 -2
  26. data/app/controllers/concerns/alchemy/admin/resource_filter.rb +1 -0
  27. data/app/decorators/alchemy/ingredient_editor.rb +9 -1
  28. data/app/helpers/alchemy/admin/attachments_helper.rb +5 -5
  29. data/app/helpers/alchemy/admin/base_helper.rb +0 -7
  30. data/app/helpers/alchemy/admin/form_helper.rb +2 -1
  31. data/app/helpers/alchemy/pages_helper.rb +1 -1
  32. data/app/javascript/alchemy_admin/components/auto_submit.js +20 -0
  33. data/app/javascript/alchemy_admin/components/datepicker.js +8 -5
  34. data/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js +3 -2
  35. data/app/javascript/alchemy_admin/components/element_editor.js +25 -15
  36. data/app/javascript/alchemy_admin/components/element_select.js +43 -0
  37. data/app/javascript/alchemy_admin/components/index.js +5 -0
  38. data/app/javascript/alchemy_admin/components/link_buttons.js +6 -2
  39. data/app/javascript/alchemy_admin/components/remote_select.js +5 -1
  40. data/app/javascript/alchemy_admin/components/tinymce.js +93 -16
  41. data/app/javascript/alchemy_admin/dialog.js +1 -1
  42. data/app/javascript/alchemy_admin/file_editors.js +1 -1
  43. data/app/javascript/alchemy_admin/image_loader.js +4 -2
  44. data/app/javascript/alchemy_admin/picture_editors.js +7 -4
  45. data/app/javascript/alchemy_admin/picture_selector.js +4 -4
  46. data/app/jobs/alchemy/delete_picture_job.rb +12 -0
  47. data/app/models/alchemy/attachment.rb +2 -9
  48. data/app/models/alchemy/element.rb +1 -0
  49. data/app/models/alchemy/element_definition.rb +31 -0
  50. data/app/models/alchemy/ingredient.rb +1 -1
  51. data/app/models/alchemy/ingredients/boolean.rb +2 -1
  52. data/app/models/alchemy/language.rb +2 -7
  53. data/app/models/alchemy/page/page_naming.rb +4 -11
  54. data/app/models/alchemy/page/page_natures.rb +16 -11
  55. data/app/models/alchemy/page/publisher.rb +1 -1
  56. data/app/models/alchemy/page.rb +1 -6
  57. data/app/models/alchemy/page_definition.rb +1 -1
  58. data/app/models/alchemy/picture.rb +6 -17
  59. data/app/models/alchemy/resource.rb +15 -2
  60. data/app/models/alchemy/site/layout.rb +1 -0
  61. data/app/models/alchemy/site.rb +1 -6
  62. data/app/models/alchemy/storage_adapter/dragonfly/picture_url.rb +7 -2
  63. data/app/models/alchemy/storage_adapter/dragonfly.rb +24 -2
  64. data/app/models/concerns/alchemy/relatable_resource.rb +28 -0
  65. data/app/stylesheets/alchemy/_custom-properties.scss +162 -0
  66. data/app/stylesheets/alchemy/_mixins.scss +12 -24
  67. data/app/stylesheets/alchemy/_themes.scss +540 -0
  68. data/app/stylesheets/alchemy/admin/archive.scss +28 -8
  69. data/app/stylesheets/alchemy/admin/attachments.scss +10 -33
  70. data/app/stylesheets/alchemy/admin/base.scss +4 -1
  71. data/app/stylesheets/alchemy/admin/buttons.scss +7 -32
  72. data/app/stylesheets/alchemy/admin/dashboard.scss +13 -0
  73. data/app/stylesheets/alchemy/admin/dialogs.scss +17 -7
  74. data/app/stylesheets/alchemy/admin/element-select.scss +11 -0
  75. data/app/stylesheets/alchemy/admin/elements.scss +95 -34
  76. data/app/stylesheets/alchemy/admin/filters.scss +8 -9
  77. data/app/stylesheets/alchemy/admin/flatpickr.scss +12 -27
  78. data/app/stylesheets/alchemy/admin/form_fields.scss +0 -15
  79. data/app/stylesheets/alchemy/admin/forms.scss +3 -8
  80. data/app/stylesheets/alchemy/admin/frame.scss +5 -7
  81. data/app/stylesheets/alchemy/admin/icons.scss +0 -9
  82. data/app/stylesheets/alchemy/admin/image_library.scss +13 -55
  83. data/app/stylesheets/alchemy/admin/navigation.scss +1 -11
  84. data/app/stylesheets/alchemy/admin/node-select.scss +1 -10
  85. data/app/stylesheets/alchemy/admin/nodes.scss +6 -2
  86. data/app/stylesheets/alchemy/admin/notices.scss +5 -4
  87. data/app/stylesheets/alchemy/admin/page-select.scss +16 -0
  88. data/app/stylesheets/alchemy/admin/pagination.scss +1 -8
  89. data/app/stylesheets/alchemy/admin/preview_window.scss +12 -1
  90. data/app/stylesheets/alchemy/admin/resource_info.scss +106 -3
  91. data/app/stylesheets/alchemy/admin/search.scss +1 -1
  92. data/app/stylesheets/alchemy/admin/selects.scss +58 -31
  93. data/app/stylesheets/alchemy/admin/shoelace.scss +32 -62
  94. data/app/stylesheets/alchemy/admin/sitemap.scss +7 -18
  95. data/app/stylesheets/alchemy/admin/tables.scss +3 -3
  96. data/app/stylesheets/alchemy/admin/tags.scss +18 -35
  97. data/app/stylesheets/alchemy/admin/toolbar.scss +0 -6
  98. data/app/stylesheets/alchemy/admin/typography.scss +2 -5
  99. data/app/stylesheets/alchemy/admin.scss +1 -1
  100. data/app/stylesheets/alchemy/dark-theme.scss +5 -0
  101. data/app/stylesheets/alchemy/light-theme.scss +6 -0
  102. data/app/stylesheets/alchemy/theme.scss +13 -0
  103. data/app/stylesheets/tinymce/skins/content/alchemy/content.scss +8 -8
  104. data/app/stylesheets/tinymce/skins/content/alchemy-dark/content.scss +70 -0
  105. data/app/stylesheets/tinymce/skins/ui/alchemy/skin.scss +28 -43
  106. data/app/stylesheets/tinymce/skins/ui/alchemy-dark/content.scss +1 -0
  107. data/app/stylesheets/tinymce/skins/ui/alchemy-dark/skin.scss +3784 -0
  108. data/app/views/alchemy/admin/attachments/_files_list.html.erb +20 -10
  109. data/app/views/alchemy/admin/attachments/assign.js.erb +4 -3
  110. data/app/views/alchemy/admin/attachments/show.html.erb +55 -43
  111. data/app/views/alchemy/admin/crop.html.erb +1 -1
  112. data/app/views/alchemy/admin/dashboard/index.html.erb +1 -1
  113. data/app/views/alchemy/admin/dashboard/info.html.erb +36 -6
  114. data/app/views/alchemy/admin/elements/_form.html.erb +9 -9
  115. data/app/views/alchemy/admin/elements/_header.html.erb +12 -10
  116. data/app/views/alchemy/admin/ingredients/_picture_fields.html.erb +1 -1
  117. data/app/views/alchemy/admin/nodes/_form.html.erb +5 -1
  118. data/app/views/alchemy/admin/pages/info.html.erb +1 -1
  119. data/app/views/alchemy/admin/partials/_search_form.html.erb +1 -0
  120. data/app/views/alchemy/admin/pictures/_archive.html.erb +13 -23
  121. data/app/views/alchemy/admin/pictures/_archive_overlay.html.erb +1 -6
  122. data/app/views/alchemy/admin/pictures/_form.html.erb +10 -5
  123. data/app/views/alchemy/admin/pictures/_infos.html.erb +21 -52
  124. data/app/views/alchemy/admin/pictures/_library_sidebar.html.erb +7 -0
  125. data/app/views/alchemy/admin/pictures/_picture.html.erb +15 -16
  126. data/app/views/alchemy/admin/pictures/_picture_to_assign.html.erb +20 -16
  127. data/app/views/alchemy/admin/pictures/_sorting_select.html.erb +13 -0
  128. data/app/views/alchemy/admin/pictures/_tag_list.html.erb +1 -1
  129. data/app/views/alchemy/admin/pictures/edit_multiple.html.erb +1 -6
  130. data/app/views/alchemy/admin/pictures/index.html.erb +3 -12
  131. data/app/views/alchemy/admin/pictures/show.html.erb +17 -14
  132. data/app/views/alchemy/admin/pictures/update.turbo_stream.erb +1 -1
  133. data/app/views/alchemy/admin/resources/_filter_bar.html.erb +5 -15
  134. data/app/views/alchemy/admin/resources/_resource_usage_info.html.erb +36 -0
  135. data/app/views/alchemy/admin/styleguide/index.html.erb +118 -66
  136. data/app/views/alchemy/admin/uploader/_button.html.erb +1 -1
  137. data/app/views/alchemy/base/error_notice.html.erb +1 -1
  138. data/app/views/alchemy/ingredients/_page_editor.html.erb +0 -1
  139. data/app/views/alchemy/ingredients/_richtext_editor.html.erb +0 -1
  140. data/app/views/alchemy/ingredients/_select_editor.html.erb +1 -2
  141. data/app/views/layouts/alchemy/admin.html.erb +25 -23
  142. data/config/locales/alchemy.en.yml +26 -8
  143. data/db/migrate/20250905140323_add_created_at_index_to_pictures_and_attachments.rb +14 -0
  144. data/lib/alchemy/configuration/base_option.rb +18 -5
  145. data/lib/alchemy/configuration/boolean_option.rb +2 -5
  146. data/lib/alchemy/configuration/collection_option.rb +69 -0
  147. data/lib/alchemy/configuration/configuration_option.rb +35 -0
  148. data/lib/alchemy/configuration/pathname_option.rb +12 -0
  149. data/lib/alchemy/configuration.rb +44 -6
  150. data/lib/alchemy/configurations/format_matchers.rb +1 -1
  151. data/lib/alchemy/configurations/importmap.rb +11 -0
  152. data/lib/alchemy/configurations/mailer.rb +2 -2
  153. data/lib/alchemy/configurations/main.rb +148 -3
  154. data/lib/alchemy/configurations/page_cache.rb +19 -0
  155. data/lib/alchemy/configurations/uploader.rb +2 -2
  156. data/lib/alchemy/deprecation.rb +1 -1
  157. data/lib/alchemy/engine.rb +43 -21
  158. data/lib/alchemy/install/tasks.rb +0 -12
  159. data/lib/alchemy/name_conversions.rb +6 -0
  160. data/lib/alchemy/tasks/tidy.rb +18 -0
  161. data/lib/alchemy/test_support/config_stubbing.rb +13 -4
  162. data/lib/alchemy/test_support/factories/language_factory.rb +8 -4
  163. data/lib/alchemy/test_support/factories/page_factory.rb +1 -0
  164. data/lib/alchemy/test_support/factories/picture_factory.rb +1 -0
  165. data/lib/alchemy/test_support/relatable_resource_examples.rb +58 -0
  166. data/lib/alchemy/tinymce.rb +0 -1
  167. data/lib/alchemy/version.rb +1 -1
  168. data/lib/alchemy.rb +18 -171
  169. data/lib/generators/alchemy/install/install_generator.rb +21 -10
  170. data/lib/generators/alchemy/install/templates/alchemy.rb.tt +88 -13
  171. data/lib/tasks/alchemy/assets.rake +1 -1
  172. data/lib/tasks/alchemy/tidy.rake +6 -0
  173. data/lib/tasks/alchemy/usage.rake +2 -0
  174. data/vendor/assets/stylesheets/tinymce/skins/content/dark/content.min.css +1 -0
  175. data/vendor/assets/stylesheets/tinymce/skins/content/default/content.min.css +1 -0
  176. data/vendor/assets/stylesheets/tinymce/skins/ui/oxide/skin.min.css +1 -0
  177. data/vendor/assets/stylesheets/tinymce/skins/ui/oxide-dark/content.min.css +1 -0
  178. data/vendor/assets/stylesheets/tinymce/skins/ui/oxide-dark/skin.min.css +1 -0
  179. data/vendor/javascript/clipboard.min.js +1 -1
  180. data/vendor/javascript/cropperjs.min.js +1 -1
  181. data/vendor/javascript/handlebars.min.js +3 -3
  182. data/vendor/javascript/jquery.min.js +1 -1
  183. data/vendor/javascript/select2.min.js +3 -3
  184. data/vendor/javascript/shoelace.min.js +92 -76
  185. data/vendor/javascript/sortable.min.js +2 -2
  186. data/vendor/javascript/tinymce.min.js +1 -1
  187. data/vendor/javascript/ungap-custom-elements.min.js +2 -2
  188. metadata +51 -36
  189. data/CHANGELOG.md +0 -2100
  190. data/CODE_OF_CONDUCT.md +0 -13
  191. data/CONTRIBUTING.md +0 -73
  192. data/Gemfile +0 -78
  193. data/Rakefile +0 -102
  194. data/SECURITY.md +0 -13
  195. data/alchemy_cms.gemspec +0 -97
  196. data/app/assets/builds/alchemy/custom-properties.css +0 -1
  197. data/app/helpers/alchemy/admin/elements_helper.rb +0 -25
  198. data/app/stylesheets/alchemy/custom-properties.css +0 -244
  199. data/bin/importmap +0 -4
  200. data/bin/rails +0 -9
  201. data/bin/rspec +0 -3
  202. data/bin/setup +0 -30
  203. data/bin/start +0 -17
  204. data/bun.lockb +0 -0
  205. data/bundles/remixicon.mjs +0 -153
  206. data/bundles/shoelace.js +0 -12
  207. data/bundles/tinymce.js +0 -22
  208. data/eslint.config.js +0 -18
  209. data/lib/alchemy/configuration/class_set_option.rb +0 -46
  210. data/lib/alchemy/configuration/integer_list_option.rb +0 -13
  211. data/lib/alchemy/configuration/list_option.rb +0 -22
  212. data/lib/alchemy/configuration/string_list_option.rb +0 -13
  213. data/lib/alchemy/upgrader/.keep +0 -0
  214. data/lib/alchemy/upgrader/tasks/.keep +0 -0
  215. data/rollup.config.mjs +0 -108
  216. data/vitest.config.js +0 -21
@@ -3,20 +3,15 @@
3
3
  @use "../extends";
4
4
  @use "../mixins";
5
5
 
6
- :root {
7
- --select-medium-width: 90px;
8
- --select-large-width: 120px;
9
- }
10
-
11
6
  select {
12
7
  @include mixins.button-defaults(
13
- $background-color: var(--form-field-background-color),
14
- $hover-color: var(--form-field-background-color),
15
- $hover-border-color: var(--button-hover-border-color),
8
+ $background-color: var(--select-background-color),
9
+ $hover-color: var(--select-background-color),
10
+ $hover-border-color: var(--select-hover-border-color),
16
11
  $padding: var(--spacing-1) 26px var(--spacing-1) var(--spacing-2),
17
- $border: 1px solid var(--button-border-color),
12
+ $border: 1px solid var(--select-border-color),
18
13
  $box-shadow: none,
19
- $color: var(--form-field-text-color),
14
+ $color: var(--select-text-color),
20
15
  $margin: 0
21
16
  );
22
17
 
@@ -26,10 +21,7 @@ select {
26
21
  width: auto;
27
22
  font-weight: normal;
28
23
  vertical-align: middle;
29
- background-image: var(
30
- --select-background-image,
31
- 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")
32
- );
24
+ background-image: var(--select-background-image);
33
25
  background-position: right 0.75em center;
34
26
  background-repeat: no-repeat;
35
27
  background-size: 1em;
@@ -49,18 +41,21 @@ select {
49
41
  }
50
42
 
51
43
  .select2-container {
44
+ border-radius: var(--border-radius_medium);
45
+
52
46
  &.alchemy_selectbox {
53
47
  .select2-choice {
54
48
  width: 100%;
55
- height: var(--form-field-height);
49
+
56
50
  @include mixins.button-defaults(
57
- $background-color: var(--form-field-background-color),
58
- $hover-color: var(--form-field-background-color),
59
- $hover-border-color: var(--button-hover-border-color),
51
+ $background-color: var(--select-background-color),
52
+ $height: var(--form-field-height),
53
+ $hover-color: var(--select-background-color),
54
+ $hover-border-color: var(--select-hover-border-color),
60
55
  $padding: var(--form-field-padding),
61
- $border: 1px solid var(--button-border-color),
56
+ $border: 1px solid var(--select-border-color),
62
57
  $box-shadow: none,
63
- $color: var(--form-field-text-color),
58
+ $color: var(--select-text-color),
64
59
  $margin: 0
65
60
  );
66
61
 
@@ -95,8 +90,7 @@ select {
95
90
  content: "";
96
91
  width: 1rem;
97
92
  height: 1rem;
98
- 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>')
99
- no-repeat;
93
+ background: var(--select-background-image) no-repeat;
100
94
  }
101
95
  }
102
96
  }
@@ -130,16 +124,17 @@ select {
130
124
  .select2-choice,
131
125
  .select2-choice:hover {
132
126
  background-image: none;
133
- background-color: var(--color-grey_very_light);
127
+ background-color: var(--select-disabled-background-color);
134
128
  box-shadow: none;
135
- border-color: var(border-inset-color);
129
+ border-color: var(--select-disabled-border-color);
136
130
  cursor: not-allowed;
131
+ color: var(--select-disabled-text-color);
137
132
 
138
133
  .select2-arrow {
139
- border-color: var(border-inset-color);
134
+ border-color: var(--select-disabled-border-color);
140
135
 
141
136
  b {
142
- color: var(border-inset-color);
137
+ color: var(--text-color-muted);
143
138
  }
144
139
  }
145
140
  }
@@ -160,8 +155,7 @@ select {
160
155
  display: inline-flex;
161
156
  width: 12px;
162
157
  height: 12px;
163
- 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>')
164
- no-repeat;
158
+ background: var(--select-close-icon) no-repeat;
165
159
  }
166
160
 
167
161
  &:hover {
@@ -194,6 +188,7 @@ select {
194
188
  border: 0 none;
195
189
  box-shadow: none;
196
190
  color: var(--text-color);
191
+ background-color: var(--tag-background-color);
197
192
  }
198
193
 
199
194
  .select2-search-field {
@@ -203,18 +198,43 @@ select {
203
198
  color: var(--form-field-text-color);
204
199
  padding: 3px 6px;
205
200
  margin: 0;
201
+
202
+ &.select2-active {
203
+ background: var(--form-field-background-color) !important;
204
+ }
206
205
  }
207
206
  }
208
207
  }
209
208
  }
209
+
210
+ .select2-default {
211
+ color: var(--text-color-muted) !important;
212
+ }
210
213
  }
211
214
 
212
215
  .select2-drop {
216
+ background: var(--select-dropdown-background-color);
217
+ box-shadow: var(--select-dropdown-box-shadow);
218
+ color: var(--select-dropdown-text-color, var(--text-color));
219
+ margin-top: 1px;
220
+
221
+ &.select2-drop-above {
222
+ margin-top: -1px;
223
+
224
+ &.select2-drop-active {
225
+ border-top-color: var(--select-dropdown-border-color);
226
+ }
227
+ }
228
+
213
229
  .select2-search {
214
230
  margin: var(--spacing-1) 0;
215
231
 
216
232
  .select2-input {
217
233
  width: inherit;
234
+
235
+ &.select2-active {
236
+ background: var(--form-field-background-color) !important;
237
+ }
218
238
  }
219
239
  }
220
240
 
@@ -239,8 +259,8 @@ select {
239
259
  padding: var(--spacing-1) 0;
240
260
 
241
261
  &.select2-highlighted {
242
- background: var(--select-hover-bg-color);
243
- color: var(--select-hover-text-color);
262
+ background: var(--select-hover-bg-color, var(--color-blue_dark));
263
+ color: var(--select-hover-text-color, var(--color-white));
244
264
  }
245
265
 
246
266
  &.select2-result-with-children {
@@ -252,10 +272,15 @@ select {
252
272
  .select2-searching {
253
273
  padding: var(--spacing-2);
254
274
  margin: 0;
275
+ background: var(--select-dropdown-background-color);
255
276
  }
256
277
 
257
278
  .select2-result-label {
258
279
  padding: var(--spacing-1) var(--spacing-2);
280
+
281
+ em {
282
+ text-decoration: underline;
283
+ }
259
284
  }
260
285
 
261
286
  ul.select2-result-sub > li .select2-result-label {
@@ -265,13 +290,15 @@ select {
265
290
 
266
291
  &.select2-drop-active {
267
292
  border-radius: var(--border-radius_medium);
268
- border: var(--border-default);
293
+ border: 1px solid var(--select-dropdown-border-color);
269
294
  }
270
295
 
271
296
  .select2-more-results,
272
297
  .select2-ajax-error {
273
298
  padding: var(--spacing-2);
274
299
  margin-bottom: 0;
300
+ background: var(--notice-error-background-color);
301
+ color: var(--notice-error-text-color);
275
302
  }
276
303
  }
277
304
 
@@ -1,21 +1,8 @@
1
- .alchemy-light {
1
+ :root {
2
2
  /*
3
3
  * Theme Tokens
4
4
  */
5
5
 
6
- /* Primary */
7
- --sl-color-primary-50: var(--color-blue_very_light);
8
- --sl-color-primary-100: var(--color-blue_very_light);
9
- --sl-color-primary-200: var(--color-blue_light);
10
- --sl-color-primary-300: var(--color-blue_light);
11
- --sl-color-primary-400: var(--color-blue_medium);
12
- --sl-color-primary-500: var(--color-blue_medium);
13
- --sl-color-primary-600: var(--color-blue_dark);
14
- --sl-color-primary-700: var(--color-blue_dark);
15
- --sl-color-primary-800: var(--color-blue_dark);
16
- --sl-color-primary-900: var(--color-blue_dark);
17
- --sl-color-primary-950: var(--color-blue_dark);
18
-
19
6
  /* Success */
20
7
  --sl-color-success-50: var(--color-green_very_light);
21
8
  --sl-color-success-100: var(--color-green_very_light);
@@ -55,19 +42,6 @@
55
42
  --sl-color-danger-900: var(--color-red_dark);
56
43
  --sl-color-danger-950: var(--color-red_dark);
57
44
 
58
- /* Neutral */
59
- --sl-color-neutral-50: var(--color-grey_very_light);
60
- --sl-color-neutral-100: var(--color-grey_very_light);
61
- --sl-color-neutral-200: var(--color-grey_light);
62
- --sl-color-neutral-300: var(--color-grey_light);
63
- --sl-color-neutral-400: var(--color-grey_medium);
64
- --sl-color-neutral-500: var(--color-grey_medium);
65
- --sl-color-neutral-600: var(--color-grey_dark);
66
- --sl-color-neutral-700: var(--color-grey_dark);
67
- --sl-color-neutral-800: var(--color-grey_very_dark);
68
- --sl-color-neutral-900: var(--color-grey-very_dark);
69
- --sl-color-neutral-950: var(--color-grey-very_dark);
70
-
71
45
  /* Neutral one-offs */
72
46
  --sl-color-neutral-0: hsl(0, 0%, 100%);
73
47
  --sl-color-neutral-1000: hsl(0, 0%, 0%);
@@ -130,8 +104,8 @@
130
104
 
131
105
  /* Font sizes */
132
106
  --sl-font-size-2x-small: 0.625rem; /* 10px */
133
- --sl-font-size-x-small: var(--font-size_small); /* 12px */
134
- --sl-font-size-small: var(--font-size_medium); /* 14px */
107
+ --sl-font-size-x-small: var(--font-size_small); /* 10px */
108
+ --sl-font-size-small: var(--font-size_medium); /* 12px */
135
109
  --sl-font-size-medium: var(--font-size_large); /* 16px */
136
110
  --sl-font-size-large: 1.25rem; /* 20px */
137
111
  --sl-font-size-x-large: 1.5rem; /* 24px */
@@ -141,9 +115,9 @@
141
115
 
142
116
  /* Font weights */
143
117
  --sl-font-weight-light: 300;
144
- --sl-font-weight-normal: 400;
145
- --sl-font-weight-semibold: 500;
146
- --sl-font-weight-bold: 700;
118
+ --sl-font-weight-normal: var(--font-weight_normal);
119
+ --sl-font-weight-semibold: var(--font-weight_normal);
120
+ --sl-font-weight-bold: var(--font-weight_bold);
147
121
 
148
122
  /* Letter spacings */
149
123
  --sl-letter-spacing-denser: -0.03em;
@@ -160,7 +134,7 @@
160
134
  --sl-line-height-looser: 2.6;
161
135
 
162
136
  /* Focus rings */
163
- --sl-focus-ring-color: var(--outline-color, --sl-color-primary-600);
137
+ --sl-focus-ring-color: var(--focus-color);
164
138
  --sl-focus-ring-style: solid;
165
139
  --sl-focus-ring-width: 2px;
166
140
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
@@ -181,11 +155,11 @@
181
155
  --sl-input-height-medium: 2.5rem; /* 40px */
182
156
  --sl-input-height-large: 3.125rem; /* 50px */
183
157
 
184
- --sl-input-background-color: var(--sl-color-neutral-0);
158
+ --sl-input-background-color: var(--form-field-background-color);
185
159
  --sl-input-background-color-hover: var(--sl-input-background-color);
186
160
  --sl-input-background-color-focus: var(--sl-input-background-color);
187
- --sl-input-background-color-disabled: var(--sl-color-neutral-100);
188
- --sl-input-border-color: var(--sl-color-neutral-300);
161
+ --sl-input-background-color-disabled: var(--form-field-disabled-bg-color);
162
+ --sl-input-border-color: var(--form-field-border-color);
189
163
  --sl-input-border-color-hover: var(--sl-color-neutral-400);
190
164
  --sl-input-border-color-focus: var(--sl-color-primary-500);
191
165
  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
@@ -205,10 +179,10 @@
205
179
  --sl-input-font-size-large: var(--sl-font-size-large);
206
180
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
207
181
 
208
- --sl-input-color: var(--sl-color-neutral-700);
182
+ --sl-input-color: var(--form-field-text-color);
209
183
  --sl-input-color-hover: var(--sl-color-neutral-700);
210
184
  --sl-input-color-focus: var(--sl-color-neutral-700);
211
- --sl-input-color-disabled: var(--sl-color-neutral-900);
185
+ --sl-input-color-disabled: var(--form-field-disabled-text-color);
212
186
  --sl-input-icon-color: var(--sl-color-neutral-500);
213
187
  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
214
188
  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
@@ -218,7 +192,7 @@
218
192
  --sl-input-spacing-medium: var(--sl-spacing-medium);
219
193
  --sl-input-spacing-large: var(--sl-spacing-large);
220
194
 
221
- --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
195
+ --sl-input-focus-ring-color: var(--focus-color);
222
196
  --sl-input-focus-ring-offset: 0;
223
197
 
224
198
  --sl-input-filled-background-color: var(--sl-color-neutral-100);
@@ -240,7 +214,7 @@
240
214
  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
241
215
  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
242
216
  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
243
- --sl-input-help-text-color: var(--sl-color-neutral-500);
217
+ --sl-input-help-text-color: var(--hint-text-color);
244
218
 
245
219
  /* Toggles (checkboxes, radios, switches) */
246
220
  --sl-toggle-size-small: 0.875rem; /* 14px */
@@ -251,7 +225,7 @@
251
225
  * Overlays
252
226
  */
253
227
 
254
- --sl-overlay-background-color: hsl(0 0% 39.2% / 40%);
228
+ --sl-overlay-background-color: var(--dialog-overlay-color);
255
229
 
256
230
  /*
257
231
  * Panels
@@ -266,8 +240,8 @@
266
240
  */
267
241
 
268
242
  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
269
- --sl-tooltip-background-color: var(--sl-color-primary-800);
270
- --sl-tooltip-color: var(--sl-color-neutral-0);
243
+ --sl-tooltip-background-color: var(--tooltip-background-color);
244
+ --sl-tooltip-color: hsla(0, 0%, 90%, 0.9);
271
245
  --sl-tooltip-font-family: var(--sl-font-sans);
272
246
  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
273
247
  --sl-tooltip-font-size: var(--sl-font-size-small);
@@ -311,23 +285,18 @@
311
285
  }
312
286
  }
313
287
 
314
- .alchemy-light {
315
- sl-tab-group {
316
- --indicator-color: var(--tabs_indicator-color);
317
- --track-color: var(--tabs_track-color);
318
- }
319
-
320
- sl-tab-panel {
321
- --padding: var(--spacing-4);
322
- }
288
+ sl-tab-group {
289
+ --indicator-color: var(--tabs_indicator-color);
290
+ --track-color: var(--tabs_track-color);
291
+ }
323
292
 
324
- sl-tooltip {
325
- --show-delay: 0.2s;
326
- }
293
+ sl-tab-panel {
294
+ --padding: var(--spacing-4);
327
295
  }
328
296
 
329
297
  sl-tooltip {
330
298
  --max-width: 200px;
299
+ --show-delay: 0.2s;
331
300
 
332
301
  &::part(body) {
333
302
  white-space: normal;
@@ -336,20 +305,21 @@ sl-tooltip {
336
305
 
337
306
  &::part(base__popup) {
338
307
  border-radius: var(--border-radius_medium);
339
- box-shadow: 0 0 var(--spacing-1) var(--color-grey_light);
308
+ box-shadow: var(--tooltip-box-shadow);
340
309
  }
341
310
  }
342
311
 
343
312
  sl-dialog {
344
313
  &::part(panel) {
345
- background-color: var(--color-grey_very_light);
314
+ background-color: var(--dialog-background-color);
346
315
  --body-spacing: var(--spacing-4) var(--spacing-3);
347
316
  --footer-spacing: var(--spacing-4) var(--spacing-3);
317
+ --sl-shadow-x-large: var(--dialog-box-shadow);
348
318
  }
349
319
 
350
320
  &::part(header) {
351
321
  --header-spacing: 9.5px var(--spacing-3);
352
- background-color: var(--color-blue_dark);
322
+ background-color: var(--dialog-header-color);
353
323
  border-top-left-radius: var(--border-radius_medium);
354
324
  border-top-right-radius: var(--border-radius_medium);
355
325
  }
@@ -360,16 +330,16 @@ sl-dialog {
360
330
 
361
331
  &::part(title) {
362
332
  --sl-font-size-large: var(--font-size_medium);
363
- color: var(--color-white);
333
+ color: var(--dialog-header-text-color);
364
334
  font-weight: var(--font-weight_bold);
365
335
  -webkit-font-smoothing: antialiased;
366
336
  -moz-osx-font-smoothing: grayscale;
367
337
  }
368
338
 
369
339
  &::part(close-button) {
370
- --sl-color-primary-600: var(--color-white);
371
- --sl-color-primary-700: var(--color-white);
372
- color: var(--color-white);
340
+ --sl-color-primary-600: var(--dialog-header-text-color);
341
+ --sl-color-primary-700: var(--dialog-header-text-color);
342
+ color: var(--dialog-header-text-color);
373
343
  fill: currentColor;
374
344
  }
375
345
  }
@@ -118,8 +118,12 @@
118
118
  background-color: var(--sitemap-highlight-color);
119
119
  }
120
120
 
121
- &.no-match .sitemap_pagename_link {
122
- color: var(--color-grey_light);
121
+ &.no-match {
122
+ .sitemap_right_tools,
123
+ .sitemap_sitename,
124
+ .sitemap_url {
125
+ opacity: 0.25;
126
+ }
123
127
  }
124
128
 
125
129
  &:hover {
@@ -187,7 +191,7 @@
187
191
  .page_infos {
188
192
  @extend .right-rounded-border;
189
193
  background-color: var(--sitemap-page-background-color);
190
- border-left: 1px solid var(--color-grey_very_light);
194
+ border-left: 1px solid var(--body-background-color);
191
195
  display: none;
192
196
  justify-content: end;
193
197
  width: var(--sitemap-status-width);
@@ -252,21 +256,6 @@
252
256
  margin-left: var(--spacing-2);
253
257
  }
254
258
 
255
- .alchemy-dialog {
256
- #sitemap-wrapper {
257
- min-height: 0;
258
- }
259
-
260
- #sitemap {
261
- margin: 0;
262
- padding: 0 var(--spacing-6) var(--spacing-2) var(--spacing-2);
263
-
264
- .page_icon {
265
- cursor: default;
266
- }
267
- }
268
- }
269
-
270
259
  #search_field_clear {
271
260
  cursor: pointer;
272
261
  }
@@ -39,7 +39,7 @@ table {
39
39
  padding: var(--spacing-2) var(--spacing-3);
40
40
  vertical-align: top;
41
41
  line-height: 22px;
42
- border-right: 1px solid var(--color-grey_light);
42
+ border-right: 1px solid var(--table-border-color);
43
43
  transition: background-color var(--transition-duration);
44
44
 
45
45
  &:last-child {
@@ -61,7 +61,7 @@ table {
61
61
  position: relative;
62
62
 
63
63
  &.icon {
64
- border-bottom: 1px solid var(--color-grey_light);
64
+ border-bottom: 1px solid var(--table-border-color);
65
65
  }
66
66
  }
67
67
 
@@ -70,7 +70,7 @@ th,
70
70
  white-space: nowrap;
71
71
  text-align: left;
72
72
  vertical-align: top;
73
- border-bottom: 1px solid var(--color-grey_light);
73
+ border-bottom: 1px solid var(--table-border-color);
74
74
  font-weight: bold;
75
75
  }
76
76
 
@@ -3,20 +3,24 @@
3
3
  .tag-list {
4
4
  display: flex;
5
5
  flex-direction: column;
6
- height: 100%;
7
-
8
- .alchemy-dialog-body & {
9
- max-height: 292px;
6
+ min-height: 0;
7
+ padding-top: var(--spacing-4);
8
+
9
+ label {
10
+ display: block;
11
+ font-weight: bold;
12
+ font-size: var(--font-size_medium);
13
+ margin-bottom: var(--spacing-2);
10
14
  }
11
15
 
12
16
  alchemy-list-filter {
13
17
  margin: 0;
14
18
 
15
19
  input {
16
- background-color: hsla(0deg, 0%, 100%, 0.25);
20
+ background-color: var(--list-filter-background-color);
17
21
 
18
22
  &:focus {
19
- background-color: var(--color-white);
23
+ background-color: var(--list-filter-focus-background-color);
20
24
  }
21
25
  }
22
26
  }
@@ -45,17 +49,17 @@
45
49
  }
46
50
  }
47
51
 
48
- &:hover {
49
- background-color: var(--color-blue_very_light);
52
+ &:hover a {
53
+ background-color: var(--tag-hover-background-color);
50
54
  }
51
55
 
52
56
  &.active {
53
57
  a {
54
- background-color: var(--color-grey_dark);
55
- color: var(--color-grey_very_light);
58
+ background-color: var(--tag-active-background-color);
59
+ color: var(--tag-active-text-color);
56
60
 
57
61
  &:before {
58
- 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>');
62
+ background-image: var(--tag-active-background-image);
59
63
  }
60
64
  }
61
65
  }
@@ -76,26 +80,6 @@
76
80
  padding: 0;
77
81
  }
78
82
 
79
- #assign_image_list {
80
- .tag-list ul {
81
- height: 316px;
82
- }
83
-
84
- &.filtered .tag-list ul {
85
- height: 292px;
86
- }
87
- }
88
-
89
- #assign_file_list {
90
- .tag-list ul {
91
- height: 396px;
92
- }
93
-
94
- &.filtered .tag-list ul {
95
- height: 372px;
96
- }
97
- }
98
-
99
83
  #overlay_file_list.with_tag_list {
100
84
  padding-right: 234px;
101
85
  }
@@ -115,7 +99,7 @@
115
99
  list-style-type: none;
116
100
 
117
101
  li {
118
- background-color: var(--color-grey_light);
102
+ background-color: var(--tag-background-color);
119
103
  padding: var(--spacing-1);
120
104
  margin: 0 0 var(--spacing-1) 0;
121
105
  position: relative;
@@ -140,15 +124,14 @@
140
124
  }
141
125
  }
142
126
 
143
- .tag_list,
144
127
  .autocomplete_tag_list {
145
128
  .select2-container.select2-container-multi {
146
129
  .select2-search-choice {
147
130
  padding: var(--spacing-1) 22px;
148
- 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>');
131
+ background-image: var(--tag-background-image);
149
132
  background-repeat: no-repeat;
150
133
  background-position: 6px;
151
- background-color: var(--color-grey_light);
134
+ background-color: var(--tag-background-color);
152
135
  background-size: 1rem;
153
136
 
154
137
  > div {
@@ -1,12 +1,6 @@
1
1
  @use "../extends";
2
2
  @use "../variables" as vars;
3
3
 
4
- :root {
5
- --toolbar-height: 46px;
6
- --toolbar-padding: var(--spacing-2) var(--spacing-1);
7
- --toolbar-border-bottom: var(--border-default);
8
- }
9
-
10
4
  #toolbar {
11
5
  @extend %gradiated-toolbar;
12
6
  align-items: center;
@@ -61,14 +61,11 @@ p {
61
61
 
62
62
  kbd,
63
63
  code {
64
- border: var(--border-default);
64
+ border: 1px solid var(--code-border-color);
65
65
  border-radius: var(--border-radius_medium);
66
+ background: var(--code-background-color);
66
67
  font-family: Courier, monospaced;
67
68
  margin: 0 0.25ex;
68
69
  padding: 0.25em 0.5em;
69
70
  vertical-align: baseline;
70
71
  }
71
-
72
- code {
73
- background: var(--color-grey_light);
74
- }
@@ -1,4 +1,3 @@
1
- @use "custom-properties";
2
1
  @use "defaults";
3
2
  @use "fonts";
4
3
  @use "admin/archive";
@@ -10,6 +9,7 @@
10
9
  @use "admin/dashboard";
11
10
  @use "admin/dialogs";
12
11
  @use "admin/elements";
12
+ @use "admin/element-select";
13
13
  @use "admin/errors";
14
14
  @use "admin/filters";
15
15
  @use "admin/flash";
@@ -0,0 +1,5 @@
1
+ @use "themes";
2
+
3
+ html {
4
+ @include themes.dark-theme;
5
+ }
@@ -0,0 +1,6 @@
1
+ @use "custom-properties";
2
+ @use "themes";
3
+
4
+ html {
5
+ @include themes.light-theme;
6
+ }
@@ -0,0 +1,13 @@
1
+ @use "themes";
2
+
3
+ @media (prefers-color-scheme: dark) {
4
+ html {
5
+ @include themes.dark-theme;
6
+ }
7
+ }
8
+
9
+ @media (prefers-color-scheme: light) {
10
+ html {
11
+ @include themes.light-theme;
12
+ }
13
+ }