@revotech-group/revotech-ui-kit 0.0.96 → 0.0.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/library.css CHANGED
@@ -513,75 +513,6 @@ video {
513
513
  display: none;
514
514
  }
515
515
 
516
- :root {
517
- --background: 0 0% 100%;
518
- --foreground: 240 10% 3.9%;
519
- --card: 0 0% 100%;
520
- --card-foreground: 240 10% 3.9%;
521
- --popover: 0 0% 100%;
522
- --popover-foreground: 240 10% 3.9%;
523
- --primary: 240 5.9% 10%;
524
- --primary-foreground: 0 0% 98%;
525
- --secondary: 240 4.8% 95.9%;
526
- --secondary-foreground: 240 5.9% 10%;
527
- --muted: 240 4.8% 95.9%;
528
- --muted-foreground: 240 4% 46%;
529
- --accent: 240 5% 96%;
530
- --accent-foreground: 240 5.9% 10%;
531
- --destructive: 0 84.2% 60.2%;
532
- --destructive-foreground: 0 0% 98%;
533
- --border: 240 5.9% 90%;
534
- --input: 240 5.9% 90%;
535
- --ring: 240 5.9% 10%;
536
- --radius: 0.5rem;
537
- --green-100: #d4f8e8;
538
- --green-200: #bbf7d0;
539
- --green-800: #166534;
540
- --red-100: #fddddd;
541
- --red-200: #fecaca;
542
- --red-800: #991b1b;
543
- --yellow-100: #fef4d9;
544
- --yellow-200: #fef08a;
545
- --yellow-800: #854d0e;
546
- --blue-100: #dbeafe;
547
- --blue-200: #bfdbfe;
548
- --blue-800: #1e40af;
549
- }
550
-
551
- .dark {
552
- --background: 240 10% 4%;
553
- --foreground: 0 0% 98%;
554
- --card: 240 10% 3.9%;
555
- --card-foreground: 0 0% 98%;
556
- --popover: 240 10% 3.9%;
557
- --popover-foreground: 0 0% 98%;
558
- --primary: 0 0% 98%;
559
- --primary-foreground: 240 5.9% 10%;
560
- --secondary: 240 3.7% 15.9%;
561
- --secondary-foreground: 0 0% 98%;
562
- --muted: 240 3.7% 15.9%;
563
- --muted-foreground: 240 5% 65%;
564
- --accent: 240 4% 16%;
565
- --accent-foreground: 0 0% 98%;
566
- --destructive: 0 62.8% 30.6%;
567
- --destructive-foreground: 0 0% 98%;
568
- --border: 240 3.7% 15.9%;
569
- --input: 240 3.7% 15.9%;
570
- --ring: 240 4.9% 83.9%;
571
- --green-100: #d4f8e8;
572
- --green-200: #bbf7d0;
573
- --green-800: #166534;
574
- --red-100: #fddddd;
575
- --red-200: #fecaca;
576
- --red-800: #991b1b;
577
- --yellow-100: #fef4d9;
578
- --yellow-200: #fef08a;
579
- --yellow-800: #854d0e;
580
- --blue-100: #dbeafe;
581
- --blue-200: #bfdbfe;
582
- --blue-800: #1e40af;
583
- }
584
-
585
516
  * {
586
517
  border-color: hsl(var(--border));
587
518
  }
@@ -1022,6 +953,10 @@ body {
1022
953
  --tw-translate-x: 0px;
1023
954
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1024
955
  }
956
+ .rtg-translate-x-4 {
957
+ --tw-translate-x: 1rem;
958
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
959
+ }
1025
960
  .rtg-translate-x-\[-50\%\] {
1026
961
  --tw-translate-x: -50%;
1027
962
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1262,21 +1197,22 @@ body {
1262
1197
  border-style: none;
1263
1198
  }
1264
1199
  .rtg-border-blue-200 {
1265
- border-color: var(--blue-200);
1200
+ --tw-border-opacity: 1;
1201
+ border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
1202
+ }
1203
+ .rtg-border-border {
1204
+ border-color: hsl(var(--border));
1266
1205
  }
1267
1206
  .rtg-border-destructive {
1268
1207
  border-color: hsl(var(--destructive));
1269
1208
  }
1270
- .rtg-border-gray-200 {
1271
- --tw-border-opacity: 1;
1272
- border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
1273
- }
1274
1209
  .rtg-border-gray-300 {
1275
1210
  --tw-border-opacity: 1;
1276
1211
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
1277
1212
  }
1278
1213
  .rtg-border-green-200 {
1279
- border-color: var(--green-200);
1214
+ --tw-border-opacity: 1;
1215
+ border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
1280
1216
  }
1281
1217
  .rtg-border-input {
1282
1218
  border-color: hsl(var(--input));
@@ -1285,17 +1221,21 @@ body {
1285
1221
  border-color: hsl(var(--primary));
1286
1222
  }
1287
1223
  .rtg-border-red-200 {
1288
- border-color: var(--red-200);
1224
+ --tw-border-opacity: 1;
1225
+ border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
1289
1226
  }
1290
1227
  .rtg-border-transparent {
1291
1228
  border-color: transparent;
1292
1229
  }
1293
1230
  .rtg-border-yellow-200 {
1294
- border-color: var(--yellow-200);
1231
+ --tw-border-opacity: 1;
1232
+ border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
1233
+ }
1234
+ .rtg-bg-accent {
1235
+ background-color: hsl(var(--accent));
1295
1236
  }
1296
- .\!rtg-bg-white {
1297
- --tw-bg-opacity: 1 !important;
1298
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
1237
+ .rtg-bg-accent-foreground {
1238
+ background-color: hsl(var(--accent-foreground));
1299
1239
  }
1300
1240
  .rtg-bg-background {
1301
1241
  background-color: hsl(var(--background));
@@ -1304,7 +1244,8 @@ body {
1304
1244
  background-color: rgb(0 0 0 / 0.8);
1305
1245
  }
1306
1246
  .rtg-bg-blue-100 {
1307
- background-color: var(--blue-100);
1247
+ --tw-bg-opacity: 1;
1248
+ background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
1308
1249
  }
1309
1250
  .rtg-bg-border {
1310
1251
  background-color: hsl(var(--border));
@@ -1315,16 +1256,16 @@ body {
1315
1256
  .rtg-bg-destructive {
1316
1257
  background-color: hsl(var(--destructive));
1317
1258
  }
1318
- .rtg-bg-gray-100 {
1319
- --tw-bg-opacity: 1;
1320
- background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
1321
- }
1322
1259
  .rtg-bg-gray-200 {
1323
1260
  --tw-bg-opacity: 1;
1324
1261
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
1325
1262
  }
1326
1263
  .rtg-bg-green-100 {
1327
- background-color: var(--green-100);
1264
+ --tw-bg-opacity: 1;
1265
+ background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
1266
+ }
1267
+ .rtg-bg-input {
1268
+ background-color: hsl(var(--input));
1328
1269
  }
1329
1270
  .rtg-bg-muted {
1330
1271
  background-color: hsl(var(--muted));
@@ -1339,7 +1280,8 @@ body {
1339
1280
  background-color: hsl(var(--primary));
1340
1281
  }
1341
1282
  .rtg-bg-red-100 {
1342
- background-color: var(--red-100);
1283
+ --tw-bg-opacity: 1;
1284
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
1343
1285
  }
1344
1286
  .rtg-bg-secondary {
1345
1287
  background-color: hsl(var(--secondary));
@@ -1347,12 +1289,9 @@ body {
1347
1289
  .rtg-bg-transparent {
1348
1290
  background-color: transparent;
1349
1291
  }
1350
- .rtg-bg-white {
1351
- --tw-bg-opacity: 1;
1352
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
1353
- }
1354
1292
  .rtg-bg-yellow-100 {
1355
- background-color: var(--yellow-100);
1293
+ --tw-bg-opacity: 1;
1294
+ background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
1356
1295
  }
1357
1296
  .rtg-fill-current {
1358
1297
  fill: currentColor;
@@ -1552,12 +1491,9 @@ body {
1552
1491
  --tw-text-opacity: 1;
1553
1492
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
1554
1493
  }
1555
- .rtg-text-blue-600 {
1556
- --tw-text-opacity: 1;
1557
- color: rgb(37 99 235 / var(--tw-text-opacity, 1));
1558
- }
1559
1494
  .rtg-text-blue-800 {
1560
- color: var(--blue-800);
1495
+ --tw-text-opacity: 1;
1496
+ color: rgb(30 64 175 / var(--tw-text-opacity, 1));
1561
1497
  }
1562
1498
  .rtg-text-card-foreground {
1563
1499
  color: hsl(var(--card-foreground));
@@ -1582,7 +1518,8 @@ body {
1582
1518
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
1583
1519
  }
1584
1520
  .rtg-text-green-800 {
1585
- color: var(--green-800);
1521
+ --tw-text-opacity: 1;
1522
+ color: rgb(22 101 52 / var(--tw-text-opacity, 1));
1586
1523
  }
1587
1524
  .rtg-text-muted-foreground {
1588
1525
  color: hsl(var(--muted-foreground));
@@ -1601,7 +1538,8 @@ body {
1601
1538
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
1602
1539
  }
1603
1540
  .rtg-text-red-800 {
1604
- color: var(--red-800);
1541
+ --tw-text-opacity: 1;
1542
+ color: rgb(153 27 27 / var(--tw-text-opacity, 1));
1605
1543
  }
1606
1544
  .rtg-text-secondary-foreground {
1607
1545
  color: hsl(var(--secondary-foreground));
@@ -1611,7 +1549,8 @@ body {
1611
1549
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1612
1550
  }
1613
1551
  .rtg-text-yellow-800 {
1614
- color: var(--yellow-800);
1552
+ --tw-text-opacity: 1;
1553
+ color: rgb(133 77 14 / var(--tw-text-opacity, 1));
1615
1554
  }
1616
1555
  .rtg-no-underline {
1617
1556
  text-decoration-line: none;
@@ -1744,6 +1683,78 @@ body {
1744
1683
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
1745
1684
  }
1746
1685
 
1686
+ [data-theme='light'] {
1687
+ --accent: 0 0% 96%;
1688
+ --accent-foreground: 0 0% 9%;
1689
+ --background: 0 0% 100%;
1690
+ --border: 0 0% 90%;
1691
+ --card: 0 0% 100%;
1692
+ --card-foreground: 0 0% 4%;
1693
+ --destructive: 0 73% 51%;
1694
+ --destructive-foreground: 0 85% 97%;
1695
+ --foreground: 0 0% 4%;
1696
+ --input: 0 0% 90%;
1697
+ --muted: 0 0% 96%;
1698
+ --muted-foreground: 0 0% 45%;
1699
+ --popover: 0 0% 100%;
1700
+ --popover-foreground: 0 0% 4%;
1701
+ --primary: 0 0% 9%;
1702
+ --primary-foreground: 0 0% 98%;
1703
+ --ring: 0 0% 64%;
1704
+ --secondary: 0 0% 96%;
1705
+ --secondary-foreground: 0 0% 9%;
1706
+ --chart-1: 24 91% 48%;
1707
+ --chart-2: 173 82% 31%;
1708
+ --chart-3: 192 62% 24%;
1709
+ --chart-4: 45 97% 60%;
1710
+ --chart-5: 39 94% 53%;
1711
+ --sidebar-background: 0 0% 98%;
1712
+ --sidebar-foreground: 0 0% 4%;
1713
+ --sidebar-primary: 0 0% 9%;
1714
+ --sidebar-primary-foreground: 0 0% 98%;
1715
+ --sidebar-accent: 0 0% 96%;
1716
+ --sidebar-accent-foreground: 0 0% 9%;
1717
+ --sidebar-border: 0 0% 90%;
1718
+ --sidebar-ring: 0 0% 64%;
1719
+ --radius: 0.5rem;
1720
+ }
1721
+
1722
+ [data-theme='dark'] {
1723
+ --accent: 0 0% 25%;
1724
+ --accent-foreground: 0 0% 98%;
1725
+ --background: 0 0% 4%;
1726
+ --border: 0 0% 100% / 10%;
1727
+ --card: 0 0% 9%;
1728
+ --card-foreground: 0 0% 98%;
1729
+ --destructive: 0 91% 71%;
1730
+ --destructive-foreground: 0 85% 97%;
1731
+ --foreground: 0 0% 98%;
1732
+ --input: 0 0% 100% / 15%;
1733
+ --muted: 0 0% 15%;
1734
+ --muted-foreground: 0 0% 64%;
1735
+ --popover: 0 0% 15%;
1736
+ --popover-foreground: 0 0% 98%;
1737
+ --primary: 0 0% 90%;
1738
+ --primary-foreground: 0 0% 9%;
1739
+ --ring: 0 0% 45%;
1740
+ --secondary: 0 0% 15%;
1741
+ --secondary-foreground: 0 0% 98%;
1742
+ --chart-1: 226 72% 47%;
1743
+ --chart-2: 160 82% 41%;
1744
+ --chart-3: 39 94% 53%;
1745
+ --chart-4: 270 91% 66%;
1746
+ --chart-5: 351 93% 64%;
1747
+ --sidebar-background: 0 0% 9%;
1748
+ --sidebar-foreground: 0 0% 98%;
1749
+ --sidebar-primary: 226 72% 47%;
1750
+ --sidebar-primary-foreground: 0 0% 98%;
1751
+ --sidebar-accent: 0 0% 15%;
1752
+ --sidebar-accent-foreground: 0 0% 98%;
1753
+ --sidebar-border: 0 0% 100% / 10%;
1754
+ --sidebar-ring: 0 0% 32%;
1755
+ --radius: 0.5rem;
1756
+ }
1757
+
1747
1758
  .rtg-no-autofill-bg:-webkit-autofill,
1748
1759
  .rtg-no-autofill-bg:-webkit-autofill:hover,
1749
1760
  .rtg-no-autofill-bg:-webkit-autofill:focus,
@@ -1846,9 +1857,8 @@ body {
1846
1857
  --tw-ring-color: hsl(var(--ring));
1847
1858
  }
1848
1859
 
1849
- .hover\:\!rtg-bg-slate-100:hover {
1850
- --tw-bg-opacity: 1 !important;
1851
- background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)) !important;
1860
+ .hover\:\!rtg-bg-accent:hover {
1861
+ background-color: hsl(var(--accent)) !important;
1852
1862
  }
1853
1863
 
1854
1864
  .hover\:rtg-bg-accent:hover {
@@ -1863,11 +1873,6 @@ body {
1863
1873
  background-color: hsl(var(--destructive) / 0.9);
1864
1874
  }
1865
1875
 
1866
- .hover\:rtg-bg-gray-100:hover {
1867
- --tw-bg-opacity: 1;
1868
- background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
1869
- }
1870
-
1871
1876
  .hover\:rtg-bg-muted:hover {
1872
1877
  background-color: hsl(var(--muted));
1873
1878
  }
@@ -1892,11 +1897,6 @@ body {
1892
1897
  background-color: hsl(var(--secondary) / 0.8);
1893
1898
  }
1894
1899
 
1895
- .hover\:rtg-bg-slate-100:hover {
1896
- --tw-bg-opacity: 1;
1897
- background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
1898
- }
1899
-
1900
1900
  .hover\:rtg-text-accent-foreground:hover {
1901
1901
  color: hsl(var(--accent-foreground));
1902
1902
  }
@@ -1929,24 +1929,22 @@ body {
1929
1929
  border-width: 3px;
1930
1930
  }
1931
1931
 
1932
- .focus\:rtg-border-\[\#c1c1c1\]:focus {
1933
- --tw-border-opacity: 1;
1934
- border-color: rgb(193 193 193 / var(--tw-border-opacity, 1));
1932
+ .focus\:rtg-border-input:focus {
1933
+ border-color: hsl(var(--input));
1935
1934
  }
1936
1935
 
1937
1936
  .focus\:rtg-bg-accent:focus {
1938
1937
  background-color: hsl(var(--accent));
1939
1938
  }
1940
1939
 
1941
- .focus\:rtg-bg-gray-100:focus {
1942
- --tw-bg-opacity: 1;
1943
- background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
1944
- }
1945
-
1946
1940
  .focus\:rtg-bg-primary:focus {
1947
1941
  background-color: hsl(var(--primary));
1948
1942
  }
1949
1943
 
1944
+ .focus\:rtg-bg-secondary:focus {
1945
+ background-color: hsl(var(--secondary));
1946
+ }
1947
+
1950
1948
  .focus\:rtg-text-accent-foreground:focus {
1951
1949
  color: hsl(var(--accent-foreground));
1952
1950
  }
@@ -2021,6 +2019,12 @@ body {
2021
2019
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2022
2020
  }
2023
2021
 
2022
+ .focus-visible\:rtg-ring-\[2px\]:focus-visible {
2023
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2024
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2025
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2026
+ }
2027
+
2024
2028
  .focus-visible\:rtg-ring-\[3px\]:focus-visible {
2025
2029
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2026
2030
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2338,40 +2342,10 @@ body {
2338
2342
  --tw-enter-translate-y: -100%;
2339
2343
  }
2340
2344
 
2341
- .dark\:rtg-border-neutral-700:is(.rtg-dark *) {
2342
- --tw-border-opacity: 1;
2343
- border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
2344
- }
2345
-
2346
- .dark\:rtg-bg-neutral-900:is(.rtg-dark *) {
2347
- --tw-bg-opacity: 1;
2348
- background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
2349
- }
2350
-
2351
- .dark\:rtg-text-blue-500:is(.rtg-dark *) {
2352
- --tw-text-opacity: 1;
2353
- color: rgb(59 130 246 / var(--tw-text-opacity, 1));
2354
- }
2355
-
2356
- .dark\:rtg-text-neutral-200:is(.rtg-dark *) {
2357
- --tw-text-opacity: 1;
2358
- color: rgb(229 229 229 / var(--tw-text-opacity, 1));
2359
- }
2360
-
2361
2345
  .dark\:hover\:rtg-bg-accent\/50:hover:is(.rtg-dark *) {
2362
2346
  background-color: hsl(var(--accent) / 0.5);
2363
2347
  }
2364
2348
 
2365
- .dark\:hover\:rtg-bg-neutral-800:hover:is(.rtg-dark *) {
2366
- --tw-bg-opacity: 1;
2367
- background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
2368
- }
2369
-
2370
- .dark\:focus\:rtg-bg-neutral-800:focus:is(.rtg-dark *) {
2371
- --tw-bg-opacity: 1;
2372
- background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
2373
- }
2374
-
2375
2349
  @media (min-width: 640px) {
2376
2350
 
2377
2351
  .sm\:rtg-bottom-0 {
@@ -2493,14 +2467,12 @@ body {
2493
2467
  border-radius: 9999px;
2494
2468
  }
2495
2469
 
2496
- .\[\&\:\:-webkit-scrollbar-thumb\]\:rtg-bg-gray-300::-webkit-scrollbar-thumb {
2497
- --tw-bg-opacity: 1;
2498
- background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
2470
+ .\[\&\:\:-webkit-scrollbar-thumb\]\:rtg-bg-accent::-webkit-scrollbar-thumb {
2471
+ background-color: hsl(var(--accent));
2499
2472
  }
2500
2473
 
2501
- .dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:rtg-bg-neutral-500:is(.rtg-dark *)::-webkit-scrollbar-thumb {
2502
- --tw-bg-opacity: 1;
2503
- background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
2474
+ .\[\&\:\:-webkit-scrollbar-track\]\:rtg-bg-background::-webkit-scrollbar-track {
2475
+ background-color: hsl(var(--background));
2504
2476
  }
2505
2477
 
2506
2478
  .\[\&\:\:-webkit-scrollbar-track\]\:rtg-bg-gray-100::-webkit-scrollbar-track {
@@ -2508,11 +2480,6 @@ body {
2508
2480
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
2509
2481
  }
2510
2482
 
2511
- .dark\:\[\&\:\:-webkit-scrollbar-track\]\:rtg-bg-neutral-700:is(.rtg-dark *)::-webkit-scrollbar-track {
2512
- --tw-bg-opacity: 1;
2513
- background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
2514
- }
2515
-
2516
2483
  .\[\&\:\:-webkit-scrollbar\]\:rtg-w-2::-webkit-scrollbar {
2517
2484
  width: 0.5rem;
2518
2485
  }