vcomply-design-system 1.2.8 → 1.3.0

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 (3) hide show
  1. package/css-build/less/chip/chip.less +73 -71
  2. package/css-build/less/color/color.less +62 -62
  3. package/package.json +1 -1
package/css-build/less/chip/chip.less CHANGED
@@ -1,80 +1,82 @@
1
- @import url('../mixin/mixin.less');
2
- @import url('../color/color.less');
1
+ @import url("../mixin/mixin.less");
2
+ @import url("../color/color.less");
3
3
 
4
4
  .vx-chip {
5
- background: @neutral-0;
6
- border-radius: .125rem;
7
- border: 1px solid @blue-10;
8
- box-shadow: 0px 0px 2px #1E5DD326;
9
- padding: 0 .5rem;
10
- height: 1.5rem;
11
- display: inline-flex;
12
- align-items: center;
5
+ background: @neutral-0;
6
+ border-radius: 0.125rem;
7
+ border: 1px solid @blue-10;
8
+ box-shadow: 0px 0px 2px #1e5dd326;
9
+ padding: 0 0.5rem;
10
+ height: 1.5rem;
11
+ display: inline-flex;
12
+ align-items: center;
13
13
 
14
- .chipContent {
15
- color: @neutral-100;
16
- font-size: 11px;
17
- line-height: 1rem;
18
- text-overflow: ellipsis;
19
- white-space: nowrap;
20
- overflow: hidden;
21
- max-width: 6rem;
22
- }
14
+ .chipContent {
15
+ color: @neutral-100;
16
+ font-size: 11px;
17
+ line-height: 1rem;
18
+ text-overflow: ellipsis;
19
+ white-space: nowrap;
20
+ overflow: hidden;
21
+ max-width: 6rem;
22
+ }
23
23
 
24
- .chipCount {
25
- background: @blue-60;
26
- border-radius: 1.25rem;
27
- border: none;
28
- color: @neutral-0;
29
- font-size: 9px;
30
- font-weight: 600;
31
- padding: 0 .25rem;
32
- margin: 0 0 0 .5rem;
33
- display: flex;
34
- align-items: center;
35
- justify-content: center;
36
- height: 1rem;
37
- width: 1.125rem;
38
- }
24
+ .chipCount {
25
+ background: @blue-60;
26
+ border-radius: 1.25rem;
27
+ border: none;
28
+ color: @neutral-0;
29
+ font-size: 9px;
30
+ font-weight: 600;
31
+ padding: 0 0.25rem;
32
+ margin: 0 0 0 0.5rem;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ height: 1rem;
37
+ width: 1.125rem;
38
+ }
39
39
 
40
- .chipLabel {
41
- background: @gray-20;
42
- border-radius: .125rem;
43
- color: @blue-80;
44
- font-size: 9px;
45
- font-weight: 500;
46
- line-height: .75rem;
47
- padding: 0 .125rem;
48
- margin-right: .5rem;
49
- }
40
+ .chipLabel {
41
+ background: @gray-20;
42
+ border-radius: 0.125rem;
43
+ color: @blue-80;
44
+ font-size: 9px;
45
+ font-weight: 500;
46
+ line-height: 0.75rem;
47
+ padding: 0 0.125rem;
48
+ margin-right: 0.5rem;
49
+ min-width: 0.75rem;
50
+ text-align: center;
51
+ }
50
52
 
51
- .chipHeading {
52
- color: @gray-60;
53
- font-size: 9px;
54
- font-weight: 500;
55
- line-height: .75rem;
56
- margin-right: .5rem;
57
- }
53
+ .chipHeading {
54
+ color: @gray-60;
55
+ font-size: 9px;
56
+ font-weight: 500;
57
+ line-height: 0.75rem;
58
+ margin-right: 0.5rem;
59
+ }
58
60
 
59
- button {
60
- &.chipCross {
61
- background: transparent;
62
- border-radius: .125rem;
63
- border: none;
64
- color: @gray-60;
65
- font-size: 10px;
66
- display: flex;
67
- align-items: center;
68
- justify-content: center;
69
- min-width: 16px;
70
- width: 16px;
71
- height: 16px;
72
- margin: 0 .25rem 0 -.25rem;
73
- padding: 0;
61
+ button {
62
+ &.chipCross {
63
+ background: transparent;
64
+ border-radius: 0.125rem;
65
+ border: none;
66
+ color: @gray-60;
67
+ font-size: 10px;
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ min-width: 16px;
72
+ width: 16px;
73
+ height: 16px;
74
+ margin: 0 0.25rem 0 -0.25rem;
75
+ padding: 0;
74
76
 
75
- &:hover {
76
- background: @gray-20;
77
- }
78
- }
77
+ &:hover {
78
+ background: @gray-20;
79
+ }
79
80
  }
80
- }
81
+ }
82
+ }
package/css-build/less/color/color.less CHANGED
@@ -598,80 +598,80 @@
598
598
 
599
599
  // New Bg css color
600
600
  // Blue
601
- @vx-bg-blue-10: #f4f8ff;
602
- @vx-bg-blue-20: #e2ecff;
603
- @vx-bg-blue-30: #bcd0f6;
604
- @vx-bg-blue-40: #7aa7f7;
605
- @vx-bg-blue-50: #4681ef;
606
- @vx-bg-blue-60: #1e5dd3;
607
- @vx-bg-blue-70: #1146a8;
608
- @vx-bg-blue-80: #042e7d;
609
- @vx-bg-blue-90: #0d2556;
610
- @vx-bg-blue-100: #161b2f;
601
+ @bg-blue-10: #f4f8ff;
602
+ @bg-blue-20: #e2ecff;
603
+ @bg-blue-30: #bcd0f6;
604
+ @bg-blue-40: #7aa7f7;
605
+ @bg-blue-50: #4681ef;
606
+ @bg-blue-60: #1e5dd3;
607
+ @bg-blue-70: #1146a8;
608
+ @bg-blue-80: #042e7d;
609
+ @bg-blue-90: #0d2556;
610
+ @bg-blue-100: #161b2f;
611
611
 
612
612
  // Green
613
- @vx-bg-green-10: #ddf4e0;
614
- @vx-bg-green-20: #caebcf;
615
- @vx-bg-green-30: #b7e2bd;
616
- @vx-bg-green-40: #97d2a0;
617
- @vx-bg-green-50: #66bf72;
618
- @vx-bg-green-60: #34aa44;
619
- @vx-bg-green-70: #1c802a;
620
- @vx-bg-green-80: #04550f;
621
- @vx-bg-green-90: #023c0a;
622
- @vx-bg-green-100: #021d05;
613
+ @bg-green-10: #ddf4e0;
614
+ @bg-green-20: #caebcf;
615
+ @bg-green-30: #b7e2bd;
616
+ @bg-green-40: #97d2a0;
617
+ @bg-green-50: #66bf72;
618
+ @bg-green-60: #34aa44;
619
+ @bg-green-70: #1c802a;
620
+ @bg-green-80: #04550f;
621
+ @bg-green-90: #023c0a;
622
+ @bg-green-100: #021d05;
623
623
 
624
624
  // Red
625
- @vx-bg-red-10: #ffeeeb;
626
- @vx-bg-red-20: #fdd9d1;
627
- @vx-bg-red-30: #fac3b7;
628
- @vx-bg-red-40: #e38b7a;
629
- @vx-bg-red-50: #d5624b;
630
- @vx-bg-red-60: #c7381b;
631
- @vx-bg-red-70: #a82a1d;
632
- @vx-bg-red-80: #781c17;
633
- @vx-bg-red-90: #470e10;
634
- @vx-bg-red-100: #2f090a;
625
+ @bg-red-10: #ffeeeb;
626
+ @bg-red-20: #fdd9d1;
627
+ @bg-red-30: #fac3b7;
628
+ @bg-red-40: #e38b7a;
629
+ @bg-red-50: #d5624b;
630
+ @bg-red-60: #c7381b;
631
+ @bg-red-70: #a82a1d;
632
+ @bg-red-80: #781c17;
633
+ @bg-red-90: #470e10;
634
+ @bg-red-100: #2f090a;
635
635
 
636
636
  // Orange
637
- @vx-bg-orange-10: #fdf1e8;
638
- @vx-bg-orange-20: #fbe3d0;
639
- @vx-bg-orange-30: #f7c8a1;
640
- @vx-bg-orange-40: #f2ac73;
641
- @vx-bg-orange-50: #ee9044;
642
- @vx-bg-orange-60: #e87315;
643
- @vx-bg-orange-70: #bb5d11;
644
- @vx-bg-orange-80: #8c460d;
645
- @vx-bg-orange-90: #5e2f08;
646
- @vx-bg-orange-100: #2f1704;
637
+ @bg-orange-10: #fdf1e8;
638
+ @bg-orange-20: #fbe3d0;
639
+ @bg-orange-30: #f7c8a1;
640
+ @bg-orange-40: #f2ac73;
641
+ @bg-orange-50: #ee9044;
642
+ @bg-orange-60: #e87315;
643
+ @bg-orange-70: #bb5d11;
644
+ @bg-orange-80: #8c460d;
645
+ @bg-orange-90: #5e2f08;
646
+ @bg-orange-100: #2f1704;
647
647
 
648
648
  // Yellow
649
- @vx-bg-yellow-10: #fef8e7;
650
- @vx-bg-yellow-20: #fcf2cf;
651
- @vx-bg-yellow-30: #fae6a3;
652
- @vx-bg-yellow-40: #f7d873;
653
- @vx-bg-yellow-50: #f5cc48;
654
- @vx-bg-yellow-60: #f2bf19;
655
- @vx-bg-yellow-70: #cb9e0b;
656
- @vx-bg-yellow-80: #967508;
657
- @vx-bg-yellow-90: #654f06;
658
- @vx-bg-yellow-100: #302603;
649
+ @bg-yellow-10: #fef8e7;
650
+ @bg-yellow-20: #fcf2cf;
651
+ @bg-yellow-30: #fae6a3;
652
+ @bg-yellow-40: #f7d873;
653
+ @bg-yellow-50: #f5cc48;
654
+ @bg-yellow-60: #f2bf19;
655
+ @bg-yellow-70: #cb9e0b;
656
+ @bg-yellow-80: #967508;
657
+ @bg-yellow-90: #654f06;
658
+ @bg-yellow-100: #302603;
659
659
 
660
660
  // Gray
661
- @vx-bg-gray-10: #f9f9fa;
662
- @vx-bg-gray-20: #f2f2f5;
663
- @vx-bg-gray-30: #e3e3e9;
664
- @vx-bg-gray-40: #cdced6;
665
- @vx-bg-gray-50: #a9aab6;
666
- @vx-bg-gray-60: #787a8c;
667
- @vx-bg-gray-70: #565a6f;
668
- @vx-bg-gray-80: #343952;
669
- @vx-bg-gray-90: #282e48;
670
- @vx-bg-gray-100: #242940;
661
+ @bg-gray-10: #f9f9fa;
662
+ @bg-gray-20: #f2f2f5;
663
+ @bg-gray-30: #e3e3e9;
664
+ @bg-gray-40: #cdced6;
665
+ @bg-gray-50: #a9aab6;
666
+ @bg-gray-60: #787a8c;
667
+ @bg-gray-70: #565a6f;
668
+ @bg-gray-80: #343952;
669
+ @bg-gray-90: #282e48;
670
+ @bg-gray-100: #242940;
671
671
 
672
672
  // Neutral
673
- @vx-bg-neutral-100: #000000;
674
- @vx-bg-neutral-0: #ffffff;
673
+ @bg-neutral-100: #000000;
674
+ @bg-neutral-0: #ffffff;
675
675
 
676
676
  // Background
677
677
  .vx-bg {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vcomply-design-system",
3
- "version": "1.2.8",
3
+ "version": "1.3.0",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {