mnfst 0.5.81 → 0.5.83

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 (35) hide show
  1. package/LICENSE +1 -1
  2. package/lib/manifest.accordion.css +4 -4
  3. package/lib/manifest.avatar.css +8 -8
  4. package/lib/manifest.button.css +7 -7
  5. package/lib/manifest.checkbox.css +5 -5
  6. package/lib/manifest.code.css +147 -201
  7. package/lib/manifest.code.js +852 -880
  8. package/lib/manifest.code.min.css +1 -1
  9. package/lib/manifest.colorpicker.css +11 -11
  10. package/lib/manifest.css +253 -207
  11. package/lib/manifest.data.js +4 -1
  12. package/lib/manifest.dialog.css +2 -2
  13. package/lib/manifest.divider.css +2 -2
  14. package/lib/manifest.dropdown.css +9 -9
  15. package/lib/manifest.form.css +10 -10
  16. package/lib/manifest.input.css +9 -9
  17. package/lib/manifest.integrity.json +6 -6
  18. package/lib/manifest.js +5 -5
  19. package/lib/manifest.markdown.js +129 -108
  20. package/lib/manifest.min.css +1 -1
  21. package/lib/manifest.radio.css +1 -1
  22. package/lib/manifest.range.css +7 -7
  23. package/lib/manifest.resize.css +1 -1
  24. package/lib/manifest.sidebar.css +2 -3
  25. package/lib/manifest.slides.css +5 -5
  26. package/lib/manifest.svg.js +34 -27
  27. package/lib/manifest.switch.css +4 -4
  28. package/lib/manifest.table.css +4 -4
  29. package/lib/manifest.theme.css +46 -41
  30. package/lib/manifest.toast.css +7 -7
  31. package/lib/manifest.tooltip.css +3 -3
  32. package/lib/manifest.tooltips.js +41 -0
  33. package/lib/manifest.typography.css +109 -50
  34. package/lib/manifest.utilities.css +41 -53
  35. package/package.json +1 -1
package/lib/manifest.utilities.css CHANGED
@@ -35,7 +35,7 @@
35
35
 
36
36
  /* Content width & horizontal centering */
37
37
  :where(.content) {
38
- width: var(--spacing-content-width, 68.75rem);
38
+ width: var(--spacing-content-width, 74rem);
39
39
  max-width: 100%;
40
40
  margin-inline-start: auto;
41
41
  margin-inline-end: auto
@@ -46,20 +46,8 @@
46
46
  background-color: transparent;
47
47
 
48
48
  &:hover {
49
- background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
49
+ background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
50
50
  }
51
-
52
- /* &.brand:hover {
53
- color: var(--color-brand-inverse, #763518)
54
- }
55
-
56
- &.accent:hover {
57
- color: var(--color-accent-inverse, oklch(100% 0 0))
58
- }
59
-
60
- &.negative:hover {
61
- color: var(--color-negative-inverse, white)
62
- } */
63
51
  }
64
52
 
65
53
  /* Hug */
@@ -74,21 +62,21 @@
74
62
  :where(.outlined) {
75
63
  border-width: 1px;
76
64
  border-style: solid;
77
- border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 90%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
65
+ border-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 90%, var(--color-field-inverse, darkslategray))
78
66
  }
79
67
 
80
68
  /* Dark theme override */
81
69
  .dark :where(.outlined) {
82
- border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
70
+ border-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 80%, var(--color-field-inverse, darkslategray))
83
71
  }
84
72
 
85
73
  /* Transparent */
86
74
  :where(.transparent) {
87
- color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
75
+ color: var(--color-content-neutral, gray);
88
76
  background-color: transparent !important;
89
77
 
90
78
  &:hover {
91
- color: var(--color-content-stark, oklch(16.6% 0.026 267))
79
+ color: var(--color-content-stark, darkslategray)
92
80
  }
93
81
  }
94
82
 
@@ -135,10 +123,10 @@
135
123
  }
136
124
 
137
125
  /* Width and horizontal centering for content wrappers */
138
- &>header nav,
139
- &>footer nav,
126
+ &>header nav:not([popover]),
127
+ &>footer nav:not([popover]),
140
128
  &>main>section:not(.banner, .overlay-dark, .overlay-light) {
141
- width: var(--spacing-content-width, 68.75rem);
129
+ width: var(--spacing-content-width, 74rem);
142
130
  max-width: 100%;
143
131
  margin-inline-start: auto;
144
132
  margin-inline-end: auto
@@ -229,9 +217,9 @@
229
217
  margin-top: calc(1rem * 1.4);
230
218
  padding: 1rem;
231
219
  border-radius: calc(var(--radius, 0.5rem) * 2);
232
- color: var(--color-content-stark, oklch(16.6% 0.026 267));
233
- background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 20%, transparent);
234
- border: 1px solid color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 30%, transparent);
220
+ color: var(--color-content-stark, darkslategray);
221
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 20%, transparent);
222
+ border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 30%, transparent);
235
223
 
236
224
  &:not(.frame) * {
237
225
  color: inherit
@@ -299,7 +287,7 @@
299
287
  &>h1+p {
300
288
  margin-top: 0.625rem;
301
289
  font-size: 1.125rem;
302
- color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
290
+ color: var(--color-content-neutral, gray)
303
291
  }
304
292
 
305
293
  &>h2 {
@@ -379,59 +367,59 @@
379
367
  :where(.trailing) {
380
368
  display: inline-block;
381
369
  margin-inline-start: auto;
382
- color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
370
+ color: var(--color-content-neutral, gray)
383
371
  }
384
372
 
385
373
  /* Brand colors */
386
374
  :where(.brand) {
387
- --color-field-surface: var(--color-brand-surface, #f6c07b);
388
- --color-field-surface-hover: var(--color-brand-surface-hover, #f19b46);
389
- --color-field-inverse: var(--color-brand-inverse, #763518);
390
- --color-content-stark: var(--color-brand-content, #de6618);
391
- --color-content-neutral: color-mix(in oklch, var(--color-brand-content, #de6618) 85%, transparent);
392
- --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent)
375
+ --color-field-surface: var(--color-brand-surface, goldenrod);
376
+ --color-field-surface-hover: var(--color-brand-surface-hover, darkgoldenrod);
377
+ --color-field-inverse: var(--color-brand-inverse, white);
378
+ --color-content-stark: var(--color-brand-content, goldenrod);
379
+ --color-content-neutral: color-mix(in oklch, var(--color-brand-content, goldenrod) 85%, transparent);
380
+ --color-content-subtle: color-mix(in oklch, var(--color-brand-content, goldenrod) 70%, transparent)
393
381
  }
394
382
 
395
383
  /* Accent colors */
396
384
  :where(.accent) {
397
- --color-field-surface: var(--color-accent-surface, oklch(16.6% 0.026 267));
398
- --color-field-surface-hover: var(--color-accent-surface-hover, oklch(28.7% 0.030787 270.1));
399
- --color-field-inverse: var(--color-accent-inverse, oklch(100% 0 0));
400
- --color-content-stark: var(--color-accent-content, oklch(16.6% 0.026 267));
401
- --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 85%, transparent);
402
- --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent)
385
+ --color-field-surface: var(--color-accent-surface, darkslategray);
386
+ --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(darkslategray 90%, white));
387
+ --color-field-inverse: var(--color-accent-inverse, white);
388
+ --color-content-stark: var(--color-accent-content, darkslategray);
389
+ --color-content-neutral: color-mix(in oklch, var(--color-accent-content, darkslategray) 85%, transparent);
390
+ --color-content-subtle: color-mix(in oklch, var(--color-accent-content, darkslategray) 70%, transparent)
403
391
  }
404
392
 
405
393
  /* Negative colors */
406
394
  :where(.negative) {
407
- --color-field-surface: var(--color-negative-surface, #ef4444);
408
- --color-field-surface-hover: var(--color-negative-surface-hover, #dc2626);
409
- --color-field-inverse: var(--color-negative-inverse, white);
410
- --color-content-stark: var(--color-negative-content, #ef4444);
411
- --color-content-neutral: color-mix(in oklch, var(--color-negative-content, #ef4444) 85%, transparent);
412
- --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent)
395
+ --color-field-surface: var(--color-negative-surface, salmon);
396
+ --color-field-surface-hover: var(--color-negative-surface-hover, lightcoral);
397
+ --color-field-inverse: var(--color-negative-inverse, maroon);
398
+ --color-content-stark: var(--color-negative-content, crimson);
399
+ --color-content-neutral: color-mix(in oklch, var(--color-negative-content, crimson) 85%, transparent);
400
+ --color-content-subtle: color-mix(in oklch, var(--color-negative-content, crimson) 70%, transparent)
413
401
  }
414
402
 
415
403
  /* Positive colors */
416
404
  :where(.positive) {
417
- --color-field-surface: var(--color-positive-surface, #16a34a);
418
- --color-field-surface-hover: var(--color-positive-surface-hover, #166534);
419
- --color-field-inverse: var(--color-positive-inverse, white);
420
- --color-content-stark: var(--color-positive-content, #16a34a);
421
- --color-content-neutral: color-mix(in oklch, var(--color-positive-content, #16a34a) 85%, transparent);
422
- --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent)
405
+ --color-field-surface: var(--color-positive-surface, palegreen);
406
+ --color-field-surface-hover: var(--color-positive-surface-hover, lightgreen);
407
+ --color-field-inverse: var(--color-positive-inverse, darkgreen);
408
+ --color-content-stark: var(--color-positive-content, limegreen);
409
+ --color-content-neutral: color-mix(in oklch, var(--color-positive-content, limegreen) 85%, transparent);
410
+ --color-content-subtle: color-mix(in oklch, var(--color-positive-content, limegreen) 70%, transparent)
423
411
  }
424
412
 
425
413
  /* Text colors */
426
414
  :where(.stark) {
427
- color: var(--color-content-stark, oklch(16.6% 0.026 267))
415
+ color: var(--color-content-stark, darkslategray)
428
416
  }
429
417
 
430
418
  :where(.neutral) {
431
- color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
419
+ color: var(--color-content-neutral, gray)
432
420
  }
433
421
 
434
422
  :where(.subtle) {
435
- color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
423
+ color: var(--color-content-subtle, darkgray)
436
424
  }
437
425
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mnfst",
3
- "version": "0.5.81",
3
+ "version": "0.5.83",
4
4
  "private": false,
5
5
  "workspaces": [
6
6
  "templates/starter",