@collagejs/core 0.1.2 → 0.3.0
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/README.md +47 -18
- package/dist/global.d.ts +4 -0
- package/dist/global.js +8 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/logos/collagejs-128.svg +9 -9
- package/dist/logos/collagejs-512.svg +16 -16
- package/dist/logos/collagejs-64.svg +8 -8
- package/dist/theme/base.css +38 -0
- package/dist/theme/colors.css +181 -0
- package/dist/theme/components.css +506 -0
- package/dist/theme/theme.css +66 -0
- package/dist/theme/theme.d.ts +4 -0
- package/dist/theme/utilities.css +189 -0
- package/dist/theme/variants.css +248 -0
- package/dist/types.d.ts +72 -7
- package/package.json +6 -1
|
@@ -0,0 +1,506 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CollageJS Theme - Component Styles
|
|
3
|
+
*
|
|
4
|
+
* This file defines reusable component styles using the color variables.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ===== CODE ELEMENTS ===== */
|
|
8
|
+
|
|
9
|
+
[data-collagejs-theme] code,
|
|
10
|
+
.cjs-themed code {
|
|
11
|
+
background: var(--cjs-highlight);
|
|
12
|
+
border: 1px solid var(--cjs-border);
|
|
13
|
+
border-radius: var(--cjs-radius);
|
|
14
|
+
padding: 0.2rem 0.4rem;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* ===== BUTTONS ===== */
|
|
18
|
+
|
|
19
|
+
/* Base button styles */
|
|
20
|
+
.cjs-btn {
|
|
21
|
+
--cjs-btn-color: var(--cjs-text);
|
|
22
|
+
--cjs-btn-background: transparent;
|
|
23
|
+
background: var(--cjs-btn-background);
|
|
24
|
+
color: var(--cjs-btn-color);
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
gap: 0.5rem;
|
|
29
|
+
padding: 0.5rem 1rem;
|
|
30
|
+
border: 1px solid transparent;
|
|
31
|
+
border-radius: var(--cjs-radius);
|
|
32
|
+
font-size: 0.875rem;
|
|
33
|
+
font-weight: 500;
|
|
34
|
+
line-height: 1.25rem;
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
transition: all 0.2s ease-in-out;
|
|
38
|
+
user-select: none;
|
|
39
|
+
|
|
40
|
+
/* Focus styles */
|
|
41
|
+
&:focus {
|
|
42
|
+
outline: 0;
|
|
43
|
+
box-shadow: 0 0 0 3px rgba(var(--cjs-primary-rgb), 0.4);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Disabled state */
|
|
47
|
+
&:disabled {
|
|
48
|
+
opacity: 0.5;
|
|
49
|
+
cursor: not-allowed;
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Primary button */
|
|
55
|
+
.cjs-btn-primary {
|
|
56
|
+
--cjs-btn-background: var(--cjs-primary-gradient);
|
|
57
|
+
--cjs-btn-color: var(--cjs-text-on-primary);
|
|
58
|
+
--cjs-btn-semantic-color: var(--cjs-primary);
|
|
59
|
+
--cjs-btn-color-rgb: var(--cjs-primary-rgb);
|
|
60
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
61
|
+
|
|
62
|
+
&:hover {
|
|
63
|
+
background: linear-gradient(135deg, var(--cjs-primary-600), var(--cjs-primary-800));
|
|
64
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&:active,
|
|
68
|
+
&.active {
|
|
69
|
+
background: linear-gradient(135deg, var(--cjs-primary-700), var(--cjs-primary-900));
|
|
70
|
+
transform: translateY(1px);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&:focus {
|
|
74
|
+
outline-color: var(--cjs-primary-300);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Secondary button */
|
|
79
|
+
.cjs-btn-secondary {
|
|
80
|
+
--cjs-btn-background: var(--cjs-secondary-gradient);
|
|
81
|
+
--cjs-btn-color: var(--cjs-text-on-secondary);
|
|
82
|
+
--cjs-btn-semantic-color: var(--cjs-secondary);
|
|
83
|
+
--cjs-btn-color-rgb: var(--cjs-secondary-rgb);
|
|
84
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
85
|
+
|
|
86
|
+
&:hover {
|
|
87
|
+
opacity: 0.9;
|
|
88
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:active,
|
|
92
|
+
&.active {
|
|
93
|
+
opacity: 0.8;
|
|
94
|
+
transform: translateY(1px);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Outline button */
|
|
99
|
+
.cjs-btn-outline {
|
|
100
|
+
color: var(--cjs-btn-color);
|
|
101
|
+
background: transparent;
|
|
102
|
+
border-color: var(--cjs-btn-color);
|
|
103
|
+
|
|
104
|
+
&:hover {
|
|
105
|
+
background: var(--cjs-primary);
|
|
106
|
+
color: var(--cjs-text-on-primary);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&:active,
|
|
110
|
+
&.active {
|
|
111
|
+
background: var(--cjs-primary-600);
|
|
112
|
+
color: var(--cjs-text-on-primary);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Neutral button - blends with any background, no color contribution */
|
|
117
|
+
/* Perfect for table actions, toolbars, and context-sensitive controls */
|
|
118
|
+
.cjs-btn-neutral {
|
|
119
|
+
background: transparent;
|
|
120
|
+
color: var(--cjs-text);
|
|
121
|
+
border-color: transparent;
|
|
122
|
+
|
|
123
|
+
&:hover {
|
|
124
|
+
background: var(--cjs-highlight);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&:active,
|
|
128
|
+
&.active {
|
|
129
|
+
background: color-mix(in srgb, var(--cjs-highlight), black 20%);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Ghost button - transparent with semantic color on interaction */
|
|
134
|
+
/* Combine with semantic modifiers: .cjs-btn-ghost.cjs-btn-primary */
|
|
135
|
+
.cjs-btn-ghost {
|
|
136
|
+
background: transparent;
|
|
137
|
+
color: var(--cjs-btn-semantic-color);
|
|
138
|
+
border-color: transparent;
|
|
139
|
+
|
|
140
|
+
&:hover {
|
|
141
|
+
background: rgba(var(--cjs-btn-color-rgb), 0.1);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&:active,
|
|
145
|
+
&.active {
|
|
146
|
+
background: var(--cjs-btn-semantic-color);
|
|
147
|
+
color: var(--cjs-btn-color);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Success button */
|
|
152
|
+
.cjs-btn-success {
|
|
153
|
+
--cjs-btn-background: var(--cjs-accent-gradient);
|
|
154
|
+
--cjs-btn-color: var(--cjs-text-on-primary);
|
|
155
|
+
--cjs-btn-semantic-color: var(--cjs-accent);
|
|
156
|
+
--cjs-btn-color-rgb: var(--cjs-accent-rgb);
|
|
157
|
+
|
|
158
|
+
&:hover {
|
|
159
|
+
opacity: 0.9;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&:active,
|
|
163
|
+
&.active {
|
|
164
|
+
opacity: 0.8;
|
|
165
|
+
transform: translateY(1px);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Warning button */
|
|
170
|
+
.cjs-btn-warning {
|
|
171
|
+
--cjs-btn-background: var(--cjs-warning-gradient);
|
|
172
|
+
--cjs-btn-color: var(--cjs-text-on-primary);
|
|
173
|
+
--cjs-btn-semantic-color: var(--cjs-warning);
|
|
174
|
+
--cjs-btn-color-rgb: var(--cjs-warning-rgb);
|
|
175
|
+
|
|
176
|
+
&:hover {
|
|
177
|
+
opacity: 0.9;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&:active,
|
|
181
|
+
&.active {
|
|
182
|
+
opacity: 0.8;
|
|
183
|
+
transform: translateY(1px);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Button with logo */
|
|
188
|
+
.cjs-btn-with-logo {
|
|
189
|
+
.cjs-logo {
|
|
190
|
+
width: 1rem;
|
|
191
|
+
height: 1rem;
|
|
192
|
+
flex-shrink: 0;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* Button sizes */
|
|
197
|
+
.cjs-btn-sm {
|
|
198
|
+
padding: 0.25rem 0.75rem;
|
|
199
|
+
font-size: 0.75rem;
|
|
200
|
+
|
|
201
|
+
.cjs-logo {
|
|
202
|
+
width: 0.75rem;
|
|
203
|
+
height: 0.75rem;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.cjs-btn-lg {
|
|
208
|
+
padding: 0.75rem 1.5rem;
|
|
209
|
+
font-size: 1rem;
|
|
210
|
+
|
|
211
|
+
.cjs-logo {
|
|
212
|
+
width: 1.25rem;
|
|
213
|
+
height: 1.25rem;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* ===== FORMS ===== */
|
|
218
|
+
|
|
219
|
+
.cjs-input {
|
|
220
|
+
display: block;
|
|
221
|
+
width: 100%;
|
|
222
|
+
padding: 0.5rem 0.75rem;
|
|
223
|
+
border: 1px solid var(--cjs-border);
|
|
224
|
+
border-radius: var(--cjs-radius);
|
|
225
|
+
background: var(--cjs-background);
|
|
226
|
+
color: var(--cjs-text);
|
|
227
|
+
font-size: 0.875rem;
|
|
228
|
+
transition: all 0.2s ease-in-out;
|
|
229
|
+
|
|
230
|
+
&:focus {
|
|
231
|
+
outline: 2px solid var(--cjs-primary-200);
|
|
232
|
+
outline-offset: -1px;
|
|
233
|
+
border-color: var(--cjs-primary);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
&::placeholder {
|
|
237
|
+
color: var(--cjs-text-muted);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Darker input backgrounds on colored theme backgrounds */
|
|
242
|
+
.cjs-bg-primary input, .cjs-bg-primary select, .cjs-bg-primary textarea,
|
|
243
|
+
.cjs-bg-secondary input, .cjs-bg-secondary select, .cjs-bg-secondary textarea,
|
|
244
|
+
.cjs-bg-accent input, .cjs-bg-accent select, .cjs-bg-accent textarea,
|
|
245
|
+
.cjs-bg-warning input, .cjs-bg-warning select, .cjs-bg-warning textarea,
|
|
246
|
+
.cjs-bg-indigo input, .cjs-bg-indigo select, .cjs-bg-indigo textarea,
|
|
247
|
+
.cjs-bg-cyan input, .cjs-bg-cyan select, .cjs-bg-cyan textarea,
|
|
248
|
+
.cjs-bg-green input, .cjs-bg-green select, .cjs-bg-green textarea,
|
|
249
|
+
.cjs-bg-orange input, .cjs-bg-orange select, .cjs-bg-orange textarea {
|
|
250
|
+
background: rgba(var(--cjs-black-rgb), 0.15);
|
|
251
|
+
color: var(--cjs-text-on-primary);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* Range inputs */
|
|
255
|
+
[data-collagejs-theme] input[type="range"],
|
|
256
|
+
.cjs-themed input[type="range"] {
|
|
257
|
+
accent-color: var(--cjs-primary);
|
|
258
|
+
|
|
259
|
+
/* Track styling - cross-browser */
|
|
260
|
+
&::-webkit-slider-runnable-track {
|
|
261
|
+
height: 0.5rem;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
&::-moz-range-track {
|
|
265
|
+
height: 0.5rem;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Thumb styling - cross-browser */
|
|
269
|
+
&::-webkit-slider-thumb {
|
|
270
|
+
background: var(--cjs-primary);
|
|
271
|
+
border: 2px solid var(--cjs-background);
|
|
272
|
+
width: 1.25rem;
|
|
273
|
+
height: 1.25rem;
|
|
274
|
+
border-radius: 50%;
|
|
275
|
+
cursor: pointer;
|
|
276
|
+
translate: 0 -25%;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
&::-moz-range-thumb {
|
|
280
|
+
background: var(--cjs-primary);
|
|
281
|
+
border: 2px solid var(--cjs-background);
|
|
282
|
+
width: 1.25rem;
|
|
283
|
+
height: 1.25rem;
|
|
284
|
+
border-radius: 50%;
|
|
285
|
+
cursor: pointer;
|
|
286
|
+
translate: 0 -25%;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
/* ===== CARDS ===== */
|
|
291
|
+
|
|
292
|
+
.cjs-card {
|
|
293
|
+
background: var(--cjs-background);
|
|
294
|
+
border: 1px solid var(--cjs-border);
|
|
295
|
+
border-radius: var(--cjs-radius-lg);
|
|
296
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
297
|
+
overflow: hidden;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.cjs-card-header {
|
|
301
|
+
padding: 1rem 1.5rem;
|
|
302
|
+
border-bottom: 1px solid var(--cjs-border);
|
|
303
|
+
background: var(--cjs-surface);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.cjs-card-body {
|
|
307
|
+
padding: 1.5rem;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.cjs-card-footer {
|
|
311
|
+
padding: 1rem 1.5rem;
|
|
312
|
+
border-top: 1px solid var(--cjs-border);
|
|
313
|
+
background: var(--cjs-surface);
|
|
314
|
+
}
|
|
315
|
+
/* ===== Button Group ===== */
|
|
316
|
+
|
|
317
|
+
.cjs-btn-group {
|
|
318
|
+
display: inline-flex;
|
|
319
|
+
border-radius: var(--cjs-radius);
|
|
320
|
+
|
|
321
|
+
.cjs-btn {
|
|
322
|
+
position: relative;
|
|
323
|
+
border-radius: 0;
|
|
324
|
+
margin: 0;
|
|
325
|
+
|
|
326
|
+
&:first-child {
|
|
327
|
+
border-top-left-radius: var(--cjs-radius);
|
|
328
|
+
border-bottom-left-radius: var(--cjs-radius);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
&:last-child {
|
|
332
|
+
border-top-right-radius: var(--cjs-radius);
|
|
333
|
+
border-bottom-right-radius: var(--cjs-radius);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
&:focus {
|
|
337
|
+
z-index: 1;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/* ===== Input Group ===== */
|
|
343
|
+
|
|
344
|
+
.cjs-input-group {
|
|
345
|
+
display: flex;
|
|
346
|
+
align-items: stretch;
|
|
347
|
+
border-radius: 0.375rem;
|
|
348
|
+
|
|
349
|
+
&>* {
|
|
350
|
+
border-radius: 0;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
&>select:first-child,
|
|
354
|
+
&>input:first-child,
|
|
355
|
+
&>textarea:first-child,
|
|
356
|
+
&>button:first-child,
|
|
357
|
+
&>.cjs-addon:first-child {
|
|
358
|
+
border-top-left-radius: 0.375rem;
|
|
359
|
+
border-bottom-left-radius: 0.375rem;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
&>select:last-child,
|
|
363
|
+
&>input:last-child,
|
|
364
|
+
&>textarea:last-child,
|
|
365
|
+
&>button:last-child,
|
|
366
|
+
&>.cjs-addon:last-child {
|
|
367
|
+
border-top-right-radius: 0.375rem;
|
|
368
|
+
border-bottom-right-radius: 0.375rem;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.cjs-input {
|
|
372
|
+
margin: 0;
|
|
373
|
+
flex: 1 1 auto;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.cjs-addon {
|
|
377
|
+
border: 1px solid var(--cjs-border);
|
|
378
|
+
padding: 0.25rem 0.4rem;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* ===== Tabs ===== */
|
|
383
|
+
|
|
384
|
+
ul.cjs-tabs {
|
|
385
|
+
display: flex;
|
|
386
|
+
flex-wrap: wrap;
|
|
387
|
+
padding-left: 0;
|
|
388
|
+
margin-bottom: 0;
|
|
389
|
+
list-style: none;
|
|
390
|
+
border-bottom: 1px solid var(--cjs-border);
|
|
391
|
+
|
|
392
|
+
&>li {
|
|
393
|
+
margin-bottom: -1px;
|
|
394
|
+
padding: 0 0.2rem 0.3rem 0.2rem;
|
|
395
|
+
|
|
396
|
+
&>button {
|
|
397
|
+
background: transparent;
|
|
398
|
+
border-width: 0;
|
|
399
|
+
border-color: var(--cjs-primary);
|
|
400
|
+
border-style: solid;
|
|
401
|
+
cursor: pointer;
|
|
402
|
+
padding: 0.5rem 0.5rem 0.2rem 0.5rem;
|
|
403
|
+
color: var(--cjs-text);
|
|
404
|
+
|
|
405
|
+
&:hover,
|
|
406
|
+
&:focus {
|
|
407
|
+
border-bottom-width: 0.1rem;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
&.active {
|
|
411
|
+
border-bottom-width: 0.3rem;
|
|
412
|
+
font-weight: bold;
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.cjs-tab-panel {
|
|
419
|
+
padding: 1rem;
|
|
420
|
+
margin-bottom: 1rem;
|
|
421
|
+
|
|
422
|
+
&>* {
|
|
423
|
+
margin-top: 0;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* ===== Table ===== */
|
|
428
|
+
|
|
429
|
+
.cjs-table {
|
|
430
|
+
width: 100%;
|
|
431
|
+
margin-bottom: 1rem;
|
|
432
|
+
color: var(--cjs-text);
|
|
433
|
+
border-collapse: collapse;
|
|
434
|
+
|
|
435
|
+
& thead>tr {
|
|
436
|
+
border-bottom: 1px solid var(--cjs-border);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
& th {
|
|
440
|
+
text-align: left;
|
|
441
|
+
font-weight: normal;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
&.striped {
|
|
445
|
+
tbody tr:nth-of-type(odd) {
|
|
446
|
+
background-color: var(--cjs-surface);
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
&.compact {
|
|
451
|
+
th,
|
|
452
|
+
td {
|
|
453
|
+
padding: 0.25rem 0.5rem;
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
&.normal {
|
|
458
|
+
th,
|
|
459
|
+
td {
|
|
460
|
+
padding: 0.5rem 1rem;
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
&.spacious {
|
|
465
|
+
th,
|
|
466
|
+
td {
|
|
467
|
+
padding: 1rem 1.5rem;
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/* ===== Badges ===== */
|
|
473
|
+
|
|
474
|
+
.cjs-badge {
|
|
475
|
+
display: inline-block;
|
|
476
|
+
padding: 0.05em 0.5em;
|
|
477
|
+
font-size: 0.75em;
|
|
478
|
+
font-weight: 600;
|
|
479
|
+
border-radius: var(--cjs-radius);
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.cjs-badge-primary {
|
|
483
|
+
background: var(--cjs-primary);
|
|
484
|
+
color: var(--cjs-text-on-primary);
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.cjs-badge-secondary {
|
|
488
|
+
background: var(--cjs-secondary-100);
|
|
489
|
+
color: var(--cjs-secondary-800);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.cjs-badge-accent {
|
|
493
|
+
background: var(--cjs-accent-100);
|
|
494
|
+
color: var(--cjs-accent-800);
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.cjs-badge-warning {
|
|
498
|
+
background: var(--cjs-warning-100);
|
|
499
|
+
color: var(--cjs-warning-800);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.cjs-badge-error {
|
|
503
|
+
background: var(--cjs-error-100);
|
|
504
|
+
color: var(--cjs-error-800);
|
|
505
|
+
}
|
|
506
|
+
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CollageJS Theme - Main Theme File
|
|
3
|
+
*
|
|
4
|
+
* Import this file to use the complete CollageJS theme system.
|
|
5
|
+
*
|
|
6
|
+
* MICRO-FRONTEND USAGE:
|
|
7
|
+
* ```html
|
|
8
|
+
* <link rel="stylesheet" href="path/to/collagejs/theme.css">
|
|
9
|
+
*
|
|
10
|
+
* <!-- Apply theme to any container -->
|
|
11
|
+
* <div data-collagejs-theme class="cjs-theme-accent"> <!-- Orange primary -->
|
|
12
|
+
* <div class="cjs-themed cjs-theme-sky"> <!-- Cyan primary -->
|
|
13
|
+
* <div id="my-app" class="cjs-theme-nature"> <!-- Green primary -->
|
|
14
|
+
*
|
|
15
|
+
* <!-- Shadow DOM -->
|
|
16
|
+
* <my-component>
|
|
17
|
+
* #shadow-root
|
|
18
|
+
* <div data-collagejs-theme class="cjs-theme-dark">
|
|
19
|
+
* <!-- Isolated theming -->
|
|
20
|
+
* </div>
|
|
21
|
+
* </my-component>
|
|
22
|
+
*
|
|
23
|
+
* <!-- Custom selectors (define your own CSS variables) -->
|
|
24
|
+
* <div data-collagejs-imo> <!-- Your custom attribute -->
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
/* Import all theme modules */
|
|
29
|
+
@import url('./base.css');
|
|
30
|
+
@import url('./colors.css');
|
|
31
|
+
@import url('./components.css');
|
|
32
|
+
@import url('./utilities.css');
|
|
33
|
+
@import url('./variants.css');
|
|
34
|
+
|
|
35
|
+
/* Global base styles for theme containers */
|
|
36
|
+
[data-collagejs-theme] *,
|
|
37
|
+
[data-collagejs-theme] *::before,
|
|
38
|
+
[data-collagejs-theme] *::after,
|
|
39
|
+
.cjs-themed *,
|
|
40
|
+
.cjs-themed *::before,
|
|
41
|
+
.cjs-themed *::after {
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Default font and text styles for themed containers */
|
|
46
|
+
[data-collagejs-theme],
|
|
47
|
+
.cjs-themed {
|
|
48
|
+
font-family: var(--cjs-font-sans);
|
|
49
|
+
line-height: 1.5;
|
|
50
|
+
color-scheme: light dark;
|
|
51
|
+
color: var(--cjs-text);
|
|
52
|
+
background: var(--cjs-background);
|
|
53
|
+
-webkit-font-smoothing: antialiased;
|
|
54
|
+
-moz-osx-font-smoothing: grayscale;
|
|
55
|
+
|
|
56
|
+
& dialog, & input, & textarea, & select {
|
|
57
|
+
background: var(--cjs-background);
|
|
58
|
+
color: var(--cjs-text);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Remove margin for themed containers (they might be nested) */
|
|
63
|
+
[data-collagejs-theme],
|
|
64
|
+
.cjs-themed {
|
|
65
|
+
margin: 0;
|
|
66
|
+
}
|