[Feature Request] $vuetify.application values as customProperties

[spencercap]

Problem to solve

The Vuetify v-app-bar and v-navigation-drawer components play nicely when setting their height and width as attributes vs inline styles (for example, v-content and v-navigation-drawer set their padding based on these) but I've found that I occasionally need to access the v-app-bar height or v-navigation-drawer width elsewhere in my webapp so having their values available globally would be super helpful.

Proposed solution

In a similar way that Vuetify stores theme colors in the $vuetify object AND as custom CSS properties, it'd be nice to access other global style constants (such as header height) via custom properties.

This way, you could set the height attribute via something like:
set in vuetify.ts:

export default new Vuetify({
    theme: {
        constants: {
            headerHeight: '90px'
        },
        options: {
            customProperties: true
        },
        themes: { ... }
    }
});

in vue markup:

<v-app-bar
    :height="$vuetify.theme.constants.headerHeight"
    ...

in CSS like:

#banner {
    margin-top: var(--v-constants-headerHeight);
}

Maybe this solution would come in handy in neat other ways too 🙃

[spencercap]

I did come up with a solution for this (that is, syncing Vue data with CSS custom properties).

main.ts / main.js :

Vue.prototype.$constants = {
    navWidth: 300,
    headerHeight: '200px'
};

App.vue (style binding to the outermost element) :

<v-app
    id="app"
    data-app
    :style="
        Object.entries($constants)
            .map(c => {
                return `--${c[0]}: ${c[1]};`;
            })
            .join(' ')
    "
>
...

css :

.something { 
    width: calc(var(--navWidth) * 1px); /* if you want to keep constants unitless */
    height: var(--headerHeight);
}

[KaelWD]

We'll expose those values to JS and you can use Vue's <style vars> to create css variables where needed: vuejs/rfcs#226