@marianmeres/stuic 3.40.2 → 3.42.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/dist/components/AssetsPreview/AssetsPreviewInline.svelte +1 -2
- package/dist/components/AssetsPreview/_internal/AssetsPreviewContent.svelte +169 -74
- package/dist/components/AssetsPreview/_internal/AssetsPreviewContent.svelte.d.ts +2 -0
- package/dist/themes/css/monokai-cyan.css +217 -0
- package/dist/themes/css/monokai-green.css +217 -0
- package/dist/themes/css/monokai-pink.css +217 -0
- package/dist/themes/monokai-cyan.d.ts +6 -0
- package/dist/themes/monokai-cyan.js +117 -0
- package/dist/themes/monokai-green.d.ts +6 -0
- package/dist/themes/monokai-green.js +117 -0
- package/dist/themes/monokai-pink.d.ts +6 -0
- package/dist/themes/monokai-pink.js +117 -0
- package/package.json +6 -6
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
import { preloadImgs, type PreloadImgOptions } from "../../../utils/preload-img.js";
|
|
15
15
|
import { resolveUrl, resolveSrcset } from "../../../utils/resolve-url.js";
|
|
16
16
|
import { fade } from "svelte/transition";
|
|
17
|
+
import { waitForNextRepaint } from "../../../utils/paint.js";
|
|
18
|
+
import { sleep } from "../../../utils/sleep.js";
|
|
17
19
|
import Button from "../../Button/Button.svelte";
|
|
18
20
|
import SpinnerCircleOscillate from "../../Spinner/SpinnerCircleOscillate.svelte";
|
|
19
21
|
import type {
|
|
@@ -56,6 +58,8 @@
|
|
|
56
58
|
/** Callback when a clickable area on an image is clicked */
|
|
57
59
|
onAreaClick?: (data: { area: AssetArea; asset: AssetPreviewNormalized }) => void;
|
|
58
60
|
onClose?: () => void;
|
|
61
|
+
/** Duration of prev/next slide transition in ms (0 to disable) */
|
|
62
|
+
slideDuration?: number;
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
const clog = createClog("AssetsPreview", { color: "auto" });
|
|
@@ -79,6 +83,7 @@
|
|
|
79
83
|
onDelete,
|
|
80
84
|
onAreaClick,
|
|
81
85
|
onClose,
|
|
86
|
+
slideDuration = 300,
|
|
82
87
|
}: Props = $props();
|
|
83
88
|
|
|
84
89
|
let dotTooltip: string | undefined = $state();
|
|
@@ -376,19 +381,51 @@
|
|
|
376
381
|
});
|
|
377
382
|
}
|
|
378
383
|
|
|
379
|
-
|
|
380
|
-
|
|
384
|
+
async function slideToIndex(targetIdx: number, direction: "next" | "prev") {
|
|
385
|
+
if (slidePhase !== "idle") return;
|
|
386
|
+
targetIdx = ((targetIdx % assets.length) + assets.length) % assets.length;
|
|
387
|
+
if (targetIdx === previewIdx) return;
|
|
388
|
+
|
|
389
|
+
if (!slideDuration) {
|
|
390
|
+
// No animation — instant swap
|
|
391
|
+
previewIdx = targetIdx;
|
|
392
|
+
resetZoom();
|
|
393
|
+
return;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
// Phase 1: setup — position incoming panel off-screen, outgoing at center
|
|
397
|
+
slidePhase = "setup";
|
|
398
|
+
slideDirection = direction;
|
|
399
|
+
outgoingIdx = previewIdx;
|
|
400
|
+
previewIdx = targetIdx;
|
|
381
401
|
resetZoom();
|
|
402
|
+
|
|
403
|
+
// Wait for both panels to be rendered in their initial positions
|
|
404
|
+
await waitForNextRepaint();
|
|
405
|
+
|
|
406
|
+
// Phase 2: sliding — trigger CSS transition on both panels
|
|
407
|
+
slidePhase = "sliding";
|
|
408
|
+
|
|
409
|
+
await sleep(slideDuration);
|
|
410
|
+
|
|
411
|
+
// Phase 3: clean up
|
|
412
|
+
outgoingIdx = null;
|
|
413
|
+
slideDirection = null;
|
|
414
|
+
slidePhase = "idle";
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
export function next() {
|
|
418
|
+
slideToIndex((previewIdx + 1) % assets.length, "next");
|
|
382
419
|
}
|
|
383
420
|
|
|
384
421
|
export function previous() {
|
|
385
|
-
|
|
386
|
-
resetZoom();
|
|
422
|
+
slideToIndex((previewIdx - 1 + assets.length) % assets.length, "prev");
|
|
387
423
|
}
|
|
388
424
|
|
|
389
425
|
export function goTo(idx: number) {
|
|
390
|
-
|
|
391
|
-
|
|
426
|
+
const targetIdx = ((idx % assets.length) + assets.length) % assets.length;
|
|
427
|
+
if (targetIdx === previewIdx) return;
|
|
428
|
+
slideToIndex(targetIdx, targetIdx > previewIdx ? "next" : "prev");
|
|
392
429
|
}
|
|
393
430
|
|
|
394
431
|
let previewAsset = $derived(assets?.[previewIdx]);
|
|
@@ -447,79 +484,33 @@
|
|
|
447
484
|
let isSwiping = false;
|
|
448
485
|
const SWIPE_THRESHOLD = 50; // px
|
|
449
486
|
const SWIPE_MAX_TIME = 400; // ms
|
|
487
|
+
|
|
488
|
+
// Slide transition state
|
|
489
|
+
type SlidePhase = "idle" | "setup" | "sliding";
|
|
490
|
+
let slidePhase: SlidePhase = $state("idle");
|
|
491
|
+
let slideDirection: "next" | "prev" | null = $state(null);
|
|
492
|
+
let outgoingIdx: number | null = $state(null);
|
|
493
|
+
let outgoingAsset = $derived(outgoingIdx !== null ? assets?.[outgoingIdx] : null);
|
|
494
|
+
|
|
495
|
+
const SLIDE_PANEL_CLASS = "absolute inset-0 transition-transform ease-in-out";
|
|
450
496
|
</script>
|
|
451
497
|
|
|
452
|
-
{#
|
|
453
|
-
{#if
|
|
454
|
-
<div
|
|
455
|
-
use:interactable
|
|
456
|
-
bind:this={containerEl}
|
|
457
|
-
class="w-full h-full overflow-hidden flex items-center justify-center relative"
|
|
458
|
-
>
|
|
498
|
+
{#snippet staticAssetPanel(asset: AssetPreviewNormalized)}
|
|
499
|
+
{#if asset.isImage}
|
|
500
|
+
<div class="w-full h-full overflow-hidden flex items-center justify-center">
|
|
459
501
|
<img
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
sizes={previewAsset.sizes || undefined}
|
|
502
|
+
src={resolveUrl(String(asset.url.full), baseUrl)}
|
|
503
|
+
srcset={resolveSrcset(asset.srcset ?? "", baseUrl) || undefined}
|
|
504
|
+
sizes={asset.sizes || undefined}
|
|
464
505
|
class="max-w-full max-h-full object-scale-down select-none"
|
|
465
|
-
|
|
466
|
-
class:cursor-grabbing={isPanning}
|
|
467
|
-
alt={previewAsset?.name}
|
|
468
|
-
style:transform="scale({zoomLevel}) translate({panX / zoomLevel}px, {panY /
|
|
469
|
-
zoomLevel}px)"
|
|
470
|
-
style:transform-origin="center center"
|
|
506
|
+
alt={asset.name}
|
|
471
507
|
draggable="false"
|
|
472
|
-
onload={() => {
|
|
473
|
-
isLoading = false;
|
|
474
|
-
showSpinner = false;
|
|
475
|
-
clearTimeout(loadingTimer);
|
|
476
|
-
}}
|
|
477
|
-
onerror={() => {
|
|
478
|
-
isLoading = false;
|
|
479
|
-
showSpinner = false;
|
|
480
|
-
clearTimeout(loadingTimer);
|
|
481
|
-
}}
|
|
482
508
|
/>
|
|
483
|
-
{#if onAreaClick && previewAsset.areas?.length && previewAsset.width && previewAsset.height}
|
|
484
|
-
<svg
|
|
485
|
-
viewBox="0 0 {previewAsset.width} {previewAsset.height}"
|
|
486
|
-
preserveAspectRatio="xMidYMid meet"
|
|
487
|
-
class="stuic-assets-preview-areas"
|
|
488
|
-
style:transform="scale({zoomLevel}) translate({panX / zoomLevel}px, {panY /
|
|
489
|
-
zoomLevel}px)"
|
|
490
|
-
style:transform-origin="center center"
|
|
491
|
-
>
|
|
492
|
-
{#each previewAsset.areas as area, i (`${area.id}-${i}`)}
|
|
493
|
-
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
494
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
495
|
-
<rect
|
|
496
|
-
x={area.x}
|
|
497
|
-
y={area.y}
|
|
498
|
-
width={area.w}
|
|
499
|
-
height={area.h}
|
|
500
|
-
class="stuic-assets-preview-area"
|
|
501
|
-
onclick={(e: MouseEvent) => {
|
|
502
|
-
if (_wasDragged) return;
|
|
503
|
-
e.stopPropagation();
|
|
504
|
-
onAreaClick({ area, asset: previewAsset });
|
|
505
|
-
}}
|
|
506
|
-
/>
|
|
507
|
-
{/each}
|
|
508
|
-
</svg>
|
|
509
|
-
{/if}
|
|
510
|
-
{#if showSpinner}
|
|
511
|
-
<div
|
|
512
|
-
class="absolute inset-0 flex items-center justify-center pointer-events-none"
|
|
513
|
-
transition:fade={{ duration: 150 }}
|
|
514
|
-
>
|
|
515
|
-
<SpinnerCircleOscillate class="size-10 text-(--stuic-color-muted-foreground)" />
|
|
516
|
-
</div>
|
|
517
|
-
{/if}
|
|
518
509
|
</div>
|
|
519
510
|
{:else}
|
|
520
|
-
<div
|
|
511
|
+
<div class="w-full h-full flex flex-col items-center justify-center">
|
|
521
512
|
<div>
|
|
522
|
-
{@html getAssetIcon(
|
|
513
|
+
{@html getAssetIcon(asset.ext)({
|
|
523
514
|
size: 32,
|
|
524
515
|
class: "mx-auto",
|
|
525
516
|
})}
|
|
@@ -529,6 +520,113 @@
|
|
|
529
520
|
</div>
|
|
530
521
|
</div>
|
|
531
522
|
{/if}
|
|
523
|
+
{/snippet}
|
|
524
|
+
|
|
525
|
+
{#if previewAsset}
|
|
526
|
+
<!-- Sliding content container -->
|
|
527
|
+
<div class="relative w-full h-full overflow-hidden">
|
|
528
|
+
<!-- Outgoing panel (visible during slide transition only) -->
|
|
529
|
+
{#if outgoingAsset}
|
|
530
|
+
<div
|
|
531
|
+
class={SLIDE_PANEL_CLASS}
|
|
532
|
+
style="transition-duration: {slidePhase === 'sliding' ? slideDuration : 0}ms;"
|
|
533
|
+
class:translate-x-0={slidePhase === 'setup'}
|
|
534
|
+
class:-translate-x-full={slidePhase === 'sliding' && slideDirection === 'next'}
|
|
535
|
+
class:translate-x-full={slidePhase === 'sliding' && slideDirection === 'prev'}
|
|
536
|
+
>
|
|
537
|
+
{@render staticAssetPanel(outgoingAsset)}
|
|
538
|
+
</div>
|
|
539
|
+
{/if}
|
|
540
|
+
|
|
541
|
+
<!-- Active panel -->
|
|
542
|
+
<div
|
|
543
|
+
class={SLIDE_PANEL_CLASS}
|
|
544
|
+
style="transition-duration: {slidePhase === 'sliding' ? slideDuration : 0}ms;"
|
|
545
|
+
class:translate-x-0={slidePhase === 'idle' || slidePhase === 'sliding'}
|
|
546
|
+
class:translate-x-full={slidePhase === 'setup' && slideDirection === 'next'}
|
|
547
|
+
class:-translate-x-full={slidePhase === 'setup' && slideDirection === 'prev'}
|
|
548
|
+
>
|
|
549
|
+
{#if previewAsset.isImage}
|
|
550
|
+
<div
|
|
551
|
+
use:interactable
|
|
552
|
+
bind:this={containerEl}
|
|
553
|
+
class="w-full h-full overflow-hidden flex items-center justify-center relative"
|
|
554
|
+
>
|
|
555
|
+
<img
|
|
556
|
+
use:pannable
|
|
557
|
+
src={resolveUrl(String(previewAsset.url.full), baseUrl)}
|
|
558
|
+
srcset={resolveSrcset(previewAsset.srcset ?? "", baseUrl) || undefined}
|
|
559
|
+
sizes={previewAsset.sizes || undefined}
|
|
560
|
+
class="max-w-full max-h-full object-scale-down select-none"
|
|
561
|
+
class:cursor-grab={zoomLevel > 1 && !isPanning}
|
|
562
|
+
class:cursor-grabbing={isPanning}
|
|
563
|
+
alt={previewAsset?.name}
|
|
564
|
+
style:transform="scale({zoomLevel}) translate({panX / zoomLevel}px, {panY /
|
|
565
|
+
zoomLevel}px)"
|
|
566
|
+
style:transform-origin="center center"
|
|
567
|
+
draggable="false"
|
|
568
|
+
onload={() => {
|
|
569
|
+
isLoading = false;
|
|
570
|
+
showSpinner = false;
|
|
571
|
+
clearTimeout(loadingTimer);
|
|
572
|
+
}}
|
|
573
|
+
onerror={() => {
|
|
574
|
+
isLoading = false;
|
|
575
|
+
showSpinner = false;
|
|
576
|
+
clearTimeout(loadingTimer);
|
|
577
|
+
}}
|
|
578
|
+
/>
|
|
579
|
+
{#if onAreaClick && previewAsset.areas?.length && previewAsset.width && previewAsset.height}
|
|
580
|
+
<svg
|
|
581
|
+
viewBox="0 0 {previewAsset.width} {previewAsset.height}"
|
|
582
|
+
preserveAspectRatio="xMidYMid meet"
|
|
583
|
+
class="stuic-assets-preview-areas"
|
|
584
|
+
style:transform="scale({zoomLevel}) translate({panX / zoomLevel}px, {panY /
|
|
585
|
+
zoomLevel}px)"
|
|
586
|
+
style:transform-origin="center center"
|
|
587
|
+
>
|
|
588
|
+
{#each previewAsset.areas as area, i (`${area.id}-${i}`)}
|
|
589
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
590
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
591
|
+
<rect
|
|
592
|
+
x={area.x}
|
|
593
|
+
y={area.y}
|
|
594
|
+
width={area.w}
|
|
595
|
+
height={area.h}
|
|
596
|
+
class="stuic-assets-preview-area"
|
|
597
|
+
onclick={(e: MouseEvent) => {
|
|
598
|
+
if (_wasDragged) return;
|
|
599
|
+
e.stopPropagation();
|
|
600
|
+
onAreaClick({ area, asset: previewAsset });
|
|
601
|
+
}}
|
|
602
|
+
/>
|
|
603
|
+
{/each}
|
|
604
|
+
</svg>
|
|
605
|
+
{/if}
|
|
606
|
+
{#if showSpinner}
|
|
607
|
+
<div
|
|
608
|
+
class="absolute inset-0 flex items-center justify-center pointer-events-none"
|
|
609
|
+
transition:fade={{ duration: 150 }}
|
|
610
|
+
>
|
|
611
|
+
<SpinnerCircleOscillate class="size-10 text-(--stuic-color-muted-foreground)" />
|
|
612
|
+
</div>
|
|
613
|
+
{/if}
|
|
614
|
+
</div>
|
|
615
|
+
{:else}
|
|
616
|
+
<div use:swipeable class="w-full h-full flex flex-col items-center justify-center">
|
|
617
|
+
<div>
|
|
618
|
+
{@html getAssetIcon(previewAsset.ext)({
|
|
619
|
+
size: 32,
|
|
620
|
+
class: "mx-auto",
|
|
621
|
+
})}
|
|
622
|
+
</div>
|
|
623
|
+
<div class="text-(--stuic-color-muted-foreground) mt-4">
|
|
624
|
+
{t("unable_to_preview")}
|
|
625
|
+
</div>
|
|
626
|
+
</div>
|
|
627
|
+
{/if}
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
532
630
|
|
|
533
631
|
{#if assets?.length > 1 && !noPrevNext}
|
|
534
632
|
<div class={twMerge("absolute inset-0 flex justify-between pointer-events-none", prevNextBottom ? "items-end pb-4" : "items-center")}>
|
|
@@ -649,10 +747,7 @@
|
|
|
649
747
|
<button
|
|
650
748
|
type="button"
|
|
651
749
|
class={twMerge("stuic-assets-preview-dot", i === previewIdx ? "active" : "")}
|
|
652
|
-
onclick={() =>
|
|
653
|
-
previewIdx = i;
|
|
654
|
-
resetZoom();
|
|
655
|
-
}}
|
|
750
|
+
onclick={() => goTo(i)}
|
|
656
751
|
aria-label={assets[i]?.name}
|
|
657
752
|
onmouseover={() => {
|
|
658
753
|
dotTooltip = assets[i]?.name;
|
|
@@ -32,6 +32,8 @@ interface Props {
|
|
|
32
32
|
asset: AssetPreviewNormalized;
|
|
33
33
|
}) => void;
|
|
34
34
|
onClose?: () => void;
|
|
35
|
+
/** Duration of prev/next slide transition in ms (0 to disable) */
|
|
36
|
+
slideDuration?: number;
|
|
35
37
|
}
|
|
36
38
|
declare const AssetsPreviewContent: import("svelte").Component<Props, {
|
|
37
39
|
resetZoom: () => void;
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
2
|
+
:root {
|
|
3
|
+
--stuic-color-primary: var(--color-cyan-600, #737373);
|
|
4
|
+
|
|
5
|
+
--stuic-color-primary-hover: var(--color-cyan-700, #737373);
|
|
6
|
+
--stuic-color-primary-active: var(--color-cyan-800, #737373);
|
|
7
|
+
--stuic-color-primary-foreground: var(--color-white, #ffffff);
|
|
8
|
+
--stuic-color-primary-foreground-hover: var(--color-white, #ffffff);
|
|
9
|
+
--stuic-color-primary-foreground-active: var(--color-white, #ffffff);
|
|
10
|
+
|
|
11
|
+
--stuic-color-accent: var(--color-violet-500, #737373);
|
|
12
|
+
|
|
13
|
+
--stuic-color-accent-hover: var(--color-violet-600, #737373);
|
|
14
|
+
--stuic-color-accent-active: var(--color-violet-700, #737373);
|
|
15
|
+
--stuic-color-accent-foreground: var(--color-white, #ffffff);
|
|
16
|
+
--stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
|
|
17
|
+
--stuic-color-accent-foreground-active: var(--color-white, #ffffff);
|
|
18
|
+
|
|
19
|
+
--stuic-color-destructive: var(--color-rose-600, #737373);
|
|
20
|
+
|
|
21
|
+
--stuic-color-destructive-hover: var(--color-rose-700, #737373);
|
|
22
|
+
--stuic-color-destructive-active: var(--color-rose-800, #737373);
|
|
23
|
+
--stuic-color-destructive-foreground: var(--color-white, #ffffff);
|
|
24
|
+
--stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
|
|
25
|
+
--stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
|
|
26
|
+
|
|
27
|
+
--stuic-color-warning: var(--color-amber-500, #737373);
|
|
28
|
+
|
|
29
|
+
--stuic-color-warning-hover: var(--color-amber-600, #737373);
|
|
30
|
+
--stuic-color-warning-active: var(--color-amber-700, #737373);
|
|
31
|
+
--stuic-color-warning-foreground: var(--color-black, #000000);
|
|
32
|
+
--stuic-color-warning-foreground-hover: var(--color-black, #000000);
|
|
33
|
+
--stuic-color-warning-foreground-active: var(--color-black, #000000);
|
|
34
|
+
|
|
35
|
+
--stuic-color-success: var(--color-emerald-600, #737373);
|
|
36
|
+
|
|
37
|
+
--stuic-color-success-hover: var(--color-emerald-700, #737373);
|
|
38
|
+
--stuic-color-success-active: var(--color-emerald-800, #737373);
|
|
39
|
+
--stuic-color-success-foreground: var(--color-white, #ffffff);
|
|
40
|
+
--stuic-color-success-foreground-hover: var(--color-white, #ffffff);
|
|
41
|
+
--stuic-color-success-foreground-active: var(--color-white, #ffffff);
|
|
42
|
+
|
|
43
|
+
--stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
|
|
44
|
+
--stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
|
|
45
|
+
--stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
|
|
46
|
+
--stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
|
|
47
|
+
--stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 10%);
|
|
48
|
+
--stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
|
|
49
|
+
--stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
|
|
50
|
+
--stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
|
|
51
|
+
--stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
|
|
52
|
+
--stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
|
|
53
|
+
--stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 10%);
|
|
54
|
+
--stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
|
|
55
|
+
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
56
|
+
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
|
|
57
|
+
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
58
|
+
--stuic-color-surface-hover: var(--color-stone-300, #737373);
|
|
59
|
+
--stuic-color-surface-active: var(--color-stone-400, #737373);
|
|
60
|
+
--stuic-color-surface-foreground: var(--color-stone-900, #737373);
|
|
61
|
+
--stuic-color-surface-foreground-hover: var(--color-stone-900, #737373);
|
|
62
|
+
--stuic-color-surface-foreground-active: var(--color-stone-900, #737373);
|
|
63
|
+
|
|
64
|
+
--stuic-color-background: var(--color-stone-50, #737373);
|
|
65
|
+
|
|
66
|
+
--stuic-color-background-hover: var(--color-stone-50, #737373);
|
|
67
|
+
--stuic-color-background-active: var(--color-stone-50, #737373);
|
|
68
|
+
--stuic-color-background-foreground: var(--color-stone-900, #737373);
|
|
69
|
+
--stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
|
|
70
|
+
--stuic-color-background-foreground-active: var(--color-stone-900, #737373);
|
|
71
|
+
|
|
72
|
+
--stuic-color-muted: var(--color-stone-100, #737373);
|
|
73
|
+
|
|
74
|
+
--stuic-color-muted-hover: var(--color-stone-200, #737373);
|
|
75
|
+
--stuic-color-muted-active: var(--color-stone-300, #737373);
|
|
76
|
+
--stuic-color-muted-foreground: var(--color-stone-500, #737373);
|
|
77
|
+
--stuic-color-muted-foreground-hover: var(--color-stone-500, #737373);
|
|
78
|
+
--stuic-color-muted-foreground-active: var(--color-stone-500, #737373);
|
|
79
|
+
|
|
80
|
+
--stuic-color-surface: var(--color-stone-200, #737373);
|
|
81
|
+
|
|
82
|
+
--stuic-color-surface-1: var(--color-stone-300, #737373);
|
|
83
|
+
--stuic-color-surface-1-hover: var(--color-stone-400, #737373);
|
|
84
|
+
--stuic-color-surface-1-active: var(--color-stone-500, #737373);
|
|
85
|
+
--stuic-color-surface-1-foreground: var(--color-stone-900, #737373);
|
|
86
|
+
--stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
|
|
87
|
+
--stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
|
|
88
|
+
|
|
89
|
+
--stuic-color-foreground: var(--color-stone-900, #737373);
|
|
90
|
+
|
|
91
|
+
--stuic-color-foreground-hover: var(--color-stone-900, #737373);
|
|
92
|
+
--stuic-color-foreground-active: var(--color-stone-900, #737373);
|
|
93
|
+
|
|
94
|
+
--stuic-color-border: var(--color-stone-300, #737373);
|
|
95
|
+
|
|
96
|
+
--stuic-color-border-hover: var(--color-stone-400, #737373);
|
|
97
|
+
--stuic-color-border-active: var(--color-stone-500, #737373);
|
|
98
|
+
|
|
99
|
+
--stuic-color-input: var(--color-stone-50, #737373);
|
|
100
|
+
|
|
101
|
+
--stuic-color-input-hover: var(--color-stone-100, #737373);
|
|
102
|
+
--stuic-color-input-active: var(--color-stone-200, #737373);
|
|
103
|
+
|
|
104
|
+
--stuic-color-ring: color-mix(in srgb, var(--color-cyan-600) 20%, transparent);
|
|
105
|
+
|
|
106
|
+
--stuic-color-ring-hover: color-mix(in srgb, var(--color-cyan-600) 20%, transparent);
|
|
107
|
+
--stuic-color-ring-active: color-mix(in srgb, var(--color-cyan-600) 20%, transparent);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* prettier-ignore */
|
|
111
|
+
:root.dark {
|
|
112
|
+
--stuic-color-primary: var(--color-cyan-400, #737373);
|
|
113
|
+
|
|
114
|
+
--stuic-color-primary-hover: var(--color-cyan-300, #737373);
|
|
115
|
+
--stuic-color-primary-active: var(--color-cyan-200, #737373);
|
|
116
|
+
--stuic-color-primary-foreground: var(--color-black, #000000);
|
|
117
|
+
--stuic-color-primary-foreground-hover: var(--color-black, #000000);
|
|
118
|
+
--stuic-color-primary-foreground-active: var(--color-black, #000000);
|
|
119
|
+
|
|
120
|
+
--stuic-color-accent: var(--color-violet-400, #737373);
|
|
121
|
+
|
|
122
|
+
--stuic-color-accent-hover: var(--color-violet-300, #737373);
|
|
123
|
+
--stuic-color-accent-active: var(--color-violet-200, #737373);
|
|
124
|
+
--stuic-color-accent-foreground: var(--color-white, #ffffff);
|
|
125
|
+
--stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
|
|
126
|
+
--stuic-color-accent-foreground-active: var(--color-white, #ffffff);
|
|
127
|
+
|
|
128
|
+
--stuic-color-destructive: var(--color-rose-500, #737373);
|
|
129
|
+
|
|
130
|
+
--stuic-color-destructive-hover: var(--color-rose-400, #737373);
|
|
131
|
+
--stuic-color-destructive-active: var(--color-rose-300, #737373);
|
|
132
|
+
--stuic-color-destructive-foreground: var(--color-white, #ffffff);
|
|
133
|
+
--stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
|
|
134
|
+
--stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
|
|
135
|
+
|
|
136
|
+
--stuic-color-warning: var(--color-amber-400, #737373);
|
|
137
|
+
|
|
138
|
+
--stuic-color-warning-hover: var(--color-amber-300, #737373);
|
|
139
|
+
--stuic-color-warning-active: var(--color-amber-200, #737373);
|
|
140
|
+
--stuic-color-warning-foreground: var(--color-black, #000000);
|
|
141
|
+
--stuic-color-warning-foreground-hover: var(--color-black, #000000);
|
|
142
|
+
--stuic-color-warning-foreground-active: var(--color-black, #000000);
|
|
143
|
+
|
|
144
|
+
--stuic-color-success: var(--color-emerald-500, #737373);
|
|
145
|
+
|
|
146
|
+
--stuic-color-success-hover: var(--color-emerald-400, #737373);
|
|
147
|
+
--stuic-color-success-active: var(--color-emerald-300, #737373);
|
|
148
|
+
--stuic-color-success-foreground: var(--color-white, #ffffff);
|
|
149
|
+
--stuic-color-success-foreground-hover: var(--color-white, #ffffff);
|
|
150
|
+
--stuic-color-success-foreground-active: var(--color-white, #ffffff);
|
|
151
|
+
|
|
152
|
+
--stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
|
|
153
|
+
--stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
|
|
154
|
+
--stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
|
|
155
|
+
--stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
|
|
156
|
+
--stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
|
|
157
|
+
--stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
|
|
158
|
+
--stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
|
|
159
|
+
--stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
|
|
160
|
+
--stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
|
|
161
|
+
--stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
|
|
162
|
+
--stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
|
|
163
|
+
--stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
|
|
164
|
+
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
165
|
+
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
|
|
166
|
+
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
167
|
+
--stuic-color-surface-hover: var(--color-stone-600, #737373);
|
|
168
|
+
--stuic-color-surface-active: var(--color-stone-500, #737373);
|
|
169
|
+
--stuic-color-surface-foreground: var(--color-stone-300, #737373);
|
|
170
|
+
--stuic-color-surface-foreground-hover: var(--color-stone-300, #737373);
|
|
171
|
+
--stuic-color-surface-foreground-active: var(--color-stone-300, #737373);
|
|
172
|
+
|
|
173
|
+
--stuic-color-background: var(--color-stone-900, #737373);
|
|
174
|
+
|
|
175
|
+
--stuic-color-background-hover: var(--color-stone-900, #737373);
|
|
176
|
+
--stuic-color-background-active: var(--color-stone-900, #737373);
|
|
177
|
+
--stuic-color-background-foreground: var(--color-stone-50, #737373);
|
|
178
|
+
--stuic-color-background-foreground-hover: var(--color-stone-50, #737373);
|
|
179
|
+
--stuic-color-background-foreground-active: var(--color-stone-50, #737373);
|
|
180
|
+
|
|
181
|
+
--stuic-color-muted: var(--color-stone-800, #737373);
|
|
182
|
+
|
|
183
|
+
--stuic-color-muted-hover: var(--color-stone-700, #737373);
|
|
184
|
+
--stuic-color-muted-active: var(--color-stone-600, #737373);
|
|
185
|
+
--stuic-color-muted-foreground: var(--color-stone-400, #737373);
|
|
186
|
+
--stuic-color-muted-foreground-hover: var(--color-stone-400, #737373);
|
|
187
|
+
--stuic-color-muted-foreground-active: var(--color-stone-400, #737373);
|
|
188
|
+
|
|
189
|
+
--stuic-color-surface: var(--color-stone-700, #737373);
|
|
190
|
+
|
|
191
|
+
--stuic-color-surface-1: var(--color-stone-600, #737373);
|
|
192
|
+
--stuic-color-surface-1-hover: var(--color-stone-500, #737373);
|
|
193
|
+
--stuic-color-surface-1-active: var(--color-stone-400, #737373);
|
|
194
|
+
--stuic-color-surface-1-foreground: var(--color-stone-200, #737373);
|
|
195
|
+
--stuic-color-surface-1-foreground-hover: var(--color-stone-200, #737373);
|
|
196
|
+
--stuic-color-surface-1-foreground-active: var(--color-stone-200, #737373);
|
|
197
|
+
|
|
198
|
+
--stuic-color-foreground: var(--color-stone-50, #737373);
|
|
199
|
+
|
|
200
|
+
--stuic-color-foreground-hover: var(--color-stone-50, #737373);
|
|
201
|
+
--stuic-color-foreground-active: var(--color-stone-50, #737373);
|
|
202
|
+
|
|
203
|
+
--stuic-color-border: var(--color-stone-700, #737373);
|
|
204
|
+
|
|
205
|
+
--stuic-color-border-hover: var(--color-stone-600, #737373);
|
|
206
|
+
--stuic-color-border-active: var(--color-stone-500, #737373);
|
|
207
|
+
|
|
208
|
+
--stuic-color-input: var(--color-stone-900, #737373);
|
|
209
|
+
|
|
210
|
+
--stuic-color-input-hover: var(--color-stone-800, #737373);
|
|
211
|
+
--stuic-color-input-active: var(--color-stone-700, #737373);
|
|
212
|
+
|
|
213
|
+
--stuic-color-ring: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
|
|
214
|
+
|
|
215
|
+
--stuic-color-ring-hover: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
|
|
216
|
+
--stuic-color-ring-active: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
|
|
217
|
+
}
|