iron-cms 0.6.0 → 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 (84) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/builds/iron.css +668 -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/jobs/iron/export_job.rb +9 -0
  12. data/app/jobs/iron/import_job.rb +9 -0
  13. data/app/models/concerns/iron/broadcastable.rb +9 -0
  14. data/app/models/concerns/iron/processable.rb +34 -0
  15. data/app/models/iron/account/export.rb +86 -0
  16. data/app/models/iron/account/import.rb +208 -0
  17. data/app/models/iron/block_definition/exportable.rb +14 -0
  18. data/app/models/iron/block_definition/importable.rb +27 -0
  19. data/app/models/iron/block_definition.rb +1 -1
  20. data/app/models/iron/content_type/exportable.rb +20 -0
  21. data/app/models/iron/content_type/importable.rb +32 -0
  22. data/app/models/iron/content_type.rb +1 -1
  23. data/app/models/iron/current.rb +6 -3
  24. data/app/models/iron/entry/exportable.rb +49 -0
  25. data/app/models/iron/entry/importable.rb +181 -0
  26. data/app/models/iron/entry.rb +1 -1
  27. data/app/models/iron/field.rb +9 -1
  28. data/app/models/iron/field_definition/exportable.rb +23 -0
  29. data/app/models/iron/field_definition/importable.rb +39 -0
  30. data/app/models/iron/field_definition.rb +1 -1
  31. data/app/models/iron/fields/block.rb +18 -0
  32. data/app/models/iron/fields/block_list.rb +8 -0
  33. data/app/models/iron/fields/boolean.rb +4 -0
  34. data/app/models/iron/fields/date.rb +4 -0
  35. data/app/models/iron/fields/file.rb +16 -0
  36. data/app/models/iron/fields/number.rb +4 -0
  37. data/app/models/iron/fields/reference.rb +4 -0
  38. data/app/models/iron/fields/reference_list.rb +4 -0
  39. data/app/models/iron/fields/rich_text_area.rb +32 -0
  40. data/app/models/iron/fields/text_area.rb +4 -0
  41. data/app/models/iron/fields/text_field.rb +4 -0
  42. data/app/models/iron/user.rb +2 -0
  43. data/app/views/iron/account/exports/index.html.erb +43 -0
  44. data/app/views/iron/account/exports/new.html.erb +39 -0
  45. data/app/views/iron/account/exports/show.html.erb +40 -0
  46. data/app/views/iron/account/imports/index.html.erb +43 -0
  47. data/app/views/iron/account/imports/new.html.erb +52 -0
  48. data/app/views/iron/account/imports/show.html.erb +37 -0
  49. data/app/views/iron/content_types/index.html.erb +1 -8
  50. data/app/views/iron/entries/fields/_file.html.erb +3 -3
  51. data/app/views/iron/settings/show.html.erb +4 -11
  52. data/config/routes.rb +3 -9
  53. data/db/migrate/20251209103109_create_iron_account_exports.rb +13 -0
  54. data/db/migrate/20251209103110_create_iron_account_imports.rb +13 -0
  55. data/lib/iron/version.rb +1 -1
  56. data/lib/iron.rb +1 -1
  57. metadata +40 -28
  58. data/app/controllers/iron/contents_controller.rb +0 -33
  59. data/app/controllers/iron/schemas_controller.rb +0 -32
  60. data/app/models/concerns/iron/csv_serializable.rb +0 -28
  61. data/app/models/iron/archive.rb +0 -69
  62. data/app/models/iron/block_definition/portable.rb +0 -20
  63. data/app/models/iron/content_export.rb +0 -73
  64. data/app/models/iron/content_import/entry_builder.rb +0 -80
  65. data/app/models/iron/content_import/entry_snapshot.rb +0 -23
  66. data/app/models/iron/content_import/field_reconstructor.rb +0 -276
  67. data/app/models/iron/content_import/field_snapshot.rb +0 -33
  68. data/app/models/iron/content_import/registry.rb +0 -32
  69. data/app/models/iron/content_import/session.rb +0 -89
  70. data/app/models/iron/content_import.rb +0 -15
  71. data/app/models/iron/content_type/portable.rb +0 -30
  72. data/app/models/iron/entry/portable.rb +0 -35
  73. data/app/models/iron/field/portable.rb +0 -33
  74. data/app/models/iron/field_definition/portable.rb +0 -42
  75. data/app/models/iron/schema_archive.rb +0 -71
  76. data/app/models/iron/schema_exporter.rb +0 -15
  77. data/app/models/iron/schema_importer/import_strategy.rb +0 -59
  78. data/app/models/iron/schema_importer/merge_strategy.rb +0 -52
  79. data/app/models/iron/schema_importer/replace_strategy.rb +0 -51
  80. data/app/models/iron/schema_importer/safe_strategy.rb +0 -55
  81. data/app/models/iron/schema_importer.rb +0 -108
  82. data/app/views/iron/contents/new.html.erb +0 -34
  83. data/app/views/iron/schemas/new.html.erb +0 -57
  84. 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 {
@@ -1590,9 +1615,15 @@
1590
1615
  .mb-2 {
1591
1616
  margin-bottom: calc(var(--spacing) * 2);
1592
1617
  }
1618
+ .mb-3 {
1619
+ margin-bottom: calc(var(--spacing) * 3);
1620
+ }
1593
1621
  .mb-4 {
1594
1622
  margin-bottom: calc(var(--spacing) * 4);
1595
1623
  }
1624
+ .mb-6 {
1625
+ margin-bottom: calc(var(--spacing) * 6);
1626
+ }
1596
1627
  .mb-8 {
1597
1628
  margin-bottom: calc(var(--spacing) * 8);
1598
1629
  }
@@ -1831,6 +1862,9 @@
1831
1862
  .h-4 {
1832
1863
  height: calc(var(--spacing) * 4);
1833
1864
  }
1865
+ .h-5 {
1866
+ height: calc(var(--spacing) * 5);
1867
+ }
1834
1868
  .h-6 {
1835
1869
  height: calc(var(--spacing) * 6);
1836
1870
  }
@@ -1864,6 +1898,9 @@
1864
1898
  .w-4 {
1865
1899
  width: calc(var(--spacing) * 4);
1866
1900
  }
1901
+ .w-5 {
1902
+ width: calc(var(--spacing) * 5);
1903
+ }
1867
1904
  .w-11 {
1868
1905
  width: calc(var(--spacing) * 11);
1869
1906
  }
@@ -1943,6 +1980,9 @@
1943
1980
  .animate-appear-then-fade {
1944
1981
  animation: var(--animate-appear-then-fade);
1945
1982
  }
1983
+ .animate-spin {
1984
+ animation: var(--animate-spin);
1985
+ }
1946
1986
  .cursor-default {
1947
1987
  cursor: default;
1948
1988
  }
@@ -1994,6 +2034,9 @@
1994
2034
  .gap-1 {
1995
2035
  gap: calc(var(--spacing) * 1);
1996
2036
  }
2037
+ .gap-1\.5 {
2038
+ gap: calc(var(--spacing) * 1.5);
2039
+ }
1997
2040
  .gap-2 {
1998
2041
  gap: calc(var(--spacing) * 2);
1999
2042
  }
@@ -2027,6 +2070,13 @@
2027
2070
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
2028
2071
  }
2029
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
+ }
2030
2080
  .space-y-6 {
2031
2081
  :where(& > :not(:last-child)) {
2032
2082
  --tw-space-y-reverse: 0;
@@ -2138,6 +2188,10 @@
2138
2188
  border-style: var(--tw-border-style);
2139
2189
  border-width: 1px;
2140
2190
  }
2191
+ .border-2 {
2192
+ border-style: var(--tw-border-style);
2193
+ border-width: 2px;
2194
+ }
2141
2195
  .border-r {
2142
2196
  border-right-style: var(--tw-border-style);
2143
2197
  border-right-width: 1px;
@@ -2158,6 +2212,9 @@
2158
2212
  .border-stone-800 {
2159
2213
  border-color: var(--color-stone-800);
2160
2214
  }
2215
+ .border-t-stone-600 {
2216
+ border-top-color: var(--color-stone-600);
2217
+ }
2161
2218
  .badge-green {
2162
2219
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 15%, transparent);
2163
2220
  @supports (color: color-mix(in lab, red, red)) {
@@ -2346,6 +2403,9 @@
2346
2403
  .py-4 {
2347
2404
  padding-block: calc(var(--spacing) * 4);
2348
2405
  }
2406
+ .py-5 {
2407
+ padding-block: calc(var(--spacing) * 5);
2408
+ }
2349
2409
  .py-8 {
2350
2410
  padding-block: calc(var(--spacing) * 8);
2351
2411
  }
@@ -2485,15 +2545,15 @@
2485
2545
  --tw-tracking: var(--tracking-tight);
2486
2546
  letter-spacing: var(--tracking-tight);
2487
2547
  }
2488
- .text-blue-600 {
2489
- color: var(--color-blue-600);
2490
- }
2491
2548
  .text-current {
2492
2549
  color: currentcolor;
2493
2550
  }
2494
2551
  .text-gray-600 {
2495
2552
  color: var(--color-gray-600);
2496
2553
  }
2554
+ .text-green-600 {
2555
+ color: var(--color-green-600);
2556
+ }
2497
2557
  .text-red-400 {
2498
2558
  color: var(--color-red-400);
2499
2559
  }
@@ -2952,11 +3012,6 @@
2952
3012
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2953
3013
  }
2954
3014
  }
2955
- .focus\:ring-blue-600 {
2956
- &:focus {
2957
- --tw-ring-color: var(--color-blue-600);
2958
- }
2959
- }
2960
3015
  .focus\:ring-stone-500 {
2961
3016
  &:focus {
2962
3017
  --tw-ring-color: var(--color-stone-500);
@@ -3149,6 +3204,16 @@
3149
3204
  gap: calc(var(--spacing) * 8);
3150
3205
  }
3151
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
+ }
3152
3217
  .sm\:px-6 {
3153
3218
  @media (width >= 40rem) {
3154
3219
  padding-inline: calc(var(--spacing) * 6);
@@ -3242,6 +3307,11 @@
3242
3307
  }
3243
3308
  }
3244
3309
  }
3310
+ .dark\:border-stone-600 {
3311
+ @media (prefers-color-scheme: dark) {
3312
+ border-color: var(--color-stone-600);
3313
+ }
3314
+ }
3245
3315
  .dark\:border-white\/10 {
3246
3316
  @media (prefers-color-scheme: dark) {
3247
3317
  border-color: color-mix(in srgb, #fff 10%, transparent);
@@ -3250,6 +3320,11 @@
3250
3320
  }
3251
3321
  }
3252
3322
  }
3323
+ .dark\:border-t-stone-300 {
3324
+ @media (prefers-color-scheme: dark) {
3325
+ border-top-color: var(--color-stone-300);
3326
+ }
3327
+ }
3253
3328
  .dark\:bg-black\/10 {
3254
3329
  @media (prefers-color-scheme: dark) {
3255
3330
  background-color: color-mix(in srgb, #000 10%, transparent);
@@ -3371,6 +3446,12 @@
3371
3446
  }
3372
3447
  }
3373
3448
  }
3449
+ .dark\:outline {
3450
+ @media (prefers-color-scheme: dark) {
3451
+ outline-style: var(--tw-outline-style);
3452
+ outline-width: 1px;
3453
+ }
3454
+ }
3374
3455
  .dark\:-outline-offset-1 {
3375
3456
  @media (prefers-color-scheme: dark) {
3376
3457
  outline-offset: calc(1px * -1);
@@ -3887,102 +3968,80 @@
3887
3968
  input[type="submit"], input[type="button"], button:not(el-select button) {
3888
3969
  @layer components {
3889
3970
  @layer components {
3890
- @layer components {
3891
- --tw-font-weight: var(--font-weight-semibold);
3892
- font-weight: var(--font-weight-semibold);
3893
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
3894
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3895
- --tw-outline-style: none;
3896
- outline-style: none;
3897
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3898
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3899
- transition-duration: var(--tw-duration, var(--default-transition-duration));
3900
- &:focus-visible {
3901
- outline-style: var(--tw-outline-style);
3902
- outline-width: 2px;
3903
- }
3904
- &:focus-visible {
3905
- outline-offset: 2px;
3906
- }
3907
- &:disabled {
3908
- pointer-events: none;
3909
- }
3910
- &:disabled {
3911
- opacity: 50%;
3912
- }
3913
- @media (prefers-color-scheme: dark) {
3914
- --tw-shadow: 0 0 #0000;
3915
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3916
- }
3917
- &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
3918
- @layer components {
3919
- display: inline-flex;
3920
- align-items: center;
3921
- column-gap: calc(var(--spacing) * 1.5);
3922
- border-radius: var(--radius-md);
3923
- padding-inline: calc(var(--spacing) * 2.5);
3924
- padding-block: calc(var(--spacing) * 1.5);
3925
- font-size: var(--text-sm);
3926
- line-height: var(--tw-leading, var(--text-sm--line-height));
3927
- & > svg {
3928
- width: calc(var(--spacing) * 5);
3929
- height: calc(var(--spacing) * 5);
3930
- &:first-child {
3931
- margin-left: calc(var(--spacing) * -0.5);
3932
- }
3933
- &:last-child {
3934
- margin-right: calc(var(--spacing) * -0.5);
3935
- }
3936
- }
3937
- }
3938
- }
3939
- }
3940
- background-color: var(--color-sky-600);
3941
- color: var(--color-white);
3942
- &:hover {
3943
- @media (hover: hover) {
3944
- background-color: var(--color-sky-500);
3945
- }
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;
3946
3983
  }
3947
3984
  &:focus-visible {
3948
- outline-color: var(--color-sky-600);
3985
+ outline-offset: 2px;
3949
3986
  }
3950
- @media (prefers-color-scheme: dark) {
3951
- background-color: var(--color-sky-600);
3987
+ &:disabled {
3988
+ pointer-events: none;
3989
+ }
3990
+ &:disabled {
3991
+ opacity: 50%;
3952
3992
  }
3953
3993
  @media (prefers-color-scheme: dark) {
3954
- &:hover {
3955
- @media (hover: hover) {
3956
- 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
+ }
3957
4016
  }
3958
4017
  }
3959
4018
  }
3960
- @media (prefers-color-scheme: dark) {
3961
- &:focus-visible {
3962
- outline-color: var(--color-sky-500);
3963
- }
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);
3964
4025
  }
3965
4026
  }
3966
- @layer components {
3967
- display: inline-flex;
3968
- align-items: center;
3969
- column-gap: calc(var(--spacing) * 1.5);
3970
- border-radius: var(--radius-md);
3971
- padding-inline: calc(var(--spacing) * 2.5);
3972
- padding-block: calc(var(--spacing) * 1.5);
3973
- font-size: var(--text-sm);
3974
- line-height: var(--tw-leading, var(--text-sm--line-height));
3975
- & > svg {
3976
- width: calc(var(--spacing) * 5);
3977
- height: calc(var(--spacing) * 5);
3978
- &:first-child {
3979
- margin-left: calc(var(--spacing) * -0.5);
3980
- }
3981
- &:last-child {
3982
- 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);
3983
4037
  }
3984
4038
  }
3985
4039
  }
4040
+ @media (prefers-color-scheme: dark) {
4041
+ &:focus-visible {
4042
+ outline-color: var(--color-sky-500);
4043
+ }
4044
+ }
3986
4045
  }
3987
4046
  }
3988
4047
  label + div {
@@ -4003,6 +4062,26 @@
4003
4062
  --tw-ring-color: var(--color-stone-500);
4004
4063
  }
4005
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
+ }
4006
4085
  @layer components {
4007
4086
  lexxy-editor {
4008
4087
  display: block;
@@ -4085,7 +4164,7 @@
4085
4164
  }
4086
4165
  }
4087
4166
  }
4088
- lexxy-toolbar button {
4167
+ lexxy-toolbar button, lexxy-toolbar summary {
4089
4168
  display: inline-flex;
4090
4169
  align-items: center;
4091
4170
  justify-content: center;
@@ -4128,7 +4207,7 @@
4128
4207
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4129
4208
  transition-duration: var(--tw-duration, var(--default-transition-duration));
4130
4209
  }
4131
- 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 {
4132
4211
  background-color: var(--color-stone-200);
4133
4212
  color: var(--color-stone-900);
4134
4213
  @media (prefers-color-scheme: dark) {
@@ -4141,7 +4220,7 @@
4141
4220
  color: var(--color-white);
4142
4221
  }
4143
4222
  }
4144
- lexxy-toolbar button svg {
4223
+ lexxy-toolbar button svg, lexxy-toolbar summary svg {
4145
4224
  width: calc(var(--spacing) * 5);
4146
4225
  height: calc(var(--spacing) * 5);
4147
4226
  color: inherit;
@@ -4173,48 +4252,99 @@
4173
4252
  }
4174
4253
  pointer-events: none;
4175
4254
  }
4176
- 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;
4177
4276
  display: flex;
4178
- align-items: center;
4179
- gap: calc(var(--spacing) * 2);
4180
- padding: calc(var(--spacing) * 2);
4277
+ gap: var(--dropdown-gap);
4278
+ padding: var(--dropdown-padding);
4181
4279
  background-color: var(--color-white);
4182
4280
  @media (prefers-color-scheme: dark) {
4183
4281
  background-color: var(--color-stone-800);
4184
4282
  }
4185
4283
  border-style: var(--tw-border-style);
4186
- border-width: 1px;
4187
- border-color: var(--color-stone-200);
4284
+ border-width: 2px;
4285
+ border-color: var(--color-sky-200);
4188
4286
  @media (prefers-color-scheme: dark) {
4189
- 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);
4190
4288
  @supports (color: color-mix(in lab, red, red)) {
4191
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4289
+ border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
4192
4290
  }
4193
4291
  }
4194
- border-radius: var(--radius-lg);
4195
- --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));
4196
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4197
- &:focus-visible {
4198
- outline-style: var(--tw-outline-style);
4199
- 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);
4200
4296
  }
4201
- &:focus-visible {
4202
- 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
+ }
4203
4309
  }
4310
+ border-end-end-radius: 0;
4311
+ border-end-start-radius: 0;
4204
4312
  }
4205
- lexxy-editor [data-lexxy-link-editor] input {
4206
- border-radius: 0.25rem;
4207
- padding-inline: calc(var(--spacing) * 2);
4208
- padding-block: calc(var(--spacing) * 1);
4209
- font-size: var(--text-sm);
4210
- line-height: var(--tw-leading, var(--text-sm--line-height));
4211
- background-color: var(--color-white);
4313
+ .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button:hover {
4314
+ background-color: var(--color-sky-100);
4212
4315
  @media (prefers-color-scheme: dark) {
4213
- 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);
4214
4317
  @supports (color: color-mix(in lab, red, red)) {
4215
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
4318
+ background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
4216
4319
  }
4217
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);
4218
4348
  border-style: var(--tw-border-style);
4219
4349
  border-width: 1px;
4220
4350
  border-color: var(--color-stone-300);
@@ -4224,6 +4354,10 @@
4224
4354
  border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4225
4355
  }
4226
4356
  }
4357
+ background-color: var(--color-white);
4358
+ @media (prefers-color-scheme: dark) {
4359
+ background-color: var(--color-stone-900);
4360
+ }
4227
4361
  color: var(--color-stone-900);
4228
4362
  @media (prefers-color-scheme: dark) {
4229
4363
  color: var(--color-white);
@@ -4241,181 +4375,322 @@
4241
4375
  outline-width: 2px;
4242
4376
  }
4243
4377
  &:focus-visible {
4244
- outline-color: var(--color-indigo-600);
4378
+ outline-color: var(--color-sky-600);
4245
4379
  }
4246
4380
  @media (prefers-color-scheme: dark) {
4247
4381
  &:focus-visible {
4248
- outline-color: var(--color-indigo-500);
4382
+ outline-color: var(--color-sky-500);
4249
4383
  }
4250
4384
  }
4385
+ box-sizing: border-box;
4386
+ min-width: 40ch;
4387
+ --tw-leading: calc(var(--spacing) * 6);
4388
+ line-height: calc(var(--spacing) * 6);
4251
4389
  }
4252
- lexxy-editor [data-lexxy-link-editor] button {
4253
- border-radius: 0.25rem;
4254
- padding-inline: calc(var(--spacing) * 2);
4255
- padding-block: calc(var(--spacing) * 1);
4256
- font-size: var(--text-sm);
4257
- line-height: var(--tw-leading, var(--text-sm--line-height));
4258
- --tw-font-weight: var(--font-weight-medium);
4259
- font-weight: var(--font-weight-medium);
4260
- background-color: var(--color-indigo-600);
4261
- color: var(--color-white);
4262
- &:hover {
4263
- @media (hover: hover) {
4264
- 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
+ }
4265
4489
  }
4266
4490
  }
4267
- }
4268
- lexxy-link-dialog dialog {
4269
- margin: calc(var(--spacing) * 0);
4270
- padding: calc(var(--spacing) * 3);
4271
- border-radius: var(--radius-lg);
4272
- border-style: var(--tw-border-style);
4273
- border-width: 1px;
4274
- border-color: var(--color-stone-200);
4275
- background-color: var(--color-white);
4276
- --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));
4277
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4278
- @media (prefers-color-scheme: dark) {
4279
- border-color: color-mix(in srgb, #fff 10%, transparent);
4280
- @supports (color: color-mix(in lab, red, red)) {
4281
- 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
+ }
4282
4509
  }
4283
4510
  }
4284
- @media (prefers-color-scheme: dark) {
4285
- background-color: var(--color-stone-800);
4286
- }
4287
- min-width: 18rem;
4288
4511
  }
4289
- lexxy-link-dialog form {
4512
+ lexxy-highlight-dropdown {
4290
4513
  display: flex;
4291
4514
  flex-direction: column;
4292
- gap: calc(var(--spacing) * 3);
4293
4515
  }
4294
- lexxy-link-dialog button {
4295
- display: inline-flex;
4296
- align-items: center;
4297
- justify-content: center;
4298
- width: auto;
4299
- height: auto;
4300
- 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;
4301
4536
  }
4302
- lexxy-link-dialog input[type="url"] {
4303
- width: 100%;
4304
- border-radius: var(--radius-md);
4305
- border-style: var(--tw-border-style);
4306
- border-width: 1px;
4307
- border-color: var(--color-stone-300);
4308
- background-color: var(--color-white);
4309
- padding-inline: calc(var(--spacing) * 3);
4310
- padding-block: calc(var(--spacing) * 2);
4311
- font-size: var(--text-sm);
4312
- 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;
4313
4541
  color: var(--color-stone-900);
4314
- &::placeholder {
4315
- color: var(--color-stone-400);
4316
- }
4317
- &:focus-visible {
4318
- outline-style: var(--tw-outline-style);
4319
- outline-width: 2px;
4320
- }
4321
- &:focus-visible {
4322
- outline-color: var(--color-indigo-600);
4323
- }
4324
- @media (prefers-color-scheme: dark) {
4325
- border-color: color-mix(in srgb, #fff 10%, transparent);
4326
- @supports (color: color-mix(in lab, red, red)) {
4327
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4328
- }
4329
- }
4330
- @media (prefers-color-scheme: dark) {
4331
- background-color: var(--color-stone-900);
4332
- }
4333
4542
  @media (prefers-color-scheme: dark) {
4334
4543
  color: var(--color-white);
4335
4544
  }
4336
- @media (prefers-color-scheme: dark) {
4337
- &::placeholder {
4338
- color: var(--color-stone-500);
4339
- }
4340
- }
4341
- @media (prefers-color-scheme: dark) {
4342
- &:focus-visible {
4343
- outline-color: var(--color-indigo-500);
4344
- }
4345
- }
4545
+ min-height: var(--button-size);
4346
4546
  }
4347
- lexxy-link-dialog .lexxy-dialog-actions {
4348
- display: flex;
4349
- align-items: center;
4350
- justify-content: flex-end;
4351
- gap: calc(var(--spacing) * 2);
4547
+ lexxy-highlight-dropdown button:hover {
4548
+ opacity: 80%;
4352
4549
  }
4353
- lexxy-link-dialog .lexxy-dialog-actions button {
4354
- display: inline-flex;
4355
- align-items: center;
4356
- justify-content: center;
4357
- gap: calc(var(--spacing) * 1);
4358
- border-radius: var(--radius-md);
4359
- padding-inline: calc(var(--spacing) * 3);
4360
- padding-block: calc(var(--spacing) * 1.5);
4361
- font-size: var(--text-sm);
4362
- line-height: var(--tw-leading, var(--text-sm--line-height));
4363
- --tw-font-weight: var(--font-weight-semibold);
4364
- font-weight: var(--font-weight-semibold);
4365
- background-color: var(--color-indigo-600);
4366
- color: var(--color-white);
4367
- &:hover {
4368
- @media (hover: hover) {
4369
- background-color: var(--color-indigo-500);
4370
- }
4371
- }
4372
- --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);
4373
4552
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4374
- &:focus-visible {
4375
- outline-style: var(--tw-outline-style);
4376
- outline-width: 2px;
4377
- }
4378
- &:focus-visible {
4379
- outline-color: var(--color-indigo-500);
4380
- }
4553
+ --tw-ring-color: currentcolor;
4554
+ --tw-ring-inset: inset;
4381
4555
  }
4382
- lexxy-link-dialog .lexxy-dialog-actions button[value="unlink"] {
4383
- background-color: var(--color-stone-100);
4384
- color: var(--color-stone-800);
4385
- &:hover {
4386
- @media (hover: hover) {
4387
- background-color: var(--color-stone-200);
4388
- }
4389
- }
4390
- border-style: var(--tw-border-style);
4391
- border-width: 1px;
4392
- border-color: var(--color-stone-200);
4393
- @media (prefers-color-scheme: dark) {
4394
- border-color: color-mix(in srgb, #fff 20%, transparent);
4395
- @supports (color: color-mix(in lab, red, red)) {
4396
- border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
4397
- }
4398
- }
4399
- @media (prefers-color-scheme: dark) {
4400
- background-color: color-mix(in srgb, #fff 10%, transparent);
4401
- @supports (color: color-mix(in lab, red, red)) {
4402
- 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
+ }
4403
4612
  }
4404
- }
4405
- @media (prefers-color-scheme: dark) {
4406
- color: var(--color-white);
4407
- }
4408
- @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);
4409
4618
  &:hover {
4410
4619
  @media (hover: hover) {
4411
- background-color: color-mix(in srgb, #fff 15%, transparent);
4412
- @supports (color: color-mix(in lab, red, red)) {
4413
- 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
+ }
4414
4648
  }
4415
4649
  }
4416
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
+ }
4417
4676
  }
4418
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
+ }
4419
4694
  lexxy-editor .attachment__progress {
4420
4695
  position: absolute;
4421
4696
  z-index: 10;
@@ -4439,7 +4714,7 @@
4439
4714
  }
4440
4715
  }
4441
4716
  lexxy-editor .attachment__progress::-webkit-progress-value {
4442
- background-color: var(--color-indigo-600);
4717
+ background-color: var(--color-sky-600);
4443
4718
  transition-property: all;
4444
4719
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4445
4720
  transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -4447,7 +4722,7 @@
4447
4722
  transition-duration: 200ms;
4448
4723
  }
4449
4724
  lexxy-editor .attachment__progress::-moz-progress-bar {
4450
- background-color: var(--color-indigo-600);
4725
+ background-color: var(--color-sky-600);
4451
4726
  }
4452
4727
  lexxy-editor .attachment__progress[value="100"] {
4453
4728
  opacity: 0%;
@@ -4556,7 +4831,7 @@
4556
4831
  lexxy-editor [data-trix-mutable] img, lexxy-editor .attachment.selected img {
4557
4832
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
4558
4833
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4559
- --tw-ring-color: var(--color-indigo-500);
4834
+ --tw-ring-color: var(--color-sky-500);
4560
4835
  }
4561
4836
  }
4562
4837
  @layer components {
@@ -4590,21 +4865,21 @@
4590
4865
  font-style: italic;
4591
4866
  }
4592
4867
  .lexxy-content a {
4593
- color: var(--color-indigo-600);
4868
+ color: var(--color-sky-600);
4594
4869
  @media (prefers-color-scheme: dark) {
4595
- color: var(--color-indigo-400);
4870
+ color: var(--color-sky-400);
4596
4871
  }
4597
4872
  text-decoration-line: underline;
4598
4873
  text-underline-offset: 2px;
4599
4874
  &:hover {
4600
4875
  @media (hover: hover) {
4601
- color: var(--color-indigo-500);
4876
+ color: var(--color-sky-500);
4602
4877
  }
4603
4878
  }
4604
4879
  @media (prefers-color-scheme: dark) {
4605
4880
  &:hover {
4606
4881
  @media (hover: hover) {
4607
- color: var(--color-indigo-300);
4882
+ color: var(--color-sky-300);
4608
4883
  }
4609
4884
  }
4610
4885
  }
@@ -4861,6 +5136,16 @@
4861
5136
  }
4862
5137
  }
4863
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
+ }
4864
5149
  @property --tw-font-weight {
4865
5150
  syntax: "*";
4866
5151
  inherits: false;
@@ -4930,11 +5215,6 @@
4930
5215
  inherits: false;
4931
5216
  initial-value: 0 0 #0000;
4932
5217
  }
4933
- @property --tw-outline-style {
4934
- syntax: "*";
4935
- inherits: false;
4936
- initial-value: solid;
4937
- }
4938
5218
  @property --tw-blur {
4939
5219
  syntax: "*";
4940
5220
  inherits: false;
@@ -4988,11 +5268,6 @@
4988
5268
  syntax: "*";
4989
5269
  inherits: false;
4990
5270
  }
4991
- @property --tw-border-style {
4992
- syntax: "*";
4993
- inherits: false;
4994
- initial-value: solid;
4995
- }
4996
5271
  @property --tw-backdrop-blur {
4997
5272
  syntax: "*";
4998
5273
  inherits: false;
@@ -5115,6 +5390,11 @@
5115
5390
  initial-value: "";
5116
5391
  inherits: false;
5117
5392
  }
5393
+ @keyframes spin {
5394
+ to {
5395
+ transform: rotate(360deg);
5396
+ }
5397
+ }
5118
5398
  @keyframes appear-then-fade {
5119
5399
  0%, 100% {
5120
5400
  opacity: 0;
@@ -5128,6 +5408,8 @@
5128
5408
  @layer properties {
5129
5409
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
5130
5410
  *, ::before, ::after, ::backdrop {
5411
+ --tw-border-style: solid;
5412
+ --tw-outline-style: solid;
5131
5413
  --tw-font-weight: initial;
5132
5414
  --tw-shadow: 0 0 #0000;
5133
5415
  --tw-shadow-color: initial;
@@ -5143,7 +5425,6 @@
5143
5425
  --tw-ring-offset-width: 0px;
5144
5426
  --tw-ring-offset-color: #fff;
5145
5427
  --tw-ring-offset-shadow: 0 0 #0000;
5146
- --tw-outline-style: solid;
5147
5428
  --tw-blur: initial;
5148
5429
  --tw-brightness: initial;
5149
5430
  --tw-contrast: initial;
@@ -5157,7 +5438,6 @@
5157
5438
  --tw-drop-shadow-color: initial;
5158
5439
  --tw-drop-shadow-alpha: 100%;
5159
5440
  --tw-drop-shadow-size: initial;
5160
- --tw-border-style: solid;
5161
5441
  --tw-backdrop-blur: initial;
5162
5442
  --tw-backdrop-brightness: initial;
5163
5443
  --tw-backdrop-contrast: initial;