feat: extract css to theme

Author: mumiao

src/components/dialog/ConfirmDialog.tsx src/components/Modal/ConfirmDialog.tsx

@@ -4,7 +4,6 @@ $confirm: 'confirm';
 
 #{prefix($modal)} {
     box-sizing: border-box;
-    color: #fff;
     font-size: 14px;
     margin: 0 auto;
     max-width: calc(100vw - 32px);
@@ -15,7 +14,6 @@ $confirm: 'confirm';
     width: auto;
 
     &-mask {
-        background-color: rgba(0, 0, 0, 0.45);
         bottom: 0;
         height: 100%;
         left: 0;
@@ -48,18 +46,13 @@ $confirm: 'confirm';
     }
 
     &-content {
-        background-color: #1e1e1e;
-        box-shadow: rgba(0, 0, 0, 0.31) 0 0 8px;
-        color: #fff;
         font-size: 18px;
         padding: 0 15px;
         pointer-events: auto;
         position: relative;
     }
 
     &-header {
-        background: inherit;
-        color: #fff;
         font-size: 24px;
         padding: 16px 0;
     }
@@ -76,8 +69,6 @@ $confirm: 'confirm';
     }
 
     &-close {
-        background: 0 0;
-        border: 0;
         color: #fff;
         cursor: pointer;
         font-weight: 700;
@@ -122,10 +113,6 @@ $confirm: 'confirm';
         .codicon {
             font-size: 48px !important;
         }
-
-        .codicon-warning {
-            color: rgb(204, 167, 0);
-        }
     }
 
     &_content {
@@ -147,7 +134,6 @@ $confirm: 'confirm';
         }
 
         &--detail {
-            color: rgb(187, 187, 187);
             font-size: 13px;
         }
     }

src/components/dialog/ActionButton.tsx src/components/Modal/actionButton.tsx

@@ -26,6 +26,7 @@
 @import 'mo/components/input/style';
 @import 'mo/components/select/style';
 @import 'mo/components/checkbox/style';
+@import 'mo/components/dialog';
 
 // =============== Workbench =============== //
 #{prefix($workbench)} {
@@ -269,3 +270,42 @@
         }
     }
 }
+
+#{$modal} {
+    color: #fff;
+
+    &-mask {
+        background-color: rgba(0, 0, 0, 0.45);
+
+    }
+
+    &-content {
+        background-color: #1e1e1e;
+        box-shadow: rgba(0, 0, 0, 0.31) 0 0 8px;
+        color: #fff;
+    }
+
+    &-header {
+        background: inherit;
+        color: #fff;
+    }
+
+    &-close {
+        color: #fff;
+
+    }
+}
+
+#{$confirm} {
+    &__indicator { 
+        .codicon-warning {
+            color: rgb(204, 167, 0);
+        }
+    }
+    
+    &__message { 
+        &--detail {
+            color: rgb(187, 187, 187);
+        }
+    }
+}

src/components/dialog/confirm.tsx src/components/Modal/confirm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import Modal from 'mo/components/dialog';
+import Modal from 'mo/components/Modal';
 import { Button } from 'mo/components/button';
 import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
@@ -46,28 +46,24 @@ stories.add('Basic Usage', () => {
                 等语法糖方法
             </p>
             <div>
-                <h3>使用示例 1 - 基本使用</h3>
-                <div>
-                    <div id="container" style={{ padding: 24 }}/>
-                    <Button type="primary" onClick={showModal}>
-                        Open Modal
-                    </Button>
-                    <Modal
-                        width={520}
-                        title="Tweet us your feedback"
-                        destroyOnClose={true}
-                        visible={isModalVisible}
-                        onOk={handleOk}
-                        onCancel={handleCancel}
-                    >
-                        <p>Some contents...</p>
-                        <p>Some contents...</p>
-                        <p>Some contents...</p>
-                    </Modal>
-                    <br/>
-                    <br/>
-                    <Button onClick={showConfirm}>Confirm</Button>
-                </div>
+                <h3>使用示例 1 - Modal</h3>
+                <Button type="primary" onClick={showModal}>
+                    Open Modal
+                </Button>
+                <Modal
+                    width={520}
+                    title="Tweet us your feedback"
+                    destroyOnClose={true}
+                    visible={isModalVisible}
+                    onOk={handleOk}
+                    onCancel={handleCancel}
+                >
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </Modal>
+                <h3>使用示例 2 - confirm</h3>
+                <Button onClick={showConfirm}>Confirm</Button>
             </div>
         </>
     );