From 6969875161f2e606a8447f7765898705ba62b2c3 Mon Sep 17 00:00:00 2001 From: CRIMX Date: Fri, 2 Apr 2021 16:38:14 +0800 Subject: [PATCH] feat(flat-components): add theme css (#491) --- .../pages/UserSettingPanel/HotKeySetting.less | 6 +- desktop/renderer-app/src/theme.less | 66 +------------------ .../flat-components/.storybook/preview.js | 1 + packages/flat-components/package.json | 1 + packages/flat-components/rollup.config.js | 1 + packages/flat-components/theme/antd.mod.less | 32 +++++++++ packages/flat-components/theme/base.less | 8 +++ packages/flat-components/theme/index.less | 9 +++ 8 files changed, 55 insertions(+), 69 deletions(-) create mode 100644 packages/flat-components/theme/antd.mod.less create mode 100644 packages/flat-components/theme/base.less create mode 100644 packages/flat-components/theme/index.less diff --git a/desktop/renderer-app/src/pages/UserSettingPanel/HotKeySetting.less b/desktop/renderer-app/src/pages/UserSettingPanel/HotKeySetting.less index 71a3d592a8f..77df948765d 100644 --- 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 index 8f63637bbba..f85bae32ee9 100644 --- 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 index 8b6fd4df643..30ca3268d32 100644 --- 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 index 99434181be2..0687d7892ef 100644 --- 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 index 0912b2fed42..36bf5c44e12 100644 --- 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 new file mode 100644 index 00000000000..00668f1b77c --- /dev/null +++ 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 new file mode 100644 index 00000000000..422a42fb3e1 --- /dev/null +++ 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 new file mode 100644 index 00000000000..63ab1c407a4 --- /dev/null +++ b/packages/flat-components/theme/index.less @@ -0,0 +1,9 @@ +// variables + +// mixins + +// base +@import "./base.less"; + +// libs +@import "./antd.mod.less";