@deepfuture/dui-theme-default 0.0.6 → 0.0.8
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/package.json +2 -2
- package/properties.css +362 -0
- package/prose.css +250 -0
- package/prose.js +1 -1
- package/tokens.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deepfuture/dui-theme-default",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "DUI default theme — design tokens and aesthetic component styles",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -358,7 +358,7 @@
|
|
|
358
358
|
"README.md"
|
|
359
359
|
],
|
|
360
360
|
"dependencies": {
|
|
361
|
-
"@deepfuture/dui-core": "0.0.
|
|
361
|
+
"@deepfuture/dui-core": "0.0.8",
|
|
362
362
|
"lit": "^3.3.2"
|
|
363
363
|
},
|
|
364
364
|
"sideEffects": false,
|
package/properties.css
ADDED
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
/* =================================================================
|
|
2
|
+
* CSS @property Declarations
|
|
3
|
+
* =================================================================
|
|
4
|
+
* Typed API surface for theme-default's component-level CSS custom
|
|
5
|
+
* properties. These provide:
|
|
6
|
+
*
|
|
7
|
+
* 1. Type safety — browser rejects invalid values, falls back to
|
|
8
|
+
* initial-value rather than inheriting garbage.
|
|
9
|
+
* 2. Smooth transitions — registered properties with known syntax
|
|
10
|
+
* can be interpolated, enabling animated variant changes.
|
|
11
|
+
* 3. Self-documenting API — @property blocks are the machine-
|
|
12
|
+
* readable schema and human-readable reference.
|
|
13
|
+
* 4. DevTools integration — Chrome shows registered properties
|
|
14
|
+
* with syntax and initial-value in computed styles.
|
|
15
|
+
*
|
|
16
|
+
* Only consumer-facing properties are declared here. Internal tokens
|
|
17
|
+
* (--space-*, --primary, etc.) are implementation details.
|
|
18
|
+
*
|
|
19
|
+
* initial-value uses resolved values (no var() allowed). These match
|
|
20
|
+
* the light-theme defaults and serve as the ultimate fallback when
|
|
21
|
+
* no theme is applied.
|
|
22
|
+
*
|
|
23
|
+
* CONSTRAINT: @property registrations are global — two themes on
|
|
24
|
+
* the same page could conflict. This is acceptable for DUI's model
|
|
25
|
+
* where one theme is active at a time.
|
|
26
|
+
* ================================================================= */
|
|
27
|
+
|
|
28
|
+
/* -----------------------------------------------------------
|
|
29
|
+
* Button
|
|
30
|
+
* ----------------------------------------------------------- */
|
|
31
|
+
@property --button-bg {
|
|
32
|
+
syntax: "<color>";
|
|
33
|
+
inherits: true;
|
|
34
|
+
initial-value: oklch(0.15 0 0);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@property --button-fg {
|
|
38
|
+
syntax: "<color>";
|
|
39
|
+
inherits: true;
|
|
40
|
+
initial-value: oklch(0.97 0 0);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@property --button-border {
|
|
44
|
+
syntax: "<color>";
|
|
45
|
+
inherits: true;
|
|
46
|
+
initial-value: transparent;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@property --button-height {
|
|
50
|
+
syntax: "<length>";
|
|
51
|
+
inherits: true;
|
|
52
|
+
initial-value: 2rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@property --button-width {
|
|
56
|
+
syntax: "<length> | auto";
|
|
57
|
+
inherits: true;
|
|
58
|
+
initial-value: auto;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@property --button-padding-y {
|
|
62
|
+
syntax: "<length>";
|
|
63
|
+
inherits: true;
|
|
64
|
+
initial-value: 0.5rem;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@property --button-padding-x {
|
|
68
|
+
syntax: "<length>";
|
|
69
|
+
inherits: true;
|
|
70
|
+
initial-value: 0.625rem;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@property --button-gap {
|
|
74
|
+
syntax: "<length>";
|
|
75
|
+
inherits: true;
|
|
76
|
+
initial-value: 0.375rem;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@property --button-radius {
|
|
80
|
+
syntax: "<length>";
|
|
81
|
+
inherits: true;
|
|
82
|
+
initial-value: 0.5rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@property --button-font-size {
|
|
86
|
+
syntax: "<length>";
|
|
87
|
+
inherits: true;
|
|
88
|
+
initial-value: 0.875rem;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@property --button-icon-size {
|
|
92
|
+
syntax: "<length>";
|
|
93
|
+
inherits: true;
|
|
94
|
+
initial-value: 1.125rem;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* -----------------------------------------------------------
|
|
98
|
+
* Badge
|
|
99
|
+
* ----------------------------------------------------------- */
|
|
100
|
+
@property --badge-bg {
|
|
101
|
+
syntax: "<color>";
|
|
102
|
+
inherits: true;
|
|
103
|
+
initial-value: oklch(0.24 0.005 265);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@property --badge-fg {
|
|
107
|
+
syntax: "<color>";
|
|
108
|
+
inherits: true;
|
|
109
|
+
initial-value: oklch(0.985 0 0);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@property --badge-border {
|
|
113
|
+
syntax: "<color>";
|
|
114
|
+
inherits: true;
|
|
115
|
+
initial-value: transparent;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@property --badge-icon-size {
|
|
119
|
+
syntax: "<length>";
|
|
120
|
+
inherits: true;
|
|
121
|
+
initial-value: 0.75rem;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* -----------------------------------------------------------
|
|
125
|
+
* Spinner
|
|
126
|
+
* ----------------------------------------------------------- */
|
|
127
|
+
@property --spinner-size {
|
|
128
|
+
syntax: "<length>";
|
|
129
|
+
inherits: true;
|
|
130
|
+
initial-value: 1.25rem;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@property --spinner-color {
|
|
134
|
+
syntax: "<color>";
|
|
135
|
+
inherits: true;
|
|
136
|
+
initial-value: currentColor;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* -----------------------------------------------------------
|
|
140
|
+
* Checkbox
|
|
141
|
+
* ----------------------------------------------------------- */
|
|
142
|
+
@property --checkbox-size {
|
|
143
|
+
syntax: "<length>";
|
|
144
|
+
inherits: true;
|
|
145
|
+
initial-value: 1.125rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* -----------------------------------------------------------
|
|
149
|
+
* Radio
|
|
150
|
+
* ----------------------------------------------------------- */
|
|
151
|
+
@property --radio-size {
|
|
152
|
+
syntax: "<length>";
|
|
153
|
+
inherits: true;
|
|
154
|
+
initial-value: 1.125rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* -----------------------------------------------------------
|
|
158
|
+
* Slider
|
|
159
|
+
* ----------------------------------------------------------- */
|
|
160
|
+
@property --slider-track-height {
|
|
161
|
+
syntax: "<length>";
|
|
162
|
+
inherits: true;
|
|
163
|
+
initial-value: 0.375rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@property --slider-thumb-size {
|
|
167
|
+
syntax: "<length>";
|
|
168
|
+
inherits: true;
|
|
169
|
+
initial-value: 1.125rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* -----------------------------------------------------------
|
|
173
|
+
* Switch
|
|
174
|
+
* ----------------------------------------------------------- */
|
|
175
|
+
@property --switch-width {
|
|
176
|
+
syntax: "<length>";
|
|
177
|
+
inherits: true;
|
|
178
|
+
initial-value: 2.25rem;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
@property --switch-height {
|
|
182
|
+
syntax: "<length>";
|
|
183
|
+
inherits: true;
|
|
184
|
+
initial-value: 1.25rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@property --switch-thumb-size {
|
|
188
|
+
syntax: "<length>";
|
|
189
|
+
inherits: true;
|
|
190
|
+
initial-value: 1rem;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@property --switch-thumb-offset {
|
|
194
|
+
syntax: "<length>";
|
|
195
|
+
inherits: true;
|
|
196
|
+
initial-value: 0.125rem;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* -----------------------------------------------------------
|
|
200
|
+
* Toggle
|
|
201
|
+
* ----------------------------------------------------------- */
|
|
202
|
+
@property --toggle-gap {
|
|
203
|
+
syntax: "<length>";
|
|
204
|
+
inherits: true;
|
|
205
|
+
initial-value: 0.375rem;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* -----------------------------------------------------------
|
|
209
|
+
* Progress
|
|
210
|
+
* ----------------------------------------------------------- */
|
|
211
|
+
@property --progress-height {
|
|
212
|
+
syntax: "<length>";
|
|
213
|
+
inherits: true;
|
|
214
|
+
initial-value: 0.5rem;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* -----------------------------------------------------------
|
|
218
|
+
* Avatar
|
|
219
|
+
* ----------------------------------------------------------- */
|
|
220
|
+
@property --avatar-bg {
|
|
221
|
+
syntax: "<color>";
|
|
222
|
+
inherits: true;
|
|
223
|
+
initial-value: oklch(0.99 0 0);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
@property --avatar-fg {
|
|
227
|
+
syntax: "<color>";
|
|
228
|
+
inherits: true;
|
|
229
|
+
initial-value: oklch(0.15 0 0 / 0.63);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* -----------------------------------------------------------
|
|
233
|
+
* Sidebar
|
|
234
|
+
* ----------------------------------------------------------- */
|
|
235
|
+
@property --sidebar-width {
|
|
236
|
+
syntax: "<length>";
|
|
237
|
+
inherits: true;
|
|
238
|
+
initial-value: 16rem;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
@property --sidebar-width-mobile {
|
|
242
|
+
syntax: "<length>";
|
|
243
|
+
inherits: true;
|
|
244
|
+
initial-value: 18rem;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
@property --sidebar-width-icon {
|
|
248
|
+
syntax: "<length>";
|
|
249
|
+
inherits: true;
|
|
250
|
+
initial-value: 3rem;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
@property --sidebar-bg {
|
|
254
|
+
syntax: "<color>";
|
|
255
|
+
inherits: true;
|
|
256
|
+
initial-value: oklch(0.99 0 0);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
@property --sidebar-fg {
|
|
260
|
+
syntax: "<color>";
|
|
261
|
+
inherits: true;
|
|
262
|
+
initial-value: oklch(0.15 0 0 / 0.90);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
@property --sidebar-border {
|
|
266
|
+
syntax: "<color>";
|
|
267
|
+
inherits: true;
|
|
268
|
+
initial-value: oklch(0.15 0 0 / 0.15);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
@property --sidebar-button-bg {
|
|
272
|
+
syntax: "<color>";
|
|
273
|
+
inherits: true;
|
|
274
|
+
initial-value: oklch(0 0 0 / 0);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@property --sidebar-button-fg {
|
|
278
|
+
syntax: "<color>";
|
|
279
|
+
inherits: true;
|
|
280
|
+
initial-value: oklch(0.15 0 0 / 0.90);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
@property --sidebar-muted-fg {
|
|
284
|
+
syntax: "<color>";
|
|
285
|
+
inherits: true;
|
|
286
|
+
initial-value: oklch(0.15 0 0 / 0.63);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
@property --sidebar-ring {
|
|
290
|
+
syntax: "<color>";
|
|
291
|
+
inherits: true;
|
|
292
|
+
initial-value: oklch(0.55 0.25 260);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
@property --sidebar-separator {
|
|
296
|
+
syntax: "<color>";
|
|
297
|
+
inherits: true;
|
|
298
|
+
initial-value: oklch(0.15 0 0 / 0.15);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
@property --sidebar-group-padding-y {
|
|
302
|
+
syntax: "<length>";
|
|
303
|
+
inherits: true;
|
|
304
|
+
initial-value: 1rem;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
@property --sidebar-group-label-inset {
|
|
308
|
+
syntax: "<length>";
|
|
309
|
+
inherits: true;
|
|
310
|
+
initial-value: 1.5rem;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
@property --sidebar-button-inset {
|
|
314
|
+
syntax: "<length>";
|
|
315
|
+
inherits: true;
|
|
316
|
+
initial-value: 1rem;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
@property --sidebar-header-content-gap {
|
|
320
|
+
syntax: "<length>";
|
|
321
|
+
inherits: true;
|
|
322
|
+
initial-value: 1rem;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* -----------------------------------------------------------
|
|
326
|
+
* Sidebar Menu Button
|
|
327
|
+
* ----------------------------------------------------------- */
|
|
328
|
+
@property --smb-height {
|
|
329
|
+
syntax: "<length>";
|
|
330
|
+
inherits: true;
|
|
331
|
+
initial-value: 2rem;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
@property --smb-padding-x {
|
|
335
|
+
syntax: "<length>";
|
|
336
|
+
inherits: true;
|
|
337
|
+
initial-value: 1rem;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@property --smb-gap {
|
|
341
|
+
syntax: "<length>";
|
|
342
|
+
inherits: true;
|
|
343
|
+
initial-value: 0.5rem;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
@property --smb-icon-size {
|
|
347
|
+
syntax: "<length>";
|
|
348
|
+
inherits: true;
|
|
349
|
+
initial-value: 1rem;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
@property --smb-font-size {
|
|
353
|
+
syntax: "<length>";
|
|
354
|
+
inherits: true;
|
|
355
|
+
initial-value: 0.875rem;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
@property --smb-radius {
|
|
359
|
+
syntax: "<length>";
|
|
360
|
+
inherits: true;
|
|
361
|
+
initial-value: 0.5rem;
|
|
362
|
+
}
|
package/prose.css
ADDED
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
/* =================================================================
|
|
2
|
+
* DUI Prose — Rich-text / markdown content styles
|
|
3
|
+
* =================================================================
|
|
4
|
+
* Apply class="dui-prose" to any container with rendered HTML
|
|
5
|
+
* (markdown output, CMS content, help text, etc.).
|
|
6
|
+
*
|
|
7
|
+
* All values reference --prose-* tokens (customizable) and existing
|
|
8
|
+
* DUI design tokens. No hardcoded colors or spacing.
|
|
9
|
+
* ================================================================= */
|
|
10
|
+
|
|
11
|
+
/* --- Root -------------------------------------------------------- */
|
|
12
|
+
.dui-prose {
|
|
13
|
+
color: var(--prose-body);
|
|
14
|
+
font-size: var(--font-size-base);
|
|
15
|
+
line-height: var(--line-height-relaxed);
|
|
16
|
+
max-width: 65ch;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.dui-prose > :first-child {
|
|
20
|
+
margin-block-start: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.dui-prose > :last-child {
|
|
24
|
+
margin-block-end: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* --- Headings ---------------------------------------------------- */
|
|
28
|
+
.dui-prose h1 {
|
|
29
|
+
color: var(--prose-headings);
|
|
30
|
+
font-weight: var(--font-weight-semibold);
|
|
31
|
+
font-size: var(--font-size-4xl);
|
|
32
|
+
line-height: var(--line-height-tight);
|
|
33
|
+
letter-spacing: var(--letter-spacing-tightest);
|
|
34
|
+
margin-block: 0 var(--space-4);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.dui-prose h2 {
|
|
38
|
+
color: var(--prose-headings);
|
|
39
|
+
font-weight: var(--font-weight-semibold);
|
|
40
|
+
font-size: var(--font-size-3xl);
|
|
41
|
+
line-height: var(--line-height-tight);
|
|
42
|
+
letter-spacing: var(--letter-spacing-tighter);
|
|
43
|
+
margin-block: var(--space-10) var(--space-3);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.dui-prose h3 {
|
|
47
|
+
color: var(--prose-headings);
|
|
48
|
+
font-weight: var(--font-weight-semibold);
|
|
49
|
+
font-size: var(--font-size-2xl);
|
|
50
|
+
line-height: var(--line-height-tight);
|
|
51
|
+
letter-spacing: var(--letter-spacing-tight);
|
|
52
|
+
margin-block: var(--space-8) var(--space-3);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.dui-prose h4 {
|
|
56
|
+
color: var(--prose-headings);
|
|
57
|
+
font-weight: var(--font-weight-semibold);
|
|
58
|
+
font-size: var(--font-size-xl);
|
|
59
|
+
line-height: var(--line-height-tight);
|
|
60
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
61
|
+
margin-block: var(--space-6) var(--space-2);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.dui-prose h5 {
|
|
65
|
+
color: var(--prose-headings);
|
|
66
|
+
font-weight: var(--font-weight-semibold);
|
|
67
|
+
font-size: var(--font-size-lg);
|
|
68
|
+
line-height: var(--line-height-tight);
|
|
69
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
70
|
+
margin-block: var(--space-6) var(--space-2);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.dui-prose h6 {
|
|
74
|
+
color: var(--prose-headings);
|
|
75
|
+
font-weight: var(--font-weight-semibold);
|
|
76
|
+
font-size: var(--font-size-lg);
|
|
77
|
+
line-height: var(--line-height-tight);
|
|
78
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
79
|
+
margin-block: var(--space-6) var(--space-2);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* --- Paragraphs -------------------------------------------------- */
|
|
83
|
+
.dui-prose p {
|
|
84
|
+
color: var(--prose-body);
|
|
85
|
+
margin-block: 1em 0;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* --- Inline text ------------------------------------------------- */
|
|
89
|
+
.dui-prose strong,
|
|
90
|
+
.dui-prose b {
|
|
91
|
+
color: var(--prose-bold);
|
|
92
|
+
font-weight: var(--font-weight-semibold);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.dui-prose em,
|
|
96
|
+
.dui-prose i {
|
|
97
|
+
font-style: italic;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.dui-prose small {
|
|
101
|
+
font-size: 0.875em;
|
|
102
|
+
color: var(--prose-caption);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* --- Links ------------------------------------------------------- */
|
|
106
|
+
.dui-prose a {
|
|
107
|
+
color: var(--prose-links);
|
|
108
|
+
text-decoration: underline;
|
|
109
|
+
text-underline-offset: 0.15em;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.dui-prose a:hover {
|
|
113
|
+
color: var(--prose-links-hover);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* --- Lists ------------------------------------------------------- */
|
|
117
|
+
.dui-prose ul {
|
|
118
|
+
list-style-type: disc;
|
|
119
|
+
padding-inline-start: var(--space-6);
|
|
120
|
+
margin-block: 1em 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.dui-prose ol {
|
|
124
|
+
list-style-type: decimal;
|
|
125
|
+
padding-inline-start: var(--space-6);
|
|
126
|
+
margin-block: 1em 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.dui-prose li {
|
|
130
|
+
margin-block: var(--space-1);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.dui-prose li > ul,
|
|
134
|
+
.dui-prose li > ol {
|
|
135
|
+
margin-block: var(--space-0_5);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.dui-prose li > p {
|
|
139
|
+
margin-block: var(--space-1);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* --- Blockquote -------------------------------------------------- */
|
|
143
|
+
.dui-prose blockquote {
|
|
144
|
+
border-inline-start: 3px solid var(--prose-blockquote-border);
|
|
145
|
+
color: var(--prose-blockquote-text);
|
|
146
|
+
padding-inline-start: var(--space-4);
|
|
147
|
+
font-style: italic;
|
|
148
|
+
margin-inline: 0;
|
|
149
|
+
margin-block: 1em 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* --- Inline code ------------------------------------------------- */
|
|
153
|
+
.dui-prose code {
|
|
154
|
+
color: var(--prose-code);
|
|
155
|
+
background: var(--prose-code-bg);
|
|
156
|
+
padding: 0.15em 0.35em;
|
|
157
|
+
border-radius: var(--radius-sm);
|
|
158
|
+
font-family: var(--font-mono);
|
|
159
|
+
font-size: 0.875em;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* --- Code blocks ------------------------------------------------- */
|
|
163
|
+
.dui-prose pre {
|
|
164
|
+
background: var(--prose-pre-bg);
|
|
165
|
+
border: var(--border-width-thin) solid var(--prose-pre-border);
|
|
166
|
+
border-radius: var(--radius-md);
|
|
167
|
+
padding: var(--space-4);
|
|
168
|
+
overflow-x: auto;
|
|
169
|
+
font-size: var(--font-size-sm);
|
|
170
|
+
line-height: var(--line-height-relaxed);
|
|
171
|
+
margin-block: 1em 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.dui-prose pre code {
|
|
175
|
+
background: none;
|
|
176
|
+
padding: 0;
|
|
177
|
+
border-radius: 0;
|
|
178
|
+
font-size: inherit;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* --- Horizontal rule --------------------------------------------- */
|
|
182
|
+
.dui-prose hr {
|
|
183
|
+
border: none;
|
|
184
|
+
border-top: var(--border-width-thin) solid var(--prose-hr);
|
|
185
|
+
margin-block: 2em;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* --- Tables ------------------------------------------------------ */
|
|
189
|
+
.dui-prose table {
|
|
190
|
+
width: 100%;
|
|
191
|
+
border-collapse: collapse;
|
|
192
|
+
font-size: var(--font-size-sm);
|
|
193
|
+
margin-block: 1em 0;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.dui-prose th {
|
|
197
|
+
border-bottom: var(--border-width-medium) solid var(--prose-th-border);
|
|
198
|
+
text-align: start;
|
|
199
|
+
padding: var(--space-2) var(--space-3);
|
|
200
|
+
font-weight: var(--font-weight-semibold);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.dui-prose td {
|
|
204
|
+
border-bottom: var(--border-width-thin) solid var(--prose-td-border);
|
|
205
|
+
padding: var(--space-2) var(--space-3);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.dui-prose caption {
|
|
209
|
+
color: var(--prose-caption);
|
|
210
|
+
font-size: var(--font-size-sm);
|
|
211
|
+
margin-block-end: var(--space-2);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* --- Keyboard input ---------------------------------------------- */
|
|
215
|
+
.dui-prose kbd {
|
|
216
|
+
background: var(--prose-kbd-bg);
|
|
217
|
+
border: var(--border-width-thin) solid var(--prose-kbd-border);
|
|
218
|
+
border-radius: var(--radius-sm);
|
|
219
|
+
padding: 0.1em 0.35em;
|
|
220
|
+
font-family: var(--font-mono);
|
|
221
|
+
font-size: 0.875em;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* --- Images and figures ------------------------------------------ */
|
|
225
|
+
.dui-prose img {
|
|
226
|
+
max-width: 100%;
|
|
227
|
+
height: auto;
|
|
228
|
+
border-radius: var(--radius-md);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.dui-prose figure {
|
|
232
|
+
margin-inline: 0;
|
|
233
|
+
margin-block: 1.5em;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.dui-prose figcaption {
|
|
237
|
+
color: var(--prose-caption);
|
|
238
|
+
font-size: var(--font-size-sm);
|
|
239
|
+
margin-block-start: var(--space-2);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
/* --- Details / summary ------------------------------------------- */
|
|
243
|
+
.dui-prose details {
|
|
244
|
+
margin-block: 1em;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.dui-prose summary {
|
|
248
|
+
cursor: pointer;
|
|
249
|
+
font-weight: var(--font-weight-medium);
|
|
250
|
+
}
|
package/prose.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
const proseCSS = "/* =================================================================\n * DUI Prose — Rich-text / markdown content styles\n * =================================================================\n * Apply class=\"dui-prose\" to any container with rendered HTML\n * (markdown output, CMS content, help text, etc.).\n *\n * All values reference --prose-* tokens (customizable) and existing\n * DUI design tokens. No hardcoded colors or spacing.\n * ================================================================= */\n\n/* --- Root -------------------------------------------------------- */\n.dui-prose {\n color: var(--prose-body);\n font-size: var(--font-size-base);\n line-height: var(--line-height-relaxed);\n max-width: 65ch;\n}\n\n.dui-prose > :first-child {\n margin-block-start: 0;\n}\n\n.dui-prose > :last-child {\n margin-block-end: 0;\n}\n\n/* --- Headings ---------------------------------------------------- */\n.dui-prose h1 {\n color: var(--prose-headings);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-4xl);\n line-height: var(--line-height-tight);\n letter-spacing: var(--letter-spacing-tightest);\n margin-block: 0 var(--space-4);\n}\n\n.dui-prose h2 {\n color: var(--prose-headings);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-3xl);\n line-height: var(--line-height-tight);\n letter-spacing: var(--letter-spacing-tighter);\n margin-block: var(--space-10) var(--space-3);\n}\n\n.dui-prose h3 {\n color: var(--prose-headings);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-2xl);\n line-height: var(--line-height-tight);\n letter-spacing: var(--letter-spacing-tight);\n margin-block: var(--space-8) var(--space-3);\n}\n\n.dui-prose h4 {\n color: var(--prose-headings);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-xl);\n line-height: var(--line-height-tight);\n letter-spacing: var(--letter-spacing-normal);\n margin-block: var(--space-6) var(--space-2);\n}\n\n.dui-prose h5 {\n color: var(--prose-headings);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-lg);\n line-height: var(--line-height-tight);\n letter-spacing: var(--letter-spacing-normal);\n margin-block: var(--space-6) var(--space-2);\n}\n\n.dui-prose h6 {\n color: var(--prose-headings);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-lg);\n line-height: var(--line-height-tight);\n letter-spacing: var(--letter-spacing-normal);\n margin-block: var(--space-6) var(--space-2);\n}\n\n/* --- Paragraphs -------------------------------------------------- */\n.dui-prose p {\n color: var(--prose-body);\n margin-block: 1em 0;\n}\n\n/* --- Inline text ------------------------------------------------- */\n.dui-prose strong,\n.dui-prose b {\n color: var(--prose-bold);\n font-weight: var(--font-weight-semibold);\n}\n\n.dui-prose em,\n.dui-prose i {\n font-style: italic;\n}\n\n.dui-prose small {\n font-size: 0.875em;\n color: var(--prose-caption);\n}\n\n/* --- Links ------------------------------------------------------- */\n.dui-prose a {\n color: var(--prose-links);\n text-decoration: underline;\n text-underline-offset: 0.15em;\n}\n\n.dui-prose a:hover {\n color: var(--prose-links-hover);\n}\n\n/* --- Lists ------------------------------------------------------- */\n.dui-prose ul {\n list-style-type: disc;\n padding-inline-start: var(--space-6);\n margin-block: 1em 0;\n}\n\n.dui-prose ol {\n list-style-type: decimal;\n padding-inline-start: var(--space-6);\n margin-block: 1em 0;\n}\n\n.dui-prose li {\n margin-block: var(--space-1);\n}\n\n.dui-prose li > ul,\n.dui-prose li > ol {\n margin-block: var(--space-0_5);\n}\n\n.dui-prose li > p {\n margin-block: var(--space-1);\n}\n\n/* --- Blockquote -------------------------------------------------- */\n.dui-prose blockquote {\n border-inline-start: 3px solid var(--prose-blockquote-border);\n color: var(--prose-blockquote-text);\n padding-inline-start: var(--space-4);\n font-style: italic;\n margin-inline: 0;\n margin-block: 1em 0;\n}\n\n/* --- Inline code ------------------------------------------------- */\n.dui-prose code {\n color: var(--prose-code);\n background: var(--prose-code-bg);\n padding: 0.15em 0.35em;\n border-radius: var(--radius-sm);\n font-family: var(--font-mono);\n font-size: 0.875em;\n}\n\n/* --- Code blocks ------------------------------------------------- */\n.dui-prose pre {\n background: var(--prose-pre-bg);\n border: var(--border-width-thin) solid var(--prose-pre-border);\n border-radius: var(--radius-md);\n padding: var(--space-4);\n overflow-x: auto;\n font-size: var(--font-size-sm);\n line-height: var(--line-height-relaxed);\n margin-block: 1em 0;\n}\n\n.dui-prose pre code {\n background: none;\n padding: 0;\n border-radius: 0;\n font-size: inherit;\n}\n\n/* --- Horizontal rule --------------------------------------------- */\n.dui-prose hr {\n border: none;\n border-top: var(--border-width-thin) solid var(--prose-hr);\n margin-block: 2em;\n}\n\n/* --- Tables ------------------------------------------------------ */\n.dui-prose table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--font-size-sm);\n margin-block: 1em 0;\n}\n\n.dui-prose th {\n border-bottom: var(--border-width-medium) solid var(--prose-th-border);\n text-align: start;\n padding: var(--space-2) var(--space-3);\n font-weight: var(--font-weight-semibold);\n}\n\n.dui-prose td {\n border-bottom: var(--border-width-thin) solid var(--prose-td-border);\n padding: var(--space-2) var(--space-3);\n}\n\n.dui-prose caption {\n color: var(--prose-caption);\n font-size: var(--font-size-sm);\n margin-block-end: var(--space-2);\n}\n\n/* --- Keyboard input ---------------------------------------------- */\n.dui-prose kbd {\n background: var(--prose-kbd-bg);\n border: var(--border-width-thin) solid var(--prose-kbd-border);\n border-radius: var(--radius-sm);\n padding: 0.1em 0.35em;\n font-family: var(--font-mono);\n font-size: 0.875em;\n}\n\n/* --- Images and figures ------------------------------------------ */\n.dui-prose img {\n max-width: 100%;\n height: auto;\n border-radius: var(--radius-md);\n}\n\n.dui-prose figure {\n margin-inline: 0;\n margin-block: 1.5em;\n}\n\n.dui-prose figcaption {\n color: var(--prose-caption);\n font-size: var(--font-size-sm);\n margin-block-start: var(--space-2);\n}\n\n/* --- Details / summary ------------------------------------------- */\n.dui-prose details {\n margin-block: 1em;\n}\n\n.dui-prose summary {\n cursor: pointer;\n font-weight: var(--font-weight-medium);\n}\n";
|
|
2
2
|
const proseSheet = new CSSStyleSheet();
|
|
3
3
|
proseSheet.replaceSync(proseCSS);
|
|
4
4
|
export { proseSheet };
|
package/tokens.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n --font-size-2xs: 0.65rem;\n --font-size-xs: 0.75rem;\n --font-size-sm: 0.875rem;\n --font-size-base: 0.9375rem;\n --font-size-md: 1rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-2xl: 1.5rem;\n --font-size-3xl: 1.875rem;\n --font-size-4xl: 2.25rem;\n --font-size-5xl: 3rem;\n --font-size-6xl: 3.75rem;\n --font-size-7xl: 4.5rem;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n\n --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);\n --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);\n --font-size-fluid-lg: clamp(1rem, 0.938rem + 0.315vw, 1.125rem);\n --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n --font-size-fluid-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);\n --font-size-fluid-3xl: clamp(1.5rem, 1.313rem + 0.938vw, 1.875rem);\n --font-size-fluid-4xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);\n --font-size-fluid-5xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-fastest: 75ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem;\n --component-height-xs: 1.5rem;\n --component-height-sm: 1.75rem;\n --component-height-md: 2rem;\n --component-height-lg: 2.25rem;\n --component-height-xl: 2.5rem;\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: var(--accent);\n --focus-ring-width: 2px;\n --focus-ring-offset: 2px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n * 1. Operations on a base — colors are relationships, not fixed values.\n * 2. Fewer primitives, more derivation — 4 primitives, everything\n * else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.15 0 0);\n --accent: oklch(0.55 0.25 260);\n --destructive: oklch(0.55 0.22 25);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.15 0.015 260);\n --foreground: oklch(0.93 0 0);\n --accent: oklch(0.75 0.18 260);\n --destructive: oklch(0.70 0.18 25);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n /* Surfaces — lightness offsets from background.\n Positive = elevated (brighter). Negative = sunken (darker). */\n --sunken: oklch(from var(--background) calc(l - 0.03) c h);\n --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n /* Borders — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --border: oklch(from var(--foreground) l c h / 0.15);\n --border-strong: oklch(from var(--foreground) l c h / 0.25);\n\n /* Text tiers — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --text-1: oklch(from var(--foreground) l c h / 0.90);\n --text-2: oklch(from var(--foreground) l c h / 0.63);\n --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n /* Accent surfaces — for badges, pills, tinted cards */\n --accent-subtle: oklch(from var(--accent) l c h / 0.10);\n --accent-text: color-mix(in oklch, var(--accent) 80%, var(--foreground));\n\n /* Destructive surfaces */\n --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n --destructive-text: color-mix(in oklch, var(--destructive) 80%, var(--foreground));\n\n /* Utility — scrim overlay for modals/dialogs */\n --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n /* Meter / progress bar defaults */\n --meter-track: var(--surface-1);\n --meter-fill: var(--accent);\n\n /* Chart palette (theme-independent) */\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n\n /* -----------------------------------------------------------\n * Prose (rich-text / markdown content)\n * ----------------------------------------------------------- */\n --prose-body: var(--text-1);\n --prose-headings: var(--foreground);\n --prose-lead: var(--text-2);\n --prose-links: var(--accent);\n --prose-links-hover: var(--accent-text);\n --prose-bold: var(--foreground);\n --prose-code: var(--foreground);\n --prose-code-bg: var(--surface-1);\n --prose-pre-bg: var(--surface-1);\n --prose-pre-border: var(--border);\n --prose-blockquote-border: var(--accent);\n --prose-blockquote-text: var(--text-2);\n --prose-hr: var(--border);\n --prose-th-border: var(--border-strong);\n --prose-td-border: var(--border);\n --prose-caption: var(--text-3);\n --prose-kbd-bg: var(--surface-2);\n --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n color: var(--text-1);\n font-family: var(--font-sans);\n line-height: var(--line-height-normal);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n";
|
|
2
|
-
|
|
2
|
+
const propertiesCSS = "/* =================================================================\n * CSS @property Declarations\n * =================================================================\n * Typed API surface for theme-default's component-level CSS custom\n * properties. These provide:\n *\n * 1. Type safety — browser rejects invalid values, falls back to\n * initial-value rather than inheriting garbage.\n * 2. Smooth transitions — registered properties with known syntax\n * can be interpolated, enabling animated variant changes.\n * 3. Self-documenting API — @property blocks are the machine-\n * readable schema and human-readable reference.\n * 4. DevTools integration — Chrome shows registered properties\n * with syntax and initial-value in computed styles.\n *\n * Only consumer-facing properties are declared here. Internal tokens\n * (--space-*, --primary, etc.) are implementation details.\n *\n * initial-value uses resolved values (no var() allowed). These match\n * the light-theme defaults and serve as the ultimate fallback when\n * no theme is applied.\n *\n * CONSTRAINT: @property registrations are global — two themes on\n * the same page could conflict. This is acceptable for DUI's model\n * where one theme is active at a time.\n * ================================================================= */\n\n/* -----------------------------------------------------------\n * Button\n * ----------------------------------------------------------- */\n@property --button-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0);\n}\n\n@property --button-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.97 0 0);\n}\n\n@property --button-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --button-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2rem;\n}\n\n@property --button-width {\n syntax: \"<length> | auto\";\n inherits: true;\n initial-value: auto;\n}\n\n@property --button-padding-y {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --button-padding-x {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.625rem;\n}\n\n@property --button-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n@property --button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --button-font-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.875rem;\n}\n\n@property --button-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Badge\n * ----------------------------------------------------------- */\n@property --badge-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.24 0.005 265);\n}\n\n@property --badge-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.985 0 0);\n}\n\n@property --badge-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --badge-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.75rem;\n}\n\n/* -----------------------------------------------------------\n * Spinner\n * ----------------------------------------------------------- */\n@property --spinner-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.25rem;\n}\n\n@property --spinner-color {\n syntax: \"<color>\";\n inherits: true;\n initial-value: currentColor;\n}\n\n/* -----------------------------------------------------------\n * Checkbox\n * ----------------------------------------------------------- */\n@property --checkbox-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Radio\n * ----------------------------------------------------------- */\n@property --radio-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Slider\n * ----------------------------------------------------------- */\n@property --slider-track-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n@property --slider-thumb-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Switch\n * ----------------------------------------------------------- */\n@property --switch-width {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2.25rem;\n}\n\n@property --switch-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.25rem;\n}\n\n@property --switch-thumb-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --switch-thumb-offset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.125rem;\n}\n\n/* -----------------------------------------------------------\n * Toggle\n * ----------------------------------------------------------- */\n@property --toggle-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n/* -----------------------------------------------------------\n * Progress\n * ----------------------------------------------------------- */\n@property --progress-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n/* -----------------------------------------------------------\n * Avatar\n * ----------------------------------------------------------- */\n@property --avatar-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.99 0 0);\n}\n\n@property --avatar-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.63);\n}\n\n/* -----------------------------------------------------------\n * Sidebar\n * ----------------------------------------------------------- */\n@property --sidebar-width {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 16rem;\n}\n\n@property --sidebar-width-mobile {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 18rem;\n}\n\n@property --sidebar-width-icon {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 3rem;\n}\n\n@property --sidebar-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.99 0 0);\n}\n\n@property --sidebar-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.90);\n}\n\n@property --sidebar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.15);\n}\n\n@property --sidebar-button-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0 0 0 / 0);\n}\n\n@property --sidebar-button-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.90);\n}\n\n@property --sidebar-muted-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.63);\n}\n\n@property --sidebar-ring {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.55 0.25 260);\n}\n\n@property --sidebar-separator {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.15);\n}\n\n@property --sidebar-group-padding-y {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --sidebar-group-label-inset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n\n@property --sidebar-button-inset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --sidebar-header-content-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n/* -----------------------------------------------------------\n * Sidebar Menu Button\n * ----------------------------------------------------------- */\n@property --smb-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2rem;\n}\n\n@property --smb-padding-x {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --smb-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --smb-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --smb-font-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.875rem;\n}\n\n@property --smb-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n";
|
|
3
3
|
const tokenSheet = new CSSStyleSheet();
|
|
4
4
|
tokenSheet.replaceSync(propertiesCSS + "\n" + tokensCSS);
|
|
5
5
|
export { tokenSheet };
|