stash

Author: KaelWD

packages/vuetify/src/components/VChip/VChip.tsx

@@ -130,7 +130,7 @@ export const VChip = genericComponent<VChipSlots>()({
     const { densityClasses } = useDensity(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses, roundedStyles } = useRounded(props)
-    const { sizeClasses } = useSize(props)
+    const { sizeClasses, sizeStyles } = useSize(props)
     const { themeClasses } = provideTheme(props)
 
     const isActive = useProxiedModel(props, 'modelValue')
@@ -228,6 +228,7 @@ export const VChip = genericComponent<VChipSlots>()({
           style={[
             colorStyles.value,
             roundedStyles.value,
+            sizeStyles.value,
             props.style,
           ]}
           disabled={ props.disabled || undefined }

packages/vuetify/src/components/VChip/_mixins.scss

@@ -6,70 +6,82 @@
 @use './variables' as *;
 
 @mixin chip-sizes {
-  @each $sizeName, $multiplier in settings.$size-scales {
-    $size: map.get($chip-sizes, "font-size") + math.div(2 * $multiplier, 16);
-    $height: map.get($chip-sizes, "height") + (6 * $multiplier);
-    $padding: math.round(math.div($height, $chip-padding-ratio));
+  $base-height: map.get($chip-sizes, 'height');
+  $base-size: map.get($chip-sizes, 'font-size');
+  $height: var(--v-chip-height);
+  $size: calc($base-size + ($height - $base-height) / 48);
+  $padding: var(--v-chip-padding);
 
-    .v-chip.v-chip--size-#{$sizeName} {
-      --v-chip-size: #{$size};
-      --v-chip-height: #{$height};
-      font-size: $size;
-      padding: 0 $padding;
+  .v-chip {
+    --v-chip-height: var(--v-chip-scale, #{$base-height});
+    --v-chip-size: #{$size};
+    --v-chip-padding: calc($height / #{$chip-padding-ratio});
+    font-size: var(--v-chip-size);
+    height: $height;
+    padding: 0 $padding;
 
-      .v-avatar {
-        --v-avatar-height: #{$height - 6};
+    .v-avatar {
+      --v-avatar-height: calc($height - 6px);
 
-        @at-root #{selector.append('.v-chip--pill', &)} {
-          --v-avatar-height: #{$height};
-        }
+      @at-root #{selector.append('.v-chip--pill', &)} {
+        --v-avatar-height: $height;
       }
+    }
 
-      .v-avatar--start {
-        margin-inline-start: -$padding * .7;
-        margin-inline-end: $padding * .5;
+    .v-avatar--start {
+      margin-inline-start: calc($padding * -0.7);
+      margin-inline-end: calc($padding * 0.5);
 
-        @at-root #{selector.append('.v-chip--pill', &)} {
-          margin-inline-start: -$padding;
-        }
+      @at-root #{selector.append('.v-chip--pill', &)} {
+        margin-inline-start: calc($padding * -1);
       }
+    }
 
-      .v-avatar--end {
-        margin-inline-start: $padding * .5;
-        margin-inline-end: -$padding * .7;
-
+    .v-avatar--end {
+      margin-inline-start: calc($padding * 0.5);
+      margin-inline-end: calc($padding * -0.7);
+      @at-root #{selector.append('.v-chip--pill', &)} {
+        margin-inline-end: calc($padding * -1);
+      }
+      + .v-chip__close {
         @at-root #{selector.append('.v-chip--pill', &)} {
-          margin-inline-end: -$padding;
-        }
-
-        + .v-chip__close {
-          @at-root #{selector.append('.v-chip--pill', &)} {
-            margin-inline-start: $padding * 1.5;
-          }
+          margin-inline-start: calc($padding * 1.5);
         }
       }
+    }
 
-      .v-icon--start,
-      .v-chip__filter {
-        margin-inline-start: -$padding * .5;
-        margin-inline-end: $padding * .5;
-      }
+    .v-icon--start,
+    .v-chip__filter {
+      margin-inline-start: calc($padding * -0.5);
+      margin-inline-end: calc($padding * 0.5);
+    }
 
-      .v-icon--end,
-      .v-chip__close {
-        margin-inline-start: $padding * .5;
-        margin-inline-end: -$padding * .5;
-      }
+    .v-icon--end,
+    .v-chip__close {
+      margin-inline-start: calc($padding * 0.5);
+      margin-inline-end: calc($padding * -0.5);
+    }
 
-      .v-icon--end,
-      .v-avatar--end,
-      .v-chip__append {
-        + .v-chip__close {
-          margin-inline-start: $padding;
-        }
+    .v-icon--end,
+    .v-avatar--end,
+    .v-chip__append {
+      + .v-chip__close {
+        margin-inline-start: $padding;
       }
     }
   }
+
+  @each $sizeName, $multiplier in settings.$size-scales {
+    $size: map.get($chip-sizes, "font-size") + math.div(2 * $multiplier, 16);
+    $height: map.get($chip-sizes, "height") + (6 * $multiplier);
+
+    .v-chip.v-chip--size-#{$sizeName} {
+      --v-chip-size: #{$size};
+      --v-chip-height: #{$height};
+      font-size: $size;
+      padding: 0 calc($height / #{$chip-padding-ratio});
+    }
+  }
 }
 
 @mixin chip-density($properties, $densities) {