feat: index/gen prism theming variables

scripts/index-interface-colours.mjs

@@ -0,0 +1,126 @@
+/**
+ * notion-enhancer
+ * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+// these utils are for manual use (e.g. in the devtools console)
+// to assist in the generation of the theme.css and variables.css files
+
+const cssProperties = [
+    "background-color",
+    "border-color",
+    "box-shadow",
+    "caret-color",
+    "color",
+    "fill",
+    "outline-color",
+    "text-decoration-color",
+  ],
+  prismTokens = [
+    "keyword",
+    "builtin",
+    "class-name",
+    "function",
+    "boolean",
+    "number",
+    "string",
+    "char",
+    "symbol",
+    "regex",
+    "url",
+    "operator",
+    "variable",
+    "constant",
+    "property",
+    "punctuation",
+    "important",
+    "comment",
+    "tag",
+    "attr-name",
+    "attr-value",
+    "namespace",
+    "prolog",
+    "doctype",
+    "cdata",
+    "entity",
+    "atrule",
+    "selector",
+    "inserted",
+    "deleted",
+  ];
+
+const generateQuerySelector = (el) => {
+    if (el.tagName === "HTML") return "html";
+    const parentSelector = generateQuerySelector(el.parentElement);
+    if (el.id) return `${parentSelector} > #${el.id}`;
+    const classes = [...el.classList].map((cls) => `.${cls}`).join(""),
+      style = el.getAttribute("style")
+        ? `[style="${el.getAttribute("style").replace(/"/g, "'")}"]`
+        : "",
+      index = `:nth-child(${[...el.parentElement.children].indexOf(el) + 1})`;
+    return `${parentSelector} > ${classes || style || index}`;
+  },
+  getComputedPropertyValue = (el, prop) => {
+    const styles = window.getComputedStyle(el),
+      value = styles.getPropertyValue(prop);
+    return value;
+  };
+
+const generatePrismVariables = () => {
+  let cssVariables = "",
+    colourRefs = {};
+  const el = document.querySelector(".notion-code-block .token");
+  for (const token of prismTokens) {
+    el.className = `token ${token}`;
+    const varName = token.replace(/-/g, "_"),
+      colourValue = getComputedPropertyValue(el, "color");
+    colourRefs[colourValue] ??= varName;
+    cssVariables += `--theme--code-${varName}: ${
+      colourRefs[colourValue] === varName
+        ? colourValue
+        : `var(--theme--code-${colourRefs[colourValue]})`
+    };`;
+  }
+  return cssVariables;
+};
+
+console.log(generatePrismVariables());
+
+//   getComputedPropertyValues = (el) => {
+//     const styles = window.getComputedStyle(el),
+//       values = cssProperties.map((prop) => [
+//         prop,
+//         styles.getPropertyValue(prop),
+//       ]);
+//     return Object.fromEntries(values);
+//   },
+//   indexCssValues = () => {
+//     // Map<value, { [k: property]: selector[] }
+//     const cssValues = new Map();
+//     for (const el of document.querySelectorAll("*")) {
+//       const styles = getComputedPropertyValues(el),
+//         selector = generateQuerySelector(el);
+//       for (const prop in styles) {
+//         const value = styles[prop];
+//         if (value.includes("svg") || value.includes("url")) continue;
+//         if (!(value.includes("rgb") || value.includes("#"))) continue;
+//         if (!cssValues.has(value)) cssValues.set(value, {});
+//         cssValues.get(value)[prop] ??= [];
+//         cssValues.get(value)[prop].push(selector);
+//       }
+//     }
+//     return cssValues;
+//   },
+//   mapCssValuesToVariables = (cssValues) => {
+//     let i = 0,
+//       cssRoot = "",
+//       cssBody = "";
+//     for (const [value, props] of cssValues) {
+//       cssRoot += `--${++i}: ${value};`;
+//       for (const prop in props) {
+//         cssBody += `${props[prop].join(", ")} { ${prop}: var(--${i}); }`;
+//       }
+//     }
+//     return `:root { ${cssRoot} } ${cssBody}`;
+//   };

src/core/client.css

@@ -4,6 +4,9 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+@import url("./theme.css");
+@import url("./variables.css");
+
 .notion-enhancer--menu-button {
   display: flex;
   user-select: none;
@@ -31,8 +34,7 @@
   position: fixed;
   inset: 0;
   width: 100vw;
-  height: 100vw;
-  overflow: hidden;
+  height: 100vh;
   opacity: 0;
   pointer-events: none;
   transition: opacity 100ms ease-in;
@@ -53,12 +55,10 @@
   align-items: center;
   justify-content: center;
   width: 100vw;
-  height: 100vw;
+  height: 100vh;
   pointer-events: none;
 }
 .notion-enhancer--menu-modal > :nth-child(2) > iframe {
-  position: relative;
-  z-index: 1;
   background: rgb(32, 32, 32);
   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;

src/core/client.mjs

@@ -8,7 +8,8 @@ import { html } from "../common/dom.mjs";
 import { addMutationListener } from "../common/events.mjs";
 
 export default async () => {
-  const { enhancerUrl } = globalThis.__enhancerApi;
+  const { enhancerUrl } = globalThis.__enhancerApi,
+    menuButtonIconStyle = "";
 
   const icon = `i-notion-enhancer${
     menuButtonIconStyle === "monochrome" ? "?mask" : " text-[16px]"

src/core/menu.html

@@ -8,6 +8,6 @@
     <link rel="stylesheet" href="./menu.css" />
   </head>
   <body>
-    <p>hello world</p>
+    <script src="./menu.mjs" type="module"></script>
   </body>
 </html>

src/core/theme.css

@@ -0,0 +1,97 @@
+/**
+ * notion-enhancer
+ * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+/* prism.js standard tokens: https://prismjs.com/tokens.html */
+.notion-code-block .token.keyword {
+  color: var(--theme--code-keyword);
+}
+.notion-code-block .token.builtin {
+  color: var(--theme--code-builtin);
+}
+.notion-code-block .token.class-name {
+  color: var(--theme--code-class_name);
+}
+.notion-code-block .token.function {
+  color: var(--theme--code-function);
+}
+.notion-code-block .token.boolean {
+  color: var(--theme--code-boolean);
+}
+.notion-code-block .token.number {
+  color: var(--theme--code-number);
+}
+.notion-code-block .token.string {
+  color: var(--theme--code-string);
+}
+.notion-code-block .token.char {
+  color: var(--theme--code-char);
+}
+.notion-code-block .token.symbol {
+  color: var(--theme--code-symbol);
+}
+.notion-code-block .token.regex {
+  color: var(--theme--code-regex);
+}
+.notion-code-block .token.url {
+  color: var(--theme--code-url);
+}
+.notion-code-block .token.operator {
+  color: var(--theme--code-operator);
+}
+.notion-code-block .token.variable {
+  color: var(--theme--code-variable);
+}
+.notion-code-block .token.constant {
+  color: var(--theme--code-constant);
+}
+.notion-code-block .token.property {
+  color: var(--theme--code-property);
+}
+.notion-code-block .token.punctuation {
+  color: var(--theme--code-punctuation);
+}
+.notion-code-block .token.important {
+  color: var(--theme--code-important);
+}
+.notion-code-block .token.comment {
+  color: var(--theme--code-comment);
+}
+.notion-code-block .token.tag {
+  color: var(--theme--code-tag);
+}
+.notion-code-block .token.attr-name {
+  color: var(--theme--code-attr_name);
+}
+.notion-code-block .token.attr-value {
+  color: var(--theme--code-attr_value);
+}
+.notion-code-block .token.namespace {
+  color: var(--theme--code-namespace);
+}
+.notion-code-block .token.prolog {
+  color: var(--theme--code-prolog);
+}
+.notion-code-block .token.doctype {
+  color: var(--theme--code-doctype);
+}
+.notion-code-block .token.cdata {
+  color: var(--theme--code-cdata);
+}
+.notion-code-block .token.entity {
+  color: var(--theme--code-entity);
+}
+.notion-code-block .token.atrule {
+  color: var(--theme--code-atrule);
+}
+.notion-code-block .token.selector {
+  color: var(--theme--code-selector);
+}
+.notion-code-block .token.inserted {
+  color: var(--theme--code-inserted);
+}
+.notion-code-block .token.deleted {
+  color: var(--theme--code-deleted);
+}

src/core/variables.css

@@ -0,0 +1,74 @@
+/**
+ * notion-enhancer
+ * (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root {
+}
+
+body:not(.dark) {
+  --theme--code-keyword: rgb(0, 119, 170);
+  --theme--code-builtin: rgb(102, 153, 0);
+  --theme--code-class_name: rgb(221, 74, 104);
+  --theme--code-function: var(--theme--code-class_name);
+  --theme--code-boolean: rgb(153, 0, 85);
+  --theme--code-number: var(--theme--code-boolean);
+  --theme--code-string: var(--theme--code-builtin);
+  --theme--code-char: var(--theme--code-builtin);
+  --theme--code-symbol: var(--theme--code-boolean);
+  --theme--code-regex: rgb(238, 153, 0);
+  --theme--code-url: rgb(154, 110, 58);
+  --theme--code-operator: var(--theme--code-url);
+  --theme--code-variable: var(--theme--code-regex);
+  --theme--code-constant: var(--theme--code-boolean);
+  --theme--code-property: var(--theme--code-boolean);
+  --theme--code-punctuation: rgb(153, 153, 153);
+  --theme--code-important: var(--theme--code-regex);
+  --theme--code-comment: rgb(112, 128, 144);
+  --theme--code-tag: var(--theme--code-boolean);
+  --theme--code-attr_name: var(--theme--code-builtin);
+  --theme--code-attr_value: var(--theme--code-keyword);
+  --theme--code-namespace: rgb(55, 53, 47);
+  --theme--code-prolog: var(--theme--code-comment);
+  --theme--code-doctype: var(--theme--code-comment);
+  --theme--code-cdata: var(--theme--code-comment);
+  --theme--code-entity: var(--theme--code-url);
+  --theme--code-atrule: var(--theme--code-keyword);
+  --theme--code-selector: var(--theme--code-builtin);
+  --theme--code-inserted: var(--theme--code-builtin);
+  --theme--code-deleted: var(--theme--code-boolean);
+}
+
+body.dark {
+  --theme--code-keyword: rgb(209, 148, 158);
+  --theme--code-builtin: rgb(189, 224, 82);
+  --theme--code-class_name: rgba(255, 255, 255, 0.81);
+  --theme--code-function: var(--theme--code-class_name);
+  --theme--code-boolean: var(--theme--code-keyword);
+  --theme--code-number: var(--theme--code-keyword);
+  --theme--code-string: var(--theme--code-builtin);
+  --theme--code-char: var(--theme--code-builtin);
+  --theme--code-symbol: var(--theme--code-keyword);
+  --theme--code-regex: rgb(238, 153, 0);
+  --theme--code-url: rgb(245, 184, 61);
+  --theme--code-operator: var(--theme--code-url);
+  --theme--code-variable: var(--theme--code-url);
+  --theme--code-constant: var(--theme--code-keyword);
+  --theme--code-property: var(--theme--code-keyword);
+  --theme--code-punctuation: var(--theme--code-class_name);
+  --theme--code-important: var(--theme--code-regex);
+  --theme--code-comment: rgb(153, 128, 102);
+  --theme--code-tag: var(--theme--code-keyword);
+  --theme--code-attr_name: var(--theme--code-builtin);
+  --theme--code-attr_value: var(--theme--code-keyword);
+  --theme--code-namespace: var(--theme--code-class_name);
+  --theme--code-prolog: var(--theme--code-comment);
+  --theme--code-doctype: var(--theme--code-comment);
+  --theme--code-cdata: var(--theme--code-comment);
+  --theme--code-entity: var(--theme--code-url);
+  --theme--code-atrule: var(--theme--code-keyword);
+  --theme--code-selector: var(--theme--code-builtin);
+  --theme--code-inserted: var(--theme--code-builtin);
+  --theme--code-deleted: rgb(255, 0, 0);
+}