mnfst 0.5.106 → 0.5.109

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 +35 -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.range.css CHANGED
@@ -10,14 +10,14 @@
10
10
 
11
11
  &::-webkit-slider-runnable-track {
12
12
  height: calc(var(--spacing, 0.25rem) * 2);
13
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
13
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
14
14
  border-radius: var(--radius, 0.5rem);
15
15
  cursor: pointer;
16
16
  transition: var(--transition, all .05s ease-in-out)
17
17
  }
18
18
 
19
19
  &:hover::-webkit-slider-runnable-track {
20
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
20
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
21
21
  }
22
22
 
23
23
  &::-webkit-slider-thumb {
@@ -27,7 +27,7 @@
27
27
  width: calc(var(--spacing-field-height, 2.25rem) * 0.5);
28
28
  height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
29
29
  transform: translateY(-50%);
30
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 60%, var(--color-field-inverse, darkslategray));
30
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
31
31
  border-radius: 200px;
32
32
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
33
33
  cursor: pointer;
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  &::-webkit-slider-thumb:hover {
38
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 30%, var(--color-field-inverse, darkslategray));
38
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 30%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
39
39
  }
40
40
  }
41
41
 
@@ -50,7 +50,7 @@
50
50
  width: 2ch;
51
51
  text-align: center;
52
52
  font-size: 0.875rem;
53
- color: var(--color-content-neutral, gray);
53
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
54
54
  }
55
55
  }
56
56
 
package/lib/manifest.resize.css CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  &:hover::before,
34
34
  &:active::before {
35
- background-color: var(--color-line, color-mix(darkslategray 10%, transparent));
35
+ background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
36
36
  }
37
37
  }
38
38
 
package/lib/manifest.sidebar.css CHANGED
@@ -40,7 +40,7 @@
40
40
  height: 100%;
41
41
  overflow-y: auto;
42
42
  z-index: 200;
43
- background-color: var(--color-popover-surface, white);
43
+ background-color: var(--color-popover-surface, oklch(98.5% 0 0));
44
44
  transition: opacity .15s ease-in, transform .15s ease-in, display .15s ease-in;
45
45
  transition-behavior: allow-discrete;
46
46
 
@@ -96,6 +96,6 @@
96
96
 
97
97
  /* Dark mode override */
98
98
  .dark :where(nav[popover]) {
99
- background-color: var(--color-surface-1, whitesmoke)
99
+ background-color: var(--color-surface-1, oklch(97% 0 0))
100
100
  }
101
101
  }
package/lib/manifest.switch.css CHANGED
@@ -21,23 +21,23 @@
21
21
  width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
22
22
  height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
23
23
  border-radius: 50%;
24
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 60%, var(--color-field-inverse, darkslategray));
24
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
25
25
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
26
26
  transition: var(--transition, all .05s ease-in-out)
27
27
  }
28
28
 
29
29
  /* Checked */
30
30
  &:checked {
31
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
31
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
32
32
 
33
33
  /* Marker */
34
34
  &::before {
35
35
  left: calc(100% - (var(--spacing-field-height, 2.25rem) * 0.65) + 0.125rem);
36
- background-color: var(--color-field-inverse, darkslategray)
36
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0))
37
37
  }
38
38
 
39
39
  &:hover {
40
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
40
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
41
41
  }
42
42
  }
43
43
  }
package/lib/manifest.table.css CHANGED
@@ -17,8 +17,8 @@
17
17
 
18
18
  /* Header row */
19
19
  :where(thead, .grid-header > *) {
20
- background-color: var(--color-surface-1, whitesmoke);
21
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent))
20
+ background-color: var(--color-surface-1, oklch(97% 0 0));
21
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
22
22
  }
23
23
 
24
24
  /* Header cell */
@@ -28,7 +28,7 @@
28
28
 
29
29
  /* Row */
30
30
  :where(tr, .grid-row > *) {
31
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent))
31
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
32
32
  }
33
33
 
34
34
  /* Cell */
@@ -59,7 +59,7 @@
59
59
  /* Striped utility class */
60
60
  &.striped {
61
61
  :where(tr:nth-child(even), .grid-row:nth-child(even)) {
62
- background-color: var(--color-surface-1, whitesmoke)
62
+ background-color: var(--color-surface-1, oklch(97% 0 0))
63
63
  }
64
64
 
65
65
  :where(tr:nth-child(odd), .grid-row:nth-child(odd)) {
package/lib/manifest.theme.css CHANGED
@@ -8,17 +8,29 @@
8
8
  ::selection {
9
9
 
10
10
  /* Default palette */
11
- --color-50: white;
12
- --color-100: whitesmoke;
13
- --color-200: gainsboro;
14
- --color-300: lightgray;
15
- --color-400: silver;
16
- --color-500: darkgray;
17
- --color-600: gray;
18
- --color-700: slategray;
19
- --color-800: dimgray;
20
- --color-900: darkslategray;
21
- --color-950: black;
11
+ --color-50: oklch(98.5% 0 0);
12
+ --color-100: oklch(97% 0 0);
13
+ --color-200: oklch(92.2% 0 0);
14
+ --color-300: oklch(87% 0 0);
15
+ --color-400: oklch(70.8% 0 0);
16
+ --color-500: oklch(55.6% 0 0);
17
+ --color-600: oklch(43.9% 0 0);
18
+ --color-700: oklch(37.1% 0 0);
19
+ --color-800: oklch(26.9% 0 0);
20
+ --color-900: oklch(20.5% 0 0);
21
+ --color-950: oklch(14.5% 0 0);
22
+
23
+ /* Brand palette */
24
+ --color-brand-50: oklch(98.7% 0.026 102.212);
25
+ --color-brand-300: oklch(90.5% 0.182 98.111);
26
+ --color-brand-400: oklch(85.2% 0.199 91.936);
27
+ --color-brand-600: oklch(68.1% 0.162 75.834);
28
+
29
+ /* Positive palette */
30
+
31
+
32
+ /* Negtive palette */
33
+
22
34
 
23
35
  /* Light mode */
24
36
  --color-page: var(--color-50);
@@ -33,10 +45,10 @@
33
45
  --color-field-inverse: var(--color-content-stark);
34
46
  --color-popover-surface: var(--color-page);
35
47
  --color-line: color-mix(var(--color-content-stark) 12%, transparent);
36
- --color-brand-surface: goldenrod;
37
- --color-brand-surface-hover: darkgoldenrod;
38
- --color-brand-inverse: white;
39
- --color-brand-content: goldenrod;
48
+ --color-brand-surface: var(--color-brand-400);
49
+ --color-brand-surface-hover: var(--color-brand-300);
50
+ --color-brand-inverse: var(--color-brand-50);
51
+ --color-brand-content: var(--color-brand-600);
40
52
  --color-accent-surface: var(--color-content-stark);
41
53
  --color-accent-surface-hover: color-mix(var(--color-content-stark) 90%, var(--color-page));
42
54
  --color-accent-inverse: var(--color-page);
package/lib/manifest.toast.css CHANGED
@@ -17,8 +17,8 @@
17
17
  :where(.toast) {
18
18
  display: flex;
19
19
  max-width: 90vw;
20
- background-color: var(--color-popover-surface, white);
21
- border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
20
+ background-color: var(--color-popover-surface, oklch(98.5% 0 0));
21
+ border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
22
22
  border-radius: calc(var(--radius, 0.5rem) * 2);
23
23
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
24
24
  overflow: hidden;
@@ -47,7 +47,7 @@
47
47
  /* Dismiss button */
48
48
  :where(.toast-dismiss-button) {
49
49
  position: relative;
50
- border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, darkslategray) 20%, transparent);
50
+ border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, darkslateoklch(43.9% 0 0)) 20%, transparent);
51
51
  border-radius: 0;
52
52
 
53
53
  /* Icon */
@@ -58,7 +58,7 @@
58
58
  left: 50%;
59
59
  width: 50%;
60
60
  height: 50%;
61
- background-color: var(--color-field-inverse, darkslategray);
61
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
62
62
  mask-image: var(--icon-toast-dismiss, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"));
63
63
  mask-repeat: no-repeat;
64
64
  mask-size: 100% 100%;
@@ -70,11 +70,11 @@
70
70
 
71
71
  /* Brand, accent, positive, negative utility class overrides (see Utilities) */
72
72
  :where(.toast.brand, .toast.accent, .toast.positive, .toast.negative) {
73
- color: var(--color-field-inverse, darkslategray);
74
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
73
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
74
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
75
75
 
76
76
  :where(.toast-dismiss-button) {
77
- border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, darkslategray) 20%, transparent);
77
+ border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, darkslateoklch(43.9% 0 0)) 20%, transparent);
78
78
  }
79
79
  }
80
80
 
package/lib/manifest.tooltip.css CHANGED
@@ -42,8 +42,8 @@
42
42
  margin: var(--spacing-popover-offset, 0.5rem) 0;
43
43
  padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
44
44
  font-size: 0.875rem;
45
- color: var(--color-page, white);
46
- background-color: var(--color-content-stark, darkslategray);
45
+ color: var(--color-page, oklch(98.5% 0 0));
46
+ background-color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
47
47
  border: 0 none;
48
48
  border-radius: var(--radius, 0.5rem);
49
49
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
package/lib/manifest.typography.css CHANGED
@@ -14,7 +14,7 @@
14
14
  .small,
15
15
  .caption,
16
16
  .label {
17
- color: var(--color-content-stark, darkslategray);
17
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
18
18
 
19
19
  /* Inline links */
20
20
  & a:not(.unstyle),
@@ -74,10 +74,10 @@
74
74
  .h5 {
75
75
  font-size: 1rem;
76
76
  line-height: 1rem;
77
- color: var(--color-content-neutral, gray);
77
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
78
78
 
79
79
  & a:hover {
80
- color: var(--color-content-stark, darkslategray)
80
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0))
81
81
  }
82
82
  }
83
83
 
@@ -85,7 +85,7 @@
85
85
  .h6 {
86
86
  font-size: 0.8125rem;
87
87
  line-height: 1.4;
88
- color: var(--color-brand-content, goldenrod)
88
+ color: var(--color-brand-content, oklch(68.1% 0.162 75.834))
89
89
  }
90
90
 
91
91
  /* Paragraphs */
@@ -99,12 +99,12 @@
99
99
  .link {
100
100
  text-align: unset;
101
101
  text-decoration: none;
102
- color: var(--color-content-stark, darkslategray);
102
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
103
103
  cursor: pointer;
104
104
  transition: var(--transition, all .05s ease-in-out);
105
105
 
106
106
  &:hover {
107
- color: var(--color-content-neutral, gray)
107
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
108
108
  }
109
109
 
110
110
  &:where(:has([x-icon])) {
@@ -117,7 +117,7 @@
117
117
  /* Asides */
118
118
  :where(aside):not(.unstyle) {
119
119
  padding: calc(var(--spacing, 0.25rem) * 4);
120
- border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
120
+ border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
121
121
  border-radius: var(--radius, 0.5rem)
122
122
  }
123
123
 
@@ -133,8 +133,8 @@
133
133
  font-weight: 500;
134
134
  font-size: 0.75rem;
135
135
  line-height: 1;
136
- color: var(--color-field-inverse, darkslategray);
137
- background-color: var(--color-surface-2, gainsboro);
136
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
137
+ background-color: var(--color-surface-2, oklch(92.2% 0 0));
138
138
  border-radius: 100px;
139
139
 
140
140
  /* Solo icons */
@@ -150,8 +150,8 @@
150
150
  max-width: 100%;
151
151
  margin: calc(var(--spacing, 0.25rem) * 4) 0;
152
152
  padding: 0 calc(var(--spacing, 0.25rem) * 4);
153
- color: var(--color-content-stark, darkslategray);
154
- border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, darkslategray) 25%, transparent);
153
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
154
+ border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, darkslateoklch(43.9% 0 0)) 25%, transparent);
155
155
  border-inline-end: none;
156
156
 
157
157
  & * {
@@ -168,9 +168,9 @@
168
168
  font-size: 82.5%;
169
169
  line-height: 1.4;
170
170
  word-wrap: break-word;
171
- color: var(--color-content-neutral, gray);
172
- background-color: color-mix(in oklch, var(--color-content-neutral, gray) 10%, transparent);
173
- border: 1px solid color-mix(in oklch, var(--color-content-subtle, darkgray) 10%, transparent);
171
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
172
+ background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 10%, transparent);
173
+ border: 1px solid color-mix(in oklch, var(--color-content-subtle, oklch(55.6% 0 0)) 10%, transparent);
174
174
  border-radius: var(--radius, 0.5rem);
175
175
 
176
176
  &[role=button] {
@@ -182,13 +182,13 @@
182
182
  :where(figcaption):not(.unstyle),
183
183
  .caption {
184
184
  font-size: 0.8125rem;
185
- color: var(--color-content-neutral, gray);
185
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
186
186
 
187
187
  & a:not([role=button]) {
188
188
  color: inherit;
189
189
 
190
190
  &:hover {
191
- color: var(--color-content-stark, white)
191
+ color: var(--color-content-stark, oklch(98.5% 0 0))
192
192
  }
193
193
  }
194
194
  }
@@ -202,13 +202,13 @@
202
202
  :where(small):not(.unstyle),
203
203
  .small {
204
204
  font-size: 0.875rem;
205
- color: var(--color-content-neutral, gray);
205
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
206
206
 
207
207
  & a:not([role=button]) {
208
208
  color: inherit;
209
209
 
210
210
  &:hover {
211
- color: var(--color-content-stark, white)
211
+ color: var(--color-content-stark, oklch(98.5% 0 0))
212
212
  }
213
213
  }
214
214
  }
@@ -237,8 +237,8 @@
237
237
  font-weight: 600;
238
238
  line-height: 1;
239
239
  text-align: center;
240
- color: var(--color-content-neutral, gray);
241
- background-color: color-mix(in oklch, var(--color-content-neutral, gray) 10%, transparent);
240
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
241
+ background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 10%, transparent);
242
242
  border-radius: calc(var(--radius, 0.5rem) / 1.5);
243
243
 
244
244
  &:not(:last-of-type) {
@@ -376,8 +376,8 @@
376
376
  flex-flow: row wrap;
377
377
  font-size: 0.8125rem;
378
378
  line-height: 1.7;
379
- background-color: var(--color-page, white);
380
- border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
379
+ background-color: var(--color-page, oklch(98.5% 0 0));
380
+ border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
381
381
  border-radius: var(--radius, 0.5rem);
382
382
  overflow: hidden;
383
383
  tab-size: 4;
package/lib/manifest.utilities.css CHANGED
@@ -46,7 +46,7 @@
46
46
  background-color: transparent;
47
47
 
48
48
  &:hover {
49
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
49
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
50
50
  }
51
51
  }
52
52
 
@@ -62,21 +62,21 @@
62
62
  :where(.outlined) {
63
63
  border-width: 1px;
64
64
  border-style: solid;
65
- border-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 90%, var(--color-field-inverse, darkslategray))
65
+ border-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 90%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)))
66
66
  }
67
67
 
68
68
  /* Dark theme override */
69
69
  .dark :where(.outlined) {
70
- border-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 80%, var(--color-field-inverse, darkslategray))
70
+ border-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)))
71
71
  }
72
72
 
73
73
  /* Transparent */
74
74
  :where(.transparent) {
75
- color: var(--color-content-neutral, gray);
75
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
76
76
  background-color: transparent !important;
77
77
 
78
78
  &:hover {
79
- color: var(--color-content-stark, darkslategray)
79
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0))
80
80
  }
81
81
  }
82
82
 
@@ -200,7 +200,7 @@
200
200
 
201
201
  /* Light overlay */
202
202
  :where(.overlay-light) {
203
- color: black !important;
203
+ color: oklch(14.5% 0 0) !important;
204
204
 
205
205
  &::after {
206
206
  background: oklch(100% 0 0 / 75%)
@@ -217,9 +217,9 @@
217
217
  margin-top: calc(1rem * 1.4);
218
218
  padding: calc(var(--spacing, 0.25rem) * 4);
219
219
  border-radius: calc(var(--radius, 0.5rem) * 2);
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)) 15%, transparent);
220
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
221
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 20%, transparent);
222
+ border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 15%, transparent);
223
223
 
224
224
  /* Auto format asides with icons */
225
225
  &:has([x-icon]):not([x-code-group] aside, aside.frame) {
@@ -238,7 +238,7 @@
238
238
  margin-top: 0;
239
239
  padding: calc(var(--spacing, 0.25rem) * 4);
240
240
  font-family: var(--font-sans);
241
- background-color: color-mix(var(--color-surface-1, whitesmoke) 65%, transparent);
241
+ background-color: color-mix(var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
242
242
  border: 0 none;
243
243
  border-radius: 0
244
244
  }
@@ -293,7 +293,7 @@
293
293
  &>h1+p {
294
294
  margin-top: 0.625rem;
295
295
  font-size: 1.125rem;
296
- color: var(--color-content-neutral, gray)
296
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
297
297
  }
298
298
 
299
299
  &>h2 {
@@ -373,27 +373,27 @@
373
373
  :where(.trailing) {
374
374
  display: inline-block;
375
375
  margin-inline-start: auto;
376
- color: var(--color-content-neutral, gray)
376
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
377
377
  }
378
378
 
379
379
  /* Brand colors */
380
380
  :where(.brand) {
381
- --color-field-surface: var(--color-brand-surface, goldenrod);
382
- --color-field-surface-hover: var(--color-brand-surface-hover, darkgoldenrod);
383
- --color-field-inverse: var(--color-brand-inverse, white);
384
- --color-content-stark: var(--color-brand-content, goldenrod);
385
- --color-content-neutral: color-mix(in oklch, var(--color-brand-content, goldenrod) 85%, transparent);
386
- --color-content-subtle: color-mix(in oklch, var(--color-brand-content, goldenrod) 70%, transparent)
381
+ --color-field-surface: var(--color-brand-surface, oklch(85.2% 0.199 91.936));
382
+ --color-field-surface-hover: var(--color-brand-surface-hover, oklch(90.5% 0.182 98.111));
383
+ --color-field-inverse: var(--color-brand-inverse, oklch(98.5% 0 0));
384
+ --color-content-stark: var(--color-brand-content, oklch(68.1% 0.162 75.834));
385
+ --color-content-neutral: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 85%, transparent);
386
+ --color-content-subtle: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 70%, transparent)
387
387
  }
388
388
 
389
389
  /* Accent colors */
390
390
  :where(.accent) {
391
- --color-field-surface: var(--color-accent-surface, darkslategray);
392
- --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(darkslategray 90%, white));
393
- --color-field-inverse: var(--color-accent-inverse, white);
394
- --color-content-stark: var(--color-accent-content, darkslategray);
395
- --color-content-neutral: color-mix(in oklch, var(--color-accent-content, darkslategray) 85%, transparent);
396
- --color-content-subtle: color-mix(in oklch, var(--color-accent-content, darkslategray) 70%, transparent)
391
+ --color-field-surface: var(--color-accent-surface, darkslateoklch(43.9% 0 0));
392
+ --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(oklch(20.5% 0 0) 90%, oklch(98.5% 0 0)));
393
+ --color-field-inverse: var(--color-accent-inverse, oklch(98.5% 0 0));
394
+ --color-content-stark: var(--color-accent-content, darkslateoklch(43.9% 0 0));
395
+ --color-content-neutral: color-mix(in oklch, var(--color-accent-content, darkslateoklch(43.9% 0 0)) 85%, transparent);
396
+ --color-content-subtle: color-mix(in oklch, var(--color-accent-content, darkslateoklch(43.9% 0 0)) 70%, transparent)
397
397
  }
398
398
 
399
399
  /* Negative colors */
@@ -418,14 +418,14 @@
418
418
 
419
419
  /* Text colors */
420
420
  :where(.stark) {
421
- color: var(--color-content-stark, darkslategray)
421
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0))
422
422
  }
423
423
 
424
424
  :where(.neutral) {
425
- color: var(--color-content-neutral, gray)
425
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
426
426
  }
427
427
 
428
428
  :where(.subtle) {
429
- color: var(--color-content-subtle, darkgray)
429
+ color: var(--color-content-subtle, oklch(55.6% 0 0))
430
430
  }
431
431
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mnfst",
3
- "version": "0.5.106",
3
+ "version": "0.5.109",
4
4
  "private": false,
5
5
  "workspaces": [
6
6
  "templates/starter",