@federball/components 0.0.26 → 0.0.27
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/icons/UserTypeIcon.d.ts.map +1 -1
- package/dist/icons/UserTypeIcon.js +4 -2
- package/dist/icons/UserTypeIcon.js.map +1 -1
- package/dist/labels.d.ts +1 -1
- package/dist/labels.d.ts.map +1 -1
- package/dist/labels.js +4 -2
- package/dist/labels.js.map +1 -1
- package/dist/styles.css +1289 -1114
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -22,11 +22,23 @@
|
|
|
22
22
|
--text-base--line-height: calc(1.5 / 1);
|
|
23
23
|
--text-lg: 1.125rem;
|
|
24
24
|
--text-lg--line-height: calc(1.75 / 1.125);
|
|
25
|
+
--text-xl: 1.25rem;
|
|
26
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
27
|
+
--text-2xl: 1.5rem;
|
|
28
|
+
--text-2xl--line-height: calc(2 / 1.5);
|
|
29
|
+
--text-3xl: 1.875rem;
|
|
30
|
+
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
31
|
+
--text-4xl: 2.25rem;
|
|
32
|
+
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
33
|
+
--font-weight-normal: 400;
|
|
25
34
|
--font-weight-medium: 500;
|
|
26
35
|
--font-weight-semibold: 600;
|
|
36
|
+
--font-weight-bold: 700;
|
|
37
|
+
--tracking-tight: -0.025em;
|
|
38
|
+
--leading-relaxed: 1.625;
|
|
39
|
+
--radius-xl: calc(var(--radius) * 1.5);
|
|
27
40
|
--radius-2xl: calc(var(--radius) * 2);
|
|
28
41
|
--radius-3xl: calc(var(--radius) * 3);
|
|
29
|
-
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
30
42
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
31
43
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
32
44
|
--blur-md: 12px;
|
|
@@ -34,80 +46,9 @@
|
|
|
34
46
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
35
47
|
--default-font-family: var(--font-sans);
|
|
36
48
|
--default-mono-font-family: var(--font-mono);
|
|
37
|
-
--color-background: var(--background);
|
|
38
|
-
--color-foreground: var(--foreground);
|
|
39
|
-
--color-accent: var(--accent);
|
|
40
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
41
|
-
--color-focus: var(--focus);
|
|
42
|
-
--color-default: var(--default);
|
|
43
|
-
--color-default-foreground: var(--default-foreground);
|
|
44
|
-
--color-success: var(--success);
|
|
45
|
-
--color-success-foreground: var(--success-foreground);
|
|
46
|
-
--color-warning: var(--warning);
|
|
47
|
-
--color-warning-foreground: var(--warning-foreground);
|
|
48
|
-
--color-danger: var(--danger);
|
|
49
|
-
--color-danger-foreground: var(--danger-foreground);
|
|
50
49
|
--shadow-surface: var(--surface-shadow);
|
|
51
50
|
--shadow-overlay: var(--overlay-shadow);
|
|
52
|
-
--color-field-border: var(--field-border, var(--border));
|
|
53
51
|
--border-width-field: var(--field-border-width, var(--border-width));
|
|
54
|
-
--color-default-hover: var(--default);
|
|
55
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
56
|
-
--color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
57
|
-
}
|
|
58
|
-
--color-accent-hover: var(--accent);
|
|
59
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
60
|
-
--color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
61
|
-
}
|
|
62
|
-
--color-danger-hover: var(--danger);
|
|
63
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
64
|
-
--color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
|
|
65
|
-
}
|
|
66
|
-
--color-field-focus: var(--field-background, var(--default));
|
|
67
|
-
--color-field-border-hover: var(--field-border, var(--border));
|
|
68
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
69
|
-
--color-field-border-hover: color-mix(
|
|
70
|
-
in oklab,
|
|
71
|
-
var(--field-border, var(--border)) 88%,
|
|
72
|
-
var(--field-foreground, var(--foreground)) 10%
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
--color-field-border-focus: var(--field-border, var(--border));
|
|
76
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
77
|
-
--color-field-border-focus: color-mix(
|
|
78
|
-
in oklab,
|
|
79
|
-
var(--field-border, var(--border)) 74%,
|
|
80
|
-
var(--field-foreground, var(--foreground)) 22%
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
--color-accent-soft: var(--accent);
|
|
84
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
85
|
-
--color-accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
86
|
-
}
|
|
87
|
-
--color-accent-soft-foreground: var(--accent);
|
|
88
|
-
--color-accent-soft-hover: var(--accent);
|
|
89
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
90
|
-
--color-accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
|
|
91
|
-
}
|
|
92
|
-
--color-danger-soft: var(--danger);
|
|
93
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
94
|
-
--color-danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
95
|
-
}
|
|
96
|
-
--color-danger-soft-foreground: var(--danger);
|
|
97
|
-
--color-danger-soft-hover: var(--danger);
|
|
98
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
99
|
-
--color-danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
|
|
100
|
-
}
|
|
101
|
-
--color-warning-soft: var(--warning);
|
|
102
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
103
|
-
--color-warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
|
|
104
|
-
}
|
|
105
|
-
--color-warning-soft-foreground: var(--warning);
|
|
106
|
-
--color-success-soft: var(--success);
|
|
107
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
108
|
-
--color-success-soft: color-mix(in oklab, var(--success) 15%, transparent);
|
|
109
|
-
}
|
|
110
|
-
--color-success-soft-foreground: var(--success);
|
|
111
52
|
--ease-smooth: ease;
|
|
112
53
|
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
113
54
|
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
@@ -518,6 +459,23 @@
|
|
|
518
459
|
pointer-events: none;
|
|
519
460
|
}
|
|
520
461
|
}
|
|
462
|
+
@layer base {
|
|
463
|
+
[data-scrollbar="thin"] {
|
|
464
|
+
--scrollbar-width: thin;
|
|
465
|
+
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
466
|
+
--scrollbar-gutter: auto;
|
|
467
|
+
}
|
|
468
|
+
[data-scrollbar="default"] {
|
|
469
|
+
--scrollbar-width: auto;
|
|
470
|
+
--scrollbar-color: auto;
|
|
471
|
+
--scrollbar-gutter: auto;
|
|
472
|
+
}
|
|
473
|
+
[data-scrollbar="none"] {
|
|
474
|
+
--scrollbar-width: none;
|
|
475
|
+
--scrollbar-color: auto;
|
|
476
|
+
--scrollbar-gutter: auto;
|
|
477
|
+
}
|
|
478
|
+
}
|
|
521
479
|
@layer components {
|
|
522
480
|
.close-button {
|
|
523
481
|
position: relative;
|
|
@@ -585,10 +543,7 @@
|
|
|
585
543
|
color: var(--muted);
|
|
586
544
|
@media (hover: hover) {
|
|
587
545
|
&:hover, &[data-hovered="true"] {
|
|
588
|
-
background-color: var(--default);
|
|
589
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
590
|
-
background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
591
|
-
}
|
|
546
|
+
background-color: var(--default-hover);
|
|
592
547
|
}
|
|
593
548
|
}
|
|
594
549
|
&:active, &[data-pressed="true"] {
|
|
@@ -741,7 +696,7 @@
|
|
|
741
696
|
left: calc(var(--spacing) * 0);
|
|
742
697
|
height: 1px;
|
|
743
698
|
width: 100%;
|
|
744
|
-
border-radius: calc(
|
|
699
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
745
700
|
background-color: var(--separator);
|
|
746
701
|
}
|
|
747
702
|
.accordion__item:last-child::after {
|
|
@@ -781,9 +736,9 @@
|
|
|
781
736
|
}
|
|
782
737
|
@media (hover: hover) {
|
|
783
738
|
&:hover:not([aria-expanded="true"]), &[data-hovered="true"]:not([aria-expanded="true"]) {
|
|
784
|
-
background-color: var(--
|
|
739
|
+
background-color: var(--foreground);
|
|
785
740
|
@supports (color: color-mix(in lab, red, red)) {
|
|
786
|
-
background-color: color-mix(in oklab, var(--
|
|
741
|
+
background-color: color-mix(in oklab, var(--foreground) 3%, transparent 90%);
|
|
787
742
|
}
|
|
788
743
|
}
|
|
789
744
|
}
|
|
@@ -829,8 +784,8 @@
|
|
|
829
784
|
}
|
|
830
785
|
}
|
|
831
786
|
.accordion--surface {
|
|
832
|
-
border-radius: calc(var(--radius) * 3);
|
|
833
787
|
background-color: var(--surface);
|
|
788
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
834
789
|
.accordion__trigger {
|
|
835
790
|
@media (hover: hover) {
|
|
836
791
|
&:hover:not([aria-expanded="true"]), &[data-hovered="true"]:not([aria-expanded="true"]) {
|
|
@@ -851,12 +806,12 @@
|
|
|
851
806
|
width: 94%;
|
|
852
807
|
}
|
|
853
808
|
&:first-child [data-slot="accordion-trigger"] {
|
|
854
|
-
border-top-left-radius:
|
|
855
|
-
border-top-right-radius:
|
|
809
|
+
border-top-left-radius: min(32px, var(--radius-3xl));
|
|
810
|
+
border-top-right-radius: min(32px, var(--radius-3xl));
|
|
856
811
|
}
|
|
857
812
|
&:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"])) [data-slot="accordion-trigger"] {
|
|
858
|
-
border-bottom-
|
|
859
|
-
border-bottom-
|
|
813
|
+
border-bottom-left-radius: min(32px, var(--radius-3xl));
|
|
814
|
+
border-bottom-right-radius: min(32px, var(--radius-3xl));
|
|
860
815
|
}
|
|
861
816
|
}
|
|
862
817
|
.breadcrumbs {
|
|
@@ -911,6 +866,7 @@
|
|
|
911
866
|
}
|
|
912
867
|
.disclosure__trigger {
|
|
913
868
|
cursor: var(--cursor-interactive);
|
|
869
|
+
display: inline-block;
|
|
914
870
|
-webkit-tap-highlight-color: transparent;
|
|
915
871
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
916
872
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -997,19 +953,12 @@
|
|
|
997
953
|
--tw-font-weight: var(--font-weight-medium);
|
|
998
954
|
font-weight: var(--font-weight-medium);
|
|
999
955
|
color: var(--link);
|
|
1000
|
-
text-decoration-line:
|
|
1001
|
-
text-decoration-color: var(--
|
|
1002
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1003
|
-
text-decoration-color: color-mix(
|
|
1004
|
-
in oklab,
|
|
1005
|
-
var(--surface) 81%,
|
|
1006
|
-
var(--surface-foreground) 19%
|
|
1007
|
-
);
|
|
1008
|
-
}
|
|
956
|
+
text-decoration-line: none;
|
|
957
|
+
text-decoration-color: var(--separator-tertiary);
|
|
1009
958
|
text-decoration-thickness: 1.5px;
|
|
1010
959
|
text-underline-offset: 4px;
|
|
1011
960
|
-webkit-tap-highlight-color: transparent;
|
|
1012
|
-
transition: color 100ms var(--ease-smooth),
|
|
961
|
+
transition: color 100ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out), opacity 100ms var(--ease-out);
|
|
1013
962
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
1014
963
|
transition-property: none;
|
|
1015
964
|
&::before, &::after {
|
|
@@ -1027,12 +976,23 @@
|
|
|
1027
976
|
cursor: var(--cursor-interactive);
|
|
1028
977
|
@media (hover: hover) {
|
|
1029
978
|
&:hover, &[data-hovered="true"] {
|
|
979
|
+
text-decoration-line: underline;
|
|
1030
980
|
text-decoration-color: var(--muted);
|
|
981
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
982
|
+
text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent);
|
|
983
|
+
}
|
|
1031
984
|
.link__icon {
|
|
1032
985
|
opacity: 100%;
|
|
1033
986
|
}
|
|
1034
987
|
}
|
|
1035
988
|
}
|
|
989
|
+
&:active, &[data-pressed="true"] {
|
|
990
|
+
text-decoration-line: underline;
|
|
991
|
+
text-decoration-color: var(--muted);
|
|
992
|
+
.link__icon {
|
|
993
|
+
opacity: 100%;
|
|
994
|
+
}
|
|
995
|
+
}
|
|
1036
996
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
1037
997
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1038
998
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -1167,9 +1127,9 @@
|
|
|
1167
1127
|
}
|
|
1168
1128
|
}
|
|
1169
1129
|
--pagination-link-bg: transparent;
|
|
1170
|
-
--pagination-link-bg-hover: var(--
|
|
1171
|
-
--pagination-link-bg-pressed: var(--
|
|
1172
|
-
--pagination-link-fg: var(--
|
|
1130
|
+
--pagination-link-bg-hover: var(--default-hover);
|
|
1131
|
+
--pagination-link-bg-pressed: var(--default-hover);
|
|
1132
|
+
--pagination-link-fg: var(--default-foreground);
|
|
1173
1133
|
background-color: var(--pagination-link-bg);
|
|
1174
1134
|
color: var(--pagination-link-fg);
|
|
1175
1135
|
&:focus-visible, &[data-focus-visible="true"] {
|
|
@@ -1198,9 +1158,9 @@
|
|
|
1198
1158
|
transform: scale(0.97);
|
|
1199
1159
|
}
|
|
1200
1160
|
&[data-active="true"] {
|
|
1201
|
-
--pagination-link-bg: var(--
|
|
1202
|
-
--pagination-link-bg-hover: var(--
|
|
1203
|
-
--pagination-link-bg-pressed: var(--
|
|
1161
|
+
--pagination-link-bg: var(--default);
|
|
1162
|
+
--pagination-link-bg-hover: var(--default-hover);
|
|
1163
|
+
--pagination-link-bg-pressed: var(--default-hover);
|
|
1204
1164
|
}
|
|
1205
1165
|
}
|
|
1206
1166
|
.pagination__ellipsis {
|
|
@@ -1307,7 +1267,7 @@
|
|
|
1307
1267
|
display: inline-flex;
|
|
1308
1268
|
background-color: var(--default);
|
|
1309
1269
|
padding: calc(var(--spacing) * 1);
|
|
1310
|
-
border-radius: calc(var(--radius
|
|
1270
|
+
border-radius: calc(var(--radius) * 2.5);
|
|
1311
1271
|
&[data-orientation="horizontal"] {
|
|
1312
1272
|
width: 100%;
|
|
1313
1273
|
flex-direction: row;
|
|
@@ -1387,11 +1347,11 @@
|
|
|
1387
1347
|
}
|
|
1388
1348
|
}
|
|
1389
1349
|
.tabs__separator {
|
|
1350
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
1390
1351
|
background-color: var(--muted);
|
|
1391
1352
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1392
1353
|
background-color: color-mix(in oklab, var(--muted) 25%, transparent);
|
|
1393
1354
|
}
|
|
1394
|
-
border-radius: 4px;
|
|
1395
1355
|
position: absolute;
|
|
1396
1356
|
pointer-events: none;
|
|
1397
1357
|
transition: opacity 150ms var(--ease-smooth);
|
|
@@ -1469,7 +1429,7 @@
|
|
|
1469
1429
|
}
|
|
1470
1430
|
}
|
|
1471
1431
|
.tabs--secondary {
|
|
1472
|
-
.tabs__list {
|
|
1432
|
+
> .tabs__list-container > .tabs__list {
|
|
1473
1433
|
background-color: transparent;
|
|
1474
1434
|
padding: calc(var(--spacing) * 0);
|
|
1475
1435
|
border-radius: 0;
|
|
@@ -1477,13 +1437,13 @@
|
|
|
1477
1437
|
border-bottom-style: var(--tw-border-style);
|
|
1478
1438
|
border-bottom-width: 1px;
|
|
1479
1439
|
border-color: var(--border);
|
|
1440
|
+
scrollbar-width: none;
|
|
1441
|
+
scrollbar-color: auto;
|
|
1442
|
+
scrollbar-gutter: auto;
|
|
1443
|
+
-ms-overflow-style: none;
|
|
1480
1444
|
max-width: 100%;
|
|
1481
1445
|
overflow-x: auto;
|
|
1482
1446
|
overflow-y: clip;
|
|
1483
|
-
scrollbar-width: none;
|
|
1484
|
-
&::-webkit-scrollbar {
|
|
1485
|
-
display: none;
|
|
1486
|
-
}
|
|
1487
1447
|
}
|
|
1488
1448
|
&[data-orientation="vertical"] {
|
|
1489
1449
|
border-left-style: var(--tw-border-style);
|
|
@@ -1491,26 +1451,26 @@
|
|
|
1491
1451
|
border-color: var(--border);
|
|
1492
1452
|
}
|
|
1493
1453
|
}
|
|
1494
|
-
.tabs__tab {
|
|
1454
|
+
> .tabs__list-container .tabs__tab {
|
|
1495
1455
|
border-radius: 0;
|
|
1496
1456
|
&[data-selected="true"] {
|
|
1497
1457
|
color: var(--foreground);
|
|
1498
1458
|
}
|
|
1499
1459
|
}
|
|
1500
|
-
.tabs__separator {
|
|
1460
|
+
> .tabs__list-container .tabs__separator {
|
|
1501
1461
|
display: none;
|
|
1502
1462
|
}
|
|
1503
|
-
.tabs__indicator {
|
|
1463
|
+
> .tabs__list-container .tabs__indicator {
|
|
1504
1464
|
background-color: var(--accent);
|
|
1505
1465
|
box-shadow: none;
|
|
1506
1466
|
border-radius: 0;
|
|
1507
1467
|
}
|
|
1508
|
-
&[data-orientation="horizontal"] .tabs__indicator {
|
|
1468
|
+
&[data-orientation="horizontal"] > .tabs__list-container .tabs__indicator {
|
|
1509
1469
|
top: auto;
|
|
1510
1470
|
bottom: 0;
|
|
1511
1471
|
height: 2px;
|
|
1512
1472
|
}
|
|
1513
|
-
&[data-orientation="vertical"] .tabs__indicator {
|
|
1473
|
+
&[data-orientation="vertical"] > .tabs__list-container .tabs__indicator {
|
|
1514
1474
|
left: 0;
|
|
1515
1475
|
top: 0;
|
|
1516
1476
|
width: 2px;
|
|
@@ -1636,48 +1596,48 @@
|
|
|
1636
1596
|
}
|
|
1637
1597
|
}
|
|
1638
1598
|
.button--primary {
|
|
1639
|
-
--button-bg: var(--
|
|
1640
|
-
--button-bg-hover: var(--
|
|
1641
|
-
--button-bg-pressed: var(--
|
|
1642
|
-
--button-fg: var(--
|
|
1599
|
+
--button-bg: var(--accent);
|
|
1600
|
+
--button-bg-hover: var(--accent-hover);
|
|
1601
|
+
--button-bg-pressed: var(--accent-hover);
|
|
1602
|
+
--button-fg: var(--accent-foreground);
|
|
1643
1603
|
}
|
|
1644
1604
|
.button--secondary {
|
|
1645
|
-
--button-bg: var(--
|
|
1646
|
-
--button-bg-hover: var(--
|
|
1647
|
-
--button-bg-pressed: var(--
|
|
1648
|
-
--button-fg: var(--
|
|
1605
|
+
--button-bg: var(--default);
|
|
1606
|
+
--button-bg-hover: var(--default-hover);
|
|
1607
|
+
--button-bg-pressed: var(--default-hover);
|
|
1608
|
+
--button-fg: var(--accent-soft-foreground);
|
|
1649
1609
|
}
|
|
1650
1610
|
.button--tertiary {
|
|
1651
|
-
--button-bg: var(--
|
|
1652
|
-
--button-bg-hover: var(--
|
|
1653
|
-
--button-bg-pressed: var(--
|
|
1611
|
+
--button-bg: var(--default);
|
|
1612
|
+
--button-bg-hover: var(--default-hover);
|
|
1613
|
+
--button-bg-pressed: var(--default-hover);
|
|
1654
1614
|
}
|
|
1655
1615
|
.button--ghost, .button--outline {
|
|
1656
1616
|
--button-bg: transparent;
|
|
1657
|
-
--button-bg-hover: var(--
|
|
1658
|
-
--button-bg-pressed: var(--
|
|
1659
|
-
--button-fg: var(--
|
|
1617
|
+
--button-bg-hover: var(--default);
|
|
1618
|
+
--button-bg-pressed: var(--default);
|
|
1619
|
+
--button-fg: var(--default-foreground);
|
|
1660
1620
|
}
|
|
1661
1621
|
.button--outline {
|
|
1662
1622
|
border-style: var(--tw-border-style);
|
|
1663
1623
|
border-width: 1px;
|
|
1664
1624
|
border-color: var(--border);
|
|
1665
|
-
--button-bg-hover: var(--
|
|
1625
|
+
--button-bg-hover: var(--default);
|
|
1666
1626
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1667
|
-
--button-bg-hover: color-mix(in srgb, var(--
|
|
1627
|
+
--button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent);
|
|
1668
1628
|
}
|
|
1669
1629
|
}
|
|
1670
1630
|
.button--danger {
|
|
1671
|
-
--button-bg: var(--
|
|
1672
|
-
--button-bg-hover: var(--
|
|
1673
|
-
--button-bg-pressed: var(--
|
|
1674
|
-
--button-fg: var(--
|
|
1631
|
+
--button-bg: var(--danger);
|
|
1632
|
+
--button-bg-hover: var(--danger-hover);
|
|
1633
|
+
--button-bg-pressed: var(--danger-hover);
|
|
1634
|
+
--button-fg: var(--danger-foreground);
|
|
1675
1635
|
}
|
|
1676
1636
|
.button--danger-soft {
|
|
1677
|
-
--button-bg: var(--
|
|
1678
|
-
--button-bg-hover: var(--
|
|
1679
|
-
--button-bg-pressed: var(--
|
|
1680
|
-
--button-fg: var(--
|
|
1637
|
+
--button-bg: var(--danger-soft);
|
|
1638
|
+
--button-bg-hover: var(--danger-soft-hover);
|
|
1639
|
+
--button-bg-pressed: var(--danger-soft-hover);
|
|
1640
|
+
--button-fg: var(--danger-soft-foreground);
|
|
1681
1641
|
}
|
|
1682
1642
|
.button--icon-only {
|
|
1683
1643
|
width: calc(var(--spacing) * 10);
|
|
@@ -1747,9 +1707,9 @@
|
|
|
1747
1707
|
--tw-ring-inset: inset;
|
|
1748
1708
|
}
|
|
1749
1709
|
.button-group__separator {
|
|
1710
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
1750
1711
|
background-color: currentcolor;
|
|
1751
1712
|
opacity: 15%;
|
|
1752
|
-
border-radius: 4px;
|
|
1753
1713
|
position: absolute;
|
|
1754
1714
|
pointer-events: none;
|
|
1755
1715
|
transition: opacity 150ms var(--ease-smooth);
|
|
@@ -1849,14 +1809,14 @@
|
|
|
1849
1809
|
}
|
|
1850
1810
|
}
|
|
1851
1811
|
cursor: var(--cursor-interactive);
|
|
1852
|
-
--toggle-button-bg: var(--
|
|
1853
|
-
--toggle-button-bg-hover: var(--
|
|
1854
|
-
--toggle-button-bg-pressed: var(--
|
|
1812
|
+
--toggle-button-bg: var(--default);
|
|
1813
|
+
--toggle-button-bg-hover: var(--default-hover);
|
|
1814
|
+
--toggle-button-bg-pressed: var(--default-hover);
|
|
1855
1815
|
--toggle-button-fg: currentColor;
|
|
1856
|
-
--toggle-button-bg-selected: var(--
|
|
1857
|
-
--toggle-button-bg-selected-hover: var(--
|
|
1858
|
-
--toggle-button-bg-selected-pressed: var(--
|
|
1859
|
-
--toggle-button-fg-selected: var(--
|
|
1816
|
+
--toggle-button-bg-selected: var(--accent-soft);
|
|
1817
|
+
--toggle-button-bg-selected-hover: var(--accent-soft-hover);
|
|
1818
|
+
--toggle-button-bg-selected-pressed: var(--accent-soft-hover);
|
|
1819
|
+
--toggle-button-fg-selected: var(--accent-soft-foreground);
|
|
1860
1820
|
background-color: var(--toggle-button-bg);
|
|
1861
1821
|
color: var(--toggle-button-fg);
|
|
1862
1822
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
@@ -1939,15 +1899,15 @@
|
|
|
1939
1899
|
}
|
|
1940
1900
|
}
|
|
1941
1901
|
.toggle-button--default {
|
|
1942
|
-
--toggle-button-bg: var(--
|
|
1943
|
-
--toggle-button-bg-hover: var(--
|
|
1944
|
-
--toggle-button-bg-pressed: var(--
|
|
1902
|
+
--toggle-button-bg: var(--default);
|
|
1903
|
+
--toggle-button-bg-hover: var(--default-hover);
|
|
1904
|
+
--toggle-button-bg-pressed: var(--default-hover);
|
|
1945
1905
|
}
|
|
1946
1906
|
.toggle-button--ghost {
|
|
1947
1907
|
--toggle-button-bg: transparent;
|
|
1948
|
-
--toggle-button-bg-hover: var(--
|
|
1949
|
-
--toggle-button-bg-pressed: var(--
|
|
1950
|
-
--toggle-button-fg: var(--
|
|
1908
|
+
--toggle-button-bg-hover: var(--default);
|
|
1909
|
+
--toggle-button-bg-pressed: var(--default);
|
|
1910
|
+
--toggle-button-fg: var(--default-foreground);
|
|
1951
1911
|
}
|
|
1952
1912
|
.toggle-button--icon-only {
|
|
1953
1913
|
width: calc(var(--spacing) * 10);
|
|
@@ -2021,9 +1981,9 @@
|
|
|
2021
1981
|
flex: 1;
|
|
2022
1982
|
}
|
|
2023
1983
|
.toggle-button-group__separator {
|
|
1984
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
2024
1985
|
background-color: currentcolor;
|
|
2025
1986
|
opacity: 15%;
|
|
2026
|
-
border-radius: 4px;
|
|
2027
1987
|
position: absolute;
|
|
2028
1988
|
pointer-events: none;
|
|
2029
1989
|
transition: opacity 150ms var(--ease-smooth);
|
|
@@ -2088,7 +2048,7 @@
|
|
|
2088
2048
|
}
|
|
2089
2049
|
}
|
|
2090
2050
|
.toolbar--attached {
|
|
2091
|
-
border-radius: calc(
|
|
2051
|
+
border-radius: calc(var(--radius) * 3);
|
|
2092
2052
|
background-color: var(--surface);
|
|
2093
2053
|
padding: calc(var(--spacing) * 1);
|
|
2094
2054
|
--tw-shadow: var(--overlay-shadow);
|
|
@@ -2100,6 +2060,7 @@
|
|
|
2100
2060
|
gap: calc(var(--spacing) * 1);
|
|
2101
2061
|
}
|
|
2102
2062
|
.dropdown__trigger {
|
|
2063
|
+
display: inline-block;
|
|
2103
2064
|
--tw-outline-style: none;
|
|
2104
2065
|
outline-style: none;
|
|
2105
2066
|
transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
@@ -2148,14 +2109,17 @@
|
|
|
2148
2109
|
scroll-padding-block: calc(var(--spacing) * 1);
|
|
2149
2110
|
overflow-y: auto;
|
|
2150
2111
|
overscroll-behavior: contain;
|
|
2151
|
-
border-radius: calc(var(--radius) * 3);
|
|
2152
2112
|
background-color: var(--overlay);
|
|
2153
2113
|
padding: calc(var(--spacing) * 0);
|
|
2154
2114
|
font-size: var(--text-sm);
|
|
2155
2115
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
2116
|
+
scrollbar-width: var(--scrollbar-width);
|
|
2117
|
+
scrollbar-color: var(--scrollbar-color);
|
|
2118
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
2156
2119
|
@media (width >= 48rem) {
|
|
2157
2120
|
min-width: calc(var(--spacing) * 55);
|
|
2158
2121
|
}
|
|
2122
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
2159
2123
|
box-shadow: var(--shadow-overlay);
|
|
2160
2124
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
2161
2125
|
--tw-outline-style: none;
|
|
@@ -2195,6 +2159,9 @@
|
|
|
2195
2159
|
--tw-exit-opacity: 0;
|
|
2196
2160
|
}
|
|
2197
2161
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
2162
|
+
transition-property: opacity,transform;
|
|
2163
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
2164
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
2198
2165
|
will-change: opacity,transform;
|
|
2199
2166
|
}
|
|
2200
2167
|
& [data-slot="popover-overlay-arrow"] {
|
|
@@ -2274,7 +2241,7 @@
|
|
|
2274
2241
|
user-select: none;
|
|
2275
2242
|
}
|
|
2276
2243
|
&:has(.list-box-item__indicator) {
|
|
2277
|
-
padding-
|
|
2244
|
+
padding-inline-end: calc(var(--spacing) * 7);
|
|
2278
2245
|
}
|
|
2279
2246
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
2280
2247
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -2303,8 +2270,8 @@
|
|
|
2303
2270
|
}
|
|
2304
2271
|
.list-box-item__indicator {
|
|
2305
2272
|
position: absolute;
|
|
2273
|
+
inset-inline-end: calc(var(--spacing) * 2);
|
|
2306
2274
|
top: calc(1 / 2 * 100%);
|
|
2307
|
-
right: calc(var(--spacing) * 2);
|
|
2308
2275
|
display: flex;
|
|
2309
2276
|
width: calc(var(--spacing) * 4);
|
|
2310
2277
|
height: calc(var(--spacing) * 4);
|
|
@@ -2448,11 +2415,11 @@
|
|
|
2448
2415
|
height: calc(var(--spacing) * 3.5);
|
|
2449
2416
|
}
|
|
2450
2417
|
&:has(.menu-item__indicator) {
|
|
2451
|
-
padding-
|
|
2418
|
+
padding-inline-start: calc(var(--spacing) * 7);
|
|
2452
2419
|
}
|
|
2453
2420
|
&[data-has-submenu="true"]:has(.menu-item__indicator) {
|
|
2454
|
-
padding-
|
|
2455
|
-
padding-
|
|
2421
|
+
padding-inline-start: calc(var(--spacing) * 2);
|
|
2422
|
+
padding-inline-end: calc(var(--spacing) * 7);
|
|
2456
2423
|
}
|
|
2457
2424
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
2458
2425
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -2507,8 +2474,8 @@
|
|
|
2507
2474
|
}
|
|
2508
2475
|
.menu-item__indicator {
|
|
2509
2476
|
position: absolute;
|
|
2477
|
+
inset-inline-start: calc(var(--spacing) * 2);
|
|
2510
2478
|
top: calc(1 / 2 * 100%);
|
|
2511
|
-
left: calc(var(--spacing) * 2);
|
|
2512
2479
|
display: flex;
|
|
2513
2480
|
width: calc(var(--spacing) * 4);
|
|
2514
2481
|
height: calc(var(--spacing) * 4);
|
|
@@ -2538,8 +2505,8 @@
|
|
|
2538
2505
|
}
|
|
2539
2506
|
}
|
|
2540
2507
|
.menu-item[data-has-submenu="true"] & {
|
|
2541
|
-
|
|
2542
|
-
|
|
2508
|
+
inset-inline-start: auto;
|
|
2509
|
+
inset-inline-end: calc(var(--spacing) * 2);
|
|
2543
2510
|
}
|
|
2544
2511
|
[data-slot="menu-item-indicator--checkmark"] {
|
|
2545
2512
|
width: calc(var(--spacing) * 2.5);
|
|
@@ -2652,7 +2619,7 @@
|
|
|
2652
2619
|
display: inline-flex;
|
|
2653
2620
|
align-items: center;
|
|
2654
2621
|
gap: calc(var(--spacing) * 1);
|
|
2655
|
-
border-radius: calc(
|
|
2622
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
2656
2623
|
--tw-font-weight: var(--font-weight-medium);
|
|
2657
2624
|
font-weight: var(--font-weight-medium);
|
|
2658
2625
|
-webkit-user-select: none;
|
|
@@ -2702,33 +2669,28 @@
|
|
|
2702
2669
|
--tw-ring-offset-width: var(--ring-offset-width);
|
|
2703
2670
|
}
|
|
2704
2671
|
.tag:is([data-selected="true"], [aria-selected="true"]) {
|
|
2705
|
-
background-color: var(--accent);
|
|
2706
|
-
|
|
2707
|
-
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
2708
|
-
}
|
|
2709
|
-
color: var(--accent);
|
|
2672
|
+
background-color: var(--accent-soft);
|
|
2673
|
+
color: var(--accent-soft-foreground);
|
|
2710
2674
|
@media (hover: hover) {
|
|
2711
2675
|
&:is(:hover, [data-hovered="true"]) {
|
|
2712
|
-
background-color: var(--accent);
|
|
2713
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
2714
|
-
background-color: color-mix(in oklab, var(--accent) 20%, transparent);
|
|
2715
|
-
}
|
|
2676
|
+
background-color: var(--accent-soft-hover);
|
|
2716
2677
|
}
|
|
2717
2678
|
}
|
|
2718
2679
|
}
|
|
2719
2680
|
.tag--sm {
|
|
2720
|
-
padding-inline: calc(var(--spacing) *
|
|
2681
|
+
padding-inline: calc(var(--spacing) * 2);
|
|
2721
2682
|
padding-block: calc(var(--spacing) * 0.5);
|
|
2722
2683
|
font-size: var(--text-xs);
|
|
2723
2684
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
2724
2685
|
}
|
|
2725
2686
|
.tag--md {
|
|
2726
|
-
padding-inline: calc(var(--spacing) *
|
|
2687
|
+
padding-inline: calc(var(--spacing) * 2);
|
|
2727
2688
|
padding-block: calc(var(--spacing) * 1);
|
|
2728
2689
|
font-size: var(--text-xs);
|
|
2729
2690
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
2730
2691
|
}
|
|
2731
2692
|
.tag--lg {
|
|
2693
|
+
border-radius: calc(var(--radius) * 2);
|
|
2732
2694
|
padding-inline: calc(var(--spacing) * 2.5);
|
|
2733
2695
|
padding-block: calc(var(--spacing) * 1.5);
|
|
2734
2696
|
font-size: var(--text-sm);
|
|
@@ -2739,10 +2701,7 @@
|
|
|
2739
2701
|
color: var(--default-foreground);
|
|
2740
2702
|
@media (hover: hover) {
|
|
2741
2703
|
&:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
|
|
2742
|
-
background-color: var(--default);
|
|
2743
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
2744
|
-
background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
2745
|
-
}
|
|
2704
|
+
background-color: var(--default-hover);
|
|
2746
2705
|
}
|
|
2747
2706
|
}
|
|
2748
2707
|
}
|
|
@@ -2751,10 +2710,7 @@
|
|
|
2751
2710
|
color: var(--surface-foreground);
|
|
2752
2711
|
@media (hover: hover) {
|
|
2753
2712
|
&:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
|
|
2754
|
-
background-color: var(--surface);
|
|
2755
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
2756
|
-
background-color: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
|
|
2757
|
-
}
|
|
2713
|
+
background-color: var(--surface-hover);
|
|
2758
2714
|
}
|
|
2759
2715
|
}
|
|
2760
2716
|
}
|
|
@@ -2800,7 +2756,7 @@
|
|
|
2800
2756
|
.color-area__thumb {
|
|
2801
2757
|
width: calc(var(--spacing) * 4);
|
|
2802
2758
|
height: calc(var(--spacing) * 4);
|
|
2803
|
-
border-radius: calc(
|
|
2759
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
2804
2760
|
will-change: width,height;
|
|
2805
2761
|
background-color: var(--color-area-thumb-color);
|
|
2806
2762
|
border: 3px solid white;
|
|
@@ -2898,16 +2854,15 @@
|
|
|
2898
2854
|
padding-inline: calc(var(--spacing) * 2);
|
|
2899
2855
|
padding-top: calc(var(--spacing) * 2);
|
|
2900
2856
|
padding-bottom: calc(var(--spacing) * 3);
|
|
2857
|
+
scrollbar-width: none;
|
|
2858
|
+
scrollbar-color: auto;
|
|
2859
|
+
scrollbar-gutter: auto;
|
|
2860
|
+
-ms-overflow-style: none;
|
|
2901
2861
|
box-shadow: var(--shadow-overlay);
|
|
2902
|
-
border-radius: calc(var(--radius) * 2.5);
|
|
2862
|
+
border-radius: min(32px, calc(var(--radius) * 2.5));
|
|
2903
2863
|
display: flex;
|
|
2904
2864
|
flex-direction: column;
|
|
2905
2865
|
gap: calc(var(--spacing) * 3);
|
|
2906
|
-
&::-webkit-scrollbar {
|
|
2907
|
-
display: none;
|
|
2908
|
-
}
|
|
2909
|
-
-ms-overflow-style: none;
|
|
2910
|
-
scrollbar-width: none;
|
|
2911
2866
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
2912
2867
|
--tw-outline-style: none;
|
|
2913
2868
|
outline-style: none;
|
|
@@ -2946,6 +2901,9 @@
|
|
|
2946
2901
|
--tw-exit-opacity: 0;
|
|
2947
2902
|
}
|
|
2948
2903
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
2904
|
+
transition-property: opacity,transform;
|
|
2905
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
2906
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
2949
2907
|
will-change: opacity,transform;
|
|
2950
2908
|
}
|
|
2951
2909
|
}
|
|
@@ -2992,7 +2950,7 @@
|
|
|
2992
2950
|
}
|
|
2993
2951
|
.color-slider__track {
|
|
2994
2952
|
position: relative;
|
|
2995
|
-
border-radius: calc(
|
|
2953
|
+
border-radius: calc(var(--radius) * 2);
|
|
2996
2954
|
grid-area: track;
|
|
2997
2955
|
&::before, &::after {
|
|
2998
2956
|
content: "";
|
|
@@ -3007,7 +2965,7 @@
|
|
|
3007
2965
|
cursor: grab;
|
|
3008
2966
|
align-items: center;
|
|
3009
2967
|
justify-content: center;
|
|
3010
|
-
border-radius: calc(
|
|
2968
|
+
border-radius: calc(var(--radius) * 2);
|
|
3011
2969
|
-webkit-tap-highlight-color: transparent;
|
|
3012
2970
|
border-style: var(--tw-border-style);
|
|
3013
2971
|
border-width: 3px;
|
|
@@ -3072,16 +3030,16 @@
|
|
|
3072
3030
|
width: 0.625rem;
|
|
3073
3031
|
}
|
|
3074
3032
|
&::before {
|
|
3033
|
+
border-top-left-radius: calc(var(--radius) * 2);
|
|
3034
|
+
border-bottom-left-radius: calc(var(--radius) * 2);
|
|
3075
3035
|
left: -0.625rem;
|
|
3076
|
-
border-top-left-radius: 999px;
|
|
3077
|
-
border-bottom-left-radius: 999px;
|
|
3078
3036
|
box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
|
|
3079
3037
|
background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
|
|
3080
3038
|
}
|
|
3081
3039
|
&::after {
|
|
3040
|
+
border-top-right-radius: calc(var(--radius) * 2);
|
|
3041
|
+
border-bottom-right-radius: calc(var(--radius) * 2);
|
|
3082
3042
|
right: -0.625rem;
|
|
3083
|
-
border-top-right-radius: 999px;
|
|
3084
|
-
border-bottom-right-radius: 999px;
|
|
3085
3043
|
box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
|
|
3086
3044
|
background-color: var(--track-end-color, transparent);
|
|
3087
3045
|
}
|
|
@@ -3163,7 +3121,7 @@
|
|
|
3163
3121
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
3164
3122
|
}
|
|
3165
3123
|
.color-swatch--circle {
|
|
3166
|
-
border-radius: calc(
|
|
3124
|
+
border-radius: calc(var(--radius) * 2);
|
|
3167
3125
|
}
|
|
3168
3126
|
.color-swatch--square {
|
|
3169
3127
|
border-radius: calc(var(--radius) * 0.75);
|
|
@@ -3171,18 +3129,30 @@
|
|
|
3171
3129
|
.color-swatch--xs {
|
|
3172
3130
|
width: calc(var(--spacing) * 4);
|
|
3173
3131
|
height: calc(var(--spacing) * 4);
|
|
3132
|
+
&.color-swatch--circle {
|
|
3133
|
+
border-radius: calc(var(--radius) * 1);
|
|
3134
|
+
}
|
|
3174
3135
|
}
|
|
3175
3136
|
.color-swatch--sm {
|
|
3176
3137
|
width: calc(var(--spacing) * 6);
|
|
3177
3138
|
height: calc(var(--spacing) * 6);
|
|
3139
|
+
&.color-swatch--circle {
|
|
3140
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
3141
|
+
}
|
|
3178
3142
|
}
|
|
3179
3143
|
.color-swatch--lg {
|
|
3180
3144
|
width: calc(var(--spacing) * 9);
|
|
3181
3145
|
height: calc(var(--spacing) * 9);
|
|
3146
|
+
&.color-swatch--circle {
|
|
3147
|
+
border-radius: calc(var(--radius) * 3);
|
|
3148
|
+
}
|
|
3182
3149
|
}
|
|
3183
3150
|
.color-swatch--xl {
|
|
3184
3151
|
width: calc(var(--spacing) * 10);
|
|
3185
3152
|
height: calc(var(--spacing) * 10);
|
|
3153
|
+
&.color-swatch--circle {
|
|
3154
|
+
border-radius: calc(var(--radius) * 3);
|
|
3155
|
+
}
|
|
3186
3156
|
}
|
|
3187
3157
|
.color-swatch-picker {
|
|
3188
3158
|
display: flex;
|
|
@@ -3197,7 +3167,7 @@
|
|
|
3197
3167
|
height: calc(var(--spacing) * 8);
|
|
3198
3168
|
align-items: center;
|
|
3199
3169
|
justify-content: center;
|
|
3200
|
-
border-radius: calc(
|
|
3170
|
+
border-radius: calc(var(--radius) * 2);
|
|
3201
3171
|
border-style: var(--tw-border-style);
|
|
3202
3172
|
border-width: 2px;
|
|
3203
3173
|
border-color: transparent;
|
|
@@ -3315,6 +3285,7 @@
|
|
|
3315
3285
|
.color-swatch-picker__item {
|
|
3316
3286
|
width: calc(var(--spacing) * 4);
|
|
3317
3287
|
height: calc(var(--spacing) * 4);
|
|
3288
|
+
border-radius: calc(var(--radius) * 1);
|
|
3318
3289
|
border-style: var(--tw-border-style);
|
|
3319
3290
|
border-width: 1px;
|
|
3320
3291
|
}
|
|
@@ -3323,6 +3294,7 @@
|
|
|
3323
3294
|
.color-swatch-picker__item {
|
|
3324
3295
|
width: calc(var(--spacing) * 6);
|
|
3325
3296
|
height: calc(var(--spacing) * 6);
|
|
3297
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
3326
3298
|
border-style: var(--tw-border-style);
|
|
3327
3299
|
border-width: 2px;
|
|
3328
3300
|
}
|
|
@@ -3331,6 +3303,7 @@
|
|
|
3331
3303
|
.color-swatch-picker__item {
|
|
3332
3304
|
width: calc(var(--spacing) * 9);
|
|
3333
3305
|
height: calc(var(--spacing) * 9);
|
|
3306
|
+
border-radius: calc(var(--radius) * 3);
|
|
3334
3307
|
border-style: var(--tw-border-style);
|
|
3335
3308
|
border-width: 3px;
|
|
3336
3309
|
}
|
|
@@ -3339,6 +3312,7 @@
|
|
|
3339
3312
|
.color-swatch-picker__item {
|
|
3340
3313
|
width: calc(var(--spacing) * 10);
|
|
3341
3314
|
height: calc(var(--spacing) * 10);
|
|
3315
|
+
border-radius: calc(var(--radius) * 3);
|
|
3342
3316
|
border-style: var(--tw-border-style);
|
|
3343
3317
|
border-width: 3px;
|
|
3344
3318
|
}
|
|
@@ -3425,7 +3399,7 @@
|
|
|
3425
3399
|
--tw-outline-style: none;
|
|
3426
3400
|
outline-style: none;
|
|
3427
3401
|
border-width: var(--border-width-field);
|
|
3428
|
-
border-color: var(--
|
|
3402
|
+
border-color: var(--field-border);
|
|
3429
3403
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
3430
3404
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
3431
3405
|
transition-property: none;
|
|
@@ -3443,15 +3417,8 @@
|
|
|
3443
3417
|
}
|
|
3444
3418
|
@media (hover: hover) {
|
|
3445
3419
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
3446
|
-
background-color: var(--field-
|
|
3447
|
-
|
|
3448
|
-
background-color: color-mix(
|
|
3449
|
-
in oklab,
|
|
3450
|
-
var(--field-background, var(--default)) 90%,
|
|
3451
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
3452
|
-
);
|
|
3453
|
-
}
|
|
3454
|
-
border-color: var(--color-field-border-hover);
|
|
3420
|
+
background-color: var(--field-hover);
|
|
3421
|
+
border-color: var(--field-border-hover);
|
|
3455
3422
|
}
|
|
3456
3423
|
}
|
|
3457
3424
|
&[data-focus-within="true"], &:focus-within {
|
|
@@ -3477,7 +3444,7 @@
|
|
|
3477
3444
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
3478
3445
|
--tw-ring-offset-width: 0px;
|
|
3479
3446
|
}
|
|
3480
|
-
background-color: var(--
|
|
3447
|
+
background-color: var(--field-focus);
|
|
3481
3448
|
border-color: var(--color-field-border-invalid);
|
|
3482
3449
|
}
|
|
3483
3450
|
&[data-disabled="true"], &[aria-disabled="true"] {
|
|
@@ -3545,9 +3512,9 @@
|
|
|
3545
3512
|
--tw-shadow: 0 0 #0000;
|
|
3546
3513
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
3547
3514
|
background-color: var(--color-input-group-bg);
|
|
3548
|
-
--color-input-group-bg: var(--
|
|
3549
|
-
--color-input-group-bg-hover: var(--
|
|
3550
|
-
--color-input-group-bg-focus: var(--
|
|
3515
|
+
--color-input-group-bg: var(--default);
|
|
3516
|
+
--color-input-group-bg-hover: var(--default-hover);
|
|
3517
|
+
--color-input-group-bg-focus: var(--default);
|
|
3551
3518
|
@media (hover: hover) {
|
|
3552
3519
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
3553
3520
|
background-color: var(--color-input-group-bg-hover);
|
|
@@ -3592,9 +3559,6 @@
|
|
|
3592
3559
|
[data-slot="label"] {
|
|
3593
3560
|
width: fit-content;
|
|
3594
3561
|
}
|
|
3595
|
-
[data-slot="description"] {
|
|
3596
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
3597
|
-
}
|
|
3598
3562
|
}
|
|
3599
3563
|
.color-field--full-width {
|
|
3600
3564
|
width: 100%;
|
|
@@ -3624,7 +3588,7 @@
|
|
|
3624
3588
|
}
|
|
3625
3589
|
.slider__track {
|
|
3626
3590
|
position: relative;
|
|
3627
|
-
border-radius: calc(
|
|
3591
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
3628
3592
|
background-color: var(--default);
|
|
3629
3593
|
grid-area: track;
|
|
3630
3594
|
}
|
|
@@ -3639,7 +3603,7 @@
|
|
|
3639
3603
|
cursor: grab;
|
|
3640
3604
|
align-items: center;
|
|
3641
3605
|
justify-content: center;
|
|
3642
|
-
border-radius: calc(
|
|
3606
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
3643
3607
|
background-color: var(--accent);
|
|
3644
3608
|
-webkit-tap-highlight-color: transparent;
|
|
3645
3609
|
transition: background-color 250ms var(--ease-smooth), transform 250ms var(--ease-out), box-shadow 150ms var(--ease-out);
|
|
@@ -3660,7 +3624,7 @@
|
|
|
3660
3624
|
&::after {
|
|
3661
3625
|
position: relative;
|
|
3662
3626
|
z-index: 10;
|
|
3663
|
-
border-radius: calc(
|
|
3627
|
+
border-radius: calc(var(--radius) * 1);
|
|
3664
3628
|
background-color: var(--accent-foreground);
|
|
3665
3629
|
color: var(--color-black);
|
|
3666
3630
|
--tw-shadow: var(--field-shadow);
|
|
@@ -3814,14 +3778,14 @@
|
|
|
3814
3778
|
gap: calc(var(--spacing) * 3);
|
|
3815
3779
|
-webkit-tap-highlight-color: transparent;
|
|
3816
3780
|
cursor: var(--cursor-interactive);
|
|
3817
|
-
--switch-control-bg: var(--
|
|
3781
|
+
--switch-control-bg: var(--default);
|
|
3818
3782
|
--switch-control-bg-hover: var(--switch-control-bg);
|
|
3819
3783
|
@supports (color: color-mix(in lab, red, red)) {
|
|
3820
3784
|
--switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
|
|
3821
3785
|
}
|
|
3822
3786
|
--switch-control-bg-pressed: var(--switch-control-bg-hover);
|
|
3823
|
-
--switch-control-bg-checked: var(--
|
|
3824
|
-
--switch-control-bg-checked-hover: var(--
|
|
3787
|
+
--switch-control-bg-checked: var(--accent);
|
|
3788
|
+
--switch-control-bg-checked-hover: var(--accent-hover);
|
|
3825
3789
|
&:disabled, &[data-disabled="true"], &[aria-disabled="true"] {
|
|
3826
3790
|
opacity: var(--disabled-opacity);
|
|
3827
3791
|
cursor: var(--cursor-disabled);
|
|
@@ -3845,7 +3809,7 @@
|
|
|
3845
3809
|
flex-shrink: 0;
|
|
3846
3810
|
align-items: center;
|
|
3847
3811
|
overflow: hidden;
|
|
3848
|
-
border-radius: calc(
|
|
3812
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
3849
3813
|
height: 1.25rem;
|
|
3850
3814
|
width: 2.5rem;
|
|
3851
3815
|
background-color: var(--switch-control-bg);
|
|
@@ -3906,6 +3870,7 @@
|
|
|
3906
3870
|
}
|
|
3907
3871
|
}
|
|
3908
3872
|
.switch--sm .switch__control {
|
|
3873
|
+
border-radius: calc(var(--radius) * 1);
|
|
3909
3874
|
height: 1rem;
|
|
3910
3875
|
width: 2rem;
|
|
3911
3876
|
}
|
|
@@ -3917,7 +3882,7 @@
|
|
|
3917
3882
|
margin-inline-start: calc(var(--spacing) * 0.5);
|
|
3918
3883
|
display: flex;
|
|
3919
3884
|
transform-origin: center;
|
|
3920
|
-
border-radius: calc(
|
|
3885
|
+
border-radius: calc(var(--radius) * 1);
|
|
3921
3886
|
background-color: var(--color-white);
|
|
3922
3887
|
color: var(--color-black);
|
|
3923
3888
|
--tw-shadow: var(--field-shadow);
|
|
@@ -3947,6 +3912,7 @@
|
|
|
3947
3912
|
}
|
|
3948
3913
|
}
|
|
3949
3914
|
.switch--sm .switch__thumb {
|
|
3915
|
+
border-radius: calc(var(--radius) * 0.75);
|
|
3950
3916
|
height: 0.75rem;
|
|
3951
3917
|
width: 1.03125rem;
|
|
3952
3918
|
.switch[aria-checked="true"] &, .switch[data-selected="true"] & {
|
|
@@ -3954,6 +3920,7 @@
|
|
|
3954
3920
|
}
|
|
3955
3921
|
}
|
|
3956
3922
|
.switch--lg .switch__thumb {
|
|
3923
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
3957
3924
|
height: 1.25rem;
|
|
3958
3925
|
width: 1.71875rem;
|
|
3959
3926
|
.switch[aria-checked="true"] &, .switch[data-selected="true"] & {
|
|
@@ -4009,9 +3976,9 @@
|
|
|
4009
3976
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
4010
3977
|
--tw-leading: 1.34;
|
|
4011
3978
|
line-height: 1.34;
|
|
4012
|
-
--badge-bg: var(--
|
|
4013
|
-
--badge-fg: var(--
|
|
4014
|
-
--badge-border: var(--
|
|
3979
|
+
--badge-bg: var(--default);
|
|
3980
|
+
--badge-fg: var(--default-foreground);
|
|
3981
|
+
--badge-border: var(--background);
|
|
4015
3982
|
background-color: var(--badge-bg);
|
|
4016
3983
|
color: var(--badge-fg);
|
|
4017
3984
|
border: 1px solid var(--badge-border);
|
|
@@ -4042,19 +4009,19 @@
|
|
|
4042
4009
|
line-height: 1.34;
|
|
4043
4010
|
}
|
|
4044
4011
|
.badge--accent {
|
|
4045
|
-
--badge-fg: var(--
|
|
4012
|
+
--badge-fg: var(--accent-soft-foreground);
|
|
4046
4013
|
}
|
|
4047
4014
|
.badge--default {
|
|
4048
|
-
--badge-fg: var(--
|
|
4015
|
+
--badge-fg: var(--default-foreground);
|
|
4049
4016
|
}
|
|
4050
4017
|
.badge--success {
|
|
4051
|
-
--badge-fg: var(--
|
|
4018
|
+
--badge-fg: var(--success-soft-foreground);
|
|
4052
4019
|
}
|
|
4053
4020
|
.badge--warning {
|
|
4054
|
-
--badge-fg: var(--
|
|
4021
|
+
--badge-fg: var(--warning-soft-foreground);
|
|
4055
4022
|
}
|
|
4056
4023
|
.badge--danger {
|
|
4057
|
-
--badge-fg: var(--
|
|
4024
|
+
--badge-fg: var(--danger-soft-foreground);
|
|
4058
4025
|
}
|
|
4059
4026
|
.badge--top-right {
|
|
4060
4027
|
position: absolute;
|
|
@@ -4081,44 +4048,44 @@
|
|
|
4081
4048
|
transform: translate(-25%, 25%);
|
|
4082
4049
|
}
|
|
4083
4050
|
.badge--primary.badge--accent {
|
|
4084
|
-
--badge-bg: var(--
|
|
4085
|
-
--badge-fg: var(--
|
|
4051
|
+
--badge-bg: var(--accent);
|
|
4052
|
+
--badge-fg: var(--accent-foreground);
|
|
4086
4053
|
}
|
|
4087
4054
|
.badge--primary.badge--default {
|
|
4088
|
-
--badge-bg: var(--
|
|
4089
|
-
--badge-fg: var(--
|
|
4055
|
+
--badge-bg: var(--default);
|
|
4056
|
+
--badge-fg: var(--default-foreground);
|
|
4090
4057
|
}
|
|
4091
4058
|
.badge--primary.badge--success {
|
|
4092
|
-
--badge-bg: var(--
|
|
4093
|
-
--badge-fg: var(--
|
|
4059
|
+
--badge-bg: var(--success);
|
|
4060
|
+
--badge-fg: var(--success-foreground);
|
|
4094
4061
|
}
|
|
4095
4062
|
.badge--primary.badge--warning {
|
|
4096
|
-
--badge-bg: var(--
|
|
4097
|
-
--badge-fg: var(--
|
|
4063
|
+
--badge-bg: var(--warning);
|
|
4064
|
+
--badge-fg: var(--warning-foreground);
|
|
4098
4065
|
}
|
|
4099
4066
|
.badge--primary.badge--danger {
|
|
4100
|
-
--badge-bg: var(--
|
|
4101
|
-
--badge-fg: var(--
|
|
4067
|
+
--badge-bg: var(--danger);
|
|
4068
|
+
--badge-fg: var(--danger-foreground);
|
|
4102
4069
|
}
|
|
4103
4070
|
.badge--soft.badge--accent {
|
|
4104
|
-
--badge-bg: var(--
|
|
4105
|
-
--badge-fg: var(--
|
|
4071
|
+
--badge-bg: var(--accent-soft);
|
|
4072
|
+
--badge-fg: var(--accent-soft-foreground);
|
|
4106
4073
|
}
|
|
4107
4074
|
.badge--soft.badge--default {
|
|
4108
|
-
--badge-bg: var(--
|
|
4109
|
-
--badge-fg: var(--
|
|
4075
|
+
--badge-bg: var(--default-soft);
|
|
4076
|
+
--badge-fg: var(--default-soft-foreground);
|
|
4110
4077
|
}
|
|
4111
4078
|
.badge--soft.badge--success {
|
|
4112
|
-
--badge-bg: var(--
|
|
4113
|
-
--badge-fg: var(--
|
|
4079
|
+
--badge-bg: var(--success-soft);
|
|
4080
|
+
--badge-fg: var(--success-soft-foreground);
|
|
4114
4081
|
}
|
|
4115
4082
|
.badge--soft.badge--warning {
|
|
4116
|
-
--badge-bg: var(--
|
|
4117
|
-
--badge-fg: var(--
|
|
4083
|
+
--badge-bg: var(--warning-soft);
|
|
4084
|
+
--badge-fg: var(--warning-soft-foreground);
|
|
4118
4085
|
}
|
|
4119
4086
|
.badge--soft.badge--danger {
|
|
4120
|
-
--badge-bg: var(--
|
|
4121
|
-
--badge-fg: var(--
|
|
4087
|
+
--badge-bg: var(--danger-soft);
|
|
4088
|
+
--badge-fg: var(--danger-soft-foreground);
|
|
4122
4089
|
}
|
|
4123
4090
|
.chip {
|
|
4124
4091
|
display: inline-flex;
|
|
@@ -4134,7 +4101,7 @@
|
|
|
4134
4101
|
line-height: calc(var(--spacing) * 5);
|
|
4135
4102
|
--tw-font-weight: var(--font-weight-medium);
|
|
4136
4103
|
font-weight: var(--font-weight-medium);
|
|
4137
|
-
--chip-bg: var(--
|
|
4104
|
+
--chip-bg: var(--default);
|
|
4138
4105
|
--chip-fg: currentColor;
|
|
4139
4106
|
background-color: var(--chip-bg);
|
|
4140
4107
|
color: var(--chip-fg);
|
|
@@ -4143,19 +4110,19 @@
|
|
|
4143
4110
|
padding-inline: calc(var(--spacing) * 0.5);
|
|
4144
4111
|
}
|
|
4145
4112
|
.chip--accent {
|
|
4146
|
-
--chip-fg: var(--
|
|
4113
|
+
--chip-fg: var(--accent-soft-foreground);
|
|
4147
4114
|
}
|
|
4148
4115
|
.chip--danger {
|
|
4149
|
-
--chip-fg: var(--
|
|
4116
|
+
--chip-fg: var(--danger-soft-foreground);
|
|
4150
4117
|
}
|
|
4151
4118
|
.chip--default {
|
|
4152
|
-
--chip-fg: var(--
|
|
4119
|
+
--chip-fg: var(--default-foreground);
|
|
4153
4120
|
}
|
|
4154
4121
|
.chip--success {
|
|
4155
|
-
--chip-fg: var(--
|
|
4122
|
+
--chip-fg: var(--success-soft-foreground);
|
|
4156
4123
|
}
|
|
4157
4124
|
.chip--warning {
|
|
4158
|
-
--chip-fg: var(--
|
|
4125
|
+
--chip-fg: var(--warning-soft-foreground);
|
|
4159
4126
|
}
|
|
4160
4127
|
.chip--tertiary {
|
|
4161
4128
|
--chip-bg: transparent;
|
|
@@ -4179,36 +4146,40 @@
|
|
|
4179
4146
|
font-weight: var(--font-weight-medium);
|
|
4180
4147
|
}
|
|
4181
4148
|
.chip--primary.chip--accent {
|
|
4182
|
-
--chip-bg: var(--
|
|
4183
|
-
--chip-fg: var(--
|
|
4149
|
+
--chip-bg: var(--accent);
|
|
4150
|
+
--chip-fg: var(--accent-foreground);
|
|
4184
4151
|
}
|
|
4185
4152
|
.chip--primary.chip--success {
|
|
4186
|
-
--chip-bg: var(--
|
|
4187
|
-
--chip-fg: var(--
|
|
4153
|
+
--chip-bg: var(--success);
|
|
4154
|
+
--chip-fg: var(--success-foreground);
|
|
4188
4155
|
}
|
|
4189
4156
|
.chip--primary.chip--warning {
|
|
4190
|
-
--chip-bg: var(--
|
|
4191
|
-
--chip-fg: var(--
|
|
4157
|
+
--chip-bg: var(--warning);
|
|
4158
|
+
--chip-fg: var(--warning-foreground);
|
|
4192
4159
|
}
|
|
4193
4160
|
.chip--primary.chip--danger {
|
|
4194
|
-
--chip-bg: var(--
|
|
4195
|
-
--chip-fg: var(--
|
|
4161
|
+
--chip-bg: var(--danger);
|
|
4162
|
+
--chip-fg: var(--danger-foreground);
|
|
4196
4163
|
}
|
|
4197
4164
|
.chip--accent.chip--soft {
|
|
4198
|
-
--chip-bg: var(--
|
|
4199
|
-
--chip-fg: var(--
|
|
4165
|
+
--chip-bg: var(--accent-soft);
|
|
4166
|
+
--chip-fg: var(--accent-soft-foreground);
|
|
4200
4167
|
}
|
|
4201
4168
|
.chip--success.chip--soft {
|
|
4202
|
-
--chip-bg: var(--
|
|
4203
|
-
--chip-fg: var(--
|
|
4169
|
+
--chip-bg: var(--success-soft);
|
|
4170
|
+
--chip-fg: var(--success-soft-foreground);
|
|
4204
4171
|
}
|
|
4205
4172
|
.chip--warning.chip--soft {
|
|
4206
|
-
--chip-bg: var(--
|
|
4207
|
-
--chip-fg: var(--
|
|
4173
|
+
--chip-bg: var(--warning-soft);
|
|
4174
|
+
--chip-fg: var(--warning-soft-foreground);
|
|
4208
4175
|
}
|
|
4209
4176
|
.chip--danger.chip--soft {
|
|
4210
|
-
--chip-bg: var(--
|
|
4211
|
-
--chip-fg: var(--
|
|
4177
|
+
--chip-bg: var(--danger-soft);
|
|
4178
|
+
--chip-fg: var(--danger-soft-foreground);
|
|
4179
|
+
}
|
|
4180
|
+
.chip--default.chip--soft {
|
|
4181
|
+
--chip-bg: var(--default-soft);
|
|
4182
|
+
--chip-fg: var(--default-soft-foreground);
|
|
4212
4183
|
}
|
|
4213
4184
|
.table-root {
|
|
4214
4185
|
position: relative;
|
|
@@ -4219,36 +4190,16 @@
|
|
|
4219
4190
|
}
|
|
4220
4191
|
.table__scroll-container {
|
|
4221
4192
|
overflow-x: auto;
|
|
4222
|
-
scrollbar-width:
|
|
4223
|
-
scrollbar-color:
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
}
|
|
4227
|
-
&::-webkit-scrollbar-track {
|
|
4228
|
-
background: transparent;
|
|
4229
|
-
}
|
|
4230
|
-
&::-webkit-scrollbar-thumb {
|
|
4231
|
-
background: oklch(0% 0 0 / 0.15);
|
|
4232
|
-
border-radius: 3px;
|
|
4233
|
-
}
|
|
4234
|
-
&::-webkit-scrollbar-thumb:hover {
|
|
4235
|
-
background: oklch(0% 0 0 / 0.25);
|
|
4236
|
-
}
|
|
4237
|
-
:is([data-theme="dark"], .dark) & {
|
|
4238
|
-
scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
|
|
4239
|
-
&::-webkit-scrollbar-thumb {
|
|
4240
|
-
background: oklch(100% 0 0 / 0.15);
|
|
4241
|
-
}
|
|
4242
|
-
&::-webkit-scrollbar-thumb:hover {
|
|
4243
|
-
background: oklch(100% 0 0 / 0.25);
|
|
4244
|
-
}
|
|
4245
|
-
}
|
|
4193
|
+
scrollbar-width: var(--scrollbar-width);
|
|
4194
|
+
scrollbar-color: var(--scrollbar-color);
|
|
4195
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
4196
|
+
scrollbar-gutter: auto;
|
|
4246
4197
|
}
|
|
4247
4198
|
.table-root--primary {
|
|
4248
4199
|
background-color: var(--surface-secondary);
|
|
4249
4200
|
padding-inline: calc(var(--spacing) * 1);
|
|
4250
4201
|
padding-bottom: calc(var(--spacing) * 1);
|
|
4251
|
-
border-radius: calc(var(--radius) * 2.5);
|
|
4202
|
+
border-radius: min(32px, calc(var(--radius) * 2.5));
|
|
4252
4203
|
}
|
|
4253
4204
|
.table-root--secondary .table__header {
|
|
4254
4205
|
border-bottom-style: var(--tw-border-style);
|
|
@@ -4259,12 +4210,12 @@
|
|
|
4259
4210
|
background-color: var(--surface-secondary);
|
|
4260
4211
|
}
|
|
4261
4212
|
.table-root--secondary .table__column:first-child {
|
|
4262
|
-
border-
|
|
4263
|
-
border-
|
|
4213
|
+
border-start-start-radius: min(32px, var(--radius-2xl));
|
|
4214
|
+
border-end-start-radius: min(32px, var(--radius-2xl));
|
|
4264
4215
|
}
|
|
4265
4216
|
.table-root--secondary .table__column:last-child {
|
|
4266
|
-
border-
|
|
4267
|
-
border-
|
|
4217
|
+
border-start-end-radius: min(32px, var(--radius-2xl));
|
|
4218
|
+
border-end-end-radius: min(32px, var(--radius-2xl));
|
|
4268
4219
|
}
|
|
4269
4220
|
.table-root--secondary .table__body {
|
|
4270
4221
|
--tw-shadow: 0 0 #0000;
|
|
@@ -4281,13 +4232,9 @@
|
|
|
4281
4232
|
.table__cell {
|
|
4282
4233
|
border-bottom-style: var(--tw-border-style);
|
|
4283
4234
|
border-bottom-width: 1px;
|
|
4284
|
-
border-color: var(--
|
|
4235
|
+
border-color: var(--separator-tertiary);
|
|
4285
4236
|
@supports (color: color-mix(in lab, red, red)) {
|
|
4286
|
-
border-color: color-mix(in oklab,
|
|
4287
|
-
in oklab,
|
|
4288
|
-
var(--surface) 81%,
|
|
4289
|
-
var(--surface-foreground) 19%
|
|
4290
|
-
) 50%, transparent);
|
|
4237
|
+
border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent);
|
|
4291
4238
|
}
|
|
4292
4239
|
background-color: transparent;
|
|
4293
4240
|
}
|
|
@@ -4359,27 +4306,27 @@
|
|
|
4359
4306
|
border-radius: calc(var(--radius) * 1);
|
|
4360
4307
|
--tw-outline-style: none;
|
|
4361
4308
|
outline-style: none;
|
|
4362
|
-
box-shadow: inset 0 0 0 2px var(--
|
|
4309
|
+
box-shadow: inset 0 0 0 2px var(--focus);
|
|
4363
4310
|
}
|
|
4364
4311
|
}
|
|
4365
4312
|
.table__body {
|
|
4366
4313
|
& tr:first-child td:first-child {
|
|
4367
|
-
border-
|
|
4314
|
+
border-start-start-radius: min(32px, var(--radius-2xl));
|
|
4368
4315
|
}
|
|
4369
4316
|
& tr:first-child td:last-child {
|
|
4370
|
-
border-
|
|
4317
|
+
border-start-end-radius: min(32px, var(--radius-2xl));
|
|
4371
4318
|
}
|
|
4372
4319
|
& tr:last-child td:first-child {
|
|
4373
|
-
border-
|
|
4320
|
+
border-end-start-radius: min(32px, var(--radius-2xl));
|
|
4374
4321
|
}
|
|
4375
4322
|
& tr:last-child td:last-child {
|
|
4376
|
-
border-
|
|
4323
|
+
border-end-end-radius: min(32px, var(--radius-2xl));
|
|
4377
4324
|
}
|
|
4378
4325
|
&:not(tbody) {
|
|
4379
4326
|
position: relative;
|
|
4380
4327
|
height: 100%;
|
|
4381
4328
|
overflow: clip;
|
|
4382
|
-
border-radius:
|
|
4329
|
+
border-radius: min(32px, var(--radius-2xl));
|
|
4383
4330
|
}
|
|
4384
4331
|
}
|
|
4385
4332
|
.table__row {
|
|
@@ -4417,16 +4364,12 @@
|
|
|
4417
4364
|
&:focus-visible, &[data-focus-visible="true"] {
|
|
4418
4365
|
--tw-outline-style: none;
|
|
4419
4366
|
outline-style: none;
|
|
4420
|
-
box-shadow: inset 0 0 0 2px var(--color-focus);
|
|
4421
4367
|
}
|
|
4422
4368
|
&[data-dragging="true"] {
|
|
4423
4369
|
opacity: 50%;
|
|
4424
4370
|
}
|
|
4425
4371
|
&[data-drop-target="true"] .table__cell {
|
|
4426
|
-
background-color: var(--accent);
|
|
4427
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
4428
|
-
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
4429
|
-
}
|
|
4372
|
+
background-color: var(--accent-soft);
|
|
4430
4373
|
}
|
|
4431
4374
|
}
|
|
4432
4375
|
.table__cell {
|
|
@@ -4440,21 +4383,53 @@
|
|
|
4440
4383
|
color: var(--foreground);
|
|
4441
4384
|
border-bottom-style: var(--tw-border-style);
|
|
4442
4385
|
border-bottom-width: 1px;
|
|
4443
|
-
border-color: var(--
|
|
4386
|
+
border-color: var(--separator-tertiary);
|
|
4444
4387
|
@supports (color: color-mix(in lab, red, red)) {
|
|
4445
|
-
border-color: color-mix(in oklab,
|
|
4446
|
-
in oklab,
|
|
4447
|
-
var(--surface) 81%,
|
|
4448
|
-
var(--surface-foreground) 19%
|
|
4449
|
-
) 50%, transparent);
|
|
4388
|
+
border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent);
|
|
4450
4389
|
}
|
|
4451
4390
|
&:focus-visible, &[data-focus-visible="true"] {
|
|
4452
4391
|
border-radius: calc(var(--radius) * 1);
|
|
4453
4392
|
--tw-outline-style: none;
|
|
4454
4393
|
outline-style: none;
|
|
4455
|
-
box-shadow: inset 0 0 0 2px var(--
|
|
4394
|
+
box-shadow: inset 0 0 0 2px var(--focus);
|
|
4456
4395
|
}
|
|
4457
4396
|
}
|
|
4397
|
+
.table__row:is(:focus-visible, [data-focus-visible="true"]) :is(.table__cell, .table__column) {
|
|
4398
|
+
--tw-shadow: 0 0 #0000;
|
|
4399
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4400
|
+
}
|
|
4401
|
+
.table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):only-child, .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:only-child :is(.table__cell, .table__column) {
|
|
4402
|
+
border-radius: calc(var(--radius) * 1);
|
|
4403
|
+
--tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--focus));
|
|
4404
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4405
|
+
--tw-outline-style: none;
|
|
4406
|
+
outline-style: none;
|
|
4407
|
+
}
|
|
4408
|
+
.table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):first-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:first-child:not(:only-child) :is(.table__cell, .table__column) {
|
|
4409
|
+
border-top-left-radius: calc(var(--radius) * 1);
|
|
4410
|
+
border-bottom-left-radius: calc(var(--radius) * 1);
|
|
4411
|
+
--tw-shadow: inset 2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus));
|
|
4412
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4413
|
+
--tw-outline-style: none;
|
|
4414
|
+
outline-style: none;
|
|
4415
|
+
}
|
|
4416
|
+
.table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):last-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:last-child:not(:only-child) :is(.table__cell, .table__column) {
|
|
4417
|
+
border-top-right-radius: calc(var(--radius) * 1);
|
|
4418
|
+
border-bottom-right-radius: calc(var(--radius) * 1);
|
|
4419
|
+
--tw-shadow: inset -2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus));
|
|
4420
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4421
|
+
--tw-outline-style: none;
|
|
4422
|
+
outline-style: none;
|
|
4423
|
+
}
|
|
4424
|
+
.table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):not(:first-child):not(:last-child):not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:not(:first-child):not(:last-child):not(:only-child) :is(.table__cell, .table__column) {
|
|
4425
|
+
--tw-shadow: inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus));
|
|
4426
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4427
|
+
--tw-outline-style: none;
|
|
4428
|
+
outline-style: none;
|
|
4429
|
+
}
|
|
4430
|
+
.table__cell[data-tree-column] {
|
|
4431
|
+
padding-inline-start: calc(1rem * var(--table-row-level, 1));
|
|
4432
|
+
}
|
|
4458
4433
|
.table__footer {
|
|
4459
4434
|
display: flex;
|
|
4460
4435
|
align-items: center;
|
|
@@ -4464,6 +4439,10 @@
|
|
|
4464
4439
|
.table__resizable-container {
|
|
4465
4440
|
position: relative;
|
|
4466
4441
|
overflow: auto;
|
|
4442
|
+
scrollbar-width: var(--scrollbar-width);
|
|
4443
|
+
scrollbar-color: var(--scrollbar-color);
|
|
4444
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
4445
|
+
scrollbar-gutter: auto;
|
|
4467
4446
|
}
|
|
4468
4447
|
.table__column-resizer {
|
|
4469
4448
|
position: absolute;
|
|
@@ -4527,12 +4506,12 @@
|
|
|
4527
4506
|
align-items: flex-start;
|
|
4528
4507
|
justify-content: flex-start;
|
|
4529
4508
|
gap: calc(var(--spacing) * 4);
|
|
4530
|
-
border-radius: calc(var(--radius) * 3);
|
|
4531
4509
|
background-color: var(--surface);
|
|
4532
4510
|
padding-inline: calc(var(--spacing) * 4);
|
|
4533
4511
|
padding-block: calc(var(--spacing) * 3);
|
|
4534
4512
|
--tw-shadow: var(--surface-shadow);
|
|
4535
4513
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4514
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
4536
4515
|
}
|
|
4537
4516
|
.alert__content {
|
|
4538
4517
|
display: flex;
|
|
@@ -4574,28 +4553,28 @@
|
|
|
4574
4553
|
color: var(--foreground);
|
|
4575
4554
|
}
|
|
4576
4555
|
.alert--accent .alert__indicator {
|
|
4577
|
-
color: var(--accent);
|
|
4556
|
+
color: var(--accent-soft-foreground);
|
|
4578
4557
|
}
|
|
4579
4558
|
.alert--accent .alert__title {
|
|
4580
|
-
color: var(--accent);
|
|
4559
|
+
color: var(--accent-soft-foreground);
|
|
4581
4560
|
}
|
|
4582
4561
|
.alert--success .alert__indicator {
|
|
4583
|
-
color: var(--success);
|
|
4562
|
+
color: var(--success-soft-foreground);
|
|
4584
4563
|
}
|
|
4585
4564
|
.alert--success .alert__title {
|
|
4586
|
-
color: var(--success);
|
|
4565
|
+
color: var(--success-soft-foreground);
|
|
4587
4566
|
}
|
|
4588
4567
|
.alert--warning .alert__indicator {
|
|
4589
|
-
color: var(--warning);
|
|
4568
|
+
color: var(--warning-soft-foreground);
|
|
4590
4569
|
}
|
|
4591
4570
|
.alert--warning .alert__title {
|
|
4592
|
-
color: var(--warning);
|
|
4571
|
+
color: var(--warning-soft-foreground);
|
|
4593
4572
|
}
|
|
4594
4573
|
.alert--danger .alert__indicator {
|
|
4595
|
-
color: var(--danger);
|
|
4574
|
+
color: var(--danger-soft-foreground);
|
|
4596
4575
|
}
|
|
4597
4576
|
.alert--danger .alert__title {
|
|
4598
|
-
color: var(--danger);
|
|
4577
|
+
color: var(--danger-soft-foreground);
|
|
4599
4578
|
}
|
|
4600
4579
|
.empty-state {
|
|
4601
4580
|
padding: calc(var(--spacing) * 2);
|
|
@@ -4667,7 +4646,7 @@
|
|
|
4667
4646
|
gap: calc(var(--spacing) * 1);
|
|
4668
4647
|
grid-template-areas: "label output" "track track";
|
|
4669
4648
|
grid-template-columns: 1fr auto;
|
|
4670
|
-
--meter-fill: var(--
|
|
4649
|
+
--meter-fill: var(--accent);
|
|
4671
4650
|
[data-slot="label"] {
|
|
4672
4651
|
width: fit-content;
|
|
4673
4652
|
font-size: var(--text-sm);
|
|
@@ -4688,7 +4667,7 @@
|
|
|
4688
4667
|
.meter__track {
|
|
4689
4668
|
position: relative;
|
|
4690
4669
|
overflow: hidden;
|
|
4691
|
-
border-radius: calc(
|
|
4670
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
4692
4671
|
background-color: var(--default);
|
|
4693
4672
|
grid-area: track;
|
|
4694
4673
|
height: calc(var(--spacing) * 2);
|
|
@@ -4698,7 +4677,7 @@
|
|
|
4698
4677
|
top: calc(var(--spacing) * 0);
|
|
4699
4678
|
left: calc(var(--spacing) * 0);
|
|
4700
4679
|
height: 100%;
|
|
4701
|
-
border-radius: calc(
|
|
4680
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
4702
4681
|
background-color: var(--meter-fill);
|
|
4703
4682
|
transition: width 300ms var(--ease-out);
|
|
4704
4683
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
@@ -4728,27 +4707,35 @@
|
|
|
4728
4707
|
.meter--sm {
|
|
4729
4708
|
.meter__track {
|
|
4730
4709
|
height: calc(var(--spacing) * 1);
|
|
4710
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
4711
|
+
}
|
|
4712
|
+
.meter__fill {
|
|
4713
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
4731
4714
|
}
|
|
4732
4715
|
}
|
|
4733
4716
|
.meter--lg {
|
|
4734
4717
|
.meter__track {
|
|
4735
4718
|
height: calc(var(--spacing) * 3);
|
|
4719
|
+
border-radius: calc(var(--radius) * 0.75);
|
|
4720
|
+
}
|
|
4721
|
+
.meter__fill {
|
|
4722
|
+
border-radius: calc(var(--radius) * 0.75);
|
|
4736
4723
|
}
|
|
4737
4724
|
}
|
|
4738
4725
|
.meter--default {
|
|
4739
|
-
--meter-fill: var(--
|
|
4726
|
+
--meter-fill: var(--default-foreground);
|
|
4740
4727
|
}
|
|
4741
4728
|
.meter--accent {
|
|
4742
|
-
--meter-fill: var(--
|
|
4729
|
+
--meter-fill: var(--accent);
|
|
4743
4730
|
}
|
|
4744
4731
|
.meter--success {
|
|
4745
|
-
--meter-fill: var(--
|
|
4732
|
+
--meter-fill: var(--success);
|
|
4746
4733
|
}
|
|
4747
4734
|
.meter--warning {
|
|
4748
|
-
--meter-fill: var(--
|
|
4735
|
+
--meter-fill: var(--warning);
|
|
4749
4736
|
}
|
|
4750
4737
|
.meter--danger {
|
|
4751
|
-
--meter-fill: var(--
|
|
4738
|
+
--meter-fill: var(--danger);
|
|
4752
4739
|
}
|
|
4753
4740
|
.progress-bar {
|
|
4754
4741
|
display: grid;
|
|
@@ -4756,7 +4743,7 @@
|
|
|
4756
4743
|
gap: calc(var(--spacing) * 1);
|
|
4757
4744
|
grid-template-areas: "label output" "track track";
|
|
4758
4745
|
grid-template-columns: 1fr auto;
|
|
4759
|
-
--progress-bar-fill: var(--
|
|
4746
|
+
--progress-bar-fill: var(--accent);
|
|
4760
4747
|
[data-slot="label"] {
|
|
4761
4748
|
width: fit-content;
|
|
4762
4749
|
font-size: var(--text-sm);
|
|
@@ -4777,7 +4764,7 @@
|
|
|
4777
4764
|
.progress-bar__track {
|
|
4778
4765
|
position: relative;
|
|
4779
4766
|
overflow: hidden;
|
|
4780
|
-
border-radius: calc(
|
|
4767
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
4781
4768
|
background-color: var(--default);
|
|
4782
4769
|
grid-area: track;
|
|
4783
4770
|
height: calc(var(--spacing) * 2);
|
|
@@ -4787,7 +4774,7 @@
|
|
|
4787
4774
|
top: calc(var(--spacing) * 0);
|
|
4788
4775
|
left: calc(var(--spacing) * 0);
|
|
4789
4776
|
height: 100%;
|
|
4790
|
-
border-radius: calc(
|
|
4777
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
4791
4778
|
background-color: var(--progress-bar-fill);
|
|
4792
4779
|
transition: width 300ms var(--ease-out);
|
|
4793
4780
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
@@ -4845,34 +4832,42 @@
|
|
|
4845
4832
|
.progress-bar--sm {
|
|
4846
4833
|
.progress-bar__track {
|
|
4847
4834
|
height: calc(var(--spacing) * 1);
|
|
4835
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
4836
|
+
}
|
|
4837
|
+
.progress-bar__fill {
|
|
4838
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
4848
4839
|
}
|
|
4849
4840
|
}
|
|
4850
4841
|
.progress-bar--lg {
|
|
4851
4842
|
.progress-bar__track {
|
|
4852
4843
|
height: calc(var(--spacing) * 3);
|
|
4844
|
+
border-radius: calc(var(--radius) * 0.75);
|
|
4845
|
+
}
|
|
4846
|
+
.progress-bar__fill {
|
|
4847
|
+
border-radius: calc(var(--radius) * 0.75);
|
|
4853
4848
|
}
|
|
4854
4849
|
}
|
|
4855
4850
|
.progress-bar--default {
|
|
4856
|
-
--progress-bar-fill: var(--
|
|
4851
|
+
--progress-bar-fill: var(--default-foreground);
|
|
4857
4852
|
}
|
|
4858
4853
|
.progress-bar--accent {
|
|
4859
|
-
--progress-bar-fill: var(--
|
|
4854
|
+
--progress-bar-fill: var(--accent);
|
|
4860
4855
|
}
|
|
4861
4856
|
.progress-bar--success {
|
|
4862
|
-
--progress-bar-fill: var(--
|
|
4857
|
+
--progress-bar-fill: var(--success);
|
|
4863
4858
|
}
|
|
4864
4859
|
.progress-bar--warning {
|
|
4865
|
-
--progress-bar-fill: var(--
|
|
4860
|
+
--progress-bar-fill: var(--warning);
|
|
4866
4861
|
}
|
|
4867
4862
|
.progress-bar--danger {
|
|
4868
|
-
--progress-bar-fill: var(--
|
|
4863
|
+
--progress-bar-fill: var(--danger);
|
|
4869
4864
|
}
|
|
4870
4865
|
.progress-circle {
|
|
4871
4866
|
display: inline-flex;
|
|
4872
4867
|
align-items: center;
|
|
4873
4868
|
justify-content: center;
|
|
4874
|
-
--progress-circle-stroke: var(--
|
|
4875
|
-
--progress-circle-track-stroke: var(--
|
|
4869
|
+
--progress-circle-stroke: var(--accent);
|
|
4870
|
+
--progress-circle-track-stroke: var(--default);
|
|
4876
4871
|
.progress-circle__track {
|
|
4877
4872
|
width: calc(var(--spacing) * 7);
|
|
4878
4873
|
height: calc(var(--spacing) * 7);
|
|
@@ -4944,19 +4939,19 @@
|
|
|
4944
4939
|
}
|
|
4945
4940
|
}
|
|
4946
4941
|
.progress-circle--default {
|
|
4947
|
-
--progress-circle-stroke: var(--
|
|
4942
|
+
--progress-circle-stroke: var(--default-foreground);
|
|
4948
4943
|
}
|
|
4949
4944
|
.progress-circle--accent {
|
|
4950
|
-
--progress-circle-stroke: var(--
|
|
4945
|
+
--progress-circle-stroke: var(--accent);
|
|
4951
4946
|
}
|
|
4952
4947
|
.progress-circle--success {
|
|
4953
|
-
--progress-circle-stroke: var(--
|
|
4948
|
+
--progress-circle-stroke: var(--success);
|
|
4954
4949
|
}
|
|
4955
4950
|
.progress-circle--warning {
|
|
4956
|
-
--progress-circle-stroke: var(--
|
|
4951
|
+
--progress-circle-stroke: var(--warning);
|
|
4957
4952
|
}
|
|
4958
4953
|
.progress-circle--danger {
|
|
4959
|
-
--progress-circle-stroke: var(--
|
|
4954
|
+
--progress-circle-stroke: var(--danger);
|
|
4960
4955
|
}
|
|
4961
4956
|
.spinner {
|
|
4962
4957
|
pointer-events: none;
|
|
@@ -5052,12 +5047,12 @@
|
|
|
5052
5047
|
align-items: flex-start;
|
|
5053
5048
|
justify-content: flex-start;
|
|
5054
5049
|
gap: calc(var(--spacing) * 1.5);
|
|
5055
|
-
border-radius: calc(var(--radius) * 3);
|
|
5056
5050
|
background-color: var(--surface);
|
|
5057
5051
|
padding-inline: calc(var(--spacing) * 4);
|
|
5058
5052
|
padding-block: calc(var(--spacing) * 3);
|
|
5059
5053
|
--tw-shadow: var(--overlay-shadow);
|
|
5060
5054
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5055
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
5061
5056
|
}
|
|
5062
5057
|
.toast--bottom, .toast--bottom-start, .toast--bottom-end {
|
|
5063
5058
|
bottom: 0;
|
|
@@ -5205,25 +5200,25 @@
|
|
|
5205
5200
|
}
|
|
5206
5201
|
}
|
|
5207
5202
|
.toast--accent .toast__title {
|
|
5208
|
-
color: var(--accent);
|
|
5203
|
+
color: var(--accent-soft-foreground);
|
|
5209
5204
|
}
|
|
5210
5205
|
.toast--success .toast__title {
|
|
5211
|
-
color: var(--success);
|
|
5206
|
+
color: var(--success-soft-foreground);
|
|
5212
5207
|
}
|
|
5213
5208
|
.toast--success .toast__indicator {
|
|
5214
|
-
color: var(--success);
|
|
5209
|
+
color: var(--success-soft-foreground);
|
|
5215
5210
|
}
|
|
5216
5211
|
.toast--warning .toast__title {
|
|
5217
|
-
color: var(--warning);
|
|
5212
|
+
color: var(--warning-soft-foreground);
|
|
5218
5213
|
}
|
|
5219
5214
|
.toast--warning .toast__indicator {
|
|
5220
|
-
color: var(--warning);
|
|
5215
|
+
color: var(--warning-soft-foreground);
|
|
5221
5216
|
}
|
|
5222
5217
|
.toast--danger .toast__title {
|
|
5223
|
-
color: var(--danger);
|
|
5218
|
+
color: var(--danger-soft-foreground);
|
|
5224
5219
|
}
|
|
5225
5220
|
.toast--danger .toast__indicator {
|
|
5226
|
-
color: var(--danger);
|
|
5221
|
+
color: var(--danger-soft-foreground);
|
|
5227
5222
|
}
|
|
5228
5223
|
::view-transition-old(*), ::view-transition-new(*) {
|
|
5229
5224
|
will-change: translate, opacity;
|
|
@@ -5303,7 +5298,6 @@
|
|
|
5303
5298
|
&[data-selected="true"], &[data-indeterminate="true"] {
|
|
5304
5299
|
.checkbox__indicator {
|
|
5305
5300
|
border-color: var(--accent-foreground);
|
|
5306
|
-
background: var(--accent-hover);
|
|
5307
5301
|
}
|
|
5308
5302
|
}
|
|
5309
5303
|
[data-slot="checkbox-default-indicator--checkmark"] {
|
|
@@ -5357,13 +5351,17 @@
|
|
|
5357
5351
|
justify-content: center;
|
|
5358
5352
|
overflow: hidden;
|
|
5359
5353
|
border-radius: calc(var(--radius) * 0.75);
|
|
5354
|
+
border-style: var(--tw-border-style);
|
|
5355
|
+
border-width: 1px;
|
|
5356
|
+
border-width: var(--border-width-field);
|
|
5357
|
+
border-color: var(--field-border, var(--border));
|
|
5360
5358
|
background-color: var(--field-background, var(--default));
|
|
5361
5359
|
--tw-shadow: var(--field-shadow);
|
|
5362
5360
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5363
5361
|
--tw-outline-style: none;
|
|
5364
5362
|
outline-style: none;
|
|
5365
5363
|
-webkit-tap-highlight-color: transparent;
|
|
5366
|
-
transition: background-color 200ms var(--ease-out), transform 100ms var(--ease-out);
|
|
5364
|
+
transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 100ms var(--ease-out);
|
|
5367
5365
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
5368
5366
|
transition-property: none;
|
|
5369
5367
|
&::before, &::after {
|
|
@@ -5425,19 +5423,9 @@
|
|
|
5425
5423
|
--tw-ring-offset-width: var(--ring-offset-width);
|
|
5426
5424
|
}
|
|
5427
5425
|
.checkbox:hover &, .checkbox[data-hovered="true"] & {
|
|
5428
|
-
border-color: var(--field-border
|
|
5429
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
5430
|
-
border-color: color-mix(
|
|
5431
|
-
in oklab,
|
|
5432
|
-
var(--field-border, var(--border)) 88%,
|
|
5433
|
-
var(--field-foreground, var(--foreground)) 10%
|
|
5434
|
-
);
|
|
5435
|
-
}
|
|
5426
|
+
border-color: var(--field-border-hover);
|
|
5436
5427
|
&::before {
|
|
5437
|
-
background-color: var(--accent);
|
|
5438
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
5439
|
-
background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
5440
|
-
}
|
|
5428
|
+
background-color: var(--accent-hover);
|
|
5441
5429
|
}
|
|
5442
5430
|
}
|
|
5443
5431
|
.checkbox[aria-checked="true"] &, .checkbox[data-selected="true"] & {
|
|
@@ -5456,10 +5444,7 @@
|
|
|
5456
5444
|
color: var(--accent-foreground);
|
|
5457
5445
|
}
|
|
5458
5446
|
.checkbox:active[data-indeterminate="true"] &, .checkbox[data-pressed="true"][data-indeterminate="true"] & {
|
|
5459
|
-
background-color: var(--accent);
|
|
5460
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
5461
|
-
background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
5462
|
-
}
|
|
5447
|
+
background-color: var(--accent-hover);
|
|
5463
5448
|
}
|
|
5464
5449
|
.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not( [data-indeterminate="true"] ) &, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not( [data-indeterminate="true"] ) & {
|
|
5465
5450
|
outline-style: var(--tw-outline-style);
|
|
@@ -5520,16 +5505,9 @@
|
|
|
5520
5505
|
--tw-shadow: 0 0 #0000;
|
|
5521
5506
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5522
5507
|
background-color: var(--checkbox-control-bg);
|
|
5523
|
-
--checkbox-control-bg: var(--
|
|
5508
|
+
--checkbox-control-bg: var(--default);
|
|
5524
5509
|
.checkbox:hover &, .checkbox[data-hovered="true"] & {
|
|
5525
|
-
border-color: var(--field-border
|
|
5526
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
5527
|
-
border-color: color-mix(
|
|
5528
|
-
in oklab,
|
|
5529
|
-
var(--field-border, var(--border)) 88%,
|
|
5530
|
-
var(--field-foreground, var(--foreground)) 10%
|
|
5531
|
-
);
|
|
5532
|
-
}
|
|
5510
|
+
border-color: var(--field-border-hover);
|
|
5533
5511
|
}
|
|
5534
5512
|
}
|
|
5535
5513
|
.checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not( [data-indeterminate="true"] ) .checkbox__control {
|
|
@@ -5612,7 +5590,7 @@
|
|
|
5612
5590
|
--tw-outline-style: none;
|
|
5613
5591
|
outline-style: none;
|
|
5614
5592
|
border-width: var(--border-width-field);
|
|
5615
|
-
border-color: var(--
|
|
5593
|
+
border-color: var(--field-border);
|
|
5616
5594
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
5617
5595
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
5618
5596
|
transition-property: none;
|
|
@@ -5630,20 +5608,13 @@
|
|
|
5630
5608
|
}
|
|
5631
5609
|
@media (hover: hover) {
|
|
5632
5610
|
&:hover, &[data-hovered="true"] {
|
|
5633
|
-
background-color: var(--field-
|
|
5634
|
-
|
|
5635
|
-
background-color: color-mix(
|
|
5636
|
-
in oklab,
|
|
5637
|
-
var(--field-background, var(--default)) 90%,
|
|
5638
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
5639
|
-
);
|
|
5640
|
-
}
|
|
5641
|
-
border-color: var(--color-field-border-hover);
|
|
5611
|
+
background-color: var(--field-hover);
|
|
5612
|
+
border-color: var(--field-border-hover);
|
|
5642
5613
|
}
|
|
5643
5614
|
}
|
|
5644
5615
|
&[data-active="true"] {
|
|
5645
5616
|
z-index: 10;
|
|
5646
|
-
background-color: var(--field-
|
|
5617
|
+
background-color: var(--field-focus);
|
|
5647
5618
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
5648
5619
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5649
5620
|
--tw-ring-color: var(--focus);
|
|
@@ -5653,7 +5624,7 @@
|
|
|
5653
5624
|
--tw-ring-offset-width: 0px;
|
|
5654
5625
|
}
|
|
5655
5626
|
&[data-filled="true"] {
|
|
5656
|
-
background-color: var(--field-
|
|
5627
|
+
background-color: var(--field-focus);
|
|
5657
5628
|
}
|
|
5658
5629
|
&[data-disabled="true"] {
|
|
5659
5630
|
opacity: var(--disabled-opacity);
|
|
@@ -5674,7 +5645,7 @@
|
|
|
5674
5645
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
5675
5646
|
--tw-ring-offset-width: 0px;
|
|
5676
5647
|
}
|
|
5677
|
-
background-color: var(--
|
|
5648
|
+
background-color: var(--field-focus);
|
|
5678
5649
|
}
|
|
5679
5650
|
}
|
|
5680
5651
|
.input-otp__slot-value {
|
|
@@ -5706,23 +5677,23 @@
|
|
|
5706
5677
|
height: calc(var(--spacing) * 4);
|
|
5707
5678
|
width: 2px;
|
|
5708
5679
|
animation: caret-blink 1.2s ease-out infinite;
|
|
5709
|
-
border-radius:
|
|
5680
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
5710
5681
|
background-color: var(--field-placeholder, var(--muted));
|
|
5711
5682
|
}
|
|
5712
5683
|
.input-otp__separator {
|
|
5713
5684
|
height: 2px;
|
|
5714
5685
|
width: 6px;
|
|
5715
5686
|
flex-shrink: 0;
|
|
5716
|
-
border-radius:
|
|
5687
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
5717
5688
|
background-color: var(--separator);
|
|
5718
5689
|
}
|
|
5719
5690
|
.input-otp--secondary .input-otp__slot {
|
|
5720
5691
|
--tw-shadow: 0 0 #0000;
|
|
5721
5692
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5722
5693
|
background-color: var(--input-otp-slot-bg);
|
|
5723
|
-
--input-otp-slot-bg: var(--
|
|
5724
|
-
--input-otp-slot-bg-hover: var(--
|
|
5725
|
-
--input-otp-slot-bg-focus: var(--
|
|
5694
|
+
--input-otp-slot-bg: var(--default);
|
|
5695
|
+
--input-otp-slot-bg-hover: var(--default-hover);
|
|
5696
|
+
--input-otp-slot-bg-focus: var(--default);
|
|
5726
5697
|
@media (hover: hover) {
|
|
5727
5698
|
&:hover, &[data-hovered="true"] {
|
|
5728
5699
|
background-color: var(--input-otp-slot-bg-hover);
|
|
@@ -5764,7 +5735,7 @@
|
|
|
5764
5735
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
5765
5736
|
}
|
|
5766
5737
|
border-width: var(--border-width-field);
|
|
5767
|
-
border-color: var(--
|
|
5738
|
+
border-color: var(--field-border);
|
|
5768
5739
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
5769
5740
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
5770
5741
|
transition-property: none;
|
|
@@ -5782,15 +5753,8 @@
|
|
|
5782
5753
|
}
|
|
5783
5754
|
@media (hover: hover) {
|
|
5784
5755
|
&:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
|
|
5785
|
-
background-color: var(--field-
|
|
5786
|
-
|
|
5787
|
-
background-color: color-mix(
|
|
5788
|
-
in oklab,
|
|
5789
|
-
var(--field-background, var(--default)) 90%,
|
|
5790
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
5791
|
-
);
|
|
5792
|
-
}
|
|
5793
|
-
border-color: var(--color-field-border-hover);
|
|
5756
|
+
background-color: var(--field-hover);
|
|
5757
|
+
border-color: var(--field-border-hover);
|
|
5794
5758
|
}
|
|
5795
5759
|
}
|
|
5796
5760
|
&:focus, &[data-focused="true"] {
|
|
@@ -5801,8 +5765,8 @@
|
|
|
5801
5765
|
--tw-outline-style: none;
|
|
5802
5766
|
outline-style: none;
|
|
5803
5767
|
--tw-ring-offset-width: 0px;
|
|
5804
|
-
border-color: var(--
|
|
5805
|
-
background-color: var(--
|
|
5768
|
+
border-color: var(--field-border-focus);
|
|
5769
|
+
background-color: var(--field-focus);
|
|
5806
5770
|
}
|
|
5807
5771
|
&[data-invalid="true"] {
|
|
5808
5772
|
outline-style: var(--tw-outline-style);
|
|
@@ -5818,9 +5782,9 @@
|
|
|
5818
5782
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
5819
5783
|
--tw-ring-offset-width: 0px;
|
|
5820
5784
|
}
|
|
5821
|
-
background-color: var(--
|
|
5785
|
+
background-color: var(--field-focus);
|
|
5822
5786
|
}
|
|
5823
|
-
&[data-disabled="true"], &[aria-disabled="true"] {
|
|
5787
|
+
&:disabled, &[data-disabled="true"], &[aria-disabled="true"] {
|
|
5824
5788
|
opacity: var(--disabled-opacity);
|
|
5825
5789
|
cursor: var(--cursor-disabled);
|
|
5826
5790
|
pointer-events: none;
|
|
@@ -5830,9 +5794,9 @@
|
|
|
5830
5794
|
--tw-shadow: 0 0 #0000;
|
|
5831
5795
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
5832
5796
|
background-color: var(--input-bg);
|
|
5833
|
-
--input-bg: var(--
|
|
5834
|
-
--input-bg-hover: var(--
|
|
5835
|
-
--input-bg-focus: var(--
|
|
5797
|
+
--input-bg: var(--default);
|
|
5798
|
+
--input-bg-hover: var(--default-hover);
|
|
5799
|
+
--input-bg-focus: var(--default);
|
|
5836
5800
|
@media (hover: hover) {
|
|
5837
5801
|
&:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) {
|
|
5838
5802
|
background-color: var(--input-bg-hover);
|
|
@@ -5877,7 +5841,7 @@
|
|
|
5877
5841
|
--tw-outline-style: none;
|
|
5878
5842
|
outline-style: none;
|
|
5879
5843
|
border-width: var(--border-width-field);
|
|
5880
|
-
border-color: var(--
|
|
5844
|
+
border-color: var(--field-border);
|
|
5881
5845
|
&:has([data-slot="input-group-textarea"]) {
|
|
5882
5846
|
align-items: flex-start;
|
|
5883
5847
|
height: auto;
|
|
@@ -5899,15 +5863,8 @@
|
|
|
5899
5863
|
}
|
|
5900
5864
|
@media (hover: hover) {
|
|
5901
5865
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
5902
|
-
background-color: var(--field-
|
|
5903
|
-
|
|
5904
|
-
background-color: color-mix(
|
|
5905
|
-
in oklab,
|
|
5906
|
-
var(--field-background, var(--default)) 90%,
|
|
5907
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
5908
|
-
);
|
|
5909
|
-
}
|
|
5910
|
-
border-color: var(--color-field-border-hover);
|
|
5866
|
+
background-color: var(--field-hover);
|
|
5867
|
+
border-color: var(--field-border-hover);
|
|
5911
5868
|
}
|
|
5912
5869
|
}
|
|
5913
5870
|
&:has([data-slot="input-group-input"]:focus), &:has([data-slot="input-group-textarea"]:focus) {
|
|
@@ -5918,8 +5875,8 @@
|
|
|
5918
5875
|
--tw-outline-style: none;
|
|
5919
5876
|
outline-style: none;
|
|
5920
5877
|
--tw-ring-offset-width: 0px;
|
|
5921
|
-
border-color: var(--
|
|
5922
|
-
background-color: var(--
|
|
5878
|
+
border-color: var(--field-border-focus);
|
|
5879
|
+
background-color: var(--field-focus);
|
|
5923
5880
|
}
|
|
5924
5881
|
&[data-invalid="true"] {
|
|
5925
5882
|
outline-style: var(--tw-outline-style);
|
|
@@ -5935,7 +5892,7 @@
|
|
|
5935
5892
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
5936
5893
|
--tw-ring-offset-width: 0px;
|
|
5937
5894
|
}
|
|
5938
|
-
background-color: var(--
|
|
5895
|
+
background-color: var(--field-focus);
|
|
5939
5896
|
border-color: var(--color-field-border-invalid);
|
|
5940
5897
|
}
|
|
5941
5898
|
&[data-disabled="true"], &[aria-disabled="true"] {
|
|
@@ -5997,9 +5954,9 @@
|
|
|
5997
5954
|
padding-inline: calc(var(--spacing) * 3);
|
|
5998
5955
|
color: var(--field-placeholder, var(--muted));
|
|
5999
5956
|
border-width: var(--border-width-field);
|
|
6000
|
-
border-color: var(--
|
|
5957
|
+
border-color: var(--field-border);
|
|
6001
5958
|
border-style: solid;
|
|
6002
|
-
border-right-color: var(--
|
|
5959
|
+
border-right-color: var(--field-border);
|
|
6003
5960
|
border-left: none;
|
|
6004
5961
|
border-top: none;
|
|
6005
5962
|
border-bottom: none;
|
|
@@ -6036,9 +5993,9 @@
|
|
|
6036
5993
|
padding-inline: calc(var(--spacing) * 3);
|
|
6037
5994
|
color: var(--field-placeholder, var(--muted));
|
|
6038
5995
|
border-width: var(--border-width-field);
|
|
6039
|
-
border-color: var(--
|
|
5996
|
+
border-color: var(--field-border);
|
|
6040
5997
|
border-style: solid;
|
|
6041
|
-
border-left-color: var(--
|
|
5998
|
+
border-left-color: var(--field-border);
|
|
6042
5999
|
border-right: none;
|
|
6043
6000
|
border-top: none;
|
|
6044
6001
|
border-bottom: none;
|
|
@@ -6066,15 +6023,15 @@
|
|
|
6066
6023
|
--tw-shadow: 0 0 #0000;
|
|
6067
6024
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
6068
6025
|
background-color: var(--input-group-bg);
|
|
6069
|
-
--input-group-bg: var(--
|
|
6070
|
-
--input-group-bg-hover: var(--
|
|
6071
|
-
--input-group-bg-focus: var(--
|
|
6026
|
+
--input-group-bg: var(--default);
|
|
6027
|
+
--input-group-bg-hover: var(--default-hover);
|
|
6028
|
+
--input-group-bg-focus: var(--default);
|
|
6072
6029
|
@media (hover: hover) {
|
|
6073
6030
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
6074
6031
|
background-color: var(--input-group-bg-hover);
|
|
6075
6032
|
}
|
|
6076
6033
|
}
|
|
6077
|
-
&:focus
|
|
6034
|
+
&:has([data-slot="input-group-input"]:focus), &:has([data-slot="input-group-textarea"]:focus) {
|
|
6078
6035
|
background-color: var(--input-group-bg-focus);
|
|
6079
6036
|
}
|
|
6080
6037
|
&[data-invalid="true"] {
|
|
@@ -6113,9 +6070,6 @@
|
|
|
6113
6070
|
[data-slot="label"] {
|
|
6114
6071
|
width: fit-content;
|
|
6115
6072
|
}
|
|
6116
|
-
[data-slot="description"] {
|
|
6117
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
6118
|
-
}
|
|
6119
6073
|
}
|
|
6120
6074
|
.number-field__group {
|
|
6121
6075
|
display: grid;
|
|
@@ -6134,7 +6088,7 @@
|
|
|
6134
6088
|
--tw-outline-style: none;
|
|
6135
6089
|
outline-style: none;
|
|
6136
6090
|
border-width: var(--border-width-field);
|
|
6137
|
-
border-color: var(--
|
|
6091
|
+
border-color: var(--field-border);
|
|
6138
6092
|
grid-template-columns: 40px 1fr 40px;
|
|
6139
6093
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
6140
6094
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
@@ -6153,15 +6107,8 @@
|
|
|
6153
6107
|
}
|
|
6154
6108
|
@media (hover: hover) {
|
|
6155
6109
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
6156
|
-
background-color: var(--field-
|
|
6157
|
-
|
|
6158
|
-
background-color: color-mix(
|
|
6159
|
-
in oklab,
|
|
6160
|
-
var(--field-background, var(--default)) 90%,
|
|
6161
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
6162
|
-
);
|
|
6163
|
-
}
|
|
6164
|
-
border-color: var(--color-field-border-hover);
|
|
6110
|
+
background-color: var(--field-hover);
|
|
6111
|
+
border-color: var(--field-border-hover);
|
|
6165
6112
|
}
|
|
6166
6113
|
}
|
|
6167
6114
|
&[data-focus-within="true"], &:focus-within {
|
|
@@ -6172,8 +6119,8 @@
|
|
|
6172
6119
|
--tw-outline-style: none;
|
|
6173
6120
|
outline-style: none;
|
|
6174
6121
|
--tw-ring-offset-width: 0px;
|
|
6175
|
-
border-color: var(--
|
|
6176
|
-
background-color: var(--
|
|
6122
|
+
border-color: var(--field-border-focus);
|
|
6123
|
+
background-color: var(--field-focus);
|
|
6177
6124
|
}
|
|
6178
6125
|
&[data-invalid="true"] {
|
|
6179
6126
|
outline-style: var(--tw-outline-style);
|
|
@@ -6189,7 +6136,7 @@
|
|
|
6189
6136
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
6190
6137
|
--tw-ring-offset-width: 0px;
|
|
6191
6138
|
}
|
|
6192
|
-
background-color: var(--
|
|
6139
|
+
background-color: var(--field-focus);
|
|
6193
6140
|
border-color: var(--color-field-border-invalid);
|
|
6194
6141
|
}
|
|
6195
6142
|
&[data-disabled="true"], &[aria-disabled="true"] {
|
|
@@ -6243,7 +6190,7 @@
|
|
|
6243
6190
|
--tw-outline-style: none;
|
|
6244
6191
|
outline-style: none;
|
|
6245
6192
|
border-width: var(--border-width-field);
|
|
6246
|
-
border-color: var(--
|
|
6193
|
+
border-color: var(--field-border);
|
|
6247
6194
|
border-style: solid;
|
|
6248
6195
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth);
|
|
6249
6196
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
@@ -6306,9 +6253,9 @@
|
|
|
6306
6253
|
--tw-shadow: 0 0 #0000;
|
|
6307
6254
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
6308
6255
|
background-color: var(--number-field-group-bg);
|
|
6309
|
-
--number-field-group-bg: var(--
|
|
6310
|
-
--number-field-group-bg-hover: var(--
|
|
6311
|
-
--number-field-group-bg-focus: var(--
|
|
6256
|
+
--number-field-group-bg: var(--default);
|
|
6257
|
+
--number-field-group-bg-hover: var(--default-hover);
|
|
6258
|
+
--number-field-group-bg-focus: var(--default);
|
|
6312
6259
|
@media (hover: hover) {
|
|
6313
6260
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
6314
6261
|
background-color: var(--number-field-group-bg-hover);
|
|
@@ -6362,17 +6309,10 @@
|
|
|
6362
6309
|
--tw-shadow: 0 0 #0000;
|
|
6363
6310
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
6364
6311
|
background-color: var(--radio-control-bg);
|
|
6365
|
-
--radio-control-bg: var(--
|
|
6366
|
-
--radio-control-bg-hover: var(--
|
|
6312
|
+
--radio-control-bg: var(--default);
|
|
6313
|
+
--radio-control-bg-hover: var(--default-hover);
|
|
6367
6314
|
.radio:hover &, .radio[data-hovered="true"] & {
|
|
6368
|
-
border-color: var(--field-border
|
|
6369
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
6370
|
-
border-color: color-mix(
|
|
6371
|
-
in oklab,
|
|
6372
|
-
var(--field-border, var(--border)) 88%,
|
|
6373
|
-
var(--field-foreground, var(--foreground)) 10%
|
|
6374
|
-
);
|
|
6375
|
-
}
|
|
6315
|
+
border-color: var(--field-border-hover);
|
|
6376
6316
|
}
|
|
6377
6317
|
.radio:not([aria-checked="true"]):not([data-selected="true"]) & .radio__indicator:empty::before {
|
|
6378
6318
|
background-color: var(--radio-control-bg);
|
|
@@ -6416,10 +6356,11 @@
|
|
|
6416
6356
|
flex-shrink: 0;
|
|
6417
6357
|
align-items: center;
|
|
6418
6358
|
justify-content: center;
|
|
6419
|
-
border-radius: calc(
|
|
6359
|
+
border-radius: calc(var(--radius) * 1);
|
|
6420
6360
|
border-style: var(--tw-border-style);
|
|
6421
6361
|
border-width: 1px;
|
|
6422
6362
|
border-width: var(--border-width-field);
|
|
6363
|
+
border-color: var(--field-border, var(--border));
|
|
6423
6364
|
background-color: var(--field-background, var(--default));
|
|
6424
6365
|
--tw-shadow: var(--field-shadow);
|
|
6425
6366
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -6454,25 +6395,11 @@
|
|
|
6454
6395
|
--tw-ring-offset-width: var(--ring-offset-width);
|
|
6455
6396
|
}
|
|
6456
6397
|
.radio:hover &, .radio[data-hovered="true"] & {
|
|
6457
|
-
border-color: var(--field-border
|
|
6458
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
6459
|
-
border-color: color-mix(
|
|
6460
|
-
in oklab,
|
|
6461
|
-
var(--field-border, var(--border)) 88%,
|
|
6462
|
-
var(--field-foreground, var(--foreground)) 10%
|
|
6463
|
-
);
|
|
6464
|
-
}
|
|
6398
|
+
border-color: var(--field-border-hover);
|
|
6465
6399
|
}
|
|
6466
6400
|
.radio:hover:not([aria-checked="true"]):not([data-selected="true"]) &, .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) & {
|
|
6467
6401
|
.radio__indicator:empty::before {
|
|
6468
|
-
background-color: var(--field-
|
|
6469
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
6470
|
-
background-color: color-mix(
|
|
6471
|
-
in oklab,
|
|
6472
|
-
var(--field-background, var(--default)) 90%,
|
|
6473
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
6474
|
-
);
|
|
6475
|
-
}
|
|
6402
|
+
background-color: var(--field-hover);
|
|
6476
6403
|
}
|
|
6477
6404
|
}
|
|
6478
6405
|
.radio:active &, .radio[data-pressed="true"] & {
|
|
@@ -6486,10 +6413,7 @@
|
|
|
6486
6413
|
background-color: var(--accent);
|
|
6487
6414
|
}
|
|
6488
6415
|
.radio:active[data-selected="true"] &, .radio[data-pressed="true"][data-selected="true"] & {
|
|
6489
|
-
background-color: var(--accent);
|
|
6490
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
6491
|
-
background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
6492
|
-
}
|
|
6416
|
+
background-color: var(--accent-hover);
|
|
6493
6417
|
}
|
|
6494
6418
|
.radio[data-invalid="true"] &, .radio[aria-invalid="true"] & {
|
|
6495
6419
|
outline-style: var(--tw-outline-style);
|
|
@@ -6532,7 +6456,7 @@
|
|
|
6532
6456
|
}
|
|
6533
6457
|
.radio__indicator:empty::before {
|
|
6534
6458
|
content: "";
|
|
6535
|
-
border-radius: calc(
|
|
6459
|
+
border-radius: calc(var(--radius) * 1);
|
|
6536
6460
|
background-color: var(--field-background, var(--default));
|
|
6537
6461
|
width: 100%;
|
|
6538
6462
|
height: 100%;
|
|
@@ -6579,9 +6503,6 @@
|
|
|
6579
6503
|
display: none;
|
|
6580
6504
|
}
|
|
6581
6505
|
}
|
|
6582
|
-
[data-slot="description"] {
|
|
6583
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
6584
|
-
}
|
|
6585
6506
|
}
|
|
6586
6507
|
.textfield--full-width {
|
|
6587
6508
|
width: 100%;
|
|
@@ -6601,9 +6522,6 @@
|
|
|
6601
6522
|
[data-slot="label"] {
|
|
6602
6523
|
width: fit-content;
|
|
6603
6524
|
}
|
|
6604
|
-
[data-slot="description"] {
|
|
6605
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
6606
|
-
}
|
|
6607
6525
|
&[data-empty="true"] {
|
|
6608
6526
|
[data-slot="search-field-clear-button"] {
|
|
6609
6527
|
pointer-events: none;
|
|
@@ -6629,7 +6547,7 @@
|
|
|
6629
6547
|
--tw-outline-style: none;
|
|
6630
6548
|
outline-style: none;
|
|
6631
6549
|
border-width: var(--border-width-field);
|
|
6632
|
-
border-color: var(--
|
|
6550
|
+
border-color: var(--field-border);
|
|
6633
6551
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
6634
6552
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
6635
6553
|
transition-property: none;
|
|
@@ -6647,15 +6565,8 @@
|
|
|
6647
6565
|
}
|
|
6648
6566
|
@media (hover: hover) {
|
|
6649
6567
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
6650
|
-
background-color: var(--field-
|
|
6651
|
-
|
|
6652
|
-
background-color: color-mix(
|
|
6653
|
-
in oklab,
|
|
6654
|
-
var(--field-background, var(--default)) 90%,
|
|
6655
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
6656
|
-
);
|
|
6657
|
-
}
|
|
6658
|
-
border-color: var(--color-field-border-hover);
|
|
6568
|
+
background-color: var(--field-hover);
|
|
6569
|
+
border-color: var(--field-border-hover);
|
|
6659
6570
|
}
|
|
6660
6571
|
}
|
|
6661
6572
|
&[data-focus-within="true"], &:focus-within {
|
|
@@ -6681,7 +6592,7 @@
|
|
|
6681
6592
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
6682
6593
|
--tw-ring-offset-width: 0px;
|
|
6683
6594
|
}
|
|
6684
|
-
background-color: var(--
|
|
6595
|
+
background-color: var(--field-focus);
|
|
6685
6596
|
border-color: var(--color-field-border-invalid);
|
|
6686
6597
|
}
|
|
6687
6598
|
&[data-disabled="true"], &[aria-disabled="true"] {
|
|
@@ -6750,9 +6661,9 @@
|
|
|
6750
6661
|
--tw-shadow: 0 0 #0000;
|
|
6751
6662
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
6752
6663
|
background-color: var(--search-field-group-bg);
|
|
6753
|
-
--search-field-group-bg: var(--
|
|
6754
|
-
--search-field-group-bg-hover: var(--
|
|
6755
|
-
--search-field-group-bg-focus: var(--
|
|
6664
|
+
--search-field-group-bg: var(--default);
|
|
6665
|
+
--search-field-group-bg-hover: var(--default-hover);
|
|
6666
|
+
--search-field-group-bg-focus: var(--default);
|
|
6756
6667
|
@media (hover: hover) {
|
|
6757
6668
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
6758
6669
|
background-color: var(--search-field-group-bg-hover);
|
|
@@ -6811,7 +6722,7 @@
|
|
|
6811
6722
|
}
|
|
6812
6723
|
min-height: 38px;
|
|
6813
6724
|
border-width: var(--border-width-field);
|
|
6814
|
-
border-color: var(--
|
|
6725
|
+
border-color: var(--field-border);
|
|
6815
6726
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
6816
6727
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
6817
6728
|
transition-property: none;
|
|
@@ -6829,15 +6740,8 @@
|
|
|
6829
6740
|
}
|
|
6830
6741
|
@media (hover: hover) {
|
|
6831
6742
|
&:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
|
|
6832
|
-
background-color: var(--field-
|
|
6833
|
-
|
|
6834
|
-
background-color: color-mix(
|
|
6835
|
-
in oklab,
|
|
6836
|
-
var(--field-background, var(--default)) 90%,
|
|
6837
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
6838
|
-
);
|
|
6839
|
-
}
|
|
6840
|
-
border-color: var(--color-field-border-hover);
|
|
6743
|
+
background-color: var(--field-hover);
|
|
6744
|
+
border-color: var(--field-border-hover);
|
|
6841
6745
|
}
|
|
6842
6746
|
}
|
|
6843
6747
|
&:focus, &[data-focused="true"] {
|
|
@@ -6848,8 +6752,8 @@
|
|
|
6848
6752
|
--tw-outline-style: none;
|
|
6849
6753
|
outline-style: none;
|
|
6850
6754
|
--tw-ring-offset-width: 0px;
|
|
6851
|
-
border-color: var(--
|
|
6852
|
-
background-color: var(--
|
|
6755
|
+
border-color: var(--field-border-focus);
|
|
6756
|
+
background-color: var(--field-focus);
|
|
6853
6757
|
}
|
|
6854
6758
|
&[data-invalid="true"] {
|
|
6855
6759
|
outline-style: var(--tw-outline-style);
|
|
@@ -6865,9 +6769,9 @@
|
|
|
6865
6769
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
6866
6770
|
--tw-ring-offset-width: 0px;
|
|
6867
6771
|
}
|
|
6868
|
-
background-color: var(--
|
|
6772
|
+
background-color: var(--field-focus);
|
|
6869
6773
|
}
|
|
6870
|
-
&[data-disabled="true"], &[aria-disabled="true"] {
|
|
6774
|
+
&:disabled, &[data-disabled="true"], &[aria-disabled="true"] {
|
|
6871
6775
|
opacity: var(--disabled-opacity);
|
|
6872
6776
|
cursor: var(--cursor-disabled);
|
|
6873
6777
|
pointer-events: none;
|
|
@@ -6877,9 +6781,9 @@
|
|
|
6877
6781
|
--tw-shadow: 0 0 #0000;
|
|
6878
6782
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
6879
6783
|
background-color: var(--textarea-bg);
|
|
6880
|
-
--textarea-bg: var(--
|
|
6881
|
-
--textarea-bg-hover: var(--
|
|
6882
|
-
--textarea-bg-focus: var(--
|
|
6784
|
+
--textarea-bg: var(--default);
|
|
6785
|
+
--textarea-bg-hover: var(--default-hover);
|
|
6786
|
+
--textarea-bg-focus: var(--default);
|
|
6883
6787
|
@media (hover: hover) {
|
|
6884
6788
|
&:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
|
|
6885
6789
|
background-color: var(--textarea-bg-hover);
|
|
@@ -6910,7 +6814,7 @@
|
|
|
6910
6814
|
}
|
|
6911
6815
|
.calendar {
|
|
6912
6816
|
width: calc(var(--spacing) * 63);
|
|
6913
|
-
max-width:
|
|
6817
|
+
max-width: calc(var(--spacing) * 63);
|
|
6914
6818
|
container-type: inline-size;
|
|
6915
6819
|
}
|
|
6916
6820
|
.calendar__header {
|
|
@@ -6939,8 +6843,8 @@
|
|
|
6939
6843
|
height: calc(var(--spacing) * 6);
|
|
6940
6844
|
align-items: center;
|
|
6941
6845
|
justify-content: center;
|
|
6942
|
-
border-radius: calc(
|
|
6943
|
-
color: var(--accent);
|
|
6846
|
+
border-radius: calc(var(--radius) * 2);
|
|
6847
|
+
color: var(--accent-soft-foreground);
|
|
6944
6848
|
will-change: scale;
|
|
6945
6849
|
transition: transform 250ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out), opacity 150ms var(--ease-out);
|
|
6946
6850
|
transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
@@ -6962,7 +6866,7 @@
|
|
|
6962
6866
|
@media (hover: hover) {
|
|
6963
6867
|
&:hover, &[data-hovered="true"] {
|
|
6964
6868
|
background-color: var(--default);
|
|
6965
|
-
color: var(--accent);
|
|
6869
|
+
color: var(--accent-soft-foreground);
|
|
6966
6870
|
}
|
|
6967
6871
|
}
|
|
6968
6872
|
&:active, &[data-pressed="true"] {
|
|
@@ -7075,7 +6979,13 @@
|
|
|
7075
6979
|
--tw-ring-offset-width: var(--ring-offset-width);
|
|
7076
6980
|
}
|
|
7077
6981
|
&[data-today="true"] {
|
|
7078
|
-
color: var(--accent);
|
|
6982
|
+
background-color: var(--accent-soft);
|
|
6983
|
+
color: var(--accent-soft-foreground);
|
|
6984
|
+
@media (hover: hover) {
|
|
6985
|
+
&:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) {
|
|
6986
|
+
background-color: var(--accent-soft-hover);
|
|
6987
|
+
}
|
|
6988
|
+
}
|
|
7079
6989
|
}
|
|
7080
6990
|
&[data-selected="true"] {
|
|
7081
6991
|
background-color: var(--accent);
|
|
@@ -7085,10 +6995,7 @@
|
|
|
7085
6995
|
background-color: var(--default);
|
|
7086
6996
|
transform: scale(0.95);
|
|
7087
6997
|
&[data-selected="true"] {
|
|
7088
|
-
background-color: var(--accent);
|
|
7089
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
7090
|
-
background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
7091
|
-
}
|
|
6998
|
+
background-color: var(--accent-hover);
|
|
7092
6999
|
}
|
|
7093
7000
|
}
|
|
7094
7001
|
@media (hover: hover) {
|
|
@@ -7123,7 +7030,7 @@
|
|
|
7123
7030
|
height: 3px;
|
|
7124
7031
|
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
|
|
7125
7032
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
7126
|
-
border-radius: calc(
|
|
7033
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
7127
7034
|
background-color: var(--muted);
|
|
7128
7035
|
[data-selected="true"] > & {
|
|
7129
7036
|
background-color: var(--accent-foreground);
|
|
@@ -7131,7 +7038,7 @@
|
|
|
7131
7038
|
}
|
|
7132
7039
|
.range-calendar {
|
|
7133
7040
|
width: calc(var(--spacing) * 63);
|
|
7134
|
-
max-width:
|
|
7041
|
+
max-width: calc(var(--spacing) * 63);
|
|
7135
7042
|
container-type: inline-size;
|
|
7136
7043
|
}
|
|
7137
7044
|
.range-calendar__header {
|
|
@@ -7160,8 +7067,8 @@
|
|
|
7160
7067
|
height: calc(var(--spacing) * 6);
|
|
7161
7068
|
align-items: center;
|
|
7162
7069
|
justify-content: center;
|
|
7163
|
-
border-radius: calc(
|
|
7164
|
-
color: var(--accent);
|
|
7070
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
7071
|
+
color: var(--accent-soft-foreground);
|
|
7165
7072
|
will-change: scale;
|
|
7166
7073
|
transition: transform 250ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out), opacity 150ms var(--ease-out);
|
|
7167
7074
|
transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
@@ -7183,7 +7090,7 @@
|
|
|
7183
7090
|
@media (hover: hover) {
|
|
7184
7091
|
&:hover, &[data-hovered="true"] {
|
|
7185
7092
|
background-color: var(--default);
|
|
7186
|
-
color: var(--accent);
|
|
7093
|
+
color: var(--accent-soft-foreground);
|
|
7187
7094
|
}
|
|
7188
7095
|
}
|
|
7189
7096
|
&:active, &[data-pressed="true"] {
|
|
@@ -7254,7 +7161,7 @@
|
|
|
7254
7161
|
z-index: 1;
|
|
7255
7162
|
margin-inline: calc(var(--spacing) * 0);
|
|
7256
7163
|
margin-block: 2px;
|
|
7257
|
-
border-radius: calc(
|
|
7164
|
+
border-radius: calc(var(--radius) * 3);
|
|
7258
7165
|
padding: calc(var(--spacing) * 0);
|
|
7259
7166
|
--tw-outline-style: none;
|
|
7260
7167
|
outline-style: none;
|
|
@@ -7282,7 +7189,7 @@
|
|
|
7282
7189
|
width: 100%;
|
|
7283
7190
|
align-items: center;
|
|
7284
7191
|
justify-content: center;
|
|
7285
|
-
border-radius: calc(
|
|
7192
|
+
border-radius: calc(var(--radius) * 3);
|
|
7286
7193
|
font-size: var(--text-sm);
|
|
7287
7194
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
7288
7195
|
--tw-font-weight: var(--font-weight-medium);
|
|
@@ -7323,30 +7230,35 @@
|
|
|
7323
7230
|
}
|
|
7324
7231
|
&[data-today="true"] {
|
|
7325
7232
|
.range-calendar__cell-button {
|
|
7326
|
-
color: var(--accent);
|
|
7233
|
+
background-color: var(--accent-soft);
|
|
7234
|
+
color: var(--accent-soft-foreground);
|
|
7235
|
+
}
|
|
7236
|
+
@media (hover: hover) {
|
|
7237
|
+
&:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) {
|
|
7238
|
+
.range-calendar__cell-button {
|
|
7239
|
+
background-color: var(--accent-soft-hover);
|
|
7240
|
+
}
|
|
7241
|
+
}
|
|
7327
7242
|
}
|
|
7328
7243
|
}
|
|
7329
7244
|
&[data-selected="true"]:not([data-outside-month="true"]) {
|
|
7330
7245
|
border-radius: 0;
|
|
7331
|
-
background-color: var(--accent);
|
|
7332
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
7333
|
-
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
7334
|
-
}
|
|
7246
|
+
background-color: var(--accent-soft);
|
|
7335
7247
|
}
|
|
7336
7248
|
&[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) {
|
|
7337
7249
|
border-start-start-radius: calc(var(--radius) * 1);
|
|
7338
7250
|
border-end-start-radius: calc(var(--radius) * 1);
|
|
7339
7251
|
&[data-selection-start="true"] {
|
|
7340
|
-
border-start-start-radius: calc(
|
|
7341
|
-
border-end-start-radius: calc(
|
|
7252
|
+
border-start-start-radius: calc(var(--radius) * 3);
|
|
7253
|
+
border-end-start-radius: calc(var(--radius) * 3);
|
|
7342
7254
|
}
|
|
7343
7255
|
}
|
|
7344
7256
|
&[data-selected="true"]:is(td:last-child > *, td:has(+ [aria-disabled]) > *) {
|
|
7345
7257
|
border-start-end-radius: calc(var(--radius) * 1);
|
|
7346
7258
|
border-end-end-radius: calc(var(--radius) * 1);
|
|
7347
7259
|
&[data-selection-end="true"] {
|
|
7348
|
-
border-start-end-radius: calc(
|
|
7349
|
-
border-end-end-radius: calc(
|
|
7260
|
+
border-start-end-radius: calc(var(--radius) * 3);
|
|
7261
|
+
border-end-end-radius: calc(var(--radius) * 3);
|
|
7350
7262
|
}
|
|
7351
7263
|
}
|
|
7352
7264
|
&[data-selection-start="true"]:not([data-outside-month="true"]), &[data-selection-end="true"]:not([data-outside-month="true"]) {
|
|
@@ -7357,12 +7269,12 @@
|
|
|
7357
7269
|
}
|
|
7358
7270
|
}
|
|
7359
7271
|
&[data-selection-start="true"]:not([data-outside-month="true"]) {
|
|
7360
|
-
border-top-left-radius: calc(
|
|
7361
|
-
border-bottom-left-radius: calc(
|
|
7272
|
+
border-top-left-radius: calc(var(--radius) * 3);
|
|
7273
|
+
border-bottom-left-radius: calc(var(--radius) * 3);
|
|
7362
7274
|
}
|
|
7363
7275
|
&[data-selection-end="true"]:not([data-outside-month="true"]) {
|
|
7364
|
-
border-top-right-radius: calc(
|
|
7365
|
-
border-bottom-right-radius: calc(
|
|
7276
|
+
border-top-right-radius: calc(var(--radius) * 3);
|
|
7277
|
+
border-bottom-right-radius: calc(var(--radius) * 3);
|
|
7366
7278
|
}
|
|
7367
7279
|
&:active, &[data-pressed="true"] {
|
|
7368
7280
|
.range-calendar__cell-button {
|
|
@@ -7370,10 +7282,7 @@
|
|
|
7370
7282
|
}
|
|
7371
7283
|
&[data-selection-start="true"], &[data-selection-end="true"] {
|
|
7372
7284
|
.range-calendar__cell-button {
|
|
7373
|
-
background-color: var(--accent);
|
|
7374
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
7375
|
-
background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
7376
|
-
}
|
|
7285
|
+
background-color: var(--accent-hover);
|
|
7377
7286
|
}
|
|
7378
7287
|
}
|
|
7379
7288
|
}
|
|
@@ -7410,16 +7319,16 @@
|
|
|
7410
7319
|
border-start-start-radius: calc(var(--radius) * 1);
|
|
7411
7320
|
border-end-start-radius: calc(var(--radius) * 1);
|
|
7412
7321
|
&[data-outside-month="true"], &[data-selection-start="true"] {
|
|
7413
|
-
border-start-start-radius: calc(
|
|
7414
|
-
border-end-start-radius: calc(
|
|
7322
|
+
border-start-start-radius: calc(var(--radius) * 3);
|
|
7323
|
+
border-end-start-radius: calc(var(--radius) * 3);
|
|
7415
7324
|
}
|
|
7416
7325
|
}
|
|
7417
7326
|
.range-calendar__grid-body td:has(> .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"] ) > .range-calendar__cell[data-selected="true"] {
|
|
7418
7327
|
border-start-end-radius: calc(var(--radius) * 1);
|
|
7419
7328
|
border-end-end-radius: calc(var(--radius) * 1);
|
|
7420
7329
|
&[data-outside-month="true"], &[data-selection-end="true"] {
|
|
7421
|
-
border-start-end-radius: calc(
|
|
7422
|
-
border-end-end-radius: calc(
|
|
7330
|
+
border-start-end-radius: calc(var(--radius) * 3);
|
|
7331
|
+
border-end-end-radius: calc(var(--radius) * 3);
|
|
7423
7332
|
}
|
|
7424
7333
|
}
|
|
7425
7334
|
.range-calendar__cell-indicator {
|
|
@@ -7430,7 +7339,7 @@
|
|
|
7430
7339
|
height: 3px;
|
|
7431
7340
|
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
|
|
7432
7341
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
7433
|
-
border-radius: calc(
|
|
7342
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
7434
7343
|
background-color: var(--muted);
|
|
7435
7344
|
[data-selected="true"] > & {
|
|
7436
7345
|
background-color: var(--accent-foreground);
|
|
@@ -7524,7 +7433,7 @@
|
|
|
7524
7433
|
.calendar-year-picker__trigger-indicator {
|
|
7525
7434
|
font-size: var(--text-xs);
|
|
7526
7435
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
7527
|
-
color: var(--accent);
|
|
7436
|
+
color: var(--accent-soft-foreground);
|
|
7528
7437
|
transition: transform 150ms var(--ease-out);
|
|
7529
7438
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
7530
7439
|
transition-property: none;
|
|
@@ -7545,7 +7454,7 @@
|
|
|
7545
7454
|
transform: rotate(90deg);
|
|
7546
7455
|
}
|
|
7547
7456
|
.calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading {
|
|
7548
|
-
color: var(--accent);
|
|
7457
|
+
color: var(--accent-soft-foreground);
|
|
7549
7458
|
}
|
|
7550
7459
|
.calendar-year-picker__year-grid {
|
|
7551
7460
|
pointer-events: none;
|
|
@@ -7558,32 +7467,11 @@
|
|
|
7558
7467
|
overflow-y: auto;
|
|
7559
7468
|
padding: calc(var(--spacing) * 1);
|
|
7560
7469
|
opacity: 0%;
|
|
7470
|
+
scrollbar-width: var(--scrollbar-width);
|
|
7471
|
+
scrollbar-color: var(--scrollbar-color);
|
|
7472
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
7561
7473
|
grid-template-columns: repeat(3, 1fr);
|
|
7562
7474
|
will-change: opacity;
|
|
7563
|
-
scrollbar-width: thin;
|
|
7564
|
-
scrollbar-color: oklch(0% 0 0 / 0.15) transparent;
|
|
7565
|
-
&::-webkit-scrollbar {
|
|
7566
|
-
width: 6px;
|
|
7567
|
-
}
|
|
7568
|
-
&::-webkit-scrollbar-track {
|
|
7569
|
-
background: transparent;
|
|
7570
|
-
}
|
|
7571
|
-
&::-webkit-scrollbar-thumb {
|
|
7572
|
-
background: oklch(0% 0 0 / 0.15);
|
|
7573
|
-
border-radius: 3px;
|
|
7574
|
-
}
|
|
7575
|
-
&::-webkit-scrollbar-thumb:hover {
|
|
7576
|
-
background: oklch(0% 0 0 / 0.25);
|
|
7577
|
-
}
|
|
7578
|
-
:is([data-theme="dark"], .dark) & {
|
|
7579
|
-
scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
|
|
7580
|
-
&::-webkit-scrollbar-thumb {
|
|
7581
|
-
background: oklch(100% 0 0 / 0.15);
|
|
7582
|
-
}
|
|
7583
|
-
&::-webkit-scrollbar-thumb:hover {
|
|
7584
|
-
background: oklch(100% 0 0 / 0.25);
|
|
7585
|
-
}
|
|
7586
|
-
}
|
|
7587
7475
|
}
|
|
7588
7476
|
.calendar-year-picker__year-grid[data-open="true"] {
|
|
7589
7477
|
pointer-events: auto;
|
|
@@ -7607,11 +7495,11 @@
|
|
|
7607
7495
|
.calendar-year-picker__year-cell {
|
|
7608
7496
|
position: relative;
|
|
7609
7497
|
display: inline-flex;
|
|
7498
|
+
height: calc(var(--spacing) * 8);
|
|
7610
7499
|
align-items: center;
|
|
7611
7500
|
justify-content: center;
|
|
7612
|
-
border-radius: calc(
|
|
7501
|
+
border-radius: calc(var(--radius) * 3);
|
|
7613
7502
|
padding-inline: calc(var(--spacing) * 2.5);
|
|
7614
|
-
padding-block: calc(var(--spacing) * 1.5);
|
|
7615
7503
|
font-size: var(--text-sm);
|
|
7616
7504
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
7617
7505
|
--tw-font-weight: var(--font-weight-medium);
|
|
@@ -7651,10 +7539,7 @@
|
|
|
7651
7539
|
color: var(--accent-foreground);
|
|
7652
7540
|
@media (hover: hover) and (pointer: fine) {
|
|
7653
7541
|
&:is(:hover, [data-hovered="true"]) {
|
|
7654
|
-
background-color: var(--accent);
|
|
7655
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
7656
|
-
background-color: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
7657
|
-
}
|
|
7542
|
+
background-color: var(--accent-hover);
|
|
7658
7543
|
}
|
|
7659
7544
|
}
|
|
7660
7545
|
}
|
|
@@ -7682,9 +7567,6 @@
|
|
|
7682
7567
|
[data-slot="label"] {
|
|
7683
7568
|
width: fit-content;
|
|
7684
7569
|
}
|
|
7685
|
-
[data-slot="description"] {
|
|
7686
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
7687
|
-
}
|
|
7688
7570
|
}
|
|
7689
7571
|
.date-field--full-width {
|
|
7690
7572
|
width: 100%;
|
|
@@ -7701,9 +7583,6 @@
|
|
|
7701
7583
|
[data-slot="label"] {
|
|
7702
7584
|
width: fit-content;
|
|
7703
7585
|
}
|
|
7704
|
-
[data-slot="description"] {
|
|
7705
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
7706
|
-
}
|
|
7707
7586
|
}
|
|
7708
7587
|
.time-field--full-width {
|
|
7709
7588
|
width: 100%;
|
|
@@ -7725,7 +7604,7 @@
|
|
|
7725
7604
|
--tw-outline-style: none;
|
|
7726
7605
|
outline-style: none;
|
|
7727
7606
|
border-width: var(--border-width-field);
|
|
7728
|
-
border-color: var(--
|
|
7607
|
+
border-color: var(--field-border);
|
|
7729
7608
|
transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
7730
7609
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
7731
7610
|
transition-property: none;
|
|
@@ -7743,15 +7622,8 @@
|
|
|
7743
7622
|
}
|
|
7744
7623
|
@media (hover: hover) {
|
|
7745
7624
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
7746
|
-
background-color: var(--field-
|
|
7747
|
-
|
|
7748
|
-
background-color: color-mix(
|
|
7749
|
-
in oklab,
|
|
7750
|
-
var(--field-background, var(--default)) 90%,
|
|
7751
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
7752
|
-
);
|
|
7753
|
-
}
|
|
7754
|
-
border-color: var(--color-field-border-hover);
|
|
7625
|
+
background-color: var(--field-hover);
|
|
7626
|
+
border-color: var(--field-border-hover);
|
|
7755
7627
|
}
|
|
7756
7628
|
}
|
|
7757
7629
|
&[data-focus-within="true"]:not( :has( [data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"] ) ), &:focus-within:not( :has( [data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"] ) ) {
|
|
@@ -7777,7 +7649,7 @@
|
|
|
7777
7649
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
7778
7650
|
--tw-ring-offset-width: 0px;
|
|
7779
7651
|
}
|
|
7780
|
-
background-color: var(--
|
|
7652
|
+
background-color: var(--field-focus);
|
|
7781
7653
|
border-color: var(--color-field-border-invalid);
|
|
7782
7654
|
}
|
|
7783
7655
|
&[data-disabled="true"], &[aria-disabled="true"] {
|
|
@@ -7836,13 +7708,13 @@
|
|
|
7836
7708
|
display: flex;
|
|
7837
7709
|
flex: 1;
|
|
7838
7710
|
align-items: center;
|
|
7711
|
+
scrollbar-width: none;
|
|
7712
|
+
scrollbar-color: auto;
|
|
7713
|
+
scrollbar-gutter: auto;
|
|
7714
|
+
-ms-overflow-style: none;
|
|
7839
7715
|
width: fit-content;
|
|
7840
7716
|
overflow-x: auto;
|
|
7841
7717
|
overflow-y: clip;
|
|
7842
|
-
scrollbar-width: none;
|
|
7843
|
-
&::-webkit-scrollbar {
|
|
7844
|
-
display: none;
|
|
7845
|
-
}
|
|
7846
7718
|
}
|
|
7847
7719
|
.date-input-group__segment {
|
|
7848
7720
|
display: inline-block;
|
|
@@ -7860,11 +7732,8 @@
|
|
|
7860
7732
|
color: var(--field-placeholder, var(--muted));
|
|
7861
7733
|
}
|
|
7862
7734
|
&:focus, &[data-focused="true"] {
|
|
7863
|
-
background-color: var(--accent);
|
|
7864
|
-
|
|
7865
|
-
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
7866
|
-
}
|
|
7867
|
-
color: var(--accent);
|
|
7735
|
+
background-color: var(--accent-soft);
|
|
7736
|
+
color: var(--accent-soft-foreground);
|
|
7868
7737
|
}
|
|
7869
7738
|
&[data-disabled="true"] {
|
|
7870
7739
|
opacity: 50%;
|
|
@@ -7872,11 +7741,8 @@
|
|
|
7872
7741
|
&[data-invalid="true"] {
|
|
7873
7742
|
color: var(--danger);
|
|
7874
7743
|
&:focus, &[data-focused="true"] {
|
|
7875
|
-
background-color: var(--danger);
|
|
7876
|
-
|
|
7877
|
-
background-color: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
7878
|
-
}
|
|
7879
|
-
color: var(--danger);
|
|
7744
|
+
background-color: var(--danger-soft);
|
|
7745
|
+
color: var(--danger-soft-foreground);
|
|
7880
7746
|
}
|
|
7881
7747
|
}
|
|
7882
7748
|
}
|
|
@@ -7901,9 +7767,9 @@
|
|
|
7901
7767
|
--tw-shadow: 0 0 #0000;
|
|
7902
7768
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
7903
7769
|
background-color: var(--date-input-group-bg);
|
|
7904
|
-
--date-input-group-bg: var(--
|
|
7905
|
-
--date-input-group-bg-hover: var(--
|
|
7906
|
-
--date-input-group-bg-focus: var(--
|
|
7770
|
+
--date-input-group-bg: var(--default);
|
|
7771
|
+
--date-input-group-bg-hover: var(--default-hover);
|
|
7772
|
+
--date-input-group-bg-focus: var(--default);
|
|
7907
7773
|
@media (hover: hover) {
|
|
7908
7774
|
&:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) {
|
|
7909
7775
|
background-color: var(--date-input-group-bg-hover);
|
|
@@ -8002,6 +7868,10 @@
|
|
|
8002
7868
|
overscroll-behavior: contain;
|
|
8003
7869
|
background-color: var(--overlay);
|
|
8004
7870
|
padding: calc(var(--spacing) * 3);
|
|
7871
|
+
scrollbar-width: none;
|
|
7872
|
+
scrollbar-color: auto;
|
|
7873
|
+
scrollbar-gutter: auto;
|
|
7874
|
+
-ms-overflow-style: none;
|
|
8005
7875
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
8006
7876
|
transition-property: none;
|
|
8007
7877
|
&::before, &::after {
|
|
@@ -8017,12 +7887,7 @@
|
|
|
8017
7887
|
}
|
|
8018
7888
|
}
|
|
8019
7889
|
box-shadow: var(--shadow-overlay);
|
|
8020
|
-
border-radius: calc(var(--radius) * 2.5);
|
|
8021
|
-
&::-webkit-scrollbar {
|
|
8022
|
-
display: none;
|
|
8023
|
-
}
|
|
8024
|
-
-ms-overflow-style: none;
|
|
8025
|
-
scrollbar-width: none;
|
|
7890
|
+
border-radius: min(32px, calc(var(--radius) * 2.5));
|
|
8026
7891
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
8027
7892
|
--tw-outline-style: none;
|
|
8028
7893
|
outline-style: none;
|
|
@@ -8061,6 +7926,9 @@
|
|
|
8061
7926
|
--tw-exit-opacity: 0;
|
|
8062
7927
|
}
|
|
8063
7928
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
7929
|
+
transition-property: opacity,transform;
|
|
7930
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
7931
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
8064
7932
|
will-change: opacity,transform;
|
|
8065
7933
|
}
|
|
8066
7934
|
}
|
|
@@ -8136,6 +8004,10 @@
|
|
|
8136
8004
|
overscroll-behavior: contain;
|
|
8137
8005
|
background-color: var(--overlay);
|
|
8138
8006
|
padding: calc(var(--spacing) * 3);
|
|
8007
|
+
scrollbar-width: none;
|
|
8008
|
+
scrollbar-color: auto;
|
|
8009
|
+
scrollbar-gutter: auto;
|
|
8010
|
+
-ms-overflow-style: none;
|
|
8139
8011
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
8140
8012
|
transition-property: none;
|
|
8141
8013
|
&::before, &::after {
|
|
@@ -8151,12 +8023,7 @@
|
|
|
8151
8023
|
}
|
|
8152
8024
|
}
|
|
8153
8025
|
box-shadow: var(--shadow-overlay);
|
|
8154
|
-
border-radius: calc(var(--radius) * 2.5);
|
|
8155
|
-
&::-webkit-scrollbar {
|
|
8156
|
-
display: none;
|
|
8157
|
-
}
|
|
8158
|
-
-ms-overflow-style: none;
|
|
8159
|
-
scrollbar-width: none;
|
|
8026
|
+
border-radius: min(32px, calc(var(--radius) * 2.5));
|
|
8160
8027
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
8161
8028
|
--tw-outline-style: none;
|
|
8162
8029
|
outline-style: none;
|
|
@@ -8195,6 +8062,9 @@
|
|
|
8195
8062
|
--tw-exit-opacity: 0;
|
|
8196
8063
|
}
|
|
8197
8064
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
8065
|
+
transition-property: opacity,transform;
|
|
8066
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
8067
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
8198
8068
|
will-change: opacity,transform;
|
|
8199
8069
|
}
|
|
8200
8070
|
}
|
|
@@ -8203,11 +8073,11 @@
|
|
|
8203
8073
|
display: flex;
|
|
8204
8074
|
flex-direction: column;
|
|
8205
8075
|
gap: calc(var(--spacing) * 3);
|
|
8206
|
-
overflow:
|
|
8076
|
+
overflow: visible;
|
|
8207
8077
|
padding: calc(var(--spacing) * 4);
|
|
8208
|
-
border-radius: calc(var(--radius) * 3);
|
|
8209
8078
|
--tw-shadow: var(--surface-shadow);
|
|
8210
8079
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
8080
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
8211
8081
|
}
|
|
8212
8082
|
.card__header {
|
|
8213
8083
|
display: flex;
|
|
@@ -8270,7 +8140,7 @@
|
|
|
8270
8140
|
}
|
|
8271
8141
|
.separator {
|
|
8272
8142
|
flex-shrink: 0;
|
|
8273
|
-
border-radius:
|
|
8143
|
+
border-radius: calc(var(--radius) * 0.5);
|
|
8274
8144
|
border-top-style: var(--tw-border-style);
|
|
8275
8145
|
border-top-width: 0px;
|
|
8276
8146
|
border-bottom-style: var(--tw-border-style);
|
|
@@ -8293,24 +8163,10 @@
|
|
|
8293
8163
|
background-color: var(--separator);
|
|
8294
8164
|
}
|
|
8295
8165
|
.separator--secondary {
|
|
8296
|
-
background-color: var(--
|
|
8297
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8298
|
-
background-color: color-mix(
|
|
8299
|
-
in oklab,
|
|
8300
|
-
var(--surface) 85%,
|
|
8301
|
-
var(--surface-foreground) 15%
|
|
8302
|
-
);
|
|
8303
|
-
}
|
|
8166
|
+
background-color: var(--separator-secondary);
|
|
8304
8167
|
}
|
|
8305
8168
|
.separator--tertiary {
|
|
8306
|
-
background-color: var(--
|
|
8307
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8308
|
-
background-color: color-mix(
|
|
8309
|
-
in oklab,
|
|
8310
|
-
var(--surface) 81%,
|
|
8311
|
-
var(--surface-foreground) 19%
|
|
8312
|
-
);
|
|
8313
|
-
}
|
|
8169
|
+
background-color: var(--separator-tertiary);
|
|
8314
8170
|
}
|
|
8315
8171
|
.separator__container {
|
|
8316
8172
|
display: flex;
|
|
@@ -8372,7 +8228,7 @@
|
|
|
8372
8228
|
align-items: center;
|
|
8373
8229
|
justify-content: center;
|
|
8374
8230
|
overflow: hidden;
|
|
8375
|
-
border-radius: calc(
|
|
8231
|
+
border-radius: calc(var(--radius) * 3);
|
|
8376
8232
|
background-color: var(--default);
|
|
8377
8233
|
}
|
|
8378
8234
|
.avatar__fallback {
|
|
@@ -8416,62 +8272,57 @@
|
|
|
8416
8272
|
.avatar--sm {
|
|
8417
8273
|
width: calc(var(--spacing) * 8);
|
|
8418
8274
|
height: calc(var(--spacing) * 8);
|
|
8275
|
+
border-radius: calc(var(--radius) * 2);
|
|
8419
8276
|
}
|
|
8420
8277
|
.avatar--lg {
|
|
8421
8278
|
width: calc(var(--spacing) * 12);
|
|
8422
8279
|
height: calc(var(--spacing) * 12);
|
|
8280
|
+
border-radius: calc(var(--radius) * 3);
|
|
8423
8281
|
.avatar__fallback {
|
|
8424
8282
|
font-size: var(--text-base);
|
|
8425
8283
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
8426
8284
|
}
|
|
8427
8285
|
}
|
|
8428
8286
|
.avatar__fallback--accent {
|
|
8429
|
-
color: var(--accent);
|
|
8287
|
+
color: var(--accent-soft-foreground);
|
|
8430
8288
|
}
|
|
8431
8289
|
.avatar__fallback--default {
|
|
8432
|
-
color: var(--default-foreground);
|
|
8290
|
+
color: var(--default-soft-foreground);
|
|
8433
8291
|
}
|
|
8434
8292
|
.avatar__fallback--success {
|
|
8435
|
-
color: var(--success);
|
|
8293
|
+
color: var(--success-soft-foreground);
|
|
8436
8294
|
}
|
|
8437
8295
|
.avatar__fallback--warning {
|
|
8438
|
-
color: var(--warning);
|
|
8296
|
+
color: var(--warning-soft-foreground);
|
|
8439
8297
|
}
|
|
8440
8298
|
.avatar__fallback--danger {
|
|
8441
|
-
color: var(--danger);
|
|
8299
|
+
color: var(--danger-soft-foreground);
|
|
8442
8300
|
}
|
|
8443
8301
|
.avatar--soft {
|
|
8444
8302
|
background-color: transparent;
|
|
8445
8303
|
}
|
|
8446
8304
|
.avatar--soft .avatar__fallback--accent {
|
|
8447
|
-
background-color: var(--accent);
|
|
8448
|
-
|
|
8449
|
-
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
8450
|
-
}
|
|
8451
|
-
color: var(--accent);
|
|
8305
|
+
background-color: var(--accent-soft);
|
|
8306
|
+
color: var(--accent-soft-foreground);
|
|
8452
8307
|
}
|
|
8453
8308
|
.avatar--soft .avatar__fallback--success {
|
|
8454
|
-
background-color: var(--success);
|
|
8455
|
-
|
|
8456
|
-
background-color: color-mix(in oklab, var(--success) 15%, transparent);
|
|
8457
|
-
}
|
|
8458
|
-
color: var(--success);
|
|
8309
|
+
background-color: var(--success-soft);
|
|
8310
|
+
color: var(--success-soft-foreground);
|
|
8459
8311
|
}
|
|
8460
8312
|
.avatar--soft .avatar__fallback--warning {
|
|
8461
|
-
background-color: var(--warning);
|
|
8462
|
-
|
|
8463
|
-
|
|
8464
|
-
|
|
8465
|
-
color: var(--
|
|
8313
|
+
background-color: var(--warning-soft);
|
|
8314
|
+
color: var(--warning-soft-foreground);
|
|
8315
|
+
}
|
|
8316
|
+
.avatar--soft .avatar__fallback--default {
|
|
8317
|
+
background-color: var(--default-soft);
|
|
8318
|
+
color: var(--default-soft-foreground);
|
|
8466
8319
|
}
|
|
8467
8320
|
.avatar--soft .avatar__fallback--danger {
|
|
8468
|
-
background-color: var(--danger);
|
|
8469
|
-
|
|
8470
|
-
background-color: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
8471
|
-
}
|
|
8472
|
-
color: var(--danger);
|
|
8321
|
+
background-color: var(--danger-soft);
|
|
8322
|
+
color: var(--danger-soft-foreground);
|
|
8473
8323
|
}
|
|
8474
8324
|
.alert-dialog__trigger {
|
|
8325
|
+
display: inline-block;
|
|
8475
8326
|
cursor: var(--cursor-interactive);
|
|
8476
8327
|
transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
8477
8328
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
@@ -8558,71 +8409,13 @@
|
|
|
8558
8409
|
background-color: transparent;
|
|
8559
8410
|
}
|
|
8560
8411
|
.alert-dialog__backdrop--opaque {
|
|
8561
|
-
background-color:
|
|
8562
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8563
|
-
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
8564
|
-
}
|
|
8565
|
-
&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
|
|
8566
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8567
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8568
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8569
|
-
}
|
|
8570
|
-
&::before, &::after {
|
|
8571
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8572
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8573
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8574
|
-
}
|
|
8575
|
-
}
|
|
8576
|
-
}
|
|
8577
|
-
@media (prefers-color-scheme: dark) {
|
|
8578
|
-
&:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
|
|
8579
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8580
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8581
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8582
|
-
}
|
|
8583
|
-
&::before, &::after {
|
|
8584
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8585
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8586
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8587
|
-
}
|
|
8588
|
-
}
|
|
8589
|
-
}
|
|
8590
|
-
}
|
|
8412
|
+
background-color: var(--backdrop);
|
|
8591
8413
|
}
|
|
8592
8414
|
.alert-dialog__backdrop--blur {
|
|
8593
|
-
background-color:
|
|
8594
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8595
|
-
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
8596
|
-
}
|
|
8415
|
+
background-color: var(--backdrop);
|
|
8597
8416
|
--tw-backdrop-blur: blur(var(--blur-md));
|
|
8598
8417
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
8599
8418
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
8600
|
-
&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
|
|
8601
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8602
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8603
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8604
|
-
}
|
|
8605
|
-
&::before, &::after {
|
|
8606
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8607
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8608
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8609
|
-
}
|
|
8610
|
-
}
|
|
8611
|
-
}
|
|
8612
|
-
@media (prefers-color-scheme: dark) {
|
|
8613
|
-
&:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
|
|
8614
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8615
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8616
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8617
|
-
}
|
|
8618
|
-
&::before, &::after {
|
|
8619
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8620
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8621
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8622
|
-
}
|
|
8623
|
-
}
|
|
8624
|
-
}
|
|
8625
|
-
}
|
|
8626
8419
|
}
|
|
8627
8420
|
.alert-dialog__container {
|
|
8628
8421
|
display: flex;
|
|
@@ -8701,14 +8494,14 @@
|
|
|
8701
8494
|
display: flex;
|
|
8702
8495
|
width: 100%;
|
|
8703
8496
|
flex-direction: column;
|
|
8704
|
-
border-radius: calc(var(--radius) * 3);
|
|
8705
8497
|
background-color: var(--overlay);
|
|
8706
8498
|
--tw-shadow: var(--overlay-shadow);
|
|
8707
8499
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
8708
8500
|
--tw-outline-style: none;
|
|
8709
8501
|
outline-style: none;
|
|
8502
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
8710
8503
|
padding: calc(var(--spacing) * 6);
|
|
8711
|
-
overflow:
|
|
8504
|
+
overflow: clip;
|
|
8712
8505
|
pointer-events: auto;
|
|
8713
8506
|
&[data-placement="auto"] {
|
|
8714
8507
|
margin-top: auto;
|
|
@@ -8767,7 +8560,7 @@
|
|
|
8767
8560
|
width: calc(var(--spacing) * 10);
|
|
8768
8561
|
height: calc(var(--spacing) * 10);
|
|
8769
8562
|
flex-shrink: 0;
|
|
8770
|
-
border-radius: calc(
|
|
8563
|
+
border-radius: calc(var(--radius) * 3);
|
|
8771
8564
|
-webkit-user-select: none;
|
|
8772
8565
|
user-select: none;
|
|
8773
8566
|
[data-slot="alert-dialog-default-icon"] {
|
|
@@ -8781,43 +8574,37 @@
|
|
|
8781
8574
|
color: var(--foreground);
|
|
8782
8575
|
}
|
|
8783
8576
|
.alert-dialog__icon--accent {
|
|
8784
|
-
background-color: var(--accent);
|
|
8785
|
-
|
|
8786
|
-
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
8787
|
-
}
|
|
8788
|
-
color: var(--accent);
|
|
8577
|
+
background-color: var(--accent-soft);
|
|
8578
|
+
color: var(--accent-soft-foreground);
|
|
8789
8579
|
}
|
|
8790
8580
|
.alert-dialog__icon--success {
|
|
8791
|
-
background-color: var(--success);
|
|
8792
|
-
|
|
8793
|
-
background-color: color-mix(in oklab, var(--success) 15%, transparent);
|
|
8794
|
-
}
|
|
8795
|
-
color: var(--success);
|
|
8581
|
+
background-color: var(--success-soft);
|
|
8582
|
+
color: var(--success-soft-foreground);
|
|
8796
8583
|
}
|
|
8797
8584
|
.alert-dialog__icon--warning {
|
|
8798
|
-
background-color: var(--warning);
|
|
8799
|
-
|
|
8800
|
-
background-color: color-mix(in oklab, var(--warning) 15%, transparent);
|
|
8801
|
-
}
|
|
8802
|
-
color: var(--warning);
|
|
8585
|
+
background-color: var(--warning-soft);
|
|
8586
|
+
color: var(--warning-soft-foreground);
|
|
8803
8587
|
}
|
|
8804
8588
|
.alert-dialog__icon--danger {
|
|
8805
|
-
background-color: var(--danger);
|
|
8806
|
-
|
|
8807
|
-
background-color: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
8808
|
-
}
|
|
8809
|
-
color: var(--danger);
|
|
8589
|
+
background-color: var(--danger-soft);
|
|
8590
|
+
color: var(--danger-soft-foreground);
|
|
8810
8591
|
}
|
|
8811
8592
|
.alert-dialog__body {
|
|
8812
8593
|
min-height: calc(var(--spacing) * 0);
|
|
8813
8594
|
flex: 1;
|
|
8595
|
+
scrollbar-width: var(--scrollbar-width);
|
|
8596
|
+
scrollbar-color: var(--scrollbar-color);
|
|
8597
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
8814
8598
|
font-size: var(--text-sm);
|
|
8815
8599
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
8816
8600
|
--tw-leading: 1.43;
|
|
8817
8601
|
line-height: 1.43;
|
|
8818
8602
|
color: var(--muted);
|
|
8603
|
+
margin: calc(3px * -1);
|
|
8819
8604
|
margin-block: calc(var(--spacing) * 0);
|
|
8605
|
+
padding: 3px;
|
|
8820
8606
|
overflow-y: auto;
|
|
8607
|
+
overscroll-behavior: contain;
|
|
8821
8608
|
-webkit-overflow-scrolling: touch;
|
|
8822
8609
|
}
|
|
8823
8610
|
.alert-dialog__footer {
|
|
@@ -8843,6 +8630,7 @@
|
|
|
8843
8630
|
margin-top: calc(var(--spacing) * 5);
|
|
8844
8631
|
}
|
|
8845
8632
|
.drawer__trigger {
|
|
8633
|
+
display: inline-block;
|
|
8846
8634
|
cursor: var(--cursor-interactive);
|
|
8847
8635
|
transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
8848
8636
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
@@ -8883,238 +8671,58 @@
|
|
|
8883
8671
|
position: fixed;
|
|
8884
8672
|
inset: calc(var(--spacing) * 0);
|
|
8885
8673
|
z-index: 50;
|
|
8886
|
-
display: flex;
|
|
8887
|
-
flex-direction: row;
|
|
8888
|
-
align-items: center;
|
|
8889
|
-
justify-content: center;
|
|
8890
8674
|
height: var(--visual-viewport-height);
|
|
8891
8675
|
width: 100%;
|
|
8676
|
+
opacity: 1;
|
|
8677
|
+
transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
8892
8678
|
&[data-entering="true"] {
|
|
8893
|
-
|
|
8894
|
-
--tw-duration: 200ms;
|
|
8895
|
-
transition-duration: 200ms;
|
|
8896
|
-
--tw-ease: var(--ease-out);
|
|
8897
|
-
transition-timing-function: var(--ease-out);
|
|
8898
|
-
--tw-enter-opacity: calc(0/100);
|
|
8899
|
-
--tw-enter-opacity: 0;
|
|
8679
|
+
opacity: 0;
|
|
8900
8680
|
}
|
|
8901
8681
|
&[data-exiting="true"] {
|
|
8902
|
-
|
|
8903
|
-
--tw-duration: 200ms;
|
|
8682
|
+
opacity: 0;
|
|
8904
8683
|
transition-duration: 200ms;
|
|
8905
|
-
|
|
8906
|
-
transition-timing-function: var(--ease-out);
|
|
8907
|
-
--tw-exit-opacity: calc(0/100);
|
|
8908
|
-
--tw-exit-opacity: 0;
|
|
8684
|
+
transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
8909
8685
|
}
|
|
8910
8686
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
8911
8687
|
will-change: opacity;
|
|
8912
|
-
|
|
8913
|
-
|
|
8914
|
-
|
|
8915
|
-
animation: none;
|
|
8916
|
-
}
|
|
8917
|
-
}
|
|
8918
|
-
@media (prefers-reduced-motion: reduce) {
|
|
8919
|
-
&:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) {
|
|
8920
|
-
animation: none;
|
|
8921
|
-
&::before, &::after {
|
|
8922
|
-
animation: none;
|
|
8923
|
-
}
|
|
8924
|
-
}
|
|
8925
|
-
}
|
|
8688
|
+
}
|
|
8689
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8690
|
+
transition: none;
|
|
8926
8691
|
}
|
|
8927
8692
|
}
|
|
8928
8693
|
.drawer__backdrop--transparent {
|
|
8929
8694
|
background-color: transparent;
|
|
8930
8695
|
}
|
|
8931
8696
|
.drawer__backdrop--opaque {
|
|
8932
|
-
background-color:
|
|
8933
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8934
|
-
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
8935
|
-
}
|
|
8936
|
-
&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
|
|
8937
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8938
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8939
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8940
|
-
}
|
|
8941
|
-
&::before, &::after {
|
|
8942
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8943
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8944
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8945
|
-
}
|
|
8946
|
-
}
|
|
8947
|
-
}
|
|
8948
|
-
@media (prefers-color-scheme: dark) {
|
|
8949
|
-
&:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
|
|
8950
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8951
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8952
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8953
|
-
}
|
|
8954
|
-
&::before, &::after {
|
|
8955
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8956
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8957
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8958
|
-
}
|
|
8959
|
-
}
|
|
8960
|
-
}
|
|
8961
|
-
}
|
|
8697
|
+
background-color: var(--backdrop);
|
|
8962
8698
|
}
|
|
8963
8699
|
.drawer__backdrop--blur {
|
|
8964
|
-
background-color:
|
|
8965
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8966
|
-
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
8967
|
-
}
|
|
8700
|
+
background-color: var(--backdrop);
|
|
8968
8701
|
--tw-backdrop-blur: blur(var(--blur-md));
|
|
8969
8702
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
8970
8703
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
8971
|
-
&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
|
|
8972
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8973
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8974
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8975
|
-
}
|
|
8976
|
-
&::before, &::after {
|
|
8977
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8978
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8979
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8980
|
-
}
|
|
8981
|
-
}
|
|
8982
|
-
}
|
|
8983
|
-
@media (prefers-color-scheme: dark) {
|
|
8984
|
-
&:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
|
|
8985
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8986
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8987
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8988
|
-
}
|
|
8989
|
-
&::before, &::after {
|
|
8990
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
8991
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
8992
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
8993
|
-
}
|
|
8994
|
-
}
|
|
8995
|
-
}
|
|
8996
|
-
}
|
|
8997
8704
|
}
|
|
8998
8705
|
.drawer__content {
|
|
8999
8706
|
pointer-events: none;
|
|
8707
|
+
position: fixed;
|
|
8708
|
+
inset: calc(var(--spacing) * 0);
|
|
8709
|
+
z-index: 50;
|
|
8710
|
+
display: flex;
|
|
9000
8711
|
height: var(--visual-viewport-height);
|
|
9001
8712
|
width: 100%;
|
|
9002
8713
|
min-width: calc(var(--spacing) * 0);
|
|
9003
8714
|
}
|
|
9004
8715
|
.drawer__content--bottom {
|
|
9005
|
-
|
|
9006
|
-
inset-inline: calc(var(--spacing) * 0);
|
|
9007
|
-
bottom: calc(var(--spacing) * 0);
|
|
9008
|
-
display: flex;
|
|
9009
|
-
flex-direction: column;
|
|
9010
|
-
justify-content: flex-end;
|
|
9011
|
-
&[data-entering="true"] {
|
|
9012
|
-
animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9013
|
-
--tw-duration: 300ms;
|
|
9014
|
-
transition-duration: 300ms;
|
|
9015
|
-
--tw-ease: var(--ease-out);
|
|
9016
|
-
transition-timing-function: var(--ease-out);
|
|
9017
|
-
--tw-enter-translate-y: calc(1*100%);
|
|
9018
|
-
}
|
|
9019
|
-
&[data-exiting="true"] {
|
|
9020
|
-
animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9021
|
-
--tw-duration: 200ms;
|
|
9022
|
-
transition-duration: 200ms;
|
|
9023
|
-
--tw-ease: var(--ease-in);
|
|
9024
|
-
transition-timing-function: var(--ease-in);
|
|
9025
|
-
--tw-exit-translate-y: calc(1*100%);
|
|
9026
|
-
}
|
|
8716
|
+
align-items: flex-end;
|
|
9027
8717
|
}
|
|
9028
8718
|
.drawer__content--top {
|
|
9029
|
-
|
|
9030
|
-
inset-inline: calc(var(--spacing) * 0);
|
|
9031
|
-
top: calc(var(--spacing) * 0);
|
|
9032
|
-
display: flex;
|
|
9033
|
-
flex-direction: column;
|
|
9034
|
-
justify-content: flex-start;
|
|
9035
|
-
&[data-entering="true"] {
|
|
9036
|
-
animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9037
|
-
--tw-duration: 300ms;
|
|
9038
|
-
transition-duration: 300ms;
|
|
9039
|
-
--tw-ease: var(--ease-out);
|
|
9040
|
-
transition-timing-function: var(--ease-out);
|
|
9041
|
-
--tw-enter-translate-y: calc(1*-100%);
|
|
9042
|
-
}
|
|
9043
|
-
&[data-exiting="true"] {
|
|
9044
|
-
animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9045
|
-
--tw-duration: 200ms;
|
|
9046
|
-
transition-duration: 200ms;
|
|
9047
|
-
--tw-ease: var(--ease-in);
|
|
9048
|
-
transition-timing-function: var(--ease-in);
|
|
9049
|
-
--tw-exit-translate-y: calc(1*-100%);
|
|
9050
|
-
}
|
|
8719
|
+
align-items: flex-start;
|
|
9051
8720
|
}
|
|
9052
8721
|
.drawer__content--left {
|
|
9053
|
-
position: fixed;
|
|
9054
|
-
inset-block: calc(var(--spacing) * 0);
|
|
9055
|
-
left: calc(var(--spacing) * 0);
|
|
9056
|
-
display: flex;
|
|
9057
|
-
flex-direction: row;
|
|
9058
8722
|
justify-content: flex-start;
|
|
9059
|
-
&[data-entering="true"] {
|
|
9060
|
-
animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9061
|
-
--tw-duration: 300ms;
|
|
9062
|
-
transition-duration: 300ms;
|
|
9063
|
-
--tw-ease: var(--ease-out);
|
|
9064
|
-
transition-timing-function: var(--ease-out);
|
|
9065
|
-
--tw-enter-translate-x: calc(1*-100%);
|
|
9066
|
-
}
|
|
9067
|
-
&[data-exiting="true"] {
|
|
9068
|
-
animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9069
|
-
--tw-duration: 200ms;
|
|
9070
|
-
transition-duration: 200ms;
|
|
9071
|
-
--tw-ease: var(--ease-in);
|
|
9072
|
-
transition-timing-function: var(--ease-in);
|
|
9073
|
-
--tw-exit-translate-x: calc(1*-100%);
|
|
9074
|
-
}
|
|
9075
8723
|
}
|
|
9076
8724
|
.drawer__content--right {
|
|
9077
|
-
position: fixed;
|
|
9078
|
-
inset-block: calc(var(--spacing) * 0);
|
|
9079
|
-
right: calc(var(--spacing) * 0);
|
|
9080
|
-
display: flex;
|
|
9081
|
-
flex-direction: row;
|
|
9082
8725
|
justify-content: flex-end;
|
|
9083
|
-
&[data-entering="true"] {
|
|
9084
|
-
animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9085
|
-
--tw-duration: 300ms;
|
|
9086
|
-
transition-duration: 300ms;
|
|
9087
|
-
--tw-ease: var(--ease-out);
|
|
9088
|
-
transition-timing-function: var(--ease-out);
|
|
9089
|
-
--tw-enter-translate-x: calc(1*100%);
|
|
9090
|
-
}
|
|
9091
|
-
&[data-exiting="true"] {
|
|
9092
|
-
animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
9093
|
-
--tw-duration: 200ms;
|
|
9094
|
-
transition-duration: 200ms;
|
|
9095
|
-
--tw-ease: var(--ease-in);
|
|
9096
|
-
transition-timing-function: var(--ease-in);
|
|
9097
|
-
--tw-exit-translate-x: calc(1*100%);
|
|
9098
|
-
}
|
|
9099
|
-
}
|
|
9100
|
-
.drawer__content--bottom, .drawer__content--top, .drawer__content--left, .drawer__content--right {
|
|
9101
|
-
&[data-exiting="true"], &[data-entering="true"] {
|
|
9102
|
-
will-change: transform;
|
|
9103
|
-
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
9104
|
-
animation: none;
|
|
9105
|
-
&::before, &::after {
|
|
9106
|
-
animation: none;
|
|
9107
|
-
}
|
|
9108
|
-
}
|
|
9109
|
-
@media (prefers-reduced-motion: reduce) {
|
|
9110
|
-
&:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) {
|
|
9111
|
-
animation: none;
|
|
9112
|
-
&::before, &::after {
|
|
9113
|
-
animation: none;
|
|
9114
|
-
}
|
|
9115
|
-
}
|
|
9116
|
-
}
|
|
9117
|
-
}
|
|
9118
8726
|
}
|
|
9119
8727
|
.drawer__dialog {
|
|
9120
8728
|
position: relative;
|
|
@@ -9127,22 +8735,30 @@
|
|
|
9127
8735
|
outline-style: none;
|
|
9128
8736
|
padding: calc(var(--spacing) * 6);
|
|
9129
8737
|
pointer-events: auto;
|
|
8738
|
+
--drawer-enter-duration: 250ms;
|
|
8739
|
+
--drawer-exit-duration: 200ms;
|
|
8740
|
+
--drawer-enter-ease: cubic-bezier(0.32, 0.72, 0, 1);
|
|
8741
|
+
--drawer-exit-ease: cubic-bezier(0.32, 0.72, 0, 1);
|
|
8742
|
+
will-change: translate;
|
|
8743
|
+
transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease);
|
|
8744
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8745
|
+
transition: none;
|
|
8746
|
+
}
|
|
9130
8747
|
&[data-placement="bottom"] {
|
|
9131
8748
|
width: 100%;
|
|
9132
|
-
border-top-left-radius: calc(var(--radius) * 2);
|
|
9133
|
-
border-top-right-radius: calc(var(--radius) * 2);
|
|
9134
8749
|
max-height: 85vh;
|
|
8750
|
+
border-top-left-radius: min(32px, var(--radius-2xl));
|
|
8751
|
+
border-top-right-radius: min(32px, var(--radius-2xl));
|
|
9135
8752
|
}
|
|
9136
8753
|
&[data-placement="top"] {
|
|
9137
8754
|
width: 100%;
|
|
9138
|
-
border-bottom-right-radius: calc(var(--radius) * 2);
|
|
9139
|
-
border-bottom-left-radius: calc(var(--radius) * 2);
|
|
9140
8755
|
max-height: 85vh;
|
|
8756
|
+
border-bottom-left-radius: min(32px, var(--radius-2xl));
|
|
8757
|
+
border-bottom-right-radius: min(32px, var(--radius-2xl));
|
|
9141
8758
|
}
|
|
9142
8759
|
&[data-placement="left"] {
|
|
9143
8760
|
height: 100%;
|
|
9144
|
-
border-
|
|
9145
|
-
border-bottom-right-radius: calc(var(--radius) * 2);
|
|
8761
|
+
border-radius: 0;
|
|
9146
8762
|
width: calc(var(--spacing) * 80);
|
|
9147
8763
|
max-width: 85vw;
|
|
9148
8764
|
@media (width >= 40rem) {
|
|
@@ -9151,8 +8767,7 @@
|
|
|
9151
8767
|
}
|
|
9152
8768
|
&[data-placement="right"] {
|
|
9153
8769
|
height: 100%;
|
|
9154
|
-
border-
|
|
9155
|
-
border-bottom-left-radius: calc(var(--radius) * 2);
|
|
8770
|
+
border-radius: 0;
|
|
9156
8771
|
width: calc(var(--spacing) * 80);
|
|
9157
8772
|
max-width: 85vw;
|
|
9158
8773
|
@media (width >= 40rem) {
|
|
@@ -9160,6 +8775,25 @@
|
|
|
9160
8775
|
}
|
|
9161
8776
|
}
|
|
9162
8777
|
}
|
|
8778
|
+
[data-exiting="true"] .drawer__dialog {
|
|
8779
|
+
transition-duration: var(--drawer-exit-duration);
|
|
8780
|
+
transition-timing-function: var(--drawer-exit-ease);
|
|
8781
|
+
}
|
|
8782
|
+
.drawer__content--left .drawer__dialog, .drawer__content--right .drawer__dialog, .drawer__content--top .drawer__dialog, .drawer__content--bottom .drawer__dialog {
|
|
8783
|
+
translate: 0 0;
|
|
8784
|
+
}
|
|
8785
|
+
.drawer__content--left[data-entering="true"] .drawer__dialog, .drawer__content--left[data-exiting="true"] .drawer__dialog {
|
|
8786
|
+
translate: -100% 0;
|
|
8787
|
+
}
|
|
8788
|
+
.drawer__content--right[data-entering="true"] .drawer__dialog, .drawer__content--right[data-exiting="true"] .drawer__dialog {
|
|
8789
|
+
translate: 100% 0;
|
|
8790
|
+
}
|
|
8791
|
+
.drawer__content--top[data-entering="true"] .drawer__dialog, .drawer__content--top[data-exiting="true"] .drawer__dialog {
|
|
8792
|
+
translate: 0 -100%;
|
|
8793
|
+
}
|
|
8794
|
+
.drawer__content--bottom[data-entering="true"] .drawer__dialog, .drawer__content--bottom[data-exiting="true"] .drawer__dialog {
|
|
8795
|
+
translate: 0 100%;
|
|
8796
|
+
}
|
|
9163
8797
|
.drawer__dialog--top {
|
|
9164
8798
|
padding-bottom: calc(var(--spacing) * 2);
|
|
9165
8799
|
.drawer__handle {
|
|
@@ -9183,6 +8817,9 @@
|
|
|
9183
8817
|
.drawer__body {
|
|
9184
8818
|
min-height: calc(var(--spacing) * 0);
|
|
9185
8819
|
flex: 1;
|
|
8820
|
+
scrollbar-width: var(--scrollbar-width);
|
|
8821
|
+
scrollbar-color: var(--scrollbar-color);
|
|
8822
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
9186
8823
|
font-size: var(--text-sm);
|
|
9187
8824
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
9188
8825
|
--tw-leading: 1.43;
|
|
@@ -9211,7 +8848,7 @@
|
|
|
9211
8848
|
& > [data-slot="drawer-handle-bar"] {
|
|
9212
8849
|
height: calc(var(--spacing) * 1);
|
|
9213
8850
|
width: calc(var(--spacing) * 9);
|
|
9214
|
-
border-radius: calc(
|
|
8851
|
+
border-radius: calc(var(--radius) * 0.25);
|
|
9215
8852
|
background-color: var(--separator);
|
|
9216
8853
|
}
|
|
9217
8854
|
}
|
|
@@ -9236,6 +8873,7 @@
|
|
|
9236
8873
|
margin-top: calc(var(--spacing) * 0);
|
|
9237
8874
|
}
|
|
9238
8875
|
.modal__trigger {
|
|
8876
|
+
display: inline-block;
|
|
9239
8877
|
cursor: var(--cursor-interactive);
|
|
9240
8878
|
transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
9241
8879
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
@@ -9322,71 +8960,13 @@
|
|
|
9322
8960
|
background-color: transparent;
|
|
9323
8961
|
}
|
|
9324
8962
|
.modal__backdrop--opaque {
|
|
9325
|
-
background-color:
|
|
9326
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9327
|
-
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
9328
|
-
}
|
|
9329
|
-
&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
|
|
9330
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9331
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9332
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9333
|
-
}
|
|
9334
|
-
&::before, &::after {
|
|
9335
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9336
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9337
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9338
|
-
}
|
|
9339
|
-
}
|
|
9340
|
-
}
|
|
9341
|
-
@media (prefers-color-scheme: dark) {
|
|
9342
|
-
&:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
|
|
9343
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9344
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9345
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9346
|
-
}
|
|
9347
|
-
&::before, &::after {
|
|
9348
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9349
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9350
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9351
|
-
}
|
|
9352
|
-
}
|
|
9353
|
-
}
|
|
9354
|
-
}
|
|
8963
|
+
background-color: var(--backdrop);
|
|
9355
8964
|
}
|
|
9356
8965
|
.modal__backdrop--blur {
|
|
9357
|
-
background-color:
|
|
9358
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9359
|
-
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
9360
|
-
}
|
|
8966
|
+
background-color: var(--backdrop);
|
|
9361
8967
|
--tw-backdrop-blur: blur(var(--blur-md));
|
|
9362
8968
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
9363
8969
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
9364
|
-
&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
|
|
9365
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9366
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9367
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9368
|
-
}
|
|
9369
|
-
&::before, &::after {
|
|
9370
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9371
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9372
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9373
|
-
}
|
|
9374
|
-
}
|
|
9375
|
-
}
|
|
9376
|
-
@media (prefers-color-scheme: dark) {
|
|
9377
|
-
&:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
|
|
9378
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9379
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9380
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9381
|
-
}
|
|
9382
|
-
&::before, &::after {
|
|
9383
|
-
background-color: color-mix(in srgb, #000 60%, transparent);
|
|
9384
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
9385
|
-
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
9386
|
-
}
|
|
9387
|
-
}
|
|
9388
|
-
}
|
|
9389
|
-
}
|
|
9390
8970
|
}
|
|
9391
8971
|
.modal__container {
|
|
9392
8972
|
display: flex;
|
|
@@ -9462,6 +9042,9 @@
|
|
|
9462
9042
|
}
|
|
9463
9043
|
.modal__container--scroll-outside {
|
|
9464
9044
|
overflow-y: auto;
|
|
9045
|
+
scrollbar-width: var(--scrollbar-width);
|
|
9046
|
+
scrollbar-color: var(--scrollbar-color);
|
|
9047
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
9465
9048
|
pointer-events: auto;
|
|
9466
9049
|
-webkit-overflow-scrolling: touch;
|
|
9467
9050
|
}
|
|
@@ -9490,12 +9073,12 @@
|
|
|
9490
9073
|
display: flex;
|
|
9491
9074
|
width: 100%;
|
|
9492
9075
|
flex-direction: column;
|
|
9493
|
-
border-radius: calc(var(--radius) * 3);
|
|
9494
9076
|
background-color: var(--overlay);
|
|
9495
9077
|
--tw-shadow: var(--overlay-shadow);
|
|
9496
9078
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
9497
9079
|
--tw-outline-style: none;
|
|
9498
9080
|
outline-style: none;
|
|
9081
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
9499
9082
|
padding: calc(var(--spacing) * 6);
|
|
9500
9083
|
pointer-events: auto;
|
|
9501
9084
|
&[data-placement="auto"] {
|
|
@@ -9515,7 +9098,7 @@
|
|
|
9515
9098
|
}
|
|
9516
9099
|
}
|
|
9517
9100
|
.modal__dialog--scroll-inside {
|
|
9518
|
-
overflow:
|
|
9101
|
+
overflow: clip;
|
|
9519
9102
|
}
|
|
9520
9103
|
.modal__dialog--scroll-outside {
|
|
9521
9104
|
height: auto;
|
|
@@ -9571,7 +9154,7 @@
|
|
|
9571
9154
|
width: calc(var(--spacing) * 10);
|
|
9572
9155
|
height: calc(var(--spacing) * 10);
|
|
9573
9156
|
flex-shrink: 0;
|
|
9574
|
-
border-radius: calc(
|
|
9157
|
+
border-radius: calc(var(--radius) * 3);
|
|
9575
9158
|
-webkit-user-select: none;
|
|
9576
9159
|
user-select: none;
|
|
9577
9160
|
}
|
|
@@ -9583,10 +9166,17 @@
|
|
|
9583
9166
|
--tw-leading: 1.43;
|
|
9584
9167
|
line-height: 1.43;
|
|
9585
9168
|
color: var(--muted);
|
|
9169
|
+
margin: calc(3px * -1);
|
|
9586
9170
|
margin-block: calc(var(--spacing) * 0);
|
|
9171
|
+
overflow: visible;
|
|
9172
|
+
padding: 3px;
|
|
9587
9173
|
}
|
|
9588
9174
|
.modal__body--scroll-inside {
|
|
9589
9175
|
overflow-y: auto;
|
|
9176
|
+
overscroll-behavior: contain;
|
|
9177
|
+
scrollbar-width: var(--scrollbar-width);
|
|
9178
|
+
scrollbar-color: var(--scrollbar-color);
|
|
9179
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
9590
9180
|
-webkit-overflow-scrolling: touch;
|
|
9591
9181
|
}
|
|
9592
9182
|
.modal__body--scroll-outside {
|
|
@@ -9616,11 +9206,11 @@
|
|
|
9616
9206
|
}
|
|
9617
9207
|
.popover {
|
|
9618
9208
|
transform-origin: var(--trigger-anchor-point);
|
|
9619
|
-
border-radius: calc(var(--radius) * 3);
|
|
9620
9209
|
background-color: var(--overlay);
|
|
9621
9210
|
padding: calc(var(--spacing) * 0);
|
|
9622
9211
|
font-size: var(--text-sm);
|
|
9623
9212
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
9213
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
9624
9214
|
box-shadow: var(--shadow-overlay);
|
|
9625
9215
|
&[data-entering="true"] {
|
|
9626
9216
|
animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
@@ -9656,6 +9246,9 @@
|
|
|
9656
9246
|
--tw-exit-opacity: 0;
|
|
9657
9247
|
}
|
|
9658
9248
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
9249
|
+
transition-property: opacity,transform;
|
|
9250
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
9251
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
9659
9252
|
will-change: opacity,transform;
|
|
9660
9253
|
}
|
|
9661
9254
|
& [data-slot="popover-overlay-arrow"] {
|
|
@@ -9681,6 +9274,7 @@
|
|
|
9681
9274
|
font-weight: var(--font-weight-medium);
|
|
9682
9275
|
}
|
|
9683
9276
|
.popover__trigger {
|
|
9277
|
+
display: inline-block;
|
|
9684
9278
|
transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
9685
9279
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
9686
9280
|
transition-property: none;
|
|
@@ -9717,13 +9311,12 @@
|
|
|
9717
9311
|
.tooltip {
|
|
9718
9312
|
max-width: var(--container-xs);
|
|
9719
9313
|
transform-origin: var(--trigger-anchor-point);
|
|
9720
|
-
border-radius: calc(var(--radius) * 1.5);
|
|
9721
9314
|
background-color: var(--overlay);
|
|
9722
|
-
padding
|
|
9723
|
-
padding-block: calc(var(--spacing) * 1);
|
|
9315
|
+
padding: calc(var(--spacing) * 2);
|
|
9724
9316
|
font-size: var(--text-xs);
|
|
9725
9317
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
9726
9318
|
word-break: break-all;
|
|
9319
|
+
border-radius: min(32px, var(--radius-xl));
|
|
9727
9320
|
box-shadow: var(--shadow-overlay);
|
|
9728
9321
|
&[data-entering="true"] {
|
|
9729
9322
|
animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
|
|
@@ -9759,6 +9352,9 @@
|
|
|
9759
9352
|
--tw-exit-opacity: 0;
|
|
9760
9353
|
}
|
|
9761
9354
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
9355
|
+
transition-property: opacity,transform;
|
|
9356
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
9357
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
9762
9358
|
will-change: opacity,transform;
|
|
9763
9359
|
}
|
|
9764
9360
|
& [data-slot="overlay-arrow"] {
|
|
@@ -9779,6 +9375,7 @@
|
|
|
9779
9375
|
}
|
|
9780
9376
|
}
|
|
9781
9377
|
.tooltip__trigger {
|
|
9378
|
+
display: inline-block;
|
|
9782
9379
|
transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
|
|
9783
9380
|
&:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
|
|
9784
9381
|
transition-property: none;
|
|
@@ -9818,14 +9415,11 @@
|
|
|
9818
9415
|
[data-slot="label"] {
|
|
9819
9416
|
width: fit-content;
|
|
9820
9417
|
}
|
|
9821
|
-
[data-slot="description"] {
|
|
9822
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
9823
|
-
}
|
|
9824
9418
|
[data-slot="input"] {
|
|
9825
9419
|
min-width: calc(var(--spacing) * 0);
|
|
9826
9420
|
flex: 1;
|
|
9827
9421
|
&:has(+ .combo-box__trigger) {
|
|
9828
|
-
padding-
|
|
9422
|
+
padding-inline-end: calc(var(--spacing) * 7);
|
|
9829
9423
|
}
|
|
9830
9424
|
&:focus, &[data-focus] {
|
|
9831
9425
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -9835,8 +9429,8 @@
|
|
|
9835
9429
|
--tw-outline-style: none;
|
|
9836
9430
|
outline-style: none;
|
|
9837
9431
|
--tw-ring-offset-width: 0px;
|
|
9838
|
-
border-color: var(--
|
|
9839
|
-
background-color: var(--
|
|
9432
|
+
border-color: var(--field-border-focus);
|
|
9433
|
+
background-color: var(--field-focus);
|
|
9840
9434
|
}
|
|
9841
9435
|
&:disabled, &[data-disabled], &[aria-disabled="true"] {
|
|
9842
9436
|
opacity: var(--disabled-opacity);
|
|
@@ -9853,8 +9447,8 @@
|
|
|
9853
9447
|
}
|
|
9854
9448
|
.combo-box__trigger {
|
|
9855
9449
|
position: absolute;
|
|
9450
|
+
inset-inline-end: calc(var(--spacing) * 0);
|
|
9856
9451
|
top: calc(1 / 2 * 100%);
|
|
9857
|
-
right: calc(var(--spacing) * 0);
|
|
9858
9452
|
display: flex;
|
|
9859
9453
|
height: 100%;
|
|
9860
9454
|
flex-shrink: 0;
|
|
@@ -9863,7 +9457,7 @@
|
|
|
9863
9457
|
cursor: pointer;
|
|
9864
9458
|
align-items: center;
|
|
9865
9459
|
justify-content: center;
|
|
9866
|
-
padding-
|
|
9460
|
+
padding-inline-end: calc(var(--spacing) * 2);
|
|
9867
9461
|
color: var(--field-placeholder, var(--muted));
|
|
9868
9462
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
|
9869
9463
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -9932,11 +9526,14 @@
|
|
|
9932
9526
|
scroll-padding-block: calc(var(--spacing) * 1);
|
|
9933
9527
|
overflow-y: auto;
|
|
9934
9528
|
overscroll-behavior: contain;
|
|
9935
|
-
border-radius: calc(var(--radius) * 3);
|
|
9936
9529
|
background-color: var(--overlay);
|
|
9937
9530
|
padding: calc(var(--spacing) * 0);
|
|
9938
9531
|
font-size: var(--text-sm);
|
|
9939
9532
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
9533
|
+
scrollbar-width: var(--scrollbar-width);
|
|
9534
|
+
scrollbar-color: var(--scrollbar-color);
|
|
9535
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
9536
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
9940
9537
|
box-shadow: var(--shadow-overlay);
|
|
9941
9538
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
9942
9539
|
--tw-outline-style: none;
|
|
@@ -9976,6 +9573,9 @@
|
|
|
9976
9573
|
--tw-exit-opacity: 0;
|
|
9977
9574
|
}
|
|
9978
9575
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
9576
|
+
transition-property: opacity,transform;
|
|
9577
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
9578
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
9979
9579
|
will-change: opacity,transform;
|
|
9980
9580
|
}
|
|
9981
9581
|
& [data-slot="popover-overlay-arrow"] {
|
|
@@ -10020,9 +9620,6 @@
|
|
|
10020
9620
|
[data-slot="label"] {
|
|
10021
9621
|
width: fit-content;
|
|
10022
9622
|
}
|
|
10023
|
-
[data-slot="description"] {
|
|
10024
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
10025
|
-
}
|
|
10026
9623
|
}
|
|
10027
9624
|
.select__trigger {
|
|
10028
9625
|
position: relative;
|
|
@@ -10062,21 +9659,14 @@
|
|
|
10062
9659
|
}
|
|
10063
9660
|
cursor: var(--cursor-interactive);
|
|
10064
9661
|
border-width: var(--border-width-field);
|
|
10065
|
-
border-color: var(--
|
|
9662
|
+
border-color: var(--field-border);
|
|
10066
9663
|
&:has(.select__indicator) {
|
|
10067
|
-
padding-
|
|
9664
|
+
padding-inline-end: calc(var(--spacing) * 7);
|
|
10068
9665
|
}
|
|
10069
9666
|
@media (hover: hover) {
|
|
10070
9667
|
&:hover, &[data-hovered="true"] {
|
|
10071
|
-
background-color: var(--field-
|
|
10072
|
-
|
|
10073
|
-
background-color: color-mix(
|
|
10074
|
-
in oklab,
|
|
10075
|
-
var(--field-background, var(--default)) 90%,
|
|
10076
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
10077
|
-
);
|
|
10078
|
-
}
|
|
10079
|
-
border-color: var(--color-field-border-hover);
|
|
9668
|
+
background-color: var(--field-hover);
|
|
9669
|
+
border-color: var(--field-border-hover);
|
|
10080
9670
|
}
|
|
10081
9671
|
}
|
|
10082
9672
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
@@ -10089,8 +9679,8 @@
|
|
|
10089
9679
|
--tw-outline-style: none;
|
|
10090
9680
|
outline-style: none;
|
|
10091
9681
|
--tw-ring-offset-width: var(--ring-offset-width);
|
|
10092
|
-
border-color: var(--
|
|
10093
|
-
background-color: var(--
|
|
9682
|
+
border-color: var(--field-border-focus);
|
|
9683
|
+
background-color: var(--field-focus);
|
|
10094
9684
|
}
|
|
10095
9685
|
.select[data-invalid="true"] &, .select[aria-invalid="true"] & {
|
|
10096
9686
|
outline-style: var(--tw-outline-style);
|
|
@@ -10106,7 +9696,7 @@
|
|
|
10106
9696
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
10107
9697
|
--tw-ring-offset-width: 0px;
|
|
10108
9698
|
}
|
|
10109
|
-
background-color: var(--
|
|
9699
|
+
background-color: var(--field-focus);
|
|
10110
9700
|
}
|
|
10111
9701
|
&:disabled, &[data-disabled="true"], &[aria-disabled="true"] {
|
|
10112
9702
|
opacity: var(--disabled-opacity);
|
|
@@ -10118,9 +9708,9 @@
|
|
|
10118
9708
|
--tw-shadow: 0 0 #0000;
|
|
10119
9709
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
10120
9710
|
background-color: var(--select-trigger-bg);
|
|
10121
|
-
--select-trigger-bg: var(--
|
|
10122
|
-
--select-trigger-bg-hover: var(--
|
|
10123
|
-
--select-trigger-bg-focus: var(--
|
|
9711
|
+
--select-trigger-bg: var(--default);
|
|
9712
|
+
--select-trigger-bg-hover: var(--default-hover);
|
|
9713
|
+
--select-trigger-bg-focus: var(--default);
|
|
10124
9714
|
@media (hover: hover) {
|
|
10125
9715
|
&:hover, &[data-hovered="true"] {
|
|
10126
9716
|
background-color: var(--select-trigger-bg-hover);
|
|
@@ -10132,7 +9722,7 @@
|
|
|
10132
9722
|
}
|
|
10133
9723
|
.select__value {
|
|
10134
9724
|
flex: 1;
|
|
10135
|
-
text-align:
|
|
9725
|
+
text-align: start;
|
|
10136
9726
|
font-size: var(--text-base);
|
|
10137
9727
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
10138
9728
|
overflow-wrap: break-word;
|
|
@@ -10151,7 +9741,7 @@
|
|
|
10151
9741
|
.select__indicator {
|
|
10152
9742
|
position: absolute;
|
|
10153
9743
|
inset-block: calc(var(--spacing) * 0);
|
|
10154
|
-
|
|
9744
|
+
inset-inline-end: calc(var(--spacing) * 2);
|
|
10155
9745
|
margin-block: auto;
|
|
10156
9746
|
display: flex;
|
|
10157
9747
|
flex-shrink: 0;
|
|
@@ -10177,11 +9767,14 @@
|
|
|
10177
9767
|
scroll-padding-block: calc(var(--spacing) * 1);
|
|
10178
9768
|
overflow-y: auto;
|
|
10179
9769
|
overscroll-behavior: contain;
|
|
10180
|
-
border-radius: calc(var(--radius) * 3);
|
|
10181
9770
|
background-color: var(--overlay);
|
|
10182
9771
|
padding: calc(var(--spacing) * 0);
|
|
10183
9772
|
font-size: var(--text-sm);
|
|
10184
9773
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
9774
|
+
scrollbar-width: var(--scrollbar-width);
|
|
9775
|
+
scrollbar-color: var(--scrollbar-color);
|
|
9776
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
9777
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
10185
9778
|
box-shadow: var(--shadow-overlay);
|
|
10186
9779
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
10187
9780
|
--tw-outline-style: none;
|
|
@@ -10221,6 +9814,9 @@
|
|
|
10221
9814
|
--tw-exit-opacity: 0;
|
|
10222
9815
|
}
|
|
10223
9816
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
9817
|
+
transition-property: opacity,transform;
|
|
9818
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
9819
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
10224
9820
|
will-change: opacity,transform;
|
|
10225
9821
|
}
|
|
10226
9822
|
& [data-slot="popover-overlay-arrow"] {
|
|
@@ -10296,21 +9892,14 @@
|
|
|
10296
9892
|
}
|
|
10297
9893
|
cursor: var(--cursor-interactive);
|
|
10298
9894
|
border-width: var(--border-width-field);
|
|
10299
|
-
border-color: var(--
|
|
9895
|
+
border-color: var(--field-border);
|
|
10300
9896
|
&:has(.autocomplete__indicator) {
|
|
10301
|
-
padding-
|
|
9897
|
+
padding-inline-end: calc(var(--spacing) * 7);
|
|
10302
9898
|
}
|
|
10303
9899
|
@media (hover: hover) {
|
|
10304
9900
|
&:hover:not(:has(.autocomplete__clear-button:hover)), &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
|
|
10305
|
-
background-color: var(--field-
|
|
10306
|
-
|
|
10307
|
-
background-color: color-mix(
|
|
10308
|
-
in oklab,
|
|
10309
|
-
var(--field-background, var(--default)) 90%,
|
|
10310
|
-
var(--field-foreground, var(--foreground)) 2%
|
|
10311
|
-
);
|
|
10312
|
-
}
|
|
10313
|
-
border-color: var(--color-field-border-hover);
|
|
9901
|
+
background-color: var(--field-hover);
|
|
9902
|
+
border-color: var(--field-border-hover);
|
|
10314
9903
|
}
|
|
10315
9904
|
}
|
|
10316
9905
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
@@ -10323,8 +9912,8 @@
|
|
|
10323
9912
|
--tw-outline-style: none;
|
|
10324
9913
|
outline-style: none;
|
|
10325
9914
|
--tw-ring-offset-width: var(--ring-offset-width);
|
|
10326
|
-
border-color: var(--
|
|
10327
|
-
background-color: var(--
|
|
9915
|
+
border-color: var(--field-border-focus);
|
|
9916
|
+
background-color: var(--field-focus);
|
|
10328
9917
|
}
|
|
10329
9918
|
.autocomplete[data-invalid="true"] &, .autocomplete[aria-invalid="true"] & {
|
|
10330
9919
|
outline-style: var(--tw-outline-style);
|
|
@@ -10340,7 +9929,7 @@
|
|
|
10340
9929
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
10341
9930
|
--tw-ring-offset-width: 0px;
|
|
10342
9931
|
}
|
|
10343
|
-
background-color: var(--
|
|
9932
|
+
background-color: var(--field-focus);
|
|
10344
9933
|
}
|
|
10345
9934
|
&:disabled, &[data-disabled="true"], &[aria-disabled="true"] {
|
|
10346
9935
|
opacity: var(--disabled-opacity);
|
|
@@ -10352,9 +9941,9 @@
|
|
|
10352
9941
|
--tw-shadow: 0 0 #0000;
|
|
10353
9942
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
10354
9943
|
background-color: var(--autocomplete-trigger-bg);
|
|
10355
|
-
--autocomplete-trigger-bg: var(--
|
|
10356
|
-
--autocomplete-trigger-bg-hover: var(--
|
|
10357
|
-
--autocomplete-trigger-bg-focus: var(--
|
|
9944
|
+
--autocomplete-trigger-bg: var(--default);
|
|
9945
|
+
--autocomplete-trigger-bg-hover: var(--default-hover);
|
|
9946
|
+
--autocomplete-trigger-bg-focus: var(--default);
|
|
10358
9947
|
@media (hover: hover) {
|
|
10359
9948
|
&:hover:not(:has(.autocomplete__clear-button:hover)), &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
|
|
10360
9949
|
background-color: var(--autocomplete-trigger-bg-hover);
|
|
@@ -10366,7 +9955,7 @@
|
|
|
10366
9955
|
}
|
|
10367
9956
|
.autocomplete__value {
|
|
10368
9957
|
flex: 1;
|
|
10369
|
-
text-align:
|
|
9958
|
+
text-align: start;
|
|
10370
9959
|
font-size: var(--text-base);
|
|
10371
9960
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
10372
9961
|
overflow-wrap: break-word;
|
|
@@ -10385,7 +9974,7 @@
|
|
|
10385
9974
|
.autocomplete__indicator {
|
|
10386
9975
|
position: absolute;
|
|
10387
9976
|
inset-block: calc(var(--spacing) * 0);
|
|
10388
|
-
|
|
9977
|
+
inset-inline-end: calc(var(--spacing) * 2);
|
|
10389
9978
|
margin-block: auto;
|
|
10390
9979
|
display: flex;
|
|
10391
9980
|
flex-shrink: 0;
|
|
@@ -10412,12 +10001,15 @@
|
|
|
10412
10001
|
scroll-padding-block: calc(var(--spacing) * 1);
|
|
10413
10002
|
overflow-y: auto;
|
|
10414
10003
|
overscroll-behavior: contain;
|
|
10415
|
-
border-radius: calc(var(--radius) * 3);
|
|
10416
10004
|
background-color: var(--overlay);
|
|
10417
10005
|
padding: calc(var(--spacing) * 0);
|
|
10418
10006
|
padding-top: calc(var(--spacing) * 2);
|
|
10419
10007
|
font-size: var(--text-sm);
|
|
10420
10008
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
10009
|
+
scrollbar-width: var(--scrollbar-width);
|
|
10010
|
+
scrollbar-color: var(--scrollbar-color);
|
|
10011
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
10012
|
+
border-radius: min(32px, var(--radius-3xl));
|
|
10421
10013
|
box-shadow: var(--shadow-overlay);
|
|
10422
10014
|
&:focus-visible:not(:focus), &[data-focus-visible="true"] {
|
|
10423
10015
|
--tw-outline-style: none;
|
|
@@ -10457,6 +10049,9 @@
|
|
|
10457
10049
|
--tw-exit-opacity: 0;
|
|
10458
10050
|
}
|
|
10459
10051
|
&[data-exiting="true"], &[data-entering="true"] {
|
|
10052
|
+
transition-property: opacity,transform;
|
|
10053
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
10054
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
10460
10055
|
will-change: opacity,transform;
|
|
10461
10056
|
}
|
|
10462
10057
|
& [data-slot="popover-overlay-arrow"] {
|
|
@@ -10519,7 +10114,7 @@
|
|
|
10519
10114
|
-webkit-user-select: none;
|
|
10520
10115
|
user-select: none;
|
|
10521
10116
|
-webkit-tap-highlight-color: transparent;
|
|
10522
|
-
margin-
|
|
10117
|
+
margin-inline-end: calc(var(--spacing) * 0);
|
|
10523
10118
|
width: calc(var(--spacing) * 5);
|
|
10524
10119
|
height: calc(var(--spacing) * 5);
|
|
10525
10120
|
flex-shrink: 0;
|
|
@@ -10554,10 +10149,7 @@
|
|
|
10554
10149
|
}
|
|
10555
10150
|
@media (hover: hover) {
|
|
10556
10151
|
&:hover, &[data-hovered="true"] {
|
|
10557
|
-
background-color: var(--default);
|
|
10558
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
10559
|
-
background-color: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
10560
|
-
}
|
|
10152
|
+
background-color: var(--default-hover);
|
|
10561
10153
|
}
|
|
10562
10154
|
}
|
|
10563
10155
|
&:active, &[data-pressed="true"] {
|
|
@@ -10607,15 +10199,283 @@
|
|
|
10607
10199
|
.kbd--light {
|
|
10608
10200
|
background-color: transparent;
|
|
10609
10201
|
}
|
|
10202
|
+
.typography {
|
|
10203
|
+
color: var(--foreground);
|
|
10204
|
+
}
|
|
10205
|
+
.typography-prose {
|
|
10206
|
+
color: var(--foreground);
|
|
10207
|
+
}
|
|
10208
|
+
.typography-prose h1 {
|
|
10209
|
+
font-size: var(--text-4xl);
|
|
10210
|
+
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
10211
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10212
|
+
font-weight: var(--font-weight-semibold);
|
|
10213
|
+
--tw-tracking: var(--tracking-tight);
|
|
10214
|
+
letter-spacing: var(--tracking-tight);
|
|
10215
|
+
}
|
|
10216
|
+
.typography-prose h2 {
|
|
10217
|
+
font-size: var(--text-3xl);
|
|
10218
|
+
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
10219
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10220
|
+
font-weight: var(--font-weight-semibold);
|
|
10221
|
+
--tw-tracking: var(--tracking-tight);
|
|
10222
|
+
letter-spacing: var(--tracking-tight);
|
|
10223
|
+
}
|
|
10224
|
+
.typography-prose h3 {
|
|
10225
|
+
font-size: var(--text-2xl);
|
|
10226
|
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
10227
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10228
|
+
font-weight: var(--font-weight-semibold);
|
|
10229
|
+
--tw-tracking: var(--tracking-tight);
|
|
10230
|
+
letter-spacing: var(--tracking-tight);
|
|
10231
|
+
}
|
|
10232
|
+
.typography-prose h4 {
|
|
10233
|
+
font-size: var(--text-xl);
|
|
10234
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
10235
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10236
|
+
font-weight: var(--font-weight-semibold);
|
|
10237
|
+
--tw-tracking: var(--tracking-tight);
|
|
10238
|
+
letter-spacing: var(--tracking-tight);
|
|
10239
|
+
}
|
|
10240
|
+
.typography-prose h5 {
|
|
10241
|
+
font-size: var(--text-lg);
|
|
10242
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
10243
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10244
|
+
font-weight: var(--font-weight-semibold);
|
|
10245
|
+
--tw-tracking: var(--tracking-tight);
|
|
10246
|
+
letter-spacing: var(--tracking-tight);
|
|
10247
|
+
}
|
|
10248
|
+
.typography-prose h6 {
|
|
10249
|
+
font-size: var(--text-base);
|
|
10250
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
10251
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10252
|
+
font-weight: var(--font-weight-semibold);
|
|
10253
|
+
--tw-tracking: var(--tracking-tight);
|
|
10254
|
+
letter-spacing: var(--tracking-tight);
|
|
10255
|
+
}
|
|
10256
|
+
.typography-prose p {
|
|
10257
|
+
font-size: var(--text-base);
|
|
10258
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
10259
|
+
--tw-leading: calc(var(--spacing) * 7);
|
|
10260
|
+
line-height: calc(var(--spacing) * 7);
|
|
10261
|
+
}
|
|
10262
|
+
.typography-prose code {
|
|
10263
|
+
border-radius: calc(var(--radius) * 0.75);
|
|
10264
|
+
background-color: var(--default);
|
|
10265
|
+
padding-inline: calc(var(--spacing) * 1.5);
|
|
10266
|
+
padding-block: calc(var(--spacing) * 0.5);
|
|
10267
|
+
font-family: var(--font-mono);
|
|
10268
|
+
font-size: var(--text-sm);
|
|
10269
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
10270
|
+
color: var(--foreground);
|
|
10271
|
+
}
|
|
10272
|
+
.typography-prose a {
|
|
10273
|
+
--tw-font-weight: var(--font-weight-medium);
|
|
10274
|
+
font-weight: var(--font-weight-medium);
|
|
10275
|
+
color: var(--link);
|
|
10276
|
+
text-decoration-line: underline;
|
|
10277
|
+
text-underline-offset: 4px;
|
|
10278
|
+
}
|
|
10279
|
+
.typography-prose blockquote {
|
|
10280
|
+
margin-top: calc(var(--spacing) * 4);
|
|
10281
|
+
border-left-style: var(--tw-border-style);
|
|
10282
|
+
border-left-width: 4px;
|
|
10283
|
+
border-color: var(--border);
|
|
10284
|
+
padding-left: calc(var(--spacing) * 4);
|
|
10285
|
+
color: var(--muted);
|
|
10286
|
+
font-style: italic;
|
|
10287
|
+
}
|
|
10288
|
+
.typography-prose ul {
|
|
10289
|
+
margin-block: calc(var(--spacing) * 4);
|
|
10290
|
+
list-style-type: disc;
|
|
10291
|
+
:where(& > :not(:last-child)) {
|
|
10292
|
+
--tw-space-y-reverse: 0;
|
|
10293
|
+
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
|
|
10294
|
+
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
|
10295
|
+
}
|
|
10296
|
+
padding-left: calc(var(--spacing) * 6);
|
|
10297
|
+
}
|
|
10298
|
+
.typography-prose ol {
|
|
10299
|
+
margin-block: calc(var(--spacing) * 4);
|
|
10300
|
+
list-style-type: decimal;
|
|
10301
|
+
:where(& > :not(:last-child)) {
|
|
10302
|
+
--tw-space-y-reverse: 0;
|
|
10303
|
+
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
|
|
10304
|
+
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
|
10305
|
+
}
|
|
10306
|
+
padding-left: calc(var(--spacing) * 6);
|
|
10307
|
+
}
|
|
10308
|
+
.typography-prose li {
|
|
10309
|
+
font-size: var(--text-base);
|
|
10310
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
10311
|
+
--tw-leading: calc(var(--spacing) * 7);
|
|
10312
|
+
line-height: calc(var(--spacing) * 7);
|
|
10313
|
+
}
|
|
10314
|
+
.typography-prose hr {
|
|
10315
|
+
margin-block: calc(var(--spacing) * 8);
|
|
10316
|
+
border-color: var(--separator);
|
|
10317
|
+
}
|
|
10318
|
+
.typography-prose pre {
|
|
10319
|
+
margin-block: calc(var(--spacing) * 4);
|
|
10320
|
+
overflow-x: auto;
|
|
10321
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
10322
|
+
background-color: var(--default);
|
|
10323
|
+
padding: calc(var(--spacing) * 4);
|
|
10324
|
+
font-family: var(--font-mono);
|
|
10325
|
+
font-size: var(--text-sm);
|
|
10326
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
10327
|
+
--tw-leading: var(--leading-relaxed);
|
|
10328
|
+
line-height: var(--leading-relaxed);
|
|
10329
|
+
}
|
|
10330
|
+
.typography-prose strong {
|
|
10331
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10332
|
+
font-weight: var(--font-weight-semibold);
|
|
10333
|
+
color: var(--foreground);
|
|
10334
|
+
}
|
|
10335
|
+
.typography-prose em {
|
|
10336
|
+
font-style: italic;
|
|
10337
|
+
}
|
|
10338
|
+
.typography-prose img {
|
|
10339
|
+
margin-block: calc(var(--spacing) * 4);
|
|
10340
|
+
border-radius: calc(var(--radius) * 1.5);
|
|
10341
|
+
}
|
|
10342
|
+
.typography--h1 {
|
|
10343
|
+
font-size: var(--text-4xl);
|
|
10344
|
+
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
10345
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10346
|
+
font-weight: var(--font-weight-semibold);
|
|
10347
|
+
--tw-tracking: var(--tracking-tight);
|
|
10348
|
+
letter-spacing: var(--tracking-tight);
|
|
10349
|
+
}
|
|
10350
|
+
.typography--h2 {
|
|
10351
|
+
font-size: var(--text-3xl);
|
|
10352
|
+
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
10353
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10354
|
+
font-weight: var(--font-weight-semibold);
|
|
10355
|
+
--tw-tracking: var(--tracking-tight);
|
|
10356
|
+
letter-spacing: var(--tracking-tight);
|
|
10357
|
+
}
|
|
10358
|
+
.typography--h3 {
|
|
10359
|
+
font-size: var(--text-2xl);
|
|
10360
|
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
10361
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10362
|
+
font-weight: var(--font-weight-semibold);
|
|
10363
|
+
--tw-tracking: var(--tracking-tight);
|
|
10364
|
+
letter-spacing: var(--tracking-tight);
|
|
10365
|
+
}
|
|
10366
|
+
.typography--h4 {
|
|
10367
|
+
font-size: var(--text-xl);
|
|
10368
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
10369
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10370
|
+
font-weight: var(--font-weight-semibold);
|
|
10371
|
+
--tw-tracking: var(--tracking-tight);
|
|
10372
|
+
letter-spacing: var(--tracking-tight);
|
|
10373
|
+
}
|
|
10374
|
+
.typography--h5 {
|
|
10375
|
+
font-size: var(--text-lg);
|
|
10376
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
10377
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10378
|
+
font-weight: var(--font-weight-semibold);
|
|
10379
|
+
--tw-tracking: var(--tracking-tight);
|
|
10380
|
+
letter-spacing: var(--tracking-tight);
|
|
10381
|
+
}
|
|
10382
|
+
.typography--h6 {
|
|
10383
|
+
font-size: var(--text-base);
|
|
10384
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
10385
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10386
|
+
font-weight: var(--font-weight-semibold);
|
|
10387
|
+
--tw-tracking: var(--tracking-tight);
|
|
10388
|
+
letter-spacing: var(--tracking-tight);
|
|
10389
|
+
}
|
|
10390
|
+
.typography--body {
|
|
10391
|
+
font-size: var(--text-base);
|
|
10392
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
10393
|
+
--tw-leading: calc(var(--spacing) * 7);
|
|
10394
|
+
line-height: calc(var(--spacing) * 7);
|
|
10395
|
+
}
|
|
10396
|
+
.typography--body-sm {
|
|
10397
|
+
font-size: var(--text-sm);
|
|
10398
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
10399
|
+
--tw-leading: calc(var(--spacing) * 6);
|
|
10400
|
+
line-height: calc(var(--spacing) * 6);
|
|
10401
|
+
}
|
|
10402
|
+
.typography--body-xs {
|
|
10403
|
+
font-size: var(--text-xs);
|
|
10404
|
+
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
10405
|
+
--tw-leading: calc(var(--spacing) * 5);
|
|
10406
|
+
line-height: calc(var(--spacing) * 5);
|
|
10407
|
+
}
|
|
10408
|
+
.typography--code {
|
|
10409
|
+
border-radius: calc(var(--radius) * 0.75);
|
|
10410
|
+
background-color: var(--default);
|
|
10411
|
+
padding-inline: calc(var(--spacing) * 1.5);
|
|
10412
|
+
padding-block: calc(var(--spacing) * 0.5);
|
|
10413
|
+
font-family: var(--font-mono);
|
|
10414
|
+
font-size: var(--text-sm);
|
|
10415
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
10416
|
+
color: var(--foreground);
|
|
10417
|
+
}
|
|
10418
|
+
.typography--align-start {
|
|
10419
|
+
text-align: left;
|
|
10420
|
+
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
|
|
10421
|
+
text-align: right;
|
|
10422
|
+
}
|
|
10423
|
+
}
|
|
10424
|
+
.typography--align-center {
|
|
10425
|
+
text-align: center;
|
|
10426
|
+
}
|
|
10427
|
+
.typography--align-end {
|
|
10428
|
+
text-align: right;
|
|
10429
|
+
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
|
|
10430
|
+
text-align: left;
|
|
10431
|
+
}
|
|
10432
|
+
}
|
|
10433
|
+
.typography--align-justify {
|
|
10434
|
+
text-align: justify;
|
|
10435
|
+
}
|
|
10436
|
+
.typography--color-default {
|
|
10437
|
+
color: var(--foreground);
|
|
10438
|
+
}
|
|
10439
|
+
.typography--color-muted {
|
|
10440
|
+
color: var(--muted);
|
|
10441
|
+
}
|
|
10442
|
+
.typography--truncate {
|
|
10443
|
+
display: block;
|
|
10444
|
+
overflow: hidden;
|
|
10445
|
+
text-overflow: ellipsis;
|
|
10446
|
+
white-space: nowrap;
|
|
10447
|
+
}
|
|
10448
|
+
.typography--weight-normal {
|
|
10449
|
+
--tw-font-weight: var(--font-weight-normal);
|
|
10450
|
+
font-weight: var(--font-weight-normal);
|
|
10451
|
+
}
|
|
10452
|
+
.typography--weight-medium {
|
|
10453
|
+
--tw-font-weight: var(--font-weight-medium);
|
|
10454
|
+
font-weight: var(--font-weight-medium);
|
|
10455
|
+
}
|
|
10456
|
+
.typography--weight-semibold {
|
|
10457
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
10458
|
+
font-weight: var(--font-weight-semibold);
|
|
10459
|
+
}
|
|
10460
|
+
.typography--weight-bold {
|
|
10461
|
+
--tw-font-weight: var(--font-weight-bold);
|
|
10462
|
+
font-weight: var(--font-weight-bold);
|
|
10463
|
+
}
|
|
10610
10464
|
.scroll-shadow {
|
|
10611
10465
|
position: relative;
|
|
10612
10466
|
--scroll-shadow-size: 40px;
|
|
10613
10467
|
}
|
|
10614
10468
|
.scroll-shadow--vertical {
|
|
10615
10469
|
overflow-y: auto;
|
|
10470
|
+
scrollbar-width: var(--scrollbar-width);
|
|
10471
|
+
scrollbar-color: var(--scrollbar-color);
|
|
10472
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
10616
10473
|
}
|
|
10617
10474
|
.scroll-shadow--horizontal {
|
|
10618
10475
|
overflow-x: auto;
|
|
10476
|
+
scrollbar-width: var(--scrollbar-width);
|
|
10477
|
+
scrollbar-color: var(--scrollbar-color);
|
|
10478
|
+
scrollbar-gutter: var(--scrollbar-gutter);
|
|
10619
10479
|
}
|
|
10620
10480
|
.scroll-shadow--fade.scroll-shadow--vertical {
|
|
10621
10481
|
&[data-top-scroll="true"] {
|
|
@@ -10655,10 +10515,9 @@
|
|
|
10655
10515
|
}
|
|
10656
10516
|
.scroll-shadow--hide-scrollbar {
|
|
10657
10517
|
scrollbar-width: none;
|
|
10518
|
+
scrollbar-color: auto;
|
|
10519
|
+
scrollbar-gutter: auto;
|
|
10658
10520
|
-ms-overflow-style: none;
|
|
10659
|
-
&::-webkit-scrollbar {
|
|
10660
|
-
display: none;
|
|
10661
|
-
}
|
|
10662
10521
|
}
|
|
10663
10522
|
}
|
|
10664
10523
|
@layer theme {
|
|
@@ -10690,7 +10549,15 @@
|
|
|
10690
10549
|
--overlay: var(--white);
|
|
10691
10550
|
--overlay-foreground: var(--foreground);
|
|
10692
10551
|
--muted: oklch(0.5517 0.0138 285.94);
|
|
10693
|
-
--scrollbar:
|
|
10552
|
+
--scrollbar: var(--scrollbar-thumb);
|
|
10553
|
+
--scrollbar-thumb: var(--foreground);
|
|
10554
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10555
|
+
--scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
|
|
10556
|
+
}
|
|
10557
|
+
--scrollbar-track: transparent;
|
|
10558
|
+
--scrollbar-gutter: auto;
|
|
10559
|
+
--scrollbar-width: thin;
|
|
10560
|
+
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
10694
10561
|
--default: oklch(94% 0.001 286.375);
|
|
10695
10562
|
--default-foreground: var(--eclipse);
|
|
10696
10563
|
--accent: oklch(0.6204 0.195 253.83);
|
|
@@ -10711,6 +10578,138 @@
|
|
|
10711
10578
|
--separator: oklch(92% 0.004 286.32);
|
|
10712
10579
|
--focus: var(--accent);
|
|
10713
10580
|
--link: var(--foreground);
|
|
10581
|
+
--backdrop: rgba(0, 0, 0, 0.5);
|
|
10582
|
+
--surface-hover: var(--surface);
|
|
10583
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10584
|
+
--surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
|
|
10585
|
+
}
|
|
10586
|
+
--background-secondary: var(--background);
|
|
10587
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10588
|
+
--background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
|
|
10589
|
+
}
|
|
10590
|
+
--background-tertiary: var(--background);
|
|
10591
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10592
|
+
--background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
|
|
10593
|
+
}
|
|
10594
|
+
--background-inverse: var(--foreground);
|
|
10595
|
+
--default-hover: var(--default);
|
|
10596
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10597
|
+
--default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
10598
|
+
}
|
|
10599
|
+
--accent-hover: var(--accent);
|
|
10600
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10601
|
+
--accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
10602
|
+
}
|
|
10603
|
+
--success-hover: var(--success);
|
|
10604
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10605
|
+
--success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
|
|
10606
|
+
}
|
|
10607
|
+
--warning-hover: var(--warning);
|
|
10608
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10609
|
+
--warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
|
|
10610
|
+
}
|
|
10611
|
+
--danger-hover: var(--danger);
|
|
10612
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10613
|
+
--danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
|
|
10614
|
+
}
|
|
10615
|
+
--field-hover: var(--field-background, var(--default));
|
|
10616
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10617
|
+
--field-hover: color-mix(
|
|
10618
|
+
in oklab,
|
|
10619
|
+
var(--field-background, var(--default)) 90%,
|
|
10620
|
+
var(--field-foreground, var(--foreground)) 2%
|
|
10621
|
+
);
|
|
10622
|
+
}
|
|
10623
|
+
--field-focus: var(--field-background, var(--default));
|
|
10624
|
+
--field-border-hover: var(--field-border, var(--border));
|
|
10625
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10626
|
+
--field-border-hover: color-mix(
|
|
10627
|
+
in oklab,
|
|
10628
|
+
var(--field-border, var(--border)) 88%,
|
|
10629
|
+
var(--field-foreground, var(--foreground)) 10%
|
|
10630
|
+
);
|
|
10631
|
+
}
|
|
10632
|
+
--field-border-focus: var(--field-border, var(--border));
|
|
10633
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10634
|
+
--field-border-focus: color-mix(
|
|
10635
|
+
in oklab,
|
|
10636
|
+
var(--field-border, var(--border)) 74%,
|
|
10637
|
+
var(--field-foreground, var(--foreground)) 22%
|
|
10638
|
+
);
|
|
10639
|
+
}
|
|
10640
|
+
--default-soft: var(--default);
|
|
10641
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10642
|
+
--default-soft: color-mix(in oklab, var(--default) 50%, transparent);
|
|
10643
|
+
}
|
|
10644
|
+
--default-soft-foreground: var(--default-foreground);
|
|
10645
|
+
--default-soft-hover: var(--default);
|
|
10646
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10647
|
+
--default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
|
|
10648
|
+
}
|
|
10649
|
+
--accent-soft: var(--accent);
|
|
10650
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10651
|
+
--accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
10652
|
+
}
|
|
10653
|
+
--accent-soft-foreground: var(--accent);
|
|
10654
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10655
|
+
--accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%);
|
|
10656
|
+
}
|
|
10657
|
+
--accent-soft-hover: var(--accent);
|
|
10658
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10659
|
+
--accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
|
|
10660
|
+
}
|
|
10661
|
+
--danger-soft: var(--danger);
|
|
10662
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10663
|
+
--danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
10664
|
+
}
|
|
10665
|
+
--danger-soft-foreground: var(--danger);
|
|
10666
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10667
|
+
--danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
|
|
10668
|
+
}
|
|
10669
|
+
--danger-soft-hover: var(--danger);
|
|
10670
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10671
|
+
--danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
|
|
10672
|
+
}
|
|
10673
|
+
--warning-soft: var(--warning);
|
|
10674
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10675
|
+
--warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
|
|
10676
|
+
}
|
|
10677
|
+
--warning-soft-foreground: var(--warning);
|
|
10678
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10679
|
+
--warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
|
|
10680
|
+
}
|
|
10681
|
+
--warning-soft-hover: var(--warning);
|
|
10682
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10683
|
+
--warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
|
|
10684
|
+
}
|
|
10685
|
+
--success-soft: var(--success);
|
|
10686
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10687
|
+
--success-soft: color-mix(in oklab, var(--success) 15%, transparent);
|
|
10688
|
+
}
|
|
10689
|
+
--success-soft-foreground: var(--success);
|
|
10690
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10691
|
+
--success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%);
|
|
10692
|
+
}
|
|
10693
|
+
--success-soft-hover: var(--success);
|
|
10694
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10695
|
+
--success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
|
|
10696
|
+
}
|
|
10697
|
+
--separator-secondary: var(--surface);
|
|
10698
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10699
|
+
--separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
10700
|
+
}
|
|
10701
|
+
--separator-tertiary: var(--surface);
|
|
10702
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10703
|
+
--separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
|
|
10704
|
+
}
|
|
10705
|
+
--border-secondary: var(--surface);
|
|
10706
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10707
|
+
--border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
|
|
10708
|
+
}
|
|
10709
|
+
--border-tertiary: var(--surface);
|
|
10710
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10711
|
+
--border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
|
|
10712
|
+
}
|
|
10714
10713
|
--surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
|
|
10715
10714
|
0 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
10716
10715
|
--overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
|
|
@@ -10730,7 +10729,15 @@
|
|
|
10730
10729
|
--overlay: oklch(0.2103 0.0059 285.89);
|
|
10731
10730
|
--overlay-foreground: var(--foreground);
|
|
10732
10731
|
--muted: oklch(70.5% 0.015 286.067);
|
|
10733
|
-
--scrollbar:
|
|
10732
|
+
--scrollbar: var(--scrollbar-thumb);
|
|
10733
|
+
--scrollbar-thumb: var(--foreground);
|
|
10734
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10735
|
+
--scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
|
|
10736
|
+
}
|
|
10737
|
+
--scrollbar-track: transparent;
|
|
10738
|
+
--scrollbar-gutter: auto;
|
|
10739
|
+
--scrollbar-width: thin;
|
|
10740
|
+
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
10734
10741
|
--default: oklch(27.4% 0.006 286.033);
|
|
10735
10742
|
--default-foreground: var(--snow);
|
|
10736
10743
|
--field-background: oklch(0.2103 0.0059 285.89);
|
|
@@ -10745,9 +10752,177 @@
|
|
|
10745
10752
|
--separator: oklch(25% 0.006 286.033);
|
|
10746
10753
|
--focus: var(--accent);
|
|
10747
10754
|
--link: var(--foreground);
|
|
10755
|
+
--backdrop: rgba(0, 0, 0, 0.6);
|
|
10748
10756
|
--surface-shadow: 0 0 0 0 transparent inset;
|
|
10749
10757
|
--overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
|
10750
10758
|
--field-shadow: 0 0 0 0 transparent inset;
|
|
10759
|
+
--surface-hover: var(--surface);
|
|
10760
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10761
|
+
--surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
|
|
10762
|
+
}
|
|
10763
|
+
--background-secondary: var(--background);
|
|
10764
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10765
|
+
--background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
|
|
10766
|
+
}
|
|
10767
|
+
--background-tertiary: var(--background);
|
|
10768
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10769
|
+
--background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
|
|
10770
|
+
}
|
|
10771
|
+
--background-inverse: var(--foreground);
|
|
10772
|
+
--default-hover: var(--default);
|
|
10773
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10774
|
+
--default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
10775
|
+
}
|
|
10776
|
+
--accent-hover: var(--accent);
|
|
10777
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10778
|
+
--accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
10779
|
+
}
|
|
10780
|
+
--success-hover: var(--success);
|
|
10781
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10782
|
+
--success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
|
|
10783
|
+
}
|
|
10784
|
+
--warning-hover: var(--warning);
|
|
10785
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10786
|
+
--warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
|
|
10787
|
+
}
|
|
10788
|
+
--danger-hover: var(--danger);
|
|
10789
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10790
|
+
--danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
|
|
10791
|
+
}
|
|
10792
|
+
--field-hover: var(--field-background, var(--default));
|
|
10793
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10794
|
+
--field-hover: color-mix(
|
|
10795
|
+
in oklab,
|
|
10796
|
+
var(--field-background, var(--default)) 90%,
|
|
10797
|
+
var(--field-foreground, var(--foreground)) 2%
|
|
10798
|
+
);
|
|
10799
|
+
}
|
|
10800
|
+
--field-focus: var(--field-background, var(--default));
|
|
10801
|
+
--field-border-hover: var(--field-border, var(--border));
|
|
10802
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10803
|
+
--field-border-hover: color-mix(
|
|
10804
|
+
in oklab,
|
|
10805
|
+
var(--field-border, var(--border)) 88%,
|
|
10806
|
+
var(--field-foreground, var(--foreground)) 10%
|
|
10807
|
+
);
|
|
10808
|
+
}
|
|
10809
|
+
--field-border-focus: var(--field-border, var(--border));
|
|
10810
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10811
|
+
--field-border-focus: color-mix(
|
|
10812
|
+
in oklab,
|
|
10813
|
+
var(--field-border, var(--border)) 74%,
|
|
10814
|
+
var(--field-foreground, var(--foreground)) 22%
|
|
10815
|
+
);
|
|
10816
|
+
}
|
|
10817
|
+
--default-soft: var(--default);
|
|
10818
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10819
|
+
--default-soft: color-mix(in oklab, var(--default) 50%, transparent);
|
|
10820
|
+
}
|
|
10821
|
+
--default-soft-foreground: var(--default-foreground);
|
|
10822
|
+
--default-soft-hover: var(--default);
|
|
10823
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10824
|
+
--default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
|
|
10825
|
+
}
|
|
10826
|
+
--accent-soft: var(--accent);
|
|
10827
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10828
|
+
--accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
|
|
10829
|
+
}
|
|
10830
|
+
--accent-soft-foreground: var(--accent);
|
|
10831
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10832
|
+
--accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
|
|
10833
|
+
}
|
|
10834
|
+
--accent-soft-hover: var(--accent);
|
|
10835
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10836
|
+
--accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
|
|
10837
|
+
}
|
|
10838
|
+
--danger-soft: var(--danger);
|
|
10839
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10840
|
+
--danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
10841
|
+
}
|
|
10842
|
+
--danger-soft-foreground: var(--danger);
|
|
10843
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10844
|
+
--danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
|
|
10845
|
+
}
|
|
10846
|
+
--danger-soft-hover: var(--danger);
|
|
10847
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10848
|
+
--danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
|
|
10849
|
+
}
|
|
10850
|
+
--warning-soft: var(--warning);
|
|
10851
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10852
|
+
--warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
|
|
10853
|
+
}
|
|
10854
|
+
--warning-soft-foreground: var(--warning);
|
|
10855
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10856
|
+
--warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
|
|
10857
|
+
}
|
|
10858
|
+
--warning-soft-hover: var(--warning);
|
|
10859
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10860
|
+
--warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
|
|
10861
|
+
}
|
|
10862
|
+
--success-soft: var(--success);
|
|
10863
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10864
|
+
--success-soft: color-mix(in oklab, var(--success) 12%, transparent);
|
|
10865
|
+
}
|
|
10866
|
+
--success-soft-foreground: var(--success);
|
|
10867
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10868
|
+
--success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
|
|
10869
|
+
}
|
|
10870
|
+
--success-soft-hover: var(--success);
|
|
10871
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10872
|
+
--success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
|
|
10873
|
+
}
|
|
10874
|
+
--separator-secondary: var(--surface);
|
|
10875
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10876
|
+
--separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
10877
|
+
}
|
|
10878
|
+
--separator-tertiary: var(--surface);
|
|
10879
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10880
|
+
--separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
|
|
10881
|
+
}
|
|
10882
|
+
--border-secondary: var(--surface);
|
|
10883
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10884
|
+
--border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
|
|
10885
|
+
}
|
|
10886
|
+
--border-tertiary: var(--surface);
|
|
10887
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10888
|
+
--border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
|
|
10889
|
+
}
|
|
10890
|
+
}
|
|
10891
|
+
[data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
|
|
10892
|
+
--accent-soft-foreground: var(--accent);
|
|
10893
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10894
|
+
--accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
|
|
10895
|
+
}
|
|
10896
|
+
--danger-soft-foreground: var(--danger);
|
|
10897
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10898
|
+
--danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
|
|
10899
|
+
}
|
|
10900
|
+
--warning-soft-foreground: var(--warning);
|
|
10901
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10902
|
+
--warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
|
|
10903
|
+
}
|
|
10904
|
+
--success-soft-foreground: var(--success);
|
|
10905
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10906
|
+
--success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
|
|
10907
|
+
}
|
|
10908
|
+
}
|
|
10909
|
+
[data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
|
|
10910
|
+
--accent-soft-foreground: var(--accent);
|
|
10911
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10912
|
+
--accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
|
|
10913
|
+
}
|
|
10914
|
+
--danger-soft-foreground: var(--danger);
|
|
10915
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10916
|
+
--danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
|
|
10917
|
+
}
|
|
10918
|
+
--warning-soft-foreground: var(--warning);
|
|
10919
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10920
|
+
--warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
|
|
10921
|
+
}
|
|
10922
|
+
--success-soft-foreground: var(--success);
|
|
10923
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
10924
|
+
--success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
|
|
10925
|
+
}
|
|
10751
10926
|
}
|
|
10752
10927
|
}
|
|
10753
10928
|
}
|