Separate public UI styles from CMS UI

packages/cmsui/news/8012.bugfix

@@ -0,0 +1 @@
+Separate public UI and CMS UI styles. @arybakov05

packages/cmsui/routes/layout.tsx

@@ -18,6 +18,7 @@ import { shouldShowToolbar } from '@plone/layout/helpers';
 import Sidebar, { sidebarAtom } from '../components/Sidebar/Sidebar';
 import Settings from '@plone/components/icons/settings.svg?react';
 import { useAtom } from 'jotai';
+import { useLayoutEffect } from 'react';
 import { clsx } from 'clsx';
 import config from '@plone/registry';
 
@@ -73,6 +74,12 @@ export default function Index() {
   const navigate = useNavigate();
   const [collapsed, setCollapsed] = useAtom(sidebarAtom);
 
+  useLayoutEffect(() => {
+    document
+      .querySelectorAll('link[href*="publicui.css"]')
+      .forEach((el) => el.remove());
+  }, []);
+
   if (!rootData) {
     return null;
   }

packages/cmsui/styles/cmsui.css

@@ -3,15 +3,16 @@
 
 @source '../node_modules/@plone/components/dist/quanta';
 
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @layer cmsui {
   @import '@plone/components/src/styles/basic/theme.css';
-  @import 'tailwindcss/theme.css';
-  @import 'tailwindcss/preflight.css';
-  @import 'tailwindcss/utilities.css';
 
-  :root {
+  body.cmsui {
     --background: hsl(0 0% 100%);
     --foreground: hsl(222.2 84% 4.9%);
     --card: hsl(0 0% 100%);
@@ -40,7 +41,7 @@
     /* --radius: 0.6rem; */
   }
 
-  .dark {
+  body.cmsui.dark {
     --background: hsl(222.2 84% 4.9%);
     --foreground: hsl(210 40% 98%);
     --card: hsl(222.2 84% 4.9%);

packages/publicui/news/8012.bugfix

@@ -0,0 +1 @@
+Separate public UI and CMS UI styles. @arybakov05

packages/publicui/routes/index.tsx

@@ -15,6 +15,7 @@ import {
   type LinksFunction,
   type MetaFunction,
 } from 'react-router';
+import { useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Link,
@@ -86,6 +87,12 @@ export default function Index() {
     .filter((match) => match.handle?.bodyClass)
     .map((match) => match.handle?.bodyClass);
 
+  useLayoutEffect(() => {
+    document
+      .querySelectorAll('link[href*="cmsui.css"]')
+      .forEach((el) => el.remove());
+  }, []);
+
   if (!rootData) {
     return null;
   }