refactor: refine css var (#27)

移除在 #25 中提供的字体和行高变量，改为和 halo-dev/plugin-comment-widget#80 中一致的字体设置方案。

添加了三个 CSS 变量：

```
--halo-search-widget-base-font-size: ;			全局字体大小
--halo-search-widget-base-border-radius: ;	边框圆角
--halo-search-widget-base-font-family: ;			字体
```

/kind feature

```release-note
添加和字体相关的 CSS 变量
```

Author: ruibaby

.gitignore

@@ -72,4 +72,5 @@ application-local.properties
 
 /packages/*/node_modules/
 node_modules
-/workplace/
+/workplace/
+/src/main/resources/static

README.md

@@ -62,49 +62,62 @@ halo:
 
 其中，`pluginFinder.available('PluginSearchWidget')` 的作用是判断使用者是否安装和启用了此插件，如果没有安装或者没有启用，那么就不会显示搜索入口。
 
-### 适配配色
-
-目前，此插件为了让主题更好的适配颜色，对外暴露了以下 CSS 变量：
+### 自定义样式
+
+虽然目前不能直接为搜索组件编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让搜索组件和主题更好地融合。
+
+目前已提供的 CSS 变量：
+
+| 变量名                                              | 描述               |
+| --------------------------------------------------- | ------------------ |
+| `--halo-search-widget-base-font-size`               | 基础字体大小       |
+| `--halo-search-widget-base-border-radius`           | 基础元素的圆角     |
+| `--halo-search-widget-base-font-family`             | 基础字体族         |
+| `--halo-search-widget-color-modal-layer`            | 模态层颜色         |
+| `--halo-search-widget-color-modal-content-bg`       | 模态内容背景颜色   |
+| `--halo-search-widget-color-form-input-bg`          | 表单输入背景颜色   |
+| `--halo-search-widget-color-form-input`             | 表单输入文字颜色   |
+| `--halo-search-widget-color-form-input-placeholder` | 表单输入占位符颜色 |
+| `--halo-search-widget-color-form-divider`           | 表单分隔线颜色     |
+| `--halo-search-widget-color-result-empty`           | 无结果提示颜色     |
+| `--halo-search-widget-color-result-item-bg`         | 结果项背景颜色     |
+| `--halo-search-widget-color-result-item-hover-bg`   | 结果项悬停背景颜色 |
+| `--halo-search-widget-color-result-item-title`      | 结果项标题颜色     |
+| `--halo-search-widget-color-result-item-content`    | 结果项内容颜色     |
+| `--halo-search-widget-color-command-kbd-item`       | 命令键盘项颜色     |
+| `--halo-search-widget-color-command-kbd-border`     | 命令键盘边框颜色   |
+
+<details>
+<summary>点击查看 CSS 代码模板</summary>
 
 ```css
---halo-search-widget-color-modal-layer: ;             /* 搜索弹框遮罩层颜色 */
---halo-search-widget-color-modal-content-bg: ;        /* 搜索弹框内容区域背景色 */
---halo-search-widget-color-form-input: ;              /* 搜索框输入框字体颜色 */
---halo-search-widget-color-form-input-placeholder: ;  /* 搜索框输入框占位符颜色 */
---halo-search-widget-color-form-input-bg: ;           /* 搜索框输入框背景色 */
---halo-search-widget-color-form-divider: ;            /* 搜索框分割线颜色 */
---halo-search-widget-color-result-item-bg: ;          /* 搜索结果项背景色 */
---halo-search-widget-color-result-item-hover-bg: ;    /* 搜索结果项鼠标悬浮背景色 */
---halo-search-widget-color-result-item-title: ;       /* 搜索结果项标题颜色 */
---halo-search-widget-color-result-item-content: ;     /* 搜索结果项内容颜色 */
---halo-search-widget-color-command-kbd-item: ;        /* 搜索结果项快捷键提示字体颜色 */
---halo-search-widget-color-command-kbd-border: ;      /* 搜索结果项快捷键提示边框颜色 */
---halo-search-widget-color-result-empty: ;            /* 搜索结果为空时的颜色 */
+:root {
+   --halo-search-widget-base-font-size: ;
+   --halo-search-widget-base-border-radius: ;
+   --halo-search-widget-base-font-family: ;
+   --halo-search-widget-color-modal-layer: ;
+   --halo-search-widget-color-modal-content-bg: ;
+   --halo-search-widget-color-form-input-bg: ;
+   --halo-search-widget-color-form-input: ;
+   --halo-search-widget-color-form-input-placeholder: ;
+   --halo-search-widget-color-form-divider: ;
+   --halo-search-widget-color-result-empty: ;
+   --halo-search-widget-color-result-item-bg: ;
+   --halo-search-widget-color-result-item-hover-bg: ;
+   --halo-search-widget-color-result-item-title: ;
+   --halo-search-widget-color-result-item-content: ;
+   --halo-search-widget-color-command-kbd-item: ;
+   --halo-search-widget-color-command-kbd-border: ;
+}
 ```
 
-主题可以利用这些 CSS 变量来适配主题的配色，或者用于适配暗黑模式。
+</details>
 
-适配主题配色示例：
+### 配色切换方案
 
-```css
-:root {
-  --halo-search-widget-color-modal-layer: rgb(107 114 128 / 0.75);
-  --halo-search-widget-color-modal-content-bg: #fff;
-  --halo-search-widget-color-form-input: #000;
-  --halo-search-widget-color-form-input-placeholder: #999;
-  --halo-search-widget-color-form-input-bg: #fff;
-  --halo-search-widget-color-form-divider: #eaeaea;
-  --halo-search-widget-color-result-item-bg: #fff;
-  --halo-search-widget-color-result-item-hover-bg: #f5f5f5;
-  --halo-search-widget-color-result-item-title: #000;
-  --halo-search-widget-color-result-item-content: #999;
-  --halo-search-widget-color-command-kbd-item: #fff;
-  --halo-search-widget-color-command-kbd-border: #fff;
-  --halo-search-widget-color-result-empty: #999;
-}
-```
+根据上面提供的 CSS 变量，也可以通过定义 CSS 变量的方式为搜索组件提供动态切换配色的功能。
 
-适配暗黑模式切换示例：
+以下是实现示例，你可以根据需求自行修改选择器或者媒体查询。
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -154,34 +167,3 @@ halo:
    1. `auto`：自动模式，根据系统的暗黑模式自动切换。
    2. `dark`：强制暗黑模式。
    3. `light`：强制明亮模式。
-
-### 适配字体和字号
-为了更好的调整搜索框的大小和字体以适配主题，提供了以下 CSS 变量：
-```css
---halo-search-widget-font-size-search-form-input:;                     /*输入框字体大小*/
---halo-search-widget-line-height-search-form-input:;                   /*输入框行高*/
---halo-search-widget-font-size-search-form-result-item-title:;         /*搜索结果项标题字体大小*/
---halo-search-widget-line-height-search-form-result-item-title:;       /*搜索结果项标题行高*/
---halo-search-widget-font-size-search-form-result-item-content:;       /*搜索结果项内容字体大小*/
---halo-search-widget-line-height-search-form-result-item-content:;     /*搜索结果项内容行高*/
---halo-search-widget-font-size-search-form-empty:;                     /*搜索结果为空时的字体大小*/
---halo-search-widget-line-height-search-form-empty:;                   /*搜索结果为空时的行高*/
---halo-search-widget-font-size-search-form-commands-item:;             /*搜索框底部快捷键提示字体大小*/
---halo-search-widget-line-height-search-commands-item:;                /*搜索框底部快捷键提示行高*/
---halo-search-widget-font-size-search-form-commands-item-kbd:;         /*搜索框底部快捷键提示图标大小*/ 
---halo-search-widget-min-width-search-commands-item-kbd:;              /*搜索框底部快捷键提示图标 min-wight*/
---halo-search-widget-font-family-search-form:;                         /*搜索框字体*/
-```
-适配主题字体示例：
-```css
-@font-face {
-            font-family: "custom-font2";
-            font-weight: 400;
-            font-style: normal;
-            font-display: swap;
-            src: url("/upload/AlimamaDaoLiTi.woff2") format("woff2");
-        }
-html body {
-    --halo-search-widget-font-family-search-form: "custom-font2";
-}
-```

build.gradle

@@ -1,8 +1,8 @@
 plugins {
     id 'java'
     id "io.freefair.lombok" version "8.0.1"
-    id "com.github.node-gradle.node" version "3.3.0"
-    id "run.halo.plugin.devtools" version "0.0.4"
+    id "com.github.node-gradle.node" version "5.0.0"
+    id "run.halo.plugin.devtools" version "0.0.7"
 }
 
 group 'run.halo.search.widget'
@@ -31,17 +31,15 @@ node {
     nodeProjectDir = file("${project.projectDir}")
 }
 
-task buildFrontend(type: NpxTask) {
-    command = 'pnpm'
+task buildFrontend(type: PnpmTask) {
     args = ['build:packages']
 }
 
-task pnpmInstall(type: NpxTask) {
-    command = "pnpm"
-    args = ["install"]
-}
-
 build {
     // build frontend before build
     tasks.getByName('compileJava').dependsOn('buildFrontend')
 }
+
+halo {
+    version = "2.12.0"
+}