fix(css-variables): add root selector without classname (#5513)

* fix(css-variables): add root selector without classname

Need to add the `:root` in addition to `:root.classname` for some use cases, when we do not need to add the class in html tag for sites that does not have multiple themes

* fix: changeset

Author: iManu

.changeset/dirty-numbers-doubt.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/themes": minor
+---
+
+add simple root selector for generated css

packages/themes/public/style/dark.css

@@ -1,3 +1,4 @@
+:root,
 :root.dark-theme {
     --color-danger-background: #4e0921;
     --color-danger-background-disabled: #47081e;

packages/themes/public/style/darker.css

@@ -1,3 +1,4 @@
+:root,
 :root.darker-theme {
     --color-danger-background: #2e0514;
     --color-danger-background-disabled: #20040e;

packages/themes/public/style/light.css

@@ -1,3 +1,4 @@
+:root,
 :root.light-theme {
     --color-danger-background: #ffebf2;
     --color-danger-background-disabled: #fff3f7;

utils/scripts/create-css-variables.tsx

@@ -69,7 +69,7 @@ export const generateThemeCss = ({
   uvTheme: UvThemeType
   filename: string
 }) =>
-  `:root.${filename}-theme {\n${
+  `:root,\n:root.${filename}-theme {\n${
     createCssVariables('color', uvTheme.colors) +
     createCssVariables('radius', uvTheme.radii) +
     createCssVariables('shadow', uvTheme.shadows) +