refactor(plugin-search): extract css vars to a separate file

Author: meteorlxy

docs/reference/plugin/search.md

@@ -140,19 +140,7 @@ module.exports = {
 
 You can customize the style of the search box via CSS variables:
 
-```css
-:root {
-  --search-accent-color: #3eaf7c;
-  --search-text-color: #2c3e50;
-  --search-border-color: #eaecef;
-
-  --search-item-text-color: #5d81a5;
-  --search-item-focus-bg-color: #f3f4f5;
-
-  --search-input-width: 8rem;
-  --search-result-width: 20rem;
-}
-```
+@[code css](@vuepress/plugin-search/src/client/styles/vars.css)
 
 ## Components
 

docs/zh/reference/plugin/search.md

@@ -140,19 +140,7 @@ module.exports = {
 
 你可以通过 CSS 变量来自定义搜索框的样式：
 
-```css
-:root {
-  --search-accent-color: #3eaf7c;
-  --search-text-color: #2c3e50;
-  --search-border-color: #eaecef;
-
-  --search-item-text-color: #5d81a5;
-  --search-item-focus-bg-color: #f3f4f5;
-
-  --search-input-width: 8rem;
-  --search-result-width: 20rem;
-}
-```
+@[code css](@vuepress/plugin-search/src/client/styles/vars.css)
 
 ## 组件
 

packages/@vuepress/plugin-search/src/client/clientAppEnhance.ts

@@ -3,6 +3,9 @@ import { defineClientAppEnhance } from '@vuepress/client'
 import { SearchBox } from './components/SearchBox'
 import type { SearchBoxLocales } from './components/SearchBox'
 
+import './styles/vars.css'
+import './styles/search.css'
+
 declare const __SEARCH_LOCALES__: SearchBoxLocales
 declare const __SEARCH_HOT_KEYS__: string[]
 declare const __SEARCH_MAX_SUGGESTIONS__: number

packages/@vuepress/plugin-search/src/client/components/SearchBox.ts

@@ -9,7 +9,6 @@ import {
   useSearchSuggestions,
   useSuggestionsFocus,
 } from '../composables'
-import './SearchBox.css'
 
 export type SearchBoxLocales = LocaleConfig<{
   placeholder: string

packages/@vuepress/plugin-search/src/client/components/SearchBox.css renamed to packages/@vuepress/plugin-search/src/client/styles/search.css

@@ -1,16 +1,3 @@
-:root {
-  --search-bg-color: #ffffff;
-  --search-accent-color: #3eaf7c;
-  --search-text-color: #2c3e50;
-  --search-border-color: #eaecef;
-
-  --search-item-text-color: #5d81a5;
-  --search-item-focus-bg-color: #f3f4f5;
-
-  --search-input-width: 8rem;
-  --search-result-width: 20rem;
-}
-
 .search-box {
   display: inline-block;
   position: relative;

packages/@vuepress/plugin-search/src/client/components/search.svg renamed to packages/@vuepress/plugin-search/src/client/styles/search.svg

@@ -0,0 +1,12 @@
+:root {
+  --search-bg-color: #ffffff;
+  --search-accent-color: #3eaf7c;
+  --search-text-color: #2c3e50;
+  --search-border-color: #eaecef;
+
+  --search-item-text-color: #5d81a5;
+  --search-item-focus-bg-color: #f3f4f5;
+
+  --search-input-width: 8rem;
+  --search-result-width: 20rem;
+}