vuetify
vuetify copied to clipboard
fix(VDialog): Do not override typography defined for VCard
Description
VDialog overrides line-height
and font-size
forcing me to add very specific CSS overrides to make the UI consistent. inherit
in context of CSS does not mean "take previous value", but rather "pull value from parent element".
In the example below, the effective line-height
is 1.5
defined on the html
level for the base font size 16px
it then resolves to 24px
.
The same VCard outside of VDialog has smaller font size (14px) and line height 1.25rem
(20px).
Variables $card-text-font-size
and equivalent for line-height
date back to October 2019. Dialog got these inheirt
before 3.0.0-alpha in June 2021 as part of a wider fix of styling inconsistencies and $dialog-card-title-font-size
was removed, while equivalent for line-height
supposedly never existed.
I get why cards inside dialog should have larger text, but since I find normal cards unnecessarily small and already bump it up with dedicated variable, it would be nice to avoid this tricky override. The code below could be simplified, but reduction could bite me later and I don't like this feeling.
.v-dialog > .v-overlay__content > .v-card > .v-card-text,
.v-dialog > .v-overlay__content > form > .v-card > .v-card-text
font-size: $card-text-font-size
@include card-line-height-densities($card-text-density-line-height)
Another consideration is Material Design specification. I am not familiar with your sources for specification. A quick search reaveals that M2 is consistent with current approach [1] (font size 16px, line height 24px), but M3 looks like the text is smaller [2] and in line with Card.
A brief search did not reveal any issues that might cover this problem. I have skipped to PR, but I would be glad to discuss and adapt the changes.