feat(plugin-pwa-popup): add more css variables

- refactor: extract css vars to a separate file

Author: meteorlxy

docs/reference/plugin/pwa-popup.md

@@ -52,8 +52,4 @@ module.exports = {
 
 You can customize the style of the popup via CSS variables:
 
-```css
-:root {
-  --pwa-popup-color: #3eaf7c;
-}
-```
+@[code css](@vuepress/plugin-pwa-popup/src/client/styles/vars.css)

docs/zh/reference/plugin/pwa-popup.md

@@ -52,8 +52,4 @@ module.exports = {
 
 你可以通过 CSS 变量来自定义弹窗的样式：
 
-```css
-:root {
-  --pwa-popup-color: #3eaf7c;
-}
-```
+@[code css](@vuepress/plugin-pwa-popup/src/client/styles/vars.css)

packages/@vuepress/plugin-pwa-popup/src/client/components/PwaPopup.ts

@@ -4,7 +4,8 @@ import { useRouteLocale } from '@vuepress/client'
 import { usePwaEvent, useSkipWaiting } from '@vuepress/plugin-pwa/lib/client'
 import type { LocaleConfig } from '@vuepress/shared'
 
-import './PwaPopup.css'
+import '../styles/vars.css'
+import '../styles/pwa-popup.css'
 
 export type PwaPopupLocales = LocaleConfig<{
   message: string

packages/@vuepress/plugin-pwa-popup/src/client/index.ts

@@ -1 +1,2 @@
 export * from './components/PwaPopup'
+export * from './components/PwaPopupWrapper'

packages/@vuepress/plugin-pwa-popup/src/client/components/PwaPopup.css renamed to packages/@vuepress/plugin-pwa-popup/src/client/styles/pwa-popup.css

@@ -1,23 +1,27 @@
-:root {
-  --pwa-popup-color: #3eaf7c;
-}
-
 .pwa-popup {
   position: fixed;
   right: 1em;
   bottom: 1em;
   padding: 1em;
-  border: 1px solid #3eaf7c;
+  border: 1px solid var(--pwa-popup-border-color);
   border-radius: 3px;
-  background: #fff;
-  box-shadow: 0 4px 16px var(--pwa-popup-color);
+  background-color: var(--pwa-popup-bg-color);
+  box-shadow: var(--pwa-popup-shadow);
   text-align: center;
-  z-index: 3;
+  z-index: var(--pwa-popup-z-index);
 }
 
 .pwa-popup > button {
+  cursor: pointer;
   margin-top: 0.5em;
   padding: 0.25em 2em;
+  border: none;
+  color: var(--pwa-popup-btn-text-color);
+  background-color: var(--pwa-popup-btn-bg-color);
+}
+
+.pwa-popup > button:hover {
+  background-color: var(--pwa-popup-btn-hover-bg-color);
 }
 
 .pwa-popup-enter-active,

packages/@vuepress/plugin-pwa-popup/src/client/styles/vars.css

@@ -0,0 +1,12 @@
+:root {
+  --pwa-popup-z-index: 3;
+
+  --pwa-popup-text-color: #2c3e50;
+  --pwa-popup-bg-color: #ffffff;
+  --pwa-popup-border-color: #3eaf7c;
+  --pwa-popup-shadow: 0 4px 16px var(--pwa-popup-border-color);
+
+  --pwa-popup-btn-text-color: #ffffff;
+  --pwa-popup-btn-bg-color: #3eaf7c;
+  --pwa-popup-btn-hover-bg-color: #4abf8a;
+}

packages/@vuepress/theme-default/src/client/styles/vars.scss

@@ -106,3 +106,14 @@
   --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
   --docsearch-footer-background: var(--c-bg);
 }
+
+// plugin-pwa-popup
+.pwa-popup {
+  --pwa-popup-text-color: var(--c-text);
+  --pwa-popup-bg-color: var(--c-bg);
+  --pwa-popup-border-color: var(--c-brand);
+  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
+  --pwa-popup-btn-text-color: var(--c-bg);
+  --pwa-popup-btn-bg-color: var(--c-brand);
+  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
+}