@arco-themes/vue-startrek 0.0.3 → 0.0.5

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 +13 -0
  2. package/css/arco.css +1 -1
  3. package/package.json +1 -1
  4. package/theme.css +12 -12
  5. package/theme.less +15 -12
  6. package/tokens.less +58 -22
  7. package/variables.less +19 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arco-themes/vue-startrek",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "",
5
5
  "author": "changxiaoru1122",
6
6
  "owners": [],
package/theme.css CHANGED
@@ -7,9 +7,9 @@ body {
7
7
  --color-border: rgb(var(--gray-3));
8
8
  --color-bg-popup: var(--color-bg-5);
9
9
  --color-bg-1: #fff;
10
- --color-bg-2: #fff;
11
- --color-bg-3: #fff;
12
- --color-bg-4: #fff;
10
+ --color-bg-2: #f2f6fd;
11
+ --color-bg-3: #f7f8fa;
12
+ --color-bg-4: #f7f8fa;
13
13
  --color-bg-5: #fff;
14
14
  --color-bg-white: #fff;
15
15
  --color-neutral-1: rgb(var(--gray-1));
@@ -25,15 +25,15 @@ body {
25
25
  --color-text-1: #12141a;
26
26
  --color-text-2: #34363f;
27
27
  --color-text-3: #5e6375;
28
- --color-text-4: #5e6375;
29
- --color-fill-1: var(--color-neutral-1);
30
- --color-fill-2: var(--color-neutral-2);
31
- --color-fill-3: var(--color-neutral-3);
32
- --color-fill-4: var(--color-neutral-4);
33
- --color-border-1: var(--color-neutral-2);
34
- --color-border-2: var(--color-neutral-3);
35
- --color-border-3: var(--color-neutral-4);
36
- --color-border-4: var(--color-neutral-6);
28
+ --color-text-4: #9799a4;
29
+ --color-fill-1: #f2f6fd;
30
+ --color-fill-2: #f0f2f5;
31
+ --color-fill-3: #dce0e5;
32
+ --color-fill-4: #c6c8cc;
33
+ --color-border-1: #f0f2f5;
34
+ --color-border-2: #dce0e5;
35
+ --color-border-3: #c6c8cc;
36
+ --color-border-4: #9799a4;
37
37
  --color-primary-light-1: rgb(var(--primary-1));
38
38
  --color-primary-light-2: rgb(var(--primary-2));
39
39
  --color-primary-light-3: rgb(var(--primary-3));
package/theme.less CHANGED
@@ -597,35 +597,35 @@
597
597
  @dark-color-white: rgba(255, 255, 255, 0.9);
598
598
  @color-text-3: rgb(94, 99, 117);
599
599
  @color-text-2: rgb(52, 54, 63);
600
- @color-text-4: rgb(94, 99, 117);
600
+ @color-text-4: rgb(151, 153, 164);
601
601
  @dark-color-text-3: rgba(255, 255, 255, 0.5);
602
- @color-border-2: var(~'@{arco-cssvars-prefix}-color-neutral-3');
603
- @color-fill-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');
604
- @color-fill-2: var(~'@{arco-cssvars-prefix}-color-neutral-2');
605
- @color-fill-3: var(~'@{arco-cssvars-prefix}-color-neutral-3');
602
+ @color-border-2: rgb(220, 224, 229);
603
+ @color-fill-4: rgb(198, 200, 204);
604
+ @color-fill-2: rgb(240, 242, 245);
605
+ @color-fill-3: rgb(220, 224, 229);
606
606
  @dark-color-bg-1: #17171A;
607
607
  @dark-color-fill-4: rgba(255, 255, 255, 0.16);
608
608
  @dark-color-bg-white: #f6f6f6;
609
609
  @dark-color-border-1: @dark-gray-2;
610
610
  @color-bg-1: #ffffff;
611
- @color-border-1: var(~'@{arco-cssvars-prefix}-color-neutral-2');
611
+ @color-border-1: rgb(240, 242, 245);
612
612
  @dark-color-border-2: @dark-gray-3;
613
- @color-fill-1: var(~'@{arco-cssvars-prefix}-color-neutral-1');
613
+ @color-fill-1: rgb(242, 246, 253);
614
614
  @dark-color-border-4: @dark-gray-6;
615
615
  @dark-color-fill-1: rgba(255, 255, 255, 0.04);
616
- @color-border-4: var(~'@{arco-cssvars-prefix}-color-neutral-6');
616
+ @color-border-4: rgb(151, 153, 164);
617
617
  @dark-color-fill-2: rgba(255, 255, 255, 0.08);
618
618
  @dark-color-border-3: @dark-gray-4;
619
619
  @dark-color-fill-3: rgba(255, 255, 255, 0.12);
620
- @color-bg-3: #ffffff;
620
+ @color-bg-3: rgb(247, 248, 250);
621
621
  @dark-color-bg-2: #232324;
622
622
  @dark-color-bg-4: #313132;
623
623
  @dark-color-bg-5: #373739;
624
624
  @color-bg-5: #ffffff;
625
- @color-bg-4: #ffffff;
625
+ @color-bg-4: rgb(247, 248, 250);
626
626
  @dark-color-bg-3: #2a2a2b;
627
- @color-bg-2: #ffffff;
628
- @color-border-3: var(~'@{arco-cssvars-prefix}-color-neutral-4');
627
+ @color-bg-2: rgb(242, 246, 253);
628
+ @color-border-3: rgb(198, 200, 204);
629
629
  @textarea-prefix-cls: ~'@{prefix}-textarea';
630
630
  @color-primary-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));
631
631
  @color-primary-5: rgb(var(~'@{arco-cssvars-prefix}-primary-5'));
@@ -803,6 +803,9 @@
803
803
  @skeleton-prefix-cls: ~'@{prefix}-skeleton';
804
804
  @arco-vars-prefix: ~'';
805
805
  @arco-cssvars-prefix: if(@arco-vars-prefix = ~'', -, ~'--@{arco-vars-prefix}');
806
+ @watermark-prefix-cls: ~'@{prefix}-watermark';
807
+ @verification-code-prefix-cls: ~'@{prefix}-verification-code';
808
+ @color-prefix-cls: ~'@{prefix}-color';
806
809
  @color-text-5: #c6c8cc;
807
810
  @dark-color-text-5: #c6c8cc;
808
811
  @dark-color-text-6: #dce0e5;
package/tokens.less CHANGED
@@ -753,23 +753,23 @@
753
753
  @color-border: rgb(var(--gray-3));
754
754
  @color-bg-popup: var(--color-bg-5);
755
755
  @color-bg-1: #ffffff;
756
- @color-bg-2: #ffffff;
757
- @color-bg-3: #ffffff;
758
- @color-bg-4: #ffffff;
756
+ @color-bg-2: #f2f6fd;
757
+ @color-bg-3: #f7f8fa;
758
+ @color-bg-4: #f7f8fa;
759
759
  @color-bg-5: #ffffff;
760
760
  @color-bg-white: #ffffff;
761
761
  @color-text-1: #12141a;
762
762
  @color-text-2: #34363f;
763
763
  @color-text-3: #5e6375;
764
- @color-text-4: #5e6375;
765
- @color-fill-1: var(--color-neutral-1);
766
- @color-fill-2: var(--color-neutral-2);
767
- @color-fill-3: var(--color-neutral-3);
768
- @color-fill-4: var(--color-neutral-4);
769
- @color-border-1: var(--color-neutral-2);
770
- @color-border-2: var(--color-neutral-3);
771
- @color-border-3: var(--color-neutral-4);
772
- @color-border-4: var(--color-neutral-6);
764
+ @color-text-4: #9799a4;
765
+ @color-fill-1: #f2f6fd;
766
+ @color-fill-2: #f0f2f5;
767
+ @color-fill-3: #dce0e5;
768
+ @color-fill-4: #c6c8cc;
769
+ @color-border-1: #f0f2f5;
770
+ @color-border-2: #dce0e5;
771
+ @color-border-3: #c6c8cc;
772
+ @color-border-4: #9799a4;
773
773
  @color-primary-light-1: rgb(var(--primary-1));
774
774
  @color-primary-light-2: rgb(var(--primary-2));
775
775
  @color-primary-light-3: rgb(var(--primary-3));
@@ -794,10 +794,41 @@
794
794
  @color-link-light-2: rgb(var(--link-2));
795
795
  @color-link-light-3: rgb(var(--link-3));
796
796
  @color-link-light-4: rgb(var(--link-4));
797
+ @color-prefix-cls: ~'@{prefix}-color';
797
798
  @color-text-5: #c6c8cc;
798
799
  @color-text-6: #dce0e5;
799
800
  @color-text-7: #f0f2f5;
800
801
  @color-text-8: #f2f6fd;
802
+ @color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
803
+ @color-panel-preview-size: 40px;
804
+ @color-control-bar-handle-size: @size-4;
805
+ @color-control-bar-height: 14px;
806
+ @color-control-bar-width: 182px;
807
+ @color-palette-handle-border-size: @border-2;
808
+ @color-palette-handle-size: @size-4;
809
+ @color-palette-height: 178px;
810
+ @color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');
811
+ @color-panel-border-radius: @border-radius-small;
812
+ @color-panel-padding: @spacing-6;
813
+ @color-panel-width: 260px;
814
+ @color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
815
+ @color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
816
+ @color-preview-border-size: @border-1;
817
+ @color-input-border-radius: @border-radius-small;
818
+ @color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
819
+ @color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
820
+ @color-value-size-large-font-size: @font-size-body-3;
821
+ @color-value-size-default-font-size: @font-size-body-3;
822
+ @color-value-size-small-font-size: @font-size-body-3;
823
+ @color-value-size-mini-font-size: @font-size-body-1;
824
+ @color-input-size-large-padding-horizontal: 5px;
825
+ @color-input-size-default-padding-horizontal: @spacing-2;
826
+ @color-input-size-small-padding-horizontal: @spacing-2;
827
+ @color-input-size-mini-padding-horizontal: @spacing-2;
828
+ @color-preview-size-large: 26px;
829
+ @color-preview-size-default: @size-6;
830
+ @color-preview-size-small: 22px;
831
+ @color-preview-size-mini: @size-4;
801
832
 
802
833
 
803
834
  /*********** shadow1 ***********/
@@ -987,7 +1018,7 @@
987
1018
 
988
1019
  @input-color-bg: transparent;
989
1020
  @input-color-bg_hover: transparent;
990
- @input-color-bg_focus: var(--color-bg-2);
1021
+ @input-color-bg_focus: transparent;
991
1022
  @input-color-bg_disabled: #f0f2f5;
992
1023
  @input-color-addon-bg: transparent;
993
1024
  @input-color-addon-border: var(--color-neutral-3);
@@ -997,11 +1028,11 @@
997
1028
  @input-size-shadow_focus: 0;
998
1029
  @input-color-addon-border_default: transparent;
999
1030
  @input-color-text: #34363f;
1000
- @input-color-placeholder-text: #5e6375;
1031
+ @input-color-placeholder-text: #9799a4;
1001
1032
  @input-color-text_disabled: #c6c8cc;
1002
1033
  @input-color-bg_error: transparent;
1003
1034
  @input-color-bg_error_hover: transparent;
1004
- @input-color-bg_error_focus: var(--color-bg-2);
1035
+ @input-color-bg_error_focus: transparent;
1005
1036
  @input-color-border_error_focus: rgb(var(--danger-6));
1006
1037
  @input-color-shadow_error_focus: var(--color-danger-light-2);
1007
1038
  @input-size-shadow_error_focus: 0;
@@ -1195,7 +1226,7 @@
1195
1226
  @picker-color-border_error: transparent;
1196
1227
  @picker-color-border_error_hover: transparent;
1197
1228
  @picker-color-border_error_focus: rgb(var(--danger-6));
1198
- @picker-color-placeholder: #5e6375;
1229
+ @picker-color-placeholder: #9799a4;
1199
1230
  @picker-color-placeholder_disabled: var(--color-text-4);
1200
1231
  @picker-color-text: var(--color-text-2);
1201
1232
  @picker-color-text_disabled: var(--color-text-4);
@@ -1663,11 +1694,11 @@
1663
1694
 
1664
1695
  @btn-font-weight: 400;
1665
1696
  @btn-border-width: 1px;
1666
- @btn-border-radius: var(--border-radius-small);
1667
- @btn-size-mini-radius: var(--border-radius-small);
1668
- @btn-size-small-radius: var(--border-radius-small);
1669
- @btn-size-default-radius: var(--border-radius-small);
1670
- @btn-size-large-radius: var(--border-radius-small);
1697
+ @btn-border-radius: 4px;
1698
+ @btn-size-mini-radius: 4px;
1699
+ @btn-size-small-radius: 4px;
1700
+ @btn-size-default-radius: 4px;
1701
+ @btn-size-large-radius: 4px;
1671
1702
  @btn-size-mini-height: 24px;
1672
1703
  @btn-size-small-height: 28px;
1673
1704
  @btn-size-default-height: 32px;
@@ -1937,7 +1968,7 @@
1937
1968
  @btn-text-color-border_success_hover: transparent;
1938
1969
  @btn-text-color-border_success_active: transparent;
1939
1970
  @btn-text-border-style: solid;
1940
- @btn-size-medium-radius: var(--border-radius-small);
1971
+ @btn-size-medium-radius: 4px;
1941
1972
  @btn-size-medium-border-width: 1px;
1942
1973
  @btn-size-medium-icon-spacing: 8px;
1943
1974
  @btn-size-medium-icon-vertical-align: -2px;
@@ -3894,3 +3925,8 @@
3894
3925
  /*********** verification ***********/
3895
3926
 
3896
3927
  @verification-code-prefix-cls: ~'@{prefix}-verification-code';
3928
+
3929
+
3930
+ /*********** watermark ***********/
3931
+
3932
+ @watermark-prefix-cls: ~'@{prefix}-watermark';
package/variables.less CHANGED
@@ -591,35 +591,35 @@
591
591
  @dark-color-white: rgba(255, 255, 255, 0.9);
592
592
  @color-text-3: rgb(94, 99, 117);
593
593
  @color-text-2: rgb(52, 54, 63);
594
- @color-text-4: rgb(94, 99, 117);
594
+ @color-text-4: rgb(151, 153, 164);
595
595
  @dark-color-text-3: rgba(255, 255, 255, 0.5);
596
- @color-border-2: var(~'@{arco-cssvars-prefix}-color-neutral-3');
597
- @color-fill-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');
598
- @color-fill-2: var(~'@{arco-cssvars-prefix}-color-neutral-2');
599
- @color-fill-3: var(~'@{arco-cssvars-prefix}-color-neutral-3');
596
+ @color-border-2: rgb(220, 224, 229);
597
+ @color-fill-4: rgb(198, 200, 204);
598
+ @color-fill-2: rgb(240, 242, 245);
599
+ @color-fill-3: rgb(220, 224, 229);
600
600
  @dark-color-bg-1: #17171A;
601
601
  @dark-color-fill-4: rgba(255, 255, 255, 0.16);
602
602
  @dark-color-bg-white: #f6f6f6;
603
603
  @dark-color-border-1: @dark-gray-2;
604
604
  @color-bg-1: #ffffff;
605
- @color-border-1: var(~'@{arco-cssvars-prefix}-color-neutral-2');
605
+ @color-border-1: rgb(240, 242, 245);
606
606
  @dark-color-border-2: @dark-gray-3;
607
- @color-fill-1: var(~'@{arco-cssvars-prefix}-color-neutral-1');
607
+ @color-fill-1: rgb(242, 246, 253);
608
608
  @dark-color-border-4: @dark-gray-6;
609
609
  @dark-color-fill-1: rgba(255, 255, 255, 0.04);
610
- @color-border-4: var(~'@{arco-cssvars-prefix}-color-neutral-6');
610
+ @color-border-4: rgb(151, 153, 164);
611
611
  @dark-color-fill-2: rgba(255, 255, 255, 0.08);
612
612
  @dark-color-border-3: @dark-gray-4;
613
613
  @dark-color-fill-3: rgba(255, 255, 255, 0.12);
614
- @color-bg-3: #ffffff;
614
+ @color-bg-3: rgb(247, 248, 250);
615
615
  @dark-color-bg-2: #232324;
616
616
  @dark-color-bg-4: #313132;
617
617
  @dark-color-bg-5: #373739;
618
618
  @color-bg-5: #ffffff;
619
- @color-bg-4: #ffffff;
619
+ @color-bg-4: rgb(247, 248, 250);
620
620
  @dark-color-bg-3: #2a2a2b;
621
- @color-bg-2: #ffffff;
622
- @color-border-3: var(~'@{arco-cssvars-prefix}-color-neutral-4');
621
+ @color-bg-2: rgb(242, 246, 253);
622
+ @color-border-3: rgb(198, 200, 204);
623
623
  @textarea-prefix-cls: ~'@{prefix}-textarea';
624
624
  @color-primary-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));
625
625
  @color-primary-5: rgb(var(~'@{arco-cssvars-prefix}-primary-5'));
@@ -797,14 +797,15 @@
797
797
  @skeleton-prefix-cls: ~'@{prefix}-skeleton';
798
798
  @arco-vars-prefix: ~'';
799
799
  @arco-cssvars-prefix: if(@arco-vars-prefix = ~'', -, ~'--@{arco-vars-prefix}');
800
+ @watermark-prefix-cls: ~'@{prefix}-watermark';
801
+ @verification-code-prefix-cls: ~'@{prefix}-verification-code';
802
+ @color-prefix-cls: ~'@{prefix}-color';
800
803
  @color-text-5: #c6c8cc;
801
804
  @dark-color-text-5: #c6c8cc;
802
805
  @dark-color-text-6: #dce0e5;
803
806
  @color-text-6: #dce0e5;
804
807
  @color-text-7: #f0f2f5;
805
808
  @dark-color-text-7: #f0f2f5;
806
- @color-text-8: #f2f6fd;
807
- @dark-color-text-8: #f2f6fd;
808
809
  @divider-color-bg: @color-text-7;
809
810
  @input-number-step-button-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
810
811
  @input-border-radius: @border-radius-medium;
@@ -828,3 +829,7 @@
828
829
  @picker-color-bg_disabled: @color-text-7;
829
830
  @picker-color-border_disabled: @color-text-6;
830
831
  @input-color-bg_disabled: @color-text-7;
832
+ @btn-border-radius: @border-radius-medium;
833
+ @color-text-8: #f2f6fd;
834
+ @dark-color-text-8: #f2f6fd;
835
+ @input-color-bg_focus: @color-transparent;