mnfst 0.5.105 → 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.
- package/lib/manifest.accordion.css +4 -4
- package/lib/manifest.avatar.css +8 -8
- package/lib/manifest.button.css +6 -6
- package/lib/manifest.checkbox.css +5 -5
- package/lib/manifest.code.css +12 -12
- package/lib/manifest.code.min.css +1 -1
- package/lib/manifest.colorpicker.css +10 -10
- package/lib/manifest.css +136 -135
- package/lib/manifest.data.js +48 -13
- package/lib/manifest.dialog.css +2 -2
- package/lib/manifest.divider.css +2 -2
- package/lib/manifest.dropdown.css +9 -9
- package/lib/manifest.form.css +3 -3
- package/lib/manifest.input.css +8 -8
- package/lib/manifest.integrity.json +1 -1
- package/lib/manifest.min.css +1 -1
- package/lib/manifest.radio.css +1 -1
- package/lib/manifest.range.css +5 -5
- package/lib/manifest.resize.css +1 -1
- package/lib/manifest.sidebar.css +2 -2
- package/lib/manifest.switch.css +4 -4
- package/lib/manifest.table.css +4 -4
- package/lib/manifest.theme.css +27 -15
- package/lib/manifest.toast.css +7 -7
- package/lib/manifest.tooltip.css +2 -2
- package/lib/manifest.typography.css +22 -22
- package/lib/manifest.utilities.css +29 -28
- package/package.json +1 -1
package/lib/manifest.resize.css
CHANGED
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,
|
|
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,
|
|
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(
|
|
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(
|
|
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,
|
|
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(
|
|
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,
|
|
21
|
-
border-bottom: 1px solid var(--color-line, color-mix(
|
|
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(
|
|
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,
|
|
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:
|
|
12
|
-
--color-100:
|
|
13
|
-
--color-200:
|
|
14
|
-
--color-300:
|
|
15
|
-
--color-400:
|
|
16
|
-
--color-500:
|
|
17
|
-
--color-600:
|
|
18
|
-
--color-700:
|
|
19
|
-
--color-800:
|
|
20
|
-
--color-900:
|
|
21
|
-
--color-950:
|
|
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:
|
|
37
|
-
--color-brand-surface-hover:
|
|
38
|
-
--color-brand-inverse:
|
|
39
|
-
--color-brand-content:
|
|
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,
|
|
21
|
-
border: 1px solid var(--color-line, color-mix(
|
|
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,
|
|
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,
|
|
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,
|
|
74
|
-
background-color: var(--color-field-surface, color-mix(
|
|
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,
|
|
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,
|
|
46
|
-
background-color: var(--color-content-stark,
|
|
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);
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
.small,
|
|
15
15
|
.caption,
|
|
16
16
|
.label {
|
|
17
|
-
color: var(--color-content-stark,
|
|
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,
|
|
77
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0));
|
|
78
78
|
|
|
79
79
|
& a:hover {
|
|
80
|
-
color: var(--color-content-stark,
|
|
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,
|
|
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,
|
|
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,
|
|
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(
|
|
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,
|
|
137
|
-
background-color: var(--color-surface-2,
|
|
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,
|
|
154
|
-
border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark,
|
|
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,
|
|
172
|
-
background-color: color-mix(in oklch, var(--color-content-neutral,
|
|
173
|
-
border: 1px solid color-mix(in oklch, var(--color-content-subtle,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
241
|
-
background-color: color-mix(in oklch, var(--color-content-neutral,
|
|
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,
|
|
380
|
-
border: 1px solid var(--color-line, color-mix(
|
|
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;
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
background-color: transparent;
|
|
47
47
|
|
|
48
48
|
&:hover {
|
|
49
|
-
background-color: var(--color-field-surface, color-mix(
|
|
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(
|
|
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(
|
|
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,
|
|
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,
|
|
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:
|
|
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,
|
|
221
|
-
background-color: color-mix(in oklch, var(--color-field-surface, color-mix(
|
|
222
|
-
border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(
|
|
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,8 +238,9 @@
|
|
|
238
238
|
margin-top: 0;
|
|
239
239
|
padding: calc(var(--spacing, 0.25rem) * 4);
|
|
240
240
|
font-family: var(--font-sans);
|
|
241
|
-
background-color: transparent;
|
|
242
|
-
border: 0 none
|
|
241
|
+
background-color: color-mix(var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
|
|
242
|
+
border: 0 none;
|
|
243
|
+
border-radius: 0
|
|
243
244
|
}
|
|
244
245
|
|
|
245
246
|
&>a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
|
|
@@ -292,7 +293,7 @@
|
|
|
292
293
|
&>h1+p {
|
|
293
294
|
margin-top: 0.625rem;
|
|
294
295
|
font-size: 1.125rem;
|
|
295
|
-
color: var(--color-content-neutral,
|
|
296
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0))
|
|
296
297
|
}
|
|
297
298
|
|
|
298
299
|
&>h2 {
|
|
@@ -372,27 +373,27 @@
|
|
|
372
373
|
:where(.trailing) {
|
|
373
374
|
display: inline-block;
|
|
374
375
|
margin-inline-start: auto;
|
|
375
|
-
color: var(--color-content-neutral,
|
|
376
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0))
|
|
376
377
|
}
|
|
377
378
|
|
|
378
379
|
/* Brand colors */
|
|
379
380
|
:where(.brand) {
|
|
380
|
-
--color-field-surface: var(--color-brand-surface,
|
|
381
|
-
--color-field-surface-hover: var(--color-brand-surface-hover,
|
|
382
|
-
--color-field-inverse: var(--color-brand-inverse,
|
|
383
|
-
--color-content-stark: var(--color-brand-content,
|
|
384
|
-
--color-content-neutral: color-mix(in oklch, var(--color-brand-content,
|
|
385
|
-
--color-content-subtle: color-mix(in oklch, var(--color-brand-content,
|
|
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)
|
|
386
387
|
}
|
|
387
388
|
|
|
388
389
|
/* Accent colors */
|
|
389
390
|
:where(.accent) {
|
|
390
|
-
--color-field-surface: var(--color-accent-surface,
|
|
391
|
-
--color-field-surface-hover: var(--color-accent-surface-hover, color-mix(
|
|
392
|
-
--color-field-inverse: var(--color-accent-inverse,
|
|
393
|
-
--color-content-stark: var(--color-accent-content,
|
|
394
|
-
--color-content-neutral: color-mix(in oklch, var(--color-accent-content,
|
|
395
|
-
--color-content-subtle: color-mix(in oklch, var(--color-accent-content,
|
|
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)
|
|
396
397
|
}
|
|
397
398
|
|
|
398
399
|
/* Negative colors */
|
|
@@ -417,14 +418,14 @@
|
|
|
417
418
|
|
|
418
419
|
/* Text colors */
|
|
419
420
|
:where(.stark) {
|
|
420
|
-
color: var(--color-content-stark,
|
|
421
|
+
color: var(--color-content-stark, darkslateoklch(43.9% 0 0))
|
|
421
422
|
}
|
|
422
423
|
|
|
423
424
|
:where(.neutral) {
|
|
424
|
-
color: var(--color-content-neutral,
|
|
425
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0))
|
|
425
426
|
}
|
|
426
427
|
|
|
427
428
|
:where(.subtle) {
|
|
428
|
-
color: var(--color-content-subtle,
|
|
429
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0))
|
|
429
430
|
}
|
|
430
431
|
}
|