refactor(gutter): replace font size dropdown with 12-24px slider

Simpler and more flexible than mapping to Obsidian CSS variables.
Default is 15px.

common/data.ts

@@ -325,9 +325,9 @@ export function defaultSettings(): HeadingPluginSettings {
     sourceHideNumberSigns: false,
     useGutter: false,
     gutterPosition: "before-line-numbers",
-    gutterFontSize: "ui-small",
+    gutterFontSize: 15,
     enabledGutterSettings: false,
-    gutterSettings: { ...defaultHeadingDecoratorSettings(), opacity: 100 },
+    gutterSettings: { ...defaultHeadingDecoratorSettings(), opacity: 80 },
     enabledInOutline: false,
     enabledOutlineSettings: false,
     outlineSettings: defaultHeadingDecoratorSettings(),

components/plugin.ts

@@ -472,15 +472,9 @@ export class HeadingPlugin extends Plugin {
   }
 
   private applyGutterFontSize(): void {
-    const cssVarMap: Record<GutterFontSize, string> = {
-      "ui-smaller": "var(--font-ui-smaller)",
-      "ui-small": "var(--font-ui-small)",
-      "ui-medium": "var(--font-ui-medium)",
-      "ui-large": "var(--font-ui-large)",
-    };
     document.body.style.setProperty(
       "--heading-decorator-gutter-font-size",
-      cssVarMap[this.settings.gutterFontSize] ?? "var(--font-ui-small)"
+      `${this.settings.gutterFontSize}px`
     );
   }
 

components/setting-tab.ts

@@ -118,22 +118,16 @@ export class HeadingSettingTab extends PluginSettingTab {
       new Setting(containerEl)
         .setName(i18n.t("setting.gutterFontSize"))
         .setDesc(i18n.t("setting.gutterFontSizeDesc"))
-        .addDropdown((dropdown) => {
-          dropdown
-            .addOptions({
-              "ui-smaller": i18n.t("setting.gutterFontSizeSmaller"),
-              "ui-small": i18n.t("setting.gutterFontSizeSmall"),
-              "ui-medium": i18n.t("setting.gutterFontSizeMedium"),
-              "ui-large": i18n.t("setting.gutterFontSizeLarge"),
-            })
+        .addSlider((slider) =>
+          slider
+            .setLimits(12, 24, 1)
             .setValue(settings.gutterFontSize)
             .onChange((value) => {
-              settings.gutterFontSize = this.isGutterFontSize(value)
-                ? value
-                : "ui-small";
+              settings.gutterFontSize = value;
               this.plugin.saveSettings();
-            });
-        })
+            })
+            .setDynamicTooltip()
+        )
     );
 
     //* enabledGutterSettings
@@ -542,10 +536,6 @@ export class HeadingSettingTab extends PluginSettingTab {
     return ["before-line-numbers", "after-line-numbers"].includes(value);
   }
 
-  private isGutterFontSize(value: string): value is GutterFontSize {
-    return ["ui-smaller", "ui-small", "ui-medium", "ui-large"].includes(value);
-  }
-
   private manageHeadingDecoratorSettings(
     settingsType: PluginDecoratorSettingsType
   ) {

locales/en.json

@@ -162,11 +162,7 @@
     "beforeLineNumbers": "Before line numbers",
     "afterLineNumbers": "After line numbers",
     "gutterFontSize": "Gutter font size",
-    "gutterFontSizeDesc": "Set the font size for heading decorations in the gutter column.",
-    "gutterFontSizeSmaller": "Smaller (12px)",
-    "gutterFontSizeSmall": "Small (13px)",
-    "gutterFontSizeMedium": "Medium (15px)",
-    "gutterFontSizeLarge": "Large (20px)",
+    "gutterFontSizeDesc": "Set the font size (in pixels) for heading decorations in the gutter column.",
     "enabledInGutterConfig": "Heading decorator for gutter",
     "enabledInGutterConfigDesc": "Ignore the generic heading decorator config and set the heading decorator for the gutter display.",
     "logic": "Logic",

locales/zh-TW.json

@@ -162,11 +162,7 @@
     "beforeLineNumbers": "在行號之前",
     "afterLineNumbers": "在行號之後",
     "gutterFontSize": "邊欄字型大小",
-    "gutterFontSizeDesc": "設定邊欄中標題裝飾器的字型大小。",
-    "gutterFontSizeSmaller": "較小 (12px)",
-    "gutterFontSizeSmall": "小 (13px)",
-    "gutterFontSizeMedium": "中等 (15px)",
-    "gutterFontSizeLarge": "大 (20px)",
+    "gutterFontSizeDesc": "設定邊欄中標題裝飾器的字型大小（像素）。",
     "enabledInGutterConfig": "邊欄的標題裝飾器",
     "enabledInGutterConfigDesc": "忽略通用的標題裝飾器配置，單獨配置邊欄的標題裝飾器。",
     "logic": "邏輯控制",

locales/zh.json

@@ -162,11 +162,7 @@
     "beforeLineNumbers": "在行号之前",
     "afterLineNumbers": "在行号之后",
     "gutterFontSize": "边栏字体大小",
-    "gutterFontSizeDesc": "设置边栏中标题装饰器的字体大小。",
-    "gutterFontSizeSmaller": "较小 (12px)",
-    "gutterFontSizeSmall": "小 (13px)",
-    "gutterFontSizeMedium": "中等 (15px)",
-    "gutterFontSizeLarge": "大 (20px)",
+    "gutterFontSizeDesc": "设置边栏中标题装饰器的字体大小（像素）。",
     "enabledInGutterConfig": "边栏的标题装饰器",
     "enabledInGutterConfigDesc": "忽略通用的标题装饰器配置，单独配置边栏的标题装饰器。",
     "logic": "逻辑控制",

types.d.ts

@@ -14,7 +14,7 @@ type DecoratorMode = "orderd" | "independent" | "splice" | "unordered";
 type OpacityOptions = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
 type PostionOptions = "before" | "before-inside" | "after" | "after-inside";
 type GutterPosition = "before-line-numbers" | "after-line-numbers";
-type GutterFontSize = "ui-smaller" | "ui-small" | "ui-medium" | "ui-large";
+type GutterFontSize = number;
 type RenderPolicy = "partial" | "full";
 
 type PluginDecoratorSettingsType =