@redsift/design-system 10.3.0-alpha.1 → 10.3.0-alpha.10

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 (8) hide show
  1. package/CONTRIBUTING.md +4 -4
  2. package/index.d.ts +231 -37
  3. package/index.js +1355 -888
  4. package/index.js.map +1 -1
  5. package/package.json +3 -3
  6. package/style/index.css +109 -12
  7. package/style/redsift-design-tokens.css +109 -12
  8. package/style/redsift.css +109 -12
package/style/redsift.css CHANGED
@@ -596,7 +596,7 @@
596
596
  }
597
597
  /**
598
598
  * Do not edit directly
599
- * Generated on Sat, 06 Jul 2024 21:54:16 GMT
599
+ * Generated on Tue, 16 Jul 2024 19:17:14 GMT
600
600
  */
601
601
 
602
602
  :root {
@@ -699,6 +699,14 @@
699
699
  --redsift-color-dark-components-buttons-primary-button-grey-text-hover: #ffffff;
700
700
  --redsift-color-dark-components-buttons-primary-button-grey-text-active: #ffffff;
701
701
  --redsift-color-dark-components-buttons-primary-button-grey-text-disabled: #858585;
702
+ --redsift-color-dark-components-buttons-primary-button-radar-background-default: linear-gradient(90deg, rgba(81, 183, 164, 1), rgba(0, 129, 195, 1));
703
+ --redsift-color-dark-components-buttons-primary-button-radar-background-hover: linear-gradient(90deg, rgba(65, 146, 131, 1), rgba(3, 114, 171, 1));
704
+ --redsift-color-dark-components-buttons-primary-button-radar-background-active: linear-gradient(90deg, rgba(58, 122, 110, 1), rgba(0, 96, 145, 1));
705
+ --redsift-color-dark-components-buttons-primary-button-radar-background-disabled: #474747;
706
+ --redsift-color-dark-components-buttons-primary-button-radar-text-default: #ffffff;
707
+ --redsift-color-dark-components-buttons-primary-button-radar-text-hover: #ffffff;
708
+ --redsift-color-dark-components-buttons-primary-button-radar-text-active: #ffffff;
709
+ --redsift-color-dark-components-buttons-primary-button-radar-text-disabled: #858585;
702
710
  --redsift-color-dark-components-buttons-secondary-button-primary-background-default: transparent;
703
711
  --redsift-color-dark-components-buttons-secondary-button-primary-background-hover: #142849;
704
712
  --redsift-color-dark-components-buttons-secondary-button-primary-background-active: #0d1b31;
@@ -748,13 +756,37 @@
748
756
  --redsift-color-dark-components-buttons-secondary-button-info-text-active: #8eb6f8;
749
757
  --redsift-color-dark-components-buttons-secondary-button-info-text-disabled: #858585;
750
758
  --redsift-color-dark-components-buttons-secondary-button-grey-background-default: transparent;
751
- --redsift-color-dark-components-buttons-secondary-button-grey-background-hover: #474747;
759
+ --redsift-color-dark-components-buttons-secondary-button-grey-background-hover: #525252;
752
760
  --redsift-color-dark-components-buttons-secondary-button-grey-background-active: #333333;
753
761
  --redsift-color-dark-components-buttons-secondary-button-grey-background-disabled: #333333;
754
762
  --redsift-color-dark-components-buttons-secondary-button-grey-text-default: #666666;
755
763
  --redsift-color-dark-components-buttons-secondary-button-grey-text-hover: #858585;
756
764
  --redsift-color-dark-components-buttons-secondary-button-grey-text-active: #a3a3a3;
757
765
  --redsift-color-dark-components-buttons-secondary-button-grey-text-disabled: #858585;
766
+ --redsift-color-dark-components-buttons-secondary-button-black-background-default: transparent;
767
+ --redsift-color-dark-components-buttons-secondary-button-black-background-hover: #525252;
768
+ --redsift-color-dark-components-buttons-secondary-button-black-background-active: #333333;
769
+ --redsift-color-dark-components-buttons-secondary-button-black-background-disabled: transparent;
770
+ --redsift-color-dark-components-buttons-secondary-button-black-text-default: #333333;
771
+ --redsift-color-dark-components-buttons-secondary-button-black-text-hover: #333333;
772
+ --redsift-color-dark-components-buttons-secondary-button-black-text-active: #333333;
773
+ --redsift-color-dark-components-buttons-secondary-button-black-text-disabled: #a3a3a3;
774
+ --redsift-color-dark-components-buttons-secondary-button-white-background-default: transparent;
775
+ --redsift-color-dark-components-buttons-secondary-button-white-background-hover: #525252;
776
+ --redsift-color-dark-components-buttons-secondary-button-white-background-active: #333333;
777
+ --redsift-color-dark-components-buttons-secondary-button-white-background-disabled: transparent;
778
+ --redsift-color-dark-components-buttons-secondary-button-white-text-default: #ffffff;
779
+ --redsift-color-dark-components-buttons-secondary-button-white-text-hover: #ffffff;
780
+ --redsift-color-dark-components-buttons-secondary-button-white-text-active: #ffffff;
781
+ --redsift-color-dark-components-buttons-secondary-button-white-text-disabled: #a3a3a3;
782
+ --redsift-color-dark-components-buttons-secondary-button-radar-background-default: transparent;
783
+ --redsift-color-dark-components-buttons-secondary-button-radar-background-hover: linear-gradient(90deg, rgba(81, 183, 142, 0.2), rgba(0, 129, 195, 0.2));
784
+ --redsift-color-dark-components-buttons-secondary-button-radar-background-active: linear-gradient(90deg, rgba(81, 183, 142, 0.4), rgba(0, 129, 195, 0.4));
785
+ --redsift-color-dark-components-buttons-secondary-button-radar-background-disabled: #333333;
786
+ --redsift-color-dark-components-buttons-secondary-button-radar-text-default: linear-gradient(90deg, rgba(81, 183, 164, 1), rgba(0, 129, 195, 1));
787
+ --redsift-color-dark-components-buttons-secondary-button-radar-text-hover: linear-gradient(90deg, rgba(65, 146, 131, 1), rgba(3, 114, 171, 1));
788
+ --redsift-color-dark-components-buttons-secondary-button-radar-text-active: linear-gradient(90deg, rgba(58, 122, 110, 1), rgba(0, 96, 145, 1));
789
+ --redsift-color-dark-components-buttons-secondary-button-radar-text-disabled: #858585;
758
790
  --redsift-color-dark-components-buttons-unstyled-button-primary-background-default: transparent;
759
791
  --redsift-color-dark-components-buttons-unstyled-button-primary-background-hover: #142849;
760
792
  --redsift-color-dark-components-buttons-unstyled-button-primary-background-active: #0d1b31;
@@ -804,13 +836,37 @@
804
836
  --redsift-color-dark-components-buttons-unstyled-button-info-text-active: #8eb6f8;
805
837
  --redsift-color-dark-components-buttons-unstyled-button-info-text-disabled: #858585;
806
838
  --redsift-color-dark-components-buttons-unstyled-button-grey-background-default: transparent;
807
- --redsift-color-dark-components-buttons-unstyled-button-grey-background-hover: #474747;
839
+ --redsift-color-dark-components-buttons-unstyled-button-grey-background-hover: #525252;
808
840
  --redsift-color-dark-components-buttons-unstyled-button-grey-background-active: #333333;
809
841
  --redsift-color-dark-components-buttons-unstyled-button-grey-background-disabled: #333333;
810
842
  --redsift-color-dark-components-buttons-unstyled-button-grey-text-default: #666666;
811
843
  --redsift-color-dark-components-buttons-unstyled-button-grey-text-hover: #858585;
812
844
  --redsift-color-dark-components-buttons-unstyled-button-grey-text-active: #a3a3a3;
813
845
  --redsift-color-dark-components-buttons-unstyled-button-grey-text-disabled: #858585;
846
+ --redsift-color-dark-components-buttons-unstyled-button-black-background-default: transparent;
847
+ --redsift-color-dark-components-buttons-unstyled-button-black-background-hover: #525252;
848
+ --redsift-color-dark-components-buttons-unstyled-button-black-background-active: #333333;
849
+ --redsift-color-dark-components-buttons-unstyled-button-black-background-disabled: transparent;
850
+ --redsift-color-dark-components-buttons-unstyled-button-black-text-default: #333333;
851
+ --redsift-color-dark-components-buttons-unstyled-button-black-text-hover: #333333;
852
+ --redsift-color-dark-components-buttons-unstyled-button-black-text-active: #333333;
853
+ --redsift-color-dark-components-buttons-unstyled-button-black-text-disabled: #a3a3a3;
854
+ --redsift-color-dark-components-buttons-unstyled-button-white-background-default: transparent;
855
+ --redsift-color-dark-components-buttons-unstyled-button-white-background-hover: #525252;
856
+ --redsift-color-dark-components-buttons-unstyled-button-white-background-active: #333333;
857
+ --redsift-color-dark-components-buttons-unstyled-button-white-background-disabled: transparent;
858
+ --redsift-color-dark-components-buttons-unstyled-button-white-text-default: #ffffff;
859
+ --redsift-color-dark-components-buttons-unstyled-button-white-text-hover: #ffffff;
860
+ --redsift-color-dark-components-buttons-unstyled-button-white-text-active: #ffffff;
861
+ --redsift-color-dark-components-buttons-unstyled-button-white-text-disabled: #a3a3a3;
862
+ --redsift-color-dark-components-buttons-unstyled-button-radar-background-default: transparent;
863
+ --redsift-color-dark-components-buttons-unstyled-button-radar-background-hover: linear-gradient(90deg, rgba(81, 183, 142, 0.2), rgba(0, 129, 195, 0.2));
864
+ --redsift-color-dark-components-buttons-unstyled-button-radar-background-active: linear-gradient(90deg, rgba(81, 183, 142, 0.4), rgba(0, 129, 195, 0.4));
865
+ --redsift-color-dark-components-buttons-unstyled-button-radar-background-disabled: #333333;
866
+ --redsift-color-dark-components-buttons-unstyled-button-radar-text-default: linear-gradient(90deg, rgba(81, 183, 164, 1), rgba(0, 129, 195, 1));
867
+ --redsift-color-dark-components-buttons-unstyled-button-radar-text-hover: linear-gradient(90deg, rgba(65, 146, 131, 1), rgba(3, 114, 171, 1));
868
+ --redsift-color-dark-components-buttons-unstyled-button-radar-text-active: linear-gradient(90deg, rgba(58, 122, 110, 1), rgba(0, 96, 145, 1));
869
+ --redsift-color-dark-components-buttons-unstyled-button-radar-text-disabled: #858585;
814
870
  --redsift-color-dark-components-ai-ai-border: #e11010;
815
871
  --redsift-color-dark-components-ai-ai-icon: #e11010;
816
872
  --redsift-color-dark-components-spinner-spinner: #142849;
@@ -1187,6 +1243,14 @@
1187
1243
  --redsift-color-light-components-buttons-primary-button-grey-text-hover: #ffffff;
1188
1244
  --redsift-color-light-components-buttons-primary-button-grey-text-active: #ffffff;
1189
1245
  --redsift-color-light-components-buttons-primary-button-grey-text-disabled: #858585;
1246
+ --redsift-color-light-components-buttons-primary-button-radar-background-default: linear-gradient(90deg, rgba(81, 183, 164, 1), rgba(0, 129, 195, 1));
1247
+ --redsift-color-light-components-buttons-primary-button-radar-background-hover: linear-gradient(90deg, rgba(65, 146, 131, 1), rgba(3, 114, 171, 1));
1248
+ --redsift-color-light-components-buttons-primary-button-radar-background-active: linear-gradient(90deg, rgba(58, 122, 110, 1), rgba(0, 96, 145, 1));
1249
+ --redsift-color-light-components-buttons-primary-button-radar-background-disabled: #e0e0e0;
1250
+ --redsift-color-light-components-buttons-primary-button-radar-text-default: #ffffff;
1251
+ --redsift-color-light-components-buttons-primary-button-radar-text-hover: #ffffff;
1252
+ --redsift-color-light-components-buttons-primary-button-radar-text-active: #ffffff;
1253
+ --redsift-color-light-components-buttons-primary-button-radar-text-disabled: #858585;
1190
1254
  --redsift-color-light-components-buttons-secondary-button-primary-background-default: transparent;
1191
1255
  --redsift-color-light-components-buttons-secondary-button-primary-background-hover: #d9e7fd;
1192
1256
  --redsift-color-light-components-buttons-secondary-button-primary-background-active: #b3cefb;
@@ -1236,13 +1300,37 @@
1236
1300
  --redsift-color-light-components-buttons-secondary-button-info-text-active: #2e5dab;
1237
1301
  --redsift-color-light-components-buttons-secondary-button-info-text-disabled: #a3a3a3;
1238
1302
  --redsift-color-light-components-buttons-secondary-button-grey-background-default: transparent;
1239
- --redsift-color-light-components-buttons-secondary-button-grey-background-hover: #f2f2f2;
1240
- --redsift-color-light-components-buttons-secondary-button-grey-background-active: #e0e0e0;
1241
- --redsift-color-light-components-buttons-secondary-button-grey-background-disabled: #ffffff;
1303
+ --redsift-color-light-components-buttons-secondary-button-grey-background-hover: #e0e0e0;
1304
+ --redsift-color-light-components-buttons-secondary-button-grey-background-active: #a3a3a3;
1305
+ --redsift-color-light-components-buttons-secondary-button-grey-background-disabled: transparent;
1242
1306
  --redsift-color-light-components-buttons-secondary-button-grey-text-default: #666666;
1243
1307
  --redsift-color-light-components-buttons-secondary-button-grey-text-hover: #525252;
1244
1308
  --redsift-color-light-components-buttons-secondary-button-grey-text-active: #525252;
1245
1309
  --redsift-color-light-components-buttons-secondary-button-grey-text-disabled: #a3a3a3;
1310
+ --redsift-color-light-components-buttons-secondary-button-black-background-default: transparent;
1311
+ --redsift-color-light-components-buttons-secondary-button-black-background-hover: #e0e0e0;
1312
+ --redsift-color-light-components-buttons-secondary-button-black-background-active: #a3a3a3;
1313
+ --redsift-color-light-components-buttons-secondary-button-black-background-disabled: transparent;
1314
+ --redsift-color-light-components-buttons-secondary-button-black-text-default: #333333;
1315
+ --redsift-color-light-components-buttons-secondary-button-black-text-hover: #333333;
1316
+ --redsift-color-light-components-buttons-secondary-button-black-text-active: #333333;
1317
+ --redsift-color-light-components-buttons-secondary-button-black-text-disabled: #a3a3a3;
1318
+ --redsift-color-light-components-buttons-secondary-button-white-background-default: transparent;
1319
+ --redsift-color-light-components-buttons-secondary-button-white-background-hover: #e0e0e0;
1320
+ --redsift-color-light-components-buttons-secondary-button-white-background-active: #a3a3a3;
1321
+ --redsift-color-light-components-buttons-secondary-button-white-background-disabled: transparent;
1322
+ --redsift-color-light-components-buttons-secondary-button-white-text-default: #ffffff;
1323
+ --redsift-color-light-components-buttons-secondary-button-white-text-hover: #ffffff;
1324
+ --redsift-color-light-components-buttons-secondary-button-white-text-active: #ffffff;
1325
+ --redsift-color-light-components-buttons-secondary-button-white-text-disabled: #a3a3a3;
1326
+ --redsift-color-light-components-buttons-secondary-button-radar-background-default: transparent;
1327
+ --redsift-color-light-components-buttons-secondary-button-radar-background-hover: linear-gradient(90deg, rgba(81, 183, 142, 0.2), rgba(0, 129, 195, 0.2));
1328
+ --redsift-color-light-components-buttons-secondary-button-radar-background-active: linear-gradient(90deg, rgba(81, 183, 142, 0.4), rgba(0, 129, 195, 0.4));
1329
+ --redsift-color-light-components-buttons-secondary-button-radar-background-disabled: #ffffff;
1330
+ --redsift-color-light-components-buttons-secondary-button-radar-text-default: linear-gradient(90deg, rgba(81, 183, 164, 1), rgba(0, 129, 195, 1));
1331
+ --redsift-color-light-components-buttons-secondary-button-radar-text-hover: linear-gradient(90deg, rgba(65, 146, 131, 1), rgba(3, 114, 171, 1));
1332
+ --redsift-color-light-components-buttons-secondary-button-radar-text-active: linear-gradient(90deg, rgba(58, 122, 110, 1), rgba(0, 96, 145, 1));
1333
+ --redsift-color-light-components-buttons-secondary-button-radar-text-disabled: #a3a3a3;
1246
1334
  --redsift-color-light-components-buttons-unstyled-button-primary-background-default: transparent;
1247
1335
  --redsift-color-light-components-buttons-unstyled-button-primary-background-hover: #d9e7fd;
1248
1336
  --redsift-color-light-components-buttons-unstyled-button-primary-background-active: #b3cefb;
@@ -1292,29 +1380,37 @@
1292
1380
  --redsift-color-light-components-buttons-unstyled-button-info-text-active: #2e5dab;
1293
1381
  --redsift-color-light-components-buttons-unstyled-button-info-text-disabled: #a3a3a3;
1294
1382
  --redsift-color-light-components-buttons-unstyled-button-grey-background-default: transparent;
1295
- --redsift-color-light-components-buttons-unstyled-button-grey-background-hover: #f2f2f2;
1296
- --redsift-color-light-components-buttons-unstyled-button-grey-background-active: #e0e0e0;
1383
+ --redsift-color-light-components-buttons-unstyled-button-grey-background-hover: #e0e0e0;
1384
+ --redsift-color-light-components-buttons-unstyled-button-grey-background-active: #a3a3a3;
1297
1385
  --redsift-color-light-components-buttons-unstyled-button-grey-background-disabled: transparent;
1298
1386
  --redsift-color-light-components-buttons-unstyled-button-grey-text-default: #666666;
1299
1387
  --redsift-color-light-components-buttons-unstyled-button-grey-text-hover: #525252;
1300
1388
  --redsift-color-light-components-buttons-unstyled-button-grey-text-active: #525252;
1301
1389
  --redsift-color-light-components-buttons-unstyled-button-grey-text-disabled: #a3a3a3;
1302
1390
  --redsift-color-light-components-buttons-unstyled-button-black-background-default: transparent;
1303
- --redsift-color-light-components-buttons-unstyled-button-black-background-hover: #f2f2f2;
1304
- --redsift-color-light-components-buttons-unstyled-button-black-background-active: #e0e0e0;
1391
+ --redsift-color-light-components-buttons-unstyled-button-black-background-hover: #e0e0e0;
1392
+ --redsift-color-light-components-buttons-unstyled-button-black-background-active: #a3a3a3;
1305
1393
  --redsift-color-light-components-buttons-unstyled-button-black-background-disabled: transparent;
1306
1394
  --redsift-color-light-components-buttons-unstyled-button-black-text-default: #333333;
1307
1395
  --redsift-color-light-components-buttons-unstyled-button-black-text-hover: #333333;
1308
1396
  --redsift-color-light-components-buttons-unstyled-button-black-text-active: #333333;
1309
1397
  --redsift-color-light-components-buttons-unstyled-button-black-text-disabled: #a3a3a3;
1310
1398
  --redsift-color-light-components-buttons-unstyled-button-white-background-default: transparent;
1311
- --redsift-color-light-components-buttons-unstyled-button-white-background-hover: #f2f2f2;
1312
- --redsift-color-light-components-buttons-unstyled-button-white-background-active: #e0e0e0;
1399
+ --redsift-color-light-components-buttons-unstyled-button-white-background-hover: #e0e0e0;
1400
+ --redsift-color-light-components-buttons-unstyled-button-white-background-active: #a3a3a3;
1313
1401
  --redsift-color-light-components-buttons-unstyled-button-white-background-disabled: transparent;
1314
1402
  --redsift-color-light-components-buttons-unstyled-button-white-text-default: #ffffff;
1315
1403
  --redsift-color-light-components-buttons-unstyled-button-white-text-hover: #ffffff;
1316
1404
  --redsift-color-light-components-buttons-unstyled-button-white-text-active: #ffffff;
1317
1405
  --redsift-color-light-components-buttons-unstyled-button-white-text-disabled: #a3a3a3;
1406
+ --redsift-color-light-components-buttons-unstyled-button-radar-background-default: transparent;
1407
+ --redsift-color-light-components-buttons-unstyled-button-radar-background-hover: linear-gradient(90deg, rgba(81, 183, 142, 0.2), rgba(0, 129, 195, 0.2));
1408
+ --redsift-color-light-components-buttons-unstyled-button-radar-background-active: linear-gradient(90deg, rgba(81, 183, 142, 0.4), rgba(0, 129, 195, 0.4));
1409
+ --redsift-color-light-components-buttons-unstyled-button-radar-background-disabled: #ffffff;
1410
+ --redsift-color-light-components-buttons-unstyled-button-radar-text-default: linear-gradient(90deg, rgba(81, 183, 164, 1), rgba(0, 129, 195, 1));
1411
+ --redsift-color-light-components-buttons-unstyled-button-radar-text-hover: linear-gradient(90deg, rgba(65, 146, 131, 1), rgba(3, 114, 171, 1));
1412
+ --redsift-color-light-components-buttons-unstyled-button-radar-text-active: linear-gradient(90deg, rgba(58, 122, 110, 1), rgba(0, 96, 145, 1));
1413
+ --redsift-color-light-components-buttons-unstyled-button-radar-text-disabled: #a3a3a3;
1318
1414
  --redsift-color-light-components-ai-ai-border: #e11010;
1319
1415
  --redsift-color-light-components-ai-ai-icon: #e11010;
1320
1416
  --redsift-color-light-components-spinner-spinner: #4285f4;
@@ -1669,6 +1765,7 @@
1669
1765
  --redsift-color-neutral-white: #ffffff;
1670
1766
  --redsift-color-neutral-x-light-grey: #f2f2f2;
1671
1767
  --redsift-color-neutral-light-grey: #e0e0e0;
1768
+ --redsift-color-neutral-disabled: #a3a3a3;
1672
1769
  --redsift-color-neutral-mid-grey: #666666;
1673
1770
  --redsift-color-neutral-dark-grey: #474747;
1674
1771
  --redsift-color-neutral-x-dark-grey: #333333;