🌈 Dynamic-Antd-Theme

36 |

37 |     </div>
38 |     <div className='row'>
39 |       <Search placeholder="input search loading deault" loading />
40 |       <br />
41 |       <br />
42 |       <Search placeholder="input search loading with enterButton" loading enterButton />
43 |     </div>
44 |   </>
45 | )

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/InputComp.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Input } from 'antd';
 3 | import { AudioOutlined } from '@ant-design/icons';
 4 | 
 5 | const { Search, Password } = Input;
 6 | 
 7 | const onSearch = (value: any) => console.log(value);
 8 | 
 9 | const suffix = (
10 |   <AudioOutlined
11 |     style={{
12 |       fontSize: 16,
13 |       color: localStorage.getItem('custom-antd-primary-color') || '#1890ff',
14 |     }}
15 |   />
16 | );
17 | 
18 | function InputComp() {
19 |   return (
20 |     <>
21 |       <Password placeholder='请输入密码' />
22 |       <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
23 |       <br/><br/>
24 |       <Search placeholder="input search text" allowClear onSearch={onSearch} style={{ width: 200 }} />
25 |       <br/><br/>
26 |       <Search placeholder="input search text" onSearch={onSearch} enterButton />
27 |       <br/><br/>
28 |       <Search
29 |         placeholder="input search text"
30 |         allowClear
31 |         enterButton="Search"
32 |         size="large"
33 |         onSearch={onSearch}
34 |       />
35 |       <br/><br/>
36 |       <Search
37 |         placeholder="input search text"
38 |         enterButton="Search"
39 |         size="large"
40 |         suffix={suffix}
41 |         onSearch={onSearch}
42 |       />
43 |     </>
44 |   )
45 | }
46 | 
47 | export default InputComp;
48 |

--------------------------------------------------------------------------------
/examples/next-demo/pages/Table.js:
--------------------------------------------------------------------------------
 1 | import { Table } from 'antd';
 2 | 
 3 | const columns = [
 4 |   {
 5 |     title: 'Name',
 6 |     dataIndex: 'name',
 7 |     render: text => <a>{text}</a>,
 8 |   },
 9 |   {
10 |     title: 'Age',
11 |     dataIndex: 'age',
12 |   },
13 |   {
14 |     title: 'Address',
15 |     dataIndex: 'address',
16 |   },
17 | ];
18 | const data = [
19 |   {
20 |     key: '1',
21 |     name: 'John Brown',
22 |     age: 32,
23 |     address: 'New York No. 1 Lake Park',
24 |   },
25 |   {
26 |     key: '2',
27 |     name: 'Jim Green',
28 |     age: 42,
29 |     address: 'London No. 1 Lake Park',
30 |   },
31 |   {
32 |     key: '3',
33 |     name: 'Joe Black',
34 |     age: 32,
35 |     address: 'Sidney No. 1 Lake Park',
36 |   },
37 |   {
38 |     key: '4',
39 |     name: 'Disabled User',
40 |     age: 99,
41 |     address: 'Sidney No. 1 Lake Park',
42 |   },
43 | ];
44 | 
45 | // rowSelection object indicates the need for row selection
46 | const rowSelection = {
47 |   onChange: (selectedRowKeys, selectedRows) => {
48 |     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
49 |   },
50 |   getCheckboxProps: record => ({
51 |     disabled: record.name === 'Disabled User', // Column configuration not to be checked
52 |     name: record.name,
53 |   }),
54 | };
55 | 
56 | export default () => (
57 |   <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
58 | );

--------------------------------------------------------------------------------
/examples/next-demo/pages/Select.js:
--------------------------------------------------------------------------------
 1 | import { Select } from 'antd';
 2 | 
 3 | const { Option, OptGroup } = Select;
 4 | 
 5 | const children = [];
 6 | for (let i = 10; i < 36; i++) {
 7 |   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 8 | }
 9 | 
10 | export default () => (
11 |   <>
12 |     <Select defaultValue="lucy" style={{ width: 120 }}>
13 |       <Option value="jack">Jack</Option>
14 |       <Option value="lucy">Lucy</Option>
15 |       <Option value="disabled" disabled>
16 |         Disabled
17 |       </Option>
18 |       <Option value="Yiminghe">yiminghe</Option>
19 |     </Select>
20 |     <Select defaultValue="lucy" style={{ width: 120 }} disabled>
21 |       <Option value="lucy">Lucy</Option>
22 |     </Select>
23 |     <Select defaultValue="lucy" style={{ width: 120 }} loading>
24 |       <Option value="lucy">Lucy</Option>
25 |     </Select>
26 |     <br/><br/>
27 |     <Select
28 |       mode="multiple"
29 |       style={{ width: '100%' }}
30 |       placeholder="Please select"
31 |       defaultValue={['a10', 'c12']}
32 |     >
33 |       {children}
34 |     </Select>
35 |     <br/><br/>
36 |     <Select defaultValue="lucy" style={{ width: 200 }}>
37 |       <OptGroup label="Manager">
38 |         <Option value="jack">Jack</Option>
39 |         <Option value="lucy">Lucy</Option>
40 |       </OptGroup>
41 |       <OptGroup label="Engineer">
42 |         <Option value="Yiminghe">yiminghe</Option>
43 |       </OptGroup>
44 |     </Select>
45 |   </>
46 | )

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/TableComp.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Table } from 'antd';
 3 | 
 4 | const columns: any[] = [
 5 |   {
 6 |     title: 'Full Name',
 7 |     width: 100,
 8 |     dataIndex: 'name',
 9 |     key: 'name',
10 |     fixed: 'left',
11 |   },
12 |   {
13 |     title: 'Age',
14 |     width: 100,
15 |     dataIndex: 'age',
16 |     key: 'age',
17 |     fixed: 'left',
18 |   },
19 |   {
20 |     title: 'Column 1',
21 |     dataIndex: 'address',
22 |     key: '1',
23 |     width: 150,
24 |   },
25 |   {
26 |     title: 'Column 2',
27 |     dataIndex: 'address',
28 |     key: '2',
29 |     width: 150,
30 |   },
31 |   {
32 |     title: 'Column 3',
33 |     dataIndex: 'address',
34 |     key: '3',
35 |     width: 150,
36 |   },
37 |   {
38 |     title: 'Column 4',
39 |     dataIndex: 'address',
40 |     key: '4',
41 |     width: 150,
42 |   },
43 |   {
44 |     title: 'Column 5',
45 |     dataIndex: 'address',
46 |     key: '5',
47 |     width: 150,
48 |   },
49 |   {
50 |     title: 'Column 6',
51 |     dataIndex: 'address',
52 |     key: '6',
53 |     width: 150,
54 |   },
55 |   {
56 |     title: 'Column 7',
57 |     dataIndex: 'address',
58 |     key: '7',
59 |     width: 150,
60 |   },
61 |   { title: 'Column 8', dataIndex: 'address', key: '8' },
62 |   {
63 |     title: 'Action',
64 |     key: 'operation',
65 |     fixed: 'right',
66 |     width: 100,
67 |     render: () => <a>action</a>,
68 |   },
69 | ];
70 | 
71 | const data: any[] = [];
72 | for (let i = 0; i < 100; i++) {
73 |   data.push({
74 |     key: i,
75 |     name: `Edrward ${i}`,
76 |     age: 32,
77 |     address: `London Park no. ${i}`,
78 |   });
79 | }
80 | 
81 | export default function() {
82 |   return (
83 |     <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />
84 |   )
85 | }

--------------------------------------------------------------------------------
/examples/react-ts-demo/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     
42 |   </body>
43 | </html>
44 |

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/LayoutComp.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Menu } from 'antd';
 3 | import {
 4 |   MenuUnfoldOutlined,
 5 |   MenuFoldOutlined,
 6 |   UserOutlined,
 7 |   VideoCameraOutlined,
 8 |   UploadOutlined,
 9 | } from '@ant-design/icons';
10 | 
11 | const { Header, Sider, Content } = Layout;
12 | 
13 | class LayoutComp extends React.Component {
14 |   state = {
15 |     collapsed: false,
16 |   };
17 | 
18 |   toggle = () => {
19 |     this.setState({
20 |       collapsed: !this.state.collapsed,
21 |     });
22 |   };
23 | 
24 |   render() {
25 |     return (
26 |       <Layout>
27 |         <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
28 |           <div className="logo" />
29 |           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
30 |             <Menu.Item key="1" icon={<UserOutlined />}>
31 |               nav 1
32 |             </Menu.Item>
33 |             <Menu.Item key="2" icon={<VideoCameraOutlined />}>
34 |               nav 2
35 |             </Menu.Item>
36 |             <Menu.Item key="3" icon={<UploadOutlined />}>
37 |               nav 3
38 |             </Menu.Item>
39 |           </Menu>
40 |         </Sider>
41 |         <Layout className="site-layout">
42 |           <Header className="site-layout-background" style={{ padding: 0 }}>
43 |             {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
44 |               className: 'trigger',
45 |               onClick: this.toggle,
46 |             })}
47 |           </Header>
48 |           <Content
49 |             className="site-layout-background"
50 |             style={{
51 |               margin: '24px 16px',
52 |               padding: 24,
53 |               minHeight: 280,
54 |             }}
55 |           >
56 |             Content
57 |           </Content>
58 |         </Layout>
59 |       </Layout>
60 |     );
61 |   }
62 | };
63 | 
64 | export default LayoutComp;

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/RadioComp.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Radio } from 'antd';
 3 | 
 4 | const plainOptions = ['Apple', 'Pear', 'Orange'];
 5 | const options = [
 6 |   { label: 'Apple', value: 'Apple' },
 7 |   { label: 'Pear', value: 'Pear' },
 8 |   { label: 'Orange', value: 'Orange' },
 9 | ];
10 | const optionsWithDisabled = [
11 |   { label: 'Apple', value: 'Apple' },
12 |   { label: 'Pear', value: 'Pear' },
13 |   { label: 'Orange', value: 'Orange', disabled: true },
14 | ];
15 | 
16 | class App extends React.Component {
17 |   state = {
18 |     value1: 'Apple',
19 |     value2: 'Apple',
20 |     value3: 'Apple',
21 |     value4: 'Apple',
22 |   };
23 | 
24 |   onChange1 = (e: any) => {
25 |     console.log('radio1 checked', e.target.value);
26 |     this.setState({
27 |       value1: e.target.value,
28 |     });
29 |   };
30 | 
31 |   onChange2 = (e: any) => {
32 |     console.log('radio2 checked', e.target.value);
33 |     this.setState({
34 |       value2: e.target.value,
35 |     });
36 |   };
37 | 
38 |   onChange3 = (e: any) => {
39 |     console.log('radio3 checked', e.target.value);
40 |     this.setState({
41 |       value3: e.target.value,
42 |     });
43 |   };
44 | 
45 |   onChange4 = (e: any) => {
46 |     console.log('radio4 checked', e.target.value);
47 |     this.setState({
48 |       value4: e.target.value,
49 |     });
50 |   };
51 | 
52 |   render() {
53 |     const { value1, value2, value3, value4 } = this.state;
54 |     return (
55 |       <>
56 |         <Radio.Group options={plainOptions} onChange={this.onChange1} value={value1} />
57 |         <br />
58 |         <Radio.Group options={optionsWithDisabled} onChange={this.onChange2} value={value2} />
59 |         <br />
60 |         <br />
61 |         <Radio.Group
62 |           options={options}
63 |           onChange={this.onChange3}
64 |           value={value3}
65 |           optionType="button"
66 |         />
67 |         <br />
68 |         <br />
69 |         <Radio.Group
70 |           options={optionsWithDisabled}
71 |           onChange={this.onChange4}
72 |           value={value4}
73 |           optionType="button"
74 |           buttonStyle="solid"
75 |         />
76 |       </>
77 |     );
78 |   }
79 | }
80 | 
81 | export default App;

--------------------------------------------------------------------------------
/examples/next-demo/pages/Transfer.js:
--------------------------------------------------------------------------------
 1 | import { Transfer, Switch } from 'antd';
 2 | 
 3 | const mockData = [];
 4 | for (let i = 0; i < 20; i++) {
 5 |   mockData.push({
 6 |     key: i.toString(),
 7 |     title: `content${i + 1}`,
 8 |     description: `description of content${i + 1}`,
 9 |     disabled: i % 3 < 1,
10 |   });
11 | }
12 | 
13 | const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
14 | 
15 | class TransferComp extends React.Component {
16 |   state = {
17 |     targetKeys: oriTargetKeys,
18 |     selectedKeys: [],
19 |     disabled: false,
20 |   };
21 | 
22 |   handleChange = (nextTargetKeys, direction, moveKeys) => {
23 |     this.setState({ targetKeys: nextTargetKeys });
24 | 
25 |     console.log('targetKeys: ', nextTargetKeys);
26 |     console.log('direction: ', direction);
27 |     console.log('moveKeys: ', moveKeys);
28 |   };
29 | 
30 |   handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
31 |     this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
32 | 
33 |     console.log('sourceSelectedKeys: ', sourceSelectedKeys);
34 |     console.log('targetSelectedKeys: ', targetSelectedKeys);
35 |   };
36 | 
37 |   handleScroll = (direction, e) => {
38 |     console.log('direction:', direction);
39 |     console.log('target:', e.target);
40 |   };
41 | 
42 |   handleDisable = disabled => {
43 |     this.setState({ disabled });
44 |   };
45 | 
46 |   render() {
47 |     const { targetKeys, selectedKeys, disabled } = this.state;
48 |     return (
49 |       <div>
50 |         <Transfer
51 |           dataSource={mockData}
52 |           titles={['Source', 'Target']}
53 |           targetKeys={targetKeys}
54 |           selectedKeys={selectedKeys}
55 |           onChange={this.handleChange}
56 |           onSelectChange={this.handleSelectChange}
57 |           onScroll={this.handleScroll}
58 |           render={item => item.title}
59 |           disabled={disabled}
60 |         />
61 |         <Switch
62 |           unCheckedChildren="disabled"
63 |           checkedChildren="disabled"
64 |           checked={disabled}
65 |           onChange={this.handleDisable}
66 |           style={{ marginTop: 16 }}
67 |         />
68 |       </div>
69 |     );
70 |   }
71 | }
72 | 
73 | export default TransferComp;

--------------------------------------------------------------------------------
/examples/react-ts-demo/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | ## Available Scripts
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `yarn start`
 8 | 
 9 | Runs the app in the development mode.<br />
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | The page will reload if you make edits.<br />
13 | You will also see any lint errors in the console.
14 | 
15 | ### `yarn test`
16 | 
17 | Launches the test runner in the interactive watch mode.<br />
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 | 
20 | ### `yarn build`
21 | 
22 | Builds the app for production to the `build` folder.<br />
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 | 
25 | The build is minified and the filenames include the hashes.<br />
26 | Your app is ready to be deployed!
27 | 
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 | 
30 | ### `yarn eject`
31 | 
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 | 
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 | 
36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 | 
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 | 
40 | ## Learn More
41 | 
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 | 
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/NewMenuComp.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Menu, Switch, Divider } from 'antd';
 3 | import {
 4 |   MailOutlined,
 5 |   CalendarOutlined,
 6 |   AppstoreOutlined,
 7 |   SettingOutlined,
 8 |   LinkOutlined,
 9 | } from '@ant-design/icons';
10 | 
11 | const { SubMenu } = Menu;
12 | 
13 | export default () => {
14 |   const [mode, setMode] = React.useState<any>('inline');
15 |   const [theme, setTheme] = React.useState<any>('light');
16 | 
17 |   const changeMode = (value: any) => {
18 |     setMode(value ? 'vertical' : 'inline');
19 |   };
20 | 
21 |   const changeTheme = (value: any) => {
22 |     setTheme(value ? 'dark' : 'light');
23 |   };
24 | 
25 |   return (
26 |     <>
27 |       <Switch onChange={changeMode} /> Change Mode
28 |       <Divider type="vertical" />
29 |       <Switch onChange={changeTheme} /> Change Style
30 |       <br />
31 |       <br />
32 |       <Menu
33 |         style={{ width: 256 }}
34 |         defaultSelectedKeys={['1']}
35 |         defaultOpenKeys={['sub1']}
36 |         mode={mode}
37 |         theme={theme}
38 |       >
39 |         <Menu.Item key="1" icon={<MailOutlined />}>
40 |           Navigation One
41 |         </Menu.Item>
42 |         <Menu.Item key="2" icon={<CalendarOutlined />}>
43 |           Navigation Two
44 |         </Menu.Item>
45 |         <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
46 |           <Menu.Item key="3">Option 3</Menu.Item>
47 |           <Menu.Item key="4">Option 4</Menu.Item>
48 |           <SubMenu key="sub1-2" title="Submenu">
49 |             <Menu.Item key="5">Option 5</Menu.Item>
50 |             <Menu.Item key="6">Option 6</Menu.Item>
51 |           </SubMenu>
52 |         </SubMenu>
53 |         <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
54 |           <Menu.Item key="7">Option 7</Menu.Item>
55 |           <Menu.Item key="8">Option 8</Menu.Item>
56 |           <Menu.Item key="9">Option 9</Menu.Item>
57 |           <Menu.Item key="10">Option 10</Menu.Item>
58 |         </SubMenu>
59 |         <Menu.Item key="link" icon={<LinkOutlined />}>
60 |           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
61 |             Ant Design
62 |           </a>
63 |         </Menu.Item>
64 |       </Menu>
65 |     </>
66 |   );
67 | };

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/MenuComp.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Menu, Button } from 'antd';
 3 | import {
 4 |   AppstoreOutlined,
 5 |   MenuUnfoldOutlined,
 6 |   MenuFoldOutlined,
 7 |   PieChartOutlined,
 8 |   DesktopOutlined,
 9 |   ContainerOutlined,
10 |   MailOutlined,
11 | } from '@ant-design/icons';
12 | 
13 | const { SubMenu } = Menu;
14 | 
15 | class App extends React.Component {
16 |   state = {
17 |     collapsed: false,
18 |   };
19 | 
20 |   toggleCollapsed = () => {
21 |     this.setState({
22 |       collapsed: !this.state.collapsed,
23 |     });
24 |   };
25 | 
26 |   render() {
27 |     return (
28 |       <div style={{ width: 600 }}>
29 |         <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }} ghost>
30 |           {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
31 |         </Button>
32 |         <Menu
33 |           defaultSelectedKeys={['1']}
34 |           defaultOpenKeys={['sub1']}
35 |           mode="horizontal"
36 |           // theme="dark"
37 |           inlineCollapsed={this.state.collapsed}
38 |         >
39 |           <Menu.Item key="1" icon={<PieChartOutlined />}>
40 |             Option 1
41 |           </Menu.Item>
42 |           <Menu.Item key="2" icon={<DesktopOutlined />}>
43 |             Option 2
44 |           </Menu.Item>
45 |           <Menu.Item key="3" icon={<ContainerOutlined />}>
46 |             Option 3
47 |           </Menu.Item>
48 |           <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
49 |             <Menu.Item key="5">Option 5</Menu.Item>
50 |             <Menu.Item key="6">Option 6</Menu.Item>
51 |             <Menu.Item key="7">Option 7</Menu.Item>
52 |             <Menu.Item key="8">Option 8</Menu.Item>
53 |           </SubMenu>
54 |           <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
55 |             <Menu.Item key="9">Option 9</Menu.Item>
56 |             <Menu.Item key="10">Option 10</Menu.Item>
57 |             <SubMenu key="sub3" title="Submenu">
58 |               <Menu.Item key="11">Option 11</Menu.Item>
59 |               <Menu.Item key="12">Option 12</Menu.Item>
60 |             </SubMenu>
61 |           </SubMenu>
62 |         </Menu>
63 |       </div>
64 |     );
65 |   }
66 | }
67 | 
68 | export default App;
69 |

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 |

--------------------------------------------------------------------------------
/examples/next-demo/pages/TreeSelect.js:
--------------------------------------------------------------------------------
 1 | import { TreeSelect } from 'antd';
 2 | 
 3 | const { SHOW_PARENT, TreeNode } = TreeSelect;
 4 | 
 5 | const treeData = [
 6 |   {
 7 |     title: 'Node1',
 8 |     value: '0-0',
 9 |     key: '0-0',
10 |     children: [
11 |       {
12 |         title: 'Child Node1',
13 |         value: '0-0-0',
14 |         key: '0-0-0',
15 |       },
16 |     ],
17 |   },
18 |   {
19 |     title: 'Node2',
20 |     value: '0-1',
21 |     key: '0-1',
22 |     children: [
23 |       {
24 |         title: 'Child Node3',
25 |         value: '0-1-0',
26 |         key: '0-1-0',
27 |       },
28 |       {
29 |         title: 'Child Node4',
30 |         value: '0-1-1',
31 |         key: '0-1-1',
32 |       },
33 |       {
34 |         title: 'Child Node5',
35 |         value: '0-1-2',
36 |         key: '0-1-2',
37 |       },
38 |     ],
39 |   },
40 | ];
41 | 
42 | const tProps = {
43 |   treeData,
44 |   treeCheckable: true,
45 |   showCheckedStrategy: SHOW_PARENT,
46 |   searchPlaceholder: 'Please select',
47 |   style: {
48 |     width: '100%',
49 |   },
50 | };
51 | 
52 | export default () => (
53 |   <>
54 |     <TreeSelect
55 |       showSearch
56 |       style={{ width: '100%' }}
57 |       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
58 |       placeholder="Please select"
59 |       allowClear
60 |       treeDefaultExpandAll
61 |     >
62 |       <TreeNode value="parent 1" title="parent 1" key="0-1">
63 |         <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
64 |           <TreeNode value="leaf1" title="my leaf" key="random" />
65 |           <TreeNode value="leaf2" title="your leaf" key="random1" />
66 |         </TreeNode>
67 |         <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
68 |           <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
69 |         </TreeNode>
70 |       </TreeNode>
71 |     </TreeSelect>
72 |     <br/><br/>
73 |     <TreeSelect
74 |         showSearch
75 |         style={{ width: '100%' }}
76 |         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
77 |         placeholder="Please select"
78 |         allowClear
79 |         multiple
80 |         treeDefaultExpandAll
81 |       >
82 |         <TreeNode value="parent 1" title="parent 1" key="0-1">
83 |           <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
84 |             <TreeNode value="leaf1" title="my leaf" key="random" />
85 |             <TreeNode value="leaf2" title="your leaf" key="random1" />
86 |           </TreeNode>
87 |           <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
88 |             <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
89 |           </TreeNode>
90 |         </TreeNode>
91 |       </TreeSelect>
92 |       <br/><br/>
93 |       <TreeSelect {...tProps} />
94 |   </>
95 | )

--------------------------------------------------------------------------------
/examples/next-demo/pages/Button.js:
--------------------------------------------------------------------------------
 1 | import { Button, Icon } from 'antd';
 2 | 
 3 | export default () => (
 4 |   <>
 5 |     <style jsx>{`
 6 |       .row {
 7 |         margin: 20px 0;
 8 |         display: flex;
 9 |         justify-content: space-around;
10 |       }
11 |     `}</style>
12 |     <div className='row'>
13 |       <Button type="primary">Primary</Button>
14 |       <Button>Default</Button>
15 |       <Button type="dashed">Dashed</Button>
16 |       <Button type="danger">Danger</Button>
17 |       <Button type="link">Link</Button>
18 |     </div>
19 |     <div className='row'>
20 |       <Button type="primary" size={'small'}>
21 |         Primary
22 |       </Button>
23 |       <Button size={'small'}>Normal</Button>
24 |       <Button type="dashed" size={'small'}>
25 |         Dashed
26 |       </Button>
27 |       <Button type="danger" size={'small'}>
28 |         Danger
29 |       </Button>
30 |       <Button type="link" size={'small'}>
31 |         Link
32 |       </Button>
33 |     </div>
34 |     <div className='row'>
35 |       <Button type="primary" size={'large'}>
36 |         Primary
37 |       </Button>
38 |       <Button size={'large'}>Normal</Button>
39 |       <Button type="dashed" size={'large'}>
40 |         Dashed
41 |       </Button>
42 |       <Button type="danger" size={'large'}>
43 |         Danger
44 |       </Button>
45 |       <Button type="link" size={'large'}>
46 |         Link
47 |       </Button>
48 |     </div>
49 |     <div className='row'>
50 |       <Button type="primary" icon="download" size={'default'} />
51 |       <Button type="primary" shape="circle" icon="download" size={'default'} />
52 |       <Button type="primary" shape="round" icon="download" size={'default'} />
53 |       <Button type="primary" shape="round" icon="download" size={'default'}>
54 |         Download
55 |       </Button>
56 |       <Button type="primary" icon="download" size={'default'}>
57 |         Download
58 |       </Button>
59 |       <br />
60 |       <Button.Group size={'default'}>
61 |         <Button type="primary">
62 |           <Icon type="left" />
63 |           Backward
64 |         </Button>
65 |         <Button type="primary">
66 |           Forward
67 |           <Icon type="right" />
68 |         </Button>
69 |       </Button.Group>
70 |     </div>
71 |     <div className='row'>
72 |       <Button type="primary" disabled>
73 |         Primary(disabled)
74 |       </Button>
75 |       <Button type="primary" ghost disabled>
76 |         Primary Ghost(disabled)
77 |       </Button>
78 |       <Button type="dashed" disabled>
79 |         Dashed(disabled)
80 |       </Button>
81 |     </div>
82 |     <div className='row'>
83 |       <Button type="primary" loading>Primary</Button>
84 |       <Button loading>Default</Button>
85 |       <Button type="dashed" loading>Dashed</Button>
86 |       <Button type="danger" loading>Danger</Button>
87 |       <Button type="link" loading>Link</Button>
88 |     </div>
89 |   </>
90 | );

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/TableSelectComp.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Table, Switch, Space } from 'antd';
  3 | 
  4 | const columns = [
  5 |   {
  6 |     title: 'Name',
  7 |     dataIndex: 'name',
  8 |     key: 'name',
  9 |   },
 10 |   {
 11 |     title: 'Age',
 12 |     dataIndex: 'age',
 13 |     key: 'age',
 14 |     width: '12%',
 15 |   },
 16 |   {
 17 |     title: 'Address',
 18 |     dataIndex: 'address',
 19 |     width: '30%',
 20 |     key: 'address',
 21 |   },
 22 | ];
 23 | 
 24 | const data = [
 25 |   {
 26 |     key: 1,
 27 |     name: 'John Brown sr.',
 28 |     age: 60,
 29 |     address: 'New York No. 1 Lake Park',
 30 |     children: [
 31 |       {
 32 |         key: 11,
 33 |         name: 'John Brown',
 34 |         age: 42,
 35 |         address: 'New York No. 2 Lake Park',
 36 |       },
 37 |       {
 38 |         key: 12,
 39 |         name: 'John Brown jr.',
 40 |         age: 30,
 41 |         address: 'New York No. 3 Lake Park',
 42 |         children: [
 43 |           {
 44 |             key: 121,
 45 |             name: 'Jimmy Brown',
 46 |             age: 16,
 47 |             address: 'New York No. 3 Lake Park',
 48 |           },
 49 |         ],
 50 |       },
 51 |       {
 52 |         key: 13,
 53 |         name: 'Jim Green sr.',
 54 |         age: 72,
 55 |         address: 'London No. 1 Lake Park',
 56 |         children: [
 57 |           {
 58 |             key: 131,
 59 |             name: 'Jim Green',
 60 |             age: 42,
 61 |             address: 'London No. 2 Lake Park',
 62 |             children: [
 63 |               {
 64 |                 key: 1311,
 65 |                 name: 'Jim Green jr.',
 66 |                 age: 25,
 67 |                 address: 'London No. 3 Lake Park',
 68 |               },
 69 |               {
 70 |                 key: 1312,
 71 |                 name: 'Jimmy Green sr.',
 72 |                 age: 18,
 73 |                 address: 'London No. 4 Lake Park',
 74 |               },
 75 |             ],
 76 |           },
 77 |         ],
 78 |       },
 79 |     ],
 80 |   },
 81 |   {
 82 |     key: 2,
 83 |     name: 'Joe Black',
 84 |     age: 32,
 85 |     address: 'Sidney No. 1 Lake Park',
 86 |   },
 87 | ];
 88 | 
 89 | // rowSelection objects indicates the need for row selection
 90 | const rowSelection = {
 91 |   // @ts-ignore
 92 |   onChange: (selectedRowKeys, selectedRows) => {
 93 |     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
 94 |   },
 95 |   // @ts-ignore
 96 |   onSelect: (record, selected, selectedRows) => {
 97 |     console.log(record, selected, selectedRows);
 98 |   },
 99 |   // @ts-ignore
100 |   onSelectAll: (selected, selectedRows, changeRows) => {
101 |     console.log(selected, selectedRows, changeRows);
102 |   },
103 | };
104 | 
105 | function App() {
106 |   const [checkStrictly, setCheckStrictly] = React.useState(false);
107 |   return (
108 |     <>
109 |       <Space align="center" style={{ marginBottom: 16 }}>
110 |         CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
111 |       </Space>
112 |       <Table
113 |         columns={columns}
114 |         rowSelection={{ ...rowSelection, checkStrictly }}
115 |         dataSource={data}
116 |       />
117 |     </>
118 |   );
119 | }
120 | 
121 | export default App;

--------------------------------------------------------------------------------
/src/dynamic-antd-theme.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { SketchPicker } from 'react-color';
  4 | import tinycolor from 'tinycolor2';
  5 | import { changeAntdTheme, generateThemeColor, placementSketchPicker } from './core/util';
  6 | 
  7 | class DynamicAntdTheme extends Component {
  8 |   
  9 |   static propTypes = {
 10 |     primaryColor: PropTypes.string,
 11 |     storageName: PropTypes.string,
 12 |     style: PropTypes.object,
 13 |     placement: PropTypes.string,
 14 |     themeChangeCallback: PropTypes.func,
 15 |     customCss: PropTypes.string
 16 |   }
 17 | 
 18 |   static defaultProps = {
 19 |     primaryColor: '#1890ff',
 20 |     storageName: 'custom-antd-primary-color',
 21 |     style: { display: 'inline-block' },
 22 |     placement: '',
 23 |     themeChangeCallback: null,
 24 |     customCss: ''
 25 |   }
 26 | 
 27 |   constructor(props) {
 28 |     super(props);
 29 |     const { primaryColor } = this.props;
 30 |     this.state = {
 31 |       color: tinycolor(primaryColor).toRgb()
 32 |     };
 33 |   }
 34 | 
 35 |   componentDidMount() {
 36 |     const { storageName, themeChangeCallback, customCss } = this.props;
 37 |     // initial storage color
 38 |     const storageColor = window.localStorage.getItem(storageName);
 39 |     if (storageColor) {
 40 |       changeAntdTheme(storageColor, { customCss });
 41 |       document.getElementById('change_antd_theme_color').style.backgroundColor = storageColor;
 42 |       if (themeChangeCallback) {
 43 |         themeChangeCallback(storageColor);
 44 |       }
 45 |     }
 46 |   }
 47 | 
 48 |   handleClick = () => {
 49 |     this.setState({ displayColorPicker: !this.state.displayColorPicker });
 50 |   };
 51 | 
 52 |   handleClose = () => {
 53 |     this.setState({ displayColorPicker: false });
 54 |   };
 55 | 
 56 |   handleChange = color => {
 57 |     this.setState({ color: color.rgb }, () => {
 58 |       changeAntdTheme(color.hex, { customCss: this.props.customCss });
 59 |       window.localStorage.setItem(this.props.storageName, color.hex);
 60 |       this.props.themeChangeCallback && this.props.themeChangeCallback(color.hex);
 61 |     });
 62 |   };
 63 | 
 64 |   render() {
 65 |     const styles = {
 66 |       color: {
 67 |         width: '36px',
 68 |         height: '14px',
 69 |         borderRadius: '2px',
 70 |         background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`
 71 |       },
 72 |       swatch: {
 73 |         width: '46px',
 74 |         maxWidth: '46px',
 75 |         padding: '5px',
 76 |         background: '#fff',
 77 |         borderRadius: '1px',
 78 |         boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
 79 |         display: 'inline-block',
 80 |         cursor: 'pointer'
 81 |       },
 82 |       popover: {
 83 |         position: 'absolute',
 84 |         zIndex: '99999',
 85 |         ...placementSketchPicker(this.props.placement)
 86 |       },
 87 |       cover: {
 88 |         position: 'fixed',
 89 |         top: '0px',
 90 |         right: '0px',
 91 |         bottom: '0px',
 92 |         left: '0px'
 93 |       }
 94 |     };
 95 | 
 96 |     return (
 97 |       <div style={this.props.style}>
 98 |         <div id='change_antd_theme_button' style={ styles.swatch } onClick={ this.handleClick }>
 99 |           <div id='change_antd_theme_color' style={ styles.color } />
100 |         </div>
101 |         {
102 |           this.state.displayColorPicker
103 |             ? <div style={styles.popover}>
104 |             <div style={ styles.cover } onClick={ this.handleClose } />
105 |             <SketchPicker
106 |               color={ this.state.color }
107 |               onChange={ this.handleChange }
108 |             />
109 |           </div> : null
110 |         }
111 |       </div>
112 |     );
113 |   }
114 | }
115 | 
116 | export { DynamicAntdTheme as default, changeAntdTheme, generateThemeColor };

--------------------------------------------------------------------------------
/examples/next-demo/docs/README_zh_CN.md:
--------------------------------------------------------------------------------
  1 | ## 🌍 Browser Support
  2 | 
  3 | | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
  4 | | --- | --- | --- | --- | --- |
  5 | | Chrome 39.0+ ✔ | Edge 12.0+ ✔ | Firefox 30.0+ ✔ | IE 11+ ✔ | Safari 9.1+ ✔ |
  6 | 
  7 | ## 📦 安装
  8 | 
  9 | `npm install dynamic-antd-theme` 或 `yarn add dynamic-antd-theme`
 10 | 
 11 | 
 12 | ## 🔨 如何使用
 13 | 
 14 | 最好的方式是将组件安装在公用组件里，这样任何页面都可以使用，进行替换。
 15 | 
 16 | 例如：Layout组件和Header组件。
 17 | 
 18 | > 不是说每个页面都需要进行替换，只需要替换一次即可进行整个项目的替换。
 19 | 
 20 | ```
 21 | // Layout.js
 22 | ...
 23 | import DynamicAntdTheme from 'dynamic-antd-theme';
 24 | ...
 25 | 
 26 | <div className='theme-container'>
 27 |   <span>Change antd theme: </span>
 28 |   <DynamicAntdTheme />
 29 | </div>
 30 | 
 31 | ```
 32 | ### 更多示例
 33 | 
 34 | ```
 35 | 
 36 | <DynamicAntdTheme primaryColor='#77dd66' />
 37 | 
 38 | <DynamicAntdTheme storageName='my-custom-define-color' />
 39 | 
 40 | <DynamicAntdTheme style={{ display: 'margin: 10px' }} />
 41 | 
 42 | function themeChangeCallback (color) {
 43 |   document.getElementById('my-header-bar').style.backgroundColor = color;
 44 | }
 45 | 
 46 | <DynamicAntdTheme themeChangeCallback={this.themeChangeCallback} />
 47 | 
 48 | ```
 49 | 
 50 | ## ✨ 属性
 51 | 
 52 | | 属性       | 类型  |  默认值                  | 描述         |
 53 | | ---------- | ------ | --------------------- | ------------ |
 54 | | primaryColor   | String | #1890d5 |  你当前项目用到的@primary-color，默认是antd官方的      |
 55 | | storageName   | String |   custom-antd-primary-color  | 缓存在本地localStorage里面的变量名    |
 56 | | style   | Object |  { display: 'inline-block' }  | 可以简单的对组件进行样式设置  |
 57 | | placement   | String | bottomRight |  改变color-picker的显示位置，有如下值可设置：`bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`。|
 58 | | themeChangeCallback   | Func | null | 你可以在主题颜色变化的同时传入一个你想修改的自定义callback，用来修改你自己的与主题相关的样式，如Header/Sider这种antd不附带主题色的场景 |
 59 | 
 60 | ## 🌞 方法
 61 | | export       | Description         |
 62 | | ---------- | ------------ |
 63 | | default  | 默认引入的是 <DynamicAntdTheme /> 组件 |
 64 | | generateThemeColor   | `param: color`, 根据传入的颜色生成一组颜色对象  |
 65 | | changeAntdTheme   | `param: colorObj`, 改变主题的方法 |
 66 | 
 67 | #### 示例
 68 | ```
 69 | import { generateThemeColor, changeAntdTheme } from 'dynamic-antd-theme';
 70 | ...
 71 | 
 72 | <Button
 73 |   onClick={
 74 |     () => {
 75 |       const color = 'blue';
 76 |       changeAntdTheme(
 77 |         generateThemeColor(color);
 78 |       );
 79 |     }
 80 |   }
 81 | >改变主题</Button>
 82 | ```
 83 | 
 84 | ## ⚠️ 注意
 85 | 
 86 | **该方案因为简易使用，所以容易出现问题，出现问题希望大家及时反馈，比如什么组件有问题，一定尽快修复更新版本。**
 87 | 
 88 |  - 目前版本要求你的antd版本低于v3.19.0
 89 | 
 90 | > 版本高于v3.19.0也可以使用，如果出现问题，记得提issue，会立刻解决
 91 | 
 92 |  - ...插件版本会根据antd不定时更新（一般antd出新组件会进行更新）
 93 | 
 94 | ## 🔗 更新记录
 95 | 
 96 |   - v0.1.3
 97 |     
 98 |     修复Slider组件的显示问题。
 99 |    
100 |   - v0.1.4
101 |     
102 |     避免重复插入`<style>`标签的问题
103 | 
104 |   - v0.1.5
105 |   
106 |     增加`placement`属性，该属性可设置如下值：`bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`， 默认值是`bottomRight`。
107 | 
108 |   - v0.1.6
109 |   
110 |     增加 `themeChangeCallback` 属性, 你可以传入一个回调函数(参数是修改后的主题色)，当主题色变化的时候使用主题色做一些事。
111 |   
112 |   - v0.2.0
113 | 
114 |     修复ant-design的Table组件，鼠标hover的时候背景色没跟随主题变化
115 | 
116 |   - v0.2.4
117 |   
118 |     支持IE 11+
119 | 
120 |   - v0.2.6
121 | 
122 |     修复了日期选择控件`<DatePicker />`的当前日期颜色问题。
123 | 
124 |   - v0.3.0
125 |   
126 |     增加了两个方法`{ generateThemeColor, changeAntdTheme }`，为了那些不需要类似颜色选择器这种组件的开发者，开发者可以根据自己的需求来进行颜色的改变。
127 |   
128 |   - v0.3.2
129 |   
130 |     修复了`<Button type='danger' />`的bug, 这个bug导致当鼠标hover到`type='danger'`的按钮时，文字颜色会变成主题色，而不是白色.
131 | 
132 |   - v0.3.6
133 | 
134 |     修复了`DateRangePicker`的一些bug。
135 | 
136 |   - v0.3.7
137 | 
138 |     修复了`table:hover`在antd@^3.20.0版本的样式不匹配问题
139 | 
140 |   - v0.3.8
141 | 
142 |     修复了`calender`组件的一些bug。
143 | 
144 |   - v0.3.9
145 | 
146 |     修复了树状表格icon颜色不匹配的问题。

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Button, Steps, Switch, Form, Input, Checkbox } from 'antd';
  3 | import DynamicAntdTheme, { changeAntdTheme } from 'dynamic-antd-theme';
  4 | import SelectComp from './components/SelectComp';
  5 | import SliderComp from './components/SliderComp';
  6 | import TabComp from './components/TabComp';
  7 | import PickerComp from './components/PickerComp';
  8 | import './App.css';
  9 | import TableComp from './components/TableComp';
 10 | import TableSelectComp from './components/TableSelectComp';
 11 | import MenuComp from './components/MenuComp';
 12 | import RadioComp from './components/RadioComp';
 13 | import InputComp from './components/InputComp';
 14 | import TreeComp from './components/TreeComp';
 15 | import NewMenuComp from './components/NewMenuComp';
 16 | 
 17 | const { Step } = Steps;
 18 | 
 19 | const customCss = `
 20 |   .ant-btn {
 21 |     font-family: fantasy;
 22 |   }
 23 |   .custom-title {
 24 |     color: $primary-color;
 25 |   }
 26 |   .custom-title:hover {
 27 |     color: $primary-hover-color;
 28 |     cursor: pointer;
 29 |   }
 30 |   #custom-id {
 31 |     color: $primary-shadow-color;
 32 |   }
 33 | `;
 34 | 
 35 | const layout = {
 36 |   labelCol: { span: 8 },
 37 |   wrapperCol: { span: 16 },
 38 | };
 39 | const tailLayout = {
 40 |   wrapperCol: { offset: 8, span: 16 },
 41 | };
 42 | 
 43 | function App() {
 44 | 
 45 |   const onFinish = (values: any) => {
 46 |     console.log('Success:', values);
 47 |   };
 48 | 
 49 |   const onFinishFailed = (errorInfo: any) => {
 50 |     console.log('Failed:', errorInfo);
 51 |   };
 52 | 
 53 |   return (
 54 |     <div className="App" style={{ paddingBottom: 20 }}>
 55 |       <Steps current={1}>
 56 |         <Step title="Finished" description="This is a description." />
 57 |         <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
 58 |         <Step title="Waiting" description="This is a description." />
 59 |       </Steps>
 60 |       <br />
 61 |       <Button type='primary'>Primary</Button>
 62 |       <Button style={{ margin: '0 20px' }} type='primary' ghost>Ghost</Button>
 63 |       <Button type='primary' danger>Danger</Button>
 64 |       <br /><br />
 65 |       <h3 className='custom-title'>Test Class Selector</h3>
 66 |       <span id='custom-id'>Test ID Selector</span>
 67 |       <br /><br />
 68 |       <Switch defaultChecked />
 69 |       <br /><br />
 70 |       <Form
 71 |         {...layout}
 72 |         name="basic"
 73 |         initialValues={{ remember: true }}
 74 |         onFinish={onFinish}
 75 |         onFinishFailed={onFinishFailed}
 76 |       >
 77 |         <Form.Item
 78 |           label="Username"
 79 |           name="username"
 80 |           rules={[{ required: true, message: 'Please input your username!' }]}
 81 |         >
 82 |           <Input />
 83 |         </Form.Item>
 84 | 
 85 |         <Form.Item
 86 |           label="Password"
 87 |           name="password"
 88 |           rules={[{ required: true, message: 'Please input your password!' }]}
 89 |         >
 90 |           <Input.Password />
 91 |         </Form.Item>
 92 | 
 93 |         <Form.Item {...tailLayout} name="remember" valuePropName="checked">
 94 |           <Checkbox>Remember me</Checkbox>
 95 |         </Form.Item>
 96 | 
 97 |         <Form.Item {...tailLayout}>
 98 |           <Button type="primary" htmlType="submit">
 99 |             Submit
100 |           </Button>
101 |         </Form.Item>
102 |       </Form>
103 |       <h2>Select:</h2>
104 |       <SelectComp />
105 |       <h2>Slider:</h2>
106 |       <SliderComp />
107 |       <h2>Tab:</h2>
108 |       <TabComp />
109 |       <h2>Picker:</h2>
110 |       <PickerComp />
111 |       <h2>table:</h2>
112 |       <TableComp />
113 |       <h2>table-select:</h2>
114 |       <TableSelectComp />
115 |       <h2>menu:</h2>
116 |       <MenuComp />
117 |       <h2>radio:</h2>
118 |       <RadioComp />
119 |       <h2>Input Search:</h2>
120 |       <InputComp />
121 |       <h2>Tree Select:</h2>
122 |       <TreeComp />
123 |       <h2>New Menu</h2>
124 |       <NewMenuComp />
125 |       <div style={{ marginTop: 60 }}>
126 |         <DynamicAntdTheme
127 |           customCss={customCss}
128 |         />
129 |         <Button onClick={() => changeAntdTheme('green')}>点我变绿颜色</Button>
130 |       </div>
131 |     </div>
132 |   );
133 | }
134 | 
135 | export default App;
136 |

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/components/TreeComp.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { Tree, TreeSelect } from 'antd';
  3 | import {
  4 |   DownOutlined,
  5 |   FrownOutlined,
  6 |   SmileOutlined,
  7 |   MehOutlined,
  8 |   FrownFilled,
  9 | } from '@ant-design/icons';
 10 | 
 11 | const treeData2 = [
 12 |   {
 13 |     title: 'parent 1',
 14 |     key: '0-0',
 15 |     icon: <SmileOutlined />,
 16 |     children: [
 17 |       {
 18 |         title: 'leaf',
 19 |         key: '0-0-0',
 20 |         icon: <MehOutlined />,
 21 |       },
 22 |       {
 23 |         title: 'leaf',
 24 |         key: '0-0-1',
 25 |         icon: ({ selected }: any) => (selected ? <FrownFilled /> : <FrownOutlined />),
 26 |       },
 27 |     ],
 28 |   },
 29 | ];
 30 | 
 31 | const treeData = [
 32 |   {
 33 |     title: 'parent 1',
 34 |     key: '0-0',
 35 |     children: [
 36 |       {
 37 |         title: 'parent 1-0',
 38 |         key: '0-0-0',
 39 |         disabled: true,
 40 |         children: [
 41 |           {
 42 |             title: 'leaf',
 43 |             key: '0-0-0-0',
 44 |             disableCheckbox: true,
 45 |           },
 46 |           {
 47 |             title: 'leaf',
 48 |             key: '0-0-0-1',
 49 |           },
 50 |         ],
 51 |       },
 52 |       {
 53 |         title: 'parent 1-1',
 54 |         key: '0-0-1',
 55 |         children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
 56 |       },
 57 |     ],
 58 |   },
 59 | ];
 60 | 
 61 | const { DirectoryTree } = Tree;
 62 | 
 63 | const dirTreeData = [
 64 |   {
 65 |     title: 'parent 0',
 66 |     key: '0-0',
 67 |     children: [
 68 |       { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
 69 |       { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
 70 |     ],
 71 |   },
 72 |   {
 73 |     title: 'parent 1',
 74 |     key: '0-1',
 75 |     children: [
 76 |       { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
 77 |       { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
 78 |     ],
 79 |   },
 80 | ];
 81 | 
 82 | const { TreeNode } = TreeSelect;
 83 | 
 84 | export default function TreeComp() {
 85 |   const [value, setValue] = useState<any>();
 86 |   const onChange = (value: any) => {
 87 |     console.log(value);
 88 |     setValue(value);
 89 |   };
 90 |   const onSelect = (selectedKeys: React.Key[], info: any) => {
 91 |     console.log('selected', selectedKeys, info);
 92 |   };
 93 | 
 94 |   const onCheck = (checkedKeys: React.Key[], info: any) => {
 95 |     console.log('onCheck', checkedKeys, info);
 96 |   };
 97 | 
 98 |   const onDirSelect = (keys: React.Key[], info: any) => {
 99 |     console.log('Trigger Select', keys, info);
100 |   };
101 | 
102 |   const onExpand = () => {
103 |     console.log('Trigger Expand');
104 |   };
105 | 
106 |   return (
107 |     <>
108 |       <h2>Tree</h2>
109 |       <Tree
110 |         showIcon
111 |         defaultExpandAll
112 |         defaultSelectedKeys={['0-0-0']}
113 |         switcherIcon={<DownOutlined />}
114 |         treeData={treeData2}
115 |       />
116 |       <Tree
117 |         checkable
118 |         defaultExpandedKeys={['0-0-0', '0-0-1']}
119 |         defaultSelectedKeys={['0-0-0', '0-0-1']}
120 |         defaultCheckedKeys={['0-0-0', '0-0-1']}
121 |         onSelect={onSelect}
122 |         // onCheck={onCheck}
123 |         treeData={treeData}
124 |       />
125 |       <h2>TreeSelect</h2>
126 |       <TreeSelect
127 |         showSearch
128 |         style={{ width: '100%' }}
129 |         value={value}
130 |         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
131 |         placeholder="Please select"
132 |         allowClear
133 |         treeDefaultExpandAll
134 |         onChange={onChange}
135 |       >
136 |         <TreeNode value="parent 1" title="parent 1">
137 |           <TreeNode value="parent 1-0" title="parent 1-0">
138 |             <TreeNode value="leaf1" title="my leaf" />
139 |             <TreeNode value="leaf2" title="your leaf" />
140 |           </TreeNode>
141 |           <TreeNode value="parent 1-1" title="parent 1-1">
142 |             <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
143 |           </TreeNode>
144 |         </TreeNode>
145 |       </TreeSelect>
146 |       <h2>DirectoryTree</h2>
147 |       <DirectoryTree
148 |         multiple
149 |         defaultExpandAll
150 |         onSelect={onDirSelect}
151 |         onExpand={onExpand}
152 |         treeData={dirTreeData}
153 |       />
154 |     </>
155 |   )
156 | }

--------------------------------------------------------------------------------
/examples/next-demo/docs/README.md:
--------------------------------------------------------------------------------
  1 | ## 🌍 Browser Support
  2 | 
  3 | | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
  4 | | --- | --- | --- | --- | --- |
  5 | | Chrome 39.0+ ✔ | Edge 12.0+ ✔ | Firefox 30.0+ ✔ | IE 11+ ✔ | Safari 9.1+ ✔ |
  6 | 
  7 | ## 📦 Install
  8 | 
  9 | `npm install dynamic-antd-theme` or `yarn add dynamic-antd-theme`
 10 | 
 11 | 
 12 | ## 🔨 Usage
 13 | 
 14 | The best usage of the dynamic-antd-theme is in the common compnent (Layout/Header etc...) of your application.
 15 | 
 16 | ```
 17 | // Layout.js
 18 | ...
 19 | import DynamicAntdTheme from 'dynamic-antd-theme';
 20 | ...
 21 | 
 22 | <div className='theme-container'>
 23 |   <span>Change antd theme: </span>
 24 |   <DynamicAntdTheme />
 25 | </div>
 26 | 
 27 | ```
 28 | ### More Example
 29 | 
 30 | ```
 31 | 
 32 | <DynamicAntdTheme primaryColor='#77dd66' />
 33 | 
 34 | <DynamicAntdTheme storageName='my-custom-define-color' />
 35 | 
 36 | <DynamicAntdTheme style={{ display: 'margin: 10px' }} />
 37 | 
 38 | function themeChangeCallback (color) {
 39 |   document.getElementById('my-header-bar').style.backgroundColor = color;
 40 | }
 41 | 
 42 | <DynamicAntdTheme themeChangeCallback={this.themeChangeCallback} />
 43 | 
 44 | ```
 45 | 
 46 | ## ✨ Props
 47 | 
 48 | | Props       | Type   | Default                  | Description         |
 49 | | ---------- | ------ | --------------------- | ------------ |
 50 | | primaryColor   | String | #1890d5 |  your antd initial @primary-color      |
 51 | | storageName   | String |   custom-antd-primary-color  | the name that is saved in the localStorage    |
 52 | | style   | Object |  null  | you can custom the component style simply  |
 53 | | placement   | String | bottomRight |  change the color-picker position, `bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`|
 54 | | themeChangeCallback   | Func | null | you can do something use themeColor when themeColor changed. |
 55 | 
 56 | ## 🌞 Export
 57 | | export       | Description         |
 58 | | ---------- | ------------ |
 59 | | default  | The <DynamicAntdTheme /> component   |
 60 | | generateThemeColor   | `param: color`, generate colorObj based on color  |
 61 | | changeAntdTheme   | `param: colorObj`, change the antd theme |
 62 | 
 63 | #### Example
 64 | ```
 65 | import { generateThemeColor, changeAntdTheme } from 'dynamic-antd-theme';
 66 | ...
 67 | 
 68 | <Button
 69 |   onClick={
 70 |     () => {
 71 |       const color = 'blue';
 72 |       changeAntdTheme(
 73 |         generateThemeColor(color);
 74 |       );
 75 |     }
 76 |   }
 77 | >Change Theme</Button>
 78 | ```
 79 | 
 80 | ## ⚠️ Attention
 81 | 
 82 | **This solution is easy to use, so it is prone to problems. We hope you can give us timely feedback. For example, if there is a problem with any component, we will fix the updated version as soon as possible.**
 83 | 
 84 |  - The current version requires your antd version to be lower than v3.19.0
 85 |    
 86 | > The antd version is higher than v3.19.0 you can also use it, if have some problems remember give me an issue. 
 87 | 
 88 |  - ...Plugin versions are updated from time to time based on antd (new antd components are updated)
 89 | 
 90 | ## 🔗 Changelogs
 91 | 
 92 |  - v0.1.3
 93 |     
 94 |     Fix the Slider Component.
 95 |  
 96 |  - v0.1.4
 97 |     
 98 |     Fix repeat insert `<style>` tag.
 99 |   
100 |  - v0.1.5
101 |   
102 |     Add placement props, `bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`. Default is `bottomRight`.
103 |   
104 |  - v0.1.6
105 |   
106 |     Add themeChangeCallback props, you can do something use themeColor when themeColor changed.
107 |   
108 |  - v0.2.0
109 | 
110 |     Fix ant-design table tr background when cursor hovered.
111 |   
112 |  - v0.2.4
113 | 
114 |     Support IE 11+.
115 |   
116 |  - v0.2.6
117 |   
118 |     Fix DatePicker current date color.
119 | 
120 |  - v0.3.0
121 |   
122 |     Export `{ generateThemeColor, changeAntdTheme }` methods to help the developer who don't need react-colorPicker
123 |   
124 |  - v0.3.2
125 |   
126 |     Fix `<Button type='danger' />` bug, when hover the font color is primary-color.
127 |   
128 |  - v0.3.6
129 | 
130 |     Fix DateRangePicker some bugs.
131 | 
132 |  - v0.3.7
133 |   
134 |     Fix`table:hover`in antd^3.20.0+
135 | 
136 |  - v0.3.8
137 | 
138 |     Fix`calender`some bugs.
139 | 
140 |  - v0.3.9
141 | 
142 |     Fix`tree-table-icon`bug.
143 | 
144 | 
145 |

--------------------------------------------------------------------------------
/examples/next-demo/static/antd.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     
 4 |     <title>Group 28 Copy 5</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <linearGradient x1="62.1023273%" y1="0%" x2="108.19718%" y2="37.8635764%" id="linearGradient-1">
 8 |             <stop stop-color="#4285EB" offset="0%"></stop>
 9 |             <stop stop-color="#2EC7FF" offset="100%"></stop>
10 |         </linearGradient>
11 |         <linearGradient x1="69.644116%" y1="0%" x2="54.0428975%" y2="108.456714%" id="linearGradient-2">
12 |             <stop stop-color="#29CDFF" offset="0%"></stop>
13 |             <stop stop-color="#148EFF" offset="37.8600687%"></stop>
14 |             <stop stop-color="#0A60FF" offset="100%"></stop>
15 |         </linearGradient>
16 |         <linearGradient x1="69.6908165%" y1="-12.9743587%" x2="16.7228981%" y2="117.391248%" id="linearGradient-3">
17 |             <stop stop-color="#FA816E" offset="0%"></stop>
18 |             <stop stop-color="#F74A5C" offset="41.472606%"></stop>
19 |             <stop stop-color="#F51D2C" offset="100%"></stop>
20 |         </linearGradient>
21 |         <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-4">
22 |             <stop stop-color="#FA8E7D" offset="0%"></stop>
23 |             <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
24 |             <stop stop-color="#F51D2C" offset="100%"></stop>
25 |         </linearGradient>
26 |     </defs>
27 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
28 |         <g id="logo" transform="translate(-20.000000, -20.000000)">
29 |             <g id="Group-28-Copy-5" transform="translate(20.000000, 20.000000)">
30 |                 <g id="Group-27-Copy-3">
31 |                     <g id="Group-25" fill-rule="nonzero">
32 |                         <g id="2">
33 |                             <path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C99.2571609,26.9692191 101.032305,26.9692191 102.20193,28.1378823 L129.985225,55.8983314 C134.193707,60.1033528 141.017005,60.1033528 145.225487,55.8983314 C149.433969,51.69331 149.433969,44.8756232 145.225487,40.6706018 L108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-1)"></path>
34 |                             <path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C100.999864,25.6271836 105.751642,20.541824 112.729652,19.3524487 C117.915585,18.4685261 123.585219,20.4140239 129.738554,25.1889424 C125.624663,21.0784292 118.571995,14.0340304 108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-2)"></path>
35 |                         </g>
36 |                         <path d="M153.685633,135.854579 C157.894115,140.0596 164.717412,140.0596 168.925894,135.854579 L195.959977,108.842726 C200.659183,104.147384 200.659183,96.5636133 195.960527,91.8688194 L168.690777,64.7181159 C164.472332,60.5180858 157.646868,60.5241425 153.435895,64.7316526 C149.227413,68.936674 149.227413,75.7543607 153.435895,79.9593821 L171.854035,98.3623765 C173.02366,99.5310396 173.02366,101.304724 171.854035,102.473387 L153.685633,120.626849 C149.47715,124.83187 149.47715,131.649557 153.685633,135.854579 Z" id="Shape" fill="url(#linearGradient-3)"></path>
37 |                     </g>
38 |                     <ellipse id="Combined-Shape" fill="url(#linearGradient-4)" cx="100.519339" cy="100.436681" rx="23.6001926" ry="23.580786"></ellipse>
39 |                 </g>
40 |             </g>
41 |         </g>
42 |     </g>
43 | </svg>

--------------------------------------------------------------------------------
/examples/next-demo/components/Layout.js:
--------------------------------------------------------------------------------
  1 | import Router from 'next/router';
  2 | import { Layout, Menu, Button } from 'antd';
  3 | import DyanamicAntdTheme from 'dynamic-antd-theme';
  4 | 
  5 | const AntdComps = [
  6 |   {
  7 |     href: '/Button',
  8 |     title: 'Button 按钮'
  9 |   }, {
 10 |     href: '/Input',
 11 |     title: 'Input 输入框'
 12 |   }, {
 13 |     href: '/Table',
 14 |     title: 'Table 表格'
 15 |   }, {
 16 |     href: '/DatePicker',
 17 |     title: 'DatePicker 日期选择框'
 18 |   }, {
 19 |     href: '/Radio',
 20 |     title: 'Radio 单选框'
 21 |   }, {
 22 |     href: '/Switch',
 23 |     title: 'Switch 开关'
 24 |   }, {
 25 |     href: '/Slider',
 26 |     title: 'Slider 滑动输入条'
 27 |   }, {
 28 |     href: '/Select',
 29 |     title: 'Select 选择器'
 30 |   }, {
 31 |     href: '/TreeSelect',
 32 |     title: 'TreeSelect 树选择器'
 33 |   }, {
 34 |     href: '/Transfer',
 35 |     title: 'Transfer 穿梭框'
 36 |   }, {
 37 |     href: '/TimePicker',
 38 |     title: 'TimePicker 时间选择器'
 39 |   }, {
 40 |     href: '/Calendar',
 41 |     title: 'Calendar 日历'
 42 |   }, {
 43 |     href: '/Tree',
 44 |     title: 'Tree 树形控件'
 45 |   }, {
 46 |     href: '/Timeline',
 47 |     title: 'Timeline 时间轴'
 48 |   }, {
 49 |     href: '/Steps',
 50 |     title: 'Steps 步骤'
 51 |   }
 52 | ];
 53 | 
 54 | const { Item, ItemGroup } = Menu;
 55 | const ButtonGroup = Button.Group;
 56 | const { Header, Content, Footer, Sider } = Layout;
 57 | 
 58 | const layoutStyle = {
 59 |   position: 'absolute',
 60 |   width: '100%',
 61 |   height: '100%'
 62 | }
 63 | const themeStyle = {
 64 |   position: 'absolute',
 65 |   width: '100%',
 66 |   textAlign: 'center',
 67 |   borderTop: '2px solid #f0f2f5',
 68 |   bottom: 10,
 69 |   padding: 10
 70 | }
 71 | const headerStyle = {
 72 |   position:'fixed',
 73 |   width: 'calc(100% - 200px)',
 74 |   padding: 0,
 75 |   background: '#fff', 
 76 |   borderLeft: '1px solid #f0f2f5',
 77 |   zIndex: 9
 78 | }
 79 | const siderStyle = {
 80 |   position: 'fixed',
 81 |   top: 0,
 82 |   bottom: 0,
 83 |   left: 0,
 84 |   paddingBottom: 60,
 85 |   zIndex: 2
 86 | }
 87 | const bodyStyle = {
 88 |   position: 'absolute',
 89 |   width: 'calc(100% - 200px)',
 90 |   left: 200,
 91 | }
 92 | const footerStyle = {
 93 |   position: 'fixed',
 94 |   width: 'calc(100% - 200px)',
 95 |   padding: '20px 40px',
 96 |   bottom: 0,
 97 |   textAlign: 'center',
 98 | }
 99 | 
100 | const theme = 'light';
101 | 
102 | export default ({ children, path }) => (
103 |   <Layout style={layoutStyle}>
104 |     <style jsx>{`
105 |       :global(.ant-layout-sider-zero-width-trigger) {
106 |         top: initial;
107 |         bottom: 0px;
108 |       }
109 |       :global(.ant-layout-sider-children) {
110 |         overflow-y: auto;
111 |       }
112 |       .logo {
113 |         position: fixed;
114 |         width: 200px;
115 |         top: 0;
116 |         display: flex;
117 |         align-items: center;
118 |         height: 64px;
119 |         padding: 0 10px;
120 |         border-bottom: 1px solid #f0f2f5;
121 |         z-index: 9;
122 |         background: #fff;
123 |       }
124 |       .logo h3 {
125 |         margin: 0;
126 |         padding: 0 10px;
127 |       }
128 |     `}</style>
129 |     <div className="logo">
130 |       <img style={{ width: 40 }} src='/static/antd.svg' />
131 |       <h3>AntD V3.25.3</h3>
132 |     </div>
133 |     <Sider
134 |       theme={theme}
135 |       breakpoint="lg"
136 |       collapsedWidth="0"
137 |       onBreakpoint={broken => {
138 |         console.log(broken);
139 |         console.log(path);
140 |       }}
141 |       onCollapse={(collapsed, type) => {
142 |         console.log(collapsed, type);
143 |       }}
144 |       style={siderStyle}
145 |     >
146 |       <div style={{ background: '#fff', height: 64 }} />
147 |       <Menu 
148 |         theme={theme}
149 |         mode="inline"
150 |         defaultSelectedKeys={['/']}
151 |         selectedKeys={[path]}
152 |         onClick={({ key }) => Router.push(key)}
153 |       >
154 |         <ItemGroup key='home' title='基础'>
155 |           <Item key='/'>Dynamic-Antd-Theme</Item>
156 |         </ItemGroup>
157 |         <ItemGroup key='comp' title='组件'>
158 |         {
159 |           AntdComps.map(item => (
160 |             <Item key={item.href}>
161 |               {item.title}
162 |             </Item>
163 |           ))
164 |         }
165 |         </ItemGroup>
166 |       </Menu>
167 |       <DyanamicAntdTheme
168 |         placement={'bottomRight'}
169 |         style={themeStyle}
170 |       />
171 |     </Sider>
172 |     <Layout style={bodyStyle}>
173 |       <Header style={headerStyle}>
174 |         <h1 style={{ textAlign: 'center', fontSize: 30 }}><a>Dynamic-Antd-Theme</a></h1>
175 |       </Header>
176 |       <Content style={{ margin: '80px 16px 0' }}>
177 |         <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
178 |           {children}
179 |         </div>
180 |       </Content>
181 |       <Footer style={footerStyle}>
182 |         <ButtonGroup>
183 |           <Button onClick={() => window.open('https://github.com/luffyZh')} type='primary' ghost>@author luffyZh</Button>
184 |           <Button onClick={() => window.open('https://github.com/luffyZh/dynamic-antd-theme/')} type='primary'>go to star 🌟</Button>
185 |         </ButtonGroup>
186 |       </Footer>
187 |     </Layout>
188 |   </Layout>
189 | )

--------------------------------------------------------------------------------
/examples/react-ts-demo/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       process.env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     if (publicUrl.origin !== window.location.origin) {
 36 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 37 |       // from what our page is served on. This might happen if a CDN is used to
 38 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 39 |       return;
 40 |     }
 41 | 
 42 |     window.addEventListener('load', () => {
 43 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 44 | 
 45 |       if (isLocalhost) {
 46 |         // This is running on localhost. Let's check if a service worker still exists or not.
 47 |         checkValidServiceWorker(swUrl, config);
 48 | 
 49 |         // Add some additional logging to localhost, pointing developers to the
 50 |         // service worker/PWA documentation.
 51 |         navigator.serviceWorker.ready.then(() => {
 52 |           console.log(
 53 |             'This web app is being served cache-first by a service ' +
 54 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 55 |           );
 56 |         });
 57 |       } else {
 58 |         // Is not localhost. Just register service worker
 59 |         registerValidSW(swUrl, config);
 60 |       }
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | function registerValidSW(swUrl: string, config?: Config) {
 66 |   navigator.serviceWorker
 67 |     .register(swUrl)
 68 |     .then(registration => {
 69 |       registration.onupdatefound = () => {
 70 |         const installingWorker = registration.installing;
 71 |         if (installingWorker == null) {
 72 |           return;
 73 |         }
 74 |         installingWorker.onstatechange = () => {
 75 |           if (installingWorker.state === 'installed') {
 76 |             if (navigator.serviceWorker.controller) {
 77 |               // At this point, the updated precached content has been fetched,
 78 |               // but the previous service worker will still serve the older
 79 |               // content until all client tabs are closed.
 80 |               console.log(
 81 |                 'New content is available and will be used when all ' +
 82 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 83 |               );
 84 | 
 85 |               // Execute callback
 86 |               if (config && config.onUpdate) {
 87 |                 config.onUpdate(registration);
 88 |               }
 89 |             } else {
 90 |               // At this point, everything has been precached.
 91 |               // It's the perfect time to display a
 92 |               // "Content is cached for offline use." message.
 93 |               console.log('Content is cached for offline use.');
 94 | 
 95 |               // Execute callback
 96 |               if (config && config.onSuccess) {
 97 |                 config.onSuccess(registration);
 98 |               }
 99 |             }
100 |           }
101 |         };
102 |       };
103 |     })
104 |     .catch(error => {
105 |       console.error('Error during service worker registration:', error);
106 |     });
107 | }
108 | 
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 |   // Check if the service worker can be found. If it can't reload the page.
111 |   fetch(swUrl, {
112 |     headers: { 'Service-Worker': 'script' }
113 |   })
114 |     .then(response => {
115 |       // Ensure service worker exists, and that we really are getting a JS file.
116 |       const contentType = response.headers.get('content-type');
117 |       if (
118 |         response.status === 404 ||
119 |         (contentType != null && contentType.indexOf('javascript') === -1)
120 |       ) {
121 |         // No service worker found. Probably a different app. Reload the page.
122 |         navigator.serviceWorker.ready.then(registration => {
123 |           registration.unregister().then(() => {
124 |             window.location.reload();
125 |           });
126 |         });
127 |       } else {
128 |         // Service worker found. Proceed as normal.
129 |         registerValidSW(swUrl, config);
130 |       }
131 |     })
132 |     .catch(() => {
133 |       console.log(
134 |         'No internet connection found. App is running in offline mode.'
135 |       );
136 |     });
137 | }
138 | 
139 | export function unregister() {
140 |   if ('serviceWorker' in navigator) {
141 |     navigator.serviceWorker.ready
142 |       .then(registration => {
143 |         registration.unregister();
144 |       })
145 |       .catch(error => {
146 |         console.error(error.message);
147 |       });
148 |   }
149 | }
150 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](./dynamic-antd-theme.png)
  2 | 
  3 | [![build-passing](https://img.shields.io/badge/build-passing-brightgreen)](https://dynamic-antd-theme-luffyzh.vercel.app/)
  4 | ![release](https://badgen.net/github/release/luffyZh/dynamic-antd-theme/stable)
  5 | 
  6 | A simple plugin to dynamic change [ant-design](https://ant.design) theme whether less or css. 
  7 | 
  8 | English | [简体中文](./README_zh_CN.md)
  9 | 
 10 | > Ant Design V5 has very convenient's ability to support the dynamic change theme, so the warehouse is no longer maintained, relevant document reference: https://ant.design/docs/react/customize-theme-cn.
 11 | 
 12 | **This project was initially targeted at 'ant-design', that means it's used in the React project. However, the core style was also applicable to 'ant-design-vue' || 'ant-design-angular'. In addition, for the convenience of one-key and auto use, the color-picker was also packaged into the project, resulting in too large a volume of the project. Aiming at this problem, I develope a new minor version —— [mini-dynamic-antd-theme](https://github.com/luffyZh/mini-dynamic-antd-theme).**
 13 | 
 14 | ## 🏠 HomePage
 15 | [Dynamic-Antd-Theme-Demo](https://dynamic-antd-theme.luffyzh.now.sh/)
 16 | 
 17 | ## 🌍 Browser Support
 18 | 
 19 | | ![Chrome](https://imgur.com/3C4iKO0.png) | ![Edge](https://imgur.com/vMcaXaw.png) | ![Firefox](https://imgur.com/ihXsdDO.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_64x64.png) | ![Safari](https://imgur.com/ENbaWUu.png) |
 20 | | --- | --- | --- | --- | --- |
 21 | | Chrome 39.0+ ✔ | Edge 12.0+ ✔ | Firefox 30.0+ ✔ | IE 11+ ✔ | Safari 9.1+ ✔ |
 22 | 
 23 | ## 📦 Install
 24 | 
 25 | `npm install dynamic-antd-theme` or `yarn add dynamic-antd-theme`
 26 | 
 27 | 
 28 | ## 🔨 Usage
 29 | 
 30 | The best usage of the dynamic-antd-theme is in the common compnent (Layout/Header etc...) of your application.
 31 | 
 32 | ```
 33 | // Layout.js
 34 | ...
 35 | import DynamicAntdTheme from 'dynamic-antd-theme';
 36 | ...
 37 | 
 38 | <div className='theme-container'>
 39 |   <span>Change antd theme: </span>
 40 |   <DynamicAntdTheme />
 41 | </div>
 42 | 
 43 | ```
 44 | 
 45 | ## ✨ Props
 46 | 
 47 | | Props       | Type   | Default                  | Description         |
 48 | | ---------- | ------ | --------------------- | ------------ |
 49 | | primaryColor   | String | #1890d5 |  your antd initial @primary-color      |
 50 | | storageName   | String |   custom-antd-primary-color  | the name that is saved in the localStorage    |
 51 | | style   | Object |  null  | you can custom the component style simply  |
 52 | | placement   | String | bottomRight |  change the color-picker position, `bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`|
 53 | | themeChangeCallback   | Func | null | you can do something use themeColor when themeColor changed. |
 54 | | customCss   | String | '' | you can define custom css effect any element. |
 55 | 
 56 | ### How to use the primaryColors in customCss?
 57 | 
 58 | You can do this using the following four variables（just like scss）：
 59 | 
 60 |  - $primary-color
 61 |  - $primary-hover-color
 62 |  - $primary-active-color
 63 |  - $primary-shadow-color
 64 | 
 65 | ```
 66 | const customCss = `
 67 |   .ant-btn {
 68 |     font-family: fantasy;
 69 |   }
 70 |   .custom-title {
 71 |     color: $primary-color;
 72 |   }
 73 |   .custom-title:hover {
 74 |     color: $primary-hover-color;
 75 |     cursor: pointer;
 76 |   }
 77 |   #custom-id {
 78 |     color: $primary-shadow-color;
 79 |   }
 80 | `;
 81 | ```
 82 | 
 83 | ## 🌞 Export
 84 | | export       | Description         |
 85 | | ---------- | ------------ |
 86 | | default  | The <DynamicAntdTheme /> component   |
 87 | | changeAntdTheme   | `param: (color, options)`, change the antd theme. The options specific attributes are as follows： - `storageName`: This can be configured to set storageName when not using picker . - `customCss`: custom Css |
 88 | 
 89 | ## 🌰 More Example
 90 | 
 91 | ### Basic Use
 92 | 
 93 | ```
 94 | 
 95 | <DynamicAntdTheme primaryColor='#77dd66' />
 96 | 
 97 | <DynamicAntdTheme storageName='my-custom-define-color' />
 98 | 
 99 | <DynamicAntdTheme style={{ display: 'margin: 10px' }} />
100 | 
101 | function themeChangeCallback (color) {
102 |   document.getElementById('my-header-bar').style.backgroundColor = color;
103 | }
104 | 
105 | <DynamicAntdTheme themeChangeCallback={this.themeChangeCallback} />
106 | 
107 | ```
108 | 
109 | ### Define Custom CSS
110 | ```
111 | // define custom css
112 | const customCss = `
113 |   .ant-btn {
114 |     font-family: fantasy;
115 |   }
116 |   .custom-title {
117 |     color: $primary-color;
118 |   }
119 |   .custom-title:hover {
120 |     color: $primary-hover-color;
121 |     cursor: pointer;
122 |   }
123 |   #custom-id {
124 |     color: $primary-shadow-color;
125 |   }
126 | `;
127 | 
128 | <DynamicAntdTheme
129 |   customCss={customCss}
130 | />
131 | 
132 | ```
133 | The effects as flow:
134 | 
135 | ![](./custom-css.gif)
136 | 
137 | ### No Color-Picker
138 | 
139 | > If u don't need the `color-picker`，[mini-dynamic-antd-theme](https://github.com/luffyZh/mini-dynamic-antd-theme) is more suitable for you.
140 | 
141 | ```
142 | import { generateThemeColor, changeAntdTheme } from 'dynamic-antd-theme';
143 | ...
144 | 
145 | <Button
146 |   onClick={
147 |     () => {
148 |       const color = 'blue';
149 |       changeAntdTheme(color);
150 |     }
151 |   }
152 | >Change Theme</Button>
153 | ```
154 | 
155 | ## ⚠️ Attention
156 | 
157 | **This solution is easy to use, so it is prone to problems. We hope you can give us timely feedback. For example, if there is a problem with any component, we will fix the updated version as soon as possible.**
158 | 
159 |  - The current version requires your antd version to be lower than v3.19.0
160 |    
161 | > The antd version is higher than v3.19.0 you can also use it, if have some problems remember give me an issue. 
162 | 
163 |  - ...Plugin versions are updated from time to time based on antd (new antd components are updated)
164 | 
165 | ## 🔗 Changelogs
166 | [CHANGELOG](./docs/CHANGELOG.md)
167 | 
168 | ## 🍎 Follow-Up Plan
169 |  
170 |  - More custom type: `border-color`, `border-radius`, etc.
171 | 
172 | > If you're interested in this repository, Fork/PR/Issue all are welcome.
173 | 
174 |

--------------------------------------------------------------------------------
/src/core/util.js:
--------------------------------------------------------------------------------
  1 | import BezierEasing from 'bezier-easing';
  2 | import tinycolor from 'tinycolor2';
  3 | import cssContent from './theme';
  4 | 
  5 | /* basic-easiing */
  6 | const baseEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
  7 | 
  8 | const primaryEasing = baseEasing(0.6);
  9 | const currentEasing = index => baseEasing(index * 0.1);
 10 | 
 11 | /* tinycolor-mix */
 12 | tinycolor.mix = function(color1, color2, amount) {
 13 |   amount = (amount === 0) ? 0 : (amount || 50);
 14 | 
 15 |   var rgb1 = tinycolor(color1).toRgb();
 16 |   var rgb2 = tinycolor(color2).toRgb();
 17 | 
 18 |   var p = amount / 100;
 19 | 
 20 |   var rgba = {
 21 |     r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
 22 |     g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
 23 |     b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
 24 |     a: ((rgb2.a - rgb1.a) * p) + rgb1.a
 25 |   };
 26 |   return tinycolor(rgba);
 27 | };
 28 | 
 29 | function generateHoverColor (color, ratio = 5) {
 30 |   return tinycolor.mix(
 31 |     '#ffffff',
 32 |     color,
 33 |     currentEasing(ratio) * 100 / primaryEasing
 34 |   ).toHexString();
 35 | }
 36 | 
 37 | function generateActiveColor (color, ratio = 7) {
 38 |   return tinycolor.mix(
 39 |     '#333333',
 40 |     color,
 41 |     (1 - (currentEasing(ratio) - primaryEasing) / (1 - primaryEasing)) * 100
 42 |   ).toHexString();
 43 | }
 44 | 
 45 | function generateShadowColor (color, ratio = 9) {
 46 |   return tinycolor.mix(
 47 |     '#ffffff',
 48 |     color,
 49 |     (1 - (currentEasing(ratio) - primaryEasing) / (1 - primaryEasing)) * 100
 50 |   ).toRgbString();
 51 | }
 52 | 
 53 | export function generateThemeColor (color) {
 54 |   return {
 55 |     primaryColor: color,
 56 |     hoverColor: generateHoverColor(color),
 57 |     activeColor: generateActiveColor(color),
 58 |     shadowColor: generateShadowColor(color)
 59 |   };
 60 | }
 61 | 
 62 | // 判断是否是IE系列浏览器
 63 | function IEVersion() {
 64 |   const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串  
 65 |   const isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; // 判断是否IE<11浏览器  
 66 |   const isEdge = userAgent.indexOf("Edge") > -1 && !isIE; // 判断是否IE的Edge浏览器  
 67 |   const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
 68 |   if (isIE) {
 69 |     const reIE = new RegExp("MSIE (\\d+\\.\\d+);");
 70 |     reIE.test(userAgent);
 71 |     const fIEVersion = parseFloat(RegExp["$1"]);
 72 |     if (fIEVersion == 7) {
 73 |       return 7;
 74 |     } else if (fIEVersion == 8) {
 75 |       return 8;
 76 |     } else if (fIEVersion == 9) {
 77 |       return 9;
 78 |     } else if (fIEVersion == 10) {
 79 |       return 10;
 80 |     } else {
 81 |       return 6; // IE版本 <= 7
 82 |     }   
 83 |   } else if (isEdge) {
 84 |     return 'edge'; // edge
 85 |   } else if (isIE11) {
 86 |     return 11; // IE11  
 87 |   } else {
 88 |     return 0; // 不是ie浏览器
 89 |   }
 90 | }
 91 | 
 92 | const generateCustomCss = customCss => {
 93 |   if (typeof customCss !== 'string'
 94 |     || (typeof customCss === 'string' && customCss.trim().length === 0)
 95 |   ) {
 96 |     return '';
 97 |   }
 98 |   customCss = customCss.replace(/\$primary\-color/g, 'var(--primary-color)');
 99 |   customCss = customCss.replace(/\$primary\-hover-color/g, 'var(--primary-hover-color)');
100 |   customCss = customCss.replace(/\$primary\-active-color/g, 'var(--primary-active-color)');
101 |   customCss = customCss.replace(/\$primary\-shadow-color/g, 'var(--primary-shadow-color)');
102 |   return customCss;
103 | }
104 | 
105 | const generateStyleHtml = (colorObj, customCss) => {
106 |   const {
107 |     activeColor,
108 |     primaryColor,
109 |     hoverColor,
110 |     shadowColor
111 |   } = colorObj;
112 |   if (!IEVersion()) {
113 |     const cssVar = `
114 |       :root {
115 |         --primary-color: ${primaryColor};
116 |         --primary-hover-color: ${hoverColor};
117 |         --primary-active-color: ${activeColor};
118 |         --primary-shadow-color: ${shadowColor};
119 |       }
120 |     `;
121 |     return `${cssVar}\n${cssContent}\n${generateCustomCss(customCss)}`;
122 |   }
123 |   let IECSSContent = `${cssContent}${generateCustomCss(customCss)}`;
124 |   IECSSContent = IECSSContent.replace(/var$\-\-primary\-color$/g, primaryColor);
125 |   IECSSContent = IECSSContent.replace(/var$\-\-primary\-hover\-color$/g, hoverColor);
126 |   IECSSContent = IECSSContent.replace(/var$\-\-primary\-active\-color$/g, activeColor);
127 |   IECSSContent = IECSSContent.replace(/var$\-\-primary\-shadow\-color$/g, shadowColor);
128 |   return IECSSContent;
129 | }
130 | 
131 | const defaultOptions = {
132 |   customCss: '',
133 |   storageName: '',
134 | }
135 | 
136 | export function changeAntdTheme (color, options = { ...defaultOptions }) {
137 |   const colorObj = generateThemeColor(color);
138 |   let styleNode = document.getElementById('dynamic_antd_theme_custom_style');
139 |   const { customCss, storageName } = options;
140 |   // deal ssr
141 |   if (typeof window !== 'undefined') {
142 |     // 这种方式就是不使用 picker 组件进行调用，也要存一份
143 |     storageName && window.localStorage.setItem('custom-antd-primary-color', colorObj.primaryColor);
144 |   }
145 |   if (!styleNode) {
146 |     // avoid repeat insertion
147 |     styleNode = document.createElement('style');
148 |     styleNode.id = 'dynamic_antd_theme_custom_style';
149 |     styleNode.innerHTML = generateStyleHtml(colorObj, customCss);
150 |     document.getElementsByTagName('head')[0].appendChild(styleNode);
151 |   } else {
152 |     styleNode.innerHTML = generateStyleHtml(colorObj, customCss);
153 |   }
154 | }
155 | 
156 | export function placementSketchPicker(placement) {
157 |   switch (placement) {
158 |     case 'bottomRight': {
159 |       return {
160 |         marginLeft: '0px'
161 |       };
162 |     }
163 |     case 'bottom': {
164 |       return {
165 |         marginLeft: '-87px'
166 |       };
167 |     }
168 |     case 'bottomLeft': {
169 |       return {
170 |         marginLeft: '-174px'
171 |       };
172 |     }
173 |     case 'right': {
174 |       return {
175 |         marginLeft: '56px',
176 |         marginTop: '-129px'
177 |       };
178 |     }
179 |     case 'topRight': {
180 |       return {
181 |         marginTop: '-342px'
182 |       }
183 |     }
184 |     case 'top': {
185 |       return {
186 |         marginLeft: '-87px',
187 |         marginTop: '-342px'
188 |       }
189 |     }
190 |     case 'topLeft': {
191 |       return {
192 |         marginLeft: '-174px',
193 |         marginTop: '-342px'
194 |       }
195 |     }
196 |     case 'left': {
197 |       return {
198 |         marginLeft: '-230px',
199 |         marginTop: '-129px'
200 |       }
201 |     }
202 |     default:
203 |       return {
204 |         marginLeft: '0px'
205 |       };
206 |   }
207 | }

--------------------------------------------------------------------------------
/README_zh_CN.md:
--------------------------------------------------------------------------------
  1 | ![](./dynamic-antd-theme.png)
  2 | 
  3 | [Ant-Design](https://ant.design) 最简单的动态换肤方案。它是一个通用的解决方案，无论你是使用less还是css。
  4 | 
  5 | [![Deploy Status](https://circleci.com/gh/zeit/now-desktop.svg?style=shield)](https://dynamic-antd-theme.luffyzh.now.sh/)
  6 | 
  7 | > Ant Design V5 已经非常方便的支持了动态换肤的能力，所以本仓库不再进行维护，相关文档参考：https://ant.design/docs/react/customize-theme-cn。
  8 | 
  9 | **此项目起初是针对 `ant-design`，也就是针对 React 项目，不过随着使用发现，其实核心样式对于 `ant-design-vue` 也是适用的，并且为了方便使用，项目进行了一键式封装，将 `color-picker` 也封装到了项目中，导致项目体积过大。针对此问题，开发了一个新的小版本 —— [mini-dynamic-antd-theme](https://github.com/luffyZh/mini-dynamic-antd-theme)，感兴趣的可以去使用。**
 10 | 
 11 | ## 🌍 Browser Support
 12 | 
 13 | | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
 14 | | --- | --- | --- | --- | --- |
 15 | | Chrome 39.0+ ✔ | Edge 12.0+ ✔ | Firefox 30.0+ ✔ | IE 11+ ✔ | Safari 9.1+ ✔ |
 16 | 
 17 | ## 📦 安装
 18 | 
 19 | `npm install dynamic-antd-theme` 或 `yarn add dynamic-antd-theme`
 20 | 
 21 | 
 22 | ## 🔨 如何使用
 23 | 
 24 | 最好的方式是将组件安装在公用组件里，这样任何页面都可以使用，进行替换。
 25 | 
 26 | 例如：Layout组件和Header组件。
 27 | 
 28 | > 不是说每个页面都需要进行替换，只需要替换一次即可进行整个项目的替换。
 29 | 
 30 | ```
 31 | // Layout.js
 32 | ...
 33 | import DynamicAntdTheme from 'dynamic-antd-theme';
 34 | ...
 35 | 
 36 | <div className='theme-container'>
 37 |   <span>Change antd theme: </span>
 38 |   <DynamicAntdTheme />
 39 | </div>
 40 | 
 41 | ```
 42 | ### 更多示例
 43 | 
 44 | ```
 45 | 
 46 | <DynamicAntdTheme primaryColor='#77dd66' />
 47 | 
 48 | <DynamicAntdTheme storageName='my-custom-define-color' />
 49 | 
 50 | <DynamicAntdTheme style={{ display: 'margin: 10px' }} />
 51 | 
 52 | function themeChangeCallback (color) {
 53 |   document.getElementById('my-header-bar').style.backgroundColor = color;
 54 | }
 55 | 
 56 | <DynamicAntdTheme themeChangeCallback={this.themeChangeCallback} />
 57 | 
 58 | ```
 59 | 
 60 | ## ✨ 属性
 61 | 
 62 | | 属性       | 类型  |  默认值                  | 描述         |
 63 | | ---------- | ------ | --------------------- | ------------ |
 64 | | primaryColor   | String | #1890d5 |  你当前项目用到的@primary-color，默认是antd官方的      |
 65 | | storageName   | String |   custom-antd-primary-color  | 缓存在本地localStorage里面的变量名    |
 66 | | style   | Object |  { display: 'inline-block' }  | 可以简单的对组件进行样式设置  |
 67 | | placement   | String | bottomRight |  改变color-picker的显示位置，有如下值可设置：`bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`。|
 68 | | themeChangeCallback   | Func | null | 你可以在主题颜色变化的同时传入一个你想修改的自定义callback，用来修改你自己的与主题相关的样式，如Header/Sider这种antd不附带主题色的场景 |
 69 | | customCss   | String | '' | 自定义 CSS 并且使用主题色到各种元素上 |
 70 | 
 71 | ### 如何在 customCss 里使用自定义的主题色系?
 72 | 
 73 | 可以在 CSS 字符串里使用如下四个变量（熟悉 scss 的应该都清楚）：
 74 | 
 75 |  - $primary-color
 76 |  - $primary-hover-color
 77 |  - $primary-active-color
 78 |  - $primary-shadow-color
 79 | 
 80 | ```
 81 | const customCss = `
 82 |   .ant-btn {
 83 |     font-family: fantasy;
 84 |   }
 85 |   .custom-title {
 86 |     color: $primary-color;
 87 |   }
 88 |   .custom-title:hover {
 89 |     color: $primary-hover-color;
 90 |     cursor: pointer;
 91 |   }
 92 |   #custom-id {
 93 |     color: $primary-shadow-color;
 94 |   }
 95 | `;
 96 | ```
 97 | 
 98 | ## 🌞 方法
 99 | | export       | Description         |
100 | | ---------- | ------------ |
101 | | default  | 默认引入的是 <DynamicAntdTheme /> 组件 |
102 | | changeAntdTheme   | `param: (colorObj, options = { customCss: '', storageName: '' })`, 修改 Antd 的主题。 `options`参数有以下两个属性可以进行配置 . - `customCss`: 自定义的CSS样式， `storageName`: 如果没有使用 Picker 组件，可以通过这里进行 strogeName 的配置。 |
103 | 
104 | ## 🌰 更多例子
105 | 
106 | ### 基础用法
107 | 
108 | ```
109 | 
110 | <DynamicAntdTheme primaryColor='#77dd66' />
111 | 
112 | <DynamicAntdTheme storageName='my-custom-define-color' />
113 | 
114 | <DynamicAntdTheme style={{ display: 'margin: 10px' }} />
115 | 
116 | function themeChangeCallback (color) {
117 |   document.getElementById('my-header-bar').style.backgroundColor = color;
118 | }
119 | 
120 | <DynamicAntdTheme themeChangeCallback={this.themeChangeCallback} />
121 | 
122 | ```
123 | 
124 | ### 自定义 CSS
125 | 
126 | ```
127 | // define custom css
128 | const customCss = `
129 |   .ant-btn {
130 |     font-family: fantasy;
131 |   }
132 |   .custom-title {
133 |     color: $primary-color;
134 |   }
135 |   .custom-title:hover {
136 |     color: $primary-hover-color;
137 |     cursor: pointer;
138 |   }
139 |   #custom-id {
140 |     color: $primary-shadow-color;
141 |   }
142 | `;
143 | 
144 | <DynamicAntdTheme
145 |   customCss={customCss}
146 | />
147 | 
148 | ```
149 | The effects as flow:
150 | 
151 | ![](./custom-css.gif)
152 | 
153 | ### 不使用 `color-picker`
154 | 
155 | > If u don't need the `color-picker`，[mini-dynamic-antd-theme](https://github.com/luffyZh/mini-dynamic-antd-theme) is more suitable for you.
156 | 
157 | ```
158 | import { changeAntdTheme } from 'dynamic-antd-theme';
159 | ...
160 | 
161 | <Button
162 |   onClick={
163 |     () => {
164 |       const color = 'blue';
165 |       changeAntdTheme(color);
166 |     }
167 |   }
168 | >Change Theme</Button>
169 | 
170 | ## ⚠️ 注意
171 | 
172 | **该方案因为简易使用，所以容易出现问题，出现问题希望大家及时反馈，比如什么组件有问题，一定尽快修复更新版本。**
173 | 
174 |  - 目前版本要求你的antd版本低于v3.19.0
175 | 
176 | > 版本高于v3.19.0也可以使用，如果出现问题，记得提issue，会立刻解决
177 | 
178 |  - ...插件版本会根据antd不定时更新（一般antd出新组件会进行更新）
179 | 
180 | ## 🔗 更新记录
181 | 
182 |   - v0.1.3
183 |     
184 |     修复Slider组件的显示问题。
185 |    
186 |   - v0.1.4
187 |     
188 |     避免重复插入`<style>`标签的问题
189 | 
190 |   - v0.1.5
191 |   
192 |     增加`placement`属性，该属性可设置如下值：`bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`， 默认值是`bottomRight`。
193 | 
194 |   - v0.1.6
195 |   
196 |     增加 `themeChangeCallback` 属性, 你可以传入一个回调函数(参数是修改后的主题色)，当主题色变化的时候使用主题色做一些事。
197 |   
198 |   - v0.2.0
199 | 
200 |     修复ant-design的Table组件，鼠标hover的时候背景色没跟随主题变化
201 | 
202 |   - v0.2.4
203 |   
204 |     支持IE 11+
205 | 
206 |   - v0.2.6
207 | 
208 |     修复了日期选择控件`<DatePicker />`的当前日期颜色问题。
209 | 
210 |   - v0.3.0
211 |   
212 |     增加了两个方法`{ generateThemeColor, changeAntdTheme }`，为了那些不需要类似颜色选择器这种组件的开发者，开发者可以根据自己的需求来进行颜色的改变。
213 |   
214 |   - v0.3.2
215 |   
216 |     修复了`<Button type='danger' />`的bug, 这个bug导致当鼠标hover到`type='danger'`的按钮时，文字颜色会变成主题色，而不是白色.
217 | 
218 |   - v0.3.6
219 | 
220 |     修复了`DateRangePicker`的一些bug。
221 | 
222 |   - v0.3.7
223 | 
224 |     修复了`table:hover`在antd@^3.20.0版本的样式不匹配问题
225 | 
226 |   - v0.3.8
227 | 
228 |     修复了`calender`组件的一些bug。
229 | 
230 |   - v0.3.9
231 | 
232 |     修复了树状表格icon颜色不匹配的问题。
233 | 
234 |   - v0.4.0
235 | 
236 |     增加 `/examples` 文件夹方便用户使用以及查看效果和寻找bug。
237 | 
238 |   - v0.5.0
239 | 
240 |     增加 `index.d.ts` 对 Typescript 的支持，现在正常引入组件不会报错。
241 |   
242 |   - v0.6.0
243 | 
244 |     增加了 `customCss` 属性，方便用户自定义任何样式相关的 CSS，以及应主题色到任何元素上（不一定必须是 antd-组件）。
245 |   
246 |   - v0.7.0
247 | 
248 |     `changeAntdTheme` 里面新增了参数对象 `options`.
249 | 
250 |   - v0.8.0
251 | 
252 |     移除了 `generateThemeColor`，现在 `changeAntdTheme` 第一个参数传入一个原始的主题色 color 即可。
253 | 
254 | ## 🍎 后续计划
255 |  
256 |  - 增加更多的设置类型，更精细化，比如 `border-color`、`border-radius` 等。
257 | 
258 | > 如果你对这个仓库感兴趣，Fork/PR/Issue都是欢迎的。

--------------------------------------------------------------------------------
/examples/next-demo/README.md:
--------------------------------------------------------------------------------
  1 | This project was bootstrapped with [Create Next App](https://github.com/segmentio/create-next-app).
  2 | 
  3 | Find the most recent version of this guide at [here](https://github.com/segmentio/create-next-app/blob/master/lib/templates/default/README.md). And check out [Next.js repo](https://github.com/zeit/next.js) for the most up-to-date info.
  4 | 
  5 | ## Table of Contents
  6 | 
  7 | - [Questions? Feedback?](#questions-feedback)
  8 | - [Folder Structure](#folder-structure)
  9 | - [Available Scripts](#available-scripts)
 10 |   - [npm run dev](#npm-run-dev)
 11 |   - [npm run build](#npm-run-build)
 12 |   - [npm run start](#npm-run-start)
 13 | - [Using CSS](#using-css)
 14 | - [Adding Components](#adding-components)
 15 | - [Fetching Data](#fetching-data)
 16 | - [Custom Server](#custom-server)
 17 | - [Syntax Highlighting](#syntax-highlighting)
 18 | - [Using the `static` Folder](#using-the-static-folder)
 19 | - [Deploy to Now](#deploy-to-now)
 20 | - [Something Missing?](#something-missing)
 21 | 
 22 | ## Questions? Feedback?
 23 | 
 24 | Check out [Next.js FAQ & docs](https://github.com/zeit/next.js#faq) or [let us know](https://github.com/segmentio/create-next-app/issues) your feedback.
 25 | 
 26 | ## Folder Structure
 27 | 
 28 | After creating an app, it should look something like:
 29 | 
 30 | ```
 31 | .
 32 | ├── README.md
 33 | ├── components
 34 | │   ├── head.js
 35 | │   └── nav.js
 36 | ├── next.config.js
 37 | ├── node_modules
 38 | │   ├── [...]
 39 | ├── package.json
 40 | ├── pages
 41 | │   └── index.js
 42 | ├── static
 43 | │   └── favicon.ico
 44 | └── yarn.lock
 45 | ```
 46 | 
 47 | Routing in Next.js is based on the file system, so `./pages/index.js` maps to the `/` route and
 48 | `./pages/about.js` would map to `/about`.
 49 | 
 50 | The `./static` directory maps to `/static` in the `next` server, so you can put all your
 51 | other static resources like images or compiled CSS in there.
 52 | 
 53 | Out of the box, we get:
 54 | 
 55 | - Automatic transpilation and bundling (with webpack and babel)
 56 | - Hot code reloading
 57 | - Server rendering and indexing of `./pages`
 58 | - Static file serving. `./static/` is mapped to `/static/`
 59 | 
 60 | Read more about [Next's Routing](https://github.com/zeit/next.js#routing)
 61 | 
 62 | ## Available Scripts
 63 | 
 64 | In the project directory, you can run:
 65 | 
 66 | ### `npm run dev`
 67 | 
 68 | Runs the app in the development mode.<br>
 69 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 70 | 
 71 | The page will reload if you make edits.<br>
 72 | You will also see any errors in the console.
 73 | 
 74 | ### `npm run build`
 75 | 
 76 | Builds the app for production to the `.next` folder.<br>
 77 | It correctly bundles React in production mode and optimizes the build for the best performance.
 78 | 
 79 | ### `npm run start`
 80 | 
 81 | Starts the application in production mode.
 82 | The application should be compiled with \`next build\` first.
 83 | 
 84 | See the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.
 85 | 
 86 | ## Using CSS
 87 | 
 88 | [`styled-jsx`](https://github.com/zeit/styled-jsx) is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
 89 | 
 90 | ```jsx
 91 | export default () => (
 92 |   <div>
 93 |     Hello world
 94 |     <p>scoped!</p>
 95 |     <style jsx>{`
 96 |       p {
 97 |         color: blue;
 98 |       }
 99 |       div {
100 |         background: red;
101 |       }
102 |       @media (max-width: 600px) {
103 |         div {
104 |           background: blue;
105 |         }
106 |       }
107 |     `}</style>
108 |   </div>
109 | )
110 | ```
111 | 
112 | Read more about [Next's CSS features](https://github.com/zeit/next.js#css).
113 | 
114 | ## Adding Components
115 | 
116 | We recommend keeping React components in `./components` and they should look like:
117 | 
118 | ### `./components/simple.js`
119 | 
120 | ```jsx
121 | const Simple = () => <div>Simple Component</div>
122 | 
123 | export default Simple // don't forget to export default!
124 | ```
125 | 
126 | ### `./components/complex.js`
127 | 
128 | ```jsx
129 | import { Component } from 'react'
130 | 
131 | class Complex extends Component {
132 |   state = {
133 |     text: 'World'
134 |   }
135 | 
136 |   render() {
137 |     const { text } = this.state
138 |     return <div>Hello {text}</div>
139 |   }
140 | }
141 | 
142 | export default Complex // don't forget to export default!
143 | ```
144 | 
145 | ## Fetching Data
146 | 
147 | You can fetch data in `pages` components using `getInitialProps` like this:
148 | 
149 | ### `./pages/stars.js`
150 | 
151 | ```jsx
152 | const Page = props => <div>Next stars: {props.stars}</div>
153 | 
154 | Page.getInitialProps = async ({ req }) => {
155 |   const res = await fetch('https://api.github.com/repos/zeit/next.js')
156 |   const json = await res.json()
157 |   const stars = json.stargazers_count
158 |   return { stars }
159 | }
160 | 
161 | export default Page
162 | ```
163 | 
164 | For the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the `Link` component or using the routing APIs.
165 | 
166 | _Note: `getInitialProps` can **not** be used in children components. Only in `pages`._
167 | 
168 | Read more about [fetching data and the component lifecycle](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle)
169 | 
170 | ## Custom Server
171 | 
172 | Want to start a new app with a custom server? Run `create-next-app --example customer-server custom-app`
173 | 
174 | Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc
175 | 
176 | This example makes `/a` resolve to `./pages/b`, and `/b` resolve to `./pages/a`:
177 | 
178 | ```jsx
179 | const { createServer } = require('http')
180 | const { parse } = require('url')
181 | const next = require('next')
182 | 
183 | const dev = process.env.NODE_ENV !== 'production'
184 | const app = next({ dev })
185 | const handle = app.getRequestHandler()
186 | 
187 | app.prepare().then(() => {
188 |   createServer((req, res) => {
189 |     // Be sure to pass `true` as the second argument to `url.parse`.
190 |     // This tells it to parse the query portion of the URL.
191 |     const parsedUrl = parse(req.url, true)
192 |     const { pathname, query } = parsedUrl
193 | 
194 |     if (pathname === '/a') {
195 |       app.render(req, res, '/b', query)
196 |     } else if (pathname === '/b') {
197 |       app.render(req, res, '/a', query)
198 |     } else {
199 |       handle(req, res, parsedUrl)
200 |     }
201 |   }).listen(3000, err => {
202 |     if (err) throw err
203 |     console.log('> Ready on http://localhost:3000')
204 |   })
205 | })
206 | ```
207 | 
208 | Then, change your `start` script to `NODE_ENV=production node server.js`.
209 | 
210 | Read more about [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing)
211 | 
212 | ## Syntax Highlighting
213 | 
214 | To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.
215 | 
216 | ## Deploy to Now
217 | 
218 | [now](https://zeit.co/now) offers a zero-configuration single-command deployment.
219 | 
220 | 1.  Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`.
221 | 
222 | 2.  Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
223 | 
224 |     ```
225 |     > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
226 |     ```
227 | 
228 |     Paste that URL into your browser when the build is complete, and you will see your deployed app.
229 | 
230 | You can find more details about [`now` here](https://zeit.co/now).
231 | 
232 | ## Something Missing?
233 | 
234 | If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/segmentio/create-next-app/issues) or [contribute some!](https://github.com/segmentio/create-next-app/edit/master/lib/templates/default/README.md)
235 |

--------------------------------------------------------------------------------
/examples/next-demo/static/markdown.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: octicons-link;
  3 |   src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
  4 | }
  5 | 
  6 | .markdown-body .octicon {
  7 |   display: inline-block;
  8 |   fill: currentColor;
  9 |   vertical-align: text-bottom;
 10 | }
 11 | 
 12 | .markdown-body .anchor {
 13 |   float: left;
 14 |   line-height: 1;
 15 |   margin-left: -20px;
 16 |   padding-right: 4px;
 17 | }
 18 | 
 19 | .markdown-body .anchor:focus {
 20 |   outline: none;
 21 | }
 22 | 
 23 | .markdown-body h1 .octicon-link,
 24 | .markdown-body h2 .octicon-link,
 25 | .markdown-body h3 .octicon-link,
 26 | .markdown-body h4 .octicon-link,
 27 | .markdown-body h5 .octicon-link,
 28 | .markdown-body h6 .octicon-link {
 29 |   color: #1b1f23;
 30 |   vertical-align: middle;
 31 |   visibility: hidden;
 32 | }
 33 | 
 34 | .markdown-body h1:hover .anchor,
 35 | .markdown-body h2:hover .anchor,
 36 | .markdown-body h3:hover .anchor,
 37 | .markdown-body h4:hover .anchor,
 38 | .markdown-body h5:hover .anchor,
 39 | .markdown-body h6:hover .anchor {
 40 |   text-decoration: none;
 41 | }
 42 | 
 43 | .markdown-body h1:hover .anchor .octicon-link,
 44 | .markdown-body h2:hover .anchor .octicon-link,
 45 | .markdown-body h3:hover .anchor .octicon-link,
 46 | .markdown-body h4:hover .anchor .octicon-link,
 47 | .markdown-body h5:hover .anchor .octicon-link,
 48 | .markdown-body h6:hover .anchor .octicon-link {
 49 |   visibility: visible;
 50 | }
 51 | 
 52 | .markdown-body {
 53 |   -ms-text-size-adjust: 100%;
 54 |   -webkit-text-size-adjust: 100%;
 55 |   color: #24292e;
 56 |   line-height: 1.5;
 57 |   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
 58 |   font-size: 16px;
 59 |   line-height: 1.5;
 60 |   word-wrap: break-word;
 61 | }
 62 | 
 63 | .markdown-body .pl-c {
 64 |   color: #6a737d;
 65 | }
 66 | 
 67 | .markdown-body .pl-c1,
 68 | .markdown-body .pl-s .pl-v {
 69 |   color: #005cc5;
 70 | }
 71 | 
 72 | .markdown-body .pl-e,
 73 | .markdown-body .pl-en {
 74 |   color: #6f42c1;
 75 | }
 76 | 
 77 | .markdown-body .pl-s .pl-s1,
 78 | .markdown-body .pl-smi {
 79 |   color: #24292e;
 80 | }
 81 | 
 82 | .markdown-body .pl-ent {
 83 |   color: #22863a;
 84 | }
 85 | 
 86 | .markdown-body .pl-k {
 87 |   color: #d73a49;
 88 | }
 89 | 
 90 | .markdown-body .pl-pds,
 91 | .markdown-body .pl-s,
 92 | .markdown-body .pl-s .pl-pse .pl-s1,
 93 | .markdown-body .pl-sr,
 94 | .markdown-body .pl-sr .pl-cce,
 95 | .markdown-body .pl-sr .pl-sra,
 96 | .markdown-body .pl-sr .pl-sre {
 97 |   color: #032f62;
 98 | }
 99 | 
100 | .markdown-body .pl-smw,
101 | .markdown-body .pl-v {
102 |   color: #e36209;
103 | }
104 | 
105 | .markdown-body .pl-bu {
106 |   color: #b31d28;
107 | }
108 | 
109 | .markdown-body .pl-ii {
110 |   background-color: #b31d28;
111 |   color: #fafbfc;
112 | }
113 | 
114 | .markdown-body .pl-c2 {
115 |   background-color: #d73a49;
116 |   color: #fafbfc;
117 | }
118 | 
119 | .markdown-body .pl-c2:before {
120 |   content: "^M";
121 | }
122 | 
123 | .markdown-body .pl-sr .pl-cce {
124 |   color: #22863a;
125 |   font-weight: 700;
126 | }
127 | 
128 | .markdown-body .pl-ml {
129 |   color: #735c0f;
130 | }
131 | 
132 | .markdown-body .pl-mh,
133 | .markdown-body .pl-mh .pl-en,
134 | .markdown-body .pl-ms {
135 |   color: #005cc5;
136 |   font-weight: 700;
137 | }
138 | 
139 | .markdown-body .pl-mi {
140 |   color: #24292e;
141 |   font-style: italic;
142 | }
143 | 
144 | .markdown-body .pl-mb {
145 |   color: #24292e;
146 |   font-weight: 700;
147 | }
148 | 
149 | .markdown-body .pl-md {
150 |   background-color: #ffeef0;
151 |   color: #b31d28;
152 | }
153 | 
154 | .markdown-body .pl-mi1 {
155 |   background-color: #f0fff4;
156 |   color: #22863a;
157 | }
158 | 
159 | .markdown-body .pl-mc {
160 |   background-color: #ffebda;
161 |   color: #e36209;
162 | }
163 | 
164 | .markdown-body .pl-mi2 {
165 |   background-color: #005cc5;
166 |   color: #f6f8fa;
167 | }
168 | 
169 | .markdown-body .pl-mdr {
170 |   color: #6f42c1;
171 |   font-weight: 700;
172 | }
173 | 
174 | .markdown-body .pl-ba {
175 |   color: #586069;
176 | }
177 | 
178 | .markdown-body .pl-sg {
179 |   color: #959da5;
180 | }
181 | 
182 | .markdown-body .pl-corl {
183 |   color: #032f62;
184 |   text-decoration: underline;
185 | }
186 | 
187 | .markdown-body details {
188 |   display: block;
189 | }
190 | 
191 | .markdown-body summary {
192 |   display: list-item;
193 | }
194 | 
195 | .markdown-body a {
196 |   background-color: transparent;
197 | }
198 | 
199 | .markdown-body a:active,
200 | .markdown-body a:hover {
201 |   outline-width: 0;
202 | }
203 | 
204 | .markdown-body strong {
205 |   font-weight: inherit;
206 |   font-weight: bolder;
207 | }
208 | 
209 | .markdown-body h1 {
210 |   font-size: 2em;
211 |   margin: .67em 0;
212 | }
213 | 
214 | .markdown-body img {
215 |   border-style: none;
216 | }
217 | 
218 | .markdown-body code,
219 | .markdown-body kbd,
220 | .markdown-body pre {
221 |   font-family: monospace,monospace;
222 |   font-size: 1em;
223 | }
224 | 
225 | .markdown-body hr {
226 |   box-sizing: content-box;
227 |   height: 0;
228 |   overflow: visible;
229 | }
230 | 
231 | .markdown-body input {
232 |   font: inherit;
233 |   margin: 0;
234 | }
235 | 
236 | .markdown-body input {
237 |   overflow: visible;
238 | }
239 | 
240 | .markdown-body [type=checkbox] {
241 |   box-sizing: border-box;
242 |   padding: 0;
243 | }
244 | 
245 | .markdown-body * {
246 |   box-sizing: border-box;
247 | }
248 | 
249 | .markdown-body input {
250 |   font-family: inherit;
251 |   font-size: inherit;
252 |   line-height: inherit;
253 | }
254 | 
255 | .markdown-body a {
256 |   color: #0366d6;
257 |   text-decoration: none;
258 | }
259 | 
260 | .markdown-body a:hover {
261 |   text-decoration: underline;
262 | }
263 | 
264 | .markdown-body strong {
265 |   font-weight: 600;
266 | }
267 | 
268 | .markdown-body hr {
269 |   background: transparent;
270 |   border: 0;
271 |   border-bottom: 1px solid #dfe2e5;
272 |   height: 0;
273 |   margin: 15px 0;
274 |   overflow: hidden;
275 | }
276 | 
277 | .markdown-body hr:before {
278 |   content: "";
279 |   display: table;
280 | }
281 | 
282 | .markdown-body hr:after {
283 |   clear: both;
284 |   content: "";
285 |   display: table;
286 | }
287 | 
288 | .markdown-body table {
289 |   border-collapse: collapse;
290 |   border-spacing: 0;
291 | }
292 | 
293 | .markdown-body td,
294 | .markdown-body th {
295 |   padding: 0;
296 | }
297 | 
298 | .markdown-body details summary {
299 |   cursor: pointer;
300 | }
301 | 
302 | .markdown-body h1,
303 | .markdown-body h2,
304 | .markdown-body h3,
305 | .markdown-body h4,
306 | .markdown-body h5,
307 | .markdown-body h6 {
308 |   margin-bottom: 0;
309 |   margin-top: 0;
310 | }
311 | 
312 | .markdown-body h1 {
313 |   font-size: 32px;
314 | }
315 | 
316 | .markdown-body h1,
317 | .markdown-body h2 {
318 |   font-weight: 600;
319 | }
320 | 
321 | .markdown-body h2 {
322 |   font-size: 24px;
323 | }
324 | 
325 | .markdown-body h3 {
326 |   font-size: 20px;
327 | }
328 | 
329 | .markdown-body h3,
330 | .markdown-body h4 {
331 |   font-weight: 600;
332 | }
333 | 
334 | .markdown-body h4 {
335 |   font-size: 16px;
336 | }
337 | 
338 | .markdown-body h5 {
339 |   font-size: 14px;
340 | }
341 | 
342 | .markdown-body h5,
343 | .markdown-body h6 {
344 |   font-weight: 600;
345 | }
346 | 
347 | .markdown-body h6 {
348 |   font-size: 12px;
349 | }
350 | 
351 | .markdown-body p {
352 |   margin-bottom: 10px;
353 |   margin-top: 0;
354 | }
355 | 
356 | .markdown-body blockquote {
357 |   margin: 0;
358 | }
359 | 
360 | .markdown-body ol,
361 | .markdown-body ul {
362 |   margin-bottom: 0;
363 |   margin-top: 0;
364 |   padding-left: 0;
365 | }
366 | 
367 | .markdown-body ol ol,
368 | .markdown-body ul ol {
369 |   list-style-type: lower-roman;
370 | }
371 | 
372 | .markdown-body ol ol ol,
373 | .markdown-body ol ul ol,
374 | .markdown-body ul ol ol,
375 | .markdown-body ul ul ol {
376 |   list-style-type: lower-alpha;
377 | }
378 | 
379 | .markdown-body dd {
380 |   margin-left: 0;
381 | }
382 | 
383 | .markdown-body code,
384 | .markdown-body pre {
385 |   font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
386 |   font-size: 12px;
387 | }
388 | 
389 | .markdown-body pre {
390 |   margin-bottom: 0;
391 |   margin-top: 0;
392 | }
393 | 
394 | .markdown-body input::-webkit-inner-spin-button,
395 | .markdown-body input::-webkit-outer-spin-button {
396 |   -webkit-appearance: none;
397 |   appearance: none;
398 |   margin: 0;
399 | }
400 | 
401 | .markdown-body .border {
402 |   border: 1px solid #e1e4e8!important;
403 | }
404 | 
405 | .markdown-body .border-0 {
406 |   border: 0!important;
407 | }
408 | 
409 | .markdown-body .border-bottom {
410 |   border-bottom: 1px solid #e1e4e8!important;
411 | }
412 | 
413 | .markdown-body .rounded-1 {
414 |   border-radius: 3px!important;
415 | }
416 | 
417 | .markdown-body .bg-white {
418 |   background-color: #fff!important;
419 | }
420 | 
421 | .markdown-body .bg-gray-light {
422 |   background-color: #fafbfc!important;
423 | }
424 | 
425 | .markdown-body .text-gray-light {
426 |   color: #6a737d!important;
427 | }
428 | 
429 | .markdown-body .mb-0 {
430 |   margin-bottom: 0!important;
431 | }
432 | 
433 | .markdown-body .my-2 {
434 |   margin-bottom: 8px!important;
435 |   margin-top: 8px!important;
436 | }
437 | 
438 | .markdown-body .pl-0 {
439 |   padding-left: 0!important;
440 | }
441 | 
442 | .markdown-body .py-0 {
443 |   padding-bottom: 0!important;
444 |   padding-top: 0!important;
445 | }
446 | 
447 | .markdown-body .pl-1 {
448 |   padding-left: 4px!important;
449 | }
450 | 
451 | .markdown-body .pl-2 {
452 |   padding-left: 8px!important;
453 | }
454 | 
455 | .markdown-body .py-2 {
456 |   padding-bottom: 8px!important;
457 |   padding-top: 8px!important;
458 | }
459 | 
460 | .markdown-body .pl-3,
461 | .markdown-body .px-3 {
462 |   padding-left: 16px!important;
463 | }
464 | 
465 | .markdown-body .px-3 {
466 |   padding-right: 16px!important;
467 | }
468 | 
469 | .markdown-body .pl-4 {
470 |   padding-left: 24px!important;
471 | }
472 | 
473 | .markdown-body .pl-5 {
474 |   padding-left: 32px!important;
475 | }
476 | 
477 | .markdown-body .pl-6 {
478 |   padding-left: 40px!important;
479 | }
480 | 
481 | .markdown-body .f6 {
482 |   font-size: 12px!important;
483 | }
484 | 
485 | .markdown-body .lh-condensed {
486 |   line-height: 1.25!important;
487 | }
488 | 
489 | .markdown-body .text-bold {
490 |   font-weight: 600!important;
491 | }
492 | 
493 | .markdown-body:before {
494 |   content: "";
495 |   display: table;
496 | }
497 | 
498 | .markdown-body:after {
499 |   clear: both;
500 |   content: "";
501 |   display: table;
502 | }
503 | 
504 | .markdown-body>:first-child {
505 |   margin-top: 0!important;
506 | }
507 | 
508 | .markdown-body>:last-child {
509 |   margin-bottom: 0!important;
510 | }
511 | 
512 | .markdown-body a:not([href]) {
513 |   color: inherit;
514 |   text-decoration: none;
515 | }
516 | 
517 | .markdown-body blockquote,
518 | .markdown-body dl,
519 | .markdown-body ol,
520 | .markdown-body p,
521 | .markdown-body pre,
522 | .markdown-body table,
523 | .markdown-body ul {
524 |   margin-bottom: 16px;
525 |   margin-top: 0;
526 | }
527 | 
528 | .markdown-body hr {
529 |   background-color: #e1e4e8;
530 |   border: 0;
531 |   height: .25em;
532 |   margin: 24px 0;
533 |   padding: 0;
534 | }
535 | 
536 | .markdown-body blockquote {
537 |   border-left: .25em solid #dfe2e5;
538 |   color: #6a737d;
539 |   padding: 0 1em;
540 | }
541 | 
542 | .markdown-body blockquote>:first-child {
543 |   margin-top: 0;
544 | }
545 | 
546 | .markdown-body blockquote>:last-child {
547 |   margin-bottom: 0;
548 | }
549 | 
550 | .markdown-body kbd {
551 |   background-color: #fafbfc;
552 |   border: 1px solid #c6cbd1;
553 |   border-bottom-color: #959da5;
554 |   border-radius: 3px;
555 |   box-shadow: inset 0 -1px 0 #959da5;
556 |   color: #444d56;
557 |   display: inline-block;
558 |   font-size: 11px;
559 |   line-height: 10px;
560 |   padding: 3px 5px;
561 |   vertical-align: middle;
562 | }
563 | 
564 | .markdown-body h1,
565 | .markdown-body h2,
566 | .markdown-body h3,
567 | .markdown-body h4,
568 | .markdown-body h5,
569 | .markdown-body h6 {
570 |   font-weight: 600;
571 |   line-height: 1.25;
572 |   margin-bottom: 16px;
573 |   margin-top: 24px;
574 | }
575 | 
576 | .markdown-body h1 {
577 |   font-size: 2em;
578 | }
579 | 
580 | .markdown-body h1,
581 | .markdown-body h2 {
582 |   border-bottom: 1px solid #eaecef;
583 |   padding-bottom: .3em;
584 | }
585 | 
586 | .markdown-body h2 {
587 |   font-size: 1.5em;
588 | }
589 | 
590 | .markdown-body h3 {
591 |   font-size: 1.25em;
592 | }
593 | 
594 | .markdown-body h4 {
595 |   font-size: 1em;
596 | }
597 | 
598 | .markdown-body h5 {
599 |   font-size: .875em;
600 | }
601 | 
602 | .markdown-body h6 {
603 |   color: #6a737d;
604 |   font-size: .85em;
605 | }
606 | 
607 | .markdown-body ol,
608 | .markdown-body ul {
609 |   padding-left: 2em;
610 | }
611 | 
612 | .markdown-body ol ol,
613 | .markdown-body ol ul,
614 | .markdown-body ul ol,
615 | .markdown-body ul ul {
616 |   margin-bottom: 0;
617 |   margin-top: 0;
618 | }
619 | 
620 | .markdown-body li {
621 |   word-wrap: break-all;
622 | }
623 | 
624 | .markdown-body li>p {
625 |   margin-top: 16px;
626 | }
627 | 
628 | .markdown-body li+li {
629 |   margin-top: .25em;
630 | }
631 | 
632 | .markdown-body dl {
633 |   padding: 0;
634 | }
635 | 
636 | .markdown-body dl dt {
637 |   font-size: 1em;
638 |   font-style: italic;
639 |   font-weight: 600;
640 |   margin-top: 16px;
641 |   padding: 0;
642 | }
643 | 
644 | .markdown-body dl dd {
645 |   margin-bottom: 16px;
646 |   padding: 0 16px;
647 | }
648 | 
649 | .markdown-body table {
650 |   display: block;
651 |   overflow: auto;
652 |   width: 100%;
653 | }
654 | 
655 | .markdown-body table th {
656 |   font-weight: 600;
657 | }
658 | 
659 | .markdown-body table td,
660 | .markdown-body table th {
661 |   border: 1px solid #dfe2e5;
662 |   padding: 6px 13px;
663 | }
664 | 
665 | .markdown-body table tr {
666 |   background-color: #fff;
667 |   border-top: 1px solid #c6cbd1;
668 | }
669 | 
670 | .markdown-body table tr:nth-child(2n) {
671 |   background-color: #f6f8fa;
672 | }
673 | 
674 | .markdown-body img {
675 |   background-color: #fff;
676 |   box-sizing: content-box;
677 |   max-width: 100%;
678 | }
679 | 
680 | .markdown-body img[align=right] {
681 |   padding-left: 20px;
682 | }
683 | 
684 | .markdown-body img[align=left] {
685 |   padding-right: 20px;
686 | }
687 | 
688 | .markdown-body code {
689 |   background-color: rgba(27,31,35,.05);
690 |   border-radius: 3px;
691 |   font-size: 85%;
692 |   margin: 0;
693 |   padding: .2em .4em;
694 | }
695 | 
696 | .markdown-body pre {
697 |   word-wrap: normal;
698 | }
699 | 
700 | .markdown-body pre>code {
701 |   background: transparent;
702 |   border: 0;
703 |   font-size: 100%;
704 |   margin: 0;
705 |   padding: 0;
706 |   white-space: pre;
707 |   word-break: normal;
708 | }
709 | 
710 | .markdown-body .highlight {
711 |   margin-bottom: 16px;
712 | }
713 | 
714 | .markdown-body .highlight pre {
715 |   margin-bottom: 0;
716 |   word-break: normal;
717 | }
718 | 
719 | .markdown-body .highlight pre,
720 | .markdown-body pre {
721 |   background-color: #f6f8fa;
722 |   border-radius: 3px;
723 |   font-size: 85%;
724 |   line-height: 1.45;
725 |   overflow: auto;
726 |   padding: 16px;
727 | }
728 | 
729 | .markdown-body pre code {
730 |   background-color: transparent;
731 |   border: 0;
732 |   display: inline;
733 |   line-height: inherit;
734 |   margin: 0;
735 |   max-width: auto;
736 |   overflow: visible;
737 |   padding: 0;
738 |   word-wrap: normal;
739 | }
740 | 
741 | .markdown-body .commit-tease-sha {
742 |   color: #444d56;
743 |   display: inline-block;
744 |   font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
745 |   font-size: 90%;
746 | }
747 | 
748 | .markdown-body .blob-wrapper {
749 |   border-bottom-left-radius: 3px;
750 |   border-bottom-right-radius: 3px;
751 |   overflow-x: auto;
752 |   overflow-y: hidden;
753 | }
754 | 
755 | .markdown-body .blob-wrapper-embedded {
756 |   max-height: 240px;
757 |   overflow-y: auto;
758 | }
759 | 
760 | .markdown-body .blob-num {
761 |   -moz-user-select: none;
762 |   -ms-user-select: none;
763 |   -webkit-user-select: none;
764 |   color: rgba(27,31,35,.3);
765 |   cursor: pointer;
766 |   font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
767 |   font-size: 12px;
768 |   line-height: 20px;
769 |   min-width: 50px;
770 |   padding-left: 10px;
771 |   padding-right: 10px;
772 |   text-align: right;
773 |   user-select: none;
774 |   vertical-align: top;
775 |   white-space: nowrap;
776 |   width: 1%;
777 | }
778 | 
779 | .markdown-body .blob-num:hover {
780 |   color: rgba(27,31,35,.6);
781 | }
782 | 
783 | .markdown-body .blob-num:before {
784 |   content: attr(data-line-number);
785 | }
786 | 
787 | .markdown-body .blob-code {
788 |   line-height: 20px;
789 |   padding-left: 10px;
790 |   padding-right: 10px;
791 |   position: relative;
792 |   vertical-align: top;
793 | }
794 | 
795 | .markdown-body .blob-code-inner {
796 |   color: #24292e;
797 |   font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
798 |   font-size: 12px;
799 |   overflow: visible;
800 |   white-space: pre;
801 |   word-wrap: normal;
802 | }
803 | 
804 | .markdown-body .pl-token.active,
805 | .markdown-body .pl-token:hover {
806 |   background: #ffea7f;
807 |   cursor: pointer;
808 | }
809 | 
810 | .markdown-body kbd {
811 |   background-color: #fafbfc;
812 |   border: 1px solid #d1d5da;
813 |   border-bottom-color: #c6cbd1;
814 |   border-radius: 3px;
815 |   box-shadow: inset 0 -1px 0 #c6cbd1;
816 |   color: #444d56;
817 |   display: inline-block;
818 |   font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
819 |   line-height: 10px;
820 |   padding: 3px 5px;
821 |   vertical-align: middle;
822 | }
823 | 
824 | .markdown-body :checked+.radio-label {
825 |   border-color: #0366d6;
826 |   position: relative;
827 |   z-index: 1;
828 | }
829 | 
830 | .markdown-body .tab-size[data-tab-size="1"] {
831 |   -moz-tab-size: 1;
832 |   tab-size: 1;
833 | }
834 | 
835 | .markdown-body .tab-size[data-tab-size="2"] {
836 |   -moz-tab-size: 2;
837 |   tab-size: 2;
838 | }
839 | 
840 | .markdown-body .tab-size[data-tab-size="3"] {
841 |   -moz-tab-size: 3;
842 |   tab-size: 3;
843 | }
844 | 
845 | .markdown-body .tab-size[data-tab-size="4"] {
846 |   -moz-tab-size: 4;
847 |   tab-size: 4;
848 | }
849 | 
850 | .markdown-body .tab-size[data-tab-size="5"] {
851 |   -moz-tab-size: 5;
852 |   tab-size: 5;
853 | }
854 | 
855 | .markdown-body .tab-size[data-tab-size="6"] {
856 |   -moz-tab-size: 6;
857 |   tab-size: 6;
858 | }
859 | 
860 | .markdown-body .tab-size[data-tab-size="7"] {
861 |   -moz-tab-size: 7;
862 |   tab-size: 7;
863 | }
864 | 
865 | .markdown-body .tab-size[data-tab-size="8"] {
866 |   -moz-tab-size: 8;
867 |   tab-size: 8;
868 | }
869 | 
870 | .markdown-body .tab-size[data-tab-size="9"] {
871 |   -moz-tab-size: 9;
872 |   tab-size: 9;
873 | }
874 | 
875 | .markdown-body .tab-size[data-tab-size="10"] {
876 |   -moz-tab-size: 10;
877 |   tab-size: 10;
878 | }
879 | 
880 | .markdown-body .tab-size[data-tab-size="11"] {
881 |   -moz-tab-size: 11;
882 |   tab-size: 11;
883 | }
884 | 
885 | .markdown-body .tab-size[data-tab-size="12"] {
886 |   -moz-tab-size: 12;
887 |   tab-size: 12;
888 | }
889 | 
890 | .markdown-body .task-list-item {
891 |   list-style-type: none;
892 | }
893 | 
894 | .markdown-body .task-list-item+.task-list-item {
895 |   margin-top: 3px;
896 | }
897 | 
898 | .markdown-body .task-list-item input {
899 |   margin: 0 .2em .25em -1.6em;
900 |   vertical-align: middle;
901 | }
902 | 
903 | .markdown-body hr {
904 |   border-bottom-color: #eee;
905 | }
906 | 
907 | .markdown-body .pl-0 {
908 |   padding-left: 0!important;
909 | }
910 | 
911 | .markdown-body .pl-1 {
912 |   padding-left: 4px!important;
913 | }
914 | 
915 | .markdown-body .pl-2 {
916 |   padding-left: 8px!important;
917 | }
918 | 
919 | .markdown-body .pl-3 {
920 |   padding-left: 16px!important;
921 | }
922 | 
923 | .markdown-body .pl-4 {
924 |   padding-left: 24px!important;
925 | }
926 | 
927 | .markdown-body .pl-5 {
928 |   padding-left: 32px!important;
929 | }
930 | 
931 | .markdown-body .pl-6 {
932 |   padding-left: 40px!important;
933 | }
934 | 
935 | .markdown-body .pl-7 {
936 |   padding-left: 48px!important;
937 | }
938 | 
939 | .markdown-body .pl-8 {
940 |   padding-left: 64px!important;
941 | }
942 | 
943 | .markdown-body .pl-9 {
944 |   padding-left: 80px!important;
945 | }
946 | 
947 | .markdown-body .pl-10 {
948 |   padding-left: 96px!important;
949 | }
950 | 
951 | .markdown-body .pl-11 {
952 |   padding-left: 112px!important;
953 | }
954 | 
955 | .markdown-body .pl-12 {
956 |   padding-left: 128px!important;
957 | }

--------------------------------------------------------------------------------
/src/core/theme.js:
--------------------------------------------------------------------------------
1 | module.exports = `
2 | 	a{color:var(--primary-color);}a:hover{color:var(--primary-hover-color);}a:active{color:var(--primary-active-color);}::-moz-selection{background:var(--primary-color);}::selection{background:var(--primary-color);}html{--antd-wave-shadow-color:var(--primary-color);}[ant-click-animating-without-extra-node="true"]::after,.ant-click-animating-node{-webkit-box-shadow:0 0 0 0 var(--primary-color);box-shadow:0 0 0 0 var(--primary-color);-webkit-box-shadow:0 0 0 0 var(--antd-wave-shadow-color);box-shadow:0 0 0 0 var(--antd-wave-shadow-color);}@-webkit-keyframes waveEffect{100%{-webkit-box-shadow:0 0 0 var(--primary-color);box-shadow:0 0 0 var(--primary-color);-webkit-box-shadow:0 0 0 6px var(--antd-wave-shadow-color);box-shadow:0 0 0 6px var(--antd-wave-shadow-color);}}@keyframes waveEffect{100%{-webkit-box-shadow:0 0 0 var(--primary-color);box-shadow:0 0 0 var(--primary-color);-webkit-box-shadow:0 0 0 6px var(--antd-wave-shadow-color);box-shadow:0 0 0 6px var(--antd-wave-shadow-color);}}.ant-alert-info .ant-alert-icon{color:var(--primary-color);}.ant-anchor-ink-ball{border:2px solid var(--primary-color);}.ant-anchor-link-active > .ant-anchor-link-title{color:var(--primary-color);}.ant-select-auto-complete.ant-select .ant-input:focus,.ant-select-auto-complete.ant-select .ant-input:hover{border-color:var(--primary-hover-color);}.ant-select-selection:hover,.ant-select:not(.ant-select-disabled):hover .ant-select-selector{border-color:var(--primary-hover-color);}.ant-select-focused .ant-select-selection,.ant-select-selection:focus,.ant-select-selection:active,.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-select-open .ant-select-selection{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon,.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon{color:var(--primary-color);}.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){background-color:var(--primary-shadow-color);}.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),.ant-select-item-option-selected:not(.ant-select-item-option-disabled){background-color:var(--primary-shadow-color);}.ant-input:hover{border-color:var(--primary-hover-color);}.ant-input:focus{border-color:var(--primary-hover-color);}.ant-input:focus,.ant-input-focused{box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-input-group-addon .ant-select-open .ant-select-selection,.ant-input-group-addon .ant-select-focused .ant-select-selection{color:var(--primary-color);}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover{border-color:var(--primary-hover-color);}.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled){border-color:var(--primary-hover-color);}.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper-focused{border-color:var(--primary-hover-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-input-search .ant-input:hover,.ant-input-search .ant-input:focus{border-color:var(--primary-hover-color);}.ant-input-search .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary),.ant-input-search .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary){border-color:var(--primary-hover-color);}.ant-btn:hover,.ant-btn:focus{color:var(--primary-hover-color);border-color:var(--primary-hover-color);}.ant-btn:active,.ant-btn.active{border-color:var(--primary-active-color);}.ant-btn-primary{background-color:var(--primary-color);border-color:var(--primary-color);}.ant-btn-primary:hover,.ant-btn-primary:focus{color:#fff;background-color:var(--primary-hover-color);border-color:var(--primary-hover-color);}.ant-btn-primary:active,.ant-btn-primary.active{background-color:var(--primary-active-color);border-color:var(--primary-active-color);}.ant-btn-danger:hover,.ant-btn-danger:focus{color:#fff;background-color:#ff7875;border-color:#ff7875;}.ant-btn-dangerous:hover,.ant-btn-dangerous:focus{color:#ff7875;border-color:#ff7875;}.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child){border-right-color:var(--primary-hover-color);border-left-color:var(--primary-hover-color);}.ant-btn-group .ant-btn-primary:first-child:not(:last-child){border-right-color:var(--primary-hover-color);}.ant-btn-group .ant-btn-primary:last-child:not(:first-child),.ant-btn-group .ant-btn-primary + .ant-btn-primary{border-left-color:var(--primary-hover-color);}.ant-btn-ghost:hover,.ant-btn-ghost:focus{color:var(--primary-hover-color);border-color:var(--primary-hover-color);}.ant-btn-ghost:active,.ant-btn-ghost.active{color:var(--primary-active-color);border-color:var(--primary-active-color);}.ant-btn-dashed:hover,.ant-btn-dashed:focus{color:var(--primary-hover-color);border-color:var(--primary-hover-color);}.ant-btn-dashed:active,.ant-btn-dashed.active{color:var(--primary-active-color);border-color:var(--primary-active-color);}.ant-btn-link{color:var(--primary-color);}.ant-btn-link:hover,.ant-btn-link:focus{color:var(--primary-hover-color);border-color:transparent;}.ant-btn-link:active,.ant-btn-link.active{color:var(--primary-active-color);border-color:transparent;}.ant-btn-background-ghost.ant-btn-primary{color:var(--primary-color);border-color:var(--primary-color);}.ant-btn-background-ghost.ant-btn-primary:hover,.ant-btn-background-ghost.ant-btn-primary:focus{color:var(--primary-hover-color);border-color:var(--primary-hover-color);}.ant-btn-background-ghost.ant-btn-primary:active,.ant-btn-background-ghost.ant-btn-primary.active{color:var(--primary-active-color);border-color:var(--primary-active-color);}.ant-btn-background-ghost.ant-btn-link{color:var(--primary-color);}.ant-btn-background-ghost.ant-btn-link:hover,.ant-btn-background-ghost.ant-btn-link:focus{color:var(--primary-hover-color);}.ant-btn-background-ghost.ant-btn-link:active,.ant-btn-background-ghost.ant-btn-link.active{color:var(--primary-active-color);}.ant-badge-status-processing{background-color:var(--primary-color);}.ant-badge-status-processing::after{border:1px solid var(--primary-color);}.ant-badge-status-blue{background:var(--primary-color);}.ant-breadcrumb a:hover{color:var(--primary-hover-color);}.ant-menu-item > a:hover{color:var(--primary-color);}.ant-menu-item:hover,.ant-menu-item-active,.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,.ant-menu-submenu-active,.ant-menu-submenu-title:hover{color:var(--primary-color);}.ant-menu-item-selected{color:var(--primary-color);}.ant-menu-item-selected > a,.ant-menu-item-selected > a:hover{color:var(--primary-color);}.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{background-color:var(--primary-shadow-color);}.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before{background:-webkit-gradient(linear, left top, right top, from(var(--primary-color)), to(var(--primary-color)));background:-webkit-linear-gradient(left, var(--primary-color), var(--primary-color));background:linear-gradient(to right, var(--primary-color), var(--primary-color));}.ant-menu-vertical .ant-menu-submenu-selected,.ant-menu-vertical-left .ant-menu-submenu-selected,.ant-menu-vertical-right .ant-menu-submenu-selected{color:var(--primary-color);}.ant-menu-vertical .ant-menu-submenu-selected > a,.ant-menu-vertical-left .ant-menu-submenu-selected > a,.ant-menu-vertical-right .ant-menu-submenu-selected > a{color:var(--primary-color);}.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu:hover,.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-submenu-selected{color:var(--primary-color);border-bottom:2px solid var(--primary-color);}.ant-menu-horizontal > .ant-menu-item > a:hover{color:var(--primary-color);}.ant-menu-horizontal > .ant-menu-item-selected > a{color:var(--primary-color);}.ant-menu-vertical .ant-menu-item::after,.ant-menu-vertical-left .ant-menu-item::after,.ant-menu-vertical-right .ant-menu-item::after,.ant-menu-inline .ant-menu-item::after{border-right:3px solid var(--primary-color);}.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected{background-color:var(--primary-color);}.ant-menu.ant-menu-dark .ant-menu-item-selected,.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected{background-color:var(--primary-color);}.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover{background-color:var(--primary-color);color:#fff;}.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected{color:var(--primary-color);border-bottom:2px solid var(--primary-color);}.ant-menu-submenu-selected{color:var(--primary-color);}.ant-menu-item a:hover{color:var(--primary-color);}.ant-menu-submenu:hover>.ant-menu-submenu-title>.ant-menu-submenu-arrow,.ant-menu-submenu:hover>.ant-menu-submenu-title>.ant-menu-submenu-expand-icon{color:var(--primary-color);}.ant-dropdown-menu-item-selected,.ant-dropdown-menu-submenu-title-selected,.ant-dropdown-menu-item-selected > a,.ant-dropdown-menu-submenu-title-selected > a{color:var(--primary-color);background-color:var(--primary-shadow-color);}.ant-dropdown-menu-item:hover,.ant-dropdown-menu-submenu-title:hover{background-color:var(--primary-shadow-color);}.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected,.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a{background:var(--primary-color);}.ant-fullcalendar-value:hover{background:var(--primary-shadow-color);}.ant-fullcalendar-value:active{background:var(--primary-color);}.ant-fullcalendar-today .ant-fullcalendar-value,.ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value{-webkit-box-shadow:0 0 0 1px var(--primary-color) inset;box-shadow:0 0 0 1px var(--primary-color) inset;}.ant-fullcalendar-fullscreen .ant-fullcalendar-month:hover,.ant-fullcalendar-fullscreen .ant-fullcalendar-date:hover{background:var(--primary-shadow-color);}.ant-fullcalendar-fullscreen .ant-fullcalendar-month:active,.ant-fullcalendar-fullscreen .ant-fullcalendar-date:active{background:var(--primary-shadow-color);}.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-month,.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date{border-top-color:var(--primary-color);}.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value,.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value{color:var(--primary-color);}.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month,.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date{background:var(--primary-shadow-color);}.ant-radio-wrapper:hover .ant-radio,.ant-radio:hover .ant-radio-inner,.ant-radio-input:focus + .ant-radio-inner{border-color:var(--primary-color);}.ant-radio-checked::after{border:1px solid var(--primary-color);}.ant-radio-inner::after{background-color:var(--primary-color);}.ant-radio-checked .ant-radio-inner{border-color:var(--primary-color);}.ant-radio-button-wrapper:hover{color:var(--primary-color);}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),.ant-radio-button-wrapper-checked{color:var(--primary-color);border-color:var(--primary-color);-webkit-box-shadow:-1px 0 0 0 var(--primary-color);box-shadow:-1px 0 0 0 var(--primary-color);}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:var(--primary-hover-color);border-color:var(--primary-hover-color);-webkit-box-shadow:-1px 0 0 0 var(--primary-hover-color);box-shadow:-1px 0 0 0 var(--primary-hover-color);}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child{border-color:var(--primary-color);}.ant-radio-button-wrapper-checked::before{background-color:var(--primary-color) !important;opacity:0.1;}.ant-radio-button-wrapper-checked:first-child{border-color:var(--primary-color);-webkit-box-shadow:none !important;box-shadow:none !important;}.ant-radio-button-wrapper-checked:hover{color:var(--primary-hover-color);border-color:var(--primary-hover-color);-webkit-box-shadow:-1px 0 0 0 var(--primary-hover-color);box-shadow:-1px 0 0 0 var(--primary-hover-color);}.ant-radio-button-wrapper-checked:active{color:var(--primary-active-color);border-color:var(--primary-active-color);-webkit-box-shadow:-1px 0 0 0 var(--primary-active-color);box-shadow:-1px 0 0 0 var(--primary-active-color);}.ant-radio-button-wrapper-checked:focus-within{outline:3px solid rgba(24, 144, 255, 0.06);}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){color:#fff;background:var(--primary-color);border-color:var(--primary-color);}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#fff;background:var(--primary-hover-color);border-color:var(--primary-hover-color);}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#fff;background:var(--primary-active-color);border-color:var(--primary-active-color);}.ant-radio-button-wrapper-checked:not([class*=" ant-radio-button-wrapper-disabled"]).ant-radio-button-wrapper:first-child{border-right-color:var(--primary-color);}.ant-card-actions > li > span:hover{color:var(--primary-color);-webkit-transition:color 0.3s;transition:color 0.3s;}.ant-card-actions > li > span a:hover{color:var(--primary-color);}.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{color:var(--primary-color);}.ant-tabs-extra-content .ant-tabs-new-tab:hover{color:var(--primary-color);border-color:var(--primary-color);}.ant-tabs .ant-tabs-card-bar.ant-tabs-bottom-bar .ant-tabs-tab-active{color:var(--primary-color);}.ant-tabs-ink-bar{background-color:var(--primary-color);}.ant-tabs-nav .ant-tabs-tab:hover{color:var(--primary-hover-color);}.ant-tabs-nav .ant-tabs-tab:active{color:var(--primary-active-color);}.ant-tabs-nav .ant-tabs-tab-active{color:var(--primary-color);}.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{color:var(--primary-color);}.ant-cascader-picker:focus .ant-cascader-input{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-cascader-picker-label:hover + .ant-cascader-input{border-color:var(--primary-hover-color);}.ant-cascader-menu-item:hover{background:var(--primary-shadow-color);}.ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner,.ant-checkbox-input:focus + .ant-checkbox-inner{border-color:var(--primary-color);}.ant-checkbox-checked::after{border:1px solid var(--primary-color);}.ant-checkbox-checked .ant-checkbox-inner{background-color:var(--primary-color);border-color:var(--primary-color);}.ant-checkbox-indeterminate .ant-checkbox-inner::after{background-color:var(--primary-color);}.ant-calendar-selected-day .ant-calendar-date{background:var(--primary-shadow-color);}.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){border-color:var(--primary-color);}.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled){border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-calendar-header a:hover{color:var(--primary-hover-color);}.ant-calendar-date:hover{background:var(--primary-shadow-color);}.ant-calendar-date:active{background:var(--primary-hover-color);}.ant-calendar-today .ant-calendar-date{color:var(--primary-color);border-color:var(--primary-color);}.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date{background:var(--primary-color);}.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date:hover,.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date:hover{background:var(--primary-hover-color);}.ant-calendar-selected-date .ant-calendar-date,.ant-calendar-selected-start-date .ant-calendar-date,.ant-calendar-selected-end-date .ant-calendar-date{background:var(--primary-color);color:#fff;}.ant-calendar-selected-date .ant-calendar-date:hover,.ant-calendar-selected-start-date .ant-calendar-date:hover,.ant-calendar-selected-end-date .ant-calendar-date:hover{background:var(--primary-color);color:#fff;}.ant-calendar .ant-calendar-ok-btn{background-color:var(--primary-color);border-color:var(--primary-color);}.ant-calendar .ant-calendar-ok-btn:hover,.ant-calendar .ant-calendar-ok-btn:focus{background-color:var(--primary-hover-color);border-color:var(--primary-hover-color);}.ant-calendar .ant-calendar-ok-btn:active,.ant-calendar .ant-calendar-ok-btn.active{background-color:var(--primary-active-color);border-color:var(--primary-active-color);}.ant-calendar-range .ant-calendar-input:hover,.ant-calendar-range .ant-calendar-time-picker-input:hover{border-color:var(--primary-hover-color);}.ant-calendar-range .ant-calendar-input:focus,.ant-calendar-range .ant-calendar-time-picker-input:focus{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-calendar-month-panel-header a:hover{color:var(--primary-hover-color);}.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month{background:var(--primary-color);}.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover{background:var(--primary-color);}.ant-calendar-year-panel-header a:hover{color:var(--primary-hover-color);}.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year{background:var(--primary-color);}.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover{background:var(--primary-color);}.ant-calendar-decade-panel-header a:hover{color:var(--primary-hover-color);}.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade{background:var(--primary-color);}.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover{background:var(--primary-color);}.ant-calendar-range .ant-calendar-in-range-cell::before{background:var(--primary-shadow-color);}.ant-calendar-time-picker-select li:hover{background:var(--primary-shadow-color);}.ant-calendar-month-panel-month:hover{background:var(--primary-shadow-color);}.ant-calendar-year-panel-year:hover{background:var(--primary-shadow-color);}.ant-calendar-decade-panel-decade:hover{background:var(--primary-shadow-color);}.ant-calendar-week-number .ant-calendar-body tr:hover{background:var(--primary-shadow-color);}.ant-calendar-week-number .ant-calendar-body tr.ant-calendar-active-week{background:var(--primary-shadow-color);}.ant-time-picker-input:hover{border-color:var(--primary-hover-color);}.ant-time-picker-input:focus{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-time-picker-panel-select li:hover{background:var(--primary-shadow-color);}.ant-picker-focused,.ant-picker:hover{border-color:var(--primary-color);}.ant-picker-focused{box-shadow:var(--primary-shadow-color) 0px 0px 0px 2px;}.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before{border-color:var(--primary-color);}.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner{color:rgb(255, 255, 255);background:var(--primary-color);}.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,.ant-picker-cell-in-view.ant-picker-cell-in-range::before{background:var(--primary-shadow-color);}.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after{border-top:1px dashed var(--primary-color);border-bottom:1px dashed var(--primary-color);}tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child::after,tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after,.ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range)::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after{border-left:1px dashed var(--primary-color);}.ant-picker-year-panel .ant-picker-cell-range-hover-end::after,.ant-picker-quarter-panel .ant-picker-cell-range-hover-end::after,.ant-picker-month-panel .ant-picker-cell-range-hover-end::after,tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child::after,tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after,.ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range)::after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after{border-right:1px dashed var(--primary-color);}.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,.ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before{background:var(--primary-shadow-color);}.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{background:var(--primary-shadow-color);}.ant-picker-range .ant-picker-active-bar{background:var(--primary-color);}.ant-tag-checkable:not(.ant-tag-checkable-checked):hover{color:var(--primary-color);}.ant-tag-checkable-checked{background-color:var(--primary-color);}.ant-tag-checkable:active{background-color:var(--primary-active-color);}.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover{background-color:var(--primary-shadow-color);}.has-error .ant-transfer-list-search:not([disabled]):hover{border-color:var(--primary-hover-color);border-right-width:1px !important;}.has-error .ant-transfer-list-search:not([disabled]):focus{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.is-validating.has-feedback .ant-form-item-children-icon{color:var(--primary-color);}.ant-input-number:hover{border-color:var(--primary-hover-color);}.ant-input-number:focus{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-input-number-handler:hover .ant-input-number-handler-up-inner,.ant-input-number-handler:hover .ant-input-number-handler-down-inner{color:var(--primary-hover-color);}.ant-input-number:hover{border-color:var(--primary-hover-color);border-right-width:1px !important;}.ant-input-number-focused{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-list-item-meta-title > a:hover{color:var(--primary-color);}.ant-spin{color:var(--primary-color);}.ant-spin-dot-item{background-color:var(--primary-color);}.ant-pagination-item:focus,.ant-pagination-item:hover{border-color:var(--primary-color);}.ant-pagination-item:focus a,.ant-pagination-item:hover a{color:var(--primary-color);}.ant-pagination-item-active{border-color:var(--primary-color);}.ant-pagination-item-active a{color:var(--primary-color);}.ant-pagination-item-active:focus,.ant-pagination-item-active:hover{border-color:var(--primary-hover-color);}.ant-pagination-item-active:focus a,.ant-pagination-item-active:hover a{color:var(--primary-hover-color);}.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon{color:var(--primary-color);}.ant-pagination-prev:hover a,.ant-pagination-next:hover a{border-color:var(--primary-hover-color);}.ant-pagination-prev:focus .ant-pagination-item-link,.ant-pagination-next:focus .ant-pagination-item-link,.ant-pagination-prev:hover .ant-pagination-item-link,.ant-pagination-next:hover .ant-pagination-item-link{color:var(--primary-color);border-color:var(--primary-color);}.ant-pagination-options-quick-jumper input:hover{border-color:var(--primary-hover-color);}.ant-pagination-options-quick-jumper input:focus{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-pagination-simple .ant-pagination-simple-pager input:hover{border-color:var(--primary-color);}.ant-mention-wrapper .ant-mention-editor:hover{border-color:var(--primary-hover-color);}.ant-mention-wrapper .ant-mention-editor:focus{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-mention-wrapper.ant-mention-active:not(.disabled) .ant-mention-editor{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-mention-dropdown-notfound.ant-mention-dropdown-item .anticon-loading{color:var(--primary-color);}.ant-mentions:hover{border-color:var(--primary-hover-color);}.ant-mentions:focus{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-mentions-focused{border-color:var(--primary-hover-color);-webkit-box-shadow:0 0 0 2px var(--primary-shadow-color);box-shadow:0 0 0 2px var(--primary-shadow-color);}.ant-mention-dropdown-item:hover{background-color:var(--primary-shadow-color);}.ant-mention-dropdown-item.focus,.ant-mention-dropdown-item-active{background-color:var(--primary-shadow-color);}.ant-mentions-dropdown-menu-item:hover{background-color:var(--primary-shadow-color);}.ant-mentions-dropdown-menu-item-active{background-color:var(--primary-shadow-color);}.ant-message-info .anticon,.ant-message-loading .anticon{color:var(--primary-color);}.ant-modal-confirm-info .ant-modal-confirm-body > .anticon{color:var(--primary-color);}.anticon.ant-notification-notice-icon-info{color:var(--primary-color);}.ant-page-header-back-button{color:var(--primary-color);}.ant-page-header-back-button:focus,.ant-page-header-back-button:hover{color:var(--primary-hover-color);}.ant-page-header-back-button:active{color:var(--primary-active-color);}.ant-progress-circle-path{stroke:var(--primary-color);}.ant-progress-success-bg,.ant-progress-bg{background-color:var(--primary-color);}.ant-slider{width:100%;}.ant-slider-track{background-color:var(--primary-hover-color);}.ant-slider-handle{border:solid 2px var(--primary-hover-color);}.ant-slider-handle:focus{border-color:var(--primary-hover-color);box-shadow:0 0 0 5px var(--primary-shadow-color);outline:none;}.ant-slider-handle.ant-tooltip-open{border-color:var(--primary-color);}.ant-slider:hover .ant-slider-track{background-color:var(--primary-hover-color);}.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open){border-color:var(--primary-hover-color);}.ant-slider-dot-active{border-color:var(--primary-active-color);}.ant-steps-item-icon > .ant-steps-icon{color:var(--primary-color);}.ant-steps-item-process .ant-steps-item-icon{background-color:#fff;border-color:var(--primary-color);}.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot{background:var(--primary-color);}.ant-steps-item-process .ant-steps-item-icon{background:var(--primary-color);}.ant-steps-item-finish .ant-steps-item-icon{border-color:var(--primary-color);}.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon{color:var(--primary-color);}.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot{background:var(--primary-color);}.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title::after{background-color:var(--primary-color);}.ant-steps-item-finish > .ant-steps-item-tail::after{background-color:var(--primary-color);}.ant-steps-item[role="button"]:not(.ant-steps-item-process):hover .ant-steps-item-title,.ant-steps-item[role="button"]:not(.ant-steps-item-process):hover .ant-steps-item-description{color:var(--primary-color);}.ant-steps-item[role="button"]:not(.ant-steps-item-process):hover .ant-steps-item-icon{border-color:var(--primary-color);}.ant-steps-item[role="button"]:not(.ant-steps-item-process):hover .ant-steps-item-icon .ant-steps-icon{color:var(--primary-color);}.ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon{color:var(--primary-color);}.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon{background:var(--primary-color);}.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{background-color:var(--primary-color);}.ant-switch-checked.ant-switch-loading .ant-switch-loading-icon{color:var(--primary-color);}.ant-switch-checked{background-color:var(--primary-color);}.ant-table-thead > tr > th .ant-table-filter-selected.anticon-filter{color:var(--primary-color);}.ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-up.on,.ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-down.on{color:var(--primary-color);}.ant-table-filter-dropdown .ant-dropdown-menu .ant-dropdown-submenu-contain-selected .ant-dropdown-menu-submenu-title::after{color:var(--primary-color);}.ant-table-filter-dropdown-link{color:var(--primary-color);}.ant-table-filter-dropdown-link:hover{color:var(--primary-hover-color);}.ant-table-filter-dropdown-link:active{color:var(--primary-active-color);}.ant-table-row-expand-icon:focus,.ant-table-row-expand-icon:hover{color:var(--primary-hover-color);}.ant-table-tbody>tr.ant-table-row-selected>td{background:var(--primary-shadow-color);}.ant-table-tbody>tr.ant-table-row-selected:hover>td{background:var(--primary-shadow-color);}.ant-timeline-item-head-blue{color:var(--primary-color);border-color:var(--primary-color);}.ant-select-tree-checkbox-wrapper:hover .ant-select-tree-checkbox-inner,.ant-select-tree-checkbox:hover .ant-select-tree-checkbox-inner,.ant-select-tree-checkbox-input:focus + .ant-select-tree-checkbox-inner{border-color:var(--primary-color);}.ant-select-tree-checkbox-checked::after{border:1px solid var(--primary-color);}.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner{background-color:var(--primary-color);border-color:var(--primary-color);}.ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner::after{background-color:var(--primary-color);}.ant-select-tree li span.ant-select-icon_loading .ant-select-switcher-loading-icon{color:var(--primary-color);}.ant-select-tree li span.ant-select-tree-switcher.ant-select-tree-switcher_open .ant-select-switcher-loading-icon,.ant-select-tree li span.ant-select-tree-switcher.ant-select-tree-switcher_close .ant-select-switcher-loading-icon{color:var(--primary-color);}.ant-select-tree li .ant-select-tree-node-content-wrapper:hover{background-color:var(--primary-shadow-color);}.ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected{background-color:var(--primary-shadow-color);}.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox .ant-tree-checkbox-inner,.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox .ant-tree-checkbox-inner{border-color:var(--primary-color);}.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after,.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after{border-color:var(--primary-color);}.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before,.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before{background:var(--primary-color);}.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner,.ant-tree-checkbox:hover .ant-tree-checkbox-inner,.ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner{border-color:var(--primary-color);}.ant-tree-checkbox-checked::after{border:1px solid var(--primary-color);}.ant-tree-checkbox-checked .ant-tree-checkbox-inner{background-color:var(--primary-color);border-color:var(--primary-color);}.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after{background-color:var(--primary-color);}.ant-tree li.drag-over > span[draggable]{background-color:var(--primary-color);}.ant-tree li.drag-over-gap-top > span[draggable]{border-top-color:var(--primary-color);}.ant-tree li.drag-over-gap-bottom > span[draggable]{border-bottom-color:var(--primary-color);}.ant-tree li.ant-tree-treenode-loading span.ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-loading-icon,.ant-tree li.ant-tree-treenode-loading span.ant-tree-switcher.ant-tree-switcher_close .ant-tree-switcher-loading-icon{color:var(--primary-color);}.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover::before,.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper:hover::before{background:var(--primary-shadow-color);}.ant-tree li .ant-tree-node-content-wrapper:hover{background-color:var(--primary-shadow-color);}.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:var(--primary-shadow-color);}.ant-tree-checkbox-checked.ant-tree-checkbox-disabled .ant-tree-checkbox-inner{background-color:#f5f5f5;}.ant-select-tree .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected{background-color:var(--primary-shadow-color);}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:var(--primary-shadow-color);}.ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before,.ant-tree.ant-tree-directory .ant-tree-treenode-selected::before{background:var(--primary-color);}.ant-typography a{color:var(--primary-color);}.ant-typography a:focus,.ant-typography a:hover{color:var(--primary-hover-color);}.ant-typography a:active{color:var(--primary-active-color);}.ant-typography-expand,.ant-typography-edit,.ant-typography-copy{color:var(--primary-color);}.ant-typography-expand:focus,.ant-typography-edit:focus,.ant-typography-copy:focus,.ant-typography-expand:hover,.ant-typography-edit:hover,.ant-typography-copy:hover{color:var(--primary-hover-color);}.ant-typography-expand:active,.ant-typography-edit:active,.ant-typography-copy:active{color:var(--primary-active-color);}.ant-upload.ant-upload-select-picture-card:hover{border-color:var(--primary-color);}.ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled){border-color:var(--primary-active-color);}.ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover{border-color:var(--primary-hover-color);}.ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon{color:var(--primary-hover-color);}
3 | `;

--------------------------------------------------------------------------------