@tangle-network/brand 1.10.3 → 1.13.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/CHANGELOG.md +34 -0
- package/README.md +4 -1
- package/bin/drift-baseline.json +1395 -0
- package/bin/tangle-drift.mjs +456 -0
- package/package.json +9 -3
- package/src/styles/focus.test.ts +2 -2
- package/src/styles/ladders.css +144 -0
- package/src/styles/legacy-light.css +733 -29
- package/src/styles/named-themes.css +336 -6
- package/src/styles/named-themes.test.ts +374 -5
- package/src/styles/system.css +0 -18
- package/src/styles/tokens.css +229 -18
- package/src/styles/tokens.test.ts +41 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* GENERATED by scripts/gen-compat.mjs. Do not edit.
|
|
2
2
|
* Source: tokens.css + named-themes.css
|
|
3
|
-
* SHA-256:
|
|
3
|
+
* SHA-256: 4c1924fc1546f474d5006dc2ea3670fb9c74c7ee0ccebc058b310fbed7a9757e
|
|
4
4
|
* Light-default compatibility; all explicit modes remain canonical.
|
|
5
5
|
*/
|
|
6
6
|
:where(:root),
|
|
@@ -13,8 +13,14 @@
|
|
|
13
13
|
[data-theme="aubergine-light"],
|
|
14
14
|
[data-theme="arena"],
|
|
15
15
|
[data-theme="arena-light"],
|
|
16
|
+
[data-theme="super"],
|
|
17
|
+
[data-theme="super-light"],
|
|
16
18
|
[data-theme="tangle-dark"],
|
|
17
19
|
[data-theme="tangle-light"],
|
|
20
|
+
[data-theme="hospitality"],
|
|
21
|
+
[data-theme="agents"],
|
|
22
|
+
[data-theme="agents-light"],
|
|
23
|
+
[data-theme="website"],
|
|
18
24
|
.light,
|
|
19
25
|
.dark {
|
|
20
26
|
color-scheme: dark;
|
|
@@ -130,15 +136,71 @@
|
|
|
130
136
|
--surface-info-bg: #2d4e67;
|
|
131
137
|
--surface-info-border: #3d7292;
|
|
132
138
|
--surface-info-text: #67cdff;
|
|
133
|
-
--
|
|
134
|
-
--
|
|
135
|
-
--
|
|
136
|
-
--
|
|
137
|
-
--
|
|
138
|
-
--
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
--
|
|
139
|
+
--tone-violet-bg: #4e3a60;
|
|
140
|
+
--tone-violet-bg-hover: #583d71;
|
|
141
|
+
--tone-violet-bg-selected: #624080;
|
|
142
|
+
--tone-violet-border: #8457aa;
|
|
143
|
+
--tone-violet-border-selected: #d19dff;
|
|
144
|
+
--tone-violet-text: #ecd9fa;
|
|
145
|
+
--tone-violet-icon: #d19dff;
|
|
146
|
+
--tone-orange-bg: #583c2b;
|
|
147
|
+
--tone-orange-bg-hover: #664029;
|
|
148
|
+
--tone-orange-bg-selected: #724327;
|
|
149
|
+
--tone-orange-border: #a35829;
|
|
150
|
+
--tone-orange-border-selected: #ff801f;
|
|
151
|
+
--tone-orange-text: #ffe0c2;
|
|
152
|
+
--tone-orange-icon: #ff801f;
|
|
153
|
+
--tone-teal-bg: #2a4744;
|
|
154
|
+
--tone-teal-bg-hover: #28504b;
|
|
155
|
+
--tone-teal-bg-selected: #265751;
|
|
156
|
+
--tone-teal-border: #207e73;
|
|
157
|
+
--tone-teal-border-selected: #0eb39e;
|
|
158
|
+
--tone-teal-text: #adf0dd;
|
|
159
|
+
--tone-teal-icon: #0eb39e;
|
|
160
|
+
--tone-blue-bg: #25455e;
|
|
161
|
+
--tone-blue-bg-hover: #224c6c;
|
|
162
|
+
--tone-blue-bg-selected: #1f537b;
|
|
163
|
+
--tone-blue-border: #2870bd;
|
|
164
|
+
--tone-blue-border-selected: #70b8ff;
|
|
165
|
+
--tone-blue-text: #c2e6ff;
|
|
166
|
+
--tone-blue-icon: #70b8ff;
|
|
167
|
+
--tone-pink-bg: #5e344f;
|
|
168
|
+
--tone-pink-bg-hover: #6d3659;
|
|
169
|
+
--tone-pink-bg-selected: #7b3762;
|
|
170
|
+
--tone-pink-border: #a84885;
|
|
171
|
+
--tone-pink-border-selected: #ff8dcc;
|
|
172
|
+
--tone-pink-text: #fdd1ea;
|
|
173
|
+
--tone-pink-icon: #ff8dcc;
|
|
174
|
+
--tone-brown-bg: #494038;
|
|
175
|
+
--tone-brown-bg-hover: #54473c;
|
|
176
|
+
--tone-brown-bg-selected: #5c4c3e;
|
|
177
|
+
--tone-brown-border: #7c5f46;
|
|
178
|
+
--tone-brown-border-selected: #dbb594;
|
|
179
|
+
--tone-brown-text: #f2e1ca;
|
|
180
|
+
--tone-brown-icon: #dbb594;
|
|
181
|
+
--tone-cyan-bg: #27464d;
|
|
182
|
+
--tone-cyan-bg-hover: #234f59;
|
|
183
|
+
--tone-cyan-bg-selected: #205662;
|
|
184
|
+
--tone-cyan-border: #11809c;
|
|
185
|
+
--tone-cyan-border-selected: #23afd0;
|
|
186
|
+
--tone-cyan-text: #b6ecf7;
|
|
187
|
+
--tone-cyan-icon: #23afd0;
|
|
188
|
+
--tone-lime-bg: #404536;
|
|
189
|
+
--tone-lime-bg-hover: #444b37;
|
|
190
|
+
--tone-lime-bg-selected: #495239;
|
|
191
|
+
--tone-lime-border: #577538;
|
|
192
|
+
--tone-lime-border-selected: #bdee63;
|
|
193
|
+
--tone-lime-text: #e3f7ba;
|
|
194
|
+
--tone-lime-icon: #bdee63;
|
|
195
|
+
--surface-violet-bg: #4e3a60;
|
|
196
|
+
--surface-violet-border: #8457aa;
|
|
197
|
+
--surface-violet-text: #d19dff;
|
|
198
|
+
--surface-orange-bg: #583c2b;
|
|
199
|
+
--surface-orange-border: #a35829;
|
|
200
|
+
--surface-orange-text: #ffa057;
|
|
201
|
+
--surface-teal-bg: #2a4744;
|
|
202
|
+
--surface-teal-border: #207e73;
|
|
203
|
+
--surface-teal-text: #0bd8b6;
|
|
142
204
|
--run-mix-succeeded: #76edb9;
|
|
143
205
|
--run-mix-waiting: #e9b642;
|
|
144
206
|
--run-mix-failed: #e1918e;
|
|
@@ -289,10 +351,14 @@
|
|
|
289
351
|
}
|
|
290
352
|
[data-sandbox-theme="vault"]:where(:not(.dark)),
|
|
291
353
|
[data-sandbox-theme="dawn"]:where(:not(.dark)),
|
|
354
|
+
[data-theme="hospitality"]:where(:not(.dark)),
|
|
355
|
+
[data-theme="website"]:where(:not(.dark)),
|
|
292
356
|
[data-theme="light"],
|
|
293
357
|
[data-theme="aubergine-light"],
|
|
294
358
|
[data-theme="arena-light"],
|
|
359
|
+
[data-theme="super-light"],
|
|
295
360
|
[data-theme="tangle-light"],
|
|
361
|
+
[data-theme="agents-light"],
|
|
296
362
|
.light,
|
|
297
363
|
:where(:root) {
|
|
298
364
|
color-scheme: light;
|
|
@@ -391,15 +457,71 @@
|
|
|
391
457
|
--surface-info-bg: #f0f9ff;
|
|
392
458
|
--surface-info-border: #bae6fd;
|
|
393
459
|
--surface-info-text: #0369a1;
|
|
394
|
-
--
|
|
395
|
-
--
|
|
396
|
-
--
|
|
397
|
-
--
|
|
398
|
-
--
|
|
399
|
-
--
|
|
400
|
-
--
|
|
401
|
-
--
|
|
402
|
-
--
|
|
460
|
+
--tone-violet-bg: #f7edfe;
|
|
461
|
+
--tone-violet-bg-hover: #f2e2fc;
|
|
462
|
+
--tone-violet-bg-selected: #ead5f9;
|
|
463
|
+
--tone-violet-border: #e0c4f4;
|
|
464
|
+
--tone-violet-border-selected: #8e4ec6;
|
|
465
|
+
--tone-violet-text: #402060;
|
|
466
|
+
--tone-violet-icon: #8e4ec6;
|
|
467
|
+
--tone-orange-bg: #ffefd6;
|
|
468
|
+
--tone-orange-bg-hover: #ffdfb5;
|
|
469
|
+
--tone-orange-bg-selected: #ffd19a;
|
|
470
|
+
--tone-orange-border: #ffc182;
|
|
471
|
+
--tone-orange-border-selected: #cc4e00;
|
|
472
|
+
--tone-orange-text: #582d1d;
|
|
473
|
+
--tone-orange-icon: #cc4e00;
|
|
474
|
+
--tone-teal-bg: #e0f8f3;
|
|
475
|
+
--tone-teal-bg-hover: #ccf3ea;
|
|
476
|
+
--tone-teal-bg-selected: #b8eae0;
|
|
477
|
+
--tone-teal-border: #a1ded2;
|
|
478
|
+
--tone-teal-border-selected: #008573;
|
|
479
|
+
--tone-teal-text: #0d3d38;
|
|
480
|
+
--tone-teal-icon: #008573;
|
|
481
|
+
--tone-blue-bg: #e6f4fe;
|
|
482
|
+
--tone-blue-bg-hover: #d5efff;
|
|
483
|
+
--tone-blue-bg-selected: #c2e5ff;
|
|
484
|
+
--tone-blue-border: #acd8fc;
|
|
485
|
+
--tone-blue-border-selected: #0d74ce;
|
|
486
|
+
--tone-blue-text: #113264;
|
|
487
|
+
--tone-blue-icon: #0d74ce;
|
|
488
|
+
--tone-pink-bg: #fee9f5;
|
|
489
|
+
--tone-pink-bg-hover: #fbdcef;
|
|
490
|
+
--tone-pink-bg-selected: #f6cee7;
|
|
491
|
+
--tone-pink-border: #efbfdd;
|
|
492
|
+
--tone-pink-border-selected: #cf3897;
|
|
493
|
+
--tone-pink-text: #651249;
|
|
494
|
+
--tone-pink-icon: #cf3897;
|
|
495
|
+
--tone-brown-bg: #f6eee7;
|
|
496
|
+
--tone-brown-bg-hover: #f0e4d9;
|
|
497
|
+
--tone-brown-bg-selected: #ebdaca;
|
|
498
|
+
--tone-brown-border: #e4cdb7;
|
|
499
|
+
--tone-brown-border-selected: #815e46;
|
|
500
|
+
--tone-brown-text: #3e332e;
|
|
501
|
+
--tone-brown-icon: #815e46;
|
|
502
|
+
--tone-cyan-bg: #def7f9;
|
|
503
|
+
--tone-cyan-bg-hover: #caf1f6;
|
|
504
|
+
--tone-cyan-bg-selected: #b5e9f0;
|
|
505
|
+
--tone-cyan-border: #9ddde7;
|
|
506
|
+
--tone-cyan-border-selected: #107d98;
|
|
507
|
+
--tone-cyan-text: #0d3c48;
|
|
508
|
+
--tone-cyan-icon: #107d98;
|
|
509
|
+
--tone-lime-bg: #eef6d6;
|
|
510
|
+
--tone-lime-bg-hover: #e2f0bd;
|
|
511
|
+
--tone-lime-bg-selected: #d3e7a6;
|
|
512
|
+
--tone-lime-border: #c2da91;
|
|
513
|
+
--tone-lime-border-selected: #5c7c2f;
|
|
514
|
+
--tone-lime-text: #37401c;
|
|
515
|
+
--tone-lime-icon: #5c7c2f;
|
|
516
|
+
--surface-violet-bg: #f7edfe;
|
|
517
|
+
--surface-violet-border: #e0c4f4;
|
|
518
|
+
--surface-violet-text: #8145b5;
|
|
519
|
+
--surface-orange-bg: #ffefd6;
|
|
520
|
+
--surface-orange-border: #ffc182;
|
|
521
|
+
--surface-orange-text: #bc4904;
|
|
522
|
+
--surface-teal-bg: #e0f8f3;
|
|
523
|
+
--surface-teal-border: #a1ded2;
|
|
524
|
+
--surface-teal-text: #017d6d;
|
|
403
525
|
--run-mix-succeeded: #3c9b78;
|
|
404
526
|
--run-mix-waiting: #c16227;
|
|
405
527
|
--run-mix-failed: #cd342f;
|
|
@@ -511,6 +633,8 @@
|
|
|
511
633
|
}
|
|
512
634
|
[data-sandbox-theme="vault"]:where(:not(.dark)),
|
|
513
635
|
[data-sandbox-theme="dawn"]:where(:not(.dark)),
|
|
636
|
+
[data-theme="hospitality"]:where(:not(.dark)),
|
|
637
|
+
[data-theme="website"]:where(:not(.dark)),
|
|
514
638
|
[data-theme="light"],
|
|
515
639
|
.light,
|
|
516
640
|
[data-theme$="-light"],
|
|
@@ -542,6 +666,86 @@
|
|
|
542
666
|
--motion-arrive: var(--duration-arrive) var(--ease-expo);
|
|
543
667
|
}
|
|
544
668
|
}
|
|
669
|
+
[data-tone="violet"],
|
|
670
|
+
[data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
671
|
+
--tone-bg: var(--tone-violet-bg);
|
|
672
|
+
--tone-bg-hover: var(--tone-violet-bg-hover);
|
|
673
|
+
--tone-bg-selected: var(--tone-violet-bg-selected);
|
|
674
|
+
--tone-border: var(--tone-violet-border);
|
|
675
|
+
--tone-border-selected: var(--tone-violet-border-selected);
|
|
676
|
+
--tone-text: var(--tone-violet-text);
|
|
677
|
+
--tone-icon: var(--tone-violet-icon);
|
|
678
|
+
}
|
|
679
|
+
[data-tone="orange"],
|
|
680
|
+
[data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
681
|
+
--tone-bg: var(--tone-orange-bg);
|
|
682
|
+
--tone-bg-hover: var(--tone-orange-bg-hover);
|
|
683
|
+
--tone-bg-selected: var(--tone-orange-bg-selected);
|
|
684
|
+
--tone-border: var(--tone-orange-border);
|
|
685
|
+
--tone-border-selected: var(--tone-orange-border-selected);
|
|
686
|
+
--tone-text: var(--tone-orange-text);
|
|
687
|
+
--tone-icon: var(--tone-orange-icon);
|
|
688
|
+
}
|
|
689
|
+
[data-tone="teal"],
|
|
690
|
+
[data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
691
|
+
--tone-bg: var(--tone-teal-bg);
|
|
692
|
+
--tone-bg-hover: var(--tone-teal-bg-hover);
|
|
693
|
+
--tone-bg-selected: var(--tone-teal-bg-selected);
|
|
694
|
+
--tone-border: var(--tone-teal-border);
|
|
695
|
+
--tone-border-selected: var(--tone-teal-border-selected);
|
|
696
|
+
--tone-text: var(--tone-teal-text);
|
|
697
|
+
--tone-icon: var(--tone-teal-icon);
|
|
698
|
+
}
|
|
699
|
+
[data-tone="blue"],
|
|
700
|
+
[data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
701
|
+
--tone-bg: var(--tone-blue-bg);
|
|
702
|
+
--tone-bg-hover: var(--tone-blue-bg-hover);
|
|
703
|
+
--tone-bg-selected: var(--tone-blue-bg-selected);
|
|
704
|
+
--tone-border: var(--tone-blue-border);
|
|
705
|
+
--tone-border-selected: var(--tone-blue-border-selected);
|
|
706
|
+
--tone-text: var(--tone-blue-text);
|
|
707
|
+
--tone-icon: var(--tone-blue-icon);
|
|
708
|
+
}
|
|
709
|
+
[data-tone="pink"],
|
|
710
|
+
[data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
711
|
+
--tone-bg: var(--tone-pink-bg);
|
|
712
|
+
--tone-bg-hover: var(--tone-pink-bg-hover);
|
|
713
|
+
--tone-bg-selected: var(--tone-pink-bg-selected);
|
|
714
|
+
--tone-border: var(--tone-pink-border);
|
|
715
|
+
--tone-border-selected: var(--tone-pink-border-selected);
|
|
716
|
+
--tone-text: var(--tone-pink-text);
|
|
717
|
+
--tone-icon: var(--tone-pink-icon);
|
|
718
|
+
}
|
|
719
|
+
[data-tone="brown"],
|
|
720
|
+
[data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
721
|
+
--tone-bg: var(--tone-brown-bg);
|
|
722
|
+
--tone-bg-hover: var(--tone-brown-bg-hover);
|
|
723
|
+
--tone-bg-selected: var(--tone-brown-bg-selected);
|
|
724
|
+
--tone-border: var(--tone-brown-border);
|
|
725
|
+
--tone-border-selected: var(--tone-brown-border-selected);
|
|
726
|
+
--tone-text: var(--tone-brown-text);
|
|
727
|
+
--tone-icon: var(--tone-brown-icon);
|
|
728
|
+
}
|
|
729
|
+
[data-tone="cyan"],
|
|
730
|
+
[data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
731
|
+
--tone-bg: var(--tone-cyan-bg);
|
|
732
|
+
--tone-bg-hover: var(--tone-cyan-bg-hover);
|
|
733
|
+
--tone-bg-selected: var(--tone-cyan-bg-selected);
|
|
734
|
+
--tone-border: var(--tone-cyan-border);
|
|
735
|
+
--tone-border-selected: var(--tone-cyan-border-selected);
|
|
736
|
+
--tone-text: var(--tone-cyan-text);
|
|
737
|
+
--tone-icon: var(--tone-cyan-icon);
|
|
738
|
+
}
|
|
739
|
+
[data-tone="lime"],
|
|
740
|
+
[data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
741
|
+
--tone-bg: var(--tone-lime-bg);
|
|
742
|
+
--tone-bg-hover: var(--tone-lime-bg-hover);
|
|
743
|
+
--tone-bg-selected: var(--tone-lime-bg-selected);
|
|
744
|
+
--tone-border: var(--tone-lime-border);
|
|
745
|
+
--tone-border-selected: var(--tone-lime-border-selected);
|
|
746
|
+
--tone-text: var(--tone-lime-text);
|
|
747
|
+
--tone-icon: var(--tone-lime-icon);
|
|
748
|
+
}
|
|
545
749
|
:where(:root),
|
|
546
750
|
.dark,
|
|
547
751
|
.light,
|
|
@@ -587,7 +791,9 @@
|
|
|
587
791
|
}
|
|
588
792
|
[data-theme="aubergine-light"],
|
|
589
793
|
[data-theme="arena-light"],
|
|
590
|
-
[data-theme="
|
|
794
|
+
[data-theme="super-light"],
|
|
795
|
+
[data-theme="tangle-light"],
|
|
796
|
+
[data-theme="agents-light"] {
|
|
591
797
|
--hsl-secondary-foreground: 0 0% 10%;
|
|
592
798
|
--surface-neutral-text: #4b5563;
|
|
593
799
|
}
|
|
@@ -628,8 +834,14 @@
|
|
|
628
834
|
--brand-glow: #c4b0ff;
|
|
629
835
|
--text-primary: #f4f1fd;
|
|
630
836
|
--text-secondary: #cec4e8;
|
|
631
|
-
--text-muted: #
|
|
632
|
-
--text-dim: #
|
|
837
|
+
--text-muted: #b7afd1;
|
|
838
|
+
--text-dim: #a59ebb;
|
|
839
|
+
--md3-surface: var(--bg-root);
|
|
840
|
+
--md3-surface-dim: var(--md3-surface-container-lowest);
|
|
841
|
+
--md3-surface-bright: var(--md3-surface-container-highest);
|
|
842
|
+
--md3-surface-variant: var(--md3-surface-container-high);
|
|
843
|
+
--md3-on-surface: var(--text-primary);
|
|
844
|
+
--md3-on-surface-variant: var(--text-muted);
|
|
633
845
|
}
|
|
634
846
|
[data-theme="aubergine-light"] {
|
|
635
847
|
--hsl-background: 258 60% 96%;
|
|
@@ -668,8 +880,14 @@
|
|
|
668
880
|
--brand-glow: #8b5cf6;
|
|
669
881
|
--text-primary: #160f22;
|
|
670
882
|
--text-secondary: #3f3460;
|
|
671
|
-
--text-muted: #
|
|
672
|
-
--text-dim: #
|
|
883
|
+
--text-muted: #585070;
|
|
884
|
+
--text-dim: #655d82;
|
|
885
|
+
--md3-surface: var(--bg-root);
|
|
886
|
+
--md3-surface-dim: var(--depth-2);
|
|
887
|
+
--md3-surface-bright: #ffffff;
|
|
888
|
+
--md3-surface-variant: var(--md3-surface-container-high);
|
|
889
|
+
--md3-on-surface: var(--text-primary);
|
|
890
|
+
--md3-on-surface-variant: var(--text-muted);
|
|
673
891
|
}
|
|
674
892
|
[data-theme="arena"] {
|
|
675
893
|
--hsl-background: 160 16% 6%;
|
|
@@ -709,7 +927,13 @@
|
|
|
709
927
|
--text-primary: #ecfdf5;
|
|
710
928
|
--text-secondary: #c2e8d6;
|
|
711
929
|
--text-muted: #8fb6a3;
|
|
712
|
-
--text-dim: #
|
|
930
|
+
--text-dim: #7ba08e;
|
|
931
|
+
--md3-surface: var(--bg-root);
|
|
932
|
+
--md3-surface-dim: var(--md3-surface-container-lowest);
|
|
933
|
+
--md3-surface-bright: var(--md3-surface-container-highest);
|
|
934
|
+
--md3-surface-variant: var(--md3-surface-container-high);
|
|
935
|
+
--md3-on-surface: var(--text-primary);
|
|
936
|
+
--md3-on-surface-variant: var(--text-muted);
|
|
713
937
|
}
|
|
714
938
|
[data-theme="arena-light"] {
|
|
715
939
|
--hsl-background: 150 30% 96%;
|
|
@@ -748,8 +972,132 @@
|
|
|
748
972
|
--brand-glow: #10b981;
|
|
749
973
|
--text-primary: #06231a;
|
|
750
974
|
--text-secondary: #285048;
|
|
751
|
-
--text-muted: #
|
|
752
|
-
--text-dim: #
|
|
975
|
+
--text-muted: #455f52;
|
|
976
|
+
--text-dim: #4e6d62;
|
|
977
|
+
--md3-surface: var(--bg-root);
|
|
978
|
+
--md3-surface-dim: var(--depth-2);
|
|
979
|
+
--md3-surface-bright: #ffffff;
|
|
980
|
+
--md3-surface-variant: var(--md3-surface-container-high);
|
|
981
|
+
--md3-on-surface: var(--text-primary);
|
|
982
|
+
--md3-on-surface-variant: var(--text-muted);
|
|
983
|
+
}
|
|
984
|
+
[data-theme="super"] {
|
|
985
|
+
--hsl-background: 120 12% 8%;
|
|
986
|
+
--hsl-foreground: 86 20% 93%;
|
|
987
|
+
--hsl-card: 120 11% 12%;
|
|
988
|
+
--hsl-card-foreground: 86 20% 93%;
|
|
989
|
+
--hsl-popover: 120 10% 15%;
|
|
990
|
+
--hsl-popover-foreground: 86 20% 93%;
|
|
991
|
+
--hsl-primary: 139 31% 61%;
|
|
992
|
+
--hsl-primary-foreground: 140 35% 8%;
|
|
993
|
+
--hsl-secondary: 120 9% 17%;
|
|
994
|
+
--hsl-secondary-foreground: 86 20% 93%;
|
|
995
|
+
--hsl-muted: 120 9% 17%;
|
|
996
|
+
--hsl-muted-foreground: 95 10% 67%;
|
|
997
|
+
--hsl-accent: 120 10% 18%;
|
|
998
|
+
--hsl-accent-foreground: 86 20% 93%;
|
|
999
|
+
--hsl-border: 120 9% 25%;
|
|
1000
|
+
--hsl-input: 120 9% 17%;
|
|
1001
|
+
--hsl-ring: 139 31% 61%;
|
|
1002
|
+
--depth-1: #121712;
|
|
1003
|
+
--depth-2: #1c231c;
|
|
1004
|
+
--depth-3: #232b23;
|
|
1005
|
+
--depth-4: #2b342b;
|
|
1006
|
+
--bg-root: #121712;
|
|
1007
|
+
--bg-card: var(--depth-2);
|
|
1008
|
+
--bg-input: var(--depth-3);
|
|
1009
|
+
--md3-surface-container-lowest: #0d110d;
|
|
1010
|
+
--md3-surface-container-low: #171d17;
|
|
1011
|
+
--md3-surface-container: #1c231c;
|
|
1012
|
+
--md3-surface-container-high: #232b23;
|
|
1013
|
+
--md3-surface-container-highest: #2b342b;
|
|
1014
|
+
--md3-outline-variant: #3a453a;
|
|
1015
|
+
--border-subtle: rgba(190,210,180,0.12);
|
|
1016
|
+
--border-default: rgba(190,210,180,0.20);
|
|
1017
|
+
--border-hover: rgba(190,210,180,0.34);
|
|
1018
|
+
--accent-text: #8fd0a4;
|
|
1019
|
+
--brand-primary: #7dbb91;
|
|
1020
|
+
--brand-glow: #8fd0a4;
|
|
1021
|
+
--text-primary: #eef1ea;
|
|
1022
|
+
--text-secondary: #cbd3c5;
|
|
1023
|
+
--text-muted: #a9b3a2;
|
|
1024
|
+
--text-dim: #959f8f;
|
|
1025
|
+
--md3-primary: #8fd0a4;
|
|
1026
|
+
--bg-hover: rgba(190,210,180,0.06);
|
|
1027
|
+
--bg-selection: rgba(125,187,145,0.28);
|
|
1028
|
+
--accent-surface-soft: rgba(125,187,145,0.08);
|
|
1029
|
+
--accent-surface-strong: rgba(125,187,145,0.24);
|
|
1030
|
+
--border-accent: rgba(125,187,145,0.38);
|
|
1031
|
+
--border-accent-hover: rgba(125,187,145,0.56);
|
|
1032
|
+
--btn-primary-bg: #7dbb91;
|
|
1033
|
+
--btn-primary-hover: #8fcaa1;
|
|
1034
|
+
--btn-primary-text: #0e1d13;
|
|
1035
|
+
--btn-cta-bg: #7dbb91;
|
|
1036
|
+
--btn-cta-text: #0e1d13;
|
|
1037
|
+
--md3-surface: var(--bg-root);
|
|
1038
|
+
--md3-surface-dim: var(--md3-surface-container-lowest);
|
|
1039
|
+
--md3-surface-bright: var(--md3-surface-container-highest);
|
|
1040
|
+
--md3-surface-variant: var(--md3-surface-container-high);
|
|
1041
|
+
--md3-on-surface: var(--text-primary);
|
|
1042
|
+
--md3-on-surface-variant: var(--text-muted);
|
|
1043
|
+
}
|
|
1044
|
+
[data-theme="super-light"] {
|
|
1045
|
+
--hsl-background: 75 22% 96%;
|
|
1046
|
+
--hsl-foreground: 114 13% 15%;
|
|
1047
|
+
--hsl-card: 0 0% 100%;
|
|
1048
|
+
--hsl-card-foreground: 114 13% 15%;
|
|
1049
|
+
--hsl-popover: 0 0% 100%;
|
|
1050
|
+
--hsl-popover-foreground: 114 13% 15%;
|
|
1051
|
+
--hsl-primary: 148 40% 25%;
|
|
1052
|
+
--hsl-primary-foreground: 0 0% 100%;
|
|
1053
|
+
--hsl-secondary: 80 18% 93%;
|
|
1054
|
+
--hsl-muted: 80 18% 93%;
|
|
1055
|
+
--hsl-muted-foreground: 99 9% 37%;
|
|
1056
|
+
--hsl-accent: 80 18% 93%;
|
|
1057
|
+
--hsl-border: 87 17% 87%;
|
|
1058
|
+
--hsl-input: 92 14% 78%;
|
|
1059
|
+
--hsl-ring: 144 31% 34%;
|
|
1060
|
+
--depth-1: #f7f8f4;
|
|
1061
|
+
--depth-2: #eff1eb;
|
|
1062
|
+
--depth-3: #ffffff;
|
|
1063
|
+
--depth-4: #ffffff;
|
|
1064
|
+
--bg-root: #f7f8f4;
|
|
1065
|
+
--bg-card: #ffffff;
|
|
1066
|
+
--bg-input: #eff1eb;
|
|
1067
|
+
--md3-surface-container-lowest: #ffffff;
|
|
1068
|
+
--md3-surface-container-low: #fcfcf9;
|
|
1069
|
+
--md3-surface-container: #f7f8f4;
|
|
1070
|
+
--md3-surface-container-high: #eff1eb;
|
|
1071
|
+
--md3-surface-container-highest: #e6eae1;
|
|
1072
|
+
--md3-outline-variant: #dfe4d9;
|
|
1073
|
+
--border-subtle: rgba(34,43,33,0.10);
|
|
1074
|
+
--border-default: rgba(34,43,33,0.16);
|
|
1075
|
+
--border-hover: rgba(34,43,33,0.30);
|
|
1076
|
+
--accent-text: #275a3f;
|
|
1077
|
+
--brand-primary: #275a3f;
|
|
1078
|
+
--brand-glow: #3b7050;
|
|
1079
|
+
--text-primary: #222b21;
|
|
1080
|
+
--text-secondary: #46523f;
|
|
1081
|
+
--text-muted: #5d6857;
|
|
1082
|
+
--text-dim: #616c5a;
|
|
1083
|
+
--md3-primary: #275a3f;
|
|
1084
|
+
--bg-hover: rgba(34,43,33,0.04);
|
|
1085
|
+
--bg-selection: rgba(39,90,63,0.16);
|
|
1086
|
+
--accent-surface-soft: rgba(39,90,63,0.06);
|
|
1087
|
+
--accent-surface-strong: rgba(39,90,63,0.14);
|
|
1088
|
+
--border-accent: rgba(39,90,63,0.30);
|
|
1089
|
+
--border-accent-hover: rgba(39,90,63,0.45);
|
|
1090
|
+
--btn-primary-bg: #275a3f;
|
|
1091
|
+
--btn-primary-hover: #1e4832;
|
|
1092
|
+
--btn-primary-text: #ffffff;
|
|
1093
|
+
--btn-cta-bg: #275a3f;
|
|
1094
|
+
--btn-cta-text: #ffffff;
|
|
1095
|
+
--md3-surface: var(--bg-root);
|
|
1096
|
+
--md3-surface-dim: var(--depth-2);
|
|
1097
|
+
--md3-surface-bright: #ffffff;
|
|
1098
|
+
--md3-surface-variant: var(--md3-surface-container-high);
|
|
1099
|
+
--md3-on-surface: var(--text-primary);
|
|
1100
|
+
--md3-on-surface-variant: var(--text-muted);
|
|
753
1101
|
}
|
|
754
1102
|
[data-theme="tangle-dark"] {
|
|
755
1103
|
--hsl-background: 0 0% 8.6275%;
|
|
@@ -832,8 +1180,8 @@
|
|
|
832
1180
|
--brand-glow: #818cf8;
|
|
833
1181
|
--text-primary: #15131f;
|
|
834
1182
|
--text-secondary: #3f3a52;
|
|
835
|
-
--text-muted: #
|
|
836
|
-
--text-dim: #
|
|
1183
|
+
--text-muted: #59556b;
|
|
1184
|
+
--text-dim: #67627b;
|
|
837
1185
|
}
|
|
838
1186
|
.dark[data-theme="intelligence"] {
|
|
839
1187
|
--md3-surface: #0d0a10;
|
|
@@ -871,3 +1219,359 @@
|
|
|
871
1219
|
--border-default: rgba(120, 108, 158, 0.18);
|
|
872
1220
|
--border-hover: rgba(120, 108, 158, 0.28);
|
|
873
1221
|
}
|
|
1222
|
+
[data-theme="hospitality"]:where(:not(.dark)) {
|
|
1223
|
+
--hsl-background: 102 18% 92%;
|
|
1224
|
+
--hsl-foreground: 143 25% 12%;
|
|
1225
|
+
--hsl-card: 0 0% 100%;
|
|
1226
|
+
--hsl-card-foreground: 143 25% 12%;
|
|
1227
|
+
--hsl-popover: 0 0% 100%;
|
|
1228
|
+
--hsl-popover-foreground: 143 25% 12%;
|
|
1229
|
+
--hsl-primary: 153 38% 25%;
|
|
1230
|
+
--hsl-primary-foreground: 0 0% 100%;
|
|
1231
|
+
--hsl-secondary: 126 17% 94%;
|
|
1232
|
+
--hsl-secondary-foreground: 143 25% 12%;
|
|
1233
|
+
--hsl-muted: 126 17% 94%;
|
|
1234
|
+
--hsl-muted-foreground: 146 9% 39%;
|
|
1235
|
+
--hsl-accent: 131 20% 91%;
|
|
1236
|
+
--hsl-accent-foreground: 143 25% 12%;
|
|
1237
|
+
--hsl-border: 130 15% 84%;
|
|
1238
|
+
--hsl-input: 105 22% 97.5%;
|
|
1239
|
+
--hsl-ring: 148 28% 43%;
|
|
1240
|
+
--sidebar-background: 0 0% 100%;
|
|
1241
|
+
--sidebar-foreground: 143 25% 12%;
|
|
1242
|
+
--sidebar-primary: 153 38% 25%;
|
|
1243
|
+
--sidebar-primary-foreground: 0 0% 100%;
|
|
1244
|
+
--sidebar-accent: 126 17% 94%;
|
|
1245
|
+
--sidebar-accent-foreground: 143 25% 12%;
|
|
1246
|
+
--sidebar-border: 130 15% 84%;
|
|
1247
|
+
--sidebar-ring: 148 28% 43%;
|
|
1248
|
+
--md3-surface: #e9eee7;
|
|
1249
|
+
--md3-surface-dim: #d5ded3;
|
|
1250
|
+
--md3-surface-bright: #ffffff;
|
|
1251
|
+
--md3-surface-container-lowest: #ffffff;
|
|
1252
|
+
--md3-surface-container-low: #f8faf7;
|
|
1253
|
+
--md3-surface-container: #ffffff;
|
|
1254
|
+
--md3-surface-container-high: #edf2ee;
|
|
1255
|
+
--md3-surface-container-highest: #ffffff;
|
|
1256
|
+
--md3-surface-variant: #edf2ee;
|
|
1257
|
+
--md3-on-surface: #17261d;
|
|
1258
|
+
--md3-on-surface-variant: #5a6c62;
|
|
1259
|
+
--md3-outline: #6d8376;
|
|
1260
|
+
--md3-outline-variant: #d0dcd2;
|
|
1261
|
+
--md3-primary: #285842;
|
|
1262
|
+
--md3-primary-dim: #1f4735;
|
|
1263
|
+
--md3-primary-container: #1f4735;
|
|
1264
|
+
--md3-on-primary: #ffffff;
|
|
1265
|
+
--md3-surface-tint: #285842;
|
|
1266
|
+
--depth-1: #e9eee7;
|
|
1267
|
+
--depth-2: #ffffff;
|
|
1268
|
+
--depth-3: #edf2ee;
|
|
1269
|
+
--depth-4: #ffffff;
|
|
1270
|
+
--bg-root: #e9eee7;
|
|
1271
|
+
--bg-dark: #e9eee7;
|
|
1272
|
+
--bg-section: #e9eee7;
|
|
1273
|
+
--bg-card: #ffffff;
|
|
1274
|
+
--bg-elevated: #ffffff;
|
|
1275
|
+
--bg-input: #f8faf7;
|
|
1276
|
+
--bg-hover: rgba(40, 88, 66, 0.05);
|
|
1277
|
+
--bg-selection: rgba(40, 88, 66, 0.16);
|
|
1278
|
+
--border-subtle: rgba(23, 38, 29, 0.10);
|
|
1279
|
+
--border-default: rgba(23, 38, 29, 0.14);
|
|
1280
|
+
--border-hover: rgba(23, 38, 29, 0.24);
|
|
1281
|
+
--border-accent: rgba(40, 88, 66, 0.20);
|
|
1282
|
+
--border-accent-hover: rgba(40, 88, 66, 0.36);
|
|
1283
|
+
--accent-text: #285842;
|
|
1284
|
+
--accent-surface-soft: rgba(40, 88, 66, 0.05);
|
|
1285
|
+
--accent-surface-strong: rgba(40, 88, 66, 0.13);
|
|
1286
|
+
--accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
|
|
1287
|
+
--brand-primary: #3d7b5f;
|
|
1288
|
+
--brand-cool: #4f8c6c;
|
|
1289
|
+
--brand-glow: #6cac8a;
|
|
1290
|
+
--brand-vibrant: #3d7b5f;
|
|
1291
|
+
--btn-primary-bg: #285842;
|
|
1292
|
+
--btn-primary-hover: #336c52;
|
|
1293
|
+
--btn-primary-text: #ffffff;
|
|
1294
|
+
--text-primary: #17261d;
|
|
1295
|
+
--text-secondary: #36493e;
|
|
1296
|
+
--text-muted: #5a6c62;
|
|
1297
|
+
--text-dim: #5f6d65;
|
|
1298
|
+
}
|
|
1299
|
+
.dark[data-theme="hospitality"] {
|
|
1300
|
+
--hsl-background: 150 8% 8.6%;
|
|
1301
|
+
--hsl-foreground: 140 12% 90.2%;
|
|
1302
|
+
--hsl-card: 150 6% 18.8%;
|
|
1303
|
+
--hsl-card-foreground: 140 12% 90.2%;
|
|
1304
|
+
--hsl-popover: 150 6% 20.8%;
|
|
1305
|
+
--hsl-popover-foreground: 140 12% 90.2%;
|
|
1306
|
+
--hsl-primary: 145 31% 59%;
|
|
1307
|
+
--hsl-primary-foreground: 153 35% 10%;
|
|
1308
|
+
--hsl-secondary: 150 6% 20.8%;
|
|
1309
|
+
--hsl-secondary-foreground: 140 12% 90.2%;
|
|
1310
|
+
--hsl-muted: 150 6% 20.8%;
|
|
1311
|
+
--hsl-muted-foreground: 145 8% 71%;
|
|
1312
|
+
--hsl-accent: 150 6% 20.8%;
|
|
1313
|
+
--hsl-accent-foreground: 140 12% 90.2%;
|
|
1314
|
+
--hsl-border: 150 5% 29.8%;
|
|
1315
|
+
--hsl-input: 150 8% 12.2%;
|
|
1316
|
+
--hsl-ring: 145 31% 59%;
|
|
1317
|
+
--sidebar-background: 150 9% 6.3%;
|
|
1318
|
+
--sidebar-foreground: 140 12% 90.2%;
|
|
1319
|
+
--sidebar-primary: 145 31% 59%;
|
|
1320
|
+
--sidebar-primary-foreground: 153 35% 10%;
|
|
1321
|
+
--sidebar-accent: 150 6% 20.8%;
|
|
1322
|
+
--sidebar-accent-foreground: 140 12% 90.2%;
|
|
1323
|
+
--sidebar-border: 150 5% 29.8%;
|
|
1324
|
+
--sidebar-ring: 145 31% 59%;
|
|
1325
|
+
--md3-surface: #141816;
|
|
1326
|
+
--md3-surface-dim: #0f1210;
|
|
1327
|
+
--md3-surface-bright: #383e3b;
|
|
1328
|
+
--md3-surface-container-lowest: #0f1210;
|
|
1329
|
+
--md3-surface-container-low: #212624;
|
|
1330
|
+
--md3-surface-container: #2d3330;
|
|
1331
|
+
--md3-surface-container-high: #323835;
|
|
1332
|
+
--md3-surface-container-highest: #383e3b;
|
|
1333
|
+
--md3-surface-variant: #323835;
|
|
1334
|
+
--md3-on-surface: #e3e9e5;
|
|
1335
|
+
--md3-on-surface-variant: #afbbb4;
|
|
1336
|
+
--md3-outline: #8a938e;
|
|
1337
|
+
--md3-outline-variant: #48504c;
|
|
1338
|
+
--md3-primary: #76b791;
|
|
1339
|
+
--md3-primary-dim: #396a52;
|
|
1340
|
+
--md3-primary-container: #396a52;
|
|
1341
|
+
--md3-on-primary: #11221a;
|
|
1342
|
+
--md3-surface-tint: #76b791;
|
|
1343
|
+
--depth-1: #141816;
|
|
1344
|
+
--depth-2: #2d3330;
|
|
1345
|
+
--depth-3: #323835;
|
|
1346
|
+
--depth-4: #383e3b;
|
|
1347
|
+
--bg-root: #141816;
|
|
1348
|
+
--bg-dark: #141816;
|
|
1349
|
+
--bg-section: #141816;
|
|
1350
|
+
--bg-card: #2d3330;
|
|
1351
|
+
--bg-elevated: #383e3b;
|
|
1352
|
+
--bg-input: #1d221f;
|
|
1353
|
+
--bg-hover: rgba(118, 183, 145, 0.07);
|
|
1354
|
+
--bg-selection: rgba(118, 183, 145, 0.28);
|
|
1355
|
+
--border-subtle: rgba(227, 233, 229, 0.10);
|
|
1356
|
+
--border-default: rgba(227, 233, 229, 0.16);
|
|
1357
|
+
--border-hover: rgba(227, 233, 229, 0.28);
|
|
1358
|
+
--border-accent: rgba(118, 183, 145, 0.35);
|
|
1359
|
+
--border-accent-hover: rgba(118, 183, 145, 0.50);
|
|
1360
|
+
--accent-text: #76b791;
|
|
1361
|
+
--accent-surface-soft: rgba(118, 183, 145, 0.07);
|
|
1362
|
+
--accent-surface-strong: rgba(57, 106, 82, 0.40);
|
|
1363
|
+
--accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
|
|
1364
|
+
--brand-primary: #529873;
|
|
1365
|
+
--brand-cool: #76b791;
|
|
1366
|
+
--brand-glow: #94c7a9;
|
|
1367
|
+
--brand-vibrant: #529873;
|
|
1368
|
+
--btn-primary-bg: #76b791;
|
|
1369
|
+
--btn-primary-hover: #8dc3a4;
|
|
1370
|
+
--btn-primary-text: #11221a;
|
|
1371
|
+
--text-primary: #e3e9e5;
|
|
1372
|
+
--text-secondary: #c5cec9;
|
|
1373
|
+
--text-muted: #afbbb4;
|
|
1374
|
+
--text-dim: #9ea9a2;
|
|
1375
|
+
}
|
|
1376
|
+
[data-theme="agents"] {
|
|
1377
|
+
--bg-card: #1a191b;
|
|
1378
|
+
--hsl-background: 270 5.6% 7.1%;
|
|
1379
|
+
--hsl-foreground: 240 6.2% 93.7%;
|
|
1380
|
+
--hsl-card: 270 3.8% 10.2%;
|
|
1381
|
+
--hsl-card-foreground: 240 6.2% 93.7%;
|
|
1382
|
+
--hsl-popover: 260 4.2% 13.9%;
|
|
1383
|
+
--hsl-popover-foreground: 240 6.2% 93.7%;
|
|
1384
|
+
--hsl-secondary: 260 4.2% 13.9%;
|
|
1385
|
+
--hsl-secondary-foreground: 240 6.2% 93.7%;
|
|
1386
|
+
--hsl-muted: 260 4.2% 13.9%;
|
|
1387
|
+
--hsl-muted-foreground: 258 6.9% 71.8%;
|
|
1388
|
+
--hsl-accent: 270 4.7% 16.9%;
|
|
1389
|
+
--hsl-accent-foreground: 240 6.2% 93.7%;
|
|
1390
|
+
--hsl-border: 270 5% 23.5%;
|
|
1391
|
+
--hsl-input: 251 4.8% 44.9%;
|
|
1392
|
+
--sidebar-background: 270 3.8% 10.2%;
|
|
1393
|
+
--sidebar-foreground: 240 6.2% 93.7%;
|
|
1394
|
+
--sidebar-accent: 270 4.7% 16.9%;
|
|
1395
|
+
--sidebar-accent-foreground: 240 6.2% 93.7%;
|
|
1396
|
+
--sidebar-border: 270 5% 23.5%;
|
|
1397
|
+
--md3-surface: #121113;
|
|
1398
|
+
--md3-surface-dim: #121113;
|
|
1399
|
+
--md3-surface-bright: #323035;
|
|
1400
|
+
--md3-surface-container-lowest: #121113;
|
|
1401
|
+
--md3-surface-container-low: #1a191b;
|
|
1402
|
+
--md3-surface-container: #1a191b;
|
|
1403
|
+
--md3-surface-container-high: #232225;
|
|
1404
|
+
--md3-surface-container-highest: #2b292d;
|
|
1405
|
+
--md3-surface-variant: #232225;
|
|
1406
|
+
--md3-on-surface: #eeeef0;
|
|
1407
|
+
--md3-on-surface-variant: #b5b2bc;
|
|
1408
|
+
--md3-outline: #6f6d78;
|
|
1409
|
+
--md3-outline-variant: #3c393f;
|
|
1410
|
+
--depth-1: #121113;
|
|
1411
|
+
--depth-2: #1a191b;
|
|
1412
|
+
--depth-3: #232225;
|
|
1413
|
+
--depth-4: #2b292d;
|
|
1414
|
+
--bg-root: #121113;
|
|
1415
|
+
--bg-dark: #121113;
|
|
1416
|
+
--bg-elevated: #232225;
|
|
1417
|
+
--bg-section: #121113;
|
|
1418
|
+
--bg-input: #1a191b;
|
|
1419
|
+
--bg-hover: #232225;
|
|
1420
|
+
--text-primary: #eeeef0;
|
|
1421
|
+
--text-secondary: #eeeef0;
|
|
1422
|
+
--text-muted: #b5b2bc;
|
|
1423
|
+
--text-dim: #b5b2bc;
|
|
1424
|
+
--border-subtle: #3c393f;
|
|
1425
|
+
--border-default: #49474e;
|
|
1426
|
+
--border-hover: #625f69;
|
|
1427
|
+
--shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
|
|
1428
|
+
--shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
|
|
1429
|
+
--shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
|
|
1430
|
+
}
|
|
1431
|
+
[data-theme="agents-light"] {
|
|
1432
|
+
--bg-card: #ffffff;
|
|
1433
|
+
--hsl-background: 0 0% 100%;
|
|
1434
|
+
--hsl-foreground: 257 10.1% 13.5%;
|
|
1435
|
+
--hsl-card: 0 0% 100%;
|
|
1436
|
+
--hsl-card-foreground: 257 10.1% 13.5%;
|
|
1437
|
+
--hsl-popover: 0 0% 100%;
|
|
1438
|
+
--hsl-popover-foreground: 257 10.1% 13.5%;
|
|
1439
|
+
--hsl-secondary: 285 14.3% 94.5%;
|
|
1440
|
+
--hsl-secondary-foreground: 257 10.1% 13.5%;
|
|
1441
|
+
--hsl-muted: 285 14.3% 94.5%;
|
|
1442
|
+
--hsl-muted-foreground: 252 4.8% 40.8%;
|
|
1443
|
+
--hsl-accent: 276 11.6% 91.6%;
|
|
1444
|
+
--hsl-accent-foreground: 257 10.1% 13.5%;
|
|
1445
|
+
--hsl-border: 262 11.4% 86.3%;
|
|
1446
|
+
--hsl-input: 249 6% 57.5%;
|
|
1447
|
+
--sidebar-background: 270 20% 98%;
|
|
1448
|
+
--sidebar-foreground: 257 10.1% 13.5%;
|
|
1449
|
+
--sidebar-accent: 276 11.6% 91.6%;
|
|
1450
|
+
--sidebar-accent-foreground: 257 10.1% 13.5%;
|
|
1451
|
+
--sidebar-border: 262 11.4% 86.3%;
|
|
1452
|
+
--md3-surface: #ffffff;
|
|
1453
|
+
--md3-surface-dim: #faf9fb;
|
|
1454
|
+
--md3-surface-bright: #ffffff;
|
|
1455
|
+
--md3-surface-container-lowest: #ffffff;
|
|
1456
|
+
--md3-surface-container-low: #faf9fb;
|
|
1457
|
+
--md3-surface-container: #ffffff;
|
|
1458
|
+
--md3-surface-container-high: #f2eff3;
|
|
1459
|
+
--md3-surface-container-highest: #ffffff;
|
|
1460
|
+
--md3-surface-variant: #f2eff3;
|
|
1461
|
+
--md3-on-surface: #211f26;
|
|
1462
|
+
--md3-on-surface-variant: #65636d;
|
|
1463
|
+
--md3-outline: #8e8c99;
|
|
1464
|
+
--md3-outline-variant: #dbd8e0;
|
|
1465
|
+
--depth-1: #ffffff;
|
|
1466
|
+
--depth-2: #ffffff;
|
|
1467
|
+
--depth-3: #faf9fb;
|
|
1468
|
+
--depth-4: #ffffff;
|
|
1469
|
+
--bg-root: #ffffff;
|
|
1470
|
+
--bg-dark: #faf9fb;
|
|
1471
|
+
--bg-elevated: #ffffff;
|
|
1472
|
+
--bg-section: #faf9fb;
|
|
1473
|
+
--bg-input: #ffffff;
|
|
1474
|
+
--bg-hover: #f2eff3;
|
|
1475
|
+
--text-primary: #211f26;
|
|
1476
|
+
--text-secondary: #211f26;
|
|
1477
|
+
--text-muted: #65636d;
|
|
1478
|
+
--text-dim: #65636d;
|
|
1479
|
+
--border-subtle: #dbd8e0;
|
|
1480
|
+
--border-default: #d0cdd7;
|
|
1481
|
+
--border-hover: #bcbac7;
|
|
1482
|
+
--shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
|
|
1483
|
+
--shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
|
|
1484
|
+
--shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
|
|
1485
|
+
}
|
|
1486
|
+
[data-theme="website"]:where(:not(.dark)) {
|
|
1487
|
+
--hsl-background: 240 42.9% 97.3%;
|
|
1488
|
+
--hsl-foreground: 224 18% 12%;
|
|
1489
|
+
--hsl-card: 0 0% 100%;
|
|
1490
|
+
--hsl-card-foreground: 224 18% 12%;
|
|
1491
|
+
--hsl-popover: 0 0% 100%;
|
|
1492
|
+
--hsl-popover-foreground: 224 18% 12%;
|
|
1493
|
+
--hsl-secondary: 240 35.7% 94.5%;
|
|
1494
|
+
--hsl-secondary-foreground: 224 18% 12%;
|
|
1495
|
+
--hsl-muted: 240 35.7% 94.5%;
|
|
1496
|
+
--hsl-muted-foreground: 240 13% 42.4%;
|
|
1497
|
+
--hsl-accent: 240 23.1% 92.4%;
|
|
1498
|
+
--hsl-accent-foreground: 224 18% 12%;
|
|
1499
|
+
--hsl-border: 240 26.3% 88.8%;
|
|
1500
|
+
--hsl-input: 240 42.9% 97.3%;
|
|
1501
|
+
--md3-surface: #f5f5fb;
|
|
1502
|
+
--md3-surface-dim: #e7e7f0;
|
|
1503
|
+
--md3-surface-bright: #ffffff;
|
|
1504
|
+
--md3-surface-container-lowest: #ffffff;
|
|
1505
|
+
--md3-surface-container-low: #fafafd;
|
|
1506
|
+
--md3-surface-container: #ffffff;
|
|
1507
|
+
--md3-surface-container-high: #ececf6;
|
|
1508
|
+
--md3-surface-container-highest: #ffffff;
|
|
1509
|
+
--md3-surface-variant: #ececf6;
|
|
1510
|
+
--md3-on-surface: #191c24;
|
|
1511
|
+
--md3-on-surface-variant: #5e5e7a;
|
|
1512
|
+
--md3-outline: #5e5e7a;
|
|
1513
|
+
--md3-outline-variant: #dbdbea;
|
|
1514
|
+
--depth-1: #f5f5fb;
|
|
1515
|
+
--depth-2: #ffffff;
|
|
1516
|
+
--depth-3: #ececf6;
|
|
1517
|
+
--depth-4: #ffffff;
|
|
1518
|
+
--bg-root: #f5f5fb;
|
|
1519
|
+
--bg-dark: #f5f5fb;
|
|
1520
|
+
--bg-section: #ececf6;
|
|
1521
|
+
--bg-card: #ffffff;
|
|
1522
|
+
--bg-elevated: #ffffff;
|
|
1523
|
+
--bg-input: #f5f5fb;
|
|
1524
|
+
--border-subtle: rgba(25, 28, 36, 0.08);
|
|
1525
|
+
--border-default: rgba(25, 28, 36, 0.12);
|
|
1526
|
+
--border-hover: rgba(25, 28, 36, 0.24);
|
|
1527
|
+
--text-primary: #191c24;
|
|
1528
|
+
--text-secondary: #3a3a50;
|
|
1529
|
+
--text-muted: #5e5e7a;
|
|
1530
|
+
--text-dim: #5e5e7a;
|
|
1531
|
+
}
|
|
1532
|
+
.dark[data-theme="website"] {
|
|
1533
|
+
--hsl-background: 243 45% 7.8%;
|
|
1534
|
+
--hsl-foreground: 0 0% 99.2%;
|
|
1535
|
+
--hsl-card: 244 34.9% 16.3%;
|
|
1536
|
+
--hsl-card-foreground: 0 0% 99.2%;
|
|
1537
|
+
--hsl-popover: 243 33.3% 21.2%;
|
|
1538
|
+
--hsl-popover-foreground: 0 0% 99.2%;
|
|
1539
|
+
--hsl-secondary: 244 34% 19%;
|
|
1540
|
+
--hsl-secondary-foreground: 0 0% 99.2%;
|
|
1541
|
+
--hsl-muted: 244 34% 19%;
|
|
1542
|
+
--hsl-muted-foreground: 237 23% 65.9%;
|
|
1543
|
+
--hsl-accent: 243 33.3% 21.2%;
|
|
1544
|
+
--hsl-accent-foreground: 0 0% 99.2%;
|
|
1545
|
+
--hsl-border: 243 31.9% 28.2%;
|
|
1546
|
+
--hsl-input: 243 41.2% 10%;
|
|
1547
|
+
--md3-surface: #0c0b1d;
|
|
1548
|
+
--md3-surface-dim: #080814;
|
|
1549
|
+
--md3-surface-bright: #2e2c56;
|
|
1550
|
+
--md3-surface-container-lowest: #080814;
|
|
1551
|
+
--md3-surface-container-low: #141328;
|
|
1552
|
+
--md3-surface-container: #1d1b38;
|
|
1553
|
+
--md3-surface-container-high: #222041;
|
|
1554
|
+
--md3-surface-container-highest: #262448;
|
|
1555
|
+
--md3-surface-variant: #222041;
|
|
1556
|
+
--md3-on-surface: #fdfdfd;
|
|
1557
|
+
--md3-on-surface-variant: #aaa8b8;
|
|
1558
|
+
--md3-outline: #9496bc;
|
|
1559
|
+
--md3-outline-variant: #33315f;
|
|
1560
|
+
--depth-1: #0c0b1d;
|
|
1561
|
+
--depth-2: #1d1b38;
|
|
1562
|
+
--depth-3: #222041;
|
|
1563
|
+
--depth-4: #262448;
|
|
1564
|
+
--bg-root: #0c0b1d;
|
|
1565
|
+
--bg-dark: #0c0b1d;
|
|
1566
|
+
--bg-section: #141328;
|
|
1567
|
+
--bg-card: #1d1b38;
|
|
1568
|
+
--bg-elevated: #262448;
|
|
1569
|
+
--bg-input: #100f24;
|
|
1570
|
+
--border-subtle: rgba(255, 255, 255, 0.08);
|
|
1571
|
+
--border-default: rgba(255, 255, 255, 0.15);
|
|
1572
|
+
--border-hover: rgba(255, 255, 255, 0.28);
|
|
1573
|
+
--text-primary: #fdfdfd;
|
|
1574
|
+
--text-secondary: #aaa8b8;
|
|
1575
|
+
--text-muted: #9496bc;
|
|
1576
|
+
--text-dim: #9496bc;
|
|
1577
|
+
}
|