style(tweaks): update typography + page tweaks, add compact code blocks

scripts/generate-theme-css.mjs

@@ -885,6 +885,7 @@ styleTooltips();
 styleAccents();
 styleScrollbars();
 styleCode();
+cssBody += `.notion-emoji{display:inline-block!important}`;
 
 console.log(
   `body${modeSelector} { ${cssRoot} } ${Object.entries(cssRefs)

src/extensions/tweaks/client.css

@@ -27,8 +27,7 @@ body[data-tweaks*=",hidePlaceholders,"] [contenteditable]:empty:after {
 }
 
 body[data-tweaks*=",hideDefaultIcons,"]
-  div
+  :is(.notion-record-icon, [style*="width: 24px;"]):has(svg.page) {
-  :has(> .notion-record-icon svg.page) {
   display: none !important;
 }
 
@@ -39,6 +38,11 @@ body[data-tweaks*=",snappyTransitions,"] * {
 
 /* pages */
 
+body[data-tweaks*=",fullWidthPages,"]
+  .layout:has(.notion-page-block):not(.layout-center-peek, .layout-side-peek) {
+  --content-width: 100% !important;
+}
+
 body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   .notion-collection_view-block {
     width: 100% !important;
@@ -55,8 +59,6 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   }
 }
 
-/* typography */
-
 .enhancer--tweak-responsive_breakpoint
   .notion-column_list-block
   [style="display: flex;"]
@@ -74,99 +76,97 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   --theme--page-padding: calc(48px + env(safe-area-inset-left));
 }
 
-.enhancer--tweak-hide_default_page_icons
+body[data-tweaks*=",hidePageDiscussions,"]
-  .notion-sidebar
+  .layout-content:has(.notion-page-view-discussion) {
-  a
+  display: none;
-  > div
-  > div:has(.notion-record-icon svg.page),
-.enhancer--tweak-hide_default_page_icons
-  .layout
-  a
-  > div
-  > div
-  > div
-  > div:has(.notion-record-icon svg.page) {
-  display: none !important;
 }
 
-.enhancer--tweak-thicker_bold
+/* typography */
-  .notion-page-content
-  span[style*="font-weight:600"] {
-  font-weight: 700 !important;
-}
 
-.enhancer--tweak-spaced_lines
+body[data-tweaks*=",increasedLineSpacing,"]
   .notion-page-content
   .notion-selectable.notion-text-block {
   line-height: 1.65 !important;
   margin-top: 0.75em !important;
 }
 
-.enhancer--tweak-condensed_bullets
+body[data-tweaks*=",condensedLists,"]
-  .notion-selectable.notion-bulleted_list-block {
+  :is(.notion-numbered_list-block, .notion-bulleted_list-block) {
   margin-top: -1.5px !important;
   margin-bottom: -1.5px !important;
 }
 
-.enhancer--tweak-bracketed_links .notion-link-token span {
+body[data-tweaks*=",thickerBoldText,"]
-  border-bottom: none !important;
+  .notion-page-content
-}
+  span[style*="font-weight:600"] {
-.enhancer--tweak-bracketed_links .notion-link-token:before {
+  font-weight: 700 !important;
-  content: "[[";
-  opacity: 0.7;
-  transition: opacity 100ms ease-in;
-}
-.enhancer--tweak-bracketed_links .notion-link-token:after {
-  content: "]]";
-  opacity: 0.7;
-  transition: opacity 100ms ease-in;
-}
-.enhancer--tweak-bracketed_links .notion-link-token:hover::before,
-.enhancer--tweak-bracketed_links .notion-link-token:hover::after {
-  opacity: 1;
 }
 
-.enhancer--tweak-accented_links .notion-link-token {
+body[data-tweaks*=",bracketedLinks,"] {
-  color: var(--theme--accent_blue) !important;
+  .notion-link-token {
+    span {
+      border-bottom: none !important;
+    }
+    &::before {
+      content: "[[";
+      opacity: 0.7;
+      transition: opacity 100ms ease-in;
+    }
+    &::after {
+      content: "]]";
+      opacity: 0.7;
+      transition: opacity 100ms ease-in;
+    }
+    &:hover::before,
+    &:hover::after {
+      opacity: 1;
+    }
+  }
 }
-.enhancer--tweak-accented_links
+
-  .notion-link-token
+body[data-tweaks*=",accentedLinks,"] .notion-link-token {
+  color: var(--theme--accent-primary) !important;
   span[style*="border-bottom:0.05em"] {
-  opacity: 1 !important;
+    opacity: 1 !important;
-  border-color: var(--theme--accent_blue) !important;
+    border-color: var(--theme--accent-primary) !important;
+  }
 }
 
-.enhancer--tweak-quotation_marks
+body[data-tweaks*=",quoteBlockQuotationMarks,"] .notion-quote-block {
-  .notion-quote-block
   [style*="border-left: 3px solid currentcolor;"] {
-  position: relative;
+    position: relative;
-  padding-left: 24px !important;
+    padding-left: 24px !important;
-  padding-right: 18px !important;
+    padding-right: 18px !important;
+  }
+  [placeholder="Empty quote"] {
+    &::before,
+    &::after {
+      font-family: var(--font--serif);
+      font-size: 24px;
+      font-weight: bold;
+      position: absolute;
+    }
+    &::before {
+      content: "\201C";
+      left: 8px;
+      top: -2px;
+    }
+    &::after {
+      content: "\201D";
+      right: 2px;
+      bottom: -2px;
+    }
+  }
 }
-.enhancer--tweak-quotation_marks
+
-  .notion-quote-block
+body[data-tweaks*=",compactCodeBlocks,"]
-  [placeholder="Empty quote"]::before,
+  .notion-code-block.line-numbers
-.enhancer--tweak-quotation_marks
+  > [data-content-editable-leaf] {
-  .notion-quote-block
+  padding: 28px 22px 22px 22px !important;
-  [placeholder="Empty quote"]::after {
-  font-family: Georgia, serif;
-  font-size: 24px;
-  font-weight: bold;
-  position: absolute;
 }
-.enhancer--tweak-quotation_marks
+
-  .notion-quote-block
+body[data-tweaks*=",defaultImageAlignment,"] {
-  [placeholder="Empty quote"]::before {
+  /**/
-  content: "\201C";
-  left: 8px;
-  top: -2px;
-}
-.enhancer--tweak-quotation_marks
-  .notion-quote-block
-  [placeholder="Empty quote"]::after {
-  content: "\201D";
-  right: 2px;
-  bottom: -2px;
 }
 
 .enhancer--tweak-img_alignment-left .notion-image-block {

src/extensions/tweaks/client.mjs

@@ -8,9 +8,11 @@ const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
 export default async (api, db) => {
   const { getMods, addKeyListener } = api,
     [{ options }] = await getMods((mod) => mod.id === tweaksId),
-    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key),
+    tweaks = options
+      .filter((opt) => opt.type === "toggle")
+      .map((opt) => opt.key),
     enabled = {};
-  for (const tweak of tweaks) if (await db.get(tweak)) enabled[tweak] = true;
+  for (const tweak of tweaks) enabled[tweak] = await db.get(tweak);
 
   // inc. leading & trailing comma for selectors (see client.css)
   document.body.dataset.tweaks =

src/extensions/tweaks/mod.json

@@ -56,6 +56,12 @@
       "description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow. Enabling this is recommended if you are using panel mods, otherwise databases may overflow.",
       "value": true
     },
+    {
+      "type": "toggle",
+      "key": "hidePageDiscussions",
+      "description": "Hide the comments section at the top of pages within databases.",
+      "value": false
+    },
     {
       "type": "number",
       "key": "responsiveColumnsBreakpoint",
@@ -68,12 +74,6 @@
       "description": "The unit to measure the above width in, e.g. you may wish the button to appear when the window occupies <= 20% of the screen or is less than a certain number of pixels wide.",
       "values": ["Pixels", "Percent"]
     },
-    {
-      "type": "toggle",
-      "key": "hidePageDiscussions",
-      "description": "Hide the comments section at the top of pages within databases.",
-      "value": false
-    },
     { "type": "heading", "label": "Typography" },
     {
       "type": "toggle",
@@ -83,8 +83,8 @@
     },
     {
       "type": "toggle",
-      "key": "condensedBulletedLists",
+      "key": "condensedLists",
-      "description": "Tightened line spacing between bulleted list items.",
+      "description": "Tightened line spacing between bulleted and numbered list items.",
       "value": false
     },
     {