@floegence/floe-webapp-core 0.52.1 → 0.52.3
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/ui/FloatingWindow.js +42 -35
- package/dist/floe.css +39 -44
- package/dist/styles/themes/classicSemanticTokens.js +8 -5
- package/dist/styles/themes/presets.d.ts +1 -1
- package/dist/styles/themes/presets.js +35 -27
- package/dist/styles/themes/windowTokens.d.ts +17 -0
- package/dist/styles/themes/windowTokens.js +19 -0
- package/dist/styles.css +1 -1
- package/dist/surface.css +87 -0
- package/dist/themes/dark.css +9 -0
- package/dist/themes/light.css +9 -0
- package/dist/themes/shell-presets.generated.css +132 -0
- package/package.json +1 -1
package/dist/surface.css
CHANGED
|
@@ -403,6 +403,93 @@
|
|
|
403
403
|
--floe-surface-decoration: 0 0 transparent;
|
|
404
404
|
}
|
|
405
405
|
|
|
406
|
+
/* Non-modal windows must stay identifiable without a scrim. Their palette is
|
|
407
|
+
* distinct from ordinary Cards, Dialogs and menus. Only this visible panel owns
|
|
408
|
+
* material; the outer geometry owner and its input lifecycle stay unchanged. */
|
|
409
|
+
@media (forced-colors: none) {
|
|
410
|
+
:root[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light'])
|
|
411
|
+
[data-floe-floating-window-surface='true'][data-floe-surface='floating'] {
|
|
412
|
+
--floe-window-radius: 10px;
|
|
413
|
+
background: var(--floe-window-background);
|
|
414
|
+
color: var(--floe-window-foreground);
|
|
415
|
+
--muted-foreground: var(--floe-window-muted-foreground);
|
|
416
|
+
border-color: var(--floe-window-border);
|
|
417
|
+
--floe-surface-decoration: var(--floe-window-shadow);
|
|
418
|
+
border-radius: var(--floe-window-radius);
|
|
419
|
+
|
|
420
|
+
& [data-floe-floating-window-titlebar='true'] {
|
|
421
|
+
position: relative;
|
|
422
|
+
background-color: var(--floe-window-titlebar-background);
|
|
423
|
+
background-image: none;
|
|
424
|
+
border-bottom-color: var(--floe-surface-divider);
|
|
425
|
+
color: var(--floe-window-foreground);
|
|
426
|
+
transition: none;
|
|
427
|
+
border-radius: calc(var(--floe-window-radius) - 1px) calc(var(--floe-window-radius) - 1px) 0 0;
|
|
428
|
+
}
|
|
429
|
+
& [data-floe-floating-window-titlebar='true']::before {
|
|
430
|
+
content: '';
|
|
431
|
+
position: absolute;
|
|
432
|
+
inset: 0 14px auto;
|
|
433
|
+
height: 1px;
|
|
434
|
+
background: linear-gradient(
|
|
435
|
+
90deg,
|
|
436
|
+
transparent,
|
|
437
|
+
color-mix(in srgb, var(--ring) 42%, transparent) 50%,
|
|
438
|
+
transparent
|
|
439
|
+
);
|
|
440
|
+
opacity: 0.72;
|
|
441
|
+
pointer-events: none;
|
|
442
|
+
}
|
|
443
|
+
&[data-floe-floating-window-state='inactive'] > [data-floe-floating-window-titlebar='true'] {
|
|
444
|
+
background: color-mix(in srgb, var(--floe-window-titlebar-background) 50%, var(--floe-window-background));
|
|
445
|
+
background-image: none;
|
|
446
|
+
}
|
|
447
|
+
&[data-floe-floating-window-state='active'] > [data-floe-floating-window-titlebar='true'] {
|
|
448
|
+
background-color: color-mix(in srgb, var(--accent) 24%, var(--floe-window-titlebar-background));
|
|
449
|
+
}
|
|
450
|
+
& [data-floe-floating-window-content='true'] {
|
|
451
|
+
background: color-mix(in srgb, var(--floe-window-background) 96%, var(--background));
|
|
452
|
+
}
|
|
453
|
+
& [data-floe-floating-window-footer='true'] {
|
|
454
|
+
background: color-mix(in srgb, var(--floe-window-background) 92%, var(--muted));
|
|
455
|
+
border-top-color: var(--floe-surface-divider);
|
|
456
|
+
}
|
|
457
|
+
& > [data-floe-floating-window-titlebar='true'] button {
|
|
458
|
+
transition-property: background-color, border-color, opacity;
|
|
459
|
+
}
|
|
460
|
+
& > [data-floe-floating-window-titlebar='true'] button:not(:hover):not(:focus-visible) {
|
|
461
|
+
color: inherit;
|
|
462
|
+
}
|
|
463
|
+
&[data-floe-surface-interacting='true'] {
|
|
464
|
+
--floe-surface-decoration: var(--floe-surface-shadow-interacting, 0 1px 2px var(--floe-surface-shade));
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* Dark shell palettes use a restrained dark step for active chrome so the
|
|
470
|
+
* window remains discoverable without a bright outline or animated glow. */
|
|
471
|
+
:root.dark[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light'])
|
|
472
|
+
[data-floe-floating-window-surface='true'][data-floe-floating-window-state='active']
|
|
473
|
+
> [data-floe-floating-window-titlebar='true'] {
|
|
474
|
+
background-color: color-mix(in srgb, var(--background) 38%, var(--floe-window-titlebar-background));
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* FloatingWindow keeps rich text at scale 1 throughout its short presence
|
|
478
|
+
* motion. Only presence promotes this panel; the existing geometry owner
|
|
479
|
+
* already promotes direct drag/resize, so adding a second hot layer is wasteful. */
|
|
480
|
+
:root[data-floe-surface-style='soft-neumorphic'] .floe-floating-window-motion {
|
|
481
|
+
--floe-floating-enter-scale: 1;
|
|
482
|
+
--floe-floating-exit-scale: 1;
|
|
483
|
+
--floe-floating-enter-y: 3px;
|
|
484
|
+
--floe-floating-exit-y: 2px;
|
|
485
|
+
will-change: auto;
|
|
486
|
+
}
|
|
487
|
+
:root[data-floe-surface-style='soft-neumorphic'] .floe-floating-window-motion:is(
|
|
488
|
+
[data-floating-presence='entering'], [data-floating-presence='exiting']
|
|
489
|
+
) {
|
|
490
|
+
will-change: opacity, transform;
|
|
491
|
+
}
|
|
492
|
+
|
|
406
493
|
/* High contrast stays flat, with real boundaries and keyboard indicators. */
|
|
407
494
|
:root[data-floe-surface-style='soft-neumorphic'][data-floe-shell-theme='hc-light']
|
|
408
495
|
[data-floe-surface] {
|
package/dist/themes/dark.css
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
.dark {
|
|
3
3
|
color-scheme: dark;
|
|
4
4
|
|
|
5
|
+
/* Independent non-modal window material. */
|
|
6
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
7
|
+
--floe-window-foreground: var(--foreground);
|
|
8
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
9
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
10
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
11
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
12
|
+
|
|
13
|
+
|
|
5
14
|
/* Base - Blue-black ink */
|
|
6
15
|
--background: hsl(222 30% 8%);
|
|
7
16
|
--foreground: hsl(210 20% 98%);
|
package/dist/themes/light.css
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
.light {
|
|
4
4
|
color-scheme: light;
|
|
5
5
|
|
|
6
|
+
/* Independent non-modal window material. */
|
|
7
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
8
|
+
--floe-window-foreground: var(--foreground);
|
|
9
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
10
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
11
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
12
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
/* Base - Warm paper and blue-black ink */
|
|
7
16
|
--background: hsl(34 24% 94%);
|
|
8
17
|
--foreground: hsl(214 26% 17%);
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
/* Generated from src/styles/themes/presets.ts. Do not edit by hand. */
|
|
2
2
|
:root[data-floe-shell-theme='paper'] {
|
|
3
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
4
|
+
--floe-window-foreground: var(--foreground);
|
|
5
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
6
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
7
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
8
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
3
9
|
--background: #f5f1e8;
|
|
4
10
|
--foreground: #243447;
|
|
5
11
|
--primary: #243447;
|
|
@@ -65,6 +71,12 @@
|
|
|
65
71
|
--glow: #243447;
|
|
66
72
|
}
|
|
67
73
|
:root[data-floe-shell-theme='mist'] {
|
|
74
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
75
|
+
--floe-window-foreground: var(--foreground);
|
|
76
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
77
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
78
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
79
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
68
80
|
--background: #eef3f7;
|
|
69
81
|
--foreground: #1f3442;
|
|
70
82
|
--primary: #234e63;
|
|
@@ -130,6 +142,12 @@
|
|
|
130
142
|
--glow: #234e63;
|
|
131
143
|
}
|
|
132
144
|
:root[data-floe-shell-theme='meadow'] {
|
|
145
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
146
|
+
--floe-window-foreground: var(--foreground);
|
|
147
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
148
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
149
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
150
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
133
151
|
--background: #eef4ec;
|
|
134
152
|
--foreground: #20372d;
|
|
135
153
|
--primary: #24523d;
|
|
@@ -195,6 +213,12 @@
|
|
|
195
213
|
--glow: #24523d;
|
|
196
214
|
}
|
|
197
215
|
:root[data-floe-shell-theme='citrus'] {
|
|
216
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
217
|
+
--floe-window-foreground: var(--foreground);
|
|
218
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
219
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
220
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
221
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
198
222
|
--background: #fff5e1;
|
|
199
223
|
--foreground: #3f2d1c;
|
|
200
224
|
--primary: #874000;
|
|
@@ -260,6 +284,12 @@
|
|
|
260
284
|
--glow: #874000;
|
|
261
285
|
}
|
|
262
286
|
:root[data-floe-shell-theme='lilac'] {
|
|
287
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
288
|
+
--floe-window-foreground: var(--foreground);
|
|
289
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
290
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
291
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
292
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
263
293
|
--background: #f5f0fa;
|
|
264
294
|
--foreground: #30253d;
|
|
265
295
|
--primary: #51407e;
|
|
@@ -325,6 +355,12 @@
|
|
|
325
355
|
--glow: #51407e;
|
|
326
356
|
}
|
|
327
357
|
:root[data-floe-shell-theme='light-plus'] {
|
|
358
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
359
|
+
--floe-window-foreground: var(--foreground);
|
|
360
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
361
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
362
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
363
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
328
364
|
--background: #ffffff;
|
|
329
365
|
--foreground: #1f1f1f;
|
|
330
366
|
--primary: #005fb8;
|
|
@@ -390,6 +426,12 @@
|
|
|
390
426
|
--glow: #005fb8;
|
|
391
427
|
}
|
|
392
428
|
:root[data-floe-shell-theme='quiet-light'] {
|
|
429
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
430
|
+
--floe-window-foreground: var(--foreground);
|
|
431
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
432
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
433
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
434
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
393
435
|
--background: #f5f5f5;
|
|
394
436
|
--foreground: #333333;
|
|
395
437
|
--primary: #4b61b9;
|
|
@@ -455,6 +497,12 @@
|
|
|
455
497
|
--glow: #4b61b9;
|
|
456
498
|
}
|
|
457
499
|
:root[data-floe-shell-theme='solarized-light'] {
|
|
500
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
501
|
+
--floe-window-foreground: var(--foreground);
|
|
502
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
503
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
504
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
505
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
458
506
|
--background: #fdf6e3;
|
|
459
507
|
--foreground: #586e75;
|
|
460
508
|
--primary: #075e73;
|
|
@@ -520,6 +568,12 @@
|
|
|
520
568
|
--glow: #075e73;
|
|
521
569
|
}
|
|
522
570
|
:root[data-floe-shell-theme='github-light'] {
|
|
571
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
572
|
+
--floe-window-foreground: var(--foreground);
|
|
573
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
574
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
575
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
576
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
523
577
|
--background: #f6f8fa;
|
|
524
578
|
--foreground: #24292f;
|
|
525
579
|
--primary: #0969da;
|
|
@@ -585,6 +639,12 @@
|
|
|
585
639
|
--glow: #0969da;
|
|
586
640
|
}
|
|
587
641
|
:root[data-floe-shell-theme='hc-light'] {
|
|
642
|
+
--floe-window-background: color-mix(in srgb, var(--card) 35%, white);
|
|
643
|
+
--floe-window-foreground: var(--foreground);
|
|
644
|
+
--floe-window-muted-foreground: var(--muted-foreground);
|
|
645
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
|
|
646
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
647
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
|
|
588
648
|
--background: #ffffff;
|
|
589
649
|
--foreground: #000000;
|
|
590
650
|
--primary: #0000a8;
|
|
@@ -650,6 +710,12 @@
|
|
|
650
710
|
--glow: #0000a8;
|
|
651
711
|
}
|
|
652
712
|
:root[data-floe-shell-theme='ink'] {
|
|
713
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
714
|
+
--floe-window-foreground: var(--foreground);
|
|
715
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
716
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
717
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
718
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
653
719
|
--background: #0b1420;
|
|
654
720
|
--foreground: #eaf2f7;
|
|
655
721
|
--primary: #86a6e7;
|
|
@@ -715,6 +781,12 @@
|
|
|
715
781
|
--glow: #395c9f;
|
|
716
782
|
}
|
|
717
783
|
:root[data-floe-shell-theme='slate'] {
|
|
784
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
785
|
+
--floe-window-foreground: var(--foreground);
|
|
786
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
787
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
788
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
789
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
718
790
|
--background: #171b22;
|
|
719
791
|
--foreground: #eef1f5;
|
|
720
792
|
--primary: #a8b7c8;
|
|
@@ -780,6 +852,12 @@
|
|
|
780
852
|
--glow: #52677e;
|
|
781
853
|
}
|
|
782
854
|
:root[data-floe-shell-theme='forest'] {
|
|
855
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
856
|
+
--floe-window-foreground: var(--foreground);
|
|
857
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
858
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
859
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
860
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
783
861
|
--background: #0b1a17;
|
|
784
862
|
--foreground: #edf6f1;
|
|
785
863
|
--primary: #71d0b1;
|
|
@@ -845,6 +923,12 @@
|
|
|
845
923
|
--glow: #2d7d67;
|
|
846
924
|
}
|
|
847
925
|
:root[data-floe-shell-theme='ember'] {
|
|
926
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
927
|
+
--floe-window-foreground: var(--foreground);
|
|
928
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
929
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
930
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
931
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
848
932
|
--background: #1d1115;
|
|
849
933
|
--foreground: #fff1f1;
|
|
850
934
|
--primary: #ff9b7a;
|
|
@@ -910,6 +994,12 @@
|
|
|
910
994
|
--glow: #a94632;
|
|
911
995
|
}
|
|
912
996
|
:root[data-floe-shell-theme='ocean'] {
|
|
997
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
998
|
+
--floe-window-foreground: var(--foreground);
|
|
999
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1000
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1001
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1002
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
913
1003
|
--background: #071a25;
|
|
914
1004
|
--foreground: #e9f7fc;
|
|
915
1005
|
--primary: #69d4ff;
|
|
@@ -975,6 +1065,12 @@
|
|
|
975
1065
|
--glow: #176c8e;
|
|
976
1066
|
}
|
|
977
1067
|
:root[data-floe-shell-theme='dark-plus'] {
|
|
1068
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
1069
|
+
--floe-window-foreground: var(--foreground);
|
|
1070
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1071
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1072
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1073
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
978
1074
|
--background: #1e1e1e;
|
|
979
1075
|
--foreground: #d4d4d4;
|
|
980
1076
|
--primary: #3794ff;
|
|
@@ -1040,6 +1136,12 @@
|
|
|
1040
1136
|
--glow: #264f78;
|
|
1041
1137
|
}
|
|
1042
1138
|
:root[data-floe-shell-theme='monokai'] {
|
|
1139
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
1140
|
+
--floe-window-foreground: var(--foreground);
|
|
1141
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1142
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1143
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1144
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
1043
1145
|
--background: #272822;
|
|
1044
1146
|
--foreground: #f8f8f2;
|
|
1045
1147
|
--primary: #f92672;
|
|
@@ -1105,6 +1207,12 @@
|
|
|
1105
1207
|
--glow: #5a594e;
|
|
1106
1208
|
}
|
|
1107
1209
|
:root[data-floe-shell-theme='nord'] {
|
|
1210
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
1211
|
+
--floe-window-foreground: var(--foreground);
|
|
1212
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1213
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1214
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1215
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
1108
1216
|
--background: #2e3440;
|
|
1109
1217
|
--foreground: #eceff4;
|
|
1110
1218
|
--primary: #88c0d0;
|
|
@@ -1170,6 +1278,12 @@
|
|
|
1170
1278
|
--glow: #4c668a;
|
|
1171
1279
|
}
|
|
1172
1280
|
:root[data-floe-shell-theme='dracula'] {
|
|
1281
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
1282
|
+
--floe-window-foreground: var(--foreground);
|
|
1283
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1284
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1285
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1286
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
1173
1287
|
--background: #282a36;
|
|
1174
1288
|
--foreground: #f8f8f2;
|
|
1175
1289
|
--primary: #bd93f9;
|
|
@@ -1235,6 +1349,12 @@
|
|
|
1235
1349
|
--glow: #52566d;
|
|
1236
1350
|
}
|
|
1237
1351
|
:root[data-floe-shell-theme='abyss'] {
|
|
1352
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
1353
|
+
--floe-window-foreground: var(--foreground);
|
|
1354
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1355
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1356
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1357
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
1238
1358
|
--background: #000c18;
|
|
1239
1359
|
--foreground: #ddeeff;
|
|
1240
1360
|
--primary: #00a4ef;
|
|
@@ -1300,6 +1420,12 @@
|
|
|
1300
1420
|
--glow: #005a8d;
|
|
1301
1421
|
}
|
|
1302
1422
|
:root[data-floe-shell-theme='studio'] {
|
|
1423
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
1424
|
+
--floe-window-foreground: var(--foreground);
|
|
1425
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1426
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1427
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1428
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
1303
1429
|
--background: #1a1a1c;
|
|
1304
1430
|
--foreground: #e0e0e4;
|
|
1305
1431
|
--primary: #e0e0e4;
|
|
@@ -1365,6 +1491,12 @@
|
|
|
1365
1491
|
--glow: #2060c0;
|
|
1366
1492
|
}
|
|
1367
1493
|
:root[data-floe-shell-theme='graphite'] {
|
|
1494
|
+
--floe-window-background: color-mix(in srgb, var(--card) 90%, white);
|
|
1495
|
+
--floe-window-foreground: var(--foreground);
|
|
1496
|
+
--floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
|
|
1497
|
+
--floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
|
|
1498
|
+
--floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
|
|
1499
|
+
--floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
|
|
1368
1500
|
--background: #1c1c1e;
|
|
1369
1501
|
--foreground: #f2f2f7;
|
|
1370
1502
|
--primary: #0070e0;
|