@twentyfirstmedia/halo 0.1.1 → 0.2.1
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 +1 -1
- package/dist/scoped.css +917 -51
- package/dist/styles.css +786 -36
- package/dist/tailwind.css +15 -0
- package/dist/tokens.css +169 -0
- package/dist/tokens.json +177 -0
- package/package.json +2 -2
package/dist/tailwind.css
CHANGED
|
@@ -64,6 +64,20 @@
|
|
|
64
64
|
--color-on-frame-danger: var(--on-frame-danger);
|
|
65
65
|
--color-scrim: var(--scrim);
|
|
66
66
|
--color-scrim-strong: var(--scrim-strong);
|
|
67
|
+
--color-glass: var(--glass);
|
|
68
|
+
--color-glass-strong: var(--glass-strong);
|
|
69
|
+
--color-glass-control: var(--glass-control);
|
|
70
|
+
--color-glass-well: var(--glass-well);
|
|
71
|
+
--color-glass-hover: var(--glass-hover);
|
|
72
|
+
--color-glass-border: var(--glass-border);
|
|
73
|
+
--color-glass-highlight: var(--glass-highlight);
|
|
74
|
+
--color-glass-sheen: var(--glass-sheen);
|
|
75
|
+
--color-ambient-base: var(--ambient-base);
|
|
76
|
+
--color-ambient-1: var(--ambient-1);
|
|
77
|
+
--color-ambient-2: var(--ambient-2);
|
|
78
|
+
--color-ambient-3: var(--ambient-3);
|
|
79
|
+
--color-ambient-4: var(--ambient-4);
|
|
80
|
+
--color-ambient-scrim: var(--ambient-scrim);
|
|
67
81
|
--color-bg-000: var(--bg-000);
|
|
68
82
|
--color-bg-100: var(--bg-100);
|
|
69
83
|
--color-bg-200: var(--bg-200);
|
|
@@ -131,6 +145,7 @@
|
|
|
131
145
|
--shadow-lift: var(--shadow-lift);
|
|
132
146
|
--shadow-float: var(--shadow-float);
|
|
133
147
|
--shadow-overlay: var(--shadow-overlay);
|
|
148
|
+
--shadow-glass: var(--shadow-glass);
|
|
134
149
|
--font-*: initial;
|
|
135
150
|
--font-sans: var(--font-sans);
|
|
136
151
|
--font-mono: var(--font-mono);
|
package/dist/tokens.css
CHANGED
|
@@ -27,6 +27,10 @@
|
|
|
27
27
|
--dur-enter: 520ms;
|
|
28
28
|
--dur-slow: 900ms;
|
|
29
29
|
--stagger-step: 55ms;
|
|
30
|
+
--dur-exit: 160ms;
|
|
31
|
+
--motion-time: 1;
|
|
32
|
+
--motion-travel: 1;
|
|
33
|
+
--motion-blur: 0px;
|
|
30
34
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
31
35
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
32
36
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
@@ -233,6 +237,20 @@
|
|
|
233
237
|
--on-frame-danger: #f2a8a0;
|
|
234
238
|
--scrim: rgba(10, 10, 10, 0.32);
|
|
235
239
|
--scrim-strong: rgba(10, 10, 10, 0.38);
|
|
240
|
+
--glass: color-mix(in srgb, var(--card) 72%, transparent);
|
|
241
|
+
--glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
|
|
242
|
+
--glass-control: color-mix(in srgb, var(--card) 62%, transparent);
|
|
243
|
+
--glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
|
|
244
|
+
--glass-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
|
|
245
|
+
--glass-border: rgba(255, 255, 255, 0.6);
|
|
246
|
+
--glass-highlight: rgba(255, 255, 255, 0.95);
|
|
247
|
+
--glass-sheen: rgba(255, 255, 255, 0.5);
|
|
248
|
+
--ambient-base: var(--background);
|
|
249
|
+
--ambient-1: color-mix(in oklab, var(--sky) 72%, var(--sky-ink));
|
|
250
|
+
--ambient-2: color-mix(in oklab, var(--mint) 72%, var(--mint-ink));
|
|
251
|
+
--ambient-3: color-mix(in oklab, var(--lilac) 72%, var(--lilac-ink));
|
|
252
|
+
--ambient-4: color-mix(in oklab, var(--butter) 72%, var(--butter-ink));
|
|
253
|
+
--ambient-scrim: rgba(255, 255, 255, 0.28);
|
|
236
254
|
--bg-000: var(--canvas);
|
|
237
255
|
--bg-100: var(--surface);
|
|
238
256
|
--bg-200: var(--surface-sunken);
|
|
@@ -290,6 +308,7 @@
|
|
|
290
308
|
--shadow-lift: 0 2px 4px rgba(20,20,20,0.06), 0 14px 32px rgba(20,20,20,0.10);
|
|
291
309
|
--shadow-float: 0 16px 40px rgba(0,0,0,0.22);
|
|
292
310
|
--shadow-overlay: var(--shadow-float);
|
|
311
|
+
--shadow-glass: 0 1px 2px rgba(20, 20, 40, 0.06), 0 12px 40px rgba(20, 20, 40, 0.14);
|
|
293
312
|
--button-radius: var(--radius-pill);
|
|
294
313
|
--field-radius: var(--radius-pill);
|
|
295
314
|
--badge-radius: var(--radius-pill);
|
|
@@ -299,6 +318,8 @@
|
|
|
299
318
|
--panel-shadow: var(--shadow-card);
|
|
300
319
|
--panel-pad: var(--space-6);
|
|
301
320
|
--panel-gap: var(--space-4);
|
|
321
|
+
--glass-filter: blur(24px) saturate(180%) brightness(1.05);
|
|
322
|
+
--glass-tint: 62%;
|
|
302
323
|
color-scheme: light;
|
|
303
324
|
}
|
|
304
325
|
@media (prefers-color-scheme: dark) {
|
|
@@ -364,6 +385,20 @@
|
|
|
364
385
|
--on-frame-danger: #f2a8a0;
|
|
365
386
|
--scrim: rgba(10, 10, 10, 0.32);
|
|
366
387
|
--scrim-strong: rgba(10, 10, 10, 0.38);
|
|
388
|
+
--glass: color-mix(in srgb, var(--card) 70%, transparent);
|
|
389
|
+
--glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
|
|
390
|
+
--glass-control: color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
391
|
+
--glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
|
|
392
|
+
--glass-hover: color-mix(in srgb, var(--foreground) 12%, transparent);
|
|
393
|
+
--glass-border: rgba(255, 255, 255, 0.1);
|
|
394
|
+
--glass-highlight: rgba(255, 255, 255, 0.18);
|
|
395
|
+
--glass-sheen: rgba(255, 255, 255, 0.05);
|
|
396
|
+
--ambient-base: var(--background);
|
|
397
|
+
--ambient-1: var(--sky);
|
|
398
|
+
--ambient-2: var(--mint);
|
|
399
|
+
--ambient-3: var(--lilac);
|
|
400
|
+
--ambient-4: var(--butter);
|
|
401
|
+
--ambient-scrim: rgba(10, 10, 10, 0.45);
|
|
367
402
|
--bg-000: var(--canvas);
|
|
368
403
|
--bg-100: var(--surface);
|
|
369
404
|
--bg-200: var(--surface-sunken);
|
|
@@ -421,6 +456,7 @@
|
|
|
421
456
|
--shadow-lift: 0 2px 6px rgba(0,0,0,0.5), 0 14px 32px rgba(0,0,0,0.45);
|
|
422
457
|
--shadow-float: 0 16px 40px rgba(0,0,0,0.6);
|
|
423
458
|
--shadow-overlay: var(--shadow-float);
|
|
459
|
+
--shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45);
|
|
424
460
|
--button-radius: var(--radius-pill);
|
|
425
461
|
--field-radius: var(--radius-pill);
|
|
426
462
|
--badge-radius: var(--radius-pill);
|
|
@@ -430,6 +466,8 @@
|
|
|
430
466
|
--panel-shadow: var(--shadow-card);
|
|
431
467
|
--panel-pad: var(--space-6);
|
|
432
468
|
--panel-gap: var(--space-4);
|
|
469
|
+
--glass-filter: blur(24px) saturate(160%) brightness(0.85);
|
|
470
|
+
--glass-tint: 62%;
|
|
433
471
|
color-scheme: dark;
|
|
434
472
|
}
|
|
435
473
|
}
|
|
@@ -496,6 +534,20 @@
|
|
|
496
534
|
--on-frame-danger: #f2a8a0;
|
|
497
535
|
--scrim: rgba(10, 10, 10, 0.32);
|
|
498
536
|
--scrim-strong: rgba(10, 10, 10, 0.38);
|
|
537
|
+
--glass: color-mix(in srgb, var(--card) 70%, transparent);
|
|
538
|
+
--glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
|
|
539
|
+
--glass-control: color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
540
|
+
--glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
|
|
541
|
+
--glass-hover: color-mix(in srgb, var(--foreground) 12%, transparent);
|
|
542
|
+
--glass-border: rgba(255, 255, 255, 0.1);
|
|
543
|
+
--glass-highlight: rgba(255, 255, 255, 0.18);
|
|
544
|
+
--glass-sheen: rgba(255, 255, 255, 0.05);
|
|
545
|
+
--ambient-base: var(--background);
|
|
546
|
+
--ambient-1: var(--sky);
|
|
547
|
+
--ambient-2: var(--mint);
|
|
548
|
+
--ambient-3: var(--lilac);
|
|
549
|
+
--ambient-4: var(--butter);
|
|
550
|
+
--ambient-scrim: rgba(10, 10, 10, 0.45);
|
|
499
551
|
--bg-000: var(--canvas);
|
|
500
552
|
--bg-100: var(--surface);
|
|
501
553
|
--bg-200: var(--surface-sunken);
|
|
@@ -553,6 +605,7 @@
|
|
|
553
605
|
--shadow-lift: 0 2px 6px rgba(0,0,0,0.5), 0 14px 32px rgba(0,0,0,0.45);
|
|
554
606
|
--shadow-float: 0 16px 40px rgba(0,0,0,0.6);
|
|
555
607
|
--shadow-overlay: var(--shadow-float);
|
|
608
|
+
--shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45);
|
|
556
609
|
--button-radius: var(--radius-pill);
|
|
557
610
|
--field-radius: var(--radius-pill);
|
|
558
611
|
--badge-radius: var(--radius-pill);
|
|
@@ -562,6 +615,8 @@
|
|
|
562
615
|
--panel-shadow: var(--shadow-card);
|
|
563
616
|
--panel-pad: var(--space-6);
|
|
564
617
|
--panel-gap: var(--space-4);
|
|
618
|
+
--glass-filter: blur(24px) saturate(160%) brightness(0.85);
|
|
619
|
+
--glass-tint: 62%;
|
|
565
620
|
color-scheme: dark;
|
|
566
621
|
}
|
|
567
622
|
}
|
|
@@ -628,6 +683,20 @@
|
|
|
628
683
|
--on-frame-danger: #f2a8a0;
|
|
629
684
|
--scrim: rgba(10, 10, 10, 0.32);
|
|
630
685
|
--scrim-strong: rgba(10, 10, 10, 0.38);
|
|
686
|
+
--glass: color-mix(in srgb, var(--card) 72%, transparent);
|
|
687
|
+
--glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
|
|
688
|
+
--glass-control: color-mix(in srgb, var(--card) 62%, transparent);
|
|
689
|
+
--glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
|
|
690
|
+
--glass-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
|
|
691
|
+
--glass-border: rgba(255, 255, 255, 0.6);
|
|
692
|
+
--glass-highlight: rgba(255, 255, 255, 0.95);
|
|
693
|
+
--glass-sheen: rgba(255, 255, 255, 0.5);
|
|
694
|
+
--ambient-base: var(--background);
|
|
695
|
+
--ambient-1: color-mix(in oklab, var(--sky) 72%, var(--sky-ink));
|
|
696
|
+
--ambient-2: color-mix(in oklab, var(--mint) 72%, var(--mint-ink));
|
|
697
|
+
--ambient-3: color-mix(in oklab, var(--lilac) 72%, var(--lilac-ink));
|
|
698
|
+
--ambient-4: color-mix(in oklab, var(--butter) 72%, var(--butter-ink));
|
|
699
|
+
--ambient-scrim: rgba(255, 255, 255, 0.28);
|
|
631
700
|
--bg-000: var(--canvas);
|
|
632
701
|
--bg-100: var(--surface);
|
|
633
702
|
--bg-200: var(--surface-sunken);
|
|
@@ -685,6 +754,7 @@
|
|
|
685
754
|
--shadow-lift: 0 2px 4px rgba(20,20,20,0.06), 0 14px 32px rgba(20,20,20,0.10);
|
|
686
755
|
--shadow-float: 0 16px 40px rgba(0,0,0,0.22);
|
|
687
756
|
--shadow-overlay: var(--shadow-float);
|
|
757
|
+
--shadow-glass: 0 1px 2px rgba(20, 20, 40, 0.06), 0 12px 40px rgba(20, 20, 40, 0.14);
|
|
688
758
|
--button-radius: var(--radius-pill);
|
|
689
759
|
--field-radius: var(--radius-pill);
|
|
690
760
|
--badge-radius: var(--radius-pill);
|
|
@@ -694,6 +764,8 @@
|
|
|
694
764
|
--panel-shadow: var(--shadow-card);
|
|
695
765
|
--panel-pad: var(--space-6);
|
|
696
766
|
--panel-gap: var(--space-4);
|
|
767
|
+
--glass-filter: blur(24px) saturate(180%) brightness(1.05);
|
|
768
|
+
--glass-tint: 62%;
|
|
697
769
|
color-scheme: light;
|
|
698
770
|
}
|
|
699
771
|
}
|
|
@@ -759,6 +831,20 @@
|
|
|
759
831
|
--on-frame-danger: #f2a8a0;
|
|
760
832
|
--scrim: rgba(10, 10, 10, 0.32);
|
|
761
833
|
--scrim-strong: rgba(10, 10, 10, 0.38);
|
|
834
|
+
--glass: color-mix(in srgb, var(--card) 70%, transparent);
|
|
835
|
+
--glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
|
|
836
|
+
--glass-control: color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
837
|
+
--glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
|
|
838
|
+
--glass-hover: color-mix(in srgb, var(--foreground) 12%, transparent);
|
|
839
|
+
--glass-border: rgba(255, 255, 255, 0.1);
|
|
840
|
+
--glass-highlight: rgba(255, 255, 255, 0.18);
|
|
841
|
+
--glass-sheen: rgba(255, 255, 255, 0.05);
|
|
842
|
+
--ambient-base: var(--background);
|
|
843
|
+
--ambient-1: var(--sky);
|
|
844
|
+
--ambient-2: var(--mint);
|
|
845
|
+
--ambient-3: var(--lilac);
|
|
846
|
+
--ambient-4: var(--butter);
|
|
847
|
+
--ambient-scrim: rgba(10, 10, 10, 0.45);
|
|
762
848
|
--bg-000: var(--canvas);
|
|
763
849
|
--bg-100: var(--surface);
|
|
764
850
|
--bg-200: var(--surface-sunken);
|
|
@@ -816,6 +902,7 @@
|
|
|
816
902
|
--shadow-lift: 0 2px 6px rgba(0,0,0,0.5), 0 14px 32px rgba(0,0,0,0.45);
|
|
817
903
|
--shadow-float: 0 16px 40px rgba(0,0,0,0.6);
|
|
818
904
|
--shadow-overlay: var(--shadow-float);
|
|
905
|
+
--shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45);
|
|
819
906
|
--button-radius: var(--radius-pill);
|
|
820
907
|
--field-radius: var(--radius-pill);
|
|
821
908
|
--badge-radius: var(--radius-pill);
|
|
@@ -825,6 +912,8 @@
|
|
|
825
912
|
--panel-shadow: var(--shadow-card);
|
|
826
913
|
--panel-pad: var(--space-6);
|
|
827
914
|
--panel-gap: var(--space-4);
|
|
915
|
+
--glass-filter: blur(24px) saturate(160%) brightness(0.85);
|
|
916
|
+
--glass-tint: 62%;
|
|
828
917
|
color-scheme: dark;
|
|
829
918
|
}
|
|
830
919
|
:where([data-theme="light"], .light) {
|
|
@@ -889,6 +978,20 @@
|
|
|
889
978
|
--on-frame-danger: #f2a8a0;
|
|
890
979
|
--scrim: rgba(10, 10, 10, 0.32);
|
|
891
980
|
--scrim-strong: rgba(10, 10, 10, 0.38);
|
|
981
|
+
--glass: color-mix(in srgb, var(--card) 72%, transparent);
|
|
982
|
+
--glass-strong: color-mix(in srgb, var(--card) 86%, transparent);
|
|
983
|
+
--glass-control: color-mix(in srgb, var(--card) 62%, transparent);
|
|
984
|
+
--glass-well: color-mix(in srgb, var(--foreground) 6%, transparent);
|
|
985
|
+
--glass-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
|
|
986
|
+
--glass-border: rgba(255, 255, 255, 0.6);
|
|
987
|
+
--glass-highlight: rgba(255, 255, 255, 0.95);
|
|
988
|
+
--glass-sheen: rgba(255, 255, 255, 0.5);
|
|
989
|
+
--ambient-base: var(--background);
|
|
990
|
+
--ambient-1: color-mix(in oklab, var(--sky) 72%, var(--sky-ink));
|
|
991
|
+
--ambient-2: color-mix(in oklab, var(--mint) 72%, var(--mint-ink));
|
|
992
|
+
--ambient-3: color-mix(in oklab, var(--lilac) 72%, var(--lilac-ink));
|
|
993
|
+
--ambient-4: color-mix(in oklab, var(--butter) 72%, var(--butter-ink));
|
|
994
|
+
--ambient-scrim: rgba(255, 255, 255, 0.28);
|
|
892
995
|
--bg-000: var(--canvas);
|
|
893
996
|
--bg-100: var(--surface);
|
|
894
997
|
--bg-200: var(--surface-sunken);
|
|
@@ -946,6 +1049,7 @@
|
|
|
946
1049
|
--shadow-lift: 0 2px 4px rgba(20,20,20,0.06), 0 14px 32px rgba(20,20,20,0.10);
|
|
947
1050
|
--shadow-float: 0 16px 40px rgba(0,0,0,0.22);
|
|
948
1051
|
--shadow-overlay: var(--shadow-float);
|
|
1052
|
+
--shadow-glass: 0 1px 2px rgba(20, 20, 40, 0.06), 0 12px 40px rgba(20, 20, 40, 0.14);
|
|
949
1053
|
--button-radius: var(--radius-pill);
|
|
950
1054
|
--field-radius: var(--radius-pill);
|
|
951
1055
|
--badge-radius: var(--radius-pill);
|
|
@@ -955,6 +1059,8 @@
|
|
|
955
1059
|
--panel-shadow: var(--shadow-card);
|
|
956
1060
|
--panel-pad: var(--space-6);
|
|
957
1061
|
--panel-gap: var(--space-4);
|
|
1062
|
+
--glass-filter: blur(24px) saturate(180%) brightness(1.05);
|
|
1063
|
+
--glass-tint: 62%;
|
|
958
1064
|
color-scheme: light;
|
|
959
1065
|
}
|
|
960
1066
|
:where([data-density="compact"]) {
|
|
@@ -971,3 +1077,66 @@
|
|
|
971
1077
|
--density-font-size: 14px;
|
|
972
1078
|
--density-line-height: 20px;
|
|
973
1079
|
}
|
|
1080
|
+
:where([data-motion="expressive"]) {
|
|
1081
|
+
--dur-enter: 760ms;
|
|
1082
|
+
--dur-slow: 1300ms;
|
|
1083
|
+
--dur-exit: 220ms;
|
|
1084
|
+
--stagger-step: 90ms;
|
|
1085
|
+
--motion-time: 1.4;
|
|
1086
|
+
--motion-travel: 1.7;
|
|
1087
|
+
--motion-blur: 8px;
|
|
1088
|
+
}
|
|
1089
|
+
:where([data-motion="off"]) {
|
|
1090
|
+
--duration-fast: 0ms;
|
|
1091
|
+
--duration-base: 0ms;
|
|
1092
|
+
--dur-fast: 0ms;
|
|
1093
|
+
--dur-base: 0ms;
|
|
1094
|
+
--dur-enter: 0ms;
|
|
1095
|
+
--dur-slow: 0ms;
|
|
1096
|
+
--dur-exit: 0ms;
|
|
1097
|
+
--stagger-step: 0ms;
|
|
1098
|
+
--motion-time: 0;
|
|
1099
|
+
--motion-travel: 0;
|
|
1100
|
+
--motion-blur: 0px;
|
|
1101
|
+
}
|
|
1102
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1103
|
+
:where(:root, [data-motion], [data-theme]) {
|
|
1104
|
+
--duration-fast: 0ms;
|
|
1105
|
+
--duration-base: 0ms;
|
|
1106
|
+
--dur-fast: 0ms;
|
|
1107
|
+
--dur-base: 0ms;
|
|
1108
|
+
--dur-enter: 0ms;
|
|
1109
|
+
--dur-slow: 0ms;
|
|
1110
|
+
--dur-exit: 0ms;
|
|
1111
|
+
--stagger-step: 0ms;
|
|
1112
|
+
--motion-time: 0;
|
|
1113
|
+
--motion-travel: 0;
|
|
1114
|
+
--motion-blur: 0px;
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
1118
|
+
:where(:root, [data-theme], .dark, .light) {
|
|
1119
|
+
--glass: var(--glass-strong);
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
@media (prefers-contrast: more) {
|
|
1123
|
+
:where(:root, [data-theme], .dark, .light) {
|
|
1124
|
+
--glass: var(--glass-strong);
|
|
1125
|
+
}
|
|
1126
|
+
}
|
|
1127
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
1128
|
+
:where(:root, [data-theme], .dark, .light) {
|
|
1129
|
+
--glass: var(--card);
|
|
1130
|
+
--glass-strong: var(--popover);
|
|
1131
|
+
--glass-sheen: transparent;
|
|
1132
|
+
--glass-filter: none;
|
|
1133
|
+
}
|
|
1134
|
+
}
|
|
1135
|
+
@media (forced-colors: active) {
|
|
1136
|
+
:where(:root, [data-theme], .dark, .light) {
|
|
1137
|
+
--glass: var(--card);
|
|
1138
|
+
--glass-strong: var(--popover);
|
|
1139
|
+
--glass-sheen: transparent;
|
|
1140
|
+
--glass-filter: none;
|
|
1141
|
+
}
|
|
1142
|
+
}
|
package/dist/tokens.json
CHANGED
|
@@ -491,6 +491,118 @@
|
|
|
491
491
|
},
|
|
492
492
|
"usage": "Backdrop behind modals and the command palette."
|
|
493
493
|
},
|
|
494
|
+
{
|
|
495
|
+
"name": "glass",
|
|
496
|
+
"value": {
|
|
497
|
+
"light": "color-mix(in srgb, {card} 72%, transparent)",
|
|
498
|
+
"dark": "color-mix(in srgb, {card} 70%, transparent)"
|
|
499
|
+
},
|
|
500
|
+
"usage": "Glass surfaces: panels, cards, docks and map overlays floating over content. Opaque enough that body text stays at 4.5:1 or more over any backdrop."
|
|
501
|
+
},
|
|
502
|
+
{
|
|
503
|
+
"name": "glass-strong",
|
|
504
|
+
"value": {
|
|
505
|
+
"light": "color-mix(in srgb, {card} 86%, transparent)",
|
|
506
|
+
"dark": "color-mix(in srgb, {card} 86%, transparent)"
|
|
507
|
+
},
|
|
508
|
+
"usage": "Glass for text-heavy floating layers: menus, popovers, dialogs, drawers."
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
"name": "glass-control",
|
|
512
|
+
"value": {
|
|
513
|
+
"light": "color-mix(in srgb, {card} 62%, transparent)",
|
|
514
|
+
"dark": "color-mix(in srgb, {foreground} 10%, transparent)"
|
|
515
|
+
},
|
|
516
|
+
"usage": "Inputs, secondary buttons and chips on glass (replaces surface inside a glass surface)."
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
"name": "glass-well",
|
|
520
|
+
"value": {
|
|
521
|
+
"light": "color-mix(in srgb, {foreground} 6%, transparent)",
|
|
522
|
+
"dark": "color-mix(in srgb, {foreground} 6%, transparent)"
|
|
523
|
+
},
|
|
524
|
+
"usage": "Tab tracks, badges, search fields and nested cards on glass (replaces surface-sunken)."
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"name": "glass-hover",
|
|
528
|
+
"value": {
|
|
529
|
+
"light": "color-mix(in srgb, {foreground} 8%, transparent)",
|
|
530
|
+
"dark": "color-mix(in srgb, {foreground} 12%, transparent)"
|
|
531
|
+
},
|
|
532
|
+
"usage": "Hover and selection highlight on glass (replaces accent)."
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"name": "glass-border",
|
|
536
|
+
"value": {
|
|
537
|
+
"light": "rgba(255, 255, 255, 0.6)",
|
|
538
|
+
"dark": "rgba(255, 255, 255, 0.1)"
|
|
539
|
+
},
|
|
540
|
+
"usage": "The edge of a glass surface."
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"name": "glass-highlight",
|
|
544
|
+
"value": {
|
|
545
|
+
"light": "rgba(255, 255, 255, 0.95)",
|
|
546
|
+
"dark": "rgba(255, 255, 255, 0.18)"
|
|
547
|
+
},
|
|
548
|
+
"usage": "Light catching the top edge of a glass surface."
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"name": "glass-sheen",
|
|
552
|
+
"value": {
|
|
553
|
+
"light": "rgba(255, 255, 255, 0.5)",
|
|
554
|
+
"dark": "rgba(255, 255, 255, 0.05)"
|
|
555
|
+
},
|
|
556
|
+
"usage": "Soft light falling from the top of a glass surface."
|
|
557
|
+
},
|
|
558
|
+
{
|
|
559
|
+
"name": "ambient-base",
|
|
560
|
+
"value": {
|
|
561
|
+
"light": "{background}",
|
|
562
|
+
"dark": "{background}"
|
|
563
|
+
},
|
|
564
|
+
"usage": "Ground of the Ambient background, under the colour fields."
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
"name": "ambient-1",
|
|
568
|
+
"value": {
|
|
569
|
+
"light": "color-mix(in oklab, {sky} 72%, {sky-ink})",
|
|
570
|
+
"dark": "{sky}"
|
|
571
|
+
},
|
|
572
|
+
"usage": "First colour field of the Ambient gradient."
|
|
573
|
+
},
|
|
574
|
+
{
|
|
575
|
+
"name": "ambient-2",
|
|
576
|
+
"value": {
|
|
577
|
+
"light": "color-mix(in oklab, {mint} 72%, {mint-ink})",
|
|
578
|
+
"dark": "{mint}"
|
|
579
|
+
},
|
|
580
|
+
"usage": "Second colour field of the Ambient gradient."
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"name": "ambient-3",
|
|
584
|
+
"value": {
|
|
585
|
+
"light": "color-mix(in oklab, {lilac} 72%, {lilac-ink})",
|
|
586
|
+
"dark": "{lilac}"
|
|
587
|
+
},
|
|
588
|
+
"usage": "Third colour field of the Ambient gradient."
|
|
589
|
+
},
|
|
590
|
+
{
|
|
591
|
+
"name": "ambient-4",
|
|
592
|
+
"value": {
|
|
593
|
+
"light": "color-mix(in oklab, {butter} 72%, {butter-ink})",
|
|
594
|
+
"dark": "{butter}"
|
|
595
|
+
},
|
|
596
|
+
"usage": "Fourth colour field of the Ambient gradient."
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"name": "ambient-scrim",
|
|
600
|
+
"value": {
|
|
601
|
+
"light": "rgba(255, 255, 255, 0.28)",
|
|
602
|
+
"dark": "rgba(10, 10, 10, 0.45)"
|
|
603
|
+
},
|
|
604
|
+
"usage": "Softens a photo or video under glass so the page keeps its calm."
|
|
605
|
+
},
|
|
494
606
|
{
|
|
495
607
|
"name": "bg-000",
|
|
496
608
|
"value": {
|
|
@@ -948,6 +1060,14 @@
|
|
|
948
1060
|
"dark": "{shadow-float}"
|
|
949
1061
|
},
|
|
950
1062
|
"usage": "Floating layers: menus, popovers, dialogs, toasts."
|
|
1063
|
+
},
|
|
1064
|
+
{
|
|
1065
|
+
"name": "shadow-glass",
|
|
1066
|
+
"value": {
|
|
1067
|
+
"light": "0 1px 2px rgba(20, 20, 40, 0.06), 0 12px 40px rgba(20, 20, 40, 0.14)",
|
|
1068
|
+
"dark": "0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45)"
|
|
1069
|
+
},
|
|
1070
|
+
"usage": "Shadow under glass surfaces."
|
|
951
1071
|
}
|
|
952
1072
|
],
|
|
953
1073
|
"component": [
|
|
@@ -995,6 +1115,19 @@
|
|
|
995
1115
|
"name": "panel-gap",
|
|
996
1116
|
"value": "{space-4}",
|
|
997
1117
|
"usage": "Gap between panels in a grid: the hairline in Pro, air between cards in Halo."
|
|
1118
|
+
},
|
|
1119
|
+
{
|
|
1120
|
+
"name": "glass-filter",
|
|
1121
|
+
"value": {
|
|
1122
|
+
"light": "blur(24px) saturate(180%) brightness(1.05)",
|
|
1123
|
+
"dark": "blur(24px) saturate(160%) brightness(0.85)"
|
|
1124
|
+
},
|
|
1125
|
+
"usage": "backdrop-filter of glass surfaces: blur, colour lift and a nudge towards the theme's side."
|
|
1126
|
+
},
|
|
1127
|
+
{
|
|
1128
|
+
"name": "glass-tint",
|
|
1129
|
+
"value": "62%",
|
|
1130
|
+
"usage": "How strongly a tint (StatTile, tinted Card) colours the glass it sits on."
|
|
998
1131
|
}
|
|
999
1132
|
],
|
|
1000
1133
|
"font": [
|
|
@@ -1305,6 +1438,26 @@
|
|
|
1305
1438
|
"value": "55ms",
|
|
1306
1439
|
"usage": "Delay added per item in a staggered entrance (cards, rows, bars)."
|
|
1307
1440
|
},
|
|
1441
|
+
{
|
|
1442
|
+
"name": "dur-exit",
|
|
1443
|
+
"value": "160ms",
|
|
1444
|
+
"usage": "Overlays leaving: menus, popovers, dialogs, drawers, toasts."
|
|
1445
|
+
},
|
|
1446
|
+
{
|
|
1447
|
+
"name": "motion-time",
|
|
1448
|
+
"value": "1",
|
|
1449
|
+
"usage": "Multiplier for choreography delays (when the dock, side panels and chart data come in)."
|
|
1450
|
+
},
|
|
1451
|
+
{
|
|
1452
|
+
"name": "motion-travel",
|
|
1453
|
+
"value": "1",
|
|
1454
|
+
"usage": "Multiplier for how far things travel when they come in."
|
|
1455
|
+
},
|
|
1456
|
+
{
|
|
1457
|
+
"name": "motion-blur",
|
|
1458
|
+
"value": "0px",
|
|
1459
|
+
"usage": "Blur things come out of as they rise (expressive Halo only)."
|
|
1460
|
+
},
|
|
1308
1461
|
{
|
|
1309
1462
|
"name": "ease-out",
|
|
1310
1463
|
"value": "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
@@ -1451,5 +1604,29 @@
|
|
|
1451
1604
|
"density-font-size": "14px",
|
|
1452
1605
|
"density-line-height": "20px"
|
|
1453
1606
|
}
|
|
1607
|
+
},
|
|
1608
|
+
"motionLevels": {
|
|
1609
|
+
"off": {
|
|
1610
|
+
"duration-fast": "0ms",
|
|
1611
|
+
"duration-base": "0ms",
|
|
1612
|
+
"dur-fast": "0ms",
|
|
1613
|
+
"dur-base": "0ms",
|
|
1614
|
+
"dur-enter": "0ms",
|
|
1615
|
+
"dur-slow": "0ms",
|
|
1616
|
+
"dur-exit": "0ms",
|
|
1617
|
+
"stagger-step": "0ms",
|
|
1618
|
+
"motion-time": "0",
|
|
1619
|
+
"motion-travel": "0",
|
|
1620
|
+
"motion-blur": "0px"
|
|
1621
|
+
},
|
|
1622
|
+
"expressive": {
|
|
1623
|
+
"dur-enter": "760ms",
|
|
1624
|
+
"dur-slow": "1300ms",
|
|
1625
|
+
"dur-exit": "220ms",
|
|
1626
|
+
"stagger-step": "90ms",
|
|
1627
|
+
"motion-time": "1.4",
|
|
1628
|
+
"motion-travel": "1.7",
|
|
1629
|
+
"motion-blur": "8px"
|
|
1630
|
+
}
|
|
1454
1631
|
}
|
|
1455
1632
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twentyfirstmedia/halo",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Halo: soft, rounded, light-first. Same components and props as Pro.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Twentyfirst Media (https://twentyfirst.media)",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"dist"
|
|
51
51
|
],
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@twentyfirstmedia/ui-core": "0.
|
|
53
|
+
"@twentyfirstmedia/ui-core": "0.2.1"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": ">=18.3",
|