feat: extract more CSS variables (#25)

为了更好的适配主题样式，新增以下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:;                         /*搜索框字体*/
```

```release-note
新增 CSS 变量以更好地适配主题样式
```

README.md

@@ -154,3 +154,34 @@ 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";
+}
+```

packages/search-widget/src/search-form.ts

@@ -196,17 +196,77 @@ export class SearchForm extends LitElement {
  --halo-search-widget-color-command-kbd-border,
  #e5e7eb
  );
+ --font-size-search-form-input: var(
+ --halo-search-widget-font-size-search-form-input,
+ 1rem
+ );
+ --line-height-search-form-input: var(
+ --halo-search-widget-line-height-search-form-input,
+ 1.5rem
+ );
+ --font-size-search-form-result-item-title: var(
+ --halo-search-widget-font-size-search-form-result-item-title,
+ 0.875rem
+ );
+ --line-height-search-form-result-item-title: var(
+ --halo-search-widget-line-height-search-form-result-item-title,
+ 1.25rem
+ );
+ --font-size-search-form-result-item-content: var(
+ --halo-search-widget-font-size-search-form-result-item-content,
+ 0.75rem
+ );
+ --line-height-search-form-result-item-content: var(
+ --halo-search-widget-line-height-search-form-result-item-content,
+ 1rem
+ );
+ --font-size-search-form-empty: var(
+ --halo-search-widget-font-size-search-form-empty,
+ 0.875rem
+ );
+ --line-height-search-form-empty: var(
+ --halo-search-widget-line-height-search-form-empty,
+ 1.25rem
+ );
+ --font-size-search-form-loading: var(
+ --halo-search-widget-font-size-search-form-loading,
+ 0.875rem
+ );
+ --line-height-search-form-loading: var(
+ --halo-search-widget-line-height-search-form-loading,
+ 1.25rem
+ );
+ --font-size-search-form-commands-item: var(
+ --halo-search-widget-font-size-search-form-commands-item,
+ 0.75rem
+ );
+ --line-height-search-form-commands-item: var(
+ --halo-search-widget-line-height-search-commands-item,
+ 1rem
+ );
+ --font-size-search-form-commands-item-kbd: var(
+ --halo-search-widget-font-size-search-form-commands-item-kbd,
+ 10px
+ );
+ --min-width-search-form-commands-item-kbd: var(
+ --halo-search-widget-min-width-search-commands-item-kbd,
+ 1.25rem
+ );
+ --font-family-custom-sreach-form: var(
+ --halo-search-widget-font-family-search-form,
+ custom-font
+ );
  }
 
  :host * {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
- Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
- 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol,
- 'Noto Color Emoji';
+ font-family: var(--font-family-custom-sreach-form), ui-sans-serif,
+ system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+ Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
+ 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
  font-feature-settings: normal;
  font-variation-settings: normal;
  }
@@ -226,8 +286,8 @@ export class SearchForm extends LitElement {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border: none;
- font-size: 1rem;
- line-height: 1.5rem;
+ font-size: var(--font-size-search-form-input);
+ line-height: var(--line-height-search-form-input);
  background-color: var(--color-form-input-bg);
  color: var(--color-form-input);
  }
@@ -245,8 +305,8 @@ export class SearchForm extends LitElement {
  display: flex;
  align-items: center;
  justify-content: center;
- font-size: 0.875rem;
- line-height: 1.25rem;
+ font-size: var(--font-size-search-form-empty);
+ line-height: var(--line-height-search-form-empty);
  color: var(--color-result-empty);
  }
 
@@ -281,17 +341,17 @@ export class SearchForm extends LitElement {
  }
 
  .search-form__result-item-title {
- font-size: 0.875rem;
- line-height: 1.25rem;
+ font-size: var(--font-size-search-form-result-item-title);
+ line-height: var(--line-height-search-form-result-item-title);
  font-weight: 600;
  padding: 0;
  margin: 0;
  color: var(--color-result-item-title);
  }
 
  .search-form__result-item-content {
- font-size: 0.75rem;
- line-height: 1rem;
+ font-size: var(--font-size-search-form-result-item-content);
+ line-height: var(--line-height-search-form-result-item-content);
  color: var(--color-result-item-content);
  padding: 0;
  margin: 0;
@@ -316,20 +376,20 @@ export class SearchForm extends LitElement {
  }
 
  .search-form__commands-item span {
- font-size: 0.75rem;
- line-height: 1rem;
+ font-size: var(--font-size-search-form-commands-item);
+ line-height: var(--line-height-search-form-commands-item);
  color: var(--color-command-kbd-item);
  }
 
  .search-form__commands-item kbd {
  color: var(--color-command-kbd-item);
- font-size: 10px;
+ font-size: var(--font-size-search-form-commands-item-kbd);
  text-align: center;
  padding: 0.125rem 0.3rem;
  border-width: 1px;
  border-radius: 0.25rem;
  border-color: var(--color-command-kbd-border);
- min-width: 1.25rem;
+ min-width: var(--min-width-search-form-commands-item-kbd);
  margin-left: 0.3rem;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }