style(menu): round sidebar buttons, update heading styles

scripts/generate-theme-css.mjs

@@ -407,6 +407,9 @@ const styleBackgrounds = () => {
       ? ["rgb(37, 37, 37)", "rgb(47, 47, 47)"]
       : ["rgb(253, 253, 253)"],
   });
+  // patch: remove overlay from settings sidebar
+  // to match notion-enhancer menu sidebar colour
+  cssBody += `.notion-overlay-container .notion-space-settings > div > div > [style*="height: 100%; background: rgba(255, 255, 255, 0.03);"] { background: transparent !important }`;
 
   // cards
   overrideStyle({

src/core/menu/islands/Sidebar.mjs

@@ -10,9 +10,9 @@ import { Description } from "../components/Description.mjs";
 function SidebarHeading({}, ...children) {
   const { html } = globalThis.__enhancerApi;
   return html`<h2
-    class="text-([11px] [color:var(--theme--fg-secondary)])
-    py-[5px] px-[15px] mb-px mt-[18px] first:mt-[10px]
-    uppercase font-medium tracking-[0.03em] leading-none"
+    class="flex items-center font-semibold leading-none
+    text-([12px] [color:var(--theme--fg-secondary)])
+    h-[24px] px-[12px] mb-px mt-[18px] first:mt-[10px]"
   >
     ${children}
   </h2>`;
@@ -22,8 +22,9 @@ function SidebarButton({ id, icon, ...props }, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi,
     $btn = html`<${props["href"] ? "a" : "button"}
       class="flex items-center select-none text-[14px]
-      py-[5px] px-[15px] last:mb-[12px] w-full transition
-      hover:bg-[color:var(--theme--bg-hover)] disabled:hidden"
+      min-h-[27px] px-[12px] my-px last:mb-[12px] w-full
+      transition hover:bg-[color:var(--theme--bg-hover)]
+      disabled:hidden rounded-[3px]"
       ...${props}
     >
       ${icon
@@ -59,8 +60,9 @@ function Sidebar({ items, categories }) {
       policy and terms & conditions on the welcome page.
     </span>`,
     $sidebar = html`<aside
-      class="notion-enhancer--menu-sidebar flex-(& col) row-span-1
-      h-full overflow-y-auto bg-[color:var(--theme--bg-secondary)]"
+      class="notion-enhancer--menu-sidebar h-full
+      px-[4px] overflow-y-auto flex-(& col) row-span-1
+      bg-[color:var(--theme--bg-secondary)]"
     >
       ${items.map((item) => {
         if (Array.isArray(item)) {

src/core/menu/menu.css

@@ -106,6 +106,12 @@ body > #skeleton .row-group .shimmer {
   background-color: var(--theme--code-inline_bg);
   color: var(--theme--code-inline_fg);
 }
+.typography kbd {
+  padding: 2px 4px;
+  border-radius: 6px;
+  border: solid 1px var(--theme--fg-border);
+  box-shadow: inset 0 -1px 0 var(--theme--fg-border);
+}
 .typography a {
   text-decoration: underline;
   transition: 100ms ease-in;

src/core/mod.json

@@ -51,9 +51,8 @@
     },
     {
       "type": "toggle",
-      "key": "debugMode",
-      "description": "Activates built-in debugging tools accessible through the application menu.",
-      "platforms": ["darwin", "win32", "linux"],
+      "key": "developerMode",
+      "description": "Activates built-in debugging tools accessible through the application menu in desktop environments and restores access to the DevTools console via the <kbd>Ctrl+Shift+I</kbd> hotkey.",
       "value": false
     }
   ],