feat: input

components/input/demo/light.md

@@ -0,0 +1,25 @@
+---
+order: 6
+title:
+  zh-CN: 浅色背景(仅暗黑主题下使用)
+---
+
+## zh-CN
+
+浅色背景上，显示深色控件
+
+仅暗黑主题下使用，默认主题下使用无效
+
+- 为组件或其父组件添加类名`dt-form-light-bg`
+
+```jsx
+import { Input } from 'antd';
+
+ReactDOM.render(
+  <div className="demo-input-light dt-form-light-bg">
+    <Input placeholder="shadow input" />
+    <Input disabled placeholder="disable shadow input" />
+  </div>,
+  mountNode
+);
+```

components/input/demo/shadow.md

@@ -1,21 +1,23 @@
 ---
 order: 2
 title:
-  zh-CN: 灰色背景
+  zh-CN: 灰色背景(仅默认主题下使用)
 ---
 
 ## zh-CN
 
 灰色背景中的表单需添加投影，去掉外边框
 
+仅默认主题下使用，暗黑主题下使用无效
+
 - 为组件添加类名`dt-form-shadow-bg`
 
 ```jsx
 import { Input } from 'antd';
 
 ReactDOM.render(
   <div className="demo-input-shadow">
-      <Input className="dt-form-shadow-bg" placeholder="shadow input" />
+    <Input className="dt-form-shadow-bg" placeholder="shadow input" />
   </div>,
   mountNode
 );

components/input/index.zh-CN.md

@@ -9,10 +9,17 @@ title: Input
 
 ## 设计规则
 
+#### 默认主题
+
 输入框常规高度为 32px ,小尺寸的高度为 28px ,边框颜色 #DDD , 4px 圆角，提示字颜色 #999 ,输入颜色 #333 ，宽度根据具体情况而定。
 
+#### 暗黑主题
+
+输入框常规高度为 32px ,小尺寸的高度为 28px ,边框颜色 #1D1F2E , 4px 圆角，提示字颜色 #666666 ,输入颜色 #BFBFBF ，宽度根据具体情况而定。
+
 ## API
 
 |类名  |说明  |使用示例  |
 |---------|---------|---------|
-|.dt-form-shadow-bg  | 灰色背景,表单样式设置   | 灰色背景   |
+|.dt-form-shadow-bg  | 灰色背景,表单样式设置   | 灰色背景(仅默认主题下使用)   |
+|.dt-form-light-bg  | 浅色背景上，显示深色控件   | 浅色背景(仅暗黑主题下使用)   |

theme/dt-theme/dark/form.less

@@ -0,0 +1,42 @@
+@import '../const.less';
+
+// input
+.ant-input {
+    border-radius: 4px;
+    &:focus {
+        border-color: @primaryColor;
+    }
+}
+.ant-input-disabled {
+    border-color: #272A40;
+}
+.ant-input[disabled]:hover {
+    border-color: #272A40;
+}
+.ant-input-lg {
+    font-size: 12px;
+}
+.ant-input-search-icon, .ant-input-password-icon {
+    color: @white6;
+    &:hover {
+        color: @whiteBF;
+    }
+}
+
+// 浅色背景中 显示深色控件
+.dt-form-light-bg {
+    // input
+    .ant-input, &.ant-input {
+        border-color: @blue3;
+        background-color: #11111C;
+        &:focus, &:hover {
+            border-color: @primaryColor;
+        }
+    }
+    .ant-input[disabled], &.ant-input[disabled] {
+        background-color: #161723;
+        &:hover {
+            border-color: @blue3;
+        }
+    }
+}

theme/dt-theme/dark/index.less

@@ -4,6 +4,7 @@
 @import './alert.less';
 @import './notification.less';
 @import './message.less';
+@import './form.less';
 
 * {
     margin: 0;

theme/dt-theme/dark/resetDark.less

@@ -459,10 +459,6 @@
 @disabled-bg: #292D42;
 @btn-height-sm: 28px;
 @btn-disable-border: #292D42;
-@input-placeholder-color: #666666;
-@input-height-lg: 36px;
-@input-height-sm: 28px;
-@input-hover-border-color: @primary-color;
 @modal-footer-padding-horizontal: 20px;
 @form-item-margin-bottom: 20px;
 @label-required-color: @error-color;
@@ -488,3 +484,11 @@
 @alert-text-color: @text-color;
 @alert-message-color: @text-color;
 @alert-close-color: #999999;
+// input
+@input-bg: #1D1F2E;
+@input-placeholder-color: #666666;
+@input-height-lg: 36px;
+@input-height-sm: 28px;
+@input-hover-border-color: @primary-color;
+@input-disabled-bg: #161723;
+@input-border-color: #2C3047;

theme/static/common.less

@@ -155,6 +155,7 @@ a {
   }
 }
 
+// demo 样式
 .demo-input-shadow,
 .demo-select-shadow,
 .demo-datepicker-shadow,
@@ -196,3 +197,23 @@ a {
     margin-bottom: 20px;
   }
 }
+
+// 黑色主题下 demo 样式
+.dark {
+  .demo-input-shadow,
+  .demo-select-shadow,
+  .demo-datepicker-shadow,
+  .demo-timer-picker-shadow,
+  .demo-tree-select-shadow {
+    background-color: transparent;
+    padding: 0px;
+  }
+  .demo-input-light {
+    width: 100%;
+    padding: 20px;
+    background: #272A40;
+    input:last-child {
+      margin-top: 20px;
+    }
+  }
+}

theme/template/Layout/index.jsx

@@ -137,7 +137,7 @@ export default class Layout extends React.Component {
         return (
             <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
                 <ConfigProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
-                    <div className="page-wrapper" key={theme}>
+                    <div className={theme === 'default' ? 'page-wrapper' : 'page-wrapper dark'} key={theme}>
                         <Header theme={theme} onThemeChange={this.onThemeChange} {...restProps} />
                         {children}
                     </div>