feat: support compact theme

components/alert/style/index.less

@@ -12,7 +12,7 @@
   border-radius: @border-radius-base;
 
   &&-no-icon {
-    padding: 8px 15px;
+    padding: @alert-no-icon-padding-vertical 15px;
   }
 
   &&-closable {
@@ -71,7 +71,7 @@
 
   &-close-icon {
     position: absolute;
-    top: 8px;
+    top: @padding-xs;
     right: 16px;
     padding: 0;
     overflow: hidden;
@@ -108,7 +108,7 @@
   }
 
   &-with-description&-no-icon {
-    padding: 15px;
+    padding: @alert-with-description-no-icon-padding-vertical 15px;
   }
 
   &-with-description &-icon {

components/auto-complete/style/index.less

@@ -12,5 +12,5 @@
   // https://github.com/ant-design/ant-design/issues/22302
   .@{select-prefix-cls}-clear {
     right: 13px;
-  } 
+  }
 }

components/button/style/index.less

@@ -182,7 +182,7 @@
   // To ensure that a space will be placed between character and `Icon`.
   > .@{iconfont-css-prefix} + span,
   > span + .@{iconfont-css-prefix} {
-    margin-left: 8px;
+    margin-left: @margin-xs;
   }
 
   &-background-ghost {

components/button/style/mixin.less

@@ -254,6 +254,7 @@
     .button-size(
       @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
     );
+    line-height: @btn-height-sm - 2px;
   }
 }
 // primary button style
@@ -370,14 +371,23 @@
 // square button: the content only contains icon
 .btn-square(@btnClassName: btn) {
   .square(@btn-square-size);
-  .button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius-base);
+  .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
+  & > * {
+    font-size: @btn-square-only-icon-size;
+  }
   &.@{btnClassName}-lg {
     .square(@btn-square-size-lg);
-    .button-size(@btn-square-size-lg; 0; @btn-font-size-lg + 2px; @btn-border-radius-base);
+    .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
+    & > * {
+      font-size: @btn-square-only-icon-size-lg;
+    }
   }
   &.@{btnClassName}-sm {
     .square(@btn-square-size-sm);
-    .button-size(@btn-square-size-sm; 0; @font-size-base; @btn-border-radius-base);
+    .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
+    & > * {
+      font-size: @btn-square-only-icon-size-sm;
+    }
   }
 }
 // circle button: the content only contains icon

components/card/style/index.less

@@ -2,7 +2,6 @@
 @import '../../style/mixins/index';
 
 @card-prefix-cls: ~'@{ant-prefix}-card';
-@card-head-height: 48px;
 @card-hoverable-hover-border: transparent;
 @card-action-icon-size: 16px;
 
@@ -39,7 +38,7 @@
     padding: 0 @card-padding-base;
     color: @card-head-color;
     font-weight: 500;
-    font-size: @font-size-lg;
+    font-size: @card-head-font-size;
     background: @card-head-background;
     border-bottom: @border-width-base @border-style-base @border-color-split;
     border-radius: @card-radius @card-radius 0 0;
@@ -61,7 +60,7 @@
 
     .@{ant-prefix}-tabs {
       clear: both;
-      margin-bottom: -17px;
+      margin-bottom: @card-head-tabs-margin-bottom;
       color: @text-color;
       font-weight: normal;
       font-size: @font-size-base;
@@ -154,7 +153,7 @@
 
     & > li {
       float: left;
-      margin: 12px 0;
+      margin: @card-actions-li-margin;
       color: @text-color-secondary;
       text-align: center;
 
@@ -236,7 +235,7 @@
     &-detail {
       overflow: hidden;
       > div:not(:last-child) {
-        margin-bottom: 8px;
+        margin-bottom: @margin-xs;
       }
     }
 

components/card/style/size.less

@@ -1,7 +1,4 @@
-@card-head-height-sm: 36px;
-@card-padding-base-sm: @card-padding-base / 2;
-@card-head-padding-sm: @card-head-padding / 2;
-@card-head-font-size-sm: @font-size-base;
+@import './index';
 
 .@{card-prefix-cls}-small {
   > .@{card-prefix-cls}-head {

components/collapse/demo/basic.md

@@ -45,7 +45,7 @@ ReactDOM.render(
 ```
 
 <style>
-p {
+[data-theme="compact"] p, p {
   margin: 0;
 }
 </style>

components/collapse/demo/custom.md

@@ -47,6 +47,7 @@ ReactDOM.render(
 ```
 
 ```css
+[data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel,
 .site-collapse-custom-collapse .site-collapse-custom-panel {
   background: #f7f7f7;
   border-radius: 2px;

components/comment/style/index.less

@@ -15,7 +15,7 @@
   &-avatar {
     position: relative;
     flex-shrink: 0;
-    margin-right: 12px;
+    margin-right: @margin-sm;
     cursor: pointer;
 
     img {
@@ -36,11 +36,11 @@
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
-      margin-bottom: 4px;
+      margin-bottom: @margin-xss;
       font-size: @comment-font-size-base;
       & > a,
       & > span {
-        padding-right: 8px;
+        padding-right: @padding-xs;
         font-size: @comment-font-size-sm;
         line-height: 18px;
       }
@@ -65,12 +65,14 @@
     }
 
     &-detail p {
+      margin-bottom: @comment-content-detail-p-margin-bottom;
       white-space: pre-wrap;
     }
   }
 
   &-actions {
-    margin-top: 12px;
+    margin-top: @comment-actions-margin-top;
+    margin-bottom: @comment-actions-margin-bottom;
     padding-left: 0;
 
     > li {

components/date-picker/style/index.less

@@ -9,8 +9,8 @@
 .picker-padding(@input-height, @font-size, @padding-horizontal) {
   // font height probably 22.0001， So use floor better
   @font-height: floor(@font-size * @line-height-base) + 2;
-  @padding-top: (@input-height - @font-height) / 2;
-  @padding-bottom: @input-height - @font-height - @padding-top;
+  @padding-top: max((@input-height - @font-height) / 2, 0);
+  @padding-bottom: max(@input-height - @font-height - @padding-top, 0);
   padding: @padding-top @padding-horizontal @padding-bottom;
 }
 

components/date-picker/style/panel.less

@@ -651,11 +651,11 @@
           .@{picker-prefix-cls}-time-panel-cell-inner {
             display: block;
             width: 100%;
-            height: 32px;
+            height: @picker-time-panel-cell-height;
             margin: 0;
             padding: 0;
             color: @text-color;
-            line-height: 32px;
+            line-height: @picker-time-panel-cell-height;
             text-align: center;
             border-radius: 0;
             cursor: pointer;

components/descriptions/style/index.less

@@ -3,13 +3,13 @@
 
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
 
-@descriptions-default-padding: 16px 24px;
-@descriptions-middle-padding: 12px 24px;
-@descriptions-small-padding: 8px 16px;
+@descriptions-default-padding: @padding-md @padding-lg;
+@descriptions-middle-padding: @padding-sm @padding-lg;
+@descriptions-small-padding: @padding-xs @padding-md;
 
 .@{descriptions-prefix-cls} {
   &-title {
-    margin-bottom: 20px;
+    margin-bottom: @descriptions-title-margin-bottom;
     color: @heading-color;
     font-weight: bold;
     font-size: @font-size-lg;
@@ -29,7 +29,7 @@
   &-row {
     > th,
     > td {
-      padding-bottom: 16px;
+      padding-bottom: @padding-md;
     }
     &:last-child {
       border-bottom: none;
@@ -81,7 +81,7 @@
     .@{descriptions-prefix-cls}-row {
       > th,
       > td {
-        padding-bottom: 12px;
+        padding-bottom: @padding-sm;
       }
     }
   }
@@ -90,7 +90,7 @@
     .@{descriptions-prefix-cls}-row {
       > th,
       > td {
-        padding-bottom: 8px;
+        padding-bottom: @padding-xs;
       }
     }
   }

components/drawer/demo/basic-right.md

@@ -55,3 +55,9 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ```
+
+```css
+[data-theme='compact'] .ant-drawer-body p {
+  margin-bottom: 0px;
+}
+```

components/drawer/style/drawer.less

@@ -157,14 +157,14 @@
     right: 0;
     z-index: @zindex-popup-close;
     display: block;
-    width: 56px;
-    height: 56px;
+    width: @drawer-header-close-size;
+    height: @drawer-header-close-size;
     padding: 0;
     color: @text-color-secondary;
     font-weight: 700;
     font-size: @font-size-lg;
     font-style: normal;
-    line-height: 56px;
+    line-height: @drawer-header-close-size;
     text-align: center;
     text-transform: none;
     text-decoration: none;

components/form/demo/advanced-search.md

@@ -99,17 +99,20 @@ ReactDOM.render(
 ```
 
 ```css
+[data-theme='compact'] .ant-advanced-search-form,
 .ant-advanced-search-form {
   padding: 24px;
   background: #fbfbfb;
   border: 1px solid #d9d9d9;
   border-radius: 2px;
 }
 
+[data-theme='compact'] .ant-advanced-search-form .ant-form-item,
 .ant-advanced-search-form .ant-form-item {
   display: flex;
 }
 
+[data-theme='compact'] .ant-advanced-search-form .ant-form-item-control-wrapper,
 .ant-advanced-search-form .ant-form-item-control-wrapper {
   flex: 1;
 }

components/input/demo/addon.md

@@ -20,13 +20,13 @@ import { SettingOutlined } from '@ant-design/icons';
 const { Option } = Select;
 
 const selectBefore = (
-  <Select defaultValue="http://" style={{ width: 90 }}>
+  <Select defaultValue="http://" className="select-before">
     <Option value="http://">http://</Option>
     <Option value="https://">https://</Option>
   </Select>
 );
 const selectAfter = (
-  <Select defaultValue=".com" style={{ width: 80 }}>
+  <Select defaultValue=".com" className="select-after">
     <Option value=".com">.com</Option>
     <Option value=".jp">.jp</Option>
     <Option value=".cn">.cn</Option>
@@ -52,3 +52,21 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.select-before {
+  width: 90px;
+}
+
+.select-after {
+  width: 80px;
+}
+
+[data-theme='compact'] .select-before {
+  width: 71px;
+}
+
+[data-theme='compact'] .select-after {
+  width: 65px;
+}
+```

components/input/style/allow-clear.less

@@ -34,8 +34,8 @@
 
 // ======================= TextArea ========================
 .@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
-  padding: 0;
-  border: 0;
+  padding: 0 !important;
+  border: 0 !important;
 }
 
 .@{ant-prefix}-input-textarea-clear-icon {

components/layout/demo/fixed.md

@@ -23,11 +23,7 @@ ReactDOM.render(
   <Layout>
     <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
       <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-      >
+      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
         <Menu.Item key="1">nav 1</Menu.Item>
         <Menu.Item key="2">nav 2</Menu.Item>
         <Menu.Item key="3">nav 3</Menu.Item>

components/layout/demo/top-side-2.md

@@ -24,11 +24,7 @@ ReactDOM.render(
   <Layout>
     <Header className="header">
       <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-      >
+      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
         <Menu.Item key="1">nav 1</Menu.Item>
         <Menu.Item key="2">nav 2</Menu.Item>
         <Menu.Item key="3">nav 3</Menu.Item>

components/layout/demo/top-side.md

@@ -24,11 +24,7 @@ ReactDOM.render(
   <Layout>
     <Header className="header">
       <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-      >
+      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
         <Menu.Item key="1">nav 1</Menu.Item>
         <Menu.Item key="2">nav 2</Menu.Item>
         <Menu.Item key="3">nav 3</Menu.Item>