Apply CSS Variable to `:root`

[mrleblanc101]

All CSS variables should be applied to :root so they can be easily overrided in CSS without requiring to create a custom theme in JS.

Currently:

<script setup lang="ts">
import { Notification, NotificationProgress, Notivue, NotivueSwipe, lightTheme } from 'notivue';

const theme: NotivueTheme = {
    ...lightTheme,
    '--nv-radius': '2rem',
};
</script>

But it would be better like this:

:root {
    --nv-radius: '2rem',
}

[smastrom]

I totally get your point to prefer CSS over JS. I will think about what can be done about that. For the moment you can pass an empty object as theme and then, define the variables via CSS under the notification selector (.Notivue__notification).

[mrleblanc101]

@smastrom It's odd because --nv-z need to be defined in CSS, it's not in the theme type definition, but the other variables are in JS.
Theming should all be handled via CSS imho.