docs: ✏️ optimize docs styles

.dumi/theme/builtins/Tree.less

@@ -1,9 +1,10 @@
 @import (reference) '~dumi-theme-default/src/style/variables.less';
+@import '../style/variables.less';
 
 .__dumi-site-tree {
   padding: 16px;
-  border: 1px solid @c-border;
-  border-radius: 2px;
+  border: 1px solid lighten(@border-primary, 10%);
+  border-radius: @border-radius;
   background-color: @c-light-bg;
 
   [data-prefers-color=dark] & {

.dumi/theme/layout.tsx

@@ -0,0 +1,4 @@
+import Layout from 'dumi-theme-default/src/layout';
+import './style/layout.less';
+
+export default Layout;

.dumi/theme/style/layout.less

@@ -0,0 +1,164 @@
+@import './variables.less';
+
+.markdown blockquote {
+  border-radius: @border-radius;
+  background-color: lighten(@bg-primary, 60%);
+  color: @blockquote-text-primary;
+}
+
+pre[class*="language-"] {
+  border-radius: @border-radius;
+  border-color: lighten(@border-primary, 10%);
+}
+
+.__dumi-default-menu-inner {
+  ul.__dumi-default-menu-list {
+    > li {
+      margin: 0 15px;
+
+      > a {
+        border-radius: @border-radius;
+      }
+    }
+
+    li {
+      span {
+        color: @text-secondary;
+      }
+    }
+
+    a {
+      :hover {
+        color: @text-dark;
+        transition: all @transition-delay;
+      }
+
+      &.active {
+        color: @bg-primary;
+
+        > span {
+          color: @bg-primary;
+        }
+      }
+    }
+  }
+}
+
+.__dumi-default-menu {
+  &[data-mode='site'] {
+    .__dumi-default-menu-list {
+      > li {
+        margin-bottom: 10px;
+
+        > a.active, > a:hover {
+          background: lighten(@bg-primary, 60%);
+        }
+
+        > a:hover {
+          color: @blockquote-text-primary;
+        }
+
+        > a.active {
+          color: @bg-primary;
+        }
+      }
+    }
+
+    &[data-mobile-show] {
+      box-shadow: @box-shadow;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.__dumi-default-navbar {
+  background-color: white;
+
+
+  nav {
+    > span {
+      & + *:not(a) {
+        margin-left: 10px;
+      }
+
+      > a {
+        padding: 10px;
+        transition: all @transition-delay;
+
+        &:not(.active) {
+          color: rgba(@text-dark, .6);
+
+          &:hover {
+            background-color: lighten(@bg-primary, 60%);
+            color: @bg-primary;
+            border-radius: @border-radius;
+            transition: all @transition-delay;
+          }
+        }
+
+        &.active {
+          background-color: lighten(@bg-primary, 60%);
+          color: @bg-primary;
+          border-radius: @border-radius;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  &-logo {
+    font-size: 22px;
+    color: white;
+  }
+}
+
+.__dumi-default-search-input {
+  background-color: rgba(@blockquote-text-primary, 10%);
+  border-radius: @border-radius;
+}
+
+.__dumi-default-dark-switch {
+  display: none;
+}
+
+.__dumi-default-menu-nav-list {
+  > li {
+    margin: 0 15px;
+    margin-bottom: 10px;
+
+    > a {
+      &.active, &:hover {
+        background-color: lighten(@bg-primary, 60%);
+        color: @blockquote-text-primary;
+        border-radius: @border-radius;
+      }
+    }
+  }
+}
+
+pre {
+  color: #333 !important;
+}
+
+[data-prefers-color=dark] {
+  .markdown a {
+    color: #844d28 !important;
+  }
+}
+
+.__dumi-default-search {
+  > ul {
+    border: 0;
+    box-shadow: @box-shadow;
+  }
+}
+
+.__dumi-site-tree {
+  border-radius: @border-radius;
+}

.dumi/theme/style/variables.less

@@ -0,0 +1,16 @@
+// colors
+@bg-primary: #844d28;
+@text-primary: #454d64;
+@text-secondary: #718096;
+@text-dark: #1a202c;
+@blockquote-text-primary: #333;
+@border-primary: #ddd;
+
+// shapes
+@border-radius: 6px;
+
+// transitions
+@transition-delay: .2s;
+
+// shadows
+@box-shadow: 0 0 50px rgba(0, 0, 0, .1);

.umirc.ts

@@ -24,37 +24,24 @@ export default defineConfig({
   styles: [
     'https://unpkg.zhimg.com/[email protected]/dist/antd.min.css',
     'img { max-width: 86% !important; display: block; margin: 0 auto; }',
-    '.__dumi-default-locale-select, .__dumi-default-search-input { border-radius: 2px !important; }',
-    '.__dumi-default-locale-select, .__dumi-default-search-input:focus { border: 1px solid rgba(255, 255, 255, .4) !important; }',
-    '.__dumi-default-search-input { border: 1px solid transparent !important; }',
     '.__dumi-default-menu-doc-locale { display: none !important; }',
-    '.__dumi-default-navbar { background-color: #0b0f13 !important; box-shadow: 0 0 0.2rem rgb(0 0 0 / 10%), 0 0.2rem 0.4rem rgb(0 0 0 / 20%) !important; }',
-    '.__dumi-default-search-input { background-color: rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .8) !important; }',
-    '.__dumi-default-navbar-logo { font-size: 22px !important; color: white !important; }',
-    '.__dumi-default-navbar nav > span > a:not(.active) { color: rgba(255, 255, 255, .6) !important; }',
-    '.__dumi-default-navbar nav > span > a:not(.active):hover { color: rgba(255, 255, 255, .8) !important; }',
-    '.__dumi-default-navbar nav > span > a.active::after { display: none !important; }',
     '.__dumi-default-locale-select:hover { background-color: transparent !important; }',
     '.__dumi-default-menu[data-mode=\'site\'] .__dumi-default-menu-list > li > a::after { display: none !important; }',
-    '.__dumi-default-menu[data-mode=\'site\'] .__dumi-default-menu-list > li > a.active { background: rgb(132, 77, 40, 0.3) !important; }',
     '.__dumi-default-menu-inner ul li a::before, .__dumi-default-menu-inner ul li > span::before { display: none !important; }',
     '.__dumi-default-layout-hero button { border-radius: 4px !important; }',
     '.__dumi-default-menu[data-mode=\'site\'] { background: white !important; }',
     'code, pre { font-family: Menlo, Consolas, Courier, monospace !important; font-size: 14px; background: transparent !important; }',
-    '[data-prefers-color=dark] .markdown a { color: #844d28 !important; }',
-    'pre { color: #333 !important; }',
     'h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { font-size: inherit; }',
     'https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-vs.css',
     '[data-prefers-color=dark] .__dumi-default-menu-inner ul li a:hover, [data-prefers-color=dark] .__dumi-default-menu-inner ul li > span:hover, [data-prefers-color=dark] .__dumi-default-menu-inner ul li a.active, [data-prefers-color=dark] .__dumi-default-menu-inner ul li > span.active { color: #844d28 !important; }',
     '[data-prefers-color=dark] code[class*="language-"], [data-prefers-color=dark] pre[class*="language-"] { color: white !important; }',
     '[data-prefers-color=dark] .markdown *:not(pre) code { color: #844d28 !important; }',
     '.__dumi-default-menu[data-mode=\'site\'] { padding-top: 0 !important; }',
-    '[data-prefers-color=dark] .__dumi-default-navbar nav > span > a:hover, [data-prefers-color=dark] .__dumi-default-navbar nav > span > a.active, [data-prefers-color=dark] .__dumi-default-layout-footer-meta, [data-prefers-color=dark] .__dumi-default-layout-footer-meta > span:last-child::before { color: #844d28 !important; }',
     '.__dumi-default-menu[data-mode=\'site\'] .__dumi-default-menu-list { margin-top: 50px; }',
     '@media (min-width: 960px) { div[data-show-sidemenu="true"] .__dumi-default-layout-content { padding-left: 10%; padding-right: 10%; } }',
     '@media (min-width: 1680px) { div[data-show-sidemenu="true"] .__dumi-default-layout-content { padding-left: 26%; padding-right: 26%; } }',
     '.markdown blockquote { border-left-color: #844d28 !important; }',
-    '.markdown *:not(pre) code { color: #844d28 !important; }'
+    '.markdown *:not(pre) code { color: #844d28 !important; }',
   ],
   favicon: '/public/images/favicon.ico',
   resolve: {

docs/public/css/docs.css

@@ -1,3 +1,3 @@
-__dumi-default-navbar {
+.__dumi-default-navbar {
   background-color: #0b0f13;
 }

package.json

@@ -34,5 +34,8 @@
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "typescript": "^3.7.7"
+  },
+  "dependencies": {
+    "dumi-theme-default": "^1.1.9"
   }
 }