[Bug Report][3.9.0] Sass error when using non-rem value for $alert-title-line-height after recent change

[OTAnagisa]

Environment

Vuetify Version: 3.9.2
Last working version: 3.8.12
Vue Version: 3.5.17
Browsers: Google Chrome
OS: Windows 10

Steps to reproduce

1. Set $alert-title-line-height in your project to a number (e.g. 1.6) or px value instead of rem.
2. Build the project.

Expected Behavior

When customizing $alert-title-line-height with any unit (e.g., number, px, rem), the build should not fail, and the component should render properly.

Actual Behavior

When customizing $alert-title-line-height with a value that is not in rem (such as a unitless number), the build fails with a Sass error due to incompatible units.

Example error:

  File: virtual:plugin-vuetify:components/VAlert/VAlert.sass:48:28
  [sass] Error: 1.6 and 1.5rem are incompatible.
     ╷
  48 │         padding-top: calc(($alert-title-line-height - settings.$line-height-root * 1rem) / 2)
     │                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵

Reproduction Link

https://github.com/OTAnagisa/VuetifyTest/blob/main/src/styles/settings.scss

Other comments

This issue started occurring after the following pull request was merged:
https://github.com/vuetifyjs/vuetify/pull/20700/files#diff-1c2846217423678d3921032d89818548a96d65a6efcf54c3b6ed4abeeba1581a
Note: This issue cannot be demonstrated in the official Vuetify Playground, as it does not support custom Sass variable overrides.

[J-Sek]

It can't/shouldn't be unit-less because of reuse in .v-alert__prepend for min-height.
But we can restore support for px at least.

[OTAnagisa]

Thank you for looking into this issue and providing the explanation! I truly appreciate your quick response. 🙏

I understand the reasoning behind the unit requirements, but I'd like to respectfully share some thoughts that might be worth considering:

The variable $alert-title-line-height seems to have been originally designed specifically for line-height purposes, as suggested by its name. While I understand the practical reason for reusing it in min-height calculations, this might create some confusion for other developers maintaining the code in the future.

Perhaps we could consider:

1. Keeping $alert-title-line-height focused on its original line-height purpose
2. Creating a separate variable (maybe something like $alert-title-min-height) for the prepend section's min-height
3. This way, we could maintain both:
   • The flexibility of using unit-less values for line-height (which is a common CSS practice)
   • The proper units needed for min-height calculations

What do you think about this approach? It might make the code more intuitive while solving the current limitations.

Thanks again for considering this feedback! 🙏

[J-Sek]

Added $alert-prepend-icon-size, so the *-line-height can be whatever.
However, I doubt the content will be properly aligned if you won't keep them in sync.

[OTAnagisa]

Thanks for the fix!
From my perspective, it makes sense to leave $alert-prepend-icon-size configurable so that each project can adjust it as needed.