@wellingtonhlc/shared-ui 0.27.1 → 0.29.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +45 -14
  2. package/dist/components/ActionBar.js +3 -3
  3. package/dist/components/ActionPrimitives.js +5 -5
  4. package/dist/components/AppShell.js +5 -5
  5. package/dist/components/Badge.js +4 -4
  6. package/dist/components/Banner.js +5 -5
  7. package/dist/components/Button.d.ts +1 -1
  8. package/dist/components/Button.d.ts.map +1 -1
  9. package/dist/components/Button.js +11 -13
  10. package/dist/components/Card.js +3 -3
  11. package/dist/components/ConfirmationDialog.js +12 -12
  12. package/dist/components/CopyableField.js +1 -1
  13. package/dist/components/DateField.d.ts +1 -0
  14. package/dist/components/DateField.d.ts.map +1 -1
  15. package/dist/components/DateField.js +2 -2
  16. package/dist/components/FieldControl.js +2 -2
  17. package/dist/components/FieldValidationError.js +1 -1
  18. package/dist/components/LoadingOverlay.js +1 -1
  19. package/dist/components/Modal.js +2 -2
  20. package/dist/components/MultiSelectField.js +3 -3
  21. package/dist/components/NavCard.js +1 -1
  22. package/dist/components/Page.js +4 -4
  23. package/dist/components/Pagination.js +7 -7
  24. package/dist/components/RadioGroup.js +2 -2
  25. package/dist/components/SelectionField.js +1 -1
  26. package/dist/components/Sidebar.d.ts.map +1 -1
  27. package/dist/components/Sidebar.js +17 -17
  28. package/dist/components/Switch.js +1 -1
  29. package/dist/components/Table.d.ts.map +1 -1
  30. package/dist/components/Table.js +6 -8
  31. package/dist/components/TabsUnderlined.d.ts.map +1 -1
  32. package/dist/components/TabsUnderlined.js +5 -5
  33. package/dist/components/ThemePreferencesSelector.js +4 -4
  34. package/dist/components/Tooltip.js +1 -1
  35. package/dist/components/form-control-helpers.js +1 -1
  36. package/dist/styles.css +606 -745
  37. package/package.json +14 -2
package/dist/styles.css CHANGED
@@ -595,13 +595,7 @@ h2.react-datepicker__current-month {
595
595
  --color-red-400: oklch(70.4% 0.191 22.216);
596
596
  --color-red-500: oklch(63.7% 0.237 25.331);
597
597
  --color-red-600: oklch(57.7% 0.245 27.325);
598
- --color-red-700: oklch(50.5% 0.213 27.518);
599
598
  --color-red-950: oklch(25.8% 0.092 26.042);
600
- --color-amber-600: oklch(66.6% 0.179 58.318);
601
- --color-amber-700: oklch(55.5% 0.163 48.998);
602
- --color-slate-900: oklch(20.8% 0.042 265.755);
603
- --color-black: #000;
604
- --color-white: #fff;
605
599
  --spacing: 0.25rem;
606
600
  --container-xs: 20rem;
607
601
  --container-sm: 24rem;
@@ -631,10 +625,14 @@ h2.react-datepicker__current-month {
631
625
  --leading-tight: 1.25;
632
626
  --leading-snug: 1.375;
633
627
  --leading-relaxed: 1.625;
628
+ --radius-sm: 0.25rem;
634
629
  --radius-md: 0.375rem;
635
630
  --radius-lg: 0.5rem;
636
631
  --radius-xl: 0.75rem;
637
632
  --radius-2xl: 1rem;
633
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
634
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
635
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
638
636
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
639
637
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
640
638
  --animate-spin: spin 1s linear infinite;
@@ -933,35 +931,35 @@ h2.react-datepicker__current-month {
933
931
  .left-full {
934
932
  left: 100%;
935
933
  }
936
- .z-40 {
937
- z-index: 40;
934
+ .z-\[var\(--z-critical-dialog\)\] {
935
+ z-index: var(--z-critical-dialog);
938
936
  }
939
- .z-50 {
940
- z-index: 50;
937
+ .z-\[var\(--z-flyout\)\] {
938
+ z-index: var(--z-flyout);
941
939
  }
942
- .z-\[2\] {
943
- z-index: 2;
940
+ .z-\[var\(--z-loading-overlay\)\] {
941
+ z-index: var(--z-loading-overlay);
944
942
  }
945
- .z-\[29\] {
946
- z-index: 29;
943
+ .z-\[var\(--z-modal\)\] {
944
+ z-index: var(--z-modal);
947
945
  }
948
- .z-\[70\] {
949
- z-index: 70;
946
+ .z-\[var\(--z-modal-overlay\)\] {
947
+ z-index: var(--z-modal-overlay);
950
948
  }
951
- .z-\[100\] {
952
- z-index: 100;
949
+ .z-\[var\(--z-navigation\)\] {
950
+ z-index: var(--z-navigation);
953
951
  }
954
- .z-\[110\] {
955
- z-index: 110;
952
+ .z-\[var\(--z-navigation-overlay\)\] {
953
+ z-index: var(--z-navigation-overlay);
956
954
  }
957
- .z-\[200\] {
958
- z-index: 200;
955
+ .z-\[var\(--z-popover\)\] {
956
+ z-index: var(--z-popover);
959
957
  }
960
- .z-\[999\] {
961
- z-index: 999;
958
+ .z-\[var\(--z-table-header\)\] {
959
+ z-index: var(--z-table-header);
962
960
  }
963
- .z-\[10000\] {
964
- z-index: 10000;
961
+ .z-\[var\(--z-tooltip\)\] {
962
+ z-index: var(--z-tooltip);
965
963
  }
966
964
  .order-3 {
967
965
  order: 3;
@@ -1029,9 +1027,6 @@ h2.react-datepicker__current-month {
1029
1027
  .mr-auto {
1030
1028
  margin-right: auto;
1031
1029
  }
1032
- .-mb-px {
1033
- margin-bottom: -1px;
1034
- }
1035
1030
  .mb-0 {
1036
1031
  margin-bottom: calc(var(--spacing) * 0);
1037
1032
  }
@@ -1044,6 +1039,9 @@ h2.react-datepicker__current-month {
1044
1039
  .mb-3 {
1045
1040
  margin-bottom: calc(var(--spacing) * 3);
1046
1041
  }
1042
+ .mb-4 {
1043
+ margin-bottom: calc(var(--spacing) * 4);
1044
+ }
1047
1045
  .ml-2 {
1048
1046
  margin-left: calc(var(--spacing) * 2);
1049
1047
  }
@@ -1209,6 +1207,9 @@ h2.react-datepicker__current-month {
1209
1207
  .h-16 {
1210
1208
  height: calc(var(--spacing) * 16);
1211
1209
  }
1210
+ .h-20 {
1211
+ height: calc(var(--spacing) * 20);
1212
+ }
1212
1213
  .h-32 {
1213
1214
  height: calc(var(--spacing) * 32);
1214
1215
  }
@@ -1380,9 +1381,6 @@ h2.react-datepicker__current-month {
1380
1381
  .w-11 {
1381
1382
  width: calc(var(--spacing) * 11);
1382
1383
  }
1383
- .w-14 {
1384
- width: calc(var(--spacing) * 14);
1385
- }
1386
1384
  .w-16 {
1387
1385
  width: calc(var(--spacing) * 16);
1388
1386
  }
@@ -1428,6 +1426,9 @@ h2.react-datepicker__current-month {
1428
1426
  .w-\[44rem\] {
1429
1427
  width: 44rem;
1430
1428
  }
1429
+ .w-\[48rem\] {
1430
+ width: 48rem;
1431
+ }
1431
1432
  .w-\[52rem\] {
1432
1433
  width: 52rem;
1433
1434
  }
@@ -1536,6 +1537,9 @@ h2.react-datepicker__current-month {
1536
1537
  .min-w-14 {
1537
1538
  min-width: calc(var(--spacing) * 14);
1538
1539
  }
1540
+ .min-w-16 {
1541
+ min-width: calc(var(--spacing) * 16);
1542
+ }
1539
1543
  .min-w-18 {
1540
1544
  min-width: calc(var(--spacing) * 18);
1541
1545
  }
@@ -1650,12 +1654,15 @@ h2.react-datepicker__current-month {
1650
1654
  .grid-cols-2 {
1651
1655
  grid-template-columns: repeat(2, minmax(0, 1fr));
1652
1656
  }
1657
+ .grid-cols-4 {
1658
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1659
+ }
1660
+ .grid-cols-5 {
1661
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1662
+ }
1653
1663
  .grid-cols-12 {
1654
1664
  grid-template-columns: repeat(12, minmax(0, 1fr));
1655
1665
  }
1656
- .grid-cols-\[8rem_minmax\(0\,1fr\)\] {
1657
- grid-template-columns: 8rem minmax(0,1fr);
1658
- }
1659
1666
  .grid-cols-\[minmax\(0\,1fr\)_auto_auto_auto\] {
1660
1667
  grid-template-columns: minmax(0,1fr) auto auto auto;
1661
1668
  }
@@ -1846,9 +1853,16 @@ h2.react-datepicker__current-month {
1846
1853
  .rounded-md {
1847
1854
  border-radius: var(--radius-md);
1848
1855
  }
1856
+ .rounded-sm {
1857
+ border-radius: var(--radius-sm);
1858
+ }
1849
1859
  .rounded-xl {
1850
1860
  border-radius: var(--radius-xl);
1851
1861
  }
1862
+ .rounded-t-\[calc\(var\(--radius-xl\)-1px\)\] {
1863
+ border-top-left-radius: calc(var(--radius-xl) - 1px);
1864
+ border-top-right-radius: calc(var(--radius-xl) - 1px);
1865
+ }
1852
1866
  .rounded-t-xl {
1853
1867
  border-top-left-radius: var(--radius-xl);
1854
1868
  border-top-right-radius: var(--radius-xl);
@@ -1889,36 +1903,6 @@ h2.react-datepicker__current-month {
1889
1903
  --tw-border-style: dashed;
1890
1904
  border-style: dashed;
1891
1905
  }
1892
- .border-\[color-mix\(in_srgb\,\#34d399_45\%\,var\(--app-border\)\)\] {
1893
- border-color: #34d399;
1894
- @supports (color: color-mix(in lab, red, red)) {
1895
- border-color: color-mix(in srgb,#34d399 45%,var(--app-border));
1896
- }
1897
- }
1898
- .border-\[color-mix\(in_srgb\,\#60a5fa_45\%\,var\(--app-border\)\)\] {
1899
- border-color: #60a5fa;
1900
- @supports (color: color-mix(in lab, red, red)) {
1901
- border-color: color-mix(in srgb,#60a5fa 45%,var(--app-border));
1902
- }
1903
- }
1904
- .border-\[color-mix\(in_srgb\,\#f87171_52\%\,var\(--app-border\)\)\] {
1905
- border-color: #f87171;
1906
- @supports (color: color-mix(in lab, red, red)) {
1907
- border-color: color-mix(in srgb,#f87171 52%,var(--app-border));
1908
- }
1909
- }
1910
- .border-\[color-mix\(in_srgb\,\#fbbf24_52\%\,var\(--app-border\)\)\] {
1911
- border-color: #fbbf24;
1912
- @supports (color: color-mix(in lab, red, red)) {
1913
- border-color: color-mix(in srgb,#fbbf24 52%,var(--app-border));
1914
- }
1915
- }
1916
- .border-\[color-mix\(in_srgb\,var\(--brand\)_34\%\,var\(--app-border\)\)\] {
1917
- border-color: var(--brand);
1918
- @supports (color: color-mix(in lab, red, red)) {
1919
- border-color: color-mix(in srgb,var(--brand) 34%,var(--app-border));
1920
- }
1921
- }
1922
1906
  .border-\[color-mix\(in_srgb\,var\(--brand\)_40\%\,transparent\)\] {
1923
1907
  border-color: var(--brand);
1924
1908
  @supports (color: color-mix(in lab, red, red)) {
@@ -1931,10 +1915,10 @@ h2.react-datepicker__current-month {
1931
1915
  border-color: color-mix(in srgb,var(--brand) 44%,var(--app-border));
1932
1916
  }
1933
1917
  }
1934
- .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,\#fff\)\] {
1918
+ .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,var\(--on-solid\)\)\] {
1935
1919
  border-color: var(--brand);
1936
1920
  @supports (color: color-mix(in lab, red, red)) {
1937
- border-color: color-mix(in srgb,var(--brand) 64%,#fff);
1921
+ border-color: color-mix(in srgb,var(--brand) 64%,var(--on-solid));
1938
1922
  }
1939
1923
  }
1940
1924
  .border-\[color-mix\(in_srgb\,var\(--foreground-muted\)_24\%\,transparent\)\] {
@@ -1949,20 +1933,17 @@ h2.react-datepicker__current-month {
1949
1933
  border-color: color-mix(in srgb,var(--foreground-muted) 42%,var(--app-border));
1950
1934
  }
1951
1935
  }
1952
- .border-\[var\(--status-danger-border\,\#f87171\)\] {
1953
- border-color: var(--status-danger-border,#f87171);
1954
- }
1955
- .border-\[var\(--status-danger-border\,\#fca5a5\)\] {
1956
- border-color: var(--status-danger-border,#fca5a5);
1936
+ .border-\[var\(--status-danger-border\)\] {
1937
+ border-color: var(--status-danger-border);
1957
1938
  }
1958
- .border-\[var\(--status-info-border\,\#93c5fd\)\] {
1959
- border-color: var(--status-info-border,#93c5fd);
1939
+ .border-\[var\(--status-info-border\)\] {
1940
+ border-color: var(--status-info-border);
1960
1941
  }
1961
- .border-\[var\(--status-success-border\,\#86efac\)\] {
1962
- border-color: var(--status-success-border,#86efac);
1942
+ .border-\[var\(--status-success-border\)\] {
1943
+ border-color: var(--status-success-border);
1963
1944
  }
1964
- .border-\[var\(--status-warning-border\,\#fcd34d\)\] {
1965
- border-color: var(--status-warning-border,#fcd34d);
1945
+ .border-\[var\(--status-warning-border\)\] {
1946
+ border-color: var(--status-warning-border);
1966
1947
  }
1967
1948
  .border-app-border {
1968
1949
  border-color: var(--color-app-border);
@@ -1982,38 +1963,17 @@ h2.react-datepicker__current-month {
1982
1963
  .border-transparent {
1983
1964
  border-color: transparent;
1984
1965
  }
1985
- .\!bg-\[rgb\(var\(--color-brand\)\/0\.08\)\] {
1986
- background-color: rgb(var(--color-brand)/0.08) !important;
1987
- }
1988
- .\!bg-transparent {
1989
- background-color: transparent !important;
1966
+ .border-x-transparent {
1967
+ border-inline-color: transparent;
1990
1968
  }
1991
- .bg-\[\#dc2626\] {
1992
- background-color: #dc2626;
1993
- }
1994
- .bg-\[color-mix\(in_srgb\,\#3b82f6_16\%\,var\(--background-secondary\)\)\] {
1995
- background-color: #3b82f6;
1996
- @supports (color: color-mix(in lab, red, red)) {
1997
- background-color: color-mix(in srgb,#3b82f6 16%,var(--background-secondary));
1998
- }
1969
+ .border-b-app-border {
1970
+ border-bottom-color: var(--color-app-border);
1999
1971
  }
2000
- .bg-\[color-mix\(in_srgb\,\#10b981_16\%\,var\(--background-secondary\)\)\] {
2001
- background-color: #10b981;
2002
- @supports (color: color-mix(in lab, red, red)) {
2003
- background-color: color-mix(in srgb,#10b981 16%,var(--background-secondary));
2004
- }
1972
+ .\!bg-\[var\(--sidebar-item-active\)\] {
1973
+ background-color: var(--sidebar-item-active) !important;
2005
1974
  }
2006
- .bg-\[color-mix\(in_srgb\,\#ef4444_16\%\,var\(--background-secondary\)\)\] {
2007
- background-color: #ef4444;
2008
- @supports (color: color-mix(in lab, red, red)) {
2009
- background-color: color-mix(in srgb,#ef4444 16%,var(--background-secondary));
2010
- }
2011
- }
2012
- .bg-\[color-mix\(in_srgb\,\#f59e0b_16\%\,var\(--background-secondary\)\)\] {
2013
- background-color: #f59e0b;
2014
- @supports (color: color-mix(in lab, red, red)) {
2015
- background-color: color-mix(in srgb,#f59e0b 16%,var(--background-secondary));
2016
- }
1975
+ .\!bg-transparent {
1976
+ background-color: transparent !important;
2017
1977
  }
2018
1978
  .bg-\[color-mix\(in_srgb\,var\(--brand\)_5\%\,var\(--surface\)\)\] {
2019
1979
  background-color: var(--brand);
@@ -2045,24 +2005,12 @@ h2.react-datepicker__current-month {
2045
2005
  background-color: color-mix(in srgb,var(--brand) 14%,var(--surface));
2046
2006
  }
2047
2007
  }
2048
- .bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,var\(--surface\)\)\] {
2049
- background-color: var(--destructive);
2050
- @supports (color: color-mix(in lab, red, red)) {
2051
- background-color: color-mix(in srgb,var(--destructive) 12%,var(--surface));
2052
- }
2053
- }
2054
2008
  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_3\%\,var\(--background-secondary\)\)\] {
2055
2009
  background-color: var(--foreground-muted);
2056
2010
  @supports (color: color-mix(in lab, red, red)) {
2057
2011
  background-color: color-mix(in srgb,var(--foreground-muted) 3%,var(--background-secondary));
2058
2012
  }
2059
2013
  }
2060
- .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--background-secondary\)\)\] {
2061
- background-color: var(--foreground-muted);
2062
- @supports (color: color-mix(in lab, red, red)) {
2063
- background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--background-secondary));
2064
- }
2065
- }
2066
2014
  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--surface\)\)\] {
2067
2015
  background-color: var(--foreground-muted);
2068
2016
  @supports (color: color-mix(in lab, red, red)) {
@@ -2093,23 +2041,56 @@ h2.react-datepicker__current-month {
2093
2041
  background-color: color-mix(in srgb,var(--foreground-muted) 18%,var(--surface));
2094
2042
  }
2095
2043
  }
2096
- .bg-\[rgb\(var\(--color-brand\)\/0\.08\)\] {
2097
- background-color: rgb(var(--color-brand)/0.08);
2098
- }
2099
2044
  .bg-\[var\(--brand\)\] {
2100
2045
  background-color: var(--brand);
2101
2046
  }
2102
- .bg-\[var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)\] {
2103
- background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
2047
+ .bg-\[var\(--destructive\)\] {
2048
+ background-color: var(--destructive);
2049
+ }
2050
+ .bg-\[var\(--overlay-loading\)\] {
2051
+ background-color: var(--overlay-loading);
2052
+ }
2053
+ .bg-\[var\(--overlay-navigation\)\] {
2054
+ background-color: var(--overlay-navigation);
2055
+ }
2056
+ .bg-\[var\(--overlay-navigation-soft\)\] {
2057
+ background-color: var(--overlay-navigation-soft);
2058
+ }
2059
+ .bg-\[var\(--overlay-navigation-strong\)\] {
2060
+ background-color: var(--overlay-navigation-strong);
2061
+ }
2062
+ .bg-\[var\(--overlay-scrim\)\] {
2063
+ background-color: var(--overlay-scrim);
2064
+ }
2065
+ .bg-\[var\(--primary-light\)\] {
2066
+ background-color: var(--primary-light);
2104
2067
  }
2105
- .bg-\[var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)\] {
2106
- background-color: var(--status-info-bg,rgba(219,234,254,0.8));
2068
+ .bg-\[var\(--sidebar-background\)\] {
2069
+ background-color: var(--sidebar-background);
2107
2070
  }
2108
- .bg-\[var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)\] {
2109
- background-color: var(--status-success-bg,rgba(220,252,231,0.8));
2071
+ .bg-\[var\(--sidebar-flyout-background\)\] {
2072
+ background-color: var(--sidebar-flyout-background);
2110
2073
  }
2111
- .bg-\[var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)\] {
2112
- background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
2074
+ .bg-\[var\(--sidebar-neutral-active\)\] {
2075
+ background-color: var(--sidebar-neutral-active);
2076
+ }
2077
+ .bg-\[var\(--status-danger-bg\)\] {
2078
+ background-color: var(--status-danger-bg);
2079
+ }
2080
+ .bg-\[var\(--status-info-bg\)\] {
2081
+ background-color: var(--status-info-bg);
2082
+ }
2083
+ .bg-\[var\(--status-success-bg\)\] {
2084
+ background-color: var(--status-success-bg);
2085
+ }
2086
+ .bg-\[var\(--status-warning-bg\)\] {
2087
+ background-color: var(--status-warning-bg);
2088
+ }
2089
+ .bg-\[var\(--tabs-background\)\] {
2090
+ background-color: var(--tabs-background);
2091
+ }
2092
+ .bg-\[var\(--topbar-background\)\] {
2093
+ background-color: var(--topbar-background);
2113
2094
  }
2114
2095
  .bg-app-border {
2115
2096
  background-color: var(--color-app-border);
@@ -2120,18 +2101,6 @@ h2.react-datepicker__current-month {
2120
2101
  .bg-background-secondary {
2121
2102
  background-color: var(--color-background-secondary);
2122
2103
  }
2123
- .bg-background\/40 {
2124
- background-color: var(--color-background);
2125
- @supports (color: color-mix(in lab, red, red)) {
2126
- background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
2127
- }
2128
- }
2129
- .bg-black\/50 {
2130
- background-color: color-mix(in srgb, #000 50%, transparent);
2131
- @supports (color: color-mix(in lab, red, red)) {
2132
- background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
2133
- }
2134
- }
2135
2104
  .bg-brand {
2136
2105
  background-color: var(--color-brand);
2137
2106
  }
@@ -2156,24 +2125,6 @@ h2.react-datepicker__current-month {
2156
2125
  .bg-input-bg {
2157
2126
  background-color: var(--color-input-bg);
2158
2127
  }
2159
- .bg-slate-900\/18 {
2160
- background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 18%, transparent);
2161
- @supports (color: color-mix(in lab, red, red)) {
2162
- background-color: color-mix(in oklab, var(--color-slate-900) 18%, transparent);
2163
- }
2164
- }
2165
- .bg-slate-900\/28 {
2166
- background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 28%, transparent);
2167
- @supports (color: color-mix(in lab, red, red)) {
2168
- background-color: color-mix(in oklab, var(--color-slate-900) 28%, transparent);
2169
- }
2170
- }
2171
- .bg-slate-900\/42 {
2172
- background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 42%, transparent);
2173
- @supports (color: color-mix(in lab, red, red)) {
2174
- background-color: color-mix(in oklab, var(--color-slate-900) 42%, transparent);
2175
- }
2176
- }
2177
2128
  .bg-surface {
2178
2129
  background-color: var(--color-surface);
2179
2130
  }
@@ -2186,16 +2137,10 @@ h2.react-datepicker__current-month {
2186
2137
  .bg-transparent {
2187
2138
  background-color: transparent;
2188
2139
  }
2189
- .bg-white\/80 {
2190
- background-color: color-mix(in srgb, #fff 80%, transparent);
2140
+ .bg-\[linear-gradient\(135deg\,color-mix\(in_srgb\,var\(--surface\)_92\%\,var\(--brand\)_8\%\)\,var\(--surface\)\)\] {
2141
+ background-image: linear-gradient(135deg,var(--surface),var(--surface));
2191
2142
  @supports (color: color-mix(in lab, red, red)) {
2192
- background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
2193
- }
2194
- }
2195
- .bg-\[linear-gradient\(135deg\,color-mix\(in_srgb\,var\(--color-surface\,var\(--surface\)\)_92\%\,var\(--color-primary\,var\(--brand\)\)_8\%\)\,var\(--color-surface\,var\(--surface\)\)\)\] {
2196
- background-image: linear-gradient(135deg,var(--color-surface,var(--surface)),var(--color-surface,var(--surface)));
2197
- @supports (color: color-mix(in lab, red, red)) {
2198
- background-image: linear-gradient(135deg,color-mix(in srgb,var(--color-surface,var(--surface)) 92%,var(--color-primary,var(--brand)) 8%),var(--color-surface,var(--surface)));
2143
+ background-image: linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,var(--brand) 8%),var(--surface));
2199
2144
  }
2200
2145
  }
2201
2146
  .fill-surface {
@@ -2225,6 +2170,9 @@ h2.react-datepicker__current-month {
2225
2170
  .p-4 {
2226
2171
  padding: calc(var(--spacing) * 4);
2227
2172
  }
2173
+ .p-5 {
2174
+ padding: calc(var(--spacing) * 5);
2175
+ }
2228
2176
  .p-6 {
2229
2177
  padding: calc(var(--spacing) * 6);
2230
2178
  }
@@ -2321,6 +2269,9 @@ h2.react-datepicker__current-month {
2321
2269
  .pr-1 {
2322
2270
  padding-right: calc(var(--spacing) * 1);
2323
2271
  }
2272
+ .pr-2 {
2273
+ padding-right: calc(var(--spacing) * 2);
2274
+ }
2324
2275
  .pr-4 {
2325
2276
  padding-right: calc(var(--spacing) * 4);
2326
2277
  }
@@ -2430,23 +2381,14 @@ h2.react-datepicker__current-month {
2430
2381
  font-size: var(--text-xs);
2431
2382
  line-height: var(--tw-leading, var(--text-xs--line-height));
2432
2383
  }
2433
- .text-\[0\.65rem\] {
2434
- font-size: 0.65rem;
2435
- }
2436
- .text-\[0\.625rem\] {
2437
- font-size: 0.625rem;
2438
- }
2439
- .text-\[0\.8125rem\] {
2440
- font-size: 0.8125rem;
2441
- }
2442
- .text-\[10px\] {
2443
- font-size: 10px;
2384
+ .text-\[length\:var\(--font-size-2xs\)\] {
2385
+ font-size: var(--font-size-2xs);
2444
2386
  }
2445
- .text-\[11px\] {
2446
- font-size: 11px;
2387
+ .text-\[length\:var\(--font-size-caption\)\] {
2388
+ font-size: var(--font-size-caption);
2447
2389
  }
2448
- .text-\[13px\] {
2449
- font-size: 13px;
2390
+ .text-\[length\:var\(--font-size-compact\)\] {
2391
+ font-size: var(--font-size-compact);
2450
2392
  }
2451
2393
  .leading-4 {
2452
2394
  --tw-leading: calc(var(--spacing) * 4);
@@ -2464,9 +2406,9 @@ h2.react-datepicker__current-month {
2464
2406
  --tw-leading: calc(var(--spacing) * 7);
2465
2407
  line-height: calc(var(--spacing) * 7);
2466
2408
  }
2467
- .leading-\[14px\] {
2468
- --tw-leading: 14px;
2469
- line-height: 14px;
2409
+ .leading-\[var\(--line-height-2xs\)\] {
2410
+ --tw-leading: var(--line-height-2xs);
2411
+ line-height: var(--line-height-2xs);
2470
2412
  }
2471
2413
  .leading-none {
2472
2414
  --tw-leading: 1;
@@ -2500,25 +2442,21 @@ h2.react-datepicker__current-month {
2500
2442
  --tw-font-weight: var(--font-weight-semibold);
2501
2443
  font-weight: var(--font-weight-semibold);
2502
2444
  }
2503
- .tracking-\[-0\.03em\] {
2504
- --tw-tracking: -0.03em;
2505
- letter-spacing: -0.03em;
2445
+ .tracking-\[var\(--letter-spacing-caps\)\] {
2446
+ --tw-tracking: var(--letter-spacing-caps);
2447
+ letter-spacing: var(--letter-spacing-caps);
2506
2448
  }
2507
- .tracking-\[-0\.015em\] {
2508
- --tw-tracking: -0.015em;
2509
- letter-spacing: -0.015em;
2449
+ .tracking-\[var\(--letter-spacing-label\)\] {
2450
+ --tw-tracking: var(--letter-spacing-label);
2451
+ letter-spacing: var(--letter-spacing-label);
2510
2452
  }
2511
- .tracking-\[0\.14em\] {
2512
- --tw-tracking: 0.14em;
2513
- letter-spacing: 0.14em;
2453
+ .tracking-\[var\(--letter-spacing-tight\)\] {
2454
+ --tw-tracking: var(--letter-spacing-tight);
2455
+ letter-spacing: var(--letter-spacing-tight);
2514
2456
  }
2515
- .tracking-\[0\.16em\] {
2516
- --tw-tracking: 0.16em;
2517
- letter-spacing: 0.16em;
2518
- }
2519
- .tracking-\[0\.045em\] {
2520
- --tw-tracking: 0.045em;
2521
- letter-spacing: 0.045em;
2457
+ .tracking-\[var\(--letter-spacing-title\)\] {
2458
+ --tw-tracking: var(--letter-spacing-title);
2459
+ letter-spacing: var(--letter-spacing-title);
2522
2460
  }
2523
2461
  .tracking-tight {
2524
2462
  --tw-tracking: var(--tracking-tight);
@@ -2543,24 +2481,6 @@ h2.react-datepicker__current-month {
2543
2481
  .whitespace-nowrap {
2544
2482
  white-space: nowrap;
2545
2483
  }
2546
- .text-\[color-mix\(in_srgb\,\#16a34a_86\%\,var\(--foreground\)\)\]\! {
2547
- color: #16a34a !important;
2548
- @supports (color: color-mix(in lab, red, red)) {
2549
- color: color-mix(in srgb,#16a34a 86%,var(--foreground)) !important;
2550
- }
2551
- }
2552
- .text-\[color-mix\(in_srgb\,\#dc2626_86\%\,var\(--foreground\)\)\] {
2553
- color: #dc2626;
2554
- @supports (color: color-mix(in lab, red, red)) {
2555
- color: color-mix(in srgb,#dc2626 86%,var(--foreground));
2556
- }
2557
- }
2558
- .text-\[color-mix\(in_srgb\,\#dc2626_86\%\,var\(--foreground\)\)\]\! {
2559
- color: #dc2626 !important;
2560
- @supports (color: color-mix(in lab, red, red)) {
2561
- color: color-mix(in srgb,#dc2626 86%,var(--foreground)) !important;
2562
- }
2563
- }
2564
2484
  .text-\[color-mix\(in_srgb\,var\(--brand\)_68\%\,var\(--foreground-muted\)\)\] {
2565
2485
  color: var(--brand);
2566
2486
  @supports (color: color-mix(in lab, red, red)) {
@@ -2579,78 +2499,54 @@ h2.react-datepicker__current-month {
2579
2499
  color: color-mix(in srgb,var(--brand) 72%,var(--foreground-muted));
2580
2500
  }
2581
2501
  }
2582
- .text-\[color-mix\(in_srgb\,var\(--brand\)_82\%\,var\(--foreground\)\)\] {
2583
- color: var(--brand);
2584
- @supports (color: color-mix(in lab, red, red)) {
2585
- color: color-mix(in srgb,var(--brand) 82%,var(--foreground));
2586
- }
2587
- }
2588
2502
  .text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
2589
2503
  color: var(--brand);
2590
2504
  @supports (color: color-mix(in lab, red, red)) {
2591
2505
  color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
2592
2506
  }
2593
2507
  }
2594
- .text-\[color-mix\(in_srgb\,var\(--brand\)_88\%\,var\(--foreground\)\)\] {
2595
- color: var(--brand);
2596
- @supports (color: color-mix(in lab, red, red)) {
2597
- color: color-mix(in srgb,var(--brand) 88%,var(--foreground));
2598
- }
2599
- }
2600
2508
  .text-\[color-mix\(in_srgb\,var\(--destructive\)_86\%\,var\(--foreground\)\)\] {
2601
2509
  color: var(--destructive);
2602
2510
  @supports (color: color-mix(in lab, red, red)) {
2603
2511
  color: color-mix(in srgb,var(--destructive) 86%,var(--foreground));
2604
2512
  }
2605
2513
  }
2606
- .text-\[color-mix\(in_srgb\,var\(--status-info-text\,\#2563eb\)_76\%\,var\(--foreground\)\)\] {
2607
- color: var(--status-info-text,#2563eb);
2608
- @supports (color: color-mix(in lab, red, red)) {
2609
- color: color-mix(in srgb,var(--status-info-text,#2563eb) 76%,var(--foreground));
2610
- }
2611
- }
2612
- .text-\[color-mix\(in_srgb\,var\(--status-warning-text\,\#d97706\)_76\%\,var\(--foreground\)\)\] {
2613
- color: var(--status-warning-text,#d97706);
2614
- @supports (color: color-mix(in lab, red, red)) {
2615
- color: color-mix(in srgb,var(--status-warning-text,#d97706) 76%,var(--foreground));
2616
- }
2617
- }
2618
2514
  .text-\[var\(--brand\)\] {
2619
2515
  color: var(--brand);
2620
2516
  }
2621
- .text-\[var\(--primary-foreground\,\#ffffff\)\] {
2622
- color: var(--primary-foreground,#ffffff);
2517
+ .text-\[var\(--on-solid\)\] {
2518
+ color: var(--on-solid);
2519
+ }
2520
+ .text-\[var\(--primary-foreground\)\] {
2521
+ color: var(--primary-foreground);
2522
+ }
2523
+ .text-\[var\(--status-danger-icon\)\] {
2524
+ color: var(--status-danger-icon);
2525
+ }
2526
+ .text-\[var\(--status-danger-icon\)\]\! {
2527
+ color: var(--status-danger-icon) !important;
2623
2528
  }
2624
2529
  .text-\[var\(--status-danger-text\)\] {
2625
2530
  color: var(--status-danger-text);
2626
2531
  }
2627
- .text-\[var\(--status-danger-text\,\#7f1d1d\)\] {
2628
- color: var(--status-danger-text,#7f1d1d);
2629
- }
2630
- .text-\[var\(--status-danger-text\,\#b91c1c\)\] {
2631
- color: var(--status-danger-text,#b91c1c);
2532
+ .text-\[var\(--status-info-icon\)\] {
2533
+ color: var(--status-info-icon);
2632
2534
  }
2633
2535
  .text-\[var\(--status-info-text\)\] {
2634
2536
  color: var(--status-info-text);
2635
2537
  }
2636
- .text-\[var\(--status-info-text\,\#1d4ed8\)\] {
2637
- color: var(--status-info-text,#1d4ed8);
2538
+ .text-\[var\(--status-success-icon\)\]\! {
2539
+ color: var(--status-success-icon) !important;
2638
2540
  }
2639
2541
  .text-\[var\(--status-success-text\)\] {
2640
2542
  color: var(--status-success-text);
2641
2543
  }
2642
- .text-\[var\(--status-success-text\,\#15803d\)\] {
2643
- color: var(--status-success-text,#15803d);
2544
+ .text-\[var\(--status-warning-icon\)\] {
2545
+ color: var(--status-warning-icon);
2644
2546
  }
2645
2547
  .text-\[var\(--status-warning-text\)\] {
2646
2548
  color: var(--status-warning-text);
2647
2549
  }
2648
- .text-\[var\(--status-warning-text\,\#92400e\)\] {
2649
- color: var(--status-warning-text,#92400e);
2650
- }
2651
- .text-amber-600 {
2652
- color: var(--color-amber-600);
2653
- }
2654
2550
  .text-brand {
2655
2551
  color: var(--color-brand);
2656
2552
  }
@@ -2684,9 +2580,6 @@ h2.react-datepicker__current-month {
2684
2580
  .text-red-600 {
2685
2581
  color: var(--color-red-600);
2686
2582
  }
2687
- .text-white {
2688
- color: var(--color-white);
2689
- }
2690
2583
  .uppercase {
2691
2584
  text-transform: uppercase;
2692
2585
  }
@@ -2717,122 +2610,86 @@ h2.react-datepicker__current-month {
2717
2610
  .opacity-100 {
2718
2611
  opacity: 100%;
2719
2612
  }
2720
- .shadow-2xl {
2721
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
2722
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2723
- }
2724
- .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_20\%\,transparent\)\] {
2725
- --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
2613
+ .shadow-\[0_0_0_4px_color-mix\(in_srgb\,var\(--brand\)_18\%\,transparent\)\] {
2614
+ --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--brand));
2726
2615
  @supports (color: color-mix(in lab, red, red)) {
2727
- --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 20%,transparent));
2616
+ --tw-shadow: 0 0 0 4px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 18%,transparent));
2728
2617
  }
2729
2618
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2730
2619
  }
2731
- .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_24\%\,transparent\)\] {
2732
- --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
2620
+ .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-danger-border\)_18\%\,transparent\)\] {
2621
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-danger-border));
2733
2622
  @supports (color: color-mix(in lab, red, red)) {
2734
- --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 24%,transparent));
2623
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-danger-border) 18%,transparent));
2735
2624
  }
2736
2625
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2737
2626
  }
2738
- .shadow-\[0_0_0_4px_color-mix\(in_srgb\,var\(--brand\)_18\%\,transparent\)\] {
2739
- --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--brand));
2627
+ .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-info-border\)_18\%\,transparent\)\] {
2628
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-info-border));
2740
2629
  @supports (color: color-mix(in lab, red, red)) {
2741
- --tw-shadow: 0 0 0 4px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 18%,transparent));
2630
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-border) 18%,transparent));
2742
2631
  }
2743
2632
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2744
2633
  }
2745
- .shadow-\[0_2px_8px_-2px_color-mix\(in_srgb\,\#000_6\%\,transparent\)\] {
2746
- --tw-shadow: 0 2px 8px -2px var(--tw-shadow-color, color-mix(in srgb,#000 6%,transparent));
2747
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2748
- }
2749
- .shadow-\[0_4px_6px_-1px_rgb\(0_0_0\/0\.07\)\,0_2px_4px_-2px_rgb\(0_0_0\/0\.05\)\] {
2750
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0/0.07)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0/0.05));
2751
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2752
- }
2753
- .shadow-\[0_8px_24px_-4px_rgba\(0\,0\,0\,0\.16\)\,0_2px_8px_-2px_rgba\(0\,0\,0\,0\.08\)\] {
2754
- --tw-shadow: 0 8px 24px -4px var(--tw-shadow-color, rgba(0,0,0,0.16)), 0 2px 8px -2px var(--tw-shadow-color, rgba(0,0,0,0.08));
2755
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2756
- }
2757
- .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--brand\)_70\%\,\#000\)\] {
2758
- --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--brand));
2634
+ .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-success-border\)_18\%\,transparent\)\] {
2635
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-success-border));
2759
2636
  @supports (color: color-mix(in lab, red, red)) {
2760
- --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 70%,#000));
2637
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-success-border) 18%,transparent));
2761
2638
  }
2762
2639
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2763
2640
  }
2764
- .shadow-\[0_12px_32px_rgba\(15\,23\,42\,0\.06\)\] {
2765
- --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(15,23,42,0.06));
2766
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2767
- }
2768
- .shadow-\[0_14px_26px_-20px_color-mix\(in_srgb\,var\(--brand\)_45\%\,\#000\)\] {
2769
- --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, var(--brand));
2641
+ .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-warning-border\)_18\%\,transparent\)\] {
2642
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-warning-border));
2770
2643
  @supports (color: color-mix(in lab, red, red)) {
2771
- --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 45%,#000));
2644
+ --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-border) 18%,transparent));
2772
2645
  }
2773
2646
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2774
2647
  }
2775
- .shadow-\[0_16px_36px_-24px_color-mix\(in_srgb\,\#000_50\%\,transparent\)\] {
2776
- --tw-shadow: 0 16px 36px -24px var(--tw-shadow-color, color-mix(in srgb,#000 50%,transparent));
2777
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2778
- }
2779
- .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,\#fff_32\%\,transparent\)\,0_8px_18px_-14px_rgba\(0\,0\,0\,0\.55\)\] {
2780
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,#fff 32%,transparent)), 0 8px 18px -14px var(--tw-shadow-color, rgba(0,0,0,0.55));
2781
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2782
- }
2783
- .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--brand\)_8\%\,transparent\)\] {
2784
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--brand));
2648
+ .shadow-\[inset_0_1px_0_color-mix\(in_srgb\,var\(--on-solid\)_40\%\,transparent\)\] {
2649
+ --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, var(--on-solid));
2785
2650
  @supports (color: color-mix(in lab, red, red)) {
2786
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 8%,transparent));
2651
+ --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, color-mix(in srgb,var(--on-solid) 40%,transparent));
2787
2652
  }
2788
2653
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2789
2654
  }
2790
- .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-danger-border\,\#fca5a5\)_18\%\,transparent\)\] {
2791
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-danger-border,#fca5a5));
2792
- @supports (color: color-mix(in lab, red, red)) {
2793
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-danger-border,#fca5a5) 18%,transparent));
2794
- }
2655
+ .shadow-\[var\(--shadow-action\)\] {
2656
+ --tw-shadow: var(--shadow-action);
2795
2657
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2796
2658
  }
2797
- .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-info-border\,\#93c5fd\)_18\%\,transparent\)\] {
2798
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-info-border,#93c5fd));
2799
- @supports (color: color-mix(in lab, red, red)) {
2800
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-border,#93c5fd) 18%,transparent));
2801
- }
2659
+ .shadow-\[var\(--shadow-brand\)\] {
2660
+ --tw-shadow: var(--shadow-brand);
2802
2661
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2803
2662
  }
2804
- .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-success-border\,\#86efac\)_18\%\,transparent\)\] {
2805
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-success-border,#86efac));
2806
- @supports (color: color-mix(in lab, red, red)) {
2807
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-success-border,#86efac) 18%,transparent));
2808
- }
2663
+ .shadow-\[var\(--shadow-flyout\)\] {
2664
+ --tw-shadow: var(--shadow-flyout);
2809
2665
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2810
2666
  }
2811
- .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-warning-border\,\#fcd34d\)_18\%\,transparent\)\] {
2812
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-warning-border,#fcd34d));
2813
- @supports (color: color-mix(in lab, red, red)) {
2814
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-border,#fcd34d) 18%,transparent));
2815
- }
2667
+ .shadow-\[var\(--shadow-focus\)\] {
2668
+ --tw-shadow: var(--shadow-focus);
2669
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2670
+ }
2671
+ .shadow-\[var\(--shadow-lg\)\] {
2672
+ --tw-shadow: var(--shadow-lg);
2816
2673
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2817
2674
  }
2818
- .shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.10\)\] {
2819
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.10));
2675
+ .shadow-\[var\(--shadow-md\)\] {
2676
+ --tw-shadow: var(--shadow-md);
2820
2677
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2821
2678
  }
2822
- .shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.12\)\] {
2823
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.12));
2679
+ .shadow-\[var\(--shadow-overlay\)\] {
2680
+ --tw-shadow: var(--shadow-overlay);
2824
2681
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2825
2682
  }
2826
- .shadow-\[inset_0_0_0_1px_rgba\(15\,23\,42\,0\.06\)\] {
2827
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.06));
2683
+ .shadow-\[var\(--shadow-sm\)\] {
2684
+ --tw-shadow: var(--shadow-sm);
2828
2685
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2829
2686
  }
2830
- .shadow-\[inset_0_1px_0_color-mix\(in_srgb\,\#fff_40\%\,transparent\)\] {
2831
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, color-mix(in srgb,#fff 40%,transparent));
2687
+ .shadow-\[var\(--shadow-theme-swatch\)\] {
2688
+ --tw-shadow: var(--shadow-theme-swatch);
2832
2689
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2833
2690
  }
2834
- .shadow-lg {
2835
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2691
+ .shadow-\[var\(--shadow-topbar\)\] {
2692
+ --tw-shadow: var(--shadow-topbar);
2836
2693
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2837
2694
  }
2838
2695
  .shadow-none {
@@ -2854,18 +2711,18 @@ h2.react-datepicker__current-month {
2854
2711
  .filter {
2855
2712
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
2856
2713
  }
2857
- .backdrop-blur-\[1\.5px\] {
2858
- --tw-backdrop-blur: blur(1.5px);
2714
+ .backdrop-blur-\[var\(--backdrop-blur-md\)\] {
2715
+ --tw-backdrop-blur: blur(var(--backdrop-blur-md));
2859
2716
  -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,);
2860
2717
  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,);
2861
2718
  }
2862
- .backdrop-blur-\[2px\] {
2863
- --tw-backdrop-blur: blur(2px);
2719
+ .backdrop-blur-\[var\(--backdrop-blur-sm\)\] {
2720
+ --tw-backdrop-blur: blur(var(--backdrop-blur-sm));
2864
2721
  -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,);
2865
2722
  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,);
2866
2723
  }
2867
- .backdrop-blur-\[3px\] {
2868
- --tw-backdrop-blur: blur(3px);
2724
+ .backdrop-blur-\[var\(--backdrop-blur-xs\)\] {
2725
+ --tw-backdrop-blur: blur(var(--backdrop-blur-xs));
2869
2726
  -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,);
2870
2727
  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,);
2871
2728
  }
@@ -2909,6 +2766,11 @@ h2.react-datepicker__current-month {
2909
2766
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2910
2767
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2911
2768
  }
2769
+ .transition-\[background-color\,color\] {
2770
+ transition-property: background-color,color;
2771
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2772
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2773
+ }
2912
2774
  .transition-\[border-color\,box-shadow\,transform\,opacity\] {
2913
2775
  transition-property: border-color,box-shadow,transform,opacity;
2914
2776
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2934,11 +2796,6 @@ h2.react-datepicker__current-month {
2934
2796
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2935
2797
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2936
2798
  }
2937
- .transition-\[width\,background-color\,color\] {
2938
- transition-property: width,background-color,color;
2939
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2940
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2941
- }
2942
2799
  .transition-\[width\,transform\] {
2943
2800
  transition-property: width,transform;
2944
2801
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2959,17 +2816,17 @@ h2.react-datepicker__current-month {
2959
2816
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2960
2817
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2961
2818
  }
2962
- .duration-150 {
2963
- --tw-duration: 150ms;
2964
- transition-duration: 150ms;
2819
+ .duration-\[var\(--duration-fast\)\] {
2820
+ --tw-duration: var(--duration-fast);
2821
+ transition-duration: var(--duration-fast);
2965
2822
  }
2966
- .duration-200 {
2967
- --tw-duration: 200ms;
2968
- transition-duration: 200ms;
2823
+ .duration-\[var\(--duration-normal\)\] {
2824
+ --tw-duration: var(--duration-normal);
2825
+ transition-duration: var(--duration-normal);
2969
2826
  }
2970
- .duration-300 {
2971
- --tw-duration: 300ms;
2972
- transition-duration: 300ms;
2827
+ .duration-\[var\(--duration-slow\)\] {
2828
+ --tw-duration: var(--duration-slow);
2829
+ transition-duration: var(--duration-slow);
2973
2830
  }
2974
2831
  .ease-in-out {
2975
2832
  --tw-ease: var(--ease-in-out);
@@ -3018,6 +2875,44 @@ h2.react-datepicker__current-month {
3018
2875
  color: var(--color-foreground-muted);
3019
2876
  }
3020
2877
  }
2878
+ .after\:min-w-0 {
2879
+ &::after {
2880
+ content: var(--tw-content);
2881
+ min-width: calc(var(--spacing) * 0);
2882
+ }
2883
+ }
2884
+ .after\:flex-1 {
2885
+ &::after {
2886
+ content: var(--tw-content);
2887
+ flex: 1;
2888
+ }
2889
+ }
2890
+ .after\:border-b {
2891
+ &::after {
2892
+ content: var(--tw-content);
2893
+ border-bottom-style: var(--tw-border-style);
2894
+ border-bottom-width: 1px;
2895
+ }
2896
+ }
2897
+ .after\:border-app-border {
2898
+ &::after {
2899
+ content: var(--tw-content);
2900
+ border-color: var(--color-app-border);
2901
+ }
2902
+ }
2903
+ .after\:bg-\[var\(--tabs-background\)\] {
2904
+ &::after {
2905
+ content: var(--tw-content);
2906
+ background-color: var(--tabs-background);
2907
+ }
2908
+ }
2909
+ .after\:content-\[\'\'\] {
2910
+ &::after {
2911
+ content: var(--tw-content);
2912
+ --tw-content: '';
2913
+ content: var(--tw-content);
2914
+ }
2915
+ }
3021
2916
  .first\:border-l-0 {
3022
2917
  &:first-child {
3023
2918
  border-left-style: var(--tw-border-style);
@@ -3044,6 +2939,14 @@ h2.react-datepicker__current-month {
3044
2939
  padding-inline-end: var(--table-action-edge-pad) !important;
3045
2940
  }
3046
2941
  }
2942
+ .hover\:translate-x-8 {
2943
+ &:hover {
2944
+ @media (hover: hover) {
2945
+ --tw-translate-x: calc(var(--spacing) * 8);
2946
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2947
+ }
2948
+ }
2949
+ }
3047
2950
  .hover\:-translate-y-px {
3048
2951
  &:hover {
3049
2952
  @media (hover: hover) {
@@ -3080,16 +2983,6 @@ h2.react-datepicker__current-month {
3080
2983
  }
3081
2984
  }
3082
2985
  }
3083
- .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_48\%\,var\(--app-border\)\)\] {
3084
- &:hover {
3085
- @media (hover: hover) {
3086
- border-color: var(--brand);
3087
- @supports (color: color-mix(in lab, red, red)) {
3088
- border-color: color-mix(in srgb,var(--brand) 48%,var(--app-border));
3089
- }
3090
- }
3091
- }
3092
- }
3093
2986
  .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_52\%\,transparent\)\] {
3094
2987
  &:hover {
3095
2988
  @media (hover: hover) {
@@ -3131,38 +3024,10 @@ h2.react-datepicker__current-month {
3131
3024
  }
3132
3025
  }
3133
3026
  }
3134
- .hover\:\!bg-\[rgb\(var\(--color-brand\)\/0\.12\)\] {
3135
- &:hover {
3136
- @media (hover: hover) {
3137
- background-color: rgb(var(--color-brand)/0.12) !important;
3138
- }
3139
- }
3140
- }
3141
- .hover\:bg-\[\#b91c1c\] {
3142
- &:hover {
3143
- @media (hover: hover) {
3144
- background-color: #b91c1c;
3145
- }
3146
- }
3147
- }
3148
- .hover\:bg-\[color-mix\(in_srgb\,\#16a34a_10\%\,transparent\)\]\! {
3027
+ .hover\:\!bg-\[var\(--sidebar-item-hover\)\] {
3149
3028
  &:hover {
3150
3029
  @media (hover: hover) {
3151
- background-color: color-mix(in srgb,#16a34a 10%,transparent) !important;
3152
- }
3153
- }
3154
- }
3155
- .hover\:bg-\[color-mix\(in_srgb\,\#dc2626_10\%\,transparent\)\]\! {
3156
- &:hover {
3157
- @media (hover: hover) {
3158
- background-color: color-mix(in srgb,#dc2626 10%,transparent) !important;
3159
- }
3160
- }
3161
- }
3162
- .hover\:bg-\[color-mix\(in_srgb\,\#facc15_14\%\,transparent\)\] {
3163
- &:hover {
3164
- @media (hover: hover) {
3165
- background-color: color-mix(in srgb,#facc15 14%,transparent);
3030
+ background-color: var(--sidebar-item-hover) !important;
3166
3031
  }
3167
3032
  }
3168
3033
  }
@@ -3186,16 +3051,6 @@ h2.react-datepicker__current-month {
3186
3051
  }
3187
3052
  }
3188
3053
  }
3189
- .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,transparent\)\] {
3190
- &:hover {
3191
- @media (hover: hover) {
3192
- background-color: var(--brand);
3193
- @supports (color: color-mix(in lab, red, red)) {
3194
- background-color: color-mix(in srgb,var(--brand) 8%,transparent);
3195
- }
3196
- }
3197
- }
3198
- }
3199
3054
  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,var\(--surface\)\)\] {
3200
3055
  &:hover {
3201
3056
  @media (hover: hover) {
@@ -3236,200 +3091,195 @@ h2.react-datepicker__current-month {
3236
3091
  }
3237
3092
  }
3238
3093
  }
3239
- .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_18\%\,var\(--surface\)\)\] {
3094
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_10\%\,transparent\)\] {
3240
3095
  &:hover {
3241
3096
  @media (hover: hover) {
3242
- background-color: var(--brand);
3097
+ background-color: var(--destructive);
3243
3098
  @supports (color: color-mix(in lab, red, red)) {
3244
- background-color: color-mix(in srgb,var(--brand) 18%,var(--surface));
3099
+ background-color: color-mix(in srgb,var(--destructive) 10%,transparent);
3245
3100
  }
3246
3101
  }
3247
3102
  }
3248
3103
  }
3249
- .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_10\%\,transparent\)\] {
3104
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--tabs-background\)\)\] {
3250
3105
  &:hover {
3251
3106
  @media (hover: hover) {
3252
- background-color: var(--destructive);
3107
+ background-color: var(--foreground-muted);
3253
3108
  @supports (color: color-mix(in lab, red, red)) {
3254
- background-color: color-mix(in srgb,var(--destructive) 10%,transparent);
3109
+ background-color: color-mix(in srgb,var(--foreground-muted) 8%,var(--tabs-background));
3255
3110
  }
3256
3111
  }
3257
3112
  }
3258
3113
  }
3259
- .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,transparent\)\] {
3114
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-bg\)_78\%\,var\(--status-danger-border\)\)\] {
3260
3115
  &:hover {
3261
3116
  @media (hover: hover) {
3262
- background-color: var(--destructive);
3117
+ background-color: var(--status-danger-bg);
3263
3118
  @supports (color: color-mix(in lab, red, red)) {
3264
- background-color: color-mix(in srgb,var(--destructive) 12%,transparent);
3119
+ background-color: color-mix(in srgb,var(--status-danger-bg) 78%,var(--status-danger-border));
3265
3120
  }
3266
3121
  }
3267
3122
  }
3268
3123
  }
3269
- .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--background-secondary\)\)\] {
3124
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-icon\)_10\%\,transparent\)\]\! {
3270
3125
  &:hover {
3271
3126
  @media (hover: hover) {
3272
- background-color: var(--foreground-muted);
3127
+ background-color: var(--status-danger-icon) !important;
3273
3128
  @supports (color: color-mix(in lab, red, red)) {
3274
- background-color: color-mix(in srgb,var(--foreground-muted) 8%,var(--background-secondary));
3129
+ background-color: color-mix(in srgb,var(--status-danger-icon) 10%,transparent) !important;
3275
3130
  }
3276
3131
  }
3277
3132
  }
3278
3133
  }
3279
- .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)_78\%\,var\(--status-danger-border\,\#fca5a5\)\)\] {
3134
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-bg\)_78\%\,var\(--status-info-border\)\)\] {
3280
3135
  &:hover {
3281
3136
  @media (hover: hover) {
3282
- background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
3137
+ background-color: var(--status-info-bg);
3283
3138
  @supports (color: color-mix(in lab, red, red)) {
3284
- background-color: color-mix(in srgb,var(--status-danger-bg,rgba(254,202,202,0.8)) 78%,var(--status-danger-border,#fca5a5));
3139
+ background-color: color-mix(in srgb,var(--status-info-bg) 78%,var(--status-info-border));
3285
3140
  }
3286
3141
  }
3287
3142
  }
3288
3143
  }
3289
- .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)_78\%\,var\(--status-info-border\,\#93c5fd\)\)\] {
3144
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-bg\)_78\%\,var\(--status-success-border\)\)\] {
3290
3145
  &:hover {
3291
3146
  @media (hover: hover) {
3292
- background-color: var(--status-info-bg,rgba(219,234,254,0.8));
3147
+ background-color: var(--status-success-bg);
3293
3148
  @supports (color: color-mix(in lab, red, red)) {
3294
- background-color: color-mix(in srgb,var(--status-info-bg,rgba(219,234,254,0.8)) 78%,var(--status-info-border,#93c5fd));
3149
+ background-color: color-mix(in srgb,var(--status-success-bg) 78%,var(--status-success-border));
3295
3150
  }
3296
3151
  }
3297
3152
  }
3298
3153
  }
3299
- .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)_78\%\,var\(--status-success-border\,\#86efac\)\)\] {
3154
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-icon\)_10\%\,transparent\)\]\! {
3300
3155
  &:hover {
3301
3156
  @media (hover: hover) {
3302
- background-color: var(--status-success-bg,rgba(220,252,231,0.8));
3157
+ background-color: var(--status-success-icon) !important;
3303
3158
  @supports (color: color-mix(in lab, red, red)) {
3304
- background-color: color-mix(in srgb,var(--status-success-bg,rgba(220,252,231,0.8)) 78%,var(--status-success-border,#86efac));
3159
+ background-color: color-mix(in srgb,var(--status-success-icon) 10%,transparent) !important;
3305
3160
  }
3306
3161
  }
3307
3162
  }
3308
3163
  }
3309
- .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)_78\%\,var\(--status-warning-border\,\#fcd34d\)\)\] {
3164
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-bg\)_78\%\,var\(--status-warning-border\)\)\] {
3310
3165
  &:hover {
3311
3166
  @media (hover: hover) {
3312
- background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
3167
+ background-color: var(--status-warning-bg);
3313
3168
  @supports (color: color-mix(in lab, red, red)) {
3314
- background-color: color-mix(in srgb,var(--status-warning-bg,rgba(254,243,199,0.8)) 78%,var(--status-warning-border,#fcd34d));
3169
+ background-color: color-mix(in srgb,var(--status-warning-bg) 78%,var(--status-warning-border));
3315
3170
  }
3316
3171
  }
3317
3172
  }
3318
3173
  }
3319
- .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.11\)\] {
3174
+ .hover\:bg-\[var\(--brand-hover\)\] {
3320
3175
  &:hover {
3321
3176
  @media (hover: hover) {
3322
- background-color: rgb(var(--color-brand)/0.11);
3177
+ background-color: var(--brand-hover);
3323
3178
  }
3324
3179
  }
3325
3180
  }
3326
- .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.12\)\] {
3181
+ .hover\:bg-\[var\(--brand-surface-hover\)\] {
3327
3182
  &:hover {
3328
3183
  @media (hover: hover) {
3329
- background-color: rgb(var(--color-brand)/0.12);
3184
+ background-color: var(--brand-surface-hover);
3330
3185
  }
3331
3186
  }
3332
3187
  }
3333
- .hover\:bg-\[var\(--brand-hover\,var\(--brand\)\)\] {
3188
+ .hover\:bg-\[var\(--brand-surface-subtle\)\] {
3334
3189
  &:hover {
3335
3190
  @media (hover: hover) {
3336
- background-color: var(--brand-hover,var(--brand));
3191
+ background-color: var(--brand-surface-subtle);
3337
3192
  }
3338
3193
  }
3339
3194
  }
3340
- .hover\:bg-background {
3195
+ .hover\:bg-\[var\(--contrast-hover\)\] {
3341
3196
  &:hover {
3342
3197
  @media (hover: hover) {
3343
- background-color: var(--color-background);
3198
+ background-color: var(--contrast-hover);
3344
3199
  }
3345
3200
  }
3346
3201
  }
3347
- .hover\:bg-background-secondary {
3202
+ .hover\:bg-\[var\(--destructive-hover\)\] {
3348
3203
  &:hover {
3349
3204
  @media (hover: hover) {
3350
- background-color: var(--color-background-secondary);
3205
+ background-color: var(--destructive-hover);
3351
3206
  }
3352
3207
  }
3353
3208
  }
3354
- .hover\:bg-background\/40 {
3209
+ .hover\:bg-\[var\(--sidebar-item-hover\)\] {
3355
3210
  &:hover {
3356
3211
  @media (hover: hover) {
3357
- background-color: var(--color-background);
3358
- @supports (color: color-mix(in lab, red, red)) {
3359
- background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
3360
- }
3212
+ background-color: var(--sidebar-item-hover);
3361
3213
  }
3362
3214
  }
3363
3215
  }
3364
- .hover\:bg-black\/10 {
3216
+ .hover\:bg-\[var\(--sidebar-neutral-hover\)\] {
3365
3217
  &:hover {
3366
3218
  @media (hover: hover) {
3367
- background-color: color-mix(in srgb, #000 10%, transparent);
3368
- @supports (color: color-mix(in lab, red, red)) {
3369
- background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
3370
- }
3219
+ background-color: var(--sidebar-neutral-hover);
3371
3220
  }
3372
3221
  }
3373
3222
  }
3374
- .hover\:bg-destructive {
3223
+ .hover\:bg-\[var\(--status-danger-bg\)\] {
3375
3224
  &:hover {
3376
3225
  @media (hover: hover) {
3377
- background-color: var(--color-destructive);
3226
+ background-color: var(--status-danger-bg);
3378
3227
  }
3379
3228
  }
3380
3229
  }
3381
- .hover\:bg-white\/70 {
3230
+ .hover\:bg-\[var\(--status-warning-bg\)\] {
3382
3231
  &:hover {
3383
3232
  @media (hover: hover) {
3384
- background-color: color-mix(in srgb, #fff 70%, transparent);
3385
- @supports (color: color-mix(in lab, red, red)) {
3386
- background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
3387
- }
3233
+ background-color: var(--status-warning-bg);
3388
3234
  }
3389
3235
  }
3390
3236
  }
3391
- .hover\:font-semibold {
3237
+ .hover\:bg-background {
3392
3238
  &:hover {
3393
3239
  @media (hover: hover) {
3394
- --tw-font-weight: var(--font-weight-semibold);
3395
- font-weight: var(--font-weight-semibold);
3240
+ background-color: var(--color-background);
3396
3241
  }
3397
3242
  }
3398
3243
  }
3399
- .hover\:text-\[color-mix\(in_srgb\,\#16a34a_86\%\,var\(--foreground\)\)\]\! {
3244
+ .hover\:bg-background-secondary {
3400
3245
  &:hover {
3401
3246
  @media (hover: hover) {
3402
- color: #16a34a !important;
3403
- @supports (color: color-mix(in lab, red, red)) {
3404
- color: color-mix(in srgb,#16a34a 86%,var(--foreground)) !important;
3405
- }
3247
+ background-color: var(--color-background-secondary);
3406
3248
  }
3407
3249
  }
3408
3250
  }
3409
- .hover\:text-\[color-mix\(in_srgb\,\#dc2626_86\%\,var\(--foreground\)\)\]\! {
3251
+ .hover\:bg-background\/40 {
3410
3252
  &:hover {
3411
3253
  @media (hover: hover) {
3412
- color: #dc2626 !important;
3254
+ background-color: var(--color-background);
3413
3255
  @supports (color: color-mix(in lab, red, red)) {
3414
- color: color-mix(in srgb,#dc2626 86%,var(--foreground)) !important;
3256
+ background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
3415
3257
  }
3416
3258
  }
3417
3259
  }
3418
3260
  }
3419
- .hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
3261
+ .hover\:bg-destructive {
3420
3262
  &:hover {
3421
3263
  @media (hover: hover) {
3422
- color: var(--brand);
3423
- @supports (color: color-mix(in lab, red, red)) {
3424
- color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
3425
- }
3264
+ background-color: var(--color-destructive);
3426
3265
  }
3427
3266
  }
3428
3267
  }
3429
- .hover\:text-\[var\(--brand\)\] {
3268
+ .hover\:font-semibold {
3269
+ &:hover {
3270
+ @media (hover: hover) {
3271
+ --tw-font-weight: var(--font-weight-semibold);
3272
+ font-weight: var(--font-weight-semibold);
3273
+ }
3274
+ }
3275
+ }
3276
+ .hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
3430
3277
  &:hover {
3431
3278
  @media (hover: hover) {
3432
3279
  color: var(--brand);
3280
+ @supports (color: color-mix(in lab, red, red)) {
3281
+ color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
3282
+ }
3433
3283
  }
3434
3284
  }
3435
3285
  }
@@ -3440,77 +3290,77 @@ h2.react-datepicker__current-month {
3440
3290
  }
3441
3291
  }
3442
3292
  }
3443
- .hover\:text-amber-700 {
3293
+ .hover\:text-\[var\(--on-solid\)\] {
3444
3294
  &:hover {
3445
3295
  @media (hover: hover) {
3446
- color: var(--color-amber-700);
3296
+ color: var(--on-solid);
3447
3297
  }
3448
3298
  }
3449
3299
  }
3450
- .hover\:text-brand {
3300
+ .hover\:text-\[var\(--status-danger-icon\)\]\! {
3451
3301
  &:hover {
3452
3302
  @media (hover: hover) {
3453
- color: var(--color-brand);
3303
+ color: var(--status-danger-icon) !important;
3454
3304
  }
3455
3305
  }
3456
3306
  }
3457
- .hover\:text-brand\/70 {
3307
+ .hover\:text-\[var\(--status-danger-text\)\] {
3458
3308
  &:hover {
3459
3309
  @media (hover: hover) {
3460
- color: var(--color-brand);
3461
- @supports (color: color-mix(in lab, red, red)) {
3462
- color: color-mix(in oklab, var(--color-brand) 70%, transparent);
3463
- }
3310
+ color: var(--status-danger-text);
3464
3311
  }
3465
3312
  }
3466
3313
  }
3467
- .hover\:text-foreground {
3314
+ .hover\:text-\[var\(--status-success-icon\)\]\! {
3468
3315
  &:hover {
3469
3316
  @media (hover: hover) {
3470
- color: var(--color-foreground);
3317
+ color: var(--status-success-icon) !important;
3471
3318
  }
3472
3319
  }
3473
3320
  }
3474
- .hover\:text-red-700 {
3321
+ .hover\:text-\[var\(--status-warning-text\)\] {
3475
3322
  &:hover {
3476
3323
  @media (hover: hover) {
3477
- color: var(--color-red-700);
3324
+ color: var(--status-warning-text);
3478
3325
  }
3479
3326
  }
3480
3327
  }
3481
- .hover\:text-white {
3328
+ .hover\:text-brand {
3482
3329
  &:hover {
3483
3330
  @media (hover: hover) {
3484
- color: var(--color-white);
3331
+ color: var(--color-brand);
3485
3332
  }
3486
3333
  }
3487
3334
  }
3488
- .hover\:shadow-\[0_14px_26px_-20px_color-mix\(in_srgb\,var\(--brand\)_45\%\,\#000\)\] {
3335
+ .hover\:text-brand\/70 {
3489
3336
  &:hover {
3490
3337
  @media (hover: hover) {
3491
- --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, var(--brand));
3338
+ color: var(--color-brand);
3492
3339
  @supports (color: color-mix(in lab, red, red)) {
3493
- --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 45%,#000));
3340
+ color: color-mix(in oklab, var(--color-brand) 70%, transparent);
3494
3341
  }
3495
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3496
3342
  }
3497
3343
  }
3498
3344
  }
3499
- .hover\:shadow-\[0_16px_28px_-18px_color-mix\(in_srgb\,var\(--brand\)_80\%\,\#000\)\] {
3345
+ .hover\:text-foreground {
3346
+ &:hover {
3347
+ @media (hover: hover) {
3348
+ color: var(--color-foreground);
3349
+ }
3350
+ }
3351
+ }
3352
+ .hover\:shadow-\[var\(--shadow-action\)\] {
3500
3353
  &:hover {
3501
3354
  @media (hover: hover) {
3502
- --tw-shadow: 0 16px 28px -18px var(--tw-shadow-color, var(--brand));
3503
- @supports (color: color-mix(in lab, red, red)) {
3504
- --tw-shadow: 0 16px 28px -18px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 80%,#000));
3505
- }
3355
+ --tw-shadow: var(--shadow-action);
3506
3356
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3507
3357
  }
3508
3358
  }
3509
3359
  }
3510
- .hover\:shadow-\[inset_0_0_0_1px_rgba\(15\,23\,42\,0\.05\)\] {
3360
+ .hover\:shadow-\[var\(--shadow-brand-hover\)\] {
3511
3361
  &:hover {
3512
3362
  @media (hover: hover) {
3513
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.05));
3363
+ --tw-shadow: var(--shadow-brand-hover);
3514
3364
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3515
3365
  }
3516
3366
  }
@@ -3801,11 +3651,6 @@ h2.react-datepicker__current-month {
3801
3651
  width: calc(4/5 * 100%);
3802
3652
  }
3803
3653
  }
3804
- .data-\[open\=true\]\:w-full {
3805
- &[data-open="true"] {
3806
- width: 100%;
3807
- }
3808
- }
3809
3654
  .data-\[open\=true\]\:translate-x-0 {
3810
3655
  &[data-open="true"] {
3811
3656
  --tw-translate-x: calc(var(--spacing) * 0);
@@ -3822,14 +3667,14 @@ h2.react-datepicker__current-month {
3822
3667
  border-color: var(--color-app-border);
3823
3668
  }
3824
3669
  }
3825
- .data-\[state\=active\]\:border-b-background-secondary {
3670
+ .data-\[state\=active\]\:\!border-b-transparent {
3826
3671
  &[data-state="active"] {
3827
- border-bottom-color: var(--color-background-secondary);
3672
+ border-bottom-color: transparent !important;
3828
3673
  }
3829
3674
  }
3830
- .data-\[state\=active\]\:bg-background-secondary {
3675
+ .data-\[state\=active\]\:bg-surface {
3831
3676
  &[data-state="active"] {
3832
- background-color: var(--color-background-secondary);
3677
+ background-color: var(--color-surface);
3833
3678
  }
3834
3679
  }
3835
3680
  .data-\[state\=active\]\:text-foreground {
@@ -3837,17 +3682,14 @@ h2.react-datepicker__current-month {
3837
3682
  color: var(--color-foreground);
3838
3683
  }
3839
3684
  }
3840
- .data-\[state\=open\]\:bg-\[color-mix\(in_srgb\,\#facc15_14\%\,transparent\)\] {
3685
+ .data-\[state\=open\]\:bg-\[var\(--status-danger-bg\)\] {
3841
3686
  &[data-state="open"] {
3842
- background-color: color-mix(in srgb,#facc15 14%,transparent);
3687
+ background-color: var(--status-danger-bg);
3843
3688
  }
3844
3689
  }
3845
- .data-\[state\=open\]\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,transparent\)\] {
3690
+ .data-\[state\=open\]\:bg-\[var\(--status-warning-bg\)\] {
3846
3691
  &[data-state="open"] {
3847
- background-color: var(--destructive);
3848
- @supports (color: color-mix(in lab, red, red)) {
3849
- background-color: color-mix(in srgb,var(--destructive) 12%,transparent);
3850
- }
3692
+ background-color: var(--status-warning-bg);
3851
3693
  }
3852
3694
  }
3853
3695
  .data-\[state\=open\]\:bg-background {
@@ -3855,9 +3697,14 @@ h2.react-datepicker__current-month {
3855
3697
  background-color: var(--color-background);
3856
3698
  }
3857
3699
  }
3858
- .data-\[state\=open\]\:text-amber-700 {
3700
+ .data-\[state\=open\]\:text-\[var\(--status-danger-text\)\] {
3859
3701
  &[data-state="open"] {
3860
- color: var(--color-amber-700);
3702
+ color: var(--status-danger-text);
3703
+ }
3704
+ }
3705
+ .data-\[state\=open\]\:text-\[var\(--status-warning-text\)\] {
3706
+ &[data-state="open"] {
3707
+ color: var(--status-warning-text);
3861
3708
  }
3862
3709
  }
3863
3710
  .data-\[state\=open\]\:text-foreground {
@@ -3865,9 +3712,9 @@ h2.react-datepicker__current-month {
3865
3712
  color: var(--color-foreground);
3866
3713
  }
3867
3714
  }
3868
- .data-\[state\=open\]\:text-red-700 {
3869
- &[data-state="open"] {
3870
- color: var(--color-red-700);
3715
+ .motion-reduce\:transition-none {
3716
+ @media (prefers-reduced-motion: reduce) {
3717
+ transition-property: none;
3871
3718
  }
3872
3719
  }
3873
3720
  .max-md\:gap-3 {
@@ -3941,9 +3788,9 @@ h2.react-datepicker__current-month {
3941
3788
  position: static;
3942
3789
  }
3943
3790
  }
3944
- .md\:z-\[60\] {
3791
+ .md\:z-\[var\(--z-navigation-desktop\)\] {
3945
3792
  @media (width >= 48rem) {
3946
- z-index: 60;
3793
+ z-index: var(--z-navigation-desktop);
3947
3794
  }
3948
3795
  }
3949
3796
  .md\:order-none {
@@ -4027,9 +3874,9 @@ h2.react-datepicker__current-month {
4027
3874
  text-align: left;
4028
3875
  }
4029
3876
  }
4030
- .md\:text-\[0\.8125rem\] {
3877
+ .md\:text-\[length\:var\(--font-size-compact\)\] {
4031
3878
  @media (width >= 48rem) {
4032
- font-size: 0.8125rem;
3879
+ font-size: var(--font-size-compact);
4033
3880
  }
4034
3881
  }
4035
3882
  .md\:shadow-none {
@@ -4070,32 +3917,11 @@ h2.react-datepicker__current-month {
4070
3917
  align-self: stretch;
4071
3918
  }
4072
3919
  }
4073
- .dark\:border-\[color-mix\(in_srgb\,var\(--brand\)_42\%\,var\(--app-border\)\)\] {
4074
- @media (prefers-color-scheme: dark) {
4075
- border-color: var(--brand);
4076
- @supports (color: color-mix(in lab, red, red)) {
4077
- border-color: color-mix(in srgb,var(--brand) 42%,var(--app-border));
4078
- }
4079
- }
4080
- }
4081
3920
  .dark\:border-red-400 {
4082
3921
  @media (prefers-color-scheme: dark) {
4083
3922
  border-color: var(--color-red-400);
4084
3923
  }
4085
3924
  }
4086
- .dark\:\!bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
4087
- @media (prefers-color-scheme: dark) {
4088
- background-color: rgb(var(--color-brand)/0.13) !important;
4089
- }
4090
- }
4091
- .dark\:bg-\[color-mix\(in_srgb\,var\(--brand\)_18\%\,var\(--surface\)\)\] {
4092
- @media (prefers-color-scheme: dark) {
4093
- background-color: var(--brand);
4094
- @supports (color: color-mix(in lab, red, red)) {
4095
- background-color: color-mix(in srgb,var(--brand) 18%,var(--surface));
4096
- }
4097
- }
4098
- }
4099
3925
  .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_28\%\,var\(--surface\)\)\] {
4100
3926
  @media (prefers-color-scheme: dark) {
4101
3927
  background-color: var(--foreground-muted);
@@ -4112,52 +3938,11 @@ h2.react-datepicker__current-month {
4112
3938
  }
4113
3939
  }
4114
3940
  }
4115
- .dark\:bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
4116
- @media (prefers-color-scheme: dark) {
4117
- background-color: rgb(var(--color-brand)/0.13);
4118
- }
4119
- }
4120
- .dark\:bg-white\/\[0\.08\] {
4121
- @media (prefers-color-scheme: dark) {
4122
- background-color: color-mix(in srgb, #fff 8%, transparent);
4123
- @supports (color: color-mix(in lab, red, red)) {
4124
- background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
4125
- }
4126
- }
4127
- }
4128
- .dark\:text-\[color-mix\(in_srgb\,var\(--brand\)_42\%\,\#fff\)\] {
4129
- @media (prefers-color-scheme: dark) {
4130
- color: var(--brand);
4131
- @supports (color: color-mix(in lab, red, red)) {
4132
- color: color-mix(in srgb,var(--brand) 42%,#fff);
4133
- }
4134
- }
4135
- }
4136
- .dark\:text-foreground {
4137
- @media (prefers-color-scheme: dark) {
4138
- color: var(--color-foreground);
4139
- }
4140
- }
4141
3941
  .dark\:text-red-400 {
4142
3942
  @media (prefers-color-scheme: dark) {
4143
3943
  color: var(--color-red-400);
4144
3944
  }
4145
3945
  }
4146
- .dark\:shadow-\[0_14px_28px_-20px_color-mix\(in_srgb\,var\(--brand\)_86\%\,\#000\)\] {
4147
- @media (prefers-color-scheme: dark) {
4148
- --tw-shadow: 0 14px 28px -20px var(--tw-shadow-color, var(--brand));
4149
- @supports (color: color-mix(in lab, red, red)) {
4150
- --tw-shadow: 0 14px 28px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 86%,#000));
4151
- }
4152
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4153
- }
4154
- }
4155
- .dark\:shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.18\)\] {
4156
- @media (prefers-color-scheme: dark) {
4157
- --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.18));
4158
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4159
- }
4160
- }
4161
3946
  .dark\:hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_54\%\,var\(--app-border\)\)\] {
4162
3947
  @media (prefers-color-scheme: dark) {
4163
3948
  &:hover {
@@ -4170,144 +3955,42 @@ h2.react-datepicker__current-month {
4170
3955
  }
4171
3956
  }
4172
3957
  }
4173
- .dark\:hover\:\!bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
4174
- @media (prefers-color-scheme: dark) {
4175
- &:hover {
4176
- @media (hover: hover) {
4177
- background-color: rgb(var(--color-brand)/0.17) !important;
4178
- }
4179
- }
4180
- }
4181
- }
4182
- .dark\:hover\:bg-\[color-mix\(in_srgb\,\#16a34a_16\%\,transparent\)\]\! {
4183
- @media (prefers-color-scheme: dark) {
4184
- &:hover {
4185
- @media (hover: hover) {
4186
- background-color: color-mix(in srgb,#16a34a 16%,transparent) !important;
4187
- }
4188
- }
4189
- }
4190
- }
4191
- .dark\:hover\:bg-\[color-mix\(in_srgb\,\#dc2626_16\%\,transparent\)\]\! {
4192
- @media (prefers-color-scheme: dark) {
4193
- &:hover {
4194
- @media (hover: hover) {
4195
- background-color: color-mix(in srgb,#dc2626 16%,transparent) !important;
4196
- }
4197
- }
4198
- }
4199
- }
4200
- .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_12\%\,transparent\)\] {
4201
- @media (prefers-color-scheme: dark) {
4202
- &:hover {
4203
- @media (hover: hover) {
4204
- background-color: var(--brand);
4205
- @supports (color: color-mix(in lab, red, red)) {
4206
- background-color: color-mix(in srgb,var(--brand) 12%,transparent);
4207
- }
4208
- }
4209
- }
4210
- }
4211
- }
4212
- .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_14\%\,transparent\)\] {
4213
- @media (prefers-color-scheme: dark) {
4214
- &:hover {
4215
- @media (hover: hover) {
4216
- background-color: var(--brand);
4217
- @supports (color: color-mix(in lab, red, red)) {
4218
- background-color: color-mix(in srgb,var(--brand) 14%,transparent);
4219
- }
4220
- }
4221
- }
4222
- }
4223
- }
4224
- .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_24\%\,var\(--surface\)\)\] {
4225
- @media (prefers-color-scheme: dark) {
4226
- &:hover {
4227
- @media (hover: hover) {
4228
- background-color: var(--brand);
4229
- @supports (color: color-mix(in lab, red, red)) {
4230
- background-color: color-mix(in srgb,var(--brand) 24%,var(--surface));
4231
- }
4232
- }
4233
- }
4234
- }
4235
- }
4236
- .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.16\)\] {
4237
- @media (prefers-color-scheme: dark) {
4238
- &:hover {
4239
- @media (hover: hover) {
4240
- background-color: rgb(var(--color-brand)/0.16);
4241
- }
4242
- }
4243
- }
4244
- }
4245
- .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
4246
- @media (prefers-color-scheme: dark) {
4247
- &:hover {
4248
- @media (hover: hover) {
4249
- background-color: rgb(var(--color-brand)/0.17);
4250
- }
4251
- }
4252
- }
4253
- }
4254
- .dark\:hover\:bg-white\/10 {
4255
- @media (prefers-color-scheme: dark) {
4256
- &:hover {
4257
- @media (hover: hover) {
4258
- background-color: color-mix(in srgb, #fff 10%, transparent);
4259
- @supports (color: color-mix(in lab, red, red)) {
4260
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4261
- }
4262
- }
4263
- }
4264
- }
4265
- }
4266
- .dark\:hover\:bg-white\/\[0\.06\] {
3958
+ .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-icon\)_16\%\,transparent\)\]\! {
4267
3959
  @media (prefers-color-scheme: dark) {
4268
3960
  &:hover {
4269
3961
  @media (hover: hover) {
4270
- background-color: color-mix(in srgb, #fff 6%, transparent);
3962
+ background-color: var(--status-danger-icon) !important;
4271
3963
  @supports (color: color-mix(in lab, red, red)) {
4272
- background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
3964
+ background-color: color-mix(in srgb,var(--status-danger-icon) 16%,transparent) !important;
4273
3965
  }
4274
3966
  }
4275
3967
  }
4276
3968
  }
4277
3969
  }
4278
- .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_30\%\,\#fff\)\] {
3970
+ .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-icon\)_16\%\,transparent\)\]\! {
4279
3971
  @media (prefers-color-scheme: dark) {
4280
3972
  &:hover {
4281
3973
  @media (hover: hover) {
4282
- color: var(--brand);
3974
+ background-color: var(--status-success-icon) !important;
4283
3975
  @supports (color: color-mix(in lab, red, red)) {
4284
- color: color-mix(in srgb,var(--brand) 30%,#fff);
3976
+ background-color: color-mix(in srgb,var(--status-success-icon) 16%,transparent) !important;
4285
3977
  }
4286
3978
  }
4287
3979
  }
4288
3980
  }
4289
3981
  }
4290
- .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_78\%\,\#fff\)\] {
3982
+ .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_78\%\,var\(--on-solid\)\)\] {
4291
3983
  @media (prefers-color-scheme: dark) {
4292
3984
  &:hover {
4293
3985
  @media (hover: hover) {
4294
3986
  color: var(--brand);
4295
3987
  @supports (color: color-mix(in lab, red, red)) {
4296
- color: color-mix(in srgb,var(--brand) 78%,#fff);
3988
+ color: color-mix(in srgb,var(--brand) 78%,var(--on-solid));
4297
3989
  }
4298
3990
  }
4299
3991
  }
4300
3992
  }
4301
3993
  }
4302
- .dark\:hover\:text-foreground {
4303
- @media (prefers-color-scheme: dark) {
4304
- &:hover {
4305
- @media (hover: hover) {
4306
- color: var(--color-foreground);
4307
- }
4308
- }
4309
- }
4310
- }
4311
3994
  .dark\:focus\:border-red-400 {
4312
3995
  @media (prefers-color-scheme: dark) {
4313
3996
  &:focus {
@@ -4643,23 +4326,148 @@ h2.react-datepicker__current-month {
4643
4326
  }
4644
4327
  }
4645
4328
  :root {
4329
+ --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
4330
+ --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
4331
+ --font-size-2xs: 0.625rem;
4332
+ --font-size-caption: 0.6875rem;
4333
+ --font-size-xs: 0.75rem;
4334
+ --font-size-sm: 0.875rem;
4335
+ --font-size-compact: 0.8125rem;
4336
+ --font-size-md: 1rem;
4337
+ --font-size-lg: 1.125rem;
4338
+ --font-size-xl: 1.25rem;
4339
+ --line-height-tight: 1.25;
4340
+ --line-height-normal: 1.5;
4341
+ --line-height-2xs: 0.875rem;
4342
+ --letter-spacing-tight: -0.03em;
4343
+ --letter-spacing-title: -0.015em;
4344
+ --letter-spacing-label: 0.045em;
4345
+ --letter-spacing-caps: 0.16em;
4346
+ --space-0: 0;
4347
+ --space-1: 0.25rem;
4348
+ --space-1-5: 0.375rem;
4349
+ --space-2: 0.5rem;
4350
+ --space-3: 0.75rem;
4351
+ --space-4: 1rem;
4352
+ --space-6: 1.5rem;
4353
+ --space-8: 2rem;
4354
+ --space-12: 3rem;
4355
+ --radius-sm: 0.375rem;
4356
+ --radius-md: 0.5rem;
4357
+ --radius-lg: 0.75rem;
4358
+ --radius-xl: 1rem;
4359
+ --radius-full: 9999px;
4360
+ --shadow-sm: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
4361
+ --shadow-md: 0 8px 24px -12px color-mix(in srgb, #000 24%, transparent);
4362
+ --shadow-lg: 0 16px 36px -24px color-mix(in srgb, #000 50%, transparent);
4363
+ --shadow-brand: 0 10px 22px -16px var(--brand);
4364
+ @supports (color: color-mix(in lab, red, red)) {
4365
+ --shadow-brand: 0 10px 22px -16px color-mix(in srgb, var(--brand) 70%, #000);
4366
+ }
4367
+ --shadow-brand-hover: 0 16px 28px -18px var(--brand);
4368
+ @supports (color: color-mix(in lab, red, red)) {
4369
+ --shadow-brand-hover: 0 16px 28px -18px color-mix(in srgb, var(--brand) 80%, #000);
4370
+ }
4371
+ --shadow-action: 0 14px 26px -20px var(--brand);
4372
+ @supports (color: color-mix(in lab, red, red)) {
4373
+ --shadow-action: 0 14px 26px -20px color-mix(in srgb, var(--brand) 45%, #000);
4374
+ }
4375
+ --shadow-topbar: 0 2px 8px -2px color-mix(in srgb, #000 6%, transparent);
4376
+ --shadow-flyout: 0 8px 24px -4px color-mix(in srgb, #000 16%, transparent), 0 2px 8px -2px color-mix(in srgb, #000 8%, transparent);
4377
+ --shadow-focus: 0 0 0 3px var(--brand);
4378
+ @supports (color: color-mix(in lab, red, red)) {
4379
+ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
4380
+ }
4381
+ --shadow-warning-focus: 0 0 0 2px var(--background-secondary), 0 0 0 4px var(--status-warning-border);
4382
+ @supports (color: color-mix(in lab, red, red)) {
4383
+ --shadow-warning-focus: 0 0 0 2px var(--background-secondary), 0 0 0 4px color-mix(in srgb, var(--status-warning-border) 62%, transparent);
4384
+ }
4385
+ --shadow-theme-swatch: inset 0 0 0 1px var(--on-solid), 0 8px 18px -14px color-mix(in srgb, #000 55%, transparent);
4386
+ @supports (color: color-mix(in lab, red, red)) {
4387
+ --shadow-theme-swatch: inset 0 0 0 1px color-mix(in srgb, var(--on-solid) 32%, transparent), 0 8px 18px -14px color-mix(in srgb, #000 55%, transparent);
4388
+ }
4389
+ --shadow-overlay: 0 24px 64px -28px color-mix(in srgb, #000 62%, transparent);
4390
+ --duration-fast: 150ms;
4391
+ --duration-normal: 200ms;
4392
+ --duration-slow: 300ms;
4393
+ --overlay-scrim: color-mix(in srgb, #000 50%, transparent);
4394
+ --overlay-loading: var(--background);
4395
+ @supports (color: color-mix(in lab, red, red)) {
4396
+ --overlay-loading: color-mix(in srgb, var(--background) 40%, transparent);
4397
+ }
4398
+ --overlay-navigation-soft: color-mix(in srgb, #0f172a 18%, transparent);
4399
+ --overlay-navigation: color-mix(in srgb, #0f172a 28%, transparent);
4400
+ --overlay-navigation-strong: color-mix(in srgb, #0f172a 42%, transparent);
4401
+ --backdrop-blur-xs: 1.5px;
4402
+ --backdrop-blur-sm: 2px;
4403
+ --backdrop-blur-md: 3px;
4404
+ --z-table-header: 2;
4405
+ --z-navigation-overlay: 29;
4406
+ --z-navigation: 40;
4407
+ --z-popover: 50;
4408
+ --z-navigation-desktop: 60;
4409
+ --z-flyout: 70;
4410
+ --z-modal-overlay: 100;
4411
+ --z-modal: 110;
4412
+ --z-tooltip: 200;
4413
+ --z-loading-overlay: 999;
4414
+ --z-datepicker: 9999;
4415
+ --z-critical-dialog: 10000;
4646
4416
  --background: var(--light-background, #f6f7fb);
4647
- --background-secondary: var(--light-background-secondary, #ffffff);
4417
+ --background-secondary: var(--light-background-secondary, #eef1f7);
4648
4418
  --surface: var(--light-surface, #ffffff);
4649
4419
  --foreground: #2f3338;
4650
4420
  --foreground-muted: var(--light-foreground-muted, #7d7e84);
4651
4421
  --muted-foreground: var(--foreground-muted);
4652
4422
  --app-border: var(--light-app-border, #e6e8f2);
4653
- --primary: #5b5cff;
4654
- --primary-hover: #6d6eff;
4655
- --primary-light: #ede9fe;
4423
+ --primary: #2563eb;
4424
+ --primary-hover: #3b82f6;
4425
+ --primary-light: #dbeafe;
4656
4426
  --primary-foreground: #ffffff;
4657
4427
  --color-primary-soft: var(--primary-light);
4658
4428
  --color-primary-foreground: var(--primary-foreground);
4659
4429
  --brand: var(--primary);
4660
4430
  --brand-hover: var(--primary-hover);
4431
+ --brand-surface-subtle: var(--brand);
4432
+ @supports (color: color-mix(in lab, red, red)) {
4433
+ --brand-surface-subtle: color-mix(in srgb, var(--brand) 8%, transparent);
4434
+ }
4435
+ --brand-surface-hover: var(--brand);
4436
+ @supports (color: color-mix(in lab, red, red)) {
4437
+ --brand-surface-hover: color-mix(in srgb, var(--brand) 12%, transparent);
4438
+ }
4439
+ --brand-surface-active: var(--brand);
4440
+ @supports (color: color-mix(in lab, red, red)) {
4441
+ --brand-surface-active: color-mix(in srgb, var(--brand) 16%, transparent);
4442
+ }
4443
+ --contrast-hover: color-mix(in srgb, #000 10%, transparent);
4661
4444
  --sidebar-background: var(--surface);
4445
+ --sidebar-flyout-background: var(--surface);
4446
+ --topbar-background: var(--surface);
4447
+ --tabs-background: var(--foreground-muted);
4448
+ @supports (color: color-mix(in lab, red, red)) {
4449
+ --tabs-background: color-mix(in srgb, var(--foreground-muted) 6%, var(--surface));
4450
+ }
4451
+ --sidebar-accent: var(--status-info-icon);
4452
+ --sidebar-item-active: var(--sidebar-accent);
4453
+ @supports (color: color-mix(in lab, red, red)) {
4454
+ --sidebar-item-active: color-mix(in srgb, var(--sidebar-accent) 8%, transparent);
4455
+ }
4456
+ --sidebar-item-hover: var(--sidebar-accent);
4457
+ @supports (color: color-mix(in lab, red, red)) {
4458
+ --sidebar-item-hover: color-mix(in srgb, var(--sidebar-accent) 12%, transparent);
4459
+ }
4460
+ --sidebar-neutral-active: var(--foreground);
4461
+ @supports (color: color-mix(in lab, red, red)) {
4462
+ --sidebar-neutral-active: color-mix(in srgb, var(--foreground) 6%, transparent);
4463
+ }
4464
+ --sidebar-neutral-hover: var(--foreground);
4465
+ @supports (color: color-mix(in lab, red, red)) {
4466
+ --sidebar-neutral-hover: color-mix(in srgb, var(--foreground) 4%, transparent);
4467
+ }
4662
4468
  --destructive: #ef4444;
4469
+ --destructive-hover: #dc2626;
4470
+ --on-solid: #ffffff;
4663
4471
  --input-bg: var(--light-input-bg, #eceef5);
4664
4472
  --status-info-bg: #dbeafe;
4665
4473
  --status-info-border: #60a5fa;
@@ -4673,22 +4481,42 @@ h2.react-datepicker__current-month {
4673
4481
  --status-warning-border: #f59e0b;
4674
4482
  --status-warning-text: #78350f;
4675
4483
  --status-warning-icon: #b45309;
4676
- --status-danger-bg: #fee2e2;
4677
- --status-danger-border: #f87171;
4678
- --status-danger-text: #7f1d1d;
4679
- --status-danger-icon: #dc2626;
4680
- --radius: 0.5rem;
4484
+ --status-danger-bg: #fff0ed;
4485
+ --status-danger-border: #e85d4a;
4486
+ --status-danger-text: #7a271a;
4487
+ --status-danger-icon: #c43224;
4488
+ --radius: var(--radius-md);
4681
4489
  }
4682
4490
  .dark {
4683
- --background: var(--dark-background, #0b0820);
4684
- --background-secondary: var(--dark-background-secondary, #141030);
4685
- --surface: var(--dark-surface, #1b1642);
4491
+ --background: var(--dark-background, #0b1220);
4492
+ --background-secondary: var(--dark-background-secondary, #111827);
4493
+ --surface: var(--dark-surface, #172033);
4686
4494
  --foreground: #ffffff;
4687
- --foreground-muted: var(--dark-foreground-muted, #c7c6e5);
4495
+ --foreground-muted: var(--dark-foreground-muted, #b8c4d6);
4688
4496
  --muted-foreground: var(--foreground-muted);
4689
- --app-border: var(--dark-app-border, #2a245a);
4690
- --input-bg: var(--dark-input-bg, #161138);
4691
- --sidebar-background: var(--surface);
4497
+ --app-border: var(--dark-app-border, #29364d);
4498
+ --input-bg: var(--dark-input-bg, #111a2b);
4499
+ --sidebar-background: var(--background-secondary);
4500
+ --sidebar-flyout-background: var(--background-secondary);
4501
+ --topbar-background: var(--background-secondary);
4502
+ --tabs-background: var(--background-secondary);
4503
+ --sidebar-accent: var(--status-info-icon);
4504
+ --sidebar-item-active: var(--sidebar-accent);
4505
+ @supports (color: color-mix(in lab, red, red)) {
4506
+ --sidebar-item-active: color-mix(in srgb, var(--sidebar-accent) 13%, transparent);
4507
+ }
4508
+ --sidebar-item-hover: var(--sidebar-accent);
4509
+ @supports (color: color-mix(in lab, red, red)) {
4510
+ --sidebar-item-hover: color-mix(in srgb, var(--sidebar-accent) 15%, transparent);
4511
+ }
4512
+ --sidebar-neutral-active: var(--on-solid);
4513
+ @supports (color: color-mix(in lab, red, red)) {
4514
+ --sidebar-neutral-active: color-mix(in srgb, var(--on-solid) 8%, transparent);
4515
+ }
4516
+ --sidebar-neutral-hover: var(--on-solid);
4517
+ @supports (color: color-mix(in lab, red, red)) {
4518
+ --sidebar-neutral-hover: color-mix(in srgb, var(--on-solid) 6%, transparent);
4519
+ }
4692
4520
  --status-info-bg: color-mix(in srgb, #3b82f6 16%, transparent);
4693
4521
  --status-info-border: color-mix(in srgb, #60a5fa 34%, transparent);
4694
4522
  --status-info-text: #dbeafe;
@@ -4701,10 +4529,37 @@ h2.react-datepicker__current-month {
4701
4529
  --status-warning-border: color-mix(in srgb, #fbbf24 38%, transparent);
4702
4530
  --status-warning-text: #fef3c7;
4703
4531
  --status-warning-icon: #fcd34d;
4704
- --status-danger-bg: color-mix(in srgb, #ef4444 16%, transparent);
4705
- --status-danger-border: color-mix(in srgb, #f87171 38%, transparent);
4706
- --status-danger-text: #fee2e2;
4707
- --status-danger-icon: #fca5a5;
4532
+ --status-danger-bg: #e85d4a;
4533
+ @supports (color: color-mix(in lab, red, red)) {
4534
+ --status-danger-bg: color-mix(in srgb, #e85d4a 14%, var(--surface));
4535
+ }
4536
+ --status-danger-border: #e85d4a;
4537
+ @supports (color: color-mix(in lab, red, red)) {
4538
+ --status-danger-border: color-mix(in srgb, #e85d4a 48%, var(--app-border));
4539
+ }
4540
+ --status-danger-text: #ffd9d2;
4541
+ --status-danger-icon: #ff9585;
4542
+ --shadow-sm: 0 1px 2px color-mix(in srgb, #000 28%, transparent);
4543
+ --shadow-md: 0 10px 28px -14px color-mix(in srgb, #000 58%, transparent);
4544
+ --shadow-lg: 0 18px 42px -24px color-mix(in srgb, #000 72%, transparent);
4545
+ --shadow-topbar: 0 2px 10px -2px color-mix(in srgb, #000 36%, transparent);
4546
+ --shadow-overlay: 0 24px 64px -24px color-mix(in srgb, #000 78%, transparent);
4547
+ --brand-surface-subtle: var(--brand);
4548
+ @supports (color: color-mix(in lab, red, red)) {
4549
+ --brand-surface-subtle: color-mix(in srgb, var(--brand) 13%, transparent);
4550
+ }
4551
+ --brand-surface-hover: var(--brand);
4552
+ @supports (color: color-mix(in lab, red, red)) {
4553
+ --brand-surface-hover: color-mix(in srgb, var(--brand) 17%, transparent);
4554
+ }
4555
+ --brand-surface-active: var(--brand);
4556
+ @supports (color: color-mix(in lab, red, red)) {
4557
+ --brand-surface-active: color-mix(in srgb, var(--brand) 21%, transparent);
4558
+ }
4559
+ --contrast-hover: var(--on-solid);
4560
+ @supports (color: color-mix(in lab, red, red)) {
4561
+ --contrast-hover: color-mix(in srgb, var(--on-solid) 10%, transparent);
4562
+ }
4708
4563
  }
4709
4564
  .app-page-message--default {
4710
4565
  border-color: var(--app-border);
@@ -4815,24 +4670,24 @@ h2.react-datepicker__current-month {
4815
4670
  color: var(--status-danger-icon);
4816
4671
  }
4817
4672
  .app-datepicker-popper {
4818
- z-index: 9999 !important;
4673
+ z-index: var(--z-datepicker) !important;
4819
4674
  }
4820
4675
  .react-datepicker {
4821
4676
  display: flex !important;
4822
4677
  align-items: flex-start !important;
4823
4678
  border-color: var(--app-border) !important;
4824
- background-color: var(--background-secondary) !important;
4679
+ background-color: var(--surface) !important;
4825
4680
  color: var(--foreground) !important;
4826
- box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
4681
+ box-shadow: var(--shadow-md) !important;
4827
4682
  }
4828
4683
  .react-datepicker__header {
4829
- background-color: var(--background-secondary) !important;
4684
+ background-color: var(--surface) !important;
4830
4685
  border-bottom-color: var(--app-border) !important;
4831
4686
  }
4832
- .react-datepicker__current-month,
4687
+ .react-datepicker__current-month,
4833
4688
  .react-datepicker-time__header {
4834
4689
  color: var(--foreground) !important;
4835
- font-size: 0.8125rem !important;
4690
+ font-size: var(--font-size-compact) !important;
4836
4691
  font-weight: 600 !important;
4837
4692
  }
4838
4693
  .react-datepicker__day-name,
@@ -4840,9 +4695,9 @@ h2.react-datepicker__current-month {
4840
4695
  .react-datepicker__time-name {
4841
4696
  width: 2rem;
4842
4697
  line-height: 2rem;
4843
- margin: 0.125rem;
4844
- border-radius: 0.375rem;
4845
- font-size: 0.75rem;
4698
+ margin: calc(var(--space-1) / 2);
4699
+ border-radius: var(--radius-sm);
4700
+ font-size: var(--font-size-xs);
4846
4701
  }
4847
4702
  .react-datepicker__day-name {
4848
4703
  color: var(--foreground-muted) !important;
@@ -4851,11 +4706,11 @@ h2.react-datepicker__current-month {
4851
4706
  letter-spacing: 0.02em;
4852
4707
  }
4853
4708
  .react-datepicker__month {
4854
- margin: 0.5rem;
4709
+ margin: var(--space-2);
4855
4710
  }
4856
4711
  .react-datepicker__day {
4857
4712
  color: var(--foreground) !important;
4858
- transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
4713
+ transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
4859
4714
  }
4860
4715
  .react-datepicker__day:hover,
4861
4716
  .react-datepicker__day--keyboard-selected {
@@ -4874,7 +4729,7 @@ h2.react-datepicker__current-month {
4874
4729
  .react-datepicker__day--in-selecting-range,
4875
4730
  .react-datepicker__day--in-range {
4876
4731
  background-color: var(--brand) !important;
4877
- color: #ffffff !important;
4732
+ color: var(--on-solid) !important;
4878
4733
  box-shadow: none !important;
4879
4734
  }
4880
4735
  .react-datepicker__day--today {
@@ -4886,11 +4741,11 @@ h2.react-datepicker__current-month {
4886
4741
  opacity: 0.5;
4887
4742
  }
4888
4743
  .react-datepicker__navigation {
4889
- top: 0.125rem;
4744
+ top: calc(var(--space-1) / 2);
4890
4745
  height: 2rem;
4891
4746
  width: 2rem;
4892
- border-radius: 9999px;
4893
- transition: background-color 160ms ease;
4747
+ border-radius: var(--radius-full);
4748
+ transition: background-color var(--duration-fast) ease;
4894
4749
  }
4895
4750
  .react-datepicker__navigation:hover {
4896
4751
  background-color: var(--background) !important;
@@ -4911,10 +4766,10 @@ h2.react-datepicker__current-month {
4911
4766
  float: none !important;
4912
4767
  border-left: 1px solid var(--app-border) !important;
4913
4768
  }
4914
- .react-datepicker__time-container .react-datepicker__header--time,
4915
- .react-datepicker__time-container .react-datepicker__time,
4769
+ .react-datepicker__time-container .react-datepicker__header--time,
4770
+ .react-datepicker__time-container .react-datepicker__time,
4916
4771
  .react-datepicker__time-container .react-datepicker__time-box {
4917
- background-color: var(--background-secondary) !important;
4772
+ background-color: var(--surface) !important;
4918
4773
  border-bottom-color: var(--app-border) !important;
4919
4774
  }
4920
4775
  .react-datepicker__time-list-item {
@@ -4923,8 +4778,8 @@ h2.react-datepicker__current-month {
4923
4778
  line-height: 2rem !important;
4924
4779
  display: flex !important;
4925
4780
  align-items: center !important;
4926
- font-size: 0.75rem;
4927
- transition: background-color 160ms ease;
4781
+ font-size: var(--font-size-xs);
4782
+ transition: background-color var(--duration-fast) ease;
4928
4783
  }
4929
4784
  .react-datepicker__time-list-item:not(.react-datepicker__time-list-item--selected):not(.react-datepicker__time-list-item--disabled):hover {
4930
4785
  background-color: var(--background) !important;
@@ -4933,7 +4788,7 @@ h2.react-datepicker__current-month {
4933
4788
  .react-datepicker__time-list-item--selected,
4934
4789
  .react-datepicker__time-list-item--selected:hover {
4935
4790
  background-color: var(--brand) !important;
4936
- color: #ffffff !important;
4791
+ color: var(--on-solid) !important;
4937
4792
  font-weight: 600 !important;
4938
4793
  }
4939
4794
  .react-datepicker__time-list-item--disabled,
@@ -4961,7 +4816,7 @@ h2.react-datepicker__current-month {
4961
4816
  .field-select option:hover,
4962
4817
  .field-select option:focus {
4963
4818
  background-color: var(--brand) !important;
4964
- color: #ffffff !important;
4819
+ color: var(--on-solid) !important;
4965
4820
  }
4966
4821
  .dark .field-select,
4967
4822
  [data-theme='dark'] .field-select {
@@ -4977,7 +4832,7 @@ h2.react-datepicker__current-month {
4977
4832
  background-color: var(--brand);
4978
4833
  }
4979
4834
  .app-switch__thumb {
4980
- background-color: #ffffff;
4835
+ background-color: var(--on-solid);
4981
4836
  }
4982
4837
  .app-radio {
4983
4838
  border-color: var(--foreground-muted);
@@ -5238,6 +5093,11 @@ h2.react-datepicker__current-month {
5238
5093
  syntax: "*";
5239
5094
  inherits: false;
5240
5095
  }
5096
+ @property --tw-content {
5097
+ syntax: "*";
5098
+ initial-value: "";
5099
+ inherits: false;
5100
+ }
5241
5101
  @keyframes spin {
5242
5102
  to {
5243
5103
  transform: rotate(360deg);
@@ -5306,6 +5166,7 @@ h2.react-datepicker__current-month {
5306
5166
  --tw-backdrop-sepia: initial;
5307
5167
  --tw-duration: initial;
5308
5168
  --tw-ease: initial;
5169
+ --tw-content: "";
5309
5170
  }
5310
5171
  }
5311
5172
  }