fix(VAlert): restore unit-less support in Sass variable for title line-height (#21843)

closes #21841

Author: J-Sek

packages/vuetify/src/components/VAlert/VAlert.sass

@@ -45,7 +45,7 @@
 
     &:not(:has(.v-alert-title))
       .v-alert__content
-        padding-top: calc(($alert-title-line-height - settings.$line-height-root * 1rem) / 2)
+        padding-block: calc((#{$alert-prepend-icon-size} - #{settings.$line-height-root} * 1rem) / 2)
 
   .v-alert__border
     border-radius: inherit
@@ -75,7 +75,9 @@
   .v-alert__close
     flex: 0 1 auto
     grid-area: close
-    margin-block: -2px
+
+    > .v-btn
+      margin-block: calc(-1 * (var(--v-btn-height) + 12px - #{$alert-prepend-icon-size}) / 2)
 
   .v-alert__content
     align-self: center
@@ -99,7 +101,12 @@
     align-items: center
     grid-area: prepend
     margin-inline-end: $alert-prepend-margin-inline-end
-    min-height: $alert-title-line-height
+    min-height: $alert-prepend-icon-size
+
+    > .v-icon
+      font-size: $alert-prepend-icon-size
+      height: $alert-prepend-icon-size
+      width: $alert-prepend-icon-size
 
     .v-alert--prominent &
       align-self: center

packages/vuetify/src/components/VAlert/VAlert.tsx

@@ -114,7 +114,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
       return props.icon ?? `$${props.type}`
     })
 
-    const { iconSize } = useIconSizes(props, () => props.prominent ? 44 : 28)
+    const { iconSize } = useIconSizes(props, () => props.prominent ? 44 : undefined)
     const { themeClasses } = provideTheme(props)
     const { colorClasses, colorStyles, variantClasses } = useVariant(() => ({
       color: props.color ?? props.type,
@@ -146,7 +146,9 @@ export const VAlert = genericComponent<VAlertSlots>()({
       const iconProps = {
         density: props.density,
         icon: icon.value,
-        size: iconSize.value,
+        size: props.iconSize || props.prominent
+          ? iconSize.value
+          : undefined,
       }
 
       return isActive.value && (

packages/vuetify/src/components/VAlert/_variables.scss

@@ -17,6 +17,7 @@ $alert-plain-opacity: .62 !default;
 $alert-plain-transition: .2s opacity settings.$standard-easing !default;
 $alert-positions: absolute fixed sticky !default;
 $alert-prepend-margin-inline-end: 16px !default;
+$alert-prepend-icon-size: 1.75rem !default;
 $alert-append-margin-inline-start: 16px !default;
 $alert-append-close-margin-inline-start: 16px !default;
 
@@ -25,7 +26,6 @@ $alert-title-font-size: tools.map-deep-get(settings.$typography, 'h6', 'size') !
 $alert-title-font-weight: tools.map-deep-get(settings.$typography, 'h6', 'weight') !default;
 $alert-title-hyphens: auto !default;
 $alert-title-letter-spacing: tools.map-deep-get(settings.$typography, 'h6', 'letter-spacing') !default;
-// $alert-title-line-height: tools.map-deep-get(settings.$typography, 'h6', 'line-height') !default;
 $alert-title-line-height: 1.75rem !default;
 $alert-title-overflow-wrap: normal !default;
 $alert-title-text-transform: none !default;