dumi 2.0.18 → 2.1.1

package/theme-default/slots/Header/index.less

@@ -10,10 +10,18 @@
     background-color: fadeout(@c-site-bg, 10%);
     backdrop-filter: blur(6px);
 
+    @{dark-selector} & {
+      background-color: fadeout(@c-site-bg-dark, 10%);
+    }
+
     // to avoid backdrop filter conflict with navbar overlay
     &[data-mobile-active] {
       background-color: @c-site-bg;
       backdrop-filter: none;
+
+      @{dark-selector} & {
+        background-color: @c-site-bg-dark;
+      }
     }
   }
 
@@ -49,6 +57,10 @@
         padding-top: 24px;
         justify-content: center;
         border-top: 1px solid @c-border-light;
+
+        @{dark-selector} & {
+          border-top-color: @c-border-less-dark;
+        }
       }
     }
 
@@ -65,6 +77,11 @@
       box-sizing: border-box;
       transition: all 0.2s;
 
+      @{dark-selector} & {
+        background-color: fadeout(@c-site-bg-dark, 40%);
+        border-top: 1px solid @c-border-less-dark;
+      }
+
       .@{prefix}-header:not([data-mobile-active]) & {
         opacity: 0;
         visibility: hidden;
@@ -90,6 +107,10 @@
     > svg {
       width: 20px;
       fill: @c-text-secondary;
+
+      @{dark-selector} & {
+        fill: @c-text-secondary-dark;
+      }
     }
   }
 }

package/theme-default/slots/Hero/index.less

@@ -31,6 +31,10 @@
     pointer-events: none;
     background: no-repeat center/cover;
     background-image: url('https://gw.alipayobjects.com/zos/bmw-prod/a6c3488a-994c-4dd3-8e92-2324d9a1ca48/l9dmd9wl_w2858_h1864.png');
+
+    @{dark-selector} & {
+      opacity: 1;
+    }
   }
 
   > p {
@@ -39,6 +43,10 @@
     font-size: 20px;
     line-height: 1.6;
 
+    @{dark-selector} & {
+      color: @c-text-secondary-dark;
+    }
+
     @media @mobile {
       font-size: 16px;
     }
@@ -75,11 +83,20 @@
         margin-inline-start: 48px;
         color: @c-primary;
         border: 1px solid @c-primary;
+
+        @{dark-selector} & {
+          color: @c-primary-dark;
+          border-color: @c-primary-dark;
+        }
       }
 
       &:first-child {
         color: #fff;
         background-color: @c-primary;
+
+        @{dark-selector} & {
+          background-color: @c-primary-dark;
+        }
       }
     }
   }

package/theme-default/slots/HeroTitle/index.less

@@ -24,4 +24,8 @@
   @media @mobile {
     font-size: 60px;
   }
+
+  @{dark-selector} & {
+    opacity: 0.7;
+  }
 }

package/theme-default/slots/LangSwitch/index.js

@@ -20,7 +20,9 @@ function getTargetLocalePath(_ref) {
       current = _ref.current,
       target = _ref.target;
   var clearPath = 'base' in current ? pathname.replace(current.base.replace(/\/$/, ''), '') : pathname.replace(new RegExp("".concat(current.suffix, "$")), '');
-  return 'base' in target ? "".concat(target.base).concat(clearPath).replace(/^\/\//, '/') : "".concat(clearPath).concat(target.suffix);
+  return 'base' in target ? "".concat( // for `/` base, strip duplicated leading slash
+  target.base.replace(/\/$/, '')).concat(clearPath) // for `/` clearPath, strip duplicated ending slash
+  .replace(/([^/])\/$/, '$1') : "".concat(clearPath).concat(target.suffix);
 }
 
 var SingleSwitch = function SingleSwitch(_ref2) {

package/theme-default/slots/LangSwitch/index.less

@@ -3,13 +3,21 @@
 .@{prefix}-lang-switch {
   color: @c-text-secondary;
   font-size: 14px;
-  line-height: 1;
+  line-height: 16px;
   text-decoration: none;
   transition: all 0.3s;
   cursor: pointer;
 
+  @{dark-selector} & {
+    color: @c-text-secondary-dark;
+  }
+
   &:hover {
     color: @c-primary;
+
+    @{dark-selector} & {
+      color: @c-primary-dark;
+    }
   }
 }
 
@@ -28,6 +36,10 @@
     line-height: 1;
     border: 0;
     background-color: transparent;
+
+    @{dark-selector} & {
+      color: @c-text-secondary-dark;
+    }
   }
 
   > svg {
@@ -35,5 +47,9 @@
     width: 12px;
     fill: darken(@c-border, 10%);
     pointer-events: none;
+
+    @{dark-selector} & {
+      fill: lighten(@c-border-dark, 10%);
+    }
   }
 }

package/theme-default/slots/Logo/index.less

@@ -9,6 +9,10 @@
   font-weight: 500;
   text-decoration: none;
 
+  @{dark-selector} & {
+    color: @c-text-dark;
+  }
+
   @media @mobile {
     font-size: 18px;
 

package/theme-default/slots/Navbar/index.less

@@ -26,13 +26,25 @@
       text-decoration: none;
       transition: all 0.3s;
 
+      @{dark-selector} & {
+        color: @c-text-secondary-dark;
+      }
+
       &:hover {
         color: @c-primary;
+
+        @{dark-selector} & {
+          color: @c-primary-dark;
+        }
       }
 
       &.active {
         color: @c-text;
         font-weight: 500;
+
+        @{dark-selector} & {
+          color: @c-text-dark;
+        }
       }
     }
 

package/theme-default/slots/NotFound/index.less

@@ -14,11 +14,20 @@
     font-size: 78px;
     font-weight: 700;
     text-shadow: -1px -1px 0 @c-border;
+
+    @{dark-selector} & {
+      color: @c-border-less-dark;
+      text-shadow: -1px -1px 0 @c-border-dark;
+    }
   }
 
   > a {
     color: @c-primary;
 
+    @{dark-selector} & {
+      color: @c-primary-dark;
+    }
+
     &:not(:hover) {
       text-decoration: none;
     }

package/theme-default/slots/PreviewerActions/index.less

@@ -10,6 +10,10 @@
 
     &:not(:last-child) {
       border-bottom: 1px dashed @c-border-light;
+
+      @{dark-selector} & {
+        border-bottom-color: @c-border-less-dark;
+      }
     }
   }
 
@@ -28,10 +32,18 @@
       width: 16px;
       fill: darken(@c-border, 20%);
       transition: fill 0.2s;
+
+      @{dark-selector} & {
+        fill: lighten(@c-border-dark, 20%);
+      }
     }
 
     &:hover > svg {
       fill: darken(@c-border, 30%);
+
+      @{dark-selector} & {
+        fill: lighten(@c-border-dark, 30%);
+      }
     }
 
     &:not(:last-child) {
@@ -51,6 +63,10 @@
       width: 100%;
       height: 0;
       border-bottom: 1px dashed @c-border-light;
+
+      @{dark-selector} & {
+        border-bottom-color: @c-border-less-dark;
+      }
     }
   }
 }
@@ -115,13 +131,25 @@
       cursor: pointer;
       transition: all 0.2s;
 
+      @{dark-selector} & {
+        color: @c-text-secondary-dark;
+      }
+
       &:hover {
         color: @c-text;
+
+        @{dark-selector} & {
+          color: @c-text-dark;
+        }
       }
     }
 
     &-active &-btn {
       color: @c-text;
+
+      @{dark-selector} & {
+        color: @c-text-dark;
+      }
     }
   }
 
@@ -131,15 +159,23 @@
     background: @c-primary;
     transition: left 0.2s, width 0.2s;
     pointer-events: none;
+
+    @{dark-selector} & {
+      background: @c-primary-dark;
+    }
   }
 
   &-dropdown {
     position: absolute;
-    background: #fff;
+    background: inherit;
     border: 1px solid @c-border;
     max-height: 200px;
     overflow: auto;
 
+    @{dark-selector} & {
+      border-color: @c-border-dark;
+    }
+
     > ul {
       list-style: none;
       margin: 0;
@@ -152,10 +188,18 @@
 
         &:hover {
           color: @c-primary;
+
+          @{dark-selector} & {
+            color: @c-primary-dark;
+          }
         }
 
         &:not(:last-child) {
           border-bottom: 1px dashed @c-border;
+
+          @{dark-selector} & {
+            border-bottom-color: @c-border-dark;
+          }
         }
       }
     }

package/theme-default/slots/RtlSwitch/index.js

@@ -13,6 +13,23 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useSiteData } from 'dumi';
 import React, { useEffect, useState } from 'react';
 import "./index.less";
+
+var IconRtl = function IconRtl() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 14 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.003 6.39v3.594c0 .4.275.674.674.674.4 0 .674-.274.674-.674V1.323h1.997v8.661c0 .4.274.674.674.674s.674-.274.674-.674V1.323h3.295c.399 0 .674-.275.674-.674 0-.4-.275-.649-.674-.649H4.928C3.131 0 1.733 1.398 1.733 3.195S3.206 6.39 5.003 6.39Zm0-5.067v3.72c-1.073 0-1.922-.8-1.922-1.873s.799-1.847 1.922-1.847Zm7.988 11.332H2.73l.8-.674c.274-.2.324-.674.124-.923-.2-.275-.674-.325-.923-.125L.735 12.53c-.275.275-.4.525-.4.874 0 .325.125.674.4.874l1.997 1.597a.829.829 0 0 0 .4.125c.199 0 .398-.075.523-.275.2-.274.2-.723-.125-.923l-.998-.799h10.459c.399 0 .674-.274.674-.674 0-.424-.275-.674-.674-.674Z"
+  }));
+};
+
+var IconLtr = function IconLtr() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 14 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.003 6.39v3.594c0 .4.275.674.674.674.4 0 .674-.274.674-.674V1.323h1.997v8.661c0 .4.274.674.674.674s.674-.274.674-.674V1.323h3.295c.399 0 .674-.275.674-.674 0-.4-.275-.649-.674-.649H4.928C3.131 0 1.733 1.398 1.733 3.195S3.206 6.39 5.003 6.39Zm0-5.067v3.72c-1.073 0-1.922-.8-1.922-1.873s.799-1.847 1.922-1.847ZM1.01 12.655h10.26l-.8-.674c-.274-.2-.324-.674-.124-.923.2-.275.674-.325.923-.125l1.997 1.597c.275.275.4.525.4.874 0 .325-.125.674-.4.874l-1.997 1.597a.829.829 0 0 1-.399.125.59.59 0 0 1-.524-.275c-.2-.274-.2-.723.125-.923l.998-.799H1.009c-.399 0-.674-.274-.674-.674 0-.424.275-.674.674-.674Z"
+  }));
+};
+
 var LS_RTL_KEY = 'dumi:rtl';
 
 var RtlSwitch = function RtlSwitch() {
@@ -31,8 +48,9 @@ var RtlSwitch = function RtlSwitch() {
     }
   }, []);
   if (!themeConfig.rtl) return null;
-  return /*#__PURE__*/React.createElement("span", {
-    className: "dumi-default-lang-switch",
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "dumi-default-rtl-switch",
     onClick: function onClick() {
       if (rtl) {
         document.documentElement.removeAttribute('data-direction');
@@ -43,8 +61,10 @@ var RtlSwitch = function RtlSwitch() {
       }
 
       setRtl(!rtl);
-    }
-  }, rtl ? 'LTR' : 'RTL');
+    },
+    "data-dumi-tooltip": rtl ? 'RTL' : 'LTR',
+    "data-dumi-tooltip-bottom": true
+  }, rtl ? /*#__PURE__*/React.createElement(IconRtl, null) : /*#__PURE__*/React.createElement(IconLtr, null));
 };
 
 export default RtlSwitch;

package/theme-default/slots/RtlSwitch/index.less

@@ -1,8 +1,34 @@
 @import '../LangSwitch/index.less';
 
-.@{prefix}-lang-switch {
-  & + & {
-    margin-inline-start: 20px;
+.@{prefix}-rtl-switch {
+  height: 16px;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+
+  [class*='-switch'] + & {
+    margin-inline-start: 15px;
+    margin-inline-end: -15px;
+    padding-inline: 15px;
+    border-inline-start: 1px solid @c-border-light;
+  }
+
+  > svg {
+    height: 16px;
+    fill: @c-text-secondary;
+
+    @{dark-selector} & {
+      fill: @c-text-secondary-dark;
+    }
+  }
+
+  &:hover svg {
+    fill: @c-primary;
+
+    @{dark-selector} & {
+      fill: @c-primary-dark;
+    }
   }
 }
 

package/theme-default/slots/SearchBar/index.less

@@ -20,6 +20,10 @@
     width: 16px;
     fill: @c-text-note;
     transform: translateY(-50%);
+
+    @{dark-selector} & {
+      fill: @c-text-note-dark;
+    }
   }
 
   &-input {
@@ -37,11 +41,22 @@
     transition: all 0.3s;
     background-color: transparent;
 
+    @{dark-selector} & {
+      color: @c-text-dark;
+      border-color: @c-border-dark;
+    }
+
     &:focus {
       border-color: fade(@c-primary, 50%);
       background-color: #fff;
       box-shadow: 0 0 0 3px fade(@c-primary, 10%);
 
+      @{dark-selector} & {
+        border-color: fade(@c-primary-dark, 50%);
+        background-color: @c-site-bg-dark;
+        box-shadow: 0 0 0 3px fade(@c-primary-dark, 10%);
+      }
+
       ~ .@{prefix}-search-shortcut {
         opacity: 0;
       }
@@ -65,6 +80,11 @@
     transition: all 0.3s;
     pointer-events: none;
 
+    @{dark-selector} & {
+      background-color: fade(#000, 20%);
+      border-color: @c-border-dark;
+    }
+
     @media @mobile {
       display: none;
     }
@@ -83,6 +103,10 @@
     border-radius: 8px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 20%);
 
+    @{dark-selector} & {
+      background-color: lighten(@c-site-bg-dark, 6%);
+    }
+
     &::before {
       content: '';
       position: absolute;
@@ -93,6 +117,10 @@
       height: 0;
       border: 8px solid transparent;
       border-bottom-color: #fff;
+
+      @{dark-selector} & {
+        border-bottom-color: lighten(@c-site-bg-dark, 6%);
+      }
     }
 
     > section {
@@ -134,6 +162,10 @@
       max-height: calc(100% - 120px);
       display: flex;
       flex-direction: column;
+
+      @{dark-selector} & {
+        background-color: lighten(@c-site-bg-dark, 6%);
+      }
     }
 
     .@{prefix}-search-bar-input {
@@ -165,6 +197,11 @@
       align-items: center;
       user-select: none;
 
+      @{dark-selector} & {
+        color: @c-text-note-dark;
+        border-top-color: @c-border-less-dark;
+      }
+
       > li {
         margin-inline-end: 10px;
       }
@@ -193,6 +230,12 @@
       border-bottom-width: 2px;
       transition: all 0.3s;
       pointer-events: none;
+
+      @{dark-selector} & {
+        color: @c-text-note-dark;
+        background-color: @c-site-bg-dark;
+        border-color: @c-border-dark;
+      }
     }
   }
 }

package/theme-default/slots/SearchResult/index.less

@@ -13,6 +13,11 @@
       color: @c-text-secondary;
       background-color: @c-border-light;
 
+      @{dark-selector} & {
+        color: @c-text-secondary-dark;
+        background-color: @c-border-less-dark;
+      }
+
       &:first-child {
         margin-top: -2px;
       }
@@ -28,6 +33,10 @@
 
       + dd {
         border-top: 1px dashed @c-border-light;
+
+        @{dark-selector} & {
+          border-top-color: @c-border-less-dark;
+        }
       }
 
       + dt {
@@ -52,13 +61,25 @@
         &:hover {
           background-color: @c-primary;
 
+          @{dark-selector} & {
+            background-color: darken(@c-primary-dark, 28%);
+          }
+
           > h4,
           > p {
             color: #fff;
+
+            @{dark-selector} & {
+              color: darken(#fff, 20%);
+            }
           }
 
           > svg {
             fill: #fff;
+
+            @{dark-selector} & {
+              fill: darken(#fff, 20%);
+            }
           }
         }
 
@@ -69,6 +90,10 @@
           width: 32px;
           height: 32px;
           fill: darken(@c-border, 5%);
+
+          @{dark-selector} & {
+            fill: lighten(@c-border-dark, 5%);
+          }
         }
 
         > h4,
@@ -83,6 +108,10 @@
         > h4 {
           color: @c-text-secondary;
           font-size: 14px;
+
+          @{dark-selector} & {
+            color: @c-text-secondary-dark;
+          }
         }
 
         > p {
@@ -90,6 +119,10 @@
           font-size: 13px;
           color: @c-text-note;
 
+          @{dark-selector} & {
+            color: @c-text-note-dark;
+          }
+
           &:empty {
             display: none;
           }
@@ -99,10 +132,15 @@
   }
 
   mark {
-    color: rgb(72 70 7);
+    color: rgb(72, 70, 7);
     padding: 0 2px;
     border-radius: 2px;
-    background-color: rgb(255 249 197);
+    background-color: rgb(255, 249, 197);
+
+    @{dark-selector} & {
+      color: rgb(147, 145, 71);
+      background-color: rgb(56, 37, 6);
+    }
   }
 
   .@{prefix}-search-empty {
@@ -113,10 +151,18 @@
     color: @c-text-note;
     font-size: 16px;
 
+    @{dark-selector} & {
+      color: @c-text-note-dark;
+    }
+
     > svg {
       margin-inline-end: 8px;
       width: 48px;
       fill: lighten(@c-text-note, 20%);
+
+      @{dark-selector} & {
+        fill: darken(@c-text-note-dark, 20%);
+      }
     }
   }
 }

package/theme-default/slots/Sidebar/index.less

@@ -25,6 +25,11 @@
     box-shadow: 0 0 20px rgba(0, 0, 0, 10%);
     transition: 0.2s all;
 
+    @{dark-selector} & {
+      background-color: @c-site-bg-dark;
+      border-top-color: @c-border-less-dark;
+    }
+
     .@{prefix}-doc-layout:not([data-mobile-sidebar-active]) & {
       opacity: 0;
       visibility: hidden;
@@ -46,6 +51,10 @@
       overflow: hidden;
       text-overflow: ellipsis;
       text-transform: uppercase;
+
+      @{dark-selector} & {
+        color: @c-text-dark;
+      }
     }
 
     > dd {
@@ -63,13 +72,25 @@
         overflow: hidden;
         text-overflow: ellipsis;
 
+        @{dark-selector} & {
+          color: @c-text-secondary-dark;
+        }
+
         &:hover {
           color: @c-primary;
+
+          @{dark-selector} & {
+            color: @c-primary-dark;
+          }
         }
 
         &.active {
           color: @c-primary;
           font-weight: 500;
+
+          @{dark-selector} & {
+            color: @c-primary-dark;
+          }
         }
       }
     }
@@ -79,6 +100,10 @@
       margin-top: 16px;
       padding-top: 16px;
       border-top: 1px solid @c-border;
+
+      @{dark-selector} & {
+        border-top-color: @c-border-dark;
+      }
     }
   }
 }