ant-design · ycjcl868 · Dec 26, 2019 · Dec 16, 2019 · Dec 16, 2019 · Dec 16, 2019
diff --git a/.antd-tools.config.js b/.antd-tools.config.js
@@ -1,8 +1,8 @@
 const fs = require('fs');
 const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
-const lessToJs = require('less-vars-to-js');
 const packageInfo = require('./package.json');
+const darkVars = require('./scripts/dark-vars');
 
 // We need compile additional content for antd user
 function finalizeCompile() {
@@ -70,20 +70,10 @@ function finalizeDist() {
     console.log('Built a entry less file to dist/antd.dark.less');
 
     // Build dark.js: dist/dark-theme.js, for less-loader
-    const stylePath = path.join(process.cwd(), 'components', 'style');
-
-    const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
-    const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
-    const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
-
-    const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
-      stripPrefix: true,
-      resolveVariables: false,
-    });
 
     fs.writeFileSync(
       path.join(process.cwd(), 'dist', 'dark-theme.js'),
-      `module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
+      `module.exports = ${JSON.stringify(darkVars, null, 2)};`,
     );
 
     // eslint-disable-next-line

diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
@@ -20,7 +20,7 @@ ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
 ```
 
 <style>
-.ant-alert {
+.code-box-demo .ant-alert {
   margin-bottom: 16px;
 }
 </style>
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -3,11 +3,6 @@
 
 @alert-prefix-cls: ~'@{ant-prefix}-alert';
 
-@alert-message-color: @heading-color;
-@alert-text-color: @text-color;
-@alert-close-color: @text-color-secondary;
-@alert-close-hover-color: @icon-color-hover;
-
 .@{alert-prefix-cls} {
   .reset-component;
 

diff --git a/components/back-top/__tests__/__snapshots__/demo.test.js.snap b/components/back-top/__tests__/__snapshots__/demo.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
 <div>
   Scroll down to see the bottom-right
   <strong
-    style="color:rgba(64, 64, 64, 0.6)"
+    class="site-back-top-basic"
   >
      gray 
   </strong>

diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md
@@ -20,9 +20,21 @@ ReactDOM.render(
   <div>
     <BackTop />
     Scroll down to see the bottom-right
-    <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
+    <strong className="site-back-top-basic"> gray </strong>
     button.
   </div>,
   mountNode,
 );
 ```
+
+```css
+.site-back-top-basic {
+  color: rgba(64, 64, 64, 0.6);
+}
+```
+
+<style>
+[data-theme="dark"] .site-back-top-basic {
+  color: rgba(255,255,255,.45);
+}
+</style>
diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1306,12 +1306,11 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="ant-badge ant-badge-not-a-wrapper"
+    class="site-badge-count-4 ant-badge ant-badge-not-a-wrapper"
   >
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
-      style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset"
       title="4"
     >
       <span
@@ -1472,7 +1471,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="ant-badge ant-badge-not-a-wrapper"
+    class="site-badge-count-109 ant-badge ant-badge-not-a-wrapper"
   >
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"

diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
@@ -40,9 +40,12 @@ ReactDOM.render(
 .head-example {
   width: 42px;
   height: 42px;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #eee;
   display: inline-block;
   vertical-align: middle;
 }
+[data-theme="dark"] .head-example {
+  background: rgba(255,255,255,.12);
+}
 </style>
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
@@ -21,18 +21,27 @@ import { Badge } from 'antd';
 ReactDOM.render(
   <div>
     <Badge count={25} />
-    <Badge
-      count={4}
-      style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
-    />
-    <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
+    <Badge count={4} className="site-badge-count-4" />
+    <Badge className="site-badge-count-109" count={109} style={{ backgroundColor: '#52c41a' }} />
   </div>,
   mountNode,
 );
 ```
 
+```css
+.site-badge-count-4 .ant-badge-count {
+  background-color: #fff;
+  color: #999;
+  box-shadow: 0 0 0 1px #d9d9d9 inset;
+}
+```
+
 <style>
 .ant-badge-not-a-wrapper:not(.ant-badge-status) {
   margin-right: 8px;
 }
+[data-theme="dark"] .site-badge-count-4 .ant-badge-count {
+  background-color: #141414;
+  box-shadow: 0 0 0 1px #434343 inset;
+}
 </style>
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
@@ -34,8 +34,11 @@ ReactDOM.render(
 .head-example {
   width: 42px;
   height: 42px;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #eee;
   display: inline-block;
 }
+[data-theme="dark"] .head-example {
+  background: rgba(255,255,255,.12);
+}
 </style>
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -232,7 +232,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     </span>
   </button>
   <div
-    style="padding:8px 8px 0 8px;background:rgb(190, 200, 200)"
+    class="site-button-ghost-wrapper"
   >
     <button
       class="ant-btn ant-btn-background-ghost"
@@ -257,7 +257,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
 
 exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 <div
-  style="background:rgb(190, 200, 200);padding:26px 16px 16px"
+  class="site-button-ghost-wrapper"
 >
   <button
     class="ant-btn ant-btn-primary ant-btn-background-ghost"

diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
@@ -47,7 +47,7 @@ ReactDOM.render(
     <Button danger disabled>
       Danger Default(disabled)
     </Button>
-    <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
+    <div className="site-button-ghost-wrapper">
       <Button ghost>Ghost</Button>
       <Button ghost disabled>
         Ghost(disabled)
@@ -57,3 +57,10 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-button-ghost-wrapper {
+  padding: 8px 8px 0 8px;
+  background: rgb(190, 200, 200);
+}
+```
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
@@ -17,7 +17,7 @@ title:
 import { Button } from 'antd';
 
 ReactDOM.render(
-  <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
+  <div className="site-button-ghost-wrapper">
     <Button type="primary" ghost>
       Primary
     </Button>
@@ -38,3 +38,10 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-button-ghost-wrapper {
+  background: rgb(190, 200, 200);
+  padding: 26px 16px 16px;
+}
+```
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -49,4 +49,7 @@ Following the Ant Design specification, we will add one space between if Button
 [id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
   margin-right: 0;
 }
+[data-theme="dark"] .site-button-ghost-wrapper {
+  background: rgba(255, 255, 255, 0.3);
+}
 </style>
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -51,4 +51,7 @@ subtitle: 按钮
 [id^="components-button-demo-"] .ant-btn-group > .ant-btn {
   margin-right: 0;
 }
+[data-theme="dark"] .site-button-ghost-wrapper {
+  background: rgba(255, 255, 255, 0.3);
+}
 </style>
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -952,7 +952,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 <div
-  style="width:300px;border:1px solid #f0f0f0;border-radius:4px"
+  class="site-calendar-demo-card"
 >
   <div
     class="ant-picker-calendar ant-picker-calendar-mini"
@@ -1906,7 +1906,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 
 exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] = `
 <div
-  style="width:300px;border:1px solid #d9d9d9;border-radius:4px"
+  class="site-calendar-customize-header-wrapper"
 >
   <div
     class="ant-picker-calendar ant-picker-calendar-mini"

diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
@@ -21,9 +21,23 @@ function onPanelChange(value, mode) {
 }
 
 ReactDOM.render(
-  <div style={{ width: 300, border: '1px solid #f0f0f0', borderRadius: 4 }}>
+  <div className="site-calendar-demo-card">
     <Calendar fullscreen={false} onPanelChange={onPanelChange} />
   </div>,
   mountNode,
 );
 ```
+
+```css
+.site-calendar-demo-card {
+  width: 300px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-calendar-demo-card {
+    border: 1px solid #303030;
+  }
+</style>
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
@@ -23,7 +23,7 @@ function onPanelChange(value, mode) {
 }
 
 ReactDOM.render(
-  <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
+  <div className="site-calendar-customize-header-wrapper">
     <Calendar
       fullscreen={false}
       headerRender={({ value, type, onChange, onTypeChange }) => {
@@ -105,3 +105,17 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-calendar-customize-header-wrapper {
+  width: 300px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-calendar-customize-header-wrapper {
+    border: 1px solid #303030;
+  }
+</style>
diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less
@@ -6,7 +6,7 @@
 
 .@{calendar-prefix-cls} {
   .reset-component;
-  background: @calendar-bg;
+  background: @calendar-full-bg;
 
   // ========================= Header =========================
   &-header {
@@ -29,6 +29,7 @@
   }
 
   .@{calendar-picker-prefix-cls}-panel {
+    background: @calendar-full-panel-bg;
     border: 0;
     border-top: @border-width-base @border-style-base @border-color-split;
     border-radius: 0;
@@ -83,6 +84,7 @@
       display: block;
       width: 100%;
       text-align: right;
+      background: @calendar-full-bg;
       border: 0;
 
       .@{calendar-picker-prefix-cls}-body {

diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -87,7 +87,7 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 <div
-  style="background:#ECECEC;padding:30px"
+  class="site-card-border-less-wrapper"
 >
   <div
     class="ant-card"
@@ -229,7 +229,7 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
 
 exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
 <div
-  style="background:#ECECEC;padding:30px"
+  class="site-card-wrapper"
 >
   <div
     class="ant-row"
@@ -341,7 +341,7 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
     class="ant-card-body"
   >
     <p
-      style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight:500"
+      class="site-card-demo-inner-p"
     >
       Group title
     </p>

diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
@@ -17,7 +17,7 @@ A borderless card on a gray background.
 import { Card } from 'antd';
 
 ReactDOM.render(
-  <div style={{ background: '#ECECEC', padding: '30px' }}>
+  <div className="site-card-border-less-wrapper">
     <Card title="Card title" bordered={false} style={{ width: 300 }}>
       <p>Card content</p>
       <p>Card content</p>
@@ -27,3 +27,16 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-card-border-less-wrapper {
+  background: #ececec;
+  padding: 30px;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-card-border-less-wrapper {
+    background: #303030;
+  }
+</style>