@arco-themes/vue-rb-node-saas-web 0.0.5 → 0.0.7

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 +14 -0
  2. package/css/arco.css +1 -1
  3. package/package.json +1 -1
  4. package/theme.css +8 -4
  5. package/theme.less +14 -6
  6. package/tokens.less +18 -14
  7. package/variables.less +11 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arco-themes/vue-rb-node-saas-web",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "description": "",
5
5
  "author": "k5v1n",
6
6
  "owners": [],
package/theme.css CHANGED
@@ -1,5 +1,5 @@
1
1
  body {
2
- font-family: Inter, PingFang SC, sans-serif, -apple-system, BlinkMacSystemFont, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial;
2
+ font-family: PingFang SC, sans-serif, -apple-system, BlinkMacSystemFont, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial;
3
3
  }
4
4
  body {
5
5
  --color-white: #ffffff;
@@ -23,15 +23,15 @@ body {
23
23
  --color-neutral-9: rgb(var(--gray-9));
24
24
  --color-neutral-10: rgb(var(--gray-10));
25
25
  --color-text-1: #333333;
26
- --color-text-2: #7f7f7f;
27
- --color-text-3: #c4c4c4;
26
+ --color-text-2: #4e5969;
27
+ --color-text-3: #86909c;
28
28
  --color-text-4: var(--color-neutral-4);
29
29
  --color-fill-1: var(--color-neutral-1);
30
30
  --color-fill-2: #f1f2f8;
31
31
  --color-fill-3: var(--color-neutral-3);
32
32
  --color-fill-4: var(--color-neutral-4);
33
33
  --color-border-1: var(--color-neutral-2);
34
- --color-border-2: #dedede;
34
+ --color-border-2: #e5e6eb;
35
35
  --color-border-3: var(--color-neutral-4);
36
36
  --color-border-4: var(--color-neutral-6);
37
37
  --color-primary-light-1: rgb(var(--primary-1));
@@ -313,6 +313,8 @@ body {
313
313
  --warning-8: 166, 66, 0;
314
314
  --warning-9: 121, 44, 0;
315
315
  --warning-10: 77, 25, 0;
316
+ --color-fill-table-td: #f8f9fb;
317
+ --color-fill-table-th: #f0f2f7;
316
318
  }
317
319
  body[arco-theme='dark'] {
318
320
  --red-1: 77, 0, 10;
@@ -505,5 +507,7 @@ body[arco-theme='dark'] {
505
507
  --warning-8: 255, 203, 135;
506
508
  --warning-9: 255, 226, 184;
507
509
  --warning-10: 255, 247, 232;
510
+ --color-fill-table-td: #f8f9fb;
511
+ --color-fill-table-th: #f0f2f7;
508
512
  }
509
513
 
package/theme.less CHANGED
@@ -117,7 +117,7 @@
117
117
  @shadow-distance-2: 2px;
118
118
  @shadow-distance-3: 3px;
119
119
  @shadow-distance-4: 4px;
120
- @font-family: Inter,PingFang SC,sans-serif,-apple-system,BlinkMacSystemFont,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
120
+ @font-family: PingFang SC,sans-serif,-apple-system,BlinkMacSystemFont,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
121
121
  @font-size-display-3: 56px;
122
122
  @font-size-display-2: 48px;
123
123
  @font-size-display-1: 36px;
@@ -595,11 +595,11 @@
595
595
  @color-white: #ffffff;
596
596
  @dark-color-text-2: rgba(255, 255, 255, 0.7);
597
597
  @dark-color-white: rgba(255, 255, 255, 0.9);
598
- @color-text-3: rgb(196, 196, 196);
599
- @color-text-2: rgb(127, 127, 127);
598
+ @color-text-3: rgb(134, 144, 156);
599
+ @color-text-2: rgb(78, 89, 105);
600
600
  @color-text-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');
601
601
  @dark-color-text-3: rgba(255, 255, 255, 0.5);
602
- @color-border-2: rgb(222, 222, 222);
602
+ @color-border-2: rgb(229, 230, 235);
603
603
  @color-fill-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');
604
604
  @color-fill-2: rgb(241, 242, 248);
605
605
  @color-fill-3: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@@ -806,6 +806,10 @@
806
806
  @watermark-prefix-cls: ~'@{prefix}-watermark';
807
807
  @verification-code-prefix-cls: ~'@{prefix}-verification-code';
808
808
  @color-prefix-cls: ~'@{prefix}-color';
809
+ @color-fill-table-td: #f8f9fb;
810
+ @dark-color-fill-table-td: #f8f9fb;
811
+ @dark-color-fill-table-th: #f0f2f7;
812
+ @color-fill-table-th: #f0f2f7;
809
813
 
810
814
 
811
815
  @arco-theme-tag: body;
@@ -1232,7 +1236,9 @@
1232
1236
  @{arco-cssvars-prefix}-warning-9: if(iscolor(@warning-9), .getColorRgbStr(@warning-9)[], replace(~'@{warning-9}', 'rgb\((.*)\)$', '$1'));
1233
1237
  @{arco-cssvars-prefix}-warning-10: if(iscolor(@warning-10), .getColorRgbStr(@warning-10)[], replace(~'@{warning-10}', 'rgb\((.*)\)$', '$1'));
1234
1238
 
1235
-
1239
+ @{arco-cssvars-prefix}-color-fill-table-td: @color-fill-table-td;
1240
+ @{arco-cssvars-prefix}-color-fill-table-th: @color-fill-table-th;
1241
+
1236
1242
  }
1237
1243
 
1238
1244
  @{arco-theme-tag}[arco-theme='dark'] {
@@ -1426,5 +1432,7 @@
1426
1432
  @{arco-cssvars-prefix}-warning-8: if(iscolor(@dark-warning-8), .getColorRgbStr(@dark-warning-8)[], replace(~'@{dark-warning-8}', 'rgb\((.*)\)$', '$1'));
1427
1433
  @{arco-cssvars-prefix}-warning-9: if(iscolor(@dark-warning-9), .getColorRgbStr(@dark-warning-9)[], replace(~'@{dark-warning-9}', 'rgb\((.*)\)$', '$1'));
1428
1434
  @{arco-cssvars-prefix}-warning-10: if(iscolor(@dark-warning-10), .getColorRgbStr(@dark-warning-10)[], replace(~'@{dark-warning-10}', 'rgb\((.*)\)$', '$1'));
1429
-
1435
+ @{arco-cssvars-prefix}-color-fill-table-td: @dark-color-fill-table-td;
1436
+ @{arco-cssvars-prefix}-color-fill-table-th: @dark-color-fill-table-th;
1437
+
1430
1438
  }
package/tokens.less CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  /*********** font ***********/
4
4
 
5
- @font-family: Inter, PingFang SC, sans-serif, -apple-system, BlinkMacSystemFont, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial;
5
+ @font-family: PingFang SC, sans-serif, -apple-system, BlinkMacSystemFont, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial;
6
6
  @font-size-display-3: 56px;
7
7
  @font-size-display-2: 48px;
8
8
  @font-size-display-1: 36px;
@@ -462,6 +462,8 @@
462
462
  @dark-color-border-2: #484849;
463
463
  @dark-color-border-4: #929293;
464
464
  @dark-color-border-3: #5f5f60;
465
+ @dark-color-fill-table-td: #f8f9fb;
466
+ @dark-color-fill-table-th: #f0f2f7;
465
467
 
466
468
 
467
469
  /*********** primary ***********/
@@ -755,15 +757,15 @@
755
757
  @color-bg-5: #ffffff;
756
758
  @color-bg-white: #ffffff;
757
759
  @color-text-1: #333333;
758
- @color-text-2: #7f7f7f;
759
- @color-text-3: #c4c4c4;
760
+ @color-text-2: #4e5969;
761
+ @color-text-3: #86909c;
760
762
  @color-text-4: var(--color-neutral-4);
761
763
  @color-fill-1: var(--color-neutral-1);
762
764
  @color-fill-2: #f1f2f8;
763
765
  @color-fill-3: var(--color-neutral-3);
764
766
  @color-fill-4: var(--color-neutral-4);
765
767
  @color-border-1: var(--color-neutral-2);
766
- @color-border-2: #dedede;
768
+ @color-border-2: #e5e6eb;
767
769
  @color-border-3: var(--color-neutral-4);
768
770
  @color-border-4: var(--color-neutral-6);
769
771
  @color-primary-light-1: rgb(var(--primary-1));
@@ -836,6 +838,8 @@
836
838
  @color-panel-border-color: var(--color-border-2);
837
839
  @color-picker-prefix-cls: ~'@{prefix}-color-picker';
838
840
  @color-prefix-cls: ~'@{prefix}-color';
841
+ @color-fill-table-td: #f8f9fb;
842
+ @color-fill-table-th: #f0f2f7;
839
843
  @color-value-size-default-font-size: @font-size-body-3;
840
844
  @color-input-size-large-padding-horizontal: 5px;
841
845
  @color-input-size-default-padding-horizontal: @spacing-2;
@@ -1041,8 +1045,8 @@
1041
1045
  @input-size-shadow_focus: 3px;
1042
1046
  @input-color-addon-border_default: transparent;
1043
1047
  @input-color-text: var(--color-text-1);
1044
- @input-color-placeholder-text: #7f7f7f;
1045
- @input-color-text_disabled: #dedede;
1048
+ @input-color-placeholder-text: #4e5969;
1049
+ @input-color-text_disabled: #e5e6eb;
1046
1050
  @input-color-bg_error: var(--color-danger-light-1);
1047
1051
  @input-color-bg_error_hover: var(--color-danger-light-2);
1048
1052
  @input-color-bg_error_focus: var(--color-bg-2);
@@ -1055,7 +1059,7 @@
1055
1059
  @input-size-small-height: 28px;
1056
1060
  @input-size-large-height: 36px;
1057
1061
  @input-border-width: 1px;
1058
- @input-color-border: #dedede;
1062
+ @input-color-border: #e5e6eb;
1059
1063
  @input-color-border_disabled: transparent;
1060
1064
  @input-color-border_hover: rgb(var(--primary-6));
1061
1065
  @input-color-border_error: transparent;
@@ -1115,7 +1119,7 @@
1115
1119
  @input-tag-color-placeholder: #333333;
1116
1120
  @input-tag-color-icon-clear: var(--color-text-2);
1117
1121
  @input-tag-color-icon-clear-bg_hover: #ffffff;
1118
- @input-tag-color-border_default: #dedede;
1122
+ @input-tag-color-border_default: #e5e6eb;
1119
1123
  @input-tag-color-border_default_hover: transparent;
1120
1124
  @input-tag-color-border_default_focus: rgb(var(--primary-6));
1121
1125
  @input-tag-color-border_error: transparent;
@@ -1232,7 +1236,7 @@
1232
1236
  @picker-color-bg_error: var(--color-danger-light-1);
1233
1237
  @picker-color-bg_error_hover: var(--color-danger-light-2);
1234
1238
  @picker-color-bg_error_focus: var(--color-bg-2);
1235
- @picker-color-border: #dedede;
1239
+ @picker-color-border: #e5e6eb;
1236
1240
  @picker-color-border_hover: rgb(var(--primary-6));
1237
1241
  @picker-color-border_focus: rgb(var(--primary-6));
1238
1242
  @picker-color-border_disabled: transparent;
@@ -1611,7 +1615,7 @@
1611
1615
  @avatar-size-default: 40px;
1612
1616
  @avatar-font-size-text: 20px;
1613
1617
  @avatar-color-text: var(--color-white);
1614
- @avatar-color-bg: #dedede;
1618
+ @avatar-color-bg: #e5e6eb;
1615
1619
  @avatar-color-group-item-border: var(--color-bg-2);
1616
1620
  @avatar-group-item-border-width: 2px;
1617
1621
  @avatar-group-item-margin-left: -10px;
@@ -3469,7 +3473,7 @@
3469
3473
  @table-color-border: var(--color-neutral-3);
3470
3474
  @table-border-radius: var(--border-radius-medium);
3471
3475
  @table-color-text-header-cell: #333333;
3472
- @table-color-bg-header-cell: #f1f2f8;
3476
+ @table-color-bg-header-cell: #f0f2f7;
3473
3477
  @table-color-bg-header-sorted-cell: var(--color-neutral-3);
3474
3478
  @table-color-bg-header-sorted-cell_hover: rgba(var(--gray-4), 0.5);
3475
3479
  @table-color-header-filters-icon: var(--color-text-2);
@@ -3481,8 +3485,8 @@
3481
3485
  @table-color-text-body-cell: rgb(var(--gray-10));
3482
3486
  @table-color-bg-body-cell: var(--color-bg-2);
3483
3487
  @table-color-bg-body-sorted-cell: var(--color-fill-1);
3484
- @table-color-bg-body-stripe-row: var(--color-neutral-1);
3485
- @table-color-bg-body-row_hover: var(--color-neutral-1);
3488
+ @table-color-bg-body-stripe-row: #f8f9fb;
3489
+ @table-color-bg-body-row_hover: #f8f9fb;
3486
3490
  @table-color-bg-body-row_active: var(--color-fill-1);
3487
3491
  @table-color-bg-body-row_active_dark: var(--color-neutral-2);
3488
3492
  @table-color-expand-icon: var(--color-text-2);
@@ -3581,7 +3585,7 @@
3581
3585
  @tabs-color-title-text_disabled: var(--color-text-4);
3582
3586
  @tabs-color-title-text_disabled_active: var(--color-primary-light-3);
3583
3587
  @tabs-line-size-header-border: 1px;
3584
- @tabs-line-color-header-border: #dedede;
3588
+ @tabs-line-color-header-border: #e5e6eb;
3585
3589
  @tabs-line-size-ink-stroke: 2px;
3586
3590
  @tabs-line-color-ink-bg: rgb(var(--primary-6));
3587
3591
  @tabs-line-color-ink-bg_disabled: var(--color-primary-light-3);
package/variables.less CHANGED
@@ -111,7 +111,7 @@
111
111
  @shadow-distance-2: 2px;
112
112
  @shadow-distance-3: 3px;
113
113
  @shadow-distance-4: 4px;
114
- @font-family: Inter,PingFang SC,sans-serif,-apple-system,BlinkMacSystemFont,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
114
+ @font-family: PingFang SC,sans-serif,-apple-system,BlinkMacSystemFont,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
115
115
  @font-size-display-3: 56px;
116
116
  @font-size-display-2: 48px;
117
117
  @font-size-display-1: 36px;
@@ -589,11 +589,11 @@
589
589
  @color-white: #ffffff;
590
590
  @dark-color-text-2: rgba(255, 255, 255, 0.7);
591
591
  @dark-color-white: rgba(255, 255, 255, 0.9);
592
- @color-text-3: rgb(196, 196, 196);
593
- @color-text-2: rgb(127, 127, 127);
592
+ @color-text-3: rgb(134, 144, 156);
593
+ @color-text-2: rgb(78, 89, 105);
594
594
  @color-text-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');
595
595
  @dark-color-text-3: rgba(255, 255, 255, 0.5);
596
- @color-border-2: rgb(222, 222, 222);
596
+ @color-border-2: rgb(229, 230, 235);
597
597
  @color-fill-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');
598
598
  @color-fill-2: rgb(241, 242, 248);
599
599
  @color-fill-3: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@@ -813,10 +813,10 @@
813
813
  @input-color-text_disabled: @color-border-2;
814
814
  @btn-secondary-color-bg: @color-fill-2;
815
815
  @table-font-weight-header-text: @font-weight-700;
816
- @table-color-bg-header-cell: @color-fill-2;
816
+ @table-color-bg-header-cell: @color-fill-table-th;
817
817
  @table-color-text-header-cell: @color-text-1;
818
- @table-color-bg-body-row_hover: @color-fill-1;
819
- @table-color-bg-body-stripe-row: @color-fill-1;
818
+ @table-color-bg-body-row_hover: @color-fill-table-td;
819
+ @table-color-bg-body-stripe-row: @color-fill-table-td;
820
820
  @table-size-middle-font-header-size: @font-size-body-1;
821
821
  @table-size-small-font-header-size: @font-size-body-1;
822
822
  @table-size-default-font-header-size: @font-size-body-1;
@@ -890,3 +890,7 @@
890
890
  @drawer-size-header-height: @size-15;
891
891
  @drawer-margin-footer-button-left: @size-4;
892
892
  @drawer-padding-footer-vertical: 23px;
893
+ @color-fill-table-td: #f8f9fb;
894
+ @dark-color-fill-table-td: #f8f9fb;
895
+ @dark-color-fill-table-th: #f0f2f7;
896
+ @color-fill-table-th: #f0f2f7;