Skip to content

Commit

Permalink
feat: extract more CSS variables (#25)
Browse files Browse the repository at this point in the history 
为了更好的适配主题样式，新增以下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 变量以更好地适配主题样式
```
  • Loading branch information
@jiewenhuang
jiewenhuang authored Feb 20, 2024
1 parent 7390bfa commit 5b90f5d
Show file tree
Hide file tree
Showing 3 changed files with 245 additions and 90 deletions.
31 changes: 31 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
```
92 changes: 76 additions & 16 deletions packages/search-widget/src/search-form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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);
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
Expand Down
Loading

0 comments on commit 5b90f5d

Please sign in to comment.