feat: add some utilities to handle highlight color customization

src/color-management/createCSSRuleFromColorConfig.ts

@@ -0,0 +1,8 @@
+import { ColorConfig } from "src/types";
+
+export function createCSSRuleFromColorConfig(config: ColorConfig) {
+    let selector = `.cm-custom-highlight-${config.tag}, .markdown-rendered mark.custom-highlight-${config.tag}, .menu-item-${config.tag}>.menu-item-title`,
+        prop = "background-color",
+        color = config.color;
+    return `${selector}{${prop}:color(from ${color} srgb r g b/var(--hl-opacity));}`
+}

src/color-management/createColorConfig.ts

@@ -0,0 +1,5 @@
+import { ColorConfig } from "src/types";
+
+export function createColorConfig(tag: string, color: string, name: string, showInMenu = true): ColorConfig {
+    return { tag, color, name, showInMenu }
+}

src/color-management/getDefaultColorConfigs.ts

@@ -0,0 +1,15 @@
+import { ColorConfig } from "src/types";
+import { takeBuiltinColor } from "src/color-management";
+
+export function getDefaultColorConfigs() {
+    let configs: ColorConfig[] = [],
+        predefinedTags = ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"],
+        predefinedNames = ["Red", "Orange", "Yellow", "Green", "Cyan", "Blue", "Purple", "Pink"];
+    for (let i = 0; i < predefinedTags.length; i++) {
+        let tag = predefinedTags[i],
+            name = predefinedNames[i],
+            color = takeBuiltinColor(tag) ?? "#ffffff";
+        configs.push({ tag, name, color, showInMenu: true });
+    }
+    return configs;
+}

src/color-management/index.ts

@@ -0,0 +1,4 @@
+export * from "./createCSSRuleFromColorConfig";
+export * from "./takeBuiltinColor";
+export * from "./getDefaultColorConfigs";
+export * from "./createColorConfig";

src/color-management/takeBuiltinColor.ts

@@ -0,0 +1,3 @@
+export function takeBuiltinColor(color: string) {
+    return document.body.computedStyleMap().get(`--color-${color}`)?.toString();
+}