chore: use utility classes for menu modal

src/api/interface.js

@@ -43,58 +43,6 @@ const encodeSvg = (svg) =>
     .replace(/\s+/g, " ");
 
 twind.install({
-  theme: {
-    fontFamily: {
-      sans: ["var(--theme--font-sans)"],
-      mono: ["var(--theme--font-code)"],
-    },
-    colors: {
-      "fg-primary": "var(--theme--fg-primary)",
-      "fg-secondary": "var(--theme--fg-secondary)",
-      "fg-border": "var(--theme--fg-border)",
-      "fg-gray": "var(--theme--fg-gray)",
-      "fg-brown": "var(--theme--fg-brown)",
-      "fg-orange": "var(--theme--fg-orange)",
-      "fg-yellow": "var(--theme--fg-yellow)",
-      "fg-green": "var(--theme--fg-green)",
-      "fg-blue": "var(--theme--fg-blue)",
-      "fg-purple": "var(--theme--fg-purple)",
-      "fg-pink": "var(--theme--fg-pink)",
-      "fg-red": "var(--theme--fg-red)",
-      "bg-primary": "var(--theme--bg-primary)",
-      "bg-secondary": "var(--theme--bg-secondary)",
-      "bg-overlay": "var(--theme--bg-overlay)",
-      "bg-hover": "var(--theme--bg-hover)",
-      "bg-light_gray": "var(--theme--bg-light_gray)",
-      "bg-gray": "var(--theme--bg-gray)",
-      "bg-brown": "var(--theme--bg-brown)",
-      "bg-orange": "var(--theme--bg-orange)",
-      "bg-yellow": "var(--theme--bg-yellow)",
-      "bg-green": "var(--theme--bg-green)",
-      "bg-blue": "var(--theme--bg-blue)",
-      "bg-purple": "var(--theme--bg-purple)",
-      "bg-pink": "var(--theme--bg-pink)",
-      "bg-red": "var(--theme--bg-red)",
-      "dim-light_gray": "var(--theme--dim-light_gray)",
-      "dim-gray": "var(--theme--dim-gray)",
-      "dim-brown": "var(--theme--dim-brown)",
-      "dim-orange": "var(--theme--dim-orange)",
-      "dim-yellow": "var(--theme--dim-yellow)",
-      "dim-green": "var(--theme--dim-green)",
-      "dim-blue": "var(--theme--dim-blue)",
-      "dim-purple": "var(--theme--dim-purple)",
-      "dim-pink": "var(--theme--dim-pink)",
-      "dim-red": "var(--theme--dim-red)",
-      "accent-primary": "var(--theme--accent-primary)",
-      "accent-primary_hover": "var(--theme--accent-primary_hover)",
-      "accent-primary_contrast": "var(--theme--accent-primary_contrast)",
-      "accent-primary_transparent": "var(--theme--accent-primary_transparent)",
-      "accent-secondary": "var(--theme--accent-secondary)",
-      "accent-secondary_contrast": "var(--theme--accent-secondary_contrast)",
-      "accent-secondary_transparent":
-        "var(--theme--accent-secondary_transparent)",
-    },
-  },
   rules: [
     [
       /^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/,
@@ -133,6 +81,7 @@ twind.install({
       },
     ],
   ],
+  variants: [["open", "&[open]"]],
 });
 
 // construct elements via tagged tagged

src/core/client.css

@@ -1,32 +0,0 @@
-/**
- * notion-enhancer
- * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-@import url("./variables.css");
-
-.notion-enhancer--menu-modal[data-open="true"] {
-  pointer-events: auto;
-  opacity: 1;
-}
-.notion-enhancer--menu-modal > :nth-child(2) > iframe {
-  background: var(--theme--bg-secondary);
-  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
-    rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;
-  border-radius: 5px;
-  width: 1150px;
-  height: calc(100vh - 100px);
-  max-width: calc(100vw - 100px);
-  max-height: 715px;
-  overflow: hidden;
-  opacity: 0;
-  transform: scale(0.95);
-  transition: opacity 100ms ease-in, transform 0s ease-in 200ms;
-}
-.notion-enhancer--menu-modal[data-open="true"] > :nth-child(2) > iframe {
-  pointer-events: auto;
-  opacity: 1;
-  transform: scale(1);
-  transition: transform 80ms ease-in;
-}

src/core/client.mjs

@@ -43,23 +43,33 @@ export default async (api, db) => {
       $menuFrame.contentWindow.postMessage(msg, "*");
     },
     openMenu = () => {
-      if (!$menuFrame) return;
+      if ($menuFrame) setTheme();
-      setTheme();
+      $menuModal?.setAttribute("open", true);
-      $menuModal.setAttribute("data-open", true);
     },
-    closeMenu = () => $menuModal.removeAttribute("data-open");
+    closeMenu = () => $menuModal.removeAttribute("open");
 
   $menuFrame = html`<iframe
     title="notion-enhancer menu"
     src="${enhancerUrl("core/menu/index.html")}"
+    class="
+      rounded-[5px] w-[1150px] h-[calc(100vh-100px)]
+      max-w-[calc(100vw-100px)] max-h-[715px] overflow-hidden
+      bg-[color:var(--theme--bg-secondary)] drop-shadow-xl
+      transition opacity-0 scale-95
+      group-open:(pointer-events-auto opacity-100 scale-100)
+    "
     onload=${setTheme}
   ></iframe>`;
   $menuModal = html`<div
-    class="notion-enhancer--menu-modal
+    class="notion-enhancer--menu-modal group
     z-[999] fixed inset-0 w-screen h-screen
-    transition pointer-events-none opacity-0"
+    transition pointer-events-none opacity-0
+    open:(pointer-events-auto opacity-100)"
   >
-    <div class="fixed inset-0 bg-bg-overlay" onclick=${closeMenu}></div>
+    <div
+      class="fixed inset-0 bg-[color:var(--theme--bg-overlay)]"
+      onclick=${closeMenu}
+    ></div>
     <div
       class="fixed inset-0 flex w-screen h-screen
       items-center justify-center pointer-events-none"
@@ -76,7 +86,7 @@ export default async (api, db) => {
     class="notion-enhancer--menu-button
     flex select-none cursor-pointer rounded-[3px]
     text-[14px] my-px mx-[4px] py-[2px] px-[10px]
-    transition hover:bg-bg-hover"
+    transition hover:bg-[color:var(--theme--bg-hover)]"
   >
     <div class="flex items-center justify-center w-[22px] h-[22px] mr-[8px]">
       <i

src/core/menu/index.html

@@ -2,27 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>notion-enhancer menu</title>
     <link rel="stylesheet" href="./menu.css" />
-  </head>
-  <body class="w-screen h-screen bg-bg-primary text-fg-primary font-sans">
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
-    <p>lorem ipsum</p>
     <script src="./menu.mjs" type="module" defer></script>
-  </body>
+  </head>
+  <body
+    class="w-screen h-screen text-[color:var(--theme--fg-primary)] font-[family:var(--theme--font-sans)]"
+  ></body>
 </html>

src/core/mod.json

@@ -56,7 +56,7 @@
       "value": false
     }
   ],
-  "clientStyles": ["client.css", "variables.css"],
+  "clientStyles": ["variables.css"],
   "clientScripts": ["client.mjs"],
   "electronScripts": []
 }

src/worker.js

@@ -25,16 +25,15 @@ const tabQueue = new Set(),
         message: "open-menu",
       });
     } else tabQueue.add(tab.id);
+  },
+  reloadNotionTabs = async () => {
+    const openTabs = await chrome.tabs.query({
+        windowId: chrome.windows.WINDOW_ID_CURRENT,
+      }),
+      notionTabs = openTabs.filter(isNotionTab);
+    notionTabs.forEach((tab) => chrome.tabs.reload(tab.id));
   };
 
-const reloadNotionTabs = async () => {
-  const openTabs = await chrome.tabs.query({
-      windowId: chrome.windows.WINDOW_ID_CURRENT,
-    }),
-    notionTabs = openTabs.filter(isNotionTab);
-  notionTabs.forEach((tab) => chrome.tabs.reload(tab.id));
-};
-
 chrome.action.onClicked.addListener(openEnhancerMenu);
 chrome.runtime.onMessage.addListener((msg, sender) => {
   if (msg?.channel !== "notion-enhancer") return;