contain-css-svelte 1.1.13 → 1.1.14
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 +6 -2
- package/dist/Card.svelte +345 -5
- package/dist/controls/Button.svelte +414 -6
- package/dist/controls/ButtonLink.svelte +483 -7
- package/dist/controls/Checkbox.svelte +138 -2
- package/dist/controls/CircleButton.svelte +483 -7
- package/dist/controls/Input.svelte +69 -1
- package/dist/controls/RadioButton.svelte +138 -2
- package/dist/controls/Select.svelte +138 -2
- package/dist/controls/TabItem.svelte +138 -2
- package/dist/controls/Toggle.svelte +138 -2
- package/dist/dropdowns/DropdownMenu.svelte +276 -4
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/layout/Accordion.svelte +276 -4
- package/dist/layout/Bar.svelte +138 -2
- package/dist/layout/Container.svelte +75 -1
- package/dist/layout/DataList.svelte +69 -1
- package/dist/layout/DataListItem.svelte +69 -1
- package/dist/layout/Fieldset.svelte +138 -2
- package/dist/layout/Form.svelte +69 -1
- package/dist/layout/Hero.svelte +69 -1
- package/dist/layout/MenuList.svelte +276 -4
- package/dist/layout/Page.svelte +138 -2
- package/dist/layout/Sidebar.svelte +345 -5
- package/dist/layout/TabBar.svelte +69 -1
- package/dist/layout/Table.svelte +345 -5
- package/dist/layout/Tile.svelte +276 -4
- package/dist/misc/CodeInner.svelte +621 -9
- package/dist/misc/Progress.svelte +276 -4
- package/dist/misc/Tag.svelte +414 -6
- package/dist/overlays/Dialog.svelte +71 -3
- package/dist/overlays/Tooltip.svelte +210 -22
- package/dist/review/scenarios/IncredibleAppShell.svelte +3 -3
- package/dist/review/scenarios/LayoutWorkbench.svelte +2 -2
- package/dist/sass/_color.scss +37 -5
- package/dist/typography/Text.svelte +54 -0
- package/dist/typography/Text.svelte.d.ts +21 -0
- package/dist/vars/colors.css +8 -0
- package/dist/vars/defaults.css +8 -0
- package/dist/vars/themes/bootstrap.css +6 -0
- package/dist/vars/themes/canyon.css +6 -0
- package/dist/vars/themes/dark.css +6 -0
- package/dist/vars/themes/forest.css +6 -0
- package/dist/vars/themes/light.css +6 -0
- package/dist/vars/themes/material.css +6 -0
- package/dist/vars/themes/purple.css +6 -0
- package/dist/vars/themes/retro.css +6 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -63,6 +63,9 @@ Then use components anywhere:
|
|
|
63
63
|
<!-- becomes style="--button-bg: green; --button-fg: white; --button-height: 64px" -->
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
+
(That example shows the *mechanism*. In practice you rarely dress individual
|
|
67
|
+
components — you set the variable once, higher up, and let it cascade.)
|
|
68
|
+
|
|
66
69
|
Because they're variables rather than hard-coded styles, the cascade still
|
|
67
70
|
works — which means you can theme a whole subtree from above:
|
|
68
71
|
|
|
@@ -94,13 +97,14 @@ and screen-reader semantics come from the platform.
|
|
|
94
97
|
|
|
95
98
|
## What's in the box
|
|
96
99
|
|
|
97
|
-
- **Controls** — `Button`, `ButtonLink`, `
|
|
100
|
+
- **Controls** — `Button`, `ButtonLink`, `CircleButton`, `Input`, `Select`,
|
|
98
101
|
`Checkbox`, `RadioButton`, `Toggle`, `Slider`
|
|
99
102
|
- **Layout** — `Container`, `Page`, `Row`/`Column`/`Columns`, `Stack`, `Inline`,
|
|
100
103
|
`GridLayout`, `SplitPane`, `Sidebar`, `Bar`, `TabBar`, `Table`, `Tile`,
|
|
101
104
|
`DataList`, `Hero`, `Accordion`, `Form`/`FormItem`/`Fieldset`
|
|
102
105
|
- **Overlays** — `Dialog`, `Tooltip`, `DropdownMenu`
|
|
103
|
-
- **Misc** — `Card`, `Code`, `Progress`, `Tag`, `
|
|
106
|
+
- **Misc** — `Card`, `Code`, `Progress`, `Tag`, `Text`, `TextLayout`,
|
|
107
|
+
`ResponsiveText`
|
|
104
108
|
|
|
105
109
|
Plus a set of ready-made themes (`light`, `dark`, `material`, `bootstrap`,
|
|
106
110
|
`retro`, `purple`, `forest`, `canyon`, and several typography-only themes) under
|
package/dist/Card.svelte
CHANGED
|
@@ -62,7 +62,75 @@ let hasFooter = $derived(Boolean(footer));
|
|
|
62
62
|
var(--_bg-base),
|
|
63
63
|
var(--_bg-mix-color) var(--_bg-mix-amount)
|
|
64
64
|
);
|
|
65
|
-
--_color: color-mix(
|
|
65
|
+
--_color: color-mix(
|
|
66
|
+
in srgb,
|
|
67
|
+
var(--_fg-base),
|
|
68
|
+
var(--_fg-mix-color) var(--_fg-mix-amount)
|
|
69
|
+
);
|
|
70
|
+
--muted-color: var(--muted-color-override, var(--_background-color));
|
|
71
|
+
--primary-text-fg: var(
|
|
72
|
+
--primary-text-fg-override,
|
|
73
|
+
color-mix(
|
|
74
|
+
in srgb,
|
|
75
|
+
var(--_color),
|
|
76
|
+
var(--primary-color)
|
|
77
|
+
var(--primary-text-amount, var(--text-amount, 50%))
|
|
78
|
+
)
|
|
79
|
+
);
|
|
80
|
+
--secondary-text-fg: var(
|
|
81
|
+
--secondary-text-fg-override,
|
|
82
|
+
color-mix(
|
|
83
|
+
in srgb,
|
|
84
|
+
var(--_color),
|
|
85
|
+
var(--secondary-color)
|
|
86
|
+
var(--secondary-text-amount, var(--text-amount, 50%))
|
|
87
|
+
)
|
|
88
|
+
);
|
|
89
|
+
--info-text-fg: var(
|
|
90
|
+
--info-text-fg-override,
|
|
91
|
+
color-mix(
|
|
92
|
+
in srgb,
|
|
93
|
+
var(--_color),
|
|
94
|
+
var(--info-color)
|
|
95
|
+
var(--info-text-amount, var(--text-amount, 50%))
|
|
96
|
+
)
|
|
97
|
+
);
|
|
98
|
+
--success-text-fg: var(
|
|
99
|
+
--success-text-fg-override,
|
|
100
|
+
color-mix(
|
|
101
|
+
in srgb,
|
|
102
|
+
var(--_color),
|
|
103
|
+
var(--success-color)
|
|
104
|
+
var(--success-text-amount, var(--text-amount, 50%))
|
|
105
|
+
)
|
|
106
|
+
);
|
|
107
|
+
--warning-text-fg: var(
|
|
108
|
+
--warning-text-fg-override,
|
|
109
|
+
color-mix(
|
|
110
|
+
in srgb,
|
|
111
|
+
var(--_color),
|
|
112
|
+
var(--warning-color)
|
|
113
|
+
var(--warning-text-amount, var(--text-amount, 50%))
|
|
114
|
+
)
|
|
115
|
+
);
|
|
116
|
+
--danger-text-fg: var(
|
|
117
|
+
--danger-text-fg-override,
|
|
118
|
+
color-mix(
|
|
119
|
+
in srgb,
|
|
120
|
+
var(--_color),
|
|
121
|
+
var(--danger-color)
|
|
122
|
+
var(--danger-text-amount, var(--text-amount, 50%))
|
|
123
|
+
)
|
|
124
|
+
);
|
|
125
|
+
--muted-text-fg: var(
|
|
126
|
+
--muted-text-fg-override,
|
|
127
|
+
color-mix(
|
|
128
|
+
in srgb,
|
|
129
|
+
var(--_color),
|
|
130
|
+
var(--muted-color)
|
|
131
|
+
var(--muted-text-amount, var(--text-amount, 50%))
|
|
132
|
+
)
|
|
133
|
+
);
|
|
66
134
|
background-color: var(--_background-color);
|
|
67
135
|
color: var(--_color);
|
|
68
136
|
--_box-shadow:
|
|
@@ -133,7 +201,75 @@ header {
|
|
|
133
201
|
var(--_bg-base),
|
|
134
202
|
var(--_bg-mix-color) var(--_bg-mix-amount)
|
|
135
203
|
);
|
|
136
|
-
--_color: color-mix(
|
|
204
|
+
--_color: color-mix(
|
|
205
|
+
in srgb,
|
|
206
|
+
var(--_fg-base),
|
|
207
|
+
var(--_fg-mix-color) var(--_fg-mix-amount)
|
|
208
|
+
);
|
|
209
|
+
--muted-color: var(--muted-color-override, var(--_background-color));
|
|
210
|
+
--primary-text-fg: var(
|
|
211
|
+
--primary-text-fg-override,
|
|
212
|
+
color-mix(
|
|
213
|
+
in srgb,
|
|
214
|
+
var(--_color),
|
|
215
|
+
var(--primary-color)
|
|
216
|
+
var(--primary-text-amount, var(--text-amount, 50%))
|
|
217
|
+
)
|
|
218
|
+
);
|
|
219
|
+
--secondary-text-fg: var(
|
|
220
|
+
--secondary-text-fg-override,
|
|
221
|
+
color-mix(
|
|
222
|
+
in srgb,
|
|
223
|
+
var(--_color),
|
|
224
|
+
var(--secondary-color)
|
|
225
|
+
var(--secondary-text-amount, var(--text-amount, 50%))
|
|
226
|
+
)
|
|
227
|
+
);
|
|
228
|
+
--info-text-fg: var(
|
|
229
|
+
--info-text-fg-override,
|
|
230
|
+
color-mix(
|
|
231
|
+
in srgb,
|
|
232
|
+
var(--_color),
|
|
233
|
+
var(--info-color)
|
|
234
|
+
var(--info-text-amount, var(--text-amount, 50%))
|
|
235
|
+
)
|
|
236
|
+
);
|
|
237
|
+
--success-text-fg: var(
|
|
238
|
+
--success-text-fg-override,
|
|
239
|
+
color-mix(
|
|
240
|
+
in srgb,
|
|
241
|
+
var(--_color),
|
|
242
|
+
var(--success-color)
|
|
243
|
+
var(--success-text-amount, var(--text-amount, 50%))
|
|
244
|
+
)
|
|
245
|
+
);
|
|
246
|
+
--warning-text-fg: var(
|
|
247
|
+
--warning-text-fg-override,
|
|
248
|
+
color-mix(
|
|
249
|
+
in srgb,
|
|
250
|
+
var(--_color),
|
|
251
|
+
var(--warning-color)
|
|
252
|
+
var(--warning-text-amount, var(--text-amount, 50%))
|
|
253
|
+
)
|
|
254
|
+
);
|
|
255
|
+
--danger-text-fg: var(
|
|
256
|
+
--danger-text-fg-override,
|
|
257
|
+
color-mix(
|
|
258
|
+
in srgb,
|
|
259
|
+
var(--_color),
|
|
260
|
+
var(--danger-color)
|
|
261
|
+
var(--danger-text-amount, var(--text-amount, 50%))
|
|
262
|
+
)
|
|
263
|
+
);
|
|
264
|
+
--muted-text-fg: var(
|
|
265
|
+
--muted-text-fg-override,
|
|
266
|
+
color-mix(
|
|
267
|
+
in srgb,
|
|
268
|
+
var(--_color),
|
|
269
|
+
var(--muted-color)
|
|
270
|
+
var(--muted-text-amount, var(--text-amount, 50%))
|
|
271
|
+
)
|
|
272
|
+
);
|
|
137
273
|
background-color: var(--_background-color);
|
|
138
274
|
color: var(--_color);
|
|
139
275
|
box-sizing: border-box;
|
|
@@ -181,7 +317,75 @@ footer :global(h6) {
|
|
|
181
317
|
var(--_bg-base),
|
|
182
318
|
var(--_bg-mix-color) var(--_bg-mix-amount)
|
|
183
319
|
);
|
|
184
|
-
--_color: color-mix(
|
|
320
|
+
--_color: color-mix(
|
|
321
|
+
in srgb,
|
|
322
|
+
var(--_fg-base),
|
|
323
|
+
var(--_fg-mix-color) var(--_fg-mix-amount)
|
|
324
|
+
);
|
|
325
|
+
--muted-color: var(--muted-color-override, var(--_background-color));
|
|
326
|
+
--primary-text-fg: var(
|
|
327
|
+
--primary-text-fg-override,
|
|
328
|
+
color-mix(
|
|
329
|
+
in srgb,
|
|
330
|
+
var(--_color),
|
|
331
|
+
var(--primary-color)
|
|
332
|
+
var(--primary-text-amount, var(--text-amount, 50%))
|
|
333
|
+
)
|
|
334
|
+
);
|
|
335
|
+
--secondary-text-fg: var(
|
|
336
|
+
--secondary-text-fg-override,
|
|
337
|
+
color-mix(
|
|
338
|
+
in srgb,
|
|
339
|
+
var(--_color),
|
|
340
|
+
var(--secondary-color)
|
|
341
|
+
var(--secondary-text-amount, var(--text-amount, 50%))
|
|
342
|
+
)
|
|
343
|
+
);
|
|
344
|
+
--info-text-fg: var(
|
|
345
|
+
--info-text-fg-override,
|
|
346
|
+
color-mix(
|
|
347
|
+
in srgb,
|
|
348
|
+
var(--_color),
|
|
349
|
+
var(--info-color)
|
|
350
|
+
var(--info-text-amount, var(--text-amount, 50%))
|
|
351
|
+
)
|
|
352
|
+
);
|
|
353
|
+
--success-text-fg: var(
|
|
354
|
+
--success-text-fg-override,
|
|
355
|
+
color-mix(
|
|
356
|
+
in srgb,
|
|
357
|
+
var(--_color),
|
|
358
|
+
var(--success-color)
|
|
359
|
+
var(--success-text-amount, var(--text-amount, 50%))
|
|
360
|
+
)
|
|
361
|
+
);
|
|
362
|
+
--warning-text-fg: var(
|
|
363
|
+
--warning-text-fg-override,
|
|
364
|
+
color-mix(
|
|
365
|
+
in srgb,
|
|
366
|
+
var(--_color),
|
|
367
|
+
var(--warning-color)
|
|
368
|
+
var(--warning-text-amount, var(--text-amount, 50%))
|
|
369
|
+
)
|
|
370
|
+
);
|
|
371
|
+
--danger-text-fg: var(
|
|
372
|
+
--danger-text-fg-override,
|
|
373
|
+
color-mix(
|
|
374
|
+
in srgb,
|
|
375
|
+
var(--_color),
|
|
376
|
+
var(--danger-color)
|
|
377
|
+
var(--danger-text-amount, var(--text-amount, 50%))
|
|
378
|
+
)
|
|
379
|
+
);
|
|
380
|
+
--muted-text-fg: var(
|
|
381
|
+
--muted-text-fg-override,
|
|
382
|
+
color-mix(
|
|
383
|
+
in srgb,
|
|
384
|
+
var(--_color),
|
|
385
|
+
var(--muted-color)
|
|
386
|
+
var(--muted-text-amount, var(--text-amount, 50%))
|
|
387
|
+
)
|
|
388
|
+
);
|
|
185
389
|
background-color: var(--_background-color);
|
|
186
390
|
color: var(--_color);
|
|
187
391
|
}
|
|
@@ -200,7 +404,75 @@ footer {
|
|
|
200
404
|
var(--_bg-base),
|
|
201
405
|
var(--_bg-mix-color) var(--_bg-mix-amount)
|
|
202
406
|
);
|
|
203
|
-
--_color: color-mix(
|
|
407
|
+
--_color: color-mix(
|
|
408
|
+
in srgb,
|
|
409
|
+
var(--_fg-base),
|
|
410
|
+
var(--_fg-mix-color) var(--_fg-mix-amount)
|
|
411
|
+
);
|
|
412
|
+
--muted-color: var(--muted-color-override, var(--_background-color));
|
|
413
|
+
--primary-text-fg: var(
|
|
414
|
+
--primary-text-fg-override,
|
|
415
|
+
color-mix(
|
|
416
|
+
in srgb,
|
|
417
|
+
var(--_color),
|
|
418
|
+
var(--primary-color)
|
|
419
|
+
var(--primary-text-amount, var(--text-amount, 50%))
|
|
420
|
+
)
|
|
421
|
+
);
|
|
422
|
+
--secondary-text-fg: var(
|
|
423
|
+
--secondary-text-fg-override,
|
|
424
|
+
color-mix(
|
|
425
|
+
in srgb,
|
|
426
|
+
var(--_color),
|
|
427
|
+
var(--secondary-color)
|
|
428
|
+
var(--secondary-text-amount, var(--text-amount, 50%))
|
|
429
|
+
)
|
|
430
|
+
);
|
|
431
|
+
--info-text-fg: var(
|
|
432
|
+
--info-text-fg-override,
|
|
433
|
+
color-mix(
|
|
434
|
+
in srgb,
|
|
435
|
+
var(--_color),
|
|
436
|
+
var(--info-color)
|
|
437
|
+
var(--info-text-amount, var(--text-amount, 50%))
|
|
438
|
+
)
|
|
439
|
+
);
|
|
440
|
+
--success-text-fg: var(
|
|
441
|
+
--success-text-fg-override,
|
|
442
|
+
color-mix(
|
|
443
|
+
in srgb,
|
|
444
|
+
var(--_color),
|
|
445
|
+
var(--success-color)
|
|
446
|
+
var(--success-text-amount, var(--text-amount, 50%))
|
|
447
|
+
)
|
|
448
|
+
);
|
|
449
|
+
--warning-text-fg: var(
|
|
450
|
+
--warning-text-fg-override,
|
|
451
|
+
color-mix(
|
|
452
|
+
in srgb,
|
|
453
|
+
var(--_color),
|
|
454
|
+
var(--warning-color)
|
|
455
|
+
var(--warning-text-amount, var(--text-amount, 50%))
|
|
456
|
+
)
|
|
457
|
+
);
|
|
458
|
+
--danger-text-fg: var(
|
|
459
|
+
--danger-text-fg-override,
|
|
460
|
+
color-mix(
|
|
461
|
+
in srgb,
|
|
462
|
+
var(--_color),
|
|
463
|
+
var(--danger-color)
|
|
464
|
+
var(--danger-text-amount, var(--text-amount, 50%))
|
|
465
|
+
)
|
|
466
|
+
);
|
|
467
|
+
--muted-text-fg: var(
|
|
468
|
+
--muted-text-fg-override,
|
|
469
|
+
color-mix(
|
|
470
|
+
in srgb,
|
|
471
|
+
var(--_color),
|
|
472
|
+
var(--muted-color)
|
|
473
|
+
var(--muted-text-amount, var(--text-amount, 50%))
|
|
474
|
+
)
|
|
475
|
+
);
|
|
204
476
|
background-color: var(--_background-color);
|
|
205
477
|
color: var(--_color);
|
|
206
478
|
box-sizing: border-box;
|
|
@@ -238,7 +510,75 @@ section {
|
|
|
238
510
|
var(--_bg-base),
|
|
239
511
|
var(--_bg-mix-color) var(--_bg-mix-amount)
|
|
240
512
|
);
|
|
241
|
-
--_color: color-mix(
|
|
513
|
+
--_color: color-mix(
|
|
514
|
+
in srgb,
|
|
515
|
+
var(--_fg-base),
|
|
516
|
+
var(--_fg-mix-color) var(--_fg-mix-amount)
|
|
517
|
+
);
|
|
518
|
+
--muted-color: var(--muted-color-override, var(--_background-color));
|
|
519
|
+
--primary-text-fg: var(
|
|
520
|
+
--primary-text-fg-override,
|
|
521
|
+
color-mix(
|
|
522
|
+
in srgb,
|
|
523
|
+
var(--_color),
|
|
524
|
+
var(--primary-color)
|
|
525
|
+
var(--primary-text-amount, var(--text-amount, 50%))
|
|
526
|
+
)
|
|
527
|
+
);
|
|
528
|
+
--secondary-text-fg: var(
|
|
529
|
+
--secondary-text-fg-override,
|
|
530
|
+
color-mix(
|
|
531
|
+
in srgb,
|
|
532
|
+
var(--_color),
|
|
533
|
+
var(--secondary-color)
|
|
534
|
+
var(--secondary-text-amount, var(--text-amount, 50%))
|
|
535
|
+
)
|
|
536
|
+
);
|
|
537
|
+
--info-text-fg: var(
|
|
538
|
+
--info-text-fg-override,
|
|
539
|
+
color-mix(
|
|
540
|
+
in srgb,
|
|
541
|
+
var(--_color),
|
|
542
|
+
var(--info-color)
|
|
543
|
+
var(--info-text-amount, var(--text-amount, 50%))
|
|
544
|
+
)
|
|
545
|
+
);
|
|
546
|
+
--success-text-fg: var(
|
|
547
|
+
--success-text-fg-override,
|
|
548
|
+
color-mix(
|
|
549
|
+
in srgb,
|
|
550
|
+
var(--_color),
|
|
551
|
+
var(--success-color)
|
|
552
|
+
var(--success-text-amount, var(--text-amount, 50%))
|
|
553
|
+
)
|
|
554
|
+
);
|
|
555
|
+
--warning-text-fg: var(
|
|
556
|
+
--warning-text-fg-override,
|
|
557
|
+
color-mix(
|
|
558
|
+
in srgb,
|
|
559
|
+
var(--_color),
|
|
560
|
+
var(--warning-color)
|
|
561
|
+
var(--warning-text-amount, var(--text-amount, 50%))
|
|
562
|
+
)
|
|
563
|
+
);
|
|
564
|
+
--danger-text-fg: var(
|
|
565
|
+
--danger-text-fg-override,
|
|
566
|
+
color-mix(
|
|
567
|
+
in srgb,
|
|
568
|
+
var(--_color),
|
|
569
|
+
var(--danger-color)
|
|
570
|
+
var(--danger-text-amount, var(--text-amount, 50%))
|
|
571
|
+
)
|
|
572
|
+
);
|
|
573
|
+
--muted-text-fg: var(
|
|
574
|
+
--muted-text-fg-override,
|
|
575
|
+
color-mix(
|
|
576
|
+
in srgb,
|
|
577
|
+
var(--_color),
|
|
578
|
+
var(--muted-color)
|
|
579
|
+
var(--muted-text-amount, var(--text-amount, 50%))
|
|
580
|
+
)
|
|
581
|
+
);
|
|
242
582
|
background-color: var(--_background-color);
|
|
243
583
|
color: var(--_color);
|
|
244
584
|
box-sizing: border-box;
|