diff --git a/packages/vlossom/src/components/vs-chip/VsChip.scss b/packages/vlossom/src/components/vs-chip/VsChip.scss
index ba74593f2..68c420294 100644
--- a/packages/vlossom/src/components/vs-chip/VsChip.scss
+++ b/packages/vlossom/src/components/vs-chip/VsChip.scss
@@ -9,12 +9,12 @@
border-radius: var(--vs-chip-borderRadius, 1.3rem);
color: var(--vs-chip-color, var(--vs-comp-color));
display: inline-flex;
- font-size: var(--vs-chip-fontSize, 0.82rem);
+ font-size: var(--vs-chip-fontSize, 1rem);
font-weight: var(--vs-button-fontWeight, 400);
- height: var(--vs-chip-height, 1.5rem);
+ height: var(--vs-chip-height, 1.2rem);
justify-content: center;
- min-height: var(--vs-chip-minHeight, 1.2rem);
- padding: 0 0.4rem;
+ min-height: var(--vs-chip-minHeight, 1.4rem);
+ padding: var(--vs-chip-padding, 0.2rem 0.6rem);
position: relative;
&:after {
@@ -47,17 +47,17 @@
cursor: pointer;
height: calc(var(--vs-chip-height, 1.2rem) * 0.8);
width: calc(var(--vs-chip-height, 1.2rem) * 0.8);
+
+ &.primary {
+ background-color: var(--vs-light-backgroundColor);
+ }
}
.vs-chip-content {
align-items: center;
display: inline-flex;
justify-content: center;
- padding: var(--vs-chip-padding, 0 0.2rem);
- }
-
- .vs-chip-icon + .vs-chip-content {
- margin-left: 0.05rem;
+ padding: 0 0.2rem;
}
&.noRound {
diff --git a/packages/vlossom/src/components/vs-chip/VsChip.vue b/packages/vlossom/src/components/vs-chip/VsChip.vue
index 42faa668e..1983a65f5 100644
--- a/packages/vlossom/src/components/vs-chip/VsChip.vue
+++ b/packages/vlossom/src/components/vs-chip/VsChip.vue
@@ -8,7 +8,7 @@
-