[#73333] Encapsulate CSS variables in Shadow DOM

antmicro · Feb 20, 2025 · 4be6976 · 4be6976
1 parent 3c6bcc6
commit 4be6976
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 69 deletions.
diff --git a/src/MystEditor.jsx b/src/MystEditor.jsx
@@ -11,6 +11,7 @@ import { handlePreviewClickToScroll } from "./extensions/syncDualPane";
 import { createMystState, MystState, predefinedButtons, defaultButtons } from "./mystState";
 import { batch, computed, signal, effect } from "@preact/signals";
 import { syncCheckboxes } from "./hooks/markdownCheckboxes";
+import { MystContainer } from "./styles/MystStyles";
 
 const EditorParent = styled.div`
   font-family: "Lato";
@@ -139,8 +140,8 @@ const MystEditor = () => {
   useEffect(() => hideBodyScrollIf(fullscreen), [fullscreen]);
 
   return (
-    <div style="all: initial" id="myst-css-namespace">
-      <StyleSheetManager target={options.parent} stylisPlugins={[createExtraScopePlugin("#myst-css-namespace")]}>
+    <StyleSheetManager target={options.parent}>
+      <MystContainer id="myst-css-namespace">
         <EditorParent mode={options.mode.value} fullscreen={fullscreen}>
           {options.topbar.value && (
             <EditorTopbar
@@ -185,8 +186,8 @@ const MystEditor = () => {
             )}
           </MystWrapper>
         </EditorParent>
-      </StyleSheetManager>
-    </div>
+      </MystContainer>
+    </StyleSheetManager>
   );
 };
 

diff --git a/src/components/CodeMirror.jsx b/src/components/CodeMirror.jsx
@@ -164,6 +164,10 @@ const CodeEditor = styled.div`
     background: transparent;
   }
 
+  .cm-focused {
+    outline: none !important;
+  }
+
   .cm-gutterElement span[title="Fold line"],
   .cm-gutterElement span[title="Unfold line"] {
     user-select: none;

diff --git a/src/components/Comment.jsx b/src/components/Comment.jsx
@@ -38,7 +38,7 @@ const YCommentWrapper = styled.div`
   }
 
   .cm-content {
-    padding: 0px;
+    padding: 0px !important;
   }
   .cm-line {
     line-height: 1.5em;

diff --git a/src/components/Preview.js b/src/components/Preview.js
@@ -135,6 +135,13 @@ const Preview = styled.div`
         color: var(--white);
         font-weight: bold;
         background: var(--green-500);
+        display: flex;
+
+        &::before {
+          padding-right: 5px;
+          display: flex;
+          align-items: center;
+        }
       }
     }
 
@@ -144,22 +151,14 @@ const Preview = styled.div`
       }
     }
 
-    &.note,
-    &.important,
-    &.tip,
-    &.hint,
-    &.directive-unhandled,
-    &.warning {
-      border: 3px solid var(--blue-200);
+    &.note {
+      border-color: var(--blue-200);
 
       & > header {
         background-color: var(--blue-200);
-        display: flex;
 
         &::before {
-          padding-right: 5px;
-          display: flex;
-          align-items: center;
+          content: url("data:image/svg+xml,%3Csvg style='color: white' xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z' fill='white'%3E%3C/path%3E%3C/svg%3E");
         }
       }
     }
@@ -183,10 +182,6 @@ const Preview = styled.div`
       }
     }
 
-    &.note > header::before {
-      content: url("data:image/svg+xml,%3Csvg style='color: white' xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z' fill='white'%3E%3C/path%3E%3C/svg%3E");
-    }
-
     &.important > header::before {
       content: url("data:image/svg+xml,%3Csvg style='color: white' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M18 16v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-5 0h-2v-2h2v2zm0-4h-2V8h2v4zm-1 10c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2z' fill='white'%3E%3C/path%3E%3C/svg%3E");
     }

diff --git a/src/styles/MystEditor.css b/src/styles/MystEditor.css
@@ -1,52 +1,3 @@
-:root {
-  --border-radius: 5px;
-  --black: #000;
-  --gray-900: #333;
-  --gray-800: #5c5c5c;
-  --gray-700: #88818c;
-  --gray-600: #cccccc;
-  --gray-500: #dadada;
-  --gray-400: #e5e5e5;
-  --gray-300: #e8e6e8;
-  --gray-200: #f8f8f8;
-  --gray-100: #f9f9f9;
-  --white: #fff;
-  --blue-500: #0083e1;
-  --blue-200: #82cfe6;
-  --blue-100: #c1e4ef;
-  --red-500: #e74a3c;
-  --orange-500: #f59e0b;
-  --green-500: #00af91;
-  --green-400: #00ccaa;
-  --border-2: 3px;
-  --dark-violet: #332d37;
-
-  --navbar-bg: var(--gray-200);
-  --icon-border: var(--gray-600);
-  --icon-bg: var(--white);
-  --icon-main-selected: var(--blue-100);
-  --icon-main-active: var(--blue-200);
-  --icon-selected: var(--gray-400);
-  --icon-color: var(--dark-violet);
-  --separator: var(--gray-500);
-  --alert: var(--blue-100);
-}
-
-@media print {
-  @page {
-    margin: 1.5cm !important;
-  }
-}
-
-#myst-css-namespace {
-  font-family: "Lato", sans-serif;
-  height: 100%;
-}
-
-#myst-css-namespace .todo {
-  background-color: yellow;
-}
-
 /* Lato font */
 /* latin-ext */
 @font-face {

diff --git a/src/styles/MystStyles.js b/src/styles/MystStyles.js
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const MystContainer = styled.div`
+  --border-radius: 5px;
+  --black: #000;
+  --gray-900: #333;
+  --gray-800: #5c5c5c;
+  --gray-700: #88818c;
+  --gray-600: #cccccc;
+  --gray-500: #dadada;
+  --gray-400: #e5e5e5;
+  --gray-300: #e8e6e8;
+  --gray-200: #f8f8f8;
+  --gray-100: #f9f9f9;
+  --white: #fff;
+  --blue-500: #0083e1;
+  --blue-200: #82cfe6;
+  --blue-100: #c1e4ef;
+  --red-500: #e74a3c;
+  --orange-500: #f59e0b;
+  --green-500: #00af91;
+  --green-400: #00ccaa;
+  --border-2: 3px;
+  --dark-violet: #332d37;
+
+  --navbar-bg: var(--gray-200);
+  --icon-border: var(--gray-600);
+  --icon-bg: var(--white);
+  --icon-main-selected: var(--blue-100);
+  --icon-main-active: var(--blue-200);
+  --icon-selected: var(--gray-400);
+  --icon-color: var(--dark-violet);
+  --separator: var(--gray-500);
+  --alert: var(--blue-100);
+  all: initial;
+  font-family: "Lato", sans-serif;
+  height: 100%;
+
+  @media print {
+    @page {
+      margin: 1.5cm !important;
+    }
+  }
+
+  .todo {
+    background-color: yellow;
+  }
+`;