├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .prettierrc.js ├── .travis.yml ├── LICENSE ├── README.md ├── babel.config.js ├── index.ts ├── package.json ├── scripts └── generateLess.ts ├── tests └── index.test.ts └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', // Specifies the ESLint parser 3 | extends: [ 4 | 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin 5 | 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. 6 | ], 7 | env: { 8 | browser: true, 9 | node: true, 10 | }, 11 | parserOptions: { 12 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features 13 | sourceType: 'module', // Allows for the use of imports 14 | ecmaFeatures: { 15 | jsx: true, // Allows for the parsing of JSX 16 | }, 17 | }, 18 | rules: { 19 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 20 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 21 | '@typescript-eslint/indent': ['error', 2], 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea/ 3 | .ipr 4 | .iws 5 | *~ 6 | ~* 7 | *.diff 8 | *.patch 9 | *.bak 10 | .DS_Store 11 | Thumbs.db 12 | .project 13 | .*proj 14 | .svn/ 15 | *.swp 16 | *.swo 17 | *.log 18 | *.log.* 19 | *.json.gzip 20 | node_modules/ 21 | .buildpath 22 | .settings 23 | npm-debug.log 24 | nohup.out 25 | src/**/*.js 26 | tests/**/*.js 27 | /.vscode/ 28 | /coverage 29 | yarn.lock 30 | package-lock.json 31 | /.history 32 | lib 33 | index.js 34 | index.d.ts 35 | scripts/*.js 36 | scripts/*.d.ts 37 | tests/*.js 38 | tests/*.d.ts 39 | index.less 40 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | index.ts 2 | .idea/ 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 2, 7 | }; 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - 11 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT LICENSE 2 | 3 | Copyright (c) 2019-present Ant UED, https://xtech.antfin.com/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Ant Design Theme for Aliyun

2 | 3 |
4 | 5 | [![Travis](https://img.shields.io/travis/ant-design/ant-design-aliyun-theme/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-aliyun-theme) 6 | [![npm package](https://img.shields.io/npm/v/@ant-design/aliyun-theme.svg?style=flat-square)](https://www.npmjs.org/package/@ant-design/aliyun-theme) 7 | [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/aliyun-theme.svg?style=flat-square)](http://npmjs.com/@ant-design/aliyun-theme) 8 | 9 | Ant Design theme [variables](https://github.com/ant-design/ant-design-aliyun-theme/blob/master/index.ts) for Aliyun console design. 10 | 11 | > Still being experimental, welcome to try out and help us to improve it. 12 | 13 | Visit https://theme.antd.group/aliyun to preview. 14 | 15 | ![](https://user-images.githubusercontent.com/507615/61530511-d214d200-aa56-11e9-864d-1e8b8e5fc9b1.png) 16 | 17 |
18 | 19 | ## Install 20 | 21 | ```bash 22 | $ npm install @ant-design/aliyun-theme 23 | ``` 24 | 25 | ## Usage 26 | 27 | ### webpack 28 | 29 | ```js 30 | import aliyunTheme from '@ant-design/aliyun-theme'; 31 | 32 | // webpack.config.js: less-loader 33 | { 34 | loader: 'less-loader', 35 | options: { 36 | modifyVars: aliyunTheme, 37 | }, 38 | }, 39 | ``` 40 | 41 | ### umi 42 | 43 | [https://umijs.org/config/#theme](https://umijs.org/config/#theme) 44 | 45 | ```js 46 | import aliyunTheme from '@ant-design/aliyun-theme'; 47 | 48 | // config.js or .umirc.js 49 | export default { 50 | "theme": aliyunTheme, 51 | } 52 | ``` 53 | 54 | > Use in Ant Design Pro: https://github.com/ant-design/ant-design-pro/pull/2946/ 55 | 56 | ### less 57 | 58 | ```less 59 | @import "~@ant-design/aliyun-theme/index.less"; 60 | ``` 61 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | // babel.config.js 2 | module.exports = { 3 | presets: ['@babel/preset-env', '@babel/preset-typescript'], 4 | }; 5 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | // All antd theme variables: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less 2 | 3 | export default { 4 | '@font-size-sm': '12px', 5 | '@font-size-base': '12px', 6 | '@primary-color': '#0064C8', 7 | '@border-radius-base': '0', 8 | '@border-radius-sm': '0', 9 | 10 | '@text-color': 'fade(#000, 65%)', 11 | '@text-color-secondary': 'fade(#000, 45%)', 12 | '@heading-color': 'fade(#000, 85%)', 13 | '@background-color-base': 'hsv(0, 0, 96%)', 14 | 15 | '@success-color': '#1e8e3e', 16 | '@error-color': '#d93026', 17 | '@warning-color': '#ffc440', 18 | '@info-color': '@primary-color', 19 | '@danger-color': '@error-color', 20 | '@processing-color': '@primary-color', 21 | 22 | '@border-color-base': '#dedede', 23 | '@border-color-split': '#ebebeb', 24 | 25 | '@outline-width': '0', 26 | '@outline-color': '#737373', 27 | 28 | '@input-height-lg': '36px', 29 | '@input-height-base': '32px', 30 | '@input-height-sm': '24px', 31 | '@input-hover-border-color': '#737373', 32 | 33 | '@form-item-margin-bottom': '16px', 34 | 35 | '@btn-default-bg': '#fafafa', 36 | '@btn-default-border': '#dedede', 37 | '@btn-danger-color': '#ffffff', 38 | '@btn-danger-bg': '@error-color', 39 | '@btn-danger-border': '@error-color', 40 | '@btn-padding-horizontal-base': '12px', 41 | '@btn-padding-horizontal-sm': '8px', 42 | '@btn-padding-horizontal-lg': '16px', 43 | 44 | '@switch-color': '@success-color', 45 | 46 | '@table-header-bg': '#fafafa', 47 | '@table-row-hover-bg': '#fafafa', 48 | '@table-padding-vertical': '12px', 49 | '@table-selected-row-bg': 'fade(@primary-color, 10)', 50 | '@table-header-cell-split-color': 'transparent', 51 | '@table-selection-column-width': '50px', 52 | 53 | '@badge-color': '@error-color', 54 | 55 | '@breadcrumb-base-color': '@text-color', 56 | '@breadcrumb-last-item-color': '@text-color-secondary', 57 | '@breadcrumb-link-color': '@heading-color', 58 | '@breadcrumb-link-color-hover': '@primary-color', 59 | 60 | '@slider-rail-background-color': '@background-color-base', 61 | '@slider-rail-background-color-hover': '#e1e1e1', 62 | '@slider-track-background-color': '@primary-color', 63 | '@slider-track-background-color-hover': '@primary-color', 64 | '@slider-handle-border-width': '1px', 65 | '@slider-handle-color': '#dedede', 66 | '@slider-handle-color-hover': '#dedede', 67 | '@slider-handle-color-focus': '#dedede', 68 | '@slider-handle-color-tooltip-open': '#ddd', 69 | '@slider-handle-color-focus-shadow': 'transparent', 70 | '@slider-handle-shadow': '1px 1px 4px 0 rgba(0,0,0,.13)', 71 | 72 | '@alert-success-border-color': '#dff4e5', 73 | '@alert-success-bg-color': '#dff4e5', 74 | '@alert-info-border-color': '#e5f3ff', 75 | '@alert-info-bg-color': '#e5f3ff', 76 | '@alert-error-border-color': '#fcebea', 77 | '@alert-error-bg-color': '#fcebea', 78 | '@alert-warning-border-color': '#fff7db', 79 | '@alert-warning-bg-color': '#fff7db', 80 | 81 | '@radio-button-bg': 'transparent', 82 | '@radio-button-checked-bg': 'transparent', 83 | '@radio-button-active-color': 'fade(@primary-color, 15)', 84 | '@radio-button-padding-horizontal': '16px', 85 | 86 | '@progress-radius': '0', 87 | 88 | '@tabs-card-gutter': '-1px', 89 | '@tabs-card-horizontal-padding-lg': '8px 16px', 90 | '@tabs-card-tab-active-border-top': '2px solid @primary-color', 91 | '@tabs-hover-color': '@primary-color', 92 | '@tabs-title-font-size': '14px', 93 | 94 | '@layout-body-background': '#ffffff', 95 | '@layout-sider-background': '#f5f5f5', 96 | 97 | '@menu-bg': 'transparent', 98 | '@menu-highlight-color': '@heading-color', 99 | '@menu-horizontal-line-height': '36px', 100 | '@menu-item-active-bg': '#dedede', 101 | '@menu-item-active-border-width': '0', 102 | '@menu-item-boundary-margin': '0', 103 | '@menu-item-hover-bg': '#ebebeb', 104 | '@menu-item-vertical-margin': '0', 105 | '@menu-inline-submenu-bg': '#f5f5f5', 106 | 107 | '@page-header-heading-title': '28px', 108 | '@page-header-padding-breadcrumb': '16px', 109 | 110 | '@tooltip-max-width': '500px', 111 | '@tooltip-bg': '#ffffff', 112 | '@tooltip-color': '@heading-color', 113 | '@tooltip-arrow-width': '8px', 114 | 115 | '@modal-body-padding': '0 24px', 116 | '@modal-footer-border-width': '0', 117 | '@modal-confirm-body-padding': '24px', 118 | '@modal-confirm-title-font-size': '16px', 119 | '@modal-footer-padding-vertical': '16px', 120 | '@modal-footer-padding-horizontal': '24px', 121 | 122 | '@modal-header-border-width': '0', 123 | 124 | '@select-item-selected-bg': 'rgba(14,146,255,0.05)', 125 | 126 | '@link-hover-color': '@primary-color', 127 | '@link-hover-decoration': 'underline', 128 | '@link-focus-decoration': 'underline', 129 | 130 | '@drawer-title-font-size': '18px', 131 | '@drawer-title-line-height': '27px', 132 | 133 | '@divider-vertical-gutter': '0', 134 | 135 | '@dropdown-selected-bg': 'rgba(14, 146, 255, 0.05)', 136 | 137 | '@body-background': '#f2f3f5', 138 | }; 139 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ant-design/aliyun-theme", 3 | "version": "0.0.5", 4 | "description": "Ant Design Theme for Aliyun console", 5 | "main": "index.js", 6 | "module": "index.js", 7 | "homepage": "https://github.com/ant-design/ant-design-aliyun-theme", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/ant-design/ant-design-aliyun-theme.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/ant-design/ant-design-aliyun-theme/issues" 14 | }, 15 | "scripts": { 16 | "tsc": "tsc", 17 | "prepublishOnly": "npm run compile", 18 | "lint": "eslint . --ext .ts", 19 | "lint:fix": "prettier --write '**/*.ts'", 20 | "compile": "npm run tsc && node scripts/generateLess.js", 21 | "jest": "jest", 22 | "test": "npm run lint && npm run tsc && jest" 23 | }, 24 | "author": "afc163 ", 25 | "license": "MIT", 26 | "dependencies": {}, 27 | "devDependencies": { 28 | "@babel/preset-env": "^7.16.11", 29 | "@babel/preset-typescript": "^7.16.7", 30 | "@types/jest": "^27.4.1", 31 | "@types/less": "^3.0.3", 32 | "@types/node": "^17.0.21", 33 | "@typescript-eslint/eslint-plugin": "^5.13.0", 34 | "@typescript-eslint/parser": "^5.13.0", 35 | "eslint": "^8.10.0", 36 | "eslint-config-prettier": "^8.5.0", 37 | "eslint-plugin-prettier": "^4.0.0", 38 | "jest": "^27.5.1", 39 | "less": "^4.1.2", 40 | "prettier": "^2.5.1", 41 | "typescript": "^4.6.2" 42 | }, 43 | "publishConfig": { 44 | "access": "public" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /scripts/generateLess.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import { join } from 'path'; 3 | import vars from '..'; 4 | 5 | let lessContent = '// Generated by @ant-design/aliyun-theme\n\n'; 6 | 7 | interface Vars { 8 | [key: string]: string; 9 | } 10 | 11 | Object.keys(vars).forEach((key: string): void => { 12 | const value = (vars as Vars)[key]; 13 | lessContent += `${key}: ${value};\n`; 14 | }); 15 | 16 | fs.writeFileSync(join(process.cwd(), 'index.less'), lessContent); 17 | console.log('✨ Generated index.less successfully!'); 18 | -------------------------------------------------------------------------------- /tests/index.test.ts: -------------------------------------------------------------------------------- 1 | /* eslint @typescript-eslint/explicit-function-return-type: 0 */ 2 | import less from 'less'; 3 | import aliyunTheme from '..'; 4 | 5 | interface Vars { 6 | [key: string]: string; 7 | } 8 | 9 | describe('ant-design-aliyun-theme', () => { 10 | it('less compile without errors', () => { 11 | less 12 | .render('', { 13 | modifyVars: aliyunTheme as Vars, 14 | }) 15 | .catch((e) => { 16 | console.error(e); 17 | expect(() => { 18 | throw e; 19 | }).not.toThrow(); 20 | }); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "lib": ["es2017", "dom"], 6 | "strict": true, 7 | "esModuleInterop": true, 8 | "declaration": true 9 | } 10 | } 11 | --------------------------------------------------------------------------------