iron-cms 0.5.2 → 0.7.0

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 (87) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/builds/iron.css +682 -388
  3. data/app/assets/tailwind/iron/application.css +1 -0
  4. data/app/assets/tailwind/iron/components/button.css +0 -7
  5. data/app/assets/tailwind/iron/components/checkbox.css +21 -0
  6. data/app/assets/tailwind/iron/components/form.css +1 -1
  7. data/app/assets/tailwind/iron/lexxy.css +165 -51
  8. data/app/controllers/iron/account/exports_controller.rb +26 -0
  9. data/app/controllers/iron/account/imports_controller.rb +27 -0
  10. data/app/helpers/iron/form_builder.rb +7 -0
  11. data/app/javascript/iron/controllers/local_preference_controller.js +62 -0
  12. data/app/jobs/iron/export_job.rb +9 -0
  13. data/app/jobs/iron/import_job.rb +9 -0
  14. data/app/models/concerns/iron/broadcastable.rb +9 -0
  15. data/app/models/concerns/iron/processable.rb +34 -0
  16. data/app/models/iron/account/export.rb +86 -0
  17. data/app/models/iron/account/import.rb +208 -0
  18. data/app/models/iron/block_definition/exportable.rb +14 -0
  19. data/app/models/iron/block_definition/importable.rb +27 -0
  20. data/app/models/iron/block_definition.rb +1 -1
  21. data/app/models/iron/content_type/exportable.rb +20 -0
  22. data/app/models/iron/content_type/importable.rb +32 -0
  23. data/app/models/iron/content_type.rb +1 -1
  24. data/app/models/iron/current.rb +6 -3
  25. data/app/models/iron/entry/exportable.rb +49 -0
  26. data/app/models/iron/entry/importable.rb +181 -0
  27. data/app/models/iron/entry.rb +1 -1
  28. data/app/models/iron/field.rb +9 -1
  29. data/app/models/iron/field_definition/exportable.rb +23 -0
  30. data/app/models/iron/field_definition/importable.rb +39 -0
  31. data/app/models/iron/field_definition.rb +1 -1
  32. data/app/models/iron/fields/block.rb +34 -0
  33. data/app/models/iron/fields/block_list.rb +8 -0
  34. data/app/models/iron/fields/boolean.rb +4 -0
  35. data/app/models/iron/fields/date.rb +4 -0
  36. data/app/models/iron/fields/file.rb +16 -0
  37. data/app/models/iron/fields/number.rb +4 -0
  38. data/app/models/iron/fields/reference.rb +4 -0
  39. data/app/models/iron/fields/reference_list.rb +4 -0
  40. data/app/models/iron/fields/rich_text_area.rb +32 -0
  41. data/app/models/iron/fields/text_area.rb +4 -0
  42. data/app/models/iron/fields/text_field.rb +4 -0
  43. data/app/models/iron/user.rb +2 -0
  44. data/app/views/iron/account/exports/index.html.erb +43 -0
  45. data/app/views/iron/account/exports/new.html.erb +39 -0
  46. data/app/views/iron/account/exports/show.html.erb +40 -0
  47. data/app/views/iron/account/imports/index.html.erb +43 -0
  48. data/app/views/iron/account/imports/new.html.erb +52 -0
  49. data/app/views/iron/account/imports/show.html.erb +37 -0
  50. data/app/views/iron/content_types/index.html.erb +1 -8
  51. data/app/views/iron/entries/fields/_block.html.erb +23 -10
  52. data/app/views/iron/entries/fields/_file.html.erb +3 -3
  53. data/app/views/iron/settings/show.html.erb +4 -11
  54. data/app/views/layouts/iron/application.html.erb +14 -0
  55. data/config/routes.rb +3 -9
  56. data/db/migrate/20251209103109_create_iron_account_exports.rb +13 -0
  57. data/db/migrate/20251209103110_create_iron_account_imports.rb +13 -0
  58. data/lib/iron/version.rb +1 -1
  59. data/lib/iron.rb +1 -1
  60. metadata +41 -28
  61. data/app/controllers/iron/contents_controller.rb +0 -33
  62. data/app/controllers/iron/schemas_controller.rb +0 -32
  63. data/app/models/concerns/iron/csv_serializable.rb +0 -28
  64. data/app/models/iron/archive.rb +0 -69
  65. data/app/models/iron/block_definition/portable.rb +0 -20
  66. data/app/models/iron/content_export.rb +0 -73
  67. data/app/models/iron/content_import/entry_builder.rb +0 -80
  68. data/app/models/iron/content_import/entry_snapshot.rb +0 -23
  69. data/app/models/iron/content_import/field_reconstructor.rb +0 -276
  70. data/app/models/iron/content_import/field_snapshot.rb +0 -33
  71. data/app/models/iron/content_import/registry.rb +0 -32
  72. data/app/models/iron/content_import/session.rb +0 -89
  73. data/app/models/iron/content_import.rb +0 -15
  74. data/app/models/iron/content_type/portable.rb +0 -30
  75. data/app/models/iron/entry/portable.rb +0 -35
  76. data/app/models/iron/field/portable.rb +0 -33
  77. data/app/models/iron/field_definition/portable.rb +0 -42
  78. data/app/models/iron/schema_archive.rb +0 -71
  79. data/app/models/iron/schema_exporter.rb +0 -15
  80. data/app/models/iron/schema_importer/import_strategy.rb +0 -59
  81. data/app/models/iron/schema_importer/merge_strategy.rb +0 -52
  82. data/app/models/iron/schema_importer/replace_strategy.rb +0 -51
  83. data/app/models/iron/schema_importer/safe_strategy.rb +0 -55
  84. data/app/models/iron/schema_importer.rb +0 -108
  85. data/app/views/iron/contents/new.html.erb +0 -34
  86. data/app/views/iron/schemas/new.html.erb +0 -57
  87. data/lib/iron/test_fixtures.rb +0 -50
@@ -17,19 +17,17 @@
17
17
  --color-red-900: oklch(39.6% 0.141 25.723);
18
18
  --color-green-400: oklch(79.2% 0.209 151.711);
19
19
  --color-green-500: oklch(72.3% 0.219 149.579);
20
+ --color-green-600: oklch(62.7% 0.194 149.214);
20
21
  --color-green-700: oklch(52.7% 0.154 150.069);
21
22
  --color-sky-100: oklch(95.1% 0.026 236.824);
23
+ --color-sky-200: oklch(90.1% 0.058 230.902);
24
+ --color-sky-300: oklch(82.8% 0.111 230.318);
22
25
  --color-sky-400: oklch(74.6% 0.16 232.661);
23
26
  --color-sky-500: oklch(68.5% 0.169 237.323);
24
27
  --color-sky-600: oklch(58.8% 0.158 241.966);
25
28
  --color-blue-400: oklch(70.7% 0.165 254.624);
26
29
  --color-blue-500: oklch(62.3% 0.214 259.815);
27
- --color-blue-600: oklch(54.6% 0.245 262.881);
28
30
  --color-blue-700: oklch(48.8% 0.243 264.376);
29
- --color-indigo-300: oklch(78.5% 0.115 274.713);
30
- --color-indigo-400: oklch(67.3% 0.182 276.935);
31
- --color-indigo-500: oklch(58.5% 0.233 277.117);
32
- --color-indigo-600: oklch(51.1% 0.262 276.966);
33
31
  --color-pink-400: oklch(71.8% 0.202 349.761);
34
32
  --color-pink-600: oklch(59.2% 0.249 0.584);
35
33
  --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -80,6 +78,7 @@
80
78
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
81
79
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
82
80
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
81
+ --animate-spin: spin 1s linear infinite;
83
82
  --blur-xs: 4px;
84
83
  --blur-sm: 8px;
85
84
  --blur-xl: 24px;
@@ -239,6 +238,133 @@
239
238
  }
240
239
  }
241
240
  @layer utilities {
241
+ .checkbox {
242
+ display: grid;
243
+ width: calc(var(--spacing) * 4);
244
+ height: calc(var(--spacing) * 4);
245
+ grid-template-columns: repeat(1, minmax(0, 1fr));
246
+ & input {
247
+ grid-column-start: 1;
248
+ grid-row-start: 1;
249
+ appearance: none;
250
+ border-radius: var(--radius-sm);
251
+ border-style: var(--tw-border-style);
252
+ border-width: 1px;
253
+ border-color: var(--color-stone-300);
254
+ background-color: var(--color-white);
255
+ &:checked {
256
+ border-color: var(--color-sky-600);
257
+ }
258
+ &:checked {
259
+ background-color: var(--color-sky-600);
260
+ }
261
+ &:focus-visible {
262
+ outline-style: var(--tw-outline-style);
263
+ outline-width: 2px;
264
+ }
265
+ &:focus-visible {
266
+ outline-offset: 2px;
267
+ }
268
+ &:focus-visible {
269
+ outline-color: var(--color-sky-600);
270
+ }
271
+ &:disabled {
272
+ border-color: var(--color-stone-300);
273
+ }
274
+ &:disabled {
275
+ background-color: var(--color-stone-100);
276
+ }
277
+ &:disabled {
278
+ &:checked {
279
+ background-color: var(--color-stone-100);
280
+ }
281
+ }
282
+ @media (prefers-color-scheme: dark) {
283
+ border-color: color-mix(in srgb, #fff 10%, transparent);
284
+ @supports (color: color-mix(in lab, red, red)) {
285
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
286
+ }
287
+ }
288
+ @media (prefers-color-scheme: dark) {
289
+ background-color: color-mix(in srgb, #fff 5%, transparent);
290
+ @supports (color: color-mix(in lab, red, red)) {
291
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
292
+ }
293
+ }
294
+ @media (prefers-color-scheme: dark) {
295
+ &:checked {
296
+ border-color: var(--color-sky-500);
297
+ }
298
+ }
299
+ @media (prefers-color-scheme: dark) {
300
+ &:checked {
301
+ background-color: var(--color-sky-500);
302
+ }
303
+ }
304
+ @media (prefers-color-scheme: dark) {
305
+ &:focus-visible {
306
+ outline-color: var(--color-sky-500);
307
+ }
308
+ }
309
+ @media (prefers-color-scheme: dark) {
310
+ &:disabled {
311
+ border-color: color-mix(in srgb, #fff 5%, transparent);
312
+ @supports (color: color-mix(in lab, red, red)) {
313
+ border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
314
+ }
315
+ }
316
+ }
317
+ @media (prefers-color-scheme: dark) {
318
+ &:disabled {
319
+ background-color: color-mix(in srgb, #fff 10%, transparent);
320
+ @supports (color: color-mix(in lab, red, red)) {
321
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
322
+ }
323
+ }
324
+ }
325
+ @media (prefers-color-scheme: dark) {
326
+ &:disabled {
327
+ &:checked {
328
+ background-color: color-mix(in srgb, #fff 10%, transparent);
329
+ @supports (color: color-mix(in lab, red, red)) {
330
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
331
+ }
332
+ }
333
+ }
334
+ }
335
+ @media (forced-colors: active) {
336
+ appearance: auto;
337
+ }
338
+ }
339
+ & svg {
340
+ pointer-events: none;
341
+ grid-column-start: 1;
342
+ grid-row-start: 1;
343
+ width: calc(var(--spacing) * 3.5);
344
+ height: calc(var(--spacing) * 3.5);
345
+ align-self: center;
346
+ justify-self: center;
347
+ stroke: var(--color-white);
348
+ opacity: 0%;
349
+ &:is(:where(.group\/checkbox):has(*:checked) *) {
350
+ opacity: 100%;
351
+ }
352
+ &:is(:where(.group\/checkbox):has(*:disabled) *) {
353
+ stroke: color-mix(in srgb, oklch(14.7% 0.004 49.25) 25%, transparent);
354
+ @supports (color: color-mix(in lab, red, red)) {
355
+ stroke: color-mix(in oklab, var(--color-stone-950) 25%, transparent);
356
+ }
357
+ }
358
+ @media (prefers-color-scheme: dark) {
359
+ &:is(:where(.group\/checkbox):has(*:disabled) *) {
360
+ stroke: color-mix(in srgb, #fff 25%, transparent);
361
+ @supports (color: color-mix(in lab, red, red)) {
362
+ stroke: color-mix(in oklab, var(--color-white) 25%, transparent);
363
+ }
364
+ }
365
+ }
366
+ }
367
+ }
242
368
  .button-secondary {
243
369
  @layer components {
244
370
  @layer components {
@@ -336,107 +462,6 @@
336
462
  }
337
463
  }
338
464
  }
339
- .btn {
340
- @layer components {
341
- @layer components {
342
- @layer components {
343
- --tw-font-weight: var(--font-weight-semibold);
344
- font-weight: var(--font-weight-semibold);
345
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
346
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
347
- --tw-outline-style: none;
348
- outline-style: none;
349
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
350
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
351
- transition-duration: var(--tw-duration, var(--default-transition-duration));
352
- &:focus-visible {
353
- outline-style: var(--tw-outline-style);
354
- outline-width: 2px;
355
- }
356
- &:focus-visible {
357
- outline-offset: 2px;
358
- }
359
- &:disabled {
360
- pointer-events: none;
361
- }
362
- &:disabled {
363
- opacity: 50%;
364
- }
365
- @media (prefers-color-scheme: dark) {
366
- --tw-shadow: 0 0 #0000;
367
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
368
- }
369
- &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
370
- @layer components {
371
- display: inline-flex;
372
- align-items: center;
373
- column-gap: calc(var(--spacing) * 1.5);
374
- border-radius: var(--radius-md);
375
- padding-inline: calc(var(--spacing) * 2.5);
376
- padding-block: calc(var(--spacing) * 1.5);
377
- font-size: var(--text-sm);
378
- line-height: var(--tw-leading, var(--text-sm--line-height));
379
- & > svg {
380
- width: calc(var(--spacing) * 5);
381
- height: calc(var(--spacing) * 5);
382
- &:first-child {
383
- margin-left: calc(var(--spacing) * -0.5);
384
- }
385
- &:last-child {
386
- margin-right: calc(var(--spacing) * -0.5);
387
- }
388
- }
389
- }
390
- }
391
- }
392
- background-color: var(--color-sky-600);
393
- color: var(--color-white);
394
- &:hover {
395
- @media (hover: hover) {
396
- background-color: var(--color-sky-500);
397
- }
398
- }
399
- &:focus-visible {
400
- outline-color: var(--color-sky-600);
401
- }
402
- @media (prefers-color-scheme: dark) {
403
- background-color: var(--color-sky-600);
404
- }
405
- @media (prefers-color-scheme: dark) {
406
- &:hover {
407
- @media (hover: hover) {
408
- background-color: var(--color-sky-400);
409
- }
410
- }
411
- }
412
- @media (prefers-color-scheme: dark) {
413
- &:focus-visible {
414
- outline-color: var(--color-sky-500);
415
- }
416
- }
417
- }
418
- @layer components {
419
- display: inline-flex;
420
- align-items: center;
421
- column-gap: calc(var(--spacing) * 1.5);
422
- border-radius: var(--radius-md);
423
- padding-inline: calc(var(--spacing) * 2.5);
424
- padding-block: calc(var(--spacing) * 1.5);
425
- font-size: var(--text-sm);
426
- line-height: var(--tw-leading, var(--text-sm--line-height));
427
- & > svg {
428
- width: calc(var(--spacing) * 5);
429
- height: calc(var(--spacing) * 5);
430
- &:first-child {
431
- margin-left: calc(var(--spacing) * -0.5);
432
- }
433
- &:last-child {
434
- margin-right: calc(var(--spacing) * -0.5);
435
- }
436
- }
437
- }
438
- }
439
- }
440
465
  .button-destructive {
441
466
  @layer components {
442
467
  @layer components {
@@ -676,6 +701,9 @@
676
701
  }
677
702
  }
678
703
  }
704
+ .collapse {
705
+ visibility: collapse;
706
+ }
679
707
  .visible {
680
708
  visibility: visible;
681
709
  }
@@ -1587,9 +1615,15 @@
1587
1615
  .mb-2 {
1588
1616
  margin-bottom: calc(var(--spacing) * 2);
1589
1617
  }
1618
+ .mb-3 {
1619
+ margin-bottom: calc(var(--spacing) * 3);
1620
+ }
1590
1621
  .mb-4 {
1591
1622
  margin-bottom: calc(var(--spacing) * 4);
1592
1623
  }
1624
+ .mb-6 {
1625
+ margin-bottom: calc(var(--spacing) * 6);
1626
+ }
1593
1627
  .mb-8 {
1594
1628
  margin-bottom: calc(var(--spacing) * 8);
1595
1629
  }
@@ -1828,6 +1862,9 @@
1828
1862
  .h-4 {
1829
1863
  height: calc(var(--spacing) * 4);
1830
1864
  }
1865
+ .h-5 {
1866
+ height: calc(var(--spacing) * 5);
1867
+ }
1831
1868
  .h-6 {
1832
1869
  height: calc(var(--spacing) * 6);
1833
1870
  }
@@ -1861,6 +1898,9 @@
1861
1898
  .w-4 {
1862
1899
  width: calc(var(--spacing) * 4);
1863
1900
  }
1901
+ .w-5 {
1902
+ width: calc(var(--spacing) * 5);
1903
+ }
1864
1904
  .w-11 {
1865
1905
  width: calc(var(--spacing) * 11);
1866
1906
  }
@@ -1940,6 +1980,9 @@
1940
1980
  .animate-appear-then-fade {
1941
1981
  animation: var(--animate-appear-then-fade);
1942
1982
  }
1983
+ .animate-spin {
1984
+ animation: var(--animate-spin);
1985
+ }
1943
1986
  .cursor-default {
1944
1987
  cursor: default;
1945
1988
  }
@@ -1985,9 +2028,15 @@
1985
2028
  .justify-center {
1986
2029
  justify-content: center;
1987
2030
  }
2031
+ .gap-0\.5 {
2032
+ gap: calc(var(--spacing) * 0.5);
2033
+ }
1988
2034
  .gap-1 {
1989
2035
  gap: calc(var(--spacing) * 1);
1990
2036
  }
2037
+ .gap-1\.5 {
2038
+ gap: calc(var(--spacing) * 1.5);
2039
+ }
1991
2040
  .gap-2 {
1992
2041
  gap: calc(var(--spacing) * 2);
1993
2042
  }
@@ -2021,6 +2070,13 @@
2021
2070
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
2022
2071
  }
2023
2072
  }
2073
+ .space-y-5 {
2074
+ :where(& > :not(:last-child)) {
2075
+ --tw-space-y-reverse: 0;
2076
+ margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
2077
+ margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
2078
+ }
2079
+ }
2024
2080
  .space-y-6 {
2025
2081
  :where(& > :not(:last-child)) {
2026
2082
  --tw-space-y-reverse: 0;
@@ -2132,6 +2188,10 @@
2132
2188
  border-style: var(--tw-border-style);
2133
2189
  border-width: 1px;
2134
2190
  }
2191
+ .border-2 {
2192
+ border-style: var(--tw-border-style);
2193
+ border-width: 2px;
2194
+ }
2135
2195
  .border-r {
2136
2196
  border-right-style: var(--tw-border-style);
2137
2197
  border-right-width: 1px;
@@ -2152,6 +2212,9 @@
2152
2212
  .border-stone-800 {
2153
2213
  border-color: var(--color-stone-800);
2154
2214
  }
2215
+ .border-t-stone-600 {
2216
+ border-top-color: var(--color-stone-600);
2217
+ }
2155
2218
  .badge-green {
2156
2219
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 15%, transparent);
2157
2220
  @supports (color: color-mix(in lab, red, red)) {
@@ -2334,9 +2397,15 @@
2334
2397
  .py-3 {
2335
2398
  padding-block: calc(var(--spacing) * 3);
2336
2399
  }
2400
+ .py-3\.5 {
2401
+ padding-block: calc(var(--spacing) * 3.5);
2402
+ }
2337
2403
  .py-4 {
2338
2404
  padding-block: calc(var(--spacing) * 4);
2339
2405
  }
2406
+ .py-5 {
2407
+ padding-block: calc(var(--spacing) * 5);
2408
+ }
2340
2409
  .py-8 {
2341
2410
  padding-block: calc(var(--spacing) * 8);
2342
2411
  }
@@ -2476,15 +2545,15 @@
2476
2545
  --tw-tracking: var(--tracking-tight);
2477
2546
  letter-spacing: var(--tracking-tight);
2478
2547
  }
2479
- .text-blue-600 {
2480
- color: var(--color-blue-600);
2481
- }
2482
2548
  .text-current {
2483
2549
  color: currentcolor;
2484
2550
  }
2485
2551
  .text-gray-600 {
2486
2552
  color: var(--color-gray-600);
2487
2553
  }
2554
+ .text-green-600 {
2555
+ color: var(--color-green-600);
2556
+ }
2488
2557
  .text-red-400 {
2489
2558
  color: var(--color-red-400);
2490
2559
  }
@@ -2786,6 +2855,11 @@
2786
2855
  display: none;
2787
2856
  }
2788
2857
  }
2858
+ .group-open\:hidden {
2859
+ &:is(:where(.group):is([open], :popover-open, :open) *) {
2860
+ display: none;
2861
+ }
2862
+ }
2789
2863
  .group-open\:rotate-180 {
2790
2864
  &:is(:where(.group):is([open], :popover-open, :open) *) {
2791
2865
  rotate: 180deg;
@@ -2938,11 +3012,6 @@
2938
3012
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2939
3013
  }
2940
3014
  }
2941
- .focus\:ring-blue-600 {
2942
- &:focus {
2943
- --tw-ring-color: var(--color-blue-600);
2944
- }
2945
- }
2946
3015
  .focus\:ring-stone-500 {
2947
3016
  &:focus {
2948
3017
  --tw-ring-color: var(--color-stone-500);
@@ -3135,6 +3204,16 @@
3135
3204
  gap: calc(var(--spacing) * 8);
3136
3205
  }
3137
3206
  }
3207
+ .sm\:rounded-lg {
3208
+ @media (width >= 40rem) {
3209
+ border-radius: var(--radius-lg);
3210
+ }
3211
+ }
3212
+ .sm\:p-6 {
3213
+ @media (width >= 40rem) {
3214
+ padding: calc(var(--spacing) * 6);
3215
+ }
3216
+ }
3138
3217
  .sm\:px-6 {
3139
3218
  @media (width >= 40rem) {
3140
3219
  padding-inline: calc(var(--spacing) * 6);
@@ -3228,6 +3307,11 @@
3228
3307
  }
3229
3308
  }
3230
3309
  }
3310
+ .dark\:border-stone-600 {
3311
+ @media (prefers-color-scheme: dark) {
3312
+ border-color: var(--color-stone-600);
3313
+ }
3314
+ }
3231
3315
  .dark\:border-white\/10 {
3232
3316
  @media (prefers-color-scheme: dark) {
3233
3317
  border-color: color-mix(in srgb, #fff 10%, transparent);
@@ -3236,6 +3320,11 @@
3236
3320
  }
3237
3321
  }
3238
3322
  }
3323
+ .dark\:border-t-stone-300 {
3324
+ @media (prefers-color-scheme: dark) {
3325
+ border-top-color: var(--color-stone-300);
3326
+ }
3327
+ }
3239
3328
  .dark\:bg-black\/10 {
3240
3329
  @media (prefers-color-scheme: dark) {
3241
3330
  background-color: color-mix(in srgb, #000 10%, transparent);
@@ -3357,6 +3446,12 @@
3357
3446
  }
3358
3447
  }
3359
3448
  }
3449
+ .dark\:outline {
3450
+ @media (prefers-color-scheme: dark) {
3451
+ outline-style: var(--tw-outline-style);
3452
+ outline-width: 1px;
3453
+ }
3454
+ }
3360
3455
  .dark\:-outline-offset-1 {
3361
3456
  @media (prefers-color-scheme: dark) {
3362
3457
  outline-offset: calc(1px * -1);
@@ -3873,102 +3968,80 @@
3873
3968
  input[type="submit"], input[type="button"], button:not(el-select button) {
3874
3969
  @layer components {
3875
3970
  @layer components {
3876
- @layer components {
3877
- --tw-font-weight: var(--font-weight-semibold);
3878
- font-weight: var(--font-weight-semibold);
3879
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
3880
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3881
- --tw-outline-style: none;
3882
- outline-style: none;
3883
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3884
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3885
- transition-duration: var(--tw-duration, var(--default-transition-duration));
3886
- &:focus-visible {
3887
- outline-style: var(--tw-outline-style);
3888
- outline-width: 2px;
3889
- }
3890
- &:focus-visible {
3891
- outline-offset: 2px;
3892
- }
3893
- &:disabled {
3894
- pointer-events: none;
3895
- }
3896
- &:disabled {
3897
- opacity: 50%;
3898
- }
3899
- @media (prefers-color-scheme: dark) {
3900
- --tw-shadow: 0 0 #0000;
3901
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3902
- }
3903
- &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
3904
- @layer components {
3905
- display: inline-flex;
3906
- align-items: center;
3907
- column-gap: calc(var(--spacing) * 1.5);
3908
- border-radius: var(--radius-md);
3909
- padding-inline: calc(var(--spacing) * 2.5);
3910
- padding-block: calc(var(--spacing) * 1.5);
3911
- font-size: var(--text-sm);
3912
- line-height: var(--tw-leading, var(--text-sm--line-height));
3913
- & > svg {
3914
- width: calc(var(--spacing) * 5);
3915
- height: calc(var(--spacing) * 5);
3916
- &:first-child {
3917
- margin-left: calc(var(--spacing) * -0.5);
3918
- }
3919
- &:last-child {
3920
- margin-right: calc(var(--spacing) * -0.5);
3921
- }
3922
- }
3923
- }
3924
- }
3925
- }
3926
- background-color: var(--color-sky-600);
3927
- color: var(--color-white);
3928
- &:hover {
3929
- @media (hover: hover) {
3930
- background-color: var(--color-sky-500);
3931
- }
3971
+ --tw-font-weight: var(--font-weight-semibold);
3972
+ font-weight: var(--font-weight-semibold);
3973
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
3974
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3975
+ --tw-outline-style: none;
3976
+ outline-style: none;
3977
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3978
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3979
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3980
+ &:focus-visible {
3981
+ outline-style: var(--tw-outline-style);
3982
+ outline-width: 2px;
3932
3983
  }
3933
3984
  &:focus-visible {
3934
- outline-color: var(--color-sky-600);
3985
+ outline-offset: 2px;
3935
3986
  }
3936
- @media (prefers-color-scheme: dark) {
3937
- background-color: var(--color-sky-600);
3987
+ &:disabled {
3988
+ pointer-events: none;
3989
+ }
3990
+ &:disabled {
3991
+ opacity: 50%;
3938
3992
  }
3939
3993
  @media (prefers-color-scheme: dark) {
3940
- &:hover {
3941
- @media (hover: hover) {
3942
- background-color: var(--color-sky-400);
3994
+ --tw-shadow: 0 0 #0000;
3995
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3996
+ }
3997
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
3998
+ @layer components {
3999
+ display: inline-flex;
4000
+ align-items: center;
4001
+ column-gap: calc(var(--spacing) * 1.5);
4002
+ border-radius: var(--radius-md);
4003
+ padding-inline: calc(var(--spacing) * 2.5);
4004
+ padding-block: calc(var(--spacing) * 1.5);
4005
+ font-size: var(--text-sm);
4006
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4007
+ & > svg {
4008
+ width: calc(var(--spacing) * 5);
4009
+ height: calc(var(--spacing) * 5);
4010
+ &:first-child {
4011
+ margin-left: calc(var(--spacing) * -0.5);
4012
+ }
4013
+ &:last-child {
4014
+ margin-right: calc(var(--spacing) * -0.5);
4015
+ }
3943
4016
  }
3944
4017
  }
3945
4018
  }
3946
- @media (prefers-color-scheme: dark) {
3947
- &:focus-visible {
3948
- outline-color: var(--color-sky-500);
3949
- }
4019
+ }
4020
+ background-color: var(--color-sky-600);
4021
+ color: var(--color-white);
4022
+ &:hover {
4023
+ @media (hover: hover) {
4024
+ background-color: var(--color-sky-500);
3950
4025
  }
3951
4026
  }
3952
- @layer components {
3953
- display: inline-flex;
3954
- align-items: center;
3955
- column-gap: calc(var(--spacing) * 1.5);
3956
- border-radius: var(--radius-md);
3957
- padding-inline: calc(var(--spacing) * 2.5);
3958
- padding-block: calc(var(--spacing) * 1.5);
3959
- font-size: var(--text-sm);
3960
- line-height: var(--tw-leading, var(--text-sm--line-height));
3961
- & > svg {
3962
- width: calc(var(--spacing) * 5);
3963
- height: calc(var(--spacing) * 5);
3964
- &:first-child {
3965
- margin-left: calc(var(--spacing) * -0.5);
3966
- }
3967
- &:last-child {
3968
- margin-right: calc(var(--spacing) * -0.5);
4027
+ &:focus-visible {
4028
+ outline-color: var(--color-sky-600);
4029
+ }
4030
+ @media (prefers-color-scheme: dark) {
4031
+ background-color: var(--color-sky-600);
4032
+ }
4033
+ @media (prefers-color-scheme: dark) {
4034
+ &:hover {
4035
+ @media (hover: hover) {
4036
+ background-color: var(--color-sky-400);
3969
4037
  }
3970
4038
  }
3971
4039
  }
4040
+ @media (prefers-color-scheme: dark) {
4041
+ &:focus-visible {
4042
+ outline-color: var(--color-sky-500);
4043
+ }
4044
+ }
3972
4045
  }
3973
4046
  }
3974
4047
  label + div {
@@ -3989,6 +4062,26 @@
3989
4062
  --tw-ring-color: var(--color-stone-500);
3990
4063
  }
3991
4064
  }
4065
+ :root {
4066
+ --highlight-1: rgb(136, 118, 38);
4067
+ --highlight-2: rgb(185, 94, 6);
4068
+ --highlight-3: rgb(207, 0, 0);
4069
+ --highlight-4: rgb(216, 28, 170);
4070
+ --highlight-5: rgb(144, 19, 254);
4071
+ --highlight-6: rgb(5, 98, 185);
4072
+ --highlight-7: rgb(17, 138, 15);
4073
+ --highlight-8: rgb(148, 82, 22);
4074
+ --highlight-9: rgb(102, 102, 102);
4075
+ --highlight-bg-1: rgba(229, 223, 6, 0.3);
4076
+ --highlight-bg-2: rgba(255, 185, 87, 0.3);
4077
+ --highlight-bg-3: rgba(255, 118, 118, 0.3);
4078
+ --highlight-bg-4: rgba(248, 137, 216, 0.3);
4079
+ --highlight-bg-5: rgba(190, 165, 255, 0.3);
4080
+ --highlight-bg-6: rgba(124, 192, 252, 0.3);
4081
+ --highlight-bg-7: rgba(140, 255, 129, 0.3);
4082
+ --highlight-bg-8: rgba(221, 170, 123, 0.3);
4083
+ --highlight-bg-9: rgba(200, 200, 200, 0.3);
4084
+ }
3992
4085
  @layer components {
3993
4086
  lexxy-editor {
3994
4087
  display: block;
@@ -4071,7 +4164,7 @@
4071
4164
  }
4072
4165
  }
4073
4166
  }
4074
- lexxy-toolbar button {
4167
+ lexxy-toolbar button, lexxy-toolbar summary {
4075
4168
  display: inline-flex;
4076
4169
  align-items: center;
4077
4170
  justify-content: center;
@@ -4114,7 +4207,7 @@
4114
4207
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4115
4208
  transition-duration: var(--tw-duration, var(--default-transition-duration));
4116
4209
  }
4117
- lexxy-toolbar button[aria-pressed="true"], lexxy-toolbar button.active {
4210
+ lexxy-toolbar button[aria-pressed="true"], lexxy-toolbar button.active, lexxy-toolbar details[open] > summary {
4118
4211
  background-color: var(--color-stone-200);
4119
4212
  color: var(--color-stone-900);
4120
4213
  @media (prefers-color-scheme: dark) {
@@ -4127,7 +4220,7 @@
4127
4220
  color: var(--color-white);
4128
4221
  }
4129
4222
  }
4130
- lexxy-toolbar button svg {
4223
+ lexxy-toolbar button svg, lexxy-toolbar summary svg {
4131
4224
  width: calc(var(--spacing) * 5);
4132
4225
  height: calc(var(--spacing) * 5);
4133
4226
  color: inherit;
@@ -4159,48 +4252,99 @@
4159
4252
  }
4160
4253
  pointer-events: none;
4161
4254
  }
4162
- lexxy-editor [data-lexxy-link-editor] {
4255
+ .lexxy-editor__toolbar-dropdown {
4256
+ position: relative;
4257
+ -webkit-user-select: none;
4258
+ user-select: none;
4259
+ }
4260
+ .lexxy-editor__toolbar-dropdown > summary {
4261
+ list-style: none;
4262
+ cursor: pointer;
4263
+ }
4264
+ .lexxy-editor__toolbar-dropdown > summary::-webkit-details-marker {
4265
+ display: none;
4266
+ }
4267
+ .lexxy-editor__toolbar-dropdown > summary::marker {
4268
+ display: none;
4269
+ content: "";
4270
+ }
4271
+ .lexxy-editor__toolbar-dropdown-content {
4272
+ --dropdown-padding: calc(var(--spacing) * 3);
4273
+ --dropdown-gap: calc(var(--spacing) * 1.5);
4274
+ position: absolute;
4275
+ z-index: 10;
4163
4276
  display: flex;
4164
- align-items: center;
4165
- gap: calc(var(--spacing) * 2);
4166
- padding: calc(var(--spacing) * 2);
4277
+ gap: var(--dropdown-gap);
4278
+ padding: var(--dropdown-padding);
4167
4279
  background-color: var(--color-white);
4168
4280
  @media (prefers-color-scheme: dark) {
4169
4281
  background-color: var(--color-stone-800);
4170
4282
  }
4171
4283
  border-style: var(--tw-border-style);
4172
- border-width: 1px;
4173
- border-color: var(--color-stone-200);
4284
+ border-width: 2px;
4285
+ border-color: var(--color-sky-200);
4174
4286
  @media (prefers-color-scheme: dark) {
4175
- border-color: color-mix(in srgb, #fff 10%, transparent);
4287
+ border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
4176
4288
  @supports (color: color-mix(in lab, red, red)) {
4177
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4289
+ border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
4178
4290
  }
4179
4291
  }
4180
- border-radius: var(--radius-lg);
4181
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4182
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4183
- &:focus-visible {
4184
- outline-style: var(--tw-outline-style);
4185
- outline-width: 2px;
4292
+ border-radius: var(--radius-md);
4293
+ color: var(--color-stone-900);
4294
+ @media (prefers-color-scheme: dark) {
4295
+ color: var(--color-white);
4186
4296
  }
4187
- &:focus-visible {
4188
- outline-color: var(--color-indigo-600);
4297
+ inset-inline-start: calc(var(--spacing) * 0);
4298
+ top: calc(var(--spacing) * 8);
4299
+ max-width: 40ch;
4300
+ border-start-start-radius: 0;
4301
+ }
4302
+ .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button {
4303
+ background-color: var(--color-sky-100);
4304
+ @media (prefers-color-scheme: dark) {
4305
+ background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
4306
+ @supports (color: color-mix(in lab, red, red)) {
4307
+ background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
4308
+ }
4189
4309
  }
4310
+ border-end-end-radius: 0;
4311
+ border-end-start-radius: 0;
4190
4312
  }
4191
- lexxy-editor [data-lexxy-link-editor] input {
4192
- border-radius: 0.25rem;
4193
- padding-inline: calc(var(--spacing) * 2);
4194
- padding-block: calc(var(--spacing) * 1);
4195
- font-size: var(--text-sm);
4196
- line-height: var(--tw-leading, var(--text-sm--line-height));
4197
- background-color: var(--color-white);
4313
+ .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button:hover {
4314
+ background-color: var(--color-sky-100);
4198
4315
  @media (prefers-color-scheme: dark) {
4199
- background-color: color-mix(in srgb, #fff 5%, transparent);
4316
+ background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
4200
4317
  @supports (color: color-mix(in lab, red, red)) {
4201
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4318
+ background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
4202
4319
  }
4203
4320
  }
4321
+ }
4322
+ [overflowing] .lexxy-editor__toolbar-dropdown {
4323
+ position: static;
4324
+ }
4325
+ [overflowing] .lexxy-editor__toolbar-dropdown-content {
4326
+ --dropdown-padding: calc(var(--spacing) * 2);
4327
+ inset-inline-start: var(--dropdown-padding);
4328
+ inset-inline-end: var(--dropdown-padding);
4329
+ }
4330
+ lexxy-link-dropdown {
4331
+ flex: 1;
4332
+ }
4333
+ lexxy-link-dropdown > * {
4334
+ flex: 1;
4335
+ }
4336
+ lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
4337
+ margin-top: calc(var(--spacing) * 2);
4338
+ display: flex;
4339
+ flex: 1;
4340
+ gap: calc(var(--spacing) * 2);
4341
+ font-size: var(--text-sm);
4342
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4343
+ }
4344
+ lexxy-link-dropdown input[type="url"] {
4345
+ width: 100%;
4346
+ border-radius: var(--radius-md);
4347
+ padding-inline: calc(var(--spacing) * 2);
4204
4348
  border-style: var(--tw-border-style);
4205
4349
  border-width: 1px;
4206
4350
  border-color: var(--color-stone-300);
@@ -4210,6 +4354,10 @@
4210
4354
  border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4211
4355
  }
4212
4356
  }
4357
+ background-color: var(--color-white);
4358
+ @media (prefers-color-scheme: dark) {
4359
+ background-color: var(--color-stone-900);
4360
+ }
4213
4361
  color: var(--color-stone-900);
4214
4362
  @media (prefers-color-scheme: dark) {
4215
4363
  color: var(--color-white);
@@ -4227,181 +4375,322 @@
4227
4375
  outline-width: 2px;
4228
4376
  }
4229
4377
  &:focus-visible {
4230
- outline-color: var(--color-indigo-600);
4378
+ outline-color: var(--color-sky-600);
4231
4379
  }
4232
4380
  @media (prefers-color-scheme: dark) {
4233
4381
  &:focus-visible {
4234
- outline-color: var(--color-indigo-500);
4382
+ outline-color: var(--color-sky-500);
4235
4383
  }
4236
4384
  }
4385
+ box-sizing: border-box;
4386
+ min-width: 40ch;
4387
+ --tw-leading: calc(var(--spacing) * 6);
4388
+ line-height: calc(var(--spacing) * 6);
4237
4389
  }
4238
- lexxy-editor [data-lexxy-link-editor] button {
4239
- border-radius: 0.25rem;
4240
- padding-inline: calc(var(--spacing) * 2);
4241
- padding-block: calc(var(--spacing) * 1);
4242
- font-size: var(--text-sm);
4243
- line-height: var(--tw-leading, var(--text-sm--line-height));
4244
- --tw-font-weight: var(--font-weight-medium);
4245
- font-weight: var(--font-weight-medium);
4246
- background-color: var(--color-indigo-600);
4247
- color: var(--color-white);
4248
- &:hover {
4249
- @media (hover: hover) {
4250
- background-color: var(--color-indigo-500);
4390
+ [overflowing] lexxy-link-dropdown input[type="url"] {
4391
+ min-width: calc(var(--spacing) * 0);
4392
+ }
4393
+ lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions button {
4394
+ width: 100%;
4395
+ justify-content: center;
4396
+ @layer components {
4397
+ @layer components {
4398
+ --tw-font-weight: var(--font-weight-semibold);
4399
+ font-weight: var(--font-weight-semibold);
4400
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
4401
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4402
+ --tw-outline-style: none;
4403
+ outline-style: none;
4404
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
4405
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4406
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
4407
+ &:focus-visible {
4408
+ outline-style: var(--tw-outline-style);
4409
+ outline-width: 2px;
4410
+ }
4411
+ &:focus-visible {
4412
+ outline-offset: 2px;
4413
+ }
4414
+ &:disabled {
4415
+ pointer-events: none;
4416
+ }
4417
+ &:disabled {
4418
+ opacity: 50%;
4419
+ }
4420
+ @media (prefers-color-scheme: dark) {
4421
+ --tw-shadow: 0 0 #0000;
4422
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4423
+ }
4424
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
4425
+ @layer components {
4426
+ display: inline-flex;
4427
+ align-items: center;
4428
+ column-gap: calc(var(--spacing) * 1.5);
4429
+ border-radius: var(--radius-md);
4430
+ padding-inline: calc(var(--spacing) * 2.5);
4431
+ padding-block: calc(var(--spacing) * 1.5);
4432
+ font-size: var(--text-sm);
4433
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4434
+ & > svg {
4435
+ width: calc(var(--spacing) * 5);
4436
+ height: calc(var(--spacing) * 5);
4437
+ &:first-child {
4438
+ margin-left: calc(var(--spacing) * -0.5);
4439
+ }
4440
+ &:last-child {
4441
+ margin-right: calc(var(--spacing) * -0.5);
4442
+ }
4443
+ }
4444
+ }
4445
+ }
4446
+ }
4447
+ background-color: var(--color-white);
4448
+ color: var(--color-stone-900);
4449
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
4450
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4451
+ --tw-inset-ring-color: var(--color-stone-300);
4452
+ &:hover {
4453
+ @media (hover: hover) {
4454
+ background-color: var(--color-stone-50);
4455
+ }
4456
+ }
4457
+ &:focus-visible {
4458
+ outline-color: var(--color-stone-600);
4459
+ }
4460
+ @media (prefers-color-scheme: dark) {
4461
+ background-color: color-mix(in srgb, #fff 10%, transparent);
4462
+ @supports (color: color-mix(in lab, red, red)) {
4463
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4464
+ }
4465
+ }
4466
+ @media (prefers-color-scheme: dark) {
4467
+ color: var(--color-white);
4468
+ }
4469
+ @media (prefers-color-scheme: dark) {
4470
+ --tw-inset-ring-color: color-mix(in srgb, #fff 5%, transparent);
4471
+ @supports (color: color-mix(in lab, red, red)) {
4472
+ --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4473
+ }
4474
+ }
4475
+ @media (prefers-color-scheme: dark) {
4476
+ &:hover {
4477
+ @media (hover: hover) {
4478
+ background-color: color-mix(in srgb, #fff 20%, transparent);
4479
+ @supports (color: color-mix(in lab, red, red)) {
4480
+ background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
4481
+ }
4482
+ }
4483
+ }
4484
+ }
4485
+ @media (prefers-color-scheme: dark) {
4486
+ &:focus-visible {
4487
+ outline-color: var(--color-stone-500);
4488
+ }
4251
4489
  }
4252
4490
  }
4253
- }
4254
- lexxy-link-dialog dialog {
4255
- margin: calc(var(--spacing) * 0);
4256
- padding: calc(var(--spacing) * 3);
4257
- border-radius: var(--radius-lg);
4258
- border-style: var(--tw-border-style);
4259
- border-width: 1px;
4260
- border-color: var(--color-stone-200);
4261
- background-color: var(--color-white);
4262
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4263
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4264
- @media (prefers-color-scheme: dark) {
4265
- border-color: color-mix(in srgb, #fff 10%, transparent);
4266
- @supports (color: color-mix(in lab, red, red)) {
4267
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4491
+ @layer components {
4492
+ display: inline-flex;
4493
+ align-items: center;
4494
+ column-gap: calc(var(--spacing) * 1);
4495
+ border-radius: var(--radius-sm);
4496
+ padding-inline: calc(var(--spacing) * 2);
4497
+ padding-block: calc(var(--spacing) * 1);
4498
+ font-size: var(--text-sm);
4499
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4500
+ & > svg {
4501
+ width: calc(var(--spacing) * 5);
4502
+ height: calc(var(--spacing) * 5);
4503
+ &:first-child {
4504
+ margin-left: calc(var(--spacing) * -0.5);
4505
+ }
4506
+ &:last-child {
4507
+ margin-right: calc(var(--spacing) * -0.5);
4508
+ }
4268
4509
  }
4269
4510
  }
4270
- @media (prefers-color-scheme: dark) {
4271
- background-color: var(--color-stone-800);
4272
- }
4273
- min-width: 18rem;
4274
4511
  }
4275
- lexxy-link-dialog form {
4512
+ lexxy-highlight-dropdown {
4276
4513
  display: flex;
4277
4514
  flex-direction: column;
4278
- gap: calc(var(--spacing) * 3);
4279
4515
  }
4280
- lexxy-link-dialog button {
4281
- display: inline-flex;
4282
- align-items: center;
4283
- justify-content: center;
4284
- width: auto;
4285
- height: auto;
4286
- min-width: calc(var(--spacing) * 0);
4516
+ lexxy-highlight-dropdown [data-button-group] {
4517
+ display: flex;
4518
+ flex-direction: row;
4519
+ gap: var(--dropdown-gap);
4520
+ justify-content: flex-start;
4521
+ }
4522
+ lexxy-highlight-dropdown [data-button-group] button {
4523
+ --button-size: calc(var(--spacing) * 8);
4524
+ aspect-ratio: 1 / 1;
4525
+ width: var(--button-size);
4526
+ max-width: var(--button-size);
4527
+ min-width: var(--button-size);
4528
+ }
4529
+ lexxy-highlight-dropdown [data-button-group] button::after {
4530
+ content: "Aa";
4531
+ position: absolute;
4532
+ inset: calc(var(--spacing) * 0);
4533
+ align-self: center;
4534
+ display: inline-block;
4535
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4287
4536
  }
4288
- lexxy-link-dialog input[type="url"] {
4289
- width: 100%;
4290
- border-radius: var(--radius-md);
4291
- border-style: var(--tw-border-style);
4292
- border-width: 1px;
4293
- border-color: var(--color-stone-300);
4294
- background-color: var(--color-white);
4295
- padding-inline: calc(var(--spacing) * 3);
4296
- padding-block: calc(var(--spacing) * 2);
4297
- font-size: var(--text-sm);
4298
- line-height: var(--tw-leading, var(--text-sm--line-height));
4537
+ lexxy-highlight-dropdown button {
4538
+ --button-size: calc(var(--spacing) * 8);
4539
+ position: relative;
4540
+ flex: 1;
4299
4541
  color: var(--color-stone-900);
4300
- &::placeholder {
4301
- color: var(--color-stone-400);
4302
- }
4303
- &:focus-visible {
4304
- outline-style: var(--tw-outline-style);
4305
- outline-width: 2px;
4306
- }
4307
- &:focus-visible {
4308
- outline-color: var(--color-indigo-600);
4309
- }
4310
- @media (prefers-color-scheme: dark) {
4311
- border-color: color-mix(in srgb, #fff 10%, transparent);
4312
- @supports (color: color-mix(in lab, red, red)) {
4313
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4314
- }
4315
- }
4316
- @media (prefers-color-scheme: dark) {
4317
- background-color: var(--color-stone-900);
4318
- }
4319
4542
  @media (prefers-color-scheme: dark) {
4320
4543
  color: var(--color-white);
4321
4544
  }
4322
- @media (prefers-color-scheme: dark) {
4323
- &::placeholder {
4324
- color: var(--color-stone-500);
4325
- }
4326
- }
4327
- @media (prefers-color-scheme: dark) {
4328
- &:focus-visible {
4329
- outline-color: var(--color-indigo-500);
4330
- }
4331
- }
4545
+ min-height: var(--button-size);
4332
4546
  }
4333
- lexxy-link-dialog .lexxy-dialog-actions {
4334
- display: flex;
4335
- align-items: center;
4336
- justify-content: flex-end;
4337
- gap: calc(var(--spacing) * 2);
4547
+ lexxy-highlight-dropdown button:hover {
4548
+ opacity: 80%;
4338
4549
  }
4339
- lexxy-link-dialog .lexxy-dialog-actions button {
4340
- display: inline-flex;
4341
- align-items: center;
4342
- justify-content: center;
4343
- gap: calc(var(--spacing) * 1);
4344
- border-radius: var(--radius-md);
4345
- padding-inline: calc(var(--spacing) * 3);
4346
- padding-block: calc(var(--spacing) * 1.5);
4347
- font-size: var(--text-sm);
4348
- line-height: var(--tw-leading, var(--text-sm--line-height));
4349
- --tw-font-weight: var(--font-weight-semibold);
4350
- font-weight: var(--font-weight-semibold);
4351
- background-color: var(--color-indigo-600);
4352
- color: var(--color-white);
4353
- &:hover {
4354
- @media (hover: hover) {
4355
- background-color: var(--color-indigo-500);
4356
- }
4357
- }
4358
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4550
+ lexxy-highlight-dropdown button[aria-pressed="true"] {
4551
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
4359
4552
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4360
- &:focus-visible {
4361
- outline-style: var(--tw-outline-style);
4362
- outline-width: 2px;
4363
- }
4364
- &:focus-visible {
4365
- outline-color: var(--color-indigo-500);
4366
- }
4553
+ --tw-ring-color: currentcolor;
4554
+ --tw-ring-inset: inset;
4367
4555
  }
4368
- lexxy-link-dialog .lexxy-dialog-actions button[value="unlink"] {
4369
- background-color: var(--color-stone-100);
4370
- color: var(--color-stone-800);
4371
- &:hover {
4372
- @media (hover: hover) {
4373
- background-color: var(--color-stone-200);
4374
- }
4375
- }
4376
- border-style: var(--tw-border-style);
4377
- border-width: 1px;
4378
- border-color: var(--color-stone-200);
4379
- @media (prefers-color-scheme: dark) {
4380
- border-color: color-mix(in srgb, #fff 20%, transparent);
4381
- @supports (color: color-mix(in lab, red, red)) {
4382
- border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
4383
- }
4384
- }
4385
- @media (prefers-color-scheme: dark) {
4386
- background-color: color-mix(in srgb, #fff 10%, transparent);
4387
- @supports (color: color-mix(in lab, red, red)) {
4388
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4556
+ lexxy-highlight-dropdown button[aria-pressed="true"]::after {
4557
+ content: "✓";
4558
+ }
4559
+ lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset {
4560
+ margin-top: calc(var(--spacing) * 2);
4561
+ width: 100%;
4562
+ @layer components {
4563
+ @layer components {
4564
+ --tw-font-weight: var(--font-weight-semibold);
4565
+ font-weight: var(--font-weight-semibold);
4566
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
4567
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4568
+ --tw-outline-style: none;
4569
+ outline-style: none;
4570
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
4571
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4572
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
4573
+ &:focus-visible {
4574
+ outline-style: var(--tw-outline-style);
4575
+ outline-width: 2px;
4576
+ }
4577
+ &:focus-visible {
4578
+ outline-offset: 2px;
4579
+ }
4580
+ &:disabled {
4581
+ pointer-events: none;
4582
+ }
4583
+ &:disabled {
4584
+ opacity: 50%;
4585
+ }
4586
+ @media (prefers-color-scheme: dark) {
4587
+ --tw-shadow: 0 0 #0000;
4588
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4589
+ }
4590
+ &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
4591
+ @layer components {
4592
+ display: inline-flex;
4593
+ align-items: center;
4594
+ column-gap: calc(var(--spacing) * 1.5);
4595
+ border-radius: var(--radius-md);
4596
+ padding-inline: calc(var(--spacing) * 2.5);
4597
+ padding-block: calc(var(--spacing) * 1.5);
4598
+ font-size: var(--text-sm);
4599
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4600
+ & > svg {
4601
+ width: calc(var(--spacing) * 5);
4602
+ height: calc(var(--spacing) * 5);
4603
+ &:first-child {
4604
+ margin-left: calc(var(--spacing) * -0.5);
4605
+ }
4606
+ &:last-child {
4607
+ margin-right: calc(var(--spacing) * -0.5);
4608
+ }
4609
+ }
4610
+ }
4611
+ }
4389
4612
  }
4390
- }
4391
- @media (prefers-color-scheme: dark) {
4392
- color: var(--color-white);
4393
- }
4394
- @media (prefers-color-scheme: dark) {
4613
+ background-color: var(--color-white);
4614
+ color: var(--color-stone-900);
4615
+ --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
4616
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4617
+ --tw-inset-ring-color: var(--color-stone-300);
4395
4618
  &:hover {
4396
4619
  @media (hover: hover) {
4397
- background-color: color-mix(in srgb, #fff 15%, transparent);
4398
- @supports (color: color-mix(in lab, red, red)) {
4399
- background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
4620
+ background-color: var(--color-stone-50);
4621
+ }
4622
+ }
4623
+ &:focus-visible {
4624
+ outline-color: var(--color-stone-600);
4625
+ }
4626
+ @media (prefers-color-scheme: dark) {
4627
+ background-color: color-mix(in srgb, #fff 10%, transparent);
4628
+ @supports (color: color-mix(in lab, red, red)) {
4629
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4630
+ }
4631
+ }
4632
+ @media (prefers-color-scheme: dark) {
4633
+ color: var(--color-white);
4634
+ }
4635
+ @media (prefers-color-scheme: dark) {
4636
+ --tw-inset-ring-color: color-mix(in srgb, #fff 5%, transparent);
4637
+ @supports (color: color-mix(in lab, red, red)) {
4638
+ --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4639
+ }
4640
+ }
4641
+ @media (prefers-color-scheme: dark) {
4642
+ &:hover {
4643
+ @media (hover: hover) {
4644
+ background-color: color-mix(in srgb, #fff 20%, transparent);
4645
+ @supports (color: color-mix(in lab, red, red)) {
4646
+ background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
4647
+ }
4400
4648
  }
4401
4649
  }
4402
4650
  }
4651
+ @media (prefers-color-scheme: dark) {
4652
+ &:focus-visible {
4653
+ outline-color: var(--color-stone-500);
4654
+ }
4655
+ }
4656
+ }
4657
+ @layer components {
4658
+ display: inline-flex;
4659
+ align-items: center;
4660
+ column-gap: calc(var(--spacing) * 1);
4661
+ border-radius: var(--radius-sm);
4662
+ padding-inline: calc(var(--spacing) * 2);
4663
+ padding-block: calc(var(--spacing) * 1);
4664
+ font-size: var(--text-sm);
4665
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4666
+ & > svg {
4667
+ width: calc(var(--spacing) * 5);
4668
+ height: calc(var(--spacing) * 5);
4669
+ &:first-child {
4670
+ margin-left: calc(var(--spacing) * -0.5);
4671
+ }
4672
+ &:last-child {
4673
+ margin-right: calc(var(--spacing) * -0.5);
4674
+ }
4675
+ }
4403
4676
  }
4404
4677
  }
4678
+ lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset[disabled] {
4679
+ display: none;
4680
+ }
4681
+ [overflowing] lexxy-highlight-dropdown {
4682
+ width: fit-content;
4683
+ }
4684
+ [overflowing] lexxy-highlight-dropdown [data-button-group] {
4685
+ flex-wrap: wrap;
4686
+ }
4687
+ [overflowing] lexxy-highlight-dropdown [data-button-group] button {
4688
+ --button-size: calc(var(--spacing) * 6);
4689
+ }
4690
+ [overflowing] lexxy-highlight-dropdown [data-button-group] button::after {
4691
+ font-size: var(--text-sm);
4692
+ line-height: var(--tw-leading, var(--text-sm--line-height));
4693
+ }
4405
4694
  lexxy-editor .attachment__progress {
4406
4695
  position: absolute;
4407
4696
  z-index: 10;
@@ -4425,7 +4714,7 @@
4425
4714
  }
4426
4715
  }
4427
4716
  lexxy-editor .attachment__progress::-webkit-progress-value {
4428
- background-color: var(--color-indigo-600);
4717
+ background-color: var(--color-sky-600);
4429
4718
  transition-property: all;
4430
4719
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4431
4720
  transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -4433,7 +4722,7 @@
4433
4722
  transition-duration: 200ms;
4434
4723
  }
4435
4724
  lexxy-editor .attachment__progress::-moz-progress-bar {
4436
- background-color: var(--color-indigo-600);
4725
+ background-color: var(--color-sky-600);
4437
4726
  }
4438
4727
  lexxy-editor .attachment__progress[value="100"] {
4439
4728
  opacity: 0%;
@@ -4542,7 +4831,7 @@
4542
4831
  lexxy-editor [data-trix-mutable] img, lexxy-editor .attachment.selected img {
4543
4832
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
4544
4833
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4545
- --tw-ring-color: var(--color-indigo-500);
4834
+ --tw-ring-color: var(--color-sky-500);
4546
4835
  }
4547
4836
  }
4548
4837
  @layer components {
@@ -4576,21 +4865,21 @@
4576
4865
  font-style: italic;
4577
4866
  }
4578
4867
  .lexxy-content a {
4579
- color: var(--color-indigo-600);
4868
+ color: var(--color-sky-600);
4580
4869
  @media (prefers-color-scheme: dark) {
4581
- color: var(--color-indigo-400);
4870
+ color: var(--color-sky-400);
4582
4871
  }
4583
4872
  text-decoration-line: underline;
4584
4873
  text-underline-offset: 2px;
4585
4874
  &:hover {
4586
4875
  @media (hover: hover) {
4587
- color: var(--color-indigo-500);
4876
+ color: var(--color-sky-500);
4588
4877
  }
4589
4878
  }
4590
4879
  @media (prefers-color-scheme: dark) {
4591
4880
  &:hover {
4592
4881
  @media (hover: hover) {
4593
- color: var(--color-indigo-300);
4882
+ color: var(--color-sky-300);
4594
4883
  }
4595
4884
  }
4596
4885
  }
@@ -4847,6 +5136,16 @@
4847
5136
  }
4848
5137
  }
4849
5138
  }
5139
+ @property --tw-border-style {
5140
+ syntax: "*";
5141
+ inherits: false;
5142
+ initial-value: solid;
5143
+ }
5144
+ @property --tw-outline-style {
5145
+ syntax: "*";
5146
+ inherits: false;
5147
+ initial-value: solid;
5148
+ }
4850
5149
  @property --tw-font-weight {
4851
5150
  syntax: "*";
4852
5151
  inherits: false;
@@ -4916,11 +5215,6 @@
4916
5215
  inherits: false;
4917
5216
  initial-value: 0 0 #0000;
4918
5217
  }
4919
- @property --tw-outline-style {
4920
- syntax: "*";
4921
- inherits: false;
4922
- initial-value: solid;
4923
- }
4924
5218
  @property --tw-blur {
4925
5219
  syntax: "*";
4926
5220
  inherits: false;
@@ -4974,11 +5268,6 @@
4974
5268
  syntax: "*";
4975
5269
  inherits: false;
4976
5270
  }
4977
- @property --tw-border-style {
4978
- syntax: "*";
4979
- inherits: false;
4980
- initial-value: solid;
4981
- }
4982
5271
  @property --tw-backdrop-blur {
4983
5272
  syntax: "*";
4984
5273
  inherits: false;
@@ -5101,6 +5390,11 @@
5101
5390
  initial-value: "";
5102
5391
  inherits: false;
5103
5392
  }
5393
+ @keyframes spin {
5394
+ to {
5395
+ transform: rotate(360deg);
5396
+ }
5397
+ }
5104
5398
  @keyframes appear-then-fade {
5105
5399
  0%, 100% {
5106
5400
  opacity: 0;
@@ -5114,6 +5408,8 @@
5114
5408
  @layer properties {
5115
5409
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
5116
5410
  *, ::before, ::after, ::backdrop {
5411
+ --tw-border-style: solid;
5412
+ --tw-outline-style: solid;
5117
5413
  --tw-font-weight: initial;
5118
5414
  --tw-shadow: 0 0 #0000;
5119
5415
  --tw-shadow-color: initial;
@@ -5129,7 +5425,6 @@
5129
5425
  --tw-ring-offset-width: 0px;
5130
5426
  --tw-ring-offset-color: #fff;
5131
5427
  --tw-ring-offset-shadow: 0 0 #0000;
5132
- --tw-outline-style: solid;
5133
5428
  --tw-blur: initial;
5134
5429
  --tw-brightness: initial;
5135
5430
  --tw-contrast: initial;
@@ -5143,7 +5438,6 @@
5143
5438
  --tw-drop-shadow-color: initial;
5144
5439
  --tw-drop-shadow-alpha: 100%;
5145
5440
  --tw-drop-shadow-size: initial;
5146
- --tw-border-style: solid;
5147
5441
  --tw-backdrop-blur: initial;
5148
5442
  --tw-backdrop-brightness: initial;
5149
5443
  --tw-backdrop-contrast: initial;