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

iManu · web-flow · commit 4439df607ffa · 2025-09-09T09:12:54.000+02:00
* 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
diff --git a/.changeset/dirty-numbers-doubt.md b/.changeset/dirty-numbers-doubt.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/themes": minor
+---
+
+add simple root selector for generated css
diff --git a/packages/themes/public/style/dark.css b/packages/themes/public/style/dark.css
@@ -1,3 +1,4 @@
+:root,
 :root.dark-theme {
     --color-danger-background: #4e0921;
     --color-danger-background-disabled: #47081e;
diff --git a/packages/themes/public/style/darker.css b/packages/themes/public/style/darker.css
@@ -1,3 +1,4 @@
+:root,
 :root.darker-theme {
     --color-danger-background: #2e0514;
     --color-danger-background-disabled: #20040e;
diff --git a/packages/themes/public/style/light.css b/packages/themes/public/style/light.css
@@ -1,3 +1,4 @@
+:root,
 :root.light-theme {
     --color-danger-background: #ffebf2;
     --color-danger-background-disabled: #fff3f7;
diff --git a/utils/scripts/create-css-variables.tsx b/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) +

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@ultraviolet/themes": minor
 +---
++
 +add simple root selector for generated css
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+:root,`
`1`	`2`	`:root.dark-theme {`
`2`	`3`	`--color-danger-background: #4e0921;`
`3`	`4`	`--color-danger-background-disabled: #47081e;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+:root,`
`1`	`2`	`:root.darker-theme {`
`2`	`3`	`--color-danger-background: #2e0514;`
`3`	`4`	`--color-danger-background-disabled: #20040e;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+:root,`
`1`	`2`	`:root.light-theme {`
`2`	`3`	`--color-danger-background: #ffebf2;`
`3`	`4`	`--color-danger-background-disabled: #fff3f7;`