docs: isolate daypicker demos from docusaurus css (#2874)

* docs: isolate daypicker demos from docusaurus css

* Remove extra config

Signed-off-by: gpbl <[email protected]>

---------

Signed-off-by: gpbl <[email protected]>

Author: gpbl

website/docusaurus.config.ts

@@ -48,7 +48,7 @@ const config: Config = {
         },
         blog: false,
         theme: {
-          customCss: ["./src/css/custom.css", "../src/style.css"],
+          customCss: ["../src/style.css", "./src/css/site.css"],
         },
         sitemap: {
           lastmod: "date",
@@ -136,7 +136,6 @@ const config: Config = {
       "data-api": "/q/a/event",
     },
   ],
-
   themeConfig: {
     image: "img/social-card.png",
     metadata: [

website/src/components/BrowserWindow.tsx

@@ -37,7 +37,7 @@ export function BrowserWindow({
         </div>
       </div>
 
-      <div className={styles.browserWindowBody} style={bodyStyle}>
+      <div className={`${styles.browserWindowBody} rdp-demo`} style={bodyStyle}>
         {shadow ? (
           <ShadowDomWrapper styleStr={styleStr}>{children}</ShadowDomWrapper>
         ) : (

website/src/components/ShadowDomWrapper.tsx

@@ -14,6 +14,11 @@ export function ShadowDomWrapper({
     <root.div>
       {children}
       <style>{style.toString()}</style>
+      <style>{`
+        .rdp-root {
+          --rdp-accent-color: var(--ifm-color-primary);
+        }
+      `}</style>
       {colorMode === "dark" && (
         <style>{`
           .rdp-root {

website/src/css/custom.css

@@ -1,5 +1,3 @@
-@import './markdown.css';
-
 :root {
   --ifm-color-primary: #007aff;
   --ifm-color-primary-dark: #006ee6;
@@ -66,6 +64,17 @@ html[data-theme="dark"] {
   background-repeat: no-repeat !important;
 }
 
+.rdp-demo:not(#a#b),
+.rdp-demo:not(#a#b) * {
+  @layer infima {
+    all: revert-layer;
+  }
+
+  @layer website {
+    all: revert-layer;
+  }
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 html[data-theme="dark"] {
   --ifm-color-primary: #0b84ff;
@@ -101,29 +110,6 @@ html[data-theme="dark"] {
   }
 }
 
-.rdp-root {
-  --rdp-accent-color: var(--ifm-color-primary);
-}
-
-.rdp-day button {
-  font-size: 1rem !important;
-}
-
-.rdp-weekday {
-  font-size: 0.75rem !important;
-}
-
-.rdp-footer {
-  margin: 1rem 0;
-}
-
-html[data-theme="dark"] .rdp-root {
-  --rdp-accent-color: var(--ifm-color-primary);
-  --rdp-accent-background-color: #073845;
-  --rdp-range_end-color: black;
-  --rdp-range_start-color: black;
-}
-
 html[data-theme="dark"] {
 }
 

website/src/css/site.css

@@ -0,0 +1,15 @@
+:root {
+  --rdp-accent-color: var(--ifm-color-primary);
+}
+
+html[data-theme="dark"] .rdp-root {
+  --rdp-accent-color: var(--ifm-color-primary);
+  --rdp-accent-background-color: #073845;
+  --rdp-range_end-color: black;
+  --rdp-range_start-color: black;
+}
+
+@layer infima, website;
+
+@import "./custom.css" layer(website);
+@import "./markdown.css" layer(website);