@varlet/cli 1.26.2 → 1.26.3

package/lib/config/vite.config.js

@@ -65,6 +65,7 @@ function getBuildConfig(varletConfig) {
             outDir: constant_1.SITE_OUTPUT_PATH,
             brotliSize: false,
             emptyOutDir: true,
+            cssTarget: 'chrome61',
             rollupOptions: {
                 input: {
                     main: (0, path_1.resolve)(constant_1.SITE_DIR, 'index.html'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.26.2",
+  "version": "1.26.3",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -33,9 +33,9 @@
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@varlet/icons": "1.26.2",
-    "@varlet/markdown-vite-plugin": "1.26.2",
-    "@varlet/touch-emulator": "1.26.2",
+    "@varlet/icons": "1.26.3",
+    "@varlet/markdown-vite-plugin": "1.26.3",
+    "@varlet/touch-emulator": "1.26.3",
     "@vitejs/plugin-vue": "2.2.0",
     "@vitejs/plugin-vue-jsx": "1.3.5",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -75,7 +75,7 @@
     "@types/semver": "^7.3.9"
   },
   "peerDependencies": {
-    "@varlet/touch-emulator": "1.26.2",
+    "@varlet/touch-emulator": "1.26.3",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",

package/site/components/code-example/codeExample.less

@@ -2,6 +2,15 @@
   margin-top: 16px;
   margin-bottom: 4px;
   position: relative;
+  border: thin solid var(--site-config-color-hl-border);
+  border-radius: 4px;
+  transition: border .25s;
+
+  &:hover {
+    .var-site-code-example__toolbar {
+      opacity: 1;
+    }
+  }
 
   &__toolbar {
     display: flex;
@@ -10,9 +19,11 @@
     z-index: 1;
     right: 10px;
     top: 10px;
+    opacity: 0;
+    transition: .25s all;
 
     button {
-      color: white !important;
+      color: var(--site-config-color-hl-code) !important;
     }
   }
 

package/site/pc/App.vue

@@ -129,14 +129,50 @@ export default defineComponent({
 
 <style>
 .hljs {
-  background: #272727 !important;
+  background: var(--site-config-color-hl-background) !important;
   padding: 0 !important;
-  border-radius: 4px;
+  transition: all .25s
 }
 
 .hljs code {
   line-height: 31px;
 }
+
+.hljs-comment, .hljs-meta, .hljs-quote {
+  color: var(--site-config-color-hl-group-a)
+}
+
+.hljs-keyword, .hljs-name, .hljs-selector-tag, .hljs-tag {
+  color: var(--site-config-color-hl-group-b)
+}
+
+.hljs-attribute, .hljs-selector-id {
+  color: var(--site-config-color-hl-group-c)
+}
+
+.hljs-addition, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-string {
+  color: var(--site-config-color-hl-group-d)
+}
+
+.hljs-subst {
+  color: var(--site-config-color-hl-group-e)
+}
+
+.hljs-link, .hljs-regexp {
+  color: var(--site-config-color-hl-group-f)
+}
+
+.hljs-doctag, .hljs-section, .hljs-title, .hljs-type {
+  color: var(--site-config-color-hl-group-g)
+}
+
+.hljs-bullet, .hljs-literal, .hljs-symbol, .hljs-template-variable, .hljs-variable {
+  color: var(--site-config-color-hl-group-h)
+}
+
+.hljs-deletion, .hljs-number {
+  color: var(--site-config-color-hl-group-i)
+}
 </style>
 
 <style lang="less">
@@ -306,7 +342,7 @@ iframe {
         font-family: Consolas, Monaco, monospace;
         white-space: pre-wrap;
         word-wrap: break-word;
-        color: #fff;
+        color: var(--site-config-color-hl-code);
       }
 
       p code,

package/varlet.default.config.js

@@ -80,6 +80,18 @@ module.exports = {
     'color-pc-language-active-background': '#edf5ff',
     'color-mobile-language-active': '#3a7afe',
     'color-mobile-language-active-background': '#edf5ff',
+    'color-hl-background': '#fafafa',
+    'color-hl-code': '#58727e',
+    'color-hl-border': '#f3f3f3',
+    'color-hl-group-a': '#7c7c7c',
+    'color-hl-group-b': '#2196f3',
+    'color-hl-group-c': '#ff9422',
+    'color-hl-group-d': '#58c193',
+    'color-hl-group-e': '#ff9422',
+    'color-hl-group-f': '#ff9422',
+    'color-hl-group-g': '#ff9422',
+    'color-hl-group-h': '#06a6e9',
+    'color-hl-group-i': '#f23733',
   },
   darkThemes: {
     'color-body': '#121212',
@@ -90,9 +102,9 @@ module.exports = {
     'color-border': '#333',
     'color-shadow': '#121212',
     'color-introduce-border': '#555',
-    'color-primary': '#5580f8',
-    'color-link': '#10c48f',
-    'color-type': '#10c48f',
+    'color-primary': '#96cbfe',
+    'color-link': '#A8FFC4',
+    'color-type': '#A8FFC4',
     'color-progress': '#5580f8',
     'color-progress-track': '#202020',
     'color-side-bar': '#4a7afe',
@@ -104,5 +116,17 @@ module.exports = {
     'color-pc-language-active-background': '#4a7afe20',
     'color-mobile-language-active': '#4a7afe',
     'color-mobile-language-active-background': '#4a7afe20',
+    'color-hl-background': '#272727',
+    'color-hl-code': '#fff',
+    'color-hl-border': '#272727',
+    'color-hl-group-a': '#7c7c7c',
+    'color-hl-group-b': '#96cbfe',
+    'color-hl-group-c': '#ff7b1e',
+    'color-hl-group-d': '#A8FFC4',
+    'color-hl-group-e': '#ff7b1e',
+    'color-hl-group-f': '#ff7b1e',
+    'color-hl-group-g': '#ff7b1e',
+    'color-hl-group-h': '#14a6e9',
+    'color-hl-group-i': '#ed4648',
   },
 }