@arco-themes/react-aiux2026 0.0.14 → 1.0.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 (7) hide show
  1. package/README.md +62 -0
  2. package/css/arco.css +2 -2
  3. package/package.json +2 -2
  4. package/theme.css +38 -38
  5. package/theme.less +102 -39
  6. package/tokens.less +384 -384
  7. package/variables.less +390 -331
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arco-themes/react-aiux2026",
3
- "version": "0.0.14",
3
+ "version": "1.0.1",
4
4
  "description": "",
5
5
  "author": "dobe25381-gif",
6
6
  "owners": [],
@@ -14,6 +14,6 @@
14
14
  "depLibrary": "@arco-design/web-react",
15
15
  "tag": "latest",
16
16
  "peerDependencies": {
17
- "@arco-design/web-react": "^2.66.12"
17
+ "@arco-design/web-react": "^2.66.13"
18
18
  }
19
19
  }
package/theme.css CHANGED
@@ -73,24 +73,24 @@ body {
73
73
  body[arco-theme='dark'] {
74
74
  --color-black: #000000;
75
75
  --color-border: #333335;
76
- --color-bg-1: #17171a;
77
- --color-bg-2: #232324;
78
- --color-bg-3: #2a2a2b;
79
- --color-bg-4: #313132;
80
- --color-bg-5: #373739;
81
- --color-bg-white: #f6f6f6;
82
- --color-text-1: rgba(255, 255, 255, 0.9);
83
- --color-text-2: rgba(255, 255, 255, 0.7);
84
- --color-text-3: rgba(255, 255, 255, 0.5);
76
+ --color-bg-1: #191a23;
77
+ --color-bg-2: #1a1b26;
78
+ --color-bg-3: #1d1e2b;
79
+ --color-bg-4: #191a22;
80
+ --color-bg-5: #21232e;
81
+ --color-bg-white: rgba(255, 255, 255, 0.01);
82
+ --color-text-1: #ffffff;
83
+ --color-text-2: rgba(255, 255, 255, 0.8);
84
+ --color-text-3: rgba(255, 255, 255, 0.7);
85
85
  --color-text-4: rgba(255, 255, 255, 0.3);
86
- --color-fill-1: rgba(255, 255, 255, 0.04);
86
+ --color-fill-1: rgba(255, 255, 255, 0.02);
87
87
  --color-fill-2: rgba(255, 255, 255, 0.08);
88
88
  --color-fill-3: rgba(255, 255, 255, 0.12);
89
89
  --color-fill-4: rgba(255, 255, 255, 0.16);
90
- --color-border-1: var(--color-neutral-2);
91
- --color-border-2: var(--color-neutral-3);
92
- --color-border-3: var(--color-neutral-4);
93
- --color-border-4: var(--color-neutral-6);
90
+ --color-border-1: rgba(255, 255, 255, 0.04);
91
+ --color-border-2: rgba(255, 255, 255, 0.08);
92
+ --color-border-3: rgba(255, 255, 255, 0.12);
93
+ --color-border-4: rgba(255, 255, 255, 0.2);
94
94
  --color-primary-light-1: rgba(var(--primary-6), 0.2);
95
95
  --color-primary-light-2: rgba(var(--primary-6), 0.35);
96
96
  --color-primary-light-3: rgba(var(--primary-6), 0.5);
@@ -475,7 +475,7 @@ body[arco-theme='dark'] {
475
475
  --gray-8: 197, 197, 197;
476
476
  --gray-9: 223, 223, 223;
477
477
  --gray-10: 246, 246, 246;
478
- --primary-1: var(--arcoblue-1);
478
+ --primary-1: 25, 26, 35;
479
479
  --primary-2: var(--arcoblue-2);
480
480
  --primary-3: var(--arcoblue-3);
481
481
  --primary-4: var(--arcoblue-4);
@@ -485,7 +485,7 @@ body[arco-theme='dark'] {
485
485
  --primary-8: var(--arcoblue-8);
486
486
  --primary-9: var(--arcoblue-9);
487
487
  --primary-10: var(--arcoblue-10);
488
- --link-1: var(--arcoblue-1);
488
+ --link-1: 25, 26, 35;
489
489
  --link-2: var(--arcoblue-2);
490
490
  --link-3: var(--arcoblue-3);
491
491
  --link-4: var(--arcoblue-4);
@@ -495,13 +495,13 @@ body[arco-theme='dark'] {
495
495
  --link-8: var(--arcoblue-8);
496
496
  --link-9: var(--arcoblue-9);
497
497
  --link-10: var(--arcoblue-10);
498
- --success-1: var(--green-1);
499
- --success-2: var(--green-2);
500
- --success-3: var(--green-3);
501
- --success-4: var(--green-4);
502
- --success-5: var(--green-5);
503
- --success-6: var(--green-6);
504
- --success-7: var(--green-7);
498
+ --success-1: 0, 77, 68;
499
+ --success-2: 1, 105, 90;
500
+ --success-3: 6, 134, 110;
501
+ --success-4: 1, 162, 129;
502
+ --success-5: 12, 191, 146;
503
+ --success-6: 47, 204, 159;
504
+ --success-7: 87, 217, 175;
505
505
  --success-8: var(--green-8);
506
506
  --success-9: var(--green-9);
507
507
  --success-10: var(--green-10);
@@ -521,27 +521,27 @@ body[arco-theme='dark'] {
521
521
  --warning-4: var(--orange-4);
522
522
  --warning-5: var(--orange-5);
523
523
  --warning-6: var(--orange-6);
524
- --warning-7: var(--orange-7);
524
+ --warning-7: 255, 179, 87;
525
525
  --warning-8: var(--orange-8);
526
526
  --warning-9: var(--orange-9);
527
527
  --warning-10: var(--orange-10);
528
- --badge-1: var(--arcoblue-1);
529
- --badge-2: var(--arcoblue-2);
530
- --badge-3: var(--arcoblue-3);
531
- --badge-4: var(--arcoblue-4);
532
- --badge-5: var(--arcoblue-5);
533
- --badge-6: var(--arcoblue-6);
534
- --badge-7: var(--arcoblue-7);
528
+ --badge-1: 62, 19, 143;
529
+ --badge-2: 217, 46, 217;
530
+ --badge-3: 26, 188, 242;
531
+ --badge-4: 12, 191, 146;
532
+ --badge-5: 247, 126, 69;
533
+ --badge-6: 142, 81, 218;
534
+ --badge-7: 247, 192, 52;
535
535
  --badge-8: var(--arcoblue-8);
536
536
  --badge-9: var(--arcoblue-9);
537
537
  --badge-10: var(--arcoblue-10);
538
- --tag-1: var(--arcoblue-1);
539
- --tag-2: var(--arcoblue-2);
540
- --tag-3: var(--arcoblue-3);
541
- --tag-4: var(--arcoblue-4);
542
- --tag-5: var(--arcoblue-5);
543
- --tag-6: var(--arcoblue-6);
544
- --tag-7: var(--arcoblue-7);
538
+ --tag-1: 249, 237, 255;
539
+ --tag-2: 255, 237, 243;
540
+ --tag-3: 236, 253, 254;
541
+ --tag-4: 241, 255, 237;
542
+ --tag-5: 255, 245, 237;
543
+ --tag-6: 245, 237, 255;
544
+ --tag-7: 255, 253, 237;
545
545
  --tag-8: var(--arcoblue-8);
546
546
  --tag-9: var(--arcoblue-9);
547
547
  --tag-10: var(--arcoblue-10);
package/theme.less CHANGED
@@ -429,7 +429,7 @@
429
429
  @dark-yellow-8: #FDFA9D;
430
430
  @dark-magenta-2: #770850;
431
431
  @dark-green-7: #50D266;
432
- @dark-success-1: rgb(var(~'@{arco-cssvars-prefix}-green-1'));
432
+ @dark-success-1: rgb(0, 77, 68);
433
433
  @dark-blue-3: #134CA3;
434
434
  @dark-blue-1: #001A4D;
435
435
  @dark-pinkpurple-1: #42004D;
@@ -446,13 +446,13 @@
446
446
  @dark-pinkpurple-6: #E13DDB;
447
447
  @dark-cyan-6: #3FD4CF;
448
448
  @dark-primary-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
449
- @dark-primary-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
449
+ @dark-primary-1: rgb(25, 26, 35);
450
450
  @dark-cyan-8: #90E9E1;
451
451
  @dark-cyan-3: #11838B;
452
452
  @danger-6: rgb(229, 46, 45);
453
453
  @dark-lime-1: #2A4D00;
454
454
  @dark-primary-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));
455
- @dark-success-3: rgb(var(~'@{arco-cssvars-prefix}-green-3'));
455
+ @dark-success-3: rgb(6, 134, 110);
456
456
  @dark-orange-8: #FFCD87;
457
457
  @success-4: rgb(87, 217, 175);
458
458
  @dark-cyan-7: #66DFD7;
@@ -472,17 +472,17 @@
472
472
  @dark-purple-7: #A974E3;
473
473
  @dark-primary-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
474
474
  @warning-4: rgb(247, 183, 106);
475
- @dark-success-2: rgb(var(~'@{arco-cssvars-prefix}-green-2'));
475
+ @dark-success-2: rgb(1, 105, 90);
476
476
  @dark-lime-5: #A8DB39;
477
477
  @danger-1: rgb(255, 240, 237);
478
478
  @dark-primary-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));
479
- @dark-success-5: rgb(var(~'@{arco-cssvars-prefix}-green-5'));
479
+ @dark-success-5: rgb(12, 191, 146);
480
480
  @dark-blue-5: #469AFA;
481
481
  @dark-purple-8: #C59AED;
482
482
  @dark-arcoblue-6: #3C7EFF;
483
483
  @dark-gold-6: #F9CC44;
484
484
  @dark-gray-9: #dfdfdf;
485
- @dark-warning-7: rgb(var(~'@{arco-cssvars-prefix}-orange-7'));
485
+ @dark-warning-7: rgb(255, 179, 87);
486
486
  @dark-pinkpurple-10: #FFF2FD;
487
487
  @dark-yellow-10: #FEFFF0;
488
488
  @dark-green-10: #EBFFEC;
@@ -517,7 +517,7 @@
517
517
  @dark-danger-9: rgb(var(~'@{arco-cssvars-prefix}-red-9'));
518
518
  @dark-gray-8: #c5c5c5;
519
519
  @dark-magenta-8: #FB9EC8;
520
- @dark-success-4: rgb(var(~'@{arco-cssvars-prefix}-green-4'));
520
+ @dark-success-4: rgb(1, 162, 129);
521
521
  @dark-danger-7: rgb(var(~'@{arco-cssvars-prefix}-red-7'));
522
522
  @dark-lime-8: #DEF198;
523
523
  @dark-arcoblue-10: #EAF4FF;
@@ -530,7 +530,7 @@
530
530
  @link-4: rgb(106, 149, 246);
531
531
  @dark-warning-5: rgb(var(~'@{arco-cssvars-prefix}-orange-5'));
532
532
  @dark-magenta-5: #F545A6;
533
- @dark-success-6: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
533
+ @dark-success-6: rgb(47, 204, 159);
534
534
  @dark-lime-6: #B8E24B;
535
535
  @warning-6: rgb(241, 134, 25);
536
536
  @link-6: rgb(24, 79, 242);
@@ -546,7 +546,7 @@
546
546
  @dark-link-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));
547
547
  @primary-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
548
548
  @dark-blue-2: #052F78;
549
- @dark-success-7: rgb(var(~'@{arco-cssvars-prefix}-green-7'));
549
+ @dark-success-7: rgb(87, 217, 175);
550
550
  @warning-8: rgb(var(~'@{arco-cssvars-prefix}-orange-8'));
551
551
  @danger-3: rgb(245, 162, 153);
552
552
  @dark-link-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));
@@ -561,7 +561,7 @@
561
561
  @danger-7: rgb(191, 30, 34);
562
562
  @dark-warning-2: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));
563
563
  @dark-purple-3: #3E138F;
564
- @dark-link-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
564
+ @dark-link-1: rgb(25, 26, 35);
565
565
  @dark-green-6: #27C346;
566
566
  @dark-danger-4: rgb(var(~'@{arco-cssvars-prefix}-red-4'));
567
567
  @dark-link-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));
@@ -589,41 +589,41 @@
589
589
  @dark-link-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));
590
590
  @dark-danger-1: rgb(var(~'@{arco-cssvars-prefix}-red-1'));
591
591
  @orange-4: #FFB65D;
592
- @dark-color-text-1: rgba(255, 255, 255, 0.9);
592
+ @dark-color-text-1: rgb(255, 255, 255);
593
593
  @color-text-1: rgb(15, 19, 31);
594
594
  @color-bg-white: #ffffff;
595
595
  @color-white: #ffffff;
596
- @dark-color-text-2: rgba(255, 255, 255, 0.7);
597
- @dark-color-white: rgba(255, 255, 255, 0.9);
596
+ @dark-color-text-2: rgba(255,255,255,0.8);
597
+ @dark-color-white: rgb(255, 255, 255);
598
598
  @color-text-3: rgb(100, 108, 133);
599
599
  @color-text-2: rgb(41, 47, 66);
600
600
  @color-text-4: rgb(156, 163, 184);
601
- @dark-color-text-3: rgba(255, 255, 255, 0.5);
601
+ @dark-color-text-3: rgba(255,255,255,0.7);
602
602
  @color-border-2: rgb(223, 226, 235);
603
603
  @color-fill-4: rgb(195, 199, 212);
604
604
  @color-fill-2: rgb(245, 247, 252);
605
605
  @color-fill-3: rgb(235, 238, 245);
606
- @dark-color-bg-1: #17171A;
606
+ @dark-color-bg-1: rgb(25, 26, 35);
607
607
  @dark-color-fill-4: rgba(255, 255, 255, 0.16);
608
- @dark-color-bg-white: #f6f6f6;
609
- @dark-color-border-1: @dark-gray-2;
608
+ @dark-color-bg-white: rgba(255,255,255,0.01);
609
+ @dark-color-border-1: rgba(255,255,255,0.04);
610
610
  @color-bg-1: #ffffff;
611
611
  @color-border-1: rgb(235, 238, 245);
612
- @dark-color-border-2: @dark-gray-3;
612
+ @dark-color-border-2: rgba(255,255,255,0.08);
613
613
  @color-fill-1: rgb(250, 251, 255);
614
- @dark-color-border-4: @dark-gray-6;
615
- @dark-color-fill-1: rgba(255, 255, 255, 0.04);
614
+ @dark-color-border-4: rgba(255,255,255,0.2);
615
+ @dark-color-fill-1: rgba(255,255,255,0.02);
616
616
  @color-border-4: rgb(156, 163, 184);
617
617
  @dark-color-fill-2: rgba(255, 255, 255, 0.08);
618
- @dark-color-border-3: @dark-gray-4;
618
+ @dark-color-border-3: rgba(255,255,255,0.12);
619
619
  @dark-color-fill-3: rgba(255, 255, 255, 0.12);
620
620
  @color-bg-3: #ffffff;
621
- @dark-color-bg-2: #232324;
622
- @dark-color-bg-4: #313132;
623
- @dark-color-bg-5: #373739;
621
+ @dark-color-bg-2: rgb(26, 27, 38);
622
+ @dark-color-bg-4: rgb(25, 26, 34);
623
+ @dark-color-bg-5: rgb(33, 35, 46);
624
624
  @color-bg-5: #ffffff;
625
625
  @color-bg-4: #ffffff;
626
- @dark-color-bg-3: #2a2a2b;
626
+ @dark-color-bg-3: rgb(29, 30, 43);
627
627
  @color-bg-2: #ffffff;
628
628
  @color-border-3: rgb(195, 199, 212);
629
629
  @textarea-prefix-cls: ~'@{prefix}-textarea';
@@ -809,14 +809,14 @@
809
809
  @badge-1: rgb(133, 24, 242);
810
810
  @color-badge-5: rgb(var(~'@{arco-cssvars-prefix}-badge-5'));
811
811
  @color-badge-4: rgb(var(~'@{arco-cssvars-prefix}-badge-4'));
812
- @dark-badge-1: #000D4D;
812
+ @dark-badge-1: rgb(62, 19, 143);
813
813
  @color-badge-2: rgb(var(~'@{arco-cssvars-prefix}-badge-2'));
814
- @dark-badge-7: #689FFF;
814
+ @dark-badge-7: rgb(247, 192, 52);
815
815
  @badge-4: rgb(22, 217, 22);
816
816
  @color-badge-6: rgb(var(~'@{arco-cssvars-prefix}-badge-6'));
817
817
  @badge-9: #031A79;
818
- @dark-badge-5: #306FFF;
819
- @dark-badge-2: #041B79;
818
+ @dark-badge-5: rgb(247, 126, 69);
819
+ @dark-badge-2: rgb(217, 46, 217);
820
820
  @badge-6: rgb(79, 24, 242);
821
821
  @badge-2: rgb(242, 24, 133);
822
822
  @badge-3: rgb(26, 188, 242);
@@ -826,12 +826,12 @@
826
826
  @badge-7: rgb(242, 188, 23);
827
827
  @badge-8: #072CA6;
828
828
  @color-badge-9: rgb(var(~'@{arco-cssvars-prefix}-badge-9'));
829
- @dark-badge-4: #1D4DD2;
829
+ @dark-badge-4: rgb(12, 191, 146);
830
830
  @color-badge-7: rgb(var(~'@{arco-cssvars-prefix}-badge-7'));
831
831
  @color-badge-10: rgb(var(~'@{arco-cssvars-prefix}-badge-10'));
832
832
  @dark-badge-8: #93BEFF;
833
- @dark-badge-6: #3C7EFF;
834
- @dark-badge-3: #0E32A6;
833
+ @dark-badge-6: rgb(142, 81, 218);
834
+ @dark-badge-3: rgb(26, 188, 242);
835
835
  @dark-badge-9: #BEDAFF;
836
836
  @dark-badge-10: #EAF4FF;
837
837
  @badge-5: rgb(242, 79, 25);
@@ -840,13 +840,13 @@
840
840
  @tag-3: rgb(236, 253, 254);
841
841
  @color-tag-9: rgb(var(~'@{arco-cssvars-prefix}-tag-9'));
842
842
  @color-tag-5: rgb(var(~'@{arco-cssvars-prefix}-tag-5'));
843
- @dark-tag-1: #000D4D;
844
- @dark-tag-2: #041B79;
843
+ @dark-tag-1: rgb(249, 237, 255);
844
+ @dark-tag-2: rgb(255, 237, 243);
845
845
  @dark-tag-8: #93BEFF;
846
846
  @tag-7: rgb(255, 253, 237);
847
- @dark-tag-4: #1D4DD2;
847
+ @dark-tag-4: rgb(241, 255, 237);
848
848
  @color-tag-6: rgb(var(~'@{arco-cssvars-prefix}-tag-6'));
849
- @dark-tag-3: #0E32A6;
849
+ @dark-tag-3: rgb(236, 253, 254);
850
850
  @dark-tag-9: #BEDAFF;
851
851
  @tag-6: rgb(245, 237, 255);
852
852
  @tag-4: rgb(241, 255, 237);
@@ -860,10 +860,10 @@
860
860
  @tag-9: #031A79;
861
861
  @color-tag-1: rgb(var(~'@{arco-cssvars-prefix}-tag-1'));
862
862
  @color-tag-7: rgb(var(~'@{arco-cssvars-prefix}-tag-7'));
863
- @dark-tag-5: #306FFF;
863
+ @dark-tag-5: rgb(255, 245, 237);
864
864
  @dark-tag-10: #EAF4FF;
865
- @dark-tag-7: #689FFF;
866
- @dark-tag-6: #3C7EFF;
865
+ @dark-tag-7: rgb(255, 253, 237);
866
+ @dark-tag-6: rgb(245, 237, 255);
867
867
  @tag-5: rgb(255, 245, 237);
868
868
  @color-tag-10: rgb(var(~'@{arco-cssvars-prefix}-tag-10'));
869
869
 
@@ -2325,4 +2325,67 @@
2325
2325
  .arco-select-option:hover {
2326
2326
  background-color: rgb(var(--primary-1));
2327
2327
  }
2328
+ }
2329
+
2330
+ .arco-modal {
2331
+ border-width: 0;
2332
+ .arco-modal-header {
2333
+ border-bottom: none;
2334
+ }
2335
+ .arco-modal-footer {
2336
+ border-top: none;
2337
+ }
2338
+ }
2339
+ .arco-message,
2340
+ .arco-popconfirm-content,
2341
+ .arco-notification,
2342
+ .arco-popover-content {
2343
+ border-width: 0;
2344
+ }
2345
+ .arco-popconfirm {
2346
+ .arco-popconfirm-arrow.arco-trigger-arrow {
2347
+ border-width: 0;
2348
+ }
2349
+ }
2350
+ .arco-popover {
2351
+ .arco-popover-arrow.arco-trigger-arrow {
2352
+ border-width: 0;
2353
+ }
2354
+ }
2355
+
2356
+ .arco-popover-title,
2357
+ .arco-notification-title,
2358
+ .arco-modal-title,
2359
+ .arco-popconfirm-title {
2360
+ font-weight: 600;
2361
+ }
2362
+
2363
+ body[arco-theme='dark'] {
2364
+ .arco-tooltip {
2365
+ .arco-tooltip-content {
2366
+ border-width: 1px !important;
2367
+ border-color: var(--color-border-2);
2368
+ }
2369
+ .arco-trigger-arrow.arco-tooltip-arrow {
2370
+ border-color: var(--color-border-2) !important;
2371
+ }
2372
+ }
2373
+ .arco-modal,
2374
+ .arco-message,
2375
+ .arco-popconfirm-content,
2376
+ .arco-popover-content,
2377
+ .arco-notification {
2378
+ border-width: 1px;
2379
+ }
2380
+ .arco-popconfirm {
2381
+ .arco-popconfirm-arrow.arco-trigger-arrow {
2382
+ border-width: 1px;
2383
+ }
2384
+ }
2385
+ .arco-popover {
2386
+ .arco-popover-arrow.arco-trigger-arrow {
2387
+ border-width: 1px;
2388
+ }
2389
+ }
2390
+
2328
2391
  }