fix: calendar-full background

components/calendar/style/index.less

@@ -6,7 +6,7 @@
 
 .@{calendar-prefix-cls} {
   .reset-component;
-  background: @calendar-bg;
+  background: @calendar-full-bg;
 
   // ========================= Header =========================
   &-header {
@@ -32,6 +32,7 @@
     border: 0;
     border-top: @border-width-base @border-style-base @border-color-split;
     border-radius: 0;
+    background: @calendar-full-panel-bg;
 
     .@{calendar-picker-prefix-cls}-month-panel,
     .@{calendar-picker-prefix-cls}-date-panel {
@@ -84,7 +85,7 @@
       width: 100%;
       text-align: right;
       border: 0;
-      background: @calendar-bg;
+      background: @calendar-full-bg;
 
       .@{calendar-picker-prefix-cls}-body {
         th,

components/date-picker/style/index.less

@@ -19,7 +19,7 @@
   display: inline-flex;
   padding: @input-padding-vertical-base @input-padding-horizontal-base @input-padding-vertical-base +
     @vertical-fix-base;
-  background: @component-background;
+  background: @picker-bg;
   border: @border-width-base @border-style-base @select-border-color;
   border-radius: @border-radius-base;
   transition: border @animation-duration-slow, box-shadow @animation-duration-slow;

components/drawer/demo/form-in-drawer.md

@@ -142,18 +142,7 @@ class DrawerForm extends React.Component {
               </Col>
             </Row>
           </Form>
-          <div
+          <div className="site-form-in-drawer-wrapper">
-            style={{
-              position: 'absolute',
-              right: 0,
-              bottom: 0,
-              width: '100%',
-              borderTop: '1px solid #e9e9e9',
-              padding: '10px 16px',
-              background: '#fff',
-              textAlign: 'right',
-            }}
-          >
             <Button onClick={this.onClose} style={{ marginRight: 8 }}>
               Cancel
             </Button>
@@ -169,3 +158,23 @@ class DrawerForm extends React.Component {
 
 ReactDOM.render(<DrawerForm />, mountNode);
 ```
+
+```css
+.site-form-in-drawer-wrapper {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  width: 100%;
+  padding: 10px 16px;
+  border-top: 1px solid #e9e9e9;
+  background: #fff;
+  text-align: right;
+}
+```
+
+<style>
+[data-theme="dark"] .site-form-in-drawer-wrapper {
+  border-top: 1px solid #303030;
+  background: #1f1f1f;
+}
+</style>

components/drawer/demo/multi-level-drawer.md

@@ -68,19 +68,7 @@ class App extends React.Component {
           >
             This is two-level drawer
           </Drawer>
-          <div
+          <div className="site-multi-level-drawer-footer">
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              width: '100%',
-              borderTop: '1px solid #e8e8e8',
-              padding: '10px 16px',
-              textAlign: 'right',
-              left: 0,
-              background: '#fff',
-              borderRadius: '0 0 4px 4px',
-            }}
-          >
             <Button
               style={{
                 marginRight: 8,
@@ -101,3 +89,24 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ```
+
+```css
+.site-multi-level-drawer-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  left: 0;
+  border-radius: 0 0 4px 4px;
+  background: #fff;
+}
+```
+
+<style>
+[data-theme="dark"] .site-multi-level-drawer-footer {
+  border-top: 1px solid #303030;
+  background: #1f1f1f;
+}
+</style>

components/style/themes/dark.less

@@ -322,6 +322,7 @@
 @picker-basic-cell-hover-with-range-color: #303030;
 @picker-basic-cell-disabled-bg: #303030;
 @picker-border-color: @border-color-split;
+@picker-bg: transparent;
 
 // Dropdown
 // ---
@@ -338,9 +339,10 @@
 
 // Calendar
 // ---
-@calendar-bg: @component-background;
+@calendar-bg: @popover-background;
 @calendar-input-bg: @calendar-bg;
 @calendar-border-color: transparent;
+@calendar-full-bg: @component-background;
 
 // Badge
 // ---

components/style/themes/default.less

@@ -512,6 +512,7 @@
 @time-picker-panel-inner-bg: @component-background;
 @month-panel-bg: @component-background;
 @year-panel-bg: @component-background;
+@picker-bg: @component-background;
 @picker-basic-cell-hover-color: @item-hover-bg;
 @picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
 @picker-basic-cell-disabled-bg: @disabled-bg;
@@ -524,6 +525,8 @@
 @calendar-input-bg: @input-bg;
 @calendar-border-color: @border-color-inverse;
 @calendar-item-active-bg: @item-active-bg;
+@calendar-full-bg: @calendar-bg;
+@calendar-full-panel-bg: @calendar-full-bg;
 
 // Carousel
 // ---