Fix borders and text color in dark mode popups

Author: craquet

postcss-scoped.cjs

@@ -1,14 +1,21 @@
+/**
+ * PostCSS plugin for rewriting some selectors in tailwindcss to prevent overspill of tailwind variables into the
+ * surrounding application. There are more isolation mechanics in tailwind.config.js
+ */
+
 /**
  * @type {import('postcss').PluginCreator}
  */
 module.exports = (opts = {}) => ({
     postcssPlugin: "postcss-scoped",
     Once(root) {
         root.walkRules((rule) => {
+            // Rewrite global variable declaration to be only present on elements inside .rfs-root
             if (rule.selector === "*, ::before, ::after") {
                 rule.selectors = rule.selectors.map((s) => (s === "*" ? "*:where(.rfs-root,.rfs-root *)" : ":where(.rfs-root,.rfs-root *)" + s))
             }
 
+            // Rewrite backdrop variable declaration to be only present on backdrops inside .rfs-root
             if (rule.selector === "::backdrop") {
                 rule.selectors = rule.selectors.map((s) => ":where(.rfs-root,.rfs-root *)" + s)
             }

src/components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-            "rfs-fixed rfs-inset-0 rfs-z-50 rfs-bg-black/80 rfs- data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0",
+            "rfs-root rfs-fixed rfs-inset-0 rfs-z-50 rfs-bg-black/80 rfs- data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0",
             className
         )}
         {...props}

src/elastic-ui.css

@@ -11,13 +11,6 @@
     padding-top: 32px;
 }
 
-/**
- * Body
- */
-.sui-layout-body {
-    background: hsl(var(--rfs-background));
-}
-
 @media (max-width: 800px) {
     .sui-layout-body:after {
         display: none;

src/index.css

@@ -69,11 +69,11 @@
 }
 
 @layer base {
-    .sui-layout * {
+    .rfs-root, .rfs-root * {
         border-color: hsl(var(--rfs-border));
     }
 
-    #storybook-root {
+    .rfs-root {
         background-color: hsl(var(--rfs-background));
         color: hsl(var(--rfs-foreground));
     }