@ziadshalaby/ngx-zs-component 2.0.7 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/output.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --zs-color-yellow-400: oklch(85.2% 0.199 91.936);
30
30
  --zs-color-yellow-500: oklch(79.5% 0.184 86.047);
31
31
  --zs-color-yellow-600: oklch(68.1% 0.162 75.834);
32
+ --zs-color-yellow-700: oklch(55.4% 0.135 66.442);
32
33
  --zs-color-yellow-800: oklch(47.6% 0.114 61.907);
33
34
  --zs-color-lime-400: oklch(84.1% 0.238 128.85);
34
35
  --zs-color-lime-500: oklch(76.8% 0.233 130.85);
@@ -72,7 +73,6 @@
72
73
  --zs-color-indigo-400: oklch(67.3% 0.182 276.935);
73
74
  --zs-color-indigo-500: oklch(58.5% 0.233 277.117);
74
75
  --zs-color-indigo-600: oklch(51.1% 0.262 276.966);
75
- --zs-color-violet-100: oklch(94.3% 0.029 294.588);
76
76
  --zs-color-violet-200: oklch(89.4% 0.057 293.283);
77
77
  --zs-color-violet-300: oklch(81.1% 0.111 293.571);
78
78
  --zs-color-violet-400: oklch(70.2% 0.183 293.541);
@@ -80,7 +80,6 @@
80
80
  --zs-color-violet-600: oklch(54.1% 0.281 293.009);
81
81
  --zs-color-violet-700: oklch(49.1% 0.27 292.581);
82
82
  --zs-color-violet-800: oklch(43.2% 0.232 292.759);
83
- --zs-color-violet-900: oklch(38% 0.189 293.745);
84
83
  --zs-color-purple-400: oklch(71.4% 0.203 305.504);
85
84
  --zs-color-purple-600: oklch(55.8% 0.288 302.321);
86
85
  --zs-color-fuchsia-400: oklch(74% 0.238 322.16);
@@ -341,9 +340,6 @@
341
340
  .zs\:top-1\/6 {
342
341
  top: calc(1/6 * 100%);
343
342
  }
344
- .zs\:top-3 {
345
- top: calc(var(--zs-spacing) * 3);
346
- }
347
343
  .zs\:top-4 {
348
344
  top: calc(var(--zs-spacing) * 4);
349
345
  }
@@ -362,9 +358,6 @@
362
358
  .zs\:bottom-0 {
363
359
  bottom: calc(var(--zs-spacing) * 0);
364
360
  }
365
- .zs\:bottom-3 {
366
- bottom: calc(var(--zs-spacing) * 3);
367
- }
368
361
  .zs\:bottom-4 {
369
362
  bottom: calc(var(--zs-spacing) * 4);
370
363
  }
@@ -419,9 +412,6 @@
419
412
  .zs\:m-4 {
420
413
  margin: calc(var(--zs-spacing) * 4);
421
414
  }
422
- .zs\:m-auto {
423
- margin: auto;
424
- }
425
415
  .zs\:mx-4 {
426
416
  margin-inline: calc(var(--zs-spacing) * 4);
427
417
  }
@@ -455,6 +445,9 @@
455
445
  .zs\:mt-6 {
456
446
  margin-top: calc(var(--zs-spacing) * 6);
457
447
  }
448
+ .zs\:mt-8 {
449
+ margin-top: calc(var(--zs-spacing) * 8);
450
+ }
458
451
  .zs\:mr-1 {
459
452
  margin-right: calc(var(--zs-spacing) * 1);
460
453
  }
@@ -624,6 +617,9 @@
624
617
  .zs\:min-h-\[90vh\] {
625
618
  min-height: 90vh;
626
619
  }
620
+ .zs\:min-h-\[92vh\] {
621
+ min-height: 92vh;
622
+ }
627
623
  .zs\:w-1 {
628
624
  width: calc(var(--zs-spacing) * 1);
629
625
  }
@@ -660,9 +656,6 @@
660
656
  .zs\:w-64 {
661
657
  width: calc(var(--zs-spacing) * 64);
662
658
  }
663
- .zs\:w-72 {
664
- width: calc(var(--zs-spacing) * 72);
665
- }
666
659
  .zs\:w-auto {
667
660
  width: auto;
668
661
  }
@@ -785,8 +778,8 @@
785
778
  .zs\:cursor-text {
786
779
  cursor: text;
787
780
  }
788
- .zs\:grid-cols-1 {
789
- grid-template-columns: repeat(1, minmax(0, 1fr));
781
+ .zs\:grid-cols-2 {
782
+ grid-template-columns: repeat(2, minmax(0, 1fr));
790
783
  }
791
784
  .zs\:flex-col {
792
785
  flex-direction: column;
@@ -836,6 +829,9 @@
836
829
  .zs\:gap-6 {
837
830
  gap: calc(var(--zs-spacing) * 6);
838
831
  }
832
+ .zs\:gap-8 {
833
+ gap: calc(var(--zs-spacing) * 8);
834
+ }
839
835
  .zs\:truncate {
840
836
  overflow: hidden;
841
837
  text-overflow: ellipsis;
@@ -897,6 +893,10 @@
897
893
  border-style: var(--tw-border-style);
898
894
  border-width: 7px;
899
895
  }
896
+ .zs\:border-\[1px\] {
897
+ border-style: var(--tw-border-style);
898
+ border-width: 1px;
899
+ }
900
900
  .zs\:border-y {
901
901
  border-block-style: var(--tw-border-style);
902
902
  border-block-width: 1px;
@@ -949,12 +949,18 @@
949
949
  --tw-border-style: solid;
950
950
  border-style: solid;
951
951
  }
952
+ .zs\:border-amber-500 {
953
+ border-color: var(--zs-color-amber-500);
954
+ }
952
955
  .zs\:border-amber-600 {
953
956
  border-color: var(--zs-color-amber-600);
954
957
  }
955
958
  .zs\:border-blue-200 {
956
959
  border-color: var(--zs-color-blue-200);
957
960
  }
961
+ .zs\:border-blue-300 {
962
+ border-color: var(--zs-color-blue-300);
963
+ }
958
964
  .zs\:border-blue-500 {
959
965
  border-color: var(--zs-color-blue-500);
960
966
  }
@@ -964,6 +970,9 @@
964
970
  .zs\:border-cyan-300 {
965
971
  border-color: var(--zs-color-cyan-300);
966
972
  }
973
+ .zs\:border-cyan-500 {
974
+ border-color: var(--zs-color-cyan-500);
975
+ }
967
976
  .zs\:border-cyan-600 {
968
977
  border-color: var(--zs-color-cyan-600);
969
978
  }
@@ -1027,6 +1036,9 @@
1027
1036
  .zs\:border-slate-300 {
1028
1037
  border-color: var(--zs-color-slate-300);
1029
1038
  }
1039
+ .zs\:border-slate-500 {
1040
+ border-color: var(--zs-color-slate-500);
1041
+ }
1030
1042
  .zs\:border-slate-600 {
1031
1043
  border-color: var(--zs-color-slate-600);
1032
1044
  }
@@ -1039,12 +1051,18 @@
1039
1051
  .zs\:border-teal-300 {
1040
1052
  border-color: var(--zs-color-teal-300);
1041
1053
  }
1054
+ .zs\:border-teal-500 {
1055
+ border-color: var(--zs-color-teal-500);
1056
+ }
1042
1057
  .zs\:border-teal-600 {
1043
1058
  border-color: var(--zs-color-teal-600);
1044
1059
  }
1045
1060
  .zs\:border-violet-300 {
1046
1061
  border-color: var(--zs-color-violet-300);
1047
1062
  }
1063
+ .zs\:border-violet-500 {
1064
+ border-color: var(--zs-color-violet-500);
1065
+ }
1048
1066
  .zs\:border-violet-600 {
1049
1067
  border-color: var(--zs-color-violet-600);
1050
1068
  }
@@ -1228,9 +1246,6 @@
1228
1246
  .zs\:bg-transparent {
1229
1247
  background-color: transparent;
1230
1248
  }
1231
- .zs\:bg-violet-100 {
1232
- background-color: var(--zs-color-violet-100);
1233
- }
1234
1249
  .zs\:bg-violet-200 {
1235
1250
  background-color: var(--zs-color-violet-200);
1236
1251
  }
@@ -1285,6 +1300,12 @@
1285
1300
  .zs\:p-5 {
1286
1301
  padding: calc(var(--zs-spacing) * 5);
1287
1302
  }
1303
+ .zs\:p-6 {
1304
+ padding: calc(var(--zs-spacing) * 6);
1305
+ }
1306
+ .zs\:px-0 {
1307
+ padding-inline: calc(var(--zs-spacing) * 0);
1308
+ }
1288
1309
  .zs\:px-1 {
1289
1310
  padding-inline: calc(var(--zs-spacing) * 1);
1290
1311
  }
@@ -1312,6 +1333,21 @@
1312
1333
  .zs\:px-8 {
1313
1334
  padding-inline: calc(var(--zs-spacing) * 8);
1314
1335
  }
1336
+ .zs\:px-\[calc\(--spacing\(2\)-1px\)\] {
1337
+ padding-inline: calc(calc(var(--zs-spacing) * 2) - 1px);
1338
+ }
1339
+ .zs\:px-\[calc\(--spacing\(3\.5\)-1px\)\] {
1340
+ padding-inline: calc(calc(var(--zs-spacing) * 3.5) - 1px);
1341
+ }
1342
+ .zs\:px-\[calc\(--spacing\(5\)-1px\)\] {
1343
+ padding-inline: calc(calc(var(--zs-spacing) * 5) - 1px);
1344
+ }
1345
+ .zs\:px-\[calc\(--spacing\(6\.5\)-1px\)\] {
1346
+ padding-inline: calc(calc(var(--zs-spacing) * 6.5) - 1px);
1347
+ }
1348
+ .zs\:px-\[calc\(--spacing\(8\)-1px\)\] {
1349
+ padding-inline: calc(calc(var(--zs-spacing) * 8) - 1px);
1350
+ }
1315
1351
  .zs\:py-1 {
1316
1352
  padding-block: calc(var(--zs-spacing) * 1);
1317
1353
  }
@@ -1339,8 +1375,20 @@
1339
1375
  .zs\:py-6 {
1340
1376
  padding-block: calc(var(--zs-spacing) * 6);
1341
1377
  }
1342
- .zs\:py-9 {
1343
- padding-block: calc(var(--zs-spacing) * 9);
1378
+ .zs\:py-\[calc\(--spacing\(1\.75\)-1px\)\] {
1379
+ padding-block: calc(calc(var(--zs-spacing) * 1.75) - 1px);
1380
+ }
1381
+ .zs\:py-\[calc\(--spacing\(2\)-1px\)\] {
1382
+ padding-block: calc(calc(var(--zs-spacing) * 2) - 1px);
1383
+ }
1384
+ .zs\:py-\[calc\(--spacing\(2\.5\)-1px\)\] {
1385
+ padding-block: calc(calc(var(--zs-spacing) * 2.5) - 1px);
1386
+ }
1387
+ .zs\:py-\[calc\(--spacing\(3\.25\)-1px\)\] {
1388
+ padding-block: calc(calc(var(--zs-spacing) * 3.25) - 1px);
1389
+ }
1390
+ .zs\:py-\[calc\(--spacing\(4\)-1px\)\] {
1391
+ padding-block: calc(calc(var(--zs-spacing) * 4) - 1px);
1344
1392
  }
1345
1393
  .zs\:pt-2 {
1346
1394
  padding-top: calc(var(--zs-spacing) * 2);
@@ -1348,9 +1396,6 @@
1348
1396
  .zs\:pt-3 {
1349
1397
  padding-top: calc(var(--zs-spacing) * 3);
1350
1398
  }
1351
- .zs\:pt-9\.5 {
1352
- padding-top: calc(var(--zs-spacing) * 9.5);
1353
- }
1354
1399
  .zs\:pr-2 {
1355
1400
  padding-right: calc(var(--zs-spacing) * 2);
1356
1401
  }
@@ -1514,9 +1559,6 @@
1514
1559
  .zs\:text-gray-600 {
1515
1560
  color: var(--zs-color-gray-600);
1516
1561
  }
1517
- .zs\:text-gray-700 {
1518
- color: var(--zs-color-gray-700);
1519
- }
1520
1562
  .zs\:text-gray-800 {
1521
1563
  color: var(--zs-color-gray-800);
1522
1564
  }
@@ -1592,6 +1634,9 @@
1592
1634
  .zs\:text-slate-600 {
1593
1635
  color: var(--zs-color-slate-600);
1594
1636
  }
1637
+ .zs\:text-slate-700 {
1638
+ color: var(--zs-color-slate-700);
1639
+ }
1595
1640
  .zs\:text-slate-800 {
1596
1641
  color: var(--zs-color-slate-800);
1597
1642
  }
@@ -1616,9 +1661,6 @@
1616
1661
  .zs\:text-violet-600 {
1617
1662
  color: var(--zs-color-violet-600);
1618
1663
  }
1619
- .zs\:text-violet-700 {
1620
- color: var(--zs-color-violet-700);
1621
- }
1622
1664
  .zs\:text-violet-800 {
1623
1665
  color: var(--zs-color-violet-800);
1624
1666
  }
@@ -1841,41 +1883,38 @@
1841
1883
  --tw-ring-color: var(--zs-color-yellow-400);
1842
1884
  }
1843
1885
  }
1844
- .zs\:hover\:scale-110 {
1886
+ .zs\:hover\:scale-\[1\.02\] {
1845
1887
  &:hover {
1846
1888
  @media (hover: hover) {
1847
- --tw-scale-x: 110%;
1848
- --tw-scale-y: 110%;
1849
- --tw-scale-z: 110%;
1850
- scale: var(--tw-scale-x) var(--tw-scale-y);
1889
+ scale: 1.02;
1851
1890
  }
1852
1891
  }
1853
1892
  }
1854
- .zs\:hover\:scale-\[1\.02\] {
1893
+ .zs\:hover\:border-blue-400 {
1855
1894
  &:hover {
1856
1895
  @media (hover: hover) {
1857
- scale: 1.02;
1896
+ border-color: var(--zs-color-blue-400);
1858
1897
  }
1859
1898
  }
1860
1899
  }
1861
- .zs\:hover\:scale-\[1\.03\] {
1900
+ .zs\:hover\:border-blue-600 {
1862
1901
  &:hover {
1863
1902
  @media (hover: hover) {
1864
- scale: 1.03;
1903
+ border-color: var(--zs-color-blue-600);
1865
1904
  }
1866
1905
  }
1867
1906
  }
1868
- .zs\:hover\:border-blue-400 {
1907
+ .zs\:hover\:border-cyan-500 {
1869
1908
  &:hover {
1870
1909
  @media (hover: hover) {
1871
- border-color: var(--zs-color-blue-400);
1910
+ border-color: var(--zs-color-cyan-500);
1872
1911
  }
1873
1912
  }
1874
1913
  }
1875
- .zs\:hover\:border-cyan-500 {
1914
+ .zs\:hover\:border-cyan-600 {
1876
1915
  &:hover {
1877
1916
  @media (hover: hover) {
1878
- border-color: var(--zs-color-cyan-500);
1917
+ border-color: var(--zs-color-cyan-600);
1879
1918
  }
1880
1919
  }
1881
1920
  }
@@ -1886,6 +1925,13 @@
1886
1925
  }
1887
1926
  }
1888
1927
  }
1928
+ .zs\:hover\:border-gray-600 {
1929
+ &:hover {
1930
+ @media (hover: hover) {
1931
+ border-color: var(--zs-color-gray-600);
1932
+ }
1933
+ }
1934
+ }
1889
1935
  .zs\:hover\:border-green-500 {
1890
1936
  &:hover {
1891
1937
  @media (hover: hover) {
@@ -1893,6 +1939,13 @@
1893
1939
  }
1894
1940
  }
1895
1941
  }
1942
+ .zs\:hover\:border-green-600 {
1943
+ &:hover {
1944
+ @media (hover: hover) {
1945
+ border-color: var(--zs-color-green-600);
1946
+ }
1947
+ }
1948
+ }
1896
1949
  .zs\:hover\:border-red-500 {
1897
1950
  &:hover {
1898
1951
  @media (hover: hover) {
@@ -1900,6 +1953,13 @@
1900
1953
  }
1901
1954
  }
1902
1955
  }
1956
+ .zs\:hover\:border-red-600 {
1957
+ &:hover {
1958
+ @media (hover: hover) {
1959
+ border-color: var(--zs-color-red-600);
1960
+ }
1961
+ }
1962
+ }
1903
1963
  .zs\:hover\:border-slate-500 {
1904
1964
  &:hover {
1905
1965
  @media (hover: hover) {
@@ -1907,6 +1967,13 @@
1907
1967
  }
1908
1968
  }
1909
1969
  }
1970
+ .zs\:hover\:border-slate-600 {
1971
+ &:hover {
1972
+ @media (hover: hover) {
1973
+ border-color: var(--zs-color-slate-600);
1974
+ }
1975
+ }
1976
+ }
1910
1977
  .zs\:hover\:border-teal-500 {
1911
1978
  &:hover {
1912
1979
  @media (hover: hover) {
@@ -1914,6 +1981,13 @@
1914
1981
  }
1915
1982
  }
1916
1983
  }
1984
+ .zs\:hover\:border-teal-600 {
1985
+ &:hover {
1986
+ @media (hover: hover) {
1987
+ border-color: var(--zs-color-teal-600);
1988
+ }
1989
+ }
1990
+ }
1917
1991
  .zs\:hover\:border-violet-500 {
1918
1992
  &:hover {
1919
1993
  @media (hover: hover) {
@@ -1921,6 +1995,13 @@
1921
1995
  }
1922
1996
  }
1923
1997
  }
1998
+ .zs\:hover\:border-violet-600 {
1999
+ &:hover {
2000
+ @media (hover: hover) {
2001
+ border-color: var(--zs-color-violet-600);
2002
+ }
2003
+ }
2004
+ }
1924
2005
  .zs\:hover\:border-yellow-500 {
1925
2006
  &:hover {
1926
2007
  @media (hover: hover) {
@@ -1928,6 +2009,13 @@
1928
2009
  }
1929
2010
  }
1930
2011
  }
2012
+ .zs\:hover\:border-yellow-600 {
2013
+ &:hover {
2014
+ @media (hover: hover) {
2015
+ border-color: var(--zs-color-yellow-600);
2016
+ }
2017
+ }
2018
+ }
1931
2019
  .zs\:hover\:bg-amber-600 {
1932
2020
  &:hover {
1933
2021
  @media (hover: hover) {
@@ -2053,13 +2141,6 @@
2053
2141
  }
2054
2142
  }
2055
2143
  }
2056
- .zs\:hover\:text-amber-700 {
2057
- &:hover {
2058
- @media (hover: hover) {
2059
- color: var(--zs-color-amber-700);
2060
- }
2061
- }
2062
- }
2063
2144
  .zs\:hover\:text-blue-600 {
2064
2145
  &:hover {
2065
2146
  @media (hover: hover) {
@@ -2081,10 +2162,10 @@
2081
2162
  }
2082
2163
  }
2083
2164
  }
2084
- .zs\:hover\:text-cyan-700 {
2165
+ .zs\:hover\:text-gray-50 {
2085
2166
  &:hover {
2086
2167
  @media (hover: hover) {
2087
- color: var(--zs-color-cyan-700);
2168
+ color: var(--zs-color-gray-50);
2088
2169
  }
2089
2170
  }
2090
2171
  }
@@ -2130,17 +2211,17 @@
2130
2211
  }
2131
2212
  }
2132
2213
  }
2133
- .zs\:hover\:text-red-700 {
2214
+ .zs\:hover\:text-red-800 {
2134
2215
  &:hover {
2135
2216
  @media (hover: hover) {
2136
- color: var(--zs-color-red-700);
2217
+ color: var(--zs-color-red-800);
2137
2218
  }
2138
2219
  }
2139
2220
  }
2140
- .zs\:hover\:text-red-800 {
2221
+ .zs\:hover\:text-slate-500 {
2141
2222
  &:hover {
2142
2223
  @media (hover: hover) {
2143
- color: var(--zs-color-red-800);
2224
+ color: var(--zs-color-slate-500);
2144
2225
  }
2145
2226
  }
2146
2227
  }
@@ -2158,24 +2239,27 @@
2158
2239
  }
2159
2240
  }
2160
2241
  }
2161
- .zs\:hover\:text-slate-800 {
2242
+ .zs\:hover\:text-slate-700\/70 {
2162
2243
  &:hover {
2163
2244
  @media (hover: hover) {
2164
- color: var(--zs-color-slate-800);
2245
+ color: var(--zs-color-slate-700);
2246
+ @supports (color: color-mix(in lab, red, red)) {
2247
+ color: color-mix(in oklab, var(--zs-color-slate-700) 70%, transparent);
2248
+ }
2165
2249
  }
2166
2250
  }
2167
2251
  }
2168
- .zs\:hover\:text-teal-600 {
2252
+ .zs\:hover\:text-slate-900 {
2169
2253
  &:hover {
2170
2254
  @media (hover: hover) {
2171
- color: var(--zs-color-teal-600);
2255
+ color: var(--zs-color-slate-900);
2172
2256
  }
2173
2257
  }
2174
2258
  }
2175
- .zs\:hover\:text-teal-700 {
2259
+ .zs\:hover\:text-teal-600 {
2176
2260
  &:hover {
2177
2261
  @media (hover: hover) {
2178
- color: var(--zs-color-teal-700);
2262
+ color: var(--zs-color-teal-600);
2179
2263
  }
2180
2264
  }
2181
2265
  }
@@ -2186,10 +2270,10 @@
2186
2270
  }
2187
2271
  }
2188
2272
  }
2189
- .zs\:hover\:text-violet-700 {
2273
+ .zs\:hover\:underline {
2190
2274
  &:hover {
2191
2275
  @media (hover: hover) {
2192
- color: var(--zs-color-violet-700);
2276
+ text-decoration-line: underline;
2193
2277
  }
2194
2278
  }
2195
2279
  }
@@ -2290,14 +2374,6 @@
2290
2374
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2291
2375
  }
2292
2376
  }
2293
- .zs\:active\:scale-125 {
2294
- &:active {
2295
- --tw-scale-x: 125%;
2296
- --tw-scale-y: 125%;
2297
- --tw-scale-z: 125%;
2298
- scale: var(--tw-scale-x) var(--tw-scale-y);
2299
- }
2300
- }
2301
2377
  .zs\:active\:scale-\[0\.97\] {
2302
2378
  &:active {
2303
2379
  scale: 0.97;
@@ -2325,19 +2401,19 @@
2325
2401
  height: calc(var(--zs-spacing) * 10);
2326
2402
  }
2327
2403
  }
2328
- .zs\:sm\:grid-cols-2 {
2404
+ .zs\:sm\:grid-cols-3 {
2329
2405
  @media (width >= 40rem) {
2330
- grid-template-columns: repeat(2, minmax(0, 1fr));
2406
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2331
2407
  }
2332
2408
  }
2333
- .zs\:sm\:gap-6 {
2409
+ .zs\:sm\:px-3 {
2334
2410
  @media (width >= 40rem) {
2335
- gap: calc(var(--zs-spacing) * 6);
2411
+ padding-inline: calc(var(--zs-spacing) * 3);
2336
2412
  }
2337
2413
  }
2338
- .zs\:sm\:px-3 {
2414
+ .zs\:sm\:px-4 {
2339
2415
  @media (width >= 40rem) {
2340
- padding-inline: calc(var(--zs-spacing) * 3);
2416
+ padding-inline: calc(var(--zs-spacing) * 4);
2341
2417
  }
2342
2418
  }
2343
2419
  .zs\:sm\:px-6 {
@@ -2345,15 +2421,14 @@
2345
2421
  padding-inline: calc(var(--zs-spacing) * 6);
2346
2422
  }
2347
2423
  }
2348
- .zs\:sm\:text-xl {
2349
- @media (width >= 40rem) {
2350
- font-size: var(--zs-text-xl);
2351
- line-height: var(--tw-leading, var(--zs-text-xl--line-height));
2424
+ .zs\:md\:grid-cols-4 {
2425
+ @media (width >= 48rem) {
2426
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2352
2427
  }
2353
2428
  }
2354
- .zs\:md\:grid-cols-3 {
2429
+ .zs\:md\:px-8 {
2355
2430
  @media (width >= 48rem) {
2356
- grid-template-columns: repeat(3, minmax(0, 1fr));
2431
+ padding-inline: calc(var(--zs-spacing) * 8);
2357
2432
  }
2358
2433
  }
2359
2434
  .zs\:md\:text-base {
@@ -2377,9 +2452,9 @@
2377
2452
  display: none;
2378
2453
  }
2379
2454
  }
2380
- .zs\:lg\:grid-cols-4 {
2455
+ .zs\:lg\:grid-cols-5 {
2381
2456
  @media (width >= 64rem) {
2382
- grid-template-columns: repeat(4, minmax(0, 1fr));
2457
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2383
2458
  }
2384
2459
  }
2385
2460
  .zs\:lg\:px-8 {
@@ -2387,9 +2462,9 @@
2387
2462
  padding-inline: calc(var(--zs-spacing) * 8);
2388
2463
  }
2389
2464
  }
2390
- .zs\:xl\:grid-cols-5 {
2391
- @media (width >= 80rem) {
2392
- grid-template-columns: repeat(5, minmax(0, 1fr));
2465
+ .zs\:lg\:px-12 {
2466
+ @media (width >= 64rem) {
2467
+ padding-inline: calc(var(--zs-spacing) * 12);
2393
2468
  }
2394
2469
  }
2395
2470
  .zs\:dark\:border-amber-400 {
@@ -2397,6 +2472,11 @@
2397
2472
  border-color: var(--zs-color-amber-400);
2398
2473
  }
2399
2474
  }
2475
+ .zs\:dark\:border-amber-600 {
2476
+ &:where(.dark, .dark *) {
2477
+ border-color: var(--zs-color-amber-600);
2478
+ }
2479
+ }
2400
2480
  .zs\:dark\:border-blue-300 {
2401
2481
  &:where(.dark, .dark *) {
2402
2482
  border-color: var(--zs-color-blue-300);
@@ -2407,6 +2487,11 @@
2407
2487
  border-color: var(--zs-color-blue-400);
2408
2488
  }
2409
2489
  }
2490
+ .zs\:dark\:border-blue-600 {
2491
+ &:where(.dark, .dark *) {
2492
+ border-color: var(--zs-color-blue-600);
2493
+ }
2494
+ }
2410
2495
  .zs\:dark\:border-blue-700 {
2411
2496
  &:where(.dark, .dark *) {
2412
2497
  border-color: var(--zs-color-blue-700);
@@ -2422,6 +2507,11 @@
2422
2507
  border-color: var(--zs-color-cyan-600);
2423
2508
  }
2424
2509
  }
2510
+ .zs\:dark\:border-cyan-700 {
2511
+ &:where(.dark, .dark *) {
2512
+ border-color: var(--zs-color-cyan-700);
2513
+ }
2514
+ }
2425
2515
  .zs\:dark\:border-emerald-400 {
2426
2516
  &:where(.dark, .dark *) {
2427
2517
  border-color: var(--zs-color-emerald-400);
@@ -2467,6 +2557,11 @@
2467
2557
  border-color: var(--zs-color-green-600);
2468
2558
  }
2469
2559
  }
2560
+ .zs\:dark\:border-green-700 {
2561
+ &:where(.dark, .dark *) {
2562
+ border-color: var(--zs-color-green-700);
2563
+ }
2564
+ }
2470
2565
  .zs\:dark\:border-indigo-400 {
2471
2566
  &:where(.dark, .dark *) {
2472
2567
  border-color: var(--zs-color-indigo-400);
@@ -2512,6 +2607,11 @@
2512
2607
  border-color: var(--zs-color-red-600);
2513
2608
  }
2514
2609
  }
2610
+ .zs\:dark\:border-red-700 {
2611
+ &:where(.dark, .dark *) {
2612
+ border-color: var(--zs-color-red-700);
2613
+ }
2614
+ }
2515
2615
  .zs\:dark\:border-rose-400 {
2516
2616
  &:where(.dark, .dark *) {
2517
2617
  border-color: var(--zs-color-rose-400);
@@ -2527,6 +2627,11 @@
2527
2627
  border-color: var(--zs-color-slate-400);
2528
2628
  }
2529
2629
  }
2630
+ .zs\:dark\:border-slate-500 {
2631
+ &:where(.dark, .dark *) {
2632
+ border-color: var(--zs-color-slate-500);
2633
+ }
2634
+ }
2530
2635
  .zs\:dark\:border-slate-600 {
2531
2636
  &:where(.dark, .dark *) {
2532
2637
  border-color: var(--zs-color-slate-600);
@@ -2552,6 +2657,11 @@
2552
2657
  border-color: var(--zs-color-teal-600);
2553
2658
  }
2554
2659
  }
2660
+ .zs\:dark\:border-teal-700 {
2661
+ &:where(.dark, .dark *) {
2662
+ border-color: var(--zs-color-teal-700);
2663
+ }
2664
+ }
2555
2665
  .zs\:dark\:border-violet-400 {
2556
2666
  &:where(.dark, .dark *) {
2557
2667
  border-color: var(--zs-color-violet-400);
@@ -2562,6 +2672,11 @@
2562
2672
  border-color: var(--zs-color-violet-600);
2563
2673
  }
2564
2674
  }
2675
+ .zs\:dark\:border-violet-700 {
2676
+ &:where(.dark, .dark *) {
2677
+ border-color: var(--zs-color-violet-700);
2678
+ }
2679
+ }
2565
2680
  .zs\:dark\:border-yellow-300 {
2566
2681
  &:where(.dark, .dark *) {
2567
2682
  border-color: var(--zs-color-yellow-300);
@@ -2577,6 +2692,11 @@
2577
2692
  border-color: var(--zs-color-yellow-600);
2578
2693
  }
2579
2694
  }
2695
+ .zs\:dark\:border-yellow-700 {
2696
+ &:where(.dark, .dark *) {
2697
+ border-color: var(--zs-color-yellow-700);
2698
+ }
2699
+ }
2580
2700
  .zs\:dark\:border-zinc-400 {
2581
2701
  &:where(.dark, .dark *) {
2582
2702
  border-color: var(--zs-color-zinc-400);
@@ -2706,6 +2826,11 @@
2706
2826
  background-color: var(--zs-color-gray-900);
2707
2827
  }
2708
2828
  }
2829
+ .zs\:dark\:bg-gray-950 {
2830
+ &:where(.dark, .dark *) {
2831
+ background-color: var(--zs-color-gray-950);
2832
+ }
2833
+ }
2709
2834
  .zs\:dark\:bg-green-400 {
2710
2835
  &:where(.dark, .dark *) {
2711
2836
  background-color: var(--zs-color-green-400);
@@ -2836,11 +2961,6 @@
2836
2961
  background-color: var(--zs-color-violet-800);
2837
2962
  }
2838
2963
  }
2839
- .zs\:dark\:bg-violet-900 {
2840
- &:where(.dark, .dark *) {
2841
- background-color: var(--zs-color-violet-900);
2842
- }
2843
- }
2844
2964
  .zs\:dark\:bg-yellow-400 {
2845
2965
  &:where(.dark, .dark *) {
2846
2966
  background-color: var(--zs-color-yellow-400);
@@ -2890,6 +3010,16 @@
2890
3010
  color: var(--zs-color-amber-400);
2891
3011
  }
2892
3012
  }
3013
+ .zs\:dark\:text-amber-500 {
3014
+ &:where(.dark, .dark *) {
3015
+ color: var(--zs-color-amber-500);
3016
+ }
3017
+ }
3018
+ .zs\:dark\:text-amber-600 {
3019
+ &:where(.dark, .dark *) {
3020
+ color: var(--zs-color-amber-600);
3021
+ }
3022
+ }
2893
3023
  .zs\:dark\:text-amber-700 {
2894
3024
  &:where(.dark, .dark *) {
2895
3025
  color: var(--zs-color-amber-700);
@@ -2930,6 +3060,16 @@
2930
3060
  color: var(--zs-color-cyan-400);
2931
3061
  }
2932
3062
  }
3063
+ .zs\:dark\:text-cyan-500 {
3064
+ &:where(.dark, .dark *) {
3065
+ color: var(--zs-color-cyan-500);
3066
+ }
3067
+ }
3068
+ .zs\:dark\:text-cyan-600 {
3069
+ &:where(.dark, .dark *) {
3070
+ color: var(--zs-color-cyan-600);
3071
+ }
3072
+ }
2933
3073
  .zs\:dark\:text-cyan-700 {
2934
3074
  &:where(.dark, .dark *) {
2935
3075
  color: var(--zs-color-cyan-700);
@@ -2993,6 +3133,16 @@
2993
3133
  color: var(--zs-color-green-400);
2994
3134
  }
2995
3135
  }
3136
+ .zs\:dark\:text-green-500 {
3137
+ &:where(.dark, .dark *) {
3138
+ color: var(--zs-color-green-500);
3139
+ }
3140
+ }
3141
+ .zs\:dark\:text-green-600 {
3142
+ &:where(.dark, .dark *) {
3143
+ color: var(--zs-color-green-600);
3144
+ }
3145
+ }
2996
3146
  .zs\:dark\:text-green-700 {
2997
3147
  &:where(.dark, .dark *) {
2998
3148
  color: var(--zs-color-green-700);
@@ -3043,6 +3193,16 @@
3043
3193
  color: var(--zs-color-red-400);
3044
3194
  }
3045
3195
  }
3196
+ .zs\:dark\:text-red-500 {
3197
+ &:where(.dark, .dark *) {
3198
+ color: var(--zs-color-red-500);
3199
+ }
3200
+ }
3201
+ .zs\:dark\:text-red-600 {
3202
+ &:where(.dark, .dark *) {
3203
+ color: var(--zs-color-red-600);
3204
+ }
3205
+ }
3046
3206
  .zs\:dark\:text-red-700 {
3047
3207
  &:where(.dark, .dark *) {
3048
3208
  color: var(--zs-color-red-700);
@@ -3091,6 +3251,11 @@
3091
3251
  color: var(--zs-color-slate-400);
3092
3252
  }
3093
3253
  }
3254
+ .zs\:dark\:text-slate-500 {
3255
+ &:where(.dark, .dark *) {
3256
+ color: var(--zs-color-slate-500);
3257
+ }
3258
+ }
3094
3259
  .zs\:dark\:text-slate-700 {
3095
3260
  &:where(.dark, .dark *) {
3096
3261
  color: var(--zs-color-slate-700);
@@ -3111,14 +3276,19 @@
3111
3276
  color: var(--zs-color-teal-400);
3112
3277
  }
3113
3278
  }
3114
- .zs\:dark\:text-teal-700 {
3279
+ .zs\:dark\:text-teal-500 {
3115
3280
  &:where(.dark, .dark *) {
3116
- color: var(--zs-color-teal-700);
3281
+ color: var(--zs-color-teal-500);
3282
+ }
3283
+ }
3284
+ .zs\:dark\:text-teal-600 {
3285
+ &:where(.dark, .dark *) {
3286
+ color: var(--zs-color-teal-600);
3117
3287
  }
3118
3288
  }
3119
- .zs\:dark\:text-violet-200 {
3289
+ .zs\:dark\:text-teal-700 {
3120
3290
  &:where(.dark, .dark *) {
3121
- color: var(--zs-color-violet-200);
3291
+ color: var(--zs-color-teal-700);
3122
3292
  }
3123
3293
  }
3124
3294
  .zs\:dark\:text-violet-300 {
@@ -3131,6 +3301,16 @@
3131
3301
  color: var(--zs-color-violet-400);
3132
3302
  }
3133
3303
  }
3304
+ .zs\:dark\:text-violet-500 {
3305
+ &:where(.dark, .dark *) {
3306
+ color: var(--zs-color-violet-500);
3307
+ }
3308
+ }
3309
+ .zs\:dark\:text-violet-600 {
3310
+ &:where(.dark, .dark *) {
3311
+ color: var(--zs-color-violet-600);
3312
+ }
3313
+ }
3134
3314
  .zs\:dark\:text-violet-700 {
3135
3315
  &:where(.dark, .dark *) {
3136
3316
  color: var(--zs-color-violet-700);
@@ -3254,6 +3434,15 @@
3254
3434
  }
3255
3435
  }
3256
3436
  }
3437
+ .zs\:dark\:hover\:border-cyan-500 {
3438
+ &:where(.dark, .dark *) {
3439
+ &:hover {
3440
+ @media (hover: hover) {
3441
+ border-color: var(--zs-color-cyan-500);
3442
+ }
3443
+ }
3444
+ }
3445
+ }
3257
3446
  .zs\:dark\:hover\:border-green-400 {
3258
3447
  &:where(.dark, .dark *) {
3259
3448
  &:hover {
@@ -3263,6 +3452,15 @@
3263
3452
  }
3264
3453
  }
3265
3454
  }
3455
+ .zs\:dark\:hover\:border-green-500 {
3456
+ &:where(.dark, .dark *) {
3457
+ &:hover {
3458
+ @media (hover: hover) {
3459
+ border-color: var(--zs-color-green-500);
3460
+ }
3461
+ }
3462
+ }
3463
+ }
3266
3464
  .zs\:dark\:hover\:border-red-400 {
3267
3465
  &:where(.dark, .dark *) {
3268
3466
  &:hover {
@@ -3272,6 +3470,15 @@
3272
3470
  }
3273
3471
  }
3274
3472
  }
3473
+ .zs\:dark\:hover\:border-red-500 {
3474
+ &:where(.dark, .dark *) {
3475
+ &:hover {
3476
+ @media (hover: hover) {
3477
+ border-color: var(--zs-color-red-500);
3478
+ }
3479
+ }
3480
+ }
3481
+ }
3275
3482
  .zs\:dark\:hover\:border-slate-400 {
3276
3483
  &:where(.dark, .dark *) {
3277
3484
  &:hover {
@@ -3299,6 +3506,15 @@
3299
3506
  }
3300
3507
  }
3301
3508
  }
3509
+ .zs\:dark\:hover\:border-teal-500 {
3510
+ &:where(.dark, .dark *) {
3511
+ &:hover {
3512
+ @media (hover: hover) {
3513
+ border-color: var(--zs-color-teal-500);
3514
+ }
3515
+ }
3516
+ }
3517
+ }
3302
3518
  .zs\:dark\:hover\:border-violet-400 {
3303
3519
  &:where(.dark, .dark *) {
3304
3520
  &:hover {
@@ -3308,6 +3524,15 @@
3308
3524
  }
3309
3525
  }
3310
3526
  }
3527
+ .zs\:dark\:hover\:border-violet-500 {
3528
+ &:where(.dark, .dark *) {
3529
+ &:hover {
3530
+ @media (hover: hover) {
3531
+ border-color: var(--zs-color-violet-500);
3532
+ }
3533
+ }
3534
+ }
3535
+ }
3311
3536
  .zs\:dark\:hover\:border-yellow-400 {
3312
3537
  &:where(.dark, .dark *) {
3313
3538
  &:hover {
@@ -3317,6 +3542,15 @@
3317
3542
  }
3318
3543
  }
3319
3544
  }
3545
+ .zs\:dark\:hover\:border-yellow-500 {
3546
+ &:where(.dark, .dark *) {
3547
+ &:hover {
3548
+ @media (hover: hover) {
3549
+ border-color: var(--zs-color-yellow-500);
3550
+ }
3551
+ }
3552
+ }
3553
+ }
3320
3554
  .zs\:dark\:hover\:bg-blue-700 {
3321
3555
  &:where(.dark, .dark *) {
3322
3556
  &:hover {
@@ -3377,11 +3611,32 @@
3377
3611
  }
3378
3612
  }
3379
3613
  }
3380
- .zs\:dark\:hover\:text-amber-400 {
3614
+ .zs\:dark\:hover\:bg-slate-600 {
3381
3615
  &:where(.dark, .dark *) {
3382
3616
  &:hover {
3383
3617
  @media (hover: hover) {
3384
- color: var(--zs-color-amber-400);
3618
+ background-color: var(--zs-color-slate-600);
3619
+ }
3620
+ }
3621
+ }
3622
+ }
3623
+ .zs\:dark\:hover\:bg-slate-700\/70 {
3624
+ &:where(.dark, .dark *) {
3625
+ &:hover {
3626
+ @media (hover: hover) {
3627
+ background-color: var(--zs-color-slate-700);
3628
+ @supports (color: color-mix(in lab, red, red)) {
3629
+ background-color: color-mix(in oklab, var(--zs-color-slate-700) 70%, transparent);
3630
+ }
3631
+ }
3632
+ }
3633
+ }
3634
+ }
3635
+ .zs\:dark\:hover\:text-amber-300 {
3636
+ &:where(.dark, .dark *) {
3637
+ &:hover {
3638
+ @media (hover: hover) {
3639
+ color: var(--zs-color-amber-300);
3385
3640
  }
3386
3641
  }
3387
3642
  }
@@ -3395,11 +3650,11 @@
3395
3650
  }
3396
3651
  }
3397
3652
  }
3398
- .zs\:dark\:hover\:text-cyan-400 {
3653
+ .zs\:dark\:hover\:text-cyan-300 {
3399
3654
  &:where(.dark, .dark *) {
3400
3655
  &:hover {
3401
3656
  @media (hover: hover) {
3402
- color: var(--zs-color-cyan-400);
3657
+ color: var(--zs-color-cyan-300);
3403
3658
  }
3404
3659
  }
3405
3660
  }
@@ -3422,11 +3677,11 @@
3422
3677
  }
3423
3678
  }
3424
3679
  }
3425
- .zs\:dark\:hover\:text-green-400 {
3680
+ .zs\:dark\:hover\:text-green-300 {
3426
3681
  &:where(.dark, .dark *) {
3427
3682
  &:hover {
3428
3683
  @media (hover: hover) {
3429
- color: var(--zs-color-green-400);
3684
+ color: var(--zs-color-green-300);
3430
3685
  }
3431
3686
  }
3432
3687
  }
@@ -3440,11 +3695,11 @@
3440
3695
  }
3441
3696
  }
3442
3697
  }
3443
- .zs\:dark\:hover\:text-red-400 {
3698
+ .zs\:dark\:hover\:text-red-300 {
3444
3699
  &:where(.dark, .dark *) {
3445
3700
  &:hover {
3446
3701
  @media (hover: hover) {
3447
- color: var(--zs-color-red-400);
3702
+ color: var(--zs-color-red-300);
3448
3703
  }
3449
3704
  }
3450
3705
  }
@@ -3467,29 +3722,38 @@
3467
3722
  }
3468
3723
  }
3469
3724
  }
3470
- .zs\:dark\:hover\:text-slate-400 {
3725
+ .zs\:dark\:hover\:text-slate-300 {
3726
+ &:where(.dark, .dark *) {
3727
+ &:hover {
3728
+ @media (hover: hover) {
3729
+ color: var(--zs-color-slate-300);
3730
+ }
3731
+ }
3732
+ }
3733
+ }
3734
+ .zs\:dark\:hover\:text-slate-700 {
3471
3735
  &:where(.dark, .dark *) {
3472
3736
  &:hover {
3473
3737
  @media (hover: hover) {
3474
- color: var(--zs-color-slate-400);
3738
+ color: var(--zs-color-slate-700);
3475
3739
  }
3476
3740
  }
3477
3741
  }
3478
3742
  }
3479
- .zs\:dark\:hover\:text-teal-400 {
3743
+ .zs\:dark\:hover\:text-teal-300 {
3480
3744
  &:where(.dark, .dark *) {
3481
3745
  &:hover {
3482
3746
  @media (hover: hover) {
3483
- color: var(--zs-color-teal-400);
3747
+ color: var(--zs-color-teal-300);
3484
3748
  }
3485
3749
  }
3486
3750
  }
3487
3751
  }
3488
- .zs\:dark\:hover\:text-violet-400 {
3752
+ .zs\:dark\:hover\:text-violet-300 {
3489
3753
  &:where(.dark, .dark *) {
3490
3754
  &:hover {
3491
3755
  @media (hover: hover) {
3492
- color: var(--zs-color-violet-400);
3756
+ color: var(--zs-color-violet-300);
3493
3757
  }
3494
3758
  }
3495
3759
  }