Fix #202: rewrite style code using Sass; add default styling to proofs

package.json

@@ -4,7 +4,9 @@
 	"description": "Turn your Obsidian into LaTeX on steroids. Dynamically numbered theorem environments & equations, enhanced theorems/equations search & link auto-completion, and live-rendering of equations inside callouts & quotes.",
 	"scripts": {
 		"dev": "node esbuild.config.mjs",
-		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production && python make_styles.py",
+		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production && sass styles.scss styles.css",
+		"dev-style": "sass --watch styles.scss styles.css",
+		"build-style": "sass --watch styles.scss styles.css",
 		"version": "node version-bump.mjs && git add manifest.json versions.json"
 	},
 	"keywords": [],

src/main.ts

@@ -147,25 +147,7 @@ export default class MathBooster extends Plugin {
 		this.registerMarkdownPostProcessor(createEquationNumberProcessor(this));
 		// Quick fix for https://github.com/RyotaUshio/obsidian-math-booster/issues/200
 		// But I don't really understand why this works. Please let me know if you know the reason.
-		this.app.workspace.onLayoutReady(() => {
-			setTimeout(async () => {
-				for (const leaf of this.app.workspace.getLeavesOfType('markdown')) {
-					const view = leaf.view as MarkdownView;
-					view.previewMode.rerender(true);
-					if (view.getMode() === 'source') {
-						const state = leaf.getViewState();
-						const focus = view === this.app.workspace.activeEditor;
-						state.state.mode = 'preview';
-						leaf.setViewState(state, { focus });
-						setTimeout(() => {
-							const state = leaf.getViewState();
-							state.state.mode = 'source';
-							leaf.setViewState(state, { focus });
-						}, 400);
-					}
-				}
-			}, 800)
-		})
+		this.app.workspace.onLayoutReady(() => this.forceRerender());
 
 		// proof environments
 		this.registerMarkdownPostProcessor(createProofProcessor(this));
@@ -454,4 +436,24 @@ export default class MathBooster extends Plugin {
 			}
 		});
 	}
+
+	forceRerender() {
+		setTimeout(async () => {
+			for (const leaf of this.app.workspace.getLeavesOfType('markdown')) {
+				const view = leaf.view as MarkdownView;
+				view.previewMode.rerender(true);
+				if (view.getMode() === 'source') {
+					const state = leaf.getViewState();
+					const focus = view === this.app.workspace.activeEditor;
+					state.state.mode = 'preview';
+					leaf.setViewState(state, { focus });
+					setTimeout(() => {
+						const state = leaf.getViewState();
+						state.state.mode = 'source';
+						leaf.setViewState(state, { focus });
+					}, 400);
+				}
+			}
+		}, 800);
+	}
 }

src/settings/helper.ts

@@ -104,7 +104,7 @@ export class TheoremCalloutSettingsHelper {
                         labelPrefixEl.textContent = THEOREM_LIKE_ENVs[this.settings.type as TheoremLikeEnvID].prefix + ":";
                         if (this.defaultSettings.labelPrefix) {
                             labelPrefixEl.textContent += this.defaultSettings.labelPrefix;
-                        }    
+                        }
                     }
                 });
             });
@@ -139,7 +139,7 @@ export abstract class SettingsHelper<SettingsType = MathContextSettings | ExtraS
 
     abstract makeSettingPane(): void;
 
-    addDropdownSetting(name: keyof SettingsType, options: readonly string[], prettyName: string, description?: string, defaultValue?: string) {
+    addDropdownSetting(name: keyof SettingsType, options: readonly string[], prettyName: string, description?: string, defaultValue?: string, additionalOnChange?: () => void) {
         const setting = new Setting(this.contentEl).setName(prettyName);
         if (description) {
             setting.setDesc(description);
@@ -164,6 +164,7 @@ export abstract class SettingsHelper<SettingsType = MathContextSettings | ExtraS
                 } else {
                     Object.assign(this.settings, { [name]: value });
                 }
+                additionalOnChange?.();
             })
         });
         this.settingRefs[name] = setting;
@@ -277,9 +278,9 @@ export class MathContextSettingsHelper extends SettingsHelper<MathContextSetting
         this.addHeading('Theorem callouts - general');
 
         this.addProfileSetting();
-        const styleSetting = this.addDropdownSetting("theoremCalloutStyle", THEOREM_CALLOUT_STYLES, "Style");
+        const styleSetting = this.addDropdownSetting("theoremCalloutStyle", THEOREM_CALLOUT_STYLES, "Style", undefined, undefined, () => this.plugin.forceRerender());
         styleSetting.descEl.replaceChildren(
-            "Choose between your custom style and preset styles. You will need to reload the note to see the changes. See the ",
+            "Choose between your custom style and preset styles. You might need to reopen the notes or reload the app to see the changes. See the ",
             createEl("a", { text: "documentation", attr: { href: "https://ryotaushio.github.io/obsidian-math-booster/style-your-theorems.html" } }),
             " for how to customize the appearance of theorem callouts. \"Custom\" is recommended, since it will give you the most control. You can view the CSS snippets for all the preset styles in the documentation or README on GitHub. The preset styles are only for a trial purpose, and they might not work well with some non-default themes.",
         );

styles.scss

@@ -0,0 +1,21 @@
+@use 'styles/main';
+@use 'styles/framed';
+@use 'styles/plain';
+@use 'styles/mathwiki';
+@use 'styles/vivid';
+
+:has(> .theorem-callout-framed) {
+    @include framed.framed();
+}
+
+:has(> .theorem-callout-plain) {
+    @include plain.plain();
+}
+
+:has(> .theorem-callout-mathwiki) {
+    @include mathwiki.mathwiki();
+}
+
+:has(> .theorem-callout-vivid) {
+    @include vivid.vivid();
+}

styles/framed.scss

@@ -0,0 +1,35 @@
+@mixin framed {
+    /* 
+    If you're going to use this file as a CSS snippet, only include the code between 
+    the START and END comments to your snippet file.
+    */
+    /* START */
+    .theorem-callout {
+        --callout-color: var(--text-normal);
+        background-color: rgb(0, 0, 0, 0);
+        border: solid var(--border-width);
+        border-radius: var(--size-2-3);
+    }
+
+    .theorem-callout .callout-icon {
+        display: none;
+    }
+
+    .theorem-callout .callout-title-inner {
+        font-family: CMU Serif, Times, Noto Sans JP;
+        font-weight: bolder;
+
+        .theorem-callout-subtitle {
+            font-weight: normal;
+        }    
+    }
+
+    .theorem-callout .callout-content {
+        font-family: CMU Serif, Times, Noto Serif JP;
+    }
+
+    :not(.theorem-callout-axiom):not(.theorem-callout-definition):not(.theorem-callout-remark).theorem-callout-en .callout-content {
+        font-style: italic;
+    }
+    /* END */
+}

styles/styles_main.css → styles/main.css

@@ -37,17 +37,17 @@
     padding: var(--size-4-6);
 }
 
-.math-booster-begin-proof-en {
-    font-style: italic;
+.math-booster-begin-proof {
     padding-right: 10px;
+    font-family: CMU Serif, Times, Noto Serif JP;
+    font-weight: bold;
 }
 
-.math-booster-begin-proof-ja {
-    font-weight: 600;
-    font-family: Times, Noto Sans JP;
-    padding-right: 10px;
+.math-booster-begin-proof-en {
+    font-style: italic;
 }
 
+
 .math-booster-end-proof {
     float: right;
 }

styles/mathwiki.scss

@@ -0,0 +1,49 @@
+@mixin mathwiki {
+    /* 
+    If you're going to use this file as a CSS snippet, only include the code between 
+    the START and END comments to your snippet file.
+    */
+    /* START */
+    .theorem-callout {
+        --callout-color: 248, 248, 255;
+        font-family: CMU Serif, Times, Noto Serif JP;
+    }
+
+    .theorem-callout .callout-title-inner {
+        padding-left: 5px;
+    }
+
+    .theorem-callout-subtitle {
+        font-weight: normal;
+    }
+
+    .theorem-callout-en .callout-content {
+        font-style: italic;
+    }
+
+    .theorem-callout-axiom {
+        /* Font Awesome: lock */
+        --callout-icon: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>';
+    }
+
+    .theorem-callout-definition {
+        /* Font Awesome: book */
+        --callout-icon: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>';
+    }
+
+    .theorem-callout-theorem {
+        /* Font Awesome: magic */
+        --callout-icon: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magic" class="svg-inline--fa fa-magic fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z"></path></svg>';
+    }
+
+    .theorem-callout-proposition {
+        /* Font Awesome: calculator */
+        --callout-icon: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="calculator" class="svg-inline--fa fa-calculator fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 0H48C22.4 0 0 22.4 0 48v416c0 25.6 22.4 48 48 48h352c25.6 0 48-22.4 48-48V48c0-25.6-22.4-48-48-48zM128 435.2c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm0-128c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm128 128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm0-128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm128 128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8V268.8c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v166.4zm0-256c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8V76.8C64 70.4 70.4 64 76.8 64h294.4c6.4 0 12.8 6.4 12.8 12.8v102.4z"></path></svg>';
+    }
+
+    .theorem-callout-example {
+        /* Font Awesome: anchor */
+        --callout-icon: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="anchor" class="svg-inline--fa fa-anchor fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z"></path></svg>';
+    }
+    /* END */
+}