feat(flat-components): add theme css (#491)

netless-io · Apr 2, 2021 · 6969875 · 6969875
1 parent e43ebc4
commit 6969875
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 69 deletions.
diff --git a/desktop/renderer-app/src/pages/UserSettingPanel/HotKeySetting.less b/desktop/renderer-app/src/pages/UserSettingPanel/HotKeySetting.less
@@ -1,18 +1,16 @@
-@import "../../theme";
-
 .content-inner {
     margin: 0 20px;
 
     .ant-table-header tr > th {
         border: none;
         padding: 10px;
-        background: @white;
+        background: #fff;
     }
 
     .ant-table-body {
         overflow-y: scroll;
         height: 450px;
-        border: 1px solid @white_not_nearly;
+        border: 1px solid #e0e0e0;
         border-radius: 15px;
 
         .ant-table-thead {

diff --git a/desktop/renderer-app/src/theme.less b/desktop/renderer-app/src/theme.less
@@ -1,42 +1,11 @@
-@base_black: #141414;
-@base_gray: #7a7a7a;
-@toolboxShadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-@toolboxShadowHover: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-
-@main_color: #5b908e;
-@main_color_green: #16bd5d;
-@black_darker: #141414;
-@black_dark: #292929;
-@black: #3d3d3d;
-@black_light: #525252;
-@black_lighter: #666666;
-@gray_darker: #7a7a7a;
-@gray_dark: #8f8f8f;
-@gray: #a2a7ad;
-@gray_light: #b8b8b8;
-@gray_lighter: #cccccc;
-@white_not_nearly: #e0e0e0;
-@white_nearly: #f5f5f5;
-@white_almost: #fafafa;
-@white: #ffffff;
-
 * {
     user-select: none;
 }
 
-body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
-        "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
-        sans-serif;
-}
-
 a {
     text-decoration: none;
     outline: none;
-    color: @black_dark;
+    color: currentColor;
 }
 a:link {
     text-decoration: none;
@@ -64,36 +33,3 @@ textarea {
     -webkit-appearance: none;
     resize: none;
 }
-
-.ant-menu-vertical {
-    border-right: white;
-}
-
-.hover-transition {
-    transition-duration: 0.2s;
-}
-
-.ant-menu-inline {
-    border-right: 1px solid white;
-}
-
-.ant-popover-inner-content {
-    padding: 0;
-}
-
-.ant-modal-content {
-    border-radius: 8px;
-}
-
-.ant-modal-header {
-    border-radius: 8px 8px 0 0;
-}
-
-.ant-message-notice-content {
-    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
-    border-radius: 20px;
-}
-
-.ant-btn {
-    border-radius: 4px;
-}
diff --git a/packages/flat-components/.storybook/preview.js b/packages/flat-components/.storybook/preview.js
@@ -1,6 +1,7 @@
 import "antd/dist/antd.min.css";
 import "./custom-bulma.scss";
 import "tachyons/css/tachyons.min.css";
+import "../theme/index.less";
 
 import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 

diff --git a/packages/flat-components/package.json b/packages/flat-components/package.json
@@ -18,6 +18,7 @@
     "cleanup": "rimraf ./build"
   },
   "files": [
+    "theme",
     "src",
     "build"
   ],

diff --git a/packages/flat-components/rollup.config.js b/packages/flat-components/rollup.config.js
@@ -128,6 +128,7 @@ function generateIndexTS(config) {
 
     const str =
         "// THIS IS AN AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.\n\n" +
+        `import "../theme/index.less";\n` +
         Object.keys(config)
             .map(folder =>
                 config[folder].map(name => `export * from "./${folder}/${name}";`).join("\n"),

diff --git a/packages/flat-components/theme/antd.mod.less b/packages/flat-components/theme/antd.mod.less
@@ -0,0 +1,32 @@
+.ant-modal-content {
+    border-radius: 8px;
+}
+
+.ant-modal-header {
+    border-radius: 8px 8px 0 0;
+}
+
+.ant-menu-vertical {
+    border-right: white;
+}
+
+.hover-transition {
+    transition-duration: 0.2s;
+}
+
+.ant-menu-inline {
+    border-right: 1px solid white;
+}
+
+.ant-popover-inner-content {
+    padding: 0;
+}
+
+.ant-message-notice-content {
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
+    border-radius: 20px;
+}
+
+.ant-btn {
+    border-radius: 4px;
+}
diff --git a/packages/flat-components/theme/base.less b/packages/flat-components/theme/base.less
@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
+        "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
+        sans-serif;
+}
diff --git a/packages/flat-components/theme/index.less b/packages/flat-components/theme/index.less
@@ -0,0 +1,9 @@
+// variables
+
+// mixins
+
+// base
+@import "./base.less";
+
+// libs
+@import "./antd.mod.less";