mnfst 0.5.106 → 0.5.108

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 (28) hide show
  1. package/lib/manifest.accordion.css +4 -4
  2. package/lib/manifest.avatar.css +8 -8
  3. package/lib/manifest.button.css +6 -6
  4. package/lib/manifest.checkbox.css +5 -5
  5. package/lib/manifest.code.css +12 -12
  6. package/lib/manifest.code.min.css +1 -1
  7. package/lib/manifest.colorpicker.css +10 -10
  8. package/lib/manifest.css +134 -134
  9. package/lib/manifest.data.js +34 -22
  10. package/lib/manifest.dialog.css +2 -2
  11. package/lib/manifest.divider.css +2 -2
  12. package/lib/manifest.dropdown.css +9 -9
  13. package/lib/manifest.form.css +3 -3
  14. package/lib/manifest.input.css +8 -8
  15. package/lib/manifest.integrity.json +1 -1
  16. package/lib/manifest.min.css +1 -1
  17. package/lib/manifest.radio.css +1 -1
  18. package/lib/manifest.range.css +5 -5
  19. package/lib/manifest.resize.css +1 -1
  20. package/lib/manifest.sidebar.css +2 -2
  21. package/lib/manifest.switch.css +4 -4
  22. package/lib/manifest.table.css +4 -4
  23. package/lib/manifest.theme.css +27 -15
  24. package/lib/manifest.toast.css +7 -7
  25. package/lib/manifest.tooltip.css +2 -2
  26. package/lib/manifest.typography.css +22 -22
  27. package/lib/manifest.utilities.css +27 -27
  28. package/package.json +1 -1
package/lib/manifest.accordion.css CHANGED
@@ -29,7 +29,7 @@
29
29
  align-items: center;
30
30
  padding: var(--spacing-field-padding, 0.625rem) 0;
31
31
  font-weight: bold;
32
- color: var(--color-content-stark, darkslategray);
32
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
33
33
  user-select: none;
34
34
  cursor: pointer;
35
35
  transition: var(--transition, all .05s ease-in-out);
@@ -42,11 +42,11 @@
42
42
  }
43
43
 
44
44
  &:hover {
45
- color: color-mix(in oklch, var(--color-surface-1, whitesmoke) 40%, var(--color-content-stark, darkslategray))
45
+ color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 40%, var(--color-content-stark, darkslateoklch(43.9% 0 0)))
46
46
  }
47
47
 
48
48
  &:active {
49
- color: color-mix(in oklch, var(--color-surface-1, whitesmoke) 50%, var(--color-content-stark, darkslategray))
49
+ color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 50%, var(--color-content-stark, darkslateoklch(43.9% 0 0)))
50
50
  }
51
51
 
52
52
  /* Add custom icon */
@@ -55,7 +55,7 @@
55
55
  order: 1;
56
56
  width: 1rem;
57
57
  height: 1rem;
58
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 50%, var(--color-field-inverse, darkslategray));
58
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
59
59
  -webkit-mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
60
60
  mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
61
61
  -webkit-mask-repeat: no-repeat;
package/lib/manifest.avatar.css CHANGED
@@ -14,8 +14,8 @@
14
14
  font-weight: bold;
15
15
  text-align: center;
16
16
  text-transform: uppercase;
17
- color: var(--color-field-inverse, darkslategray);
18
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
17
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
18
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
19
19
  background-clip: content-box;
20
20
  background-size: cover;
21
21
  background-position: center;
@@ -23,7 +23,7 @@
23
23
 
24
24
  /* Icon */
25
25
  &[x-icon] {
26
- color: var(--color-content-subtle, darkgray)
26
+ color: var(--color-content-subtle, oklch(55.6% 0 0))
27
27
  }
28
28
 
29
29
  /* Profile pic */
@@ -47,8 +47,8 @@
47
47
  width: 9px;
48
48
  height: 9px;
49
49
  z-index: 1;
50
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
51
- border: 1px solid var(--color-page, white);
50
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
51
+ border: 1px solid var(--color-page, oklch(98.5% 0 0));
52
52
  border-radius: 50%
53
53
  }
54
54
  }
@@ -59,7 +59,7 @@
59
59
  background-blend-mode: normal;
60
60
 
61
61
  &:hover {
62
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
62
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
63
63
  background-blend-mode: multiply;
64
64
 
65
65
  & img {
@@ -94,7 +94,7 @@
94
94
  padding-inline-end: 1.5ch;
95
95
 
96
96
  &:hover .avatar {
97
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
97
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
98
98
  transition: var(--transition, all .05s ease-in-out)
99
99
  }
100
100
  }
@@ -107,7 +107,7 @@
107
107
 
108
108
  :where(.avatar) {
109
109
  margin-inline-end: calc(var(--spacing-field-height, 2.25rem) * -0.3);
110
- box-shadow: 0 0 0 3px var(--color-page, white)
110
+ box-shadow: 0 0 0 3px var(--color-page, oklch(98.5% 0 0))
111
111
  }
112
112
  }
113
113
  }
package/lib/manifest.button.css CHANGED
@@ -17,13 +17,13 @@
17
17
  overflow: hidden;
18
18
  white-space: nowrap;
19
19
  text-overflow: ellipsis;
20
- color: var(--color-field-inverse, darkslategray);
21
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
20
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
21
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
22
22
  border-width: 0;
23
23
  border-style: solid;
24
24
  border-color: transparent;
25
25
  border-radius: var(--radius, 0.5rem);
26
- outline-color: var(--color-line, color-mix(darkslategray 10%, transparent));
26
+ outline-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
27
27
  cursor: pointer;
28
28
  transition: var(--transition, all .05s ease-in-out);
29
29
  appearance: button;
@@ -52,15 +52,15 @@
52
52
  }
53
53
 
54
54
  &:hover {
55
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
55
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
56
56
  }
57
57
 
58
58
  &:active {
59
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
59
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
60
60
  }
61
61
 
62
62
  &:focus-visible {
63
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
63
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
64
64
  }
65
65
  }
66
66
 
package/lib/manifest.checkbox.css CHANGED
@@ -16,13 +16,13 @@
16
16
  &:checked {
17
17
 
18
18
  &:hover {
19
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
20
- border-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
19
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
20
+ border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
21
21
  }
22
22
 
23
23
  &:active {
24
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
25
- border-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
24
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
25
+ border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
26
26
  }
27
27
  }
28
28
 
@@ -34,7 +34,7 @@
34
34
  left: 50%;
35
35
  width: 60%;
36
36
  height: 60%;
37
- background-color: var(--color-field-inverse, darkslategray);
37
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
38
38
  -webkit-mask-image: var(--icon-checkbox, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
39
39
  mask-image: var(--icon-checkbox, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
40
40
  -webkit-mask-repeat: no-repeat;
package/lib/manifest.code.css CHANGED
@@ -245,8 +245,8 @@
245
245
  padding-inline-end: var(--spacing-field-height);
246
246
  font-family: var(--font-sans, sans-serif);
247
247
  font-size: inherit;
248
- color: var(--color-content-neutral, gray);
249
- background-color: color-mix(in oklch, var(--color-content-stark, darkslategray) 8%, transparent);
248
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
249
+ background-color: color-mix(in oklch, var(--color-content-stark, darkslateoklch(43.9% 0 0)) 8%, transparent);
250
250
 
251
251
  &:has(button[role="tab"]) {
252
252
  padding-inline-start: calc(var(--spacing, 0.25rem) * 2)
@@ -276,13 +276,13 @@
276
276
  border: 0 none;
277
277
 
278
278
  &:hover {
279
- color: var(--color-content-stark, darkslategray);
280
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
279
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
280
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
281
281
  }
282
282
 
283
283
  &[aria-selected="true"] {
284
284
  position: relative;
285
- color: var(--color-brand-content, goldenrod);
285
+ color: var(--color-brand-content, oklch(68.1% 0.162 75.834));
286
286
  pointer-events: none
287
287
  }
288
288
  }
@@ -301,7 +301,7 @@
301
301
  background-color: transparent;
302
302
 
303
303
  &::after {
304
- background-color: var(--color-field-inverse, darkslategray)
304
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0))
305
305
  }
306
306
  }
307
307
 
@@ -310,7 +310,7 @@
310
310
  display: block;
311
311
  width: 0.8125rem;
312
312
  height: 0.8125rem;
313
- background-color: var(--color-content-neutral, gray);
313
+ background-color: var(--color-content-neutral, oklch(43.9% 0 0));
314
314
  mask-image: var(--icon-code-copy);
315
315
  mask-size: contain;
316
316
  mask-repeat: no-repeat
@@ -336,8 +336,8 @@
336
336
  font-size: inherit;
337
337
  line-height: inherit;
338
338
  text-align: end;
339
- color: var(--color-content-subtle, darkgray);
340
- background-color: var(--color-page, white);
339
+ color: var(--color-content-subtle, oklch(55.6% 0 0));
340
+ background-color: var(--color-page, oklch(98.5% 0 0));
341
341
  pointer-events: none;
342
342
  user-select: none
343
343
  }
@@ -366,7 +366,7 @@
366
366
  padding: 0 calc(var(--spacing, 0.25rem) * 2);
367
367
  font-family: var(--font-sans, sans-serif);
368
368
  font-size: inherit;
369
- color: var(--color-content-subtle, darkgray);
369
+ color: var(--color-content-subtle, oklch(55.6% 0 0));
370
370
  background: transparent;
371
371
  border: 0 none;
372
372
  border-radius: 0;
@@ -374,8 +374,8 @@
374
374
  transition: var(--transition, all .05s ease-in-out);
375
375
 
376
376
  &:hover {
377
- color: var(--color-content-neutral, gray);
378
- background: color-mix(in oklch, var(--color-content-stark, darkslategray) 8%, transparent);
377
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
378
+ background: color-mix(in oklch, var(--color-content-stark, darkslateoklch(43.9% 0 0)) 8%, transparent);
379
379
  }
380
380
  }
381
381
 
package/lib/manifest.code.min.css CHANGED
@@ -1 +1 @@
1
- @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:contain;width:1em}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,#2f4f4f) 8%,transparent);color:var(--color-content-neutral,gray);display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(#2f4f4f 10%,transparent));color:var(--color-content-stark,#2f4f4f)}&[aria-selected=true]{color:var(--color-brand-content,#daa520);pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,#2f4f4f)}}&:after{background-color:var(--color-content-neutral,gray);content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{background-color:var(--color-page,#fff);color:var(--color-content-subtle,#a9a9a9);display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*8 + 2ch)}:where(code){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,#a9a9a9);cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,#2f4f4f) 8%,transparent);color:var(--color-content-neutral,gray)}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){background:unset;border:0;box-shadow:unset;color:unset;font-family:unset;font-size:unset;font-weight:unset;line-height:unset;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}
1
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:contain;width:1em}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,darkslateoklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0));display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(oklch(20.5% 0 0) 10%,transparent));color:var(--color-content-stark,darkslateoklch(43.9% 0 0))}&[aria-selected=true]{color:var(--color-brand-content,oklch(68.1% .162 75.834));pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,darkslateoklch(43.9% 0 0))}}&:after{background-color:var(--color-content-neutral,oklch(43.9% 0 0));content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{background-color:var(--color-page,oklch(98.5% 0 0));color:var(--color-content-subtle,oklch(55.6% 0 0));display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*8 + 2ch)}:where(code){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,oklch(55.6% 0 0));cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,darkslateoklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0))}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){background:unset;border:0;box-shadow:unset;color:unset;font-family:unset;font-size:unset;font-weight:unset;line-height:unset;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}
package/lib/manifest.colorpicker.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Manifest Color Picker */
2
2
 
3
3
  :root {
4
- --color-picker-swatch: var(--color-line, color-mix(darkslategray 10%, transparent));
4
+ --color-picker-swatch: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
5
5
  --icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");
6
6
  --icon-color-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-blend-icon lucide-blend'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");
7
7
  --icon-color-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-swatch-book-icon lucide-swatch-book'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");
@@ -83,7 +83,7 @@
83
83
  display: flex;
84
84
  width: 100%;
85
85
  padding: 2px;
86
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
86
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
87
87
 
88
88
  /* Distribute button widths equally */
89
89
  & button {
@@ -258,7 +258,7 @@
258
258
 
259
259
  /* Gradient layers */
260
260
  & :where(.layer-options-wrapper) {
261
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
261
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
262
262
 
263
263
  /* Layer options inputs */
264
264
  & :where(.layer-options-inputs) {
@@ -295,7 +295,7 @@
295
295
  position: absolute;
296
296
  top: 0;
297
297
  right: 0.25rem;
298
- color: var(--color-content-neutral, gray)
298
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
299
299
  }
300
300
  }
301
301
 
@@ -308,7 +308,7 @@
308
308
  margin-inline-end: 0.5rem;
309
309
  border-radius: 1rem;
310
310
  cursor: pointer;
311
- background: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
311
+ background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
312
312
 
313
313
  /* Stop handle */
314
314
  & :where(.stop-handle) {
@@ -400,7 +400,7 @@
400
400
 
401
401
  /* Only apply border to all except last library-group */
402
402
  &:not(:last-child) {
403
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
403
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
404
404
  }
405
405
 
406
406
  /* Palette wrapper */
@@ -441,7 +441,7 @@
441
441
  padding: 0;
442
442
 
443
443
  & .tabs-wrapper button {
444
- border: 1px solid var(--color-popover-surface, white)
444
+ border: 1px solid var(--color-popover-surface, oklch(98.5% 0 0))
445
445
  }
446
446
  }
447
447
 
@@ -490,17 +490,17 @@
490
490
  }
491
491
 
492
492
  .gradient-layer-icon-linear {
493
- background: linear-gradient(to right, var(--color-content-neutral, gray), color-mix(in oklch, var(--color-content-neutral, gray) 0%, transparent 100%));
493
+ background: linear-gradient(to right, var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
494
494
  border-radius: 50%
495
495
  }
496
496
 
497
497
  .gradient-layer-icon-radial {
498
- background: radial-gradient(var(--color-content-neutral, gray), color-mix(in oklch, var(--color-content-neutral, gray) 0%, transparent 100%));
498
+ background: radial-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
499
499
  border-radius: 50%
500
500
  }
501
501
 
502
502
  .gradient-layer-icon-conic {
503
- background: conic-gradient(var(--color-content-neutral, gray), color-mix(in oklch, var(--color-content-neutral, gray) 0%, transparent 100%));
503
+ background: conic-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
504
504
  border-radius: 50%
505
505
  }
506
506
  }