alchemy_cms 8.0.0.a → 8.0.0.b

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.

Potentially problematic release.


This version of alchemy_cms might be problematic. Click here for more details.

Files changed (182) 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/default.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/ingredients/datetime_view.rb +4 -2
  18. data/app/controllers/alchemy/admin/attachments_controller.rb +2 -0
  19. data/app/controllers/alchemy/admin/elements_controller.rb +2 -0
  20. data/app/controllers/alchemy/admin/pages_controller.rb +2 -0
  21. data/app/controllers/alchemy/admin/pictures_controller.rb +19 -33
  22. data/app/controllers/alchemy/pages_controller.rb +19 -2
  23. data/app/controllers/concerns/alchemy/admin/resource_filter.rb +1 -0
  24. data/app/helpers/alchemy/admin/attachments_helper.rb +5 -5
  25. data/app/helpers/alchemy/pages_helper.rb +1 -1
  26. data/app/javascript/alchemy_admin/components/auto_submit.js +20 -0
  27. data/app/javascript/alchemy_admin/components/datepicker.js +8 -5
  28. data/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js +3 -2
  29. data/app/javascript/alchemy_admin/components/element_editor.js +25 -15
  30. data/app/javascript/alchemy_admin/components/element_select.js +43 -0
  31. data/app/javascript/alchemy_admin/components/index.js +5 -0
  32. data/app/javascript/alchemy_admin/components/link_buttons.js +6 -2
  33. data/app/javascript/alchemy_admin/components/remote_select.js +5 -1
  34. data/app/javascript/alchemy_admin/components/tinymce.js +93 -16
  35. data/app/javascript/alchemy_admin/dialog.js +1 -1
  36. data/app/javascript/alchemy_admin/file_editors.js +1 -1
  37. data/app/javascript/alchemy_admin/image_loader.js +4 -2
  38. data/app/javascript/alchemy_admin/picture_editors.js +7 -4
  39. data/app/javascript/alchemy_admin/picture_selector.js +4 -4
  40. data/app/jobs/alchemy/delete_picture_job.rb +12 -0
  41. data/app/models/alchemy/attachment.rb +2 -9
  42. data/app/models/alchemy/element.rb +1 -0
  43. data/app/models/alchemy/element_definition.rb +30 -0
  44. data/app/models/alchemy/ingredient.rb +1 -1
  45. data/app/models/alchemy/language.rb +2 -7
  46. data/app/models/alchemy/page/page_naming.rb +4 -11
  47. data/app/models/alchemy/page/page_natures.rb +16 -11
  48. data/app/models/alchemy/page.rb +1 -6
  49. data/app/models/alchemy/page_definition.rb +1 -1
  50. data/app/models/alchemy/picture.rb +6 -17
  51. data/app/models/alchemy/site/layout.rb +1 -0
  52. data/app/models/alchemy/site.rb +1 -6
  53. data/app/models/alchemy/storage_adapter/dragonfly/picture_url.rb +7 -2
  54. data/app/models/alchemy/storage_adapter/dragonfly.rb +24 -2
  55. data/app/models/concerns/alchemy/relatable_resource.rb +28 -0
  56. data/app/stylesheets/alchemy/_custom-properties.scss +162 -0
  57. data/app/stylesheets/alchemy/_mixins.scss +12 -24
  58. data/app/stylesheets/alchemy/_themes.scss +540 -0
  59. data/app/stylesheets/alchemy/admin/archive.scss +28 -8
  60. data/app/stylesheets/alchemy/admin/attachments.scss +10 -33
  61. data/app/stylesheets/alchemy/admin/base.scss +4 -1
  62. data/app/stylesheets/alchemy/admin/buttons.scss +7 -32
  63. data/app/stylesheets/alchemy/admin/dialogs.scss +17 -7
  64. data/app/stylesheets/alchemy/admin/element-select.scss +11 -0
  65. data/app/stylesheets/alchemy/admin/elements.scss +94 -33
  66. data/app/stylesheets/alchemy/admin/filters.scss +8 -9
  67. data/app/stylesheets/alchemy/admin/flatpickr.scss +12 -27
  68. data/app/stylesheets/alchemy/admin/form_fields.scss +0 -15
  69. data/app/stylesheets/alchemy/admin/forms.scss +3 -8
  70. data/app/stylesheets/alchemy/admin/frame.scss +5 -7
  71. data/app/stylesheets/alchemy/admin/icons.scss +0 -9
  72. data/app/stylesheets/alchemy/admin/image_library.scss +13 -55
  73. data/app/stylesheets/alchemy/admin/navigation.scss +1 -11
  74. data/app/stylesheets/alchemy/admin/node-select.scss +1 -10
  75. data/app/stylesheets/alchemy/admin/notices.scss +5 -4
  76. data/app/stylesheets/alchemy/admin/page-select.scss +16 -0
  77. data/app/stylesheets/alchemy/admin/pagination.scss +1 -8
  78. data/app/stylesheets/alchemy/admin/preview_window.scss +12 -1
  79. data/app/stylesheets/alchemy/admin/resource_info.scss +106 -3
  80. data/app/stylesheets/alchemy/admin/search.scss +1 -1
  81. data/app/stylesheets/alchemy/admin/selects.scss +58 -31
  82. data/app/stylesheets/alchemy/admin/shoelace.scss +32 -62
  83. data/app/stylesheets/alchemy/admin/sitemap.scss +1 -1
  84. data/app/stylesheets/alchemy/admin/tables.scss +3 -3
  85. data/app/stylesheets/alchemy/admin/tags.scss +18 -35
  86. data/app/stylesheets/alchemy/admin/toolbar.scss +0 -6
  87. data/app/stylesheets/alchemy/admin/typography.scss +2 -5
  88. data/app/stylesheets/alchemy/admin.scss +1 -1
  89. data/app/stylesheets/alchemy/dark-theme.scss +5 -0
  90. data/app/stylesheets/alchemy/light-theme.scss +6 -0
  91. data/app/stylesheets/alchemy/theme.scss +13 -0
  92. data/app/stylesheets/tinymce/skins/content/alchemy/content.scss +8 -8
  93. data/app/stylesheets/tinymce/skins/content/alchemy-dark/content.scss +70 -0
  94. data/app/stylesheets/tinymce/skins/ui/alchemy/skin.scss +28 -43
  95. data/app/stylesheets/tinymce/skins/ui/alchemy-dark/content.scss +1 -0
  96. data/app/stylesheets/tinymce/skins/ui/alchemy-dark/skin.scss +3784 -0
  97. data/app/views/alchemy/admin/attachments/_files_list.html.erb +20 -10
  98. data/app/views/alchemy/admin/attachments/assign.js.erb +4 -3
  99. data/app/views/alchemy/admin/attachments/show.html.erb +55 -43
  100. data/app/views/alchemy/admin/crop.html.erb +1 -1
  101. data/app/views/alchemy/admin/elements/_form.html.erb +9 -9
  102. data/app/views/alchemy/admin/elements/_header.html.erb +4 -1
  103. data/app/views/alchemy/admin/ingredients/_picture_fields.html.erb +1 -1
  104. data/app/views/alchemy/admin/pages/info.html.erb +1 -1
  105. data/app/views/alchemy/admin/partials/_search_form.html.erb +1 -0
  106. data/app/views/alchemy/admin/pictures/_archive.html.erb +12 -22
  107. data/app/views/alchemy/admin/pictures/_archive_overlay.html.erb +1 -6
  108. data/app/views/alchemy/admin/pictures/_form.html.erb +1 -1
  109. data/app/views/alchemy/admin/pictures/_infos.html.erb +21 -52
  110. data/app/views/alchemy/admin/pictures/_library_sidebar.html.erb +7 -0
  111. data/app/views/alchemy/admin/pictures/_picture.html.erb +14 -20
  112. data/app/views/alchemy/admin/pictures/_picture_to_assign.html.erb +20 -16
  113. data/app/views/alchemy/admin/pictures/_sorting_select.html.erb +13 -0
  114. data/app/views/alchemy/admin/pictures/_tag_list.html.erb +1 -1
  115. data/app/views/alchemy/admin/pictures/edit_multiple.html.erb +1 -6
  116. data/app/views/alchemy/admin/pictures/index.html.erb +3 -12
  117. data/app/views/alchemy/admin/pictures/show.html.erb +10 -5
  118. data/app/views/alchemy/admin/resources/_filter_bar.html.erb +5 -15
  119. data/app/views/alchemy/admin/resources/_resource_usage_info.html.erb +36 -0
  120. data/app/views/alchemy/admin/styleguide/index.html.erb +118 -66
  121. data/app/views/alchemy/base/error_notice.html.erb +1 -1
  122. data/app/views/alchemy/ingredients/_page_editor.html.erb +0 -1
  123. data/app/views/alchemy/ingredients/_richtext_editor.html.erb +0 -1
  124. data/app/views/alchemy/ingredients/_select_editor.html.erb +1 -2
  125. data/app/views/layouts/alchemy/admin.html.erb +22 -17
  126. data/config/locales/alchemy.en.yml +26 -8
  127. data/db/migrate/20250905140323_add_created_at_index_to_pictures_and_attachments.rb +14 -0
  128. data/lib/alchemy/configurations/format_matchers.rb +1 -1
  129. data/lib/alchemy/configurations/main.rb +7 -0
  130. data/lib/alchemy/configurations/page_cache.rb +19 -0
  131. data/lib/alchemy/engine.rb +16 -7
  132. data/lib/alchemy/install/tasks.rb +0 -12
  133. data/lib/alchemy/name_conversions.rb +6 -0
  134. data/lib/alchemy/tasks/tidy.rb +18 -0
  135. data/lib/alchemy/test_support/factories/picture_factory.rb +1 -0
  136. data/lib/alchemy/test_support/relatable_resource_examples.rb +58 -0
  137. data/lib/alchemy/tinymce.rb +0 -1
  138. data/lib/alchemy/version.rb +1 -1
  139. data/lib/alchemy.rb +2 -11
  140. data/lib/generators/alchemy/install/install_generator.rb +21 -10
  141. data/lib/generators/alchemy/install/templates/alchemy.rb.tt +10 -6
  142. data/lib/tasks/alchemy/tidy.rake +6 -0
  143. data/lib/tasks/alchemy/usage.rake +2 -0
  144. data/vendor/assets/stylesheets/tinymce/skins/content/dark/content.min.css +1 -0
  145. data/vendor/assets/stylesheets/tinymce/skins/content/default/content.min.css +1 -0
  146. data/vendor/assets/stylesheets/tinymce/skins/ui/oxide/skin.min.css +1 -0
  147. data/vendor/assets/stylesheets/tinymce/skins/ui/oxide-dark/content.min.css +1 -0
  148. data/vendor/assets/stylesheets/tinymce/skins/ui/oxide-dark/skin.min.css +1 -0
  149. data/vendor/javascript/clipboard.min.js +1 -1
  150. data/vendor/javascript/cropperjs.min.js +1 -1
  151. data/vendor/javascript/handlebars.min.js +3 -3
  152. data/vendor/javascript/jquery.min.js +1 -1
  153. data/vendor/javascript/select2.min.js +3 -3
  154. data/vendor/javascript/shoelace.min.js +92 -76
  155. data/vendor/javascript/sortable.min.js +2 -2
  156. data/vendor/javascript/tinymce.min.js +1 -1
  157. data/vendor/javascript/ungap-custom-elements.min.js +2 -2
  158. metadata +46 -32
  159. data/CHANGELOG.md +0 -2100
  160. data/CODE_OF_CONDUCT.md +0 -13
  161. data/CONTRIBUTING.md +0 -73
  162. data/Gemfile +0 -78
  163. data/Rakefile +0 -102
  164. data/SECURITY.md +0 -13
  165. data/alchemy_cms.gemspec +0 -97
  166. data/app/assets/builds/alchemy/custom-properties.css +0 -1
  167. data/app/helpers/alchemy/admin/elements_helper.rb +0 -25
  168. data/app/stylesheets/alchemy/custom-properties.css +0 -244
  169. data/bin/importmap +0 -4
  170. data/bin/rails +0 -9
  171. data/bin/rspec +0 -3
  172. data/bin/setup +0 -30
  173. data/bin/start +0 -17
  174. data/bun.lockb +0 -0
  175. data/bundles/remixicon.mjs +0 -153
  176. data/bundles/shoelace.js +0 -12
  177. data/bundles/tinymce.js +0 -22
  178. data/eslint.config.js +0 -18
  179. data/lib/alchemy/upgrader/.keep +0 -0
  180. data/lib/alchemy/upgrader/tasks/.keep +0 -0
  181. data/rollup.config.mjs +0 -108
  182. data/vitest.config.js +0 -21
@@ -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
  }
@@ -187,7 +187,7 @@
187
187
  .page_infos {
188
188
  @extend .right-rounded-border;
189
189
  background-color: var(--sitemap-page-background-color);
190
- border-left: 1px solid var(--color-grey_very_light);
190
+ border-left: 1px solid var(--body-background-color);
191
191
  display: none;
192
192
  justify-content: end;
193
193
  width: var(--sitemap-status-width);
@@ -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
+ }
@@ -15,11 +15,11 @@ body {
15
15
  font-family: var(--font-sans);
16
16
  line-height: 1.4;
17
17
  margin: 1em;
18
- color: var(--text-color);
18
+ color: #333;
19
19
  }
20
20
 
21
21
  a {
22
- color: var(--color-blue_dark);
22
+ color: #000;
23
23
  }
24
24
 
25
25
  table {
@@ -28,7 +28,7 @@ table {
28
28
 
29
29
  table td,
30
30
  table th {
31
- border: 1px solid var(--border-color);
31
+ border: 1px solid #666;
32
32
  padding: 0.4rem;
33
33
  }
34
34
 
@@ -38,32 +38,32 @@ figure {
38
38
  }
39
39
 
40
40
  figure figcaption {
41
- color: var(--color-grey_dark);
41
+ color: #333;
42
42
  display: block;
43
43
  margin-top: 0.25rem;
44
44
  text-align: center;
45
45
  }
46
46
 
47
47
  hr {
48
- border-color: var(--border-color);
48
+ border-color: #666;
49
49
  border-style: solid;
50
50
  border-width: 1px 0 0 0;
51
51
  }
52
52
 
53
53
  code {
54
- background-color: var(--color-grey_very_light);
54
+ background-color: #999;
55
55
  border-radius: var(--border-radius_medium);
56
56
  padding: 0.1rem 0.2rem;
57
57
  }
58
58
 
59
59
  .mce-content-body:not([dir="rtl"]) blockquote {
60
- border-left: 2px solid var(--border-color);
60
+ border-left: 2px solid #666;
61
61
  margin-left: 1.5rem;
62
62
  padding-left: 1rem;
63
63
  }
64
64
 
65
65
  .mce-content-body[dir="rtl"] blockquote {
66
- border-right: 2px solid var(--border-color);
66
+ border-right: 2px solid #666;
67
67
  margin-right: 1.5rem;
68
68
  padding-right: 1rem;
69
69
  }
@@ -0,0 +1,70 @@
1
+ /**
2
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
3
+ * Licensed under the LGPL or a commercial license.
4
+ * For LGPL see License.txt in the project root for license information.
5
+ * For commercial licenses see https://www.tiny.cloud/
6
+ */
7
+
8
+ @use "../../../../alchemy/custom-properties";
9
+
10
+ html {
11
+ font-size: 13px;
12
+ }
13
+
14
+ body {
15
+ font-family: var(--font-sans);
16
+ line-height: 1.4;
17
+ margin: 1em;
18
+ background-color: var(--a-darkest-grey);
19
+ color: var(--a-lighter-grey);
20
+ }
21
+
22
+ a {
23
+ color: var(--a-lightest-grey);
24
+ }
25
+
26
+ table {
27
+ border-collapse: collapse;
28
+ }
29
+
30
+ table td,
31
+ table th {
32
+ border: 1px solid var(--a-grey);
33
+ padding: 0.4rem;
34
+ }
35
+
36
+ figure {
37
+ display: table;
38
+ margin: 1rem auto;
39
+ }
40
+
41
+ figure figcaption {
42
+ color: var(--a-lighter-grey);
43
+ display: block;
44
+ margin-top: 0.25rem;
45
+ text-align: center;
46
+ }
47
+
48
+ hr {
49
+ border-color: var(--a-grey);
50
+ border-style: solid;
51
+ border-width: 1px 0 0 0;
52
+ }
53
+
54
+ code {
55
+ background-color: var(--a-darkest-grey);
56
+ border-radius: var(--border-radius_medium);
57
+ padding: 0.1rem 0.2rem;
58
+ }
59
+
60
+ .mce-content-body:not([dir="rtl"]) blockquote {
61
+ border-left: 2px solid var(--a-grey);
62
+ margin-left: 1.5rem;
63
+ padding-left: 1rem;
64
+ }
65
+
66
+ .mce-content-body[dir="rtl"] blockquote {
67
+ border-right: 2px solid var(--a-grey);
68
+ margin-right: 1.5rem;
69
+ padding-right: 1rem;
70
+ }
@@ -365,30 +365,20 @@ button::-moz-focus-inner {
365
365
  }
366
366
 
367
367
  .tox .tox-button[disabled] {
368
- background-color: #2d5a8d;
369
- background-image: none;
370
- border-color: #2d5a8d;
368
+ background-color: var(--button-disabled-bg-color);
369
+ border-color: var(--button-border-color);
371
370
  box-shadow: none;
372
- color: rgba(255, 255, 255, 0.5);
371
+ color: var(--button-disabled-color);
373
372
  cursor: not-allowed;
374
373
  }
375
374
 
376
375
  .tox .tox-button:focus:not(:disabled) {
377
- background-color: #274e7a;
378
- background-image: none;
379
- border-color: #274e7a;
380
- box-shadow: none;
381
- color: #fff;
382
- }
383
-
384
- .tox .tox-button:hover:not(:disabled) {
385
- background-color: var(--button-hover-bg-color);
386
- background-image: none;
387
- border-color: var(--button-hover-border-color);
388
- box-shadow: none;
389
- color: var(--button-text-color);
376
+ background-color: var(--button-bg-color);
377
+ border-color: var(--button-focus-border-color);
378
+ box-shadow: var(--button-focus-box-shadow);
390
379
  }
391
380
 
381
+ .tox .tox-button:hover:not(:disabled):not(:focus),
392
382
  .tox .tox-button:active:not(:disabled) {
393
383
  background-color: var(--button-hover-bg-color);
394
384
  background-image: none;
@@ -419,35 +409,26 @@ button::-moz-focus-inner {
419
409
  }
420
410
 
421
411
  .tox .tox-button--secondary[disabled] {
422
- background-color: #f0f0f0;
423
- background-image: none;
424
- border-color: #f0f0f0;
412
+ background-color: var(--button-disabled-bg-color);
413
+ border-color: var(--button-secondary-border-color);
414
+ cursor: not-allowed;
425
415
  box-shadow: none;
426
- color: rgba(0, 0, 0, 0.5);
416
+ color: var(--button-disabled-color);
427
417
  }
428
418
 
429
419
  .tox .tox-button--secondary:focus:not(:disabled) {
430
- background-color: #e3e3e3;
431
- background-image: none;
432
- border-color: #e3e3e3;
433
- box-shadow: none;
434
- color: #000;
435
- }
436
-
437
- .tox .tox-button--secondary:hover:not(:disabled) {
438
- background-color: #e3e3e3;
439
- background-image: none;
440
- border-color: #e3e3e3;
441
- box-shadow: none;
442
- color: #000;
420
+ background-color: var(--button-secondary-bg-color);
421
+ border-color: var(--button-focus-border-color);
422
+ box-shadow: var(--button-focus-box-shadow);
443
423
  }
444
424
 
425
+ .tox .tox-button--secondary:hover:not(:disabled):not(:focus),
445
426
  .tox .tox-button--secondary:active:not(:disabled) {
446
- background-color: #d6d6d6;
427
+ background-color: var(--button-hover-bg-color);
447
428
  background-image: none;
448
- border-color: #d6d6d6;
429
+ border-color: var(--button-hover-border-color);
449
430
  box-shadow: none;
450
- color: #000;
431
+ color: var(--button-secondary-text-color);
451
432
  }
452
433
 
453
434
  .tox .tox-button--icon,
@@ -1553,8 +1534,15 @@ button::-moz-focus-inner {
1553
1534
  .tox .tox-dialog__header .tox-button {
1554
1535
  z-index: 1;
1555
1536
  color: var(--color-white);
1537
+ height: var(--spacing-6);
1556
1538
  background-image: none; // If used in Solidus we need to override the background image
1557
- border: none; // If used in Solidus we need to override the border
1539
+ border-color: transparent; // If used in Solidus we need to override the border
1540
+
1541
+ &:active:not(:disabled),
1542
+ &:hover:not(:disabled) {
1543
+ background-color: var(--color-blue_medium);
1544
+ color: var(--color-white);
1545
+ }
1558
1546
  }
1559
1547
 
1560
1548
  .tox .tox-dialog__draghandle {
@@ -2095,11 +2083,8 @@ body.tox-dialog__disable-scroll {
2095
2083
  }
2096
2084
 
2097
2085
  .tox .tox-color-input span::before {
2098
- background-image: linear-gradient(
2099
- 45deg,
2100
- rgba(0, 0, 0, 0.25) 25%,
2101
- transparent 25%
2102
- ),
2086
+ background-image:
2087
+ linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
2103
2088
  linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
2104
2089
  linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%),
2105
2090
  linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);
@@ -0,0 +1 @@
1
+ /* Left empty on purpose. Tinymce loads this file, but we do not need it */